/* === quelle/stil/basis.css === */
/* ===========================================================================
   basis.css — Design-System des Neubaus, im Bündel VOR allen Abschnitts-Stilen.
   Identität, Seitenmodell (Filmraum/Ruheraum, Strecke in B) und Zustände
   zwischen Stil und Motor: docs/gestaltung.md; Vertrag der Motor-Klassen und
   Pflicht-CSS (Abschnitt 7): docs/motor.md. Mobile First (600 / 834 / 1000 /
   1440 / 1920), Rechner-Spalte ab 1000 px quer und 500 px Höhe, darunter klebt
   nichts. url(schriften/…) ist relativ zum Bündel final/assets/app-<hash>.css.
   Ohne Skript gilt keine Motor-Klasse: Text, Poster und Karten stehen sichtbar.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Schriften — selbst gehostet, OFL (assets/schriften/QUELLE.txt)
   „Kino-Titel“ (Nutzerwahl 28.09.2026): Imbue (schmale Didone, wght 100–900,
   opsz 10–100, KEINE Kursive) für Anzeige und Titel, opsz folgt der Größe
   (font-optical-sizing auto); Hanken Grotesk (wght 100–900, mit Kursive) für
   Text. format('woff2') — NICHT 'woff2-variations' (docs/fallen.md).
   Vorgeladen werden nur die zwei aufrechten Dateien (rahmen.*.html).
   --------------------------------------------------------------------------- */
@font-face{font-family:'Imbue';src:url(schriften/imbue-var.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+0152-0153,U+2010-2014,U+2018-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+20AC,U+2122,U+2212}
@font-face{font-family:'Hanken Grotesk';src:url(schriften/hanken-var.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+0152-0153,U+2010-2014,U+2018-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+20AC,U+2122,U+2212}
@font-face{font-family:'Hanken Grotesk';src:url(schriften/hanken-kursiv-var.woff2) format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
  unicode-range:U+0020-007E,U+00A0-00FF,U+0152-0153,U+2010-2014,U+2018-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+20AC,U+2122,U+2212}

/* Ersatzschriften mit angeglichener Metrik, damit beim Tausch nichts springt:
   size-adjust = mittlere Breite über den Seitentext, ascent/descent aus OS/2
   ÷ size-adjust (fontTools; Rechnung docs/gestaltung.md, „Schriften“). Imbue
   400/opsz 72 gegen Times bzw. Liberation Serif, ohne beide (Android) gegen
   Noto Serif; Hanken 400 gegen Arial bzw. Liberation Sans. */
@font-face{font-family:'Imbue Ersatz';
  src:local('Times New Roman'),local('TimesNewRomanPSMT'),local('Liberation Serif'),local('Times');
  size-adjust:68.44%;ascent-override:138.8%;descent-override:36.53%;line-gap-override:0%}
@font-face{font-family:'Imbue Ersatz Noto';
  src:local('Noto Serif Regular'),local('NotoSerif-Regular');
  size-adjust:58.52%;ascent-override:162.34%;descent-override:42.72%;line-gap-override:0%}
@font-face{font-family:'Hanken Ersatz';
  src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Helvetica');
  size-adjust:100.28%;ascent-override:99.72%;descent-override:30.22%;line-gap-override:0%}


/* ---------------------------------------------------------------------------
   2. Tokens
   Kontraste gerechnet (Tabelle in docs/gestaltung.md, Skript liest DIESE Datei).
   --------------------------------------------------------------------------- */
:root{
  /* Nacht über Dürnstein — blau, nicht schwarz. Grund, Tiefe, zwei Flächen. */
  --nacht:#0E1729;
  --nacht-tief:#080E1B;
  --abend:#15213A;
  --abend-hoch:#1E2D4B;
  /* Trennlinie, rein gliedernd. Als Rand eines Bedienelements zu schwach. */
  --linie:#2A3A58;
  /* Rand, der ein Bedienelement ausweist: ≥3:1 auf allen vier Gründen. */
  --linie-knopf:#7788A8;

  /* Kalkweiß der Fassade — Text und helle Knopffläche. */
  --kalk:#EEF0EA;
  --kalk-matt:#AEB9CB;

  /* Laternenlicht — der EINE Akzent: Schein, Kicker, Fokus, Unterstrich.
     Nie als Knopffläche, nie für Fließtext auf Kalk. */
  --laterne:#EBB46A;
  --laterne-rgb:235 180 106;
  /* Kern des Lichts: Statuslicht im Kopf, Dachzeilen über Film */
  --laterne-kern:#FFE3B3;

  /* Platzhalterton mit EINER Bedeutung: „hier fehlt die Bestätigung des
     Betriebs“. Für nichts anderes. */
  --offen:#9AA3B2;

  /* Papier des Buchs: kühles Kalkpapier (kein Beige), Tinte nachtblau. */
  --papier:#E8EBE4;
  --tinte:#152036;
  --tinte-matt:#4A566B;
  --offen-papier:#5E6573;

  /* Schleier hinter Schrift über Film: Farbe und Deckung. Über reinem Weiß
     gerechnet — hält also über jedem Filmbild. */
  --schleier:#080E1B;
  --schleier-rgb:8 14 27;
  --schleier-deckung:.88;

  /* Schein. Nur RUHEND gerechnet; bewegt wird allein die Deckkraft der Ebene,
     die ihn trägt (docs/fallen.md: animierter Schatten = Neuzeichnen je Bild).
     Den Schein der Schrift malt das Pflicht-CSS des Motors (.motor-glow),
     seine Farben kommen von hier. */
  --motor-glow-nah:rgb(var(--laterne-rgb) / .7);
  --motor-glow-weit:rgb(var(--laterne-rgb) / .42);
  /* Lichthof hinter Flächen (data-glow-ebene="licht"): leiser als der Schriftschein */
  --glow-licht:rgb(var(--laterne-rgb) / .34);
  --glow-flaeche:
    0 0 0 1px rgb(var(--laterne-rgb) / .6),
    0 0 18px 2px rgb(var(--laterne-rgb) / .38),
    0 0 56px 6px rgb(var(--laterne-rgb) / .16);

  /* Schrift: Imbue für Anzeige und Titel, Hanken Grotesk für Text (Abschnitt 1) */
  --schrift-anzeige:'Imbue','Imbue Ersatz','Imbue Ersatz Noto','Times New Roman',serif;
  --schrift-text:'Hanken Grotesk','Hanken Ersatz',Arial,sans-serif;

  /* Typo-Skala, fluid. rem-Anteil hält Zoom und Schriftgröße des Nutzers mit.
     Imbue ist schmal: Anzeigestufen größer und enger als bei einer Antiqua.
     Bei 390 / 834 / 1440 px: riese 74/119/179, 1 49/66/90, 2 34/41/53,
     3 24/28/32; lead 19/21/24, text 17/18/19, klein 14/14/15, kicker 14/15/16. */
  --gr-riese:clamp(4.5rem, 2.2rem + 10vw, 13rem);
  --gr-1:clamp(3rem, 2.1rem + 3.9vw, 6rem);
  --gr-2:clamp(2.125rem, 1.6rem + 1.9vw, 4rem);
  --gr-3:clamp(1.5rem, 1.3rem + .8vw, 2.375rem);
  --gr-lead:clamp(1.1875rem, 1.08rem + .5vw, 1.5rem);
  --gr-text:clamp(1.0625rem, 1.01rem + .22vw, 1.1875rem);
  --gr-klein:clamp(.875rem, .85rem + .1vw, .9375rem);
  --gr-kicker:clamp(.875rem, .84rem + .15vw, 1rem);

  /* Zeilenhöhen. Imbue fällt 0,25 em unter die Grundlinie und steigt bis
     0,75 em: unter 1 kann eine Unterlänge die nächste Zeile berühren („Tag und
     Abend / beim“: g auf dem i-Punkt). Eng (.92) stehen nur die Kopfzeilen über
     Film, deren Umbrüche geprüft sind (docs/gestaltung.md); Riese einzeilig */
  --zh-riese:.86;
  --zh-kopf:.92;
  --zh-anzeige:1;
  --zh-titel:1.05;
  --zh-eng:1.3;
  --zh-text:1.55;

  /* Gewichte: Imbue 250 (Riese), 400, Wortmarke 500; Hanken 400 und 600 */
  --gew-riese:250;
  --gew-anzeige:400;
  --gew-marke:500;
  --gew-text:400;
  --gew-stark:600;
  --sperrung-kicker:.2em;
  --sperrung-anzeige:-.005em;
  --mass-text:62ch;

  /* Abstände: 4er-Raster, dazu fluid für Seitenrand und Abschnitte */
  --raum-1:.25rem; --raum-2:.5rem; --raum-3:.75rem; --raum-4:1rem;
  --raum-5:1.5rem; --raum-6:2rem;  --raum-7:3rem;   --raum-8:4rem;
  --raum-9:6rem;   --raum-10:8rem;
  --rand:clamp(1rem, .4rem + 2.6vw, 3.5rem);
  --raum-abschnitt:clamp(4rem, 2.6rem + 5.5vw, 9rem);
  --breite:76rem;

  /* Kanten: gerade. Einzige Rundung ist der Rundbogen (Tor, Fassade) oben an
     Bildträgern — siehe .bogen. Keine Pillen, keine weichen 12–16 px. */
  --radius-kante:2px;

  /* Bewegung: eine Familie. „aus“ = Laterne geht an (schnell hell, lang
     ausklingend); „tuer“ = Übergang zwischen zwei Zuständen. */
  --ease-aus:cubic-bezier(.16,1,.3,1);
  --ease-tuer:cubic-bezier(.65,0,.35,1);
  --ease-ein:cubic-bezier(.5,0,.75,0);
  --dauer-tipp:140ms;
  --dauer-kurz:240ms;
  --dauer-mittel:520ms;
  --dauer-lang:900ms;

  /* Rahmen der Seite. Kopf und Leiste MÜSSEN genau diese Höhen haben
     (height:var(--kopf-h) usw.) — die Bühne rechnet damit, nicht mit Messung.
     Leiste = Rand + 2 × Polster + Knopf (+ sichere Zone), gerechnet, nicht
     geschätzt (docs/fallen.md: 78 statt 67 px). */
  --kopf-h:56px;
  --leiste-knopf:48px;
  --leiste-polster:8px;
  --leiste-rand:1px;
  --leiste-h:calc(var(--leiste-rand) + 2 * var(--leiste-polster) + var(--leiste-knopf) + env(safe-area-inset-bottom, 0px));
  --buehne-h:calc(100svh - var(--kopf-h) - var(--leiste-h));

  /* Filmraum: jede Strecke in B = Fensterhöhe ohne Leiste (die Bühne reicht unter
     die Kopfzeile, F.1, Z.3); Werte hochkant, quer darunter */
  --buehne:calc(100svh - var(--leiste-h));
  /* Strecken Lauf E, gerechnet auf das Längenziel (docs/gestaltung.md) */
  --kapitel-weg:.85;      /* Scrollweg jedes weiteren Kapitels (quer .50) */
  --film-frei:.45;        /* freier Film zwischen zwei Blöcken (quer .10) */
  --film-frei-ende:.35;   /* nach dem letzten Kapitel, vor dem Absenken; Vertrag
                             mit dem Kern: höchstens .35 (quer 0). Umbau
                             27.09.2026: .20 → .35, der letzte Film jedes Raums
                             (buch, abend) läuft langsamer, sein Endbild steht länger */
  --lage-unten:.08;       /* Unterkante des Blocks über dem Bühnenboden */
  --lage-mitte:.16;       /* data-lage="mitte", nur hochkant; .26 (Lauf D) hob den
                             Block über den kleineren Verlauf hinaus */
  --halt-vor:.5;          /* Lauf G: der Rahmen klebt schon 0,5 B vor der Ruhelage */
  --halt-nach:1.25;       /* und bis 1,25 B danach (das letzte Kapitel eines Filmraums bis S1) */
  --block-anteil:.45;     /* Block höchstens 45 % B (unter 700 px Höhe 55 %) */
  --block-max:calc(var(--buehne) * var(--block-anteil));
  --aussen:6vw;           /* Außenrand */
  --satz:88%;             /* Satzbreite (quer 36 %) */
  /* Kopfzeile über Film: höchstens zwei Zeilen in der Satzbreite, höchstens
     10 % der Fensterhöhe (11 % hob bei 375×667 die Dachzeile von blick aus dem
     Schleier). Breiteste Zeile „Dürnstein liegt“ 4,20 em (21cqi lässt 4,76),
     h1 „Heurigenschank“ 4,63 em (20,5cqi lässt 4,88); docs/gestaltung.md */
  --kopf-gr:min(21cqi, 10svh);
  --kopf-gr-h1:min(20.5cqi, 10svh);
  /* Abstände im Block (higgs10 §3.3): Dachzeile ↓ Kopfzeile ↓ Unterzeile ↓ Knopf */
  --abstand-dach:calc(.070 * var(--buehne));
  --abstand-unter:calc(.038 * var(--buehne));
  --abstand-knopf:calc(.043 * var(--buehne));
  /* Kontrastverlauf D.4 (Rechnung docs/gestaltung.md): voll bis knapp über den
     Block in Ruhelage, dann weich über --verlauf-aus auf 0 */
  --verlauf-voll:45%;
  --verlauf-aus:30%;
  /* Hochkant zusätzlich von oben, Auslauf bis in die volle Deckung von unten:
     Text steht im Fluss voll deckend auf jeder Höhe (nichts blendet aus); zusammen
     nirgends unter 0,50 (kalk 3,2 : 1), 4,5 : 1 in den oberen 23 % (review-e) */
  --verlauf-oben-voll:6%;
  --verlauf-oben-aus:52%;
  /* Absenken am Ende eines Filmraums, in B (data-senken, Werte unten); der
     Ruheraum danach zieht um diesen Anteil des Absenkwegs unter die Bühne:
     ganz (Umbau 27.09.2026, hochkant vorher .8) — das Absenken kostet keine
     Seitenlänge, und die erste Ruheraum-Zeile kommt mit seinem Beginn */
  --senken-weg:.35;
  --ueberlapp:1;
  /* Durchatmen im Ruheraum (E): Leerraum zwischen zwei Teilen; unter 600 px
     knapp (Umbau 27.09.2026: .25 B ließ Löcher von 180–300 px) */
  --durchatmen:calc(.09 * var(--buehne));

  --z-buehne:0; --z-karte:2; --z-kopf:40; --z-leiste:45; --z-lesen:60; --z-springen:100;
}

@media (min-width:600px){
  :root{ --kopf-h:60px; --durchatmen:calc(.25 * var(--buehne)); }
}
@media (min-width:834px){
  :root{ --raum-abschnitt:clamp(5rem, 2.6rem + 5.5vw, 9rem); }
}
@media (min-width:1000px){
  :root{
    --kopf-h:64px;
    --leiste-h:0px;
  }
}
/* Niedrige Fenster: die Blöcke (Schrift in rem und cqi) stehen im Verhältnis
   höher, also reicht die volle Deckung weiter (Rechnung bei den Tokens). Steht
   vor dem Block „Rechner quer“, der seinen eigenen Wert setzt. */
@media (max-height:700px){
  :root{ --verlauf-voll:52%; }
}
/* Rechner quer: Spalte 36 %, kürzere Strecken (Längenziel 8,0 Schirme), zwei
   Ellipsen je Kapitelseite als Verlauf (docs/gestaltung.md, „Kontrasthilfe“) */
@media (min-width:1000px) and (orientation:landscape) and (min-height:500px){
  :root{
    --kapitel-weg:.50;
    --film-frei:.10;
    --film-frei-ende:0;
    /* data-lage gilt nur hochkant; quer wechselt stattdessen die Spalte */
    --lage-mitte:.08;
    --satz:36%;
    --verlauf-ellipse:76% 100%;
    --verlauf-ellipse-oben:58% 100%;
    --verlauf-voll:62%;
    --verlauf-aus:38%;
  }
}
@media (min-width:1440px){
  :root{ --breite:84rem; }
}
@media (min-width:1920px){
  :root{ --breite:96rem; --rand:4.5rem; }
}
@media (max-height:700px){
  :root{ --block-anteil:.55; }
}


/* ---------------------------------------------------------------------------
   3. Grundlagen
   Kein scroll-behavior:smooth (glättet auch Skript-Sprünge doppelt) und kein
   overflow-x:hidden am Dokument (versteckt Überläufe vor den Messwerkzeugen).
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  color-scheme:dark;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* Keine falschen Schnitte: Imbue hat keine Kursive */
  font-synthesis:none;
  background:var(--nacht-tief);
  scroll-padding-top:var(--kopf-h);
  /* Fokus am unteren Rand bleibt über der Leiste samt Ring sichtbar */
  scroll-padding-block-end:var(--leiste-h);
}
body{
  margin:0;min-block-size:100svh;
  background:var(--nacht);color:var(--kalk);
  font-family:var(--schrift-text);font-weight:var(--gew-text);
  font-size:var(--gr-text);line-height:var(--zh-text);
  font-kerning:normal;font-variant-ligatures:common-ligatures;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
:where(h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol){margin:0}
:where(ul,ol)[role='list']{list-style:none;padding:0}
:where(img,picture,video,canvas,svg){display:block;max-inline-size:100%}
:where(img,video){block-size:auto}
:where(button,input,select,textarea){font:inherit;color:inherit}
:where(button){background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none !important}
::selection{background:var(--laterne);color:var(--nacht)}

:where(h1,h2,h3,h4){
  font-family:var(--schrift-anzeige);font-weight:var(--gew-anzeige);
  letter-spacing:var(--sperrung-anzeige);
  text-wrap:balance;overflow-wrap:break-word;
}
/* Betonung in Titeln über das Gewicht: Imbue hat keine Kursive */
:where(h1,h2,h3,h4) :where(em,i){font-style:normal;font-weight:700}
:where(h1){font-size:var(--gr-1);line-height:var(--zh-anzeige)}
:where(h2){font-size:var(--gr-2);line-height:var(--zh-titel)}
:where(h3){font-size:var(--gr-3);line-height:var(--zh-titel)}
:where(h4){font-size:var(--gr-lead);line-height:var(--zh-eng)}
:where(p,li,dd){text-wrap:pretty;overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:8 4 4}
:where(strong,b){font-weight:var(--gew-stark)}

/* Links im Text: Kalk mit Laternen-Unterstrich */
:where(a){color:inherit;text-decoration-line:underline;text-decoration-color:var(--laterne);
  text-decoration-thickness:1px;text-underline-offset:.22em}
:where(a):hover{text-decoration-thickness:2px}


/* ---------------------------------------------------------------------------
   4. Schrift-Rollen
   --------------------------------------------------------------------------- */
.lead{font-size:var(--gr-lead);line-height:1.5;color:var(--kalk)}
.fliess{font-size:var(--gr-text);line-height:var(--zh-text)}
.klein{font-size:var(--gr-klein);line-height:1.5}
.matt{color:var(--kalk-matt)}
/* Kicker: gesperrte Versalien in Hanken 600, Laternenlicht. Sparsam — höchstens
   einer je drei Abschnitte. */
.kicker{
  display:block;
  font-family:var(--schrift-text);font-weight:var(--gew-stark);
  font-size:var(--gr-kicker);line-height:1.3;
  letter-spacing:var(--sperrung-kicker);text-transform:uppercase;
  color:var(--laterne);
}
.textspalte{max-inline-size:var(--mass-text)}
.zahl{font-variant-numeric:lining-nums tabular-nums}
.offen{color:var(--offen)}


/* ---------------------------------------------------------------------------
   5. Layout-Primitive
   --------------------------------------------------------------------------- */
.huelle{inline-size:min(100% - 2 * var(--rand), var(--breite));margin-inline:auto}
.abschnitt{padding-block:var(--raum-abschnitt)}
.stapel > * + *{margin-block-start:var(--stapel-raum, var(--raum-4))}

/* Rundbogen: oben ein Halbkreis, unten gerade. Der übergroße Radius wird vom
   Browser anteilig gekürzt, bis er passt — das ergibt bei jedem Bild, das
   höchstens doppelt so breit wie hoch ist, genau den Halbkreis. */
.bogen{border-radius:999px 999px var(--radius-kante) var(--radius-kante);overflow:hidden}

/* Materialgrund eines Ruheraums (karte, anfahrt): <picture class="grund"> als
   Rasterzelle über den Zeilen des Inhalts, lazy im Markup (ein url() im Stil lüde
   sofort). Zählt nicht zur Höhe der Zeilen (contain:size), füllt sie nur aus.
   Ohne position, opacity, mask, z-index: kein Stapelkontext, der Grund liegt
   unter dem Text. Darüber ::after: Nachtblau, zur Mitte hin auf --grund-deckung,
   oben und unten wieder voll. Der Abschnitt setzt grid-row, margin (wie weit der
   Grund über den Inhalt hinausreicht), --grund-deckung, --grund-lage
   (object-position) und --grund-von/--grund-bis (wo die Deckung beginnt und endet).
   --grund-farbe = --nacht als feste Zahl statt color-mix(): ohne color-mix
   (Safari < 16.2, Chrome < 111, Firefox < 113) fiele sonst der ganze Verlauf
   weg und das Foto stünde voll hell hinter der Schrift. */
.grund{
  --grund-farbe:rgb(14 23 41 / var(--grund-deckung, .88));
  contain:size;
  display:grid;grid-template:minmax(0, 1fr) / minmax(0, 1fr);
  max-inline-size:none;
  pointer-events:none;
}
.grund > img,.grund::after{grid-area:1 / 1}
.grund > img{
  inline-size:100%;block-size:100%;min-block-size:0;
  object-fit:cover;object-position:var(--grund-lage, 50% 50%);
}
.grund::after{
  content:"";
  background:linear-gradient(to bottom,
    var(--nacht), var(--grund-farbe) var(--grund-von, 25%), var(--grund-farbe) var(--grund-bis, 75%), var(--nacht));
}

/* Filmraum (Lauf D, Vertrag 7; Bewegungsbuch A, D, E) ---------------------
   .filmraum > .buehne (klebt, randlos, Höhe B: Filmebenen, .verlauf, .senken)
   + section.kapitel … Keine Kästen, kein Rundbogen, kein filter. Nie overflow
   an .filmraum: ein Clip dort hebt das Kleben auf. */
.filmraum{position:relative}
/* Nach dem letzten Kapitel, Bühne klebt weiter: erst --film-frei-ende × B
   freier Film (A.3: der letzte Block zieht nach oben hinaus, der Film läuft
   weiter), dann data-senken × B Absenkweg (E). Der Kern senkt über genau diese
   letzten data-senken × B ab. Als ::after, nicht padding: sticky hält nur bis
   zum Inhaltsrand. Den Absenkweg gibt es nur mit Bewegung (unten, bei
   „Abdecken“); im Fluss — ohne Skript, „Bewegung reduzieren“, Druck — senkt
   nichts ab und kein Ruheraum zieht darüber, dort bliebe er stehendes Standbild
   ohne Text: nur der freie Film. */
.filmraum::after{content:"";display:block;block-size:calc(var(--film-frei-ende) * var(--buehne))}
/* Absenkweg = data-senken am Filmraum (dort setzt ihn der Rahmen), wie der
   Kern ihn liest: fehlt das Attribut, kein Absenken; ohne Zahl .35. Andere
   Zahlen brauchen eine eigene Zeile hier. */
.filmraum:not([data-senken]){--senken-weg:0}
.filmraum[data-senken="0.25"]{--senken-weg:.25}
.filmraum[data-senken="0.30"]{--senken-weg:.30}
.filmraum[data-senken="0.40"]{--senken-weg:.40}
.filmraum[data-senken="0.45"]{--senken-weg:.45}
.filmraum[data-senken="0.50"]{--senken-weg:.50}
.filmraum[data-senken="0.60"]{--senken-weg:.60}
.filmraum[data-senken="0"]{--senken-weg:0}
/* Der erste Filmraum beginnt oben am Fenster, unter der Kopfzeile */
@media (min-height:500px){
  main > .filmraum:first-child{margin-block-start:calc(-1 * var(--kopf-h))}
}
/* Kein leerer Nachtblau-Schirm: der Ruheraum danach zieht um --ueberlapp ×
   Absenkweg über die klebende Bühne und deckt sie als nachtblaues Blatt ab
   („Abdecken“, Umbau 27.09.2026; bis dahin war sein Grund mit Motor
   durchsichtig). Kein z-index am Ruheraum (#karte darf keinen Stapelkontext
   bilden, karte.css): er liegt über der Bühne, weil er im DOM später kommt. */
@media screen and (min-height:500px) and (prefers-reduced-motion:no-preference){
  html.js .filmraum::after{block-size:calc((var(--film-frei-ende) + var(--senken-weg)) * var(--buehne))}
  html.js .filmraum[data-senken]:not([data-senken="0"]){margin-block-end:calc(-1 * var(--ueberlapp) * var(--senken-weg) * var(--buehne))}
}
/* Blattkante: weiche Oberkante des Ruheraums nach einem Filmraum, 0,14 B von
   durchsichtig auf Nachtblau direkt über dem Abschnitt. Ruht, fängt keine
   Klicks; unter den Kapiteln (z-index 2) der Filmräume, über der Bühne. */
@media (min-height:500px){
  .filmraum + :is(#karte, #bilder)::before{
    content:"";position:absolute;inset-inline:0;inset-block-end:100%;
    block-size:calc(.14 * var(--buehne));pointer-events:none;
    background:linear-gradient(rgb(14 23 41 / 0), var(--nacht));
  }
}
/* Vor dem Aufhellen legt sich die Bühne über den leeren Unterrand von #karte
   (dort noch Nachtblau wie #karte): das leere Band wird um --raum-8 kürzer. */
main > #karte + .filmraum[data-heben]{margin-block-start:calc(-1 * var(--raum-8))}
/* Weiche Oberkante der hereinkommenden Bühne II (hochkant; quer schrumpft sie
   scroll-getrieben, unten „Weiche Oberkante beim Aufhellen“): ruhender Verlauf
   Nachtblau → durchsichtig über 0,25 B am Kopf des Filmraums. Er scrollt mit und
   ist fort, sobald die Bühne klebt; über der Bühne, unter den Kapiteln. */
@media screen and (min-height:500px) and (max-width:999.98px),
       screen and (min-height:500px) and (orientation:portrait){
  .filmraum[data-filmraum="II"]::before{
    content:"";position:absolute;inset-inline:0;inset-block-start:0;z-index:1;
    block-size:calc(.25 * var(--buehne));pointer-events:none;
    background:linear-gradient(var(--nacht), rgb(14 23 41 / 0));
  }
}

.buehne{
  position:sticky;top:0;z-index:var(--z-buehne);
  block-size:var(--buehne);overflow:hidden;
  /* = Ruheraum: vor dem ersten Bild keine Kante */
  background:var(--nacht);
}
/* Filmebenen liegen deckungsgleich übereinander; ohne Motor zeigt die Bühne
   die erste, mit Motor die Ebenen mit motor-ebene-an (Pflicht-CSS, Abschnitt 7). */

/* Kontrastverlauf (D.4), ruhend: --schleier mit --schleier-deckung (über Weiß
   gerechnet) bis --verlauf-voll, dann als S-Kurve (smoothstep) auf 0 — keine
   Kante. Hochkant von unten und von oben; quer ::before links, ::after
   rechts, je aus der unteren und der oberen Ecke (Rechner quer unten). */
.verlauf{position:absolute;inset:0;pointer-events:none}
.verlauf::before,.verlauf::after{
  content:"";position:absolute;inset:0;
  --v:var(--verlauf-voll);--a:var(--verlauf-aus);
  --verlauf-stopps:
    rgb(var(--schleier-rgb) / var(--schleier-deckung)) 0,
    rgb(var(--schleier-rgb) / var(--schleier-deckung)) var(--v),
    rgb(var(--schleier-rgb) / calc(var(--schleier-deckung) * .957)) calc(var(--v) + var(--a) * .125),
    rgb(var(--schleier-rgb) / calc(var(--schleier-deckung) * .844)) calc(var(--v) + var(--a) * .25),
    rgb(var(--schleier-rgb) / calc(var(--schleier-deckung) * .684)) calc(var(--v) + var(--a) * .375),
    rgb(var(--schleier-rgb) / calc(var(--schleier-deckung) * .5)) calc(var(--v) + var(--a) * .5),
    rgb(var(--schleier-rgb) / calc(var(--schleier-deckung) * .316)) calc(var(--v) + var(--a) * .625),
    rgb(var(--schleier-rgb) / calc(var(--schleier-deckung) * .156)) calc(var(--v) + var(--a) * .75),
    rgb(var(--schleier-rgb) / calc(var(--schleier-deckung) * .043)) calc(var(--v) + var(--a) * .875),
    rgb(var(--schleier-rgb) / 0) calc(var(--v) + var(--a));
  background:linear-gradient(var(--verlauf-richtung, to top), var(--verlauf-stopps));
}
/* Hochkant ::after von oben; quer wird es die rechte Seite */
.verlauf::after{--verlauf-richtung:to bottom;--v:var(--verlauf-oben-voll);--a:var(--verlauf-oben-aus)}

/* Nachtblau-Ebene .senken (E): Absenken 0 → 1, Aufhellen 1 → 0, ohne Motor 0
   (A.5) — Stil im Pflicht-CSS, Abschnitt 7. */

/* Kapitel: EIN Block unten. Erstes Kapitel B hoch (Block unten, sobald die
   Bühne klebt), jedes weitere ≥ --kapitel-weg × B. Zum vorigen Block bleiben
   ≥ --film-frei × B Film; ein größerer Block verlängert das Kapitel.
   --lage-davor: Lage des vorigen Kapitels (mitte = schon mehr Film darunter). */
.kapitel{
  --lage:var(--lage-unten);
  --lage-davor:var(--lage-unten);
  position:relative;z-index:var(--z-karte);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  min-block-size:calc(var(--kapitel-weg) * var(--buehne));
  padding-block:max(0px, calc((var(--film-frei) - var(--lage-davor)) * var(--buehne))) calc(var(--lage) * var(--buehne));
  padding-inline:var(--aussen);
  color:var(--kalk);
  container-type:inline-size;
}
.kapitel[data-lage="mitte"]{--lage:var(--lage-mitte)}
.kapitel[data-lage="mitte"] + .kapitel{--lage-davor:var(--lage-mitte)}
.buehne + .kapitel{margin-block-start:calc(-1 * var(--buehne));min-block-size:var(--buehne);padding-block-start:0}
.kapitel > *,.halt > *{max-inline-size:100%}
/* Halt (Lauf G, docs/motor.md „Halt“): der Block steht in .halt, B hoch, klebt 0,5 B vor bis 1,25 B nach seiner Ruhelage; Schienen längenneutral. Sonst Fluss */
.halt{display:contents}
@media screen and (min-height:500px) and (prefers-reduced-motion:no-preference){
  html.js:is(.motor-laedt,.motor-halt) .filmraum > .kapitel{
    display:block;min-block-size:0;padding-block:0;pointer-events:none;
    block-size:calc((1 + var(--halt-vor) + var(--halt-nach)) * var(--buehne));
    margin-block-start:calc((var(--kapitel-weg) - 1 - var(--halt-vor) - var(--halt-nach)) * var(--buehne));
    scroll-margin-top:calc(-1 * ((var(--halt-vor) + .05) * var(--buehne) + var(--kopf-h)));
  }
  html.js:is(.motor-laedt,.motor-halt) .filmraum > .buehne + .kapitel{
    margin-block-start:calc(-1 * (1 + var(--halt-vor)) * var(--buehne));
    scroll-margin-top:calc(-1 * (var(--halt-vor) * var(--buehne) + var(--kopf-h)));
  }
  html.js:is(.motor-laedt,.motor-halt) .filmraum > .kapitel:last-of-type{
    block-size:calc((1 + var(--halt-vor) + var(--film-frei-ende) + var(--senken-weg)) * var(--buehne));
    margin-block-end:calc(-1 * (var(--film-frei-ende) + var(--senken-weg)) * var(--buehne));
  }
  html.js:is(.motor-laedt,.motor-halt) #blick{--kapitel-weg:1.06}
  html.js:is(.motor-laedt,.motor-halt) .filmraum > .kapitel > .halt{
    position:sticky;top:0;block-size:var(--buehne);
    display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
    padding-block-end:calc(var(--lage) * var(--buehne));
  }
  html.js:is(.motor-laedt,.motor-halt) #abend > .halt{isolation:isolate}
}
@media screen and (min-width:1000px) and (orientation:landscape) and (min-height:500px) and (prefers-reduced-motion:no-preference){
  html.js:is(.motor-laedt,.motor-halt) #blick{--kapitel-weg:.78}
}
/* Halt hochkant (Umbau 27.09.2026): alles außer „Rechner quer“ — die Liste
   (schmal oder hochformatig) ist genau ihr Gegenstück, ohne „not“ im Media-Teil.
   #abend: längerer Weg, der Glasfilm davor läuft langsamer (Spanne glas =
   (Weg − Naht − 0,05) × B). Schleier nur hinter dem Text: Titel stehen hier nur
   in Ruhelage, die obere Hälfte des Films bleibt frei; der Kopf hat seinen
   eigenen Verlauf (kopf.css). Deckung .76 hält kalk, kalk-matt und Laterne über
   reinem Weiß ≥ 4,5 : 1 (docs/gestaltung.md, „Kontrasthilfe“). Fluss, ohne JS,
   „Bewegung reduzieren“, unter 500 px Höhe und quer: voller Schleier wie oben. */
@media screen and (min-height:500px) and (max-width:999.98px) and (prefers-reduced-motion:no-preference),
       screen and (min-height:500px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
  html.js:is(.motor-laedt,.motor-halt) #abend{--kapitel-weg:1.30}
  html.motor-halt{
    --schleier-deckung:.76;
    --verlauf-voll:48%;
    --verlauf-aus:18%;
    --verlauf-oben-voll:0%;
    --verlauf-oben-aus:14%;
  }
  /* glas steht am tiefsten (Oberkante 34 % B): solange sein Titel steht, sinkt
     der untere Schleier um 0,18 B, Weingarten und Glas stehen frei. Nur transform;
     er sinkt langsam und steigt schnell, bevor die Dachzeile von abend kommt. */
  html.motor-halt .filmraum > .buehne > .verlauf::before{transition:transform .3s var(--ease-aus)}
  html.motor-halt .filmraum:has(> #glas.halt-an) > .buehne > .verlauf::before{
    transform:translateY(18%);transition-duration:.8s;transition-timing-function:var(--ease-tuer);
  }
  /* abend steht höher (Umbau 27.09.2026): die Oberkante der Balkonbrüstung aus Film 2
     schnitt als dunkler Kasten zwischen Kopf- und Unterzeile; so steht der ganze Text
     darüber und die Dachzeile noch unter der Ruine. Gemessen über das Fenster (die
     Kamerafahrt hebt die Kante): 390×844 bei 13–17 % B, darüber steht die Unterzeile
     jetzt bei 18 % B. Breitere Fenster als 1 : 2 (375×667, 414×736, Tablet) schneidet
     die Bühne oben und unten ab, die Kante liegt tiefer (375×667: 9–13 % B) und die
     Ruine dichter über dem Block: dort nur 0,065 B; hochformatige Handys 0,10 B (unten). */
  html.js:is(.motor-laedt,.motor-halt) #abend{--lage:calc(var(--lage-unten) + .065)}
  /* Zusatzschleier im Rahmen von blick und abend: ruhend hinter dem Block, über die
     ganze Breite der Bühne; er kommt und geht mit der Blende des Rahmens (45-halt.js),
     also ohne eigene Animation. Stufen wie .verlauf (S-Kurve), --d Deckung, voll bis
     --v über dem Bühnenboden, Auslauf über --a. blick: Parkplatz, Asphalt und
     Bodenmarkierung unter dem Titel treten zurück — zusammen mit dem Schleier
     1 − 0,24 · 0,5 = 0,88 bis 42 % B, darüber läuft er bis 60 % aus, Ruine und Ort
     bleiben frei. abend: der gehobene Block reicht über die volle Deckung des Schleiers
     hinaus; die Ebene hält zusammen mit ihm ≥ 0,76 bis zur Oberkante der Dachzeile und
     läuft kurz aus, die Ruine knapp darüber bleibt hell (Rechnung docs/gestaltung.md,
     „Kontrasthilfe“). */
  html.motor-halt :is(#blick,#abend) > .halt::before{
    --d:.5;--v:42%;--a:18%;
    content:"";position:absolute;inset-block:0;inset-inline:calc(-1 * var(--aussen));z-index:-1;
    pointer-events:none;
    background:linear-gradient(to top,
      rgb(var(--schleier-rgb) / var(--d)) var(--v),
      rgb(var(--schleier-rgb) / calc(var(--d) * .957)) calc(var(--v) + var(--a) * .125),
      rgb(var(--schleier-rgb) / calc(var(--d) * .844)) calc(var(--v) + var(--a) * .25),
      rgb(var(--schleier-rgb) / calc(var(--d) * .684)) calc(var(--v) + var(--a) * .375),
      rgb(var(--schleier-rgb) / calc(var(--d) * .5)) calc(var(--v) + var(--a) * .5),
      rgb(var(--schleier-rgb) / calc(var(--d) * .316)) calc(var(--v) + var(--a) * .625),
      rgb(var(--schleier-rgb) / calc(var(--d) * .156)) calc(var(--v) + var(--a) * .75),
      rgb(var(--schleier-rgb) / calc(var(--d) * .043)) calc(var(--v) + var(--a) * .875),
      rgb(var(--schleier-rgb) / 0) calc(var(--v) + var(--a)));
  }
  html.motor-halt #abend > .halt::before{--v:58%;--a:6%}
}
@media screen and (min-height:500px) and (max-aspect-ratio:1/2) and (prefers-reduced-motion:no-preference){
  html.js:is(.motor-laedt,.motor-halt) #abend{--lage:calc(var(--lage-unten) + .10)}
  html.motor-halt #abend > .halt::before{--v:55%}
}
/* Unter 700 px Höhe stehen die Blöcke höher (blick 375×667: 58 % B), voll bis 54 %.
   Freier Film nach dem letzten Kapitel .25 statt .35: 375×667 bleibt im Längenziel
   (11,0 Schirme, docs/gestaltung.md „Strecke in B“) */
@media screen and (min-height:500px) and (max-height:700px) and (max-width:999.98px) and (prefers-reduced-motion:no-preference),
       screen and (min-height:500px) and (max-height:700px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
  html.js:is(.motor-laedt,.motor-halt){--film-frei-ende:.25}
  html.motor-halt{--verlauf-voll:54%}
}
/* Satz im Block (D.2), niedrige Spezifität: Abschnitts-CSS übersteuert */
.kapitel :where([data-einblenden]) + :where(*){margin-block-start:var(--abstand-unter)}
.kapitel :where([data-einblenden="kicker"]) + :where(*){margin-block-start:var(--abstand-dach)}
.kapitel :where([data-einblenden="unterzeile"]) + :where(*){margin-block-start:var(--abstand-knopf)}

/* Dachzeile: Hanken 600, gesperrte Versalien in --laterne-kern. --laterne hielt
   hochkant im Auslauf des Schleiers keine 4,5 : 1 (glas 3,23 : 1 gerendert);
   Rechnung docs/gestaltung.md, „Kontraste“. */
.kapitel :where([data-einblenden="kicker"], .kicker){
  display:block;
  font-family:var(--schrift-text);font-weight:var(--gew-stark);
  font-size:var(--gr-kicker);line-height:1.3;
  letter-spacing:var(--sperrung-kicker);text-transform:uppercase;
  color:var(--laterne-kern);overflow-wrap:break-word;
}
/* Kopfzeile: --kopf-gr, Imbue 400 — EINE Schrift und EIN Grad für alle
   Filmtitel, 2–4 Wörter, höchstens zwei Zeilen. Keine Silbentrennung (manual),
   nur ein zu langes Wort bricht. Kein Übergang, keine Zerlegung: der Titel
   erscheint als Ganzes mit seinem Rahmen (.halt). */
.kapitel :where(h1, h2, [data-einblenden="gleiten"]){
  font-family:var(--schrift-anzeige);font-weight:var(--gew-anzeige);
  font-size:var(--kopf-gr);
  line-height:var(--zh-kopf);letter-spacing:var(--sperrung-anzeige);
  color:var(--kalk);text-wrap:balance;hyphens:manual;
}
.kapitel :where(h1){font-size:var(--kopf-gr-h1)}
/* Unterzeile: EINE Zeile Fließtext-Stufe (≤ 70 Zeichen; am Rechner passen
   rund 50 in die Spalte, hochkant rund 38 — länger bricht sie ausgeglichen
   in zwei). Keine Silbentrennung im Block. */
.kapitel :where([data-einblenden="unterzeile"]){
  font-size:var(--gr-text);line-height:1.45;color:var(--kalk);
  text-wrap:balance;hyphens:manual;
}
/* Fremdangabe über Film: in --offen hinauslaufend nur 1,45 : 1 (390×844). Kalk,
   gekennzeichnet durch den Wortlaut und eine punktierte Linie in --offen */
.kapitel .offen{color:var(--kalk);text-decoration:underline dotted var(--offen) 2px;text-underline-offset:.3em}
/* Riese und Zahl: Grundschnitt (Imbue fein), Rest im Abschnitt */
.kapitel :where([data-einblenden="riese"]){
  font-family:var(--schrift-anzeige);font-weight:var(--gew-riese);
  font-size:min(var(--gr-riese), 36cqi);line-height:var(--zh-riese);letter-spacing:-.01em;
}
.kapitel :where([data-einblenden="zahl"]){font-variant-numeric:lining-nums tabular-nums}

/* Film-Medien (<!--FILM:name-->): Poster, Video, Endbild übereinander, cover
   (Rechner Bandfassung 16:9, Handy 9:16). Sichtbarkeit: Pflicht-CSS. */
:where([data-film-bild]){position:relative;inline-size:100%;block-size:100%;overflow:hidden;background:var(--nacht)}
[data-film-bild] > :is([data-film-poster],[data-film-video],[data-film-ende]){position:absolute;inset:0;inline-size:100%;block-size:100%}
[data-film-bild] :is(img,video){inline-size:100%;block-size:100%;object-fit:cover}

/* Ruheraum (A.1): Abschnitte direkt in <main>, Fluss auf Nachtblau. Abstände
   setzt der Abschnitt (--durchatmen). */
:where(main > section[data-abschnitt]){position:relative;background:var(--nacht)}

/* Rechner quer: Spalte --satz mit Außenrand, rechts gespiegelt. Rückfall 9:16
   (Z.2): Ebene mit data-film-hochkant steht 9:16 in der Mitte auf Nachtblau. */
@media (min-width:1000px) and (orientation:landscape) and (min-height:500px){
  .kapitel{padding-inline:var(--aussen) calc(100% - var(--aussen) - var(--satz))}
  .kapitel[data-seite="rechts"]{padding-inline:calc(100% - var(--aussen) - var(--satz)) var(--aussen)}
  /* „1. ja ruhiger“ (Nutzer, 19.09.2026) und G19: die Kapitel, mit denen buch und
     abend beginnen, sind länger — die Filme laufen langsamer, die Kopfzeile davor
     ist fort, bevor ihre kommt. karte-auftakt mehr wegen 1366×768 */
  #karte-auftakt{--kapitel-weg:.77}
  #abend{--kapitel-weg:.75}
  /* Auftakt höher, ohne Länge (G19: sonst noch im Bild, wenn haus kommt) */
  main > .filmraum:first-child > .buehne + .kapitel{--lage:.18}
  .verlauf::before{background:
    radial-gradient(var(--verlauf-ellipse-oben) at 0 0, var(--verlauf-stopps)),
    radial-gradient(var(--verlauf-ellipse) at 0 100%, var(--verlauf-stopps))}
  .verlauf::after{
    --v:var(--verlauf-voll);--a:var(--verlauf-aus);
    background:
      radial-gradient(var(--verlauf-ellipse-oben) at 100% 0, var(--verlauf-stopps)),
      radial-gradient(var(--verlauf-ellipse) at 100% 100%, var(--verlauf-stopps));
  }
  .buehne > [data-film-bild][data-film-hochkant] > :is([data-film-poster],[data-film-video],[data-film-ende]){
    inset-inline:0;margin-inline:auto;inline-size:calc(var(--buehne) * 9 / 16);
    /* weiche Seitenkanten statt Bildrand */
    mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  }
}
/* Verlaufsseite quer: eine Seite im Filmraum → deren Verlauf, beide → der
   scroll-getriebene Wechsel darunter. Ohne animation-timeline (Firefox) stehen
   in einem gemischten Filmraum beide Seiten (--verlauf-seite fehlt): dunkler,
   aber lesbar. */
@media (min-width:1000px) and (orientation:landscape) and (min-height:500px){
  .verlauf::before{opacity:calc(1 - var(--verlauf-seite, 0))}
  .verlauf::after{opacity:var(--verlauf-seite, 1)}
  .filmraum:not(:has(> .kapitel[data-seite="rechts"])) > .buehne > .verlauf{--verlauf-seite:0}
  .filmraum:not(:has(> .kapitel:not([data-seite="rechts"]))) > .buehne > .verlauf{--verlauf-seite:1}
}
/* Seitenwechsel des Verlaufs quer im Fluss (ohne Motor-Halt), scroll-getrieben:
   links scrollt ab der Ruhelage des letzten linken Blocks mit und geht, rechts
   kommt mit dem ersten rechten Kapitel (docs/gestaltung.md). Im Halt-Modus setzt
   der Motor data-seite-jetzt (unten). Reduziert: harte Wechsel (9). */
@supports (animation-timeline:view()){
  @media (min-width:1000px) and (orientation:landscape) and (min-height:500px){
    .filmraum{
      timeline-scope:--seitenwechsel, --rechts-text;
      --links-weg:calc((.92 - var(--lage-unten)) * var(--buehne));
      --verlauf-nachlauf:calc(.4 * var(--buehne));
    }
    .filmraum > .kapitel:not([data-seite="rechts"]) + .kapitel[data-seite="rechts"]{view-timeline:--seitenwechsel block}
    .filmraum > .kapitel:not([data-seite="rechts"]) + .kapitel[data-seite="rechts"] > .halt > :nth-child(1 of :not([data-einblenden="riese"])){view-timeline:--rechts-text block}
    .filmraum:not([data-seite-jetzt]):has(> .kapitel:not([data-seite="rechts"]) + .kapitel[data-seite="rechts"]) > .buehne > .verlauf::before{
      inset:0 0 calc(-1 * var(--verlauf-nachlauf));
      background:
        radial-gradient(58% var(--buehne) at 0 0, var(--verlauf-stopps)),
        radial-gradient(76% var(--buehne) at 0 var(--buehne), var(--verlauf-stopps));
      mask-image:linear-gradient(#000 var(--buehne), transparent);
      animation:verlauf-hoch linear both, verlauf-weg linear both;
      animation-timeline:--seitenwechsel, --seitenwechsel;
      animation-range:cover 0% cover var(--buehne), cover var(--links-weg) cover calc(var(--links-weg) + .12 * var(--buehne));
    }
    .filmraum:not([data-seite-jetzt]):has(> .kapitel:not([data-seite="rechts"]) + .kapitel[data-seite="rechts"]) > .buehne > .verlauf::after{
      inset:calc(-1 * var(--verlauf-nachlauf)) 0 0;
      background:
        radial-gradient(58% var(--buehne) at 100% var(--verlauf-nachlauf), var(--verlauf-stopps)),
        radial-gradient(76% var(--buehne) at 100% 100%, var(--verlauf-stopps));
      mask-image:linear-gradient(transparent, #000 var(--verlauf-nachlauf));
      animation:verlauf-herauf linear both, verlauf-her linear both;
      animation-timeline:--seitenwechsel, --rechts-text;
      animation-range:entry calc(100% - var(--buehne)) entry 100%, cover calc(-.2 * var(--buehne)) cover 0%;
    }
  }
}
@keyframes verlauf-hoch{from{transform:none}to{transform:translateY(calc(-1 * var(--buehne)))}}
@keyframes verlauf-herauf{from{transform:translateY(var(--buehne))}to{transform:none}}
@keyframes verlauf-weg{from{opacity:1}to{opacity:0}}
@keyframes verlauf-her{from{opacity:0}to{opacity:1}}
/* Halt-Modus: die Seite des stehenden Titels (45-halt, data-seite-jetzt; beide während der Übergabe) */
@media screen and (min-width:1000px) and (orientation:landscape) and (min-height:500px) and (prefers-reduced-motion:no-preference){
  .filmraum[data-seite-jetzt] > .buehne > .verlauf::before,
  .filmraum[data-seite-jetzt] > .buehne > .verlauf::after{transition:opacity .3s var(--ease-tuer)}
  .filmraum[data-seite-jetzt="links"] > .buehne > .verlauf{--verlauf-seite:0}
  .filmraum[data-seite-jetzt="rechts"] > .buehne > .verlauf{--verlauf-seite:1}
  .filmraum[data-seite-jetzt="beide"] > .buehne > .verlauf::before,
  .filmraum[data-seite-jetzt="beide"] > .buehne > .verlauf::after{opacity:1}
}
/* Weiche Oberkante beim Aufhellen (quer): Nachtblau-Verlauf über dem oberen
   Viertel der hereinkommenden Bühne, schrumpft scroll-getrieben weg (docs/motor.md). */
@supports (animation-timeline:view()){
  @media screen and (min-width:1000px) and (orientation:landscape) and (min-height:500px) and (prefers-reduced-motion:no-preference){
    html.motor .filmraum[data-heben]{view-timeline:--aufhellen block}
    html.motor .filmraum[data-heben] > .buehne::after{
      content:"";position:absolute;inset:0 0 auto;block-size:calc(.25 * var(--buehne));
      background:linear-gradient(var(--nacht), transparent);pointer-events:none;transform-origin:top;
      animation:kante-weg linear both;animation-timeline:--aufhellen;animation-range:entry 0% entry 100%;
    }
  }
}
@keyframes kante-weg{0%,60%{transform:scaleY(1)}to{transform:scaleY(0)}}

/* Niedrige Schirme: nichts klebt, Kapitel im Fluss unter dem Bild */
@media (max-height:499.98px){
  .filmraum::after{content:none}
  .buehne{position:relative;top:auto;block-size:auto;aspect-ratio:16 / 9;max-block-size:90svh;margin-inline:auto}
  .verlauf{display:none}
  .kapitel,.buehne + .kapitel{
    margin-block-start:0;min-block-size:0;justify-content:flex-start;
    padding-block:var(--raum-5) 0;
    --buehne:calc(100svh - var(--kopf-h));
  }
  .kapitel:last-of-type{padding-block-end:var(--raum-6)}
}


/* ---------------------------------------------------------------------------
   6. Bedienelemente
   Jede Tippfläche ≥ 48 px. Zwei Grundformen, keine Pille:
   .knopf-kalk   gekalkte Fläche, Nachtblau-Schrift, Laternenschein bei Zeiger/Fokus
   .knopf-strich Schrift mit Laternen-Unterstrich, der beim Zeigen ganz ausläuft
   .knopf-rand   ruhiger Nebenknopf mit Bedienrand (≥3:1)
   --------------------------------------------------------------------------- */
.knopf{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--raum-3);
  min-block-size:48px;min-inline-size:48px;padding:0 var(--raum-5);
  border:0;border-radius:var(--radius-kante);background:none;color:inherit;
  font-family:var(--schrift-text);font-weight:var(--gew-stark);
  font-size:var(--gr-text);line-height:1.15;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;
  transition:scale var(--dauer-tipp) var(--ease-aus);
}
/* Drücken (Bewegungsbuch F.3): der Knopf gibt nach; dazu am Finger, wo es kein
   Zeigen gibt, eine Rückmeldung je Grundform (Umbau 27.09.2026). Bewegt werden
   nur Deckkraft und transform; die Randfarbe springt. */
.knopf:active{scale:.98}
.knopf-kalk{background:var(--kalk);color:var(--nacht)}
.knopf-kalk::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:var(--glow-flaeche);opacity:0;
  transition:opacity var(--dauer-mittel) var(--ease-aus);
}
.knopf-kalk:is(:hover,:focus-visible)::before{opacity:1}
/* Laternenschein sofort voll, klingt nach dem Loslassen in --dauer-mittel aus */
.knopf-kalk:active::before{opacity:1;transition-duration:0s}
.knopf-strich{padding-inline:0;color:var(--kalk)}
.knopf-strich::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:9px;block-size:2px;
  background:var(--laterne);transform-origin:left center;transform:scaleX(.3);
  transition:transform var(--dauer-mittel) var(--ease-aus);
}
.knopf-strich:is(:hover,:focus-visible)::after{transform:scaleX(1)}
.knopf-strich:active::after{transform:scaleX(1);transition-duration:120ms}
.knopf-rand{border:1px solid var(--linie-knopf);color:var(--kalk)}
.knopf-rand:hover{border-color:var(--kalk)}
.knopf-rand:active{border-color:var(--laterne)}

/* Fokus: Laternenring mit dunklem Hof — hält über hellem Himmel wie über Nacht */
:focus-visible{
  outline:3px solid var(--laterne);outline-offset:3px;
  box-shadow:0 0 0 9px var(--nacht-tief);
}
.knopf-strich:focus-visible{outline-offset:4px}

/* Sprung-Link: erstes fokussierbares Element, sichtbar nur mit Fokus */
.springen{
  position:fixed;inset-inline-start:var(--rand);inset-block-start:var(--raum-3);
  z-index:var(--z-springen);
  padding:var(--raum-3) var(--raum-5);min-block-size:48px;
  background:var(--kalk);color:var(--nacht);font-weight:var(--gew-stark);
  text-decoration:none;border-radius:var(--radius-kante);
  transform:translateY(calc(-100% - 2rem));
}
.springen:focus-visible,.springen:focus{transform:none}

/* Nur für Vorleser (sichtbar im DOM, nicht auf dem Schirm) */
.nurlesbar{
  position:absolute !important;inline-size:1px;block-size:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Den Hinweis „Abschnitt folgt“ gestaltet nur der Gerüst-Bau (GERUEST_CSS in
   bauen.py); im regulären Bau kommt er nicht vor. */


/* ---------------------------------------------------------------------------
   7. Motor
   Der Motor setzt Klassen und Ebenen (docs/motor.md), das Aussehen steht hier.
   Alles ist additiv: ohne Skript gilt keine Motor-Klasse, Text und Bilder
   stehen. Einzige Ausnahme sind die Rahmen .halt der Filmkapitel (dazu Marke
   und Status in kopf.css) unter html.motor-laedt, höchstens 2,5 s (Zeitgeber
   im Kopf-Schnipsel).
   --------------------------------------------------------------------------- */

/* motor-pflicht-css:anfang — wortgleich aus docs/motor.md, Abschnitt
   „Pflicht-CSS für basis.css“ (zwischen den Marken motor-pflicht-css:anfang
   und :ende). Nur dort ändern; angepasst wird über die Variablen
   --motor-glow-nah, --motor-glow-weit (Tokens oben). */
/* Motor-Pflicht-CSS (docs/motor.md) */

/* Glow: Schein einmal gemalt, bewegt wird nur opacity der Ebene */
[data-glow]{position:relative;isolation:isolate}
.motor-glow{position:absolute;inset:0;z-index:-1;box-sizing:border-box;padding:inherit;
  pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.6;transition:opacity 1.4s ease}
.motor-glow--schrift{color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:0 0 .28em var(--motor-glow-nah,rgba(255,206,120,.7)),0 0 .9em var(--motor-glow-weit,rgba(232,150,60,.45))}
.motor-glow--licht{inset:-35%;padding:0;
  background:radial-gradient(closest-side,var(--motor-glow-nah,rgba(255,206,120,.4)),transparent)}
.motor-glow--aus{opacity:0}
.motor-glow--scroll{transition:none}
.motor-glow--atmen{animation:motor-atmen 6s ease-in-out infinite alternate}
.motor-glow--pause{animation-play-state:paused}
@keyframes motor-atmen{from{opacity:.3}to{opacity:.9}}

/* Filmraum: Filmebenen gestapelt in der Bühne. Ohne Motor steht nur die erste;
   läuft er, trägt die Bühne motor-buehne und jede sichtbare Ebene motor-ebene-an
   (Deckkraft und transform schreibt er inline). Reihenfolge der drei Regeln halten */
.buehne > [data-film-bild]{position:absolute;inset:0}
.buehne > [data-film-bild] ~ [data-film-bild],.motor-buehne > [data-film-bild]{visibility:hidden}
.motor-buehne > [data-film-bild].motor-ebene-an{visibility:visible}
/* Senken/Heben: Nachtblau über allen Ebenen, der Motor schreibt nur opacity */
.buehne > .senken{position:absolute;inset:0;background:var(--nacht,#0e1729);opacity:0;pointer-events:none}

/* Film: Video erst sichtbar, wenn es gemalt hat; Endbild nur mit Skript */
[data-film-video]{opacity:0}
.motor-film-video [data-film-video]{opacity:1}
[data-film-ende]{display:none}
html.js [data-film-ende]{display:block;opacity:0}
.motor-film-video [data-film-ende]{display:none}

@media (prefers-reduced-motion: reduce){
  .buehne > .senken{opacity:0!important}
  .motor-glow{transition:none;animation:none}
  html.js [data-film-ende]{display:none}
}
@media print{
  .buehne > .senken{display:none}
  .motor-glow{display:none}
}

/* Halt: Filmkapitel stehen in .halt; mit Motor ist nur der Rahmen des zuständigen
   Kapitels (.halt-an) zu sehen und zu bedienen. Das ist der einzige Wartezustand: bis
   zum Motorstart (Kopf-Schnipsel, höchstens 2,5 s) warten alle Rahmen, außer mit
   Tastaturfokus darin; dann erscheint jeder Titel, auch der erste, mit derselben einen
   Animation am Rahmen (45-halt). Die Riesenschrift steht darin mit fester Deckkraft. */
@media screen and (min-height:500px) and (prefers-reduced-motion:no-preference){
  html.js.motor-laedt .filmraum > .kapitel > .halt:not(:focus-within){opacity:0}
  html.motor-halt .filmraum > .kapitel:not(.halt-an) > .halt{opacity:0}
  html.js.motor-laedt .filmraum > .kapitel > .halt:focus-within > *,
  html.motor-halt .filmraum > .kapitel.halt-an > .halt > *{pointer-events:auto}
  html.js:is(.motor-laedt,.motor-halt) .filmraum > .kapitel > .halt > [data-einblenden="riese"]{opacity:var(--riese-halt,.4)}
}
/* motor-pflicht-css:ende */


/* Deko in einer Einblendung (aria-hidden: Nummer der Dachzeile, Buchdeckel,
   Lichthof) ist nicht markierbar (Bewegungsbuch D.5) */
[data-einblenden] [aria-hidden="true"]{-webkit-user-select:none;user-select:none}

/* Lichthof: eigene, leisere Farbe. Die Variable steht an der Ebene selbst,
   deren Verlauf sie liest — der Schriftschein bleibt unberührt. */
.motor-glow--licht{--motor-glow-nah:var(--glow-licht)}

/* data-parallax / data-kamerafahrt: der Motor schreibt translate und scale
   inline (will-change nur in der Nähe, setzt er selbst), die Überblendung
   transform. Kein transition darauf. Rahmen schneidet die Ränder. */
.tiefe-rahmen{overflow:clip}
[data-kamerafahrt]{transform-origin:50% 42%}


/* ---------------------------------------------------------------------------
   8. Rechtsseiten — Impressum, Datenschutz, 404 (bauen.py übernimmt <main>
   aus der bisherigen Quelle: main.rechtsseite > .huelle.eng).
   --------------------------------------------------------------------------- */
.rechtsseite{padding-block:var(--raum-8) var(--raum-abschnitt)}
.rechtsseite .eng{inline-size:min(100% - 2 * var(--rand), var(--mass-text))}
.rechtsseite h1{margin-block-end:var(--raum-5)}
/* h2 im Grundgrad (--gr-2) wie jede h2 unter der h1: Imbue in --gr-3 (24 px am
   Handy) stand zu dünn für einen Abschnittstitel */
.rechtsseite h2{margin-block:var(--raum-7) var(--raum-3)}
.rechtsseite :is(p,ul,ol,div) + :is(p,ul,ol){margin-block-start:var(--raum-4)}
.rechtsseite :is(ul,ol){padding-inline-start:1.25em}
.rechtsseite li + li{margin-block-start:var(--raum-2)}
.rechtsseite li::marker{color:var(--laterne)}
/* Lange Adressen (E-Mail, Behörden-URLs) brechen statt überzulaufen */
.rechtsseite a{overflow-wrap:anywhere}
/* Symbole ohne eigene Größe: höchstens so groß wie die Schrift. Ohne diese
   Regel zeichnet ein <svg viewBox> ohne width die volle Spaltenbreite. */
.rechtsseite svg:not([width]):not([height]){inline-size:1em;block-size:1em;flex:none}
.hinweis-offen{
  display:flex;gap:var(--raum-3);align-items:flex-start;
  padding:var(--raum-4) var(--raum-5);
  border:1px solid var(--linie);border-radius:var(--radius-kante);
  background:var(--abend);
}
/* Symbol auf der Mitte der ersten Zeile; Farbe --offen: „hier fehlt die
   Bestätigung des Betriebs“ */
.hinweis-offen > svg{margin-block-start:calc((var(--zh-text) - 1) * .5em);color:var(--offen)}


/* ---------------------------------------------------------------------------
   9. Bewegung reduzieren — deckt JEDE Bewegung dieser Datei und der Abschnitte ab.
   Endzustand sofort, keine Staffel, kein Atmen, kein Video, keine Fahrt.
   Ein ruhender Schein ist keine Bewegung und bleibt. Die Motor-Zustände
   deckt das Pflicht-CSS ab; der Motor selbst bewegt dann nichts.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;transition-delay:0ms !important;
    /* auch Breite und Höhe ohne Übergang: sonst misst ein Skript veraltete Maße */
    transition-property:none !important;
    scroll-behavior:auto !important;
  }
  /* Netz für den Wechsel zur Laufzeit: kein Inline-Versatz bleibt stehen */
  :is([data-parallax],[data-kamerafahrt]){
    translate:none !important;scale:none !important;rotate:none !important;will-change:auto !important;
  }
  .knopf:active{scale:none}
  .knopf-strich::after{transform:scaleX(1)}
  /* Seitenwechsel: kein Mitscrollen; rechts hart, bevor die erste rechte Zeile
     kommt, links hart, wenn der letzte linke Block ganz hinaus ist */
  .verlauf::before{
    transform:none !important;
    animation-range:cover calc((1 - var(--lage-unten)) * var(--buehne)) cover calc((1 - var(--lage-unten)) * var(--buehne) + 1px) !important;
  }
  .verlauf::after{transform:none !important;animation-range:cover -1px cover 0% !important}
}

/* === quelle/stil/kopf.css === */
/* kopf.css — klebende Kopfzeile, im Fluss immer --kopf-h hoch; Ausfahren und
   Verknappen nur translate/opacity (Bewegungsbuch F.1). Kein Balken: ::before
   deckt die eigene Höhe (.97) mit 6 px Saum, ::after läuft nur über Film zwei
   weitere Kopfhöhen weich aus — sonst dimmte er Sprungziele direkt unter der Zeile.
   .97 statt .88: durchscrollende Schrift schien sonst als Geist durch (1,31 : 1).
   Über reinem Weiß: kalk 15,86, kalk-matt 9,20, laterne 9,77 : 1.
   Zustände setzt kopf.js; ohne Skript keiner, das Menü ist dann ein <details>.
   Eigene Gangart (--dauer-kopf …); --dauer-kurz gilt für Links und Zeichen. */

#kopf{
  /* Knapp rückt die Zeile 12 px hoch; gestapelt (Marke über Status, < 600 und
     ab 1000 px) rückt die Marke allein in die Mitte: halbe Statuszeile + Lücke. */
  --kopf-knapp:12px;
  --kopf-stempel-knapp:calc((1.25 * var(--gr-klein) + 1px) / 2 - var(--kopf-knapp) / 2);
  --kopf-deckung:.97;
  /* 6 statt 12 px (Umbau 27.09.2026): im knappen Zustand stand durchscrollender
     Text im 12-px-Saum halb sichtbar unter der Marke */
  --kopf-saum:6px;
  --dauer-kopf:360ms;                        /* ausfahren (--ease-tuer) */
  --dauer-kopf-ein:280ms;                    /* einfahren, knapp */
  --ease-kopf:cubic-bezier(.22,.61,.36,1);   /* ein, knapp, Menü auf, Marke */
  --ease-kopf-weg:cubic-bezier(.4,0,1,1);    /* Menü zu */
  position:sticky;inset-block-start:0;z-index:var(--z-kopf);
  block-size:var(--kopf-h);
  transition:translate var(--dauer-kopf-ein) var(--ease-kopf);
}
#kopf::before,
#kopf::after{
  content:"";position:absolute;inset-inline:0;z-index:-2;pointer-events:none;
  transition:translate var(--dauer-kopf-ein) var(--ease-kopf),opacity var(--dauer-kurz) var(--ease-aus);
}
/* Deckkraft wechselt nur mit held (unten): die Blende beginnt 30 ms in ihrer Kurve, sonst
   stand im ersten Bild ::after (ohne eigenen Übergang) mit harter Kante unter der Zeile */
#kopf::before{
  inset-block-start:0;block-size:calc(100% + var(--kopf-saum));
  transition-delay:0s,-30ms;
  background:linear-gradient(to bottom,
    rgb(var(--schleier-rgb) / var(--kopf-deckung)) calc(100% - var(--kopf-saum)),
    rgb(var(--schleier-rgb) / 0) 100%);
}
/* Über Film zwei Kopfhöhen, von Anfang an fallend (etwa .6 / .3 / .1 / 0 je
   Viertel; Umbau 27.09.2026): die S-Kurve über eine Kopfhöhe hielt die volle
   Deckung noch ein Stück unter der Zeile und lag über grauem Himmel (Filmraum II)
   als harter dunkler Deckel. */
#kopf::after{
  inset-block-start:100%;block-size:200%;opacity:0;
  background:linear-gradient(to bottom,
    rgb(var(--schleier-rgb) / var(--kopf-deckung)) 0,
    rgb(var(--schleier-rgb) / calc(var(--kopf-deckung) * .8)) 12.5%,
    rgb(var(--schleier-rgb) / calc(var(--kopf-deckung) * .62)) 25%,
    rgb(var(--schleier-rgb) / calc(var(--kopf-deckung) * .45)) 37.5%,
    rgb(var(--schleier-rgb) / calc(var(--kopf-deckung) * .31)) 50%,
    rgb(var(--schleier-rgb) / calc(var(--kopf-deckung) * .2)) 62.5%,
    rgb(var(--schleier-rgb) / calc(var(--kopf-deckung) * .1)) 75%,
    rgb(var(--schleier-rgb) / calc(var(--kopf-deckung) * .04)) 87.5%,
    rgb(var(--schleier-rgb) / 0) 100%);
}
#kopf.kopf--film::after{opacity:1}
#kopf .kopf-zeile{
  display:flex;align-items:center;gap:var(--raum-3);
  block-size:100%;
  padding-inline:var(--rand);
  margin-inline:auto;max-inline-size:calc(var(--breite) + 2 * var(--rand));
}

/* --- Wortmarke und Status ------------------------------------------------
   Der Link deckt mit ::before den ganzen Stempel: volle Zeilenhöhe als
   Tippfläche, der Status darunter bleibt Text (nicht Teil des Linknamens). */
#kopf .kopf-stempel{
  position:relative;flex:0 1 auto;min-inline-size:0;margin-inline-end:auto;
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  block-size:100%;
}
/* Wortmarke in Imbue 500: klein gesetzt braucht die schmale Didone etwas mehr
   Gewicht (opsz folgt der Größe, die Haarstriche werden dort kräftiger) */
#kopf .kopf-marke{
  align-self:flex-start;max-inline-size:100%;
  font-family:var(--schrift-anzeige);font-weight:var(--gew-marke);
  font-size:1.5rem;line-height:1;letter-spacing:.005em;
  color:var(--kalk);text-decoration:none;white-space:nowrap;
}
#kopf .kopf-marke::before{content:"";position:absolute;inset:0}
#kopf .kopf-marke:focus-visible{outline-offset:2px;box-shadow:none}

#kopf .kopf-status{
  display:flex;align-items:center;gap:var(--raum-2);
  min-inline-size:0;
  font-size:var(--gr-klein);line-height:1.25;color:var(--kalk-matt);
}
#kopf .kopf-status-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Licht: ein kleines Rundbogenfenster. Umriss = keine bestätigte Öffnung
   (Farbe --offen: „hier fehlt die Bestätigung des Betriebs“), gefüllt und
   leuchtend nur, wenn der Betrieb für heute bestätigt hat. Der Schein ist
   ruhend gemalt, bewegt wird nur seine Deckkraft. */
#kopf .kopf-licht{
  position:relative;flex:none;
  inline-size:8px;block-size:11px;
  border:1.5px solid var(--offen);
  border-radius:999px 999px var(--radius-kante) var(--radius-kante);
}
#kopf .kopf-status[data-art='zu'] .kopf-licht{border-color:var(--kalk-matt)}
#kopf .kopf-status[data-art='offen']{color:var(--kalk)}
#kopf .kopf-status[data-art='offen'] .kopf-licht{border-color:var(--laterne);background:var(--laterne-kern)}
#kopf .kopf-status[data-art='offen'] .kopf-licht::after{
  content:"";position:absolute;inset:-9px;pointer-events:none;
  background:radial-gradient(closest-side, rgb(var(--laterne-rgb) / .55), transparent);
  opacity:1;
}
#kopf.kopf--zuenden .kopf-status[data-art='offen'] .kopf-licht::after{opacity:0}
#kopf.kopf--zuenden.kopf--an .kopf-status[data-art='offen'] .kopf-licht::after{
  opacity:1;transition:opacity 1.4s var(--ease-aus) .3s;
}

/* --- Laternen-Strich (gemeinsam für Zeile und Tafel) ----------------------
   Der Strich sitzt am Link selbst; in der Tafel ist der Link zeilenbreit
   (Tippfläche), der Strich läuft nur unter dem Wort (<span>). */
#kopf :is(.kopf-liste a,.kopf-tafel-liste a,.kopf-sprache,.kopf-tafel-sprache){
  position:relative;
  display:inline-flex;align-items:center;
  min-block-size:48px;min-inline-size:44px;
  color:var(--kalk-matt);text-decoration:none;
  transition:color var(--dauer-kurz) var(--ease-aus);
}
#kopf .kopf-liste a{justify-content:center}
#kopf .kopf-tafel-liste a > span{position:relative;padding-block:6px}
#kopf :is(.kopf-liste a,.kopf-tafel-liste a > span,.kopf-sprache,.kopf-tafel-sprache)::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:10px;block-size:2px;
  background:var(--laterne);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dauer-mittel) var(--ease-aus);
}
#kopf :is(.kopf-liste a,.kopf-tafel-liste a,.kopf-sprache,.kopf-tafel-sprache):is(:hover,:focus-visible,[aria-current]){color:var(--kalk)}
#kopf :is(.kopf-liste a,.kopf-sprache,.kopf-tafel-sprache):is(:hover,:focus-visible,[aria-current])::after,
#kopf .kopf-tafel-liste a:is(:hover,:focus-visible,[aria-current]) > span::after{transform:scaleX(1)}
#kopf .kopf-nav--gleitet .kopf-liste a[aria-current]:not(:hover):not(:focus-visible)::after{transform:scaleX(0)}
#kopf :is(.kopf-liste a,.kopf-tafel-liste a,.kopf-sprache,.kopf-tafel-sprache):focus-visible{outline-offset:2px}

/* --- Zeile am Rechner --------------------------------------------------- */
#kopf .kopf-nav{display:none}

/* Gleitender Strich: vom Skript eingesetzt, Lage und Breite als transform */
#kopf .kopf-gleiter{
  position:absolute;inset-inline-start:0;inset-block-start:0;
  inline-size:100px;block-size:2px;
  background:var(--laterne);pointer-events:none;
  transform-origin:0 50%;opacity:0;
  transition:transform var(--dauer-mittel) var(--ease-tuer),opacity var(--dauer-kurz) var(--ease-aus);
}
#kopf .kopf-gleiter--an{opacity:1}
#kopf .kopf-gleiter--sofort{transition:opacity var(--dauer-kurz) var(--ease-aus)}

/* --- Menü (<details>) unter 1000 px ------------------------------------- */
#kopf .kopf-menue{flex:none;align-self:stretch;display:flex;align-items:center}
#kopf .kopf-menue-knopf{
  display:flex;align-items:center;gap:var(--raum-3);
  min-block-size:48px;min-inline-size:48px;
  padding-inline:var(--raum-3);margin-inline-end:calc(-1 * var(--raum-3));
  border-radius:var(--radius-kante);
  font-weight:var(--gew-stark);font-size:var(--gr-klein);letter-spacing:.02em;
  color:var(--kalk);cursor:pointer;list-style:none;
  -webkit-user-select:none;user-select:none;
}
#kopf .kopf-menue-knopf::-webkit-details-marker{display:none}
#kopf .kopf-menue-knopf::marker{content:""}
#kopf .kopf-menue-zeichen{position:relative;display:block;inline-size:20px;block-size:12px}
#kopf .kopf-menue-zeichen i{
  position:absolute;inset-inline:0;block-size:2px;background:currentColor;
  transition:transform var(--dauer-kurz) var(--ease-tuer),background-color var(--dauer-kurz) var(--ease-aus);
}
#kopf .kopf-menue-zeichen i:first-child{inset-block-start:0}
#kopf .kopf-menue-zeichen i:last-child{inset-block-end:0}
#kopf .kopf-menue-knopf:hover .kopf-menue-zeichen i,
#kopf .kopf-menue[open] .kopf-menue-zeichen i{background:var(--laterne)}
/* Zwei Striche kreuzen sich zum Schließen-Zeichen (Mitte 6 px, Striche bei 1 und 11 px) */
#kopf .kopf-menue[open] .kopf-menue-zeichen i:first-child{transform:translateY(5px) rotate(45deg)}
#kopf .kopf-menue[open] .kopf-menue-zeichen i:last-child{transform:translateY(-5px) rotate(-45deg)}

/* Tafel: Stapel Verlauf (−2) < Feld (−1) < Marke und Schließen-Zeichen. Nichts,
   was das feste Feld umschließt, trägt translate (sonst Bezugsrahmen statt
   Fenster); knapp rücken nur Stempel, Rechner-Zeile und Knopf. */
#kopf .kopf-tafel{
  position:fixed;inset:0;z-index:-1;
  overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--kopf-h) + var(--raum-2)) var(--rand) calc(var(--raum-7) + env(safe-area-inset-bottom, 0px));
  background:var(--nacht-tief);
}
#kopf .kopf-tafel > *{max-inline-size:36rem}
#kopf .kopf-tafel-liste{list-style:none;margin:0;padding:0}
#kopf .kopf-tafel-liste li + li{border-block-start:1px solid var(--linie)}
/* Titelstufe (Imbue 400, --gr-2), Zeilen ≥ 64 px */
#kopf .kopf-tafel-liste a{
  display:flex;min-block-size:64px;
  font-family:var(--schrift-anzeige);font-weight:var(--gew-anzeige);
  font-size:var(--gr-2);line-height:var(--zh-titel);
}
#kopf .kopf-tafel-liste a > span::after{inset-block-end:2px}
#kopf .kopf-tafel-sprache{margin-block-start:var(--raum-4);font-weight:var(--gew-stark)}

/* Auf: Feld sinkt 12 px ein, Einträge steigen 14 px („Ruhe“, D.1), 45 ms
   gestaffelt. Zu (kopf.js: --geht, danach open = false): Feld hebt sich 8 px
   und blendet aus — per animate() vom Wert, auf dem es gerade steht (auch
   mitten im Einblenden), mit --ease-kopf-weg; der Knopf kehrt es um. Die
   Einträge gehen vorher, in 100 ms (das Feld deckt dann noch rund 0,7): über dem
   Sprungziel löst sich nur eine leere Fläche auf, keine Schrift. Beide beginnen am
   Wert, auf dem der Eintrag gerade steht: die Liste (ohne eigene Animation) per
   Übergang, der auch beim Zurückholen wieder einblendet; der Sprachlink, der selbst
   animiert ist, mit einer zweiten Animation über kopf-ruhe (ein Übergang startet an
   einem animierten Wert nicht, gemessen). */
#kopf .kopf-menue[open] .kopf-tafel{animation:kopf-tafel-ein 320ms var(--ease-kopf) both}
#kopf .kopf-menue[open] :is(.kopf-tafel-liste li,.kopf-tafel-sprache){
  animation:kopf-ruhe 480ms var(--ease-kopf) both;
  animation-delay:calc(var(--kopf-i, 0) * 45ms);
}
#kopf .kopf-tafel-liste{transition:opacity 100ms var(--ease-kopf-weg)}
#kopf .kopf-menue--geht[open] .kopf-tafel-liste{opacity:0}
#kopf .kopf-menue--geht[open] .kopf-tafel > .kopf-tafel-sprache{
  animation:kopf-ruhe 480ms var(--ease-kopf) both,kopf-weg 100ms var(--ease-kopf-weg) forwards;
  animation-delay:calc(var(--kopf-i, 0) * 45ms),0s;
}
#kopf .kopf-menue--geht[open] .kopf-tafel{pointer-events:none}
#kopf .kopf-menue--geht[open] .kopf-menue-zeichen i{background:currentColor}
#kopf .kopf-menue--geht[open] .kopf-menue-zeichen i:is(:first-child,:last-child){transform:none}
#kopf .kopf-tafel-liste li:nth-child(2){--kopf-i:1}
#kopf .kopf-tafel-liste li:nth-child(3){--kopf-i:2}
#kopf .kopf-tafel-liste li:nth-child(4){--kopf-i:3}
#kopf .kopf-tafel-liste li:nth-child(5){--kopf-i:4}
#kopf .kopf-tafel-liste li:nth-child(6){--kopf-i:5}
#kopf .kopf-tafel-liste li:nth-child(7){--kopf-i:6}
#kopf .kopf-tafel-sprache{--kopf-i:7}
@keyframes kopf-tafel-ein{from{opacity:0;translate:0 -12px}to{opacity:1;translate:none}}
@keyframes kopf-ruhe{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes kopf-weg{to{opacity:0}}

/* --- Knapp, ausgefahren und held (kopf.js, nur mit Bewegung) ------------- */
#kopf :is(.kopf-nav,.kopf-menue-knopf){transition:translate var(--dauer-kopf-ein) var(--ease-kopf)}
#kopf .kopf-stempel{transition:translate var(--dauer-kopf-ein) var(--ease-kopf),opacity var(--dauer-kurz) var(--ease-kopf)}
#kopf .kopf-status{transition:opacity var(--dauer-kopf-ein) var(--ease-kopf)}
/* Der Grund rückt nur um seinen Saum hoch: der Saum endet dann an der Unterkante
   der Zeile, darüber deckt er voll (vorher −12 px: Text schien im Saum halb durch) */
#kopf.kopf--knapp::before,
#kopf.kopf--knapp::after{translate:0 calc(-1 * var(--kopf-saum))}
#kopf.kopf--knapp .kopf-stempel{translate:0 var(--kopf-stempel-knapp)}
#kopf.kopf--knapp :is(.kopf-nav,.kopf-menue-knopf){translate:0 calc(var(--kopf-knapp) / -2)}
#kopf.kopf--knapp .kopf-status{opacity:0}
/* Ausfahren als Tür; Einfahren gilt aus #kopf */
#kopf.kopf--weg{translate:0 -100%;transition:translate var(--dauer-kopf) var(--ease-tuer)}
/* Held: solange die h1 von #start den Namen trägt, kommen Marke und Status
   nicht; auch bis der Motor steht (kein Aufblitzen). Menü, Zeiger, Fokus zeigen
   sie — mit Tastaturfokus schon vor dem Motorstart (wie die Rahmen .halt:not(:focus-within) im Pflicht-CSS, basis.css). */
.motor-laedt #kopf .kopf-stempel:not(:focus-within),
#kopf.kopf--held:not(.kopf--menue) .kopf-stempel{opacity:0}
#kopf.kopf--held .kopf-stempel:is(:hover,:focus-within){opacity:1}
/* Held unter 1000 px: in der Zeile steht nur der Menüknopf, also auch kein Grund —
   sonst lag über den oberen rund 110 px des ersten Films ein fast schwarzer Balken.
   Beide Ebenen gehen (::after allein begänne mit einer harten Kante unter der Zeile);
   der Knopf steht auf dem oberen Verlauf der Bühne. Ab 1000 px steht dort die
   Rechner-Zeile in kalk-matt, sie braucht den Grund. Beim Wechsel blendet nur ::before;
   ::after geht über visibility, ohne eigenen Übergang (eine Ebene je Wechsel, zeitgleich
   mit dem Titelwechsel). Bis der Motor steht, auf der Startseite schon so (oben der
   häufigste Fall; sonst blendete der Grund beim Motorstart aus): kopf.js setzt held im
   selben Durchlauf. Lädt sie tiefer, blendet der Grund beim Start ein. */
@media (max-width:999.98px){
  #kopf.kopf--held:not(.kopf--menue)::before{opacity:0}
  #kopf.kopf--held:not(.kopf--menue)::after{visibility:hidden}
}
@media (max-width:999.98px) and (min-height:500px) and (prefers-reduced-motion:no-preference){
  html.motor-laedt:has(.filmraum) #kopf::before{opacity:0}
}
/* Tastaturfokus holt die Zeile zurück (Z.3), auch ohne Skript-Zutun. Nur
   :focus-visible: ein angeklickter Link behält den Fokus, darf aber ausfahren. */
#kopf:has(:focus-visible){translate:none}
/* Menü offen: über der Leiste (z 45), nie verschoben. Nach .kopf--weg (gleiche
   Spezifität); getrennt, weil ohne :has sonst beide Regeln verfielen. */
#kopf.kopf--menue{z-index:calc(var(--z-leiste) + 1);translate:none;transition:none}
#kopf:has(.kopf-menue[open]){z-index:calc(var(--z-leiste) + 1);translate:none;transition:none}

/* Unter 360 px braucht der Status den Platz: das Wort „Menü“ bleibt nur für
   Vorleser (Name des Knopfs), sichtbar bleiben die zwei Striche. */
@media (max-width:359.98px){
  #kopf .kopf-menue-wort{
    position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
  #kopf .kopf-menue-knopf{justify-content:center}
}
@media (min-width:600px){
  /* Marke und Status in einer Zeile: knapp rückt der Stempel nur mit */
  #kopf{--kopf-stempel-knapp:calc(var(--kopf-knapp) / -2)}
  #kopf .kopf-stempel{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--raum-5)}
  #kopf .kopf-marke{align-self:center;font-size:1.625rem}
  #kopf .kopf-tafel{padding-inline:calc(var(--rand) + var(--raum-3))}
}

@media (min-width:1000px){
  #kopf{--kopf-stempel-knapp:calc((1.25 * var(--gr-klein) + 2px) / 2 - var(--kopf-knapp) / 2)}
  #kopf .kopf-menue{display:none}
  #kopf .kopf-stempel{flex:0 1 auto;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
  #kopf .kopf-marke{align-self:flex-start;font-size:1.75rem}
  #kopf .kopf-nav{
    position:relative;
    display:flex;align-items:center;gap:var(--raum-6);
    margin-inline-start:auto;block-size:100%;
  }
  #kopf .kopf-liste{
    display:flex;align-items:center;gap:var(--raum-5);
    list-style:none;margin:0;padding:0;
  }
  #kopf :is(.kopf-liste a,.kopf-sprache){font-size:var(--gr-klein);white-space:nowrap}
  #kopf .kopf-sprache{padding-inline-start:var(--raum-5);border-inline-start:1px solid var(--linie)}
  #kopf .kopf-sprache::after{inset-inline-start:var(--raum-5)}
}
@media (min-width:1200px){
  #kopf .kopf-liste{gap:var(--raum-6)}
  #kopf :is(.kopf-liste a,.kopf-sprache){font-size:var(--gr-text)}
}

@media (prefers-reduced-motion:reduce){
  #kopf .kopf-menue[open] :is(.kopf-tafel,.kopf-tafel-liste li,.kopf-tafel-sprache){animation:none}
  /* Netz: ohne Bewegung setzt kopf.js geht (samt Ausblenden) und held nicht */
  #kopf.kopf--held:not(.kopf--menue) .kopf-stempel,
  #kopf.kopf--held:not(.kopf--menue)::before{opacity:1}
  #kopf.kopf--held:not(.kopf--menue)::after{visibility:visible}
  #kopf .kopf-menue-zeichen i,
  #kopf :is(.kopf-liste a,.kopf-tafel-liste a > span,.kopf-sprache,.kopf-tafel-sprache)::after,
  #kopf .kopf-gleiter{transition:none}
  #kopf.kopf--zuenden .kopf-status[data-art='offen'] .kopf-licht::after{opacity:1;transition:none}
  /* Netz: kopf.js setzt knapp/weg ohne Bewegung nicht; sonst gilt der Endzustand */
  #kopf.kopf--weg,
  #kopf.kopf--knapp::before,
  #kopf.kopf--knapp::after,
  #kopf.kopf--knapp :is(.kopf-stempel,.kopf-nav,.kopf-menue-knopf){translate:none}
  #kopf.kopf--knapp .kopf-status{opacity:1}
}
@media print{
  #kopf{position:static;translate:none}
  #kopf::before,#kopf::after{display:none}
  #kopf :is(.kopf-menue,.kopf-nav){display:none}
}

/* === quelle/stil/start.css === */
/* ===========================================================================
   start.css — Kapitel „start“ im Filmraum I, die einzige h1 der Seite.
   Nur Selektoren unter #start. Bühne, Film, Verlauf, Lage (unten), Spalte
   (links), die Grundmaße des Kapitelblocks (Abstände 7 / 3,8 / 4,3 % der
   Bühne, Satzbreite 88 % hochkant / 34 % quer) und die Schrift der Kopfzeile
   (Anzeige-Stufe, Imbue 400) stehen in basis.css; den Auftritt des
   Rahmens (.halt) führt der Motor. Keine eigene Schriftgröße für die h1:
   „Heurigenschank“ passt nach der Spaltengrenze in basis.css in eine Zeile,
   der Name steht hochkant ein- oder zweizeilig wie jede andere Kopfzeile.

   Hier steht nur, was start eigen ist:
     - in der einen Unterzeile der bestätigte Wochenrhythmus
     - die Knöpfe in einer Zeile; unter 1000 px beide als Strich-Link
     - der Scroll-Hinweis (F.5): 1 px breite, 40 px hohe Kalk-Linie unter den
       Knöpfen, auf einer eigenen ruhenden Ebene. Ohne Skript und bei
       „Bewegung reduzieren“ steht sie still; start.js lässt sie atmen und
       nimmt sie nach 0,2 Bühnenhöhen Scroll dauerhaft weg.

   Zustände (setzt start.js an #start, nur mit Bewegung; kein Inline-Stil):
     .start-hinweis-atmet  Deckkraft 0,35 → 0,9 → 0,35 in 3,2 s (Compositor)
     .start-hinweis-ruht   Hinweis außerhalb des Bildes: Animation pausiert
     .start-hinweis-weg    0,2 Bühnenhöhen gescrollt: blendet aus
     .start-hinweis-aus    danach display:none, keine Animation mehr
   =========================================================================== */

/* --- Unterzeile: bestätigter Wochenrhythmus ----------------------------------
   Eine Unterzeile (Lauf E): die Zeiten in der Stufe der Unterzeile. Die Klasse
   .offen bleibt für eine Herkunftszeile (14 px, --gr-klein), die der bestätigte
   Rhythmus vom 29.09.2026 nicht mehr braucht. */
#start .start-status .offen{
  display:block;
  font-size:var(--gr-klein);line-height:1.4;
}

/* --- Knöpfe ------------------------------------------------------------------ */
#start .start-tasten{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--raum-2) var(--raum-6);
}
/* Unter 1000 px (dort steht die Leiste) wird „Karte aufschlagen“ ein Strich-Link
   wie „Anfahrt“: keine zweite weiße Fläche unter dem Film. Strich = ::before,
   wie .knopf-strich::after (basis.css); Drücken zieht ihn aus (F.3). */
@media (max-width:999.98px){
  #start .knopf-kalk{padding-inline:0;background:none;color:var(--kalk)}
  #start .knopf-kalk::before{
    inset:auto 0 9px;block-size:2px;border-radius:0;
    background:var(--laterne);box-shadow:none;opacity:1;
    transform-origin:left center;transform:scaleX(.3);
    transition:transform var(--dauer-mittel) var(--ease-aus);
  }
  #start .knopf-kalk:is(:hover,:focus-visible)::before{transform:scaleX(1)}
  #start .knopf-kalk:focus-visible{outline-offset:4px}
  #start .knopf-kalk:active::before{transform:scaleX(1);transition-duration:120ms}
}
/* „Anfahrt“ (.knopf-strich): Drücken zieht den Strich aus — Regel in basis.css */

/* --- Scroll-Hinweis ----------------------------------------------------------
   Hängt unter den Knöpfen in der Lücke zum Bühnenboden (Lage unten: 8 % der
   Bühne, basis.css) und nimmt keinen Platz im Block ein. 40 px hoch, auf
   kurzen Bühnen kürzer, damit er über dem Boden endet (375×667: Lücke 44 px,
   sonst lägen 4 px unter der Leiste). Die Hülle trägt das Ausblenden,
   ::before das Atmen — zwei Deckkräfte, die sich nicht stören. */
#start .start-hinweis{
  position:absolute;inset-block-start:calc(100% + var(--raum-2));inset-inline-start:0;
  inline-size:1px;
  block-size:min(40px, calc(.08 * var(--buehne, var(--buehne-h, 100svh)) - var(--raum-2) - 4px));
  pointer-events:none;
  transition:opacity var(--dauer-mittel) var(--ease-aus);
}
#start .start-hinweis::before{
  content:"";position:absolute;inset:0;
  background:var(--kalk);opacity:.6;
}
#start.start-hinweis-atmet .start-hinweis::before{animation:start-hinweis-atmen 3.2s ease-in-out infinite}
#start.start-hinweis-ruht .start-hinweis::before{animation-play-state:paused}
#start.start-hinweis-weg .start-hinweis{opacity:0}
#start.start-hinweis-aus .start-hinweis{display:none}
@keyframes start-hinweis-atmen{
  0%,100%{opacity:.35}
  50%{opacity:.9}
}

/* --- Rechner quer ------------------------------------------------------------
   Die Unterzeile bleibt schmaler als die Spalte (30 statt 34 vw ab 6 vw
   Außenrand): so steht der Wochenrhythmus nicht an der Außenkante der Spalte,
   wo der Verlauf schon ausläuft (Bewegungsbuch D.4). */
@media (min-width:1000px) and (orientation:landscape) and (min-height:500px){
  #start .start-status{max-inline-size:30vw}
}

/* --- Niedrige Schirme (Handy quer): nichts klebt, kein Hinweis -------------- */
@media (max-height:499.98px){
  #start .start-hinweis{display:none}
}

/* --- Bewegung reduzieren und Druck ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #start .start-hinweis::before{animation:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:999.98px){
  /* wie .knopf-strich::after (basis.css) */
  #start .knopf-kalk::before{transform:scaleX(1)}
}
@media print{
  #start .start-hinweis{display:none}
}

/* === quelle/stil/haus.css === */
/* ===========================================================================
   haus.css — Kapitel „Das Haus“ im Filmraum I (quelle/abschnitte/haus.*.html)
   Nur Selektoren unter #haus. Tokens aus basis.css, keine eigenen Farben.

   Bühne, Kontrastverlauf, Kapitelhöhe, Lage (data-lage/-seite), die
   Blockmaße nach Bewegungsbuch D.2 und die Schrift der Kopfzeile (Anzeige-
   Stufe, Imbue 400) stehen in basis.css. Hier nur, was allein dieses
   Kapitel hat:
     - die belegten Werte (Goldenes Ehrenbuch 1824, in Familienhand seit 1600,
       Adresse) als „Zahl“ über dem Film, an
       der Stelle von Knopf/Verweis (4,3 % der Bühnenhöhe unter der Kopfzeile;
       eine Unterzeile hat das Kapitel seit Lauf E nicht mehr), das Jahr groß
       (span.haus-jahr im Markup, kein neuer Text). Kein Kasten,
       keine Linie, kein Schatten: Lesbarkeit kommt vom Verlauf in der Bühne
       (D.4). Text nur kalk.
   Die Werte stehen als EINE Zeile, die Beschriftungen (dt) nur für Vorleser:
   sichtbare Beschriftungen machten den Block zur Tabelle und höher (Lauf D:
   55 % statt 45 % der Bühne). Die volle Anschrift steht in Anfahrt und Fuß.
   Kein Grundzustand opacity:0 und keine Bewegung hier: den Auftritt des
   Rahmens (.halt) macht der Kern, ohne Skript steht alles.
   =========================================================================== */

/* --- Werte ------------------------------------------------------------------ */
#haus .haus-fakten{
  display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:clamp(var(--raum-5), 2.2vw, var(--raum-6));
  row-gap:var(--raum-1);
  margin-block-start:calc(.043 * var(--buehne, var(--buehne-h)));
}
#haus .haus-fakt{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.45em;min-inline-size:0}
/* Beschriftung nur für Vorleser (wie .nurlesbar in basis.css) */
#haus .haus-fakt dt{
  position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Werte in Imbue, eine Stufe unter der Kopfzeile (--gr-3; bis 28.09.2026
   --gr-lead): „seit“ und die Anschrift als kleine Titelschrift. */
#haus .haus-wert{
  margin:0;
  font-family:var(--schrift-anzeige);font-weight:var(--gew-anzeige);
  font-size:var(--gr-3);line-height:1;
  letter-spacing:0;
  color:var(--kalk);
  white-space:normal;
}
/* Der Name bleibt ein Stück, „seit“ klebt am Jahr. Beides darf auf die nächste
   Zeile umbrechen, damit 390 px nicht seitlich überläuft. */
#haus .haus-namen,
#haus .haus-zeile{white-space:nowrap}
/* Das Jahr als Zahl-Held: nur größer gesetzt, derselbe Text, Imbue fein (300)
   in --gr-1; „seit“ bleibt in der Stufe der Werte davor, beide auf einer
   Grundlinie. */
#haus .haus-jahr{font-size:var(--gr-1);font-weight:300;line-height:.9;letter-spacing:var(--sperrung-anzeige)}

/* === quelle/stil/blick.css === */
/* ===========================================================================
   blick.css — Kapitel „Der Blick“ im Filmraum I (quelle/abschnitte/blick.*.html)
   Nur Selektoren unter #blick. Tokens, Bühne, Verlauf und die Grundmaße des
   Kapitels (Höhe, data-lage, data-seite, Spalte, Blockabstände nach D.2)
   stehen in basis.css.

   Lauf D: kein eigenes Bild mehr, der Film „ankommen“ trägt die Nacht über
   Dürnstein. Hier stehen nur zwei Feinheiten:
     1. Riesenschrift „Dürnstein“ (data-einblenden="riese"), der Tier-1-Moment
        des Filmraums I. Sie steht im Fluss VOR dem Block, also darüber, nie
        daneben: hochkant bündig mit dem Block über 88 % der Breite, ab 1000 px
        quer rechtsbündig über der rechten Spalte und nach links ins Bild.
        Deko (aria-hidden): im Rahmen mit fester Deckkraft (Pflicht-CSS), sie
        kommt und geht mit ihm; den ganzen Satz trägt die Kopfzeile. Hochkant
        im Halt-Modus steht sie höher (Umbau 27.09.2026): das Wort beschriftet
        die beleuchtete Ruine, die frei zwischen ihm und der Dachzeile steht,
        statt auf ihr zu liegen.
     2. Die Kopfzeile in Imbue 400 wie jeder Filmtitel (basis.css). Hier nur
        der ausgeglichene Umbruch ohne Silbentrennung.

   Bewegung: keine eigene, kein Skript (motor/abschnitte/blick.js entfällt).
   Riesenschrift, Dachzeile, Kopfzeile und Unterzeile erscheinen als Ganzes
   mit dem Rahmen .halt (45-halt.js). Ohne Skript und bei „Bewegung
   reduzieren“ steht alles voll deckend da; nichts hier ist ein versteckter
   Grundzustand.
   =========================================================================== */

#blick{
  /* Bühnenhöhe B: --buehne (Lauf D), sonst --buehne-h (bisheriger Name) */
  --blick-b:var(--buehne, var(--buehne-h));
  /* Außenrand und Satzbreite wie der Block (Bewegungsbuch A.4 und D.2):
     hochkant 88 % der Breite, also 6 % Rand je Seite */
  --blick-rand:6vw;
  /* „Dürnstein“ misst in Imbue 250 (opsz 100) 2,53 em, mit der Sperrung −0,01 em
     2,44 em (fontTools, Vorlaufbreiten der Schrift aus assets/schriften); die
     Ersatzschrift Times läuft auf 2,61 em, Noto Serif auf 2,71 em: 2,72 lässt
     Luft für beide, Imbue füllt so 90 % der Satzbreite. Höhe der Zeile
     höchstens 30 % B (Handy quer, flache Fenster), sonst frisst das Wort den
     freien Film. */
  --blick-riese:min(calc((100vw - 2 * var(--blick-rand)) / 2.72), calc(var(--blick-b) * .3 / .86));
  position:relative;
  /* Nichts darf waagrecht aus dem Kapitel ragen, auch nicht mit der breiteren
     Ersatzschrift. clip statt hidden: kein Scroll-Container, senkrecht frei. */
  overflow-x:clip;
}

/* --- Riesenschrift --------------------------------------------------------- */
#blick .blick-riese{
  box-sizing:content-box;
  /* max-content: das Wort bricht nie. Den Außenrand von 6vw trägt schon das
     Kapitel (basis.css), deshalb hier kein eigener Seitenrand. */
  inline-size:max-content;max-inline-size:none;
  margin-block:0 calc(var(--blick-b) * .06);
  margin-inline:0;
  padding:0;
  font-family:var(--schrift-anzeige);
  font-style:normal;
  font-weight:var(--gew-riese);
  font-size:var(--blick-riese);
  line-height:var(--zh-riese);
  letter-spacing:-.01em;
  white-space:nowrap;
  color:var(--kalk);
  -webkit-user-select:none;user-select:none;
  pointer-events:none;
}

/* Hochkant im Halt-Modus (Rahmen B hoch, klebt): das Wort steht oben im Rahmen,
   eine Stufe unter der Kopfzeile, statt dicht über dem Block — 390×844 rund
   140 px höher, über der Ruine, die frei zwischen Wort und Dachzeile steht. Oben
   verankert statt mit Abstand nach unten: der Block ist je nach Breite und Höhe
   verschieden hoch (375×667, Tablet), das Wort läge sonst unter der Kopfzeile.
   Liste wie in basis.css „Halt hochkant“: alles außer Rechner quer. */
@media screen and (min-height:500px) and (max-width:999.98px) and (prefers-reduced-motion:no-preference),
       screen and (min-height:500px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
  html.js:is(.motor-laedt,.motor-halt) #blick .blick-riese{
    position:absolute;inset-block-start:calc(var(--kopf-h) + var(--raum-5));inset-inline-start:0;margin:0;
  }
}

/* --- Kopfzeile -------------------------------------------------------------- */
/* Schrift und Größe aus basis.css (siehe Kopf, Punkt 2). Ortsnamen nie
   trennen oder mitten im Wort umbrechen. */
#blick .blick-titel{
  text-wrap:balance;
  overflow-wrap:normal;
  hyphens:manual;
}

/* --- Rechner quer: rechte Spalte (34 % der Fensterbreite, Rand 6 vw) ------- */
@media (min-width:1000px) and (orientation:landscape){
  #blick{
    /* Das Wort reicht rechtsbündig über die Spalte hinaus nach links, höchstens
       über zwei Drittel der Breite und nie höher als 30 % B. */
    --blick-riese:min(calc(66vw / 2.72), calc(var(--blick-b) * .3 / .86), 16rem);
  }
  /* Das Kapitel ist eine Flex-Spalte mit der Satzspalte als Innenfläche: das
     breitere Wort endet bündig an deren rechter Kante (6vw vom Rand) und ragt
     nach links ins Bild (flex-end richtet auch bei Überbreite am Ende aus). */
  #blick .blick-riese{align-self:flex-end}
}

/* === quelle/stil/karte-auftakt.css === */
/* ===========================================================================
   karte-auftakt.css — Kapitel „Die Karte“ über Film 4 (Markup:
   quelle/abschnitte/karte-auftakt.*.html). Nur Selektoren unter #karte-auftakt.

   Bühne, Verlauf, Absenken, Blockmaße, Spalte und Lage (data-seite, data-lage),
   die Kopfzeile in Imbue 400 (Anzeige-Stufe) und die Unterzeile
   stehen in basis.css, den Auftritt des Rahmens (.halt) macht der Motor. Der
   Hinweis „Sinnbild“ ist seit Lauf E die eine Unterzeile des Blocks und sieht
   aus wie jede Unterzeile (kalk, Fließtext-Stufe) — kein eigener Stil mehr.
   Hier nur: die Unterzeile ohne Silbentrennung (kein „Sinn-bild“), sie bricht
   an Wortgrenzen. Kein translate, kein opacity, keine Übergänge am Rahmen .halt:
   den animiert der Motor, CSS stäche ihn sonst aus.
   =========================================================================== */
#karte-auftakt [data-einblenden="unterzeile"]{hyphens:manual}

/* === quelle/stil/karte.css === */
/* ===========================================================================
   karte.css — Ruheraum A „Wein & Jause“ und „Ausg’steckt“ (Markup:
   quelle/abschnitte/karte.*.html, Verhalten: motor/abschnitte/karte.js). Nur
   Selektoren unter #karte, Farben und Maße aus basis.css.

   Kein Film dahinter (Bewegungsbuch A.1): Nachtblau, Lesetypografie, viel Luft.
   Film 4 läuft davor im Filmraum I (Kapitel karte-auftakt), der Filmraum senkt
   sich danach in genau dieses Nachtblau ab — deshalb oben keine Kante, keine Linie.
   Material statt flacher Fläche, ruhend, kein Byte mehr: hinter der Spalte der
   Tisch aus Film 4 unter 0,88 Nachtblau, hinter dem Buch ein Tischlicht, der
   Deckel in Leinen.

   Aufbau (dieselbe Reihenfolge im DOM auf jeder Breite):
     unter 600 px   eine Spalte: Titel, Satz, Buch (Deckel groß, Beschriftung
                    darunter); dann „Durchatmen“ (--durchatmen aus basis.css,
                    Bewegungsbuch E), dann Ausg’steckt
     ab 600 px      zwei Spalten: Karte links, Ausg’steckt rechts
   Keine Einblendung: der Text steht ab dem ersten Bild.

   #karte bildet keinen Stapelkontext und trägt keine Transformation (kein
   position+z-index, kein opacity, kein transform/translate, kein filter): der
   Lesemodus (.buch-lesen, fest im Bild) hängt in diesem Abschnitt und muss mit
   --z-lesen über Kopf und Leiste liegen.

   Lesemodus: .buch-lesen setzt das Skript in den Abschnitt (fest im Bild, über Kopf
   und Leiste). Ruhende Zustände stehen hier als Klassen, das Skript schreibt
   Transformationen nur während einer Bewegung und nimmt sie am Ende wieder weg.
   Kein backdrop-filter, keine Übergänge auf transform/opacity an Teilen, die gsap
   bewegt (docs/fallen.md: Transition sticht Animation aus).
   =========================================================================== */

/* --- Raster: Handy (Grundregel) ------------------------------------------------ */
#karte{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  /* Durchatmen zwischen Karte und Ausg’steckt: das Maß aus basis.css */
  row-gap:var(--durchatmen);
  /* 48 / 72 px; unten legt sich die Bühne von Filmraum II 64 px darüber */
  padding:var(--raum-7) var(--rand) calc(var(--raum-7) + var(--raum-5));
  background:var(--nacht);
}

/* Materialgrund: <picture class="grund karte-grund"> im Markup (Poster von Film 4,
   dieselbe Datei wie im Film), lazy — ein url() im Stil lüde sofort und hielte
   das load-Ereignis auf, an dem die Filme hängen. Grundform .grund (basis.css),
   hier Lage, Ränder und Deckung 0,88; beim Absenken liegt alles weiter unter
   der Bühne. Handy: Band über die volle Breite, oben und unten ins Nachtblau;
   ab 600 px nach allen Seiten. Über reinem Weiß: kalk 11,1, kalk-matt 6,4,
   offen 5,0 : 1. */
#karte .karte-spalte{
  display:grid;grid-template-columns:minmax(0, 1fr);
  max-inline-size:var(--mass-text);
}
#karte .karte-spalte > *{grid-column:1}
#karte .karte-titel{grid-row:1}
#karte .karte-text{grid-row:2}
#karte .karte-buch{grid-row:3}
#karte .karte-grund{
  grid-row:1 / 4;
  margin:calc(-1 * var(--raum-7)) calc(-1 * var(--rand)) calc(-1 * var(--raum-6));
  --grund-deckung:.88;--grund-lage:50% 70%;--grund-von:24%;--grund-bis:72%;
}
/* Handy-Poster (9:16; alles außer Rechner quer, wie die Weiche im <source>): nur
   Tischfläche unter dem Filmbuch (Umbau 27.09.2026). Der Grund steht fast im
   Seitenverhältnis des Posters (390 px: 390 × 658), cover zeigte das ganze Bild samt
   Buch — Messingecke und Buchkante neben dem gezeichneten Deckel, links das helle
   Tischband — und keine object-position half. Das Bild ist 2,8-mal so hoch wie der
   Grund, unten bündig, 80 % nach rechts: zu sehen ist der Tisch ab y 823 von 1280,
   x 359–630 von 720. .karte-grund schneidet den Rest (clip: kein Stapelkontext). */
@media (max-width:999.98px), (orientation:portrait){
  #karte .karte-grund{overflow:clip;--grund-lage:80% 100%}
  #karte .karte-grund > img{block-size:280%;align-self:end}
}
@media (min-width:600px){
  #karte .karte-grund::after{background:radial-gradient(closest-side, var(--grund-farbe) 55%, var(--nacht))}
}
@media (min-width:1000px) and (orientation:landscape){
  #karte .karte-grund{--grund-lage:30% 60%}
}
/* Stufe aller Ruheraum-Titel */
#karte .karte-titel{font-size:var(--gr-1);line-height:var(--zh-anzeige)}
#karte .karte-text{margin-block-start:var(--raum-3)}
#karte .karte-buch{margin-block-start:var(--raum-6)}


/* --- Das Buch im Fluss (summary) ---------------------------------------------- */
#karte .buch{margin:0}
#karte .buch-zu{
  display:flex;align-items:center;gap:var(--raum-5);
  min-block-size:48px;
  list-style:none;cursor:pointer;
  border-radius:var(--radius-kante);
  -webkit-tap-highlight-color:transparent;
}
#karte .buch-zu::-webkit-details-marker{display:none}
#karte .buch-zu::marker{content:""}

/* Deckel: Leinen in Abendblau, Rücken links, Papierschnitt rechts und unten.
   Leinen = zwei ruhende weiche Raster im 3-px-Takt (harte 1-px-Linien bildeten
   beim Flug Moiré); Titel in Laternenlicht (8,6 : 1 auf --abend).
   Dieselbe Gestalt trägt der Deckel im Lesemodus (.lese-deckel), die Schrift
   rechnet mit der Deckelbreite (cqi) und bleibt beim Flug im selben Verhältnis.
   Heller Leinenfaden = --kalk zu 4 % als feste Zahl, nicht color-mix(): ohne
   color-mix fiele die ganze Deklaration weg und der Deckel wäre durchsichtig. */
#karte :is(.buch-deckel, .lese-deckel){
  container-type:inline-size;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--kalk);
  background:
    repeating-linear-gradient(0deg, rgb(238 240 234 / .04) 0, transparent 1.5px, rgb(238 240 234 / .04) 3px),
    repeating-linear-gradient(90deg, rgb(var(--schleier-rgb) / .08) 0, transparent 1.5px, rgb(var(--schleier-rgb) / .08) 3px),
    linear-gradient(90deg, rgb(var(--schleier-rgb) / .6) 0, rgb(var(--schleier-rgb) / .12) 5%, transparent 8%),
    radial-gradient(120% 60% at 50% 0%, rgb(var(--laterne-rgb) / .13), transparent 72%),
    linear-gradient(165deg, var(--abend-hoch), var(--abend) 75%);
  border-radius:var(--radius-kante);
}
/* Deckeltitel „Wein & Jause“ in Imbue, eine Zeile: DE 3,73 em, EN 3,43 em
   (opsz 72) bei 19cqi = 71 bzw. 65 % der Deckelbreite, innerhalb der 80 %
   zwischen den Polstern. */
#karte :is(.buch-deckel-titel, .lese-deckel-titel){
  font-family:var(--schrift-anzeige);font-weight:var(--gew-anzeige);
  font-size:19cqi;line-height:var(--zh-anzeige);letter-spacing:var(--sperrung-anzeige);
  padding-inline:10cqi;
  color:var(--laterne);text-shadow:0 1px 0 rgb(0 0 0 / .45);
}

/* Seitenverhältnis wie die Seite im Lesemodus (Einzelseite 5:8, Doppelseite je
   Hälfte etwa 3:4, karte.js massSetzen): der Deckel fliegt dann fast ohne Verzerrung
   an seinen Platz; den Rest gleicht das Skript an der Schrift aus.
   Mindestbreite 5,5rem: die Deckelschrift (19 % der Breite) steht damit nie
   unter 16,7 px (Mindestschrift 14 px). Die frühere Zeile „Musterkarte“ auf dem
   Deckel (9 px) entfällt — derselbe Hinweis steht daneben in Lesegröße. */
#karte .buch-deckel{
  position:relative;flex:none;
  inline-size:clamp(5.5rem, 24vw, 7.5rem);aspect-ratio:5 / 8;
  box-shadow:
    3px 2px 0 -1px var(--papier),
    6px 4px 0 -2px var(--kalk-matt),
    0 22px 34px -16px rgb(var(--schleier-rgb) / .95);
  transition:transform var(--dauer-mittel) var(--ease-aus);
}
/* Laternenschein am Deckel: ruhend gemalt, bewegt wird nur die Deckkraft
   (Zeiger und Fokus heben ihn an). */
#karte .buch-schein{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:var(--glow-flaeche);
  opacity:.75;
  transition:opacity var(--dauer-mittel) var(--ease-aus);
}
#karte .buch-zu:is(:hover, :focus-visible, :active) .buch-schein{opacity:1}
/* Nur mit echtem Zeiger: nach einem Tippen bliebe :hover sonst hängen, der Deckel
   stünde nach dem Schließen schief im Fluss. */
@media (hover:hover){
  #karte .buch-zu:hover .buch-deckel{transform:translateY(-4px) rotate(-1.5deg)}
}
/* Druck am Finger: Deckel hebt sich sofort (140 ms), sinkt im Übergang zurück */
#karte .buch-zu:active .buch-deckel{
  transform:translateY(-3px) rotate(-1deg);
  transition-duration:var(--dauer-tipp);
}

/* Handy hochkant: das Buch als Held, Beschriftung darunter (Flug nur noch
   etwa 1,6-fach statt 3,8-fach skaliert) */
@media (max-width:599.98px){
  #karte .buch-zu{flex-direction:column;align-items:flex-start;gap:var(--raum-4)}
  #karte .buch-deckel{inline-size:min(58vw, 14rem)}
  /* Tischlicht: ruhender Laternenschein als Grund des Blocks; läuft bei 91 %
     der Höhe aus, die Beschriftung bleibt außerhalb (offen sonst 3,75 : 1) */
  #karte .karte-buch{
    background:radial-gradient(50% 42% at 40% 62%, rgb(var(--laterne-rgb) / .14), transparent 70%);
  }
}
/* Im Lesemodus fliegt der Deckel aus dem Fluss: sein Platz bleibt, er selbst nicht. */
#karte .buch--liest .buch-deckel{visibility:hidden}

#karte .buch-beschriftung{display:flex;flex-direction:column;gap:var(--raum-1);min-inline-size:0}
#karte .buch-knopf{
  position:relative;align-self:flex-start;
  padding-block:var(--raum-2);
  font-weight:var(--gew-stark);font-size:var(--gr-lead);line-height:1.2;color:var(--kalk);
}
/* Laternen-Strich wie .knopf-strich: läuft beim Zeigen ganz aus */
#karte .buch-knopf::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:2px;block-size:2px;
  background:var(--laterne);transform-origin:left center;transform:scaleX(.3);
  transition:transform var(--dauer-mittel) var(--ease-aus);
}
#karte .buch-zu:is(:hover, :focus-visible) .buch-knopf::after{transform:scaleX(1)}
/* Ohne Skript klappt das <details> auf und zu: der Knopf sagt, was er tut.
   display:none nimmt den jeweils anderen Text auch aus dem Vorlesebaum. */
#karte .buch-knopf-zu,
#karte .buch[open] .buch-knopf-auf{display:none}
#karte .buch[open] .buch-knopf-zu{display:inline}
/* „offen“-Ton: hier fehlt die Bestätigung des Betriebs (basis.css) */
#karte .buch-zusatz{font-size:var(--gr-klein);line-height:1.4;color:var(--offen)}


/* --- Die Karte selbst: ohne Skript im aufgeklappten <details>, mit Skript auf
       den Buchseiten. Kalkpapier, Tinte nachtblau (docs/gestaltung.md). -------- */
#karte .buch[open] > .buch-inhalt{
  margin-block-start:var(--raum-5);
  padding:var(--raum-6) var(--raum-5);
  background:var(--papier);color:var(--tinte);
  border-radius:var(--radius-kante);
}
#karte .karte-inhalt{color:var(--tinte)}
#karte .karte-inhalt a{color:var(--tinte);text-decoration-color:var(--tinte)}
/* Die Nummer bricht nicht mitten in den Ziffern. Senkrechtes Polster an einem
   Inline-Verweis verschiebt keine Zeile, vergrößert aber die Tippfläche auf 44 px. */
#karte :is(.karte-inhalt, .termine-feld) a[href^="tel:"]{white-space:nowrap;padding-block:max(0px, (44px - 1.3em) / 2)}
#karte .karte-hinweis{color:var(--tinte-matt)}
#karte .karte-hinweis > b:first-child{display:block;color:var(--tinte);margin-block-end:var(--raum-1)}
#karte .karte-gruppe{margin-block-start:var(--raum-7)}
#karte .karte-gruppe h3{
  font-size:var(--gr-3);line-height:var(--zh-titel);color:var(--tinte);
}
#karte .karte-vorspann{margin-block-start:var(--raum-2);color:var(--tinte-matt)}
#karte .karte-liste{list-style:none;margin:var(--raum-4) 0 0;padding:0}
#karte .karte-posten{
  display:grid;grid-template-columns:minmax(0, 1fr) auto;column-gap:var(--raum-4);
  padding-block:var(--raum-3);
  border-block-start:1px solid color-mix(in srgb, var(--tinte) 16%, transparent);
}
#karte .karte-name{font-weight:var(--gew-stark)}
#karte .karte-kennzeichnung{
  font-weight:var(--gew-text);
  font-size:max(.8em, 14px);
  letter-spacing:.06em;
  color:var(--tinte-matt);
  margin-inline-start:.4em;
}
#karte :is(.karte-einheit, .karte-preis){
  grid-column:2;grid-row:1;align-self:baseline;
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;
  font-size:.9em;color:var(--tinte-matt);
}
#karte .karte-was{grid-column:1 / -1;font-size:.94em;line-height:1.45;color:var(--tinte-matt)}


/* --- Ausg’steckt ------------------------------------------------------------------ */
#karte .ausgesteckt{position:relative;min-inline-size:0}
#karte .ausgesteckt-laterne{position:relative;display:inline-block;padding-inline-end:.2em}
/* Erste Ebene: Lichthof der Laterne, ruhend gemalt. Er geht mit dem Schein der
   Schrift an (zweite Ebene, .motor-glow im Titel) — beide nur über opacity. */
#karte .ausgesteckt-licht{
  /* Seitlich nur knapp über den Titel hinaus: der Verlauf läuft innerhalb seiner
     Fläche ganz aus (closest-side), ein Zuschnitt würde als Kante sichtbar, und
     rechts am Rand darf nichts überlaufen */
  position:absolute;inset:-60% -.2em;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,
    rgb(var(--laterne-rgb) / .24), rgb(var(--laterne-rgb) / .08) 55%, transparent);
  opacity:1;
  transition:opacity 2s var(--ease-aus) .15s;
}
html.motor:not(.motor-ruhig) #karte .ausgesteckt-laterne:has(.motor-glow--aus) .ausgesteckt-licht{opacity:0}
/* Rang h3: eine Stufe unter der h2 „Wein & Jause“ (--gr-2 unter --gr-1), im
   selben Gewicht; vorher standen beide in --gr-1 und die Unterüberschrift wirkte
   mit ihrem Schein stärker als die Überschrift. Wie jede h3 der Ruheräume. */
#karte .ausgesteckt-titel{
  z-index:1;
  font-size:var(--gr-2);line-height:var(--zh-titel);font-weight:var(--gew-anzeige);color:var(--kalk);
}
/* Unterzeile „Wann offen ist“ in der Textschrift (Lead): eine zweite Imbue-Zeile
   direkt unter der h3 hätte fast deren Grad und verwischte den Rang */
#karte .ausgesteckt-unter{
  margin-block-start:var(--raum-2);
  font-family:var(--schrift-text);font-weight:var(--gew-text);
  font-size:var(--gr-lead);line-height:1.35;color:var(--kalk-matt);
}
#karte .rhythmus{
  display:flex;flex-wrap:wrap;gap:var(--raum-2) var(--raum-6);
  margin-block-start:var(--raum-5);
}
#karte .rhythmus > div{display:flex;flex-direction:column}
#karte .rhythmus dt{font-size:var(--gr-klein);line-height:1.4;color:var(--kalk-matt)}
#karte .rhythmus dd{margin:0;font-weight:var(--gew-stark);line-height:1.4}
#karte .rhythmus-quelle{
  margin-block-start:var(--raum-3);
  padding-inline-start:var(--raum-3);
  border-inline-start:2px solid var(--offen);
  font-size:var(--gr-klein);line-height:1.5;color:var(--offen);
}
#karte .termine-feld{margin-block-start:var(--raum-5)}
#karte .termine-leer{max-inline-size:var(--mass-text)}
#karte .termine-titel{
  display:block;margin-block-end:var(--raum-1);
  font-family:var(--schrift-anzeige);font-weight:var(--gew-anzeige);
  font-size:var(--gr-3);line-height:var(--zh-titel);color:var(--kalk);
}
#karte .termine{list-style:none;margin:0;padding:0}
#karte .termin + .termin{margin-block-start:var(--raum-2)}
#karte .termin-hinweis{color:var(--kalk-matt)}


/* --- Zwei Spalten ab 600 px (Tablet, Handy quer, Rechner) ----------------------- */
@media (min-width:600px){
  #karte{
    grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
    column-gap:var(--raum-8);
    align-items:start;
    /* Grund über die volle Breite, Inhalt in der Seitenbreite */
    padding-inline:max(var(--rand), (100% - var(--breite)) / 2);
  }
}
@media (min-width:1000px) and (orientation:landscape) and (min-height:500px){
  #karte{padding-block:var(--raum-9)}
  #karte .buch-deckel{inline-size:clamp(6.5rem, 9vw, 9.5rem);aspect-ratio:3 / 4}
}


/* --- Lesemodus ------------------------------------------------------------------- */
/* Keine Übergänge im Dialog. Bei „Bewegung reduzieren“ gibt basis.css jedem Element
   1 ms Übergang auf alle Eigenschaften: das Skript läse beim Einpassen dann noch die
   alte Seitenbreite (gemessen: 320 statt 544 px, Schrift fiel grundlos auf 80 %). */
#karte .buch-lesen,
#karte .buch-lesen *{transition-property:none !important}
#karte .buch-lesen{
  /* Höhe der Leiste oben: Seitenstand und Schließen, mindestens so hoch wie der Kopf */
  --lese-leiste-h:max(64px, var(--kopf-h, 64px));
  position:fixed;inset:0;z-index:var(--z-lesen, 60);
  display:grid;grid-template-rows:auto minmax(0, 1fr) auto;
  overflow:hidden;color:var(--kalk);
}
/* Oben deckt der Schleier ganz: der Seitenstand steht dort, wo im Kopf die Wortmarke
   liegt, und sie schien durch die 95 % durch (Lauf C, lese 1440×900 und 390×844).
   Darunter läuft er über 3rem in 98,5 % aus (bei 95 % schien die Seite durch). */
#karte .buch-schleier{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgb(var(--schleier-rgb)) 0,
    rgb(var(--schleier-rgb)) var(--lese-leiste-h),
    rgb(var(--schleier-rgb) / .985) calc(var(--lese-leiste-h) + 3rem));
  touch-action:none;
}
#karte .buch-leiste,
#karte .buch-tasten{position:relative;z-index:2;display:flex;align-items:center;gap:var(--raum-3)}
#karte .buch-leiste{
  justify-content:space-between;
  min-block-size:var(--lese-leiste-h);padding:var(--raum-2) var(--raum-2) 0 var(--rand);
}
#karte .buch-stand{font-size:var(--gr-klein);line-height:1.4;color:var(--kalk-matt)}
#karte .buch-tasten{
  justify-content:center;
  padding:0 var(--raum-3) calc(var(--raum-3) + env(safe-area-inset-bottom, 0px));
}
#karte .buch-taste{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--raum-2);
  min-block-size:48px;min-inline-size:48px;padding:0 var(--raum-4);
  border:1px solid var(--linie-knopf);border-radius:var(--radius-kante);
  color:var(--kalk);font-weight:var(--gew-stark);font-size:var(--gr-text);line-height:1.15;
  white-space:nowrap;
}
/* Unter 400 px passen beide Beschriftungen nur enger gesetzt nebeneinander
   (360 px: 376 px nötig) — Text bleibt sichtbar, nie unter 14 px */
@media (max-width:399.98px){
  #karte .buch-tasten{gap:var(--raum-2);padding-inline:var(--raum-2)}
  #karte .buch-taste:not(.buch-taste--zu){gap:var(--raum-1);padding-inline:var(--raum-3);font-size:var(--gr-klein)}
}
#karte .buch-taste:hover{border-color:var(--kalk)}
#karte .buch-taste:disabled{opacity:.38;cursor:default;border-color:var(--linie-knopf)}
#karte .buch-taste svg{flex:none}
#karte .buch-taste--zu{border-color:transparent}
#karte .buch-taste--zu:hover{border-color:var(--linie-knopf)}

#karte .buch-offen{
  position:relative;z-index:1;min-block-size:0;
  display:grid;place-items:center;
  padding:var(--raum-3);
}

/* Das Buch: rechts liegt der Seitenstapel auf dem Rückdeckel. Die Seiten sind
   6 px eingerückt. Der Einband ist flach (kein preserve-3d): jedes drehende Teil
   trägt die Perspektive in der eigenen Transformation (docs/fallen.md). */
#karte .lese-buch{
  --spalten:1;
  --p:2200px;
  position:relative;
  inline-size:calc(var(--seite-b, 20rem) * var(--spalten));
  block-size:var(--seite-h, 30rem);
  transform-origin:0 0;
  touch-action:pan-y;
}
#karte .lese-buch[data-doppel]{--spalten:2;--p:3000px}
#karte .lese-buch.zieht{-webkit-user-select:none;user-select:none;cursor:grabbing}
#karte :is(.lese-rueck, .lese-deckel, .lese-innen){
  position:absolute;inset-block:0;inset-inline-end:0;inline-size:var(--seite-b, 20rem);
}
#karte .lese-rueck{
  background:linear-gradient(165deg, var(--abend-hoch), var(--abend) 75%);
  border-radius:0 var(--radius-kante) var(--radius-kante) 0;
  box-shadow:0 30px 60px -24px rgb(var(--schleier-rgb) / .9);
  display:grid;place-items:center;
}
#karte .lese-ende{
  visibility:hidden;
  max-inline-size:18ch;padding:var(--raum-5);text-align:center;
  font-family:var(--schrift-anzeige);font-size:var(--gr-3);line-height:var(--zh-titel);
  color:var(--kalk-matt);
}
#karte .lese-buch[data-ende] .lese-ende{visibility:visible}

#karte :is(.lese-deckel, .lese-innen, .lese-vorn, .lese-hinten){
  transform-origin:0 50%;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
#karte .lese-deckel{position:absolute}
#karte .lese-innen{
  background:
    radial-gradient(90% 55% at 60% 18%, rgb(var(--laterne-rgb) / .1), transparent 70%),
    var(--nacht);
  border-radius:var(--radius-kante) 0 0 var(--radius-kante);
  transform:perspective(var(--p)) rotateY(0deg) translateX(100%) rotateY(180deg);
}

/* Blätter: Vorderseite liegt rechts, Rückseite nach dem Umblättern links. */
#karte :is(.lese-vorn, .lese-hinten){
  position:absolute;inset-block:6px;inset-inline-end:6px;
  inline-size:calc(var(--seite-b, 20rem) - 6px);
  overflow:hidden;
  background-color:var(--papier);color:var(--tinte);
}
#karte .lese-vorn{
  border-radius:0 var(--radius-kante) var(--radius-kante) 0;
  background-image:linear-gradient(90deg, rgb(var(--schleier-rgb) / .16), rgb(var(--schleier-rgb) / 0) 7%);
}
#karte .lese-hinten{
  border-radius:var(--radius-kante) 0 0 var(--radius-kante);
  background-image:linear-gradient(270deg, rgb(var(--schleier-rgb) / .16), rgb(var(--schleier-rgb) / 0) 7%);
  transform:perspective(var(--p)) rotateY(0deg) translateX(100%) rotateY(180deg);
}
/* Ruhelage nach dem Umblättern: dieselbe Lage wie am Ende der Drehung, aber flach
   gerechnet (kein 3D in Ruhe, die Schrift bleibt scharf) */
#karte :is(.lese-vorn, .lese-deckel).ist-um{transform:perspective(var(--p)) rotateY(-180deg)}
#karte :is(.lese-hinten, .lese-innen).ist-um{transform:translateX(-100%)}
#karte .lese-weg{visibility:hidden}
/* Am Handy klappt der Deckel ganz weg */
#karte .lese-buch:not([data-doppel]) .lese-innen.ist-um{visibility:hidden}

#karte .lese-text{
  position:absolute;inset:0;
  overflow-y:auto;overscroll-behavior:contain;
  /* touch-action muss am Scroll-Container selbst stehen (docs/fallen.md) */
  touch-action:pan-y;
  padding:1.35em 1.25em 2.4em 1.5em;
  font-size:calc(var(--gr-text) * var(--buch-f, 1));line-height:1.5;
}
#karte .lese-hinten .lese-text{padding:1.35em 1.5em 2.4em 1.25em}
#karte .lese-text .karte-gruppe{margin:0}
#karte .lese-text .karte-gruppe h3{font-size:1.5em}
#karte .lese-text .karte-posten{padding-block:.5em}
/* Titelseite: Imbue ist schmal, 3em („Wein & Jause“ 3,74 em breit = 11,2 em der
   Lesegröße) steht fast so breit wie bis 28.09.2026 2,4em (12,1 em) */
#karte .lese-titel{
  font-size:3em;line-height:var(--zh-anzeige);color:var(--tinte);
  margin-block-end:.7em;
}
/* Seite 1 als Titelseite: Titel bei etwa 38 % der freien Höhe, der Hinweis unten;
   reicht die Höhe nicht, fallen die Leerzeilen weg und die Seite rollt */
#karte .lese-vorn[data-seite="0"] > .lese-text{
  display:grid;grid-template-rows:minmax(0, 38fr) auto minmax(0, 62fr) auto;
}
#karte .lese-vorn[data-seite="0"] .lese-titel{grid-row:2}
#karte .lese-vorn[data-seite="0"] .karte-hinweis{grid-row:4}
#karte .lese-titel:focus{outline:none;box-shadow:none}
#karte .lese-text .karte-hinweis{font-size:max(.95em, 14px)}
/* Kleinere Zeilen im Buch nie unter 14 px, auch wenn --buch-f die Schrift einpasst */
#karte .lese-text .karte-was{font-size:max(.94em, 14px)}
#karte .lese-text :is(.karte-einheit, .karte-preis){font-size:max(.9em, 14px)}
/* Seitenzahl als Fußsteg auf Papier: rollt eine lange Seite (niedriger Schirm),
   läuft der Text darunter weg statt durch die Zahl */
#karte .lese-nr{
  position:absolute;inset-block-end:0;inset-inline:0;
  padding:.8em 0 .45em;
  background:linear-gradient(to bottom, transparent, var(--papier) 55%);
  text-align:center;pointer-events:none;
  font-size:var(--gr-klein);line-height:1.2;color:var(--tinte-matt);
  font-variant-numeric:lining-nums tabular-nums;
}
/* Licht auf dem drehenden Blatt: ruhender Verlauf, bewegt wird die Deckkraft */
#karte .lese-licht{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,
    rgb(var(--schleier-rgb) / .34), rgb(var(--schleier-rgb) / .08) 55%,
    color-mix(in srgb, var(--kalk) 22%, transparent));
}
#karte .lese-hinten .lese-licht{transform:scaleX(-1)}

@media (prefers-reduced-motion:reduce){
  #karte .buch-zu:is(:hover, :active) .buch-deckel{transform:none}
  #karte :is(.buch-schein, .ausgesteckt-licht){transition:none}
  #karte .buch-knopf::after{transform:scaleX(1)}
}
@media print{
  #karte .buch-lesen{display:none}
}

/* === quelle/stil/glas.css === */
/* ===========================================================================
   glas.css — Kapitel „glas“ im Filmraum II, Film 3 „Vom Stock ins Glas“
   Nur Selektoren unter #glas. Bühne, Verlauf, Aufhellen, Lage und Seite des
   Blocks (data-lage, data-seite), die Blockmaße und die Kopfzeile in Imbue 400
   wie jeder Filmtitel kommen aus basis.css, der Auftritt des Rahmens (.halt)
   aus dem Kern. Keine eigene Bewegung, also auch nichts für „Bewegung reduzieren“.

   Der KI-Hinweis ist seit Lauf E die eine Unterzeile des Blocks und sieht aus
   wie jede Unterzeile. Hier nur: keine Silbentrennung im Block, ein
   getrenntes Wort sah in der kurzen Zeile unruhig aus.
   =========================================================================== */
#glas p{hyphens:manual}

/* === quelle/stil/abend.css === */
/* ===========================================================================
   abend.css — Kapitel „abend“ über Film 2 „Vom Tag in den Abend“ (Filmraum II).
   Nur Selektoren unter #abend; Tokens aus basis.css. Bühne, Verlauf, Absenken,
   Lage (data-lage/data-seite) und die Blockmaße (Bewegungsbuch D.2) stehen in
   basis.css — hier nur, was dieses Kapitel allein hat:

   1. Die Kopfzeile in Imbue 400 setzt basis.css samt Anzeige-Stufe; hier nur
      keine Silbentrennung in der Unterzeile.
   2. Laternen-Zünden: eine ruhende Schein-Ebene NEBEN dem Titel (legt
      motor/abschnitte/abend.js an und passt sie auf den Titel ein). Der Schein
      ist einmal gemalt; bewegt wird nur ihre Deckkraft, im Takt des Films. Sie
      liegt hinter der Schrift (z-index -1 im eigenen Stapelkontext) und nimmt
      keine Klicks an. Ohne Skript und bei „Bewegung reduzieren“ gibt es sie nicht.
   =========================================================================== */

#abend{position:relative;isolation:isolate}

/* Ortsnamen nicht trennen („Dürn-stein“ bei 390 px); die Unterzeile hat 1–2 Zeilen */
#abend .abend-text{hyphens:manual}

#abend .abend-schein{
  position:absolute;z-index:-1;margin:0;
  display:block;box-sizing:border-box;
  pointer-events:none;-webkit-user-select:none;user-select:none;
  color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:0 0 .28em var(--motor-glow-nah), 0 0 .9em var(--motor-glow-weit);
  opacity:0;
}

@media (prefers-reduced-motion:reduce){
  #abend .abend-schein{display:none}
}
@media print{
  #abend .abend-schein{display:none}
}

/* === quelle/stil/bilder.css === */
/* ===========================================================================
   bilder.css — Abschnitt „bilder“: Galerie der echten Fotos im Ruheraum B.
   Nur Selektoren unter #bilder; Tokens aus basis.css.

   Ruheraum (Bewegungsbuch A.1): normaler Fluss auf Nachtblau, kein Film
   dahinter, großzügige Abstände. Film 2 und sein Kapitel stehen in abend.*.
   Jedes Foto steht im Rundbogen — der einzigen Rundung der Seite (A.4) —,
   ohne Kachelrahmen, ohne Grundfläche und Ring um die Kachel (F.9). Über
   einem Foto zeigt der Zeiger „zoom-in“ (F.7).

   Handy (Grundregel): Wischstreifen, die nächste Kachel schaut am Rand herein.
   Eingerastet wird nur am Zeigegerät (docs/fallen.md: scroll-snap fühlt sich
   am Finger wie Hängenbleiben an). Rechner ab 1000 px: Raster 4 × 2.
   Kein Schwung der Kacheln im Streifen (unten, seit 27.09.2026).
   Keine Einblendung: der Text steht ab dem ersten Bild.
   Leuchtkasten: <dialog>, nur mit Skript geöffnet (motor/abschnitte/bilder.js).
   =========================================================================== */

#bilder{
  --bilder-spalt:var(--raum-3);
  /* Kachelbreite im Streifen: die nächste Kachel schaut herein; auf niedrigen
     Schirmen (Handy quer) passt die Kachel (4:5) samt Titel ins Bild. */
  --bilder-kachel-b:min(72vw, 20rem, 56svh);
  position:relative;
  /* unten knapp: die Anfahrt atmet danach, zusammen unter 0,15 Bildschirmen */
  padding-block:var(--raum-abschnitt) var(--raum-6);
  background:var(--nacht);
}

/* Stufe aller Ruheraum-Titel */
#bilder .bilder-titel{
  padding-inline:var(--rand);
  font-size:var(--gr-1);line-height:var(--zh-anzeige);
}

/* --- Streifen ------------------------------------------------------------- */
/* Das Polster oben und unten hält den Fokusring samt Hof sichtbar. */
#bilder .bilder-streifen{
  display:flex;gap:var(--bilder-spalt);
  margin:var(--raum-5) 0 0;padding:var(--raum-3) var(--rand);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-padding-inline:var(--rand);
  scrollbar-width:none;
}
#bilder .bilder-streifen::-webkit-scrollbar{display:none}
#bilder .bilder-bild{flex:none;inline-size:var(--bilder-kachel-b)}

/* Rundbogen: der übergroße Radius wird anteilig gekürzt, bis er passt — bei
   4:5 ergibt das oben genau den Halbkreis, unten die gerade Kante. */
#bilder .bilder-bild > a{
  display:block;aspect-ratio:4 / 5;
  border-radius:999px 999px var(--radius-kante) var(--radius-kante);
  overflow:clip;
  /* Grund nur, solange das Foto lädt; das Foto deckt ihn ganz */
  background:var(--abend);
  color:inherit;text-decoration:none;cursor:zoom-in;
  transition:scale var(--dauer-tipp) var(--ease-aus);
}
/* Druck-Rückmeldung am Finger wie .knopf:active (basis.css) */
#bilder .bilder-bild > a:active{scale:.98}
#bilder .bilder-bild picture{block-size:100%}
#bilder .bilder-bild img{
  inline-size:100%;block-size:100%;max-inline-size:none;
  object-fit:cover;
  transition:transform var(--dauer-lang) var(--ease-aus);
}
/* Querformat Stiege im Hochformat-Ausschnitt: Löwe und Stiege in der Mitte
   (an der Klasse, nicht an der Stelle im Streifen) */
#bilder .bilder-bild--stiege img{object-position:42% 50%}
/* Löwe vor Dürnstein (erstes Foto): Ausschnitt nach unten, weniger schwarzer
   Nachthimmel in der Kuppe (am Motiv, nicht an der Stelle im Streifen) */
#bilder .bilder-bild img[src*="loewe-vor-duernstein"]{object-position:50% 75%}

@media (hover:hover){
  #bilder .bilder-bild > a:hover img{transform:scale(1.035)}
}

/* Kein Schwung der Kacheln im Wischstreifen: acht scroll-getriebene scale-
   Animationen liefen seitenweit ohne Compositor und kosteten beim senkrechten
   Scrollen gestörte Bilder (docs/archiv/umbau-2026-09-27/nullruckeln.md). */
@media (hover:hover) and (pointer:fine){
  #bilder .bilder-streifen{
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;scrollbar-color:var(--linie-knopf) transparent;
  }
  #bilder .bilder-streifen::-webkit-scrollbar{display:block;block-size:6px}
  #bilder .bilder-streifen::-webkit-scrollbar-thumb{background:var(--linie-knopf)}
  #bilder .bilder-bild{scroll-snap-align:start}
}

/* --- Rechner: Raster 4 × 2 ------------------------------------------------ */
@media (min-width:1000px){
  /* Breite auch aus der Höhe: nach einem Sprung auf #bilder stehen Titel und
     beide Reihen ganz im Bild. Zwei Reihen 4:5 = 2,5 Kacheln + Spalt; Platz =
     Schirm − Kopf − Polster − Titel (eine Zeile --gr-1) − Abstand darunter
     (--raum-6) − 1 rem Luft; Breite = 4 Kacheln + 3 Spalte = 1,6 · (Platz −
     Spalt) + 3 Spalte; auf sehr niedrigen Schirmen nie unter 40 rem (Kachel
     ≥ 9 rem), dann wird gescrollt.
     Eine Zeile Titel ist hier gesichert, nicht angenommen: die Schrift ist
     höchstens Breite ÷ --bilder-titel-em. Das ist die Breite des Titels in em,
     einzeilig gemessen (Imbue 400 bei opsz 72, ohne Sperrung: DE 7,75,
     EN 8,86), plus 3 % Reserve —
     bei neuem Titeltext nachmessen. Ohne diese Schranke brach --gr-1 bei 1366×768
     und 1280×720 zweizeilig um, und die zweite Reihe lag halb unter dem Rand. */
  #bilder{
    --bilder-spalt:var(--raum-5);
    --bilder-hoch-b:max(40rem,
      1.6 * (100svh - var(--kopf-h) - var(--raum-abschnitt) - var(--gr-1) * var(--zh-anzeige) - var(--raum-6) - 1rem
        - var(--bilder-spalt)) + 3 * var(--bilder-spalt));
    --bilder-titel-em:8.0;
  }
  #bilder:lang(en){--bilder-titel-em:9.15}
  #bilder :is(.bilder-titel,.bilder-streifen){
    inline-size:min(100% - 2 * var(--rand), 70rem, var(--bilder-hoch-b));
    margin-inline:auto;padding-inline:0;
  }
  /* 100vw statt 100 %: in font-size hieße % die Schriftgröße; die Rollleiste
     (bis 15 px) fängt die Reserve auf */
  #bilder .bilder-titel{
    font-size:min(var(--gr-1), min(100vw - 2 * var(--rand), 70rem, var(--bilder-hoch-b)) / var(--bilder-titel-em));
  }
  #bilder .bilder-streifen{
    display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));
    margin-block-start:var(--raum-6);padding-block:0;
    overflow:visible;scroll-snap-type:none;
  }
  #bilder .bilder-bild{inline-size:auto}
}

/* --- Leuchtkasten ---------------------------------------------------------- */
#bilder .bilder-kasten{
  position:fixed;inset:0;
  inline-size:100%;block-size:100%;max-inline-size:none;max-block-size:none;
  margin:0;padding:var(--raum-3) var(--rand) calc(var(--raum-4) + env(safe-area-inset-bottom, 0px));
  border:0;background:none;color:var(--kalk);
  overflow:hidden;overscroll-behavior:contain;
  /* Wischen gehört dem Leuchtkasten, Zoomen mit zwei Fingern bleibt */
  touch-action:pinch-zoom;
}
#bilder .bilder-kasten::backdrop{background:transparent}
#bilder .bilder-kasten[open]{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto minmax(0, 1fr) auto auto;
  grid-template-areas:". zu" "flaeche flaeche" "text text" "zurueck weiter";
  gap:var(--raum-3);
}
#bilder .bilder-kasten-grund{
  position:absolute;inset:0;z-index:-1;
  background:var(--nacht-tief);
}
#bilder .bilder-kasten-flaeche{grid-area:flaeche;position:relative;min-block-size:0}
#bilder .bilder-kasten-bild{
  position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;
  object-fit:contain;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
}
#bilder .bilder-kasten-text{
  grid-area:text;justify-self:center;text-align:center;
  max-inline-size:var(--mass-text);color:var(--kalk-matt);
  min-block-size:4.5em;hyphens:manual;
}
#bilder .bilder-kasten-zahl{display:block;color:var(--kalk);white-space:nowrap}
#bilder .bilder-kasten-zu{grid-area:zu;justify-self:end}
#bilder .bilder-kasten-zurueck{grid-area:zurueck;justify-self:start;min-inline-size:7.5rem}
#bilder .bilder-kasten-weiter{grid-area:weiter;justify-self:end;min-inline-size:7.5rem}
@media (min-width:1000px){
  #bilder .bilder-kasten[open]{
    grid-template-columns:auto minmax(0, 1fr) auto;
    grid-template-rows:auto minmax(0, 1fr) auto;
    grid-template-areas:". . zu" "zurueck flaeche weiter" ". text .";
    column-gap:var(--raum-6);
  }
  #bilder .bilder-kasten-zurueck,#bilder .bilder-kasten-weiter{align-self:center}
}

/* --- Bewegung reduzieren, Druck ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  #bilder .bilder-bild > a:hover img{transform:none}
  #bilder .bilder-bild > a:active{scale:none}
}
@media print{
  #bilder .bilder-streifen{flex-wrap:wrap;overflow:visible}
  #bilder .bilder-kasten,#bilder .bilder-kasten[open]{display:none}
}

/* === quelle/stil/anfahrt.css === */
/* ===========================================================================
   anfahrt.css — Anfahrt und häufige Fragen (quelle/abschnitte/anfahrt.*.html)
   Nur Selektoren unter #anfahrt, Farben und Maße aus basis.css.

   Ruheraum B (Bewegungsbuch A.1): normaler Fluss auf Nachtblau, kein Film
   dahinter, Lesetypografie. Nichts blendet ein, der Text steht ab dem ersten
   Bild. Es bewegt sich nur, was der Gast selbst auslöst: eine Frage klappt auf
   (die Fragen darunter gleiten per FLIP, motor/abschnitte/anfahrt.js), der
   Lageplan blendet ein, wenn er geladen hat. Nur transform und opacity.

   Handy: Adresse auf Stein (Materialgrund), das Feld des Lageplans mit Knopf
   und Hinweis, „Häufige Fragen“ und zwölf Fragen untereinander. Jede Frage ist
   eine Tippfläche von mindestens 52 px samt Trennlinie (zweizeilig 58 px).
   Ab 834 px: Fragen in zwei Spalten.
   Ab 1000 px quer: links Adresse und Lageplan als Feld, rechts die Fragen.
   =========================================================================== */

/* Durchatmen (Bewegungsbuch E): 0,09 Bühnenhöhen Nachtblau vor dem Abschnitt
   (Galerie → Anfahrt) und danach (Anfahrt → Fuß), ohne Bewegung (bis 27.09.2026
   0,25, ein leerer Viertelbildschirm). --buehne-h ist die Bühnenhöhe B aus
   basis.css, der Ersatzwert rechnet sie genauso.
   Handy (Inhalt länger als ein Bildschirm): als Außenabstand. Der Menüsprung
   landet an der Oberkante des Abschnitts, das Atemholen davor liegt dann über
   der Kopfzeile, und die Überschrift steht gleich oben; ein Außenabstand der
   Galerie fällt mit diesem zusammen, statt sich zu addieren. Ab 834 px mit
   genug Höhe und am Rechner quer: als Polster („Ein Bildschirm“ unten).

   Menüsprung bündig, auch beim Laden einer Adresse mit #anfahrt: Das Ziel
   steht nahe am Seitenende. Ist der Rest der Seite ab #anfahrt kürzer als
   Bildschirm − Kopf, begrenzt das Seitenende den Sprung, und das Ziel bleibt
   unter der Kopfzeile hängen. In Lauf C füllten Abschnitt + Fuß genau diese
   Höhe, mit der Fußhöhe aus dem Skript. Nachgemessen am 18.09.2026 (1440 × 900,
   Schriften 900 ms verzögert, 3 Läufe): Das Skript maß den Fuß noch mit
   Ersatzschrift (328,8 px), dann kam die echte Schrift (301,2 px); für ein Bild
   war die Seite 27 px zu kurz, der Browser kappte die Scrollstelle (4751 statt
   4777) und holte den Sprung nicht jedes Mal nach (1 von 3 Läufen +26 px).
   Deshalb hängt die Mindesthöhe nicht mehr am Fuß: Abschnitt + Durchatmen
   danach füllen allein Bildschirm − Kopf, das Seitenende liegt immer eine
   ganze Fußhöhe hinter dem Sprungziel, was der Fuß auch gerade misst. Kosten:
   wo der Inhalt kürzer ist als ein Bildschirm (Rechner), rund eine Fußhöhe
   Seitenlänge.
   Der Inhalt steht oben, nicht mittig: mittig verschob ihn der Schriftwechsel
   um die halbe Höhenänderung, und die Scroll-Verankerung des Browsers zog die
   Scrollstelle nach (1920 × 1080, Schriften verzögert: 4 von 4 Läufen −3 px).
   Oben unter festem Polster bleibt der Anker liegen. */
#anfahrt{
  --anfahrt-atem:calc(.09 * var(--buehne-h, calc(100svh - var(--kopf-h) - var(--leiste-h, 0px))));
  margin-block:var(--anfahrt-atem);
  min-block-size:calc(100svh - var(--kopf-h) - var(--anfahrt-atem));
  padding-block:var(--raum-5) var(--raum-4);
}
#anfahrt .anfahrt-raster{display:grid;gap:var(--raum-4)}

/* --- Adresse -------------------------------------------------------------- */
/* „Anfahrt“ gehört zum Namen der Überschrift (Menüziel). Am Handy liest es nur
   der Vorleser: die Adresse erklärt sich selbst. Ab 834 px steht es sichtbar da.
   „Häufige Fragen“ steht auf jeder Breite sichtbar (seit 27.09.2026). */
#anfahrt .anfahrt-titel-weg{
  position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
#anfahrt .anfahrt-titel{display:flex;flex-direction:column;gap:var(--raum-2)}
/* Sichtbar wie jede Dachzeile: Hanken 600, gesperrte Versalien in Laternenlicht
   (Materialgrund 0,90 über Weiß: heller als kalk-matt, also über 6,85 : 1) */
#anfahrt .anfahrt-titel-weg{
  font-family:var(--schrift-text);font-weight:var(--gew-stark);
  font-size:var(--gr-kicker);line-height:1.3;
  letter-spacing:var(--sperrung-kicker);text-transform:uppercase;
  color:var(--laterne);
}
/* Rang h2 wie „Wein & Jause“ und die Galerie: --gr-1 auf jeder Breite. Imbue ist
   schmal genug für die Spalte am Rechner quer: „Rossatzbach 36“ 4,36 em, bei
   1000 px 73 px Schrift = 315 px in 363 px Spalte (bis 28.09.2026 dort --gr-2) */
#anfahrt .anfahrt-titel-adresse{
  display:block;inline-size:fit-content;
  font-size:var(--gr-1);line-height:var(--zh-anzeige);color:var(--kalk);
}
/* Ortsnamen nicht trennen („Donau-ufer“, „oppo-site“ gesehen bei 360 und 1440 px) */
#anfahrt .anfahrt-lage{margin-block-start:var(--raum-1);max-inline-size:52ch;color:var(--kalk-matt);hyphens:manual}

/* Materialgrund hinter der Adresse: die Steinmauer (Galeriefoto) unter 0,90
   Nachtblau, oben und unten ins Nachtblau. Grundform .grund (basis.css) wie
   hinter der Karte: <picture> im Markup, Quellen und sizes wie in der Galerie
   (dieselbe Datei), lazy. Über reinem Weiß: kalk 11,8, kalk-matt 6,9 : 1. */
#anfahrt .anfahrt-ort{display:grid;grid-template-columns:minmax(0, 1fr)}
#anfahrt .anfahrt-ort > *{grid-column:1}
#anfahrt .anfahrt-titel{grid-row:1}
#anfahrt .anfahrt-lage{grid-row:2}
#anfahrt .lageplan{grid-row:3}
/* Zweite Zeile (Routen-Links) unter dem Lageplan, nicht auf der Adresse. */
#anfahrt .anfahrt-ort > .anfahrt-lage ~ .anfahrt-lage{grid-row:4}
#anfahrt .anfahrt-grund{
  grid-row:1 / 3;
  margin:calc(-1 * var(--raum-8)) calc(-1 * var(--rand)) calc(-1 * var(--raum-3));
  --grund-deckung:.90;--grund-lage:50% 68%;--grund-von:38%;--grund-bis:70%;
}

/* --- Lageplan -------------------------------------------------------------
   Ohne Skript steht nur der Link zu OpenStreetMap da. Das Skript tauscht ihn
   gegen den Knopf; nach dem Klick wird das Feld zum Kartenfenster, der Rahmen
   blendet ein, sobald er geladen hat. Der Hinweis wird dabei zur Statuszeile.
   Das Feld steht schon vor dem Klick in Kartengröße da: Laden verschiebt nichts. */
#anfahrt .lageplan{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--raum-2) var(--raum-3);margin-block-start:var(--raum-3);
}
#anfahrt .lageplan-bedienung{display:flex;flex-wrap:wrap;align-items:center;gap:var(--raum-2) var(--raum-5);max-inline-size:100%}
#anfahrt .lageplan-bedienung .knopf-rand{padding-inline:var(--raum-4)}
#anfahrt .lageplan-hinweis{
  flex:1 1 8rem;margin:0;max-inline-size:46ch;
  font-size:var(--gr-klein);line-height:1.45;color:var(--kalk-matt);
}
/* Feld reservieren (außer Rechner quer, dort unten): Größe wie geladen — 4:3, ab
   600 px 16:10, höchstens 70 % der Höhe —, Rand, Grund --abend, Inhalt mittig */
@media not all and (min-width:1000px) and (orientation:landscape){
  #anfahrt .lageplan{
    display:grid;place-content:center;justify-items:center;gap:var(--raum-3);
    aspect-ratio:4 / 3;max-block-size:min(70svh, 36rem);
    padding:var(--raum-5);
    border:1px solid var(--linie);border-radius:var(--radius-kante);
    background:var(--abend);text-align:center;
  }
  #anfahrt .lageplan-bedienung{justify-content:center}
  #anfahrt .lageplan-hinweis{max-inline-size:30ch}
  @media (min-width:600px){
    #anfahrt .lageplan{aspect-ratio:16 / 10}
  }
}
#anfahrt .lageplan[data-lageplan-geladen]{
  display:block;aspect-ratio:4 / 3;max-block-size:min(70svh, 36rem);
  border:1px solid var(--linie);border-radius:var(--radius-kante);
  background:var(--abend);overflow:hidden;
}
#anfahrt .lageplan[data-lageplan-geladen] .lageplan-bedienung{display:none}
#anfahrt .lageplan[data-lageplan-geladen] .lageplan-hinweis{
  position:absolute;inset:0;display:grid;place-items:center;margin:0;
  padding:var(--raum-5);max-inline-size:none;text-align:center;
}
#anfahrt .lageplan iframe{
  position:absolute;inset:0;inline-size:100%;block-size:100%;border:0;display:block;
  opacity:0;transition:opacity var(--dauer-mittel) var(--ease-aus);
}
#anfahrt .lageplan iframe[data-lageplan-da]{opacity:1}
/* Das Feld schneidet über, deshalb trägt es den Fokusring des Rahmens.
   :focus-within statt :focus-visible am Rahmen: der Fokus kommt nur vom Knopf
   dorthin (anfahrt.js), und ein vom Skript gesetzter Fokus zählt in Chromium
   nicht als sichtbar. */
#anfahrt .lageplan[data-lageplan-geladen]:focus-within{outline:3px solid var(--laterne);outline-offset:3px}

/* --- Fragen ---------------------------------------------------------------
   Die Frage selbst ist die Tippfläche. Das Zeichen rechts ist ein Plus aus zwei
   Laternenstrichen; beim Aufklappen legt sich der senkrechte flach (rotate).
   Die Trennlinie liegt als Schatten oben in der Tippfläche statt als Rand
   darunter. Frage in Lesegröße (16 px, 600), mindestens 52 px, zweizeilig 58 px.
   Die Schlusslinie sitzt als Schatten an der letzten Frage und gleitet mit. */
/* Rang h3 wie „Ausg’steckt“ (karte.css): --gr-2 in Imbue */
#anfahrt .anfahrt-fragen-titel{
  margin-block-end:var(--raum-3);
  font-size:var(--gr-2);line-height:var(--zh-titel);
}
#anfahrt .faq-spalte:last-child > details:last-child{box-shadow:inset 0 -1px 0 var(--linie)}
/* Grund wie der Abschnitt: gleitende Fragen decken die Antwort ab (keine Schrift
   über Schrift) */
#anfahrt .faq details{background:var(--nacht)}
#anfahrt .faq summary{
  position:relative;display:flex;align-items:center;
  min-block-size:52px;padding-block:var(--raum-2);padding-inline-end:var(--raum-6);
  box-shadow:inset 0 1px 0 var(--linie);
  list-style:none;cursor:pointer;
  font-weight:600;font-size:1rem;line-height:1.3;color:var(--kalk);
  -webkit-tap-highlight-color:transparent;
  transition:color var(--dauer-kurz) var(--ease-aus);
}
#anfahrt .faq summary::-webkit-details-marker{display:none}
#anfahrt .faq summary::before,
#anfahrt .faq summary::after{
  content:"";position:absolute;inset-inline-end:var(--raum-2);inset-block-start:50%;
  inline-size:14px;block-size:2px;margin-block-start:-1px;
  background:var(--laterne);
  transition:transform var(--dauer-mittel) var(--ease-aus);
}
#anfahrt .faq summary::after{transform:rotate(90deg)}
#anfahrt .faq details[open] > summary::after{transform:rotate(0deg)}
#anfahrt .faq summary:hover{color:var(--laterne)}
/* Druck am Finger: sofort Laternenlicht, losgelassen klingt es aus */
#anfahrt .faq summary:active{color:var(--laterne);transition-duration:0s}
#anfahrt .faq summary:focus-visible{outline-offset:2px}
#anfahrt .faq .antwort{
  padding-block:var(--raum-1) var(--raum-4);max-inline-size:var(--mass-text);
  color:var(--kalk-matt);
}
#anfahrt .faq .antwort b{color:var(--kalk)}
#anfahrt .faq .antwort b.offen{color:var(--offen)}
/* Die Antwort kommt beim Aufklappen kurz von oben, im Takt der Fragen (280 ms) */
#anfahrt .faq details[open] > .antwort{animation:anfahrt-antwort 280ms cubic-bezier(.22,.61,.36,1) both}
@keyframes anfahrt-antwort{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}

/* --- Tablet: Fragen zweispaltig ----------------------------------------- */
@media (min-width:600px){
  #anfahrt .lageplan[data-lageplan-geladen]{aspect-ratio:16 / 10}
}
@media (min-width:834px){
  #anfahrt .anfahrt-titel-weg{position:static;inline-size:auto;block-size:auto;margin:0;overflow:visible;clip-path:none;white-space:normal}
  #anfahrt .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--raum-6)}
  #anfahrt .faq-spalte{align-self:start}
  #anfahrt .faq-spalte > details:last-child{box-shadow:inset 0 -1px 0 var(--linie)}
}

/* --- Ein Bildschirm ------------------------------------------------------
   Ab 834 px Breite (Fragen zweispaltig) und genug Höhe, und am Rechner quer,
   ist der Inhalt kürzer als ein Bildschirm. Dort ist der Abschnitt mindestens
   Bildschirm − Kopf hoch und das Durchatmen liegt oben und unten als Polster:
   nach dem Menüsprung steht der Inhalt um die Bildmitte statt oben mit einer
   Leerfläche nur darunter (gesehen bei 834 × 1112 und 1440 × 900 mit
   Außenabstand), weil Inhalt + 2 × Durchatmen dort ungefähr einen Bildschirm
   ergeben. Das Seitenende liegt weiter eine ganze Fußhöhe hinter dem Ziel.
   Hier bleibt das Durchatmen bei 0,25 B: es stellt den Inhalt in die Bildmitte.
   Handy quer (844 × 390) bleibt beim Außenabstand. */
@media (min-width:834px) and (min-height:700px), (min-width:1000px) and (orientation:landscape){
  #anfahrt{
    --anfahrt-atem:calc(.25 * var(--buehne-h, calc(100svh - var(--kopf-h) - var(--leiste-h, 0px))));
    margin-block:0;
    min-block-size:calc(100svh - var(--kopf-h));
    padding-block:var(--anfahrt-atem);
  }
}

/* --- Rechner quer: links Adresse und Lageplan, rechts die Fragen ----------- */
@media (min-width:1000px) and (orientation:landscape){
  #anfahrt .anfahrt-raster{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--raum-8);align-items:start}
  #anfahrt .anfahrt-grund::after{background:radial-gradient(closest-side, var(--grund-farbe) 55%, var(--nacht))}
  #anfahrt .faq .antwort{font-size:var(--gr-klein);line-height:1.55}
  /* Das Feld steht schon vor dem Klick dort, wo die Karte erscheinen wird */
  #anfahrt .lageplan{
    display:grid;align-content:center;min-block-size:10rem;padding:var(--raum-5);
    border:1px solid var(--linie);border-radius:var(--radius-kante);background:var(--abend);
  }
  #anfahrt .lageplan[data-lageplan-geladen]{padding:0;min-block-size:0;aspect-ratio:16 / 10}
}

/* --- Bewegung reduzieren: keine Drehung, kein Einblenden ------------------ */
@media (prefers-reduced-motion:reduce){
  #anfahrt .faq details[open] > .antwort{animation:none}
  #anfahrt .faq summary::before,
  #anfahrt .faq summary::after,
  #anfahrt .faq summary,
  #anfahrt .faq summary:active,
  #anfahrt .lageplan iframe{transition:none}
}

/* === quelle/stil/fuss.css === */
/* ===========================================================================
   fuss — ruhiger Schluss: Kontakt, In der Nähe, Seiten, Jahr; am Handy die
   Fixleiste. Nur Selektoren unter #fuss, Tokens aus basis.css. Die
   Namensnennung der Datenquellen steht auf der Datenschutzseite, nicht hier.

   Länge: am Handy höchstens einen halben Bildschirm (390 × 844) — Anschrift
   in zwei Zeilen, In der Nähe als Spitzmarke, knappe Abstände.

   Ruheraum: ein einziger leiser Schlag. Eine Lichtkante zieht sich von der
   Mitte aus auf, gekoppelt an den Scroll (motor/abschnitte/fuss.js, nur
   transform), der Name leuchtet einmal auf (data-glow, Pflicht-CSS). Sonst
   steht alles still — kein Einblenden der Zeilen: am Seitenende könnte ein
   Scroll-Fenster für die letzten Zeilen nie fertig werden. Ohne Skript und bei
   „Bewegung reduzieren“ steht beides fertig da.

   Tippflächen: jeder Verweis ≥ 44 px hoch (inline-flex), auch im Kleingedruckten.

   Fixleiste: Höhe = --leiste-h (Rand + 2 × Polster + Knopf + sichere Zone),
   gerechnet statt geschätzt (docs/fallen.md). Der Motor liest ihre offsetHeight
   für den Filmfortschritt — deshalb nie display oder Höhe ändern, wegschieben nur
   über transform. Der Fuß hält unten --leiste-h frei, damit die
   Leiste am Seitenende nichts verdeckt; weicht sie per Skript dem Fuß
   (.fuss--leiste-weicht, 260 px Vorlauf), entfällt der Platzhalter. Über Film
   (.leiste--film) ist der Kalk-Knopf eine Kontur. Ab 1000 px gibt es keine
   Leiste (--leiste-h 0 in basis.css).
   =========================================================================== */

#fuss{
  position:relative;
  background:var(--nacht-tief);
  color:var(--kalk);
  padding-block:var(--raum-5) calc(var(--raum-4) + var(--leiste-h));
  font-size:var(--gr-klein);line-height:1.5;
}
#fuss.fuss--leiste-weicht{padding-block-end:calc(var(--raum-4) + env(safe-area-inset-bottom, 0px))}

/* Lichtkante: gerader 2-px-Strich im Laternenlicht, zu den Rändern auslaufend;
   darunter ein ruhender Lichthof (einmal gemalt, bewegt wird nur der Strich). */
#fuss .fuss-licht{
  position:absolute;inset-inline:0;inset-block-start:0;block-size:2px;
  background:linear-gradient(to right,
    rgb(var(--laterne-rgb) / 0), var(--laterne) 24%, var(--laterne) 76%, rgb(var(--laterne-rgb) / 0));
  transform-origin:50% 50%;
  pointer-events:none;
}
#fuss .fuss-licht::after{
  content:"";position:absolute;inset-inline:12%;inset-block-start:2px;
  block-size:clamp(3rem, 2rem + 4vw, 6rem);
  background:radial-gradient(50% 100% at 50% 0, rgb(var(--laterne-rgb) / .14), rgb(var(--laterne-rgb) / 0));
}

/* Raster: am Handy gestapelt, ab 600 px zwei Spalten */
#fuss .fuss-raster{
  position:relative;
  display:grid;grid-template-columns:minmax(0, 1fr);
  gap:var(--raum-2);
}

/* Kontakt ------------------------------------------------------------------ */
#fuss .fuss-name{
  font-size:var(--gr-2);line-height:var(--zh-titel);
  color:var(--kalk);
}
#fuss .fuss-adresse{
  margin-block-start:var(--raum-1);
  font-style:normal;font-size:var(--gr-text);line-height:1.45;
  color:var(--kalk-matt);
}
/* Umbruch nur zwischen den Teilen der Anschrift, nie mitten in einem */
#fuss .fuss-adresse span{display:inline-block}
#fuss .fuss-wege{
  display:flex;flex-wrap:wrap;column-gap:var(--raum-4);
}
#fuss .fuss-wege .knopf{letter-spacing:0}
/* Fremdangabe: Farbe --offen heißt „hier fehlt die Bestätigung des Betriebs“ */
#fuss .fuss-fremd{color:var(--offen);max-inline-size:44ch}

/* In der Nähe ---------------------------------------------------------------- */
/* „In der Nähe“: Spitzmarke in der Textschrift (Hanken 600) — am Handy steht sie
   in einer Zeile mit dem Text, eine Imbue-Zeile daneben wäre höher und fremd */
#fuss .fuss-zwischentitel{
  font-family:var(--schrift-text);font-weight:var(--gew-stark);letter-spacing:0;
  font-size:var(--gr-lead);line-height:var(--zh-eng);
  color:var(--kalk);
}
#fuss .fuss-naehe p{
  margin-block-start:var(--raum-1);
  color:var(--kalk-matt);max-inline-size:52ch;
}
/* Ortsnamen nicht trennen („Weißenkir-chen“), wie in abend.css und glas.css */
#fuss p{hyphens:manual}
/* Am Handy als Spitzmarke: Titel und Text teilen sich die erste Zeile, der
   Titel in Textgröße, damit die Zeile nicht höher wird als die folgenden; die
   Anschrift eine Stufe kleiner, damit sie in zwei statt drei Zeilen passt */
@media (max-width:599.98px){
  #fuss .fuss-naehe :is(h3, p){display:inline}
  #fuss .fuss-naehe h3{margin-inline-end:.4em;font-size:var(--gr-text);line-height:1.2}
  #fuss .fuss-adresse{font-size:.9375rem;line-height:1.4}
  #fuss .fuss-fremd{line-height:1.4}
}

/* Kleingedrucktes: Verweise als ≥ 44 × 44 px große Tippflächen im Textfluss.
   inline-flex bleibt auf der Grundlinie und bricht als Ganzes um; das seitliche
   Polster (mit gleich großem negativem Rand) macht auch kurze Wörter 44 px
   breit, ohne den Satz auseinanderzuziehen. */
#fuss :is(.fuss-seiten, .fuss-marke) a{
  display:inline-flex;align-items:center;
  min-block-size:44px;padding-inline:10px;margin-inline:-10px;
}
/* Satzteile brechen nicht auseinander */
#fuss .fuss-heil{display:inline-block}

/* Schluss: Seiten und Jahr, durch eine Linie abgesetzt. Die Seiten-Verweise
   tragen ihre 44 px selbst, darum oben kein eigenes Polster. */
#fuss .fuss-schluss{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  column-gap:var(--raum-6);
  border-block-start:1px solid var(--linie);
}
#fuss .fuss-seiten ul{display:flex;flex-wrap:wrap;column-gap:var(--raum-5)}
#fuss .fuss-marke{color:var(--kalk-matt)}

/* Fixleiste ------------------------------------------------------------------ */
#fuss .leiste{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:var(--z-leiste);
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--raum-2);
  block-size:var(--leiste-h);
  padding:var(--leiste-polster) var(--rand) calc(var(--leiste-polster) + env(safe-area-inset-bottom, 0px));
  border-block-start:var(--leiste-rand) solid var(--linie);
  background:var(--nacht-tief);
  transition:transform var(--dauer-mittel) var(--ease-tuer);
}
#fuss .leiste .knopf{
  block-size:var(--leiste-knopf);min-block-size:0;min-inline-size:0;
  padding-inline:var(--raum-3);
  white-space:nowrap;
}
/* Über Film (kopf.js, vom Aufhellen bis S1): Kalk-Knopf als Kontur (Rand 5,39 : 1).
   Bis der Motor steht, auf der Startseite schon Kontur: oben auf der Seite (der
   häufigste Fall) setzt kopf.js sofort leiste--film, sonst sprang der Knopf über dem
   Poster von Weiß auf Kontur. Rechtsseiten haben keinen Film und bleiben weiß.
   Getrennte Regeln: ohne :has verfiele sonst auch die Regel über Film.
   Wechsel (Umbau 27.09.2026; vorher sprang der hellste Punkt im Bild hart um, auch
   über Ruheraum-Text): eine Kalk-Ebene ::after unter dem Knopf blendet, nur opacity.
   Schrift und Rand wechseln sofort, ohne eigenen Übergang (an den Nähten S1/S2 zwei
   Zeitpunkte statt drei über 200 ms); damit die Schrift schon im ersten Bild lesbar ist,
   beginnt die Blende 30 ms in ihrer Kurve (--ease-aus, dort rund zwei Drittel) und endet
   nach 170 ms. Die Fläche des Knopfs selbst trägt weiter den Ruhezustand (die
   Prüfwerkzeuge lesen sie): zur Kontur fällt sie sofort weg, zur Fläche kommt sie mit dem
   Ende der Blende, wenn die Ebene voll deckt. */
#fuss .leiste .knopf-kalk{
  transition:scale var(--dauer-tipp) var(--ease-aus), background-color 0s linear 170ms;
}
#fuss .leiste .knopf-kalk::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--kalk);
  transition:opacity 200ms var(--ease-aus) -30ms;
}
#fuss .leiste.leiste--film .knopf-kalk{
  background:transparent;color:var(--kalk);
  box-shadow:inset 0 0 0 1px var(--linie-knopf);
  transition:scale var(--dauer-tipp) var(--ease-aus);
}
html.motor-laedt:has(.filmraum) #fuss .leiste .knopf-kalk{
  background:transparent;color:var(--kalk);
  box-shadow:inset 0 0 0 1px var(--linie-knopf);
  transition:scale var(--dauer-tipp) var(--ease-aus);
}
#fuss .leiste.leiste--film .knopf-kalk::after{opacity:0}
html.motor-laedt:has(.filmraum) #fuss .leiste .knopf-kalk::after{opacity:0}
/* Druck (F.3): Schein und Laternenrand wie an jedem Knopf (basis.css); die
   Kontur über Film wird ebenfalls Laterne */
#fuss .leiste.leiste--film .knopf-kalk:active{box-shadow:inset 0 0 0 1px var(--laterne)}
html.motor-laedt:has(.filmraum) #fuss .leiste .knopf-kalk:active{box-shadow:inset 0 0 0 1px var(--laterne)}
/* Weicht dem Fuß: gleitet unter den Bildrand. Die Knöpfe bleiben bewusst mit
   der Tabulatortaste erreichbar (sonst wäre die Leiste per Tastatur nie zu
   bedienen, denn sie steht in der Reihenfolge nach dem Fuß); bekommt einer den
   Fokus, kommt die Leiste zurück ins Bild — es gibt kein unsichtbares Fokusziel. */
#fuss .leiste.leiste--weg{transform:translate3d(0, 100%, 0)}
#fuss .leiste.leiste--weg:focus-within{transform:none}

/* Stufen --------------------------------------------------------------------- */
@media (min-width:600px){
  #fuss{padding-block-start:var(--raum-6)}
  #fuss .fuss-raster{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--raum-5) var(--raum-7);
  }
  /* Kontakt links, In der Nähe rechts; Seiten und Jahr über die volle Breite */
  #fuss .fuss-schluss{grid-column:1 / -1}
}
@media (min-width:1000px){
  #fuss{padding-block:var(--raum-6) var(--raum-4)}
  #fuss.fuss--leiste-weicht{padding-block-end:var(--raum-4)}
  #fuss .leiste{display:none}
  #fuss .fuss-raster{
    grid-template-columns:minmax(0, 5fr) minmax(0, 4fr);
    column-gap:var(--raum-8);
  }
}

@media (prefers-reduced-motion:reduce){
  #fuss .leiste{transition:none}
  #fuss .fuss-licht{transform:none}
}
@media print{
  #fuss .leiste,#fuss .fuss-licht{display:none}
  #fuss{padding-block-end:var(--raum-5)}
}