/* ===========================================================================
   Die Seite des Relaunchs (Phase A2): was die Bauteile in index.html
   zusammenhält.

   index.html lädt stil.css (Lichtung) und danach die Bauteile aus bausatz/.
   Der Fragenfluss, der Kopf und der Hintergrund sind schon im Relaunch; die
   Detailansicht, der Exposé-Dialog, die Abschnitte unter dem Fluss und der
   Fuß tragen bis A3 noch die Gestaltung aus stil.css. Hier steht nur, was
   beides nebeneinander bestehen lässt — keine eigene Gestaltung.
   =========================================================================== */

/* Schrift und Farbe des Relaunchs für alles, was aus den Bauteilen kommt.
   stil.css setzt sie am body; der Fluss soll sie nicht erben. */
.fluss-buehne, .kopf { font: var(--g-16)/1.55 var(--f-text); color: var(--text); }
.leise { color: var(--leise); }

/* Über Himmel (z-index 0) und Haus (1): alles, was gelesen wird. */
.fluss-buehne, #lichtung, #detailansicht, .seitenfuss { position: relative; z-index: 2; }

/* Der Anker: Die Oberkante des Felds steht bei rund 46 % der Fensterhöhe
   (DESIGN-VORGABE 7.1), wie auf der Demoseite (bausatz/fluss-demo.css), an
   der der Sprung-Test grün ist. stil.css zentriert die Kinder von body in
   einer Spalte; der Fluss nimmt die ganze Breite und steht links bündig zur
   Mitte versetzt. */
.fluss-buehne {
    align-self: stretch; box-sizing: border-box; width: 100%; min-height: 100svh;
    padding: max(96px, calc(46svh - 126px - 3.15 * var(--g-frage))) 16px 48px;
    padding-left: max(16px, calc(50vw - 572px));
}
/* stil.css gibt dem body oben Innenabstand für den alten Kopf, der im Fluss
   stand. Der Kopf des Relaunchs ist fest: Über dem Fluss rechnet der Anker
   mit dem Fensterrand, die Detailansicht beginnt unter dem Kopf. */
body:not(.zeigt-detail) { padding-top: 0; }
body.zeigt-detail { padding-top: 104px; }
@media (max-width: 760px) { .fluss-buehne { padding-top: 96px; } }

/* Inseratstext: unter dem Fluss, so breit wie die Karte. */
.inserat-einfuegen { width: min(560px, 100%); margin-top: 24px; }
.inserat-einfuegen textarea {
    width: 100%; box-sizing: border-box; min-height: 9em; padding: 12px 14px; resize: vertical;
    border-radius: var(--r-flaeche); border: 1px solid var(--glasrand); background: var(--feld); color: var(--text);
    font: var(--g-14)/1.5 var(--f-zahl, ui-monospace, monospace);
}
.inserat-einfuegen textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.inserat-einfuegen .sp-funde { margin-top: 12px; }

/* Am Ergebnis: Risiken, Kennzahlen, Annahmen, Exposé (app.js, flussZusatz). */
.fluss-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin: 12px 0; }
.fluss-kennzahlen div { display: flex; flex-direction: column; }
.fluss-kennzahlen dt { color: var(--leise); font-size: var(--g-13); }
.fluss-kennzahlen dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fluss-annahmen { margin: 0 0 8px; padding-left: 1.2em; }
.fluss-annahmen li + li { margin-top: 4px; }
.fluss-vorbehalt { margin: 8px 0 0; font-size: var(--g-13); }
.fluss-expose { display: grid; gap: 8px; margin-top: 12px; }
.fluss-expose p { margin: 0; font-size: var(--g-13); }

/* Die Fragen unter dem Fluss: eine Glasfläche mit Aufklappern. */
#fragen .aufklapper-gruppe { color: var(--text); font-family: var(--f-text); }

/* ===========================================================================
   A3 (05.10.2026): Abschnitte unter dem Fluss und Fuß nach der Gesamtseite
   des Relaunchs (entwurf/relaunch-2026-10/prototypen/seite-d.css, von Andi
   am 03.10.2026 abgenommen). Eine Spalte links bündig zum Fluss, rechts
   bleibt das Haus frei. Kein Vorfahre einer Glasfläche bekommt opacity,
   filter, mask oder mix-blend-mode; eingeblendet (.zeigen) wird nur Text.
   =========================================================================== */
.lichtung, .seitenfuss { font: var(--g-16)/1.55 var(--f-text); color: var(--text); }
/* Fast fensterhoch wie auf der Gesamtseite: So steht selten mehr als ein
   Abschnitt im Bild, das Haus hat Raum, und die Grenze von drei
   weichgezeichneten Flächen hält. */
.lichtung .abschnitt {
    box-sizing: border-box; width: 100%; max-width: none; margin: 0; min-height: 92vh;
    display: flex; align-items: center;
    padding: 120px 16px 40px; padding-left: max(16px, calc(50vw - 572px));
}
.lichtung .spalte { width: min(560px, 100%); display: grid; gap: 16px; }
.lichtung .etikett, .seitenfuss .etikett {
    margin: 0; font: 700 15px/1.2 var(--f-kopf); letter-spacing: .14em; text-transform: uppercase; color: var(--akzent);
}
.lichtung h2, .seitenfuss .fuss-titel, #detailansicht .detail-ueberschrift {
    margin: 0; max-width: none; font: 400 var(--g-h2)/.98 var(--f-anzeige); letter-spacing: .005em;
    text-transform: uppercase; color: var(--text); text-wrap: balance;
}
/* Wie im Fluss: die eine betonte Stelle in Akzentfarbe, nicht kursiv. */
:is(.lichtung h2, .seitenfuss .fuss-titel, #detailansicht .detail-ueberschrift) em { font-style: normal; color: var(--akzent); }
.lichtung h3 { margin: 0; font: 700 var(--g-24)/1.1 var(--f-kopf); color: var(--text); }
.lichtung p { margin: 0; }
.lichtung .abschnitt-text { max-width: 58ch; font-size: var(--g-16); color: var(--leise); }

/* Ablauf: drei Schritte als Glas, Nummer in der Anzeigeschrift. */
/* Eine Glasfläche je Abschnitt, nicht eine je Schritt: Im Bild stehen
   höchstens drei weichgezeichnete Flächen (glas.js, Tor G1), und der Kopf
   ist schon eine. Die Schritte trennt eine Linie wie die Fragen. */
.lichtung .schritte { list-style: none; margin: 0; padding: 4px 0; display: grid; border-radius: var(--r-flaeche); }
.lichtung .schritt {
    padding: 18px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: baseline;
}
.lichtung .schritt + .schritt { border-top: 1px solid var(--glasrand); }
.lichtung .schritt .nr { grid-row: span 2; font: 400 34px/1 var(--f-anzeige); color: var(--akzent); }
.lichtung .schritt p { color: var(--leise); font-size: 15px; }

/* Bank-Exposé: die Teile als Liste auf Glas. */
.lichtung .karte { padding: 20px 24px; display: grid; gap: 14px; border-radius: var(--r-flaeche); }
.lichtung .expose-teile { list-style: none; margin: 0; padding: 0; }
.lichtung .expose-teile li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    padding: 10px 0; border-bottom: 1px solid var(--glasrand); font-size: 15px;
}
.lichtung .expose-teile li .etikett { font-size: var(--g-13); color: var(--leise); letter-spacing: .08em; }
.lichtung .expose-teile-hinweis { font-size: var(--g-13); }
.reihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Offen gerechnet: zwei Spalten Glas, der Wert groß. */
/* Ebenso hier: eine Glasfläche, darin die Werte als Felder. */
.lichtung .annahmen { margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-radius: var(--r-flaeche); }
.lichtung .annahme { padding: 12px 14px; display: grid; gap: 2px; border-radius: var(--r-flaeche); background: var(--feld); border: 1px solid var(--glasrand); }
.lichtung .annahme dt { font-size: var(--g-13); color: var(--text); }
.lichtung .annahme dd { margin: 0; font: 700 var(--g-24)/1.15 var(--f-kopf); font-variant-numeric: tabular-nums; color: var(--text); }
/* W13 (Tor G3): je Annahme ein Halbsatz, was sie bedeutet. */
.lichtung .annahme dd.annahme-wozu { margin-top: 4px; font: 400 var(--g-13)/1.4 var(--f-text); color: var(--text); }
@media (max-width: 374px) { .lichtung .annahmen { grid-template-columns: minmax(0, 1fr); } }

/* Knöpfe der Seite: dieselbe Bauform wie im Fluss (.fluss-knopf). */
.knopf.primaer, .knopf.zweit {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 22px; border-radius: var(--r-bedien); white-space: nowrap;
    font: 600 var(--g-16)/1 var(--f-text); text-decoration: none; cursor: pointer;
    transition: background var(--d-ping) var(--ease-aus), transform var(--d-ping) var(--ease-aus);
}
.knopf.primaer { background: var(--primaer); color: var(--primaer-text); border: 1px solid var(--primaer); }
.knopf.zweit { background: var(--feld); color: var(--text); border: 1px solid var(--glasrand); }
.knopf.primaer:hover, .knopf.zweit:hover { transform: translateY(-1px); }
:is(.lichtung, .seitenfuss) :is(a, button):focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* --- Fuß ------------------------------------------------------------------ */
.seitenfuss {
    box-sizing: border-box; width: 100%; max-width: none; margin: 0; border: 0; background: none;
    display: grid; gap: 24px; padding: 120px 16px 24px; padding-left: max(16px, calc(50vw - 572px));
    padding-right: max(16px, calc(50vw - 572px));
}
.seitenfuss .fuss-aufruf { display: grid; gap: 20px; justify-items: start; width: min(560px, 100%); }
.seitenfuss .fuss-titel { margin: 0; font-size: var(--g-h2); }
.seitenfuss .fuss-flaeche { padding: 24px; display: grid; gap: 14px; border-radius: var(--r-flaeche); font-size: var(--g-13); color: var(--leise); }
.seitenfuss .fuss-spalten { display: flex; flex-wrap: wrap; gap: 4px 32px; }
.seitenfuss .fuss-werkzeug, .seitenfuss .seitenfuss-verweise { display: flex; flex-wrap: wrap; gap: 0 20px; flex-direction: row; }
.seitenfuss :is(.fuss-werkzeug, .seitenfuss-verweise) a {
    display: inline-flex; align-items: center; min-height: 44px; font-size: var(--g-14); color: var(--text);
    text-decoration: none; border-bottom: 1px solid transparent;
}
.seitenfuss :is(.fuss-werkzeug, .seitenfuss-verweise) a:hover { border-bottom-color: var(--akzent); }
.seitenfuss .seitenfuss-vorbehalt { margin: 0; max-width: 78ch; font-size: var(--g-13); color: var(--leise); }
.seitenfuss .seitenfuss-vorbehalt strong { color: var(--text); }
.seitenfuss .fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0; }
/* In der Detailansicht steht der Fuß unter der Aufstellung. */
body.zeigt-detail .seitenfuss { padding-top: 48px; }
/* Seit Tor G5, Variante A (16.10.2026) stehen Abschnitte und Fuß in
   bausatz/abschnitte.css; das Haus steht dort nie unter Text. Die harte Kante
   bleibt am Titel der Detailansicht. */
/* Text ohne Glas über den Linien des Hauses: harte Kante in der Grundfarbe
   statt Schein, wie auf der Gesamtseite (seite-d.css) und im Glas
   (glas.css). Gefüllte Knöpfe tragen keine. */
#detailansicht .detail-titel {
    -webkit-text-stroke: 2px var(--grund); paint-order: stroke fill;
}

/* Ein ganzer Aufklapper, der nur unter einer Bedingung erscheint (Herkunft
   des Mietspiegelwerts). .aufklapper setzt display: grid und schlüge sonst
   das hidden-Attribut; der Aufklappzustand selbst bleibt beim Bauteil. */
.aufklapper.mehr[hidden] { display: none; }

/* ===========================================================================
   A3: Detailansicht. Farben und Schriften kommen über bruecke.css; hier
   steht, was am Aufbau anders ist als in der Lichtung.
   =========================================================================== */
/* Die acht Abschnitte des Ergebnisses sind seit A3 Aufklapper des Relaunchs
   mit Glas. Der Inhalt trägt weiter .accordion-body für seine Innenmaße;
   dessen display: none aus stil.css gilt hier nicht, den Zustand hält das
   Bauteil. */
.aufklapper.accordion-item { padding: 0; border: 0; background: var(--glas); }
.aufklapper .accordion-body { display: block; }
.aufklapper.accordion-item .aufklapper-titel { font: inherit; }
.aufklapper.accordion-item .aufklapper-kopf { font: 700 var(--g-19)/1.2 var(--f-kopf); letter-spacing: .01em; }
/* „Mehr dazu“ in der Detailansicht: schlicht, in der Akzentfarbe. */
#detailansicht .aufklapper.schlicht .aufklapper-text { padding: 0 0 8px; }
/* Der eine Primärknopf und der aktive Reiter in der Farbe des Relaunchs
   (--primaer) statt der Creme-Pille der Lichtung. */
#detailansicht .action-btn.primaer, #detailansicht .action-btn.primaer:hover,
.expose-dialog .action-btn.primaer, .expose-dialog .action-btn.primaer:hover {
    background: var(--primaer); border-color: var(--primaer); color: var(--primaer-text);
}
#detailansicht .action-btn.primaer svg, .expose-dialog .action-btn.primaer svg { color: var(--primaer-text); }
body.zeigt-detail .step-pill.active { background: var(--primaer); color: var(--primaer-text); }

/* N8 (DESIGN-VORGABE 9): Detailaufstellung öffnen. „Ansicht hebt sich,
   Glasflächen entfalten sich versetzt.“ Gehoben wird jede Fläche für sich,
   nicht der Behälter: In #detailansicht steht die feste Ergebnisleiste, und
   ein transform am Elternelement verschöbe sie (CLAUDE.md „Bewegung“). Die
   Fläche selbst bekommt keine Deckkraft (das schaltete in Safari das Glas ab,
   glas.css); eingeblendet wird ihr Inhalt. app.js (flussEntfalteDetails)
   wählt die Flächen im Bild, nummeriert sie (--n, höchstens sechs) und lässt
   aus, was schon über das Einschweben (SCHWEBT) kommt — zwei Bewegungen an
   demselben transform zittern. Weniger Bewegung: sofort, wie bisher. */
@media (prefers-reduced-motion: no-preference) {
    #detailansicht .entfaltet {
        transform-origin: 50% 0;
        animation: detail-entfaltet var(--d-szene) var(--ease-aus) calc(var(--n, 0) * var(--versatz)) both;
    }
    #detailansicht .entfaltet > * {
        animation: detail-inhalt var(--d-schritt) var(--ease-aus) calc((var(--n, 0) + 1) * var(--versatz)) both;
    }
}
@keyframes detail-entfaltet { from { transform: translateY(calc(2 * var(--schwebe-weg))) scaleY(.96); } }
@keyframes detail-inhalt { from { opacity: 0; } }
/* Detailaufstellung: ruhiger Hintergrund, das Haus gedämpft (DESIGN-VORGABE
   12: „das Bild hört dort auf, wo gelesen wird“). Die Zeichenfläche ist kein
   Vorfahre einer Glasfläche; ihre Deckung darf sich ändern. Der Übergang
   kommt aus hintergrund.css (--d-atem). */
/* 30 %, nicht 50: Mit halber Deckung schienen im hellsten Zustand die
   erleuchteten Fenster durch das Glas ohne Weichzeichnung, Kennzahlen bis
   3,26:1 (375 px, gemessen 05.10.2026). */
body.zeigt-detail .haus-raum { opacity: calc(var(--r-raum-deckung) * .3); }

/* Detailansicht: Glas ohne Weichzeichnung. Der Hintergrund ist dort
   gedämpft, und es stehen Dutzende Flächen im Bild; jede weichgezeichnete
   müsste der Browser in jedem Bild neu rechnen, solange sich Himmel und Haus
   bewegen (Grenze drei, glas.js, Tor G1). Gelesen wird auf dichtem Glas
   (--glas-stark). Weich bleiben nur die beiden schwebenden Leisten, die
   über Text stehen, und der Kopf. */
body.zeigt-detail #detailansicht {
    --glas-blur: none;
    /* Ohne Weichzeichnung trägt die Deckung allein: 88 % statt der 62 % von
       --glas-stark (Messung 05.10.2026, siehe oben am Haus). */
    --f-glas-dicht: color-mix(in srgb, var(--glas-deckend) 88%, transparent);
    --f-panel: var(--f-glas-dicht);
    --f-glas: var(--f-glas-dicht);
}
body.zeigt-detail #detailansicht .glas { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--f-glas-dicht); }
body.zeigt-detail #detailansicht :is(.ergebnis-leiste, .action-bar) { --glas-blur: var(--glas-filter); }
/* Ebenso der Fuß unter der Detailansicht und die Leiste „Inseratstext
   einfügen“: Unter einem langen Ergebnis stand sie bei 1440 px als vierte
   weichgezeichnete Fläche im Bild (gemessen 05.10.2026). */
body.zeigt-detail .seitenfuss .glas, .inserat-einfuegen.glas { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glas-stark); }
/* Tabellen und Zwischentitel der Detailansicht: In stil.css stehen hier
   Farben der Lichtung als Zahl (Kopf rgba(10, 14, 11, .9), Linien in Creme).
   Am Morgen stand dunkle Schrift auf dem dunklen Kopf, 1,01:1 (gemessen
   05.10.2026, bausatz/miss-kontrast-seite.mjs, 1440 px). */
body.zeigt-detail table.tilgungstabelle th { background: var(--glas-deckend); }
body.zeigt-detail table.tilgungstabelle :is(th, td) { border-bottom-color: var(--glasrand); }
#detailansicht .abschnitt-titel { border-bottom-color: var(--glasrand); }

/* Die Tafeln je Abschnitt (A3, 05.10.2026) sind mit Tor G5, Variante A
   entfallen: Auf 375 px lief damals der freie Text über die hellen Linien des
   Hauses (bis 1,19:1). Seit dem 16.10.2026 hat das Haus in jedem Abschnitt
   einen eigenen Platz, und kein Text steht darüber (bausatz/abschnitte.css,
   bausatz/miss-abschnitte.mjs). */

/* ===========================================================================
   Der Dialog des Exposés als Blatt (Tor G5, Variante B „Exposé als Hauptweg“,
   Andi 10.10.2026). Links das Deckblatt groß, rechts die beiden freiwilligen
   Angaben. Das Papier bleibt hell, gleich welche Tageszeit die Seite hat; der
   Grund dahinter wird nur abgedunkelt, nicht weichgezeichnet (Brief: kein
   Blur hinter Text).
   Farben als Tokens in tokens.css (--blatt-*), mit den Kontrasten dort.
   =========================================================================== */
.expose-dialog {
    width: min(1000px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); overflow: auto;
    padding: 36px 40px; border: 0; border-radius: var(--r-jelly-knopf);
    background: var(--blatt-grund); color: var(--blatt-text);
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.expose-dialog[open] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: start; }
.expose-dialog::backdrop { background: var(--blatt-dunkel); }
.expose-bogen-vorschau { --s: 0.529; }
.expose-deckblatt-rahmen { width: calc(794px * var(--s)); aspect-ratio: 794 / 1123; overflow: hidden; background: var(--blatt-papier); outline: 1px solid var(--blatt-rand); }
.expose-deckblatt-blatt { width: 794px; transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; }
.expose-deckblatt-blatt .pdf-seite { box-sizing: content-box; width: 178mm; padding: 18mm 16mm; background: var(--blatt-papier); }
.expose-deckblatt-zeile { margin: 10px 0 0; font: 13px/1.4 var(--f-text); color: var(--blatt-leise); max-width: calc(794px * var(--s)); }
.expose-bogen-formular > .etikett { color: var(--blatt-leise); margin: 0; }
/* Am Telefon bekommt die Überschrift beim Öffnen den Fokus (app.js); sie ist
   kein Bedienelement und trägt deshalb keinen Fokusrahmen. */
#exposeDialogTitel:focus { outline: none; }
.expose-bogen-formular > h2 { font: 400 40px/1.05 var(--f-serif, "Instrument Serif", serif); color: var(--blatt-text); margin: 6px 0 12px; }
.expose-dialog .expose-dialog-vorspann { font: 15px/1.5 var(--f-text); color: var(--blatt-text); margin: 0 0 6px; }
.expose-dialog .eingabe-gruppe { margin: 16px 0 0; }
.expose-dialog label { display: block; font: 600 15px var(--f-text); color: var(--blatt-text); margin: 0 0 4px; }
.expose-dialog .expose-freiwillig { color: var(--blatt-leise); font-weight: 400; }
.expose-dialog .help-text { font: 13.5px/1.45 var(--f-text); color: var(--blatt-leise); margin: 0 0 6px; }
.expose-dialog .help-text strong { color: var(--blatt-text); }
.expose-dialog input[type="text"] {
    width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px;
    border: 1.5px solid var(--blatt-kante); border-radius: var(--r-jelly-klein); background: var(--blatt-papier); color: var(--blatt-text); font: 500 16px var(--f-text);
}
.expose-angaben { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; margin: 18px 0 0; font: 15px/1.5 var(--f-text); color: var(--blatt-text); }
.expose-angaben[hidden] { display: none; }
.expose-verweis, .expose-abbrechen {
    min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--blatt-text); font: 500 15px var(--f-text); cursor: pointer;
    text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.expose-dialog .expose-hinweis { margin: 10px 0 0; font: 13px/1.45 var(--f-text); color: var(--blatt-leise); }
/* Freigehalten für Phase B/D, siehe Markup. */
.expose-platz { min-height: 22px; margin: 14px 0 0; }
/* Die Knopfzeile bleibt am unteren Rand des Blatts stehen, auch wenn es bei
   kleiner Fensterhöhe rollt: Der eine Primärknopf soll nie unter dem Rand liegen. */
.expose-dialog .expose-dialog-knoepfe {
    position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
    justify-content: flex-start; margin-top: 8px; padding: 12px 0; background: var(--blatt-grund);
}
.expose-dialog .knopf-primaer { min-height: 56px; padding: 0 28px; font: 600 17px var(--f-text); }
.expose-dialog .expose-erstellen { order: -1; }
@media (max-width: 760px) {
    /* Am Telefon ein volles Blatt von unten. */
    .expose-dialog { width: 100vw; max-height: calc(100dvh - 40px); margin: auto 0 0; padding: 20px 16px 28px; border-radius: var(--r-flaeche); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .expose-dialog[open] { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    /* Am Telefon ohne Deckblatt: Es war dort zu klein, um etwas zu zeigen, und
       nahm der Tastatur den Platz. Das ganze Dokument zeigt die Vorschau nach
       „Exposé erstellen“ (Andi, iPhone, 10.10.2026). */
    .expose-bogen-vorschau { display: none; }
    /* Bei offener Tastatur stehen die Knöpfe unter den Feldern und kleben
       nicht am Rand: Die klebende Leiste lag sonst über dem Feld, in das man
       gerade tippte (Andi, iPhone, 10.10.2026). Ohne Tastatur kleben sie
       unten wie am Rechner; das Blatt ist am Telefon höher als der Bildschirm
       (940 gegen 834 px bei 402 × 874), und der Primärknopf läge sonst
       unter dem Rand. */
    .expose-dialog.ueber-tastatur .expose-dialog-knoepfe { position: static; padding-bottom: 0; }
    /* Bei offener Tastatur steht das Blatt im sichtbaren Bereich darüber
       (app.js, exposeBlattLage): oben am sichtbaren Rand, so hoch wie er.
       Es rollt in sich, und das Feld mit dem Fokus wird hineingerollt. */
    .expose-dialog.ueber-tastatur { inset: var(--vv-oben, 0px) 0 auto 0; margin: 0; max-height: var(--vv-hoehe, 100dvh); border-radius: 0; }
    .expose-bogen-formular > h2 { font-size: 32px; }
}