/* Der Einstieg (DESIGN-BRIEF.md 3.1 und 4; Runde 2 bis 5): der Regler verwandelt den ganzen ersten Bildschirm.
   Zustand: .start[data-stufe="klar|lebendig|kino"], Phasen der Stufe Kino (js/einstieg.js):
     .ist-kino Takt 1, Film in den Buchstaben von „Kino.“ · .ist-blende Text blendet vor dem Flug weg · .ist-flug Takt 2, Flug durch das o
     .ist-durch Endzustand · .ist-rueck* Rückweg
   Lebendig (Runde 5, „Abendlicht im Café“): Dampf-Schleife, Birne flackert, Lichter schimmern, warmer Grund, Wort für Wort, kleine Eigenbewegung.
   Nur transform und opacity (Ausnahme: Unterstreichung); Dauerschleifen nur in Lebendig und im Bild (.ist-fern). Ohne JavaScript: Klar. */

.start { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: calc(100vh - var(--kopf-hoehe)); min-height: calc(100svh - var(--kopf-hoehe));
  background: var(--papier); color: var(--graphit); overflow: clip; scroll-margin-top: var(--kopf-hoehe); --regler-raum: 100px; }
.start[data-stufe="kino"] { background: var(--kino); }
.start.ist-durch { color: var(--kino-text); }

/* ---------- Film-Ebene (nur Kino) ---------- */
.start__film { position: absolute; inset: 0; z-index: 0; opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease-licht), visibility 0s linear 300ms; }
.start.ist-kino .start__film { opacity: 1; visibility: visible; transition: opacity 300ms var(--ease-licht), visibility 0s; }
.start__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--kino); }
.start__verlauf { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease-licht);
  background: linear-gradient(to bottom, rgba(10, 8, 6, .34) 0%, rgba(10, 8, 6, 0) 42%), linear-gradient(to top right, rgba(10, 8, 6, .74) 0%, rgba(10, 8, 6, .42) 34%, rgba(10, 8, 6, 0) 64%); }   /* unten links für die Porträtzeile, oben leicht für die H1 */
.start.ist-durch .start__verlauf { opacity: 1; }

/* ---------- Die Ebene, durch die die Kamera fährt ---------- */
.start__welt { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; transform-origin: 50% 50%; }
.start__welt.flug { will-change: transform; }
.start.ist-flug .start__welt { transform: scale(var(--s-ende, 20)); transition: transform var(--dur-takt2) var(--ease-regler); }
.start.ist-durch .start__welt { transform: none; transition: none; }
.start.ist-rueck-start .start__welt { transform: scale(var(--s-ende, 20)); transition: none; }
.start.ist-rueckflug .start__welt { transform: none; transition: transform 450ms var(--ease-regler); }

.start__maske { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: none; overflow: visible; }
.start.ist-bereit .start__maske, .start.ist-kino .start__maske { display: block; }   /* vorgebaut ab Lebendig: Papierweiß auf Papierweiß, unsichtbar */
.start.ist-durch .start__maske { display: none; }
.start__papier, .start__auge { fill: var(--papier); }
.start__auge { transition: opacity var(--dur-auge) var(--ease-licht); }
.start.ist-flug .start__auge, .start.ist-durch .start__auge, .start.ist-rueck-start .start__auge { opacity: 0; }
.start.ist-rueckflug .start__auge { opacity: 1; transition-delay: 180ms; }

/* Lebendig: warmer Seitengrund, Licht von der Birne (--gx/--gy aus js/einstieg.js); über der vorgebauten Maske, unter Text und Foto */
.start__warm { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-warm) var(--ease-licht);
  background: radial-gradient(circle at var(--gx, 72%) var(--gy, 12%), rgba(255, 182, 104, .30) 0, rgba(255, 188, 116, .15) 24vmax, rgba(255, 196, 130, 0) 58vmax),
    linear-gradient(rgba(240, 192, 134, .13), rgba(240, 192, 134, .08)); }
.start[data-stufe="lebendig"] .start__warm { opacity: 1; }
.start.ist-kino .start__warm { opacity: 0; transition-duration: 400ms; }
/* Kopf: dieselbe Wärme, solange der Einstieg unter ihm liegt (data-oben aus js/main.js) */
.kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(240, 188, 128, .2); opacity: 0; transition: opacity var(--dur-warm) var(--ease-licht); }
[data-stufe="lebendig"][data-oben="ja"] .kopf::before { opacity: 1; }

.start__innen { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: clamp(.8rem, 2.4vh, 1.4rem);
  padding-top: clamp(.9rem, 2.4vh, 1.5rem); padding-bottom: var(--regler-raum); }
.start__text { container-type: inline-size; min-width: 0; }
.start.ist-durch .start__text { animation: start-einblenden 400ms var(--ease-licht) both; }
@keyframes start-einblenden { from { opacity: 0; } to { opacity: 1; } }

/* Nur die Maske fliegt: die oberen H1-Zeilen und die Porträtzeile blenden 200 ms vor dem Flug weg (Runde 3), bleiben im Flug und auf dem Rückweg aus
   und erscheinen im Endzustand neu (mit dem Textblock) bzw. beim Auflösen zurück ins Wort (250 ms) */
.start__zeile:not(.start__zeile--kino), .portraet { transition: opacity var(--dur-blende) var(--ease-licht); }
.start.ist-blende .start__zeile:not(.start__zeile--kino), .start.ist-blende .portraet,
.start.ist-flug .start__zeile:not(.start__zeile--kino), .start.ist-flug .portraet,
.start.ist-rueck-start .start__zeile:not(.start__zeile--kino), .start.ist-rueck-start .portraet,
.start.ist-rueckflug .start__zeile:not(.start__zeile--kino), .start.ist-rueckflug .portraet { opacity: 0; }
.start.ist-rueck-start .start__zeile:not(.start__zeile--kino), .start.ist-rueck-start .portraet { transition: none; }
.start.ist-durch .start__zeile:not(.start__zeile--kino), .start.ist-durch .portraet { opacity: 1; transition: none; }
.start.ist-rueck .start__zeile:not(.start__zeile--kino), .start.ist-rueck .portraet { opacity: 1; transition: opacity 250ms var(--ease-licht); }

/* ---------- H1: zwei ruhige Zeilen, dann „Kino.“ sehr groß auf eigener Zeile ---------- */
.start__titel { font-weight: 350; font-size: clamp(1.75rem, 8.2vw, 2.4rem); line-height: 1.02; letter-spacing: -.02em; }
.start__zeile { display: block; }
.start__zinnen { display: block; }
.start__zeile--kino { --kino-groesse: min(44.5cqi, 12rem); font-size: var(--kino-groesse); line-height: .92; margin-top: .03em; }
.start__wort { transition: opacity var(--dur-takt1) var(--ease-licht); }
.start.ist-kino .start__wort { opacity: 0; }                       /* das Wort löst sich auf, dahinter läuft der Film im Loch */
.start.ist-rueck .start__wort { transition-duration: 250ms; }
.start.ist-durch .start__wort { opacity: 1; transition: none; }
.start__basis { display: inline-block; width: 0; height: 0; }   /* Messmarke für die Grundlinie (js/einstieg.js) */

/* Lebendig (1): Wort für Wort, jedes Wort steigt aus seiner Zeile, 105 ms versetzt */
.start__w, .start__wort { display: inline-block; }
.start__zeile:nth-child(1) .start__w:nth-child(1) { --w: 0; } .start__zeile:nth-child(1) .start__w:nth-child(2) { --w: 1; } .start__zeile:nth-child(1) .start__w:nth-child(3) { --w: 2; }
.start__zeile:nth-child(2) .start__w:nth-child(1) { --w: 3; } .start__zeile:nth-child(2) .start__w:nth-child(2) { --w: 4; } .start__zeile:nth-child(2) .start__w:nth-child(3) { --w: 5; }
.start__wort { --w: 6; }
.start__titel.baut .start__zeile { overflow: hidden; }
.start__titel.baut .start__w, .start__titel.baut .start__wort { animation: wort-auf var(--dur-wort) var(--ease-licht) both; animation-delay: calc(var(--w) * var(--takt-wort)); }
@keyframes wort-auf { from { transform: translateY(105%); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }

/* Porträtzeile; Lebendig (5): Unterstreichung läuft, warmes Licht, Foto nähert sich leicht */
.portraet { position: relative; display: flex; align-items: center; gap: .85rem; margin-top: clamp(.9rem, 2.2vw, 1.3rem); max-width: 44ch; color: var(--grau); text-wrap: pretty; }
.start.ist-durch .portraet { color: var(--kino-grau); }
.portraet__bild { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--flaeche); border: 1px solid var(--rahmen);
  display: grid; place-items: center; font-weight: 500; font-size: .8rem; letter-spacing: .04em; color: var(--grau); }
.start.ist-durch .portraet__bild { background: rgba(245, 241, 234, .08); border-color: rgba(245, 241, 234, .2); color: var(--kino-grau); }
.portraet__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }   /* Kopf mit ganzem Haar mittig, unverändert */
.portraet__foto:not([src]), .portraet__foto.fehlt { display: none; }
.portraet__text { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: .08em; }
.start[data-stufe="lebendig"] .portraet__text { animation: unterstrich var(--dur-zeile) var(--ease-licht) 260ms both; }
@keyframes unterstrich { from { background-size: 0% 1px; } to { background-size: 100% 1px; } }
/* warmer Schein hinter dem Porträt (atmet), Foto im Kreis nähert sich und kehrt zurück */
.portraet::before { content: ""; position: absolute; left: -10px; top: 50%; width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 178, 96, .5) 0, rgba(255, 186, 110, .26) 46%, rgba(255, 190, 120, 0) 70%); transition: opacity 700ms var(--ease-licht); }
.start[data-stufe="lebendig"] .portraet::before { opacity: 1; animation: glimmen var(--dur-glimmen) ease-in-out 600ms infinite; }
.start[data-stufe="lebendig"] .portraet__foto { animation: naehern calc(var(--dur-schweben) * 2) ease-in-out 400ms infinite alternate; }
@keyframes naehern { from { transform: none; } to { transform: scale(1.08) translateY(1.5%); } }

/* ---------- Foto (Klar), Kamera mit Dampf und Birne (Lebendig), tritt zurück (Kino) ---------- */
.start__foto { position: relative; display: flex; flex-direction: column; gap: .55rem; flex: 1; min-height: 0; }
/* Runde 4: Bildausschnitt am Handy auf die Mitte der Rosetta (gemessen in klar-hoch.webp: x 48 %, y 70 %), statt auf den unteren Rand; die Karte wächst
   in Lebendig um ihre Mitte (bei schmaler Karte bleibt sie so in der Spalte) */
.start__bild { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-karte); background: #2A1F18; --foto-pos: 48% 70%;
  transform-origin: 50% 60%; transition: transform 700ms var(--ease-licht), opacity var(--dur-takt1) var(--ease-licht); }
/* Handy: die Fläche wächst nicht mit (zwei gleichzeitige Zooms ließen das Bild zittern, Riccardo 09.10.); Rechner siehe Medienabfrage */
.start.ist-kino .start__bild { opacity: 0; transform: scale(.96); }
.start.ist-rueck .start__bild { transition-duration: 250ms; }
.start.ist-durch .start__bild { visibility: hidden; }
.start__ebene { position: absolute; inset: 0; transition: transform 500ms var(--ease-licht); }
/* Maus bzw. Neigen (Cardo-Runde, 09.10.2026; Riccardo: „schneidet an den Seiten teilweise ab“): Foto und Schatten liegen fest um 3,5 % größer
   (um die Mitte), die Verschiebung um höchstens 1,1 % legt so nie den Kartengrund frei (Reserve je Seite 1,75 %). Fest in allen Stufen, nicht erst in
   Lebendig: beim Stufenwechsel zoomt so nichts zusätzlich (zwei Zooms zugleich ließen das Bild zittern). Foto (mit Dampf und Birne) und Schatten tragen
   dieselbe Transformation und bleiben deckungsgleich; nur die Lichter davor laufen gewollt gegenläufig. */
.start__bild { --reserve: 1.035; }
.start__ebene--foto { transform: translate(calc(var(--px, 0) * 1.1%), calc(var(--py, 0) * 1.1%)) scale(var(--reserve)); }
/* Runde 5: Foto, Dampf und Birnenlicht in einer Kamera; Lebendig (3): Kamerafahrt 1,00 → 1,08 in 7 s, Birne und Tasse bleiben im Bild */
.start__kamera { position: absolute; inset: 0; transform-origin: 40% 40%; --zoom: 1.08; --schwenk-x: -.8%; --schwenk-y: 0%; }
.start__klar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foto-pos); }
/* Kamerafahrt auf der Grafikkarte (will-change), langsam an- und auslaufend statt Ruck am Anfang (Runde 5b) */
.start__kamera { will-change: transform; backface-visibility: hidden; }
.start[data-stufe="lebendig"] .start__kamera { animation: kamerafahrt 10s cubic-bezier(.45, 0, .3, 1) both; }
/* Mit Dampf-Schleife steht die Kamera still (Cinemagraph): Zoom + Video ließ das Bild zittern, weil der Browser das Video auf ganze
   Pixel einrastet, das Foto darunter nicht (gemessen 09.10., ohne Kamerafahrt 0 Zitterer). Leben kommt aus Dampf, Licht, Birne. */
.start[data-lebendig="ja"][data-stufe="lebendig"] .start__kamera { animation: none; }
@keyframes kamerafahrt { from { transform: scale(1); } to { transform: scale(var(--zoom)) translate(var(--schwenk-x), var(--schwenk-y)); } }
/* Lebendig (4): Dampf-Schleife, ganzes Bild im Ausschnitt des Fotos (außerhalb des Dampfs gleich dem Klar-Bild) */
.start__dampf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foto-pos); opacity: 0; transition: opacity 600ms var(--ease-licht); }
.start__dampf.spielt { opacity: 1; }
/* Lebendig (2): die Birne (Lage aus lampe.json, in der Kamera): Halo glimmt, Kern flackert unregelmäßig wie ein Glühfaden, kein Blinken */
/* .start__lampe blendet als Ganzes (Übergang); darin Halo (::after), Schein (::before, Muster 2), Kern (.start__glut, Muster 1) */
.start__lampe { position: absolute; left: var(--lx, 20%); top: var(--ly, 9%); width: 100%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  mix-blend-mode: screen; opacity: 0; transition: opacity 700ms var(--ease-licht); }
.start__lampe::before, .start__lampe::after, .start__glut { content: ""; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; }
.start__lampe::after { width: 100%; background: radial-gradient(circle, rgba(255, 210, 148, .34) 0%, rgba(255, 196, 124, .2) 14%, rgba(255, 186, 110, .08) 32%, rgba(255, 184, 104, 0) 54%); }
.start__lampe::before { width: 58%; background: radial-gradient(circle, rgba(255, 220, 160, .3) 0%, rgba(255, 204, 140, .12) 45%, rgba(255, 200, 136, 0) 70%); }
.start__glut { width: 34%; background: radial-gradient(circle, rgba(255, 232, 186, .62) 0%, rgba(255, 214, 150, .3) 38%, rgba(255, 200, 136, 0) 70%); }
.start[data-stufe="lebendig"] .start__lampe { opacity: 1; }
.start[data-stufe="lebendig"] .start__lampe::after { animation: glimmen var(--dur-glimmen) ease-in-out infinite; }
.start[data-stufe="lebendig"] .start__glut { animation: flackern var(--dur-flackern) linear infinite; }
.start[data-stufe="lebendig"] .start__lampe::before { animation: flackern-2 var(--dur-flackern-2) linear -1.3s infinite; }
@keyframes glimmen { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.06); } }
/* Glühfaden: meist ruhig, ab und zu ein kleiner Einbruch (Abstände 140 bis 420 ms) */
@keyframes flackern {
  0% { opacity: .9; } 5% { opacity: .84; } 7% { opacity: .95; } 15% { opacity: .91; } 18% { opacity: .78; } 20% { opacity: .93; } 29% { opacity: .97; } 33% { opacity: .9; }
  41% { opacity: 1; } 44% { opacity: .82; } 46% { opacity: .96; } 58% { opacity: .92; } 63% { opacity: .98; } 70% { opacity: .86; } 72% { opacity: .95; } 81% { opacity: .9; }
  84% { opacity: .74; } 86% { opacity: .92; } 94% { opacity: .97; } 100% { opacity: .9; } }
@keyframes flackern-2 {
  0% { opacity: .7; } 9% { opacity: .82; } 12% { opacity: .6; } 15% { opacity: .78; } 27% { opacity: .72; } 38% { opacity: .9; } 41% { opacity: .66; } 44% { opacity: .84; }
  57% { opacity: .76; } 69% { opacity: .88; } 72% { opacity: .62; } 75% { opacity: .8; } 88% { opacity: .74; } 100% { opacity: .7; } }
/* Lebendig: Raum um die Tasse dunkler, Licht auf der Tasse; um die Birne bleibt es hell (Maske) */
.start__ebene--schatten { opacity: 0; pointer-events: none; --licht-ziel: 50% 70%; transform: translate(calc(var(--px, 0) * 1.1%), calc(var(--py, 0) * 1.1%)) scale(var(--reserve));
  transition: opacity 900ms var(--ease-licht), transform 500ms var(--ease-licht);
  background: radial-gradient(ellipse 78% 64% at var(--licht-ziel), rgba(24, 14, 6, 0) 30%, rgba(24, 14, 6, .3) 60%, rgba(24, 14, 6, .62) 100%);
  -webkit-mask-image: radial-gradient(ellipse 34% 34% at var(--lx, 20%) var(--ly, 9%), transparent 35%, #000 100%);
  mask-image: radial-gradient(ellipse 34% 34% at var(--lx, 20%) var(--ly, 9%), transparent 35%, #000 100%); }
.start[data-stufe="lebendig"] .start__ebene--schatten { opacity: 1; }
/* Licht vor dem Foto (Neigen: gegenläufig): Schein von oben am Handy (weiches Licht, hebt den Dampf), warme Lichter (aufhellend) */
.start__ebene--licht, .start__ebene--schein { opacity: 0; pointer-events: none;
  transform: translate(calc(var(--px, 0) * -2.2%), calc(var(--py, 0) * -2.2%)); transition: opacity 600ms var(--ease-licht), transform 500ms var(--ease-licht); }
.start__ebene--licht { mix-blend-mode: screen; }
.start__ebene--schein { mix-blend-mode: soft-light; display: none; }   /* nur am Handy (dort hängt die Birne außerhalb des Bilds) */
.start[data-stufe="lebendig"] .start__ebene--licht, .start[data-stufe="lebendig"] .start__ebene--schein { opacity: 1; }
.start__schein { position: absolute; display: none; pointer-events: none; }
/* Lichtpunkte: unscharfe Lichter in den dunklen Ecken; schimmern (Deckkraft) und wandern ein paar Pixel */
.start__punkt { position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: .55;   /* sichtbar nur mit der Licht-Ebene (Lebendig) */
  background: radial-gradient(circle closest-side, rgba(255, 196, 124, .5) 0, rgba(255, 196, 124, .44) 52%, rgba(255, 190, 116, .16) 80%, rgba(255, 186, 110, 0) 100%); }
.start__punkt:nth-child(1) { --x: 3%; --y: 47%; --d: 7%; --t: 7.4s; --v: -1.2s; --dx: 2px; --dy: -6px; }
.start__punkt:nth-child(2) { --x: 7%; --y: 78%; --d: 4.5%; --t: 6.1s; --v: -3.9s; --dx: -3px; --dy: -4px; }
.start__punkt:nth-child(3) { --x: 3%; --y: 93%; --d: 6%; --t: 8.3s; --v: -5.2s; --dx: 2px; --dy: -5px; }
.start__punkt:nth-child(4) { --x: 97%; --y: 54%; --d: 5%; --t: 6.8s; --v: -2.6s; --dx: -3px; --dy: 4px; }
.start__punkt:nth-child(5) { --x: 94%; --y: 70%; --d: 3.5%; --t: 7.9s; --v: -6.4s; --dx: 2px; --dy: -3px; }
.start[data-stufe="lebendig"] .start__punkt { animation: schimmern var(--t) ease-in-out var(--v) infinite alternate, wandern calc(var(--t) * 1.7) ease-in-out var(--v) infinite alternate; }
@keyframes schimmern { 0% { opacity: .2; } 45% { opacity: .85; } 70% { opacity: .55; } 100% { opacity: .95; } }
@keyframes wandern { from { transform: none; } to { transform: translate(var(--dx), var(--dy)); } }
/* Runde 6: der Hinweis wandert in Lebendig mit der wachsenden Fläche nach unten (Rechner, siehe Medienabfrage), gleiche Dauer und Kurve */
.start__hinweis { flex: none; transition: transform 700ms var(--ease-licht), opacity var(--dur-takt1) var(--ease-licht); }
.start.ist-kino .start__hinweis { opacity: 0; }
.start.ist-durch .start__hinweis { display: none; }   /* im Endzustand steht derselbe Hinweis in der Titelkarte */

/* ---------- Kino-Endzustand: Titelkarte, Nochmal, Abspielen ---------- */
/* Runde 6: Titelkarte und Tasten in einer Ecke (.start__ecke). Handy: die Ecke erzeugt keinen Kasten (display: contents), Titelkarte unten rechts,
   Tasten mittig in der freien Fläche zwischen „Kino.“ und Porträtzeile. Rechner: Tasten rechts unten über der Titelkarte, nie über Text. */
.start__ecke { display: contents; }
.start__karte { position: absolute; right: var(--rand); bottom: calc(var(--regler-raum) + .3rem); z-index: 2; display: grid; gap: .12rem; justify-items: end; text-align: right;
  font-size: var(--fs-klein); color: var(--kino-grau); opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease-licht); }
.start__karte-titel { color: var(--kino-text); }
.start.ist-durch .start__karte { opacity: 1; transition-delay: 250ms; }
.start__nochmal, .start__abspielen { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; }
.start__nochmal { background: rgba(22, 21, 19, .72); color: var(--kino-text); border-color: rgba(245, 241, 234, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (hover: hover) { .start__nochmal:hover { background: var(--kino-text); color: var(--kino); border-color: var(--kino-text); } }

/* ---------- Der Regler: Handy als Segmentleiste am unteren Rand, Rechner als Spur mit drei Rasten unten links ---------- */
.regler { position: absolute; left: 0; right: 0; bottom: clamp(.9rem, 2.4vh, 1.4rem); z-index: 3; }
.no-js .regler { display: none; }
.regler__leiste { position: relative; display: flex; flex-direction: column; }
.regler__raste:nth-child(1), .regler__tasten button:nth-child(1) { --p: 0; }
.regler__raste:nth-child(2), .regler__tasten button:nth-child(2) { --p: .5; }
.regler__raste:nth-child(3), .regler__tasten button:nth-child(3) { --p: 1; }
.regler__tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.regler__tasten button { min-height: 50px; padding: 0 .5em; border: 1px solid var(--rahmen-stark); border-radius: var(--radius-taste); background: rgba(245, 241, 234, .55); font-weight: 500; cursor: pointer;
  transition: background var(--dur-tipp) var(--ease-tipp), color var(--dur-tipp) var(--ease-tipp), border-color var(--dur-tipp) var(--ease-tipp); }
.regler__tasten button[aria-checked="true"] { background: var(--graphit); color: var(--papier); border-color: var(--graphit); }
.regler__tasten button:active { transform: translateY(1px); }
.start.ist-dunkel .regler__tasten button { color: var(--kino-text); border-color: rgba(245, 241, 234, .4); background: rgba(22, 21, 19, .5); }
.start.ist-dunkel .regler__tasten button[aria-checked="true"] { background: var(--kino-text); color: var(--kino); border-color: var(--kino-text); }
/* Handy (Runde 3): der Knopf sitzt an der aktiven Taste, auf ihrer Unterkante, und gleitet beim Wechsel zur nächsten (keine lose Perle unter der Leiste) */
.regler__spur { position: absolute; inset: 0; order: 0; height: auto; z-index: 1; pointer-events: none; }
.regler__spur::before, .regler__raste { display: none; }
/* Knopf (Cardo, 09.10.2026, ersetzt die Goldkugel des alten Logos): matter Kreis im Verlauf des Goldstrichs aus dem Logo, ohne Glanz.
   Feiner dunkler Rand: hebt ihn auf Papierweiß ab (Rand gegen Papier 3,7:1, Gold allein nur 2,5:1); auf dem dunklen Grund reicht das Gold (6,5:1). */
.regler__kugel { position: absolute; top: 100%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; transform: translateX(var(--x, 0px));
  background: var(--gold-verlauf); box-shadow: inset 0 0 0 1px rgba(47, 44, 40, .28), 0 1px 2px rgba(47, 44, 40, .28);
  transition: transform 260ms var(--ease-tipp); will-change: transform; }
.start.ist-dunkel .regler__kugel { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .4); }
/* Fokus im dunklen Einstieg hell (Cardo-Runde: der Graphit-Rahmen war auf dem Film kaum zu sehen, gemessen mit pruefung/cardo/regler.cjs) */
.start.ist-dunkel :focus-visible { outline-color: var(--kino-text); }
.regler__leiste.faehrt .regler__kugel { transition: transform var(--dur-kugel) var(--ease-regler); }
.regler__leiste.zieht .regler__kugel { transition: none; }
/* Lebendig (5): „Schreib mir“ hebt sich und schwebt, solange der Einstieg unter dem Kopf liegt */
[data-stufe="lebendig"] .kopf__knopf { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(47, 44, 40, .6); }
[data-stufe="lebendig"][data-oben="ja"] .kopf__knopf { animation: schweben var(--dur-schweben) ease-in-out infinite; }
[data-stufe="lebendig"][data-oben="ja"] .kopf__knopf:active { animation: none; transform: translateY(1px); }
@keyframes schweben { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(-4px); } }

/* ---------- Handy (bis 760 px): Einstieg passt in den ersten Bildschirm, Karte nie flacher als 1,15:1, Glyphen-Phase mit Kontrast, Kino-Endzustand lesbar ---------- */
@media (max-width: 760px) {
  /* Runde 4: der Rahmen nimmt den freien Platz zwischen Porträtzeile und Hinweis (Größen-Container, zählt nicht zur Höhe des Einstiegs); die Karte darin
     ist so hoch wie der Rahmen und höchstens 1,15-mal so breit wie hoch. Bei wenig Höhe (Safari mit Leisten, Browser in Apps) wird sie also schmaler statt
     flacher und steht links in der Spalte. Der Einstieg bleibt so 100 svh hoch, die Regler-Leiste immer im ersten Bildschirm. */
  .start__foto { flex: 1 1 0; min-height: auto; gap: .5rem; }
  .start__rahmen { container-type: size; flex: 1 1 0; min-height: 110px; }
  .start__bild { height: 100%; height: 100cqh; width: 100%; width: min(100cqw, 100cqh * 1.15); }   /* erste Werte: Rückfall für Browser ohne Container-Einheiten */
  .start__kamera { transform-origin: 48% 50%; --zoom: 1.07; --schwenk-x: 0%; --schwenk-y: .6%; }
  /* H1 bei wenig Höhe etwas kleiner (bei 390×844 fast unverändert) */
  .start__titel { font-size: clamp(1.6rem, min(8.2vw, 4.7svh), 2.4rem); }
  .start__zeile--kino { --kino-groesse: min(44.5cqi, 12rem, 18svh); }
  /* Takt 1: der Film steht so, dass Tasse und Crema in den Buchstaben laufen (unten im Hochformat-Film); im Flug fährt er in die Endlage (Kamera schwenkt hoch) */
  .start.ist-kino .start__video { transform: translateY(var(--film-hub, -36%)); transition: none; }
  .start.ist-flug .start__video { transform: none; transition: transform 900ms var(--ease-regler); }
  .start.ist-durch .start__video { transform: none; transition: none; }
  .start.ist-rueck-start .start__video { transform: none; transition: none; }
  .start.ist-rueckflug .start__video { transform: translateY(var(--film-hub, -36%)); transition: transform 450ms var(--ease-regler); }
  .start.ist-rueck .start__video { transform: translateY(var(--film-hub, -36%)); transition: none; }
  /* Endzustand: oben deutlich dunkler für die H1 (Kännchen und Milchstrahl liegen dort), unten ein Band für Porträtzeile, Titelkarte und Tasten
     (dort läuft die Tasse mit der hellen Crema; die Zeile steht deshalb hell, nicht grau) */
  .start__verlauf { background: linear-gradient(to bottom, rgba(10, 8, 6, .7) 0%, rgba(10, 8, 6, .48) 26%, rgba(10, 8, 6, .1) 46%, rgba(10, 8, 6, 0) 54%),
    linear-gradient(to top, rgba(10, 8, 6, .86) 0%, rgba(10, 8, 6, .7) 24%, rgba(10, 8, 6, .4) 38%, rgba(10, 8, 6, 0) 52%); }
  /* Porträtzeile im Endzustand unten im Verlauf, über der Titelkarte; die (unsichtbare) Fotofläche braucht keinen Platz mehr */
  .start.ist-durch .start__innen { padding-bottom: calc(var(--regler-raum) + 4.1rem); }
  .start.ist-durch .start__text { display: flex; flex-direction: column; flex: 1; }
  .start.ist-durch .portraet { margin-top: auto; color: var(--kino-text); }
  .start.ist-durch .start__foto { display: none; }
  /* Lichtinsel auf Tasse und Dampf (das schmale Band über der Tasse nicht abdunkeln) */
  .start__ebene--schatten { --licht-ziel: 48% 52%; -webkit-mask-image: none; mask-image: none;   /* keine Birne im Bild: keine Maske */
    background: radial-gradient(ellipse 96% 82% at var(--licht-ziel), rgba(24, 14, 6, 0) 42%, rgba(24, 14, 6, .22) 74%, rgba(24, 14, 6, .5) 100%); }
  /* Lebendig am Handy: die Birne hängt außerhalb links oben; ihr Licht fällt von oben in die Karte und flackert mit */
  .start__lampe { display: none; }
  .start__ebene--schein { display: block; }
  .start__schein { display: block; left: -34%; top: -52%; width: 135%; aspect-ratio: 1.1;
    background: radial-gradient(ellipse at 42% 48%, rgba(255, 214, 160, .95) 0%, rgba(255, 200, 136, .7) 26%, rgba(255, 190, 120, .32) 46%, rgba(255, 186, 112, 0) 66%); }
  .start[data-stufe="lebendig"] .start__schein { animation: flackern var(--dur-flackern) linear infinite; }
  .start__punkt:nth-child(1) { --x: 7%; --y: 10%; --d: 10%; }
  .start__punkt:nth-child(2) { --x: 90%; --y: 8%; --d: 8%; }
  .start__punkt:nth-child(3) { --x: 96%; --y: 30%; --d: 6%; }
  .start__punkt:nth-child(4) { --x: 72%; --y: 4%; --d: 5%; }
  .start__punkt:nth-child(5) { --x: 26%; --y: 4%; --d: 4.5%; }
}
/* Handy mit wenig Höhe (z. B. 390×664 in Safari mit Leisten, 375×560 im Browser einer App): Porträtzeile und Abstände kleiner, Regler etwas tiefer */
@media (max-width: 760px) and (max-height: 760px) {
  .start { --regler-raum: 80px; }
  .start__innen { gap: clamp(.7rem, 2vh, 1.2rem); }
  .portraet { font-size: var(--fs-klein); line-height: 1.45; gap: .7rem; margin-top: .7rem; }
  .portraet__bild { width: 40px; height: 40px; }
  .portraet::before { left: -12px; width: 64px; }
  .regler { bottom: .7rem; }
}
/* kleine Handys (z. B. 320×568): im Kino-Endzustand Porträtzeile und Titelkarte etwas kleiner, damit beide über den Tasten Platz haben */
@media (max-width: 760px) and (max-height: 640px) {
  .start.ist-durch .portraet { font-size: var(--fs-klein); max-width: none; }
  .start.ist-durch .start__karte { font-size: 13px; }
  .start.ist-durch .start__innen { padding-bottom: calc(var(--regler-raum) + 4.6rem); }
}

/* ---------- Rechner (ab 761 px): Text links, Foto rechts, Regler unten links, Titelkarte unten rechts ---------- */
@media (min-width: 761px) {
  .start { --regler-raum: 118px; }
  .start__innen { display: grid; grid-template-columns: minmax(0, 1fr) 40%; column-gap: clamp(2rem, 4.5vw, 4rem); align-items: start; gap: 0 clamp(2rem, 4.5vw, 4rem);
    padding-top: clamp(1.2rem, 3vh, 2rem); }
  .start__titel { font-size: clamp(2rem, 1rem + 2.8vw, 3.75rem); }
  .start__zeile--kino { --kino-groesse: min(22vw, 43.6cqi); }
  .portraet { max-width: 52ch; }
  .start__foto { flex: none; }
  .start__bild { flex: none; aspect-ratio: 1 / 1.04; --foto-pos: 27% 50%; transform-origin: 100% 0; }   /* zeigt Lampe (links) und Tasse (rechts der Mitte); wächst nach links unten */
  .start[data-stufe="lebendig"] .start__bild { transform: scale(1.12); }   /* Fläche etwas größer */
  /* Runde 6: die Fläche wächst um 12 % ihrer Höhe nach unten (Höhe = 1,04 × Breite der Spalte): der Hinweis rückt um genau so viel mit
     (12,48 % der Spaltenbreite, Größen-Container .start__foto), sonst läge er hinter dem Foto */
  .start__foto { container-type: inline-size; }
  .start[data-stufe="lebendig"] .start__hinweis { transform: translateY(12.48cqw); }
  .start__ebene--schatten { --licht-ziel: 60% 60%; background: radial-gradient(ellipse 80% 70% at var(--licht-ziel), rgba(24, 14, 6, 0) 34%, rgba(24, 14, 6, .26) 64%, rgba(24, 14, 6, .5) 100%); }   /* Tasse rechts der Mitte, Lampe im Bild: etwas weicher */
  .regler__leiste { position: relative; width: 460px; max-width: 100%; }
  .regler__spur { position: relative; inset: auto; order: 0; height: 34px; z-index: auto; pointer-events: auto; }
  .regler__spur::before { content: ""; display: block; position: absolute; left: 17px; right: 17px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--rahmen-stark);
    transition: background var(--dur-tipp) var(--ease-tipp); }
  .regler__raste { display: block; position: absolute; top: 50%; width: 2px; height: 12px; margin: -6px 0 0 -1px; border-radius: 1px; background: var(--rahmen-stark);
    left: calc(17px + (100% - 34px) * var(--p)); transition: background var(--dur-tipp) var(--ease-tipp); }
  .start.ist-dunkel .regler__spur::before, .start.ist-dunkel .regler__raste { background: rgba(245, 241, 234, .45); }
  .regler__kugel { top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; cursor: grab; }
  .regler__leiste.zieht .regler__kugel { cursor: grabbing; }
  .regler__tasten { position: relative; display: block; height: 40px; margin-top: 2px; }
  .regler__tasten button { position: absolute; top: 0; min-height: 40px; min-width: 64px; padding: 0 .6em; border-color: transparent; background: transparent; color: var(--grau);
    left: calc(17px + (100% - 34px) * var(--p)); transform: translateX(-50%); }
  .regler__tasten button[aria-checked="true"] { background: transparent; color: var(--graphit); border-color: transparent; }
  .regler__tasten button:active { transform: translateX(-50%) translateY(1px); }
  .start.ist-dunkel .regler__tasten button { background: transparent; border-color: transparent; color: var(--kino-grau); }
  .start.ist-dunkel .regler__tasten button[aria-checked="true"] { background: transparent; color: var(--kino-text); border-color: transparent; }
  /* Runde 6: Ecke unten rechts, auf Höhe der Regler-Beschriftungen; darin oben die Tasten (Nochmal, Film abspielen), darunter die Titelkarte */
  .start__ecke { position: absolute; right: var(--rand); bottom: clamp(.9rem, 2.4vh, 1.4rem); z-index: 2; display: flex; flex-direction: column; align-items: flex-end;
    gap: .9rem; pointer-events: none; }
  .start__karte { position: static; }
  .start__nochmal, .start__abspielen { position: static; translate: none; order: -1; pointer-events: auto; }
  /* Kino-Endzustand: Porträtzeile hell mit weichem Schatten (lief vorher grau über den hellen Milchschaum, 3,4:1). Dazu eine weiche dunkle Wolke
     hinter der Zeile: bei flachen Fenstern (1280 × 720, 1366 × 600) läuft das Zeilenende über den hellen Tassenrand */
  .start.ist-durch .portraet { color: var(--kino-text); }
  .start.ist-durch .portraet__text { text-shadow: 0 0 2px rgba(10, 8, 6, .9), 0 1px 3px rgba(10, 8, 6, .85), 0 0 10px rgba(10, 8, 6, .7), 0 0 22px rgba(10, 8, 6, .5); }
  .start.ist-durch .portraet::after { content: ""; position: absolute; z-index: -1; inset: -.8rem -1.4rem -.8rem -.9rem; border-radius: 2rem; pointer-events: none;
    background: rgba(10, 8, 6, .5); filter: blur(16px); }
}
/* Runde 6: schmale Rechner (761 bis 899 px): die Titelkarte lag auf der Beschriftung „Kino“ des Reglers; dort steht die Ecke über dem Regler */
@media (min-width: 761px) and (max-width: 899px) {
  .start__ecke { bottom: calc(var(--regler-raum) + .3rem); }
}
@media (hover: hover) {
  .regler__tasten button:hover { color: var(--graphit); border-color: var(--graphit); }
  .start.ist-dunkel .regler__tasten button:hover { color: var(--kino-text); border-color: var(--kino-text); }
}

/* außer Sicht angehalten (.ist-fern); am Ende, damit es auch die Handy-Regeln übersteuert */
.start.ist-fern .start__lampe::after, .start.ist-fern .start__glut, .start.ist-fern .start__lampe::before, .start.ist-fern .start__schein, .start.ist-fern .start__punkt,
.start.ist-fern .portraet::before, .start.ist-fern .portraet__foto { animation-play-state: paused; }

/* ---------- Bewegung reduzieren: keine Vorführung, harte Wechsel, Film nur auf Tipp (js/einstieg.js); Lebendig als ruhiges, warmes Standbild ---------- */
/* (Selektoren so genau wie die Lebendig-Regeln) */
@media (prefers-reduced-motion: reduce) {
  .start__film, .start__verlauf, .start__welt, .start__auge, .start__wort, .start__bild, .start__ebene, .start__ebene--licht, .start__ebene--schatten, .start__dampf, .start__karte, .start__hinweis,
  .start__video, .start__zeile, .portraet, .portraet::before, .regler__kugel, .regler__leiste.faehrt .regler__kugel, .regler__spur::before, .regler__raste,
  .start__warm, .kopf::before, .start__lampe { transition: none; }
  .start__titel.baut .start__w, .start__titel.baut .start__wort, .portraet__text, .start.ist-durch .start__text,
  .start[data-stufe="lebendig"] .start__kamera, .start[data-stufe="lebendig"] .start__lampe::after, .start[data-stufe="lebendig"] .start__glut,
  .start[data-stufe="lebendig"] .start__lampe::before, .start[data-stufe="lebendig"] .start__schein, .start[data-stufe="lebendig"] .start__punkt,
  .start[data-stufe="lebendig"] .portraet__text, .start[data-stufe="lebendig"] .portraet::before, .start[data-stufe="lebendig"] .portraet__foto,
  [data-stufe="lebendig"][data-oben="ja"] .kopf__knopf { animation: none; }
  .start[data-stufe="lebendig"] .portraet__text { background-size: 100% 1px; }   /* Unterstreichung steht gleich da */
  .start[data-stufe="lebendig"] .start__kamera { transform: scale(1.04); }
  .start[data-stufe="lebendig"] .start__bild, .start[data-stufe="lebendig"] .start__hinweis { transform: none; }
  .start[data-stufe="lebendig"] .start__punkt { opacity: .6; }
  .start.ist-kino .start__video, .start.ist-rueckflug .start__video, .start.ist-rueck .start__video { transform: none; }
  [data-stufe="lebendig"] .kopf__knopf { transform: none; box-shadow: none; }
}