/* ===========================================================================
   Tagblatt — Einstieg und Fragenfluss (Tor G4, Abschnitt 1, gebaut 09.10.2026)

   Vorlage sind die von Andi gewählten Mockups a-einstieg.html und
   a-fluss.html (prototypen/g4, Variante A „Tagblatt“ mit dem wandernden Haus
   aus B). Große Serife frei im Raum, keine Karten und kein Glas um Text,
   Jelly nur am Eingabefeld und am einen Primärknopf. Die Farben kommen aus
   tageszeiten.css, Himmel, Nebel, Tageszeit-Wähler und Jelly aus szene.css.

   Szene am Wurzelelement (app.js):
     html.szene-einstieg  Titel links, das Haus rechts, das Feld unter dem Titel
     html.szene-fragen    das Haus links, Frage und Feld rechts davon
     html.szene-ergebnis  links Zahl und Text, das Haus in der Mitte, rechts der
                          Rechenweg mit Führungslinien ans Haus (Abschnitt 2)
   Der Platz des Hauses (und des Planstempels darunter) hängt an
   html[data-haus], nicht an der Szene: Vom Einstieg in die Fragen wechselt
   der Text sofort, das Haus erst, wenn es im Dunst steht (app.js,
   flussSzeneSetzen). Sonst sprang es sichtbar an den neuen Platz.

   Der Anker bleibt: In den Fragen steht die Oberkante des Felds bei 46 % der
   Fensterhöhe (DESIGN-VORGABE 7.1, bausatz/miss-sprung.mjs). Alles über dem
   Feld hat deshalb eine feste Höhe: die Legende eine Zeile, das Stichwort
   eine, die Frage zwei.
   =========================================================================== */

/* --- Seite ---------------------------------------------------------------- */
body { background: var(--himmel-mitte); }
.fluss-buehne { color: var(--text); font-family: var(--f-text); }
/* Die Bühne reicht über die ganze Breite: Der Körper hat aus stil.css einen
   Rand (18 px, bis 700 px 14 px), die Abstände des Tagblatts zählen aber vom
   Fensterrand. Gestreckt und um genau diesen Rand nach außen gezogen. Nicht
   100vw: Darin steckt eine klassische Bildlaufleiste, und die Bühne ragte
   um deren Breite über die Seite (Chrome, Windows, 09.10.2026). */
html:is(.szene-einstieg, .szene-fragen, .szene-ergebnis) .fluss-buehne { width: auto; max-width: none; align-self: stretch; margin-inline: -18px; }
@media (max-width: 700px) { html:is(.szene-einstieg, .szene-fragen, .szene-ergebnis) .fluss-buehne { margin-inline: -14px; } }
.fluss-buehne {
    /* Höhen über dem Feld: Legende, Stichwort, Frage (zwei Zeilen), Abstände. */
    --frage-gr: clamp(40px, 5vw, 76px);
    --frage-h: calc(2 * 1.02 * var(--frage-gr));
    --ueber-feld: calc(44px + 18px + 16px + 14px + var(--frage-h) + 14px);
}

/* --- Kopf: frei über dem Himmel, Glas erst über rollendem Inhalt ------------ */
.kopf { max-width: none; left: 48px; right: 48px; }
html.kopf-frei .kopf.glas { background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.kopf-frei .kopf.glas::before, html.kopf-frei .kopf.glas::after { display: none; }
.kopf .nav a { color: var(--text); }
.kopf .zeiten { background: none; border: 0; padding: 0; gap: 0; }

/* --- Das Haus: rechts am Einstieg, links in den Fragen ---------------------- */
html[data-haus="einstieg"] .haus-raum {
    left: 50vw; top: 70px; width: 50vw; height: calc(100lvh - 120px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--maske-voll) 110px); mask-image: linear-gradient(90deg, transparent 0, var(--maske-voll) 110px);
}
/* A17 (Andi, 18.10.2026): Die Zeichenfläche füllt die freie Fläche links der Textspalte
   (sie beginnt bei 50vw + 52px) und wächst mit dem Fenster; das Haus liegt in ihrer
   Mitte (cx = 0,68 der Breite, hintergrund.js). Bis dahin stand sie fest auf 1000 px,
   und eine Maske in festen Pixeln (440 bis 880) ließ von der Szene einen schmalen
   Streifen mit senkrechten Kanten übrig. Die Ränder blenden jetzt weich in Prozent aus. */
html[data-haus="fragen"] .haus-raum {
    --fb: clamp(560px, calc(50vw + 40px), 1000px);
    left: calc(25vw + 14px - 0.68 * var(--fb)); top: 0; width: var(--fb); height: min(800px, 100lvh);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--maske-voll) 12%, var(--maske-voll) 88%, transparent 100%), linear-gradient(180deg, var(--maske-voll) 78%, transparent 94%);
    mask-image: linear-gradient(90deg, transparent 0, var(--maske-voll) 12%, var(--maske-voll) 88%, transparent 100%), linear-gradient(180deg, var(--maske-voll) 78%, transparent 94%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* Die Deckung des Hauses gehört dem Tagblatt: voll, außer in der Detailansicht. */
html:is(.szene-einstieg, .szene-fragen, .szene-ergebnis) .haus-raum { opacity: 1; }
html:is(.szene-einstieg, .szene-fragen, .szene-ergebnis) body.zeigt-detail .haus-raum { opacity: .3; }

/* --- Einstieg ------------------------------------------------------------- */
.einstieg-text { display: none; }
html.szene-einstieg .einstieg-text { display: grid; gap: 30px; max-width: 760px; margin-bottom: 34px; }
.etikett { font: 600 12px/1.2 var(--f-etikett); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin: 0; }
.etikett.linie { display: flex; align-items: center; gap: 16px; }
.etikett.linie::after { content: ""; height: 1px; width: 120px; background: currentColor; opacity: .5; }
.einstieg-titel { font: 400 clamp(52px, 7.2vw, 108px)/.94 var(--f-serif); letter-spacing: -.012em; margin: 0; color: var(--text); }
.einstieg-titel em { font-style: italic; color: var(--akzent); }
.einstieg-lead { max-width: 44ch; font-size: 19px; line-height: 1.55; margin: 0; color: var(--text); }

/* Vom Einstieg in die Fragen (app.js flussEinstiegGeist, fluss.js zeige):
   Der Text blendet als Kopie an seinem alten Platz aus; Kopf, Frage, Knöpfe
   und Legende blenden an ihrem neuen Platz ein, ohne Weg. Das Feld gleitet
   als einziges, über transform (fluss.js, .gleitet); war es nicht zu sehen
   (Inseratstext) oder folgt eine Auswahl, blendet es ein wie die Frage. */
.einstieg-geist { position: fixed; z-index: 2; display: grid; gap: 30px; max-width: 760px; margin: 0; pointer-events: none; opacity: 0; }
/* Keine Überlagerung (iPhone, Andi, 09.10.2026): Der Text geht schnell
   (--ease-aus), wandert mit dem Feld (fluss.js, gleiteVomEinstieg), und was
   kommt, beginnt erst, wenn er unter 5 % Deckung steht. Vorher ging er mit
   --ease-ein, stand also lange fast voll da, während Kopf und Frage schon nach
   40 ms über ihm einblendeten (gemessen 0,1 bis 0,35 s lang). */
@media (prefers-reduced-motion: no-preference) {
    .einstieg-geist { animation: fluss-blendet var(--d-schritt) var(--ease-aus) both; opacity: 1; }
    .fluss.vom-einstieg :is(.fluss-kopf, .fluss-knoepfe, .fluss-noch, .fluss-antworten) { animation: fluss-blendet-ein var(--d-szene) var(--ease-aus) calc(.6 * var(--d-schritt)) both; }
    .fluss.vom-einstieg .fluss-karte.kommt .fluss-inhalt > * { animation-name: fluss-blendet-ein; animation-delay: calc(.6 * var(--d-schritt)); }
    .fluss.vom-einstieg.gleitet .fluss-karte.kommt .fluss-inhalt > .fluss-feld { animation: none; }
}

html.szene-einstieg .fluss-buehne { padding: 150px 64px 48px; padding-left: max(64px, calc(50vw - 656px)); }
html.szene-fragen .fluss-buehne {
    padding-top: max(96px, calc(46svh - var(--ueber-feld)));
    padding-left: calc(50vw + 52px); padding-right: 32px;
}
html.szene-fragen .fluss-buehne .fluss { width: min(560px, 100%); }

/* --- Planlegende statt Pillen ------------------------------------------------ */
.fluss-antworten {
    height: 44px; margin-bottom: 18px; gap: 0; align-items: stretch;
    border-top: 1px solid var(--strich); border-bottom: 1px solid var(--strich);
}
.fluss-chip {
    min-height: 0; padding: 0 18px 0 0; margin-right: 18px; border: 0; border-right: 1px solid var(--strich-leise); border-radius: 0;
    background: none; color: var(--text); font: 500 15px var(--f-text); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center;
}
.fluss-chip:last-of-type { border-right: 0; }
.fluss-chip sup, .fluss-offen sup { font: 600 11px var(--f-etikett); color: var(--leise); margin-right: 6px; letter-spacing: .08em; }
.fluss-chip .fluss-chip-etikett { display: none; }
.fluss-chip.uebersprungen { color: var(--leise); }
.fluss-chip:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--unterstrich); }
.fluss-offen { flex: none; display: inline-flex; align-items: center; font: 500 15px var(--f-text); color: var(--leise); white-space: nowrap; }
.fluss-offen[hidden] { display: none; }
html.szene-einstieg .fluss-antworten { display: none; }

/* --- Frage, frei im Raum ------------------------------------------------------ */
.fluss-karte {
    padding: 0; row-gap: 14px; background: none; border: 0; box-shadow: none;
    grid-template-rows: 16px var(--frage-h) auto var(--fluss-zone) auto;
}
.fluss-karte::before, .fluss-karte::after { display: none; }
.fluss-kopf { font: 600 12px/1.2 var(--f-etikett); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.fluss-frage { font: 400 var(--frage-gr)/1.02 var(--f-serif); letter-spacing: -.01em; color: var(--text); margin-bottom: 8px; }
.fluss-frage em { font-style: italic; color: var(--akzent); }
/* Die abgehende Kopie liegt genau über der Karte, nicht über dem ganzen Fluss
   (mit der Glaskarte fiel deren Bezugsrahmen weg). */
.fluss-karte { position: relative; }
.fluss-alt { padding: 0; grid-template-rows: 16px var(--frage-h) auto var(--fluss-zone) auto; }

/* Am Einstieg steht die Frage im Feld selbst; vorgelesen wird sie weiter.
   Dasselbe gilt für die Kopie des Einstiegs, die beim Wechsel ausblendet. */
.ist-einstieg .fluss-kopf { display: none; }
:is(.ist-einstieg, .fluss-alt.einstieg) .fluss-frage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
/* Unter dem Feld nur Platz für eine Fehlermeldung; der Verweis zum
   Inseratstext folgt direkt darunter (a-einstieg.html). */
:is(.ist-einstieg .fluss-karte, .fluss-alt.einstieg) { grid-template-rows: auto 30px auto; row-gap: 8px; }
:is(.ist-einstieg, .fluss-alt.einstieg) .fluss-hinweis { display: block; opacity: 0; }
.ist-einstieg :is(.fluss-knoepfe, .fluss-noch) { display: none; }

/* --- Feld aus Jelly --------------------------------------------------------- */
.fluss .fluss-eingabe {
    box-sizing: border-box; min-height: 76px; padding: 12px 12px 12px 26px; gap: 14px; width: min(560px, 100%);
    border: 1px solid var(--jelly-rand); background: linear-gradient(165deg, var(--jelly-a), var(--jelly-b));
}
.fluss .fluss-eingabe:focus-within { border-color: var(--jelly-rand); outline: 2px solid var(--akzent); outline-offset: 4px; }
.fluss .fluss-eingabe input { padding: 0; color: var(--feld-text); font: 500 30px/1.2 var(--f-text); font-variant-numeric: tabular-nums; }
.fluss .fluss-eingabe input::placeholder { color: var(--feld-leise); font-weight: 400; font-size: 21px; }
.fluss .fluss-einheit { padding: 0 6px 0 0; color: var(--feld-leise); font: 600 14px var(--f-etikett); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.fluss-eingabe:has([aria-invalid="true"]) { border-color: var(--schlecht); }
.fluss-los {
    flex: none; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; cursor: pointer;
    border: 0; color: var(--knopf-text); background: radial-gradient(120% 130% at 30% 0%, var(--knopf-a), var(--knopf-b) 70%);
    border-radius: var(--r-jelly-knopf);
    box-shadow: inset 0 1.5px 0 var(--knopf-kante), inset 0 -8px 16px -8px var(--knopf-tief), 0 14px 26px -14px var(--knopf-schein);
}
.fluss-los svg { width: 22px; height: 22px; }
.fluss-los:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* Auswahlfragen (Bundesland, Zinsbindung …): Zeilen mit Strich, kein Glas. */
.fluss .fluss-wahl label { background: none; border: 0; border-bottom: 1px solid var(--strich-leise); border-radius: 0; padding: 8px 2px; font: 500 16px/1.3 var(--f-text); }
.fluss .fluss-wahl label:has(:checked) { border-bottom-color: var(--akzent); }

/* --- Hinweis, Knöpfe, „noch“ --------------------------------------------------- */
.fluss-zone { font: 15px/1.5 var(--f-text); }
.fluss-hinweis { color: var(--leise); max-width: 50ch; }
.fluss-knoepfe { align-items: center; gap: 10px 26px; margin-top: 4px; }
.fluss .fluss-knopf.knopf-primaer { min-height: 56px; padding: 0 28px; border: 0; color: var(--knopf-text); background: radial-gradient(120% 130% at 30% 0%, var(--knopf-a), var(--knopf-b) 70%); }
/* Zurück und Überspringen als Verweise: Text mit Unterstrich, volles Tippziel. */
.fluss .fluss-verweis {
    min-height: 44px; padding: 0 2px; border: 0; background: none; border-radius: 0;
    color: var(--text); font: 500 16px var(--f-text);
    text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--unterstrich);
}
.fluss .fluss-verweis.leise { color: var(--leise); }
.fluss .fluss-verweis:disabled { visibility: hidden; }
.fluss-noch { margin: 6px 0 0; font-size: 14px; }
.fluss-noch[hidden] { display: none; }
.fluss-stand { border-top-color: var(--strich-leise); }

/* Vorschläge zum Ort: deckend in Jelly-Farben, über allem. */
.fluss .fluss-vorschlaege { left: 0; right: auto; width: min(560px, 100%); background: var(--jelly-a); border-color: var(--jelly-rand); color: var(--feld-text); }
.fluss .fluss-vorschlaege .leise { color: var(--feld-leise); }
.fluss .fluss-vorschlaege li[aria-selected="true"] { background: var(--jelly-b); }

/* --- Inseratstext: am Einstieg ein Verweis unter dem Feld ---------------------- */
.inserat-einfuegen { display: none; }
html.szene-einstieg .inserat-einfuegen { display: block; margin-top: 0; width: min(560px, 100%); border: 0; background: none; box-shadow: none; }
html.szene-einstieg .inserat-einfuegen .aufklapper-kopf {
    min-height: 44px; padding: 0; color: var(--text); font: 500 14px var(--f-text);
    text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--unterstrich);
}
html.szene-einstieg .inserat-einfuegen .aufklapper-zeichen { display: none; }
.inserat-einfuegen .aufklapper-text { color: var(--text); padding: 6px 0 16px; }
.inserat-einfuegen textarea { background: var(--jelly-a); color: var(--feld-text); border-color: var(--jelly-rand); }
.inserat-einfuegen .fluss-knopf { min-height: 44px; border-radius: var(--r-jelly-klein); background: var(--jelly-a); color: var(--feld-text); border-color: var(--jelly-rand); }

/* --- Planstempel ------------------------------------------------------------ */
.plan-text { position: absolute; z-index: 3; margin: 0; font: 600 12px/1.4 var(--f-etikett); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
html[data-haus="einstieg"] .plan-text { right: 64px; bottom: 30px; text-align: right; }
html[data-haus="fragen"] .plan-text { left: 64px; bottom: 30px; }
.fluss-buehne { position: relative; }

/* --- Ergebnis (Abschnitt 2, a-ergebnis.html) ----------------------------------
   Links Zahl, Vorbehalt, Sätze und Knöpfe, darunter Risiken, Angaben und
   Annahmen; das Haus fertig in der Mitte; rechts der Rechenweg, der über
   Führungslinien auf Stellen am Haus zeigt (app.js, flussFuehrung). Drei
   Spalten erst ab 1400 px: Darunter bliebe dem Haus zwischen Text und
   Rechenweg kein Platz, der Rechenweg steht dann in der Textspalte. */
html.szene-ergebnis { --rand-l: max(64px, calc(50vw - 656px)); --text-b: min(640px, 52vw); }
html.szene-ergebnis .fluss-buehne { padding: 118px var(--rand-l) 72px; }
html.szene-ergebnis .fluss-buehne .fluss { width: 100%; }
html.szene-ergebnis .fluss-antworten { display: none; }
html[data-haus="ergebnis"] .haus-raum {
    left: calc(var(--rand-l) + var(--text-b)); top: 70px; width: calc(100vw - var(--rand-l) - var(--text-b)); height: min(780px, calc(100lvh - 90px));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--maske-voll) 60px), linear-gradient(180deg, var(--maske-voll) 82%, transparent 98%);
    mask-image: linear-gradient(90deg, transparent 0, var(--maske-voll) 60px), linear-gradient(180deg, var(--maske-voll) 82%, transparent 98%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* Wechsel aus der letzten Frage ins Ergebnis (fluss.js, zeigeErgebnis): Frage
   und Legende gehen nach oben aus, nur über opacity und transform; danach
   steigen die Teile des Ergebnisses an ihrem Platz auf (fluss-steigt). In der
   Zwischenzeit wird gerechnet, im verborgenen Ergebnis. */
.fluss.ins-ergebnis :is(.fluss-karte, .fluss-antworten) { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
    .fluss.ins-ergebnis :is(.fluss-karte, .fluss-antworten) { animation: fluss-geht-hoch var(--d-schritt) var(--ease-ein) both; }
}
/* Das Haus geht dabei mit seinem Nebel aus dem Bild (app.js, haus-blendet),
   wechselt unsichtbar den Platz und kommt mit der Grundregel
   (hintergrund.css, --d-atem) zurück. Der Dunst allein deckte es neben der
   Frage nicht ganz, beim Platzwechsel stand ein Bild lang nur der Himmel
   da, danach der alte Nebel als Streifen quer über dem Haus, und Glut und Mond
   (Himmelsleinwand, gleiche Lage wie das Haus) sprangen mit (Chrome, 402 × 714,
   09.10.2026). */
@media (prefers-reduced-motion: no-preference) {
    html.szene-ergebnis .haus-nebel { transition: opacity var(--d-atem) var(--ease-bewegt); }
    html.haus-blendet:is(.szene-fragen, .szene-ergebnis) :is(canvas.haus-raum, .haus-nebel) { opacity: 0; transition: opacity var(--d-schritt) var(--ease-ein); }
}
@keyframes fluss-geht-hoch { to { opacity: 0; transform: translateY(calc(-1 * var(--fluss-weg))); } }

.fluss-ergebnis { padding: 0; gap: 0; }
html.szene-ergebnis .fluss-ergebnis { display: grid; grid-template-columns: minmax(0, var(--text-b)); row-gap: 40px; align-items: start; }
.fluss-ergebnis-kopf { display: grid; gap: 18px; }
.fluss-ergebnis h2.etikett { font: 600 12px/1.2 var(--f-etikett); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.fluss-ergebnis h2.etikett .etikett-zaehler { display: block; margin-top: 4px; }
/* Schmal bricht der Zähler mit dem Vorsatz „Grobe Rechnung:“ in zwei Zeilen, ohne ihn in eine.
   Zwei Zeilen sind deshalb immer reserviert: sonst wird das Ergebnis mit der ersten freiwilligen
   Antwort 14 px niedriger, und das Feld der nächsten Frage steht nach „Genauer werden“ anders
   (gemessen bei 768 px: sanierungsbudget, 16.10.2026). */
@media (max-width: 900px) { .fluss-ergebnis h2.etikett .etikett-zaehler { min-height: calc(2 * 1.2em); } }
/* Die Zahl: groß, mit Cent hochgestellt; die Farbe sagt gut oder schlecht,
   der Satz darunter sagt es in Worten. */
.fluss-ergebnis .fluss-zahl { margin: 0; font: 400 clamp(80px, 11vw, 160px)/.85 var(--f-serif); letter-spacing: -.03em; color: var(--text); font-variant-numeric: lining-nums; }
.fluss-ergebnis .fluss-zahl.schlecht { color: var(--schlecht); }
.fluss-ergebnis .fluss-zahl.gut { color: var(--gut); }
.fluss-zahl .cent { font-size: .5em; letter-spacing: 0; vertical-align: .62em; }
.fluss-zahl small { display: inline-block; vertical-align: top; max-width: 11ch; margin: 22px 0 0 14px; font: 500 17px/1.3 var(--f-text); letter-spacing: 0; color: var(--text); }
/* Der Vorbehalt steht bei der Zahl, in Textfarbe und nicht kleiner als 15 px:
   Er soll gelesen werden, bevor man mit der Zahl weiterdenkt (Andi, 09.10.2026). */
.fluss-vorbehalt-zahl { margin: 0; padding-left: 12px; border-left: 2px solid var(--strich); font: 500 15px/1.45 var(--f-text); color: var(--text); max-width: 52ch; }
.fluss-ergebnis .fluss-saetze { gap: 6px; font: 19px/1.5 var(--f-text); color: var(--text); max-width: 46ch; }
.fluss-ergebnis .fluss-saetze li:first-child { font-weight: 600; }
.fluss-ergebnis .fluss-knoepfe { margin-top: 4px; }
/* Tor G5 (Andi, 10.10.2026): Im Ergebnis ist das Bank-Exposé der eine gefüllte
   Knopf, „Genauer werden“ der Zweitknopf: durchsichtig, Kante in Textfarbe
   (CLAUDE.md, Farben und Knöpfe). 48 px hoch, ein volles Tippziel. */
.fluss .fluss-knopf.knopf-zweit {
    min-height: 48px; padding: 0 22px; border: 1.5px solid var(--text); border-radius: var(--r-jelly-knopf);
    background: transparent; color: var(--text); font: 600 16px var(--f-text);
}
.fluss-knopf-hinweis { margin: 2px 0 0; font: 15px/1.45 var(--f-text); color: var(--text); max-width: 46ch; }
.fluss .fluss-verweis.pfeil::after { content: " \2192"; }

/* Risiken: frei auf der Seite wie der Text, ohne Karte. */
.fluss-ergebnis .fluss-risiken { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
/* Der Name des Punkts in Textfarbe: Bernstein erreichte auf dem Himmel am Tag
   nur 3,85:1 (Chrome ohne Fenster, 1440 × 900, 09.10.2026). Den Zustand
   tragen das Zeichen davor (Grafik, 3:1) und das Wort für Screenreader. */
.fluss-ergebnis .risiko-zeile strong { color: var(--text); }

/* Rechenweg mit Cent: Die Zeilen addieren sich für jeden nachrechenbar zur Summe. */
.fluss-weg .etikett, .fluss-angaben .etikett { margin: 0 0 8px; }
.rechenweg { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.rechenweg li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--strich-leise); font-size: 15px; color: var(--text); }
.rechenweg li span:last-child { font-weight: 600; white-space: nowrap; }
/* Die Summe ist große Schrift (19 px fett, ab 18,66 px gilt 3:1). */
.rechenweg li.summe { border-bottom: 0; border-top: 1.5px solid var(--text); margin-top: 4px; font-size: 19px; font-weight: 700; }
.rechenweg li.summe.minus span:last-child { color: var(--schlecht); }
.fluss-weg-hinweis { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--leise); }

/* Von dir, Angenommen (Brief 50): ein voller Punkt für die eigene Angabe,
   ein Ring für die Annahme. */
.fluss-angaben { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.fluss-angaben ul { list-style: none; margin: 0; padding: 0; }
.fluss-angaben li { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid var(--strich-leise); font-size: 15px; line-height: 1.45; color: var(--text); font-variant-numeric: tabular-nums; }
.fluss-angaben li::before { content: ""; flex: 0 0 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--text); }
.fluss-angaben .angenommen li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text); }
/* Jede eigene Angabe ist ein Verweis zu ihrer Frage: volle Zeile, 44 px hoch,
   der Wert unterstrichen wie die übrigen Verweise. */
.fluss-angaben .von-dir li { padding: 0; }
.fluss-angaben .von-dir li::before { margin-top: 18px; }
.angabe-aendern { flex: 1; display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.angabe-aendern span:first-of-type { flex: 1; }
.angabe-aendern span:last-of-type { font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--unterstrich); }
.angabe-aendern:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.fluss-angaben .leise { margin: 10px 0 0; font-size: 13px; color: var(--leise); }
.fluss-ergebnis .fluss-kennzahlen { margin: 0; }
.fluss-ergebnis .fluss-expose { margin: 0; font-size: 13px; max-width: 60ch; color: var(--leise); }

/* Die Führungslinien liegen fest im Bild über dem Haus, unter der Schrift. */
.fuehrung { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; overflow: visible; }
.fuehrung line { stroke: var(--fuehrung); stroke-width: 1; }
.fuehrung circle { fill: var(--fuehrung-punkt); }
html[data-haus="ergebnis"] .plan-text { right: var(--rand-l); bottom: 30px; text-align: right; }

@media (min-width: 1400px) {
    html.szene-ergebnis { --text-b: 600px; }
    html.szene-ergebnis .fluss-ergebnis { grid-template-columns: var(--text-b) minmax(0, 1fr) 290px; column-gap: 40px; }
    html.szene-ergebnis .fluss-ergebnis > * { grid-column: 1; }
    /* Rechts neben dem Haus, auf Höhe seiner Mitte; er bleibt dort stehen,
       während die Textspalte rollt, damit die Linien ihr Ziel behalten. */
    html.szene-ergebnis .fluss-ergebnis > .fluss-weg { grid-column: 3; grid-row: 1 / span 9; position: sticky; top: 290px; margin-top: 180px; }
    html[data-haus="ergebnis"] .haus-raum { width: calc(100vw - 2 * var(--rand-l) - var(--text-b) - 290px);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--maske-voll) 60px, var(--maske-voll) calc(100% - 50px), transparent), linear-gradient(180deg, var(--maske-voll) 82%, transparent 98%);
        mask-image: linear-gradient(90deg, transparent 0, var(--maske-voll) 60px, var(--maske-voll) calc(100% - 50px), transparent), linear-gradient(180deg, var(--maske-voll) 82%, transparent 98%); }
}

/* --- Telefon ---------------------------------------------------------------- */
@media (max-width: 760px) {
    /* Seitenrand 14 px innen: Die Wortmarke stand mit 0 am Rand der Glasleiste (Andi, 16.10.2026). */
    .kopf { left: 16px; right: 16px; padding: 4px 14px; gap: 6px; }
    .kopf .marke-wort { font-size: 24px; }
    .kopf .zeiten { margin-left: auto; }
    .fluss-buehne { --frage-gr: 36px; --ueber-feld: calc(16px + 14px + var(--frage-h) + 14px); }
    html.szene-einstieg .fluss-buehne { padding: 92px 16px 40px; }
    html.szene-einstieg .einstieg-text, .einstieg-geist { gap: 18px; margin-bottom: 0; }
    .einstieg-titel { font-size: 46px; }
    .einstieg-lead { font-size: 17px; }
    /* Zwischen Text und Feld steht das Haus; die Höhe misst app.js. */
    html.szene-einstieg .fluss { margin-top: clamp(150px, calc(100svh - 640px), 260px); }
    /* Vor dem Skript trägt <html> noch kein data-haus: Dieselbe Lage gilt dann schon, damit das Haus beim Aufbau nicht springt (CLS). */
    :is(html[data-haus="einstieg"], html.szene-einstieg:not([data-haus])) .haus-raum { left: 0; top: var(--haus-oben, 380px); width: 100vw; height: var(--haus-hoehe, 250px); -webkit-mask-image: none; mask-image: none; }

    /* Fragen am Telefon: eine feste Anordnung, die auch bei offener Tastatur
       ganz zu sehen ist (Andi, 10.10.2026). Oben das Haus als Band fester
       Größe, darin wächst es Frage für Frage; darunter Stichwort, Frage (26 px,
       eine Zeile; alle Fragen sind so gefasst, dass sie bei 375 px in eine
       Zeile passen), Feld, Hinweis (zwei Zeilen) und die Knöpfe. Das Band
       bekommt allen übrigen Platz bis 12 px über Safaris Adresse und ist bei
       allen Fragen gleich hoch (90 px; Andi, 10.10.2026). Geht die Tastatur auf oder zu,
       bewegt sich nichts (fluss.js, festeLage): Sie deckt nur den unteren
       Bereich ab, in dem „Danach noch …“ und die Legende stehen.
       Abgelesen an Andis iPhone (402 × 874, Safari, Frage 4, 10.10.2026), in
       px ab dem oberen Bildschirmrand: Statusleiste bis 62
       (safe-area-inset-top), Seitenkopf 74 bis 134, Safaris schwebende Adresse
       bei offener Tastatur ab 466, die Leiste mit Pfeilen und Haken 508 bis
       556, die Tastatur ab 566. Die Knöpfe enden deshalb bei 62 + 392 = 454,
       der untere Bereich beginnt bei 62 + 504 = 566. Bis zum 10.10.2026 stand
       das Feld bei 46 % der Fensterhöhe und das Haus groß hinter der Frage. */
    html.szene-fragen { --oben: env(safe-area-inset-top, 0px); }
    html.szene-fragen .fluss-buehne { --frage-gr: 26px; --frage-h: calc(1.02 * var(--frage-gr)); padding: calc(var(--oben) + 174px) 16px 40px; }
    html[data-haus="fragen"] .haus-raum {
        left: 0; top: calc(env(safe-area-inset-top, 0px) + 76px); width: 100vw; height: 90px;
        -webkit-mask-image: linear-gradient(90deg, transparent, var(--maske-voll) 14%, var(--maske-voll) 86%, transparent); mask-image: linear-gradient(90deg, transparent, var(--maske-voll) 14%, var(--maske-voll) 86%, transparent);
    }
    html.szene-fragen .fluss-karte { row-gap: 8px; }
    html.szene-fragen .fluss-frage { margin-bottom: 0; }
    html.szene-fragen .fluss .fluss-eingabe { min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
    html.szene-fragen .fluss .fluss-eingabe input { font-size: 22px; }
    /* Der Hinweis hat genau zwei Zeilen, die Fehlermeldung steht im selben
       Platz, Weiter direkt darunter. „Mehr dazu“ steht am Ende des Hinweises
       im Text (das Tippziel reicht über die Zeile hinaus); geöffnet schiebt
       es die Knöpfe nach unten, nie das Feld. */
    .fluss-buehne .fluss { --fluss-zone: auto; }
    html.szene-fragen .fluss-zone { font: 14px/1.45 var(--f-text); min-height: 2.9em; }
    /* Die Zone wächst mit ihrem Inhalt, gerollt wird darin nicht; sonst
       stand am Tippziel von „Mehr dazu“ ein Rollbalken. */
    html.szene-fragen :is(.fluss-zone, .fluss-zone > *) { overflow: visible; }
    html.szene-fragen .fluss-schicht :is(.fluss-hinweis, .aufklapper) { display: inline; }
    html.szene-fragen .fluss-schicht .aufklapper-kopf.fluss-mehr-knopf {
        display: inline; position: relative; width: auto; min-height: 0; padding: 0; margin-left: .35em;
        font: inherit; font-weight: 600; color: var(--text);
        text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--unterstrich);
    }
    html.szene-fragen .fluss-schicht .fluss-mehr-knopf::after { content: ""; position: absolute; inset: -14px -8px; }
    html.szene-fragen .fluss-schicht .fluss-mehr-knopf .aufklapper-zeichen { display: none; }
    html.szene-fragen .fluss-knoepfe { margin-top: 0; min-height: 46px; }
    html.szene-fragen .fluss .fluss-knopf.knopf-primaer { height: 46px; min-height: 46px; }
    /* Der untere Bereich: Was nach den Knöpfen kommt, beginnt dort, wo die
       Tastatur anfängt (siehe oben, 566). */
    html.szene-fragen .fluss-knoepfe + :is(.fluss-stand, .fluss-noch):not([hidden]),
    html.szene-fragen .fluss-knoepfe + .fluss-stand[hidden] + .fluss-noch { margin-top: 104px; }

    /* Die Legende steht unter den Knöpfen: über dem Feld ist der Platz des
       Hauses, und unter dem Feld ändert sie dessen Lage nicht. */
    .fluss { display: flex; flex-direction: column; }
    .fluss-antworten { order: 3; margin: 22px 0 0; overflow-x: auto; }
    .fluss-karte, .fluss-ergebnis { order: 1; }
    .fluss-chip, .fluss-offen { font-size: 14px; }
    .fluss-chip { padding-right: 12px; margin-right: 12px; }
    .fluss .fluss-eingabe { min-height: 68px; padding-left: 20px; }
    .fluss .fluss-eingabe input { font-size: 26px; }
    .fluss .fluss-eingabe input::placeholder { font-size: 18px; }
    .ist-einstieg .fluss-einheit { display: none; }
    .plan-text { display: none; }

    /* Ergebnis: das Haus oben über die ganze Breite, darunter alles in einer
       Spalte. Rollt Text unter das Haus, tritt es zurück (Harte Regel 2:
       das Haus wird gedämpft, kein Weichzeichner hinter Text). */
    html.szene-ergebnis .fluss-buehne { padding: 300px 16px 48px; }
    html.szene-ergebnis .fluss-ergebnis { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
    html[data-haus="ergebnis"] .haus-raum { left: 0; top: 64px; width: 100vw; height: 230px; -webkit-mask-image: linear-gradient(180deg, var(--maske-voll) 80%, transparent); mask-image: linear-gradient(180deg, var(--maske-voll) 80%, transparent); }
    html.szene-ergebnis.ergebnis-gerollt :is(.haus-raum, .haus-nebel) { opacity: .12; }
    .fluss-ergebnis .fluss-zahl { font-size: 80px; }
    .fluss-zahl small { display: block; margin: 10px 0 0; max-width: none; }
    .fluss-ergebnis .fluss-saetze { font-size: 17px; }
    .fluss-angaben { grid-template-columns: 1fr; gap: 24px; }
    .fuehrung { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fluss-chip { transition: none; } }

/* Platz für die erste Frage, bevor fluss.js sie baut: Auf einem langsamen Telefon steht die Seite
   Sekunden vor dem Skript da, und was unter #fluss steht, sprang beim Aufbau um die Höhe der Karte
   nach unten (Lighthouse mobil, CLS 0,42; bausatz/miss-verschiebung.mjs). Gemessene Höhe der Karte: 124 px. */
#fluss:empty { min-height: 124px; }