/* Intro „Auge auf, drei Schnitte, Name“ (Entwurf 04, bestanden in Runde 1, eingebaut vom Animator am 02.10.2026).
   Nur auf der Startseite und nur, solange <html> die Klasse intro-laeuft trägt (js/intro-auge-kopf.js). Ohne die Klasse
   wirkt hier nichts: ohne JavaScript, bei „weniger Bewegung“ und nach dem Intro steht der Hero aus stil.css.
   Farben nach PLAN.md Abschnitt 16.1 und 16.2 (Intros sind von der Farbregel ausgenommen, genutzt sind trotzdem nur die Rollen).
   Seit 03.10.2026 (Schritt 1b) ist der Grund des Intros Weiß wie der Hero, damit beide gleich enden; das Fensterinnere
   bleibt Silber hell (#f6f7f8), der schwarze Rahmen trägt die Kante. Zeitplan unverändert. Seit 03.10.2026 (Schritt 16b)
   in Silber, Schwarz und Kobalt statt Pfirsich, Pflaume und Koralle; die Farben kommen hier nur über die Variablen.
   Seit 03.10.2026 (Schritt 16c2) ist auch das Foto am linken Rand (.hero__foto) verborgen; es erscheint mit Satz und
   Knöpfen ab 2000 ms, nur über die Deckkraft.
   Bewegt wird nur über transform und opacity, gesetzt von js/intro-auge.js. */

/* Grund des Intros: Weiß (var(--dominant)), ausdrücklich gesetzt, damit kein anderer Grund durchscheint */
html.intro-laeuft, html.intro-laeuft body { background-color: var(--dominant); }

/* Vor dem ersten Bild verborgen, das Skript blendet ein. visibility, damit nichts Verborgenes klickbar ist. */
html.intro-laeuft .kopf,
html.intro-laeuft .fenster-ort,
html.intro-laeuft #hero-name,
html.intro-laeuft .titel__fach,
html.intro-laeuft .hero__satz,
html.intro-laeuft .hero__foto,
html.intro-laeuft .hero .knoepfe,
html.intro-laeuft .handy-ort,
html.intro-laeuft .bildzeile,
html.intro-laeuft .steuerung,
html.intro-laeuft .fenster__pause,
html.intro-laeuft .datenzeile,
html.intro-laeuft #arbeiten { opacity: 0; visibility: hidden; }
html.intro-laeuft .fenster-ort { will-change: transform, opacity; }
html.intro-laeuft #hero-name { transform-origin: 0 0; }

/* Leiste: die echte Adresse und der KI-Hinweis der Diashow ruhen, das Intro zeigt seine eigene Adresse.
   Das kleine Auge erscheint erst beim Tausch mit dem großen; seine Lider springen ohne Übergang. */
html.intro-laeuft #hero-fenster .fenster__adresse > .adresse,
html.intro-laeuft #hero-fenster .fenster__ki { visibility: hidden !important; }
html.intro-laeuft #hero-fenster .fenster__auge { opacity: 0; }
html.intro-laeuft #auge-lid-oben, html.intro-laeuft #auge-lid-unten { transition: none; }
.intro-adresse { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro-ki {
  display: none; flex: none; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--sekundaer); color: var(--dominant); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.intro-ki:not(:empty) { display: inline-flex; }

/* Fensterinhalt: leer (Silber hell), bis der letzte Schnitt Folie 1 freilegt. Darüber die Schnitte, darüber das Auge. */
.intro-leer { position: absolute; inset: 0; z-index: 3; background: var(--dominant-hell); }
.fenster__inhalt > img.intro-schnitt { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; }
.intro-auge { position: absolute; left: 0; top: 0; z-index: 5; height: auto; overflow: visible; transform-origin: 0 0; pointer-events: none; will-change: transform; }

/* „· visuellweb“ hinter dem Nachnamen, auf dessen Grundlinie, ohne Platz im Raster zu nehmen (der Name landet pixelgleich) */
html.intro-laeuft .titel__nachname { position: relative; }
.intro-zusatz { position: absolute; top: 0; white-space: nowrap; pointer-events: none; }
.intro-zusatz > span { font: italic 400 .46em var(--schrift-kopf); letter-spacing: 0; }

/* Die Kobalt-Linie vom Nachnamen zum Fenster zieht sich erst, wenn Fenster und Name gelandet sind */
html.intro-laeuft .titel__nachname::after { transform: scaleX(var(--intro-linie, 0)); transform-origin: 0 50%; }