/* Web-Anbau – Scroll-Intro des ersten Bildschirms.
   Nur wenn js/intro.js die Klasse „ist-live“ setzt (großer Bildschirm, Bewegung erlaubt), wird der Abschnitt
   hoch und der erste Bildschirm bleibt stehen. Sonst ist alles hier wirkungslos und der erste Bildschirm normal. */

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

.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); }
.intro.ist-live .held-text { padding: 0.5rem 0 1.5rem; }
@media (max-height: 50em) {
  .intro.ist-live .stempel { width: 9svh; margin-bottom: 0.75rem; }
  .intro.ist-live .held-titel { font-size: min(7.6vw, 13svh); }
  .intro.ist-live .held-satz { margin-top: 1rem; }
  .intro.ist-live .held-aktion { margin-top: 1.25rem; }
}

/* 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 */
.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; }
/* 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; }

/* Am Ende klebt ein Etikett auf dem Bild, wie die Verben im Ablauf */
.intro.ist-live .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;
}