/* ==========================================================================
   amplifylm – Hero "Film verstärkt [X]" (Patch für /var/www/amplify-emotions/index.html)
   Ergänzt die bestehende Seite, überschreibt nichts. Alles neu heißt ae-film-* .
   Farben/Schrift kommen weiter aus den bestehenden Variablen (--navy, --brand, --white) und aus h1 / h1 em.
   ========================================================================== */

/* 1) Rechte Hero-Fläche: eigener Stacking-Context, damit Ebenen mit z-index:-1 über dem
      Navy-Hintergrund, aber unter Signet, Zitat und Stats liegen. */
.hero-right { isolation: isolate; }

/* 2) Bildsprache (CI-Manual Abschnitt 6) – nach der Visitenkarten-Vorderseite:
      a) Claim + Tagline weich unscharf im Hintergrund (links oben),
      b) das Signet riesig als scharfe Fläche in #51A6F4 bei 14 %, rechts oben angesetzt, unten und rechts angeschnitten.
      Rein dekorativ, hinter dem scharfen Text. */
.ae-film-texture,
.ae-film-shapes {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.ae-film-texture {
  left: 8%;
  top: 19%;
  font-family: 'CG', 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 3.44vw, 5.2rem);   /* 8,2 % der Flächenbreite (Fläche = 42vw breit) */
  line-height: 1.1;
  white-space: nowrap;
  color: rgba(169, 207, 247, .5);
  filter: blur(.034em);                     /* 3,4 % der Claim-Schriftgröße; gilt für Claim UND Tagline (gleiche Tiefenebene) */
  user-select: none;
}
@media (max-width: 960px) {
  .ae-film-texture { display: none; }       /* mobil steht die echte Headline direkt darüber, der Hintergrund-Claim würde nur mit Zitat/Kacheln kollidieren */
}
.ae-film-texture span { display: block; }
.ae-film-texture .ae-film-i2 { font-style: italic; }   /* "dich." kursiv wie auf der Karte */
.ae-film-texture .ae-film-tag {
  font-family: 'PP', 'Poppins', sans-serif;
  font-weight: 400;
  font-size: .354em;                        /* 2,9 % : 8,2 % der Kartenbreite */
  margin-top: 1.3em;
}
.ae-film-shapes { inset: 0; }
.ae-film-shapes svg { width: 100%; height: 100%; display: block; }
/* Das bisherige Wasserzeichen-Signet der Fläche würde die neue Signet-Fläche doppeln */
.hero-right .hr-sign { display: none; }

/* 3) Headline: Landewort + Punkt bilden eine Einheit und brechen nur gemeinsam um */
.ae-film-tail { white-space: nowrap; }
.ae-film-tail.ae-film-stacked { display: block; }  /* per JS gesetzt, wenn das breiteste Wort nicht in die Zeile passt */

/* 4) Landewort-Fenster: 1,2em hoch (Platz für Unterlängen wie das g in "Geschichte"),
      per negativem Rand wieder auf die Zeilenhöhe der H1 (.9) zurückgeführt → Zeilenabstand bleibt unverändert */
.ae-film-slot {
  display: inline-block;
  vertical-align: bottom;
  height: 1.2em;
  margin-block: calc((1lh - 1.2em) / 2);
  overflow: hidden;
}
@supports not (height: 1lh) {
  .ae-film-slot { margin-block: -.15em; }
}
.ae-film-slot[data-film="pending"] { visibility: hidden; }  /* verhindert Aufblitzen vor dem Start */
.ae-film-strip { margin: 0; padding: 0; list-style: none; will-change: transform; }
.ae-film-strip li { height: 1.2em; line-height: 1.2; white-space: nowrap; margin: 0; padding: 0; }
/* Streifen-Einträge sehen exakt aus wie die H1, unabhängig von globalen ul/li-Regeln der Seite */
.ae-film-slot .ae-film-strip,
.ae-film-slot .ae-film-strip li,
.ae-film-slot .ae-film-strip em {
  font-family: 'CG', 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  letter-spacing: inherit;
}
:where(.ae-film-slot em) { font-style: italic; color: #5FA1D8; padding-right: .03em; display: inline-block; }  /* Fallback; h1 em der Seite hat Vorrang */

/* 5) Screenreader/Suchmaschinen lesen den festen Satz */
.ae-film-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}