/* ERZEUGT von scripts/css-bauen.mjs aus design/richtungen/d/d.css + navi.css.
   Nicht von Hand aendern — Quelle ist die abgenommene Richtung D. (P0-Nachzug) */
/* Karten */
.kk-gruppe{margin-top:44px;display:grid;gap:18px}
@media (min-width:1024px){.kk-gruppe{grid-template-columns:170px minmax(0,1fr);gap:32px;align-items:start}}
.kk-glabel{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);
  padding-top:8px}
/* Mitlaufen darf das Etikett erst ab 1024 px. Darunter verbietet das
   Briefing (§3.2) jede Fixierung. */
@media (min-width:1024px){.kk-glabel{position:sticky;top:92px}}
.kk-reihe{display:grid;gap:14px;margin-top:var(--r-block)}
@media (min-width:600px){.kk-reihe{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.kk-n3{grid-template-columns:repeat(3,minmax(0,1fr))}.kk-n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kk-gruppe .kk-reihe{margin-top:0}
.kk{background:linear-gradient(165deg,var(--elev),rgba(14,22,27,.4));border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px;display:grid;gap:9px;align-content:start;text-decoration:none;
  position:relative;transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
.kk h3{font-size:19px}
.kk p{color:var(--muted);font-size:15px;line-height:1.6}
.kk-a{position:absolute;right:22px;top:24px;color:var(--accent);opacity:.5;transform:translateX(-5px);
  transition:opacity var(--t),transform var(--t)}

/* Zahlen */
.zahlen{margin-top:var(--r-block);display:grid;gap:0}
@media (min-width:600px){.zahlen{grid-template-columns:1fr 1fr;column-gap:40px}}
@media (min-width:1024px){.zahlen-vier{grid-template-columns:repeat(4,1fr);column-gap:32px}}
.zahl{border-top:1px solid var(--soft);padding:28px 24px 28px 0}
.zahl-n{font-size:clamp(44px,6vw,72px);font-weight:600;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums;word-spacing:-.18em;color:var(--accent)}
.zahl-k{color:var(--text)}
.zahl-l{margin-top:12px;color:var(--muted);font-size:15px;max-width:34ch}
.cnt{position:relative}
.cnt-anim{counter-reset:n var(--ziel)}
.cnt-anim::after{content:counter(n)}
.spass-f{margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.gross{margin-top:44px;padding-top:22px;border-top:2px solid var(--accent);max-width:var(--mess)}
.gross-n{font-size:clamp(46px,6.4vw,78px);font-weight:600;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums;word-spacing:-.18em}
.gross-l{margin-top:12px;color:var(--muted);font-size:16px}

/* ------------------------------------------------- Fixierte Scroll-Geschichte
   Die sieben Bausteine. Links die Leiste, die mitlaeuft, rechts die Karte,
   die ausgetauscht wird. Das ist der Effekt, den du am 08.10. abgenommen hast. */
.story{margin-top:48px;position:relative}
.story-halt{display:none}
.stufen{list-style:none;display:grid;gap:14px}
.stufe article{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--elev);padding:22px}
.stufe-n{font-family:var(--mono);font-size:12px;color:var(--accent)}
.stufe h3{font-size:19px;margin-top:8px}
.stufe p{color:var(--muted);font-size:16px;line-height:1.62;margin-top:8px}

/* ------------------------------------------------- Schichten */
.stapel{margin-top:48px}
.stapel-buehne{display:grid;gap:12px}
.lyr{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--elev);padding:20px 22px}
.lyr:first-child{border-color:var(--accent-dim);
  background:linear-gradient(180deg,rgba(198,255,61,.09),rgba(14,22,27,.5))}
.lyr-t{font-weight:600;font-size:17px}
.lyr-b{color:var(--muted);font-size:15px;margin-top:7px;max-width:var(--mess)}

/* ------------------------------------------------- Festgehaltene Buehne
   Grundzustand: ein gewoehnlicher Block. Alles steht da, nichts ist
   versteckt. Die Fixierung kommt erst im Bewegungsteil ab 1024 px
   (Briefing 3.2: keine Fixierung darunter). */
.schau{margin-top:48px}
.schau-buehne{display:grid;gap:12px}
/* Die Ueberschrift steht mit im Bild und bekommt etwas Luft nach unten. */
.schau-buehne>.h2{margin-bottom:4px}
.schau-buehne>.answer,.schau-buehne>.mess-intro{margin-bottom:12px}

/* ------------------------------------------------- Nein-Liste */
.pin{margin-top:48px}
.stmt{list-style:none;display:grid;gap:12px}
.stmt li{font-size:clamp(22px,3.4vw,44px);font-weight:600;letter-spacing:-.03em;color:var(--muted);
  text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:3px}

/* ------------------------------------------------- Grafik */
.chart{margin-top:var(--r-block);border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--elev),rgba(10,16,20,.6));padding:26px}
.chart-t{font-size:17px;font-weight:600}
.chart-u{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:5px;max-width:78ch}
.bars{width:100%;border-collapse:collapse;margin-top:24px}
.bars th{text-align:left;font-weight:400;font-size:15px;padding:6px 18px 6px 0;white-space:nowrap}
.bars td{padding:6px 0}
.bar-rail{display:block;height:22px;background:rgba(0,0,0,.35);border-radius:var(--r-xs);overflow:hidden}
.bar-fill{display:block;height:100%;width:var(--p);border-radius:var(--r-xs);
  background:linear-gradient(90deg,var(--accent-dim),var(--accent))}
.bar-v{font-family:var(--mono);font-size:13px;text-align:right;padding-left:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.chart-note{margin-top:22px;font-size:16px;max-width:var(--mess)}
/* Lief ueber die volle Kartenbreite: bis 178 Zeichen je Zeile, und das
   in der kleinsten Schrift. Beim Zeilenwechsel verliert man die Spur. */
.chart-fn{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.56;max-width:72ch}

/* ------------------------------------------------- Umschalter */
.seg-wrap{margin-top:44px}
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:var(--r-pille);background:var(--elev)}
.seg button{font:inherit;font-size:14px;color:var(--muted);background:none;border:0;border-radius:var(--r-pille);
  padding:10px 20px;cursor:pointer;transition:background var(--t),color var(--t)}
.seg button[aria-selected="true"]{background:var(--accent);color:#06090C;font-weight:500}
.stage{margin-top:22px;display:grid;gap:14px}
/* Schritte innerhalb einer Bereichskarte */
.bereich-ein{color:var(--muted);font-size:16px;margin-top:10px;max-width:var(--mess)}
.bschritte{list-style:none;display:grid;gap:10px;margin-top:20px}
.bschritte li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:baseline;
  font-size:15px;line-height:1.55;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--soft)}
.bschritte li:last-child{border-bottom:0;padding-bottom:0}
.bs-n{font-family:var(--mono);font-size:12px;color:var(--accent)}
.bschritte strong{color:var(--text);font-weight:600}
.ansicht{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--elev);padding:24px;max-width:var(--mess)}
.ansicht p{color:var(--muted);margin-top:9px;font-size:16px}
html.js .ansicht h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
html.js .ansicht[hidden]{display:none}
html:not(.js) .seg{display:none}

/* ------------------------------------------------- Band */
.sec-band{padding:0;border-top:1px solid var(--soft)}
.sec-band>.wrap:first-child{padding-top:80px}
.sec-band>.wrap:last-child{padding-bottom:80px}
@media (min-width:768px){.sec-band>.wrap:first-child{padding-top:120px}.sec-band>.wrap:last-child{padding-bottom:120px}}
.band{margin-top:56px;position:relative}
.band-halt{background:var(--accent);color:#06090C;padding:100px 24px;text-align:center}
@media (min-width:768px){.band-halt{padding:140px 36px}}
.band-w{font-size:clamp(38px,9.5vw,140px);font-weight:600;letter-spacing:-.05em;line-height:.92;padding:24px 0}
.ueber{margin-top:48px;font-size:17px}

/* ------------------------------------------------- Zitat, Abschluss, Fuss */
.quote{margin-top:44px;padding-top:24px;border-top:1px solid var(--border);max-width:62ch;position:relative}
.quote::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:2px;background:var(--accent)}
.quote p{font-size:clamp(19px,2.1vw,26px);line-height:1.42;text-wrap:pretty}
.quote figcaption{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--muted)}
/* `quote-gross` stand seit dem Bau im Markup von /ueber-uns/,
   /geo-optimierung/ und /online-marketing/ — und hatte keine einzige Regel
   in dieser Datei. Das Zitat lief damit auf 26px, die `antwort` daneben auf
   25px: kein Unterschied. Auf /ueber-uns/ ist K-ZITAT laut Textdatei "die
   eine Effekt-Komponente" und traegt die Haltung — dann muss es auch
   schwerer wiegen als der Absatz darueber. 32px gegen 25px ist der
   Unterschied, ohne dass aus dem laengsten der drei Zitate (234 Zeichen auf
   /online-marketing/) ein Plakat wird. */
.quote-gross p{font-size:clamp(21px,2.6vw,32px);line-height:1.3;letter-spacing:-.015em;max-width:34ch}
.quote-gross figcaption{margin-top:16px}
.sec-cta .cta{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--elev),rgba(6,9,12,.7));padding:56px 28px;overflow:hidden}
@media (min-width:768px){.sec-cta .cta{padding:84px 60px}}
.cta-h{margin-top:22px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.ring{position:absolute;right:-140px;top:50%;width:460px;height:460px;transform:translateY(-50%);pointer-events:none}
.ring i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(198,255,61,.2)}
.ring i:nth-child(2){inset:70px;border-color:rgba(43,224,196,.16)}
.ring i:nth-child(3){inset:140px;border-color:rgba(198,255,61,.12)}
.foot{border-top:1px solid var(--soft);padding:60px 0 28px;position:relative;z-index:1}
.foot-in{max-width:1240px;margin:0 auto;padding:0 20px;display:grid;gap:32px}
@media (min-width:768px){.foot-in{padding:0 36px;grid-template-columns:1.3fr repeat(4,1fr)}}
.foot-ort{color:var(--muted);font-size:14px;margin-top:12px}
.foot-col ul{list-style:none;margin-top:12px;display:grid;gap:8px}
.foot-col a{font-size:14px;color:var(--muted);text-decoration:none}
.foot-reg{max-width:1240px;margin:36px auto 0;padding:20px 20px 0;border-top:1px solid var(--soft);
  font-family:var(--mono);font-size:12px;color:var(--muted)}
@media (min-width:768px){.foot-reg{padding:20px 36px 0}}

/* Diese beiden Keyframes werden auch unterhalb von 1024 px benutzt.
   Eine Definition in einem nicht zutreffenden @media existiert fuer
   den Browser nicht, deshalb stehen sie zusaetzlich hier oben
   (Vier-Augen-Pruefung 11.10., Befund B7). */
@keyframes seqtext{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes einrein{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* ============================================================
   B E W E G U N G
   Alles scroll-gebunden. Grundzustand ist der sichtbare Endzustand.
   ============================================================ */
@property --n{syntax:"<integer>";initial-value:0;inherits:false}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){

    /* ---- Das Farbfeld wandert ueber die ganze Seitenlaenge.
       Zeitachse ist `scroll(root)`, also der Scrollfortschritt des
       Dokuments — kein Listener, kein requestAnimationFrame. Bewegt werden
       ausschliesslich `transform` und `opacity`: beides laeuft auf der
       Grafikkarte, waehrend die Live-Fassung heute bei jedem Bild fuenf
       Radialverlaeufe neu zeichnen muss.
       Die fuenf Flaechen loesen einander ab, statt gemeinsam zu wandern —
       dadurch wechselt der Ton von oben nach unten, statt nur zu driften. */
    /* Nur auf den Seiten mit Sequenz. Die Farbreise haengt am Scrollweg
       der jeweiligen Seite, und der ist sehr verschieden: /seo/ hat
       18.929px, /geo-seo-check/ 4.047px, /kontakt/ 2.639px (gemessen
       12.10.). Bei gleicher Scroll-Strecke ist die Reise auf einer kurzen
       Seite fuenfmal so schnell — auf den beiden Funktionsseiten blueht
       der Verlauf innerhalb eines Bildschirms voll auf und passte nicht
       zum Rest. Sie bleiben jetzt im Anfangsbild stehen, also in genau
       dem Ton, mit dem jede Seite oben beginnt. Das passt zu ihrem
       eigenen Hinweis "ruhig halten, keine Animation". */
    .feld-a{animation:feldA linear both;animation-timeline:scroll(root)}
    .feld-b{animation:feldB linear both;animation-timeline:scroll(root)}
    .feld-c{animation:feldC linear both;animation-timeline:scroll(root)}
    .feld-d{animation:feldD linear both;animation-timeline:scroll(root)}
    .feld-e{animation:feldE linear both;animation-timeline:scroll(root)}
    /* Auf den Seiten ohne Sequenz laeuft dieselbe Farbreise, aber nach
       einer festen Strecke statt nach der Seitenlaenge. Grund: `scroll(root)`
       verteilt die Reise immer ueber den ganzen Scrollweg der Seite, und der
       ist sehr verschieden — Startseite 14.302px, /geo-seo-check/ 4.047px,
       /geo-seo-check/gesendet/ 1.724px (gemessen 12.10.). Auf einer kurzen
       Seite war die Reise dadurch in einem Bildschirm durch.
       14.000px ist die Strecke der Startseite, gerundet. Damit zeigt jede
       dieser Seiten nach X gescrollten Pixeln denselben Ton wie die
       Startseite nach X Pixeln — Torstens Vorgabe vom 12.10.:
       "schau dir die Startseite an, da ist es korrekt".
       Die Seiten MIT Sequenz bleiben unveraendert; sie sind abgenommen. */
    body:not([data-seq="1"]) .feld-a,
    body:not([data-seq="1"]) .feld-b,
    body:not([data-seq="1"]) .feld-c,
    body:not([data-seq="1"]) .feld-d,
    body:not([data-seq="1"]) .feld-e{animation-range:0 14000px}
    /* Oben praesent, zieht nach unten weg und verliert an Kraft. */
    @keyframes feldA{from{transform:translate3d(0,0,0) scale(1);opacity:1}
                     45%{transform:translate3d(10vw,26vh,0) scale(1.3);opacity:.6}
                     to{transform:translate3d(18vw,48vh,0) scale(1.6);opacity:.15}}
    /* Kommt von rechts herein, haelt die Mitte, geht wieder. */
    @keyframes feldB{from{transform:translate3d(12vw,-8vh,0) scale(.85);opacity:.45}
                     40%{transform:translate3d(-4vw,2vh,0) scale(1.15);opacity:1}
                     to{transform:translate3d(-22vw,-30vh,0) scale(1.45);opacity:.2}}
    /* Steigt aus der Mitte auf und traegt den mittleren Seitenteil. */
    @keyframes feldC{from{transform:translate3d(0,22vh,0) scale(.75);opacity:0}
                     35%{opacity:.55}
                     65%{transform:translate3d(-6vw,-20vh,0) scale(1.2);opacity:1}
                     to{transform:translate3d(-12vw,-62vh,0) scale(1.35);opacity:.35}}
    /* Taucht erst im unteren Drittel auf — der Farbwechsel der Seite. */
    @keyframes feldD{from{transform:translate3d(14vw,24vh,0) scale(.7);opacity:0}
                     55%{opacity:0}
                     to{transform:translate3d(-8vw,-58vh,0) scale(1.4);opacity:1}}
    /* Kommt zuletzt von links unten und schliesst die Seite ab. */
    @keyframes feldE{from{transform:translate3d(-10vw,20vh,0) scale(.8);opacity:0}
                     70%{opacity:0}
                     to{transform:translate3d(10vw,-66vh,0) scale(1.3);opacity:.9}}

    /* Rahmenlinie am Kopf erscheint erst beim Scrollen. */
    .nav{animation:navlinie linear both;animation-timeline:scroll(root);animation-range:0 160px}
    @keyframes navlinie{from{border-bottom-color:transparent}to{border-bottom-color:var(--soft)}}

    /* Ueberschriften ziehen hinter einer Maske auf. H1 nie (K26). */
    .maske{animation:maske linear both;animation-timeline:view();animation-range:entry 12% entry 62%}
    @keyframes maske{from{clip-path:inset(0 100% -.2em 0);opacity:.2}
                     to{clip-path:inset(0 -.2em -.2em 0);opacity:1}}

    /* Zaehler */
    .cnt-anim{animation:zaehl linear both;animation-timeline:view();animation-range:entry 15% cover 38%;
      counter-reset:n var(--n)}
    @keyframes zaehl{from{--n:0}to{--n:var(--ziel)}}

    /* Balken wachsen nacheinander. */
    .bar-fill{width:var(--p);transform-origin:left;animation:wachs linear both;animation-timeline:view();
      animation-range:entry calc(8% + var(--i) * 5%) cover calc(28% + var(--i) * 5%)}
    /* Emil: Breite animieren loest in jeder Zeile ein Layout aus.
       scaleX macht dasselbe Bild auf der Grafikkarte. Der Balken steht
       dafuer auf voller Breite und wird von links aufgezogen. */
    @keyframes wachs{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    /* Karten steigen gestaffelt auf. */
    .kk{animation:kkrein linear both;animation-timeline:view();
      animation-range:entry calc(4% + var(--i) * 4%) cover calc(26% + var(--i) * 4%)}
    @keyframes kkrein{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}

    /* Zahlen-Zeilen ebenso. */
    .zahl{animation:kkrein linear both;animation-timeline:view();
      animation-range:entry calc(6% + var(--i) * 6%) cover calc(28% + var(--i) * 6%)}

  }
}

/* ---------------------------------------------------------------------
   Ab 1024 px kommt die Tiefe dazu: Fixierung, Parallax, 3D.
   Darunter bleibt alles ruhig (Briefing §3.2).
   --------------------------------------------------------------------- */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){

    /* ---- Hero: die Karte baut sich auf und kippt beim Verlassen weg.
       H1, Einleitung und Knoepfe ruehren sich nicht. */
    .hero{view-timeline-name:--hero;timeline-scope:--hero}
    .hero-vis{animation:visweg linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
    @keyframes visweg{from{transform:none;opacity:1}
                      to{transform:translateY(-70px) rotateX(9deg) scale(.94);opacity:.5}}
    .vis-balken .bar{animation:barauf linear both;animation-timeline:--hero;
      animation-range:entry 100% cover 22%}
    @keyframes barauf{from{transform:scaleX(0);transform-origin:left}to{transform:none}}
    .vis-chips li{animation:chipan linear both;animation-timeline:--hero;animation-range:entry 100% cover 26%}
    @keyframes chipan{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}

    /* ---- Die sieben Bausteine als fixierte Geschichte.
       Links haftet die Leiste, der laufende Eintrag leuchtet.
       Rechts wandern die Karten durch. Kein Hijacking: der Nutzer
       scrollt ganz normal, nur der linke Block bleibt stehen. */
    .story{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px;
      timeline-scope:--s0,--s1,--s2,--s3,--s4,--s5,--s6}
    .story-halt{display:block;position:relative}
    .rail{position:sticky;top:calc(var(--vh) * .5 - 190px);list-style:none;display:grid;gap:2px;
      border-left:1px solid var(--border);padding-left:0}
    .rail li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;
      padding:11px 16px;font-size:15px;color:var(--muted);border-left:2px solid transparent;margin-left:-1px;
      transition:none}
    .rail-n{font-family:var(--mono);font-size:12px}
    .stufen{display:grid;gap:0}
    .stufe{height:var(--vh);display:flex;align-items:center}
    .stufe article{width:100%;padding:30px 32px;
      background:linear-gradient(165deg,var(--elev),rgba(6,9,12,.6));
      box-shadow:0 20px 44px -26px rgba(0,0,0,.8)}
    .stufe:nth-child(1){view-timeline-name:--s0}
    .stufe:nth-child(2){view-timeline-name:--s1}
    .stufe:nth-child(3){view-timeline-name:--s2}
    .stufe:nth-child(4){view-timeline-name:--s3}
    .stufe:nth-child(5){view-timeline-name:--s4}
    .stufe:nth-child(6){view-timeline-name:--s5}
    .stufe:nth-child(7){view-timeline-name:--s6}
    .stufe article{animation:stufe linear both;animation-range:cover 22% cover 72%}
    .stufe:nth-child(1) article{animation-timeline:--s0}
    .stufe:nth-child(2) article{animation-timeline:--s1}
    .stufe:nth-child(3) article{animation-timeline:--s2}
    .stufe:nth-child(4) article{animation-timeline:--s3}
    .stufe:nth-child(5) article{animation-timeline:--s4}
    .stufe:nth-child(6) article{animation-timeline:--s5}
    .stufe:nth-child(7) article{animation-timeline:--s6}
    @keyframes stufe{
      from{opacity:0;transform:translateY(70px) scale(.95)}
      26%{opacity:1;transform:none}
      84%{opacity:1;transform:none}
      to{opacity:0;transform:translateY(-70px) scale(.95)}
    }
    .rail li{animation:railan linear both;animation-range:cover 22% cover 72%}
    .rail li:nth-child(1){animation-timeline:--s0}
    .rail li:nth-child(2){animation-timeline:--s1}
    .rail li:nth-child(3){animation-timeline:--s2}
    .rail li:nth-child(4){animation-timeline:--s3}
    .rail li:nth-child(5){animation-timeline:--s4}
    .rail li:nth-child(6){animation-timeline:--s5}
    .rail li:nth-child(7){animation-timeline:--s6}
    @keyframes railan{
      from{color:var(--muted);border-left-color:transparent;background:transparent}
      30%{color:var(--accent);border-left-color:var(--accent);background:rgba(198,255,61,.08)}
      70%{color:var(--accent);border-left-color:var(--accent);background:rgba(198,255,61,.08)}
      to{color:var(--muted);border-left-color:transparent;background:transparent}
    }

    /* ---- Schichten: bauen sich im festgehaltenen Bild wirklich auf. */
    .stapel{height:calc(var(--vh) * 2.8);view-timeline-name:--stk}
    .stapel-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
    .stapel-buehne{width:100%;perspective:1200px;transform-style:preserve-3d;gap:16px}
    .lyr{animation:lyrauf linear both;animation-timeline:--stk;
      animation-range:contain calc(var(--i) * 22%) contain calc(var(--i) * 22% + 30%)}
    @keyframes lyrauf{
      from{opacity:0;transform:translateY(110px) rotateX(26deg) scale(.9)}
      to{opacity:1;transform:none}
    }

    /* ---- Umschalter: die Leiste haftet, der Inhalt laeuft darunter durch.
       Ein festgehaltener Block scheidet hier aus — die Ansichten sind
       laenger als ein Bildschirm, und kuerzen koennen wir sie nicht
       (Texte 1:1, Rang 2). Die haftende Leiste loest dasselbe Problem:
       man sieht beim Lesen immer, in welchem der drei Bereiche man ist.
       Erst ab 1024 px, darunter verbietet das Briefing die Fixierung. */
    body[data-seq="1"] main>.sec-tabs>.wrap>.h2{margin-bottom:6px}

    /* ---- Festgehaltene Buehne: der Block steht im Bild, die Teile
       treffen nacheinander ein. Derselbe Scrollweg-Schluessel wie bei der
       Nein-Liste: er richtet sich nach der Zahl der Teile, damit eine
       Buehne mit zwei Karten nicht so viel Rad kostet wie eine mit sieben.
       n=1 -> 1,3 Bildschirme  ·  n=5 -> 2,5. */
    /* Der festgehaltene Weg ist `Hoehe minus ein Bildschirm`. Eine feste
       Prozentstaffel verteilt sich darauf nicht: bei einem einzigen Teil
       war nach 70 px alles vorbei und der Block stand danach 1.100 px
       still. Deshalb teilt sich die Spanne durch --n — jedes Teil bekommt
       seinen Anteil, egal wie viele es sind. 1,4 statt 1,0 laesst die
       Teile einander leicht ueberlappen. */
    /* Hoehe und Haftung stehen nicht mehr hier, sondern je Stufe weiter
       unten — siehe "Buehne: nur halten, wenn sie ins Fenster passt".
       Ohne Stufe gibt es keine Zeitachse --schau; die Teile stehen dann
       einfach da (Grundzustand gleich Endzustand, K26). */
    .schau-buehne{width:100%;perspective:1200px;transform-style:preserve-3d;gap:16px}
    /* Auf der Buehne regelt das Raster die Abstaende. Der eigene
       Aussenabstand der Kartenreihe kam obendrauf und machte die Buehne
       44px hoeher als noetig — auf /referenzen/ war das der Unterschied
       zwischen Stufe 920 (haelt auf kaum einem Laptop) und Stufe 880
       (haelt ab 880px Fensterhoehe). Gemessen 13.10. */
    .schau-buehne .kk-reihe,.schau-buehne .zahlen{margin-top:0}
    /* Nur die Teile selbst laufen, nicht ihre Huellen — sonst zuendet
       derselbe Inhalt zweimal. Die Karten koennen eine oder zwei Ebenen
       tief liegen (mit oder ohne Gruppenetikett), deshalb Nachfahren-
       Auswahl statt fester Kette. */
    .schau-buehne .kk,.schau-buehne .zahl,.schau-buehne .quote,.schau-buehne .kk-glabel{
      animation:schauauf linear both;animation-timeline:--schau;
      animation-range:contain calc(var(--i, 0) * var(--schritt))
                      contain calc(var(--i, 0) * var(--schritt) + var(--fenster))}
    @keyframes schauauf{
      from{opacity:0;transform:translateY(90px) rotateX(20deg) scale(.94)}
      to{opacity:1;transform:none}
    }
    /* Der Zaehler laeuft sonst auf seiner EIGENEN Sichtbarkeit und war
       deshalb fertig, bevor sein Kasten ueberhaupt da war (/webdesign/:
       Zahl voll bei 1.138px, Kasten erst bei 1.438px, gemessen 12.10.).
       Auf der Buehne haengt er jetzt an derselben Achse und startet dort,
       wo sein Kasten fertig ist. --i erbt er vom Kasten. */
    .schau-buehne .cnt-anim{animation:zaehl linear both;animation-timeline:--schau;
      animation-range:contain calc(var(--i, 0) * var(--schritt) + var(--fenster))
                      contain calc(var(--i, 0) * var(--schritt) + var(--fenster) * 2)}

    /* ---- Sequenz (Vergleichsfassung, `body[data-seq="1"]`).
       Die Abschnitte bleiben beim Scrollen auf der Stelle stehen und loesen
       einander im Bild ab; die Bewegung macht der Verlauf im Hintergrund.
       Jeder Abschnitt ist 1,3 Bildschirme hoch — das ist die Schwelle, ab
       der `pinmass` Leerlauf meldet. Sein Inhalt haftet dabei 0,3
       Bildschirme lang oben.
       Die Zeitachse haengt am Abschnitt selbst, nicht am haftenden Kind:
       ein fixiertes Element friert seine eigene view()-Achse ein.
       Ausgenommen sind Hero, Abschluss und alles, was schon einen eigenen
       festgehaltenen Block hat — sonst halten zwei Dinge gegeneinander.
       ACHTUNG: sieben Abschnitte = sieben feste Bloecke. SEITENARCHITEKTUR
       §4 erlaubt der Startseite drei. Diese Fassung verletzt K27 bewusst
       und ist nur zum Ansehen; sie ist nicht die Voreinstellung. */
    body[data-seq="1"] main>.sec-ruhig{
      min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    body[data-seq="1"] main>.sec-ruhig>.wrap{
      position:sticky;top:0;min-height:var(--vh);display:flex;flex-direction:column;justify-content:center;
      animation:seqauf linear both;animation-timeline:--q}
    /* Der erste Versuch hielt nur 0,3 Bildschirme - die Seite bewegte sich
       die meiste Zeit sichtbar mit, und das Gefuehl kam nicht an. Jetzt
       haelt der Abschnitt 1,1 Bildschirme lang, und waehrend er haelt
       bewegt sich *nichts*: nur an den Raendern wird auf- und abgeblendet.
       Das ist der Unterschied zwischen "ruhig" und "steht still". */
    /* Das Ausblenden laeuft ueber die letzten 36 Prozent des gehaltenen
       Wegs statt ueber 14. Dafuer ist die Staffel der Textbloecke nach
       vorn gezogen (fertig bei 58 %), sonst wuerde ein Block ausblenden,
       der gerade erst angekommen ist. */
    @keyframes seqauf{
      0%{opacity:0;transform:translateY(22px)}
      14%{opacity:1;transform:none}
      84%{opacity:1;transform:none}
      100%{opacity:0;transform:translateY(-26px)}
    }
    /* Die Ueberschrift steht die ganze Zeit, die Textbloecke kommen beim
       Scrollen nacheinander dazu. Genau das macht den Stillstand spuerbar:
       es passiert etwas, ohne dass sich die Seite bewegt.
       Bewegt werden nur opacity und transform — beide aendern das Layout
       nicht. Die Bloecke stehen also von Anfang an an ihrem Platz, und die
       Ueberschrift darueber rutscht nicht, wenn sie erscheinen. */
    body[data-seq="1"] main>.sec-ruhig>.wrap>.h2{animation:none}
    /* Jedes Kind des Abschnitts ausser der Ueberschrift wird gestaffelt —
       nicht nur die bekannten Klassen. Sonst steht ein Knopf oder ein
       Hinweis schon da, waehrend der Text darueber noch fehlt (gemessen
       11.10. am Terminknopf auf /leistungen/). Huellen, deren Kinder
       selbst laufen, sind ausgenommen, sonst blendet alles doppelt. */
    body[data-seq="1"] main>.sec-ruhig>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.schau):not(.answer):not(.quote):not(.termin):not(.buttons),
    body[data-seq="1"] main>.sec-ruhig>.wrap .mess>*:not(.pop),
    body[data-seq="1"] main>.sec-ruhig>.wrap .kk,
    body[data-seq="1"] main>.sec-ruhig>.wrap .kk-glabel,
    body[data-seq="1"] main>.sec-ruhig>.wrap .zahl{
      animation:seqtext linear both;animation-timeline:--q;
      animation-range:contain 45% contain 56%}
    @keyframes seqtext{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
    /* Die Staffel als feste Stufen. CSS kann die Geschwister-Nummer nicht
       rechnen, deshalb je Position eine Regel. */
    body[data-seq="1"] main>.sec-ruhig>.wrap>.answer,
    body[data-seq="1"] main>.sec-ruhig>.wrap .answer{
      animation:seqtext linear both;animation-timeline:--q;
      animation-range:contain 36% contain 47%}
    body[data-seq="1"] main>.sec-ruhig>.wrap .mess>:nth-child(1),
    body[data-seq="1"] main>.sec-ruhig>.wrap .kk:nth-child(1),
    body[data-seq="1"] main>.sec-ruhig>.wrap .kk-glabel,
    body[data-seq="1"] main>.sec-ruhig>.wrap .seg-wrap,
    body[data-seq="1"] main>.sec-ruhig>.wrap .zahl:nth-child(1){animation-range:contain 45% contain 56%}
    body[data-seq="1"] main>.sec-ruhig>.wrap .mess>:nth-child(2),
    body[data-seq="1"] main>.sec-ruhig>.wrap .kk:nth-child(2),
    body[data-seq="1"] main>.sec-ruhig>.wrap .zahl:nth-child(2){animation-range:contain 50% contain 61%}
    body[data-seq="1"] main>.sec-ruhig>.wrap .mess>:nth-child(3),
    body[data-seq="1"] main>.sec-ruhig>.wrap .kk:nth-child(3),
    body[data-seq="1"] main>.sec-ruhig>.wrap .zahl:nth-child(3){animation-range:contain 55% contain 66%}
    body[data-seq="1"] main>.sec-ruhig>.wrap .mess>:nth-child(4),
    body[data-seq="1"] main>.sec-ruhig>.wrap .kk:nth-child(4),
    body[data-seq="1"] main>.sec-ruhig>.wrap .zahl:nth-child(4){animation-range:contain 59% contain 70%}
    body[data-seq="1"] main>.sec-ruhig>.wrap .mess>:nth-child(5),
    body[data-seq="1"] main>.sec-ruhig>.wrap .kk:nth-child(5){animation-range:contain 62% contain 73%}
    body[data-seq="1"] main>.sec-ruhig>.wrap .mess>:nth-child(n+6),
    body[data-seq="1"] main>.sec-ruhig>.wrap .kk:nth-child(n+6){animation-range:contain 64% contain 75%}
    body[data-seq="1"] main>.sec-ruhig>.wrap>.quote,
    body[data-seq="1"] main>.sec-ruhig>.wrap .quote{
      animation:seqtext linear both;animation-timeline:--q;
      animation-range:contain 66% contain 77%}
    body[data-seq="1"] main>.sec-ruhig>.wrap>.termin,
    body[data-seq="1"] main>.sec-ruhig>.wrap>.buttons{
      animation:seqtext linear both;animation-timeline:--q;
      animation-range:contain 68% contain 79%}

    /* ---- Nein-Liste: bildschirmfuellend, festgehalten,
       jedes Wort zuendet auf und wird dann gestrichen. */
    /* Der Scrollweg richtet sich nach dem Inhalt, nicht nach einer festen
       Zahl. Vorher kostete eine einzelne Aussage genauso viel Drehen am Rad
       wie eine Liste aus sechs Wörtern — 2,8 Bildschirme, in denen nichts
       passiert. --n steht im Markup und zählt die Schritte.
       n=1 → 1,3 Bildschirme · n=6 → 2,8 (wie auf der GEO-Seite abgenommen). */
    .pin{height:calc(var(--vh) * (1 + var(--n) * .3));view-timeline-name:--stmt}
    /* Ein Pin ohne Wortliste traegt zwei Teile — Aussage und Quellzeile —
       zaehlt aber als ein Schritt. Mit 1,3 Bildschirmen haelt er nur rund
       270px, und zwei Teile in 270px kommen gemeinsam an (gemessen
       12.10. auf /seo/, /webdesign/, /webentwicklung/, /wartung/).
       1,9 Bildschirme geben jedem Teil etwa 0,95 — pinmass zaehlt die
       zwei Teile jetzt mit, sonst meldete es hier Leerlauf. Der Pin auf
       /online-marketing/ hat keine Quellzeile und bleibt deshalb kurz,
       sonst waere ER der Leerlauf. */
    .pin[data-teile="2"]{height:calc(var(--vh) * 1.9)}
    .pin-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
    .stmt{width:100%;gap:4px}
    .stmt li{animation:zuend linear both;animation-timeline:--stmt;
      animation-range:contain calc(var(--i) * 15%) contain calc(var(--i) * 15% + 22%)}
    @keyframes zuend{
      from{color:var(--muted);text-decoration-color:transparent;transform:translateX(-14px);opacity:.4}
      45%{color:var(--text);text-decoration-color:transparent;transform:none;opacity:1}
      to{color:var(--muted);text-decoration-color:var(--accent);transform:none;opacity:1}
    }

    /* ---- Band: der Farbumschlag faehrt von unten ueber das Bild. */
    .band{height:calc(var(--vh) * (.28 + var(--n) * 1.02));view-timeline-name:--band}
    .band-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center;justify-content:center;
      padding:0 36px;animation:bandauf linear both;animation-timeline:--band;animation-range:cover 2% cover 24%}
    @keyframes bandauf{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

    /* ---- Ringe am Abschluss drehen sich mit dem Scrollen, nicht mit der Uhr. */
    .ring i{animation:ringdreh linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .ring i:nth-child(2){animation-name:ringdreh2}
    @keyframes ringdreh{from{transform:rotate(0) scale(.9)}to{transform:rotate(44deg) scale(1.06)}}
    @keyframes ringdreh2{from{transform:rotate(0) scale(1.05)}to{transform:rotate(-38deg) scale(.92)}}
  }
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

/* ============================================================
   Anregungen Torsten, 10.10. abends
   ============================================================ */

/* --- 1 · Die Codezeilen im Hero werden getippt -------------------------
   Zeitgesteuert, laeuft genau einmal, zusammen unter 5 Sekunden (K26).
   Ohne Animation stehen beide Zeilen sofort vollstaendig da. */
.vis-code span{display:block;white-space:nowrap}
.vis-code .caret{display:none}

@media (prefers-reduced-motion:no-preference){
  /* Emil: nur transform und opacity animieren. Die Schreibmaschine lief
     ueber width und loeste damit bei jedem Schritt ein Layout aus.
     clip-path sieht gleich aus und laeuft auf der Grafikkarte. */
  .vis-code span{width:calc(var(--ch) * 1ch)}
  .vis-code .ok{animation:tippen 1.1s steps(15) both}
  .vis-code .nb{animation:tippen 1.2s steps(17) both;animation-delay:1.3s}
  @keyframes tippen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  /* Der Schreibbalken laeuft mit und hoert dann auf. Kein Dauerblinken. */
  .vis-code span::after{content:"";display:inline-block;width:.6ch;height:1.05em;
    background:currentColor;vertical-align:-.18em;margin-left:.1ch;
    animation:balken .5s steps(1) 5 both}
  .vis-code .ok::after{animation-delay:1.1s}
  .vis-code .nb::after{animation-delay:2.5s}
  @keyframes balken{0%,49%{opacity:1}50%,100%{opacity:0}}
}

/* --- 2 · Die Ueberschriften gehen von Grau auf Weiss -------------------
   Ersetzt den Maskenaufzug. Der Text ist die ganze Zeit vollstaendig da,
   es aendert sich nur die Farbe. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .maske{animation:aufhellen linear both;animation-timeline:view();
      animation-range:entry 20% entry 80%;clip-path:none}
    @keyframes aufhellen{from{color:#56646A}to{color:var(--text)}}
  }
}

/* --- 3 · Der Kreis am Abschluss schlaegt --------------------------------
   Drei Ringe laufen nacheinander nach aussen, an den Scrollweg gebunden:
   wer scrollt, sieht den Schlag. Keine Endlosschleife. */
.sec-cta .ring{right:-120px;width:520px;height:520px}
.ring i{border-color:rgba(198,255,61,.22)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .ring i{animation:schlag linear both;animation-timeline:view();
      animation-range:entry 0% cover 70%}
    .ring i:nth-child(1){animation-range:entry 0% cover 60%}
    .ring i:nth-child(2){animation-range:entry 8% cover 68%}
    .ring i:nth-child(3){animation-range:entry 16% cover 76%}
    @keyframes schlag{
      from{transform:scale(.3);opacity:0}
      30%{opacity:1}
      to{transform:scale(1.12);opacity:.25}
    }
    /* Der Knopf im Abschluss atmet einmal mit. */
    .sec-cta .btn-primary{animation:atmen linear both;animation-timeline:view();
      animation-range:entry 20% cover 60%}
    @keyframes atmen{from{box-shadow:0 0 0 0 rgba(198,255,61,0)}
                     60%{box-shadow:0 0 0 14px rgba(198,255,61,.14)}
                     to{box-shadow:0 0 0 0 rgba(198,255,61,0)}}
  }
}

/* --- 4 · Die Schlagzeile -----------------------------------------------
   Entscheidung Torsten 10.10.: RUHIG. Die H1 selbst ruehrt sich nicht,
   unter ihr faehrt eine Lime-Linie auf. Damit bleibt K26 unangetastet
   ("H1 und Hero-Einleitung ohne Animation") und das Briefing braucht
   keinen Nachtrag. Die verworfene Fassung "bewegt" (Schriftstaerke laeuft
   wortweise durch die Zeile) ist entfernt; sie steht in d/README.md.
   -------------------------------------------------------------------- */
.h1 .w{display:inline-block}
.satz-t .w{display:inline-block}
.h1-linie{display:block;height:3px;width:min(260px,42%);background:var(--accent);
  margin-top:26px;transform-origin:left}

@media (prefers-reduced-motion:no-preference){
  .h1-linie{animation:linieauf .9s var(--ease) .15s both}
  @keyframes linieauf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* Nachschaerfen: der Schlag am Abschluss war zu zaghaft. Groesser,
   staerker, und die Ringe sitzen jetzt hinter dem Knopfbereich. */
.sec-cta .cta{isolation:isolate}
.sec-cta .ring{right:auto;left:46%;top:50%;width:min(680px,72vw);height:min(680px,72vw);
  transform:translate(-10%,-50%);z-index:-1}
.ring i{border-width:1px;border-color:rgba(198,255,61,.3)}
.ring i:nth-child(2){inset:22%;border-color:rgba(43,224,196,.26)}
.ring i:nth-child(3){inset:44%;border-color:rgba(198,255,61,.34)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes schlag{
      from{transform:scale(.18);opacity:0}
      22%{opacity:.95}
      to{transform:scale(1.18);opacity:.3}
    }
  }
}

/* Korrektur: view() auf einem Inline-Element und auf absolut gesetzten
   Ringen lief nicht mit. Beide haengen jetzt an der Zeitachse ihres
   Abschnitts, die zuverlaessig mitlaeuft. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .sec{view-timeline-name:--sek}
    .maske{animation:aufhellen linear both;animation-timeline:--sek;
      animation-range:entry 42% entry 86%;clip-path:none}
    .hero .maske{animation:none}

    .sec-cta{view-timeline-name:--cta}
    .ring i{animation:schlag linear both;animation-timeline:--cta}
    .ring i:nth-child(1){animation-range:entry 30% entry 92%}
    .ring i:nth-child(2){animation-range:entry 38% cover 6%}
    .ring i:nth-child(3){animation-range:entry 46% cover 14%}
    .sec-cta .btn-primary{animation:atmen linear both;animation-timeline:--cta;
      animation-range:entry 50% cover 18%}
  }
}

/* Der Schlag darf kraeftiger sein. */
.ring i{border-color:rgba(198,255,61,.5)}
.ring i:nth-child(2){border-color:rgba(43,224,196,.42)}
.ring i:nth-child(3){border-color:rgba(198,255,61,.58);background:radial-gradient(circle,rgba(198,255,61,.09),transparent 68%)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    @keyframes schlag{
      from{transform:scale(.14);opacity:0}
      18%{opacity:1}
      to{transform:scale(1.2);opacity:.34}
    }
  }
}

/* ============================================================
   Anregungen Torsten zur GEO-Seite, 10.10.
   ============================================================ */

/* --- 1 · "Wie Deutschland heute sucht": die Prozentwerte zaehlen mit,
   Zeile fuer Zeile, zusammen mit dem wachsenden Balken. ---------------- */
.bar-v .cnt{position:relative}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .bars .cnt-anim{animation:zaehl linear both;animation-timeline:view();
      animation-range:entry calc(8% + var(--i) * 5%) cover calc(28% + var(--i) * 5%);
      counter-reset:n var(--n)}
  }
}
.bars tr{--i:0}

/* --- 2 · Nein-Liste: Frage, Antwort und Streichung in einem Bild ------- */
/* VERWORFEN: Ueberschrift festkleben. Ausprobiert am 12.10., weil nach
   dem Pin rund zwei Bildschirme ohne Ueberschrift im Bild folgen. Eine
   klebende H2 braucht einen Hintergrund, sonst laeuft der Text darunter
   durch — und dieser Hintergrund ist ein dunkles Rechteck in Textbreite
   auf einem Farbverlauf. Es deckte die Ueberschriften der ersten zwei
   Kacheln ab und sah auch am Abschnittsanfang wie ein Fremdkoerper aus.
   Die Ueberschrift laeuft deshalb mit, wie in jedem anderen nicht
   festgehaltenen Abschnitt. */

/* Eine Spalte, wenn im Halt nur die herausgestellte Aussage steht:
   Ueberschrift und Antwort stehen dann seit 12.10. am Abschnittsanfang.
   Mit Streichliste (`.pin-zwei`) bleibt die Zweispalter-Form — Frage
   links, Liste rechts; das Gegenueber ist dort das Bild. */
.pin-grid{display:grid;gap:28px;grid-template-columns:minmax(0,1fr);text-align:left}
.pin-frage .h2{margin:0}
.pin-frage .answer{margin-top:var(--r-eng);max-width:40ch}
.stmt li{font-size:clamp(20px,2.7vw,34px)}
@media (min-width:1024px){
  /* `width:100%`, aber keine eigene Breite und kein eigenes Polster mehr:
     Der Pin steht in `.wrap`, und das setzt den Satzspiegel schon. Beides
     doppelt ergab 36px Versatz — die Aussage stand weiter rechts als die
     Ueberschrift darueber. Ohne `width:100%` schrumpft das Flex-Kind
     ausserdem auf die Textbreite und steht mittig (12.10.). */
  .pin-grid{width:100%;align-items:center}
  .pin-zwei .pin-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:64px}
  .stmt li{font-size:clamp(22px,2.3vw,34px)}
}

/* --- 3 · Band: die drei Antworten erscheinen im Band, nicht darunter --- */
.band-in{max-width:1240px;margin:0 auto;width:100%}
.band-halt{text-align:left;align-items:center;padding-block:48px}
.band-w{text-align:left;font-size:clamp(38px,7.6vw,104px);padding:0}
.ueber{margin-top:22px;font-size:clamp(16px,1.5vw,19px);color:#1b2608;max-width:46ch}
.band-karten{margin-top:28px;display:grid;gap:14px}
@media (min-width:768px){.band-karten{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.bk{border:1px solid rgba(10,16,4,.26);border-radius:var(--r-lg);padding:18px 20px;
  background:rgba(255,255,255,.14)}
.bk h3{font-size:17px;color:#0A1004}
.bk p{margin-top:7px;font-size:14.5px;line-height:1.55;color:#1b2608}
.bk .q{color:#1b2608;border-color:rgba(10,16,4,.3)}

@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* Mehr Weg, damit alles nacheinander im Bild passieren kann. */
    /* dito fürs Band: n=1 → 1,35 Bildschirme · n=3 → 3,4 (GEO unverändert). */
    .band{height:calc(var(--vh) * (.28 + var(--n) * 1.02))}
    .band-halt{animation-range:cover 1% cover 14%}

    /* Das grosse Wort faehrt gross herein und raeumt dann nach oben. */
    /* Nur das grosse Einzelwort waechst beim Hereinfahren. Wo im Band
       ein ganzer Satz steht (.band-satz), wuerde die Schriftgroesse aus
       dem Keyframe die ruhige Groesse ueberschreiben — Animationen
       schlagen normale Angaben. Deshalb getrennt. */
    /* `cover`, nicht `contain`. Mit `contain` stand das grosse Wort 900px
       lang bei 0,2 Deckkraft und sprang dann auf 1 — gemessen 12.10., die
       Ursache habe ich nicht aufgeklaert (bei `.schau` staffelt `contain`
       einwandfrei, die Begruendung "entartet, weil hoeher als das Fenster"
       stimmt also nicht). Mit `cover` ist die Strecke nachrechenbar: sie
       ist `Hoehe + ein Bildschirm` lang und beginnt, wenn das Band ins
       Bild kommt. Der Farbumschlag nutzt ohnehin `cover 2% bis 24%`,
       die Teile reihen sich dahinter. Jede Stufe unten ist gemessen. */
    .band-w:not(.band-satz){transform-origin:left bottom;animation:bandwort2 linear both;animation-timeline:--band;
      animation-range:cover 24% cover 40%}
    /* Der ganze Satz im Band waechst beim Scrollen in seine Groesse hinein.
       Wunsch Torsten, 12.10. ("bitte mit dem scrollen groesser werden
       lassen"). `scale`, nicht `font-size`: eine Schriftgroesse rechnet bei
       jedem Bild das Layout neu — derselbe Grund, aus dem das grosse
       Bandwort schon auf `scale` umgestellt wurde. Endzustand ist
       `scale(1)`, also die natuerliche Groesse: ohne Animation steht der
       Satz normal da (K26). Ueber die natuerliche Groesse hinaus waechst er
       nicht, sonst waere der Grundzustand der vergroesserte. */
    .band-satz{transform-origin:left center;animation:satzwachs linear both;
      animation-timeline:--band;animation-range:cover 24% cover 38%}
    @keyframes satzwachs{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
    /* Ein Band mit nur einem Teil ist 1,3 Bildschirme hoch und haelt
       deshalb nur rund 270px — der Halt beginnt erst bei 43% von `cover`.
       Mit den Werten oben stand das Wort schon fertig da, bevor der Halt
       anfing (gemessen 12.10. auf /landingpages/ und /wartung/). Hoeher
       darf das Band nicht werden, sonst meldet pinmass Leerlauf. */
    /* 42 bis 50% statt 44 bis 54%: Der Halt laeuft von 43,5 bis 56,5%, und
       mit dem alten Wert war das Wort erst voll da, als der Block schon
       wegfuhr (gemessen 12.10. auf /landingpages/ und /wartung/: fertig bei
       15.624px, frei ab 15.624px). Jetzt bleiben danach rund 135px Halt. */
    .band[data-n="1"] .band-w:not(.band-satz){animation-range:cover 42% cover 50%}
    /* Der Satz bekommt mehr Strecke als das Einzelwort: Wachsen will man
       spueren. 40 bis 54% von `cover` sind bei --n:1 rund 290px. */
    .band[data-n="1"] .band-satz{animation-range:cover 40% cover 54%}
    @keyframes bandwort2{
      /* War font-size von 150 auf 104 px — das rechnet bei jedem Bild
         das Layout neu. scale(1.44) auf scale(1) ergibt dasselbe Bild. */
      from{opacity:.2;transform:translateY(16vh) scale(1.44)}
      42%{opacity:1}
      to{opacity:1;transform:none}
    }
    /* Zweite Zeile und Kasten tragen dieselbe Rolle: der Satz nach dem
       Wort. Danach die Teile einzeln. */
    .ueber,
    .kasten{animation:einrein linear both;animation-timeline:--band;
      animation-range:cover 42% cover 48%}
    /* Der Kasten kam bisher gar nicht herein: Rahmen und Vorsatz standen
       von Anfang an da, waehrend das grosse Wort noch bei 0,2 Deckkraft
       war — der Kasten war also VOR seiner eigenen Aussage zu lesen und
       stand noch im Bild, als die Ueberschrift des Abschnitts oben hing
       (gemeldet 12.10.). Jetzt der Reihe nach: Wort, Kasten, Zahlen. */
    /* Bis 74% fertig: das Band gibt den Halt bei etwa 70 bis 77% von
       `cover` wieder frei (je nach --n). Mit der weiteren Staffel war die
       dritte Karte auf /geo-optimierung/ erst voll da, als der Block
       schon nach oben wegfuhr (gemessen 12.10.). */
    /* Nachgerechnet statt geraten (12.10.): `cover` ist bei --n=2 2.988px
       lang und der Halt laeuft von 30 bis 70%, bei --n=3 sind es 3.906px
       und 23 bis 77%. Die letzte Karte muss also bei --n=2 vor 68% und
       bei --n=3 vor 75% fertig sein — beides geht mit Start 54%, Schritt
       7% und Breite 7%. Davor liegen Wort (24-40%) und Zeile (42-48%),
       jeweils mit mindestens 230px Abstand, damit nichts gemeinsam
       ankommt. */
    .bk,
    .kasten-l>div{animation:einrein linear both;animation-timeline:--band;
      animation-range:cover calc(54% + var(--i) * 7%) cover calc(61% + var(--i) * 7%)}
    @keyframes einrein{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
  }
}

/* Korrektur: Die Balkenschiene war auf dunklem Grund nicht zu sehen, und
   die Fuellung hing an view() eines verschachtelten Elements, das nicht
   mitlief. Beides an die Zeitachse des Abschnitts gehaengt. */
.bar-rail{background:#18242B;border:1px solid var(--soft);height:26px;border-radius:var(--r-xs)}
.bar-fill{border-radius:var(--r-xs);background:linear-gradient(90deg,var(--accent-dim),var(--accent));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.bars td:nth-child(2){width:99%}
.bars th{color:var(--text);padding-right:22px}
.bar-v{color:var(--accent);font-size:14px}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .bar-fill{width:var(--p);transform-origin:left;animation:wachs linear both;animation-timeline:--sek;
      animation-range:entry calc(52% + var(--i) * 6%) entry calc(74% + var(--i) * 6%)}
    .bars .cnt-anim{animation:zaehl linear both;animation-timeline:--sek;
      animation-range:entry calc(52% + var(--i) * 6%) entry calc(74% + var(--i) * 6%);
      counter-reset:n var(--n)}
  }
}

/* Die Grafik bekommt eine eigene Zeitachse, damit die Balken genau dann
   wachsen, wenn sie im Bild steht. */
.bars td:nth-child(2){padding-right:16px}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .chart{view-timeline-name:--chart}
    .bar-fill{width:var(--p);transform-origin:left;animation:wachs linear both;animation-timeline:--chart;
      animation-range:entry calc(26% + var(--i) * 9%) entry calc(62% + var(--i) * 9%)}
    .bars .cnt-anim{animation:zaehl linear both;animation-timeline:--chart;
      animation-range:entry calc(26% + var(--i) * 9%) entry calc(62% + var(--i) * 9%);
      counter-reset:n var(--n)}
  }
}

/* ============================================================
   /llms.txt als Browserfenster  (Vorschlag Torsten 10.10.)
   Nur im Abschnitt "Braucht meine Website eine llms.txt?".
   Inhalt kommt aus inhalte/texte/llms.md, nichts davon steht im CSS.
   ============================================================ */

.zwei{margin-top:var(--r-block);display:grid;gap:34px}
@media (min-width:1024px){.zwei{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:start}
  .zwei .mess{margin-top:0}}

.llms{margin:0;perspective:1400px}
.llms-rahmen{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  background:var(--bg-2);box-shadow:0 30px 70px -40px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.04) inset;
  transform-origin:50% 100%}
.llms-kopf{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--elev);
  border-bottom:1px solid var(--border)}
.llms-punkte{display:flex;gap:6px;flex:none}
.llms-punkte i{width:9px;height:9px;border-radius:50%;background:#2A3B44}
.llms-punkte i:first-child{background:#3A2B2B}
.llms-url{flex:1;min-width:0;display:flex;align-items:center;gap:7px;justify-content:center;
  font-family:var(--mono);font-size:11.5px;color:var(--muted);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-pille);padding:4px 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.llms-url svg{flex:none;color:var(--accent-2)}
.llms-bytes{flex:none;font-family:var(--mono);font-size:10.5px;color:#5C6E74;letter-spacing:.04em}
@media (max-width:420px){.llms-bytes{display:none}}

/* Das Blatt. Ohne Scroll-Animation ist es ein normal scrollbarer Kasten —
   der gesamte Dateiinhalt bleibt also immer erreichbar (K18). */
.llms-blatt{height:min(62svh,390px);overflow:auto;padding:16px 14px 20px;
  background:
    linear-gradient(180deg,var(--bg-2),var(--bg-2)),
    repeating-linear-gradient(90deg,transparent 0 46px,rgba(43,224,196,.05) 46px 47px)}
.llms-pre{margin:0;font-family:var(--mono);font-size:12px;line-height:1.75;
  counter-reset:lz;tab-size:2}
.lz{position:relative;display:block;white-space:pre-wrap;padding-left:40px;color:#9FB2B7;
  word-break:break-word}
.lz::before{counter-increment:lz;content:counter(lz);position:absolute;left:0;top:0;width:26px;
  text-align:right;color:#3C4C53;font-size:10.5px}
.lz-leer::before{color:#2C383E}
.lz-h1{color:var(--text);font-weight:600;font-size:13px}
.lz-h2{color:var(--accent);font-weight:600}
.lz-zitat{color:#7E9298;font-style:normal}
.lz-li{color:#A9BCC1}
.lk{color:var(--accent-2)}
.lu{color:#7E9199}
.llms-blatt::-webkit-scrollbar{width:9px}
.llms-blatt::-webkit-scrollbar-thumb{background:#223238;border-radius:var(--r)}
.llms-blatt::-webkit-scrollbar-track{background:transparent}

/* Bewegung: Das Fenster richtet sich beim Hereinscrollen auf, und die Datei
   laeuft dabei einmal von oben nach unten durch — scroll-gebunden, kein
   Hijacking, keine Schleife, Endzustand ist das Dateiende.
   Die Zeitachse haengt am <figure> (Block im Fluss) und nicht am <pre>;
   view() auf inline- oder absolut gesetzten Elementen friert ein. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .llms{view-timeline-name:--llms}
    .llms-rahmen{animation:llmsAuf linear both;animation-timeline:--llms;
      animation-range:entry 20% entry 95%}
  }
}
/* Der Durchlauf nur ab 1024 px: darunter ist die Datei dreimal so hoch,
   der Lauf waere unlesbar schnell. Dort bleibt der Kasten scrollbar. */
@media (prefers-reduced-motion:no-preference) and (min-width:1024px){
  @supports (animation-timeline:view()){
    .llms-blatt{overflow:hidden;
      -webkit-mask-image:linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 26px),transparent);
      mask-image:linear-gradient(180deg,transparent,#000 22px,#000 calc(100% - 26px),transparent)}
    .llms-pre{animation:llmsRollen linear both;animation-timeline:--llms;
      animation-range:entry 85% exit 75%}
  }
}
@keyframes llmsAuf{
  from{transform:rotateX(14deg) translateY(26px) scale(.965);opacity:.4}
  to{transform:none;opacity:1}
}
@keyframes llmsRollen{
  from{transform:translateY(0)}
  to{transform:translateY(calc(-100% + min(62svh,390px) - 36px))}
}

/* ============================================================
   Paket D, zweiter Durchgang: die uebrigen elf Seiten
   Neue Bausteine — Rechtshinweis, Praxis-Kasten, Terminknopf,
   Wertreihe, ruhige Leiter, ruhige Schichten, grosser Satz,
   Kasten im Band, Irrtum/Wirklichkeit, Quelltext, Formular.
   Farben, Schrift und Rhythmus bleiben die von Richtung D.
   ============================================================ */

/* --- kleine wiederkehrende Stuecke ------------------------------------ */
.recht{margin-top:26px;display:flex;gap:11px;align-items:flex-start;max-width:var(--mess);
  font-size:14px;line-height:1.65;color:var(--muted);padding:14px 16px;
  border:1px dashed #223440;border-radius:var(--r);background:rgba(19,32,39,.4)}
.recht-m{flex:none;font-family:var(--mono);color:var(--accent-2);font-size:15px;line-height:1.5}
.praxis{margin-top:26px;max-width:var(--mess);padding:18px 20px;border-radius:var(--r-lg);
  background:var(--elev);border:1px solid var(--border);border-left:2px solid var(--accent)}
.praxis-l{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--accent);margin-bottom:9px}
.praxis p:last-child{color:var(--text);font-size:16px;line-height:1.7}
.termin{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.termin-h{flex:1;min-width:260px;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:52ch}
.mess-intro{margin-bottom:30px}
.cta-z{margin-top:18px;font-size:14.5px;color:var(--muted)}
.cta-z a{color:var(--accent)}
.q-offen{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;
  padding:1px 7px;border-radius:var(--r-xs);border:1px dashed #3C5059;color:#7E949B;
  vertical-align:.08em;margin:0 2px;cursor:help}

/* --- Wertreihe: "Beschriftung | Wert" --------------------------------- */
/* Taste: nicht Linie oben UND unten je Zeile. Die Zeilen tragen sie
   unten, der Rahmen oben entfaellt. */
.werte{margin-top:var(--r-block);display:grid;gap:0;max-width:720px}
.wert{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:baseline;
  padding:15px 2px;border-bottom:1px solid var(--soft)}
.wert dt{color:var(--muted);font-size:15px}
.wert dd{font-family:var(--mono);font-size:clamp(18px,2.2vw,26px);color:var(--accent);
  font-weight:500;letter-spacing:-.01em}

/* --- ruhige Leiter (K-SCHRITTE ohne Budget) --------------------------- */
.leiter{list-style:none;margin-top:var(--r-block);display:grid;gap:0;counter-reset:none}
.leiter li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;
  padding:20px 0;border-bottom:1px solid var(--soft)}
@media (min-width:768px){.leiter li{grid-template-columns:62px minmax(0,1fr);gap:26px;padding:24px 0}}
.leiter-n{font-family:var(--mono);font-size:12px;color:var(--accent);padding-top:5px}
.leiter h3{font-size:clamp(17px,1.7vw,20px);font-weight:550;letter-spacing:-.015em}
.leiter p{margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.7;max-width:62ch}

/* --- ruhige Schichten (K-SCHICHTEN ohne Budget) ----------------------- */
.schichten{margin-top:var(--r-block);display:grid;gap:12px}
.sch{padding:20px 22px;border-radius:var(--r-lg);background:var(--elev);
  border:1px solid var(--border);position:relative;overflow:hidden}
.sch::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));opacity:calc(1 - var(--i) * .22)}
.sch-t{font-size:16.5px;font-weight:550;letter-spacing:-.015em}
.sch-b{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.7;max-width:70ch}
@media (min-width:768px){.schichten{margin-left:calc(var(--i) * 0px)}
  .sch{margin-left:calc(var(--i) * 18px)}}

/* --- grosser Satz im festgehaltenen Bild (K-AUSSAGE, zweite Form) ----- */
.satz-t{font-size:clamp(26px,4.4vw,56px);line-height:1.1;letter-spacing:-.035em;font-weight:600;
  max-width:19ch}
.satz-t strong{color:var(--accent);font-weight:600}
.satz-b{margin-top:20px;font-family:var(--mono);font-size:13px;color:var(--muted)}
/* Ab 1024px wird der Satz festgehalten und fuellt den Bildschirm. Damit er
   das auch tut, richtet sich das Satzmass nach seiner Laenge: --z steht im
   Markup und zaehlt die sichtbaren Zeichen, geteilt durch fuenf ergibt das
   ein Mass, bei dem jeder Satz auf rund fuenf Zeilen bricht.

   WARUM: Mit festem Mass (17ch) und 72px fuellte der kuerzeste Satz 18 % des
   Halts, der laengste 40 % — der Rest Leerraum (gemessen 12.10.2026 auf allen
   fuenf Pins bei 1440 / 1280 / 1024 px). Torsten zu /wartung/: "viel leeraum".
   Die Grenzen 9ch und 19ch fangen Ausreisser ab; 19ch deckt auch das laengste
   Wort der fuenf Saetze ("Sekundenbruchteilen", 19 Zeichen) ohne Ueberhang. */
@media (min-width:1024px){
  .satz-t{font-size:clamp(34px,5.8vw,84px);
    max-width:clamp(9ch, calc(var(--z,85) / 5 * 1ch), 19ch)}
}
.ueber-s{margin-top:44px;font-size:clamp(17px,1.7vw,21px);color:var(--text);max-width:48ch}

/* --- Kasten im Band --------------------------------------------------- */
.band-satz{font-size:clamp(22px,2.7vw,38px);line-height:1.22;letter-spacing:-.025em;max-width:26ch}
.kasten{margin-top:28px;background:rgba(6,9,12,.14);border:1px solid rgba(6,9,12,.22);
  border-radius:var(--r-lg);padding:20px 22px;max-width:620px}
.kasten-t{font-size:15.5px;line-height:1.6;color:#17220a;font-weight:500}
.kasten-l{margin-top:16px;display:grid;gap:0}
.kasten-l>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:baseline;
  padding:11px 0;border-top:1px solid rgba(6,9,12,.16)}
.kasten-l dt{color:#1d2a0c;font-size:14.5px}
.kasten-l dd{font-family:var(--mono);font-size:clamp(16px,2vw,22px);color:#0c1206;font-weight:600}

/* --- Irrtum und Wirklichkeit (K-EISBERG) ------------------------------ */
.eis{list-style:none;margin-top:var(--r-block);display:grid;gap:12px}
.eis li{padding:18px 20px;border-radius:var(--r-lg);background:var(--elev);
  border:1px solid var(--border)}
.eis-i,.eis-w{display:grid;grid-template-columns:22px minmax(0,1fr);gap:11px;align-items:baseline}
.eis-i{color:#8B9BA1;font-size:16px;line-height:1.55}
.eis-w{margin-top:12px;padding-top:12px;border-top:1px solid var(--soft);
  color:var(--text);font-size:15.5px;line-height:1.7}
.eis-m{font-family:var(--mono);font-size:13px;color:#5E7178;text-align:center}
.eis-ok{color:var(--accent)}
@media (min-width:900px){.eis li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:26px;align-items:start;padding:20px 24px}
  .eis-w{margin-top:0;padding-top:0;border-top:0;border-left:1px solid var(--soft);padding-left:26px}}

/* --- Quelltext (K-CODE) ------------------------------------------------ */
.codes{margin-top:var(--r-block);display:grid;gap:16px}
@media (min-width:1024px){.codes{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}}
.code{margin:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.code-k{display:flex;align-items:center;gap:11px;padding:9px 12px;background:var(--elev);
  border-bottom:1px solid var(--border)}
.code-p{display:flex;gap:6px}
.code-p i{width:9px;height:9px;border-radius:50%;background:#2A3B44}
.code-n{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.code-b{margin:0;padding:16px 14px;font-family:var(--mono);font-size:12px;line-height:1.75;
  color:#9FB2B7;overflow-x:auto;white-space:pre;tab-size:2}
.code-b::-webkit-scrollbar{height:8px}
.code-b::-webkit-scrollbar-thumb{background:#223238;border-radius:var(--r)}

/* --- Formular (K-FORMULAR) --------------------------------------------- */
.sec-form{border-top:0;padding-top:0}
/* Schmaler Streifen direkt unter dem Hero, abgesetzter Hintergrund — so
   steht es in seo.md und online-marketing.md bei genau diesen Bloecken.
   Vorher wurden sie als Sequenz-Abschnitt ueber einen ganzen Bildschirm
   festgehalten und sahen dadurch aus wie ein Abschnitt ohne Ueberschrift
   (gemeldet 12.10.). */
.sec-streifen{background:var(--elev);border-bottom:1px solid var(--soft);padding:48px 0}
@media (min-width:768px){.sec-streifen{padding:64px 0}}
.form-grid{display:grid;gap:34px}
@media (min-width:1024px){.form-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:56px;align-items:start}}
.form{display:grid;gap:16px}
@media (min-width:620px){.form{grid-template-columns:1fr 1fr;gap:16px 20px}.fz-weit{grid-column:1 / -1}}
.fz{display:grid;gap:7px;margin:0}
.fz label{font-size:13.5px;color:var(--muted)}
.fz-o{color:#546970;font-size:12px}
.fz input,.fz select,.fz textarea{width:100%;font:inherit;font-size:15px;color:var(--text);
  background:var(--elev);border:1px solid var(--border);border-radius:var(--r);padding:11px 13px;
  transition:border-color var(--t),background var(--t)}
.fz textarea{resize:vertical;min-height:120px}
/* Eine Randfarbe allein ist kein Fokus — wer nur die Tastatur nutzt,
   braucht einen Ring, der sich nicht mit dem Zustand "ausgefuellt" verwechseln
   laesst (WCAG 2.4.7). */
.fz input:focus-visible,.fz select:focus-visible,.fz textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent);
  background:var(--elev-2)}
.fz input:focus,.fz select:focus,.fz textarea:focus{border-color:var(--accent);
  background:var(--elev-2)}
.fz-check{grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;margin-top:4px}
.fz-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);padding:0}
.fz-check label{font-size:13.5px;line-height:1.6}
.fz-check a{color:var(--accent)}
.fz>.btn{justify-self:start}
.form-proto{grid-column:1 / -1;font-family:var(--mono);font-size:11px;color:#51656C}
.form-neben{padding:22px 24px;border-radius:var(--r-lg);background:var(--elev);border:1px solid var(--border)}

/* --- Check-Formular (K-FORMULAR-CHECK) --------------------------------
   Eigener Baustein: kein Kontaktkasten daneben, dafuer Platzhalter und
   Hilfetexte je Feld und eine Haken-Gruppe. Textquelle:
   inhalte/texte/geo-seo-check.md. */
.form-check{max-width:860px}
.form-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.form-kopf .h2{margin:0}
.abz{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(198,255,61,.35);border-radius:999px;padding:4px 11px}
.form-check>.answer{margin-top:14px}
.form-check .form{margin-top:30px}
.fz-gruppe{border:0;padding:0;margin:0;display:grid;gap:10px;min-inline-size:0}
.fz-gruppe legend{font-size:13.5px;color:var(--muted);padding:0}
.fz-haken{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:center}
.fz-haken input{width:18px;height:18px;accent-color:var(--accent);padding:0}
.fz-haken label{font-size:15px;color:var(--text)}
.fz-hilfe{font-size:12.5px;line-height:1.55;color:var(--muted)}
.form-ab{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.form-unten{font-size:13px;color:var(--muted)}

/* --- Bestaetigungsseite /geo-seo-check/gesendet/ ----------------------
   noindex, nur ueber die Weiterleitung aus sendmail.php erreichbar.
   Die Bewegung hier weicht bewusst von E3 ab (Entscheidung 12.10.,
   notiert in VERWORFEN.md) und gilt nur auf dieser Seite. */
.hero-best{position:relative;overflow:hidden;padding:72px 0 64px;border-bottom:1px solid var(--soft)}
@media (min-width:768px){.hero-best{padding:104px 0 88px}}
.hero-best .hero-grid{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.hero-best .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:56px}}
.konfetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.best-h{margin-top:22px;color:var(--muted);font-size:16px;line-height:1.7;max-width:52ch}
.tipp{width:100%;height:auto;max-width:440px;color:rgba(198,255,61,.82)}
.tipp-tisch,.tipp-tasten{stroke:rgba(232,241,242,.5)}
.tipp-schirm rect{stroke:rgba(232,241,242,.55)}
.tipp-z1,.tipp-z2,.tipp-z3{stroke:rgba(198,255,61,.9)}
.tipp-cursor{stroke:rgba(198,255,61,1)}
.sec-still{border-top:1px solid var(--soft);padding:56px 0}
@media (min-width:768px){.sec-still{padding:72px 0}}
.best-kasten{max-width:60ch;color:var(--muted);font-size:16px;line-height:1.7;
  padding:20px 22px;border-radius:var(--r-lg);background:var(--elev);border:1px solid var(--border)}
.best-links{list-style:none;display:grid;gap:12px;margin:0}
@media (min-width:620px){.best-links{grid-auto-flow:column;justify-content:start;gap:32px}}
.best-links a{font-size:16px}
/* Der Kontaktkasten stand als Dreizeiler da, die Mittelpunkte aus der
   Textdatei fehlten — texttreue meldete die Zeile seit dem 11.10. als
   fehlend (der einzige offene Fund ueber alle sechzehn Seiten). Jetzt steht
   die Zeile Zeichen fuer Zeichen so da, wie sie in texte/kontakt.md steht;
   die drei Teile brechen nur nicht mehr in sich um, weil sie
   inline-block sind. Optisch bleibt es ein Dreizeiler, solange der Kasten
   schmal ist, und wird eine Zeile, wenn Platz da ist. */
.fn-block{font-size:15px;line-height:1.75}
.fn-block .fn-t{display:inline-block;font-size:15px;color:var(--text);text-decoration:none}
.fn-block .fn-pkt{color:var(--muted)}
.fn-zeit{margin-top:18px;padding-top:16px;border-top:1px solid var(--soft);
  font-size:14px;line-height:1.65;color:var(--muted)}

/* --- Hero ohne Visual --------------------------------------------------- */
.hero-ruhig .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero-ruhig .hero-text{max-width:60ch}
.hero-ruhig .hero-lang{height:auto}
.hero-ruhig .hero-halt{position:static;height:auto;padding-block:clamp(70px,12vh,130px)}

/* --- Zahlenreihen mit zwei oder drei Werten ----------------------------- */
.zahlen-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.zahlen-n3{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.zahlen-n3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.seg-h{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:#55686F}

/* --- Hero-Visuals der elf uebrigen Seiten -------------------------------
   Das Feld `visual:` in den Textdateien beschreibt eine Form, keinen Text.
   Deshalb reine Geometrie: Ebenen, Rahmen, Balken. Beschriftet ist nur,
   was die Textdatei ausdruecklich nennt ("gesponsert").
   ----------------------------------------------------------------------- */
.vis-form{margin:0;width:100%}
.vis-form svg{width:100%;height:auto;display:block;overflow:visible}
.vf-e{fill:var(--elev);stroke:var(--border);stroke-width:1}
.vf-e2{fill:var(--elev-2)}
.vf-e3{fill:var(--soft)}
.vf-rahmen{fill:var(--elev);stroke:var(--border);stroke-width:1.2}
.vf-hinten{opacity:.4}
.vf-mitte{opacity:.7}
.vf-handy{fill:var(--elev-2);stroke:#2A3E47}
.vf-vorn{fill:var(--elev-2);stroke:var(--accent);stroke-width:1.2;stroke-opacity:.5}
.vf-b{fill:#5C7077}
.vf-b2{fill:#2E4048}
.vf-punkt{fill:#2A3B44}
.vf-lupe{fill:rgba(198,255,61,.07);stroke:var(--accent);stroke-width:1.6}
.vf-stiel{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;fill:none}
/* ⚠ Die Lupe kreist leicht — Dauerschleife, keine scrollgebundene
   Animation. Zweite bewusste Abweichung von Briefing E3, und die erste
   auf einer der fuenfzehn sichtbaren Seiten. Entscheidung Torsten,
   12.10.2026 ("kannst du die Lupe so leicht kreisen lassen?").
   Notiert in VERWORFEN.md.

   MASS: Der erste Versuch lief 14s je Runde bei 7 von 320 Einheiten — das
   sind rund 2,7 Bildpunkte je Sekunde, und Torsten sah keine Bewegung. Ich
   hatte nur die Zahlen geprueft, nicht die Sichtbarkeit (12.10.). Jetzt
   6,5s je Runde auf einer flachen Ellipse, 16 Einheiten waagerecht und 10
   senkrecht. In Bildschirmpixeln nachgemessen: 41px quer, 27px hoch bei
   443px Zeichnungsbreite. Dazu 2,5 Grad Neigung um den Linsenmittelpunkt,
   damit es kreist und nicht driftet.

   Die Ellipse laeuft durch den Ursprung: ohne Animation
   (prefers-reduced-motion) steht die Lupe genau da, wo sie im Markup
   sitzt — Grundzustand gleich sichtbarer Zustand, K26 bleibt gewahrt. */
@media (prefers-reduced-motion:no-preference){
  .vis-lupe .vf-lupe-g{transform-box:view-box;transform-origin:196px 98px;
    animation:lupeKreis 6.5s ease-in-out infinite}
  @keyframes lupeKreis{
    0%{transform:translate(0,0) rotate(0deg)}
    25%{transform:translate(16px,-10px) rotate(2.5deg)}
    50%{transform:translate(0,-20px) rotate(0deg)}
    75%{transform:translate(-16px,-10px) rotate(-2.5deg)}
    100%{transform:translate(0,0) rotate(0deg)}
  }
}
/* ⚠ Pakete auf /wartung/: Daten gehen in die Sicherung und kommen zurueck.
   Torstens Wunsch vom 12.10.2026. Zeitgesteuert, nicht scrollgebunden — das
   Visual steht beim Laden schon im Bild, eine view()-Animation waere auf
   halber Strecke eingefroren (siehe Hinweis weiter oben).

   KEINE Dauerschleife. K26 erlaubt zeitgesteuerte Bewegung bis zwei
   Durchlaeufe, dann Stillstand — genau das steht hier: 3,3s je Durchlauf,
   zwei Durchlaeufe, danach faellt jedes Paket in seine Ruhelage im Markup
   zurueck (animation-fill-mode backwards, kein forwards). Deshalb ist das
   KEINE dritte E3-Ausnahme und steht nicht in VERWORFEN.md.

   MASS: 85 Einheiten Weg in 3,3s. Bei 443px Zeichnungsbreite sind das
   118 Bildpunkte in 3,3s, also 36 px/s — die Lupe lief anfangs mit 2,7 px/s
   und war unsichtbar (12.10.). Nachgemessen in Bildschirmpixeln.

   Grundzustand ohne Animation: je Bahn liegt ein Paket am Start sichtbar da
   (die drei bzw. zwei Pakete decken sich). Szene bleibt lesbar, K26 gewahrt. */
.vt-ablage{stroke:var(--accent);stroke-opacity:.38}
.vt-bahn{stroke:#27383F;stroke-width:1.4;fill:none;stroke-dasharray:3 5}
.vt-p{fill:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .vis-pflege .vt-p{transform-box:view-box;animation:paketHin 3.3s linear 2 backwards}
  .vis-pflege .vt-p{animation-delay:var(--d,0s)}
  .vis-pflege .vt-zurueck{animation-name:paketZurueck}
  @keyframes paketHin{
    0%{transform:translateX(0);opacity:0}
    12%{opacity:1}
    86%{opacity:1}
    100%{transform:translateX(85px);opacity:0}
  }
  @keyframes paketZurueck{
    0%{transform:translateX(0);opacity:0}
    12%{opacity:1}
    86%{opacity:1}
    100%{transform:translateX(-85px);opacity:0}
  }
}
/* ⚠ Monitor auf /referenzen/: Nullen und Einsen laufen nach oben.
   Torstens Wunsch vom 13.10.2026. Zeitgesteuert wie die Pakete auf
   /wartung/ und aus demselben Grund: das Visual steht beim Laden schon im
   Bild, eine view()-Animation waere auf halber Strecke eingefroren.

   KEINE Dauerschleife. Zwei Durchlaeufe je Spalte, dann Stillstand — K26.
   Jede Spalte traegt ihre zwoelf Ziffern zweimal untereinander und faehrt
   um genau eine Laenge (12 x 14 = 168 Einheiten) nach oben; Anfang und Ende
   sehen deshalb gleich aus, und wenn die Animation endet, faellt die Spalte
   ohne Sprung in ihre Ruhelage zurueck (kein fill-mode forwards).

   MASS: 168 Einheiten in 2,4 bis 3,45s. Bei 443px Zeichnungsbreite sind
   das 233 Bildpunkte, also 68 bis 97 px/s — schnell genug, um als Lauf
   gelesen zu werden, langsam genug, um die Ziffern zu erkennen.
   Nachgemessen in Bildschirmpixeln. */
.vis-monitor .mo-feld text{font-family:var(--mono);font-size:11px;fill:#3C5059}
/* Einzelne Ziffern leuchten in den beiden Markenfarben auf — Torstens
   Wunsch vom 13.10.: "Zahlen vereinzelt in den Farben aufleuchten lassen,
   wie der Strich bei den Ueberschriften."
   Im Ruhezustand stehen sie bei 0,22 Deckkraft, also knapp sichtbar; das
   Aufleuchten geht auf 1 und wieder zurueck. Anfang und Ende der Kurve sind
   gleich, deshalb faellt die Ziffer nach dem zweiten Durchlauf ohne Sprung
   in ihre Ruhelage (kein fill-mode forwards). Animiert wird NUR
   fill-opacity, nicht fill: eine Farbanimation rechnet der Browser auf dem
   Hauptthread, eine Deckkraft nicht.
   Welche Ziffer leuchtet, steht fest im Markup (reproduzierbarer Bau) und
   folgt keinem Raster — jede fuenfte ergab sichtbare Diagonalen. */
/* `text.mo-a` statt `.mo-a`: die Grundregel darueber ist
   `.vis-monitor .mo-feld text` und damit um ein Element spezifischer als
   `.vis-monitor .mo-a`. Die Ziffern haben deshalb erst in GRAU aufgeleuchtet
   — nur die Deckkraft stieg, die Farbe blieb #3C5059. Gefunden 13.10.,
   nicht am Bild, sondern beim Nachlesen der berechneten Werte. */
.vis-monitor .mo-feld text.mo-a{fill:var(--accent);fill-opacity:.22}
.vis-monitor .mo-feld text.mo-b{fill:var(--accent-2);fill-opacity:.22}
.mo-fuss{fill:var(--elev);stroke:var(--border);stroke-width:1.2}
@media (prefers-reduced-motion:no-preference){
  .vis-monitor .mo-s{transform-box:view-box;animation:ziffern linear 2 backwards}
  .vis-monitor .mo-s{animation-duration:var(--t,2.8s);animation-delay:var(--d,0s)}
  @keyframes ziffern{from{transform:translateY(0)}to{transform:translateY(-168px)}}
  .vis-monitor .mo-feld text.mo-a,.vis-monitor .mo-feld text.mo-b{animation:zifferAuf 2.6s ease-in-out 2 none}
  .vis-monitor .mo-feld text.mo-a,.vis-monitor .mo-feld text.mo-b{animation-delay:var(--v,0s)}
  @keyframes zifferAuf{
    0%{fill-opacity:.22}
    30%{fill-opacity:1}
    62%{fill-opacity:.34}
    100%{fill-opacity:.22}
  }
}
/* ⚠ Hero-Visuals, die sich beim Laden einmal aufbauen.
   Torstens Wunsch vom 13.10.2026 fuer /ueber-uns/, /kontakt/, /impressum/,
   /datenschutz/ und /online-marketing/: "passende Animation wie bei
   Wartung einarbeiten".

   Alle nach demselben Muster und bewusst zurueckhaltender als die Pakete
   auf /wartung/: EIN Durchlauf, kein zweiter, keine Schleife. Der
   Grundzustand ist der FERTIGE Zustand — ohne Animation
   (prefers-reduced-motion) und nach dem Durchlauf steht das Bild
   vollstaendig da. `backwards` statt `forwards`: die Teile sind waehrend
   der Verzoegerung noch nicht da, danach fallen sie in ihren CSS-Zustand,
   und der ist der sichtbare. K26 bleibt gewahrt.

   Die Balken wachsen von links wie der Lime-Strich unter den
   Ueberschriften (`linieauf`) — dieselbe Geste, damit es zur Seite passt. */
.vu-b,.vr-z{transform-box:view-box;transform-origin:left center}
.vu-strich{fill:var(--accent)}
.vr-lime{fill:var(--accent);fill-opacity:.8}
.vd-n,.vd-a{transform-box:view-box}
.vis-dialog .vz-p{fill-opacity:.55}
@media (prefers-reduced-motion:no-preference){
  /* Zeilen und Balken ziehen von links auf */
  .vu-b,.vr-z{animation:zeileAuf .55s var(--ease,cubic-bezier(.22,1,.36,1)) 1 backwards}
  .vu-b,.vr-z{animation-delay:var(--d,0s)}
  @keyframes zeileAuf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* Der Schreibstrich blinkt zweimal und steht dann still (K26). */
  .vu-strich{animation:strichBlink .5s steps(1) 1.4s 4 backwards}
  @keyframes strichBlink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
  /* Nachricht und Antwort fahren von ihrer Seite herein. */
  .vd-n{animation:vonRechts .6s var(--ease,cubic-bezier(.22,1,.36,1)) 1 backwards}
  .vd-a{animation:vonLinks .6s var(--ease,cubic-bezier(.22,1,.36,1)) 1 backwards}
  .vd-n,.vd-a,.vd-p{animation-delay:var(--d,0s)}
  @keyframes vonRechts{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
  @keyframes vonLinks{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
  .vd-p{animation:punktAuf .45s ease-out 1 backwards}
  @keyframes punktAuf{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  /* Online-Marketing: die drei Karten kommen nacheinander, die Chips zuletzt. */
  .vis-karten .vk{animation:kartenAuf .55s var(--ease,cubic-bezier(.22,1,.36,1)) 1 backwards;
    animation-delay:calc(var(--i, 0) * .14s)}
  @keyframes kartenAuf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .vis-karten .vk-chip{animation:punktAuf .4s ease-out 1 backwards;
    animation-delay:calc(.45s + var(--i, 0) * .14s)}
}
.vz-p{fill:var(--accent)}
.vz-e{fill:var(--accent-2)}
.vz-l{stroke:#2E4048;stroke-width:1.4;fill:none}
.vis-lp{position:relative}
.vf-chip,.vk-chip{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#0E1A0A;background:var(--accent);border-radius:var(--r-xs);padding:2px 7px}
.vis-lp .vf-chip{position:absolute;left:9%;top:40%}
.vis-karten{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.vk{padding:13px 12px 15px;border-radius:var(--r);background:var(--elev);border:1px solid var(--border);
  display:grid;gap:9px;align-content:start}
.vk-b{display:block;height:7px;border-radius:var(--r-xs);background:#5C7077}
.vk-k{width:68%;background:#2E4048}
.vis-portraet{margin:0}
.vp-rahmen{aspect-ratio:4/5;border-radius:var(--r-lg);border:1px dashed #27383F;
  background:linear-gradient(145deg,var(--elev),var(--bg-2))}

/* Bewegung der neuen Stuecke: alles scroll-gebunden, ein Durchlauf,
   Endzustand ist der sichtbare Zustand (K26). */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .leiter li,.eis li,.sch,.wert,.code{animation:kkrein linear both;animation-timeline:view();
      animation-range:entry calc(5% + var(--i,0) * 5%) cover calc(26% + var(--i,0) * 5%)}
    /* `cover`, nicht `contain`: mit `contain` kamen Satz und Quellzeile
       gemeinsam an (gemessen 12.10. auf /seo/, /webdesign/,
       /webentwicklung/, /wartung/). Auf `cover` laesst sich der Halt
       ausrechnen und die beiden Teile sicher darin unterbringen. */
    /* Kurzer Pin (nur Aussage): Halt von 43 bis 57% von `cover`. */
    .satz-t{animation:einrein linear both;animation-timeline:--stmt;
      animation-range:cover 44% cover 54%}
    /* Langer Pin (Aussage + Quellzeile): Halt von 34 bis 66%. */
    .pin[data-teile="2"] .satz-t{animation-range:cover 38% cover 48%}
    /* 56 bis 62%, nicht 58 bis 64%: Der Halt endet bei 66%, und mit den
       alten Werten war die Quellzeile auf /webentwicklung/ erst 10px vor
       dem Loslassen voll da (gemessen 12.10.). Jetzt rund 100px Luft. */
    .satz-b{animation:einrein linear both;animation-timeline:--stmt;
      animation-range:cover 56% cover 62%}

    /* Die herausgestellte Aussage wird Wort fuer Wort scharf.
       Warum unscharf und nicht nur eingeblendet: Der Satz auf /webdesign/
       sagt "Der erste Eindruck steht in Sekundenbruchteilen — bevor ein
       Besucher ein Wort gelesen hat." Genau das macht die Bewegung: Zuerst
       ist der Satz nur eine Form, die man sieht, aber nicht lesen kann;
       dann wird er Wort fuer Wort lesbar. Die Bewegung traegt den Inhalt,
       statt ihn zu schmuecken (Wunsch Torsten, 12.10.).
       Scrollgebunden, also E3-konform — keine Dauerschleife.
       Grundzustand ohne Animation: scharf und voll sichtbar (K26).
       Der ganze Satz steht als ein Block, wenn `inline()` Auszeichnung
       erzeugt hat; dann fehlt `satz-woerter` und die Regel oben greift. */
    .satz-t.satz-woerter{animation:none}
    /* Nachgerechnet: Der Halt eines Aussage-Pins laeuft von 34 bis 66%
       von `cover` (1,9 Bildschirme hoch, `cover` ist 2.610px lang bei
       900px Fensterhoehe). Die Woerter liegen darin von 36 bis 54%, das
       sind rund 470px fuer vierzehn Woerter — etwa ein Wort je 33px
       Scrollweg. Schritt 0,85% statt 1%, damit auch der laengste Satz vor
       der Quellzeile fertig ist. Der erste Versuch lief von 34 bis 48% und war nach 360px
       durch, noch waehrend man ankam (gemessen 12.10.). Die Quellzeile
       folgt ab 58%, also mit Abstand hinter dem letzten Wort. */
    .satz-woerter .w{animation:scharf linear both;animation-timeline:--stmt;
      animation-range:cover calc(36% + var(--i,0) * .85%) cover calc(43% + var(--i,0) * .85%)}
    @keyframes scharf{
      from{opacity:0;filter:blur(14px);transform:translateY(9px) scale(1.05)}
      60%{opacity:1}
      to{opacity:1;filter:blur(0);transform:none}
    }
    /* Die Hero-Visuals bekommen keine view()-Animation: Sie stehen beim
       Laden schon im Bild, die Animation waere auf halber Strecke
       eingefroren und saehe aus wie ein Fehler. Tiefe bekommen sie ueber
       die Parallaxe des Hero-Blocks, die es schon gibt. */
  }
}
.eis li{--i:0}.sch{--i:0}.wert{--i:0}.code{--i:0}
.c-k{color:var(--accent)}
.c-s{color:var(--accent-2)}
.c-t{color:var(--accent)}
.c-a{color:#8FA3A8}

/* Umschalter mit Schritten im Feld, Karten mit Etikett und Adresse */
.leiter-eng{margin-top:18px;border-top:0}
.leiter-eng li{padding:13px 0;grid-template-columns:38px minmax(0,1fr);gap:14px}
.leiter-eng li:last-child{border-bottom:0}
.leiter-eng h4{font-size:15.5px;font-weight:550;letter-spacing:-.01em}
.leiter-eng p{margin-top:6px;font-size:14.5px}
.kk-e{display:inline-block;width:fit-content;justify-self:start;align-self:start;margin-top:9px;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--accent-2);
  border:1px solid rgba(43,224,196,.3);border-radius:var(--r-pille);padding:3px 9px}
.kk-u{margin-top:12px}
.kk-u a{font-family:var(--mono);font-size:12.5px;color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(198,255,61,.3)}
.kk-o{margin-top:10px;font-size:12.5px;line-height:1.55;color:#6E838A}

/* ============================================================
   Handy-Durchgang, 10.10. — gemessen bei 375 px auf iPhone-Profil
   ============================================================ */

/* Der Schlag am Abschluss ragte 42 px ueber den Rand. Die Seite scrollte
   nicht (die Huelle schneidet ab), sichtbar war es trotzdem. */
.sec-cta{overflow:clip}

/* Lange Knopfbeschriftungen passten bei 375 px nicht in den Knopf. */
.btn{max-width:100%;text-align:center}
@media (max-width:420px){.btn{padding:13px 16px;font-size:15px}}

/* Tippflaechen. WCAG 2.5.8 verlangt 24 px, die Quellenmarke hatte 21,
   die Begriffs-Schaltflaeche 25 und die Fusszeilen-Links 16.
   Mehr Luft, ohne dass sich die Zeilen verschieben. */
@media (max-width:1023px){
  .q{padding-block:5px}
  .term{padding-block:4px}
  .foot-col a,.foot-col ul li{display:inline-block;padding-block:5px}
  .foot-col ul{gap:2px}
  .logo{padding-block:4px}
  .fn-block a{display:inline-block;padding-block:4px}
}

/* Wertreihe: die Beschriftung wurde von der Zahl zusammengequetscht. */
@media (max-width:560px){
  .wert{grid-template-columns:minmax(0,1fr);gap:4px;padding:13px 2px}
  .wert dd{font-size:20px}
}

/* Hero-Visual Online-Marketing: der "gesponsert"-Chip war breiter als
   die Karte. Bei schmalem Bild stehen die drei Karten untereinander. */
@media (max-width:640px){
  .vis-karten{grid-template-columns:minmax(0,1fr);gap:10px}
  .vk{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 12px}
  .vk-chip{grid-row:span 2}
}

/* Das Stimmungsfeld im Hintergrund ist Schmuck und darf auf dem Handy
   nicht mitrechnen. */
@media (max-width:1023px){.feld{width:100%;max-width:100%}}

/* Restliche Tippflaechen und der Schlag auf dem Handy */
@media (max-width:1023px){
  .crumb a{display:inline-block;padding-block:6px}
  .kk-u a{display:inline-block;padding-block:5px}
  .inl{padding-block:3px}
  .fz-check input,.fz-haken input{width:24px;height:24px}
  .fz-check label,.fz-haken label{padding-block:3px}
  .fz-haken{grid-template-columns:26px minmax(0,1fr)}
  .sec-cta .ring{width:min(430px,86vw);height:min(430px,86vw);left:50%}
}

/* Quelltext auf dem Handy umbrechen statt waagerecht scrollen lassen. */
@media (max-width:640px){
  .code-b{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:visible}
}

/* ============================================================
   Kontrast nachgezogen (gemessen, WCAG 2.1 AA)
   Fünf Paare lagen unter 4,5:1. Die Farben sind jeweils nur so weit
   aufgehellt, wie nötig — die Rangfolge im Grau bleibt erhalten.
   ============================================================ */
.fz-o{color:#84969C}            /* 3,45 → 4,6 */
.form-proto{color:#84969C}      /* 3,26 → 4,6 */
.seg-h{color:#84969C}           /* 3,42 → 4,6 */
/* Die Quellenmarke im Lime-Band war hellgrau auf Lime: 2,23:1.
   Im Band steht sie jetzt dunkel. */
.band .q,.band-in .q{color:#16200a;border-color:rgba(6,9,12,.3);background:rgba(6,9,12,.07)}
/* Begriffs-Knoepfe im Band: Unterstrich und Fragezeichen sind sonst lime
   auf lime, also unsichtbar — der Begriff sah aus wie ein Leerzeichen im
   Satz (gefunden 12.10. auf /landingpages/). kontrast.mjs sieht das nicht,
   es prueft keine ::after-Farben. */
.band .term,.band-in .term{border-bottom-color:rgba(6,9,12,.42)}
.band .term::after,.band-in .term::after{color:#16200a}
.band .term[aria-expanded="true"],.band-in .term[aria-expanded="true"]{
  background:rgba(6,9,12,.1);border-bottom-color:#06090C}
/* Der Definitionskasten im Band: dunkel auf lime, damit er sich abhebt. */
.band-in .pop{background:rgba(6,9,12,.9);border-color:rgba(6,9,12,.3);max-width:62ch}
.band-in .pop-t{color:var(--accent)}
.band-in .pop-b{color:#C9D6D9}

/* Bei 320 px passten drei Reiter nicht mehr in eine Zeile.
   Statt herauszuragen bricht die Leiste jetzt um. */
@media (max-width:420px){
  .seg{display:flex;flex-wrap:wrap;max-width:100%;border-radius:var(--r-lg);justify-content:flex-start}
  .seg button{padding:9px 15px;font-size:13.5px}
}


/* ============================================================
   Zeigegeraet-Abfrage  (Handy-Durchgang 11.10.)
   Auf einem Touchscreen gibt es kein Schweben. Der Browser tut so
   als ob: Die erste Beruehrung setzt :hover und laesst ihn stehen,
   bis woanders getippt wird — eine Karte bleibt dann hell, ein Knopf
   bleibt gross. Deshalb stehen ALLE :hover-Regeln hinter dieser
   Abfrage. Rueckmeldung beim Tippen gibt :active (weiter unten),
   das auf jedem Geraet funktioniert.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .q:hover{color:var(--accent);border-color:var(--accent-dim);background:rgba(198,255,61,.07)}
  .inl:hover{color:var(--accent)}
  .term:hover{color:var(--accent)}
  .btn-primary:hover{background:#D4FF66;box-shadow:0 0 0 4px rgba(198,255,61,.16)}
  .btn-secondary:hover{border-color:var(--accent-2);color:var(--text)}
  .btn:hover .arrow{transform:translateX(4px)}
  .nav-menu a:hover{color:var(--text)}
  .dd-link:hover{color:var(--text)}
  .dd-col a:hover{color:var(--accent)}
  .crumb a:hover{color:var(--accent)}
  a.kk:hover{border-color:var(--accent-dim);transform:translateY(-3px);background:linear-gradient(165deg,var(--elev-2),rgba(19,32,39,.5))}
  a.kk:hover .kk-a{opacity:1;transform:none}
  .foot-col a:hover{color:var(--accent)}
  .bk .q:hover{color:#0A1004;border-color:#0A1004;background:rgba(255,255,255,.4)}
  .fn-block a:hover{color:var(--accent)}
  .kk-u a:hover{border-bottom-color:var(--accent)}
  .band .q:hover,
  .band-in .q:hover{color:#06090C;border-color:rgba(6,9,12,.55);background:rgba(6,9,12,.14)}
}

/* ============================================================
   Plattform-Ebene fürs Handy  (Handy-Durchgang 11.10.)
   Die Kleinigkeiten, die den Unterschied machen zwischen „Website
   im Browser" und „fühlt sich an wie eine App". Jede einzeln begründet.
   ============================================================ */

html{
  /* iOS und Android malen beim Tippen ein graublaues Feld über das
     Element. Das ist das lauteste "ich bin eine Website"-Signal.
     Rückmeldung kommt stattdessen von :active unten. */
  -webkit-tap-highlight-color:transparent;
  /* Ohne das bläht iOS im Querformat einzelne Textblöcke auf. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* Knöpfe und Links: kein Doppeltipp-Zoom (spart die 300-ms-Wartezeit
   bis zum Klick) und kein Markieren der Beschriftung beim Langdrücken.
   Fließtext bleibt markierbar — Adressen und Telefonnummern will man
   kopieren können. */
.btn,button,summary,[role="button"],.seg button,.term,.sp-nav a,.sp-cta,.kk{
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
/* Die Quellenmarke ist ein Link im Satz — der Satz bleibt markierbar. */
.q{touch-action:manipulation}

/* Rückmeldung beim Drücken, nicht erst beim Loslassen. Ein nativer
   Knopf antwortet in dem Moment, in dem der Finger aufsetzt. */
.btn:active{transform:scale(.975)}
.kk:active{background:var(--elev-2)}
/* Jedes Tippziel antwortet, nicht nur die Knoepfe. */
.seg button:active,.term:active,.sp-nav a:active{opacity:.75}
.q:active,.inl:active,.kk-u a:active,.crumb a:active,.foot-col a:active,
.fn-block a:active,summary:active{opacity:.7}
.btn,.kk{transition:transform 120ms var(--ease-out),background var(--t),border-color var(--t)}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}

/* Eingabefelder: unter 16 px zoomt iOS beim Hineintippen in die Seite
   und zoomt danach nicht zurück. Nicht der Zoom wird abgeschaltet
   (das wäre ein Barriere-Fehler), sondern die Ursache. */
@media (pointer:coarse){
  .fz input,.fz select,.fz textarea{font-size:16px}
}

/* Scrollfelder: am Ende soll die Seite dahinter nicht mitrutschen. */
.sp-nav,.code-b,.llms-blatt,.kn-karte,.ix-voll{overscroll-behavior:contain}
.sp-nav{overscroll-behavior-x:contain}

/* Zweite Form für kurze Frage-Antwort-Abschnitte: Frage links,
   Fließtext rechts. Bricht die Reihe gleich breiter Blöcke auf,
   ohne ein Wort zu ändern. Unter 1024 px stapelt es. */
.versetzt{display:grid;gap:var(--r-text)}
@media (min-width:1024px){
  .versetzt{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
  .versetzt .mess{margin-top:9px}
  .versetzt .answer{max-width:34ch}
  .versetzt .h2{max-width:16ch}
}

/* --- Rechtsseiten (Impressum, Datenschutzerklärung) --------------------
   Seitentyp „Rechtsseite" nach SEITENARCHITEKTUR §4: Hero nur H1,
   keine Effekt-Komponente. Der Wortlaut kommt unverändert von der
   laufenden Website. Hier zählt Lesbarkeit, sonst nichts.
   ----------------------------------------------------------------------- */
.hero-recht .hero-halt{padding-block:clamp(56px,9vh,96px)}
/* Die Rechtsseiten haben seit dem 13.10. ein Visual (Torstens Entscheidung,
   siehe README) und damit einen Zweispalter. Mit der Standardaufteilung
   1.1 / .9 brach "Datenschutzerklaerung" MITTEN IM WORT um, ohne Trennstrich:
   das Wort braucht 9,99 x Schriftgroesse, also 619px bei 62px — die Spalte
   hatte 603px. Gemessen 13.10.
   Mit 1.45 / .55 sind es 795px bei 1440, 621px bei 1200 und 493px bei 1024 —
   ueberall mehr, als das Wort braucht. `hyphens:auto` ist der Riegel fuer den
   Fall, dass doch einmal ein laengeres Wort kommt: dann steht wenigstens ein
   Trennstrich da. Gilt nur hier, nicht fuer die anderen H1. */
/* Unter 1024px EINE Spalte, und zwar als `minmax(0,1fr)`. Ohne das steht
   dort die implizite `auto`-Spalte, die wegen `min-width:auto` nicht unter
   ihr laengstes Wort schrumpft — bei 320px ragte "Datenschutzerklaerung"
   aus dem Bild (zoom320 meldete es sofort, 13.10.). Vorher hat das
   `hero-ruhig` miterledigt; das traegt die Rechtsseite seit dem Visual
   nicht mehr. */
.hero-recht .hero-grid{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  .hero-recht .hero-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr)}
}
.hero-recht .h1{hyphens:auto}
.lead-recht{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted)}
.sec-recht{padding-top:0}
.recht-text{max-width:72ch}
.rb+.rb{margin-top:40px;padding-top:34px;border-top:1px solid var(--soft)}
.rb-h{font-size:clamp(17px,1.7vw,20px);font-weight:550;letter-spacing:-.015em;color:var(--text)}
.rb p{margin-top:14px;font-size:15.5px;line-height:1.75;color:var(--muted)}
.rb p a{color:var(--accent)}
.rb-l{margin-top:14px;display:grid;gap:7px;list-style:none}
.rb-l li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.7;color:var(--muted)}
.rb-l li::before{content:"";position:absolute;left:4px;top:.72em;width:5px;height:1px;background:var(--accent)}
@media (min-width:1024px){
  .recht-text{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  /* Nur die Spalten brauchen den grossen Abstand. Mit gap:44px bekamen
     auch die Absaetze untereinander 44 px und der Block fiel auseinander. */
  .rb{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
    column-gap:44px;row-gap:14px;align-items:start}
  .rb-h{position:sticky;top:34px}
  .rb>*:not(.rb-h){grid-column:2}
  .rb-h+*{margin-top:0}
  .recht-text{max-width:1000px}
}

/* =====================================================================
   S E Q U E N Z
   Die Ueberschrift steht, die Teile darunter kommen beim Scrollen nach.

   Zwei Formen, und welche gilt, entscheidet die Fensterhoehe:
   a) Grundform — der Abschnitt laeuft normal durch, seine Teile ziehen
      beim Hereinscrollen auf. Gilt immer und ueberall.
   b) Festgehalten — der Abschnitt bleibt stehen, waehrend seine Teile
      eintreffen. Nur wenn der Inhalt sicher ins Fenster passt.

   Die Stufen `h-a`/`h-b`/`h-c` traegt `hoehen.mjs` nach einer echten
   Messung im Browser ein. Ein gehaltener Abschnitt, der hoeher ist als
   das Fenster, schneidet ab: man haelt ja und kann nicht weiterscrollen.
   Deshalb wird nur gehalten, was nachweislich passt.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){

    /* --- a) Grundform: laeuft durch, Teile ziehen auf -------------
       Zeitachse ist der Abschnitt, nicht das einzelne Teil: an der
       eigenen Sichtbarkeit gemessen liegt der Text nur rund 100px unter
       der Ueberschrift und kommt sofort nach (gemessen 12.10.). */
    body[data-seq="1"] main>.sec-seq{view-timeline-name:--sq}
    body[data-seq="1"] main>.sec-seq>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    body[data-seq="1"] main>.sec-seq>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    body[data-seq="1"] main>.sec-seq>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    body[data-seq="1"] main>.sec-seq>.wrap .mess>*:not(.pop),
    body[data-seq="1"] main>.sec-seq>.wrap .kk,
    body[data-seq="1"] main>.sec-seq>.wrap .kk-glabel,
    body[data-seq="1"] main>.sec-seq>.wrap .zahl{
      animation:seqtext linear both;animation-timeline:--sq;
      animation-range:entry 68% entry 97%}
    /* Die Ueberschrift steht immer sofort — in beiden Layoutformen. */
    body[data-seq="1"] main>.sec-seq .h2{animation:none}
  }
}

/* --- b) Festgehalten. Je Stufe eine Mindest-Fensterhoehe; die Stufe
       traegt hoehen.mjs nach einer Messung im Browser ein.
       `html.js` davor, weil die Stufe die Hoehe MIT zugeklappten
       Begriffs-Popups meint. Ohne JavaScript stehen die Definitionen offen
       und der Abschnitt ist deutlich hoeher — festgehalten wuerde er dann
       abschneiden. Ohne JavaScript laeuft der Abschnitt also durch; die
       Teile blenden trotzdem ein, das macht Fassung a) (12.10.). ------- */
@media (min-width:1024px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-600{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-600>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-640{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-640>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:680px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-680{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-680>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:720px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-720{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-720>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:760px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-760{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-760>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:800px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-800{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-800>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:840px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-840{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-840>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:880px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-880{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-880>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:920px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-920{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-920>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:960px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-960{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-960>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:1000px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-1000{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-1000>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:1040px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-1040{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-1040>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:1080px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-1080{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-1080>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:1120px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-1120{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-1120>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:1160px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-1160{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-1160>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:1200px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-1200{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-1200>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}
@media (min-width:1024px) and (min-height:1240px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js body[data-seq="1"] main>.sec-seq.h-1240{min-height:calc(var(--vh) * 2.1);view-timeline-name:--q;padding-top:0;padding-bottom:0}
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap{position:sticky;top:0;min-height:var(--vh);
      display:flex;flex-direction:column;justify-content:center;
      animation:seqhalt linear both;animation-timeline:--q}
    /* Die Teile haengen an der Haltestrecke statt an der eigenen
       Sichtbarkeit — sonst waeren sie da, bevor der Halt beginnt. */
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap>*:not(.h2):not(.pop):not(.mess):not(.kk-reihe):not(.kk-gruppe):not(.zahlen):not(.versetzt),
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap>.versetzt>*:not(.pop):not(.mess):not(.versetzt-frage),
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap>.versetzt>.versetzt-frage>*:not(.h2),
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap .mess>*:not(.pop),
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap .kk-glabel,
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap .zahl{animation-timeline:--q;animation-range:contain 36% contain 54%}
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap .answer{animation-range:contain 26% contain 42%}
    /* Karten und Gruppenetiketten staffeln ueber ihre durchgehende
       Nummer; nth-child zaehlt in jeder Gruppe neu. */
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap .kk,
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap .kk-glabel{
      animation-range:contain calc(30% + var(--i,0) * 5%) contain calc(48% + var(--i,0) * 5%)}
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap .quote{animation-range:contain 52% contain 70%}
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap .termin,
    html.js body[data-seq="1"] main>.sec-seq.h-1240>.wrap .buttons{animation-range:contain 58% contain 76%}
  }
}

/* Der Abschnitt selbst blendet am Rand des Halts auf und ab. */
@keyframes seqhalt{
  0%{opacity:0;transform:translateY(22px)}
  12%{opacity:1;transform:none}
  84%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-26px)}
}

/* --- Tippende Figur: die zweite bewusste Abweichung von E3 ------------
   Eine CSS-Endlosschleife, keine scrollgebundene Animation. Entschieden
   am 12.10., gilt nur auf der noindex-Bestaetigungsseite. Bei
   `prefers-reduced-motion: reduce` steht die Szene still — dieser ganze
   Block existiert dann nicht, und das SVG zeigt seinen Ruhezustand. */
@media (prefers-reduced-motion:no-preference){
  .tipp g [class^="tipp-"]{transform-box:view-box}
  .tipp-arm-r{transform-origin:92px 112px;animation:tippArm .34s ease-in-out infinite alternate}
  .tipp-arm-l{transform-origin:92px 112px;animation:tippArm .34s ease-in-out .17s infinite alternate}
  .tipp-kopf{transform-origin:92px 96px;animation:tippKopf 2.8s ease-in-out infinite}
  @keyframes tippArm{from{transform:rotate(-2.2deg)}to{transform:rotate(1.6deg)}}
  @keyframes tippKopf{0%,100%{transform:translateY(0)}50%{transform:translateY(1.6px)}}
  /* Die drei Bildschirmzeilen schreiben sich nacheinander und beginnen
     dann wieder von vorn — dieselbe Laenge fuer alle drei, damit sich die
     Strichmuster nicht verschieben. */
  .tipp-z1,.tipp-z2,.tipp-z3{stroke-dasharray:60;animation:tippZeile 5.4s linear infinite}
  .tipp-z2{animation-delay:1.1s}
  .tipp-z3{animation-delay:2.2s}
  @keyframes tippZeile{
    0%{stroke-dashoffset:60}
    22%{stroke-dashoffset:0}
    86%{stroke-dashoffset:0}
    100%{stroke-dashoffset:60}
  }
  .tipp-cursor{animation:tippCursor 1s steps(1,end) infinite}
  @keyframes tippCursor{0%,50%{opacity:1}50.01%,100%{opacity:0}}
}


/* =====================================================================
   Buehne: nur halten, wenn sie ins Fenster passt
   =====================================================================
   Gefunden am 13.10.2026 auf /referenzen/: die Buehne war 1003px hoch, der
   Halt min(100svh, 900px). `.schau-halt` zentriert mit `align-items:center`
   — der Ueberhang von 52px je Seite lag oben und unten DRAUSSEN, unten
   mitten im Absatz, der auf die Buehne folgt. Bei 768px Fensterhoehe
   118px, bei 600px 202px. `passung.mjs` hat das nicht gesehen, weil es
   Abschnitte prueft und nicht Buehnen; die Pruefung ist jetzt ergaenzt.
   Auf /webdesign/ ragten beide Buehnen bei 600px Fensterhoehe heraus.

   Dieselbe Loesung wie bei den Sequenz-Abschnitten: `hoehen.mjs` misst die
   Buehne im Browser und traegt `sh-<Stufe>` ein — die Fensterhoehe, ab der
   gehalten werden darf (Buehne + 80px Luft). `sh-0` heisst: passt nie,
   haelt nie. Fehlt die Klasse ganz, wurde nicht gemessen — davor liegt
   der Riegel in `einzeldateien.mjs`.

   `html.js` davor aus demselben Grund wie bei den Abschnitten: die Stufe
   meint die Hoehe MIT zugeklappten Begriffs-Popups. */
@media (min-width:1024px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-600{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-600>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-640{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-640>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:680px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-680{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-680>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:720px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-720{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-720>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:760px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-760{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-760>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:800px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-800{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-800>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:840px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-840{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-840>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:880px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-880{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-880>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:920px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-920{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-920>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:960px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-960{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-960>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:1000px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-1000{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-1000>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:1040px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-1040{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-1040>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:1080px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-1080{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-1080>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:1120px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-1120{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-1120>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:1160px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-1160{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-1160>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:1200px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-1200{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-1200>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}
@media (min-width:1024px) and (min-height:1240px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .schau.sh-1240{height:calc(var(--vh) * (.8 + var(--n) * .36));view-timeline-name:--schau}
    html.js .schau.sh-1240>.schau-halt{position:sticky;top:0;height:var(--vh);display:flex;align-items:center}
  }
}


/* ============================================================
   Navigation „Spur" (Entwurf 2), Richtung D.
   Quelle: design/richtungen/d/navi.css (nur der Spur-Teil).
   Index und Konsole sind nicht uebernommen; data-navi und der Proto-Streifen
   waren nur Vorschau-Geruest (PLAN §3, VERWORFEN.md).
   ============================================================ */
:root{--proto:0px}
:where(.spur) a:focus-visible,
:where(.spur) summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}

.spur{position:fixed;z-index:60;background:var(--bg-2);border-right:1px solid var(--border)}
.sp-in{display:flex;overflow:hidden}
.sp-logo{display:grid;place-items:center;text-decoration:none;flex:none}
.sp-logo span{width:30px;height:30px;border-radius:var(--r);background:var(--accent);color:#06090C;
  display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;font-weight:700}
.sp-nav a[aria-current]{position:relative}
.sp-nav a[aria-current]::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:16px;background:var(--accent);border-radius:0 2px 2px 0}
.sp-nav a,.sp-cta{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--muted);
  white-space:nowrap;transition:color var(--t),background var(--t)}
.sp-k{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-xs);
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:#6E858C;
  transition:color var(--t),background var(--t)}
.sp-t{font-size:14.5px}
.sp-nav a:focus-visible{color:var(--text)}
.sp-nav a:focus-visible .sp-k{color:var(--accent);background:var(--soft)}
.sp-nav a[aria-current]{color:var(--text)}
.sp-nav a[aria-current] .sp-k{background:var(--accent);color:#06090C;font-weight:600}
.sp-h{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.17em;color:#44565D}
.sp-cta .sp-k{background:var(--accent);color:#06090C;font-weight:600}
.sp-wort{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:#39484E;text-transform:uppercase}

@media (min-width:1024px){
  .rahmen{padding-left:212px}
  .spur{left:0;top:var(--proto);bottom:0;width:212px}
  .sp-in{flex-direction:column;height:100%;width:212px;padding:17px 0 18px}
  .sp-logo{width:212px;height:34px;place-items:center start;padding-left:22px}
  .sp-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin-top:22px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent)}
  .sp-nav::-webkit-scrollbar{display:none}
  .sp-nav ul{list-style:none;padding-bottom:11px;margin-bottom:11px;
    border-bottom:1px solid rgba(30,46,54,.55)}
  .sp-nav ul:last-of-type{border-bottom:0}
  .sp-nav a,.sp-cta{padding:6px 18px 6px 22px;gap:11px}
  .sp-h{padding:0 22px 7px}
  .sp-nav .sp-k{display:none}
  .sp-cta .sp-k{width:22px;height:22px;font-size:11px}
  .sp-t{font-size:14.5px}
  .sp-cta{margin-top:auto;padding-top:12px}
  .sp-wort{display:none}
}

@media (max-width:1023px){
  .rahmen{padding-bottom:78px}
  .spur{left:0;right:0;bottom:0;border-right:0;border-top:1px solid var(--border);
    background:#0A1014}
  .sp-in{flex-direction:row;align-items:center;gap:0;padding:0 0 0 4px;height:66px}
  .sp-logo{width:40px;height:40px}
  .sp-logo{display:none}
  .sp-nav{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;
    gap:4px;padding:0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity}
  .sp-nav a{scroll-snap-align:center}
  .sp-nav::-webkit-scrollbar{display:none}
  .sp-nav ul{list-style:none;display:flex;gap:4px}
  .sp-h{display:none}
  .sp-nav ul+ul{margin-left:4px;padding-left:8px;border-left:1px solid rgba(30,46,54,.7)}
  .sp-nav a{flex-direction:column;gap:4px;padding:8px 9px;border-radius:var(--r)}
  .sp-nav .sp-t{font-size:10.5px}
  .sp-cta{flex:none;flex-direction:column;gap:4px;padding:0 14px 0 10px;
    border-left:1px solid var(--border);height:66px;justify-content:center;color:var(--text)}
  .sp-cta .sp-t{font-size:10.5px}
  .sp-wort{display:none}
}

/* iPhone mit Home-Indikator: die Leiste darf nicht darunter liegen. */
@media (max-width:1023px){
  .spur{padding-bottom:env(safe-area-inset-bottom,0)}
  .rahmen{padding-bottom:calc(78px + env(safe-area-inset-bottom,0))}
}

/* Feinschliff untere Leiste. */
@media (max-width:1023px){
  .sp-nav a[aria-current]::before{display:none}
  .sp-nav{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
}

/* Die Rubriken in der Spur lagen bei 2,49:1. */
.sp-h{color:#7E9199}

@media (hover: hover) and (pointer: fine) {
  .sp-nav a:hover{color:var(--text)}
  .sp-nav a:hover .sp-k{color:var(--accent);background:var(--soft)}
}


/* ============================================================
   E10 — H1 an die Spalte binden (P0-Nachzug). cqi statt vw.
   ============================================================ */
.hero-text{container-type:inline-size}
.h1{font-size:clamp(34px,10cqi,62px)}
body[data-h1="lang"] .h1{font-size:clamp(30px,8.3cqi,50px)}
body[data-h1="sehr-lang"] .h1{font-size:clamp(26px,6.6cqi,40px)}

/* DESIGN.md §9 Punkt 6: der vierte Rhythmus-Schritt (Abschnittsabstand) stand
   als Zahl in .sec{padding:80px 0}/120px. Als Token --r-sec nachgetragen, damit
   die Raum-Skala vollstaendig ist. GLEICHER Wert — kein sichtbarer Unterschied. */
:root{--r-sec:80px}
@media (min-width:768px){:root{--r-sec:120px}}
.sec{padding:var(--r-sec) 0}


/* ============================================================
   Honeypot .hp (Variante a, A3) — unsichtbares Spam-Feld.
   ============================================================ */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}


/* ============================================================
   K32 — llms-Quelltext bricht bei schmalem Viewport um.
   ============================================================ */
.llms-pre{max-width:100%}
.lz{overflow-wrap:anywhere}

/* Der 3D-Aufricht-Kipp (rotateX) im from-Zustand der llmsAuf-Animation
   projiziert bei 375px eine zu breite Bildschirm-Huelle (gemessen: Layout 305px,
   getBoundingClientRect 609px) und loest K32 aus, obwohl sich der Kipp beim
   Hereinscrollen aufhebt. Unter 1024px — wo der llms-Durchlauf (llmsRollen)
   ohnehin nicht laeuft — ohne 3D: nur anheben und aufblenden. Desktop behaelt
   den Kipp (dort ist der Viewport breit genug, kein Ueberlauf). */
@media (prefers-reduced-motion:no-preference) and (max-width:1023px){
  @supports (animation-timeline:view()){
    .llms-rahmen{animation-name:llmsAufFlach}
  }
}
@keyframes llmsAufFlach{
  from{transform:translateY(26px) scale(.985);opacity:.4}
  to{transform:none;opacity:1}
}