/* ===========================================================================
   Abschnitte unter dem Ergebnis und Fuß — Tor G5/G6 „Das Haus wandert durchgehend
   mit“ (Andi, 16.10.2026; Plan PLAN-HAUS-WANDERT-JELLY.md, Teil A)

   Gestaltung aus dem Tagblatt: freie Serife, Linien, keine Karten, kein Glas.
   Der Text steht frei, ohne Fläche und ohne Kante dahinter (Andi, 16.10.2026). Wo er über
   dem Haus läuft, wird das Haus gedämpft (wanderung.js, daempfen): stetig mit der
   Überdeckung, am Rechner nie unter 0,25, am Telefon bis 0,2. Das Haus ist die eine
   Zeichenfläche des Flusses (canvas.haus-raum in .haus-huelle). Es verschwindet nie; bausatz/wanderung.js verschiebt und
   skaliert nur die Hülle, gekoppelt an die Scrollposition. Der Text jedes
   Abschnitts lässt dem Haus den Platz, an dem es gerade steht:
     So funktioniert’s  das Haus rechts, der Text links
     Bank-Exposé        das Haus links, rechts der Text und zusätzlich das Blatt
     Annahmen           das Haus links, rechts Text und Liste
     Fragen             das Haus unten in der Mitte, hinter dem Text
     Fuß                die Kamera fährt zurück, das Viertel wird sichtbar
   Zwischen zwei Abschnitten liegt ein Freiraum (.freiraum): Darin gleitet das
   Haus von einem Platz zum nächsten, während der Text des nächsten Abschnitts
   von unten ins Bild kommt.

   Am Telefon gilt die frühere Fassung (Andi, 16.10.2026): Das Haus steht fest
   oben, wo die Szene des Flusses es hinlegt, der Text beginnt darunter und läuft
   beim Rollen darüber; es gibt keine Freiräume und keine Wanderung.
   =========================================================================== */

/* --- Die Zone um das Haus -------------------------------------------------- */
/* Außen die Zone, die nichts bewegt (und beschneidet), innen die Hülle, die per
   transform wandert. Eine Zone, die beschneidet, darf nicht dieselbe sein wie die,
   die sich bewegt. Die Zeichenfläche selbst behält die Maße der Szene; verschoben
   wird nur die Hülle. */
.haus-zone { position: fixed; left: 0; top: 0; width: 100vw; height: 100lvh; z-index: 1; pointer-events: none; overflow: hidden; }
.haus-huelle {
    position: absolute; left: 0; top: 0; width: 100vw; height: 100lvh; pointer-events: none;
    transform-origin: 50% 50%; will-change: transform;
}
/* Die Fläche nimmt wieder Zeiger an (Drehen mit der Maus), die Zone nicht. */
.haus-huelle .haus-raum { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .haus-huelle { will-change: auto; } }

/* --- Grundmaß ------------------------------------------------------------- */
.lichtung, .seitenfuss { --rand-a: max(64px, calc(50vw - 656px)); }
.lichtung .abschnitt {
    position: relative; box-sizing: border-box; display: block; min-height: 0;
    width: 100%; max-width: none; margin: 0; padding: 0 var(--rand-a);
}
.lichtung .abs-text { position: relative; z-index: 2; }
.lichtung .abschnitt h2 {
    margin: 14px 0 0; max-width: 15ch; font: 400 60px/1 var(--f-serif); letter-spacing: -.01em;
    text-transform: none; color: var(--text); text-wrap: balance;
}
.lichtung .abschnitt h2 em { font-style: italic; color: var(--akzent); }
.lichtung .abschnitt > .abs-text > h2:first-child { margin-top: 0; }
.lichtung .etikett { font: 600 12px/1.2 var(--f-etikett); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.lichtung .abschnitt-text { max-width: 46ch; margin: 18px 0 0; font-size: 18px; color: var(--text); }

/* Der Freiraum: Platz zum Gleiten. Er trägt nichts; sein Beginn und Ende bestimmen,
   wann das Haus losläuft und wann es angekommen ist (wanderung.js). */
.freiraum { height: 70vh; pointer-events: none; }

/* --- So funktioniert’s: das Haus rechts, die Schritte als Treppe ----------- */
.lichtung .abs-ablauf { min-height: 640px; }
.lichtung .schritte {
    list-style: none; margin: 64px 0 0; padding: 0; border: 0; border-radius: 0; background: none;
    display: grid; grid-template-columns: repeat(3, minmax(0, 250px)); gap: 36px; max-width: calc(56vw - var(--rand-a));
}
.lichtung .schritt { display: block; padding: 14px 0 0; border-top: 1px solid var(--strich); }
.lichtung .schritt + .schritt { border-top: 1px solid var(--strich); }
.lichtung .schritt:nth-child(2) { margin-top: 44px; }
.lichtung .schritt:nth-child(3) { margin-top: 88px; }
.lichtung .schritt .nr { display: block; margin-bottom: 10px; font: 400 44px/1 var(--f-serif); color: var(--text); }
.lichtung .schritt h3 { margin: 0 0 6px; font: 600 19px/1.3 var(--f-text); color: var(--text); }
.lichtung .schritt p { margin: 0; font-size: 16px; color: var(--text); }

/* --- Bank-Exposé: links das Haus, rechts Text und Inhalt, daneben das Blatt - */
/* Der Text steht ab 42 % der Breite, links davon ist Platz für das Haus. Das
   Blatt des Exposés steht zusätzlich beim Text und ersetzt das Haus nicht. */
.lichtung :is(.abs-expose, .abs-offen) { padding-left: max(var(--rand-a), 42vw); }
.lichtung .abs-expose { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 44px; align-items: start; }
.blaetter { position: relative; order: 2; width: 230px; aspect-ratio: 794 / 1123; margin: 6px 0 0; }
.blaetter > i { position: absolute; inset: 0; background: var(--blatt-papier); outline: 1px solid var(--blatt-rand); }
.blaetter > i:nth-child(1) { transform: translate(14px, 12px); }
.blaetter > i:nth-child(2) { transform: translate(7px, 6px); }
/* Das oberste Blatt deutet das Kennblatt an: Kopf mit Wortmarke, Titel, die
   große Zahl, Zeilen mit Herkunftszeichen (● Angabe, ○ Vorgabewert) und die
   Legende. Nur Formen, keine Zahl. */
.blatt {
    position: relative; box-sizing: border-box; height: 100%; padding: 9% 8%;
    display: flex; flex-direction: column; gap: 7px;
    background: var(--blatt-papier); outline: 1px solid var(--blatt-rand); color: var(--blatt-text);
}
.blatt-kopf { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--blatt-rand); }
.blatt-kopf img { height: 11px; width: auto; }
.blatt-kopf span { font: 600 8px/1 var(--f-etikett); letter-spacing: .1em; text-transform: uppercase; color: var(--blatt-leise); }
.blatt-titel { display: block; height: 9px; width: 82%; margin-top: 8px; background: var(--blatt-text); opacity: .85; }
.blatt-titel.kurz { width: 54%; margin-top: 0; }
.blatt-zahl { display: block; height: 22px; width: 46%; margin: 8px 0 4px; background: var(--blatt-text); }
.blatt-zeile { position: relative; display: block; height: 5px; margin-left: 10px; background: var(--blatt-rand); }
.blatt-zeile::before { content: ""; position: absolute; left: -10px; top: 0; width: 5px; height: 5px; border-radius: 50%; box-sizing: border-box; }
.blatt-zeile.ich::before { background: var(--blatt-text); }
.blatt-zeile.vor::before { border: 1px solid var(--blatt-text); }
.blatt-zeile:nth-of-type(2n) { width: 78%; }
.blatt-legende { display: flex; gap: 10px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--blatt-rand); font: 500 7px/1 var(--f-text); color: var(--blatt-leise); }
.lichtung .expose-teile { list-style: none; margin: 22px 0 0; padding: 0; max-width: 520px; }
.lichtung .expose-teile li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--strich-leise); font-size: 16px; }
.lichtung .expose-teile li::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--leise); transform: translateY(-4px); }
.lichtung .expose-teile li .etikett { order: 2; font: 400 15px/1 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lichtung .expose-teile-hinweis { max-width: 52ch; margin: 10px 0 18px; font-size: 14px; color: var(--text); }
.lichtung .knopf.zweit {
    min-height: 48px; padding: 0 22px; background: transparent; color: var(--text);
    border: 1.5px solid var(--text); border-radius: var(--r-jelly-knopf); font: 600 16px var(--f-text);
}

/* --- Annahmen: rechts vom Haus, Text oben, Liste darunter -------------------- */
.lichtung .abs-offen { display: block; margin-top: 18vh; }
.lichtung .annahmen-mehr { margin: 18px 0 0; font: 400 14.5px/1.4 var(--f-text); color: var(--leise); }
.lichtung .annahmen {
    margin: 36px 0 0; padding: 0; border: 0; border-radius: 0; background: none;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 0; align-items: start;
    max-width: 760px;
}
.lichtung .annahme {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0;
    border: 0; border-top: 1px solid var(--strich); border-radius: 0; background: none;
}
.lichtung .annahme dt { font: 600 16px/1.35 var(--f-text); color: var(--text); }
.lichtung .annahme dd { margin: 0; font: 600 16px/1.35 var(--f-text); font-variant-numeric: tabular-nums; color: var(--text); }
.lichtung .annahme dd.annahme-wozu { grid-column: 1 / -1; margin: 0; font: 400 14.5px/1.45 var(--f-text); color: var(--text); }

/* --- Fragen: das Haus unten in der Mitte, hinter dem Text ------------------- */
/* Das Haus darf hinter den Text. Er steht frei; das Haus wird dort gedämpft (wanderung.js). */
.lichtung .abs-fragen { min-height: 520px; }
.abs-fragen .abs-text { width: min(680px, 70vw); margin: 0 auto; }
.lichtung .fragen-liste { margin-top: 28px; padding: 0; border: 0; border-bottom: 1px solid var(--strich); border-radius: 0; background: none; }
.lichtung .fragen-liste .aufklapper { border-top: 1px solid var(--strich); }
.lichtung .fragen-liste .aufklapper-kopf { min-height: 60px; padding: 0; font: 500 19px/1.3 var(--f-text); color: var(--text); }
.lichtung .fragen-liste .aufklapper-text p { margin: -4px 0 18px; font-size: 16px; max-width: 58ch; color: var(--text); }
.lichtung .fragen-liste .aufklapper-text a { color: var(--text); text-underline-offset: 3px; }

/* --- Fuß: Aufruf oben, darunter das Viertel (die Kamera fährt zurück), Verweise unten */
.seitenfuss { margin-top: 0; padding: 0 var(--rand-a) 36px; }
.seitenfuss .fuss-flaeche {
    position: relative; padding: 0; display: flex; flex-direction: column; min-height: calc(100lvh - 36px);
    border: 0; border-radius: 0; background: none; box-shadow: none;
}
.seitenfuss .fuss-aufruf { display: grid; gap: 26px; justify-items: start; width: auto; margin: 0; padding-top: 8vh; }
.seitenfuss .fuss-titel { max-width: 14ch; font: 400 84px/.96 var(--f-serif); letter-spacing: -.015em; text-transform: none; -webkit-text-stroke: 0; }
.seitenfuss .fuss-spalten { justify-content: space-between; margin-top: auto; padding: 18px 0; border-top: 1px solid var(--strich); }
.seitenfuss .seitenfuss-vorbehalt { margin: 0 0 18px; font-size: 14px; color: var(--text); max-width: 86ch; }
.seitenfuss .fuss-unten { padding-top: 14px; border-top: 1px solid var(--strich-leise); font-size: 13px; color: var(--text); }

/* Die Ausführung der Führungslinien im Ergebnis und der Plantext gehören dem
   Platz der Szene; auf der Wanderung zeigen sie auf ein Haus, das woanders steht. */
.plan-text { transition: opacity var(--d-schritt) var(--ease-ein); }
html[data-wanderung="wandert"] .plan-text { opacity: 0; }

/* Zwischen Telefon und breitem Rechner ist für drei Stufen neben dem Haus
   kein Platz: Die Schritte stehen untereinander, links vom Haus. */
@media (min-width: 761px) and (max-width: 1180px) {
    .lichtung .schritte { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: calc(52vw - var(--rand-a)); }
    .lichtung .schritt:nth-child(n) { margin-top: 0; }
    .lichtung .abs-expose { grid-template-columns: minmax(0, 1fr); }
    .blaetter { width: 230px; margin: 30px 0 0; }
    .lichtung .annahmen { grid-template-columns: minmax(0, 1fr); }
}

/* --- Telefon: die frühere Fassung ------------------------------------------ */
/* Das Haus steht oben fest, wo die Szene es hinlegt (tagblatt.css; im Ergebnis
   tritt es beim Rollen zurück, ergebnis-gerollt). Jeder Abschnitt beginnt
   darunter; sein Text steht frei wie am Rechner (Andi, 16.10.2026) und trägt die
   harte Kante, wo er über den Linien des Hauses läuft. */
@media (max-width: 760px) {
    .lichtung, .seitenfuss { --rand-a: 16px; }
    .freiraum { display: none; }
    .lichtung .abschnitt { margin-top: 0; min-height: auto; padding-top: 48lvh; padding-bottom: 24px; }
    .lichtung .abschnitt h2 { font-size: 40px; }
    .lichtung .abschnitt-text { font-size: 17px; }
    .lichtung .abs-ablauf, .lichtung .abs-fragen { min-height: 0; }
    .lichtung .schritte { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 32px; max-width: none; }
    .lichtung .schritt:nth-child(n) { margin-top: 0; }
    .lichtung :is(.abs-expose, .abs-offen) { padding-left: var(--rand-a); }
    .lichtung .abs-expose { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .lichtung .abs-expose .abs-text { order: 1; }
    .blaetter { order: 2; width: 220px; margin: 0 auto; }
    .blatt { gap: 6px; }
    .blatt-zahl { height: 22px; }
    .lichtung .annahmen { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
    .abs-fragen .abs-text { width: auto; margin: 0; }
    .lichtung .fragen-liste .aufklapper-kopf { font-size: 17px; }
    .seitenfuss { margin-top: 0; padding-top: 48lvh; padding-bottom: 28px; }
    .seitenfuss .fuss-flaeche { min-height: 0; }
    .seitenfuss .fuss-aufruf { padding-top: 0; }
    .seitenfuss .fuss-titel { font-size: 50px; }
    .seitenfuss .fuss-unten { flex-direction: column; gap: 4px; }
}