/* ENDLICH DU · V22 / 28.10.2026
   Ziel: weiße mobile Hero-Headline, halbierte Abstände zwischen Filmstreifen
   auf Desktop und ein identisches Headline-Schriftbild auf der ganzen Seite.
   Bewusst KEINE Änderungen an Copy, Anmeldung, Bildern oder filmischer Bewegung.
*/

/* 1 – Einheitliche Schrift. Jost ExtraBold ist die Schrift der Hero-Headline.
   Alle echten Überschriften und ihre betonten Teile erhalten denselben Schnitt.
   Montserrat bleibt für Fließtext, Labels und Buttons zuständig. */
:root {
  --font-display: 'Jost', Arial, sans-serif;
  --font-head: 'Jost', Arial, sans-serif;
  --font-body: 'Montserrat', Arial, sans-serif;
}
#hero h1.hero-story,
main h2,
main h3,
main h4,
main .section-heading h2,
main .story-feature h3,
main .story-description h3,
main .father-copy h2,
main .marian-copy h2,
main .final-center h2,
main .about-text h2,
#signup-modal h2 {
  font-family: 'Jost', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
}
#hero h1.hero-story :is(em,span,strong),
main :is(h2,h3,h4) :is(em,span,strong),
#signup-modal h2 :is(em,span,strong) {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-stretch: inherit !important;
  letter-spacing: inherit !important;
}

/* 2 – Filmrollen: die im letzten Design eingestellten freien Abstände
   exakt halbieren: Desktop vorher 36–70 px -> 18–35 px (2vw statt 4vw).
   Filmrahmen, Perforation und Stills behalten die gemeinsame Animation. */
@media (min-width: 768px) {
  #hero .hero-film-wall {
    gap: clamp(18px, 2vw, 35px) !important;
    justify-content: center !important;
  }
  #aufruf .final-film-wall {
    gap: clamp(17.5px, 2vw, 35px) !important;
    justify-content: center !important;
  }
}
/* Ein altes Tablet-Layout erzwingt space-between, wodurch die Lücken
   unabhängig vom gap-Wert viel größer erscheinen würden. */
@media (min-width: 768px) and (max-width: 1199px) {
  #hero .hero-film-wall .final-film-lane {
    flex: 0 0 auto !important;
    height: clamp(240px, 27vw, 410px) !important;
  }
}

/* 3 – Mobile: sämtliche Wörter des Zitats reinweiß; dunkler, weicher
   bordeaux-/roséfarbener Fokus hinter der Schrift erhält den Kontrast.
   Der Verlauf fällt nach außen ab, sodass die echten Filmrollen sichtbar
   bleiben. Nicht den gesamten Header zu einer deckenden Fläche machen. */
@media (max-width: 767px) {
  #hero h1.hero-story,
  #hero h1.hero-story em,
  #hero h1.hero-story span,
  #hero h1.hero-story strong {
    color: #fffaf6 !important;
    background: none !important;
    background-image: none !important;
    -webkit-text-fill-color: #fffaf6 !important;
    text-shadow: 0 3px 16px rgba(40, 11, 35, .56) !important;
  }
  #hero .hero-head::before {
    background: radial-gradient(
      ellipse 88% 85% at 50% 41%,
      rgba(80, 23, 54, .84) 0%,
      rgba(106, 38, 68, .69) 47%,
      rgba(150, 62, 92, .38) 73%,
      rgba(165, 64, 103, 0) 100%
    ) !important;
    filter: none !important;
    pointer-events: none !important;
  }
  #hero .hero-mobile-shade {
    background:
      radial-gradient(
        ellipse 83% 25% at 50% 10%,
        rgba(91, 25, 61, .72) 0%,
        rgba(134, 45, 81, .46) 51%,
        rgba(184, 66, 101, .04) 100%
      ),
      linear-gradient(180deg,
        rgba(169, 59, 104, .21) 0%,
        rgba(236, 117, 139, .09) 42%,
        rgba(252, 175, 117, .11) 71%,
        rgba(172, 64, 101, .21) 100%
      ) !important;
  }
}