/* ==========================================================
   NIA Hero Cinematic — Headline erbt Theme-Schrift, Labels Victor Mono
   ========================================================== */

.nia-hero-cine {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #e4e2dd; /* Fog */
  display: flex;
  align-items: center;       /* vertikal mittig, klar unter der Navi */
  justify-content: flex-start;
  /* Eigener Blend-Gruppen-Kontext: hält den mix-blend der Auto-Color über dem
     (per Parallax/Ken-Burns transformierten) Foto stabil — sonst flackert er auf
     Handy-Browsern. Isoliert wird die SECTION (enthält Foto + Schrift), nicht der
     Inhalt — die Schrift kann weiter mit dem Foto blenden. */
  isolation: isolate;
}

/* ---------- Parallax-Foto ---------- */
.nia-hero-cine__parallax {
  position: absolute;
  left: 0; right: 0;
  top: -12%;
  height: 124%;              /* extra Höhe für Parallax-Spielraum */
  /* will-change setzt das JS, sobald der Parallax-Motor startet —
     so bleibt die Ebene nur dann dauerhaft kompositiert, wenn sie es
     wirklich sein muss. */
}
.nia-hero-cine__photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
  opacity: 0;
}
.nia-hero-cine.is-revealing .nia-hero-cine__photo {
  animation: niaHeroFade 1.6s ease forwards;
}
.nia-hero-cine.is-revealing.has-kb .nia-hero-cine__photo {
  animation: niaHeroFade 1.6s ease forwards,
             niaHeroKB 18s ease-out forwards;
}
@keyframes niaHeroFade { to { opacity: 1; } }
@keyframes niaHeroKB { from { transform: scale(1.0); } to { transform: scale(1.1); } }

/* ---------- Scrim ---------- */
.nia-hero-cine__scrim {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.nia-hero-cine.is-revealing .nia-hero-cine__scrim {
  animation: niaHeroFade 1.6s ease 0.2s forwards;
}
.scrim-none   .nia-hero-cine__scrim { display: none; }
.scrim-light  .nia-hero-cine__scrim { background: linear-gradient(90deg, rgba(69,65,56,0.35) 0%, rgba(69,65,56,0.05) 55%, rgba(69,65,56,0) 100%); }
.scrim-medium .nia-hero-cine__scrim { background: linear-gradient(90deg, rgba(69,65,56,0.55) 0%, rgba(69,65,56,0.12) 55%, rgba(69,65,56,0) 100%); }
.scrim-strong .nia-hero-cine__scrim { background: linear-gradient(90deg, rgba(69,65,56,0.7) 0%, rgba(69,65,56,0.2) 50%, rgba(69,65,56,0) 100%); }

/* ---------- Inhalt (links) ----------
   Kein z-index: paint via DOM-Reihenfolge (über Foto/Scrim), aber KEIN
   isolierender Stacking-Context — damit die Headline per mix-blend
   mit dem Foto blenden kann (Auto-Color). */
.nia-hero-cine__content {
  position: relative;
  padding: 0 clamp(24px, 5vw, 80px);
  max-width: 1200px;
}

.nia-hero-cine .nia-hero-cine__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Victor Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--end-color, #e4e2dd);
  margin: 0 0 clamp(16px, 2vh, 26px);
  opacity: 0;
  text-shadow: 0 1px 14px rgba(69,65,56,0.4);
}
.nia-hero-cine.is-revealing .nia-hero-cine__eyebrow {
  animation: niaHeroFade 1s ease 0.4s forwards;
}
.nia-hero-cine__eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8b98a1; flex-shrink: 0;
}

/* ---------- Schrift-Lagen (linksbündig, kleiner) ---------- */
/* padding-right: Die Section ist flex → der Stack ist exakt so breit wie
   die längste Solid-Zeile (shrink-to-fit, NULL Spielraum). Der Tipp-Cursor
   schob die fertige Zeile 1 dadurch über die Kante → kurzer Umbruch →
   Layout Shift 0.119 (per Shift-Protokoll auf das Zeichen genau belegt).
   0.15em groesser als Cursorbreite (0.09em) = nie wieder ein Umbruch. */
.nia-hero-cine__stack { position: relative; text-align: left; padding-right: 0.15em; }
/* Höhere Spezifität, damit Größe/Layout die Theme-.h1-Klasse überschreiben;
   font-family kommt weiter vom Theme (.h1) */
.nia-hero-cine .nia-hero-cine__title {
  font-size: clamp(44px, 8vw, 130px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0;
  padding-bottom: 0.14em;   /* Platz für Unterlängen (g, j, p ...) */
  display: block;
  text-align: left;
  text-transform: uppercase;
}

/* Lage A: mit Foto gefüllt (Typewriter), liegt OBEN und blendet bei Umkehrung
   aus; gibt dadurch die darunterliegende Auto-Color-Schrift frei (kein Sprung). */
.nia-hero-cine__title--clip {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 32%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.nia-hero-cine.is-revealing .nia-hero-cine__title--clip {
  animation: niaHeroFadeOut 1.2s ease forwards;
}

/* Mit JS: Headline anfangs als GANZE Ebene unsichtbar (Compositor-Opacity,
   iOS-sicher — ändert die Textmaske nicht). module.js deckt sie auf, sobald
   die Abdeckungen liegen. Ohne JS bleibt sie statisch sichtbar. */
.nia-hero-cine.js .nia-hero-cine__title--clip { opacity: 0; }

@keyframes niaHeroFadeOut { to { opacity: 0; } }

/* Typewriter: Zeichen stehen von Anfang an KOMPLETT im Text (iOS rastert die
   Foto-Textmaske nur einmal — nachgetippte Zeichen erschienen dort nie).
   .on hier nur als Gegenmittel gegen die alte opacity-0-Regel im stale
   Kombi-Bündel. */
.nia-hero-cine .nia-hero-cine__ch,
.nia-hero-cine__ch.on { opacity: 1; }

/* Abdeckung: liegt in der Seitenhintergrund-Farbe über der fertig gerasterten
   Foto-Schrift und gleitet per transform Buchstabe für Buchstabe nach rechts
   weg — der Tipp-Effekt entsteht, ohne dass Safari die Textmaske je
   aktualisieren müsste. transform zählt zudem nicht als Layout Shift. */
.nia-hero-cine__cover {
  position: absolute;
  z-index: 3;
  background: #e4e2dd; /* Fog — exakt der Hero-Hintergrund vor der Aufblende */
  pointer-events: none;
  font-size: clamp(44px, 8vw, 130px); /* damit die em-Maße des Cursors stimmen */
}
/* Cursor: sitzt an der linken Kante der Abdeckung und wandert mit ihr —
   aber nur an der GERADE getippten Zeile (sonst blinken zwei Striche) */
.nia-hero-cine__cover.is-active::before {
  content: "";
  position: absolute;
  left: 0.05em;
  bottom: 0.22em;
  width: 0.06em; height: 0.82em;
  background: #8b98a1;
  animation: niaHeroCaret 0.7s steps(1) infinite;
}
@keyframes niaHeroCaret { 50% { opacity: 0; } }
.nia-hero-cine.is-revealing .nia-hero-cine__cover { display: none; }
/* Alte Caret-Klassen: falls das stale Kombi-Bündel sie noch rendert */
.nia-hero-cine .nia-hero-cine__caret { display: none; }
.nia-hero-cine .nia-hero-cine__ch.is-last::after { display: none; }

/* Lage B: mit Farbe gefüllt, liegt im Fluss (definiert die Höhe), darunter.
   Wird durch das Ausblenden der Foto-Schrift freigelegt. */
.nia-hero-cine__title--solid {
  color: var(--end-color, #e4e2dd);
  opacity: 0;
  text-shadow: 0 2px 30px rgba(69,65,56,0.35);
}
/* Auto-Color: Schrift passt sich dem Foto an (immer lesbar).
   translateZ(0): hebt die Schrift auf dieselbe GPU-Ebene wie das (per
   Parallax transformierte) Foto — sonst lässt iOS Safari den mix-blend
   einfach weg und die Schrift steht flach hell da. */
.nia-hero-cine.is-autocolor .nia-hero-cine__title--solid {
  color: #fff;
  mix-blend-mode: difference;
  text-shadow: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/* KEINE opacity-Animation auf der geblendeten Schrift: solange opacity kleiner als 1 ist,
   wird ein mix-blend-Element isoliert (blendet nicht mit dem Foto) und „springt"
   bei opacity:1 um. Daher konstant sichtbar — die Foto-Schrift (--clip) darüber
   blendet aus und gibt sie frei. */
.nia-hero-cine.is-revealing .nia-hero-cine__title--solid {
  opacity: 1;
}

/* ---------- Labels (Victor Mono, adaptiv) ---------- */
.nia-hero-cine__meta,
.nia-hero-cine__foot {
  z-index: 5;
  font-family: "Victor Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0;
  mix-blend-mode: difference;
  color: #fff;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.nia-hero-cine.is-revealing .nia-hero-cine__meta,
.nia-hero-cine.is-revealing .nia-hero-cine__foot {
  animation: niaHeroFade 1s ease 0.5s forwards;
}

/* Meta wieder unten links (Anne 07/2026: Test unter der Headline verworfen).
   section-Präfix = höhere Spezifität, damit die Unter-der-Headline-Regel
   aus dem zwischengespeicherten Kombi-CSS-Bündel sicher verliert. */
section.nia-hero-cine .nia-hero-cine__meta {
  position: absolute;
  display: inline;
  margin: 0;
  max-width: 42ch;
  line-height: 1.7;
  bottom: clamp(24px, 5vh, 48px);
  left: clamp(24px, 5vw, 80px);
}

.nia-hero-cine__foot {
  position: absolute;
  bottom: clamp(24px, 5vh, 48px);
  right: clamp(24px, 5vw, 80px);
}

/* (Der frühere @supports-Fallback für Browser ohne background-clip:text
   ist entfernt: alle relevanten Browser können es seit Jahren, und der
   @supports-not-Block verhinderte HubSpots CSS-Minifizierung — diese Datei
   war als einzige unminifiziert ausgeliefert.) */

/* Ohne JS: direkt Endzustand zeigen (kein hängenbleiben in Phase 1) */
.nia-hero-cine:not(.js) .nia-hero-cine__photo,
.nia-hero-cine:not(.js) .nia-hero-cine__scrim,
.nia-hero-cine:not(.js) .nia-hero-cine__title--solid,
.nia-hero-cine:not(.js) .nia-hero-cine__eyebrow,
.nia-hero-cine:not(.js) .nia-hero-cine__meta,
.nia-hero-cine:not(.js) .nia-hero-cine__foot { opacity: 1; }
.nia-hero-cine:not(.js) .nia-hero-cine__title--clip { display: none; }

/* Touch-Geräte (iPhone/iPad): kein Ken-Burns-Zoom — die laufende transform-
   Animation auf dem Foto bricht in iOS Safari den mix-blend der Auto-Color-
   Schrift, sobald eine Ebene neu gerastert wird (Schrift springt auf Creme um). */
@media (pointer: coarse) {
  .nia-hero-cine.is-revealing.has-kb .nia-hero-cine__photo {
    animation: niaHeroFade 1.6s ease forwards;
  }
}

/* Reduced Motion: direkt End-Zustand, kein Parallax/Typing */
@media (prefers-reduced-motion: reduce) {
  .nia-hero-cine__photo,
  .nia-hero-cine__scrim,
  .nia-hero-cine__title--solid,
  .nia-hero-cine__eyebrow,
  .nia-hero-cine__meta,
  .nia-hero-cine__foot { opacity: 1 !important; animation: none !important; }
  .nia-hero-cine.has-kb .nia-hero-cine__photo { animation: none !important; }
  .nia-hero-cine__title--clip { display: none !important; }
  .nia-hero-cine__parallax { transform: none !important; }
}

/* (Bild-Zuweisung kommt als direkter URL-Style-Block aus module.html —
   var()-basierte Bilder brechen background-clip:text auf iOS.) */