/* ============================================================
   kintso.care — DIE STARTSEITE.

   Zweites Stylesheet, und der Grund ist eine Zahl: die gemeinsame
   `kintso.css` trägt sieben Rechts- und Funktionsseiten. Alles, was
   nur die eine Seite hier braucht — vier Schemazeichnungen, der
   Faden am Rand, die Aufdeck-Bewegung —, würde diesen sieben Seiten
   rund 14 KB aufbürden, die sie nie benutzen.

   ⚠ DIE FARBEN KOMMEN AUS DER GEMEINSAMEN DATEI. Hier steht kein
   einziger neuer Hex-Wert; jede Fläche greift auf die Marken-Token
   zu (`--ground`, `--sage-*`, `--sand`, `--gold`, `--rule`). Damit
   kippt die ganze Seite mit der zweiten Palette mit, ohne dass
   irgendwo etwas nachgezogen werden muss — dieselbe Regel wie in der
   App: „Farbe, die nicht in der Palette liegt, kippt nicht."

   ⚠ GOLD BLEIBT STRICH, NIEMALS SCHRIFT. #d4af37 auf Sand ist
   1,85:1. Es erscheint auf dieser Seite an genau vier Stellen, und
   alle vier sind Linien: die Naht im Zeichen, der Faden am Rand, die
   Trenner zwischen den Kapiteln, die Naht in der Schale.

   ⚠⚠ DIE TRAGENDE REGEL, UNVERÄNDERT SEIT DER ERSTEN FASSUNG:
   DER RUHEZUSTAND IST DER FERTIGZUSTAND. Ohne JavaScript, ohne
   GSAP, bei „Bewegung reduzieren" steht jede Fläche VOLLSTÄNDIG da.
   Die Startzustände der Aufdeck-Bewegung hängen deshalb an
   `html.bewegt` — einer Klasse, die ein winziges Skript im Kopf nur
   dann setzt, wenn Bewegung erwünscht ist, und die `home.js` wieder
   ENTFERNT, falls die Bibliothek nicht lädt. Wer sie an `[data-auf]`
   allein hängt, baut eine Seite, die bei einem fehlgeschlagenen
   Skript leer bleibt.
   ============================================================ */

/* ── Aufdecken beim Scrollen ───────────────────────────── */

html.bewegt [data-auf] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
html.bewegt [data-auf="ruhig"] {
  transform: none;
}

/* ── Der goldene Faden am Rand ─────────────────────────── */
/* Er ist der Lesefortschritt — und zugleich das Bild, um das es
   geht: eine Naht, die entsteht, während man liest. `scaleY` auf
   einem 2 px breiten Element; der Compositor trägt das ohne einen
   einzigen Layout-Durchgang.

   ⚠ Erst ab 1100 px. Darunter wäre er entweder im Text oder am
   Bildschirmrand abgeschnitten — und die Seite ist zuerst für das
   Telefon gebaut, wo er nichts beiträgt. */
.spur {
  display: none;
}
@media (min-width: 1100px) {
  .spur {
    display: block;
    position: fixed;
    left: max(28px, calc((100vw - 1180px) / 2 - 34px));
    top: 15vh;
    bottom: 15vh;
    width: 2px;
    border-radius: 2px;
    background: var(--rule);
    z-index: 5;
    pointer-events: none;
  }
  .spur i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--gold) 12%,
      var(--gold)
    );
    transform: scaleY(0);
    transform-origin: 50% 0;
  }
}

/* ── Gerüst der Startseite ─────────────────────────────── */

.wrap--breit {
  max-width: 1120px;
}

.kapitel {
  padding: clamp(64px, 11vw, 128px) 0;
}
.kapitel--eng {
  padding: clamp(48px, 8vw, 92px) 0;
}

/* Der Trenner: derselbe Bézier wie die ConnectionGlyph der App.
   Gerade Linien sind für dieses Zeichen ausdrücklich verboten. */
.naht-trenner {
  display: flex;
  justify-content: center;
}
.naht-trenner svg {
  width: 46px;
  height: 23px;
  overflow: visible;
}
.naht-trenner path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.auftakt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 620px;
}
.auftakt--mitte {
  margin: 0 auto;
  text-align: center;
  align-items: center;
}

/* ── Der Auftakt ───────────────────────────────────────── */

.held {
  position: relative;
  display: grid;
  gap: clamp(30px, 5vw, 56px);
  align-items: center;
  padding: clamp(48px, 9vw, 96px) 0 clamp(40px, 7vw, 72px);
}
@media (min-width: 860px) {
  .held {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.held-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}

.held h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 7.2vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

.held .lede {
  max-width: 30em;
}

/* ── Die Beleg-Zeile unter der Lede ───────────────────────
   Vier Eigenschaften, durch einen Mittelpunkt getrennt. Kein Verb,
   keine Aufforderung, kein Siegel — die Belege dafür stehen im
   letzten Viertel der Seite, ausformuliert und nachprüfbar.

   ⚠ `<ul>` UND NICHT VIER `<span>`. Für einen Screenreader ist das
   eine Liste mit vier Einträgen und wird als solche angesagt; vier
   Spannen wären ein Satz aus Mittelpunkten. Die Trennzeichen sind
   deshalb `::after` und nicht Text — sie werden nicht vorgelesen. */

.belege {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  font-size: 14px;
  color: var(--ink-faint);
}

.belege li {
  display: inline-flex;
  align-items: center;
}

.belege li:not(:last-child)::after {
  content: "·";
  margin: 0 10px;
  color: var(--rule);
  /* Der Punkt ist Trennung, kein Wort — die Farbe hält ihn im
     Hintergrund, damit die vier Angaben die Zeile tragen. */
}

/* Der Hinweis auf den Start — ein Schild, kein Knopf. Es gibt nichts
   zu drücken, solange die App nicht da ist; ein Knopf, der nur eine
   Mailadresse öffnet, verspricht mehr, als er hält. */
.schild {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 14px;
}
.schild b {
  color: var(--ink);
  font-weight: 600;
}
.schild .punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage-fill);
  flex: none;
}

/* ── Das Zeichen im Auftakt ────────────────────────────── */
/* Zwei Scheiben, die zueinander finden, und eine Naht, die sich
   zieht. Geometrie zeichengleich aus src/core/brand/logoTokens.ts —
   nur die Bewegung ist neu. */
.held-zeichen {
  justify-self: center;
  width: min(320px, 74vw);
  aspect-ratio: 1;
  position: relative;
}
.held-zeichen svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.held-zeichen .hof {
  fill: var(--sage-light);
  opacity: 0.34;
}
.held-zeichen .naht {
  stroke: var(--gold);
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 34;
}
/* ── Die Funken ───────────────────────────────────────────
   ⚠ SIE SIND DIE ANIMATION AUS DER APP, nicht eine Erfindung für
   die Website. `src/core/brand/FunkenAnimation.tsx`, montiert in
   `PairingCelebration.tsx:63` mit `size={180}` — das ist der
   Bildschirm, den ein Mensch sieht, wenn das Paar zustande kommt.
   Übernommen sind die Werte, nicht nur die Idee: Radius 38 → 95,
   Strichstärke 4 → 0,4, Spitzen-Deckkraft 0,65 und 0,55, der zweite
   Ring 700 ms nach dem ersten, alles zusammen 3,5 s.

   ⚠ IM RUHEZUSTAND UNSICHTBAR — und das ist die Hausregel, nicht
   ein Versehen: „Gold ist ein Moment, keine Dekoration." Fünf
   Bild-Generatoren im Repo BRECHEN AB, wenn Gold in eine
   Komposition gerät. Ein dauerhaft stehender Goldring wäre genau
   das. Deshalb steht `.funke` als benannte Ausnahme in
   `webStartseiteBewegung.test.ts` — mit diesem Grund.

   ⚠ `r` UND `stroke-width` SIND KEINE TRANSFORMATIONEN. Sie lassen
   sich nicht auf den Compositor schieben; ein wachsender Kreis ist
   ein Neuzeichnen je Bild. Vertretbar, weil es zwei Kreise sind,
   einmal, 3,5 Sekunden lang, auf einer Fläche von 320 px. Der
   Alternativweg (ein `scale` auf einem Element mit fester Größe)
   würde die Strichstärke mitskalieren — dann wird aus dem
   auslaufenden Ring ein fetter Reifen, also das Gegenteil. */
.funke {
  fill: none;
  stroke: var(--gold);
  stroke-width: 4;
  opacity: 0;
}

html.bewegt .held-zeichen .naht {
  stroke-dashoffset: 34;
}
html.bewegt .held-zeichen .scheibe--a {
  transform: translate3d(-26px, 0, 0);
}
html.bewegt .held-zeichen .scheibe--b {
  transform: translate3d(26px, 0, 0);
}
html.bewegt .held-zeichen .hof {
  transform: scale(0.6);
  opacity: 0;
}
.held-zeichen .hof,
.held-zeichen .scheibe--a,
.held-zeichen .scheibe--b {
  transform-origin: 100px 100px;
}

/* ── Wofür — die Positionierung ───────────────────────────
   Ein Satz, mittig, groß. Er ist der einzige Ort der Seite, an dem
   nichts erklärt wird — deshalb steht er allein, ohne Bühne,
   ohne Bild, ohne Knopf. */

.wofuer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.wofuer h2 {
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.22;
  max-width: 19ch;
  text-wrap: balance;
}

.wofuer .lede {
  max-width: 46ch;
}

/* ── Die vier Räume ────────────────────────────────────── */

.raeume {
  display: grid;
  gap: 16px;
  margin-top: 44px;
}
@media (min-width: 620px) {
  .raeume {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 980px) {
  .raeume {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

.raum {
  position: relative;
  background: var(--card);
  border-radius: 20px;
  padding: 26px 24px 28px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* `will-change` bewusst NICHT: vier dauerhaft beförderte Ebenen
     kosten Speicher für eine Bewegung, die nur beim Zeigen läuft. */
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.28s ease;
}

/* Die goldene Kante oben — sie wächst beim Zeigen aus der Mitte.
   Ein Strich, keine Fläche: Gold bleibt Gold. */
.raum::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--gold);
  opacity: 0.75;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.raum-glyph {
  width: 26px;
  height: 26px;
  color: var(--sage-text);
  transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.raum h3 {
  font-family: var(--serif);
  font-size: 21px;
  margin: 0;
}
.raum p {
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-soft);
}

@media (hover: hover) {
  .raum:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow:
      0 2px 4px rgba(44, 44, 44, 0.04),
      0 18px 44px rgba(44, 44, 44, 0.08);
  }
  .raum:hover::before {
    transform: scaleX(1);
  }
  .raum:hover .raum-glyph {
    transform: scale(1.08) rotate(-3deg);
  }
}

/* ── Die Zahlen ────────────────────────────────────────── */
/* ⚠ DRITTE FASSUNG (2026-09-10). Die erste war eine graue Platte mit
   fünf nackten Zahlen; die zweite bekam die App-Glyphen und darunter
   ein Versal-Wort („FREI", „MIT PLUS") — Matthias' Urteil dazu:
   unterirdisch. Zu Recht: fünf gleich aussehende Etiketten sagen dem
   Auge nichts über das VERHÄLTNIS, und genau das ist die Frage.

   Jetzt trägt jede Zahl einen Anteils-Balken. Man SIEHT, dass die
   Fragen etwa zu einem Drittel offen sind und die Abende ganz zu
   Kintso Plus gehören, bevor man ein Wort liest.

   ⚠ DIE GESAMTZAHL BLEIBT DIE DICKE ZAHL (Vorgabe Matthias). Der
   Balken teilt sie, er ersetzt sie nicht — 385 ist die Menge, die
   in der App liegt, und das ist die Aussage der Reihe.

   ⚠ DAS GOLDENE BLATT IST DER PREMIUM-MARKER DER APP, wörtlich aus
   `kintsoIcons.ts` („premium-marker", „Ein goldenes Blatt"). Es ist
   dort ein GOLD-Glyph — die einzige Sorte, die Gold tragen darf,
   weil sie eine Bedeutung MARKIERT und nicht schmückt. Es erscheint
   deshalb genau EINMAL, in der Legende, nicht fünfmal an den
   Balken. */

.zahlen {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border-top: 1px solid var(--rule);
}

.zahl {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "zeichen zahl wort"
    ".       balken balken"
    ".       tier   tier";
  align-items: center;
  gap: 6px 16px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--rule);
}
.zahl-zeichen {
  grid-area: zeichen;
}
.zahl b {
  grid-area: zahl;
}
.zahl-wort {
  grid-area: wort;
}
.zahl-balken {
  grid-area: balken;
}
.zahl-tier {
  grid-area: tier;
}

.zahl-zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  background: var(--sage-light);
  color: var(--sage-text);
}
.zahl-zeichen svg {
  width: 25px;
  height: 25px;
  display: block;
}

.zahl b {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 2.6ch;
  text-align: right;
}

.zahl-wort {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Der Anteil. Sand steht für Kintso Plus, Salbei für den freien
   Teil — dieselben zwei Marken-Farben wie die zwei Scheiben im
   Zeichen. ⚠ NICHT Gold: eine gefüllte Gold-Fläche wäre Dekoration,
   und die Hausregel lässt Gold nur als Moment zu. */
.zahl-balken {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--sand);
  overflow: hidden;
}
.zahl-balken i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--sage-fill);
  /* `scaleX` statt `width`: eine Transformation, kein Layout. */
  transform: scaleX(var(--frei, 1));
  transform-origin: 0 50%;
}

.zahl-tier {
  font-size: 13px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.zahlen-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}
.zahlen-legende span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.probe {
  width: 16px;
  height: 5px;
  border-radius: 999px;
  flex: none;
}
.probe--frei {
  background: var(--sage-fill);
}
.probe--plus {
  background: var(--sand);
}

/* Das eine Gold der Reihe. */
.blatt {
  width: 15px;
  height: 15px;
  color: var(--gold);
  margin-right: -2px;
}

@media (min-width: 780px) {
  .zahlen {
    flex-direction: row;
    border-top: 0;
    margin-top: 0;
  }
  .zahl {
    flex: 1;
    grid-template-columns: 1fr;
    grid-template-areas: "zeichen" "zahl" "wort" "balken" "tier";
    justify-items: center;
    text-align: center;
    gap: 10px 0;
    padding: 4px 14px;
    border-bottom: 0;
    border-left: 1px solid var(--rule);
  }
  .zahl:first-child {
    border-left: 0;
  }
  .zahl b {
    font-size: clamp(30px, 3.4vw, 38px);
    min-width: 0;
    text-align: center;
  }
  .zahl-wort {
    font-size: 13.5px;
    max-width: 15ch;
  }
  .zahl-balken {
    width: 100%;
    max-width: 92px;
  }
  .zahlen-legende {
    justify-content: center;
    margin-top: 22px;
  }
}

/* ── Die Grenze: was Kintso nicht ist ──────────────────── */
/* Ein Feld, kein Kasten: `--card` mit einer Hauchlinie statt einer
   grauen Füllung, damit es sich von den Bühnen unterscheidet, ohne
   ein drittes Material einzuführen. Das Zeichen steht oben links
   und trägt die Bedeutung mit (`role="img"` plus Name) — es ist
   hier nicht Schmuck, sondern die Ansage „hier geht es um Schutz". */

.grenze {
  display: grid;
  gap: 18px 20px;
  padding: clamp(24px, 4vw, 34px);
  border: 1px solid var(--rule);
  border-radius: 22px;
  background: var(--card);
}
@media (min-width: 640px) {
  .grenze {
    grid-template-columns: auto 1fr;
  }
}

.grenze-zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  background: var(--sage-light);
  color: var(--sage-text);
}
.grenze-zeichen svg {
  width: 24px;
  height: 24px;
  display: block;
}

.grenze-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.grenze-satz {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-soft);
}
.grenze-satz b {
  color: var(--ink);
  font-weight: 600;
}

/* ── Der Verweis auf die Krisen-Leitungen ─────────────────
   ⚠ HIER STANDEN EINEN LAUF LANG DIE NUMMERN SELBST — Deutschland,
   Österreich, Schweiz, jeweils mit Träger und Erreichbarkeit, aus
   `src/features/crisis/crisisResources.ts`. Entscheid Matthias
   2026-09-10: wieder raus.

   Was bleibt, ist der Weg dorthin. Der alte Satz („die App zeigt
   euch die Nummer für euer Land") verwies auf eine App, die der
   Leser per Definition nicht hat — das war der Befund, und der gilt
   weiter. `findahelpline.com` ist die Quelle, die auch die App für
   unbekannte Regionen benutzt: ein Verzeichnis, das den Menschen an
   die Leitung SEINES Landes weiterreicht.

   ⚠ Und es ist derselbe Grund, aus dem `intl` in der App gar keine
   Nummer trägt: eine „internationale" Krisen-Nummer gibt es nicht.
   Die Begründung steht auf 25 Zeilen im Kopf jener Datei. */

.krise-satz {
  margin: 4px 0 0;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-soft);
}

.krise-satz a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sage-fill);
  padding-bottom: 1px;
}
@media (hover: hover) {
  .krise-satz a:hover {
    border-bottom-color: var(--ink);
  }
}

/* Der Safe-Harbor-Absatz: rechtlich nötig, aber nicht das, was
   zuerst gelesen werden soll. Hinter einer Hauchlinie, kleiner. */
.grenze-fuss {
  margin: 2px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* ── Die Bühne für die Schemazeichnungen ───────────────── */

.buehne {
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 36px;
}

.buehne figcaption {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}

/* ⚠ HIER STANDEN DIE WIEDERHOLEN-KNÖPFE — erst als Wort („Noch
   einmal ansehen"), dann als Zeichen, jetzt gar nicht mehr
   (Entscheid Matthias, 2026-09-10).

   Der Grund war nicht das Aussehen, sondern was sie versprachen:
   ein Knopf unter jeder Bühne sagt „hier gibt es etwas zu bedienen",
   und dann läuft nur dieselben drei Sekunden noch einmal. Fünf
   davon auf einer Seite sind fünf Versprechen für eine Wiederholung,
   die niemand gesucht hat.

   ⚠ Die Zeitleisten bleiben — sie laufen weiterhin einmal ab, wenn
   die Fläche in den Blick kommt. Weggefallen ist nur das Auslösen
   von Hand. */

/* ── Schema 1 · Der tägliche Blick ─────────────────────── */

.heute {
  display: grid;
  gap: 16px;
}
@media (min-width: 700px) {
  .heute {
    grid-template-columns: 1fr 1fr;
  }
}

.haelfte {
  background: var(--card-2);
  border-radius: 18px;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.haelfte-wer {
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.regler {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.regler-name {
  font-size: 14px;
  color: var(--ink-soft);
}
.schiene {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--rule);
}
.schiene i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--sage-fill);
  transform: scaleX(var(--stand, 0.5));
  transform-origin: 0 50%;
}
.schiene b {
  position: absolute;
  top: 50%;
  /* ⚠ DIE RUHELAGE STEHT IN CSS, die Bewegung kommt aus GSAP. `left`
     in Prozent ist eine Layout-Eigenschaft — hier aber ein EINMAL
     gesetzter Wert, kein animierter. Bewegt wird ausschließlich
     `transform` (`gsap.from({x: …})`), und der Nullpunkt dieser
     Bewegung ist genau diese Ruhelage. Damit ist die Fläche ohne
     JavaScript fertig und mit ihm flüssig. */
  left: calc(var(--stand, 0.5) * 100%);
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(44, 44, 44, 0.16);
}

/* Der gemeinsame Ton — er erscheint erst, wenn beide da sind. Das
   ist die ganze Aussage der Fläche. */
.ton {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 18px;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--sage-light) 70%, transparent),
    color-mix(in srgb, var(--sand) 42%, transparent)
  );
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .ton {
    background: var(--sage-light);
  }
}
.ton-kreis {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background: var(--sage-fill);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sage-fill) 22%, transparent);
}
.ton-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ton-text b {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
}
.ton-text span {
  font-size: 14px;
  color: var(--ink-soft);
}
html.bewegt .ton {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
}

/* ── Schema · Der Goldene Faden als Geste ────────────────
   Farben und Masse wörtlich aus `src/core/brand/GoldenThreadBeat.tsx`:
   Scheiben r 9 in Salbei und Sand, Schimmer in goldLight mit
   Strichstärke 7, Faden in Gold mit 2,2, Lichtpunkt r 4,4 mit Hof
   r 11. `stroke-dasharray: 240` ist der Wert der App (≥ Bogenlänge).

   ⚠ HIER DARF GOLD TRAGEN, und nur hier. Der Kopf der App-Datei
   sagt es aus: „gold is on-meaning here" — der Faden IST das Gold,
   nicht sein Schmuck. Der Schimmer darunter ist derselbe Pfad,
   breit und blass: „Ohne ihn ist Gold ein Strich; mit ihm ist es
   Licht."

   ⚠ DIE FARBEN STEHEN IM CSS, NICHT ALS ATTRIBUT — aber das Markup
   trägt `stroke="none"` und `fill="none"` als Rückfall. Das ist die
   Lehre vom 2026-09-10: kommt die Regel nicht an (alter
   Zwischenspeicher), ist die SVG-Vorgabe für `fill` SCHWARZ. Mit
   dem Attribut bleibt die Fläche im Zweifel leer statt schwarz. */

.faden-bahn {
  display: block;
  width: min(460px, 100%);
  margin: 6px auto 0;
  overflow: visible;
}

.faden-scheibe--a {
  fill: var(--sage-fill);
}
.faden-scheibe--b {
  fill: var(--sand);
}

.faden-schimmer {
  stroke: #e8d48b;
  stroke-width: 7;
  stroke-dasharray: 240;
  opacity: 0.5;
}

.faden-strich {
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-dasharray: 240;
}

/* ⚠ DER HOF IST IM RUHEZUSTAND WEG (opacity 0), der Punkt LIEGT.
   Das ist das Bild nach der Geste: der Faden ist gezogen, das Licht
   ist angekommen, der Schein darum ist verglommen. Die Bewegung
   endet in genau diesem Bild — sonst wären es zwei verschiedene
   Fertigzustände, je nachdem ob JavaScript da war. */
.faden-hof {
  fill: #e8d48b;
  opacity: 0;
}
.faden-punkt {
  fill: var(--gold);
}

/* ⚠ IM RUHEZUSTAND IST DER FADEN GEZOGEN — er ist angekommen. Ohne
   JavaScript soll niemand eine halbe Geste sehen. Nur die Bewegung
   setzt ihn zurück und webt ihn neu. */
html.bewegt .faden-schimmer,
html.bewegt .faden-strich {
  stroke-dashoffset: 240;
}
html.bewegt .faden-punkt {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.bewegt .faden-schimmer,
  html.bewegt .faden-strich {
    stroke-dashoffset: 0 !important;
  }
  html.bewegt .faden-punkt {
    opacity: 1 !important;
  }
}

/* ── Schema · Die Frage des Tages, doppelblind ───────────
   Eine Karte, darunter zwei Felder. Was aufgedeckt wird, sind
   Balken — nie Text. Ein weichgezeichneter Absatz würde sagen „hier
   stand echter Text", und bei den Antworten zweier Menschen ist das
   die falsche Aussage.

   ⚠ DER DECKEL LIEGT NUR, WENN BEWEGUNG ERWÜNSCHT IST. Im
   Ruhezustand sind beide Felder aufgedeckt — sonst stünde ohne
   JavaScript eine Fläche da, die zwei Kästen mit „noch nicht"
   zeigt und nie weitergeht. */

.deck {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.frage-karte {
  background: var(--card-2);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.karte-bereich {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-text);
}

.karte-frage {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.42;
  color: var(--ink);
  text-wrap: balance;
}

.felder {
  display: grid;
  gap: 14px;
}
@media (min-width: 620px) {
  .felder {
    grid-template-columns: 1fr 1fr;
  }
}

.antwort-feld {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 18px 18px;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.feld-wer {
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Drei ruhige Balken — dasselbe Bauteil wie im Gerät der Auszeit. */
.feld-balken {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.feld-balken i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--sage-light);
}
.feld-balken i:nth-child(1) {
  width: 100%;
}
.feld-balken i:nth-child(2) {
  width: 72%;
}
.feld-balken i:nth-child(3) {
  width: 86%;
}

.feld-deckel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-2);
  color: var(--ink-faint);
  font-size: 13.5px;
  /* Ruhezustand: kein Deckel. Nur mit Bewegung liegt er auf. */
  opacity: 0;
  pointer-events: none;
}
html.bewegt .feld-deckel {
  opacity: 1;
}
html.bewegt .feld-balken {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.bewegt .feld-deckel {
    opacity: 0 !important;
  }
  html.bewegt .feld-balken {
    opacity: 1 !important;
  }
}

/* ── Schema 2 · Das Echo-Protokoll ─────────────────────── */

.echo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.beitrag {
  max-width: 84%;
  padding: 15px 18px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.beitrag--a {
  align-self: flex-start;
  background: var(--sage-light);
  border-bottom-left-radius: 6px;
}
.beitrag--b {
  align-self: flex-end;
  background: color-mix(in srgb, var(--sand) 46%, var(--card-2));
  border-bottom-right-radius: 6px;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .beitrag--b {
    background: var(--card-2);
  }
}
.beitrag .wer {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.beitrag .satz {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}

/* Der Zeitabstand IST die Aussage: kein Chat, ein Wechsel. */
.spanne {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-faint);
  padding: 2px 0;
}
.spanne::before,
.spanne::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--rule);
}

html.bewegt .beitrag,
html.bewegt .spanne {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

/* ── Schema 3 · Die gemeinsame Auszeit ─────────────────── */

.geraete {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 28px);
  justify-items: center;
}

.geraet {
  position: relative;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 9 / 17;
  border-radius: 22px;
  background: var(--card-2);
  border: 1px solid var(--rule);
  overflow: hidden;
}

/* Was vorher da war: drei Zeilen Alltag. */
.ruhe {
  position: absolute;
  inset: 16px 14px auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ruhe i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--rule);
}
.ruhe i:nth-child(1) {
  width: 78%;
}
.ruhe i:nth-child(2) {
  width: 56%;
}
.ruhe i:nth-child(3) {
  width: 67%;
}

/* Der Schleier legt sich über BEIDE Geräte — das ist der Punkt. */
.schleier {
  position: absolute;
  inset: 0;
  background: var(--sage-text);
  opacity: 0.94;
}
.krisen-inhalt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.atem {
  width: 62px;
  height: 62px;
}
.atem .ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 1.4;
}
.atem .puls {
  fill: rgba(255, 255, 255, 0.16);
  transform-origin: 40px 40px;
}
.uhr {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.86);
}

html.bewegt .schleier,
html.bewegt .krisen-inhalt {
  opacity: 0;
}

/* ── Schema 4 · Die Naht ───────────────────────────────── */
/* Die Schale bricht und wird mit Gold geklebt. Es ist die einzige
   Bewegung auf dieser Seite, die den NAMEN erklärt — deshalb steht
   sie im Kapitel „Woher der Name kommt" und nirgendwo sonst.

   ⚠ Diese Fläche und das Zeichen im Auftakt sind die zwei einzigen
   Stellen mit `stroke-dashoffset`. Alles andere auf der Seite läuft
   über `transform` und `opacity`. Eine sich ziehende Linie lässt
   sich nicht als Transformation ausdrücken, ohne sie zu verbiegen —
   und es sind zwei Striche von 2,6 px, kein Verlauf über Flächen. */
.schale {
  width: min(360px, 88%);
  margin: 0 auto;
  display: block;
  overflow: visible;
}
.schale .koerper {
  fill: color-mix(in srgb, var(--sand) 56%, var(--card));
  stroke: var(--rule);
  stroke-width: 1.5;
}
@supports not (fill: color-mix(in srgb, red 50%, blue)) {
  .schale .koerper {
    fill: var(--sand);
  }
}
.schale .rand {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.5;
}
.schale .bruch {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
}
html.bewegt .schale .bruch {
  stroke-dashoffset: 100;
}
/* Die zwei Hälften stehen leicht auseinander, bevor die Naht sie
   hält. Vier Pixel — mehr wäre ein zerbrochenes Ding, und darum
   geht es nicht. */
html.bewegt .schale .halb--links {
  transform: translate3d(-5px, 2px, 0) rotate(-1.4deg);
}
html.bewegt .schale .halb--rechts {
  transform: translate3d(5px, 2px, 0) rotate(1.4deg);
}
.schale .halb--links,
.schale .halb--rechts {
  transform-origin: 150px 120px;
}

.herkunft {
  display: grid;
  gap: clamp(24px, 5vw, 48px);
  align-items: center;
}
@media (min-width: 820px) {
  .herkunft {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* ── Wofür wir geradestehen ────────────────────────────── */

.regeln {
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: clamp(26px, 4.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.regeln ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
@media (min-width: 780px) {
  .regeln ul {
    grid-template-columns: 1fr 1fr;
    gap: 22px 34px;
  }
}
.regeln li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.regeln li svg {
  flex: none;
  width: 30px;
  height: 15px;
  margin-top: 7px;
  overflow: visible;
}
.regeln li span {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.regeln li b {
  color: var(--ink);
  font-weight: 600;
}

/* ── Der Schluss ───────────────────────────────────────── */

.schluss {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.schluss h2 {
  max-width: 16em;
}
.post {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--knopf-bg);
  color: var(--knopf-text);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 600;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease;
}
@media (hover: hover) {
  .post:hover {
    transform: translate3d(0, -2px, 0);
    opacity: 0.92;
  }
}
.post:active {
  transform: scale(0.98);
}

/* ── Bewegung abbestellt ───────────────────────────────── */
/* Doppelt gesichert: das Kopf-Skript setzt `html.bewegt` gar nicht
   erst, und falls doch je eine Klasse hängen bliebe, hebt dieser
   Block jeden Startzustand wieder auf. Eine Wand, die nur an einer
   Stelle steht, ist bei „Bewegung reduzieren" keine Wand. */
@media (prefers-reduced-motion: reduce) {
  html.bewegt [data-auf],
  html.bewegt .ton,
  html.bewegt .beitrag,
  html.bewegt .spanne,
  html.bewegt .schleier,
  html.bewegt .krisen-inhalt {
    opacity: 1 !important;
    transform: none !important;
  }
  html.bewegt .held-zeichen .naht,
  html.bewegt .schale .bruch {
    stroke-dashoffset: 0 !important;
  }
  html.bewegt .held-zeichen .scheibe--a,
  html.bewegt .held-zeichen .scheibe--b,
  html.bewegt .held-zeichen .hof,
  html.bewegt .schale .halb--links,
  html.bewegt .schale .halb--rechts {
    transform: none !important;
    opacity: 1 !important;
  }
  .raum,
  .raum::before,
  .raum-glyph,
  .wieder,
  .post {
    transition: none;
  }
}

/* ── Nachtrag: was aus dem alten Startseiten-Block bleibt ─ */
/* `.quote` trägt genau einen Satz auf dieser Seite — „Nicht mehr
   Aufgaben. Weniger Abstand." Er steht als Serifen-Zeile statt als
   Überschrift, weil er keine Sektion benennt, sondern eine Haltung. */
.quote {
  font-family: var(--serif);
  /* ⚠ 400, NICHT die 600 der Überschriften-Regel. Die Zeile ist seit
     2026-09-10 eine `h2` — vorher war sie ein `<p>`, weil dem
     Abschnitt eine Überschrift fehlte und das Dokument von h1 direkt
     auf h3 sprang. Die SEMANTIK ist damit richtig; die FORM sollte
     dieselbe bleiben, sonst wird aus einer Haltung eine Ansage. */
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 28px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}

/* Die Innenseite der Schale — sie wird nur als Sichel über dem
   Körper sichtbar und gibt dem Ding seine Tiefe. */
.schale .innen {
  fill: color-mix(in srgb, var(--sand) 62%, var(--ink));
  opacity: 0.55;
}
@supports not (fill: color-mix(in srgb, red 50%, blue)) {
  .schale .innen {
    fill: var(--sage-text);
    opacity: 0.4;
  }
}

/* ── Häufige Fragen ────────────────────────────────────── */
/* ⚠ AKKORDEON, ABER FLACH. Zwei verworfene Fassungen stecken hier
   drin, und beide Male lag der Fehler NICHT an der Mechanik:
   erst `<details>` in fetten weißen Kacheln mit vollem Schatten
   (vier schwebende Bretter), dann alles offen in zwei Spalten
   (schön zu lesen, aber eine Wand Text). Jetzt die Mechanik der
   ersten mit den Materialien der zweiten.

   Das Haus-Regelwerk sagt es wörtlich: „Depth comes from background
   color contrast, not elevation" und „Use subtle background color
   differences for separation." Also Hauchlinien in `--rule` —
   dieselben, die die Fußzeile und die Zeitabstände im Echo-Dialog
   benutzen — und keine Fläche.

   ⚠ `<details>` bringt zwei Voreinstellungen mit, die man kennen
   muss: WebKit zeichnet ein Dreieck über `::-webkit-details-marker`,
   die anderen über `list-style` am `summary`. Beide abschalten,
   sonst steht neben dem eigenen Zeichen noch ein fremdes. */

.fragen {
  margin: 32px 0 0;
  border-top: 1px solid var(--rule);
}

.frage {
  border-bottom: 1px solid var(--rule);
}

.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.4;
  color: var(--ink);
  /* 44 px Trefferfläche kommt hier aus der Polsterung. */
}
.frage summary::-webkit-details-marker {
  display: none;
}

/* Der Fokus-Ring gehört auf die ganze Zeile, nicht auf den Text —
   sonst springt er beim Blättern mit der Tastatur zwischen
   Wortlängen hin und her. */
.frage summary:focus-visible {
  outline: 2px solid var(--sage-text);
  outline-offset: -3px;
  border-radius: 8px;
}

.frage-pfeil {
  flex: none;
  width: 19px;
  height: 19px;
  color: var(--ink-faint);
  transition:
    transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s ease;
}
.frage[open] .frage-pfeil {
  transform: rotate(180deg);
  color: var(--sage-text);
}

.antwort p {
  margin: 0;
  padding: 0 2px 22px;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 62ch;
}

@media (hover: hover) {
  .frage summary:hover .frage-pfeil {
    color: var(--ink-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  .frage-pfeil {
    transition: none;
  }
}

.nachsatz {
  margin-top: 22px;
}

/* ── Schema 4 · Der Abend zu zweit ───────────────────────
   Eine Woche, ein hervorgehobener Freitag, die Ansage darunter.

   ⚠ DIE ANSAGE IST DER GANZE PUNKT, nicht der Abend. Wer eine
   Verabredung plant, scheitert selten am Willen und fast immer an
   der Frage „was brauchen wir dafür?" um halb sieben. Deshalb steht
   `braucht` gleichrangig neben dem Namen des Abends und nicht als
   Fußnote darunter. */

.woche {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  list-style: none;
  margin: 0 0 clamp(18px, 3.2vw, 26px);
  padding: 0;
}

.wtag {
  position: relative;
  padding: 9px 0 15px;
  border-radius: 11px;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.wtag--fr {
  background: var(--sage-light);
  color: var(--ink);
  font-weight: 600;
}

.wpunkt {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--sage-text);
}

.ansage {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ansage-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}

.ansage-uhr {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ansage-abend {
  font-family: var(--serif);
  font-size: clamp(19px, 3.2vw, 23px);
  line-height: 1.25;
  color: var(--ink);
}

.ansage-braucht {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 15px;
  color: var(--ink-soft);
}

.braucht-wort {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-text);
}

.abendweg {
  counter-reset: schritt;
  list-style: none;
  margin: clamp(16px, 3vw, 22px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.aschritt {
  counter-increment: schritt;
  position: relative;
  padding-left: 34px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.aschritt::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sage-light);
  color: var(--sage-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.nachklang {
  margin-top: clamp(16px, 3vw, 22px);
  padding-top: 15px;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink);
}

html.bewegt .wtag,
html.bewegt .ansage,
html.bewegt .aschritt,
html.bewegt .nachklang {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
html.bewegt .wpunkt {
  opacity: 0;
  transform: scale(0.2);
}

/* ── Schema 5 · Das Beet ─────────────────────────────────
   Drei Praktiken, eine davon kommt gerade dazu. Bei der ersten
   stehen zwei Marken — deine und die deines Partners.

   ⚠ ES GIBT KEINE ZAHL IN DIESEM BILD, und das ist die Aussage.
   Ein Zähler oder eine Kette wäre genau das, was `practice_moments`
   nicht hergibt: die Würdigung hängt an `month` und fängt am
   Monatsersten von vorn an. */

.beet-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.beet-wort {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-text);
}

.beet-monat {
  font-size: 12.5px;
  color: var(--ink-faint);
}

.beet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pflanze {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 5px 13px;
  padding: 14px 17px;
  border-radius: 16px;
  /* Kein Rahmen: die Hausregel trennt über Flächenkontrast, nicht
     über eine Linie — und ein weißer Kasten im weißen Kasten
     bräuchte sonst eine. */
  background: var(--card-2);
}

.pflanze-glyph {
  align-self: center;
  width: 24px;
  height: 24px;
  justify-self: center;
  color: var(--sage-text);
}

.pflanze-name {
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--ink);
}

/* Die Marken stehen VOR dem Satz, den sie belegen — sie sind sein
   Subjekt. In der ersten Fassung sassen sie am anderen Ende der
   Zeile, und der Leser musste den Bezug selbst herstellen. */
.pzeile {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 9px;
}

.pmarken {
  flex: none;
  display: flex;
  gap: 4px;
}

.pmarke {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage-fill);
}

.pstand {
  font-size: 12.5px;
  /* ⚠ `--ink-soft`, nicht `--ink-faint`. Nachgerechnet liegt faint auf
     dieser Fläche bei 3,1:1 (hell) und 3,5:1 (dunkel) — unter der
     Schwelle 4,5 für kleinen Text. Bei einer Bildunterschrift wäre
     das der Bestand der Seite; hier trägt der Satz die ganze Aussage
     der zwei Punkte davor und ist damit Inhalt, nicht Beischrift.
     Mit soft: 5,6:1 und 6,2:1. */
  color: var(--ink-soft);
}

html.bewegt .pflanze {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}
/* Die neue kommt von der Seite herein — sie wird GEPFLANZT, die
   anderen zwei stehen schon. Muss NACH der Regel darüber stehen:
   gleiche Spezifität, es entscheidet die Reihenfolge. */
html.bewegt .pflanze--neu {
  transform: translate3d(26px, 10px, 0);
}
html.bewegt .pstand {
  opacity: 0;
}
html.bewegt .pmarke {
  opacity: 0;
  transform: scale(0.2);
}

@media (prefers-reduced-motion: reduce) {
  html.bewegt .wtag,
  html.bewegt .wpunkt,
  html.bewegt .ansage,
  html.bewegt .aschritt,
  html.bewegt .nachklang,
  html.bewegt .pflanze,
  html.bewegt .pflanze--neu,
  html.bewegt .pstand,
  html.bewegt .pmarke {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Die Übergabe · die Gesprächsgrundlage ────────────────────────────
   Kein Schema mit Bewegung. Diese Fläche ist der Moment, an dem
   Kintso sagt „ab hier nicht mehr wir" — Stillstand ist hier der
   richtige Ton, und der Ruhezustand ist ohnehin der Endzustand.

   ⚠ SIE HIESS ZUERST `.blatt` — UND DAS GAB ES SCHON: das goldene
   Blatt-Glyph der Zahlen-Legende, 15x15 Pixel. Die Fläche erbte die
   Breite und fiel auf ein Wort je Zeile zusammen. Dieselbe Klasse
   Fehler wie im heutigen App-Befund, nur im Stylesheet: etwas
   Bestehendes wird still überschrieben, weil zwei Dinge denselben
   Namen tragen. Gefunden hat es das Hinsehen, nicht der Quelltext. */

.grundlage {
  background: var(--card-2);
  border-radius: 14px;
  padding: clamp(20px, 3.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.grundlage-titel {
  font-family: var(--serif);
  font-size: clamp(17px, 2.6vw, 19px);
  color: var(--ink);
}

.grundlage-unter {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-bottom: 15px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}

.grundlage-teile {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.grundlage-zeile {
  position: relative;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Ein leerer Ring, kein Haken: das Blatt ist eine AUSWAHL, die
   getroffen wird — kein Bericht, der schon feststeht. */
.grundlage-zeile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--sage-fill);
}

.grundlage-was {
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--ink);
}

.grundlage-woher {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.uebergabe-regeln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.uebergabe-regeln li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.uebergabe-regeln li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 10px;
  width: 10px;
  height: 1px;
  background: var(--sage-fill);
}