/* Mribah & Partner — Landing, neue Fassung.
 *
 * Quellen, und nur diese:
 *   Gestaltung  docs/marke.md            (Farben, sechs Textgrößen, drei Schriften)
 *   Bewegung    web/MOTION.md §2         (Dauern, Kurven, Staffelraster, Distanzen)
 *   Struktur    web/STRUKTUR_NEU.md      (Abschnitte, erster Bildschirm, Umbruchpunkte)
 *
 * Regeln, die dieses Blatt zusammenhalten:
 *   · genau sechs Textgrößen (--t-*). Eine siebte kommt nicht dazu.
 *   · genau ein Akzent, und der gehört auf EINE Sache pro Bildschirm — aber auf
 *     JEDEN. Ein Bildschirm ganz ohne Akzent ist derselbe Fehler wie fünf.
 *   · IMMER HELL. Der Dunkelmodus ist am 28.08.2026 entfallen (Entscheidung des
 *     Auftraggebers: „die seite soll hell sein"). Es gibt keinen zweiten
 *     Farbsatz mehr, kein prefers-color-scheme, keinen Umschalter. Jeder
 *     Kontrastwert in diesem Blatt ist gegen die helle Palette gerechnet und
 *     steht als Zahl im Kommentar daneben — nachgerechnet 28.08.2026.
 *   · genau DREI Radien plus die Pille: --radius 12 · --radius-gross 20 ·
 *     999px. Ein vierter Wert ist ein Einzelfall und gehört korrigiert,
 *     nicht ergänzt.
 *   · Schriften lokal in fonts/. Kein CDN, kein fremder Host zur Laufzeit.
 *   · drei Umbruchpunkte: 600px, 860px, 940px. Jeder weitere braucht eine Begründung
 *     in STRUKTUR_NEU.md (dort: „Drei Umbruchpunkte, nicht sechs", L20).
 *   · Hover ausschließlich Farbe. --w-anheben bleibt 0 (MOTION.md P3).
 *
 * Dieses Blatt enthält KEINE Animationslogik — nur die Zustände, an die der
 * Bewegungs-Agent andockt: [data-einblenden] / .ist-da, .feld-grund, .feld,
 * [role=tab], [data-akkordeon], .zeitleiste-linie. Statisch ist die Seite
 * vollständig: ohne JavaScript ist nichts unsichtbar.
 */

/* ══ Schriften ═══════════════════════════════════════════════════════════════
 * Drei Familien, vier Dateien, alle lokal. Lizenz je Familie in fonts/OFL-*.txt.
 * Relative Pfade — die Seite läuft unter /landing-neu/ wie im Wurzelverzeichnis. */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrumentserif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrumentserif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrainsmono-latin-var.woff2") format("woff2");
}

/* ══ Token ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Nur hell. Kein „light dark" mehr: sonst färbt der Browser Formularfelder,
     Bildlaufleisten und das Fenster selbst dunkel ein, während die Seite hell
     bleibt — genau der halbe Zustand, den dieses Blatt ausschließt. */
  color-scheme: light;

  /* ── Farben. Werte 1:1 aus docs/marke.md, Spalte „Hell". ──────────────────
   * Drei davon sind am 28.08.2026 geändert worden — in docs/marke.md zuerst,
   * dann hier, wie es die Schlusszeile jener Datei verlangt. Der Grund ist eine
   * gerechnete Zahl, keine Vorliebe:
   *
   *   Die Karte hob sich vom Grund um 1,06:1 ab (#FBFBF8 auf #F4F5F1). Das ist
   *   praktisch kein Unterschied. Die gesamte sichtbare Struktur der Seite hing
   *   damit an einem Haarstrich mit 1,35:1 — dort, wo man ihn sah, las er sich
   *   als Tabellenrahmen; dort, wo nicht, war die Seite eine graue Fläche mit
   *   Text. Beides zusammen ist „generisch und kalt", und beides hatte dieselbe
   *   Ursache. Auf einem Grund von #F4F5F1 ist das nicht reparierbar: selbst
   *   reines Weiß erreicht darauf nur 1,10:1.
   *
   *   Dazu die Farbtemperatur. #F4F5F1 hat G am höchsten (R244 G245 B241) —
   *   es ist grünstichig kühl. #EEECE4 hat R > G > B (238/236/228) und ist
   *   damit warm. Das ist ein Ein-Token-Wechsel mit der größten Wärmewirkung
   *   pro Zeile auf der ganzen Seite.
   *
   * Neu jetzt: Karte gegen Grund 1,18:1, Karte auf dem Band 1,28:1. */
  --grund: #eeece4;
  --flaeche: #ffffff;
  --flaeche-2: #e7e3d5;
  /* Alle Werte gegen JEDEN Grund gerechnet, auf dem sie vorkommen — nicht nur
     gegen --grund. Seit dem Band (.sec-band) ist auch eine Tönung Seitengrund
     und muss mitgeprüft werden. Nachgerechnet am 28.08.2026, Verfahren WCAG 2.1
     (Relativleuchtdichte, (L_hell + 0,05) / (L_dunkel + 0,05)); das Skript liegt
     in web/landing-neu/kontrast.py und läuft ohne Abhängigkeiten.
       Gründe: --grund #EEECE4 · --flaeche #FFFFFF · --flaeche-2 / --band #E7E3D5 ·
               --akzent-weich #E1EBE5. */
  --tinte: #101413; /* grund 15,69 · flaeche 18,56 · flaeche-2 14,45 · weich 15,22 */
  --gedaempft: #5c6560; /* grund 5,09 · flaeche 6,03 · flaeche-2 4,69 · weich 4,94 — Soll 4,5 */
  --linie: #d2d6cd; /* dekorativ, keine Anforderung: grund 1,25 · flaeche 1,47 */
  --akzent: #0e6a4e; /* grund 5,56 · flaeche 6,58 · flaeche-2 5,12 · weich 5,40 — Soll 4,5 */
  --akzent-weich: #e1ebe5; /* Akzentfläche und Hover auf weißem Grund, gegen --flaeche 1,22 */
  --signal: #8a6013; /* grund 4,72 · flaeche 5,58 — Soll 4,5.
                        Auf --flaeche-2 (4,34) und --akzent-weich (4,57) verfehlt bzw.
                        knapp: deshalb trägt .offen-marke seit dem 28.08.2026 eine
                        eigene weiße Fläche und steht nie direkt auf einer Tönung. */

  /* Abgeleitet, nicht neu erfunden:
   *   --akzent-tinte  Text AUF dem Akzent — der Seitengrund, 6,01:1.
   *   --linie-stark   Rahmen bedienbarer Elemente (WCAG 1.4.11, 3:1).
   *   --band          Grund der getönten Abschnitte.
   *   --feld-linie    Knoten und Kanten des Hintergrundfeldes.
   *   --schatten      EINE Familie, zwei Tiefen: --schatten für ruhende Blätter,
   *                   --schatten-nah für berührte. Weich und flach — Papier,
   *                   kein Startup-Glühen. Am 28.08.2026 leicht vertieft und
   *                   ins Warme gezogen (rgba 58,48,28 statt 16,20,19), weil ein
   *                   kalter Schatten auf warmem Papier grau aussieht statt
   *                   schattig, und weil die Karten seit derselben Überarbeitung
   *                   GAR KEINE Kante mehr haben: 81 Elemente dieser Seite trugen
   *                   eine sichtbare Linie, 15 davon allein die Karten (gemessen
   *                   im Browser, 28.08.2026). Bei 1,18:1 Flächentrennung trägt
   *                   die Fläche selbst — die Linie war nur noch Kante. */
  --akzent-tinte: var(--grund); /* auf --akzent 5,56:1 — Soll 4,5 */
  --linie-stark: #767f78; /* grund 3,50 · flaeche 4,14 · flaeche-2 3,22 · weich 3,39 — Soll 3,0.
                             War #7e8880 und erreichte auf getönten Flächen nur 3,00:1,
                             also ohne jede Reserve. Ein Wert ohne Reserve ist nach der
                             nächsten Änderung falsch. */
  --band: #e7e3d5; /* Der Grund der getönten Abschnitte. Derselbe Wert wie --flaeche-2,
                      aber eine andere Rolle, deshalb ein eigener Name: --flaeche-2 ist
                      eine Fläche IN einer Karte, --band ist der Grund UNTER Karten.
                      Wer den einen ändert, muss nicht den anderen mitändern.
                      Gegen --grund 1,09 · Karte darauf 1,28 · gedämpft 4,69 ·
                      Akzent 5,12 · --linie-stark 3,22. */
  --feld-linie: #c3bfae; /* Knoten und Kanten des Hintergrundfeldes. Vorher zeichnete
                            hintergrund.js in --linie: 1,25:1 gegen den Grund, bei
                            globalAlpha 0,65 also faktisch unsichtbar — ein Motor, der
                            lief und nichts zeigte. 1,56:1 bei Alpha 0,9. Dekoration,
                            aria-hidden, kein Kontrastminimum (WCAG 1.4.11 nimmt
                            Grafiken aus, die zum Verständnis nicht nötig sind). */
  --schatten: 0 1px 2px rgba(58, 48, 28, 0.05), 0 14px 34px -18px rgba(58, 48, 28, 0.26);
  --schatten-nah: 0 1px 2px rgba(58, 48, 28, 0.06), 0 6px 16px -10px rgba(58, 48, 28, 0.22);

  /* ── Genau sechs Textgrößen (docs/marke.md). Mehr kommt nicht dazu. ─────── */
  --t-hero: clamp(40px, 6vw, 72px);
  --t-h2: clamp(28px, 3vw, 42px);
  --t-lede: clamp(16px, 1.2vw, 18px);
  --t-body: 16px;
  --t-small: 13px;
  --t-mark: 11px;

  /* ── Schriftfamilien ───────────────────────────────────────────────────── */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Laufweite: genau zwei. Regel ist die Schriftlage — Versalien brauchen Luft. */
  --sperr-versal: 0.14em;
  --sperr-gemischt: 0.01em;

  /* ── Maße ──────────────────────────────────────────────────────────────── */
  --wrap: 1100px;
  --wrap-schmal: 720px;
  --pad-x: 24px;

  /* ── Radien: eine Skala, vier Werte, jeder mit einer Rolle. ──────────────
   * Vorher gemessen (Browser, 1440 px, 28.08.2026): 8px 15×, 14px 18×, 999px 22×.
   * Drei Werte ohne System — 8 px auf einem 48 px hohen Knopf und auf einer
   * 1.052 px breiten Akkordeonzeile ist derselbe Radius für zwei völlig
   * verschiedene Flächen, und genau das liest sich als harte Kante.
   * Die Regel jetzt: je größer die Fläche, desto größer der Radius.
   *   --radius        Knöpfe, Sprunglink und kleine Flächen INNERHALB einer Karte
   *   --radius-gross  Karten, Blätter, Akkordeonzeilen — alles, was ein Blatt ist
   *   999px           echte Pillen (Chips, Ziffernkreise, Dauerangaben)
   * Verschachtelt gilt: das Innere nimmt die nächstkleinere Stufe, damit die
   * Ecken konzentrisch laufen und nicht ineinanderstehen.
   * Gemessen nach der Änderung (Browser, 1440 px, 28.08.2026): 20px 26× ·
   * 999px 22× · 12px 8×. Kein vierter Wert auf der Seite. */
  --radius: 12px;
  --radius-gross: 20px;
  --kopf-hoehe: 72px; /* STRUKTUR_NEU.md, „Der erste Bildschirm, in Pixeln gedacht" */

  /* Abschnittsluft. War clamp(72px, 9vw, 128px) — das ergab bei 1440 px fünfmal
     hintereinander exakt 250 px zwischen dem letzten Wort eines Abschnitts und
     dem ersten des nächsten (gemessen 28.08.2026). Fünf gleiche Löcher sind
     kein Rhythmus, sondern ein Raster ohne Betonung. Jetzt zwei Werte:
     --abschnitt trägt die normale Luft, --abschnitt-band die der getönten
     Abschnitte, die sich mehr leisten können, weil ihre Kante sichtbar ist. */
  --abschnitt: clamp(64px, 7vw, 104px);
  --abschnitt-band: clamp(72px, 8vw, 120px);

  /* ── Bewegungstoken. Wörtlich aus web/MOTION.md §2. ────────────────────── */
  --d-sofort: 90ms; /* Fokusring, Aktiv-Zustand: darf nicht nachlaufen */
  --d-schnell: 150ms; /* Hover, Farbwechsel, Reiterwechsel — Konsenswert */
  --d-mittel: 200ms; /* Akkordeon, Kopfleisten-Trennlinie */
  --d-ruhig: 500ms; /* Einblenden beim Scrollen */
  --d-zeichnen: 900ms; /* Kantenzug der Wortmarke, einmalig */
  --d-zaehlen: 1400ms; /* Zahl zählt hoch — abgeschaltet, bis eine existiert */
  --d-impuls: 1400ms; /* Impuls im Hintergrundfeld, MOTION.md §3 */

  --k-aus: cubic-bezier(0.25, 1, 0.5, 1); /* easeOutQuart — alles, was hereinkommt */
  --k-ein-aus: cubic-bezier(0.4, 0, 0.2, 1); /* symmetrisch — Zustände, die zurückgehen */
  --k-linear: linear; /* nur Fortschritt: Impuls, Zähler */

  --v-eng: 60ms; /* 5–8 gleichartige Zeilen */
  --v-weit: 80ms; /* 3–4 Karten oder Blöcke */
  --v-deckel: 400ms; /* harte Obergrenze der Gesamtstaffelung */

  --w-einblenden: 12px;
  --w-panel: 6px;
  --w-anheben: 0px; /* bleibt 0. MOTION.md P3. Token existiert, damit niemand
                       die Zahl neu erfindet. */
  --w-fokus: 2px;
  --w-fokus-luft: 2px;
}

/* Hier stand bis zum 28.08.2026 ein vollständiger @media (prefers-color-scheme:
 * dark)-Block mit einem zweiten Farbsatz. Er ist ersatzlos entfallen: die Seite
 * ist auf jedem Gerät hell, unabhängig von der Systemeinstellung. Wer ihn
 * zurückholt, holt auch die zweite Kontrastrechnung zurück — und die Erfahrung,
 * dass der Auftraggeber die Seite dann dunkel zu sehen bekommt, ohne dass eine
 * Entscheidung dazu getroffen wurde. Der dunkle Satz steht weiter in
 * docs/marke.md, falls je ein Cockpit ihn braucht.
 */

/* ══ Grundlagen ══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Ankersprünge landen nicht unter der klebenden Leiste (STRUKTUR_NEU.md, L31). */
  scroll-padding-top: calc(var(--kopf-hoehe) + 8px);
}

/* Weiches Scrollen nur, wenn niemand widerspricht (MOTION.md §4.3, Linears Muster). */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-hero);
  line-height: 1.04;
}

h2 {
  font-size: var(--t-h2);
  line-height: 1.1;
}

/* h3 benutzt --t-lede — keine siebte Größe, nur eine andere Rolle für dieselbe. */
h3 {
  font-size: var(--t-lede);
  line-height: 1.3;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--akzent);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--tinte);
}

@media (any-hover: hover) {
  a {
    transition: color var(--d-schnell) var(--k-ein-aus);
  }
}

img,
svg {
  max-width: 100%;
}

/* ── Fokusring: einmal festgelegt, überall gleich (MOTION.md §5.1). ────────
 * --tinte, nicht --akzent: der Primärknopf ist mit --akzent gefüllt, ein Ring
 * darauf hätte keinen Kontrast. Keine Transition — ein Ring, der einblendet,
 * ist bei schnellem Durchtabben eine Spur, kein Ort. */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--w-fokus) solid var(--tinte);
  outline-offset: var(--w-fokus-luft);
  border-radius: inherit;
}

.sr-only {
  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;
}

/* Sprunglink. Sichtbar erst im Fokus, dann ohne Hineingleiten (MOTION.md §5.2). */
.sprung {
  /* fixed, nicht absolute: ein absolut positionierter Sprunglink scrollt mit dem
     Dokument weg — nach einem Neuladen mit wiederhergestellter Scrollposition
     bekommt er den Fokus ausserhalb des Sichtfelds (geprueft 18.08.2026). */
  position: fixed;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  color: var(--tinte);
  font-size: var(--t-small);
  text-decoration: none;
}

.sprung:focus {
  left: 8px;
  top: 8px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.wrap-schmal {
  max-width: var(--wrap-schmal);
}

/* ══ Wiederkehrende Bausteine ════════════════════════════════════════════════ */

/* Die Markenzeile: Mono, versal, gesperrt. Trägt Augenbraue und Abschnittsnummer. */
.marke-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--sperr-versal);
  text-transform: uppercase;
  color: var(--gedaempft);
}

.marke-nr {
  color: var(--akzent);
}

.marke-strich {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--linie-stark);
}

.lede {
  font-size: var(--t-lede);
  color: var(--gedaempft);
  max-width: 62ch;
}

.klein {
  font-size: var(--t-small);
  color: var(--gedaempft);
}

/* Jede Zahl der Seite steht in JetBrains Mono, mit Tabellenziffern
 * (docs/marke.md: „Tabellenzahlen immer mit font-variant-numeric: tabular-nums"). */
.zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Ein leeres Feld ist ein „—" plus eine Erklärung für den Screenreader
 * (MOTION.md §5.2: „Kein Zustand, der nur durch Farbe unterschieden wird"). */
.offen {
  color: var(--gedaempft);
}

/* Die Karte ist ein Blatt, kein Kasten — und ein Blatt hat keine gezeichnete
 * Kante, sondern einen Schatten. Der Rahmen ist am 28.08.2026 ersatzlos
 * entfallen: er war nötig, solange sich die Karte vom Grund nur um 1,06:1
 * unterschied; mit dem neuen Grund sind es 1,18:1 auf Papier und 1,28:1 auf dem
 * Band, und das trägt allein. Fünfzehn Karten × vier Seiten = sechzig Kanten
 * weniger auf einer Seite. Gerechnet und gezählt 28.08.2026. */
.karte {
  background: var(--flaeche);
  border-radius: var(--radius-gross);
  padding: 26px 28px;
  box-shadow: var(--schatten);
}

/* Hover auf Karten: NUR Farbe, 150 ms, gekapselt. Keine Anhebung — Linear und
 * Attio, die beiden ruhigsten Seiten im Feld, bewegen beim Hover gar nichts
 * (STRUKTUR_NEU.md Bewegung Nr. 5, BW §4.1).
 *
 * Die Hover-Fläche ist --akzent-weich, nicht --flaeche-2. Das hat einen
 * gerechneten Grund: sechs der zwölf berührbaren Karten stehen auf dem Band
 * (Abschnitt 4), und --flaeche-2 IST der Band-Ton — eine Karte, die beim
 * Überfahren die Farbe ihres Untergrunds annimmt, verschwindet, statt zu
 * antworten. --akzent-weich ist die einzige Tönung der Palette aus einer anderen
 * Farbfamilie (grün statt warm) und bleibt deshalb auf jedem Untergrund
 * unterscheidbar: 1,22:1 gegen die weiße Karte, dazu ein deutlicher Farbtonsprung.
 * Regel daraus, für die ganze Seite: berührte WEISSE Flächen werden
 * --akzent-weich, berührte Flächen auf dem SEITENGRUND werden --flaeche (weiß).
 * Der Schatten geht dabei von --schatten auf --schatten-nah — das Blatt liegt
 * näher, es springt nicht (--w-anheben bleibt 0, MOTION.md P3). */
@media (any-hover: hover) {
  .karte-fuehlt {
    transition: background-color var(--d-schnell) var(--k-ein-aus),
      box-shadow var(--d-schnell) var(--k-ein-aus);
  }

  .karte-fuehlt:hover {
    background: var(--akzent-weich);
    box-shadow: var(--schatten-nah);
  }
}

.haken,
.striche {
  display: grid;
  gap: 12px;
  font-size: var(--t-body); /* STRUKTUR_NEU.md: nicht --t-small. Die Argumentation
                               gehört auf Fließtextgröße. */
}

/* Zeilenlänge. Gemessen am 28.08.2026 lief eine Hakenzeile in der breiten Karte
 * über 1.002 px, also rund 125 Zeichen — das Doppelte dessen, was sich als
 * Absatz liest, und einer der Gründe, warum die Seite „generisch" wirkte: eine
 * Textspalte ohne Maß ist die Voreinstellung des Browsers, keine Entscheidung. */
.haken > li,
.striche > li {
  position: relative;
  padding-left: 28px;
  max-width: 74ch;
}

.haken > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--akzent);
  border-bottom: 2px solid var(--akzent);
  transform: rotate(-45deg);
}

.striche > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.85em;
  width: 14px;
  height: 2px;
  background: var(--linie-stark);
}

/* ══ Knöpfe ══════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius); /* 12px auf 48px Höhe — 8px las sich als Kasten */
  font: inherit;
  font-size: var(--t-body);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.btn-primaer {
  background: var(--akzent);
  color: var(--akzent-tinte);
}

.btn-still {
  background: transparent;
  border-color: var(--linie-stark);
  color: var(--tinte);
}

@media (any-hover: hover) {
  .btn {
    transition: background-color var(--d-schnell) var(--k-ein-aus),
      border-color var(--d-schnell) var(--k-ein-aus),
      color var(--d-schnell) var(--k-ein-aus);
  }

  .btn-primaer:hover {
    background: color-mix(in oklab, var(--akzent) 86%, var(--tinte));
    color: var(--akzent-tinte);
  }

  /* Auf dem Seitengrund wird berührt = weiß (1,18:1). Auf --flaeche-2 wäre es
     1,09:1 gewesen — ein Hover, den niemand sieht. */
  .btn-still:hover {
    background: var(--flaeche);
    border-color: var(--linie-stark);
    color: var(--tinte);
  }
}

.btn:active {
  opacity: 0.9;
  transition-duration: var(--d-sofort);
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ══ Hintergrundfeld ═════════════════════════════════════════════════════════
 * MOTION.md §3.3, die Schichtung von unten nach oben:
 *   .feld-grund  CSS-Punktraster mit weicher Radialmaske — 0 Byte, kein Skript
 *   canvas.feld  das Kantenzug-Feld, wird vom Bewegungs-Agenten gezeichnet
 * Ohne JavaScript bleibt nur .feld-grund sichtbar. Beide aria-hidden.
 * Das Feld liegt hinter Abschnitt 1, 2 und dem Ablauf-SVG in 3 — nicht hinter
 * der ganzen Seite (MOTION.md §3.1: „dort läuft nichts, also zeigt dort nichts,
 * dass etwas läuft"). */

.feld-huelle {
  position: relative;
  isolation: isolate;
}

.feld-grund,
.feld {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Das Punktraster ist die Rückfallebene ohne JavaScript und zeichnet deshalb in
 * derselben Farbe wie das Feld darüber: --feld-linie (1,56:1) statt --linie
 * (1,25:1). In --linie war der Grund rechnerisch vorhanden und im Bild nicht.
 *
 * Die Maske ist weiter gefasst als vorher (ellipse 78% 62% at 50% 32% →
 * 96% 84% at 50% 40%). Grund, nachgesehen am Bildschirmfoto: die alte Ellipse
 * blendete das Feld schon bei rund 60 % der Abschnittshöhe vollständig aus, und
 * was übrig blieb, lag genau hinter der H1. Ein Grund, der nur dort steht, wo
 * Text darüber liegt, ist kein Grund. Jetzt reicht das Feld bis in die Ecken und
 * verläuft dort weich — die Aussage von BW §9 Effekt 2 („ohne Maske wirkt das
 * Raster wie Millimeterpapier, mit ihr wie Tiefe") bleibt dieselbe, die Fläche
 * wird nur nutzbar. */
.feld-grund {
  background-image: radial-gradient(
    circle at 1px 1px,
    var(--feld-linie) 1.4px,
    transparent 1.4px
  );
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 96% 84% at 50% 40%, #000 0%, transparent 82%);
  mask-image: radial-gradient(ellipse 96% 84% at 50% 40%, #000 0%, transparent 82%);
  opacity: 0.8;
}

/* Dieselbe Maske wie unter .feld-grund — ohne sie schneidet der Kantenzug am
   Abschnittsrand hart ab (MOTION.md §3.8; geprüft 18.08.2026, vorher fehlte sie
   auf dieser Ebene). Beide Werte müssen gleich bleiben, sonst laufen die zwei
   Ebenen des Feldes auseinander. */
.feld {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 96% 84% at 50% 40%, #000 0%, transparent 82%);
  mask-image: radial-gradient(ellipse 96% 84% at 50% 40%, #000 0%, transparent 82%);
}

/* ══ Kopfleiste ══════════════════════════════════════════════════════════════ */

/* Wächter: 1 px hoch, ganz oben. Der Bewegungs-Agent hängt einen
 * IntersectionObserver daran und setzt .ist-gescrollt auf die Leiste —
 * kein Scroll-Listener (MOTION.md §4.2, STRUKTUR_NEU.md L14). */
.waechter {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

.leiste {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--kopf-hoehe);
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-mittel) var(--k-ein-aus);
}

/* Zustand, den der Bewegungs-Agent setzt. Statisch ohne Wirkung — richtig so. */
.leiste.ist-gescrollt {
  border-bottom-color: var(--linie);
}

.leiste-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}

.marke-wort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tinte);
  text-decoration: none;
}

/* Das Zeichen ist seit dem 28.08.2026 Entwurf 5 · Negativraum aus web/logo/
 * (vorher Entwurf 1 · Kantenzug). Begründung steht in web/landing-neu/README.md,
 * kurz: Entwurf 1 ist bei 26 px eine Haarlinie neben einem zweiwortigen
 * Serifen-Namen, und web/logo/README.md nennt seine beiden Schwächen selbst
 * („die Figur ist generisch", „die steigende Kante kann als Wachstumspfeil
 * gelesen werden"). Entwurf 5 zeichnet dieselbe Geometrie — der Kantenzug aus
 * docs/marke.md bleibt also gültig, das Favicon passt weiter dazu —, setzt sie
 * aber als Fläche. Das ist die einzige Stelle der Kopfleiste, an der der Akzent
 * als FLÄCHE vorkommt statt als Strich, und genau das fehlte der Seite.
 * 28 px statt 26 px: eine Kachel braucht etwas mehr Kantenlänge als eine Linie,
 * um neben 26 px Versalhöhe zu bestehen. */
.marke-wort .zeichen {
  width: 28px;
  height: 28px;
  color: var(--akzent);
  flex: none;
}

.marke-name {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  letter-spacing: var(--sperr-gemischt);
  white-space: nowrap;
}

/* Unter 600 px steht in der Kopfleiste nur noch das Zeichen, ohne den
 * geschriebenen Namen. Das ist gerechnet, nicht geschmacklich:
 *
 *   Bei 360 px Fenster bleiben nach dem Seitenrand 312 px. Der Knopf „Audit
 *   anfragen" braucht einlinig 126 px, die Tür „Anmelden" 70 px, dazu 12 px
 *   Abstände — bleiben 104 px für Zeichen UND Namen. Das Zeichen nimmt davon
 *   34 px, für „Mribah & Partner" blieben 70 px, also rund 9 px Schriftgrad.
 *   Vorher stand der Name in 19 px, und der Knopf brach dafür zweizeilig um
 *   (gemessen 28.08.2026: Knopfhöhe 51 px statt 40 px in einer 72 px hohen
 *   Leiste). Zwei Zeilen in einem Knopf sind schlechter als ein Name, der
 *   erst im Fuß steht.
 *
 * Möglich ist das nur, weil das Zeichen seit dem 28.08.2026 allein trägt:
 * Entwurf 5 ist laut web/logo/README.md der einzige der sechs, der bei 16 px
 * noch vollständig liest. Mit der alten Haarlinie wäre die Kopfleiste auf dem
 * Telefon leer gewesen.
 *
 * Der Name geht dabei nicht verloren: das <a> trägt aria-label="Mribah und
 * Partner — Startseite", und im Fuß steht die Wortmarke ausgeschrieben. */
@media (max-width: 599px) {
  .marke-name {
    display: none;
  }

  .marke-wort .zeichen {
    width: 30px;
    height: 30px;
  }
}

/* Hier stand die Länge des Kantenzugs, den MOTION.md §4.2 Zeile 1 als einzige
 * Bewegung des ersten Bildschirms vorsieht: 900 ms Selbstzeichnen per
 * stroke-dashoffset. Das Zeichen ist seit dem 28.08.2026 kein Strich mehr,
 * sondern eine Fläche mit ausgeschnittenem Zug — eine Fläche lässt sich nicht
 * stroken. Die Bewegung ist ersatzlos entfallen, nicht ersetzt: eine Bewegung
 * wegzulassen verletzt keine Bewegungsvorgabe, und der erste Bildschirm trägt
 * seit derselben Überarbeitung das Kantenzug-Feld, das auf den Zeiger antwortet
 * (hintergrund.js). Die zugehörigen Zeilen in main.js sind mit entfallen. */

.leiste-nav {
  display: flex;
  gap: 22px;
  font-size: var(--t-small);
}

.leiste-nav a {
  color: var(--gedaempft);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

.leiste-nav a:hover,
.leiste-nav a.ist-hier {
  color: var(--tinte);
}

/* Aktueller Abschnitt: Farbe UND Kante, ohne gleitende Bewegung (MOTION.md §5.2). */
.leiste-nav a.ist-hier {
  border-bottom-color: var(--akzent);
}

/* Rechts in der Kopfleiste stehen zwei Ziele nebeneinander, und sie dürfen
 * einander nicht Konkurrenz machen: „Audit anfragen" ist die Handlung, die
 * diese Seite verkauft, „Anmelden" ist die Tür für Leute, die schon Kunde
 * sind. Deshalb trägt der Knopf die Fläche und die Tür nur Text. */
.leiste-rechts {
  display: flex;
  align-items: center;
  gap: 6px;
}

.leiste-btn {
  min-height: 40px;
  padding: 9px 18px;
  font-size: var(--t-small);
}

/* Die interne Tür. Kein Rahmen, keine Fläche, keine Akzentfarbe — sie soll
 * gefunden werden, nicht beworben. --gedaempft misst gegen --grund 5,50:1 und
 * erfüllt damit die Textschwelle 4,5:1 (gerechnet 28.08.2026); 40 px Höhe und
 * mindestens 44 px Breite erfüllen die Zielgröße aus WCAG 2.5.8.
 * Ziel ist app.myra-gmt.com — das CRM steht auf dieser Seite bewusst nirgends
 * verlinkt, weil dessen Anmeldeseite die eingesetzte Software verrät. */
.leiste-anmelden {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 14px;
  border-radius: var(--radius);
  color: var(--gedaempft);
  font-size: var(--t-small);
  text-decoration: none;
  white-space: nowrap;
}

@media (any-hover: hover) {
  .leiste-anmelden {
    transition: color var(--d-schnell) var(--k-ein-aus),
      background-color var(--d-schnell) var(--k-ein-aus);
  }

  .leiste-anmelden:hover {
    background: var(--flaeche);
    color: var(--tinte);
  }
}

/* Unter 600 px wird es eng. Die Tür verliert Innenluft, nicht Sichtbarkeit —
 * ein Anmeldeweg, den es auf dem Telefon nicht gibt, ist keiner. */
@media (max-width: 599px) {
  .leiste-anmelden {
    padding: 9px 8px;
  }

  .leiste-btn {
    padding: 9px 14px;
  }

  .leiste-rechts {
    gap: 2px;
  }
}

/* Umbruchpunkt 1 von 3 · 860 px: darunter verschwinden die Anker aus der Leiste
 * und stehen im Fuß (STRUKTUR_NEU.md §1: „Vier Anker in der Kopfleiste, ab
 * 860 px sichtbar — darunter ein Menü (L05)"). Ein Menü, das aufklappt, ist
 * Bewegungsarbeit; statisch steht hier der Verweis auf den Fuß. */
@media (max-width: 859px) {
  .leiste-nav {
    display: none;
  }
}

/* ══ 1 · Kopf ════════════════════════════════════════════════════════════════ */

.kopf {
  min-height: calc(100svh - var(--kopf-hoehe));
  display: flex;
  align-items: center;
  padding-block: clamp(48px, 7vw, 68px) var(--abschnitt);
}

.kopf-raster {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

.kopf-text {
  display: grid;
  gap: 20px;
}

.kopf h1 {
  max-width: 14ch;
}

.kopf-lede {
  max-width: 52ch;
}

/* Die Preiszeile: eigene Zeile über den Knöpfen, die Zahl in Mono
 * (STRUKTUR_NEU.md, erster Bildschirm, Zeile 424–472). */
/* Die Akzentkante links war eine 2 px breite Kante mit zwei rechten Winkeln —
 * dieselbe Figur wie ein Zitatbalken in einem Textverarbeitungsprogramm.
 * Als abgerundeter Streifen liest sie sich als gesetzte Marke, nicht als
 * Vorgabewert. --akzent auf --grund 6,01:1. */
.preiszeile {
  position: relative;
  font-size: var(--t-body);
  color: var(--tinte);
  padding-left: 16px;
}

.preiszeile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 999px;
  background: var(--akzent);
}

/* Das Messblatt. Die Zahlenfelder sind leer UND als leer gekennzeichnet — das
 * ist die Aussage, nicht der Mangel (STRUKTUR_NEU.md, „Was freigehalten bleibt"). */
/* Das Befundblatt ist das einzige Bild auf dem ersten Bildschirm. Es sah aus
 * wie jede andere Karte: weiße Fläche, graue Kante, graue Beschriftungen —
 * das war der kälteste Punkt der Seite, weil er der erste ist.
 * Jetzt trägt es einen Briefkopf: die Kopfzeile sitzt in --akzent-weich und
 * läuft bis an die Kartenkante, wie der farbige Balken auf einem Formular.
 * Das ist der Akzent als Fläche, einmal, auf dem ersten Bildschirm.
 * overflow:hidden, damit der Balken die gerundete Ecke mitnimmt. */
.messblatt {
  background: var(--flaeche);
  border-radius: var(--radius-gross);
  padding: 0 24px 22px;
  box-shadow: var(--schatten);
  overflow: hidden;
}

.messblatt-kopf {
  margin-inline: -24px;
  margin-bottom: 4px;
  padding: 14px 24px;
  background: var(--akzent-weich);
}

.messblatt-felder {
  display: grid;
}

.messblatt-zeile {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie);
}

@media (any-hover: hover) {
  .messblatt-zeile {
    transition: background-color var(--d-schnell) var(--k-ein-aus);
  }

  /* Nur zum Verfolgen der Zeile. Die Zeile ist nicht klickbar (MOTION.md §5.2). */
  .messblatt-zeile:hover {
    background: var(--akzent-weich);
  }
}

.messblatt-zeile dt {
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--sperr-versal);
  text-transform: uppercase;
  color: var(--gedaempft);
}

.messblatt-zeile dd {
  font-size: var(--t-body);
}

.messblatt-fuss {
  padding-top: 16px;
  font-size: var(--t-small);
  color: var(--gedaempft);
}

.messblatt-fuss strong {
  color: var(--tinte);
  font-weight: 500;
}

/* Umbruchpunkt 2 von 3 · 940 px: ab hier steht das Messblatt neben dem Text.
 * Textspalte auf 560 px gedeckelt, damit die H1 gewollt zweizeilig bricht
 * (STRUKTUR_NEU.md, „Rechte Spalte ab 940 px"; N8 §2 deckelt auf 500 px). */
@media (min-width: 940px) {
  .kopf-raster {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  }
}

/* Umbruchpunkt 3 von 3 · 600 px: darunter entfällt das Messblatt aus dem ersten
 * Bildschirm und rutscht darunter; die Knöpfe stapeln auf volle Breite
 * (STRUKTUR_NEU.md, „Unter 600 px"). */
@media (max-width: 599px) {
  .kopf {
    min-height: 0;
  }

  .knopfreihe {
    display: grid;
  }

  .knopfreihe .btn {
    width: 100%;
  }
}

/* ══ Abschnittsrahmen ════════════════════════════════════════════════════════ */

.sec {
  padding-block: var(--abschnitt);
  scroll-margin-top: calc(var(--kopf-hoehe) + 8px);
}

/* ── Das Band ───────────────────────────────────────────────────────────────
 * Sieben Abschnitte auf demselben Papiergrund, in derselben Breite, mit
 * derselben Luft davor und dahinter: das war der Befund hinter „generisch".
 * Gemessen am 28.08.2026 lagen zwischen dem letzten Wort eines Abschnitts und
 * dem ersten des nächsten fünfmal hintereinander exakt 250 px — die Seite hatte
 * ein Raster, aber keine Betonung.
 *
 * Das Band ist die Betonung: --band als Seitengrund, randlos über die volle
 * Breite, an genau ZWEI Stellen — Abschnitt 4 (Preise) und Abschnitt 8 (Kontakt
 * und teure Fragen). Beides sind die Stellen, an denen es um Geld und um den
 * nächsten Schritt geht; die getönte Fläche sagt „hier wird etwas entschieden".
 * Vier Abschnitte dazwischen bleiben Papier, damit das Band ein Ereignis bleibt
 * und kein Streifenmuster.
 *
 * Kein Rahmen, keine Trennlinie: das Band blendet über --abschnitt-band in den
 * Grund hinein und wieder heraus. Eine Kante, die die Seite nicht braucht,
 * wird gar nicht erst gezogen.
 *
 * Kontrast auf dem Band, gerechnet 28.08.2026 gegen #E7E3D5:
 *   --tinte 14,45:1 · --gedaempft 4,69:1 · --akzent 5,12:1 · --linie-stark 3,22:1
 *   — jede Textschwelle (4,5) und jede Bedienschwelle (3,0) erfüllt.
 *   Band gegen Seitengrund 1,09:1, Karte auf dem Band 1,28:1.
 *   --signal erreicht auf dem Band nur 4,34:1; deshalb steht .offen-marke dort
 *   auf einer eigenen weißen Fläche (5,58:1) und nie direkt auf der Tönung. */
.sec-band {
  padding-block: var(--abschnitt-band);
  background: linear-gradient(
    180deg,
    var(--grund) 0,
    var(--band) var(--abschnitt-band),
    var(--band) calc(100% - var(--abschnitt-band)),
    var(--grund) 100%
  );
}

.sec-kopf {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 68ch;
}

/* ══ Einblenden — der Zustand, nicht die Logik ═══════════════════════════════
 * MOTION.md §4.1. Ohne .js (also ohne Skript) ist alles sichtbar: der
 * Grundzustand ist der vollständige, Animation ist Zugabe (MOTION.md P2).
 * Der Bewegungs-Agent setzt .js auf <html>, --i auf den KINDERN und .ist-da
 * nach dem IntersectionObserver. */

.js [data-einblenden] {
  opacity: 0;
  transform: translateY(var(--w-einblenden));
  transition: opacity var(--d-ruhig) var(--k-aus), transform var(--d-ruhig) var(--k-aus);
  transition-delay: min(calc(var(--i, 0) * var(--v-eng)), var(--v-deckel));
}

.js [data-einblenden].ist-da {
  opacity: 1;
  transform: none;
}

/* Karten und Blöcke stehen weiter auseinander als Zeilen (MOTION.md §2). */
.js [data-einblenden][data-versatz="weit"] {
  transition-delay: min(calc(var(--i, 0) * var(--v-weit)), var(--v-deckel));
}

/* ══ 2 · Das Problem ═════════════════════════════════════════════════════════ */

.drei-zeilen {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 28px;
}

/* War 2px --linie: doppelt so schwer wie jede andere Linie der Seite und dabei
 * so blass (1,35:1), dass sie nur als Kante wirkte, nicht als Gliederung.
 * Jetzt halb so dick und deutlich sichtbar (--linie-stark, 3,54:1 auf Karte,
 * 3,54:1 auf --grund). Weniger Kante, mehr Ordnung. */
.drei-zeilen li {
  display: grid;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--linie-stark);
}

.drei-zeilen h3 {
  font-family: var(--serif);
}

/* Was wir verbinden — mit Eigennamen, als Text, nicht als Logoreihe
 * (STRUKTUR_NEU.md §2: „Ein Logo-Band aus fremden Produktmarken sieht aus wie
 * eine Kundenliste und ist keine"). */
.systemnamen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.system-chip {
  display: inline-block;
  padding: 6px 12px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-small);
}

.system-chip.ist-offen {
  background: transparent;
  border-style: dashed;
  color: var(--gedaempft);
}

/* ══ 3 · Drei Prozesse ═══════════════════════════════════════════════════════ */

.prozesse-raster {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}

@media (min-width: 940px) {
  .prozesse-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  }

  /* Die rechte Spalte war 471 px hoch, die linke 837 px — gemessen 28.08.2026.
     366 px leere Fläche neben einem Reiterpanel lesen sich als vergessene Ecke.
     Das Bild bleibt jetzt stehen, während der Text darunter durchläuft; die
     Ecke ist damit gefüllt, ohne dass ein Wort dazukommt. Nur ab 940 px — in
     einer Spalte läge das Bild sonst über dem Text. Kein Scroll-Listener, kein
     gepinnter Abschnitt (MOTION.md P4): position:sticky nimmt dem Besucher die
     Steuerung nicht ab. */
  .ablaufbild {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 24px);
  }
}

/* Die Reiterleiste existiert nur mit Skript. Ohne Skript waeren es drei Knoepfe,
 * die nichts tun — und zwei von drei Panels blieben per [hidden] unsichtbar
 * (MOTION.md §7.3). */
.reiterleiste {
  display: none;
}

.js .reiterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 24px;
}

/* Reiter. Aktiv = Farbe UND Kante, und die Kante springt, sie gleitet nicht
 * (MOTION.md §5.2, HS §5.1). */
.reiter {
  position: relative;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px 10px;
  min-height: 44px;
  font: inherit;
  font-size: var(--t-small);
  color: var(--gedaempft);
  cursor: pointer;
  text-align: left;
  white-space: nowrap; /* die drei Beschriftungen sind kurz; sie brechen nicht mittendrin */
}

@media (any-hover: hover) {
  .reiter {
    transition: color var(--d-schnell) var(--k-ein-aus),
      border-color var(--d-schnell) var(--k-ein-aus);
  }

  .reiter:hover {
    color: var(--tinte);
  }
}

.reiter[aria-selected="true"] {
  color: var(--tinte);
  border-bottom-color: var(--akzent);
}

/* Der Ring liegt innen, sonst überlappt er den Nachbarn (MOTION.md §5.2). */
.reiter:focus-visible {
  outline-offset: -2px;
}

/* Panel. Verborgen per [hidden]-Attribut, nicht per Klasse — dann ist es auch
 * ohne Stylesheet zu. */
/* Ohne Skript hebt diese Regel das [hidden] der Panels 2 und 3 auf: der Inhalt
 * ist vollstaendig da, untereinander. Erst .js macht daraus einen Reitersatz. */
.reiter-panel[hidden] {
  display: grid;
}

.js .reiter-panel[hidden] {
  display: none;
}

.reiter-panel {
  display: grid;
  gap: 18px;
}

/* Panelwechsel: Deckkraft und 6 px, einmal, als Animation — das Skript setzt die
 * Klasse nach einem erzwungenen Umbruch neu (MOTION.md §5.2). Bei Bewegungsruhe
 * schaltet der Notausschalter unten die Animation ab, die Farbe bleibt. */
.js .reiter-panel.ist-gewechselt {
  animation: panel-ein var(--d-mittel) var(--k-ein-aus) both;
}

@keyframes panel-ein {
  from {
    opacity: 0;
    transform: translateY(var(--w-panel));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Die vier Zeilen aus der eigenen Qualitätsregel (CLAUDE.md, Qualität Nr. 4). */
.prozess-felder {
  display: grid;
  gap: 14px;
}

.prozess-felder > div {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 4px 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linie);
}

.prozess-felder dt {
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--sperr-versal);
  text-transform: uppercase;
  color: var(--gedaempft);
  padding-top: 3px;
}

@media (max-width: 599px) {
  .prozess-felder > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Das leere Zahlenfeld je Reiter, in der Form des Messblatts. */
.prozess-zahlen {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  background: var(--flaeche-2);
  border-radius: var(--radius);
  font-size: var(--t-small);
  color: var(--gedaempft);
}

/* Das selbst gezeichnete Ablauf-SVG. Punktraster als Grund, weiche Maske am
 * Rand (STRUKTUR_NEU.md §3). Solange kein echter Ablauf existiert, steht hier
 * die Beschreibung dessen, was hinkommt — kein Baustellenschild (IST §4 C20). */
.ablaufbild {
  position: relative;
  display: grid;
  gap: 12px;
}

.ablaufbild-flaeche {
  position: relative;
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  padding: 20px;
  overflow: hidden;
}

.ablaufbild svg {
  display: block;
  width: 100%;
  height: auto;
}

.ablauf-knoten-flaeche {
  fill: var(--flaeche);
  stroke: var(--linie-stark);
}

.ablauf-kante {
  fill: none;
  stroke: var(--linie-stark);
  stroke-width: 1.5;
}

.ablauf-text {
  fill: var(--tinte);
  font-family: var(--mono);
  font-size: 9px;
}

.ablauf-text-leise {
  fill: var(--gedaempft);
  font-family: var(--mono);
  font-size: 8px;
}

/* Herkunftszeile — Pflicht unter jedem gezeichneten Stück (MOTION.md §6). */
.herkunft {
  font-size: var(--t-small);
  color: var(--gedaempft);
}

/* ══ 4 · Was wir machen — mit Preis ══════════════════════════════════════════ */

.stufen {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  margin-bottom: 28px;
}

.stufe {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: hidden;
}

/* Die Lichtkante auf der Kartenoberkante — statisch, nur diese Kartenart
 * (STRUKTUR_NEU.md Bewegung Nr. 10, N8 §7). */
.stufe::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--akzent) 28%,
    var(--akzent) 72%,
    transparent 100%
  );
  opacity: 0.55;
}

.preis {
  font-size: var(--t-h2);
  line-height: 1.06;
  color: var(--tinte);
  /* Zwei Zeilen Platz, auch wenn nur eine gebraucht wird: sonst starten
   * „Ergebnis", „Passt, wenn" und „Dauer" in den drei Karten auf drei
   * verschiedenen Höhen. Nachgemessen am 18.08.2026. */
  min-height: calc(2 * 1.06em);
}

/* Zahl groß, Einheit klein direkt dahinter — die Kartenform aus HS §9.2.
 * Das geschützte Leerzeichen im Markup hält „€" an der letzten Zahl, damit eine
 * Spanne wie „500 – 2.500 €" höchstens nach dem Gedankenstrich umbricht und nie
 * das Währungszeichen allein in eine Zeile schickt. Keine siebte Textgröße:
 * die Einheit läuft auf --t-lede. */
.preis-einheit {
  font-size: var(--t-lede);
}

.preis-zusatz {
  font-size: var(--t-small);
  color: var(--gedaempft);
}

.stufe-felder {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
}

.stufe-felder dt {
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--sperr-versal);
  text-transform: uppercase;
  color: var(--gedaempft);
}

.stufe-felder dd {
  font-size: var(--t-body);
}

/* Die Ausschlusszeile je Karte (STRUKTUR_NEU.md §4, Ergänzung 1, L25). */
/* Gestrichelt bedeutet auf dieser Seite ab dem 28.08.2026 genau eine Sache:
 * „noch nicht entschieden" (.offen-marke, .system-chip.ist-offen, .erste-zahl,
 * .auszufuellen). Die Ausschlusszeile ist entschieden — sie sagt, was NICHT
 * enthalten ist — und bekommt deshalb keine gestrichelte Linie mehr, sondern
 * gar keine: der Abstand und die leisere Schrift trennen sie ausreichend, und
 * die Karte hat damit statt drei waagerechten Linien nur noch eine. */
.ausschluss {
  margin-top: 8px;
  padding-top: 14px;
  font-size: var(--t-small);
  color: var(--gedaempft);
}

/* Der Absatz, der die Abrechnungseinheit verteidigt (§4, Ergänzung 2, L24).
 * Seine vier Absätze liefen bei 1440 px über die vollen 1.052 px der Spalte,
 * also rund 132 Zeichen je Zeile (gemessen 28.08.2026). Das ist keine Spalte
 * mehr, das ist der Vorgabewert des Browsers — und der Hauptgrund, warum
 * dieser Block wie ein Textbaustein aussah und nicht wie ein Argument.
 * 68ch ist dasselbe Maß, das .sec-kopf schon trägt. */
.einheit {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
  max-width: 68ch;
}

/* Vorbereitet, aber ABGESCHALTET: das Hochzählen der Zahl (L08). Der Baustein
 * liegt im Markup, das Feld trägt einen Strich, bis eine Zahl gemessen ist.
 * Eine hochzählende Null ist Slapstick. */
.zaehler[data-zaehlen][data-aus] {
  color: var(--gedaempft);
}

/* ══ 5 · Wie ein Auftrag läuft ═══════════════════════════════════════════════ */

.zeitleiste {
  position: relative;
  display: grid;
  gap: 0;
}

/* Die Verbindungslinie als SVG, damit sie mitwachsen kann (stroke-dashoffset,
 * MOTION.md §4.2 Zeile 5). Statisch ist sie vollständig gezeichnet. */
.zeitleiste-linie {
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  overflow: visible;
}

/* Die Verbindungslinie der Zeitleiste. --akzent statt --linie: sie ist die
 * Struktur dieses Abschnitts und damit sein einer Akzent (docs/marke.md), und
 * bei 1,25:1 war sie vorher kaum vom Grund zu unterscheiden. --akzent misst auf
 * --grund 5,56:1; als grafisches Element wäre 3:1 gefordert. Deckkraft 0,3
 * nimmt ihr die Lautstärke, ohne sie verschwinden zu lassen — die Ziffernkreise
 * darauf sind die Betonung, nicht die Linie. */
.zeitleiste-linie line {
  stroke: var(--akzent);
  stroke-width: 2;
  opacity: 0.3;
}

/* Das Mitwachsen aus MOTION.md §4.2, Zeile 5 („stroke-dashoffset von voll auf
 * 0, gekoppelt an dieselbe Einblendung", 900 ms, --k-linear).
 * Diese Regel FEHLTE. main.js setzte seit dem 18.08.2026 strokeDasharray und
 * strokeDashoffset und die Klasse .ist-gezeichnet — aber es gab im ganzen Blatt
 * keinen Selektor dafür, also sprang der Wert, statt zu laufen. Gefunden am
 * 28.08.2026 beim Zählen der ungenutzten Token: --d-zeichnen und --k-linear
 * waren definiert und nirgends benutzt. Ein Token ohne Verwendung ist ein
 * Hinweis, keine Schlamperei — hier war es der Hinweis auf eine fehlende Regel. */
.zeitleiste-linie line.ist-gezeichnet {
  transition: stroke-dashoffset var(--d-zeichnen) var(--k-linear);
}

.phase {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 20px;
  padding-bottom: 28px;
}

.phase:last-child {
  padding-bottom: 0;
}

/* Die fünf Ziffernkreise sind der Akzent dieses Abschnitts — die eine Sache pro
 * Bildschirm (docs/marke.md). Vorher trugen sie eine graue Kante um eine grüne
 * Ziffer, was den Akzent halbierte, statt ihn zu setzen. --akzent misst auf
 * --grund 6,01:1 und auf --flaeche 6,35:1, also weit über der 3:1-Schwelle für
 * grafische Begrenzungen (WCAG 1.4.11). Gerechnet 28.08.2026. */
.phase-nr {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--flaeche);
  border: 1px solid var(--akzent);
  font-size: var(--t-small);
  color: var(--akzent);
  z-index: 1;
}

.phase-inhalt {
  display: grid;
  gap: 8px;
  padding-bottom: 4px;
}

.phase-ergebnis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  font-size: var(--t-body);
}

.phase-etikett {
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--sperr-versal);
  text-transform: uppercase;
  color: var(--gedaempft);
}

.phase-dauer {
  margin-left: auto;
  padding: 3px 10px;
  background: var(--akzent-weich);
  border-radius: 999px;
  font-size: var(--t-small);
  color: var(--tinte);
  white-space: nowrap;
}

/* ══ 6 · Beweis: die Abnahmeliste ════════════════════════════════════════════ */

.kriterien {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 28px;
}

.kriterium {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 18px 20px;
}

.kriterium h3 {
  position: relative;
  padding-left: 28px;
  font-family: var(--serif);
}

.kriterium h3::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--akzent);
  border-bottom: 2px solid var(--akzent);
  transform: rotate(-45deg);
}

.kriterium p {
  padding-left: 28px;
  font-size: var(--t-body);
  color: var(--gedaempft);
}

/* Der EINE sichtbar leere Platz auf der ganzen Seite: die erste gemessene Zahl.
 * Alle anderen freigehaltenen Plätze sind HTML-Kommentare
 * (STRUKTUR_NEU.md: „drei sichtbar leere Plätze lesen sich als Baustelle,
 * einer als Versprechen"). */
.erste-zahl {
  display: grid;
  gap: 10px;
  padding: 26px;
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-gross);
  background: transparent;
  box-shadow: none;
}

.erste-zahl-feld {
  font-size: var(--t-h2);
  color: var(--gedaempft);
  line-height: 1;
}

/* ══ 7 · Vertrauen ═══════════════════════════════════════════════════════════ */

/* Zwei Spalten, nicht drei — geändert am 27.08.2026, mit Messung.
 * Der Abschnitt trägt VIER Blöcke. Bei drei Spalten (der alte Wert 300px ergab
 * bei 1052 px Rasterbreite drei Spalten à 337 px) steht Block d) allein in
 * Zeile 2, und rechts daneben bleiben rund 1.000 px leere Fläche — die „leere
 * Ecke", die ABNAHME.md am 18.08.2026 als offenen Punkt Nr. 10 führte. Mit der
 * neuen Inhaltsfassung wurde Block a) länger, und aus der Ecke wurde ein Loch.
 * Vier Blöcke auf zwei Spalten ergeben ein volles 2×2-Raster ohne Rest.
 * Schwelle nachgerechnet: 3 × 340 + 2 × 20 = 1060 > 1052, also zwei Spalten;
 * ab 700 px Rasterbreite eine. Das ist die einzige Rasteränderung dieser
 * Überarbeitung. */
.vertrauen-raster {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* Versuch am 18.08.2026, zurückgenommen: Block d) in Spalte 2 zu setzen, schließt
 * die leere Ecke unten rechts nicht, sondern reißt ein Loch in die Mitte von
 * Spalte 2 — Zeile 2 beginnt erst unter dem längsten Block der Zeile 1. Die
 * Ungleichheit kam aus der Länge der Texte, nicht aus dem Raster; erledigt hat
 * sie erst die Spaltenzahl oben. */

.vertrauen-block {
  display: grid;
  gap: 14px;
  align-content: start;
}

.vertrauen-block h3 {
  font-family: var(--serif);
}

.quelle {
  font-size: var(--t-small);
  color: var(--gedaempft);
}

/* ══ 8 · Kontakt und teure Fragen ════════════════════════════════════════════ */

.kontakt-raster {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  align-items: start;
}

@media (min-width: 940px) {
  .kontakt-raster {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }
}

.schritte {
  display: grid;
  gap: 12px;
  counter-reset: schritt;
}

.schritte li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
}

.schritte li::before {
  counter-increment: schritt;
  content: counter(schritt);
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--akzent);
}

.schritt-frist {
  display: block;
  font-size: var(--t-small);
  color: var(--gedaempft);
}

/* Akkordeon. max-height-Übergang, 200 ms, Höhe aus scrollHeight in JS
 * (MOTION.md §5.2, HS §4.7). Statisch: alle Antworten sichtbar — ohne Skript
 * darf keine Antwort unerreichbar sein (MOTION.md §7.3). */
.fragen {
  display: grid;
  gap: 10px;
}

/* Eine Akkordeonzeile ist bei 1440 px rund 545 px breit und mit geöffneter
 * Antwort über 150 px hoch — das ist ein Blatt, kein Knopf, und bekommt deshalb
 * --radius-gross statt --radius. 8 px Radius auf dieser Fläche war die härteste
 * Einzelkante der Seite (acht Stück untereinander, gemessen 28.08.2026). */
.frage {
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten-nah);
  overflow: hidden;
  scroll-margin-top: calc(var(--kopf-hoehe) + 8px);
}

.frage-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-body);
  color: var(--tinte);
  text-align: left;
  cursor: pointer;
}

@media (any-hover: hover) {
  .frage-kopf {
    transition: background-color var(--d-schnell) var(--k-ein-aus);
  }

  /* Weiße Fläche → --akzent-weich. Auf dem Band wäre --flaeche-2 die Farbe des
     Untergrunds; die Frage würde beim Überfahren in die Seite fallen. */
  .frage-kopf:hover {
    background: var(--akzent-weich);
  }
}

.frage-kopf:active {
  opacity: 0.95;
}

/* Fokusring als Pseudoelement über die ganze Karte (HS §5.2, wörtlich). */
.frage-kopf:focus-visible {
  outline: none;
}

.frage-kopf:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-gross);
  outline: var(--w-fokus) solid var(--tinte);
  outline-offset: -2px;
  pointer-events: none;
}

.frage {
  position: relative;
}

/* Der Pfeil. Klickfläche mindestens 24 × 24 px (WCAG 2.5.8) — sie wird über das
 * Pseudoelement des Kopfes ohnehin von der ganzen Zeile getragen. */
.frage-pfeil {
  flex: none;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--gedaempft);
  border-bottom: 2px solid var(--gedaempft);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
}

.frage-kopf[aria-expanded="true"] .frage-pfeil {
  transform: rotate(-135deg);
}

.frage-panel {
  padding: 0 24px 22px;
  color: var(--gedaempft);
}

/* Nur mit Skript wird zugeklappt. Ohne Skript steht jede Antwort da. */
.js .frage-panel {
  overflow: hidden;
  transition: max-height var(--d-mittel) var(--k-ein-aus),
    opacity var(--d-mittel) var(--k-ein-aus), visibility 0s;
}

.js .frage-panel[hidden] {
  display: block;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  padding-bottom: 0;
}

/* ══ Fuß ═════════════════════════════════════════════════════════════════════ */

.fuss {
  border-top: 1px solid var(--linie);
  padding-block: clamp(40px, 6vw, 64px);
}

.fuss-raster {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fuss-spalte {
  display: grid;
  gap: 8px;
  align-content: start;
}

.fuss-kopf {
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--sperr-versal);
  text-transform: uppercase;
  color: var(--gedaempft);
  margin-bottom: 4px;
}

.fuss-spalte a {
  color: var(--gedaempft);
  text-decoration: none;
  font-size: var(--t-small);
  width: fit-content;
}

.fuss-spalte a:hover {
  color: var(--tinte);
}

/* ══ Bewegung abschalten ═════════════════════════════════════════════════════
 * MOTION.md §7.1. Abgeschaltet: Einblenden, Zeichnen, Zeitleistenlinie,
 * Zähler, weiches Scrollen. Die Farbwechsel und das Akkordeon bleiben — sie
 * sind Zustandsrückmeldung, keine Bewegung im Raum. */

@media (prefers-reduced-motion: reduce) {
  .js [data-einblenden] {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: -1ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* Ausnahme, MOTION.md §7.1: Farbe ist Rueckmeldung, keine Bewegung im Raum.
     Ein Hover, der nicht mehr die Farbe wechselt, ist kein ruhigeres Interface,
     sondern ein kaputtes. */
  a,
  button,
  [role="tab"],
  [role="radio"],
  .karte,
  input,
  select,
  textarea {
    transition: background-color 150ms, border-color 150ms, color 150ms,
      opacity 150ms !important;
  }

  /* Das Akkordeonpanel springt auf: max-height ist eine Groessenaenderung. */
  .js .frage-panel {
    transition-duration: 1ms !important;
  }
}

/* ══ Druck ═══════════════════════════════════════════════════════════════════
 * Im Druck ist alles sichtbar. Das Angebot druckt sich aus dieser Seite ohne
 * Umbau (docs/marke.md: „Angebote drucken sich daraus ohne Umbau"). */

@media print {
  :root {
    --grund: #fff;
    --flaeche: #fff;
    --flaeche-2: #fff;
    --band: #fff; /* das Band druckt nicht — Toner für eine Betonung, die auf
                     Papier ohnehin die Seitengrenze übernimmt */
    --akzent-weich: #fff;
    --tinte: #000;
    --gedaempft: #333;
    --linie: #bbb;
    --linie-stark: #888;
    --schatten: none;
    --schatten-nah: none;
  }

  .sec-band {
    background: none;
  }

  .leiste,
  .sprung,
  .feld-grund,
  .feld {
    display: none;
  }

  .js [data-einblenden],
  .frage-panel[hidden],
  .js .frage-panel[hidden],
  .reiter-panel[hidden] {
    display: block !important;
    opacity: 1 !important;
    max-height: none !important;
    visibility: visible !important;
    transform: none !important;
  }

  .karte,
  .messblatt,
  .frage {
    box-shadow: none;
    break-inside: avoid;
  }

  .kopf {
    min-height: 0;
  }
}

/* ══ Offene Stellen ══════════════════════════════════════════════════════════
 * Sichtbare Marke für alles, was noch nicht entschieden ist: Nische,
 * Kapazitätszahl, Dauer der Phase 2, Rechtsform, Kontaktziel. Jede Stelle trägt
 * daneben einen HTML-Kommentar mit dem Wort AUSFÜLLEN und der Fundstelle der
 * offenen Entscheidung.
 *
 * Bewusst leise gestaltet: --signal in gestrichelter Kontur, nicht als Warnung.
 * Es ist keine Baustelle, sondern eine Angabe, die noch fehlt — und STRUKTUR_NEU.md
 * verlangt ausdrücklich, dass die Seite lieber nichts sagt als etwas Erfundenes.
 *
 * ACHTUNG vor dem Onlinegang: Es darf KEINE .offen-marke mehr auf der Seite
 * stehen. Sie sind Bauzustand, kein Gestaltungsmittel. Siehe README.md. */

.offen-marke {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed var(--signal);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-mark);
  letter-spacing: var(--sperr-versal);
  text-transform: uppercase;
  color: var(--signal);
  /* Eigene weiße Fläche statt transparent: --signal misst auf dem Band nur
     4,34:1 und auf --flaeche-2 ebenso, auf Weiß dagegen 5,58:1. Eine Marke,
     die überall stehen kann, muss ihren Grund mitbringen. */
  background: var(--flaeche);
  white-space: nowrap;
}

/* Im Ergebnisfeld der Zeitleiste ersetzt die Marke die Dauer-Pille. */
.phase-dauer.offen-marke {
  margin-left: auto;
  background: var(--flaeche);
}

/* ══ Pflichtseiten ═══════════════════════════════════════════════════════════
 * impressum.html und datenschutz.html. Übernommen aus web/landing/styles.css,
 * unverändert bis auf die Klassennamen der Kopfleiste (skip → sprung,
 * topbar → leiste). Beide Seiten haben GAR KEINE Einblendung — dort will
 * jemand etwas nachschlagen (MOTION.md §4.2, Zeile 9). */

.rechtsseite {
  padding: clamp(40px, 6vw, 80px) 0 var(--abschnitt);
}

.rechtsseite h1 {
  font-size: var(--t-h2);
  margin-bottom: 24px;
}

.rechtsseite h2 {
  font-size: var(--t-lede);
  font-family: var(--sans);
  font-weight: 600;
  margin: 36px 0 10px;
}

.rechtsseite h3 {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 600;
  margin: 22px 0 6px;
}

.rechtsseite p,
.rechtsseite li {
  font-size: var(--t-small);
  line-height: 1.7;
  max-width: 76ch;
}

.rechtsseite p + p {
  margin-top: 10px;
}

.rechtsseite ul {
  margin-top: 10px;
}

.rechtsseite ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 7px;
}

.rechtsseite ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--linie-stark);
}

.zurueck {
  display: inline-block;
  margin-bottom: 28px;
  font-size: var(--t-small);
  color: var(--gedaempft);
  text-decoration: none;
}

.zurueck:hover {
  color: var(--tinte);
}

/* Der Prüfkasten. Er bleibt oben auf beiden Seiten stehen, bis ein Anwalt sie
 * gesehen hat — STRUKTUR_NEU.md §9: „Vorher geht die Seite nicht online." */
.pruefkasten {
  border: 1px solid var(--signal);
  border-left-width: 3px;
  border-radius: var(--radius-gross);
  background: color-mix(in srgb, var(--signal) 8%, var(--flaeche));
  padding: 18px 20px;
  margin-bottom: 32px;
}

.pruefkasten p {
  font-size: var(--t-small);
}

.pruefkasten strong {
  color: var(--signal);
}

.auszufuellen {
  font-family: var(--mono);
  font-size: var(--t-small);
  color: var(--signal);
  border-bottom: 1px dashed var(--signal);
  padding-bottom: 1px;
}

.fuss-hinweis {
  margin-top: 14px;
  max-width: 34ch;
}

/* Der Sprunglink setzt den Fokus auf <main>; ohne diese Regel malt der Browser
 * einen Ring um die halbe Seite. Der Sprung selbst bleibt sichtbar — der Inhalt
 * steht danach oben. */
main:focus {
  outline: none;
}