/* ============================================================
   v2.css — Überarbeitung 2026-08-25
   Wird NACH fixes.css geladen. Enthält drei Dinge:
   A · systemische Korrekturen (Tippziele, Kontrast, Browser-Flächen)
   B · Bauteile, die es vorher nicht gab (Labor-Brief, Reset, Hinweise)
   C · die neue Ergebnisbox des Rechners
   Tokens und Regeln: siehe DESIGN.md
   ============================================================ */

:root{
  --v2-quiet:#9FAAB1;        /* ersetzt #7E868D auf gehobenen Flächen (6,60:1 statt 4,23:1) */
  --v2-quiet-paper:#5A646B;  /* ersetzt #8B9198 auf Papier (5,29:1 statt 2,78:1) */
  --v2-key-paper:#4C6510;    /* ersetzt #5C7A12 auf #EEF0F1 (5,78:1 statt 4,32:1) */
  --v2-warn:#FF9B7A;         /* die eine Signalfarbe für Warnung und Fehler */
  --v2-warn-deep:#A5342A;
  --v2-tap:44px;             /* Mindest-Tippziel */
}

/* ============================================================
   A · SYSTEMISCHE KORREKTUREN
   ============================================================ */

/* --- A1 Kontrast -------------------------------------------
   #7E868D erreicht auf reiner Tinte 5,02:1 und wäre dort zulässig —
   aber fast jedes Vorkommen sitzt in .toolbox, .tres oder einer Karte,
   also auf #0C2822 / #102A24, wo es 4,23:1 bzw. 4,12:1 sind.
   Deshalb einheitlich hoch. Kein gestalterischer Verlust: #9FAAB1
   ist bereits Systemton. */
.tres-lab,
.tally-hint,
.tally-actions-note,
.seg button,
.gfoot,
.gfoot a,
.bb-myth .bb-lab,
.tool-note,
.vfootnote,
.kursnote,
.qzfoot,
.statsrc,
.figcaption,
figcaption{ color:var(--v2-quiet); }

.tres-lab{ font-size:12px; }          /* war 11,5 px */
.bb-myth .bb-lab{ font-size:11.5px; }

/* Papier-Seite: der Eyebrow in hellen Sektionen war zu schwach. */
.gsec.light .eyebrow,
.sec.light .eyebrow,
.pcard .pn,
.wcard .wk{ color:var(--v2-key-paper); }
.gsec.light .vfootnote,
.gsec.light figcaption,
.gsec.light .statsrc{ color:var(--v2-quiet-paper); }

/* --- A2 Tippziele ------------------------------------------
   Vorher erreichte nur .btn die 44 px. Die Strichliste — das
   Kernwerkzeug dieser Seite — bestand aus 34-px-Pillen. */
.tbtn,
.chip,
.others a,
.qzrec a,
.gnav-r .cta,
.nav-r .cta,
.navlinks a.cta,
.seg button,
.kapitel a,
.plinks a{
  min-height:var(--v2-tap);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.tbtn,.chip{ padding-inline:20px; }
.gnav-r .cta{ padding:0 20px; }

/* Der Schiebe-Griff bekommt Fläche, ohne optisch zu wachsen:
   die Spur wird transparent aufgepolstert. */
.tslide{
  height:auto;
  min-height:var(--v2-tap);
  background:transparent;
  padding-block:19px;
  background-image:linear-gradient(#1E3A33,#1E3A33);
  background-size:100% 6px;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:0;
}
.tslide::-webkit-slider-thumb{ width:26px;height:26px; }
.tslide::-moz-range-thumb{ width:26px;height:26px; }

/* Zahlenfelder sind Eingaben, keine Etiketten. */
.tnum{ min-height:var(--v2-tap); }

/* --- A3 Bewegung -------------------------------------------
   transition:width rechnet Layout neu. scaleX läuft auf dem
   Compositor und sieht identisch aus. */
.tb-track{ position:relative; }
.tb-fill{
  transition:transform .25s var(--ease-out,cubic-bezier(.23,1,.32,1));
  transform-origin:left center;
  width:100% !important;
}

/* --- A4 Browser-Flächen ------------------------------------
   Die Teile, die man nicht zeichnet, tragen die Gestaltung mit. */
::selection{ background:var(--lemon,#C6FF01); color:var(--ink,#041615); }
html{ scrollbar-color:#244038 #041615; scrollbar-width:thin; caret-color:var(--lemon,#C6FF01); }
::-webkit-scrollbar{ width:12px;height:12px; }
::-webkit-scrollbar-track{ background:#041615; }
::-webkit-scrollbar-thumb{ background:#244038;border-radius:999px;border:3px solid #041615; }
::-webkit-scrollbar-thumb:hover{ background:#1E3A33; }
:focus-visible{ outline:2px solid var(--lemon,#C6FF01); outline-offset:3px; }
a:not(.btn):not(.cta){ text-underline-offset:3px; text-decoration-thickness:1px; }
/* Zahlen in Tabellen und Ergebnissen laufen in gleicher Breite. */
.vtab td,.vtab th,.tres-big,.tres-loss,.statnum,.tb-val,.tbtn b{ font-variant-numeric:tabular-nums; }
.gsec.light ::selection{ background:var(--ink,#041615); color:var(--paper,#EEF0F1); }

/* ============================================================
   B · NEUE BAUTEILE
   ============================================================ */

/* --- B1 Der Hinweis, dass lokal gerechnet wird -------------
   Steht direkt unter dem Werkzeug, weil er dort zählt.
   Er ist jetzt wahr: der Report entsteht ohne Adresse. */
.localnote{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:16px;padding:12px 14px;
  border:1px solid #244038;border-radius:12px;
  background:rgba(198,255,1,.04);
  font-size:14.5px;line-height:1.6;color:#C6CBCE;
}
.localnote svg{ flex:none;margin-top:2px;color:var(--lemon,#C6FF01); }
.pdf-note{ margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--v2-quiet); }
.pdfbtn{ gap:10px; }
.pdf-err,.clamphint{
  margin-top:12px;padding:11px 14px;
  border:1px solid var(--v2-warn-deep);border-radius:12px;
  background:rgba(165,52,42,.14);
  font-size:14.5px;line-height:1.55;color:var(--v2-warn);font-weight:600;
}
.clamphint{ margin:0 0 16px; }

/* --- B2 Reset der Strichliste ------------------------------
   Raus aus der Zählerreihe. Löscht drei Tage Arbeit — das
   verlangt einen zweiten Tipp. */
.tally-actions{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:18px;
}
.linkbtn{
  background:none;border:0;padding:10px 2px;
  font-family:inherit;font-size:14.5px;font-weight:600;
  color:var(--v2-quiet);cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:currentColor;
  text-decoration-style:dotted;
  min-height:var(--v2-tap);
  transition:color .15s,text-decoration-color .15s;
}
.linkbtn:hover{ color:var(--paper,#EEF0F1);text-decoration-style:solid; }
.linkbtn.danger[data-armed="1"]{
  color:var(--v2-warn);font-weight:800;
  text-decoration-color:currentColor;
}
.tally-actions-note{ font-size:13.5px;color:var(--v2-warn);line-height:1.5; }

/* --- B3 Der Labor-Brief ------------------------------------
   Vorher ein 11-px-Zettel hinter einem Knopf. Jetzt ein
   benannter Abschnitt, den man annehmen oder übergehen kann. */
.briefsec{ background:#061c18;border-bottom:1px solid #1E3A33; }
.briefbox{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;
  align-items:start;
  background:linear-gradient(165deg,#0C2822,#061c18);
  border:1px solid #1E3A33;border-radius:24px;
  padding:38px 40px;
}
.briefbox h2{ font-size:clamp(28px,4vw,46px);margin-bottom:14px; }
.brief-p{ font-size:16.5px;line-height:1.65;color:#C6CBCE;margin-bottom:18px; }
.brief-interest{
  font-size:14.5px;line-height:1.65;color:#C6CBCE;
  padding:14px 18px;border:1px solid #244038;border-radius:12px;
  background:rgba(198,255,1,.04);
}
.brief-interest b{ color:var(--paper,#EEF0F1); }
.brief-form{ display:block; }
.brief-lab{
  display:block;font-size:12px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--v2-quiet);margin-bottom:12px;
}
.brief-row{ display:flex;gap:12px;flex-wrap:wrap; }
.brief-row input{
  flex:1;min-width:220px;min-height:var(--v2-tap);
  background:#041615;border:1px solid #244038;border-radius:999px;
  color:var(--paper,#EEF0F1);font-family:inherit;font-size:16px;
  padding:0 22px;
}
.brief-row input::placeholder{ color:var(--v2-quiet); }
.brief-row input:focus-visible{ outline:2px solid var(--lemon,#C6FF01);outline-offset:2px; }
.brief-chk{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:18px;font-size:14.5px;line-height:1.6;color:#C6CBCE;cursor:pointer;
}
.brief-chk input{ position:absolute;opacity:0;width:1px;height:1px; }
.brief-cb{
  flex:none;width:24px;height:24px;margin-top:1px;
  border:2px solid #244038;border-radius:8px;background:#041615;
  position:relative;transition:border-color .15s,background .15s;
}
.brief-chk:hover .brief-cb{ border-color:var(--lemon,#C6FF01); }
.brief-chk input:checked+.brief-cb{ background:var(--lemon,#C6FF01);border-color:var(--lemon,#C6FF01); }
.brief-cb::after{
  content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;
  border:solid var(--ink,#041615);border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0);transition:transform .15s;
}
.brief-chk input:checked+.brief-cb::after{ transform:rotate(45deg) scale(1); }
.brief-chk input:focus-visible+.brief-cb{ outline:2px solid var(--lemon,#C6FF01);outline-offset:3px; }
.brief-chk a{ color:var(--lemon,#C6FF01);text-decoration:underline;text-underline-offset:3px; }
.brief-err,.brief-ok{
  margin-top:16px;padding:11px 14px;border-radius:12px;
  font-size:14.5px;line-height:1.55;font-weight:600;
}
.brief-err{ border:1px solid var(--v2-warn-deep);background:rgba(165,52,42,.14);color:var(--v2-warn); }
.brief-ok{ border:1px solid #244038;background:rgba(198,255,1,.08);color:var(--lemon,#C6FF01); }
.brief-note{ margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--v2-quiet); }

/* ============================================================
   C · DIE ERGEBNISBOX
   Vorher trug die schlechte Nachricht 50 px und die gute 14 px.
   Jetzt trägt der Verlust den Kontext und die Ersparnis das Gewicht —
   das ist der Teil, gegen den der 12-Wochen-Plan arbeitet.
   ============================================================ */
.tres-loss{
  font-size:clamp(26px,3.2vw,34px);
  font-weight:800;font-stretch:108%;
  color:var(--paper,#EEF0F1);
  line-height:1.05;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.tres-meta{
  font-size:14.5px;line-height:1.6;color:var(--v2-quiet);margin-top:8px;
}
.tres-meta b{ color:#C6CBCE;font-weight:700; }
.tres-win{
  margin-top:22px;padding-top:22px;
  border-top:1px solid #244038;
}
.tres-lab.win{ color:var(--lemon,#C6FF01); }
.tres-win .tres-big{
  font-size:clamp(34px,4.8vw,52px);
  color:var(--lemon,#C6FF01);
  line-height:1.04;
}

/* ============================================================
   Schmale Bildschirme
   ============================================================ */
@media(max-width:760px){
  .briefbox{ grid-template-columns:1fr;gap:28px;padding:28px 24px; }
  .brief-row{ flex-direction:column; }
  .brief-row .btn{ width:100%;justify-content:center; }
  .tally-actions{ margin-top:14px; }
}
@media(max-width:420px){
  .tbtn,.chip{ padding-inline:16px; }
}

/* ============================================================
   Bewegung aus — die Zustandsrückmeldung bleibt.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .tb-fill{ transition:none !important; }
  .linkbtn{ transition:color .08s; }
}

/* ============================================================
   D · NAVIGATION AUF KLEINEN BILDSCHIRMEN — bewusst NICHT angefasst
   Gemessen bei 375 px ragt die Roadmap-Schaltfläche bis 456 px.
   Das ist kein Fehler: fixes.css (Abschnitt „Mobile Nav") macht
   .gnav-r unter 860 px zu einem horizontal scrollbaren Chip-Streifen,
   weil die Seiten auf dem Handy vorher gar keine Navigation hatten.
   Ein Override hätte aus einem scrollbaren Streifen echten Überlauf
   gemacht — deshalb steht hier nichts.

   Offen und der Erwähnung wert: Der wichtigste Punkt des Streifens
   (Labor-Roadmap) liegt außerhalb des sichtbaren Bereichs und wird
   erst durch Wischen erreichbar. Eine Lösung wäre, ihn aus dem
   Scrollbereich zu nehmen und rechts festzusetzen. Das ist eine
   Navigationsentscheidung, keine Korrektur — deshalb nicht hier.
   ============================================================ */

/* ============================================================
   E · ZUSTIMMUNG IM ROADMAP-FORMULAR
   Die Roadmap sammelt Name, E-Mail und eine freie Beschreibung
   des Labors. Vorher stand dort nur ein Satz „Mit Klick erhältst
   du…" und ein Wort „Datenschutz" ohne Link. Jetzt ein echtes
   Häkchen — gleiche Bauform wie im Labor-Brief.
   ============================================================ */
.gate-chk{
  display:flex;gap:12px;align-items:flex-start;
  grid-column:1 / -1;margin-top:4px;
  font-size:14.5px;line-height:1.6;color:#C6CBCE;cursor:pointer;
}
.gate-chk input{ position:absolute;opacity:0;width:1px;height:1px; }
.gate-cb{
  flex:none;width:24px;height:24px;margin-top:1px;
  border:2px solid #244038;border-radius:8px;background:#041615;
  position:relative;transition:border-color .15s,background .15s;
}
.gate-chk:hover .gate-cb{ border-color:var(--lemon,#C6FF01); }
.gate-chk input:checked+.gate-cb{ background:var(--lemon,#C6FF01);border-color:var(--lemon,#C6FF01); }
.gate-cb::after{
  content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;
  border:solid var(--ink,#041615);border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0);transition:transform .15s;
}
.gate-chk input:checked+.gate-cb::after{ transform:rotate(45deg) scale(1); }
.gate-chk input:focus-visible+.gate-cb{ outline:2px solid var(--lemon,#C6FF01);outline-offset:3px; }
.gate-chk a{ color:var(--lemon,#C6FF01);text-decoration:underline;text-underline-offset:3px; }
#consenterr{ grid-column:1 / -1; }

/* ============================================================
   F · KANONISCHE TOKENS
   Dreizehn Stylesheets deklarieren je einen eigenen :root, und
   zwei Variablen widersprechen sich dabei: --paper ist mal
   #EEF0F1, mal #EFEFED, --grey mal #8B9198, mal #8a8a86. Welche
   gilt, hing bisher von der Ladereihenfolge ab. Diese Datei wird
   als letzte geladen — ab hier gilt eine Quelle. Die Werte sind
   die aus DESIGN.md.
   ============================================================ */
:root{
  --ink:#041615; --ink2:#0A241E;
  --card:#0C2822; --card-2:#102A24;
  --line:#1E3A33; --line-2:#1E3A33; --line-3:#244038;
  --lemon:#C6FF01; --lemon-on-paper:#4C6510;
  --paper:#EEF0F1; --grey:#8B9198;
  --ease-out:cubic-bezier(.23,1,.32,1);
}

/* ============================================================
   G · DIE SEITENLINIE KEHRT ZU IHRER BEDEUTUNG ZURÜCK
   Der 3px-Lemon-Balken links markiert die gerechnete Kernaussage
   (.stat und ihre Werkzeug-Geschwister .dbaha, .raus, .duel-gap),
   den Glaubenssatz (.glaube) und das Zitat (.philquote). Auf
   KARTEN ist er dagegen das bekannteste KI-Muster überhaupt —
   vier Karten trugen ihn trotzdem. Der Balken wird dort
   transparent (die Geometrie bleibt, nichts verrutscht), die
   Karte trägt ihre Auszeichnung über Fläche und Rahmen.
   ============================================================ */
.rmherk .rmmerk{ border-left-color:transparent; background:rgba(198,255,1,.09); }
.cmpbox{ border-left-color:transparent; border:1px solid var(--line-3); border-left:4px solid transparent; }
.defform{ border-left-color:transparent; }
.kursok{ border-left-color:transparent; background:rgba(198,255,1,.05); border-radius:12px; padding-block:12px; }

/* ============================================================
   H · DAS START-PANEL IM ROADMAP-ERGEBNIS
   Das Ergebnis beginnt mit drei Handgriffen statt mit Lesestoff:
   heute (10 Min, physisch), die eigene Zahl (Werkzeug-Link) und
   Aufhängen (Druckknopf). Die Klassen kommen aus labor-roadmap.css,
   hier stehen nur die Knöpfe im Raster.
   ============================================================ */
#rstart .usesteps>div{display:flex;flex-direction:column;align-items:flex-start}
#rstart .usesteps .btn{margin-top:12px;font-size:14.5px;padding:12px 20px;min-height:44px}
#rstart .usesteps button.btn{font-family:inherit;cursor:pointer}
#rstart .usenote{font-weight:600}

/* I · Beleg-Leiste (Beispielwerte — siehe INHALTE/BEWEISE.md) */
.belegband{display:flex;flex-wrap:wrap;gap:14px 28px;margin:22px 0 6px;padding:16px 18px;border:1px solid rgba(198,255,1,.22);border-radius:12px;background:rgba(198,255,1,.05)}
.belegband .beleg{flex:1 1 160px;min-width:150px}
.belegband .beleg b{display:block;font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:20px;color:var(--lemon,#C6FF01);letter-spacing:.01em}
.belegband .beleg span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:#9FAAB1;font-weight:400}
.beleg-src{margin:8px 0 0;font-size:12.5px;color:#9FAAB1}
.statsrc.beileg{margin-top:10px}
.statsrc.beileg b{color:var(--lemon,#C6FF01)}

/* ============================================================
   G . LANDINGPAGE V3 (Sept. 2026)
   1) Navigation auf kleinen Schirmen: eine Zeile, Logo links,
      Roadmap-Button rechts. Die Textlinks entfallen dort; die
      Kapitel-Leiste unter dem Hero uebernimmt die Seitennavigation.
      Ueberschreibt den Chip-Streifen aus fixes.css (Abschnitt Mobile Nav).
   2) Sticky-Werkzeugleiste unten (nur Handy), gesteuert von landing-v3.js.
   ============================================================ */
@media(max-width:860px){
  .gnav .wrap,nav.gnav .wrap{ height:60px;flex-wrap:nowrap;gap:12px;padding-top:0;padding-bottom:0; }
  .gnav-r{ width:auto;overflow:visible;gap:0;flex:none; }
  .gnav-r a:not(.cta){ display:none!important; }
  .gnav-r a.cta{ padding:0 16px;font-size:14px;min-height:40px; }
  .glogo img{ height:20px; }
  body{ padding-bottom:0; }
}
.stickycta{
  display:none;
}
@media(max-width:860px){
  .stickycta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,rgba(4,22,21,.98) 60%,rgba(4,22,21,0));
    transform:translateY(110%);transition:transform .25s var(--ease-out,cubic-bezier(.23,1,.32,1));
    pointer-events:none;
  }
  .stickycta.ist-sichtbar{ transform:none;pointer-events:auto; }
  .stickycta .btn{ width:100%;justify-content:center;box-shadow:0 8px 24px rgba(198,255,1,.22); }
}
@media(prefers-reduced-motion:reduce){ .stickycta{ transition:none; } }

/* Hero-Renders (Polygon-Szenen) sind schon in Markenfarben: kein Foto-Grading. */
.hero-photo img.render{ filter:none; }

/* ============================================================
   H . HERO-LAYOUTS (Sept. 2026)
   Vier Gerueste fuer denselben Hero-Inhalt, gesteuert ueber eine
   Klasse am <header class="ghero">: (ohne) Split, v-kino, v-buehne,
   v-spiegel. Verteilung: Kino = Kundenklumpen, Auslastung; Buehne =
   KI-Einstieg, Fachkraefte; Spiegel = Inhaber-Falle, Koepfe; Split =
   Remakes, Datenchaos, LabOS. Unter 760 px fallen alle auf eine Spalte.
   ============================================================ */

/* KINO: 16:9-Bild vollflaechig hinter dem Hero, Text links auf Verlauf */
.ghero.v-kino{padding:0;min-height:640px;display:flex;align-items:center}
.ghero.v-kino::after{display:none}
.ghero.v-kino .ghero-grid{position:static;width:100%}
.ghero.v-kino>.wrap{padding-top:84px;padding-bottom:76px;z-index:1}
.ghero.v-kino .ghero-r{position:absolute;inset:0;z-index:0;flex:none;min-width:0}
.ghero.v-kino .hero-photo{position:absolute;inset:0;border-radius:0;border:0;box-shadow:none;min-height:0;background:#041615}
.ghero.v-kino .hero-photo img{position:absolute;inset:0;width:100%;height:100%}
.ghero.v-kino .hero-photo:hover img{transform:none}
.ghero.v-kino .hero-photo::after{background:linear-gradient(90deg,rgba(4,22,21,.97) 0,rgba(4,22,21,.88) 34%,rgba(4,22,21,.35) 62%,rgba(4,22,21,.08) 100%),linear-gradient(180deg,rgba(4,22,21,.55),transparent 28%,transparent 70%,rgba(4,22,21,.92))}
.ghero.v-kino .hero-photo-tag{left:auto;right:32px;bottom:30px;max-width:260px;text-align:right}
.ghero.v-kino .ghero-l{max-width:620px;flex:none;position:relative;z-index:2}
.ghero.v-kino .ghero-l::before{display:none}
@media(max-width:860px){
  .ghero.v-kino{min-height:0}
  .ghero.v-kino>.wrap{padding-top:56px;padding-bottom:48px}
  .ghero.v-kino .hero-photo::after{background:linear-gradient(180deg,rgba(4,22,21,.72),rgba(4,22,21,.94) 60%)}
  .ghero.v-kino .hero-photo-tag{display:none}
}

/* BUEHNE: Text mittig oben, darunter das breite Bild als Band */
.ghero.v-buehne{padding-top:48px;padding-bottom:0}
.ghero.v-buehne::after{-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 55%);mask-image:linear-gradient(180deg,#000 0,transparent 55%);opacity:.09}
.ghero.v-buehne .ghero-grid{flex-direction:column;align-items:stretch;gap:30px}
.ghero.v-buehne .ghero-l{max-width:920px;margin:0 auto;flex:none;min-width:0;display:grid;grid-template-columns:1fr 1fr;column-gap:44px;row-gap:0;align-items:center}
.ghero.v-buehne .ghero-l::before{display:none}
.ghero.v-buehne .kicker,.ghero.v-buehne h1,.ghero.v-buehne .hero-sub{grid-column:1/-1;text-align:center}
.ghero.v-buehne h1{font-size:clamp(44px,4.4vw,60px);margin-bottom:16px}
.ghero.v-buehne .hero-sub{margin:-6px auto 22px;max-width:640px}
.ghero.v-buehne .stat{grid-column:1;margin:0;border-left:3px solid var(--lemon)}
.ghero.v-buehne .statsrc{grid-column:1}
.ghero.v-buehne .cta-row{grid-column:2;grid-row:4;margin:0;justify-content:flex-start}
.ghero.v-buehne .hero-rr{grid-column:2;margin-top:12px}
.ghero.v-buehne .ghero-r{flex:none;min-width:0;width:100%}
.ghero.v-buehne .hero-photo{min-height:0;aspect-ratio:16/6.5;border-radius:24px 24px 0 0;border-bottom:0}
.ghero.v-buehne .hero-photo img{position:absolute;inset:0;height:100%}
.ghero.v-buehne .hero-photo::after{background:linear-gradient(180deg,transparent 60%,rgba(4,22,21,.85))}
.ghero.v-buehne .hero-photo-tag{left:30px;bottom:26px;max-width:360px}
@media(max-width:860px){
  .ghero.v-buehne .ghero-l{display:block;text-align:left}
  .ghero.v-buehne .kicker,.ghero.v-buehne h1,.ghero.v-buehne .hero-sub{text-align:left}
  .ghero.v-buehne .hero-sub{margin:-6px 0 22px}
  .ghero.v-buehne .stat{margin:6px 0 26px}
  .ghero.v-buehne .hero-photo{aspect-ratio:4/3}
}

/* SPIEGEL: Bild links, Text rechts, Kennzahl als Kachel, grosse Ecke */
.ghero.v-spiegel .ghero-grid{flex-direction:row-reverse}
.ghero.v-spiegel .ghero-l::before{background:linear-gradient(270deg,rgba(4,22,21,.86),rgba(4,22,21,.62) 78%,transparent)}
.ghero.v-spiegel::after{background-position:center left;-webkit-mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.55) 46%,#000 100%);mask-image:linear-gradient(270deg,transparent 0,rgba(0,0,0,.55) 46%,#000 100%)}
.ghero.v-spiegel .hero-photo{border-radius:24px 24px 24px 120px}
.ghero.v-spiegel .stat{border-left:0;background:#0C2822;border:1px solid #1E3A33;border-radius:18px;padding:20px 22px 18px}
.ghero.v-spiegel .stat .statnum{font-size:clamp(44px,5vw,60px)}
@media(max-width:760px){.ghero.v-spiegel .ghero-grid{flex-direction:column}.ghero.v-spiegel .hero-photo{border-radius:24px}}
.story-visual img.render{ filter:none; }

/* Spiegel: Bildzeile weg von der grossen Ecke, unten rechts */
.ghero.v-spiegel .hero-photo-tag{left:auto;right:26px;bottom:22px;text-align:right;max-width:240px}

/* Verwandte Werkzeuge: drei gleiche Karten in einer zentrierten Reihe.
   Vorher: Zweier-Raster linksbuendig (760 px) + zentrierter Worksheet-Absatz darunter. */
.gcta .eyebrow.mt-4{margin-top:56px}
.verwandt-row{display:flex;flex-wrap:wrap;justify-content:center;max-width:1000px;margin:18px auto 0;gap:16px;text-align:left}
a.verwandt{flex:1 1 260px;max-width:320px}
a.verwandt{display:flex;flex-direction:column;gap:6px;padding:20px 22px;min-height:112px}
a.verwandt b{margin-bottom:0}
a.verwandt.verwandt-pdf{border-style:dashed}
a.verwandt.verwandt-pdf span::before{content:"PDF";display:inline-block;margin-right:8px;padding:1px 7px;border-radius:8px;background:var(--lemon,#C6FF01);color:var(--ink,#041615);font-size:11px;font-weight:800;letter-spacing:.06em;vertical-align:1px}
.alle-werkzeuge{margin-top:22px}
@media(max-width:600px){a.verwandt{max-width:none}}

/* Globale Navigation fuer Seiten ohne eigene .gnav-Regeln (Labor-Roadmap). Werte wie labos.css. */
.gnav{position:sticky;top:0;z-index:50;background:rgba(4,22,21,.86);backdrop-filter:blur(10px);border-bottom:1px solid #1E3A33}
.gnav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.glogo{font-weight:900}
.gnav-r{display:flex;align-items:center;gap:24px;font-size:14.5px;color:#B8BFC4}
.gnav-r a{color:inherit;text-decoration:none}
.gnav-r .cta{background:var(--lemon);color:var(--ink);padding:9px 18px;border-radius:999px;font-weight:800}

/* Labor-Roadmap: Hero auf das Raster der uebrigen Seiten. Kein Ghost, keine Fadenkreuze,
   kein Lichtschacht, kein Punktraster - der Vorschau-Karte reicht das ruhige Dunkelgruen. */
header.hero{padding:84px 0 70px;background:var(--ink)}
header.hero::before{display:none}
header.hero .heroGrid{gap:52px}
header.hero .preview{box-shadow:0 28px 90px rgba(0,0,0,.42)}
header.hero .preview::before,header.hero .preview::after{display:none}
.lightsec .bigword{display:none}

/* Roadmap: Foto-Backdrop im Hero aus (kommt per ::after aus labor-roadmap.css) */
header.hero{min-height:680px;display:flex;align-items:center}
header.hero::after{display:block;content:"";position:absolute;inset:0;width:auto;height:auto;z-index:0;pointer-events:none;opacity:1;-webkit-mask-image:none;mask-image:none;
  background:linear-gradient(90deg,#041615 0,rgba(4,22,21,.93) 32%,rgba(4,22,21,.5) 60%,rgba(4,22,21,.12) 100%),linear-gradient(180deg,rgba(4,22,21,.45),transparent 30%,transparent 72%,rgba(4,22,21,.96)),url(../img/roadmap-hero.webp) 76% 16%/cover no-repeat}
header.hero .preview{margin-left:auto;max-width:440px;backdrop-filter:blur(6px);background:rgba(12,40,34,.72)}
@media(max-width:860px){
  header.hero{min-height:0}
  header.hero::after{background:linear-gradient(180deg,rgba(4,22,21,.8),rgba(4,22,21,.95) 55%),url(../img/roadmap-hero.webp) 70% 12%/cover no-repeat}
  header.hero .preview{max-width:none}
}

/* Buehne auf dem Handy: Bildspalte darf nicht breiter als der Rahmen werden (5 px Ueberlauf) */
@media(max-width:860px){
  .ghero.v-buehne .ghero-r{width:auto;max-width:100%}
  .ghero.v-buehne .hero-photo{max-width:100%}
}

/* Tippziele: Textlinks in Fusszeile, Nachweisen und Checklisten auf 44 px Hoehe.
   Optisch unveraendert (Padding statt Groesse), aber auf dem Handy sicher zu treffen. */
.footnav a,.gfoot a,.alle-werkzeuge a,.ws-foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
/* Textlinks im Fliesstext: Trefferflaeche ueber Innenabstand + negativen Aussenabstand, Zeilenfluss bleibt. */
.riskrev a,.statsrc a,.fine a,label a,span a,.gsec p a:not(.btn),.warnbox a,.qwbox a,.zone-in a:not(.btn),.pug3 a:not(.btn){padding:12px 2px;margin:-12px 0}
/* Etappen-Haken: sichtbar klein, Trefferflaeche 44 px */
.stepchk{position:relative}
.stepchk::before{content:"";position:absolute;inset:-11px}
/* Tiefe-Abschnitt lief auf dem Handy 5 px ueber (Pseudo-Element) */
@media(max-width:860px){.gsec.tiefe{overflow-x:clip}}

/* ROADMAP-RASTER: Fusszeile, Abschnittsabstaende und Zwischentitel wie auf allen anderen Seiten */
.gfoot{padding:34px 0;border-top:1px solid #1E3A33;font-size:13px;color:#7E868D}
.gfoot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.gfoot a{color:#9FAAB1}
.howto,.rmherk,section#quiz{padding:96px 0}
.lightsec{padding:104px 0}
.rm-precta{padding:34px 0 24px}
.howh,.rm-precta-h,#rmherk-h,.lightsec-h{font-size:clamp(28px,4vw,46px);line-height:1.05}

/* Kurze Fusszeilen-Links (z. B. "Start") und das Logo im Arbeitsblatt-Kopf auf 44 px Trefferflaeche */
.gfoot .wrap>span a{min-width:44px;justify-content:center}
.ws-nav .wrap>a:first-child{display:inline-flex;align-items:center;min-height:44px;min-width:44px}

/* ============================================================
   I . ATMOSPHAERE (von der Roadmap uebernommen)
   1) Feine Koernung ueber der ganzen Seite, wie ein alter Bildschirm. Liegt ueber
      Inhalt und Navigation, unter Sticky-Leiste und Mauszeiger. Nicht auf den
      Arbeitsblaettern (Papier) und nicht im Druck.
   2) Eigener Mauszeiger: Punkt + nachziehender Ring (assets/js/cursor.js).
   ============================================================ */
body::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:59;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
body:has(.ws-nav)::before{display:none}
@media print{body::before{display:none}}
/* Der Punkt lief bisher ueber mix-blend-mode:difference (Lemon gegen den
   Untergrund invertiert). Auf hellem Grund ergibt Lemon-Differenz rechnerisch
   Blau, nicht Gruen - deshalb jetzt eine feste Farbe statt einer Rechnung:
   dunkles Gruen mit einem duennen Lemon-Rand, auf jedem Untergrund gleich. */
#cursor{position:fixed;top:0;left:0;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:var(--ink,#041615);border:1.5px solid var(--lemon);pointer-events:none;z-index:120;transform:translate(-50%,-50%);transition:opacity .2s}
#cursorRing{position:fixed;top:0;left:0;width:38px;height:38px;pointer-events:none;z-index:120;transform:translate(-50%,-50%);transition:opacity .2s}
#cursorRing::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(198,255,1,.6);transition:transform .25s var(--ease-out,cubic-bezier(.23,1,.32,1)),border-color .25s;will-change:transform}
#cursorRing.hov::after{transform:scale(1.684);border-color:var(--lemon)}
@media(pointer:coarse),(prefers-reduced-motion:reduce){#cursor,#cursorRing{display:none}}
/* Scanlinien wie auf der Roadmap: feine horizontale Linien ueber der Koernung. */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;background:repeating-linear-gradient(0deg,rgba(200,255,190,.022) 0 1px,transparent 1px 3px)}
body:has(.ws-nav)::after{display:none}
@media print{body::after{display:none}}

/* ============================================================
   J . KONTRAST-ABSCHNITT (Test, Sept. 2026)
   Nach dem dunklen Zielbild ein heller Gegenpol: derselbe Anspruch,
   aber ruhig und geordnet. Klein: dunkle Erinnerung links, helles
   Ergebnisbild rechts. Nur auf Test-Seite, noch nicht ausgerollt.
   ============================================================ */
.kontrast{background:var(--paper);color:var(--ink);padding:88px 0}
.kontrast .wrap{display:grid;grid-template-columns:.62fr 1fr;gap:36px;align-items:center}
.kontrast .kt-vorher{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;filter:grayscale(.15) brightness(.55)}
.kontrast .kt-vorher img{width:100%;height:100%;object-fit:cover;display:block}
.kontrast .kt-vorher::after{content:"Vorher";position:absolute;left:14px;bottom:14px;color:#EEF0F1;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#0C2822;border:1px solid #244038;padding:5px 10px;border-radius:999px}
.kontrast .kt-nachher{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10.5;box-shadow:0 24px 70px rgba(0,0,0,.14)}
.kontrast .kt-nachher img{width:100%;height:100%;object-fit:cover;display:block}
.kontrast .kt-nachher::after{content:"Nachher";position:absolute;left:16px;bottom:16px;color:#041615;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--lemon);padding:5px 10px;border-radius:999px}
.kontrast .kt-text{grid-column:1/-1;max-width:640px;margin-top:8px}
.kontrast .eyebrow{color:var(--lemon-on-paper)}
.kontrast h2{font-size:clamp(26px,3vw,38px);margin:6px 0 10px}
.kontrast p{color:#4A554F}
@media(max-width:760px){
  .kontrast{padding:56px 0}
  .kontrast .wrap{grid-template-columns:1fr}
  .kontrast .kt-vorher{aspect-ratio:16/9;order:2}
  .kontrast .kt-nachher{order:1}
}

/* ============================================================
   K . LANGTEXT-RHYTHMUS (Sept. 2026)
   Absatz, Zitat-Box, Quick-Win-Box und Fussnote setzten je nur einen
   eigenen Rand (oben ODER unten) -> Luecke zwischen zwei Bloecken lag
   je nach Kombination zwischen 0 und 36px. Jetzt: jeder Block traegt
   denselben oberen Abstand, keiner einen unteren - die Luecke ist
   immer 32px, unabhaengig davon, welche zwei Bloecke aufeinandertreffen.
   ============================================================ */
.wrap.narrow > .big-p,
.wrap.narrow > .merk-dark,
.wrap.narrow > .merk,
.wrap.narrow > .qwbox,
.wrap.narrow > .warnbox,
.wrap.narrow > .nachsatz,
.wrap.narrow > .defnlist,
.wrap.narrow > .cmpbox{
  margin-top:32px!important;margin-bottom:0!important;
}
.wrap.narrow > *:first-child{margin-top:0!important}

/* ============================================================
   L . VIER-SAEULEN-KARTEN ANIMIEREN (phils-ai-lab.html)
   Zwei bestehende Systeme mussten respektiert werden statt sie zu
   uebersteuern: (1) shared-eb0e835c.js setzt fuer jedes .rv-Element
   der Seite eine eigene transitionDelay per Inline-Style (Stufung) -
   eine Transition-KURZFORM hier wuerde das auf 0 zuruecksetzen, darum
   stehen unten nur die Langformen ohne transition-delay. (2) Der alte
   Blocker ".pug-even>.pcard{transform:none!important}" (kein Versatz)
   bleibt für den Ruhezustand gueltig; unsere Regeln gewinnen nur dort,
   wo sie hoehere Spezifitaet UND !important mitbringen (.rv, .rv.in,
   .rv.in:hover - aufsteigend in genau dieser Reihenfolge).
   ============================================================ */
.pug-even.cols4>.pcard.rv{
  transition-property:transform,opacity,box-shadow,border-color!important;
  transition-duration:.6s,.6s,.35s,.35s!important;
  transition-timing-function:cubic-bezier(.23,1,.32,1)!important;
  opacity:0;transform:translateY(22px)!important;
}
.pug-even.cols4>.pcard.rv.in{opacity:1;transform:none!important}
.pug-even.cols4>.pcard.rv.in:hover{
  transform:translateY(-8px)!important;
  box-shadow:0 26px 60px rgba(4,22,21,.16);border-color:#D8DFC0;
}
.pug-even.cols4>.pcard.rv.in.lemon:hover{box-shadow:0 26px 60px rgba(198,255,1,.4);border-color:var(--lemon,#C6FF01)}
/* Der Bild-Zoom ist in jeder getesteten Variante (Transform auf dem Bild,
   auf dem Container, mit overflow:hidden, mit clip-path) im echten Browser
   an der runden Ecke gerissen - zuletzt sogar dauerhaft, weil ein Dauer-Zoom
   von 1.001 im Ruhezustand als Fix gedacht war und es verschlimmert hat.
   Kein Bild-Zoom mehr. Die Karte hebt sich beim Hover, das allein reicht
   als Reaktion und hatte nie einen Riss. */
/* Reproduzierter Befund (125 %/150 % Windows-Skalierung): an der Unterkante
   des Bildbereichs eine graue Haarlinie, weil der Weiss-Verlauf erst auf dem
   letzten, halben Pixel voll deckt und das dunkle Bild darunter durchscheint.
   Loesung ohne Ebenen-Tricks: das Bild endet 3 px vor der Kante, der Verlauf
   ist ab 94 % vollstaendig deckend - an der Kante liegt nur noch Kartenfarbe. */
.pug-even.cols4 .pimg img{height:calc(100% - 3px)}
.pug-even.cols4 .pimg::after{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 48%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.94) 86%,#fff 94%,#fff 100%)}
.pug-even.cols4 .pcard.lemon .pimg::after{background:linear-gradient(180deg,rgba(198,255,1,0) 0%,rgba(198,255,1,0) 48%,rgba(198,255,1,.55) 72%,rgba(198,255,1,.94) 86%,#C6FF01 94%,#C6FF01 100%)}
@media(prefers-reduced-motion:reduce){
  .pug-even.cols4>.pcard.rv,.pug-even.cols4>.pcard.rv.in,.pug-even.cols4 .pimg img{transition:none!important}
  .pug-even.cols4>.pcard.rv{opacity:1;transform:none!important}
}



/* ============================================================
   M . ZUGANG ZU DEN WERKZEUGEN (Sept. 2026)
   Vier der acht Rechner brauchen Umsatz- oder Kostendaten, vier nicht.
   Ohne Kennzeichnung laeuft jeder Mitleser ohne Zugriff auf diese Zahlen
   in eine stille Sackgasse: ausfuellen, nicht weiterkommen, weg sein.
   Die Zeile steht vor dem ersten Eingabefeld, das Kartenlabel schon bei
   der Auswahl. Dazu die Bruecke: was ein Ergebnis wert ist, wenn man
   misst, aber nicht entscheidet.
   ============================================================ */
.zugang{
  display:inline-flex;align-items:flex-start;gap:9px;
  margin:14px 0 0;font-size:14px;line-height:1.55;color:#9FAAB1;max-width:62ch;
}
.zugang::before{
  content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;
  background:var(--lemon,#C6FF01);
}
.zugang.zugang-eng::before{background:transparent;border:2px solid var(--v2-key-paper);width:9px;height:9px;margin-top:6px}
.gsec.light .zugang,section.light .zugang{color:var(--v2-quiet-paper)}

.bruecke{
  margin:28px 0 0;padding:16px 20px;border-radius:12px;
  background:rgba(198,255,1,.06);border:1px solid rgba(198,255,1,.22);
  font-size:15px;line-height:1.6;color:#C6CBCE;max-width:70ch;
}
.bruecke b{color:#EAF3EE;font-weight:800}
.gsec.light .bruecke,section.light .bruecke{
  background:rgba(76,101,16,.06);border-color:rgba(76,101,16,.26);color:#333D44;
}
.gsec.light .bruecke b,section.light .bruecke b{color:#041615}

/* Kartenlabel in der Werkzeug-Uebersicht */
.wcard .wzugang{
  display:inline-block;margin:10px 0 0;font-size:12px;font-weight:700;
  letter-spacing:.02em;padding:3px 9px;border-radius:999px;
}
.wcard .wzugang.offen{background:rgba(198,255,1,.14);color:#4C6510}
.wcard .wzugang.eng{background:rgba(4,22,21,.07);color:#5A646B;border:1px solid #D5DADE}

/* ============================================================
   N . LABOS-HERO (Sept. 2026)
   Vorher: dieselbe Bildspalte wie auf den acht Problemseiten, eine
   fuenfzeilige Headline und kein einziger Beleg - waehrend jede
   Problemseite eine Zahl im Hero traegt. Jetzt steht das Produkt
   selbst im Hero: die fuenf Stufen mit ihren Saetzen. Der Besucher
   erkennt sich in Stufe 1 und sieht den Weg, statt ein Laborfoto
   zu sehen, das er schon kennt.
   ============================================================ */
.ghero .hero-band{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;
  margin:0 0 26px;font-size:14.5px;color:var(--v2-quiet);
}
.ghero .hero-band b{
  color:var(--lemon,#C6FF01);font-size:20px;font-weight:900;
  font-stretch:112%;margin-right:6px;font-variant-numeric:tabular-nums;
}

.stufenleiter{
  background:linear-gradient(165deg,#0C2822,#061C18);
  border:1px solid #1E3A33;border-radius:24px;padding:24px 22px;
  box-shadow:0 28px 90px rgba(0,0,0,.42);
}
.sl-kopf{
  font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--v2-quiet);margin:0 0 14px;
}
.sl-zeile{
  display:flex;align-items:center;gap:14px;
  padding:12px 12px;border-radius:12px;text-decoration:none;
  border:1px solid transparent;
  transition:background .2s,border-color .2s,transform .2s;
}
.sl-zeile + .sl-zeile{margin-top:2px}
.sl-nr{
  flex:none;width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:#102A24;border:1px solid #244038;
  font-size:14px;font-weight:900;color:var(--v2-quiet);
  font-variant-numeric:tabular-nums;
}
.sl-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sl-txt b{font-size:15.5px;font-weight:800;color:#EAF3EE;line-height:1.25}
.sl-txt i{font-size:13.5px;font-style:normal;color:var(--v2-quiet);line-height:1.4}
/* Stufe 1: da stehen die meisten, deshalb sichtbar markiert */
.sl-zeile.ist-start{background:rgba(198,255,1,.07);border-color:rgba(198,255,1,.28)}
.sl-zeile.ist-start .sl-nr{background:var(--lemon,#C6FF01);border-color:var(--lemon,#C6FF01);color:var(--ink,#041615)}
.sl-zeile.ist-start .sl-txt i{color:#C6CBCE}
.sl-zeile:hover{background:rgba(198,255,1,.05);border-color:#244038;transform:translateX(3px)}
.sl-fuss{margin:14px 2px 0;font-size:13px;line-height:1.5;color:var(--v2-quiet)}
@media(prefers-reduced-motion:reduce){.sl-zeile{transition:none}.sl-zeile:hover{transform:none}}
@media(max-width:760px){
  .stufenleiter{padding:20px 16px}
  .sl-txt i{display:none}
}
/* Headline lief ueber fuenf Zeilen und erdrueckte die Leiter daneben.
   Bewusst an die Leiter gekoppelt, damit die Regel nur diesen Hero trifft. */
.ghero:has(.stufenleiter) h1{font-size:clamp(34px,4.8vw,52px);line-height:1.04;letter-spacing:-.02em}

/* ============================================================
   O . NACHTRAEGE (Inhalts- und Designdurchgang 4. Sept. 2026)
   ============================================================ */
/* Nackte <p> in der schmalen Textspalte hingen ohne Abstand unter dem
   big-p davor (so-rechnen-wir, ki-einstieg, datenchaos). Gleicher Takt
   wie in Abschnitt K. */
.wrap.narrow > p:not([class]){margin-top:32px!important;margin-bottom:0!important}
/* Zwei Quick-Win-Kaesten direkt hintereinander ergaben zwei Lemon-Flaechen
   auf einem Bildschirm (Fachkraefte, Abschnitt Ausbildung). Ein-Lampe-Regel:
   der zweite wird zur dunklen Karte. */
.gsec:not(.light) .qwbox + .qwbox{background:var(--card,#0C2822);color:var(--paper,#EEF0F1);border:1px solid #244038}
.gsec:not(.light) .qwbox + .qwbox .qwt{color:var(--lemon,#C6FF01)}
.gsec:not(.light) .qwbox + .qwbox b{color:var(--paper,#EEF0F1)}
.gsec:not(.light) .qwbox + .qwbox::after{opacity:.08}