/* ============================================================================
   fixes.css — gemeinsame Korrekturschicht für alle Seiten
   Wird NACH dem jeweiligen Seiten-Stylesheet geladen.

   Bewusste Entscheidung: Die 14 Seiten-Stylesheets sind untereinander zu
   verschieden, um sie automatisch zu einem Designsystem zu verschmelzen. Statt
   das zu erzwingen, liegen die Befunde aus dem Audit hier an einer Stelle —
   einmal ändern, überall wirksam. Die Zusammenführung der Seiten-CSS bleibt
   der nächste Schritt, siehe README.
   ============================================================================ */

:root{
 --fix-focus:#C6FF01;
 --fix-lemon-on-paper:#4C6510;   /* #5c7a12 erreichte auf --paper nur 4,39:1 */
 --fix-key-on-white:#5C7A12;     /* #8aa04a erreichte auf Weiß nur 2,89:1 */
}

/* ---------------------------------------------------------------- Fokus ---
   Im Original hatten nur vereinzelte Felder einen Ring, Slider hatten
   outline:none ganz ohne Ersatz. Ein Ring für alles Fokussierbare. */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
 outline:2px solid var(--fix-focus);
 outline-offset:3px;
 border-radius:8px;
}
.rslider:focus-visible,.tslide:focus-visible{outline:2px solid var(--fix-focus);outline-offset:4px}
.rslider::-webkit-slider-thumb,.tslide::-webkit-slider-thumb{transition:box-shadow .15s}
.rslider:focus-visible::-webkit-slider-thumb,.tslide:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(198,255,1,.35)}

/* ------------------------------------------------------------ Sprunglink ---
   Fehlte auf 15 von 17 Seiten. */
.skiplink{
 position:absolute;left:16px;top:-100px;z-index:9999;
 background:#C6FF01;color:#041615;font-weight:800;
 padding:12px 20px;border-radius:0 0 12px 12px;text-decoration:none;
 transition:top .18s;
}
.skiplink:focus-visible{top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- Zahlen ---
   Acht Rechner, deren Ergebnisse beim Tippen in der Breite sprangen. */
.tres-big,.stat b,.statnum,.bar .pc,.tb-val,.msmax,.tres-sub b,.pp-top b,
[data-count],.facts b,.qzrec b,.mstone .w,.pstone .w,.vtab td{
 font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------- Textsatz ---
   Schusterjungen in den clamp()-Headlines. */
h1,h2,h3,h4,.howh,.midcta-h,.rm-precta-h,.merk,.philquote,.glaube{text-wrap:balance}
p,li,.lead,.big-p,.howget,.qsub,.tres-sub{text-wrap:pretty}


/* ############################################################################
   DESIGN-EBENE
   Ab hier geht es nicht mehr um Fehler, sondern um Gestaltung. Drei Eingriffe,
   jeder mit einem Grund.
   ############################################################################ */

/* === 1. Versalien: von sechs Ebenen auf zwei ================================
   Vorher standen Display-Headlines, Karten-Überschriften und Mikro-Labels
   alle in Großbuchstaben. Wenn alles schreit, trägt nichts mehr Hierarchie —
   die Karten-Überschriften konkurrierten optisch mit den h2 darüber.

   Es bleiben genau zwei Versal-Ebenen:
     A  Display  — h1, h2 und die Sektions-Headlines
     B  Mikro-Label — Eyebrow, Kicker, Tabellenköpfe, Kennzahl-Beschriftungen
   Alles dazwischen wird Satzschreibung.

   Ausgleich: Versalien in 800/900 wirken kompakter als gemischte Schreibung.
   Die betroffenen Überschriften werden darum minimal größer gesetzt und
   bekommen leicht negative Laufweite, damit sie nicht auseinanderfallen. */
.pcard h4,
.stufe h3,
.toolcard h3,
.pillar h3,
.play h3,
.stage h3,
.mod h3,
.hstep h4,
.hstep h3,
.wcard h3,
.wk .t,
.card h4{
 text-transform:none;
 letter-spacing:-.006em;
 font-size:1.06em;
 line-height:1.25;
}

/* === 2. Karten: ein Trennsignal statt drei ==================================
   .pcard, .wcard und .stufe kombinierten Fläche + Rahmen + Schatten. Drei
   Mittel für dieselbe Aufgabe. Da weiße Karten auf dem warmen Papierton
   ohnehin kaum Eigenkontrast haben, bleibt der Schatten — er trägt die
   Abhebung am ruhigsten — und der Rahmen entfällt.
   Im Gegenzug mehr Innenraum: die Karten sollen atmen, nicht umrandet sein. */
.pcard,.stufe,a.wcard{
 border:0;
 box-shadow:0 10px 30px rgba(4,22,21,.07), 0 1px 2px rgba(4,22,21,.05);
 padding:32px 30px;
}
a.wcard{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s}
a.wcard:hover{
 transform:translateY(-4px);
 box-shadow:0 18px 44px rgba(4,22,21,.13), 0 1px 2px rgba(4,22,21,.06);
}
/* Die Lemon-Karte trägt ihre Abhebung über die Farbe — dort kein Schatten. */
.pcard.lemon,.stufe.hot{box-shadow:none}

/* === 3. Die Drei-gleiche-Karten-Reihe aufbrechen ============================
   .pug3 (Problem · Ursache · Wenn gelöst) stand als drei gleich breite,
   gleich hohe Kacheln nebeneinander — das generischste Layout überhaupt und
   inhaltlich falsch: die drei Karten sind eine Abfolge, keine Auswahl.
   Sie werden zur Treppe, in derselben Sprache wie die Reifegrad-Stufen
   weiter oben auf der Seite. */
@media(min-width:880px){
 .pug3{
  display:grid;
  grid-template-columns:1.14fr 1fr .94fr;
  align-items:start;
  gap:22px;
 }
 .pug3>.pcard{min-width:0}
 .pug3>.pcard:nth-child(2){transform:translateY(20px)}
 .pug3>.pcard:nth-child(3){transform:translateY(40px)}
 .pug3{margin-bottom:40px}

 /* Gleiches Muster, leiser, im Roadmap-Ergebnis */
 .pug{grid-template-columns:1.1fr 1fr .95fr;align-items:start}
 .pug>.cell:nth-child(2){transform:translateY(12px)}
 .pug>.cell:nth-child(3){transform:translateY(24px)}
}

/* === 4. Mehr Ruhe zwischen den Sektionen ====================================
   Marketingseiten leben von Pausen. 74px zwischen zwei inhaltlich völlig
   verschiedenen Abschnitten sind zu wenig, um sie als getrennt zu lesen. */
.gsec{padding:96px 0}
.gsec.light{padding:104px 0}
.howto{padding:96px 0}
.kurs,.kurscta{padding:104px 0}

/* === 5. Verwandte Werkzeuge: kuratiert statt Linkfarm =======================
   Vorher stand am Fuß jeder Werkzeugseite eine Reihe mit allen 7 anderen
   Engpässen — sieben gleichrangige Pillen ohne Begründung. Jetzt: zwei
   inhaltlich benachbarte Werkzeuge mit je einem Satz, warum sie als
   nächstes dran sind, plus ein leiser Sammellink zum Hub. */
.verwandt-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:6px;max-width:760px}
a.verwandt{
 display:block;background:#0C2822;border:1px solid #244038;border-radius:18px;
 padding:18px 20px;text-decoration:none;
 transition:border-color .18s,transform .18s;
}
a.verwandt:hover{border-color:var(--fix-focus);transform:translateY(-2px)}
a.verwandt b{display:block;color:#EEF0F1;font-size:15px;font-weight:800;margin-bottom:5px}
a.verwandt span{display:block;color:#9FAAB1;font-size:13.5px;line-height:1.5;font-weight:400}
.ws-hint{margin-top:16px;font-size:13.5px;color:#9FAAB1}
.ws-hint a{color:#D5DADE;text-decoration:underline;text-decoration-color:rgba(198,255,1,.5);text-underline-offset:3px}
.ws-hint a:hover{color:var(--fix-focus)}
.alle-werkzeuge{margin-top:14px;font-size:13px}
.alle-werkzeuge a{color:#7E868D;text-decoration:none}
.alle-werkzeuge a:hover{color:var(--fix-focus)}

/* === 6. Das Blitz-Emoji ersetzen ============================================
   .qwbox trug ein ⚡ als ::after — ein Systemzeichen, das auf jedem Gerät
   anders aussieht und in einer sonst durchgezeichneten Oberfläche fremdelt.
   Ersetzt durch eine gezeichnete Form in der Markenfarbe. */
.qwbox::after{
 content:"";
 right:26px;top:22px;
 width:34px;height:52px;
 background:currentColor;
 opacity:.13;
 clip-path:polygon(58% 0,18% 54%,44% 54%,36% 100%,82% 40%,54% 40%);
 font-size:0;
}

/* --------------------------------------------------------------- Kontrast ---
   Beide Werte lagen unter dem AA-Grenzwert für kleine Schrift. */
.wcard .wk,.pcard .pn{color:var(--fix-key-on-white)}
.gsec.light .eyebrow,.lightsec .eyebrow{color:var(--fix-lemon-on-paper)}

/* Das Laufband lief mit #1E3A33 auf #0A241E — 1,33:1. Bei 19px/900 gilt die
   Großtext-Grenze von 3:1, also klar darunter: die Markenzeile („Erst
   bewiesen, dann weitergegeben") war praktisch unsichtbar. Es soll leise
   bleiben, deshalb genau auf die Grenze statt auf volle Textstärke. */
.ticker span{color:#5A6E66}

/* phils-ai-lab nutzt `section.light` statt `.gsec.light` — die Eyebrow-Regel
   oben griff dort nicht, #7A8F22 auf #EFEFED ergab 3,16:1. */
section.light .eyebrow{color:var(--fix-lemon-on-paper)}

/* Knapp unter der Grenze, jeweils eine Stufe abgedunkelt bzw. aufgehellt:
   .bb-lab 4,37 · .pn 4,17 · .tbtn 4,37 (alle bei 4,5 gefordert).
   .pcard.lemon .pn braucht eine eigene Zeile — die Ursprungsregel hat drei
   Klassen und schlägt sonst die Korrektur. */
.bb-myth .bb-lab,.bb-lab{color:#8D9992}
.pcard .pn,.pug .pn,span.pn{color:#4C6510}
.pcard.lemon .pn{color:#3E5209}
.tbtn.reset,button.tbtn{color:#93A099}

/* Ja/Nein-Schalter im KI-Readiness-Check (.jn) auf hellem Grund:
   #7A827C ergab 3,64:1. Auf dunklem Grund bleibt die Originalfarbe korrekt. */
.gsec.light .jn button:not(.onja):not(.onnein),
section.light .jn button:not(.onja):not(.onnein),
.gsec.light .seg button,section.light .seg button{color:#5A646B}

/* Klumpen-Rechner: .kl saß mit #5A646B auf #F5F7F8 (2,60:1), .kseg mit
   dunklem Text auf #E9E9E1 (3,97:1). Beide Richtungen einzeln korrigiert. */
.gsec.light .kchip .kl,section.light .kchip .kl{color:#4F5854}
.gsec.light .kbar .kseg,section.light .kbar .kseg{color:#041615;font-weight:700}

/* Fließtext-Links auf den Rechtsseiten trugen die Browser-Standardfarbe
   (#0000EE) auf dunklem Grund — 1,98:1 und optisch ein Fremdkörper. */
.legal a{color:#C6FF01;text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:#DFFF7A}

/* ------------------------------------------------------- Dekor-Überlauf ---
   Der Glow-Layer ragt absichtlich über den rechten Rand hinaus. Auf
   uebersicht erzeugte das echten horizontalen Scroll (1338 statt 1280px).
   `overflow:clip` allein reichte nicht: ohne `position` auf dem Elternteil
   ist dessen Containing Block ein Vorfahr weiter oben — der absolut
   positionierte Glow entkommt der Klammer. Beides zusammen wirkt. */
:is(header,section,div):has(> .glowpulse){position:relative;overflow:clip}

/* --------------------------------------------------------- Trefferflächen ---
   Durchgehend unter 44px, am schlimmsten bei den Quiz-Umschaltern. */
.seg button,.tbtn,.chip,.others a,.qzrec a,.rm-badge,.back,.gnav-r a,.nav-r a,.footnav a,
.utbtns button,.jn button,.kbtns button{
 min-height:44px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
}
/* Links, die im Fließtext oder in dichten Karten sitzen: eine feste Höhe
   würde dort die Zeile aufreißen. Stattdessen unsichtbare Vergrößerung der
   Trefferfläche über ein Pseudo-Element — die Optik bleibt exakt gleich.
   Betrifft vor allem uebersicht, die als Systemkarte bewusst dicht ist. */
.gfoot a,.foot a,footer .wrap a,
.plinks a,.card h4 a,.card .open,.arch .node{position:relative}
.gfoot a::after,.foot a::after,footer .wrap a::after,
.plinks a::after,.card h4 a::after,.card .open::after,.arch .node::after{
 content:'';position:absolute;left:0;right:0;top:50%;
 height:44px;transform:translateY(-50%);
}
/* .arch/.node bilden ein Diagramm — dort dürfen sich die Flächen nicht
   überlappen, sonst fängt der obere Knoten Klicks des unteren ab. */
.arch .node::after{height:36px}
.logo,a.glogo{min-height:44px}
.gnav-r a,.nav-r a{text-decoration:none}

/* ------------------------------------------------------------ Mobile Nav ---
   War unter 760px bzw. 860px per display:none ausgeblendet — ersatzlos.
   Die Seiten hatten auf dem Handy keine Navigation. */
@media(max-width:860px){
 .gnav-r a:not(.cta),.nav-r a:not(.cta){display:inline-flex!important}
 .gnav .wrap,nav .wrap{height:auto;flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
 .gnav-r,.nav-r{width:100%;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .gnav-r::-webkit-scrollbar,.nav-r::-webkit-scrollbar{display:none}
 .gnav-r a,.nav-r a{
  flex:none;background:#0C2822;border:1px solid #244038;border-radius:999px;
  padding:0 16px;font-size:13.5px;font-weight:600;white-space:nowrap;
 }
 .gnav-r a.cta,.nav-r a.cta{background:#C6FF01;border-color:#C6FF01;color:#041615}
}

/* ------------------------------------------------------ Reduzierte Bewegung ---
   Das Original tötete pauschal alle transitions — damit auch das Feedback bei
   Fokus, Hover und Fortschritt. Hier bleiben Zustandswechsel sichtbar,
   nur Endlos-Bewegung hört auf. */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.08s!important}
 /* Laufbänder brechen um statt einzufrieren — sonst bleibt der Text hinter
    dem rechten Rand unerreichbar, weil overflow versteckt ist. */
 .ticker .tin,.ticker .inner,.slidetrack{
  animation:none!important;flex-wrap:wrap;width:auto;white-space:normal;
  justify-content:center;gap:14px 26px;
 }
 .slidewrap{-webkit-mask-image:none!important;mask-image:none!important}
 .deck .card,.deck:hover .card{transform:none!important}
 .deck{flex-wrap:wrap;gap:12px;justify-content:center}
}

/* -------------------------------------------------------- Laufband-Pause ---
   WCAG 2.2.2 (Stufe A): Bewegung, die automatisch startet und länger als
   5 Sekunden läuft, braucht eine Bedienmöglichkeit. Die Systemeinstellung
   für reduzierte Bewegung zählt dafür nicht. */
.ticker,.slidewrap{position:relative}
.ticker-toggle{
 position:absolute;right:12px;top:50%;transform:translateY(-50%);
 width:44px;height:44px;display:flex;align-items:center;justify-content:center;
 background:#0C2822;border:1px solid #244038;border-radius:999px;cursor:pointer;z-index:5;
}
.ticker-toggle:hover{border-color:#C6FF01}
.tt-ico{display:block;width:12px;height:13px;background:#C6FF01;
 clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%)}
.ticker-toggle[aria-pressed="true"] .tt-ico{clip-path:polygon(0 0,100% 50%,0 100%)}
[data-paused="true"]{animation-play-state:paused!important}

/* --------------------------------------------------------- Formularfehler ---
   Die Rechner zeigten Fehler rein visuell. */
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#ff7a6b!important}
.errmsg,.field .errmsg{display:block}
.errmsg.hidden{display:none}

/* --------------------------------------------------------------- PDF-Status ---
   Statt window.alert() bzw. stummem Warten. */
.pdfstatus{min-height:20px;margin-top:12px;font-size:13.5px;color:#9FAAB1;line-height:1.5}
.pdfstatus[data-state="error"]{color:#ff9a8d}
[aria-busy="true"]{opacity:.72;cursor:progress}

/* ------------------------------------------------------------- Bewegung ---
   width/height zu animieren löst Layout aus; der Detektor fand 20 Stellen. */
.tb-fill,.pp-fill,.bar .fl,#bar{will-change:transform}

/* ------------------------------------------------------------ Druckseiten ---
   Die Worksheets sind über @page als A4-Druckstücke gebaut, trugen aber die
   Scroll-Fortschrittsleiste und die Reveal-Animation der Marketingseiten mit.
   Beim Drucken war nicht garantiert, dass die versetzt startenden Blöcke
   überhaupt zurückgesetzt waren. */
@media print{
 #bar,.glowpulse,.ticker-toggle,.skiplink{display:none!important}
 .rv,.reveal{transform:none!important;opacity:1!important}
}

/* Worksheet-Kopfzeile: #8FAE5A auf dem dunklen Hero ergab 3,17:1 bei 8,5pt —
   dort gilt die Grenze für Kleintext. */
.hero .hbar span{color:#A8C77A}

/* Worksheet-Fußzeile (#8A938C auf Weiß, 3,17:1) und die grünen Auszeichnungen
   im Fließtext (#5C7A12, 4,36:1) — beide knapp darunter. Auf Druckstücken
   zählt Lesbarkeit doppelt: Papier hat weniger Kontrast als ein Bildschirm.
   Bewusst `div.foot`: `footer.foot` auf uebersicht steht auf dunklem Grund
   und braucht die Gegenrichtung. */
div.foot,div.foot span{color:#6B7570}
.use b,.q .qt b,.chk b,.ex b,.wk .d,.mine,.cat .ct{color:#46620E}

/* Dunkle Fußzeile auf uebersicht — dort muss es heller statt dunkler werden. */
footer.foot,footer.foot .wrap,footer.foot a{color:#9FAAB1}

/* Klumpen-Rechner, Hinweiszeile unter dem Balken: #68727A auf #E9E9E1 = 3,97:1.
   Der Wert steht als style="…" direkt am Element — ein Inline-Style schlägt
   jeden Selektor. `!important` ist hier deshalb nicht Bequemlichkeit, sondern
   das einzige Mittel, das ohne Eingriff ins Seiten-Markup greift. */
.kbar .kseg{color:#4F5854!important}

/* ==========================================================================
   ZWEITE RUNDE — aus der Design-Kritik vom 24.07.2026
   Alles unterhalb dieser Linie stammt aus dem gerenderten Zustand der Seiten,
   nicht aus der Code-Lektüre. Reihenfolge = Befundnummer im Bericht.
   ========================================================================== */

/* --- Befund 3: phils-ai-lab hatte auf dem Handy KEINE Navigation ----------
   Ursache: Der Mobil-Block oben zielt auf .gnav-r und .nav-r. phils-ai-lab
   benutzt aber .navlinks — der Selektor traf die Seite nie. Gemessen vorher:
   ein einziger sichtbarer Link (der CTA), kein Scrollbereich. Die fünf
   Abschnittslinks waren ersatzlos weg.
   Statt die Regeln zu duplizieren, wird .navlinks aufgenommen. */
.navlinks a{text-decoration:none}
.navlinks a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:860px){
 .navlinks a:not(.cta){display:inline-flex!important}
 .navlinks{width:100%;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .navlinks::-webkit-scrollbar{display:none}
 .navlinks a{
  flex:none;background:#0C2822;border:1px solid #244038;border-radius:999px;
  padding:0 16px;font-size:13.5px;font-weight:600;white-space:nowrap;
 }
 .navlinks a.cta{background:#C6FF01;border-color:#C6FF01;color:#041615}
}

/* --- Befund 8: Die Scrollleiste schnitt ihr letztes Element stumm ab ------
   Gemessen: scrollWidth 490 bei clientWidth 342. Das letzte Element — der
   Lemon-CTA — endete bei 514px und wurde mitten im Wort gekappt. Ohne
   Verlaufskante liest sich das als kaputtes Layout statt als Scrollbereich.
   Die Maske blendet nur aus, solange rechts noch etwas kommt; am Ende der
   Leiste ist sie durch das mitscrollende Padding faktisch weg. */
@media(max-width:860px){
 .gnav-r,.nav-r,.navlinks{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);
  padding-right:22px;
  scroll-padding-right:22px;
 }
}

/* --- Befund 5: Laufweite der Display-Zeile war uneinheitlich --------------
   Gemessen über alle 12 Seiten: zehn Seiten -0,6px, zwei Seiten »normal« —
   ausgerechnet die mit der größten Schrift (phils-ai-lab 86px, uebersicht
   54px). Große Grade brauchen MEHR negatives Tracking als kleine, nicht
   weniger; die Regel stand faktisch auf dem Kopf.
   Jetzt relativ zur Schriftgröße statt als fester Pixelwert — damit trägt
   sich derselbe Wert über alle Grade konsistent. */
h1{letter-spacing:-.012em}
.ghero h1,.hero h1{letter-spacing:-.012em}

/* --- Befund 4: Lemon markierte alles, also nichts -------------------------
   Gezählt: 11 bis 21 nicht-klickbare Lemon-Flächen pro Seite gegen zwei bis
   drei echte Buttons. Entscheidung (Phil, 24.07.): Lemon bleibt Markenfarbe
   und darf überall stehen — dafür bekommen die Buttons ein eigenes,
   eindeutiges Merkmal.

   Das Merkmal ist die VOLLE PILLENFORM. Sie gehört ab jetzt ausschließlich
   Dingen, die man anklicken kann. Betroffen waren gemessen:
     .tag        auf phils-ai-lab   229x39px, r=999  (»Phil · Laborinhaber«)
     .badge      auf uebersicht      52x19px, r=999  (4x »Kern«)
     .tag.t-krit auf uebersicht      75x23px, r=999  (2x »Kritisch«)
   Alle drei sahen aus wie Buttons und waren keine. Kleine Punkte (9x9) und
   dekorative Glyphen bleiben rund — bei der Größe entsteht keine
   Verwechslung. */
.tag:not(a):not(button),
.badge:not(a):not(button),
span.tag,span.badge{border-radius:8px}

/* Die Gegenseite: echte Buttons bekommen ihre Signatur. Ein weicher
   Lemon-Schein, den sonst nichts auf der Seite trägt — plus eine
   Bewegung bei Hover und ein klar sichtbarer Fokusring. */
.btn.primary,a.cta,button.cta{
 box-shadow:0 6px 22px -10px rgba(198,255,1,.65);
 /* Kurve und Dauer stammen aus dem Motion-Pass weiter unten. Sie stehen
    hier direkt in der Regel, weil dieser Selektor (0,2,0) spezifischer ist
    als das dortige `.btn` — eine zweite Regel würde nur eine Schicht mehr
    ergeben, die man beim Lesen übersieht. */
 transition:box-shadow .16s var(--ease-out,cubic-bezier(.23,1,.32,1)),
            transform .16s var(--ease-out,cubic-bezier(.23,1,.32,1));
}
.btn.primary:active,a.cta:active,button.cta:active{transform:scale(.97)}
.btn.primary:hover,a.cta:hover,button.cta:hover{
 box-shadow:0 10px 30px -8px rgba(198,255,1,.85);
}
.btn.primary:focus-visible,a.cta:focus-visible,button.cta:focus-visible{
 box-shadow:0 0 0 3px #041615,0 0 0 6px rgba(198,255,1,.9);
}
@media(prefers-reduced-motion:reduce){
 .btn.primary,a.cta,button.cta{transition:none}
}

/* --- Befund 6 zurückgenommen (Phil, 24.07.) -------------------------------
   Ich hatte die Wortmarke »phils.ai.lab« neben das lab|OS-Zeichen gesetzt,
   weil sie auf neun Seiten fehlte. Phil will das nicht — das Zeichen steht
   allein. Rücknahme vollständig: das <span class="wordmark"> ist aus den
   zehn HTML-Dateien wieder raus, hier bleibt nur die Ausrichtung des Logos,
   die unabhängig davon richtig ist.
   phils-ai-lab.html und labor-roadmap.html tragen den Namen weiterhin —
   der stand dort im Originalmarkup und wurde nie von mir angefasst. */
a.glogo{display:inline-flex;align-items:center;text-decoration:none}

/* --- Ja/Nein-Schalter: Ampelfarben raus (Phil, 24.07.2026) ----------------
   Betrifft problem-ki-einstieg und problem-koepfe-abhaengigkeit.
   Vorher im jeweiligen Seiten-CSS: .onja = #2E9E5B (Grün),
   .onnein = #D64545 (Rot). Drei Gründe für den Austausch:

   1. Beide Farben kommen sonst nirgends im System vor. Die Palette ist
      Ink #041615, Lemon #C6FF01, Paper #EEF0F1 — ein Ampel-Rot und ein
      Ampel-Grün sind Fremdkörper.
   2. Falsche Bedeutung. Rot heißt „Fehler". Ein „Nein" ist hier aber eine
      ehrliche Antwort, keine Verfehlung — zwei Zeilen darüber steht
      „Ehrlich zählt mehr als schön". Wer Ehrlichkeit mit Alarmrot
      quittiert, bekommt weniger davon.
   3. Rot-Grün ist die schlechteste denkbare Paarung: rund 8 % der Männer
      unterscheiden sie nicht zuverlässig, und die Farbe war hier das
      EINZIGE Unterscheidungsmerkmal zwischen den beiden Zuständen.
      Zielgruppe sind DACH-Laborinhaber.

   Jetzt zeigt die FLÄCHE die Auswahl an, nicht der Farbton: gewählt =
   Ink-Fläche, ungewählt = heller Umriss. Funktioniert auch in Graustufen.
   Welche Antwort es war, sagt das Wort selbst; Lemon bleibt als
   Markenakzent auf dem „Ja". Dieselbe Bildsprache wie .vscore direkt
   darunter (Ink-Block, Lemon-Zahl) — der Block ist damit aus einem Guss.

   Kontrast: vorher Weiß auf Grün 3,41:1 und Weiß auf Rot 4,38:1 — beides
   unter AA für 13px fett. Jetzt 15,66:1 und 16,53:1. Die Prüfung der
   letzten Runde hat die Schalter nie gesehen, weil sie per JavaScript
   entstehen und nur im gewählten Zustand färben.

   Diese Regeln stehen hier statt im Seiten-CSS, weil die Korrektur weiter
   oben (Zeile ~203) sonst gewinnt — sie lädt später und ist spezifischer.
   Sie ist jetzt auf den ungewählten Zustand eingeschränkt. */
.jn button.onja{background:var(--ink,#041615);border-color:var(--ink,#041615);color:var(--lemon,#C6FF01)}
.jn button.onnein{background:var(--ink,#041615);border-color:var(--ink,#041615);color:var(--paper,#EEF0F1)}
.gsec.light .jn button.onja,section.light .jn button.onja{color:var(--lemon,#C6FF01)}
.gsec.light .jn button.onnein,section.light .jn button.onnein{color:var(--paper,#EEF0F1)}
/* Der ungewählte Zustand darf sichtbar bleiben, ohne mitzuschreien. */
.jn button:hover:not(.onja):not(.onnein){border-color:#a9b0a5;color:#3c443e}
.jn button:focus-visible{outline:2px solid var(--ink,#041615);outline-offset:2px}

/* --- Deutsche Komposita brachen nicht (24.07.2026) ------------------------
   Gefunden auf problem-auslastung-gewinn, 390px: die Überschrift
   „Der Deckungsbeitrags-Rechner." erzeugte 12px echten Seitenscroll
   (scrollWidth 402 bei clientWidth 390).

   Ursache: „DECKUNGSBEITRAGS-" ist in Versalien bei 28px 378px breit und
   steht in einer 342px-Spalte. Am Bindestrich wurde bereits umbrochen — das
   Reststück passt trotzdem nicht, und ohne weitere Bruchstelle läuft es aus
   dem Kasten. Das ist kein Einzelfall, sondern die Regel bei deutschen
   Komposita in Versalien: Auftragsdurchlaufzeit, Eingangskontrolle,
   Deckungsbeitragsrechnung.

   Warum die Messung der letzten Runde es nicht fand: Die Prüfung lief bei
   1280px. Der Überlauf entsteht erst, wenn die Spalte schmaler wird als das
   längste Wort.

   Lösung: echte Silbentrennung statt Gewalt. <html lang="de"> ist gesetzt,
   also trennt der Browser nach deutschen Regeln — „DECKUNGS-BEITRAGS-".
   break-word bleibt als Netz für den Fall, dass ein Wort auch dafür zu lang
   ist; es greift nur, wenn Silbentrennung nicht ausreicht. */
@media(max-width:860px){
 /* Silbentrennung nur auf Überschriften — dort ist ein Trennstrich richtig
    und sieht gewollt aus. */
 h1,h2,h3,h4,.hero-sub,.lead,.big-p{-webkit-hyphens:auto;hyphens:auto}
 /* Das Netz gilt für ALLES: overflow-wrap vererbt sich, und es greift erst,
    wenn ein Wort sonst aus seinem Kasten liefe. Ohne diese Zeile müsste man
    jeden einzelnen Baustein nachziehen — gefunden wurden Überläufe in
    .gstep-b, .hp-final und weiteren, jeweils an einem anderen Kompositum. */
 body{overflow-wrap:break-word}
}

/* ==========================================================================
   MOTION- UND ZUSTANDS-POLITUR — 24.07.2026
   --------------------------------------------------------------------------
   Ergebnis eines Motion-Reviews über alle Seiten. Die Regeln stehen bewusst
   hier und nicht in einer Seitendatei: Alle Bauteile sind geteilt, eine
   Korrektur nur auf phils-ai-lab würde die Seiten wieder auseinanderlaufen
   lassen.
   ========================================================================== */

:root{
  /* Die eingebauten CSS-Kurven sind zu schwach für bewusste Bewegung.
     Diese Kurve startet schnell und läuft weich aus — der Nutzer sieht
     sofort eine Reaktion. */
  --ease-out:cubic-bezier(.23,1,.32,1);
}

/* --- 1. Druck-Rückmeldung ------------------------------------------------
   Befund: Auf der gesamten Website hatte genau EIN Element einen
   :active-Zustand (.tbtn). Der Haupt-CTA „Meine Labor-Roadmap" reagierte
   beim Drücken sichtbar gar nicht. Ein Button muss sich anfühlen, als hätte
   die Oberfläche den Druck gehört. */
.btn,.gnav-r .cta,.nav-r .cta,.navlinks a.cta,.tbtn,.chip,.others a,.qzrec a{
  transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),
             border-color .16s var(--ease-out),color .16s var(--ease-out);
}
.btn:active,.gnav-r .cta:active,.nav-r .cta:active,.navlinks a.cta:active,
.chip:active,.others a:active,.qzrec a:active{transform:scale(.97)}

/* --- 2. Hover nur dort, wo es Hover gibt ---------------------------------
   Befund: 20 :hover-Regeln, keine einzige gegen Touch abgesichert. Auf dem
   Handy löst eine Berührung den Hover aus — die Karte bleibt danach
   angehoben, der Slide-Fächer bleibt aufgefächert stehen. Das liest sich
   als Fehler, nicht als Effekt. */
@media(hover:none){
  .btn:hover,.gnav-r .cta:hover,.nav-r .cta:hover,.navlinks a.cta:hover,
  a.wcard:hover,.deck:hover .card,.hero-photo:hover img,.story-visual:hover img,
  .hero-photo.portrait:hover img{
    transform:none;
  }
}

/* --- 3. Bild-Zoom war dreimal zu lang -----------------------------------
   Befund: .hero-photo img und .story-visual img liefen mit 1,1 s. Ein
   Hover-Effekt wird zigmal pro Sitzung gesehen; alles über 300 ms wirkt
   dort zäh. 1,1 s ist keine Eleganz, sondern Verzögerung. Auf 480 ms
   gebracht — lang genug, dass es ruhig bleibt, kurz genug, dass es folgt. */
.hero-photo img,.story-visual img{transition:transform .48s var(--ease-out)}

/* --- 4. Reveal: 800 ms auf 520 ms ---------------------------------------
   Befund: .rv lief mit 800 ms. Beim Scrollen kommt der Inhalt dadurch
   spürbar hinterher. Die Bewegung selbst bleibt richtig: nur Verschiebung,
   nie Unsichtbarkeit — fällt das Skript aus, steht trotzdem alles da. */
.rv{transition:transform .52s var(--ease-out)!important}

/* --- 5. Nichts erscheint aus dem Nichts ---------------------------------
   Befund: Das Häkchen in .gcb::after wuchs aus scale(0). Nichts in der
   echten Welt taucht aus dem Nichts auf; das wirkt wie ein Sprung.
   Jetzt aus scale(.6) mit Deckkraft. */
.gcb::after{transform:rotate(45deg) scale(.6);opacity:0;
  transition:transform .16s var(--ease-out),opacity .12s linear}
.gchk input:checked + .gcb::after,.gchk.on .gcb::after,
.gcb.on::after,input:checked ~ .gcb::after{transform:rotate(45deg) scale(1);opacity:1}

/* --- 6. Fortschrittsbalken laufen über die Breite -----------------------
   Befund: .tb-fill und .pp-fill animieren `width`. Das löst bei jedem
   Schritt Layout und Paint aus statt nur Compositing. Die Umstellung auf
   transform ist hier nicht ohne Markup-Eingriff möglich, deshalb bleibt es
   vorerst — festgehalten, damit es nicht vergessen wird:
   .tb-fill{transition:width .25s}  /  .pp-fill{transition:width .3s}
   Beide betreffen nur die Werkzeugseiten, nicht phils-ai-lab. */

/* --- 7. Fokus bleibt sichtbar -------------------------------------------
   Ergänzend zum Fokusring: Bei Tastaturbedienung darf der Druck-Effekt
   nicht die Sichtbarkeit des Rings stören. */
.btn:focus-visible,.gnav-r .cta:focus-visible,.nav-r .cta:focus-visible,
.navlinks a.cta:focus-visible{transform:none}

@media(prefers-reduced-motion:reduce){
  .btn,.gnav-r .cta,.nav-r .cta,.navlinks a.cta,.tbtn,.chip,.others a,.qzrec a,
  .hero-photo img,.story-visual img,.rv{transition-duration:.08s!important}
  .btn:active,.gnav-r .cta:active{transform:none}
}

/* --- Quellenangabe unter Kennzahlen (24.07.2026) --------------------------
   Vier Hero-Zahlen behaupteten etwas über das Labor des Lesers, ohne Quelle.
   Bei einer Zielgruppe, die ihre eigenen Kennzahlen kennt, kostet das
   Vertrauen genau dort, wo es entsteht. Wo es eine belastbare Quelle gibt,
   steht sie jetzt darunter; wo nicht, wurde die Aussage umformuliert.
   Die Zeile ist bewusst leise — sie soll belegen, nicht ablenken. */
.statsrc{
  margin-top:10px;font-size:12.5px;line-height:1.5;color:#8A968F;max-width:440px;
}
.gsec.light .statsrc,section.light .statsrc{color:#5A646B}

/* --- Ergebnis sichern (24.07.2026) ---------------------------------------
   Das Roadmap-Ergebnis lebt nur in der Sitzung. Wer den Tab schließt, muss
   das Quiz neu machen — und der Lead ist weg. Ein Satz direkt über den
   Aktionsknöpfen fängt das ab. */
.rkeep{
  margin:26px 0 14px;padding:12px 16px;
  border-left:3px solid var(--fix-focus);
  background:rgba(198,255,1,.06);
  font-size:14.5px;line-height:1.55;color:#C8D2CB;max-width:560px;
}
.gsec.light .rkeep,section.light .rkeep{color:#333D44;background:rgba(198,255,1,.16)}

/* ============================================================
   BELEG-BLOCK — externe Nachprüfbarkeit (IAB / Job-Futuromat)
   Zahlenreihe + Verweis auf ein neutrales Werkzeug.
   Bewusst ohne Animation: eine Beweis-Grafik soll stillstehen,
   nicht performen. Keine Breiten-Animation, kein Reveal-Delay.
   ============================================================ */
.evgrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin:28px 0 12px;
}
.evcard{
  background:#08201B;border:1px solid var(--line,#1E3A33);
  border-radius:18px;padding:20px 18px;
}
.evcard.hi{border-color:var(--lemon,#C6FF01);background:rgba(198,255,1,.07)}
.evnum{
  display:block;font-size:clamp(30px,3.6vw,40px);font-weight:900;
  font-stretch:120%;line-height:1;color:var(--paper,#EEF0F1);
}
.evcard.hi .evnum{color:var(--lemon,#C6FF01)}
.evlab{font-size:13.5px;color:#9FAAB1;margin-top:9px;line-height:1.35}
.evcard.hi .evlab{color:#D6E3D3}
.evbar{height:4px;border-radius:2px;background:#1E3A33;margin-top:16px;overflow:hidden}
.evbar i{display:block;height:100%;border-radius:2px;background:#5E9C7B}
.evcard.hi .evbar i{background:var(--lemon,#C6FF01)}

.evcta{
  border:1px solid var(--line,#1E3A33);border-radius:18px;
  padding:26px 28px;margin-top:32px;
  background:linear-gradient(180deg,rgba(198,255,1,.055),rgba(198,255,1,0));
}
.evct{
  font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lemon,#C6FF01);margin-bottom:11px;
}
.evcta p{font-size:16px;color:#A9B1B6;line-height:1.6;max-width:640px}
.evcta .btn{margin-top:20px}

/* helle Sektionen, falls der Block dort wiederverwendet wird */
.gsec.light .evcard,section.light .evcard{background:#FFF;border-color:#E2E7EA}
.gsec.light .evnum,section.light .evnum{color:var(--ink,#041615)}
.gsec.light .evlab,section.light .evlab{color:#5A646B}
.gsec.light .evbar,section.light .evbar{background:#E2E7EA}
.gsec.light .evbar i,section.light .evbar i{background:#5C7A12}
.gsec.light .evct,section.light .evct{color:#5C7A12}
.gsec.light .evcta,section.light .evcta{border-color:#E2E7EA}
.gsec.light .evcta p,section.light .evcta p{color:#333D44}

@media(max-width:760px){
  .evgrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .evcta{padding:22px 20px}
}
@media(max-width:380px){
  .evgrid{grid-template-columns:1fr}
}

/* ============================================================
   DUELL — zwei Zahlen, die gegeneinander stehen
   Für Vergleiche, bei denen die Lücke die eigentliche Aussage ist
   (Renteneintritte gegen Nachrücker, Gesellenprüfungen 1999/2022).
   Ebenfalls bewusst statisch.
   ============================================================ */
.duel{
  display:grid;grid-template-columns:1fr auto 1fr;
  border:1px solid var(--line,#1E3A33);border-radius:18px;
  overflow:hidden;margin:28px 0 14px;background:#08201B;
}
.duel-s{padding:26px 26px 24px}
.duel-n{
  display:block;font-size:clamp(34px,4.4vw,52px);font-weight:900;
  font-stretch:120%;line-height:1;color:var(--paper,#EEF0F1);
}
.duel-s.lo .duel-n{color:var(--lemon,#C6FF01)}
.duel-l{font-size:14.5px;color:#9FAAB1;margin-top:10px;line-height:1.45;max-width:32ch}
.duel-bar{height:5px;border-radius:3px;background:#1E3A33;margin-top:16px;overflow:hidden}
.duel-bar i{display:block;height:100%;border-radius:3px;background:#5E9C7B}
.duel-s.lo .duel-bar i{background:var(--lemon,#C6FF01)}
.duel-vs{
  display:flex;align-items:center;justify-content:center;
  padding:0 18px;border-left:1px solid var(--line,#1E3A33);
  border-right:1px solid var(--line,#1E3A33);
  font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#8A959C;background:#061A16;
}
.duel-gap{
  font-size:17.5px;font-weight:700;line-height:1.5;color:var(--paper,#EEF0F1);
  border-left:3px solid var(--lemon,#C6FF01);padding-left:18px;
  margin:0 0 6px;max-width:640px;
}
.duel-gap b{color:var(--lemon,#C6FF01)}

.gsec.light .duel,section.light .duel{background:#FFF;border-color:#E2E7EA}
.gsec.light .duel-n,section.light .duel-n{color:var(--ink,#041615)}
.gsec.light .duel-l,section.light .duel-l{color:#5A646B}
.gsec.light .duel-bar,section.light .duel-bar{background:#E2E7EA}
.gsec.light .duel-bar i,section.light .duel-bar i{background:#5C7A12}
.gsec.light .duel-vs,section.light .duel-vs{background:#F6F8F9;border-color:#E2E7EA;color:#7A857E}
.gsec.light .duel-gap,section.light .duel-gap{color:var(--ink,#041615)}
.gsec.light .duel-gap b,section.light .duel-gap b{color:#5C7A12}
.gsec.light .duel-s.lo .duel-n,section.light .duel-s.lo .duel-n{color:#4E6A10}

@media(max-width:720px){
  .duel{grid-template-columns:1fr}
  .duel-vs{
    border-left:0;border-right:0;
    border-top:1px solid var(--line,#1E3A33);border-bottom:1px solid var(--line,#1E3A33);
    padding:9px 0;
  }
  .gsec.light .duel-vs,section.light .duel-vs{border-top-color:#E2E7EA;border-bottom-color:#E2E7EA}
  .duel-s{padding:22px 20px}
  .duel-l{max-width:none}
}

/* Zwischenüberschrift innerhalb der Demografie-Abschnitte */
.dh3{
  font-size:clamp(19px,2.1vw,23px);font-weight:800;font-stretch:110%;
  line-height:1.25;margin:46px 0 14px;color:var(--paper,#EEF0F1);
}
.gsec.light .dh3,section.light .dh3{color:var(--ink,#041615)}
.dh3+.big-p{margin-top:0}

/* Korrekturen am Beleg-/Duell-Bauteil nach dem Rendern */
.duel-n{white-space:nowrap}
.evnum.sm{font-size:clamp(23px,2.5vw,29px);white-space:nowrap}
/* Hervorhebung muss auch in hellen Sektionen greifen — die
   .light-Regeln oben sind sonst spezifischer als .evcard.hi */
.gsec.light .evcard.hi,section.light .evcard.hi{
  border-color:#8FBF14;background:rgba(198,255,1,.22);
}
.gsec.light .evcard.hi .evnum,section.light .evcard.hi .evnum{color:#33420A}
.gsec.light .evcard.hi .evbar i,section.light .evcard.hi .evbar i{background:#4E6A10}

/* Vierspaltige Kachelreihe: Zahl muss auch bei sechs Zeichen
   („42,4 %“) einzeilig in die Kachel passen — sonst bricht sie
   um und die Reihe wirkt unruhig. */
.evnum{font-size:clamp(26px,3.1vw,34px)}

/* Die konkrete Berufs-Zahl im Beleg-Block: gleiche Optik wie der
   Hero-Stat, aber über die volle Textbreite. */
.statwide .statsub{max-width:600px}
.statwide{margin:24px 0 26px}
.autoliste{margin-top:10px;margin-bottom:26px}
.autoliste li{padding-top:6px;padding-bottom:6px}
/* Merksatz-Kasten auf dunklem Grund (der Standard ist lemon auf hell) */
.merk-dark{
  background:transparent;border:1px solid var(--lemon,#C6FF01);
  color:var(--paper,#EEF0F1);font-size:19px;line-height:1.45;
  padding:26px 28px;margin:6px 0 28px;
}
/* In hellen Sektionen war die Schriftfarbe bisher gleich dem Grund —
   der Kasten stand dort leer da. Gleiche Kante, lesbarer Text. */
.gsec.light .merk-dark,section.light .merk-dark,.lightsec .merk-dark{
  color:var(--ink,#041615);border-color:#AFCB16;
}
.gsec.light .merk-dark b,section.light .merk-dark b,.lightsec .merk-dark b{color:var(--ink,#041615)}

/* ============================================================
   VERGLEICHSTABELLE — zwei Berufe, gleiche Kennzahlen
   Bewusst schlicht: Zahlen sollen lesbar sein, nicht dekoriert.
   ============================================================ */
.cmp{width:100%;border-collapse:collapse;margin:26px 0 12px;font-variant-numeric:tabular-nums}
.cmp th,.cmp td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line,#1E3A33)}
.cmp thead th{
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#9FAAB1;border-bottom:1px solid var(--line,#1E3A33);
}
.cmp thead th.hi{color:var(--lemon,#C6FF01)}
.cmp tbody th{font-weight:500;font-size:15px;color:#9FAAB1}
.cmp td{font-size:17px;font-weight:800;color:var(--paper,#EEF0F1);white-space:nowrap}
.cmp td.hi{color:var(--lemon,#C6FF01)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.gsec.light .cmp th,.gsec.light .cmp td,section.light .cmp th,section.light .cmp td{border-color:#E2E7EA}
.gsec.light .cmp tbody th,section.light .cmp tbody th{color:#5A646B}
.gsec.light .cmp thead th,section.light .cmp thead th{color:#5A646B}
.gsec.light .cmp td,section.light .cmp td{color:var(--ink,#041615)}
.gsec.light .cmp td.hi,.gsec.light .cmp thead th.hi,
section.light .cmp td.hi,section.light .cmp thead th.hi{color:#4E6A10}
@media(max-width:620px){
  .cmp th,.cmp td{padding:11px 8px}
  .cmp tbody th{font-size:13.5px}
  .cmp td{font-size:15px}
  .cmp thead th{font-size:10px;letter-spacing:.08em}
}

/* Auf schmalen Schirmen erzwingen die nowrap-Zahlen sonst eine
   Mindestbreite, die den Container sprengt. */
@media(max-width:620px){
  .cmp{table-layout:fixed;width:100%}
  .cmp th:first-child{width:42%}
  .cmp thead th{white-space:normal;overflow-wrap:normal;word-break:normal;
    letter-spacing:.04em;font-size:9.5px;line-height:1.3}
}
/* Quellzeile direkt vor einem Fazit-Satz braucht etwas Luft */
.statsrc+.duel-gap{margin-top:20px}

/* ============================================================
   MOTION-REVIEW — Umsetzung der Befunde
   Regelwerk: Emil Kowalski / animations.dev.
   Grundsatz: nur transform und opacity animieren.
   ============================================================ */

/* --- B1 · Fortschrittsbalken: width -> scaleX --------------------------
   #bar wurde bei JEDEM Scroll-Ereignis über style.width gesetzt.
   Das löst pro Frame Layout UND Paint aus. Jetzt scaleX, also nur
   Compositing. Das JS setzt entsprechend transform statt width.        */
#bar{width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform}

.pp-fill,.planprog-fill,.ppfill,.dbbar i,.planprog-bar i{
  width:100%;transform:scaleX(0);transform-origin:left center;
  transition:transform .3s var(--ease-out,cubic-bezier(.23,1,.32,1));
  will-change:transform;
}
/* Ergebnisbalken der Roadmap behalten ihre Breite als Layout,
   GSAP animiert jetzt scaleX statt width. */
#rbars .fl{transform-origin:left center}

/* Die Segmentleiste bleibt bewusst bei width: dort IST die Breite das
   Layout (nebeneinanderliegende Segmente mit Beschriftung). Entfernt
   wird nur die Übergangsanimation der Layout-Eigenschaft.             */
.kseg{transition:none}

/* --- B2 · transition:all -> Eigenschaften benennen -------------------- */
.pcbox,.chkitem .cbox,.stepchk .box{
  transition:transform .15s var(--ease-out,cubic-bezier(.23,1,.32,1)),
             border-color .15s ease,background-color .15s ease,color .15s ease;
}
.chkitem .cbox svg,.stepchk .box svg{
  transition:transform .15s var(--ease-out,cubic-bezier(.23,1,.32,1)),opacity .15s ease;
}

/* --- B3 · Endlos-Puls auf weichgezeichnetem Element ------------------
   filter:blur(10px) + animation:...infinite = dauerhafte Compositor-
   Last ohne Zweck. Der Schein bleibt, die Bewegung geht.              */
.glowpulse{animation:none!important}

/* --- B4 · Glitch-Effekt auf der Überschrift --------------------------
   Personality-Bruch: die Marke wirbt mit „ehrliche Zahlen“.           */
.hero h1 .mark{animation:none!important}

/* --- B5 · Skiplink ----------------------------------------------------
   Tastatur-Aktion: bekommt laut Standard nie eine Animation. Und
   `top` ist ohnehin eine Layout-Eigenschaft.                          */
.skiplink{transition:none!important}

/* --- B6 · Marquee anhalten, wenn niemand hinsieht -------------------- */
.slidetrack,.ticker .tin,.ticker .inner{animation-play-state:running}

/* --- B8 · Beweis-Balken: hier IST Bewegung gerechtfertigt ------------
   Einmal pro Besuch sichtbar, Zweck „Erklärung“ — laut Frequenz-
   tabelle genau der Fall, der Bewegung verdient. transform-only,
   420 ms, starke ease-out-Kurve.                                      */
.evbar i,.duel-bar i{
  transform-origin:left center;transform:scaleX(0);
  transition:transform .42s var(--ease-out,cubic-bezier(.23,1,.32,1));
}
.evbar.in i,.duel-bar.in i{transform:scaleX(1)}
/* Ohne JS (oder wenn der Beobachter nicht greift) sind die Balken
   trotzdem sichtbar — nie etwas dauerhaft verstecken. */
.no-js .evbar i,.no-js .duel-bar i{transform:scaleX(1)}

/* --- B7 · prefers-reduced-motion: sanfter, nicht null ----------------
   Die Seiten hatten pauschal *{animation:none;transition:none}.
   Der Standard verlangt: Bewegung raus, verständnisfördernde
   Übergänge drin.                                                     */
@media(prefers-reduced-motion:reduce){
  .evbar i,.duel-bar i{transform:scaleX(1)!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
  /* Zustandswechsel bleiben nachvollziehbar: Farbe und Deckkraft ja,
     Bewegung nein. */
  .pcbox,.chkitem .cbox,.stepchk .box,.jn button,.btn{
    transition:background-color .2s ease,border-color .2s ease,color .2s ease!important;
  }
  .pp-fill,.planprog-fill,.ppfill,.dbbar i,.planprog-bar i{transition:none!important}
}

/* ============================================================
   KERNTÄTIGKEITEN-MATRIX
   Zwei Spalten: was die Maschine heute kann, was beim Menschen
   bleibt. Ersetzt eine Aufzählung, die der Leser sonst im Kopf
   gegeneinanderhalten müsste.
   ============================================================ */
.ktm{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin:28px 0 14px;
}
.ktm-col{
  border:1px solid var(--line,#1E3A33);border-radius:18px;
  padding:22px 20px 20px;background:#08201B;
}
.ktm-col.mensch{border-color:var(--lemon,#C6FF01);background:rgba(198,255,1,.06)}
.ktm-h{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.ktm-n{font-size:30px;font-weight:900;font-stretch:120%;line-height:1;color:#9FAAB1}
.ktm-col.mensch .ktm-n{color:var(--lemon,#C6FF01)}
.ktm-t{font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#9FAAB1}
.ktm-col.mensch .ktm-t{color:var(--lemon,#C6FF01)}
.ktm-sub{font-size:13.5px;color:#8A959C;margin:0 0 16px;line-height:1.4}
.ktm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ktm-list li{
  font-size:14.5px;line-height:1.35;color:#C8D2CB;
  padding:9px 12px 9px 30px;position:relative;
  border:1px solid #1E3A33;border-radius:12px;background:rgba(255,255,255,.015);
}
.ktm-col.mensch .ktm-list li{border-color:rgba(198,255,1,.28);color:var(--paper,#EEF0F1)}
/* Marker: Quadrat = Maschine, Kreis = Mensch. Form statt Farbe,
   damit es auch ohne Farbwahrnehmung unterscheidbar bleibt. */
.ktm-list li::before{
  content:"";position:absolute;left:11px;top:50%;margin-top:-5px;
  width:10px;height:10px;background:#5E9C7B;border-radius:2px;
}
.ktm-col.mensch .ktm-list li::before{background:var(--lemon,#C6FF01);border-radius:50%}
.ktm-cap{font-size:13px;color:#8A959C;line-height:1.5;margin-top:14px}

.gsec.light .ktm-col,section.light .ktm-col{background:#FFF;border-color:#E2E7EA}
.gsec.light .ktm-col.mensch,section.light .ktm-col.mensch{border-color:#8FBF14;background:rgba(198,255,1,.16)}
.gsec.light .ktm-list li,section.light .ktm-list li{color:#333D44;border-color:#E2E7EA;background:#FAFAF5}
.gsec.light .ktm-n,.gsec.light .ktm-t,.gsec.light .ktm-sub,
section.light .ktm-n,section.light .ktm-t,section.light .ktm-sub{color:#5A646B}
.gsec.light .ktm-col.mensch .ktm-n,.gsec.light .ktm-col.mensch .ktm-t,
section.light .ktm-col.mensch .ktm-n,section.light .ktm-col.mensch .ktm-t{color:#4E6A10}
.gsec.light .ktm-col.mensch .ktm-list li::before,
section.light .ktm-col.mensch .ktm-list li::before{background:#4E6A10}

@media(max-width:760px){
  .ktm{grid-template-columns:1fr;gap:12px}
  .ktm-col{padding:18px 16px 16px}
}

/* ============================================================
   STUFENLEITER — die fünf Reifegrade als Treppe
   Die Seite spricht von „5 Stufen“, zeigt sie aber nur im
   Quiz-Ergebnis. Hier stehen sie sichtbar nebeneinander.
   ============================================================ */
.leiter{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end;margin:30px 0 10px}
.lstufe{display:flex;flex-direction:column;justify-content:flex-end}
.lbalken{
  border-radius:12px 12px 0 0;background:#0C2822;border:1px solid var(--line,#1E3A33);
  border-bottom:0;position:relative;
}
.lstufe:nth-child(1) .lbalken{height:56px}
.lstufe:nth-child(2) .lbalken{height:88px}
.lstufe:nth-child(3) .lbalken{height:120px}
.lstufe:nth-child(4) .lbalken{height:152px}
.lstufe:nth-child(5) .lbalken{height:184px;background:rgba(198,255,1,.10);border-color:var(--lemon,#C6FF01)}
.lnum{
  position:absolute;left:0;right:0;bottom:12px;text-align:center;
  font-size:26px;font-weight:900;font-stretch:120%;color:#5E9C7B;line-height:1;
}
.lstufe:nth-child(5) .lnum{color:var(--lemon,#C6FF01)}
.lfuss{border-top:2px solid var(--line,#1E3A33);padding-top:12px}
.lstufe:nth-child(5) .lfuss{border-top-color:var(--lemon,#C6FF01)}
.lname{font-size:14.5px;font-weight:800;color:var(--paper,#EEF0F1);line-height:1.25;margin-bottom:5px}
.lclaim{font-size:13px;color:#8A959C;line-height:1.35;font-style:italic}
.lstufe:nth-child(5) .lname{color:var(--lemon,#C6FF01)}

.gsec.light .lbalken,section.light .lbalken{background:#EFEFE7;border-color:#E2E7EA}
.gsec.light .lname,section.light .lname{color:var(--ink,#041615)}
.gsec.light .lclaim,section.light .lclaim{color:#5A646B}
.gsec.light .lnum,section.light .lnum{color:#7A857E}

@media(max-width:820px){
  .leiter{grid-template-columns:1fr;gap:0;align-items:stretch}
  .lstufe{flex-direction:row;gap:14px;align-items:center;
    border-left:2px solid var(--line,#1E3A33);padding:12px 0 12px 0}
  .lstufe:nth-child(5){border-left-color:var(--lemon,#C6FF01)}
  /* Treppe wird auf schmalen Schirmen zur Einrückung */
  .lbalken{height:auto!important;border:0;background:none;flex:none;width:0}
  .lstufe:nth-child(1){padding-left:8px}
  .lstufe:nth-child(2){padding-left:20px}
  .lstufe:nth-child(3){padding-left:32px}
  .lstufe:nth-child(4){padding-left:44px}
  .lstufe:nth-child(5){padding-left:56px}
  .lnum{position:static;text-align:left;font-size:22px;width:34px;flex:none}
  .lfuss{border-top:0;padding-top:0}
}
/* Die Balkenfüße müssen auf einer Linie stehen, sonst ist die
   Treppe keine Treppe. Feste Zeilenhöhe statt align-items:end. */
@media(min-width:821px){
  .leiter{align-items:stretch}
  .lstufe{display:grid;grid-template-rows:190px auto}
  .lbalken{align-self:end;width:100%}
  .lfuss{align-self:start}
}
/* Mobil war die Treppe verrutscht: der Balken auf Breite 0 hat die
   Nummer aus dem Kasten gedrückt. Jetzt eine saubere Einrückungsliste. */
@media(max-width:820px){
  .leiter{grid-template-columns:1fr;gap:0;align-items:stretch}
  .lstufe{
    display:flex;flex-direction:row;align-items:flex-start;gap:12px;
    padding:13px 0 13px 10px;border-left:2px solid var(--line,#1E3A33);
    margin-left:0;
  }
  .lstufe:nth-child(2){margin-left:14px}
  .lstufe:nth-child(3){margin-left:28px}
  .lstufe:nth-child(4){margin-left:42px}
  .lstufe:nth-child(5){margin-left:56px;border-left-color:var(--lemon,#C6FF01)}
  .lbalken{
    height:auto!important;width:26px;flex:none;
    background:none;border:0;position:static;
  }
  .lnum{position:static;text-align:left;font-size:21px;line-height:1.2;margin:0}
  .lfuss{border-top:0;padding-top:0;flex:1;min-width:0}
  .lclaim{font-style:italic}
}
@media(max-width:820px){
  /* Der Kasten der fünften Stufe war spezifischer als die mobile Regel */
  .lstufe:nth-child(5) .lbalken{background:none;border:0}
}

/* ============================================================
   FLOW-MAP — Seitenarchitektur als Diagramm statt als Fließtext
   Vier Spalten, Pfeile dazwischen. Ersetzt einen Absatz, in dem
   die Wege nur beschrieben waren.
   ============================================================ */
.fmap{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:0;align-items:stretch;margin:26px 0 12px}
.fcol{border:1px solid var(--line,#1E3A33);border-radius:18px;padding:18px 16px;background:#08201B;min-width:0}
.fcol.ziel{border-color:var(--lemon,#C6FF01);background:rgba(198,255,1,.07)}
.fstufe{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#8A959C;margin-bottom:12px}
.fcol.ziel .fstufe{color:var(--lemon,#C6FF01)}
.fnodes{display:flex;flex-direction:column;gap:7px}
.fnodes a,.fnodes span{
  display:block;font-size:13.5px;line-height:1.3;color:#C8D2CB;text-decoration:none;
  border:1px solid #1E3A33;border-radius:8px;padding:8px 10px;background:rgba(255,255,255,.02);
  overflow-wrap:break-word;
}
.fnodes a:hover{border-color:var(--lemon,#C6FF01);color:var(--lemon,#C6FF01)}
.fcol.ziel .fnodes a,.fcol.ziel .fnodes span{border-color:rgba(198,255,1,.3);color:var(--paper,#EEF0F1)}
.fpfeil{display:flex;align-items:center;justify-content:center;padding:0 10px;
  color:#5E9C7B;font-size:20px;font-weight:900;flex:none}
.fnote{font-size:13px;color:#8A959C;line-height:1.5;margin-top:12px}

@media(max-width:900px){
  .fmap{grid-template-columns:1fr}
  .fpfeil{padding:8px 0;transform:rotate(90deg)}
}

/* Arbeitsblatt-Landingpages: Hero ohne rechte Bildspalte, damit
   rechts kein leeres Drittel steht. */
.ghero-grid.solo{grid-template-columns:1fr}
.ghero-grid.solo .ghero-l{max-width:760px}
.wgrid-blatt{margin-top:18px}

/* ============================================================
   KURS-WARTELISTE auf labos
   Der Kurs ist noch nicht kaufbar — deshalb bewusst kein
   Verkaufskasten, sondern ein ruhiger Eintrag.
   ============================================================ */
.kursint{
  border:1px solid var(--line,#1E3A33);border-radius:24px;
  padding:32px 34px;margin-top:40px;
  background:linear-gradient(180deg,rgba(198,255,1,.06),rgba(198,255,1,0));
}
.kursint .eyebrow{margin-bottom:12px}
.kursint h3{font-size:clamp(21px,2.4vw,27px);font-weight:900;font-stretch:110%;
  line-height:1.2;margin-bottom:12px;color:var(--paper,#EEF0F1)}
.ki-sub{font-size:16px;color:#A9B1B6;line-height:1.6;max-width:620px;margin-bottom:22px}
.kursint .nl-form{max-width:520px}
.kursint label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#8A959C;margin:14px 0 6px}
.kursint input[type=email],.kursint select{
  width:100%;background:#08201B;border:1px solid #244038;border-radius:12px;
  color:var(--paper,#EEF0F1);font-family:inherit;font-size:16px;padding:12px 14px;
}
.kursint input[type=email]:focus,.kursint select:focus{
  outline:2px solid var(--lemon,#C6FF01);outline-offset:1px;border-color:var(--lemon,#C6FF01)}
.kursint .btn{margin-top:20px}
.kursint .hpot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ki-fine{font-size:13px;color:#7F8D86;line-height:1.5;margin-top:16px;max-width:560px}
.kursok{border-left:3px solid var(--lemon,#C6FF01);padding-left:18px;
  font-size:16.5px;line-height:1.6;color:var(--paper,#EEF0F1);max-width:600px}
.kursok a{color:var(--lemon,#C6FF01)}

.gsec.light .kursint,section.light .kursint{border-color:#E2E7EA}
.gsec.light .kursint h3,section.light .kursint h3{color:var(--ink,#041615)}
.gsec.light .ki-sub,section.light .ki-sub{color:#333D44}
.gsec.light .kursint input[type=email],.gsec.light .kursint select,
section.light .kursint input[type=email],section.light .kursint select{
  background:#FFF;border-color:#D5DADE;color:var(--ink,#041615)}
.gsec.light .kursok,section.light .kursok{color:var(--ink,#041615)}
.gsec.light .kursok a,section.light .kursok a{color:#4E6A10}

@media(max-width:640px){.kursint{padding:24px 20px}}
/* Impressum und Datenschutz klebten im Footer aneinander */
.footnav{display:flex;gap:18px;flex-wrap:wrap}

/* ============================================================
   EINTRITTS-BEWEGUNG für erklärende Bauteile
   Regelwerk: Emil Kowalski. Zulässig, weil jedes dieser Elemente
   einmal pro Besuch gesehen wird und der Zweck „Erklärung" ist —
   laut Frequenztabelle genau der Fall, der Bewegung verdient.
   Nur transform und opacity. 420 ms. Starke ease-out-Kurve.
   ============================================================ */
.ev-in{
  opacity:0;transform:translateY(10px);
  transition:opacity .42s var(--ease-out,cubic-bezier(.23,1,.32,1)),
             transform .42s var(--ease-out,cubic-bezier(.23,1,.32,1));
  will-change:opacity,transform;
}
.ev-in.on{opacity:1;transform:none}

/* Die Stufenleiter ist der einzige Ort mit ausgeprägter Bewegung:
   Die Treppe baut sich auf. Das ist die Aussage der Grafik —
   deshalb darf man sie hier sehen statt nur lesen. */
.leiter .lbalken{transform-origin:bottom center}
@media(min-width:821px){
  .leiter .ev-in{opacity:1;transform:none}
  .leiter .ev-in .lbalken{
    transform:scaleY(0);
    transition:transform .52s var(--ease-out,cubic-bezier(.23,1,.32,1));
  }
  .leiter .ev-in.on .lbalken{transform:scaleY(1)}
  .leiter .ev-in .lfuss{
    opacity:0;transition:opacity .38s ease .18s;
  }
  .leiter .ev-in.on .lfuss{opacity:1}
}

/* Nichts darf dauerhaft unsichtbar bleiben. */
@media(prefers-reduced-motion:reduce){
  .ev-in,.ev-in .lbalken,.ev-in .lfuss{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}



/* ============================================================
   SÄULEN-KARTEN mit Bildhintergrund
   Das Bild liegt hinter der ganzen Karte. Ein Verlauf blendet
   es nach unten in die Kartenfarbe — oben sichtbar, im Textfeld
   deckend. So bleibt der Kontrast unangetastet; gemessen wird
   am gerenderten Pixel, nicht am berechneten Wert.
   ============================================================ */
.cols4 .pcard{position:relative;overflow:hidden;isolation:isolate}
.pimg{
  position:absolute;inset:0;margin:0;z-index:0;pointer-events:none;
  border-radius:inherit;
}
.pimg img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.8) contrast(1.04);
}
/* Verlauf in die Kartenfarbe — heller Abschnitt */
.pimg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.80) 34%,
    rgba(255,255,255,.965) 58%,
    rgba(255,255,255,.99) 100%);
}
/* Die Lemon-Karte braucht ihren eigenen Verlauf */
.cols4 .pcard.lemon .pimg::after{
  background:linear-gradient(180deg,
    rgba(198,255,1,.34) 0%,
    rgba(198,255,1,.82) 34%,
    rgba(198,255,1,.97) 58%,
    rgba(198,255,1,1) 100%);
}
/* Inhalt über das Bild heben */
.cols4 .pcard > :not(.pimg){position:relative;z-index:1}
/* Oben Luft, damit das Bild überhaupt sichtbar wird */
.cols4 .pcard{padding-top:96px}
@media(max-width:860px){.cols4 .pcard{padding-top:78px}}
/* Oben mehr Bild durchlassen, im Textfeld deckend bleiben */
.pimg::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.58) 26%,
    rgba(255,255,255,.94) 46%,
    rgba(255,255,255,.99) 62%,
    rgba(255,255,255,1) 100%);
}
.cols4 .pcard.lemon .pimg::after{
  background:linear-gradient(180deg,
    rgba(198,255,1,.14) 0%,
    rgba(198,255,1,.60) 26%,
    rgba(198,255,1,.95) 46%,
    rgba(198,255,1,1) 62%,
    rgba(198,255,1,1) 100%);
}
.cols4 .pcard{padding-top:112px}
@media(max-width:860px){.cols4 .pcard{padding-top:92px}}
/* Das kleine Säulen-Label lag bei 3,52 : 1 — unter AA.
   Verlauf früher deckend und Label dunkler. */
.pimg::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.62) 20%,
    rgba(255,255,255,.97) 34%,
    rgba(255,255,255,1) 48%,
    rgba(255,255,255,1) 100%);
}
.cols4 .pcard.lemon .pimg::after{
  background:linear-gradient(180deg,
    rgba(198,255,1,.14) 0%,
    rgba(198,255,1,.64) 20%,
    rgba(198,255,1,.97) 34%,
    rgba(198,255,1,1) 48%,
    rgba(198,255,1,1) 100%);
}
.cols4 .pcard .pn{color:#3F5410}
.cols4 .pcard.lemon .pn{color:#33420A}
/* Bilder dominanter: mehr sichtbare Fläche, später einblendender Verlauf */
.cols4 .pcard{padding-top:clamp(150px,15vw,196px)}
.pimg::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.22) 30%,
    rgba(255,255,255,.86) 50%,
    rgba(255,255,255,.99) 62%,
    rgba(255,255,255,1) 100%);
}
.cols4 .pcard.lemon .pimg::after{
  background:linear-gradient(180deg,
    rgba(198,255,1,.08) 0%,
    rgba(198,255,1,.26) 30%,
    rgba(198,255,1,.88) 50%,
    rgba(198,255,1,.99) 62%,
    rgba(198,255,1,1) 100%);
}

/* ------------------------------------------------------------------
   Bild dominant UND Text lesbar: Das Bild belegt den oberen Teil der
   Karte in voller Sättigung und läuft nur an seiner Unterkante weich
   in die Kartenfarbe aus. Der Text steht danach auf festem Grund —
   damit hängt der Kontrast nicht mehr am Bildinhalt.
------------------------------------------------------------------ */
.pimg{
  position:absolute;inset:0 0 auto 0;
  height:clamp(150px,15vw,196px);
  border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.pimg img{filter:saturate(.95) contrast(1.03)}
.pimg::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 52%,
    rgba(255,255,255,.55) 76%,
    rgba(255,255,255,.94) 92%,
    rgba(255,255,255,1) 100%);
}
.cols4 .pcard.lemon .pimg::after{
  background:linear-gradient(180deg,
    rgba(198,255,1,0) 0%,
    rgba(198,255,1,0) 52%,
    rgba(198,255,1,.55) 76%,
    rgba(198,255,1,.94) 92%,
    rgba(198,255,1,1) 100%);
}
/* Einheitlich Schwarzweiß: labos-2 ist farbig, die CAM-Aufnahme
   grünstichig, die Einblicke bereits s/w — in einer Reihe wirkt das
   zusammengewürfelt. Leicht angehobener Kontrast, damit die Bilder
   nach der Entsättigung nicht flau werden. */
.pimg img{filter:grayscale(1) contrast(1.10) brightness(1.02)}
/* Das neue Hero-Foto ist ein Vollformat-Bild aus dem Labor.
   Bildmitte etwas nach links, damit die Person nicht am Rand klebt. */
.hero-photo img{object-position:52% center;filter:grayscale(1) contrast(1.06)}

/* ============================================================
   SEITEN-OBJEKT — 3D-Element aus der E-Serie
   Ein eigenes Objekt je Seite. Kein Rahmen, kein Ring, kein
   Schatten — das Objekt schwebt im Raum, statt als Plakette
   aufzuliegen. Der schwarze Rendergrund steckt im Alphakanal
   der Datei, nicht in einem Blendmodus: mix-blend-mode reisst,
   sobald ein Vorfahr eine eigene Ebene aufmacht, und genau das
   tun die Reveal-Animationen auf den Problemseiten.

   Bewegung: sehr langsam und sehr klein — 7–9 s, ~7 px Hub,
   dazu ein kaum sichtbares Atmen. Es soll leben, nicht ziehen.
   Nur transform, also GPU. Bei prefers-reduced-motion bleibt
   das Objekt stehen; der Eintritt bleibt als reine Deckkraft.
   ============================================================ */
.signet{
  display:block;
  width:clamp(104px,11.5vw,164px);height:auto;
  margin:0 0 6px -14px;              /* optisch auf die Textkante ziehen */
  pointer-events:none;
  opacity:0;
  transform:translateY(14px) scale(.94);
  transition:opacity .5s var(--ease-out,cubic-bezier(.23,1,.32,1)),
             transform .62s var(--ease-out,cubic-bezier(.23,1,.32,1));
}
.signet.on{opacity:1;transform:none;animation:sigschweb 8.5s ease-in-out .7s infinite}

@keyframes sigschweb{
  0%,100%{transform:translate3d(0,0,0)      scale(1)}
  50%    {transform:translate3d(0,-7px,0)   scale(1.014)}
}

/* Dasselbe Objekt noch einmal, sehr gross und sehr leise, als
   Tiefenebene im Hero. Eigenes Element statt Pseudo-Element:
   der Bildpfad steht inline im HTML und loest dadurch gegen das
   Dokument auf, nicht gegen die CSS-Datei. */
.ghero,.hero{position:relative}
.heroobj{
  position:absolute;z-index:-1;pointer-events:none;
  left:-6%;bottom:-6%;
  width:clamp(280px,32vw,500px);aspect-ratio:1;
  background-position:center;background-size:contain;background-repeat:no-repeat;
  opacity:var(--objop,.24);
  animation:objdrift 26s ease-in-out infinite;
}
@keyframes objdrift{
  0%,100%{transform:translate3d(0,0,0)        scale(1)}
  50%    {transform:translate3d(16px,-24px,0)  scale(1.06)}
}
@media (max-width:900px){.heroobj{display:none}}

@media (prefers-reduced-motion:reduce){
  .signet{transform:none;transition:opacity .3s ease}
  .signet.on{animation:none}
  .heroobj{animation:none}
}
@media (max-width:620px){
  .signet{width:88px;margin:0 0 6px -10px}
}

/* ============================================================
   LESBARKEIT DER BILDUNTERSCHRIFTEN
   Die Bildunterschrift liegt im Bild, unten links. Der vorhandene
   Verlauf laeuft nur von links nach rechts und ist bei 76 % aus —
   das Ende langer Zeilen landete auf hellen Bildstellen.
   Gemessen an den echten Buchstabenpixeln (Rendering mit und ohne
   Text, Differenz als Maske) lagen die unguenstigsten 5 % bei
   2,4–4,1:1 auf sechs Seiten. Der zweite Verlauf von unten hebt
   genau diese Zone an, ohne das Bild flach zu machen.
   ============================================================ */
.story-visual::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(4,22,21,.72) 0%, rgba(4,22,21,.52) 44%,
      rgba(4,22,21,.22) 70%, rgba(4,22,21,0) 90%),
    linear-gradient(0deg,
      rgba(4,22,21,.86) 0%, rgba(4,22,21,.56) 28%,
      rgba(4,22,21,.20) 54%, rgba(4,22,21,0) 76%);
}
.hero-photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,
    rgba(4,22,21,.92) 0%,
    rgba(4,22,21,.62) 20%,
    rgba(4,22,21,0) 46%);
}
.story-caption,.hero-photo-tag{z-index:3}

/* ============================================================
   ÜBERSICHT — Verweise auf Dateien, die (noch) nicht da sind
   Sie sahen aus wie Links und führten ins Leere. Jetzt als
   fehlend gekennzeichnet, statt still 404 zu liefern.
   ============================================================ */
.fehlt{
  display:inline-block;padding:3px 9px;border-radius:8px;
  border:1px dashed rgba(242,242,236,.34);
  color:#E2E8E4;font-size:12.5px;
}
.gsec.light .fehlt,.light .fehlt{
  border-color:rgba(4,22,21,.34);color:#2A3831;
}

/* ============================================================
   STUNDENSATZ IM DECKUNGSBEITRAGS-RECHNER
   Der Rechner hat vorher Preis minus Material gerechnet und das
   Ergebnis Deckungsbeitrag genannt. Die Arbeitszeit fehlte —
   damit stand eine Verlustarbeit im Ranking oben. Ohne Eingabe
   heisst die Spalte jetzt Rohertrag und der Hinweis bleibt sichtbar.
   ============================================================ */
.satzbox{display:block}
.satzlab{
  display:block;font-size:13px;font-weight:750;letter-spacing:.02em;
  color:var(--paper,#EEF0F1);margin:0 0 8px;
}
.satzin{max-width:220px;font-size:17px;font-weight:800}
.satzhilfe{
  margin:12px 0 0;font-size:13.5px;line-height:1.6;color:#B1BBC1;max-width:62ch;
}
.satzwarn{
  margin:14px 0 0;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(255,196,84,.42);background:rgba(255,196,84,.07);
  color:#F0E6D2;font-size:13.5px;line-height:1.6;max-width:62ch;
}
.gsec.light .satzlab{color:#041615}
.gsec.light .satzhilfe{color:#4A535A}
.dbrow.minus .dbval{color:#FF9B7A}
.dbrow.minus .dbbar i{background:#FF9B7A}
@media (max-width:620px){.satzin{max-width:100%;width:100%}}

/* ============================================================
   DATENSCHUTZ-HINWEIS VOR DEM USE-CASE-FINDER
   Die Seite hat empfohlen, echte Auftragszettel und Praxis-Mails
   in ein KI-Werkzeug zu geben. Das sind Gesundheitsdaten nach
   Art. 9 DSGVO — und für ein Labor als Hersteller von Sonder-
   anfertigungen zusätzlich gelenkte Auftragsunterlagen.
   ============================================================ */
.dsgate{
  margin:0 0 22px;padding:16px 18px;border-radius:12px;
  border:1px solid rgba(255,196,84,.42);background:rgba(255,196,84,.07);
}
.dsgate-t{
  margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#FFC454;
}
.dsgate p{margin:0 0 8px;font-size:14px;line-height:1.62;color:#E8EDE9}
.dsgate p:last-child{margin-bottom:0}
.dsgate-s{font-style:italic;color:#B9C4BD!important;font-size:13.5px!important}
.gsec.light .dsgate p,.light .dsgate p{color:#20302B}
.gsec.light .dsgate-s,.light .dsgate-s{color:#4A535A!important}

/* ============================================================
   HOVER AUF TOUCHGERÄTEN
   Keine einzige Stildatei hat :hover gegen Touch abgesichert.
   Auf Tablet und Handy löst eine Berührung den Hover-Zustand aus
   und lässt ihn stehen, bis woanders getippt wird — eine Karte
   bleibt dann angehoben, ein Button vergrößert. Bewegung nur
   noch dort, wo es einen echten Zeiger gibt.
   ============================================================ */
@media (hover:none),(pointer:coarse){
  a.verwandt:hover,
  nav a.cta:hover,
  .btn:hover,.btn.primary:hover,
  .opt:hover,
  .hstep:hover,.stat:hover,
  .deck .card:hover,
  .rm-shots img:hover,.rm-shots .shot-offset:hover,
  a.wcard:hover,
  .deck:hover .c1,.deck:hover .c2,.deck:hover .c3,.deck:hover .c4,.deck:hover .c5,
  .story-visual:hover img,
  .cols4 .pcard:hover{
    transform:none!important;
  }
  .howsteps .hstep:hover::before{transform:none!important}
}

/* Einordnung direkt an der Simulation — die Zahl ist Umsatz, nicht Ergebnis. */
.simhinw{
  margin:10px 0 18px;font-size:13.5px;line-height:1.62;
  color:#AEB8BE;max-width:64ch;
}
.simbox .simhinw{color:#AEB8BE}

/* ============================================================
   ENGPASS-BLOCK AUF DER STARTSEITE
   Die Startseite hat bisher keine einzige Problem-Seite verlinkt,
   obwohl sie im eigenen Konzept als Einstiegstüren stehen.
   ============================================================ */
.enggrid{
  display:grid;gap:12px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
.engk{
  display:block;padding:17px 19px;border-radius:12px;
  border:1px solid var(--line,#1E3A33);background:rgba(255,255,255,.018);
  text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .22s var(--ease-out,cubic-bezier(.23,1,.32,1));
}
.engk b{
  display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em;
  color:var(--paper,#EEF0F1);margin-bottom:5px;
}
.engk b::after{content:" →";color:var(--lemon,#C6FF01);font-weight:700}
.engk span{display:block;font-size:13.5px;line-height:1.55;color:#B1BBC1}
.engk:hover{border-color:var(--lemon,#C6FF01);transform:translateY(-2px)}
.engk:active{transform:scale(.985)}
.engk:focus-visible{outline:2px solid var(--lemon,#C6FF01);outline-offset:3px}
@media (hover:none),(pointer:coarse){.engk:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.engk{transition:border-color .18s ease}.engk:hover{transform:none}}

/* Querliegendes Kursmodul — kein Reifegradschritt, sondern ein Risiko,
   das auf jeder Stufe akut sein kann. */
.mod.quer{border-color:rgba(198,255,1,.34)}
.mod.quer .mn{color:var(--lemon,#C6FF01)}

/* Herleitung direkt am Regler — 150 € ist ein Mittelwert, keine Branchenzahl. */
.kostherleit{
  margin:8px 0 0;font-size:12.5px;line-height:1.6;color:#B1BBC1;max-width:60ch;
}
.gsec.light .kostherleit,.light .kostherleit{color:#4A535A}

/* ============================================================
   FEHLERKETTE — nur auf der Remake-Seite
   Ein Bauteil, das keine andere Seite hat. Der Punkt ist die
   Umkehrung: Nummer 1 entscheidet, Nummer 5 bekommt die Schuld.
   ============================================================ */
.kette{list-style:none;counter-reset:kt;margin:28px 0 18px;padding:0;position:relative}
.kette::before{
  content:"";position:absolute;left:17px;top:14px;bottom:38px;width:2px;
  background:linear-gradient(180deg,var(--lemon,#C6FF01),rgba(198,255,1,.15));
}
.kette li{
  counter-increment:kt;position:relative;padding:0 0 22px 52px;
}
.kette li::before{
  counter-increment:none;content:counter(kt);
  position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;font-variant-numeric:tabular-nums;
  background:var(--lemon,#C6FF01);color:#041615;
}
.kette li.kette-ende::before{background:var(--paper,#EEF0F1);color:#041615;box-shadow:0 0 0 2px #041615 inset}
.kette b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.kette span{display:block;font-size:14.5px;line-height:1.6;color:#B1BBC1;max-width:60ch}
.gsec.light .kette span,.light .kette span{color:#4A535A}
@media (max-width:620px){
  .kette li{padding-left:44px}
  .kette li::before{width:30px;height:30px;font-size:13px}
  .kette::before{left:14px}
}

/* ============================================================
   KI-TRANSPARENZ — Art. 50 Abs. 4 EU-KI-VO, gilt ab 02.08.2026
   Eigenes Zeichen statt des EU-Icons. Der Kodex der Kommission
   laesst "an equivalent icon or label" zu; zwingend ist allein
   das Akronym AI als tragendes Element. Zusaetze wie GENERATED
   sind empfohlen, nicht vorgeschrieben — sie liegen hier im
   Tooltip, im Vorlesetext und in der Fusszeile.
   Am Inhalt, in einer Ecke, ohne den Text zu ueberdecken.
   ============================================================ */
.hero-photo,.story-visual,.system-photo,.system-story{position:relative}
.kimark{
  position:absolute;z-index:4;
  right:14px;bottom:14px;
  width:30px;height:30px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(4,22,21,.58);
  border:1px solid rgba(234,243,238,.46);
  -webkit-backdrop-filter:blur(7px) saturate(115%);backdrop-filter:blur(7px) saturate(115%);
  color:rgba(255,255,255,.94);
  cursor:help;
}
.kimark b{
  font-size:11.5px;font-weight:900;letter-spacing:.045em;line-height:1;
  font-family:inherit;
}
/* Vorlesetext — perceivable auch ohne Zeigegeraet */
.kimark i{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* Klartext beim Zeigen. Nur Deckkraft und Transform — GPU. */
.kimark::after{
  content:attr(data-label);
  position:absolute;right:-1px;bottom:calc(100% + 7px);
  white-space:nowrap;padding:5px 9px;border-radius:8px;
  background:rgba(4,22,21,.94);border:1px solid rgba(234,243,238,.24);
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#EAF3EE;line-height:1;
  opacity:0;transform:translateY(4px);
  transition:opacity .16s var(--ease-out,cubic-bezier(.23,1,.32,1)),
             transform .16s var(--ease-out,cubic-bezier(.23,1,.32,1));
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .kimark:hover::after,.kimark:focus-visible::after{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .kimark::after{transform:none;transition:opacity .16s ease}
}
/* Positionen: nie ueber der Bildunterschrift, nie ueber dem Kopf */
.story-visual .kimark{right:auto;left:14px;top:14px;bottom:auto}
.story-visual .kimark::after{right:auto;left:-1px;top:calc(100% + 7px);bottom:auto;transform:translateY(-4px)}
.hero-photo .kimark,.system-photo .kimark{top:14px;bottom:auto}
.hero-photo .kimark::after,.system-photo .kimark::after{top:calc(100% + 7px);bottom:auto;transform:translateY(-4px)}
@media (hover:hover) and (pointer:fine){
  .story-visual .kimark:hover::after,.story-visual .kimark:focus-visible::after,
  .hero-photo .kimark:hover::after,.hero-photo .kimark:focus-visible::after,
  .system-photo .kimark:hover::after,.system-photo .kimark:focus-visible::after{transform:none}
}
@media (max-width:620px){
  .kimark{width:27px;height:27px;border-radius:8px;right:9px;bottom:9px}
  .kimark b{font-size:10.5px}
  .story-visual .kimark{left:9px;top:9px}
  .hero-photo .kimark,.system-photo .kimark{top:9px;bottom:auto}
}
/* Textzeile fuer Bilder ohne eigenen Rahmen */
.kizeile{
  margin:8px 0 0;font-size:12.5px;line-height:1.5;color:#8E979E;
  letter-spacing:.01em;
}
.gsec.light .kizeile,.light .kizeile,.lightsec .kizeile{color:#5A646B}
.kifoot{
  margin:14px 0 0;padding-top:12px;
  border-top:1px solid rgba(234,243,238,.10);
  font-size:12px;line-height:1.55;color:#7D858C;letter-spacing:.01em;
}
.kiinline{color:#8E979E;font-weight:600}
.light .kiinline,.gsec.light .kiinline,.lightsec .kiinline{color:#69727A}

/* ============================================================
   HERKUNFT DER ROADMAP — nur auf labor-roadmap
   Die Seite hatte 0 % erste Person. Das ist die Stelle, an der
   das Werkzeug seinen echten Ursprung bekommt.
   ============================================================ */
.rmherk{padding:clamp(44px,5.4vw,64px) 0;background:#041615}
.rmherk .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.rmherk .wrap>*{max-width:780px}
.rmherk .eyebrow{margin:0 0 14px}
.rmherk h2{
  font-size:clamp(28px,4.4vw,44px);line-height:1.06;letter-spacing:-.025em;
  font-weight:900;margin:0 0 26px;color:#EAF3EE;text-wrap:balance;
}
.rmherk p{font-size:clamp(16px,1.35vw,18px);line-height:1.68;color:#B1BBC1;margin:0 0 20px}
.rmherk p b{color:#EAF3EE;font-weight:800}
.rmherk .rmmerk{
  margin:30px 0;padding:22px 24px;border-radius:12px;
  background:rgba(198,255,1,.07);border-left:3px solid var(--lemon,#C6FF01);
  font-size:clamp(17px,1.5vw,20px);line-height:1.5;font-weight:700;color:#EAF3EE;
}
.rmherk .rmnach{font-size:14px;line-height:1.6;color:#8E979E;margin:16px 0 0}
/* Die drei erklaerenden Absaetze liefen fugenlos ineinander (margin:0) -
   dazu acht Absaetze am Stueck ohne jede Pause. Der letzte Absatz bleibt
   fuer alle sichtbar (schliesst den Gedanken ab); die drei davor stecken
   jetzt in einem "Mehr dazu", offen fuer wer tiefer will, weg fuer den
   schnellen Blick. */
.rmherk .rmmehr{margin:26px 0 0}
.rmherk .rmmehr summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:700;color:#C6CBCE;padding:6px 2px;
  border-bottom:1px solid rgba(198,255,1,.35);
}
.rmherk .rmmehr summary::-webkit-details-marker{display:none}
.rmherk .rmmehr summary:hover{color:var(--lemon,#C6FF01)}
.rmherk .rmmehr .rmmehr-i{transition:transform .25s var(--ease-out,cubic-bezier(.23,1,.32,1));color:var(--lemon,#C6FF01)}
.rmherk .rmmehr[open] .rmmehr-i{transform:rotate(180deg)}
.rmherk .rmmehr-inner{padding-top:18px}
.rmherk .rmmehr-inner .rmnach:first-child{margin-top:0}

/* ============================================================
   LABORGRAU — helle Ebenen bekommen Tiefe statt einer Flaeche
   Kein Bento, kein neues Raster. Nur: kuehleres Grau als Grund,
   Karten naeher an Weiss, feine kuehle Kanten. Der Effekt ist
   eine Oberflaeche, die nach Geraet aussieht statt nach Papier.
   ============================================================ */
.gsec.light,section.light,.lightsec{position:relative}
.gsec.light::before,section.light::before,.lightsec::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;
  background:linear-gradient(90deg,
    transparent 0%, rgba(16,26,32,.13) 16%,
    rgba(16,26,32,.13) 84%, transparent 100%);
  pointer-events:none;
}
/* Karten auf Hellgrau: fast weiss, feine kuehle Kante, kaum Schatten */
.gsec.light .pcard:not(.lemon),section.light .pcard:not(.lemon),
.gsec.light .qwbox,section.light .qwbox,
.gsec.light .evcard,section.light .evcard,
.gsec.light .duel,section.light .duel,
.gsec.light .cmp,section.light .cmp,
.lightsec .qcard{
  background:#FBFCFD;
  border:1px solid #E2E7EA;
  box-shadow:0 1px 2px rgba(14,22,28,.045),
             0 16px 34px -24px rgba(14,22,28,.24);
}
/* Tabellen und Trennlinien im Hellbereich kuehl statt warm */
.gsec.light .cmp th,.gsec.light .cmp td,
section.light .cmp th,section.light .cmp td{border-color:#E2E7EA}
.gsec.light hr,section.light hr{border-color:#DEE3E6}
/* Der Zitronenakzent bleibt unangetastet — er ist die Marke. */

/* ============================================================
   REFERENZ-MOTIVE — aus den Dashboard-Vorlagen uebernommen
   Nicht das Bento-Raster. Uebernommen wurden vier Dinge:
   1. Kennsatz mit vorangestelltem Farbquadrat
   2. Schwarze Kachel als Kontrapunkt zur Zitronen-Kachel
   3. Runder Eckpfeil auf klickbaren Karten
   4. Ziffern mit Tabellenbreite
   ============================================================ */

/* 1 · Kennsatz — kleines Quadrat davor, wie die Reiter im Dashboard */
.eyebrow{letter-spacing:.2em}
.eyebrow::before{
  content:"";display:inline-block;vertical-align:middle;
  width:8px;height:8px;border-radius:2.5px;
  background:currentColor;opacity:.9;
  margin-right:9px;position:relative;top:-1px;
}
.eyebrow:empty::before{display:none}

/* 2 · Die schwarze Kachel — im Dreier immer die erste (das Problem).
      Ergibt die Folge schwarz -> weiss -> zitrone. */
.pug3>.pcard:first-child{
  background:#0B1A18;border-color:#16302A;color:#EAF3EE;
  box-shadow:0 1px 2px rgba(6,14,12,.28),0 20px 44px -28px rgba(6,14,12,.6);
}
.pug3>.pcard:first-child h4{color:#EAF3EE}
.pug3>.pcard:first-child p{color:#A9B1B6}
.pug3>.pcard:first-child .pn{color:var(--lemon,#C6FF01)}
.gsec.light .pug3>.pcard:first-child,
section.light .pug3>.pcard:first-child{background:#0B1A18;border-color:#0B1A18}

/* 3 · Der Eckpfeil aus der Vorlage ist wieder RAUS.
      Begruendung: Die Vorlagenkarten haben keinen Text-Button, deshalb
      traegt dort der Pfeil die Handlung. Unsere Karten sagen die Handlung
      im Klartext ("Werkzeug oeffnen"). Zwei Aufforderungen auf einer Karte
      sind eine zu viel — der Pfeil waere nur Dekoration gewesen.
      Stattdessen: das Quadrat-Motiv gilt fuer ALLE Mikro-Label, damit es
      ein System ist und nicht ein Effekt auf einer Sorte Ueberschrift. */
.wcard .wk::before,.pcard .pn::before,.qwt::before,.duel-vs::before{
  content:"";display:inline-block;vertical-align:middle;
  width:7px;height:7px;border-radius:2px;
  background:currentColor;opacity:.85;
  margin-right:8px;position:relative;top:-1px;
}
.duel-vs::before{display:none}

/* 4 · Ziffern in Tabellenbreite — Zahlen springen beim Zaehlen nicht mehr */
.statnum,.duel-n,.evnum,.tres-n,.rnum,.bignum{font-variant-numeric:tabular-nums}

/* ============================================================
   DENTALLABOR — Material statt Dekoration
   Ein Labor hat zwei Oberflaechen, nicht eine: kuehle graue
   Arbeitsflaechen aus Stahl und Kunststoff, und darauf warme,
   fast weisse Keramik. Genau dieser Materialkontrast fehlte —
   vorher war alles gleich kuehl, und dadurch las es sich wie
   ein beliebiges Dashboard.
   Grund bleibt kuehl. Karten werden Zirkon.
   ============================================================ */
.gsec.light .pcard:not(.lemon):not(.pug3>.pcard:first-child),
section.light .pcard:not(.lemon),
.gsec.light .qwbox,section.light .qwbox,
.gsec.light .evcard,section.light .evcard,
.gsec.light .duel,section.light .duel,
.gsec.light .cmp,section.light .cmp,
a.wcard,.lightsec .qcard{
  background:#FCFCFA;
  border-color:#E4E6E2;
}
/* Eingabefelder bleiben kuehl — sie sind Geraet, nicht Keramik */
.gsec.light input,.gsec.light select,.gsec.light textarea,
section.light input,section.light select,section.light textarea,
.lightsec input,.lightsec select{background:#F4F6F7;border-color:#D5DADE}

/* ============================================================
   MESSLEISTE — die Kante zwischen den Ebenen
   Statt einer glatten Haarlinie eine Teilung wie am Messschieber:
   kurze Striche alle 8 px, lange alle 40 px. Zwei Verlaeufe mit
   unterschiedlicher Hoehe, eine weiche Maske an den Raendern.
   Kein Bild, keine Grafik, 12 Zeilen.
   ============================================================ */
.gsec.light::before,section.light::before,.lightsec::before{
  height:11px;
  background-color:transparent;
  background-image:
    linear-gradient(90deg, rgba(16,26,32,.20), rgba(16,26,32,.20)),
    repeating-linear-gradient(90deg, rgba(16,26,32,.34) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(16,26,32,.26) 0 1px, transparent 1px 8px);
  background-size:100% 1px, 100% 11px, 100% 5px;
  background-position:0 0, 0 0, 0 0;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
}

/* ============================================================
   SCHATTEN — drei Stufen statt vierzehn
   ============================================================ */
.gsec.light .pcard:not(.lemon),section.light .pcard:not(.lemon),
.gsec.light .qwbox,section.light .qwbox,
.gsec.light .evcard,section.light .evcard,
.gsec.light .duel,section.light .duel,
.gsec.light .cmp,section.light .cmp,
a.wcard,.lightsec .qcard{
  box-shadow:0 1px 2px rgba(14,22,28,.05),
             0 18px 36px -26px rgba(14,22,28,.26);
}
.pug3>.pcard:first-child{
  box-shadow:0 1px 2px rgba(6,14,12,.30),
             0 22px 46px -28px rgba(6,14,12,.58);
}

/* Gegenueberstellung Abteilung / Rolle — nur auf problem-koepfe */
.cmpbox{
  margin:22px 0;padding:20px 22px;border-radius:18px;
  background:#0B1A18;border-left:4px solid var(--lemon,#C6FF01);
}
.cmpbox p{margin:0;color:#A9B1B6}
.cmpbox b{color:#EAF3EE}
.gsec.light .cmpbox,section.light .cmpbox{background:#0B1A18}

/* ============================================================
   ABSTANDS-SKALA — der Rhythmus war gewachsen, nicht gesetzt
   Vorgefunden: 12 verschiedene Ad-hoc-Randwerte im HTML
   (14/24/26/28/30/34/36/40/44/52/54) und 19 Stellen, an denen
   das letzte Kind einer Sektion einen Rand nach unten behielt
   und damit das Sektionspolster still verdoppelte.
   Fuenf Stufen, sonst nichts.
   ============================================================ */
.mt-0{margin-top:0!important}
.mt-1{margin-top:16px!important}
.mt-2{margin-top:28px!important}
.mt-3{margin-top:44px!important}
.mt-4{margin-top:56px!important}
.mb-2{margin-bottom:28px!important}

/* Kein Rand am Anfang und am Ende einer Sektion — sonst addiert
   er sich auf das Polster und jede Sektion misst etwas anderes. */
section > .wrap > *:first-child,
header > .wrap > *:first-child,
section > .wrap > .narrow > *:first-child{margin-top:0}
section > .wrap > *:last-child,
header > .wrap > *:last-child,
section > .wrap > .narrow > *:last-child{margin-bottom:0}

/* Handlungsreihen und Verweisreihen: ein Abstand, nicht fuenf */
.cta-row{margin-top:28px}
.others{margin-top:28px}
.gcta{padding-top:96px;padding-bottom:96px}

/* ============================================================
   WARNKASTEN — Sicherheitshinweis, nicht Marketing
   Bewusst anders als jeder andere Kasten auf der Seite, damit
   er nicht wie ein Werbekasten ueberlesen wird.
   ============================================================ */
.warnbox{
  border:2px solid #A5342A;border-radius:18px;padding:22px 24px;
  background:rgba(165,52,42,.07);
  break-inside:avoid;page-break-inside:avoid;
}
.warnt{
  margin:0 0 10px;font-size:11px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:#FF9B7A;
}
.warnt::before{content:"";display:inline-block;vertical-align:middle;width:7px;height:7px;
  border-radius:2px;background:currentColor;margin-right:8px;position:relative;top:-1px}
.warnbox p{margin:0 0 10px;font-size:15.5px;line-height:1.62;color:#B1BBC1;max-width:66ch}
.warnbox p:last-child{margin-bottom:0}
.warnbox b{color:#EAF3EE}
.warnbox .warnp{font-size:14.5px;color:#8E979E}
.gsec.light .warnt,section.light .warnt{color:#A5342A}
.gsec.light .warnbox p,section.light .warnbox p{color:#333D44}
.gsec.light .warnbox b,section.light .warnbox b{color:#041615}
.gsec.light .warnbox .warnp,section.light .warnbox .warnp{color:#5A646B}

/* ============================================================
   DEFINITIONEN — so-rechnen-wir.html
   Eine Definition ist kein Marketingkasten. Sie sieht aus wie
   ein Eintrag in einem Nachschlagewerk: Nummer, Begriff, Formel,
   Abgrenzung. Ruhig, gleichfoermig, zum Zitieren gebaut.
   ============================================================ */
.defnlist{list-style:none;margin:28px 0 0;padding:0;counter-reset:dfl}
.defnlist>li{
  counter-increment:dfl;position:relative;padding:0 0 0 46px;margin:0 0 22px;
  font-size:16px;line-height:1.66;color:#B1BBC1;max-width:70ch;
}
.defnlist>li:last-child{margin-bottom:0}
.defnlist>li::before{
  content:counter(dfl);position:absolute;left:0;top:1px;
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--lemon,#C6FF01);color:#041615;
  font-size:13px;font-weight:900;line-height:1;
}
.defnlist>li b{color:#EAF3EE}
.gsec.light .defnlist>li,section.light .defnlist>li{color:#333D44}
.gsec.light .defnlist>li b,section.light .defnlist>li b{color:#041615}

.defn{
  border:1px solid #1E3A33;border-radius:18px;padding:26px 28px;margin:0 0 18px;
  background:rgba(255,255,255,.018);
  break-inside:avoid;page-break-inside:avoid;
}
.defn:last-child{margin-bottom:0}
.defnr{
  margin:0 0 10px;font-size:11px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lemon,#C6FF01);
}
.defnr::before{content:"";display:inline-block;vertical-align:middle;width:7px;height:7px;
  border-radius:2px;background:currentColor;margin-right:8px;position:relative;top:-1px}
.defn h3{margin:0 0 14px;font-size:23px;font-weight:800;font-stretch:108%;
  line-height:1.2;color:#EAF3EE;letter-spacing:-.01em}
.defform{
  margin:0 0 16px;padding:12px 14px;border-radius:12px;
  background:#08201C;border:1px solid #1E3A33;border-left:3px solid var(--lemon,#C6FF01);
  font-size:14.5px;line-height:1.5;color:#EAF3EE;font-weight:600;
}
.defn p{margin:0 0 10px;font-size:15.5px;line-height:1.62;color:#B1BBC1;max-width:68ch}
.defn p:last-child{margin-bottom:0}
.defn b{color:#EAF3EE}
.defkey{
  margin-top:16px!important;padding-top:14px;border-top:1px dashed #1E3A33;
  font-size:14px!important;color:#9FAAB1!important;
}
.gsec.light .defn,section.light .defn{background:#FCFCFA;border-color:#E4E6E2}
.gsec.light .defn h3,section.light .defn h3{color:#041615}
.gsec.light .defn p,section.light .defn p{color:#333D44}
.gsec.light .defn b,section.light .defn b{color:#041615}
.gsec.light .defnr,section.light .defnr{color:#5A646B}
.gsec.light .defkey,section.light .defkey{color:#5A646B!important;border-top-color:#E1E5E7}

/* ============================================================
   DATENSPENDE — der Rueckkanal unter den Werkzeugen
   Reihenfolge umgedreht: erst der Vergleich, dann die Spende.
   Wer nichts bekommt, gibt nichts. Und was gesendet wird,
   steht im Klartext daneben, nicht in einer verlinkten Erklaerung.
   ============================================================ */
.dsp{
  margin-top:28px;border:1px solid #1E3A33;border-radius:18px;
  padding:24px 26px;background:rgba(255,255,255,.018);
}
.dspt{
  margin:0 0 16px;font-size:11px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lemon,#C6FF01);
}
.dspt::before{content:"";display:inline-block;vertical-align:middle;width:7px;height:7px;
  border-radius:2px;background:currentColor;margin-right:8px;position:relative;top:-1px}
.dsprow{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-bottom:1px solid rgba(30,58,51,.6);
}
.dsprow:last-of-type{border-bottom:0}
.dsprow span{font-size:14.5px;line-height:1.4;color:#9FAAB1}
.dsprow b{font-size:16px;font-weight:800;color:#EAF3EE;white-space:nowrap}
.dsprow.mine b{color:var(--lemon,#C6FF01)}
.dspwait{
  margin:0;padding:16px 18px;border-radius:12px;
  background:#0B1A18;border:1px dashed #1E3A33;
  font-size:14.5px;line-height:1.6;color:#9FAAB1;
}
.dspwait b{color:#EAF3EE}
.dspgive{margin-top:18px;padding-top:18px;border-top:1px solid #1E3A33}
.dspchk{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.dspchk input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:22px;height:22px;margin:1px 0 0;border-radius:7px;
  border:1.5px solid #35513F;background:#0B1A18;cursor:pointer;
  transition:border-color .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1);
}
.dspchk input:checked{background:var(--lemon,#C6FF01);border-color:var(--lemon,#C6FF01)}
.dspchk input:focus-visible{outline:2px solid var(--lemon,#C6FF01);outline-offset:2px}
.dspchk input:disabled{opacity:.4;cursor:not-allowed}
.dspchk span{font-size:15.5px;line-height:1.55;color:#EAF3EE;font-weight:700}
.dspfields{
  margin:12px 0 0 34px;padding:0;list-style:none;
}
.dspfields li{
  font-size:14px;line-height:1.55;color:#9FAAB1;padding-left:16px;position:relative;
}
.dspfields li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:2px;background:#35513F}
.dspfields li b{color:#EAF3EE}
.dspnote{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:#7f8a84;max-width:66ch}
.dspnote a{color:#9FAAB1;text-decoration:underline;text-underline-offset:2px}
.dspsend{margin-top:16px}
.dspok{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--lemon,#C6FF01);font-weight:700}

.gsec.light .dsp,section.light .dsp{background:#FCFCFA;border-color:#E4E6E2}
.gsec.light .dsprow span,section.light .dsprow span{color:#5A646B}
.gsec.light .dsprow b,section.light .dsprow b{color:#041615}
.gsec.light .dsprow,section.light .dsprow{border-bottom-color:#E1E5E7}
.gsec.light .dspt,section.light .dspt{color:#5A646B}
.gsec.light .dspwait,section.light .dspwait{background:#F4F6F7;border-color:#D5DADE;color:#5A646B}
.gsec.light .dspwait b,section.light .dspwait b{color:#041615}
.gsec.light .dspchk span,section.light .dspchk span{color:#041615}
.gsec.light .dspgive,section.light .dspgive{border-top-color:#E1E5E7}

/* Der Verweigerungssatz unter dem Deckungsbeitragsrechner.
   Bewusst kein Kasten — eine Fussnote, die etwas ablehnt. */
.dspnein{
  margin-top:22px;padding-left:16px;border-left:2px solid #35513F;
  font-size:14.5px;line-height:1.65;color:#9FAAB1;max-width:66ch;
}
.dspnein b{color:#EAF3EE}
.gsec.light .dspnein,section.light .dspnein{color:#5A646B;border-left-color:#C6CBCE}
.gsec.light .dspnein b,section.light .dspnein b{color:#041615}

/* Groessenklasse und Land — zwei Merkmale, sonst nichts */
.dspmeta{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.dspsel{
  display:flex;flex-direction:column;gap:6px;flex:1 1 190px;
  font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#7f8a84;
}
.dspsel select{
  width:100%;padding:11px 12px;border-radius:12px;
  background:#0B1A18;border:1px solid #1E3A33;color:#EAF3EE;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
}
.dspsel select:focus-visible{outline:2px solid var(--lemon,#C6FF01);outline-offset:2px}
.gsec.light .dspsel,section.light .dspsel{color:#5A646B}
.gsec.light .dspsel select,section.light .dspsel select{background:#F4F6F7;border-color:#D5DADE;color:#041615}

/* Ein deaktiviertes Haekchen muss deaktiviert aussehen. Sonst
   verspricht das Bauteil etwas, was es noch nicht einloest. */
.dspstate{font-style:normal;font-weight:600;color:#7f8a84}
.dsp-aus .dspchk{cursor:not-allowed}
.dsp-aus .dspchk span{color:#9FAAB1}
.dsp-aus .dspfields{opacity:.62}
.gsec.light .dsp-aus .dspchk span,section.light .dsp-aus .dspchk span{color:#5A646B}
.dspnein a{color:#EAF3EE;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#35513F}
.dspnein a:hover{text-decoration-color:var(--lemon,#C6FF01)}
.gsec.light .dspnein a,section.light .dspnein a{color:#041615;text-decoration-color:#A9B1B6}

/* ============================================================
   LESARTEN — zwei Auslegungen nebeneinander
   Fuer Stellen, an denen wir ausdruecklich nichts behaupten,
   sondern zwei Quellen gegenueberstellen. Bewusst symmetrisch:
   keine Seite bekommt optisch recht.
   ============================================================ */
.lesart{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 18px;
}
@media (max-width:760px){.lesart{grid-template-columns:1fr}}
.les{
  border:1px solid #1E3A33;border-radius:18px;padding:22px 24px;
  background:rgba(255,255,255,.018);
}
.lesq{
  margin:0 0 12px;font-size:11px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:#9FAAB1;
}
.lesq::before{content:"";display:inline-block;vertical-align:middle;width:7px;height:7px;
  border-radius:2px;background:currentColor;margin-right:8px;position:relative;top:-1px}
.les p{margin:0;font-size:15.5px;line-height:1.62;color:#B1BBC1}
.les b{color:#EAF3EE}
.les.gegen{border-color:#35513F;background:rgba(198,255,1,.035)}
.gsec.light .les,section.light .les{background:#FCFCFA;border-color:#E4E6E2}
.gsec.light .les p,section.light .les p{color:#333D44}
.gsec.light .les b,section.light .les b{color:#041615}
.gsec.light .lesq,section.light .lesq{color:#5A646B}
.gsec.light .les.gegen,section.light .les.gegen{border-color:#C9D6A8;background:#F7FAEE}

/* Der Gegenueberstellungs-Kasten ist immer dunkel — auch in hellen
   Sektionen. Ohne diese Zeilen erbt er dort die dunkle Schriftfarbe
   der Sektion und steht schwarz auf schwarz da. */
.cmpbox,.gsec.light .cmpbox,section.light .cmpbox,.lightsec .cmpbox{color:#D5DADE}
.cmpbox .big-p,.gsec.light .cmpbox .big-p,section.light .cmpbox .big-p{color:#D5DADE;margin:0}
.cmpbox b,.gsec.light .cmpbox b,section.light .cmpbox b{color:#EAF3EE}


/* ============================================================
   TYPOGRAFISCHE SKALA — 21 Groessen auf sieben reduziert
   ------------------------------------------------------------
   Befund: In einzelnen Abschnitten standen bis zu zwoelf
   verschiedene Textgroessen nebeneinander, viele davon nur um
   einen halben Punkt verschieden. Das liest sich nicht als
   Hierarchie, sondern als Unruhe.

   Die Skala ab hier:
     11  Mikro-Label, versal, gesperrt
     12  Quellen, Fussnoten, Chips
     14  Nebentext, Kartenbeschreibung, Hinweise
     16  Fliesstext
     18  Kartenueberschrift
     20  Lead
     23  Merksatz
   Zahlenanzeigen (27/30/40/50) bleiben, sie sind Bild und nicht Text.
   ============================================================ */
/* 10.5px -> 11px */
.dbtab th,
.kchip .kl,
.tfield label,
.uccard .uck,
.vmrow.danger .vmname::after,
.vtab th{font-size:11px}
/* 11.5px -> 11px */
.nlbox label,
.pg-lab,
.play .ptag,
.prio .tag,
.secttl,
.simgrid .kl,
.tres-lab{font-size:11px}
/* 12.5px -> 12px */
.card .place,
.chip,
.eyebrow,
.field .errmsg,
.foot,
.gatenote,
.kicker,
.mg-note,
.mstone .w,
.nlnote,
.open,
.pctxt,
.pg-note,
.play .goal,
.qwt,
.radarcap,
.rm-risk,
.seg button,
.tool-t,
.usesteps b,
.usettl,
.vtab td.vlab{font-size:12px}
/* 13px -> 12px */
.back,
.calcout small,
.gateerr,
.gfoot,
.gstep-w,
.hp-riskrev,
.jn button,
.mg-err,
.newsletter .note,
.nl-inside,
.node,
.pg-err,
.preview .head,
.pstone .chk,
.qmeta,
.qzfoot,
.qzrec a,
.riskrev,
.scorebox .ssub,
.stat span,
.system-photo figcaption,
.tb-row,
.tool-hint,
.toolhint,
.trust,
.vfootnote,
.vtab,
footer{font-size:12px}
/* 13.5px -> 14px */
.bar,
.card p,
.dbname,
.facts span,
.kostnote,
.mod p,
.opt span,
.others a,
.pdfstatus,
.pillar .step0,
.planprog-l,
.planprog-t,
.pp-top,
.pplabel,
.prow p,
.pug p,
.stage .goal,
.tally-hint,
.tbtn,
.utb,
.vorl-h p,
.wcard .go{font-size:14px}
/* 14.5px -> 14px */
.ampel,
.arch,
.aud p,
.btn,
.gnav-r,
.hop-name,
.kostrow,
.mgbtn,
.mstone,
.nav-r a,
.navlinks,
.nrow,
.pcard p,
.philsig,
.planprog-msg,
.pp-msg,
.ppdone,
.pstone p,
.rm-trust-line,
.rolle label,
.rsum,
.sm-q,
.stage p,
.tb-line,
.tin,
.tool-sub,
.tr-res,
.tres-sub,
.trow label,
.uccard p,
.whint{font-size:14px}
/* 15px -> 16px */
.chkitem .ctxt,
.dbtab td.num,
.faq p,
.gatecard .gt,
.gaterow input[type="email"],
.glogo .wordmark,
.howget,
.issue,
.mgform input,
.nl-seg select,
.nlok,
.opt .ic,
.pg-in,
.pillar p,
.plandone,
.planprog-t b,
.play .move,
.play .prob,
.pp-top b,
.preview .head b,
.rcq p,
.stufe .claim,
.sub,
.tbtn.lemon,
.tnum,
.vmname{font-size:16px}
/* 15.5px -> 16px */
.about .meta,
.bench li,
.diag,
.gstep-b p,
.midcta-t p,
.mod h3,
.nlbox input,.nlbox select,
.rm-precta-t>p,
.tfield input,
.tool-step,
.utq p{font-size:16px}
/* 16.5px -> 18px */
.card h4,
.kurscta .kdesc,
.opt b,
.raus,
.scorebox .stxt,
.ut-text{font-size:18px}
/* 17px -> 18px */
.dbaha,
.gatebtn .btn,
.howsteps .hstep h3,
.hstep h4,
.kostrow.total,
.kurscta .big-p,
.logo,
.pcbox,
.rm-precta-c .btn.primary,
.rmband .btn.dark,
.stufe h3,
.toolmerk,
.uccard h4,
.vorl-h h4,
.wcard h3{font-size:18px}
/* 17.5px -> 18px */
.pstone h4{font-size:18px}
/* 18.5px -> 18px */
.hero p.sub{font-size:18px}
/* 19px -> 20px */
.lead,
.merk.small,
.qwd,
.stage h3,
.stepchk.done::after,
.ticker span{font-size:20px}

/* Schmale Ansicht: die zwei Stellen, die dort kleiner bleiben muessen */
@media(max-width:620px){
  .cmp th,.cmp td{font-size:15px}
  .cmp thead th{font-size:11px}
}

/* Nachzug: dieselbe Skala fuer die Bauteile aus dieser Datei */
.kimark b,.cmp thead th,.dsgate-t,.duel-vs{font-size:11px}
.evct,.fehlt,.kizeile,.kostherleit,.kursint label,.statsrc,
.alle-werkzeuge,.fnote,.ki-fine,.ktm-cap,.ktm-t,.lclaim,.satzlab{font-size:12px}
.cmp tbody th,.dsgate-s,.dspnote,.engk span,.evlab,.fnodes a,.fnodes span,
.gnav-r a,.nav-r a,.ktm-sub,.navlinks a,.pdfstatus,.satzhilfe,.satzwarn,
.simhinw,.ws-hint,a.verwandt span,
.defform,.defkey,.dspnein,.dspok,.dsprow span,.dspwait,.duel-l,.kette span,
.ktm-list li,.lname,.rkeep,.warnbox .warnp{font-size:14px}
.cmp td,.dspsel select,a.verwandt b,.defn p,.dspchk span,.engk b,.les p,
.warnbox p{font-size:16px}
.kursok,.kette b,.satzin,.duel-gap{font-size:18px}
.merk-dark{font-size:20px}

/* Displaygroessen ebenso: 46 / 34 / 30 / 24 statt sieben Zwischenwerte */
.hp-h1,.qcard h2{font-size:clamp(24px,3.2vw,34px)}
.rm-precta-h,.philquote{font-size:clamp(22px,2.6vw,30px)}
.kursint h3{font-size:clamp(20px,2.2vw,24px)}
.vorl-h h4,.hstep h4,.howsteps .hstep h3,.stufe h3,.wcard h3,.uccard h4,
.card h4,.pcard h4,.qcard h4,.mod h3{font-size:18px}
.badge,.nrow .tag,.system-photo figcaption span,.system-story-copy span,
.hero-photo-tag span,.story-caption span{font-size:11px}

/* ============================================================
   TRUSTBAND — die Zeile war ein Flex-Container, deshalb wurde
   jedes <b> darin zu einer eigenen Spalte und der Satz brach
   in zwei nebeneinanderstehende Bloecke. Wieder Fliesstext.
   ============================================================ */
.rm-trust-line,.tb-line{display:block;max-width:640px;line-height:1.5}
.rm-trust-dot,.tb-dot{
  display:inline-block;vertical-align:middle;
  margin-right:12px;position:relative;top:-1px;
}
.rm-trust .wrap,.trustband .wrap{row-gap:16px}
.tbadges,.rm-trust .tbadges{display:flex;flex-wrap:wrap;gap:8px}

/* ============================================================
   ZWISCHEN-CTA — stand mit 10px Polster direkt an der Farbkante
   und hatte darunter das Doppelte. Jetzt gleich viel Luft.
   ============================================================ */
.midcta{padding:88px 0 0}
.midcta + section{padding-top:88px}
.midcta + section.gcta{padding-top:88px}

/* ============================================================
   ARBEITSBLATT-VERWEIS — war eine Fussnote in Quellengroesse
   direkt unter den Rechner-Kacheln und ging dort unter.
   Jetzt erkennbar als das, was es ist: ein Blatt zum Mitnehmen.
   ============================================================ */
.ws-hint{
  margin-top:32px;max-width:620px;
  display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:5px;
  align-items:center;justify-items:start;
  padding:20px 22px;border-radius:16px;
  border:1px solid #1E3A33;background:rgba(198,255,1,.05);
  font-size:14px;color:#9FAAB1;line-height:1.5;
}
.ws-hint::before{
  content:"PDF";flex:none;
  padding:6px 10px;border-radius:8px;
  background:var(--lemon,#C6FF01);color:#041615;
  font-size:11px;font-weight:900;letter-spacing:.12em;line-height:1;
  grid-row:1/3;align-self:center;
}
.ws-lab{
  font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#7f8a84;line-height:1;
}
.gsec.light .ws-lab,section.light .ws-lab{color:#5A646B}
.ws-hint a{
  font-size:16px;font-weight:800;color:#EAF3EE;text-decoration:none;
  border-bottom:2px solid rgba(198,255,1,.55);padding-bottom:2px;
  transition:border-color .16s var(--ease-out,cubic-bezier(.23,1,.32,1));
}
.ws-hint a:hover{border-bottom-color:var(--lemon,#C6FF01)}
.alle-werkzeuge{margin-top:24px}
.gsec.light .ws-hint,section.light .ws-hint{border-color:#D8DFC0;background:#F7FAEE;color:#5A646B}
.gsec.light .ws-hint a,section.light .ws-hint a{color:#041615;border-bottom-color:#AFCB16}

/* ============================================================
   REIFEGRAD-STRECKE — war ein 430px breites SVG, mittig in einer
   1120px-Spalte mit linksbuendigem Text darum. Jetzt ein Element
   ueber die volle Spaltenbreite, mit echtem Text statt SVG-Labels.
   ============================================================ */
.stufenviz{
  margin:32px 0 40px;padding:30px 32px 26px;border-radius:24px;
  background:linear-gradient(165deg,#0C2822,#061c18);
  border:1px solid #1E3A33;
  box-shadow:0 26px 70px rgba(4,22,21,.38);
}
.sv-bars{display:flex;align-items:flex-end;gap:14px;height:270px}
.sv-bar{
  flex:1;height:var(--h);border-radius:12px;
  background:#0F2E27;border:1px solid #1E3A33;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:14px 12px;position:relative;
}
.sv-bar .sv-cap{
  font-size:12px;font-weight:800;line-height:1.25;color:#9FAAB1;
  letter-spacing:.02em;
}
.sv-bar .sv-num{
  font-size:30px;font-weight:900;font-stretch:120%;line-height:1;color:#9FAAB1;
}
.sv-bar .sv-name{
  font-size:14px;font-weight:800;color:#A9B1B6;margin-top:6px;line-height:1.25;
}
.sv-bar.is-goal{
  background:rgba(198,255,1,.14);border:2px solid var(--lemon,#C6FF01);
}
.sv-bar.is-goal .sv-cap,.sv-bar.is-goal .sv-name{color:var(--lemon,#C6FF01)}
.sv-bar.is-goal .sv-num{color:var(--lemon,#C6FF01)}
.sv-note{
  margin:20px 0 0;font-size:14px;color:#9FAAB1;line-height:1.5;
}
.sv-note b{color:var(--lemon,#C6FF01)}
/* Schmale Ansicht: fuenf Balken nebeneinander sind auf einem Telefon
   nicht mehr lesbar. Dieselbe Aussage, um 90 Grad gedreht. */
@media(max-width:760px){
  .stufenviz{padding:22px 18px 20px}
  .sv-bars{display:block;height:auto}
  .sv-bar{
    height:auto!important;width:var(--h);min-width:58%;
    flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;
    padding:12px 14px;margin-bottom:8px;
  }
  .sv-bar:last-child{margin-bottom:0}
  .sv-bar>div{display:flex;align-items:baseline;gap:10px}
  .sv-bar .sv-num{font-size:22px}
  .sv-bar .sv-name{margin-top:0}
  .sv-bar .sv-cap{order:2;margin-left:auto;text-align:right;font-size:11px}
}

/* ============================================================
   NACHSATZ — der letzte Gedanke eines Abschnitts
   ------------------------------------------------------------
   Befund: Diese Absaetze standen in Quellengroesse (12px), weil
   sie leiser sein sollten als der Fliesstext. Das Ergebnis waren
   fuenf Schriftgroessen in einem Abschnitt und ein Argument, das
   aussah wie ein Kleingedrucktes. Leiser wird jetzt ueber Farbe
   geregelt, nicht ueber Groesse. .statsrc ist wieder das, was der
   Name sagt: eine Quellenangabe.
   ============================================================ */
.nachsatz{
  font-size:16px;line-height:1.62;color:#9FAAB1;max-width:66ch;
  margin-top:22px;
}
.nachsatz b{color:#D5DADE}
.nachsatz a{color:#D5DADE;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(198,255,1,.45)}
.gsec.light .nachsatz,section.light .nachsatz{color:#5A646B}
.gsec.light .nachsatz b,section.light .nachsatz b{color:#041615}
.gsec.light .nachsatz a,section.light .nachsatz a{color:#041615;text-decoration-color:#AFCB16}

/* Eine Quellenangabe gehoert optisch an das, was sie belegt —
   also dicht darueber und mit Luft zum naechsten Gedanken. */
.statsrc{margin-top:14px}
.statsrc + p,.statsrc + .big-p,.statsrc + .nachsatz,
.statsrc + div,.statsrc + ul,.statsrc + ol{margin-top:28px}

/* ============================================================
   SEITENAUFBAU — vom Textband zur begehbaren Seite
   ------------------------------------------------------------
   Befund vor dem Umbau, gemessen ueber alle acht Problemseiten:
     · das Werkzeug lag bei 43-62 % der Seitenhoehe (Median 57 %)
     · 11 bis 16 Mikro-Label pro Seite, sinnvoll waeren 5 bis 6
     · 8 bis 13 Abschnitte in exakt derselben Bauform
   Ergebnis: Alles wirkt gleich wichtig, also wirkt nichts wichtig,
   und wer wegen des Rechners kommt, scrollt an ihm vorbei.

   Der Umbau in drei Zonen:
     A  Einstieg   — Problem, Gegenrede, ein Beleg
     B  Handeln    — Quick Win, Werkzeug, Plan
     C  Tiefe      — freiwillig, sichtbar als Angebot
   ============================================================ */

/* --- Kapitelband: was diese Seite hat, in einer Zeile --- */
.kapitel{background:#061c18;border-top:1px solid #102a24;border-bottom:1px solid #102a24;padding:0}
.kapitel .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.kapitel-lab{
  flex:none;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:#9FAAB1;margin-right:6px;
}
.kap{
  display:inline-flex;align-items:baseline;gap:9px;
  padding:9px 16px 9px 13px;border-radius:999px;
  border:1px solid #1E3A33;background:rgba(255,255,255,.02);
  color:#D5DADE;text-decoration:none;font-size:14px;font-weight:700;
  transition:border-color .16s var(--ease-out,cubic-bezier(.23,1,.32,1)),
             background-color .16s var(--ease-out,cubic-bezier(.23,1,.32,1)),
             transform .16s var(--ease-out,cubic-bezier(.23,1,.32,1));
}
.kap i{font-style:normal;font-size:11px;font-weight:900;color:#8FAE86;letter-spacing:.06em}
.kap:hover{border-color:var(--lemon,#C6FF01);background:rgba(198,255,1,.07);color:#EAF3EE}
.kap:active{transform:scale(.97)}
.kap:focus-visible{outline:2px solid var(--lemon,#C6FF01);outline-offset:3px}
.kap.jetzt{background:var(--lemon,#C6FF01);border-color:var(--lemon,#C6FF01);color:#041615}
.kap.jetzt i{color:rgba(4,22,21,.55)}
.kap.jetzt:hover{background:#d4ff3a;color:#041615}
@media(max-width:620px){
  .kapitel .wrap{gap:8px}
  .kapitel-lab{width:100%;margin-bottom:2px}
  .kap{font-size:13px;padding:8px 13px 8px 11px}
}

/* --- Zonenmarke: hier hoert das Machen auf und das Erklaeren faengt an --- */
.zone{background:var(--ink,#041615);padding:88px 0 0}
.zone .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.zone-in{
  display:flex;align-items:flex-start;gap:22px;
  padding-top:30px;border-top:1px solid #1E3A33;max-width:780px;
}
.zone-n{
  flex:none;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(198,255,1,.1);border:1px solid #35513F;
  font-size:18px;font-weight:900;color:var(--lemon,#C6FF01);line-height:1;
}
.zone-t{margin:0 0 8px;font-size:24px;font-weight:900;font-stretch:110%;
  text-transform:uppercase;line-height:1.1;color:#EAF3EE;letter-spacing:-.01em}
.zone-s{margin:0;font-size:16px;line-height:1.62;color:#9FAAB1;max-width:60ch}

/* --- Tiefe-Zone: sichtbar andere Bauform als die Handeln-Zone.
       Schmaler Satz, Seitenlinie, ruhiger. Damit man am Scrollen
       merkt, in welchem Teil der Seite man gerade ist. --- */
.tiefe > .wrap > .narrow,
.tiefe > .wrap.narrow{
  border-left:2px solid #16302A;padding-left:34px;
}
.tiefe h2{font-size:clamp(24px,3vw,34px)}
.tiefe .big-p{font-size:18px}
@media(max-width:760px){
  .tiefe > .wrap > .narrow,.tiefe > .wrap.narrow{padding-left:20px}
}
.gsec.light.tiefe > .wrap > .narrow,
.gsec.light.tiefe > .wrap.narrow{border-left-color:#DDE2E4}

/* Sprungziele nicht unter die klebende Navigation schieben */
:target,#rechner,#werkzeug,#matrix,#mapper,#check,#plan,#warum,#stufen,#kurs{
  scroll-margin-top:96px;
}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* Die Kante der Tiefe-Zone muss man beim Scrollen sehen, sonst
   erklaert sie nichts. Vorher zu leise gegen den Grund gesetzt. */
.tiefe > .wrap > .narrow,.tiefe > .wrap.narrow{border-left-color:#24463C}
.gsec.light.tiefe > .wrap > .narrow,.gsec.light.tiefe > .wrap.narrow{border-left-color:#C9D0D3}

/* Zonenmarke direkt nach dem Zwischen-CTA: einmal Abstand reicht */
.midcta + .zone{padding-top:56px}

/* --- Inhalt der Tiefe-Zone: sichtbar als Auswahl, nicht als Strecke --- */
.zone-liste{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:2px;margin:26px 0 0;padding:0;list-style:none;max-width:900px;
}
.zone-liste a{
  display:flex;align-items:baseline;gap:14px;
  padding:14px 16px;border-radius:12px;
  color:#B1BBC1;text-decoration:none;font-size:16px;line-height:1.45;
  transition:background-color .16s var(--ease-out,cubic-bezier(.23,1,.32,1)),
             color .16s var(--ease-out,cubic-bezier(.23,1,.32,1));
}
.zone-liste a:hover{background:rgba(198,255,1,.07);color:#EAF3EE}
.zone-liste a:focus-visible{outline:2px solid var(--lemon,#C6FF01);outline-offset:2px}
.zone-liste .zn{
  flex:none;font-size:12px;font-weight:900;color:#8FAE86;
  font-variant-numeric:tabular-nums;position:relative;top:-1px;
}
.zone-liste a:hover .zn{color:var(--lemon,#C6FF01)}
.zone-fuss{margin:22px 0 0;font-size:14px;color:#9FAAB1}
@media(max-width:620px){.zone-liste{grid-template-columns:1fr}}

/* ============================================================
   HELLE ABSCHNITTE — die Lücke, die eine ganze Box unlesbar machte
   ------------------------------------------------------------
   Befund der Strukturpruefung: Der Datenspende-Block war nur fuer
   dunkle Abschnitte durchdefiniert. Auf der Vertretbarkeits- und
   der Fluktuationsseite steht er in einem hellen Abschnitt — dort
   stand hellgrauer Text auf fast weissem Grund, Kontrast 1,1.
   Sichtbar war praktisch nichts.

   Regel ab hier: Jedes Bauteil, das in beiden Sektionsfarben
   vorkommen kann, wird fuer beide vollstaendig gesetzt. Die
   Pruefung in pruefung.mjs geht jedes Textelement durch und
   faellt sonst durch.
   ============================================================ */
.gsec.light .dspfields li,section.light .dspfields li,
.gsec.light .dspnote,section.light .dspnote,
.gsec.light .dspstate,section.light .dspstate{color:#5A646B}
.gsec.light .dspfields li b,section.light .dspfields li b{color:#041615}
.gsec.light .dspfields li::before,section.light .dspfields li::before{background:#A9B1B6}
.gsec.light .dspnote b,section.light .dspnote b{color:#041615}
.gsec.light .dspnote a,section.light .dspnote a{color:#333D44}
.gsec.light .dspok,section.light .dspok{color:#4E6A10}
.gsec.light .dsp-aus .dspfields,section.light .dsp-aus .dspfields{opacity:.75}

/* Merkmalsliste in hellen Abschnitten */
.gsec.light .bench li,section.light .bench li,.lightsec .bench li{color:#333D44}
.gsec.light .bench li b,section.light .bench li b,.lightsec .bench li b{color:#041615}

/* ============================================================
   LEISE TEXTFARBEN — eine Stufe, die auf jedem Grund besteht
   ------------------------------------------------------------
   Die gedaempften Toene waren gegen den hellsten dunklen Grund
   (#0F2E27 in der Reifegrad-Grafik) unter 4,5:1. Statt je Bauteil
   zu raten, gilt ab hier eine Untergrenze: #9FAAB1 fuer neutrale
   Nebentexte, #8FAE86 fuer die gruenlichen Mikro-Label.
   ============================================================ */
.kapitel-lab,.sv-cap,.sv-num,.zone-fuss{color:#9FAAB1}
.kap i,.zone-liste .zn{color:#8FAE86}
.zone-liste a{color:#B1BBC1}
.gsec.light .kapitel-lab,section.light .kapitel-lab{color:#5A646B}