/* ═══════════════════════════════════════════════════════════════════════════
   FORMWERK — die Bauteile.  Nur Regeln, keine Werte.

   Zweite Fassung, auf einem Raster statt auf Einzelfällen.

   Der Unterschied zur ersten: dort hatte jedes Bauteil sein eigenes
   Verhältnis — 5fr/6fr im Abschnittskopf, 7fr/5fr im Held, auto/1fr in der
   Bildunterschrift. Jedes für sich begründbar, zusammen ein Zufall. Und
   Zufall ist genau das, was eine Seite billig aussehen lässt: das Auge findet
   keine Wiederholung, an der es sich festhalten kann.

   Jetzt liegt alles auf ZWÖLF SPALTEN mit einer Rinne. Ein Bauteil bekommt
   eine Spannweite, keine eigene Aufteilung. Was ausbricht, bricht sichtbar
   aus — und nur dort, wo es etwas bedeutet.

   Vier Entscheidungen tragen das Blatt:
   1 · Archivo steht IMMER in Versalien. Alles andere ist Inter.
   2 · Es gibt keine Karte. Ordnung entsteht aus Haarlinien und Luft.
   3 · Farbe kommt ausschließlich aus den Bildern.
   4 · Jeder Abschnitt trägt eine Kapitelmarke: Nummer, Name, Haarlinie.

   Schichtenfolge aus basis.css: grund, wertetafel, aufbau, bauteile,
   bewegung, projekt
   ═══════════════════════════════════════════════════════════════════════════ */

@layer projekt {

  /* ══ 1 · Grundhaltung ═══════════════════════════════════════════════════ */

  html {
    background: var(--bg);
    /* Der Kopf klebt oben. Ohne diesen Vorlauf landet jedes Sprungziel
       darunter, und der Leser sieht die Überschrift nicht, die er
       angesteuert hat. */
    scroll-padding-block-start: calc(var(--kopf-hoehe) + var(--raum-m));
  }

  body { overflow-x: clip; }

  /* Archivo hat eine echte Breitenachse — das ist der Grund für genau diese
     Schrift: nur so lässt sich das Wortzeichen als Schrift nachbauen statt es
     als Bild einzubinden. `pretty` statt `balance`, weil `balance` eine
     Überschrift auch dann in zwei Zeilen teilt, wenn sie in eine gepasst
     hätte — bei zwei Wörtern sieht das wie ein Fehler aus. */
  h1, h2, h3, h4, h5, h6 {
    font-stretch: var(--breite-kopf);
    font-variation-settings: "wdth" 114;
    text-transform: uppercase;
    text-wrap: pretty;
  }
  /* Je größer, desto leichter — der optische Ausgleich, an dem sich feine von
     grober Typografie unterscheidet. */
  h1 { font-weight: var(--gewicht-display); }
  h2 { font-weight: var(--gewicht-titel); }
  h3, h4, h5, h6 { font-weight: var(--gewicht-unter); }

  p, li { max-width: var(--zeilenbreite); }
  .zahl { font-variant-numeric: tabular-nums; }

  /* BULLDOG steht wie FORMWERK immer in Versalien. Im Fließtext geht das über
     CSS, nicht über den Buchstabenbestand: im Quelltext steht „Bulldog", ein
     Vorleser sagt „Bulldog", und nur das Auge sieht Versalien. Ein Wort, das
     als BULLDOG im Text selbst stünde, buchstabieren manche Vorleser. */
  .wortmarke { text-transform: uppercase; letter-spacing: var(--sp-versal); }

  /* ══ 2 · Das Raster ═════════════════════════════════════════════════════
     Eine Bahn ist das Raster. Kinder bekommen eine Spannweite, sonst laufen
     sie über alle zwölf Spalten. Unter 720 px gibt es keine Spalten mehr —
     dort ist jede Aufteilung eine Behauptung, die der Bildschirm nicht
     einlöst. */
  .bahn {
    display: grid;
    grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
    column-gap: var(--rinne);
    /* Der Abstand INNERHALB eines Abschnitts bleibt kleiner als der zwischen
       zweien — sonst zerfällt ein Abschnitt in seine Einzelteile. Aber beide
       dürfen groß sein: nachdem ein Drittel des Textes weg ist, kann die
       Seite sich die Luft leisten, die sie vorher nicht hatte. */
    row-gap: var(--raum-xl);
    width: min(100% - 2 * var(--seitenrand), var(--seitenbreite));
    margin-inline: auto;
  }
  .bahn > * { grid-column: 1 / -1; }

  /* Die Spannweiten. Es gibt DREI, und das ist das ganze Gesetz:

         s-titel   Spalte 1–4    Überschrift eines Abschnitts
         s-text    Spalte 6–12   alles, was dazu zu sagen ist
         s-voll    Spalte 1–12   Bilder, Tabellen, Karten

     Vorher waren es acht: s-halb-l, s-halb-r, s-gross-l, s-klein-r, s-mitte,
     s-mitte-eng, s-liste, s-fussnote, s-text-weit — jede für sich begründbar,
     zusammen ein Zufall. Ein Abschnitt fing bei Spalte 1 an, der nächste bei
     4, der übernächste bei 8. Das liest sich nicht als Rhythmus, sondern als
     Unordnung, und es war der eigentliche Grund, warum die Seite
     zusammengewürfelt aussah.

     Jetzt beginnt JEDE Überschrift auf Spalte 1 und JEDER Satz auf Spalte 6.
     Über zwölf Abschnitte hinweg entstehen daraus zwei senkrechte Linien, die
     nirgends gezeichnet sind und die man trotzdem sieht. Das ist das Raster.

     Die Lücke zwischen Spalte 4 und 6 ist Absicht: zwei Blöcke ohne Lücke
     sind eine geteilte Fläche, zwei Blöcke mit Lücke sind zwei Gedanken.

     Zwei Stellen stehen außerhalb, und nur zwei: die Bühne oben, die kein
     Kapitel ist, und der Abschluss, der ein Punkt ist. */
  @media (min-width: 720px) {
    .s-voll   { grid-column: 1 / -1; }
    .s-titel  { grid-column: 1 / span 4; }
    .s-text   { grid-column: 6 / span 7; }

    /* Fußnote zu einem vollbreiten Element: sie beginnt, wo das Element
       beginnt. Vorher stand sie auf Spalte 6 unter einer Tabelle, die auf
       Spalte 1 anfing — und hing dadurch mitten im Nichts. */
    .s-fuss   { grid-column: 1 / -1; }

    /* Drei Anordnungen, alle auf demselben Raster. Die Abwechslung kommt
       daraus, WO Bild und Text stehen — nicht daraus, dass jeder Abschnitt
       eigene Spaltenbreiten erfindet. Das war der Unterschied zwischen
       Rhythmus und Durcheinander. */
    .a-bild-links  { grid-column: 1 / span 6; }
    .a-text-rechts { grid-column: 8 / span 5; align-self: center; }
    .a-text-links  { grid-column: 1 / span 5; align-self: center; }
    .a-bild-rechts { grid-column: 6 / span 7; }
    .a-mitte       { grid-column: 3 / span 8; }

  /* Zwei Ausrichtungen, mehr nicht. Und nie zwei Abschnitte hintereinander
     mit derselben — die Seite wechselt von Kapitel zu Kapitel zwischen
     linksbündig und mittig, damit kein Rhythmus zur Vorlage erstarrt. */
    /* ── Die Kompositionen ────────────────────────────────────────────────
       Sechs Anordnungen, nicht eine. Jeder Abschnitt bekommt eine, und keine
       zweimal hintereinander.

       Das Raster bleibt dasselbe — was wechselt, ist WO die Überschrift steht.
       Zwölfmal oben links ist kein Layout, das ist eine Vorlage; und man sieht
       einer Seite an, ob jemand für jeden Abschnitt entschieden hat oder ob
       er einmal entschieden und elfmal wiederholt hat. */

    /* 1 · Plakat — die Überschrift IST der Abschnitt, der Satz steht darunter */
    .k-plakat-titel { grid-column: 1 / span 9; }
    .k-plakat-satz  { grid-column: 1 / span 5; }

    /* 2 · Zurückgesetzt — der Block rückt nach rechts, der Satz bleibt
       linksbündig. Rechtsbündiger Fließtext hat auf jeder Zeile einen anderen
       Anfang; das Auge sucht ihn und liest langsamer. Auf dieser Seite gibt es
       darum nur zwei Ausrichtungen: linksbündig und mittig. */
    .k-rechts { grid-column: 7 / span 6; }

    /* 3 · Mittig — für Abschnitte, die eine Ansage sind, keine Erklärung.

       Eine zentrierte Überschrift mit linksbündigem Satz darunter ist kein
       Stilbruch, den man diskutieren kann — es sieht aus wie ein Versehen.
       Überschrift und Satz stehen deshalb IM SELBEN Block, und der Block
       richtet beides gleich aus. Ausgenommen sind nur Formularfelder: die
       sind Bedienelemente, keine Sätze, und die stehen immer linksbündig. */
    .k-mitte { grid-column: 3 / span 8; text-align: center; }
    .k-mitte p { margin-inline: auto; }
    /* Mittig gesetzt, linksbündig gesetzt: für Bedienbares unter einer
       zentrierten Überschrift. Zentrierte Eingabefelder füllt niemand aus. */
    .k-mitte-feld { grid-column: 3 / span 8; justify-self: center; }
    .k-mitte .knopfzeile { justify-content: center; }

    /* 4 · Versetzt — Überschrift rückt in die Bahn hinein statt am Rand zu kleben */
    .k-versetzt-titel { grid-column: 3 / span 4; }
    .k-versetzt-satz  { grid-column: 8 / span 5; }

    /* Außerhalb des Gesetzes — begründet, nicht gewachsen. */
    .s-gross-l   { grid-column: 1 / span 7; }   /* Bühne: Titel und Knopf   */
    .s-klein-r   { grid-column: 9 / span 4; }   /* Bühne: der Zähler daneben */
    .s-mitte-eng { grid-column: 3 / span 8; }   /* dieselbe Mitte wie .k-mitte */
    .s-fuss-a    { grid-column: 7 / span 3; }
    .s-fuss-b    { grid-column: 10 / span 3; }
  }

  /* ══ 3 · Abschnitt und Kapitelmarke ═════════════════════════════════════
     Drei Gewichte statt eines. Ein Abschnitt, der eine Aussage trägt, braucht
     eine Pause davor; einer, der eine Liste trägt, nicht. Alle gleich weit
     auseinanderzusetzen ist der Grund, warum eine Seite gleichmäßig und
     zugleich beliebig wirkt. */
  /* EIN Abstand für alle Abschnitte. Drei Gewichte waren der Grund, warum
     nichts einheitlich wirkte: der Leser kann aus einem Abstand keine Bedeutung
     lesen, wenn derselbe Abstand an anderer Stelle etwas anderes heißt. */
  /* Zwischen zwei Abschnitten steht deutlich mehr Luft als innerhalb eines.
     Erst dieser Unterschied macht aus einer Folge von Blöcken ein Dokument —
     gleiche Abstände überall lesen sich als eine einzige lange Spalte. */
  section { padding-block: var(--raum-3xl); }
  section.ohne-oben { padding-block-start: 0; }

  /* Die Kapitelmarke. Nummer, Name, Haarlinie über die volle Breite. Sie ist
     das Bauteil, das aus einer Folge von Blöcken ein Dokument macht: der
     Leser weiß immer, im wievielten von wie vielen Gedanken er steht. */
  .marke-zeile {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: var(--raum-s);
    padding-block-start: var(--raum-xs);
    border-block-start: var(--linien-staerke) solid var(--linie);
    margin-block-end: calc(var(--raum-l) * -1 + var(--raum-xl));
  }
  .marke-nr, .marke-name {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    line-height: var(--zh-label);
    letter-spacing: var(--sp-label);
    font-weight: var(--gewicht-kopf);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
    max-width: none;
  }
  .marke-nr { color: var(--ink); font-variant-numeric: tabular-nums; }
  .marke-name { color: var(--ink-2); }

  /* ══ 4 · Kopfleiste ═════════════════════════════════════════════════════ */

  /* Der Kopf steht über dem Titelbild, nicht davor. Ohne Grund und in der
     Bildfarbe — damit reicht das Bild bis an die Oberkante und wirkt wie ein
     Titelbild statt wie ein Banner unter einer Leiste.

     Sobald das Bild oben hinausgelaufen ist, setzt sich der Kopf auf seinen
     eigenen Grund. Den Umschaltpunkt setzt ein Beobachter, nicht eine
     geratene Scrollhöhe. */
  .kopf {
    position: fixed;
    inset-block-start: 0;
    inline-size: 100%;
    z-index: 30;
    background: transparent;
    color: var(--auf-bild);
    border-block-end: var(--linien-staerke) solid transparent;
    transition: background-color var(--mo-mittel) var(--mo-kurve-weich),
                color var(--mo-mittel) var(--mo-kurve-weich),
                border-color var(--mo-mittel) var(--mo-kurve-weich);
  }
  .kopf .marke, .kopf .kopf-nav a, .kopf .thema-schalter { color: currentColor; }
  .kopf .fortschritt { background: currentColor; }

  .kopf.fest {
    background: var(--bg);
    color: var(--ink);
    border-block-end-color: var(--linie);
  }

  .kopf-reihe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-m);
    min-block-size: var(--kopf-hoehe);
    grid-column: 1 / -1;
  }

  /* Zeilenabstand 1 nimmt dem Wortzeichen die unsichtbare Luft über und unter
     den Versalien — sonst sitzt es neben einem runden Schalter zu hoch. */
  .marke {
    font-family: var(--schrift-kopf);
    font-size: var(--g-3);
    line-height: 1;
    letter-spacing: var(--sp-marke);
    font-weight: var(--gewicht-unter);
    font-stretch: var(--breite-marke);
    font-variation-settings: "wdth" 125;
    color: var(--ink);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center;
  }

  .kopf-rechts { display: flex; align-items: center; gap: var(--raum-m); }
  .kopf-nav { display: none; gap: var(--raum-m); align-items: center; }
  @media (min-width: 900px) { .kopf-nav { display: flex; } }
  .kopf-nav a {
    font-size: var(--g-label);
    line-height: 1;
    letter-spacing: var(--sp-label);
    font-family: var(--schrift-kopf);
    font-weight: var(--gewicht-kopf);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
    padding-block-end: 0;
  }

  /* Ein Verweis, der beim Überfahren eine Linie von links auszieht. Die Linie
     ist ein Verlauf in der eigenen Textfarbe — damit kommt sie aus der
     Palette und nicht aus einem zweiten Farbwert. */
  .verweis-linie {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 var(--linien-staerke);
    transition: background-size var(--mo-mittel) var(--mo-kurve);
    padding-block-end: var(--raum-3xs);
  }
  .verweis-linie:hover,
  .verweis-linie:focus-visible { background-size: 100% var(--linien-staerke); }

  /* Nur das Zeichen. Kein Rand, kein Grund, keine Polsterung — ein Kreis um
     ein Symbol ist ein zweites Zeichen für etwas, das das Symbol schon sagt.
     Die Trefferfläche bleibt trotzdem bei den 24 px aus WCAG 2.2: sie steckt
     in der Kastengröße, nicht in einer sichtbaren Kapsel. */
  .thema-schalter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--knopf-hoehe);
    block-size: var(--knopf-hoehe);
    margin-inline-end: calc(var(--raum-2xs) * -1);
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: opacity var(--mo-kurz) var(--mo-kurve);
  }
  .thema-schalter:hover { opacity: 0.55; }
  .thema-schalter svg { inline-size: var(--zeichen); block-size: var(--zeichen); }

  .zeichen-stapel { display: grid; place-items: center; }
  .zeichen-hell, .zeichen-dunkel {
    grid-area: 1 / 1;
    transition: opacity var(--mo-kurz) var(--mo-kurve),
                transform var(--mo-mittel) var(--mo-kurve);
  }
  .zeichen-dunkel { opacity: 0; transform: rotate(-90deg); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) .zeichen-hell   { opacity: 0; transform: rotate(90deg); }
    :root:not([data-thema="hell"]) .zeichen-dunkel { opacity: 1; transform: none; }
  }
  :root[data-thema="dunkel"] .zeichen-hell   { opacity: 0; transform: rotate(90deg); }
  :root[data-thema="dunkel"] .zeichen-dunkel { opacity: 1; transform: none; }

  /* Der Fortschrittsstrich hängt an der Scrollposition des Dokuments — nicht
     an einem Programm. Ohne Unterstützung bleibt er auf null. */
  .fortschritt {
    position: absolute;
    inset-block-end: calc(-1 * var(--linien-staerke));
    inset-inline-start: 0;
    block-size: var(--linien-staerke);
    inline-size: 100%;
    background: var(--ink);
    transform-origin: 0 50%;
    transform: scaleX(0);
  }
  @supports (animation-timeline: scroll()) {
    .fortschritt { animation: strich-waechst linear both; animation-timeline: scroll(root block); }
  }
  @keyframes strich-waechst { to { transform: scaleX(1); } }

  /* ══ 5 · Handlungspunkte ════════════════════════════════════════════════
     Zwei Ränge, beide vollflächig. Der erste Rang ist der Verkauf — jeder Weg
     zur Reservierung trägt ihn. Ein Umriss-Knopf kommt nicht vor: auf einer
     schwarzweißen Seite ist er kaum von einem Etikett zu unterscheiden, und
     was wie eine Beschriftung aussieht, wird nicht gedrückt. */
  .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--raum-2xs);
    /* Die Höhe kommt AUSSCHLIESSLICH aus --knopf-hoehe. Mit zusätzlichem
       Polster addiert sich beides, und ein <button> fällt dann anders aus als
       ein <a> mit derselben Klasse — genau das war beim Wartelisten-Knopf
       passiert: 74 px statt 49. Ein Maß, eine Quelle. */
    block-size: var(--knopf-hoehe);
    padding-inline: var(--raum-m);
    padding-block: 0;
    border-radius: var(--r-knopf);
    border: var(--linien-staerke) solid transparent;
    background: var(--akzent);
    color: var(--auf-akzent);
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    line-height: 1;
    letter-spacing: var(--sp-label);
    font-weight: var(--gewicht-kopf);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    /* Eine Beschriftung, die umbricht, macht aus einem 49-px-Knopf einen
       von 74. Genau das war beim Wartelisten-Knopf passiert: das Feld war
       schmaler als der Text, der Text brach um, der Pfeil wurde auf 8 px
       gequetscht. Ein Knopf hat eine Zeile. */
    white-space: nowrap;
    transition: background-color var(--mo-kurz) var(--mo-kurve),
                color var(--mo-kurz) var(--mo-kurve),
                transform var(--mo-kurz) var(--mo-kurve);
  }
  .knopf:hover { background: var(--akzent-tief); transform: translateY(-1px); }
  .knopf:active { transform: none; }
  .knopf.leise { background: var(--akzent-leise); color: var(--auf-akzent-leise); }
  .knopf.leise:hover { background: var(--akzent-leise-tief); }

  .knopf-pfeil {
    inline-size: var(--zeichen-klein);
    block-size: var(--zeichen-klein);
    min-inline-size: var(--zeichen-klein);
    flex: none;
    transition: transform var(--mo-mittel) var(--mo-kurve);
  }
  .knopf:hover .knopf-pfeil { transform: translateX(var(--mo-pfeil)); }

  .knopfzeile { display: flex; flex-wrap: wrap; gap: var(--raum-xs); align-items: center; }

  /* ══ 6 · Etikett ════════════════════════════════════════════════════════ */

  /* Ohne Kapsel. Eine Kapsel um eine Beschriftung ist ein zweites Zeichen für
     etwas, das die Versalien und die Laufweite schon sagen — und zwei Zeichen
     für eine Aussage sind der Anfang von Unruhe. Sie bleibt genau dort, wo sie
     etwas trägt: auf dem Bild, wo sie den Grund liefert, und an der einen
     Empfehlung, die sich absetzen soll. */
  .etikett {
    display: inline-block;
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    line-height: var(--zh-label);
    letter-spacing: var(--sp-label);
    font-weight: var(--gewicht-kopf);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
    color: var(--ink-2);
    max-width: none;
    /* Kein `nowrap`. Es hielt kurze Beschriftungen auf einer Zeile und schob
       lange stumm aus dem Bild — auf 390 px war „…you choose one of these"
       nach dem T abgeschnitten. Kurze Beschriftungen brechen ohnehin nicht. */
    text-wrap: balance;
  }
  .etikett.gefuellt {
    background: var(--akzent);
    color: var(--auf-akzent);
    border-radius: var(--r-knopf);
    padding: var(--raum-3xs) var(--raum-xs);
  }
  .etikett.kapsel {
    border: var(--linien-staerke) solid currentColor;
    border-radius: var(--r-knopf);
    padding: var(--raum-3xs) var(--raum-xs);
  }

  /* ══ 6b · Wo einmal die Geisterschrift stand ════════════════════════════
     Ein riesiges Wort in Umrisslinien hinter dem Satz — als Idee reizvoll, in
     der Ausführung ein Fehler: die Kapitel-Haarlinie schnitt mitten durch die
     Buchstaben. Zwei Zierden, die sich gegenseitig zerlegen.

     Von beiden trägt nur eine etwas: die Haarlinie macht aus einer Folge von
     Blöcken ein Dokument. Das Wort war Dekor. Also weg damit — und nicht
     „kleiner gemacht" oder „verschoben", denn dann steht es immer noch da und
     tut immer noch nichts. */

  /* ══ 6c · Die Unterschrift ══════════════════════════════════════════════
     Als Maske, nicht als Bild. Eine eingebundene Grafik hat ihre eigene
     Farbe und bleibt im dunklen Modus schwarz auf Schwarz; eine Maske nimmt
     `currentColor` und stimmt in beiden Modi von allein.

     Sie steht an zwei Stellen und an keiner dritten. Eine Unterschrift, die
     auf jeder zweiten Seite steht, ist ein Logo — und ein Logo unterschreibt
     nichts. */
  .zug {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--raum-2xs);
    margin-block-start: var(--raum-s);
  }
  /* Bis die echte Zeichnung vorliegt, gibt es hier nichts zu zeigen — und
     eine leere Fläche in Unterschriftshöhe sieht aus wie ein Ladefehler.
     `vektorisieren.py` setzt das Merkmal am <html>, sobald die Datei da ist;
     bis dahin steht nur der gesetzte Name. */
  .zug-strich { display: none; }
  [data-unterschrift] .zug-strich {
    display: block;
    block-size: var(--zug-hoehe);
    aspect-ratio: var(--zug-verhaeltnis);
    background: var(--ink);
    -webkit-mask: var(--zug-quelle) no-repeat left center / contain;
    mask: var(--zug-quelle) no-repeat left center / contain;
  }
  .zug-name {
    font-size: var(--g-label);
    letter-spacing: var(--sp-label);
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .zug.klein { margin-block-start: var(--raum-xs); align-items: center; }
  .zug.klein .zug-strich { block-size: var(--zug-hoehe-klein); }

  /* ══ 6d · Die mitlaufende Leiste ════════════════════════════════════════
     Sie erscheint, sobald die Bühne oben aus dem Bild ist, und verschwindet
     wieder, sobald der Abschnitt zum Reservieren selbst zu sehen ist — dort
     steht der echte Knopf, und zwei Knöpfe für dieselbe Handlung
     nebeneinander sind einer zu viel.

     Sie sitzt UNTEN, nicht oben: auf dem Telefon ist der untere Rand die
     Zone, die der Daumen ohne Umgreifen erreicht. Oben sitzt der Kopf, und
     der hat seine eigene Aufgabe.

     Ohne Programm erscheint sie nie (`hidden` im Markup), und bei
     abbestellter Bewegung fährt sie nicht, sondern ist einfach da. */
  .leiste {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 20;
    background: var(--bg);
    border-block-start: var(--linien-staerke) solid var(--linie);
    padding-block: var(--raum-xs);
    padding-inline: var(--seitenrand);
    translate: 0 100%;
    transition: translate var(--mo-mittel) var(--mo-kurve);
  }
  .leiste[hidden] { display: none; }
  .leiste.da { translate: 0 0; }
  @media (prefers-reduced-motion: reduce) { .leiste { transition: none; } }

  .leiste-innen {
    max-inline-size: var(--seitenbreite);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-xs) var(--raum-m);
  }
  .leiste-satz {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--raum-3xs) var(--raum-2xs);
    font-size: var(--g-klein);
    line-height: var(--zh-klein);
    color: var(--ink-2);
    max-width: none;
  }
  .leiste-satz b { color: var(--ink); font-variant-numeric: tabular-nums; }
  /* Auf schmalen Geräten trägt der Knopf die Breite, der Satz steht darüber. */
  @media (max-width: 599px) {
    .leiste-innen { flex-direction: column; align-items: stretch; }
    .leiste .knopf { inline-size: 100%; }
  }

  /* ══ 6e · Der Zwischenruf ═══════════════════════════════════════════════
     Zwischen zwei Handlungsaufforderungen lagen auf dem Telefon bis zu
     5.965 px — sieben Bildschirme, auf denen jemand überzeugt sein kann und
     nichts findet, worauf er drücken könnte. Zwei Zwischenrufe schließen die
     zwei größten Lücken. Sie sind bewusst schmal: eine Zeile, ein Knopf,
     keine Argumente. Wer hier drückt, ist längst überzeugt. */
  .ruf { padding-block: var(--raum-xl); }
  .ruf-satz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--raum-s);
    font-size: var(--g-text);
    line-height: var(--zh-text);
    color: var(--ink-2);
    max-width: none;
  }
  .ruf-satz b { color: var(--ink); }

  /* Die Verweise in der Kopfleiste waren 12 px hoch. Mindestmaß für eine
     Tippfläche sind 44 — die Schrift bleibt klein, die Fläche wächst. */
  /* Alles, was allein steht und angetippt wird, bekommt die volle Fläche:
     Kopfleiste, Fußzeile, Rechtsverweise. Verweise MITTEN in einem Satz
     bleiben ausgenommen — die Norm nimmt sie aus, und ein 44 px hoher
     Verweis mitten im Fließtext reißt den Zeilenabstand auseinander. */
  .kopf-nav a,
  .fuss-spalte a,
  .fuss-schluss nav a { display: inline-flex; align-items: center; min-block-size: var(--tippflaeche); }

  /* ══ 7 · Bild ═══════════════════════════════════════════════════════════
     Kein Rahmen, kein Schatten, keine Rundung. Das Bild ist die einzige Farbe
     der Seite; alles, was man daneben zeichnet, nimmt ihm etwas weg. Die
     Fläche darunter ist der Platzhalter beim Laden.

     Zwei getrennte Eigenschaften bewegen es: `translate` trägt die Parallaxe,
     `scale` den Hover. Über `transform` ginge beides nicht gleichzeitig — eine
     laufende Animation darauf schluckt jeden Übergang. */
  .rahmen, .band {
    display: block;
    overflow: hidden;
    background: var(--flaeche);
    border-radius: var(--r-bild);
  }
  .rahmen, .band { position: relative; }

  .rahmen { aspect-ratio: 4 / 3; }
  .rahmen.quadrat { aspect-ratio: 1 / 1; }
  .rahmen.hoch    { aspect-ratio: 4 / 5; }
  .rahmen.breit   { aspect-ratio: 16 / 9; }
  .band  { inline-size: 100%; aspect-ratio: 21 / 9; }

  /* ── Der Streifen ────────────────────────────────────────────────────────
     Vier Bilder randlos nebeneinander, ohne ein Wort dazwischen. Er steht
     direkt unter der Bühne, weil die ersten Sekunden nicht dem Argument
     gehören, sondern dem Auto: erst sehen, dann lesen.

     Auf schmalen Geräten wird daraus ein Rollkasten statt vier Briefmarken —
     vier Bilder auf 390 px sind vier Bilder zu viel. */
  .streifen {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--linien-staerke);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .streifen::-webkit-scrollbar { display: none; }
  .streifen > * { scroll-snap-align: start; }
  @media (min-width: 720px) {
    .streifen { grid-auto-columns: 1fr; overflow: visible; }
  }
  .streifen .rahmen { aspect-ratio: 1 / 1; }
  /* Der Hinweis steht EINMAL, unter dem Streifen — dort, wo die Bilder
     anfangen. An jedem einzelnen Bild war es eine Beschriftung zu viel:
     wer es fünfzehnmal liest, liest es nach dem zweiten Mal nicht mehr. */
  .streifen-satz {
    grid-column: 1 / -1;
    margin-block-start: var(--raum-s);
    padding-inline: var(--seitenrand);
    font-size: var(--g-klein);
    line-height: var(--zh-klein);
    color: var(--ink-2);
    max-width: var(--zeilenbreite);
  }
  @media (max-width: 719px) { .band { aspect-ratio: 3 / 2; } }

  .rahmen img, .rahmen video, .band img, .band video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    scale: var(--bild-ruhe);
    transition: scale var(--mo-lang) var(--mo-kurve);
  }
  .rahmen:hover img, .band:hover img, .stueck:hover .rahmen img { scale: var(--bild-hover); }

  .bild-satz {
    margin-block-start: var(--raum-s);
    color: var(--ink-2);
    font-size: var(--g-klein);
    line-height: var(--zh-klein);
    letter-spacing: var(--sp-klein);
  }

  /* ══ 8 · Held ═══════════════════════════════════════════════════════════
     Die Bühne nimmt sich den Bildschirm. Sie ist das Erste und für dieses
     Angebot das Wichtigste — ein Streifen liest sich als Banner, nicht als
     Auftritt. `svh` statt `vh`, damit die Adresszeile auf dem Telefon nicht
     unten hineinschneidet. */
  .buehne {
    position: relative;
    inline-size: 100%;
    block-size: 100svh;
    min-block-size: 520px;
    overflow: hidden;
    background: var(--flaeche);
  }
  .buehne video, .buehne img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .buehne::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    block-size: calc(var(--kopf-hoehe) * 2.2);
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0));
    z-index: 1;
    pointer-events: none;
  }

  /* Schrift auf dem Bild braucht einen eigenen Grund. Ein Verlauf von unten
     ist der einzige, der das Bild nicht zerschneidet. */
  .buehne-schrift {
    position: absolute;
    inset: auto 0 0 0;
    padding-block: var(--raum-2xl) var(--raum-l);
    background: linear-gradient(to top,
      rgb(0 0 0 / 0.74) 0%, rgb(0 0 0 / 0.4) 38%, rgb(0 0 0 / 0) 100%);
    pointer-events: none;
  }
  .buehne-zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--raum-xs) var(--raum-m); grid-column: 1 / -1; }
  .buehne-schrift .etikett { color: var(--auf-bild); border-color: rgb(255 255 255 / 0.6); background: rgb(0 0 0 / 0.22); }
  .buehne-satz {
    color: var(--auf-bild);
    font-size: var(--g-klein);
    line-height: var(--zh-klein);
    letter-spacing: var(--sp-label);
    text-transform: uppercase;
    font-family: var(--schrift-kopf);
    font-weight: var(--gewicht-kopf);
    font-stretch: var(--breite-kopf);
    max-width: none;
  }

  .held-titel { margin-block-start: 0; }
  /* Kein eigener Wert: der Einstiegssatz der Bühne ist ein Vorspann wie
     jeder andere und nimmt dessen Farbe. */

  /* ══ 9 · Belegungsanzeige ═══════════════════════════════════════════════
     Der Satz „41 Plätze frei" ist eine Behauptung. Ein Anzeigeteil, das Zahl,
     Balken und Datum aus EINEM Wert rechnet, ist ein Stand. Der Punkt
     pulsiert, weil die Runde offen ist. Er zählt nichts herunter: eine
     Anzeige, die von selbst fällt, ist eine Falschangabe. */
  /* Ein Instrument, kein Satz. Fünfzig Striche für fünfzig Plätze, neun davon
     gefüllt — die Knappheit ist damit nicht behauptet, sondern abzählbar. Das
     ist der Unterschied zwischen „41 Plätze frei" als Text und als Anzeige:
     man kann sie nachzählen.

     Der Punkt pulsiert, weil die Runde offen ist. Er zählt nichts herunter:
     eine Anzeige, die von selbst fällt, ist eine Falschangabe. */
  .stand {
    display: grid;
    gap: var(--raum-s);
    align-content: start;
    padding-block: var(--raum-s);
    border-block: var(--linien-staerke) solid var(--linie);
  }
  .stand-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--raum-2xs);
  }
  .stand-marke { display: flex; align-items: center; gap: var(--raum-2xs); }
  .stand-punkt {
    inline-size: var(--punkt-groesse);
    block-size: var(--punkt-groesse);
    border-radius: var(--r-knopf);
    background: var(--ink);
    flex: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .stand-punkt { animation: pulsen calc(var(--mo-lang) * 2) var(--mo-kurve-weich) infinite; }
  }
  @keyframes pulsen {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(0.7); }
  }

  .stand-zahl {
    font-family: var(--schrift-kopf);
    font-size: var(--g-2);
    line-height: 0.9;
    letter-spacing: var(--sp-2);
    font-weight: var(--gewicht-titel);
    font-stretch: var(--breite-kopf);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    max-width: none;
    display: flex;
    align-items: baseline;
    gap: var(--raum-2xs);
  }
  .stand-einheit {
    font-size: var(--g-label);
    letter-spacing: var(--sp-label);
    text-transform: uppercase;
    color: var(--ink-2);
    font-weight: var(--gewicht-kopf);
  }

  /* Die Striche werden vom Programm gesetzt — eine Zahl im Markup, fünfzig
     Striche daraus. Ohne Programm bleibt der Kasten leer und die Zahl daneben
     sagt dasselbe. */
  /* ── Die Leiter ──────────────────────────────────────────────────────────
     Vorher standen hier fünfzig Striche. Man konnte sie abzählen, aber man
     konnte nicht ablesen, was man bezahlt — die drei Stufengrenzen waren drei
     etwas dunklere Striche unter siebenundvierzig hellen, ohne eine einzige
     Zahl daran. Es sah aus wie ein Strichcode, und es beantwortete die
     einzige Frage nicht, für die es da war.

     Jetzt sind es drei Felder, so breit wie die Stufe lang ist: fünfzehn,
     fünfzehn, zwanzig. Unter jedem steht die Spanne, der Preis und der
     Rabattsatz. Der Balken läuft durch alle drei hindurch. */
  /* Die volle Leiter steht EINMAL, im Preisabschnitt. In der Bühne und im
     Abschluss zeigt derselbe Zähler nur noch, was heute gilt — dort ist die
     Frage „wie viele sind noch frei und was kostet es jetzt", nicht „wie
     verläuft die Staffel". Drei vollständige Leitern auf einer Seite sind
     neun Preise und neun Prozentsätze für eine einzige Auskunft. */
  .stand.knapp .stand-leiter,
  .stand.knapp .stand-erklaerung { display: none; }
  .stand.knapp .stand-heute {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--raum-2xs) var(--raum-s);
  }
  .stand:not(.knapp) .stand-heute { display: none; }
  .stand-heute-zahl {
    font-family: var(--schrift-kopf);
    font-size: var(--g-3);
    line-height: 1;
    letter-spacing: var(--sp-3);
    font-weight: var(--gewicht-titel);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }

  .stand-leiter {
    display: flex;
    align-items: stretch;
    gap: var(--raum-2xs);
  }
  /* Die drei Felder sind so breit wie ihre Stufe lang ist: 15, 15, 20 von 50.
     Das ist Struktur, keine Laufzeitgröße — also steht es hier und nicht als
     `style` am Element. */
  .stand-feld {
    display: grid;
    gap: var(--raum-3xs);
    align-content: start;
    flex: var(--anteil, 1) 1 0;
    min-inline-size: 0;
  }
  .stand-feld:nth-child(1) { --anteil: 15; }
  .stand-feld:nth-child(2) { --anteil: 15; }
  .stand-feld:nth-child(3) { --anteil: 20; }
  .stand-rohr {
    display: block;
    block-size: var(--raum-2xs);
    background: var(--linie);
    margin-block-end: var(--raum-3xs);
  }
  /* Der Füllstand ist die EINZIGE Zahl hier, die niemand vorher kennt — sie
     hängt an data-vergeben. Sie steht darum als drei Eigenschaften am
     Zähler selbst, nicht als `style` an jedem der drei Felder. Eine
     Laufzeitzahl an einer Stelle statt an neun. */
  .stand-feld:nth-child(1) .stand-fuell { inline-size: var(--voll-1, 0%); }
  .stand-feld:nth-child(2) .stand-fuell { inline-size: var(--voll-2, 0%); }
  .stand-feld:nth-child(3) .stand-fuell { inline-size: var(--voll-3, 0%); }
  .stand-fuell {
    display: block;
    block-size: 100%;
    background: var(--ink);
    transition: inline-size var(--mo-lang) var(--mo-kurve);
  }
  @media (prefers-reduced-motion: reduce) { .stand-fuell { transition: none; } }

  .stand-spanne {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    line-height: var(--zh-label);
    letter-spacing: var(--sp-label);
    font-weight: var(--gewicht-kopf);
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
  }
  .stand-stufenpreis {
    font-family: var(--schrift-kopf);
    font-size: var(--g-3);
    line-height: 1.05;
    letter-spacing: var(--sp-3);
    font-weight: var(--gewicht-titel);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
    white-space: nowrap;
  }
  .stand-satz {
    font-size: var(--g-klein);
    line-height: var(--zh-klein);
    color: var(--ink-2);
  }

  /* Die Stufe, in der der Preis GERADE steht, trägt die Tinte. Ohne diese
     Auszeichnung sind drei Felder drei gleichwertige Angaben, und die Frage
     „was zahle ich jetzt" bleibt wieder offen. */
  .stand-feld.jetzt .stand-spanne,
  .stand-feld.jetzt .stand-stufenpreis { color: var(--ink); }
  .stand-feld.jetzt .stand-rohr { background: var(--linie-kraeftig); }

  /* Der erklärende Satz wechselt mit dem Feld, über dem die Maus steht. Ohne
     Zeiger — und ohne `:has()` — bleibt der Satz stehen, der ohnehin gilt. */
  .stand-erklaerung { display: grid; }
  .stand-erklaerung > * {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mo-mittel) var(--mo-kurve);
  }
  .stand-erklaerung > .e-live { opacity: 1; visibility: visible; }
  @media (hover: hover) {
    .stand-leiter:has(.stand-feld:nth-child(1):hover) ~ .stand-erklaerung > .e-live,
    .stand-leiter:has(.stand-feld:nth-child(2):hover) ~ .stand-erklaerung > .e-live,
    .stand-leiter:has(.stand-feld:nth-child(3):hover) ~ .stand-erklaerung > .e-live { opacity: 0; visibility: hidden; }
    .stand-leiter:has(.stand-feld:nth-child(1):hover) ~ .stand-erklaerung > .e-1,
    .stand-leiter:has(.stand-feld:nth-child(2):hover) ~ .stand-erklaerung > .e-2,
    .stand-leiter:has(.stand-feld:nth-child(3):hover) ~ .stand-erklaerung > .e-3 { opacity: 1; visibility: visible; }
  }

  .stand-preise {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-2xs) var(--raum-s);
  }
  .stand-jetzt {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    letter-spacing: var(--sp-label);
    text-transform: uppercase;
    font-weight: var(--gewicht-kopf);
    color: var(--ink);
  }
  .stand-jetzt b { font-weight: var(--gewicht-kopf); }
  .stand-naechst { color: var(--ink-2); }
  .stand-fuss { color: var(--ink-2); font-variant-numeric: tabular-nums; }

  /* ══ 10 · Bildstrecke ═══════════════════════════════════════════════════
     Ein Bild steht, per Klick wechselt es. Technisch ein Rollkasten mit
     Einrastung — und das ist Absicht: alle Bilder stehen im Dokument, keins
     ist verborgen. Wer kein Programm hat, wischt. */
  /* Die Tasten stehen UNTER der Strecke, rechts. Vorher standen sie darüber
     und schoben das Bild eine Zeile nach unten — eine Zeile, die nichts sagt.
     Jetzt folgt das Bild direkt auf die Überschrift, und die Steuerung sitzt
     dort, wo man sie nach dem Ansehen sucht. */
  .strecke-halter { display: grid; }
  .strecke-kopf {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-block-start: var(--raum-s);
    order: 2;
  }

  .strecke-steuer { display: flex; align-items: center; gap: var(--raum-s); flex: none; }
  .strecke-stand {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    line-height: 1;
    letter-spacing: var(--sp-label);
    font-weight: var(--gewicht-kopf);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    margin-inline-end: var(--raum-2xs);
    max-width: none;
  }
  .strecke-taste {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--knopf-hoehe);
    block-size: var(--knopf-hoehe);
    border: var(--feld-linie);
    border-radius: var(--r-knopf);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--mo-kurz) var(--mo-kurve),
                color var(--mo-kurz) var(--mo-kurve),
                border-color var(--mo-kurz) var(--mo-kurve),
                opacity var(--mo-kurz) var(--mo-kurve);
  }
  .strecke-taste:hover { background: var(--akzent); color: var(--auf-akzent); border-color: var(--akzent); }
  .strecke-taste[disabled] { opacity: var(--deckkraft-gesperrt); cursor: default; }
  .strecke-taste[disabled]:hover { background: transparent; color: var(--ink); border-color: var(--linie-feld); }
  .strecke-taste svg { inline-size: var(--zeichen-klein); block-size: var(--zeichen-klein); }

  .strecke {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .strecke::-webkit-scrollbar { display: none; }
  .stueck { scroll-snap-align: start; }
  .stueck-text {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-xs);
    margin-block-start: var(--raum-m);
  }
  @media (min-width: 900px) {
    .stueck-text { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--raum-m); align-items: baseline; }
  }
  .stueck-text p { color: var(--ink-2); }

  /* ══ 11 · Die Stufen ════════════════════════════════════════════════════
     Ein Preisvergleich muss vergleichbar sein. Vorher lag der Inhalt jeder
     Karte hinter einem Klick — dann sieht man nie, was der Unterschied ist,
     und genau dafür steht die Tabelle da. Jetzt liegt alles offen.

     Was stattdessen die Aufmerksamkeit führt, ist der Fokus: worüber die Maus
     steht, tritt hervor, alles andere tritt zurück. Das ist die Bewegung, die
     eine Entscheidung unterstützt, statt sie zu verstecken.

     Drei Stufen, und die mittlere ist die gemeinte. Der Kompromisseffekt hat
     zwei Anteile, die sich messbar trennen lassen: einen über die WERTE (die
     mittlere Option liegt zwischen den anderen) und einen über die LAGE (sie
     steht in der Mitte des Blicks). Bei vier Spalten gibt es keine Mitte, und
     der zweite Anteil fällt ersatzlos weg. */
  .wahl {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-l) var(--rinne);
  }
  @media (min-width: 900px) {
    .wahl { grid-template-columns: repeat(3, 1fr); }
    /* So viele Zeilen, wie eine Karte Kinder hat. Eine zu wenig, und zwei
       Kinder landen übereinander. */
    .wahl { grid-template-rows: auto auto auto auto 1fr auto auto; }
    .wahl-karte { grid-row: span 7; grid-template-rows: subgrid; }

    /* Sieben Zeilen: Bild, Kopf, Rabatt, Preis, späterer Preis, Liste, Knopf.
       Beide Knöpfe führen zur selben Reservierung — die Karte ist die Absicht,
       nicht der Kauf. Ohne Knopf war die Karte eine Sackgasse: man vergleicht,
       entscheidet sich innerlich und findet dann nichts zum Drücken. */
    /* Sechs Zeilen: Bild, Kopf, Rabatt, Preis, späterer Preis, Liste. Das
       Bild steht oben, weil die Frage „was kaufe ich" vor der Frage „was
       kostet es" kommt — und weil zwei Karten ohne Bild zwei Preislisten
       sind, keine zwei Produkte. */
    /* Sechs Zeilen: Bild, Kopf, Preis, späterer Preis, Liste, Knopf. Die
       Rabattmarke ist weg — sie sagte dasselbe wie der durchgestrichene Preis
       eine Zeile darunter, und drei Zahlen für eine Auskunft sind zwei zu viel. */
    .wahl.zwei { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto auto auto 1fr auto; }
    .wahl.zwei .wahl-karte { grid-row: span 6; }
  }

  .wahl-karte {
    display: grid;
    gap: var(--raum-xs);
    align-content: start;
    padding-block-start: var(--raum-s);
    border-block-start: calc(var(--linien-staerke) * 2) solid var(--linie);
    transition: opacity var(--mo-mittel) var(--mo-kurve),
                border-color var(--mo-mittel) var(--mo-kurve);
  }
  /* Die mittlere Stufe trägt dauerhaft die Tinte — sie ist die gemeinte,
     nicht die zufällig überfahrene. */
  .wahl-karte.markiert { border-block-start-color: var(--ink); }

  @media (hover: hover) {
    .wahl:hover .wahl-karte:hover,
    .wahl:focus-within .wahl-karte:focus-within { border-block-start-color: var(--ink); }
  }

  .wahl-kopf { display: grid; gap: var(--raum-3xs); justify-items: start; align-content: end; }

  /* Der Rabatt ist die Hauptaussage, nicht eine Fußnote. Er steht als eigene
     Zeile über dem Preis, in Tinte auf Fläche. Daneben der Betrag, den man
     spart: bei vierstelligen Käufen wirkt die absolute Ersparnis stärker als
     der Prozentsatz, und beide zusammen stärker als jeder für sich. */
  .rabatt-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2xs); }
  .rabatt {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    letter-spacing: var(--sp-label);
    font-weight: var(--gewicht-kopf);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
    background: var(--akzent);
    color: var(--auf-akzent);
    border-radius: var(--r-knopf);
    padding: var(--raum-3xs) var(--raum-xs);
    white-space: nowrap;
  }
  .spart {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    letter-spacing: var(--sp-label);
    text-transform: uppercase;
    font-weight: var(--gewicht-kopf);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }

  .wahl-titel {
    font-family: var(--schrift-kopf);
    font-size: var(--g-3);
    line-height: var(--zh-3);
    letter-spacing: var(--sp-3);
    font-weight: var(--gewicht-unter);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
    color: var(--ink);
  }
  .wahl-preis {
    font-family: var(--schrift-kopf);
    font-size: var(--g-2);
    line-height: 0.95;
    letter-spacing: var(--sp-2);
    font-weight: var(--gewicht-titel);
    font-stretch: var(--breite-kopf);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  .wahl-einheit {
    font-size: var(--g-label);
    letter-spacing: var(--sp-label);
    text-transform: uppercase;
    color: var(--ink-2);
    font-weight: var(--gewicht-kopf);
  }
  .wahl-spaeter { color: var(--ink-2); font-size: var(--g-klein); }
  .wahl-spaeter b { text-decoration: line-through; font-weight: var(--gewicht-normal); }
  .wahl-summe {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    letter-spacing: var(--sp-label);
    text-transform: uppercase;
    font-weight: var(--gewicht-kopf);
    color: var(--ink);
  }
  .wahl-karte .knopf { align-self: end; margin-block-start: var(--raum-s); }

  /* Was in jeder Stufe steckt — offen, nicht hinter einem Klick. */
  .dabei { display: grid; gap: var(--raum-2xs); list-style: none; align-content: start; }

  /* Was in jeder Karte gleich stand, steht jetzt einmal quer darunter. Zwölf
     identische Zeilen nebeneinander waren der Grund, warum man die
     Unterschiede zwischen den Karten nicht gefunden hat: das Auge vergleicht
     zuerst, was gleich aussieht, und findet dann nichts. */
  .dabei.quer {
    grid-template-columns: 1fr;
    gap: var(--raum-s) var(--rinne);
    padding-block-start: var(--raum-s);
    border-block-start: var(--linien-staerke) solid var(--linie);
    margin-block-start: var(--raum-s);
  }
  @media (min-width: 720px) { .dabei.quer { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .dabei.quer { grid-template-columns: repeat(4, 1fr); } }
  .dabei li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--raum-2xs);
    align-items: start;
    max-width: none;
    font-size: var(--g-klein);
    line-height: var(--zh-klein);
    color: var(--ink-2);
  }
  .dabei svg {
    inline-size: var(--zeichen-klein);
    block-size: var(--zeichen-klein);
    margin-block-start: var(--zeichen-versatz);
    flex: none;
    color: var(--ink);
  }

  /* ══ 11b · Der Umschalter ═══════════════════════════════════════════════
     Links eine Liste von Punkten, rechts das Bild und der Satz dazu. Wer auf
     einen Punkt klickt, wechselt beides. Dieselbe Bauart wie die Wahl der
     Zahlwege: Radioknöpfe und `:has()`, also ohne Programm — wer kein
     JavaScript hat, kann trotzdem umschalten.

     Warum überhaupt: fünf Absätze über Material und Aufbau liest niemand am
     Stück. Fünf Punkte, von denen man den anklickt, der einen betrifft,
     schon. */
  .umschalter { display: grid; grid-template-columns: 1fr; gap: var(--raum-m); border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  @media (min-width: 900px) { .umschalter { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--raum-l); } }
  .umschalter legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

  .umschalt-liste { display: grid; align-content: start; border-block-start: var(--linien-staerke) solid var(--linie); }
  .umschalt-punkt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-s);
    padding-block: var(--raum-s);
    border-block-end: var(--linien-staerke) solid var(--linie-fein);
    cursor: pointer;
    color: var(--ink-2);
    transition: color var(--mo-kurz) var(--mo-kurve);
  }
  .umschalt-punkt input { position: absolute; opacity: 0; pointer-events: none; }
  .umschalt-punkt:hover { color: var(--ink); }
  .umschalt-name {
    font-family: var(--schrift-kopf);
    font-size: var(--g-3);
    line-height: var(--zh-3);
    letter-spacing: var(--sp-3);
    font-weight: var(--gewicht-unter);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
  }
  .umschalt-nr {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    letter-spacing: var(--sp-label);
    font-weight: var(--gewicht-kopf);
    font-variant-numeric: tabular-nums;
    opacity: 0.55;
  }
  .umschalter:has(#stoff-1:checked) .p-1,
  .umschalter:has(#stoff-2:checked) .p-2,
  .umschalter:has(#stoff-3:checked) .p-3,
  .umschalter:has(#stoff-4:checked) .p-4,
  .umschalter:has(#stoff-5:checked) .p-5 { color: var(--ink); }
  .umschalt-punkt:has(input:focus-visible) { outline: calc(var(--linien-staerke) * 2) solid var(--fokus); outline-offset: var(--raum-2xs); }

  .umschalt-buehne { display: grid; }
  .umschalt-blatt { grid-area: 1 / 1; display: grid; gap: var(--raum-s); align-content: start; opacity: 0; visibility: hidden; transition: opacity var(--mo-mittel) var(--mo-kurve); }
  .umschalter:has(#stoff-1:checked) .b-1,
  .umschalter:has(#stoff-2:checked) .b-2,
  .umschalter:has(#stoff-3:checked) .b-3,
  .umschalter:has(#stoff-4:checked) .b-4,
  .umschalter:has(#stoff-5:checked) .b-5 { opacity: 1; visibility: visible; }

  /* ══ 11b · Der Platz halten ═════════════════════════════════════════════
     Ein Block, ein Betrag, ein Knopf.

     Vorher standen hier drei Karten mit drei Preisen, drei Anzahlungen und
     drei Knöpfen. Das verlangte eine Entscheidung zu dem Zeitpunkt, an dem
     der Leser sie am schlechtesten treffen kann: das Teil ist noch nicht
     gebaut, er hat es nie an seinem Auto gesehen, und zwei der drei Optionen
     enthalten Teile, die es noch gar nicht gibt.

     Links der Betrag und der Knopf, rechts, was der Platz festhält. Zwei
     Spalten, nicht drei Karten — es gibt nichts zu vergleichen. */
  .halten {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-l) var(--rinne);
    padding-block-start: var(--raum-s);
    border-block-start: calc(var(--linien-staerke) * 2) solid var(--ink);
  }
  @media (min-width: 720px) { .halten { grid-template-columns: 5fr 6fr; } }

  .halten-teil { display: grid; gap: var(--raum-2xs); align-content: start; }
  .halten-zahl {
    font-family: var(--schrift-kopf);
    font-size: var(--g-1);
    line-height: var(--zh-1);
    letter-spacing: var(--sp-1);
    font-weight: var(--gewicht-display);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    max-width: none;
  }
  .halten-satz { color: var(--ink-2); max-width: none; }
  .halten-teil .knopfzeile { margin-block-start: var(--raum-xs); }
  .wahl-karte .knopf { justify-self: start; margin-block-start: var(--raum-s); }

  /* ══ 11d · Die Gegenüberstellung ════════════════════════════════════════════
     Vor „11c · Die Passung" in css/formwerk.css einsetzen.

     Der Vorteil eines Founders-Platzes stand an vier Stellen: die Leiter im
     Preisabschnitt, „40 % forever" in einem Absatz, „25 % forever" in einer
     Aufzählung, die Streichpreise auf den Karten. Jede Angabe für sich war
     richtig — zusammen gesehen hat sie niemand.

     Hier steht sie einmal, als das, was sie ist: zwei Spalten, links was ein
     Founder zahlt, rechts was alle danach zahlen. Den Unterschied muss man
     nicht ausrechnen, man sieht ihn zeilenweise. */
  .wert {
    display: grid;
    border-block-start: calc(var(--linien-staerke) * 2) solid var(--ink);
  }
  .wert-zeile {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--raum-3xs) var(--raum-s);
    padding-block: var(--raum-s);
    border-block-end: var(--linien-staerke) solid var(--linie-fein);
    transition: opacity var(--mo-mittel) var(--mo-kurve);
  }
  @media (min-width: 720px) {
    .wert-zeile { grid-template-columns: minmax(0, 1fr) 10rem 10rem; align-items: baseline; }
    .wert-dann, .wert-jetzt { text-align: right; }
  }
  .wert-was { color: var(--ink); max-width: none; }
  .wert-dann, .wert-jetzt { font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* Die Founders-Spalte trägt die Tinte, die andere tritt zurück. Ohne diesen
     Unterschied sind es zwei gleichwertige Angaben, und der Blick weiß nicht,
     welche die gemeinte ist. */
  .wert-jetzt { color: var(--ink); font-weight: var(--gewicht-kopf); }
  .wert-dann  { color: var(--ink-2); }

  .wert-kopf { border-block-end-color: var(--linie); }
  .wert-kopf > * {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    letter-spacing: var(--sp-label);
    text-transform: uppercase;
    font-weight: var(--gewicht-kopf);
    color: var(--ink-2);
  }

  /* Die Summe steht ÜBER der Tabelle, nicht darunter — wer die Zahl zuerst
     sieht, liest die Tabelle als Beleg statt als Rechenaufgabe. */
  /* „$1,030" allein, groß und in Archivo, liest sich als DER PREIS — die
     Beschriftung darunter kommt zu spät, da hat das Auge die Zahl schon
     eingeordnet. Sie steht deshalb DARÜBER: „You save" wird zuerst gelesen
     und stellt die Zahl richtig, bevor sie falsch verstanden wird.

     Und eine Stufe kleiner: auf derselben Größe wie die Überschriften
     konkurriert sie mit ihnen und behauptet, die Hauptaussage zu sein. */
  .wert-summe { display: grid; gap: var(--raum-3xs); justify-items: start; }
  .wert-marke { color: var(--ink); }
  .wert-zahl {
    font-family: var(--schrift-kopf);
    font-size: var(--g-2);
    line-height: 1.05;
    letter-spacing: var(--sp-2);
    font-weight: var(--gewicht-titel);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    max-width: none;
  }

  /* ══ 11c · Die Passung ══════════════════════════════════════════════════
     Zwei Spalten: was passt und was heute noch nicht passt. Beide gleich
     gebaut, beide gleich laut.

     Das ist der einzige Block auf der Seite, der bewusst NEIN sagt. Er steht
     früh und ungeschminkt, weil die teuerste Rückabwicklung die ist, bei der
     jemand ein Teil für das falsche Auto bestellt hat — und weil eine Marke,
     die ihre Grenze zuerst nennt, für alles Übrige glaubwürdiger wird. */
  .passung {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--raum-l) var(--rinne);
  }
  @media (min-width: 720px) { .passung { grid-template-columns: repeat(2, 1fr); } }

  /* Vorher war der Unterschied zwischen „gebaut" und „nicht gebaut" eine
     Haarlinie in Tinte gegen eine in Grau, plus zwei kleine Beschriftungen.
     Das ist zu wenig für die wichtigste Auskunft des Abschnitts: an dieser
     Stelle entscheidet sich, ob der Leser überhaupt Kunde sein kann.

     Jetzt trägt die zutreffende Spalte eine gefüllte Fläche und ein Zeichen,
     die andere bleibt offen. Zwei Zustände, drei Unterschiede: Fläche,
     Zeichen, Wortlaut. */
  /* Die Fläche bekommt NUR die Spalte, die zutrifft. Sie ist damit selbst
     das Zeichen: was gebaut wird, liegt vorn; was nicht, bleibt offen. Zwei
     gleich behandelte Kästen hätten die Frage „welches ist meins" wieder auf
     die Beschriftung abgewälzt.

     Was hier NICHT steht: eine gefüllte --akzent-Fläche für die zutreffende
     Spalte. Im dunklen Modus ist --akzent weiß, und dann steht eine weiße
     Platte auf einer schwarzen Seite, auf der es sonst keine gibt. */
  .passung-teil {
    display: grid;
    gap: var(--raum-2xs);
    align-content: start;
    transition: border-color var(--mo-mittel) var(--mo-kurve),
                opacity var(--mo-mittel) var(--mo-kurve);
  }
  /* Die zutreffende Spalte muss sich abheben, ohne die Farbwelt zu verlassen.
     Eine gefüllte --akzent-Fläche tut genau das: im dunklen Modus ist
     --akzent WEISS, und dann steht eine weiße Platte auf einer schwarzen
     Seite, auf der es sonst keine gibt.

     Stattdessen dreimal derselbe Gedanke, in beiden Modi tragfähig: der
     Balken oben in Tinte statt Haarlinie, die Schrift in Tinte statt Grau,
     das Zeichen gefüllt statt offen. */
  .passung-teil.gilt {
    border-block-start: calc(var(--linien-staerke) * 4) solid var(--ink);
  }
  .passung-teil.gilt .passung-satz,
  .passung-teil.gilt .passung-marke { color: var(--ink); }

  .passung-teil.offen {
    padding-block-start: var(--raum-s);
    border-block-start: var(--linien-staerke) solid var(--linie-kraeftig);
  }
  .passung-teil.offen .passung-satz,
  .passung-teil.offen .passung-marke { color: var(--ink-2); }

  .passung-marke {
    display: flex;
    align-items: center;
    gap: var(--raum-2xs);
    margin-block-end: var(--raum-2xs);
  }
  .passung-marke svg { inline-size: var(--zeichen); block-size: var(--zeichen); flex: none; }
  .passung-satz {
    font-family: var(--schrift-kopf);
    font-size: var(--g-3);
    line-height: var(--zh-3);
    letter-spacing: var(--sp-3);
    font-weight: var(--gewicht-unter);
    text-transform: uppercase;
    color: var(--ink);
    max-width: none;
  }
  .passung-teil p.klein { color: var(--ink-2); }
  .passung-teil .knopfzeile { margin-block-start: var(--raum-xs); }

  /* Die knappe Wiederholung: eine Zeile, überall dort, wo jemand gleich auf
     einen Knopf drückt. Sie steht in Versalien wie eine Beschriftung, damit
     sie nicht als Satz gelesen und damit überlesen wird. */
  .passung-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-3xs) var(--raum-xs);
    align-items: baseline;
    padding-block: var(--raum-xs);
    border-block: var(--linien-staerke) solid var(--linie);
    font-size: var(--g-label);
    letter-spacing: var(--sp-label);
    text-transform: uppercase;
    font-family: var(--schrift-kopf);
    font-weight: var(--gewicht-kopf);
    color: var(--ink-2);
    max-width: none;
  }
  .passung-zeile b { color: var(--ink); font-weight: var(--gewicht-kopf); }

  /* In der Preiskarte: keine Linien, nur die Angabe. Zwei Rahmen um dieselbe
     Aussage sind ein Rahmen zu viel. */
  .wahl-karte .passung-zeile { border: 0; padding-block: 0; }

  /* ══ 11e · Die Kasse ════════════════════════════════════════════════════
     Nur auf reservieren.html. Zwei Spalten: links die Begründung, rechts die
     Rechnung. Die Rechnung bleibt beim Scrollen stehen — wer unten die Frage
     „was passiert nach dem Klick" liest, muss den Betrag nicht suchen, für
     den er sie liest.

     Auf schmalen Geräten kippt die Reihenfolge: erst die Rechnung, dann die
     Begründung. Wer die Seite mit Kaufabsicht öffnet, soll nicht an drei
     Argumenten vorbeiscrollen müssen. */
  .kasse { display: grid; gap: var(--raum-l) var(--rinne); }
  @media (min-width: 900px) {
    .kasse { grid-template-columns: 7fr 5fr; align-items: start; }
  }

  /* Nichts klebt. Ein festgesetzter Kasten schiebt sich beim Scrollen an
     fremdem Inhalt vorbei und liegt am Ende über Dingen, zu denen er nicht
     gehört — das ist schlechter als gar keiner.

     Der Knopf bleibt trotzdem erreichbar: dafür ist die mitlaufende Leiste
     unten da, dasselbe Bauteil wie auf der Startseite. Sie liegt UNTER dem
     Inhalt statt darin. */

  .kasse-spalte { display: grid; gap: var(--raum-s); }
  /* ── Der Kasten ──────────────────────────────────────────────────────────
     Eine Fläche statt eines Rahmens. Er hebt heraus, was kein Fließtext ist:
     eine Anzeige, ein Formular, eine Rechnung. Kein Rand, kein Schatten — die
     Fläche allein trägt, und sie ist im dunklen Modus eine Stufe HELLER als
     der Grund, im hellen eine Stufe dunkler. Beides derselbe Gedanke: das
     Herausgehobene liegt vorn.

     Sparsam verwenden. Drei Kästen auf einem Bildschirm sind keine Hervorhebung
     mehr, sondern ein Raster. */
  .kasten {
    padding: var(--raum-m);
    background: var(--flaeche);
  }
  @media (max-width: 599px) { .kasten { padding: var(--raum-s); } }
  /* Fläche UND Haarlinie wären zwei Zeichen für dieselbe Abgrenzung. Wer den
     Kasten bekommt, gibt die Linien ab. */
  .stand.kasten { border-block: 0; padding-block: var(--raum-m); }
  .formular.kasten { max-inline-size: none; }
  .formular.kasten > * { max-inline-size: var(--zeilenbreite); }

  .kasse-rechnung {
    display: grid;
    gap: var(--raum-s);
    padding: var(--raum-m);
    background: var(--flaeche);
  }
  .kasse-posten {
    display: grid;
    gap: var(--raum-2xs);
    padding-block-end: var(--raum-s);
    border-block-end: var(--linien-staerke) solid var(--linie);
  }
  .kasse-zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-s);
  }
  .kasse-zeile > :last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .kasse-jetzt { align-items: baseline; }
  .kasse-jetzt .kasse-betrag {
    font-family: var(--schrift-kopf);
    font-size: var(--g-2);
    line-height: 1;
    letter-spacing: var(--sp-2);
    font-weight: var(--gewicht-titel);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  .kasse-rechnung .knopf { inline-size: 100%; }

  /* Die Zusagen stehen NEBEN dem Knopf, nicht drei Bildschirme darüber. Ein
     Sicherheitsversprechen wirkt an der Stelle, an der die Angst entsteht.
     Dasselbe Bauteil trägt auf der Startseite unter den Karten. */
  .sicher { display: grid; gap: var(--raum-2xs); }
  .sicher li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--raum-2xs);
    align-items: start;
    font-size: var(--g-klein);
    line-height: var(--zh-klein);
    color: var(--ink-2);
  }
  .sicher svg { inline-size: var(--zeichen); block-size: var(--zeichen); color: var(--ink); margin-block-start: 0.15em; flex: none; }
  @media (min-width: 720px) {
    .sicher.quer { grid-template-columns: repeat(4, 1fr); gap: var(--raum-m); }
  }

  /* ── Die Bildfolge auf der Buchungsseite ─────────────────────────────────
     Vier Aufnahmen, übereinander gestapelt, eine sichtbar. Sie wechselt von
     allein — wer auf einer Kaufseite ist, soll nicht klicken müssen, um zu
     sehen, was er kauft. Bei abbestellter Bewegung steht sie still. */
  .folge { position: relative; display: grid; }
  .folge .rahmen { grid-area: 1 / 1; opacity: 0; transition: opacity var(--mo-lang) var(--mo-kurve); }
  .folge .rahmen.da { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .folge .rahmen { transition: none; } }
  .folge-punkte {
    position: absolute;
    inset-block-end: var(--raum-s);
    inset-inline-start: 50%;
    translate: -50% 0;
    display: flex;
    gap: var(--raum-2xs);
  }
  .folge-punkt {
    inline-size: var(--punkt-groesse);
    block-size: var(--punkt-groesse);
    border-radius: var(--r-knopf);
    background: var(--auf-bild);
    opacity: 0.4;
    transition: opacity var(--mo-mittel) var(--mo-kurve);
  }
  .folge-punkt.da { opacity: 1; }

  /* Der Kopf der Kasse führt nichts weg. Eine Kaufseite mit voller Navigation
     bietet fünf Wege hinaus und einen hinein. */
  .kopf.kasse-kopf { position: static; background: var(--bg); border-block-end: var(--linien-staerke) solid var(--linie); }
  .kopf.kasse-kopf .marke { color: var(--ink); }
  /* Ohne Maß nimmt ein eingebettetes SVG seine eigene Größe an — hier waren
     das 26 px neben einer 13-px-Zeile, und der Text brach dreizeilig um. Ein
     Zeichen in einer Zeile bekommt IMMER eine Größe und die Zeile ein
     Umbruchverbot. */
  .kasse-zurueck {
    display: inline-flex;
    align-items: center;
    gap: var(--raum-2xs);
    min-block-size: var(--tippflaeche);
    white-space: nowrap;
  }
  .kasse-zurueck svg {
    inline-size: var(--zeichen-klein);
    block-size: var(--zeichen-klein);
    flex: none;
  }

  /* ══ 12 · Zeilenlisten ══════════════════════════════════════════════════ */

  .stufen { list-style: none; display: grid; border-block-start: var(--linien-staerke) solid var(--linie); }
  .stufen li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--raum-3xs) var(--raum-s);
    padding-block: var(--raum-s);
    border-block-end: var(--linien-staerke) solid var(--linie-fein);
    max-width: none;
  }
  .stufen .stufe-satz { grid-column: 2; color: var(--ink-2); max-width: var(--zeilenbreite); }
  .stufen .stufe-zeit { grid-column: 2; }
  @media (min-width: 900px) {
    .stufen li { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--rinne); align-items: baseline; }
    .stufen .stufe-satz { grid-column: 2; }
    .stufen .stufe-zeit { grid-column: 3; text-align: right; }
  }
  .nummer, .stufe-zeit {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    line-height: var(--zh-label);
    letter-spacing: var(--sp-label);
    font-weight: var(--gewicht-kopf);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .stufe-name { color: var(--ink); font-weight: var(--gewicht-kopf); }
  .stufen li.jetzt .nummer,
  .stufen li.jetzt .stufe-satz,
  .stufen li.jetzt .stufe-zeit { color: var(--ink); }

  /* ══ 13 · Felder ════════════════════════════════════════════════════════ */

  .raster { display: grid; grid-template-columns: 1fr; gap: var(--raum-l) var(--rinne); }
  @media (min-width: 720px) { .raster.zwei { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .raster.vier { grid-template-columns: repeat(4, 1fr); }
                              .raster.drei { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 720px) and (max-width: 899px) { .raster.vier, .raster.drei { grid-template-columns: repeat(2, 1fr); } }

  .feld {
    display: grid;
    gap: var(--raum-2xs);
    align-content: start;
    padding-block-start: var(--raum-s);
    border-block-start: var(--linien-staerke) solid var(--linie);
    transition: border-color var(--mo-mittel) var(--mo-kurve);
  }
  .feld:hover { border-block-start-color: var(--linie-kraeftig); }
  /* Das Sinnbild macht aus vier gleich aussehenden Textblöcken vier
     unterscheidbare Zusagen. Es trägt keine eigene Aussage — wer es weglässt,
     verliert nichts außer der Geschwindigkeit, mit der man sie auseinanderhält. */
  .feld-zeichen {
    inline-size: var(--zeichen-gross);
    block-size: var(--zeichen-gross);
    color: var(--ink);
    margin-block-end: var(--raum-2xs);
  }
  .feld h3 { max-width: none; }
  .feld p { color: var(--ink-2); font-size: var(--g-klein); line-height: var(--zh-klein); }
  .feld .knopfzeile { margin-block-start: var(--raum-xs); }

  /* ══ 14 · Fragen ════════════════════════════════════════════════════════
     Die Frage steht in Inter, nicht in Archivo: Archivo steht auf dieser
     Seite immer in Versalien, und dreizehn Fragen in Versalien liest niemand. */
  .fragen { border-block-start: var(--linien-staerke) solid var(--linie); }
  .fragen details { border-block-end: var(--linien-staerke) solid var(--linie-fein); }
  .fragen summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-m);
    padding-block: var(--raum-s);
    cursor: pointer;
    list-style: none;
    font-family: var(--schrift-text);
    font-size: var(--g-vorspann);
    line-height: var(--zh-vorspann);
    letter-spacing: var(--sp-vorspann);
    font-weight: var(--gewicht-mittel);
    transition: color var(--mo-kurz) var(--mo-kurve);
  }
  .fragen summary::-webkit-details-marker { display: none; }
  .fragen summary:hover { color: var(--ink-2); }
  .fragen .kreuz {
    inline-size: var(--zeichen-klein);
    block-size: var(--zeichen-klein);
    flex: none;
    color: var(--ink-2);
    transition: transform var(--mo-mittel) var(--mo-kurve);
  }
  .fragen details[open] .kreuz { transform: rotate(45deg); }
  .fragen details p { padding-block-end: var(--raum-s); color: var(--ink-2); max-width: var(--zeilenbreite); }

  @supports (interpolate-size: allow-keywords) {
    @media (prefers-reduced-motion: no-preference) {
      :root { interpolate-size: allow-keywords; }
      .fragen details::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--mo-mittel) var(--mo-kurve),
                    content-visibility var(--mo-mittel) allow-discrete;
      }
      .fragen details[open]::details-content { block-size: auto; }
    }
  }

  /* ══ 15 · Formulare ═════════════════════════════════════════════════════
     Felder sind Linien, keine Kästen. Eine Kapsel um ein mehrzeiliges Feld
     wird zu einem Schlauch — und ein Kasten ist auf dieser Seite ohnehin
     nicht vorgesehen. */
  /* Ein Eingabefeld ist so breit wie eine Zeile lesbar ist, nicht so breit
     wie die Spalte. Eine leere Linie über 735 px sieht aus wie ein Fehler. */
  .formular { display: grid; gap: var(--raum-s); max-inline-size: var(--zeilenbreite); }
  .formular .feldgruppe { display: grid; gap: var(--raum-3xs); }
  .formular label {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    line-height: var(--zh-label);
    letter-spacing: var(--sp-label);
    font-weight: var(--gewicht-kopf);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .formular input, .formular textarea, .formular select {
    font: inherit;
    color: inherit;
    border: 0;
    border-block-end: var(--linien-staerke) solid var(--linie-feld);
    border-radius: 0;
    background: transparent;
    padding: var(--raum-xs) 0;
    min-block-size: var(--knopf-hoehe);
    transition: border-color var(--mo-kurz) var(--mo-kurve);
  }
  .formular input:hover, .formular textarea:hover, .formular select:hover,
  .formular input:focus, .formular textarea:focus, .formular select:focus { border-block-end-color: var(--ink); }
  /* Das eigene Dreieck des Systems trägt eine Systemfarbe und einen
     Systemkasten — beides gibt es auf dieser Seite nicht. Also abgeschaltet
     und durch einen gezeichneten Winkel in der Tintenfarbe ersetzt. */
  .formular select {
    appearance: none;
    padding-inline-end: var(--raum-m);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-size: 6px 6px, 6px 6px;
    background-position: right 8px center, right 2px center;
    background-repeat: no-repeat;
  }
  .formular textarea { min-block-size: calc(var(--knopf-hoehe) * 2.4); resize: vertical; }
  .formular .hinweis { color: var(--ink-2); }
  .formular .meldung:empty { display: none; }
  .formular .meldung {
    padding: var(--raum-xs);
    border: var(--linien-staerke) solid var(--linie-feld);
    font-size: var(--g-klein);
    line-height: var(--zh-klein);
  }
  .formular-reihe { display: grid; gap: var(--raum-s); }
  @media (min-width: 720px) { .formular-reihe { grid-template-columns: 1fr 1fr; } }
  .formular .knopf { justify-self: start; }

  .kontakt-block dt {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    line-height: var(--zh-label);
    letter-spacing: var(--sp-label);
    font-weight: var(--gewicht-kopf);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .kontakt-block dd { margin-block-start: var(--raum-3xs); }
  .kontakt-block dd + dt { margin-block-start: var(--raum-s); }

  /* ══ 16 · Fuß ═══════════════════════════════════════════════════════════
     Ein Fuß aus einer Zeile Kleinschrift sieht aus, als hätte jemand
     vergessen, ihn zu bauen — und eine Seite, die vierstellige Beträge
     verlangt, kann sich das am wenigsten leisten. */
  .fuss { border-block-start: var(--linien-staerke) solid var(--linie); padding-block: var(--raum-xl); }
  /* Im Fuß steht die Bahn enger: er ist ein Register, kein Abschnitt. */
  .fuss .bahn { row-gap: var(--raum-l); }
  .fuss-marke {
    font-family: var(--schrift-kopf);
    font-size: var(--g-2);
    line-height: 0.9;
    letter-spacing: var(--sp-2);
    font-weight: var(--gewicht-titel);
    font-stretch: var(--breite-marke);
    font-variation-settings: "wdth" 125;
    text-transform: uppercase;
    color: var(--ink);
    display: block;
  }
  .fuss-satz { color: var(--ink-2); margin-block-start: var(--raum-s); }
  .fuss-spalte { display: grid; gap: var(--raum-2xs); align-content: start; }
  .fuss-titel {
    font-family: var(--schrift-kopf);
    font-size: var(--g-label);
    line-height: var(--zh-label);
    letter-spacing: var(--sp-label);
    font-weight: var(--gewicht-kopf);
    font-stretch: var(--breite-kopf);
    text-transform: uppercase;
    color: var(--ink-2);
    margin-block-end: var(--raum-3xs);
  }
  .fuss-spalte a { color: var(--ink); text-decoration: none; width: fit-content; }
  .fuss-spalte a:hover { color: var(--ink-2); }
  .fuss-schluss {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--raum-2xs) var(--raum-m);
    padding-block-start: var(--raum-s);
    border-block-start: var(--linien-staerke) solid var(--linie);
    color: var(--ink-2);
  }
  .fuss-schluss nav { display: flex; flex-wrap: wrap; gap: var(--raum-m); }

  /* ══ 17 · Innerer Rhythmus ══════════════════════════════════════════════
     Innerhalb eines Blocks ordnet die kleine Leiter. Über einer Überschrift
     steht mehr Luft als darunter — sonst hängt sie am vorigen Gedanken, und
     der Leser ordnet sie dem falschen zu. Das ist die eine Regel, die eine
     Seite am schnellsten gestaltet aussehen lässt. */
  .blocksatz > * + * { margin-block-start: var(--raum-m); }
  .blocksatz > * + h2, .blocksatz > * + h3 { margin-block-start: var(--raum-l); }
  .blocksatz > .etikett + h1,
  .blocksatz > .etikett + h2,
  .blocksatz > .etikett + h3 { margin-block-start: var(--raum-xs); }
  .blocksatz > h1 + *, .blocksatz > h2 + *, .blocksatz > h3 + * { margin-block-start: var(--raum-m); }
  .blocksatz > * + .knopfzeile { margin-block-start: var(--raum-m); }
  .blocksatz > .knopfzeile + .klein { margin-block-start: var(--raum-xs); }
  .blocksatz > p + p { margin-block-start: var(--raum-xs); }

  .klein, small, figcaption {
    font-size: var(--g-klein);
    line-height: var(--zh-klein);
    letter-spacing: var(--sp-klein);
    color: var(--ink-2);
  }
  /* Die Rolle steht in basis.css und wird hier nicht zum zweiten Mal
     festgelegt. Zwei Orte für dieselbe Farbe sind der Grund, warum der
     Vorspann heller war als der Fließtext darunter, obwohl er der wichtigere
     Satz ist. */
  .mittig { text-align: center; }
  .mittig p, .mittig .stand { margin-inline: auto; }
  .mittig .knopfzeile { justify-content: center; }
  .mittig .stand { justify-items: center; }

  /* ══ 17b · Gruppenfokus ════════════════════════════════════════════════
     Ein Muster, kein Bauteil. Wer eines von mehreren gleichwertigen Elementen
     überfährt, meint dieses eine — also treten die anderen zurück.

     Drei Dinge daran sind Absicht:

     1. Es steht EINMAL da und gilt überall. Vorher hatten die Preiskarten es
        und sonst nichts; ein Verhalten, das nur an einer Stelle gilt, liest
        sich als Fehler an allen anderen. Und es steht hier unten, hinter
        allen Bauteilen: mehrere von ihnen erklären selbst einen `transition`,
        und bei gleicher Spezifität gewinnt der spätere. Weiter oben hätte
        `.feld` die Überblendung wieder abgeschaltet — lautlos.
     2. Die anderen werden gedämpft, nicht ausgeblendet. Bei 0,4 war es ein
        Scheinwerfer und der Rest verschwand; bei 0,6 bleibt die Gruppe eine
        Gruppe, und der Blick wird geführt statt umgelenkt.
     3. Nur mit echtem Zeigegerät. Auf einem Tastschirm gibt es kein
        Überfahren — dort bliebe der letzte Kontakt gedämpft stehen. Und
        `:focus-within` ist mit dabei, weil eine Tastaturbedienung dieselbe
        Absicht meint wie ein Zeiger. */
  [data-fokusgruppe] > * {
    transition: opacity var(--mo-mittel) var(--mo-kurve);
  }
  @media (hover: hover) {
    [data-fokusgruppe]:hover      > *,
    [data-fokusgruppe]:focus-within > *        { opacity: var(--ruhe-gedaempft); }
    [data-fokusgruppe]:hover      > *:hover,
    [data-fokusgruppe]:focus-within > *:focus-within { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-fokusgruppe] > * { transition: none; }
  }

  /* ══ 18 · Bewegung ══════════════════════════════════════════════════════
     Zwei Sorten, und sie sind nicht dasselbe:

     Der EINGANG läuft einmal, wenn ein Element ankommt. Ausgelöst von einem
     Beobachter, dann mit eigener Kurve durch — nicht am Finger gescrubbt.
     Eine gescrubbte Bewegung läuft rückwärts, wenn man rückwärts scrollt; das
     liest sich mechanisch. Eine ausgelöste hat Anfang, Kurve und Ende, und
     genau das nimmt man als Bewegung wahr.

     Die PARALLAXE hängt dagegen an der Scrollposition, und dort gehört sie
     hin: sie ist eine Antwort auf das Scrollen, keine Ankunft.

     Der Ruhezustand ist an die Klasse `js` gebunden. Ohne Programm wird sie
     nie gesetzt, dann ist nichts verborgen und die Seite steht vollständig da. */
  @keyframes steigen {
    from { opacity: 0; transform: translateY(var(--mo-hub)); }
    to   { opacity: 1; transform: none; }
  }
  /* Der Vorhang deckt die untere Hälfte auf, nicht die ganze Zeile. Ein
     vollständiges Aufdecken ist eine Geste; ein halbes ist eine Bewegung. */
  @keyframes vorhang {
    from { opacity: 0; clip-path: inset(0 0 55% 0); transform: translateY(var(--mo-hub)); }
    to   { opacity: 1; clip-path: inset(0 0 -18% 0); transform: none; }
  }
  @keyframes bild-auf {
    from { opacity: 0; clip-path: inset(5% 0 5% 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
  }
  @keyframes parallaxe {
    from { translate: 0 calc(var(--parallaxe) * -1); }
    to   { translate: 0 var(--parallaxe); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .js [data-auf] { opacity: 0; }
    /* Der Versatz zwischen Geschwistern kam vorher als `style="--takt:n"`
       aus dem Programm. Er ist aber reine Position in der Reihe, und die
       kennt CSS selbst. Nach dem sechsten bleibt er stehen: ein längerer
       Versatz wirkt nicht mehr wie Takt, sondern wie Verzögerung. */
    .js [data-auf]:nth-child(2)  { --takt: 1; }
    .js [data-auf]:nth-child(3)  { --takt: 2; }
    .js [data-auf]:nth-child(4)  { --takt: 3; }
    .js [data-auf]:nth-child(5)  { --takt: 4; }
    .js [data-auf]:nth-child(n+6){ --takt: 5; }
    .js [data-auf].da {
      animation: steigen var(--mo-lang) var(--mo-kurve) both;
      animation-delay: calc(var(--takt, 0) * var(--mo-takt));
    }
    .js h1[data-auf].da,
    .js h2[data-auf].da,
    .js .vorhang-auf[data-auf].da { animation-name: vorhang; }
    .js .rahmen[data-auf].da,
    .js .band[data-auf].da { animation-name: bild-auf; }

    @supports (animation-timeline: view()) {
      .rahmen img, .band img {
        animation: parallaxe linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
    }
  }

  /* ══ 19 · Fokus ═════════════════════════════════════════════════════════
     Der Ring bekommt einen zweiten, gegenläufigen Ring nach außen. Damit
     trägt er auf jedem Grund — auch mitten auf einer schwarzen Knopffläche,
     wo ein einfarbiger Ring verschwände. */
  :focus-visible {
    outline: calc(var(--linien-staerke) * 2) solid var(--fokus);
    outline-offset: calc(var(--linien-staerke) * 2);
    box-shadow: 0 0 0 calc(var(--linien-staerke) * 4) var(--fokus-kontur);
  }

  .sprung {
    position: absolute;
    left: var(--raum-xs);
    top: var(--raum-xs);
    padding: var(--raum-xs);
    border-radius: var(--r-knopf);
    background: var(--akzent);
    color: var(--auf-akzent);
    transform: translateY(-200%);
    z-index: 30;
  }
  .sprung:focus { transform: none; }

  .verweis-ziel { display: inline-flex; align-items: center; min-block-size: var(--tippflaeche); }
}