/* ============================================================
   HEAD / HERO — Back & Boldt
   Archetyp: Video-Loop, Full-Bleed „Die Ausfahrt" (design-ledger 11.09.2026)
   Regeln: GESETZ Kap. 5 (Sofortstart, kein poster, Text unten links,
   genau EIN CTA, keine Rufnummer), hero-craft §4/§4b/§5.
   Gehört @hero-engineer (Schritt 4). Sektionen unterm Head: Schritt 6.
   ============================================================ */

/* --- 1 · Die Bühne ----------------------------------------- */
.kopf {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-content: end;
  overflow: clip;

  /* Themenfeste Bühne (GESETZ Kap. 11): Schrift UND Grund kippen beim
     Themenwechsel NICHT — die Token werden hier auf die *-fest-Werte
     umdefiniert, nicht per color:-Regel je Selektor. */
  --tinte: var(--kalk-fest);
  --meta: var(--meta-fest);
  --grund: var(--dunkel-fest);

  background: var(--dunkel-fest);
  color: var(--kalk-fest);
}

/* Die Medienfläche trägt selbst den dunklen Grundton, damit bis zum ersten
   Frame kein helles Loch steht (hero-video-encode §5). */
.kopf__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--dunkel-fest);
  /* kein poster — GESETZ Kap. 5 */
}

/* Gerichteter Scrim: nur unten, das Motiv oben bleibt hell. */
.kopf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
  pointer-events: none;
}

/* --- 2 · Der Textblock (unten links, GESETZ Kap. 5) --------- */
.kopf__inhalt {
  width: min(100% - 3rem, 88rem);
  margin-inline: auto;
  padding-block: 0 clamp(3.5rem, 7vh, 6rem);
  max-width: 88rem;
}

.kopf__eyebrow {
  font-family: "General Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--meta-fest);
  margin: 0 0 clamp(0.9rem, 2vh, 1.4rem);
}

.kopf__h1 {
  font-family: "Gabarito", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(3.2rem, 9.2vw, 9.5rem);
  letter-spacing: -0.03em;
  line-height: 0.92;
  text-wrap: balance;
  color: var(--kalk-fest);
  margin: 0;
  max-width: 16ch;
  overflow-wrap: break-word; /* nicht `anywhere` — bau-brief §3 */
}

/* Zeilen-Wrapper für den Reveal. `overflow: hidden` steht NUR auf der
   Maske, nie auf dem Zeilen-Element selbst (köpft sonst Umlaute). */
.kopf__h1 .zeile {
  display: block;
  overflow: hidden;
  padding-block: 0.06em; /* Luft für Unterlängen/Umlaute */
}
.kopf__h1 .wort {
  display: inline-block;
}
.kopf__h1 .akzent {
  color: var(--soul);
}
/* Auf der themenfesten Bühne bleibt das Akzentwort in Soul Red aus dem
   HELL-Thema — die Bühne kippt nicht, also kippt auch das Wort nicht.
   Fremd-Blick 11.09.2026: der vorherige Wort-Chip (dunkler Kasten hinter
   dem Wort) war ein Patch am Wort, nicht an der Fläche — im Bild stand ein
   grauer Kasten. Fix an der Fläche: ein helleres, spezifisch fürs Kopf-Rot
   gewähltes Rot (#ff5a52 statt #c11e21) trägt gegen den vorhandenen
   GESETZ-Kap.-5-Scrim ohne jeden zusätzlichen Grund (errechnete Luminanz
   0,29 vs. Scrim-Hintergrund ~0,01–0,02 → weit über 3:1). */
.kopf .akzent {
  color: #ff5a52;
}

.kopf__beweis {
  font-family: "General Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.06rem, 1.35vw, 1.3rem);
  line-height: 1.6;
  color: var(--meta-fest);
  margin: clamp(1.1rem, 2.4vh, 1.75rem) 0 0;
  max-width: 46ch;
}

/* --- 3 · Der EINE CTA (GESETZ Kap. 5) ----------------------- */
.kopf__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(1.6rem, 3.2vh, 2.4rem);
  padding: 0.95rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: #c11e21; /* Soul Red — Knopffläche auf der festen Bühne */
  color: #ffffff; /* 6,04:1 (bau-brief §2.4) */
  font-family: "General Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition:
    background var(--t2) var(--ease),
    transform var(--t1) var(--ease);
}
.kopf__cta:hover,
.kopf__cta:focus-visible {
  background: #8e1114;
}
.kopf__cta:active {
  transform: translateY(1px);
}
.kopf__cta:focus-visible {
  outline: 2px solid var(--kalk-fest);
  outline-offset: 3px;
}
.kopf__cta svg {
  flex: 0 0 auto;
}

/* --- 4 · Mobil: eigenes Bildband, Text mittig darunter ------ */
/* GESETZ Kap. 5: unter 900 px kein Text ÜBER dem Video. */
@media (max-width: 899px) {
  .kopf {
    min-height: 0;
    align-content: start;
    background: var(--dunkel-fest);
  }
  .kopf__band {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: clip;
  }
  .kopf__video {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .kopf::after {
    display: none;
  }
  .kopf__inhalt {
    width: min(100% - 2.5rem, 40rem);
    text-align: center;
    padding-block: clamp(2rem, 5vh, 3rem) clamp(2.5rem, 6vh, 3.5rem);
  }
  .kopf__h1 {
    font-size: clamp(2.6rem, 11vw, 3.6rem); /* eine Stufe kleiner */
    max-width: none;
  }
  .kopf__beweis {
    margin-inline: auto;
  }
}

/* Desktop: das Band ist nur ein durchsichtiger Rahmen um das Video. */
@media (min-width: 900px) {
  .kopf__band {
    position: absolute;
    inset: 0;
    z-index: -2;
  }
}

/* --- 5 · Sub-Head (Unterseiten, ~58svh, gleiche Sprache) ---- */
/* Höhe und Schriftgrad sind GEMESSEN, nicht geschätzt: bei 58svh +
   clamp(…,6.4vw,6.4rem) füllte der Textblock auf 1440×900 die ganze Bühne,
   das Motiv war ein Streifen (Screenshots sehen/kopf-fahrzeuge-1440-*,
   Runde 1). 70svh + eine Stufe kleiner lässt rund 45 % freies Motiv. */
.kopf--sub {
  min-height: 70svh;
}
.kopf--sub .kopf__h1 {
  font-size: clamp(2.4rem, 5.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 18ch;
}
.kopf--sub .kopf__beweis {
  max-width: 42ch;
}
@media (max-width: 899px) {
  .kopf--sub .kopf__band {
    aspect-ratio: 16 / 10;
  }
  .kopf--sub .kopf__h1 {
    font-size: clamp(2.2rem, 9.5vw, 3rem);
  }
}

/* --- 5b · ueber-uns: EINBAU-Fix, kein neuer Grok-Lauf (Fremd-Blick,
   Runde 2, 12.09.2026) ---------------------------------------
   Der Clip ist in Ordnung (CX-5 fährt in allen 10 Kontaktbogen-Frames
   sichtbar am Haus vorbei, bei 390 einwandfrei) — bei 1440 verschluckt der
   `cover`-Ausschnitt (1920×1088 in 1440×630) zusammen mit dem Scrim genau
   das untere Band, in dem das Fahrzeug fährt. Zwei Griffe: Bildausschnitt
   tiefer (object-position statt Mitte) + horizontaler Scrim schmaler und
   steiler (reichte vorher bis in die Bildmitte, 68% Auslauf). */
.kopf--ueberuns .kopf__video {
  object-position: 50% 35%;
}
.kopf--ueberuns::after {
  background:
    linear-gradient(
      to top,
      rgba(8, 14, 20, 0.97) 0%,
      rgba(8, 14, 20, 0.93) 18%,
      rgba(8, 14, 20, 0.76) 36%,
      rgba(8, 14, 20, 0.44) 54%,
      rgba(8, 14, 20, 0.14) 70%,
      transparent 82%
    ),
    linear-gradient(
      to right,
      rgba(8, 14, 20, 0.82) 0%,
      rgba(8, 14, 20, 0.5) 18%,
      rgba(8, 14, 20, 0.15) 32%,
      transparent 44%
    );
}

/* --- 6 · Startzustand der Choreografie ---------------------- */
/* `will-change` gilt NUR, solange die Choreografie läuft — kopf.js setzt die
   Klasse vor dem Start und nimmt sie am Ende wieder weg (hero-craft §5:
   Dauer-`will-change` frisst Speicher). Gemessen: nach 3 s steht
   `will-change: auto`. */
@media (prefers-reduced-motion: no-preference) {
  html.choreo-laeuft .kopf__h1 .wort,
  html.choreo-laeuft .kopf__eyebrow,
  html.choreo-laeuft .kopf__beweis,
  html.choreo-laeuft .kopf__cta {
    will-change: transform, opacity;
  }
}

/* reduced-motion: Text steht sofort auf dem Endwert.
   Das Head-VIDEO läuft weiter (GESETZ Kap. 5) — hier wird nichts pausiert. */
@media (prefers-reduced-motion: reduce) {
  .kopf *,
  .kopf *::before,
  .kopf *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}