/* ===========================================================================
   Fragenfluss des Relaunchs (Phase A2)

   Vorgabe: DESIGN-VORGABE.md Abschnitt 7 („Fragenfluss ohne Sprung“), 8 und
   9 (Bewegungen N1 bis N9). Gestaltet wie die Fragekarte der an G0
   abgenommenen Gesamtseite (prototypen/seite-d.html), aber ohne deren Sprünge:
   Dort wuchs die Karte, sobald eine Fehlermeldung oder die Vorschlagsliste
   erschien, und das Feld rutschte.

   Der Anker. Alles über dem Feld hat eine feste Höhe: die Antwortleiste eine
   Zeile, der Kopf eine Zeile, die Frage drei Zeilen (unten bündig). Damit
   steht die Oberkante des Felds in jedem Zustand einer Frage an derselben
   Stelle, gemessen von bausatz/miss-sprung.mjs (erlaubt: 0,5 px).

   Unter dem Feld eine Zone fester Höhe. Hinweis, Fehlermeldung und „Mehr
   dazu“ liegen darin übereinander in derselben Zelle und lösen sich durch
   Überblendung ab; sie verändern keine Höhe. Die Vorschlagsliste ist eine
   eigene Glasfläche über allem (fluss.js setzt ihre Lage), nie Teil des
   Layouts.
   =========================================================================== */

.fluss {
    position: relative; width: min(560px, 100%);
    --fluss-frage-zeilen: 3;
    --fluss-zone: 112px;
    --fluss-weg: var(--schwebe-weg);
}

/* --- Antwortleiste (N1) ---------------------------------------------------- */
.fluss-antworten {
    display: flex; gap: 6px; align-items: center; height: 44px; margin-bottom: 10px;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.fluss-antworten::-webkit-scrollbar { display: none; }
.fluss-chip {
    flex: none; min-height: 36px; padding: 6px 14px; border-radius: var(--r-bedien);
    border: 1px solid var(--glasrand); background: var(--glas-deckend); color: var(--text);
    font: 600 var(--g-13) var(--f-text); cursor: pointer; white-space: nowrap;
    transition: background var(--d-ping) var(--ease-aus);
}
.fluss-chip .leise { font-weight: 400; margin-right: 6px; }
.fluss-chip.uebersprungen { border-style: dashed; }

/* --- Karte ----------------------------------------------------------------- */
.fluss-karte {
    display: grid; padding: 24px; row-gap: 14px;
    grid-template-rows: 20px calc(var(--fluss-frage-zeilen) * 1.05 * var(--g-frage)) auto var(--fluss-zone) auto;
}
/* Eine Zeile, auch auf dem Telefon: „Haushalt · 10 von 10“ und „Genauigkeit 100 %“
   brachen bei 375 px um und liefen aus der festen Zeile. Unter 420 px entfällt
   deshalb der Balken; die Zahl daneben sagt dasselbe. */
.fluss-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 var(--g-13)/1 var(--f-text); color: var(--leise); white-space: nowrap; }
@media (max-width: 420px) { .fluss-genau-leiste { display: none; } }
.fluss-genau { display: flex; align-items: center; gap: 8px; }
.fluss-genau[hidden], .fluss-genau-leiste[hidden] { display: none; }
.fluss-genau-leiste { width: 72px; height: 4px; border-radius: var(--r-bedien); background: var(--feld); overflow: hidden; }
.fluss-genau-leiste i { display: block; height: 100%; background: var(--akzent); transform-origin: left; transform: scaleX(var(--anteil, 0));
    transition: transform var(--d-schritt) var(--ease-aus); }

/* Inhalt einer Frage: Frage, Feld und Zone. Beim Wechsel liegt die alte
   Fassung als Kopie darüber und geht (N2, N3, N7). */
.fluss-inhalt { display: contents; }
.fluss-frage {
    margin: 0; display: flex; align-items: flex-end; overflow: hidden; outline: none;
    font: 700 var(--g-frage)/1.05 var(--f-kopf); color: var(--text);
}
.fluss-frage span { display: block; }
.fluss-frage em { font-style: normal; color: var(--akzent); }

.fluss-feld { position: relative; }
.fluss-eingabe {
    display: flex; align-items: center; min-height: 56px; border-radius: var(--r-bedien);
    background: var(--feld); border: 1px solid var(--glasrand);
    transition: border-color var(--d-ping) var(--ease-aus), background var(--d-ping) var(--ease-aus);
}
.fluss-eingabe:focus-within { border-color: var(--akzent); outline: 2px solid var(--akzent); outline-offset: 3px; }
/* Der Fokus zeigt sich an der Pille, nicht am Feld darin. Sonst stand am
   iPhone ein zweiter, kürzerer Rahmen in der Pille, der vor der Einheit
   endete (Andi, 04.10.2026): der Ring aus .fluss :focus-visible unten und in
   index.html zusätzlich der aus stil.css (input:focus). */
.fluss .fluss-eingabe input:is(:focus, :focus-visible) { outline: none; box-shadow: none; background: transparent; }
.fluss-eingabe input {
    flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); outline: none;
    font: 500 var(--g-19) var(--f-text); padding: 14px 20px; -webkit-text-stroke: 0;
}
.fluss-eingabe input::placeholder { color: var(--leise); }
.fluss-einheit { padding-right: 20px; color: var(--leise); font: 600 var(--g-16) var(--f-text); }
/* N9: Das Feld trübt kurz, keine Schüttelbewegung. */
.fluss-eingabe:has([aria-invalid="true"]), .fluss-wahl[aria-invalid="true"] { border-color: var(--schlecht); }

.fluss-wahl { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; }
.fluss-wahl label {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; cursor: pointer;
    border-radius: var(--r-bedien); border: 1px solid var(--glasrand); background: var(--feld);
    font: 500 var(--g-16)/1.3 var(--f-text); -webkit-text-stroke: 0;
    transition: border-color var(--d-ping) var(--ease-aus);
}
.fluss-wahl label:has(:checked) { border-color: var(--akzent); }
.fluss-wahl input { accent-color: var(--akzent); margin: 0; flex: none; }
.fluss-wahl label:has(:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* --- Zone fester Höhe ------------------------------------------------------ */
.fluss-zone { display: grid; overflow: hidden; font: var(--g-14)/1.5 var(--f-text); }
.fluss-zone > * {
    grid-area: 1 / 1; margin: 0; overflow-y: auto;
    transition: opacity var(--d-schritt) var(--ease-aus), transform var(--d-schritt) var(--ease-aus);
}
/* Die verborgene Schicht trägt zusätzlich inert (fluss.js): kein Fokus, nichts vorgelesen. */
.fluss-zone > [aria-hidden="true"] { opacity: 0; transform: translateY(4px); pointer-events: none; }
.fluss-hinweis { color: var(--leise); }
/* Fundstelle aus dem Inserat: in Textfarbe, damit sie nicht wie ein Hinweis
   überlesen wird; „Bitte prüfen“ zusätzlich fett. Keine neue Farbe, also
   kein neuer Kontrast zu messen (--text steht schon auf jeder Fläche). */
.fluss-hinweis.herkunft { color: var(--text); }
.fluss-hinweis.unsicher { font-weight: 600; }
.fluss-fehler { color: var(--schlecht); font-weight: 600; }
.fluss-schicht .fluss-hinweis { margin: 0; }
/* „Mehr dazu“: der Aufklapper (aufklapper.css), schlicht, unter dem Hinweis. */
.fluss-schicht .aufklapper.schlicht .aufklapper-kopf { min-height: 44px; padding: 6px 0; }

/* --- Knöpfe ---------------------------------------------------------------- */
/* Zurück ist so auffällig wie Weiter (DESIGN-VORGABE 8): gleiche Größe,
   gleiche Höhe, nur nicht gefüllt. */
.fluss-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.fluss-knopf {
    min-height: 48px; padding: 12px 22px; border-radius: var(--r-bedien); cursor: pointer;
    font: 600 var(--g-16) var(--f-text); color: var(--text);
    border: 1px solid var(--glasrand); background: var(--feld);
    transition: background var(--d-ping) var(--ease-aus), transform var(--d-ping) var(--ease-aus);
}
.fluss-knopf.primaer { background: var(--primaer); color: var(--primaer-text); border-color: var(--primaer); }
.fluss-knopf[hidden] { display: none; }
.fluss-knopf:disabled { opacity: .5; cursor: default; }
.fluss :is(button, input, a):focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* --- Stand: jederzeit aufhören --------------------------------------------- */
/* Steht unter den Knöpfen, also unter dem Feld: Er ändert dessen Lage nicht.
   Verborgen (Kernfragen) ist er nicht im Raster und legt keinen Abstand an. */
.fluss-stand {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
    padding-top: 14px; border-top: 1px solid var(--glasrand);
}
.fluss-stand[hidden] { display: none; }
.fluss-stand p { margin: 0; flex: 1 1 200px; display: grid; gap: 2px; font: var(--g-14)/1.4 var(--f-text); }
.fluss-stand-zahl { font: 600 var(--g-16) var(--f-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fluss-stand-zahl.gut { color: var(--gut); } .fluss-stand-zahl.schlecht { color: var(--schlecht); }

/* --- Vorschlagsliste: Überlagerung ------------------------------------------ */
/* Chips und Vorschlagsliste stehen deckend (--glas-deckend), nicht auf Glas:
   Auf 375 px liegen beide über dem Haus, und auf der durchscheinenden Fläche
   fiel leiser Text bis 1,99:1 (miss-kontrast-fluss.mjs, 04.10.2026). Deckend
   trägt jede Schriftfarbe 4,5:1, gerechnet in tokens.test.js. */
.fluss-vorschlaege {
    position: absolute; background: var(--glas-deckend); border: 1px solid var(--glasrand); border-radius: var(--r-flaeche); left: 24px; right: 24px; z-index: 5; margin: 0; padding: 4px; list-style: none;
    max-height: 360px; overflow-y: auto;
}
.fluss-vorschlaege[hidden] { display: none; }
.fluss-vorschlaege li {
    display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px;
    padding: 8px 14px; border-radius: var(--r-flaeche); cursor: pointer;
}
.fluss-vorschlaege li[aria-selected="true"] { background: var(--feld); }
@media (hover: hover) { .fluss-vorschlaege li:hover { background: var(--feld); } }

/* --- Ergebnis -------------------------------------------------------------- */
.fluss-ergebnis { display: grid; gap: 12px; padding: 24px; }
.fluss-ergebnis[hidden], .fluss-karte[hidden] { display: none; }
.fluss-ergebnis h2 { margin: 0; font: 700 var(--g-14)/1.2 var(--f-kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); outline: none; }
.fluss-zahl { margin: 0; font: 400 var(--g-zahl)/1 var(--f-anzeige); font-variant-numeric: tabular-nums; }
.fluss-zahl.gut { color: var(--gut); } .fluss-zahl.schlecht { color: var(--schlecht); }
.fluss-saetze { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font: var(--g-14)/1.5 var(--f-text); color: var(--leise); }

/* --- Wechsel (N2, N3, N7) -------------------------------------------------- */
/* Die gehende Fassung liegt als Kopie über der Karte; die kommende steigt
   2 × --versatz später ein. Ein Auslöser für alles: fluss.js setzt die
   Klassen im selben Bild. */
.fluss-alt { position: absolute; inset: 0; pointer-events: none; display: grid; padding: 24px; row-gap: 14px;
    grid-template-rows: 20px calc(var(--fluss-frage-zeilen) * 1.05 * var(--g-frage)) auto var(--fluss-zone) auto; }
/* Erste Zeile frei (dort steht in der Karte der Kopf): ein leerer Platzhalter
   aus fluss.js, damit das Raster Frage, Feld und Zone in ihre Zeilen setzt. */
.fluss-alt-platz { grid-row: 1; }

@media (prefers-reduced-motion: no-preference) {
    .fluss-alt { animation: fluss-geht var(--d-schritt) var(--ease-ein) both; }
    .fluss-alt.zurueck { animation-name: fluss-geht-zurueck; }
    .fluss-alt.weg { animation-name: fluss-faellt; }
    .fluss-karte.kommt .fluss-inhalt > * { animation: fluss-kommt var(--d-szene) var(--ease-aus) calc(2 * var(--versatz)) both; }
    .fluss-karte.kommt.zurueck .fluss-inhalt > * { animation-name: fluss-kommt-zurueck; }
    .fluss-chip.fliegt { animation: fluss-chip var(--d-schritt) var(--ease-bewegt) both; }
    .fluss-ergebnis.kommt > * { animation: fluss-steigt var(--d-szene) var(--ease-aus) both; }
    .fluss-ergebnis.kommt > :nth-child(2) { animation-delay: var(--versatz); }
    .fluss-ergebnis.kommt > :nth-child(3) { animation-delay: calc(2 * var(--versatz)); }
    .fluss-ergebnis.kommt > :nth-child(4) { animation-delay: calc(3 * var(--versatz)); }
    .fluss-ergebnis.kommt > :nth-child(n+5) { animation-delay: calc(4 * var(--versatz)); }
}
/* Weniger Bewegung: Überblendung ohne Weg (DESIGN-VORGABE 9). */
@media (prefers-reduced-motion: reduce) {
    .fluss-alt { animation: fluss-blendet var(--d-schritt) linear both; }
    .fluss-karte.kommt .fluss-inhalt > * { animation: fluss-blendet-ein var(--d-schritt) linear both; }
    .fluss-genau-leiste i, .fluss-zone > *, .fluss-eingabe, .fluss-knopf, .fluss-chip, .fluss-wahl label { transition: none; }
}
@keyframes fluss-geht { to { opacity: 0; transform: translateX(calc(-2 * var(--fluss-weg))); } }
@keyframes fluss-geht-zurueck { to { opacity: 0; transform: translateX(calc(2 * var(--fluss-weg))); } }
@keyframes fluss-faellt { to { opacity: 0; transform: translateY(calc(3 * var(--fluss-weg))); } }
@keyframes fluss-kommt { from { opacity: 0; transform: translateX(calc(2 * var(--fluss-weg))); } }
@keyframes fluss-kommt-zurueck { from { opacity: 0; transform: translateX(calc(-2 * var(--fluss-weg))); } }
@keyframes fluss-steigt { from { opacity: 0; transform: translateY(var(--fluss-weg)); } }
@keyframes fluss-chip { from { transform: translate(var(--von-x, 0), var(--von-y, 0)); } }
@keyframes fluss-blendet { to { opacity: 0; } }
@keyframes fluss-blendet-ein { from { opacity: 0; } }

.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }