/* Web-Anbau – Scroll-Intro des ersten Bildschirms.
   js/intro.js setzt „ist-live“ (breite Fenster: die ganze Bühne bleibt stehen) oder „ist-schmal“ (Telefon, Tablet hoch,
   sehr niedrige Fenster: nur das Foto bleibt stehen). Ohne Skript und bei reduzierter Bewegung ist alles hier wirkungslos. */

.held-bild-platz,
.intro-etikett { display: none; }

/* ---------- Breit: Der erste Bildschirm muss auf jede Fensterhöhe passen ---------- */
/* --z ist 1rem, solange Platz ist; in niedrigen Fenstern schrumpft die Bühne mit. Die Bühne ist etwa 48 z hoch,
   9,5rem gehen für Kopf, Faktenzeile und Ränder ab. Steht im Media Query statt an der Klasse, damit beim Laden nichts springt. */
@media (min-width: 64em) and (min-height: 34em) and (prefers-reduced-motion: no-preference) {
  .js .intro { --z: min(1rem, (100svh - 9.5rem) / 48); }
  .js .intro .held-text { padding: calc(var(--z) * 0.5) 0 var(--z); }
  .js .intro .stempel { width: calc(var(--z) * 7.25); margin-bottom: calc(var(--z) * 0.75); }
  .js .intro .held-titel { font-size: min(7.6vw, calc(var(--z) * 7.75)); }
  .js .intro .held-satz { margin-top: calc(var(--z) * 1.25); font-size: max(1rem, calc(var(--z) * 1.375)); }
  .js .intro .held-aktion { margin-top: calc(var(--z) * 1.5); }
}
/* In niedrigen Fenstern darf der Satz breiter laufen, dann braucht er weniger Zeilen */
@media (min-width: 64em) and (max-height: 56em) and (min-height: 34em) and (prefers-reduced-motion: no-preference) {
  .js .intro .held-satz { max-width: 54ch; }
}

.intro.ist-live { height: 260svh; }
/* Der Kopf steht über der Bühne: unten um seine Höhe frei lassen, sonst liegt die Faktenzeile beim Laden unter dem Rand */
.intro.ist-live .held { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: clip; padding-bottom: calc(var(--margin) + 5rem); }

/* Der Platzhalter hält die Zelle im Raster; das Bild liegt über der ganzen Bühne und wird per clip-path
   auf das Fenster zugeschnitten. So kann es sich ohne Layout-Arbeit bis zum Rand öffnen. */
.intro.ist-live .held-bild-platz { display: block; grid-column: 2; grid-row: 1 / span 2; }
/* grid-column/row auto: sonst bezieht sich „absolute“ auf die Rasterzelle statt auf die ganze Bühne.
   transition: none: Den Zuschnitt setzt der Bildlauf; der Übergang aus site.css ließe ihn sonst über eine Sekunde nachlaufen. */
.intro.ist-live .held-bild { position: absolute; inset: 0; z-index: 2; grid-column: auto; grid-row: auto; min-height: 0; aspect-ratio: auto; max-height: none; transition: none; }
/* Nach dem Auftritt übernimmt der Bildlauf; die Einblend-Animation darf die Werte dann nicht mehr festhalten */
.intro.ist-gelaufen .held-fakten { animation: none; opacity: 1; transform: none; }
.intro.ist-live .held-bild img { object-position: 50% 45%; }
.intro.ist-live .held-text,
.intro.ist-live .held-fakten { position: relative; z-index: 3; }

/* ---------- Schmal: Text läuft durch, das Foto bleibt stehen und öffnet sich ---------- */
/* Die letzte Rasterzeile ist um 90svh höher als das Foto: Das ist die Strecke, auf der es stehen bleibt (js/intro.js misst sie).
   Das Foto steht zuletzt und ohne Außenabstand, denn Chromium begrenzt „sticky“ am ganzen Raster: Alles darunter ließe es überlappen.
   100lvh: Auch bei eingefahrener Adressleiste bleibt keine Lücke unter dem Foto. */
.intro.ist-schmal .held { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto calc(100lvh + 90svh); min-height: 0; padding-bottom: 0; }
.intro.ist-schmal .held-text { grid-column: 1; grid-row: 1; }
.intro.ist-schmal .held-fakten { grid-column: 1; grid-row: 2; }
.intro.ist-schmal .held-bild { position: sticky; top: 0; grid-column: 1; grid-row: 3; align-self: start; height: 100vh; height: 100lvh; min-height: 0; max-height: none; aspect-ratio: auto; margin: 0 calc(var(--margin) * -1); background: none; transition: none; }
.intro.ist-schmal .held-bild img { object-position: 58% 45%; transition: none; scale: none; }
.intro.ist-schmal .held-fakten { margin-top: 0; }

/* Am Ende klebt ein Etikett auf dem Bild, wie die Verben im Ablauf */
.intro.ist-live .intro-etikett,
.intro.ist-schmal .intro-etikett {
  display: block;
  position: absolute;
  z-index: 4;
  left: var(--margin);
  bottom: calc(var(--margin) + 1.5rem);
  margin: 0;
  padding: 0.06em 0.24em 0.12em;
  background: var(--papier);
  color: var(--tinte);
  font-size: var(--step-head);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  rotate: -2deg;
  opacity: 0;
}
/* Unter eingefahrener wie ausgefahrener Adressleiste sichtbar */
.intro.ist-schmal .intro-etikett { bottom: calc(100lvh - 100svh + var(--margin)); max-width: calc(100% - var(--margin) * 2); width: fit-content; text-wrap: balance; hyphens: none; }