/* ============================================================
   GE-BÄUDE Service E. Hulaj — shared site styles
   Navy + green-gradient brand · Space Grotesk / Hanken Grotesk
   ============================================================ */
:root{
  --navy:#0E1B33; --navy-2:#0A1426; --navy-3:#13254a;
  --line-d:rgba(159,180,207,.16); --line-d2:rgba(159,180,207,.28);
  --g1:#2F9E44; --g2:#5fb83f; --g3:#A3E635;
  --grad:linear-gradient(95deg,#36a647 0%,#7fc83f 55%,#A3E635 100%);
  --grad-soft:linear-gradient(120deg,#2f9e44,#9fd84a);
  --paper:#F4F6F1; --paper-2:#ECEFE7; --card:#FFFFFF;
  --ink:#0E1B33; --ink-2:#33424f; --muted:#65726B; --line:rgba(14,27,51,.10);
  --maxw:1240px;
  --shadow:0 1px 2px rgba(14,27,51,.04), 0 14px 40px -18px rgba(14,27,51,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Hanken Grotesk",system-ui,sans-serif;background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6;}
h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.04;margin:0;}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:13px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap;}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--grad);flex:0 0 auto;}
.eyebrow.on-dark{color:#9fc06a}
.eyebrow.on-dark .dot{box-shadow:0 0 12px var(--g3)}
.eyebrow.on-light{color:#2f7a3a}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;border-radius:999px;
  text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .16s ease,box-shadow .2s ease,background .2s;}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);color:#08220f;padding:15px 26px;box-shadow:0 12px 30px -8px rgba(95,184,63,.5);}
.btn-primary:hover{box-shadow:0 16px 38px -8px rgba(95,184,63,.6);transform:translateY(-2px)}
.btn-ghost{color:#fff;padding:15px 22px;border-color:var(--line-d2);background:rgba(255,255,255,.03)}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-dark{background:var(--navy);color:#fff;padding:15px 26px}
.btn-dark:hover{background:#16284c;transform:translateY(-2px)}
.btn-lg{padding:18px 32px;font-size:17px}

/* ---------- nav ---------- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .25s ease,border-color .25s,box-shadow .25s}
.site-nav.solid{background:rgba(11,18,34,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-d);}
.nav-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px 40px;transition:padding .25s}
.site-nav.solid .nav-in{padding:14px 40px}
.brand{display:flex;align-items:center;gap:13px}
.mark{width:46px;height:46px;border-radius:11px;background:#0E1B33 url('logo.jpg') center/cover no-repeat;
  box-shadow:0 0 0 1px var(--line-d2),0 8px 22px rgba(0,0,0,.35);flex:0 0 auto}
.wm{display:flex;flex-direction:column;line-height:1;color:#fff}
.wm b{font-family:"Space Grotesk";font-weight:700;font-size:19px;letter-spacing:.04em}
.wm span{font-size:9.5px;letter-spacing:.3em;color:#9fb0c4;margin-top:4px;font-weight:600;white-space:nowrap}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{color:#c4cedd;font-size:15px;font-weight:500;position:relative;transition:color .15s}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--grad);border-radius:2px}
.nav-cta{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:600;font-size:15px;
  padding:11px 19px;border-radius:999px;border:1px solid var(--line-d2);background:rgba(255,255,255,.04);transition:background .15s}
.nav-cta:hover{background:rgba(255,255,255,.1)}
.nav-cta .pin{width:7px;height:7px;border-radius:50%;background:var(--g3);box-shadow:0 0 10px var(--g3)}
.nav-burger{display:none}

/* mobile slide-down menu */
.mobile-menu{position:fixed;inset:0;z-index:29;background:rgba(11,18,34,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:40px;
  opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .25s,transform .25s}
.mobile-menu.open{opacity:1;pointer-events:auto;transform:none}
.mobile-menu a{color:#fff;font-family:"Space Grotesk";font-size:30px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--line-d)}
.mobile-menu a.cta{margin-top:24px;border:0;color:var(--g3)}

/* ---------- dark band base ---------- */
.dark{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.dark-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 80% at 80% 12%,#16294a 0%,var(--navy) 48%,var(--navy-2) 100%)}
.bldg-wrap{position:absolute;inset:0;z-index:1;pointer-events:none}
.bldg{width:100%;height:100%;display:block}

/* ---------- HERO (home, split A) ---------- */
.hero{min-height:760px;height:88vh;max-height:880px;display:flex;align-items:center}
.hero .wrap{position:relative;z-index:5;width:100%}
.hero-copy{max-width:600px}
.hero h1{font-size:clamp(46px,5.4vw,74px);margin-top:22px;color:#fff}
.hero p.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:#c3cdd9;max-width:470px;margin-top:24px}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-trust{margin-top:30px;display:flex;align-items:center;gap:11px;font-size:14px;color:#aeb9c6}
.hero-trust b{color:var(--g3);letter-spacing:.12em}
.hero-strip{position:absolute;left:0;right:0;bottom:0;z-index:5}
.hero-strip .wrap{display:flex;gap:8px 0;flex-wrap:wrap;font-size:12.5px;color:#93a3b6;letter-spacing:.05em;
  border-top:1px solid var(--line-d);padding-top:16px;padding-bottom:20px}
.hero-strip span{position:relative;padding-right:26px}
.hero-strip span:not(:last-child)::after{content:"";position:absolute;right:11px;top:50%;width:3px;height:3px;border-radius:50%;background:#56677d}

/* ---------- page header band (Leistungen / Kontakt) ---------- */
.page-head{padding:150px 0 92px;position:relative}
.page-head .wrap{position:relative;z-index:5}
.page-head h1{font-size:clamp(42px,5vw,68px);color:#fff;max-width:760px;margin-top:20px}
.page-head p{color:#c3cdd9;font-size:19px;max-width:560px;margin-top:22px}
.breadcrumb{font-size:13px;color:#8595aa;letter-spacing:.04em}
.breadcrumb a:hover{color:#cfd8e3}

/* ---------- section scaffolding ---------- */
section{position:relative}
.band{padding:104px 0}
.band-tight{padding:80px 0}
.sec-head{max-width:680px;margin-bottom:54px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(32px,3.4vw,46px);margin-top:18px}
.sec-head p{color:var(--muted);font-size:18px;margin-top:18px}

/* ---------- services grid ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 28px 32px;
  box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .25s ease,border-color .2s;overflow:hidden;display:block}
.svc:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(14,27,51,.05),0 26px 50px -22px rgba(14,27,51,.32);border-color:rgba(95,184,63,.4)}
.svc .num{font-family:"Space Grotesk";font-size:15px;font-weight:600;letter-spacing:.1em;color:#8aa06a}
.svc h3{font-size:23px;margin-top:16px}
.svc p{color:var(--muted);font-size:15.5px;margin-top:12px}
.svc .more{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:#2f7a3a}
.svc .more svg{transition:transform .2s}
.svc:hover .more svg{transform:translateX(4px)}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .25s ease}
.svc:hover::before{transform:scaleY(1)}

/* ---------- feature / why split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.feat-panel{position:relative;border-radius:22px;overflow:hidden;min-height:460px;background:var(--navy);box-shadow:0 30px 60px -30px rgba(14,27,51,.55)}
.feat-panel .coord{position:absolute;z-index:4;font-family:"Space Grotesk";font-size:11px;letter-spacing:.2em;color:#5d6e85}
.why-list{display:flex;flex-direction:column;gap:8px;margin-top:30px}
.why{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line)}
.why:first-child{border-top:0}
.why .wn{font-family:"Space Grotesk";font-weight:600;font-size:14px;color:#8aa06a;width:30px;flex:0 0 auto;padding-top:3px}
.why h3{font-size:20px}
.why p{color:var(--muted);font-size:15.5px;margin-top:6px}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat b{font-family:"Space Grotesk";font-size:clamp(38px,4.4vw,56px);font-weight:600;display:block;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:12px;color:#aab6c5;font-size:15px;letter-spacing:.02em}
.stat b em{font-style:normal;font-size:.55em}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{padding:30px 28px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.step .sn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;
  font-family:"Space Grotesk";font-weight:700;font-size:19px;color:#08220f;background:var(--grad)}
.step h3{font-size:20px;margin-top:20px}
.step p{color:var(--muted);font-size:15.5px;margin-top:10px}

/* ---------- CTA band (green) ---------- */
.cta-band{background:var(--grad-soft);color:#08220f;position:relative;overflow:hidden}
.cta-band .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-top:72px;padding-bottom:72px}
.cta-band h2{font-size:clamp(30px,3.4vw,44px);color:#0a2710;max-width:640px}
.cta-band p{color:#1d3a22;font-size:18px;margin-top:14px;max-width:520px}
.cta-band .blob{position:absolute;border-radius:50%;filter:blur(2px)}
.cta-band .b1{width:420px;height:420px;right:-120px;top:-180px;background:rgba(255,255,255,.16)}
.cta-band .b2{width:300px;height:300px;left:-100px;bottom:-160px;background:rgba(8,39,15,.10)}

/* ---------- leistungen detail rows ---------- */
.lrow{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;padding:64px 0;border-top:1px solid var(--line)}
.lrow:first-of-type{border-top:0}
.lrow.flip .lrow-media{order:2}
.lrow-media{position:relative}
.lrow-copy .num{font-family:"Space Grotesk";font-size:15px;font-weight:600;letter-spacing:.12em;color:#8aa06a}
.lrow-copy h2{font-size:clamp(28px,3vw,38px);margin-top:14px}
.lrow-copy p{color:var(--muted);font-size:17px;margin-top:18px}
.lrow-copy ul{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.lrow-copy li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.lrow-copy li::before{content:"";width:18px;height:18px;border-radius:50%;flex:0 0 auto;margin-top:1px;
  background:var(--grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;}

/* ---------- image placeholder ---------- */
.ph{position:relative;border-radius:18px;background:
  repeating-linear-gradient(135deg,#e6eadf 0 14px,#eef1ea 14px 28px);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:340px}
.ph.dark{background:repeating-linear-gradient(135deg,#13254a 0 14px,#16284c 14px 28px);border-color:var(--line-d)}
.ph .ph-tag{font-family:"Space Grotesk";font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#7d8a78;background:rgba(255,255,255,.7);padding:9px 14px;border-radius:8px;border:1px solid var(--line)}
.ph.dark .ph-tag{color:#9fb0c4;background:rgba(10,20,38,.55);border-color:var(--line-d)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.info-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 30px;box-shadow:var(--shadow)}
.info-row{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.info-row:first-child{border-top:0;padding-top:4px}
.info-ic{width:42px;height:42px;border-radius:11px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#2f7a3a}
.info-row .k{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.info-row .v{font-size:17px;margin-top:3px;color:var(--ink);font-weight:500}
.info-row .v a:hover{color:#2f7a3a}
.form{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{font-family:inherit;font-size:15.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 15px;transition:border-color .15s,box-shadow .15s; width: inherit}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#5fb83f;box-shadow:0 0 0 3px rgba(95,184,63,.18)}
.form .consent{display:block;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin:4px 0 4px}
.form .consent input{margin-top:3px}
.form-note{margin-top:14px;font-size:13px;color:var(--muted)}

/* Contact Form 7 integration: CF7 tags can't take inline style="", and
   wrap fields in an extra <span class="wpcf7-form-control-wrap"> — these
   rules keep the CF7-rendered form matching the original static markup. */
.form .wpcf7-form-control-wrap{display:block;width:100%}
.form .wpcf7-submit.btn-block{width:100%;justify-content:center}
.form .wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:12.5px;font-weight:500;color:#b3392f}
.form .wpcf7-spinner{margin-left:10px}

/* ---------- footer ---------- */
.footer{background:var(--navy-2);color:#c4cedd;position:relative;overflow:hidden}
.footer .dark-bg{background:radial-gradient(100% 120% at 15% -20%,#16294a 0%,var(--navy-2) 55%)}
.footer .wrap{position:relative;z-index:2;padding:72px 40px 36px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-d)}
.foot-brand .wm b{font-size:21px}
.foot-brand p{color:#94a3b6;font-size:15px;margin-top:20px;max-width:300px}
.foot-col h4{font-family:"Space Grotesk";font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#7f8ea2;font-weight:600;margin-bottom:18px}
.foot-col a,.foot-col p{display:block;color:#b6c2d1;font-size:15px;padding:6px 0;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:26px;flex-wrap:wrap}
.foot-bottom p{color:#7f8ea2;font-size:13.5px}
.foot-bottom .legal{display:flex;gap:22px}
.foot-bottom .legal a{color:#9aa8bb;font-size:13.5px}
.foot-bottom .legal a:hover{color:#fff}
.foot-bottom .credit,.foot-bottom .credit a{color:#9aa8bb;font-size:13.5px}
.foot-bottom .credit a:hover{color:#fff}

/* ---------- reveal animation ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .wrap{padding:30px 26px}
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;
    border:1px solid var(--line-d2);background:rgba(255,255,255,.04);cursor:pointer}
  .nav-burger span{width:18px;height:2px;background:#fff;position:relative;display:block}
  .nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff}
  .nav-burger span::before{top:-6px}.nav-burger span::after{top:6px}
  .svc-grid,.stats,.steps{grid-template-columns:1fr 1fr}
  .split,.contact-grid,.lrow,.lrow.flip .lrow-media{grid-template-columns:1fr;gap:34px}
  .lrow.flip .lrow-media{order:0}
  .foot-top{grid-template-columns:1fr 1fr;gap:30px}
  .hero{height:auto;padding:130px 0 90px}
  .bldg-wrap{opacity:.55}
  .hero-trust{margin-bottom: 55px}
}
@media (max-width:600px){
  .svc-grid,.stats,.steps,.fgrid,.lrow-copy ul{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .hero .bldg-wrap{display:none}
}