/* ═══════════════════════════════════════════════════════════════════
   LANG+WOLF Consulting — Website
   Aufgebaut auf dem Strukturentwurf langwolf_wireframe_v4_6.html.
   Design-Tokens, Layout und Klassennamen sind bewusst uebernommen,
   damit ein Abgleich mit dem Entwurf moeglich bleibt.

   Ergaenzt gegenueber dem Entwurf:
   - mobile Navigation (Burger, scrollbares Panel)
   - Sektion "So arbeiten wir mit deinen Zahlen"
   - Anmeldeformular in der Selbsttest-Sektion
   - aufklappbare Team-Biografien
   - Kontaktformular-Dialog
   Entfallen: die schwarze Wireframe-Meta-Leiste.
   ═══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --navy:#1F3864;
  --blue:#2E5090;
  --orange:#F5A623;
  --green:#375623;
  --lg:#70AD47;
  --bg:#F5F5F5;
  --surf:#FFFFFF;
  --bd:rgba(0,0,0,0.07);
  --txt:#1a1a1a;
  --mut:#666;
  --fnt:#aaa;
  --r:8px; --rl:12px; --t:0.2s ease;
  --nav-h:64px;
}

html{scroll-behavior:smooth;}
/* Sprungziele nicht unter die fixierte Leiste rutschen lassen */
section[id]{scroll-margin-top:calc(var(--nav-h) + 12px);}

body{font-family:'Noto Sans',sans-serif;background:var(--surf);color:var(--txt);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;padding-bottom:86px;}
h1,h2,h3,h4,.logo-m{font-family:'Montserrat',sans-serif;}
img,svg{max-width:100%;}

/* Tastaturbedienung sichtbar halten */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px;border-radius:3px;
}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 18px;z-index:9999;font-family:'Montserrat',sans-serif;font-size:13px;}
.skip:focus{left:8px;top:8px;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}

/* ═══ NAV ═══ */
nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,0.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd);}
.ni{max-width:1280px;margin:0 auto;padding:0 2.5rem;display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:20px;}
.logo-link{text-decoration:none;display:inline-flex;align-items:center;flex-shrink:0;}
.logo-link img{height:38px;width:auto;display:block;}
.nl{display:flex;gap:22px;list-style:none;}
.nl a{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:500;color:var(--mut);text-decoration:none;letter-spacing:0.02em;transition:color var(--t);white-space:nowrap;}
.nl a:hover,.nl a.active{color:var(--navy);}
.nr{display:flex;align-items:center;gap:10px;}
.nki{background:transparent;border:1px solid var(--bd);padding:5px 14px;border-radius:20px;font-size:12px;font-weight:500;color:var(--mut);font-family:'Montserrat',sans-serif;cursor:pointer;transition:all var(--t);white-space:nowrap;}
.nki:hover{border-color:var(--navy);color:var(--navy);}
.ncta{padding:9px 22px;background:var(--navy);color:#fff;border:none;border-radius:var(--r);font-size:12px;font-weight:700;font-family:'Montserrat',sans-serif;cursor:pointer;letter-spacing:0.03em;transition:background var(--t);white-space:nowrap;text-decoration:none;display:inline-block;}
.ncta:hover{background:var(--blue);}

/* Burger — nur mobil sichtbar */
.nburger{display:none;width:40px;height:40px;border:1px solid var(--bd);border-radius:var(--r);background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex-shrink:0;}
.nburger span{display:block;width:18px;height:2px;background:var(--navy);transition:transform var(--t),opacity var(--t);}
.nburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ═══ LAYOUT ═══ */
.w{max-width:1280px;margin:0 auto;padding:0 2.5rem;}
.stag{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
h2.sh{font-family:'Montserrat',sans-serif;font-size:34px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:14px;letter-spacing:-0.01em;}
p.sd{font-size:15px;color:var(--mut);line-height:1.75;max-width:580px;}
p.sd+p.sd{margin-top:12px;}
.sec{padding:88px 0;border-top:1px solid var(--bd);}
.secg{background:var(--bg);}

/* ═══ HERO ═══ */
.hero{background:var(--navy);padding:90px 0 70px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 75% 50%,rgba(46,80,144,0.65) 0%,transparent 68%);pointer-events:none;}
.hero-g{display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center;position:relative;z-index:1;}
.htag{display:inline-flex;align-items:center;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.7);font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;padding:5px 13px;border-radius:20px;margin-bottom:20px;letter-spacing:0.1em;text-transform:uppercase;}
.hero h1{font-size:44px;font-weight:700;color:#fff;line-height:1.18;margin-bottom:20px;letter-spacing:-0.02em;}
.hero h1 em{font-style:italic;color:rgba(255,255,255,0.45);font-weight:300;}
.hsub{font-size:15px;color:rgba(255,255,255,0.62);line-height:1.8;margin-bottom:32px;max-width:480px;}
.hbtns{display:flex;gap:12px;flex-wrap:wrap;}
.bw{padding:12px 24px;background:#fff;color:var(--navy);border:none;border-radius:var(--r);font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:transform var(--t);text-decoration:none;display:inline-block;}
.bw:hover{transform:translateY(-1px);}
.bow{padding:12px 24px;background:transparent;color:rgba(255,255,255,0.75);border:1px solid rgba(255,255,255,0.2);border-radius:var(--r);font-family:'Montserrat',sans-serif;font-size:13px;cursor:pointer;}
.bow:hover{border-color:rgba(255,255,255,0.45);}
.hstats{display:flex;gap:32px;margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.1);flex-wrap:wrap;}
.hsv{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#fff;}
.hsl{font-size:11px;color:rgba(255,255,255,0.38);margin-top:3px;letter-spacing:0.02em;}

/* Hero rechts — Video. Zwei-Klick-Loesung: YouTube laedt erst nach Klick,
   damit beim Seitenaufbau keine Verbindung zu Google entsteht. */
.video-card{background:rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.1);border-radius:var(--rl);overflow:hidden;}
.video-inner{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;position:relative;width:100%;border:none;background:transparent;padding:0;}
.video-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(31,56,100,0.5),rgba(0,0,0,0.3));}
.video-inner .vthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Liegt ein Standbild vor, traegt es den Titel schon selbst — das Textlabel
   laege sonst mitten darauf. Es bleibt im DOM, damit die Ersatzmeldung aus
   main.js weiter greift, falls die Video-ID einmal fehlt; dann ist aber auch
   das Standbild zu entfernen. */
.vthumb ~ .video-lbl{display:none;}
.play-btn{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.15);border:2px solid rgba(255,255,255,0.4);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:background var(--t);}
.video-inner:hover .play-btn{background:rgba(255,255,255,0.25);}
.play-tri{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:18px solid rgba(255,255,255,0.9);margin-left:3px;}
.video-lbl{font-family:'Montserrat',sans-serif;font-size:13px;color:rgba(255,255,255,0.6);position:relative;z-index:1;}
.video-cap{padding:14px 18px;font-family:'Montserrat',sans-serif;font-size:12px;color:rgba(255,255,255,0.4);border-top:1px solid rgba(255,255,255,0.07);}
.video-hint{font-size:11px;color:rgba(255,255,255,0.28);margin-top:5px;line-height:1.5;}
.video-card iframe{display:block;width:100%;aspect-ratio:16/9;border:0;}

/* ═══ HERAUSFORDERUNG ═══ */
.hzg{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-top:48px;}
.hzl{list-style:none;}
.hzi{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--bd);}
.hzi:first-child{padding-top:0;}
.hzi:last-child{border-bottom:none;}
.hzn{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--blue);width:22px;flex-shrink:0;padding-top:2px;}
.hzt{font-size:14px;color:var(--mut);line-height:1.65;}
.hzbox{background:var(--navy);border-radius:var(--rl);padding:30px;position:sticky;top:calc(var(--nav-h) + 30px);}
.hzbt{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:12px;}
.hzbx{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:400;font-style:italic;color:rgba(255,255,255,0.88);line-height:1.6;}
.icta{display:flex;align-items:center;gap:14px;margin-top:28px;padding:16px 20px;background:var(--bg);border-radius:var(--r);flex-wrap:wrap;}
.icta p{font-size:13px;color:var(--mut);flex:1;min-width:180px;}
.bsm{padding:8px 18px;background:var(--navy);color:#fff;border:none;border-radius:var(--r);font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block;}
.bsm:hover{background:var(--blue);}

/* ═══ LOESUNG ═══ */
.lsg{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-top:48px;}
.qb{background:var(--navy);border-radius:var(--rl);padding:26px 28px;margin-bottom:20px;}
.qb q{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:300;font-style:italic;color:rgba(255,255,255,0.88);line-height:1.6;display:block;margin-bottom:10px;quotes:none;}
.qb cite{font-size:11px;color:rgba(255,255,255,0.32);font-style:normal;}
.gl{list-style:none;}
.gi{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px solid var(--bd);}
.gi:last-child{border-bottom:none;}
.ga{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--blue);flex-shrink:0;padding-top:1px;}
.gt{font-size:14px;color:var(--mut);line-height:1.55;}
.tbox{background:var(--bg);border-radius:var(--rl);padding:22px;margin-bottom:16px;}
.ttag{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);margin-bottom:8px;}
.tbox h4{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:var(--navy);margin-bottom:7px;}
.tbox p{font-size:13px;color:var(--mut);line-height:1.6;margin-bottom:8px;}
.tbox p:last-child{margin-bottom:0;}
.tbox p.nt{font-size:13px;color:var(--mut);}

/* ═══ ACCORDION ═══ */
.acc{overflow:hidden;}
.aci{border-bottom:1px solid var(--bd);}
.aci:last-child{border-bottom:none;}
.acb{width:calc(100% + 20px);margin:0 -10px;display:flex;align-items:center;justify-content:space-between;padding:14px 10px;background:none;border:none;border-radius:8px;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500;color:var(--txt);text-align:left;gap:12px;transition:background var(--t),color var(--t);}
.acb:hover{color:var(--navy);background:#F0F4FA;}
.acb:hover .aci2{background:#fff;color:var(--blue);}
.aci2{width:28px;height:28px;border-radius:50%;background:var(--blue);border:1.5px solid var(--blue);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#fff;flex-shrink:0;transition:transform var(--t),background var(--t),color var(--t);line-height:1;}
.acbd{padding:0 0 14px;font-size:13px;color:var(--mut);line-height:1.7;display:none;}
.acbd.open{display:block;}
.acbd p+p{margin-top:10px;}
.acb.open .aci2{transform:rotate(45deg);}
.acbd ul{list-style:none;display:flex;flex-direction:column;gap:5px;}
.acbd ul li{font-size:13px;color:var(--mut);padding-left:14px;position:relative;}
.acbd ul li::before{content:"—";position:absolute;left:0;color:var(--blue);}

.accbox{background:var(--bg);border-radius:var(--rl);overflow:hidden;}
.accbox .aci{padding:0 20px;border-bottom:1px solid var(--bd);}
.accbox .aci:last-child{border-bottom:none;}
.accbox .acb{padding:14px 10px;}
.accbox .acbd{padding:0 0 14px;}

/* ═══ PAKETE ═══ */
.pkg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;}
.pk{background:var(--surf);border:1px solid var(--bd);border-radius:var(--rl);padding:26px 22px;display:flex;flex-direction:column;transition:box-shadow var(--t),transform var(--t);}
.pk:hover{box-shadow:0 4px 20px rgba(0,0,0,0.08);transform:translateY(-2px);}
.pk.m{background:var(--navy);border-color:var(--navy);}
.pkt{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);margin-bottom:6px;}
.pk.m .pkt{color:rgba(255,255,255,0.3);}
.pkn{font-family:'Montserrat',sans-serif;font-size:21px;font-weight:700;color:var(--navy);margin-bottom:3px;}
.pk.m .pkn{color:#fff;}
.pks{font-size:12px;color:var(--mut);font-style:italic;margin-bottom:18px;}
.pk.m .pks{color:rgba(255,255,255,0.3);}
.pkl{list-style:none;margin-bottom:16px;flex:1;}
.pkl li{font-size:13px;color:var(--mut);padding:6px 0 6px 13px;position:relative;border-bottom:1px solid var(--bd);}
.pkl li:last-child{border-bottom:none;}
.pkl li::before{content:"—";position:absolute;left:0;color:var(--blue);font-size:11px;}
.pk.m .pkl li{color:rgba(255,255,255,0.62);border-color:rgba(255,255,255,0.07);}
.pk.m .pkl li::before{color:rgba(255,255,255,0.22);}
.pknu{font-size:12px;color:var(--mut);line-height:1.5;padding-top:12px;border-top:1px solid var(--bd);}
.pk.m .pknu{color:rgba(255,255,255,0.38);border-color:rgba(255,255,255,0.08);}
.pki{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:500;color:var(--blue);margin-top:8px;}
.pk.m .pki{color:rgba(255,255,255,0.28);}

/* ═══ PROZESS ═══ */
.stl{list-style:none;margin-top:40px;max-width:720px;}
.sti{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid var(--bd);}
.sti:last-child{border-bottom:none;}
.stc{width:38px;height:38px;border-radius:50%;background:var(--surf);border:2px solid var(--bd);color:var(--navy);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;flex-shrink:0;margin-top:2px;}
.stt{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;}
.stn{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;color:var(--navy);margin-bottom:4px;}
.std{font-size:13px;color:var(--mut);line-height:1.65;}

/* ═══ ARBEITSWEISE — "So arbeiten wir mit deinen Zahlen" ═══ */
.awg{display:grid;grid-template-columns:1fr 340px;gap:60px;align-items:start;margin-top:40px;}
.awt p{font-size:14px;color:var(--mut);line-height:1.8;margin-bottom:16px;max-width:640px;}
.awt p:last-child{margin-bottom:0;}
.awbox{background:var(--navy);border-radius:var(--rl);padding:28px;position:sticky;top:calc(var(--nav-h) + 30px);}
.awbox h4{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.35;}
.awbox p{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.7;}
.awbox p+p{margin-top:10px;}

/* ═══ E1 · STANDORTBESTIMMUNG ═══
   Raster und Kasten kommen von .awg und .awbox darueber. Neu sind nur die
   Aufzaehlung und die Schaltflaeche. */
/* Kaesten, die ihre Flaeche aus --bg beziehen, verschwinden auf einer grauen
   Sektion. Betrifft seit der Umstellung vom 02.10.2026 "Unser Angebot"
   (Zusatzleistungen, CTA-Leiste) und schon vorher "Unsere Loesung"
   (Technologie-Kasten, Accordion). Auf grauem Grund kehren sie sich um. */
.secg .tbox,.secg .accbox,.secg .icta,.secg .tc{background:var(--surf);border:1px solid var(--bd);}

.sbk{background:var(--surf);border:1px solid var(--bd);border-radius:var(--rl);padding:34px 36px;margin-top:40px;}
.sbg{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start;}
.sbb{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--bd);}
.sbb:last-of-type{padding-bottom:0;margin-bottom:0;border-bottom:none;}
.sbh{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;}
.sbn{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--blue);}
.sbt{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:var(--navy);}
.sbp{font-size:14px;color:var(--mut);line-height:1.8;max-width:640px;}
.sbp+.sbp{margin-top:12px;}
.sbp+.gl{margin-top:10px;}
/* Der Foerderkasten klebt im Kasten mit, solange gescrollt wird. */
.sbf{top:calc(var(--nav-h) + 30px);}
.sbcta{margin-top:26px;}
.bmd{padding:12px 24px;background:var(--navy);color:#fff;border:none;border-radius:var(--r);font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:background var(--t);text-decoration:none;display:inline-block;}
.bmd:hover{background:var(--blue);}

/* ═══ KACHELN ═══ */
.kach{background:var(--navy);padding:80px 0;}
.kach .stag{color:rgba(255,255,255,0.3);}
.kach h2.sh{color:#fff;}
.kach p.sd{color:rgba(255,255,255,0.48);}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px;}
.tile{background:rgba(255,255,255,0.05);border-radius:var(--rl);padding:20px 18px;transition:background var(--t);}
.tile:hover{background:rgba(255,255,255,0.09);}
.tii{width:34px;height:34px;border-radius:var(--r);background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.tii svg{width:16px;height:16px;}
.tif{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.27);margin-bottom:4px;}
.tin{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;color:#fff;margin-bottom:6px;line-height:1.3;}
.tid{font-size:12px;color:rgba(255,255,255,0.4);line-height:1.6;}

/* ═══ ERGEBNISSE ═══ */
.dtag{display:inline-flex;align-items:center;background:#FFF8E1;border:1px solid #FFD54F;color:#7B4F00;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;font-family:'Montserrat',sans-serif;margin-bottom:22px;}
.fbc{background:var(--bg);border-radius:var(--rl);padding:26px;margin-bottom:24px;}
.fbm{font-size:12px;color:var(--mut);margin-bottom:18px;font-style:italic;}
.fbr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;}
.fbl h5{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--green);margin-bottom:7px;}
.fbl p,.fbl li{font-size:13px;color:var(--mut);line-height:1.6;}
.fbl ul{list-style:none;}
.fbl li{padding:3px 0 3px 12px;position:relative;}
.fbl li::before{content:"—";position:absolute;left:0;color:var(--green);font-size:11px;}
.qg{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.qc{background:var(--bg);border-radius:var(--rl);padding:22px;}
.qc blockquote{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:300;font-style:italic;color:var(--navy);line-height:1.55;margin-bottom:10px;}
.qc cite{font-size:12px;color:var(--mut);font-style:normal;}

/* Kundenvideos: helle Variante der Hero-Videokarte fuer die Sektion
   Ergebnisse. auto-fit zentriert eine einzelne Kachel, solange das
   zweite Video noch unsichtbar ist. */
.tvg{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,560px));justify-content:center;gap:24px;margin-bottom:24px;}
.tv{display:flex;flex-direction:column;}
.tv[hidden]{display:none;} /* sonst uebersteuert display:flex das hidden-Attribut */
.video-card.hell{background:var(--bg);border:1px solid #E2E6EE;}
.video-card.hell .video-inner{background:var(--navy);}
.video-card.hell .video-cap{color:var(--mut);border-top:1px solid #E2E6EE;}
.video-card.hell .video-hint{color:#9AA3B2;}
.tvq{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:300;font-style:italic;color:var(--navy);line-height:1.55;margin:16px 2px 8px;}
.tvc{font-size:12px;color:var(--mut);font-style:normal;margin:0 2px;}

/* Zitat-Karussell. Eine Karte je Ansicht am Handy, zwei bzw. drei auf
   groesseren Bildschirmen (flex-basis unten). Pfeile im Stil der
   Aufklapp-Kreise: erst voll blau, beim Zeigen hell. */
.krs-fenster{overflow:hidden;}
.krs-spur{display:flex;gap:14px;transition:transform .45s ease;}
.krs-spur .qc{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;}
.krs-spur .qc blockquote{flex:1;}
.krs-steuer{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px;}
.krs-pfeil{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--blue);background:var(--blue);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 2px;transition:background var(--t),color var(--t);}
.krs-pfeil:hover{background:#fff;color:var(--blue);}
.krs-punkte{display:flex;gap:8px;}
.krs-punkt{width:9px;height:9px;border-radius:50%;border:none;background:#C9D2E0;cursor:pointer;padding:0;transition:background var(--t);}
.krs-punkt.aktiv{background:var(--blue);}
@media(min-width:720px){.krs-spur .qc{flex-basis:calc((100% - 14px)/2);}}
@media(min-width:1100px){.krs-spur .qc{flex-basis:calc((100% - 28px)/3);}}

/* ═══ CFO-SELBSTTEST ═══ */
.dw{background:var(--navy);position:relative;overflow:hidden;border:none;}
.dw::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 75% 50%,rgba(46,80,144,0.55) 0%,transparent 68%);pointer-events:none;}
.dw-inner{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1;}
.dw .stag{color:rgba(255,255,255,0.32);justify-content:center;display:flex;}
.dw h2.sh{color:#fff;margin-bottom:18px;}
.dw h2.sh em{color:rgba(255,255,255,0.55);font-weight:300;font-style:italic;}
.dw-sub{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:600;color:var(--orange);margin-bottom:22px;letter-spacing:-0.005em;}
.dw-body{font-size:15px;color:rgba(255,255,255,0.6);line-height:1.7;max-width:640px;margin:0 auto 32px;}

/* ── Anmeldeformular CFO-Selbsttest ─────────────────────────────────
   Eigenes Formular seit dem 07.10.2026, vorher kam es mit eigenem CSS von
   MailerLite. Die frueheren .ml-*-Regeln und css/mailerlite.css sind damit
   entfallen.

   Steht auf dem Navy-Grund der Sektion, deshalb helles Feld und weisser
   Knopf wie bei .dw-cta daneben. Die Farbwerte fuer Hinweistext und Link
   sind dieselben wie vorher (#8492AA und #D7DBE3), damit sich am Erscheinungs-
   bild nichts aendert. */
.dw-embed{max-width:560px;margin:0 auto;}

.nlf-reihe{display:flex;gap:10px;align-items:stretch;}

.nlf-feld{
  flex:1 1 auto;min-width:0;
  padding:12px 16px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:var(--r);
  font-family:'Noto Sans',sans-serif;font-size:14px;
  color:#fff;
}
.nlf-feld::placeholder{color:rgba(255,255,255,0.4);}
.nlf-feld:focus{
  outline:none;
  border-color:rgba(255,255,255,0.5);
  background:rgba(255,255,255,0.12);
}
.nlf-feld:focus-visible{outline:2px solid var(--orange);outline-offset:1px;}

.nlf-knopf{
  flex:0 0 auto;
  padding:12px 24px;
  background:#fff;color:var(--navy);
  border:none;border-radius:var(--r);
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:0.03em;cursor:pointer;white-space:nowrap;
  transition:transform var(--t),box-shadow var(--t);
}
.nlf-knopf:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,0.18);}
.nlf-knopf:disabled{opacity:0.6;cursor:default;}
.nlf-knopf:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

.nlf-recht{
  margin-top:16px;
  font-family:'Noto Sans',sans-serif;
  font-size:12px;line-height:1.6;color:#8492AA;
}
.nlf-recht a{color:#D7DBE3;text-decoration:underline;}
.nlf-opt{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-family:'Noto Sans',sans-serif;font-size:13px;line-height:1.6;color:#D7DBE3;cursor:pointer;}
.nlf-opt input{flex:none;width:16px;height:16px;margin-top:3px;accent-color:var(--orange);cursor:pointer;}
.nlf-ohne{margin-top:8px;font-family:'Noto Sans',sans-serif;font-size:12px;line-height:1.6;color:#8492AA;}

.nlf-fehler{
  margin-top:12px;
  font-size:13px;color:#FFB4A8;
}

/* Danke-Meldung. Wortlaut wie frueher in MailerLite unter
   "Success message". */
.nlf-danke h4{font-size:20px;color:#fff;margin-bottom:8px;}
.nlf-danke p{color:rgba(255,255,255,0.65);font-size:14px;}

@media(max-width:560px){
  .nlf-reihe{flex-direction:column;}
  .nlf-knopf{width:100%;}
}

.dw-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:#fff;color:var(--navy);border:none;border-radius:var(--r);font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:0.03em;transition:transform var(--t),box-shadow var(--t);white-space:nowrap;}
.dw-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,0.18);}
.dw-cta-arrow{transition:transform var(--t);display:inline-block;color:var(--navy);}
.dw-cta:hover .dw-cta-arrow{transform:translateX(3px);}
.dw-consent{margin-top:16px;font-size:12px;color:rgba(255,255,255,0.42);line-height:1.6;max-width:520px;margin-left:auto;margin-right:auto;}
.dw-consent a{color:rgba(255,255,255,0.62);}
.dw-hint{display:block;margin-top:14px;font-size:12px;color:rgba(255,255,255,0.38);}

/* ═══ TEAM ═══ */
.tg{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px;}
.tc{background:var(--bg);border-radius:var(--rl);padding:22px;display:flex;gap:18px;align-items:flex-start;}
.tp{width:80px;height:80px;border-radius:var(--r);background:#ddd;display:flex;align-items:center;justify-content:center;font-size:10px;color:#777;text-align:center;flex-shrink:0;line-height:1.4;overflow:hidden;}
.tp img{width:100%;height:100%;object-fit:cover;}
.tcb{flex:1;min-width:0;}
.tn{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:700;color:var(--navy);margin-bottom:2px;}
.tr{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;color:var(--blue);margin-bottom:9px;letter-spacing:0.02em;}
/* ⚠ .tags und .tag sind seit dem 02.10.2026 UNBENUTZT. Die Schwerpunkt-Tags
   in den Team-Karten sind auf Wunsch von DW ganz entfallen, weil beide
   dasselbe anbieten und die Aufzaehlung einen Unterschied suggeriert hat,
   den es nicht gibt. Die Vorlagen bleiben stehen, falls sie zurueckkommen. */
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.tag{font-family:'Montserrat',sans-serif;font-size:10px;font-weight:500;padding:3px 9px;border-radius:20px;background:rgba(46,80,144,0.07);color:var(--blue);}
/* aufklappbare Biografie */
.tbio{margin-top:12px;border-top:1px solid var(--bd);}
.tbio .acb{font-size:12px;padding:11px 10px 8px;}
.tbio .acbd{font-size:13px;line-height:1.7;padding-top:8px;}
.tbio .acbd p{margin-bottom:10px;}
.tbio .acbd p:last-child{margin-bottom:0;}
.tintro{margin-top:20px;background:var(--surf);border:1px solid var(--bd);border-radius:var(--rl);padding:4px 20px;}
.tintro .acbd p{margin-bottom:12px;font-size:13px;line-height:1.75;}
.tintro .acbd p:last-child{margin-bottom:0;}

/* ═══ FAQ ═══ */
.faqg{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:8px;align-items:start;}

/* ═══ CTA ═══ */
.ctasec{background:var(--navy);padding:88px 0;}
.ctai{max-width:600px;margin:0 auto;padding:0 2.5rem;text-align:center;}
.ctai .stag{justify-content:center;display:flex;color:rgba(255,255,255,0.3);margin-bottom:10px;}
.ctai h2.sh{color:#fff;margin-bottom:12px;}
.ctai p{font-size:15px;color:rgba(255,255,255,0.52);margin-bottom:30px;line-height:1.75;}
.ctai p.ctalead{margin-bottom:14px;}
.ctai p.ctaalt{font-size:14px;color:rgba(255,255,255,0.42);margin-bottom:30px;}
.ctai p.ctaalt a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.ctai p.ctaalt a:hover{color:var(--orange);}
.ctabtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.bcta{padding:13px 28px;background:#fff;color:var(--navy);border:none;border-radius:var(--r);font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:transform var(--t);text-decoration:none;display:inline-block;}
.bcta:hover{transform:translateY(-1px);}
.bghost{padding:13px 28px;background:transparent;color:rgba(255,255,255,0.62);border:1px solid rgba(255,255,255,0.18);border-radius:var(--r);font-family:'Montserrat',sans-serif;font-size:13px;cursor:pointer;}
.bghost:hover{border-color:rgba(255,255,255,0.4);color:rgba(255,255,255,0.85);}
.ctanote{font-size:12px;color:rgba(255,255,255,0.28);margin-top:18px;}
.ctanote a{color:rgba(255,255,255,0.45);}

/* ═══ KONTAKTFORMULAR-DIALOG ═══ */
.mdl{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(17,30,46,0.6);backdrop-filter:blur(3px);}
.mdl.open{display:flex;}
.mdlc{background:var(--surf);border-radius:var(--rl);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:30px;position:relative;}
.mdlc h3{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:var(--navy);margin-bottom:6px;}
.mdlc .mdls{font-size:13px;color:var(--mut);margin-bottom:20px;line-height:1.6;}
.mdlx{position:absolute;top:16px;right:16px;background:none;border:none;font-size:20px;color:var(--fnt);cursor:pointer;line-height:1;padding:4px 8px;}
.mdlx:hover{color:var(--navy);}
.fld{margin-bottom:14px;}
.fld label{display:block;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;color:var(--navy);margin-bottom:5px;letter-spacing:0.02em;}
.fld input,.fld textarea{width:100%;padding:10px 12px;border:1px solid var(--bd);border-radius:var(--r);font-size:14px;font-family:'Noto Sans',sans-serif;color:var(--txt);outline:none;background:var(--surf);}
.fld input:focus,.fld textarea:focus{border-color:var(--blue);}
.fld textarea{resize:vertical;min-height:110px;line-height:1.6;}
.fld .req{color:var(--orange);}
.fhp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.fsub{width:100%;padding:12px;background:var(--navy);color:#fff;border:none;border-radius:var(--r);font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;cursor:pointer;margin-top:4px;transition:background var(--t);}
.fsub:hover{background:var(--blue);}
.fsub:disabled{opacity:0.55;cursor:default;}
.fnote{font-size:11px;color:var(--fnt);margin-top:12px;line-height:1.6;}
.fnote a{color:var(--blue);}
.fmsg{margin-top:14px;padding:11px 14px;border-radius:var(--r);font-size:13px;line-height:1.6;display:none;}
.fmsg.ok{display:block;background:#EDF7ED;border:1px solid #C8E6C9;color:#2E5B31;}
.fmsg.err{display:block;background:#FDECEA;border:1px solid #F5C6C3;color:#8B2F26;}

/* ═══ FOOTER ═══ */
/* Fester Footer am unteren Bildschirmrand (Wunsch DW, 09.10.2026), damit
   Impressum, Datenschutz und Cookie-Einstellungen immer sichtbar sind.
   body bekommt unten Platz in Footerhoehe, sonst verdeckt er den Schluss
   der Seite. Unter 720px (im Media-Block unten) bleibt der Footer im
   normalen Fluss: dort bricht er mehrzeilig um und wuerde fest zu viel
   vom kleinen Schirm verdecken. */
footer{background:#111E2E;padding:24px 2.5rem;position:fixed;left:0;right:0;bottom:0;z-index:150;}
.fi{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
/* Im Footer die helle Fassung (logo-hell.svg). Die 0.75 von frueher waren noetig,
   solange dort die dunkle Marke stand; jetzt wuerde sie die Marke nur ausbleichen. */
.fi .logo-link img{height:30px;opacity:0.85;}
.flinks{display:flex;gap:20px;list-style:none;flex-wrap:wrap;}
.flinks a{font-family:'Montserrat',sans-serif;font-size:11px;color:rgba(255,255,255,0.28);text-decoration:none;}
.flinks a:hover{color:rgba(255,255,255,0.6);}
.fc{font-family:'Montserrat',sans-serif;font-size:11px;color:rgba(255,255,255,0.18);}

/* ═══ CHAT ═══ */
.cfab{position:fixed;bottom:104px;right:28px;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:7px;}
.clbl{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;background:rgba(31,56,100,0.9);color:#fff;padding:4px 10px;border-radius:20px;}
.cfb{width:50px;height:50px;border-radius:50%;background:var(--navy);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(31,56,100,0.35);}
.cfb svg{width:20px;height:20px;}
.cpan{display:none;flex-direction:column;position:fixed;bottom:166px;right:28px;width:320px;height:400px;max-height:calc(100vh - 120px);background:#fff;border-radius:var(--rl);box-shadow:0 8px 40px rgba(0,0,0,0.14);overflow:hidden;z-index:1001;}
.cpan.open{display:flex;}
.ch{padding:12px 15px;background:var(--navy);display:flex;align-items:center;gap:10px;}
.cav{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.12);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;flex-shrink:0;}
.cht{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;color:#fff;}
.chs{font-size:11px;color:rgba(255,255,255,0.32);}
.cx{margin-left:auto;background:none;border:none;color:rgba(255,255,255,0.38);cursor:pointer;font-size:16px;line-height:1;padding:4px;}
.cx:hover{color:#fff;}
.cms{flex:1;overflow-y:auto;padding:13px;display:flex;flex-direction:column;gap:9px;}
.msg{max-width:85%;padding:8px 12px;border-radius:9px;font-size:13px;line-height:1.5;white-space:pre-wrap;}
.msg.b{background:var(--bg);color:var(--txt);align-self:flex-start;border-radius:3px 9px 9px 9px;}
.msg.u{background:var(--navy);color:#fff;align-self:flex-end;border-radius:9px 3px 9px 9px;}
.csg{padding:0 11px 9px;display:flex;flex-wrap:wrap;gap:5px;}
.cs{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:500;padding:4px 10px;border-radius:20px;border:1px solid var(--bd);background:var(--bg);color:var(--blue);cursor:pointer;}
.cs:hover{border-color:var(--blue);}
.cir{padding:9px;border-top:1px solid var(--bd);display:flex;gap:7px;}
.ci{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--bd);border-radius:var(--r);font-size:13px;font-family:'Noto Sans',sans-serif;outline:none;}
.ci:focus{border-color:var(--blue);}
.csend{padding:7px 13px;background:var(--navy);color:#fff;border:none;border-radius:var(--r);font-size:13px;font-family:'Montserrat',sans-serif;font-weight:600;cursor:pointer;}
/* Der Assistent ist zum Launch ausgeblendet und wird per Konfiguration zugeschaltet. */
.cfab[hidden],.cpan[hidden]{display:none!important;}

/* ═══════════════ RESPONSIVE ═══════════════ */

/* Tablet und kleiner: Navigation klappt ins Panel */
@media(max-width:1100px){
  .nburger{display:flex;}
  .nl,.nr{
    display:none;
  }
  nav.open .nl,nav.open .nr{
    display:flex;
  }
  nav.open .nl{
    position:absolute;left:0;right:0;top:var(--nav-h);
    flex-direction:column;gap:0;
    background:var(--surf);border-bottom:1px solid var(--bd);
    padding:6px 2.5rem 14px;
    /* Wenn die Liste hoeher wird als der sichtbare Bereich, scrollt sie selbst,
       statt unter dem Viewport zu verschwinden. */
    max-height:calc(100vh - var(--nav-h) - 78px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 12px 24px rgba(0,0,0,0.06);
  }
  nav.open .nl li{border-bottom:1px solid var(--bd);}
  nav.open .nl li:last-child{border-bottom:none;}
  nav.open .nl a{display:block;padding:13px 0;font-size:14px;}
  nav.open .nr{
    position:absolute;left:0;right:0;
    top:auto;bottom:auto;
    transform:translateY(0);
    background:var(--surf);border-bottom:1px solid var(--bd);
    padding:12px 2.5rem;gap:10px;
    box-shadow:0 12px 24px rgba(0,0,0,0.06);
  }
  .nr .ncta{flex:1;text-align:center;padding:11px 18px;}
  .nr .nki{flex:1;padding:10px 14px;}
}

@media(max-width:960px){
  .hero-g,.hzg,.lsg,.pkg,.fbr,.qg,.tg,.faqg,.awg,.sbg{grid-template-columns:1fr;}
  .hzg,.lsg,.awg,.sbg{gap:36px;}
  .hzbox,.awbox{position:static;}
  .sbk{padding:26px 22px;}
  .tiles{grid-template-columns:repeat(2,1fr);}
  h2.sh{font-size:26px;}
  .hero h1{font-size:32px;}
  .hero{padding:60px 0 50px;}
  .sec{padding:64px 0;}
  .kach{padding:64px 0;}
}

@media(max-width:720px){
  .w,.ni,.ctai,footer{padding-left:1.25rem;padding-right:1.25rem;}
  nav.open .nl,nav.open .nr{padding-left:1.25rem;padding-right:1.25rem;}
  .hero h1{font-size:27px;}
  h2.sh{font-size:23px;}
  .dw-sub{font-size:16px;}
  .tiles{grid-template-columns:1fr;}
  .hstats{gap:22px;}
  .hbtns .bw,.hbtns .bow{flex:1;text-align:center;}
  .tc{flex-direction:column;}
  .fi{flex-direction:column;align-items:flex-start;gap:14px;}
  footer{position:static;}
  body{padding-bottom:0;}
  .fbc,.qc,.mdlc{padding:20px;}
  .cfab{bottom:18px;right:18px;}
  .cpan{right:12px;left:12px;width:auto;bottom:80px;}
  .dw-form input[type=email],.dw-form .dw-cta{width:100%;flex:1 1 100%;}
  .dw-cta{justify-content:center;}
}