/* =====================================================================
   kopf-video.css — echte Kopf-Videos · Rechtsanwalt Christian Korn
   Schritt 4 @hero-engineer · Korrektur 29.09.2026 (Hamadas Wort 03:12:
   „MACH SOFORT DAS STARTVIDEO UND EIN VIDEO FÜR DIE UNTERSEITEN")
   Von Hand gepflegt (kopf.css bleibt Erzeugnis von _arbeit/kopf-bauen.mjs).

   Schalter: Sobald ein <video class="kopf__video"> DIREKT im .kopf steht,
   greift alles hier (:has). Unterseiten tragen das Video aus generate.mjs,
   die Startseite braucht später nur EINE Zeile (siehe index.html,
   Kommentar „START-VIDEO").

   Themenfest (Kap. 11): Schrift --kalk-fest auf gerichtetem Tinten-Scrim,
   in Hell UND Dunkel gleich. Der Scrim liegt nur links unten (Text) und
   oben (Leiste) — die rechte obere Bildhälfte bleibt hell und lebendig.
   Reduced-Motion beruhigt nur den Einschwung, das Video läuft IMMER (Kap. 5).
   ===================================================================== */

html .kopf.kopf[data-kopf]:has(> .kopf__video) {
  --k-rand: 5vw;
  --k-ease: cubic-bezier(0.33, 0.72, 0.18, 1); /* „Die Feder" */
  --k-display: "Newsreader", "Sitka Display", Georgia, serif;
  --k-sans: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --k-scrim: 15 20 32; /* --dunkel-fest als RGB */
  --k-text: var(--kalk-fest, #f6f3ec);
  --k-akzent: #f08a7e; /* Buchrot hell, auf Tinte lesbar */
  --k-cta-grund: var(--kalk-fest, #f6f3ec);
  --k-cta-text: var(--dunkel-fest, #0f1420);
  --k-buehne: #182033; /* Grundton der Medienfläche bis zum ersten Frame */
  --k-grund-mobil: var(--dunkel-fest, #0f1420); /* feste Handy-Leiste */

  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 78svh;
  min-height: 640px;
  color: var(--k-text);
  background: var(--k-buehne);
}
html .kopf.kopf[data-kopf="index"]:has(> .kopf__video) {
  height: calc(
    100svh - 32px - 76px
  ); /* wie der Prägekopf: Kontaktleiste im ersten Bild */
  min-height: 640px;
}

/* Startseite (Schalter in index.html): der Kopf trägt dort noch data-marken-buehne="css",
   dessen Wurzel-Tokens kopf.css auf die Bühne umbiegt — hier auf die Seiten-Werte zurück,
   damit Klappmenü + Handy-Blatt (liegen im Kopf) ihre normale Schrift behalten. */
html .kopf.kopf[data-marken-buehne="css"]:has(> .kopf__video) {
  --tinte: #141b2b;
  --meta: #5a6072;
  --akzent: #a62a21;
}
:root[data-thema="dunkel"]
  .kopf.kopf[data-marken-buehne="css"]:has(> .kopf__video) {
  --tinte: #ede9e0;
  --meta: #a3a9b8;
  --akzent: #f08a7e;
}
html .kopf.kopf[data-kopf]:has(> .kopf__video) .praegebuehne {
  display: none;
}

/* ---------- Medium ---------- */
html .kopf.kopf[data-kopf]:has(> .kopf__video) .kopf__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--k-video-pos, 50% 50%);
  background: var(--k-buehne);
  pointer-events: none;
}

/* ---------- Gerichteter Scrim: Leiste oben (::before), Textfeld unten links (::after) — nie flächig ---------- */
html .kopf.kopf[data-kopf]:has(> .kopf__video)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--k-scrim) / 0.74) 0, rgb(var(--k-scrim) / 0.6) 96px, rgb(var(--k-scrim) / 0.22) 160px, rgb(var(--k-scrim) / 0) 230px),
    linear-gradient(0deg, rgb(var(--k-scrim) / 0.5) 0, rgb(var(--k-scrim) / 0) 30%);
}
/* Das Textfeld: so breit wie die Textspalte (max-width aus kopf.css) plus weicher Auslauf nach rechts,
   oben weich ausgeblendet — die rechte und obere Bildhälfte bleiben unberührt. */
html .kopf.kopf[data-kopf]:has(> .kopf__video)::after {
  --k-spalte: calc(var(--k-rand) + min(44rem, 56vw) + 2rem);
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--k-feld-oben, 26%);
  z-index: 1;
  pointer-events: none;
  /* Fremd-Blick 29.09.: der kurze Abfall (0,86→0,4 auf 9vw) zeichnete auf hellen Clips eine Kasten-Kante —
     jetzt ein langer, weich auslaufender Verlauf (~38vw), unter dem Text bleibt die Deckung gleich. */
  background: linear-gradient(90deg, rgb(var(--k-scrim) / 0.9) 0, rgb(var(--k-scrim) / 0.85) calc(var(--k-spalte) - 12rem), rgb(var(--k-scrim) / 0.7) var(--k-spalte), rgb(var(--k-scrim) / 0.5) calc(var(--k-spalte) + 8vw), rgb(var(--k-scrim) / 0.3) calc(var(--k-spalte) + 17vw), rgb(var(--k-scrim) / 0.14) calc(var(--k-spalte) + 26vw), rgb(var(--k-scrim) / 0.04) calc(var(--k-spalte) + 34vw), rgb(var(--k-scrim) / 0) calc(var(--k-spalte) + 42vw));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.12) 10%, rgb(0 0 0 / 0.4) 22%, rgb(0 0 0 / 0.72) 34%, rgb(0 0 0 / 0.92) 44%, #000 52%);
  mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / 0.12) 10%, rgb(0 0 0 / 0.4) 22%, rgb(0 0 0 / 0.72) 34%, rgb(0 0 0 / 0.92) 44%, #000 52%);
}
html .kopf.kopf[data-kopf="index"]:has(> .kopf__video)::after {
  --k-feld-oben: 22%; /* Startseite: Beweis-Satz macht den Textblock höher */
}

/* Handy: Video füllt den Kopf, Text liegt unten links darauf (kopf.css stapelt ihn sonst statisch
   unter die Bühne — statisch läge er unter dem Video). */
@media (max-width: 899px) {
  html .kopf.kopf[data-kopf]:has(> .kopf__video) {
    display: block;
    height: 78svh;
    min-height: 600px;
    background: var(--k-buehne);
  }
  html .kopf.kopf[data-kopf]:has(> .kopf__video) .kopf__text {
    position: absolute;
    z-index: 10;
    left: var(--k-rand);
    right: var(--k-rand);
    bottom: 1.9rem;
    max-width: none;
    padding: 0;
    text-align: left;
  }
  html .kopf.kopf[data-kopf]:has(> .kopf__video)::before {
    background:
      linear-gradient(180deg, rgb(var(--k-scrim) / 0.74) 0, rgb(var(--k-scrim) / 0.55) 72px, rgb(var(--k-scrim) / 0) 150px),
      linear-gradient(0deg, rgb(var(--k-scrim) / 0.93) 0, rgb(var(--k-scrim) / 0.88) 37%, rgb(var(--k-scrim) / 0.5) 47%, rgb(var(--k-scrim) / 0) 60%);
  }
  html .kopf.kopf[data-kopf]:has(> .kopf__video)::after {
    display: none;
  }
  html .kopf.kopf[data-kopf="index"]:has(> .kopf__video)::before {
    background:
      linear-gradient(180deg, rgb(var(--k-scrim) / 0.74) 0, rgb(var(--k-scrim) / 0.55) 72px, rgb(var(--k-scrim) / 0) 150px),
      linear-gradient(0deg, rgb(var(--k-scrim) / 0.92) 0, rgb(var(--k-scrim) / 0.86) 42%, rgb(var(--k-scrim) / 0.52) 53%, rgb(var(--k-scrim) / 0.18) 62%, rgb(var(--k-scrim) / 0) 70%);
  }
  /* Handy Startseite (Fremd-Blick 29.09., 18:44): Hand + Füller lagen unter einer dunklen Fläche — Beweis-Satz raus (steht im Register darunter), Scrim flacher, Ausschnitt zur Hand */
  html .kopf.kopf[data-kopf="index"]:has(> .kopf__video) {
    --k-video-pos: 62% 50%;
  }
  html .kopf.kopf[data-kopf="index"]:has(> .kopf__video) .kopf__beweis {
    display: none;
  }
}

/* ---------- Schrift auf dem Video ---------- */
html .kopf.kopf[data-kopf]:has(> .kopf__video) .kopf__text {
  text-shadow:
    0 1px 2px rgb(var(--k-scrim) / 0.35),
    0 0 26px rgb(var(--k-scrim) / 0.3);
}
html .kopf.kopf[data-kopf]:has(> .kopf__video) .kopf__cta {
  text-shadow: none;
}
html .kopf.kopf[data-kopf]:has(> .kopf__video) .kopf__cta:hover {
  box-shadow: 0 12px 26px -14px rgb(0 0 0 / 0.75);
}
html .kopf.kopf[data-kopf]:has(> .kopf__video) .kopf__cta:focus-visible {
  outline-color: var(--kalk-fest, #f6f3ec);
}

/* ---------- Leiste auf dem Video: helle Marke + helle Bedienung, Menüs bleiben Seite ---------- */
html
  .kopf.kopf[data-kopf]:has(> .kopf__video)
  .leiste__logo
  img[src$="korn-logo.svg"] {
  content: url("../logo/korn-logo-hell.svg");
}
html .kopf.kopf[data-kopf]:has(> .kopf__video) .leiste__nav > a,
html .kopf.kopf[data-kopf]:has(> .kopf__video) .menue-knopf {
  color: var(--kalk-fest, #f6f3ec);
  --schatten: 246 243 236;
}
html .kopf.kopf[data-kopf]:has(> .kopf__video) .schalter {
  --tinte: var(--kalk-fest, #f6f3ec);
  --schatten: 246 243 236;
}
html .kopf.kopf[data-kopf]:has(> .kopf__video) .klappmenue,
html .kopf.kopf[data-kopf]:has(> .kopf__video) .mobil-menue {
  color: var(--tinte);
  text-shadow: none;
}

/* ---------- 0–3 s: das Medium setzt sich (nur transform), Text-Choreo bleibt aus kopf.css ---------- */
@media (prefers-reduced-motion: no-preference) {
  html .kopf.kopf[data-kopf]:has(> .kopf__video) .kopf__video {
    animation: kv-setzen 1600ms var(--k-ease) both;
  }
}
@keyframes kv-setzen {
  from {
    transform: scale(1.05);
  }
}

@media print {
  .kopf__video {
    display: none !important;
  }
}