/* ===== fonts.css ===== */
/* Inter (SIL Open Font License 1.1), selbst gehostet – kein Drittanbieter-Request. Dateien in assets/fonts. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/inter-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/inter-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/inter-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/inter-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ===== tokens.css ===== */
/* ==================================================================
   SYNCLARO Website V2 — Design-Tokens
   Abgeleitet aus Saskias Entwurf (index.html / programm.html, 04.09.2026).
   Regeln: Weiß dominant, Greige als Zweitfläche, Tinte nur gezielt,
   Orange ausschließlich als Signal (Balken, Nummern, EIN Knopf),
   harte Kanten ohne Radien, EINE Textkante bei 20 px.
   ================================================================== */
:root{
  --nacht:#1A1A1A;
  --weiss:#FFFFFF;
  --papier:#FFFFFF;
  --greige:#F4F4F4;
  --dim:rgba(250,248,245,.62);        /* gedimmter Text auf Tinte */
  --dim-inv:rgba(26,26,26,.66);       /* gedimmter Text auf Papier: 4,9 Kontrast */
  --hair:rgba(250,248,245,.16);       /* Haarlinie auf Tinte */
  --hair-inv:rgba(26,26,26,.14);      /* Haarlinie auf Papier */
  --accent:#FF4F00;                   /* Signal: Balken, Flächen mit Tinte darauf */
  --accent-text:#BF3600;              /* Orange als Schrift auf Papier/Greige: 5,3 */
  --accent-dark:#FF8A55;              /* Orange als Schrift auf Tinte */
  --fehler:#B3261E;

  --disp:'Inter',-apple-system,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:20px;                         /* die eine Textkante */
  --gut:20px;
  --lesen:1000px;                     /* Lesebreite für Stapel und Texte */
  --wrap:1440px;                      /* Inhaltsbreite: Obergrenze aller Abschnitte auf breiten Bildschirmen (Niklas 05.09.2026) */
  --rand:max(0px,calc((100vw - var(--wrap)) / 2)); /* Außenrand bis zur Inhaltskante bei Vollbreiten-Lagen */
  --fs-body:clamp(17px,1.7vw,24.4px);
  --fs-disp:clamp(52px,8vw,115px);
  --fs-h1:clamp(36px,6.4vw,96px);
  --fs-h2:clamp(25px,3.4vw,50px);
  --fs-h3:clamp(18px,1.9vw,26px);
  --fs-small:clamp(14px,1.15vw,16.5px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --kopf:74px;                        /* Höhe der Kopfzeile für Farbmessung */
  --stack-h:74px;                     /* Kopf ohne Kampagnenleiste; das Skript misst die reale Höhe nach. */
  /* Abstandsreihe 16 · 26 · 42 · 68 (×1,618) */
  --a1:16px; --a2:clamp(20px,1.8vw,26px); --a3:clamp(30px,2.9vw,42px); --a4:clamp(46px,4.7vw,68px);
  --band-y:clamp(64px,9vw,124px);     /* Innenabstand eines Bandes oben/unten */
  --z-head:60; --z-drawer:80; --z-cinema:90;
}
@media (max-width:1000px){ :root{--stack-h:68px} }

/* ===== base.css ===== */
/* ==================================================================
   SYNCLARO Website V2 — Basis: Reset, Typografie, Kopf, Navigation,
   Drawer, Promo-Bar, Raster, Knöpfe, Formulare, FAQ, Querverweise,
   Handlungsband, Fuß, Kino-Overlay, Einblendungen, reduzierte Bewegung.
   ================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--papier);scroll-padding-top:calc(var(--stack-h) + 14px);-webkit-text-size-adjust:100%}
body{
  background:var(--papier);color:var(--nacht);
  font-family:var(--sans);font-weight:500;font-size:var(--fs-body);
  line-height:1.15;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;min-height:100svh;
}
body.drawerOpen{overflow:hidden}
img,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ctaBand :focus-visible,.btnAccent:focus-visible,.navCta .anfrage:focus-visible,.promoBar :focus-visible{outline-color:var(--nacht)}
.pageHeader:not(.inverted) .btnAccent:focus-visible,.pageHeader:not(.inverted) .navCta .anfrage:focus-visible,.promoBar :focus-visible{outline-color:var(--weiss)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--pad);top:-60px;z-index:100;background:var(--accent);color:var(--nacht);font-weight:800;padding:12px 18px;transition:top .2s}
.skip:focus{top:8px}

/* ---------- Typografie ---------- */
.disp{font-family:var(--disp);font-weight:800;font-size:var(--fs-disp);line-height:.95;letter-spacing:-.035em}
.mono{font-family:var(--mono)}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.onDark .label{color:var(--accent-dark)}
.lead{font-size:clamp(17px,1.6vw,23px);line-height:1.45;color:var(--dim-inv);max-width:56ch}
.lead b,.lead strong{color:var(--nacht);font-weight:600}
.onDark .lead{color:var(--dim)}
.onDark .lead b,.onDark .lead strong{color:var(--weiss)}
.prosa{max-width:62ch}
.prosa p{font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:var(--dim-inv)}
.prosa p+p{margin-top:var(--a2)}
.prosa b,.prosa strong{color:var(--nacht);font-weight:600}
.prosa h3{font-family:var(--disp);font-weight:800;font-size:var(--fs-h3);letter-spacing:-.03em;line-height:1.1;margin-top:var(--a3)}
.prosa ul,.prosa ol{margin-top:var(--a2);padding-left:1.2em;font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:var(--dim-inv)}
.prosa li+li{margin-top:8px}
.onDark .prosa p,.onDark .prosa li{color:var(--dim)}
.onDark .prosa b,.onDark .prosa strong{color:var(--weiss)}
.ext{font-size:.8em;margin-left:.15em}

/* ---------- Raster ---------- */
.section{position:relative;padding:0 var(--pad);max-width:var(--wrap);margin-left:auto;margin-right:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrapLesen{max-width:calc(var(--lesen) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.rowTwo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.band{padding:var(--band-y) 0}
.bandHell{background:var(--papier);color:var(--nacht)}
.bandGreige{background:var(--greige);color:var(--nacht)}
.bandDunkel{background:var(--nacht);color:var(--weiss)}
@media (max-width:860px){ .rowTwo{grid-template-columns:1fr} }

/* Abschnittskopf: Kante, Nummer ÜBER dem Titel, Display-Zeile — eine Textkante. */
.secHead{border-top:2px solid var(--nacht);padding-top:clamp(14px,1.6vw,22px);margin-bottom:clamp(30px,4vw,56px)}
.secNo{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(12px,1.1vw,15px);letter-spacing:.16em;color:var(--accent-text);margin-bottom:clamp(10px,1.1vw,16px)}
.secTitle{font-family:var(--disp);font-weight:800;font-size:var(--fs-h2);line-height:1.03;letter-spacing:-.034em;max-width:24ch;text-wrap:balance}
.secSub{font-size:clamp(15px,1.3vw,19px);color:var(--dim-inv);margin-top:14px;max-width:46ch;line-height:1.42;text-wrap:balance}
.onDark .secHead{border-top-color:rgba(255,255,255,.55)}
.onDark .secNo{color:var(--accent-dark)}
.onDark .secSub{color:var(--dim)}

/* Pfad (Breadcrumb): leise Mono-Zeile über dem Seitenkopf. */
.crumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-family:var(--mono);font-size:clamp(11px,.95vw,13px);line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--dim-inv)}
.crumbs>*{padding:8px 0;min-width:0;overflow-wrap:anywhere}
.crumbs a{display:inline-block}
.crumbs a:hover{color:var(--accent-text)}
.crumbs [aria-current]{color:var(--nacht)}
.crumbSep{opacity:.5}
.onDark .crumbs{color:var(--dim)}
.onDark .crumbs [aria-current]{color:var(--weiss)}

/* ---------- Knöpfe: gefüllt, Tinte, Linie, Pfeil-Link ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:clamp(15px,1.3vw,19px);padding:clamp(14px,1.5vw,18px) clamp(22px,2.4vw,32px);white-space:nowrap;transition:background .25s ease,color .25s ease,transform .25s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn .pfeil{font-weight:500}
/* Ink auf Orange, nie Weiß: Weiß auf #FF4F00 ergibt nur 3,3 Kontrast. */
.btnAccent{background:var(--accent);color:var(--nacht)}
.btnAccent:hover{background:#E04600}
.btnInk{background:var(--nacht);color:var(--weiss)}
.btnInk:hover{background:#000}
.onDark .btnInk{background:var(--weiss);color:var(--nacht)}
.onDark .btnInk:hover{background:#EFEFEF}
.btnLine{border:2px solid var(--nacht);color:var(--nacht);padding-top:calc(clamp(14px,1.5vw,18px) - 2px);padding-bottom:calc(clamp(14px,1.5vw,18px) - 2px)}
.btnLine:hover{background:var(--nacht);color:var(--weiss)}
.onDark .btnLine{border-color:rgba(255,255,255,.6);color:var(--weiss)}
.onDark .btnLine:hover{background:var(--weiss);color:var(--nacht);border-color:var(--weiss)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.linkArrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;font-size:clamp(15px,1.25vw,18px);border-bottom:2px solid var(--accent);padding:8px 0 3px;transition:gap .25s var(--ease)}
.linkArrow:hover{gap:14px}
.onDark .linkArrow{border-bottom-color:var(--accent-dark)}
.btnRow{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}

/* ---------- Oberer Stapel: Promo-Bar + Kopfzeile, gemeinsam fest ---------- */
.topStack{position:fixed;top:0;left:0;right:0;z-index:var(--z-head)}
.promoBar{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--nacht);color:var(--weiss);
  padding:9px calc(var(--pad) + 36px) 9px var(--pad);position:relative;
  font-size:clamp(13px,1.05vw,15px);line-height:1.3;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.promoBar p{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;text-align:center}
.promoTag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark);font-weight:700;position:relative;padding-left:14px}
.promoTag::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;background:var(--accent)}
.promoText{color:rgba(250,248,245,.86)}
.promoShort{display:none}
@media (max-width:640px){ .promoLong{display:none} .promoShort{display:inline} .promoTag{display:none} }
.promoCta{font-weight:800;color:var(--weiss);border-bottom:2px solid var(--accent);white-space:nowrap;display:inline-block;padding:6px 0}
.promoCta:hover{color:var(--accent-dark)}
.promoClose{position:absolute;right:calc(var(--pad) - 6px);top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;color:var(--dim);font-size:13px}
.promoClose:hover{color:var(--weiss)}
@media (max-width:640px){
  .promoBar{padding:4px calc(var(--pad) + 34px) 4px var(--pad);font-size:13px;min-height:44px}
  .promoBar p{justify-content:flex-start;text-align:left;gap:0 10px}
}

/* ---------- Kopfzeile: Glasleiste, dunkel über Tinte, hell über Papier ---------- */
.pageHeader{
  position:relative;
  padding:14px var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  color:var(--weiss);
  background:rgba(26,26,26,.40);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:color .3s ease,background .3s ease,border-color .3s ease;
}
.pageHeader.inverted{
  color:var(--nacht);
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid rgba(26,26,26,.07);
}
.brand{justify-self:start;display:flex;align-items:center;min-height:44px;margin-left:8px}
/* Originale Wortmarke unverändert: nur die obere SYNCLARO-Zeile zeigen, nicht den veralteten Untertitel. */
.wordmark{display:block;width:148px;height:22px;overflow:hidden;flex:none}
.wordmark img{width:148px;height:auto;max-width:none}
.pageHeader .logoLight,.pageHeader.inverted .logoDark{display:block}
.pageHeader .logoDark,.pageHeader.inverted .logoLight{display:none}

/* Desktop: drei Bereiche mit Panels */
.mainNav{grid-column:2;justify-self:center}
.navList{list-style:none;display:flex;gap:clamp(4px,1vw,14px)}
.navItem{position:static}
.navBtn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:clamp(14px,1.1vw,17px);font-weight:500;padding:10px clamp(8px,.9vw,14px);
  transition:opacity .25s ease;position:relative;
}
.navBtn:hover,.navBtn[aria-expanded="true"]{opacity:1}
.navList:hover .navBtn:not(:hover):not([aria-expanded="true"]){opacity:.62}
.navItem[data-active="1"] .navBtn::after{content:"";position:absolute;left:clamp(8px,.9vw,14px);right:clamp(8px,.9vw,14px);bottom:4px;height:2px;background:var(--accent)}
.navChev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.navBtn[aria-expanded="true"] .navChev{transform:translateY(1px) rotate(225deg)}
.navPanel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--papier);color:var(--nacht);
  border-top:1px solid var(--hair-inv);border-bottom:2px solid var(--nacht);
  box-shadow:0 30px 60px -30px rgba(26,26,26,.35);
  animation:navIn .2s var(--ease);
}
@keyframes navIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.navPanelIn{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:clamp(24px,4vw,64px);
  max-width:var(--wrap);margin:0 auto;padding:clamp(26px,3vw,40px) var(--pad) clamp(30px,3.2vw,44px);
}
.navPanelTitle{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.03em;line-height:1.05}
.navPanelIntro{margin-top:12px;font-size:clamp(14px,1.15vw,17px);line-height:1.45;color:var(--dim-inv);max-width:32ch}
.navPanelAll{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:800;font-size:clamp(14px,1.1vw,16px);border-bottom:2px solid var(--accent);padding-bottom:2px}
.navPanelAll:hover{color:var(--accent-text)}
/* Kompaktes Panel (z. B. Lösungen, 11.09.2026): nur Titel, Beschreibung und CTA – dieselbe Leiste, kein Unterseitenraster. */
.navPanelIn.kompakt{grid-template-columns:minmax(0,1fr)}
.navPanelIn.kompakt .navPanelIntro{max-width:52ch}
.navSub{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-inv);border:1px solid var(--hair-inv)}
.navSub li{display:block;min-width:0}
.navSub li:last-child:nth-child(odd){grid-column:1 / -1}
.navSub a{display:block;height:100%;background:var(--papier);padding:clamp(14px,1.4vw,20px);transition:background .2s ease}
.navSub a:hover,.navSub a[aria-current]{background:var(--greige)}
.navSub a[aria-current]{box-shadow:inset 3px 0 0 var(--accent)}
.navSub b{display:block;font-weight:800;font-size:clamp(15px,1.2vw,18px);letter-spacing:-.02em;line-height:1.15}
.navSub span{display:block;margin-top:5px;font-size:clamp(13px,1.02vw,15px);line-height:1.38;color:var(--dim-inv)}

.navCta{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.langSwitch{font-family:var(--mono);font-size:12px;letter-spacing:.12em;padding:8px 10px;border:1px solid currentColor;opacity:.75}
.langSwitch:hover{opacity:1}
.navCta .anfrage{
  display:inline-flex;align-items:center;min-height:44px;background:var(--accent);color:var(--nacht);
  font-weight:800;font-size:clamp(14px,1.15vw,17px);padding:10px 22px;white-space:nowrap;
  transition:background .25s ease,transform .25s var(--ease);
}
.navCta .anfrage:hover{background:#E04600;transform:translateY(-1px)}
.ctaShort{display:none}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-right:-8px}
.burger span{display:block;width:22px;height:2px;background:currentColor;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1000px){
  .pageHeader{grid-template-columns:1fr auto;padding:12px var(--pad)}
  .brand{margin-left:0}
  .mainNav{display:none}
  .navCta{grid-column:2}
  .navCta .anfrage{padding:10px 16px;font-size:14px;min-height:44px}
  .burger{display:flex}
  .langSwitch{display:none}
}
@media (max-width:480px){
  .pageHeader{gap:12px}
  .brand .wordmark{width:112px;height:17px}
  .brand .wordmark img{width:112px}
  .ctaLong{display:none}
  .ctaShort{display:inline}
  .navCta .anfrage{padding:10px 13px;min-height:44px}
  .navCta{gap:6px}
}

/* Mobiler Drawer: Vollbild auf Tinte, Bereiche als Akkordeon, CTA unten fest. */
.drawer{
  position:fixed;inset:0;z-index:var(--z-drawer);background:var(--nacht);color:var(--weiss);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .26s var(--ease);
  overflow:hidden;
}
.drawer.in{transform:none}
.drawerVeil{position:fixed;inset:0;z-index:calc(var(--z-drawer) - 1);background:rgba(26,26,26,.5);opacity:0;transition:opacity .26s ease}
.drawerVeil.in{opacity:1}
.drawerHead{display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad);border-bottom:1px solid var(--hair);flex:none}
.drawerHead .wordmark{width:148px;height:22px}
.drawerClose{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px;font-size:16px}
.drawerNav{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px var(--pad) 24px}
.dSec{border-bottom:1px solid var(--hair)}
.dSec summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;font-family:var(--disp);font-weight:800;font-size:clamp(20px,5.4vw,26px);letter-spacing:-.03em;cursor:pointer;
  min-height:56px;
}
.dSec summary::-webkit-details-marker{display:none}
.dChev{width:10px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:6px}
.dSec[open] .dChev{transform:rotate(225deg)}
.dSec ul{list-style:none;padding:0 0 12px}
.dSec li a{display:block;padding:12px 0 12px 14px;font-size:clamp(16px,4.4vw,19px);color:rgba(250,248,245,.86);border-left:2px solid rgba(255,255,255,.14);min-height:44px}
.dSec li a:hover,.dSec li a[aria-current]{color:var(--weiss);border-left-color:var(--accent)}
.dSec li a.dAll{font-weight:800;color:var(--weiss)}
.dSec .dIntro{padding:2px 0 10px 14px;font-size:clamp(14px,3.8vw,16px);line-height:1.45;color:var(--dim);border-left:2px solid rgba(255,255,255,.14)}
.dLinks{list-style:none;padding-top:14px}
.dLinks a{display:block;padding:11px 0;font-size:clamp(15px,4vw,17px);color:rgba(250,248,245,.8);min-height:44px}
.dLinks a:hover{color:var(--weiss)}
.drawerCta{flex:none;padding:14px var(--pad) calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);background:var(--nacht)}
.drawerCta .btn{width:100%;justify-content:center}
.drawerCta p{margin-top:10px;font-size:13.5px;line-height:1.4;color:var(--dim)}
@media (min-width:1001px){ .drawer,.drawerVeil{display:none!important} }


/* ---------- Einblendungen ---------- */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal{opacity:0;transform:translateY(28px)}
/* Ankerziel auf einer noch nicht eingeblendeten Zeile: der Browser scrollt auf die um 28 px verschobene Box, nach der
   Einblendung läge das Ziel 14 px unter der Kopfzeile. Der Rand gleicht die Verschiebung aus (Critic-Befund 10.09.2026). */
.js .reveal:not(.on),.js .reveal:not(.on) [id]{scroll-margin-top:28px}
.reveal.on{opacity:1;transform:none}

/* ---------- Formulare: harte Kanten, Linie statt Kasten ---------- */
.form{display:grid;gap:clamp(16px,1.8vw,22px)}
.formRow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px)}
@media (max-width:640px){ .formRow{grid-template-columns:1fr} }
.field{display:grid;gap:7px;min-width:0}
.field label{font-size:clamp(13.5px,1.1vw,15.5px);font-weight:700;letter-spacing:-.01em}
.field label .opt{font-weight:500;color:var(--dim-inv);margin-left:6px;font-size:.92em}
.field .req{color:var(--accent-text);margin-left:2px}
.field input,.field textarea,.field select{
  width:100%;background:var(--papier);border:1px solid rgba(26,26,26,.28);border-bottom-width:2px;
  padding:13px 14px;font-size:clamp(16px,1.25vw,18px);line-height:1.3;color:var(--nacht);
  transition:border-color .25s ease,background .25s ease;border-radius:0;-webkit-appearance:none;appearance:none;
}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(26,26,26,.42)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--nacht);border-bottom-color:var(--accent);background:var(--weiss)}
.field [aria-invalid="true"]{border-color:var(--fehler)!important}
.fieldHint{font-size:clamp(12.5px,1vw,14px);line-height:1.4;color:var(--dim-inv)}
.fieldError{font-size:clamp(12.5px,1vw,14px);line-height:1.4;color:var(--fehler);font-weight:600}
.check{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.45;color:var(--dim-inv);cursor:pointer}
.check input{width:22px;height:22px;margin:0;appearance:none;-webkit-appearance:none;border:2px solid rgba(26,26,26,.5);background:var(--papier);display:grid;place-items:center;cursor:pointer;border-radius:0;transition:border-color .2s,background .2s}
.check input::before{content:"";width:10px;height:10px;background:var(--nacht);transform:scale(0);transition:transform .15s var(--ease)}
.check input:checked{border-color:var(--nacht);background:var(--accent)}
.check input:checked::before{transform:none}
.check input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.check input[aria-invalid="true"]{border-color:var(--fehler)}
.check a{text-decoration:underline;text-underline-offset:3px;color:var(--nacht)}
.check b{color:var(--nacht);font-weight:700}
.formFoot{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.formState{
  padding:14px 16px;border-left:3px solid var(--nacht);background:var(--greige);
  font-size:clamp(14px,1.15vw,16.5px);line-height:1.45;
}
.formState:empty{padding:0;border:0;height:0;overflow:hidden;margin:0}
.form[data-status="success"] .formState{border-left-color:#2E7D32;background:#EEF6EE}
.form[data-status="error"] .formState,.form[data-status="invalid"] .formState{border-left-color:var(--fehler);background:#FBEEEC}
.form[data-status="loading"] .formState{border-left-color:var(--accent)}
.form[data-status="offline"] .formState,.form[data-status="cancelled"] .formState{border-left-color:var(--accent);background:#FFF3EC}
.form[data-status="loading"] .btnAccent{position:relative;color:transparent}
.form[data-status="loading"] .btnAccent::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid var(--nacht);border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.noJs{padding:14px 16px;border-left:3px solid var(--accent);background:var(--greige);font-size:clamp(14px,1.15vw,16.5px);line-height:1.45}
.honig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- FAQ: Details mit Haarlinien, sichtbare Antworten -> JSON-LD ---------- */
.faq{border-top:1px solid var(--hair-inv)}
.faqItem{border-bottom:1px solid var(--hair-inv)}
.faqItem summary{
  list-style:none;display:grid;grid-template-columns:1fr 26px;gap:16px;align-items:center;
  padding:clamp(16px,1.8vw,24px) 0;cursor:pointer;
  font-family:var(--disp);font-weight:800;font-size:clamp(17px,1.6vw,23px);letter-spacing:-.025em;line-height:1.15;
}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem summary::after{content:"+";font-weight:500;font-size:1.3em;color:var(--accent-text);text-align:center;line-height:1;transition:transform .25s var(--ease)}
.faqItem[open] summary::after{transform:rotate(45deg)}
.faqItem summary:hover{color:var(--accent-text)}
.faqBody{padding:0 0 clamp(18px,2vw,26px);max-width:62ch;font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:var(--dim-inv)}
.faqBody p+p{margin-top:10px}
.faqBody a{text-decoration:underline;text-underline-offset:3px}
.onDark .faq,.onDark .faqItem{border-color:var(--hair)}
.onDark .faqItem summary::after{color:var(--accent-dark)}
.onDark .faqBody{color:var(--dim)}

/* ---------- Querverweise: Gitter aus Haarlinien wie die Referenzen ---------- */
.weiter{padding:var(--band-y) 0;border-top:1px solid var(--hair-inv)}
.weiterGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair-inv);border:1px solid var(--hair-inv)}
.weiterGrid a{display:flex;flex-direction:column;gap:10px;background:var(--papier);padding:clamp(18px,2vw,28px);min-height:150px;transition:background .25s ease}
.weiterGrid a:hover{background:var(--greige)}
.weiterGrid .label{font-size:11px}
.weiterGrid b{font-family:var(--disp);font-weight:800;font-size:clamp(17px,1.6vw,23px);letter-spacing:-.025em;line-height:1.12}
.weiterGrid span{font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.4;color:var(--dim-inv)}
.weiterGrid .pfeil{margin-top:auto;color:var(--accent-text);font-weight:500}
@media (max-width:860px){ .weiterGrid{grid-template-columns:1fr} }
.weiterZeile{font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:var(--dim-inv);max-width:62ch}
.weiterZeile a{color:var(--nacht);font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:1px}
.weiterZeile a:hover{color:var(--accent-text)}

/* ---------- Handlungsband: Orange mit Tinte, EIN Knopf ---------- */
.ctaBand{background:var(--accent);color:var(--nacht);padding:clamp(56px,7vw,100px) 0}
.ctaIn{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,70px);align-items:end}
.ctaFrage{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.4vw,50px);line-height:1.03;letter-spacing:-.034em;max-width:18ch;text-wrap:balance}
.ctaAktion{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ctaKnopf{display:inline-block;background:var(--nacht);color:var(--weiss);font-weight:800;font-size:clamp(16px,1.5vw,21px);padding:17px 34px;transition:background .25s ease,transform .25s var(--ease)}
.ctaKnopf:hover{background:#000;transform:translateY(-2px)}
.ctaNote{font-size:clamp(14px,1.2vw,17px);line-height:1.45;color:rgba(26,26,26,.92);max-width:38ch}  /* .75 ergab auf Orange nur 4,0 Kontrast; .92 trägt 4,8 */
.ctaZweit{font-size:clamp(14px,1.15vw,16.5px);font-weight:700;border-bottom:2px solid var(--nacht);padding-bottom:2px}
@media (max-width:860px){ .ctaIn{grid-template-columns:1fr;align-items:start} }

/* ---------- Bewertungen: statischer, datierter Nachweis (kein Widget, kein Rating-Schema) ---------- */
.bewertung{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.4vw,36px);align-items:start;border-top:2px solid var(--nacht);padding-top:clamp(18px,2vw,28px)}
.bewertung .note{font-family:var(--disp);font-weight:900;font-size:clamp(40px,5vw,72px);letter-spacing:-.045em;line-height:1}
.bewertung .note small{display:block;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-top:8px}
.bewertung p{font-size:clamp(14.5px,1.2vw,17px);line-height:1.45;color:var(--dim-inv);max-width:60ch}
.bewertung p+p{margin-top:8px}
.bewertung a{border-bottom:2px solid var(--accent);font-weight:700;color:var(--nacht)}
.bewertung .echt{font-size:clamp(13px,1.05vw,15px);color:var(--dim-inv)}
@media (max-width:560px){ .bewertung{grid-template-columns:1fr} }

/* ---------- Hinweiskasten ---------- */
.hinweis{border-left:3px solid var(--accent);padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);background:var(--greige);max-width:74ch}
.bandGreige .hinweis{background:var(--weiss)}
.hinweis h3,.hinweis h4{font-family:var(--disp);font-weight:800;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.025em;margin-bottom:9px}
.hinweis p{font-size:clamp(14px,1.1vw,16.5px);line-height:1.5;color:var(--dim-inv)}
.hinweis p+p{margin-top:9px}
.hinweis b{color:var(--nacht);font-weight:600}
.hinweis a,.prosa a,.lead a,.angebotNote a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent);font-weight:600}
.onDark .hinweis{background:rgba(255,255,255,.05)}
.onDark .hinweis p{color:var(--dim)}
.onDark .hinweis b{color:var(--weiss)}

/* ---------- Beweiszeile: Zahlen mit oranger Kante ---------- */
.proofNums{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,56px)}
.proofNums>div{position:relative;padding-top:15px;min-width:120px}
.proofNums>div::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent);transition:width .9s var(--ease) .25s}
.reveal.on .proofNums>div::before,.proofNums.on>div::before{width:100%}
.proofNums b{display:block;font-family:var(--disp);font-weight:900;font-size:clamp(28px,3.4vw,48px);letter-spacing:-.045em;line-height:1}
.proofNums span{display:block;font-size:13.5px;color:var(--dim-inv);margin-top:6px;max-width:16ch;line-height:1.3}
.onDark .proofNums span{color:var(--dim)}

/* ---------- Newsletter „Synclaro KI-Impulse" ---------- */
.nl{background:var(--papier);color:var(--nacht);padding:clamp(76px,10vw,140px) var(--pad) clamp(80px,10vw,140px);border-top:1px solid var(--hair-inv)}
.nlInner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:center;max-width:var(--wrap);margin:0 auto}
.nlName{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.nl .lead{max-width:40ch}
.nlPunkte{list-style:none;margin-top:var(--a2);display:grid;gap:10px}
.nlPunkte li{position:relative;padding-left:20px;font-size:clamp(14.5px,1.2vw,17px);line-height:1.4;color:var(--dim-inv)}
.nlPunkte li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:2px;background:var(--accent)}
.nlPanel{background:var(--greige);padding:clamp(24px,3vw,44px)}
.nlForm{margin-top:0;gap:16px}
.nlForm .field input{background:var(--papier);border:1px solid rgba(26,26,26,.28);border-bottom-width:2px;padding:15px 16px;font-size:clamp(16px,1.3vw,19px)}
.nlForm .field input:focus{border-color:var(--accent)}
.nlForm .btn{width:100%;justify-content:center}
.nlNote{color:var(--dim-inv);font-size:13.5px;line-height:1.45}
@media (max-width:860px){ .nlInner{grid-template-columns:1fr;gap:clamp(24px,5vw,36px)} }


/* ---------- Fuß: ein Block, ein Logo, wenige Gruppen ---------- */
.pageFooter{background:var(--nacht);color:var(--weiss);padding:clamp(60px,7vw,100px) var(--pad) 26px;position:relative}
.pageFooter.hatWelt>*{position:relative;z-index:1}
.footIn{max-width:var(--wrap);margin:0 auto}
.footGrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:clamp(28px,3.4vw,52px) clamp(22px,2.6vw,40px)}
.footWordmark{display:inline-flex;flex-direction:column;gap:9px}
.footWordmark .wordmark{width:200px;height:30px}
.footWordmark .wordmark img{width:200px}
.brandTagline{font-size:16px;font-weight:500;letter-spacing:.055em;color:var(--weiss)}
.footBrand p{color:var(--dim);font-size:clamp(14px,1.15vw,16.5px);margin-top:18px;max-width:30ch;line-height:1.45}
.footBrand .footAddr{margin-top:14px;font-size:clamp(13px,1.05vw,14.5px);color:rgba(250,248,245,.5)}
.footSocial{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:16px 0 0 -11px}
.footSocial a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:rgba(250,248,245,.72);transition:color .25s ease,border-color .25s ease}
.footSocial a:hover,.footSocial a:focus-visible{color:var(--weiss)}
.footSocial svg{width:22px;height:22px;fill:currentColor}
.footSocial .badge{width:auto;height:auto;min-height:44px;margin-left:10px;padding:7px 12px 7px 11px;border:1px solid var(--hair);border-left:3px solid var(--accent);flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;line-height:1.1;text-align:left}
.footSocial .badge:hover,.footSocial .badge:focus-visible{border-color:rgba(250,248,245,.5);border-left-color:var(--accent)}
.footSocial .badgeMark{font-weight:800;font-size:12.5px;letter-spacing:.02em;color:var(--weiss)}
.footSocial .badgeSub{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.footCol h2{font-size:clamp(13.5px,1.1vw,15px);font-weight:800;letter-spacing:.01em;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.footCol ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:0}
.footCol a{color:var(--dim);font-size:clamp(13.5px,1.1vw,15px);line-height:1.5;transition:color .25s ease;display:inline-block;padding:9px 0}
.footCol a:hover{color:var(--accent-dark)}
.footLegal{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center;margin-top:clamp(40px,5vw,68px);padding-top:20px;border-top:1px solid var(--hair);font-size:13px;color:var(--dim)}
.footLegal a:hover,.footLegal button:hover{color:var(--accent-dark)}
.footLegal .copy{margin-right:auto}
.footLegal a,.footLegal button{padding:12px 0}
@media (max-width:1000px){ .footGrid{grid-template-columns:1fr 1fr 1fr} .footBrand{grid-column:1/-1} }
@media (max-width:640px){ .footGrid{grid-template-columns:1fr 1fr} }
@media (max-width:400px){ .footGrid{grid-template-columns:1fr} }

/* Statischer Bewertungsnachweis: keine Widgets, kein Drittanbieterrequest vor einem Klick. */
.reviewStrip{background:var(--greige);color:var(--nacht);border-top:1px solid var(--hair-inv);padding:20px 0}
.reviewStripIn{display:flex;align-items:center;justify-content:space-between;gap:16px 30px}
.reviewScore{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px;line-height:1.4}
.reviewStars{color:var(--accent-text);letter-spacing:.05em}
.reviewScore strong{font-size:22px;white-space:nowrap}
.reviewStrip p{font-size:14px;line-height:1.5;color:var(--dim-inv)}
.reviewStrip small{display:block;font-size:12px}
.reviewStrip a{font-size:14px;font-weight:700;text-decoration:underline;text-decoration-color:var(--accent-text);text-underline-offset:5px;padding:12px 0;white-space:nowrap}
@media(max-width:800px){.reviewStripIn{flex-wrap:wrap;justify-content:flex-start}.reviewStrip p{flex:1 1 250px}}
@media(max-width:480px){.reviewStripIn{display:grid;gap:8px}.reviewScore{gap:10px}.reviewStrip a{justify-self:start}}

/* ---------- Kino-Overlay: native Steuerung, Fokus bleibt drin ---------- */
.cinema{
  position:fixed;inset:0;z-index:var(--z-cinema);background:var(--nacht);color:var(--weiss);
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .38s var(--ease),visibility .38s;
}
.cinema.open{opacity:1;visibility:visible;pointer-events:auto}
.cinemaStage{width:100%;max-height:100svh;display:flex;align-items:center;justify-content:center;padding:70px var(--pad) 64px}
.cinema video{width:100%;max-width:1280px;max-height:calc(100svh - 134px);aspect-ratio:16/9;background:#000;transform:scale(.96);transition:transform .5s var(--ease)}
.cinema.open video{transform:none}
.cinemaBar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:22px;padding:16px var(--pad);font-size:clamp(14px,1.25vw,18px)}
.cinemaWho{color:var(--dim);min-width:0}
.cinemaClose{margin-left:auto;padding:10px 14px;border:1px solid rgba(255,255,255,.35);white-space:nowrap}
.cinemaClose:hover{background:var(--weiss);color:var(--nacht);border-color:var(--weiss)}
.cinemaQuelle{position:absolute;left:var(--pad);right:var(--pad);bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,248,245,.5)}

/* ---------- Der Farbwechsel (Startseite und Bereichsübersichten) ---------- */
.flipBand{position:relative;height:78svh;min-height:420px;overflow:hidden}
.flipLage{position:absolute;inset:0;display:flex;align-items:center;padding:0 calc(var(--rand) + var(--pad))}
.flipHell{background:var(--papier);color:var(--nacht)}
.flipDunkel{background:var(--nacht);color:var(--weiss);clip-path:inset(0 0 var(--cut,0%) 0)}
.flipText{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5.2vw,74px);line-height:1.02;letter-spacing:-.035em}
.flipText i{font-style:normal;color:var(--accent)}
.flipHell .flipText i{color:var(--accent-text)}


/* ---------- Readiness-Hinweis: dezenter Nebenweg, nie als Haupt-CTA (Niklas 05.09.2026) ---------- */
.readiness{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--hair-inv);font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.3;transition:border-color .25s ease,background .25s ease}
.readiness:hover{border-color:var(--nacht);background:var(--greige)}
.readiness .label{font-size:10.5px}
.readiness b{font-weight:800}
.kWeg .readiness{background:var(--papier)}
.readiness.readyZeile{display:flex;flex-wrap:wrap;margin-top:clamp(20px,2.4vw,30px)}

/* ---------- Durchgehende Welt (Punktwolke hinter dunklen Bändern) ---------- */
/* overflow:clip beschneidet die angeheftete Punktwelt auf ihren Abschnitt, ohne einen
   Scroll-Container zu erzeugen; ohne das ragt sie durch das negative Margin bis zu
   einer Bildschirmhöhe in den nächsten Abschnitt (gemessen 493 px, Niklas 05.09.2026). */
.hatWelt{position:relative;overflow:clip}
.hatWelt>.weltHuelle{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;pointer-events:none;overflow:hidden}
.weltFeld{display:block;width:100%;height:100%}

/* ---------- Seitenkopf aller Unterseiten (Pfad, Bereich, Balken, Titel, Lead, Bild) ---------- */
.lpKopf{padding:calc(var(--stack-h) + clamp(36px,6vh,72px)) 0 clamp(44px,6vh,80px)}
.lpKopf.bandGreige{border-bottom:1px solid var(--hair-inv)}
.lpHero{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:end}
.lpHero .crumbs{margin-bottom:clamp(18px,2.4vh,30px)}
.lpEyebrow{font-family:var(--mono);font-size:clamp(11px,.95vw,13px);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.onDark .lpEyebrow{color:var(--accent-dark)}
.lpBar{display:block;width:clamp(56px,5vw,84px);height:3px;background:var(--accent);margin:clamp(14px,1.8vh,22px) 0}
/* Ohne Eyebrow folgt der Balken im Landingpage-Kopf direkt auf den Pfad (11.09.2026): der Abstand von .lpHero .crumbs reicht,
   kein zweiter Abstand darüber. Nur dort – Köpfe ohne .lpHero (Blog-Hub, artikelKopf) behalten den Eigenabstand des Balkens. */
.lpHero .crumbs+.lpBar{margin-top:0}
.lpTitel{font-family:var(--disp);font-weight:800;font-size:clamp(34px,5.6vw,84px);line-height:.97;letter-spacing:-.042em;max-width:14ch;text-wrap:balance;overflow-wrap:anywhere}
@media (max-width:360px){ .lpTitel{font-size:30px} }
.lpLead{margin-top:clamp(18px,2.4vh,30px);font-size:clamp(17px,1.55vw,23px);line-height:1.45;color:var(--dim-inv);max-width:52ch}
.lpLead b{color:var(--nacht);font-weight:600}
.onDark .lpLead{color:var(--dim)}
.onDark .lpLead b{color:var(--weiss)}
.lpHero .btnRow{margin-top:clamp(22px,2.8vh,36px)}
.lpBild{align-self:end;padding:clamp(22px,2.4vw,34px);background:var(--nacht);color:var(--weiss);position:relative;min-height:220px;display:flex;flex-direction:column;justify-content:center}
.lpBild.hell{background:var(--greige);color:var(--nacht)}
.lpBild .bNote{margin-top:16px}
.lpBild .bildTitel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:16px}
.lpBild.hell .bildTitel{color:var(--accent-text)}
@media (max-width:900px){
  .lpHero{grid-template-columns:1fr}
  .lpBild{align-self:stretch;min-height:0}
}


/* Fakten-Chips und Zielgruppenzeile */
.fakten{display:flex;flex-wrap:wrap;gap:8px}
.fakten span{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--dim-inv);border:1px solid var(--hair-inv);padding:6px 10px}
.onDark .fakten span{color:var(--dim);border-color:var(--hair)}
.fuerWen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair-inv);border:1px solid var(--hair-inv)}
.fuerWen>div{background:var(--papier);padding:clamp(20px,2.2vw,30px)}
.bandGreige .fuerWen>div{background:var(--greige)}
.fuerWen h3{font-family:var(--disp);font-weight:800;font-size:clamp(17px,1.6vw,23px);letter-spacing:-.025em;line-height:1.1;margin-bottom:12px}
.fuerWen ul{list-style:none;display:grid;gap:8px}
.fuerWen li{position:relative;padding-left:18px;font-size:clamp(14px,1.1vw,16.5px);line-height:1.4;color:var(--dim-inv)}
.fuerWen li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--accent)}
.fuerWen .nicht li::before{background:rgba(26,26,26,.35)}
@media (max-width:700px){ .fuerWen{grid-template-columns:1fr} }


/* ---------- Angebotsweiche: die drei echten Wege, früh und unterscheidbar ----------
   Genutzt auf Startseite, Programmseite und den Bereichs-Übersichten. */
.angebotGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair-inv);border:1px solid var(--hair-inv)}
.angebot{display:flex;flex-direction:column;gap:12px;background:var(--papier);padding:clamp(22px,2.4vw,34px);position:relative;min-height:100%;transition:background .25s ease}
.angebot:hover{background:var(--greige)}
.angebot .label{font-size:11px}
.angebot h3{font-family:var(--disp);font-weight:800;font-size:clamp(20px,2vw,29px);letter-spacing:-.03em;line-height:1.06;max-width:16ch}
.angebot p{font-size:clamp(14.5px,1.15vw,17px);line-height:1.45;color:var(--dim-inv);max-width:34ch}
.angebot .fuer{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--dim-inv);border-top:1px dashed var(--hair-inv);padding-top:12px;margin-top:auto}
.angebot .linkArrow{margin-top:14px;align-self:flex-start}
.angebot.primaer{box-shadow:inset 0 3px 0 var(--accent)}
.angebotNote{margin-top:clamp(18px,2vw,28px);font-size:clamp(14px,1.2vw,17px);line-height:1.45;color:var(--dim-inv);max-width:70ch}
.angebotNote b{color:var(--nacht);font-weight:600}
.angebotNote a{border-bottom:2px solid var(--accent);font-weight:700;color:var(--nacht)}
@media (max-width:900px){ .angebotGrid{grid-template-columns:1fr} }

/* ===== grafiken.css ===== */
/* ==================================================================
   Grafiken (Saskias fünf Weg-Bilder und Schemata), auf dunklem Grund
   entworfen, mit heller Variante (.hell) für weiße Seiten.
   Zahlen erscheinen nur, wo sie belegt sind.
   ================================================================== */
.bild{max-width:560px}
.bNote{margin-top:18px;font-size:clamp(14px,1.25vw,18px);line-height:1.4;color:var(--dim)}
.bNote b{font-weight:800;color:var(--weiss)}
.hell .bNote{color:var(--dim-inv)}
.hell .bNote b{color:var(--nacht)}

/* 01 — aus vielen Möglichkeiten die eine */
.bRaster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.bRaster span{height:74px;min-width:0;overflow:hidden;text-align:center;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;font-size:12.5px;letter-spacing:.02em;color:var(--nacht);opacity:.55;transition:opacity .5s var(--ease),background .5s var(--ease),transform .5s var(--ease)}
.bRaster .hit{grid-column:span 2;background:var(--accent);border-color:var(--accent);font-weight:800;opacity:0;transform:scale(.82)}
.on .bRaster span{opacity:.45}
.on .bRaster .hit{opacity:1;transform:none;transition-delay:.25s}
.hell .bRaster span{border-color:rgba(26,26,26,.2)}

/* 02 — die Lücke im Ablauf wird geschlossen */
.bKette{display:flex;align-items:center;flex-wrap:wrap;row-gap:10px}
.bKette b{font-weight:500;font-size:15px;padding:15px 17px;border:1px solid rgba(255,255,255,.34);color:var(--weiss);white-space:nowrap}
.bKette i{width:28px;height:2px;background:var(--weiss);opacity:.3;flex:none}
.bKette .luecke{position:relative;width:58px;background:none;opacity:1;border-top:2px dashed rgba(255,255,255,.5);transition:border-color .5s var(--ease)}
.bKette .luecke em{position:absolute;left:50%;top:-24px;transform:translateX(-50%);font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;transition:opacity .4s ease}
.bKette .luecke::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--accent);transition:width .8s var(--ease) .3s}
.on .bKette .luecke{border-top-color:transparent}
.on .bKette .luecke::after{width:100%}
.on .bKette .luecke em{opacity:0}
.hell .bKette b{border-color:rgba(26,26,26,.3);color:var(--nacht)}
.hell .bKette i{background:var(--nacht)}
.hell .bKette .luecke{border-top-color:rgba(26,26,26,.4)}
.hell .bKette .luecke em{color:var(--dim-inv)}

/* 03 — zwei Balken, belegte Zahlen */
.bBalken{display:flex;flex-direction:column;gap:16px}
.bBalken div{display:flex;align-items:center;gap:14px}
.bBalken i{height:48px;width:0;flex:none;max-width:calc(100% - 11ch);transition:width 1s var(--ease)}
.bBalken .alt{background:rgba(255,255,255,.26)}
.bBalken .neu{background:var(--accent)}
.bBalken em{font-style:normal;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--dim);line-height:1.3;min-width:0}
.on .bBalken .alt{width:var(--w-alt,76%)}
.on .bBalken .neu{width:var(--w-neu,11%);transition-delay:.3s}
.hell .bBalken .alt{background:rgba(26,26,26,.18)}
.hell .bBalken em{color:var(--dim-inv)}

/* 04 — aus vielen Abos wird eines */
.bKacheln{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.bKacheln span{height:70px;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;text-align:center;font-size:clamp(10px,2.9vw,12.5px);color:var(--dim);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.bKacheln .keep{background:var(--accent);border-color:var(--accent);color:var(--nacht);font-weight:800;font-size:11px}
.on .bKacheln span{opacity:.26;transform:scale(.9)}
.on .bKacheln .keep{opacity:1;transform:none;transition-delay:.45s}
.hell .bKacheln span{border-color:rgba(26,26,26,.2);color:var(--dim-inv)}

/* 05 — dieselbe Anfrage, früher beim Kunden */
.bTage{display:flex;flex-direction:column;gap:10px}
.tRow{display:grid;grid-template-columns:96px repeat(4,minmax(0,1fr));gap:6px;align-items:center}
.tRow em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.tRow span{height:56px;border:1px solid rgba(255,255,255,.22)}
.tRow .ziel{display:grid;place-items:center;font-size:11.5px;font-weight:800;opacity:0;transition:opacity .6s var(--ease)}
.tRow .ziel.alt{background:rgba(255,255,255,.2);color:var(--weiss);border-color:transparent}
.tRow .ziel.neu{background:var(--accent);border-color:var(--accent);color:var(--nacht)}
.on .tRow .ziel.alt{opacity:1}
.on .tRow .ziel.neu{opacity:1;transition-delay:.35s}
.hell .tRow em{color:var(--dim-inv)}
.hell .tRow span{border-color:rgba(26,26,26,.2)}
.hell .tRow .ziel.alt{background:rgba(26,26,26,.15);color:var(--nacht)}

/* 06 — Ebenen: Chef / Bauen / Anwenden als Treppe (neu, aus der Programm-Dreiteilung) */
.bTreppe{display:grid;gap:8px}
.bTreppe span{display:flex;align-items:center;gap:12px;height:56px;padding:0 14px;border:1px solid rgba(255,255,255,.22);font-size:13px;letter-spacing:.02em;color:var(--dim);opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.bTreppe span:nth-child(1){width:52%}
.bTreppe span:nth-child(2){width:76%}
.bTreppe span:nth-child(3){width:100%}
.bTreppe span b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent-dark)}
.on .bTreppe span{opacity:1;transform:none}
.on .bTreppe span:nth-child(2){transition-delay:.15s}
.on .bTreppe span:nth-child(3){transition-delay:.3s}
.hell .bTreppe span{border-color:rgba(26,26,26,.2);color:var(--nacht)}
.hell .bTreppe span b{color:var(--accent-text)}

/* 07 — Wissen: Ordner werden eine Antwort (neu) */
.bWissen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 40px minmax(0,1fr);gap:8px;align-items:center}
.bWissen span{height:62px;min-width:0;overflow:hidden;text-align:center;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;font-size:clamp(10px,2.8vw,11.5px);color:var(--dim);transition:opacity .5s var(--ease)}
.bWissen i{height:2px;background:var(--accent);width:0;transition:width .7s var(--ease) .3s}
.bWissen .antwort{background:var(--accent);border-color:var(--accent);color:var(--nacht);font-weight:800;font-size:11px;opacity:0;transform:scale(.85);transition:opacity .5s var(--ease) .6s,transform .5s var(--ease) .6s}
.on .bWissen span:not(.antwort){opacity:.45}
.on .bWissen i{width:100%}
.on .bWissen .antwort{opacity:1;transform:none}
.hell .bWissen span{border-color:rgba(26,26,26,.2);color:var(--dim-inv)}
@media (max-width:520px){ .bWissen{grid-template-columns:repeat(2,minmax(0,1fr)) 24px minmax(0,1fr)} .bWissen span:nth-child(3),.bWissen span:nth-child(4){display:none} }

@media (max-width:860px){
  .bRaster{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tRow{grid-template-columns:74px repeat(4,minmax(0,1fr))}
}
/* Ohne Skript bleibt der vollständige Endzustand lesbar, unabhängig von der
   Bewegungspräferenz. Mit Skript baut .on die Grafiken automatisch auf. */
html:not(.js) .bRaster .hit,html:not(.js) .tRow .ziel,html:not(.js) .bTreppe span,html:not(.js) .bWissen .antwort{opacity:1;transform:none}
html:not(.js) .bBalken .alt{width:var(--w-alt,76%)}
html:not(.js) .bBalken .neu{width:var(--w-neu,11%)}
html:not(.js) .bKette .luecke::after,html:not(.js) .bWissen i{width:100%}
/* Helle Variante: Text auf orangen Antwort-/Treffer-Kacheln bleibt Tinte */
.hell .bKacheln .keep,.hell .bWissen .antwort,.hell .bRaster .hit,.hell .tRow .ziel.neu{color:var(--nacht)}