/* Seitenkopf (felder.kopf) der brandmediale-Website, 1:1 aus dem Astro-Original
   01_bestand/website-astro/src/module/kopf/kopf.css (Welle W2-B). Unverändert übernommen;
   vorangestellt: Grundregel des Kopf-KI-Hinweises (.bm-kopf-ki, Original site/aufbau/aufbau.css)
   und sr-only für den Bereichsumschalter, beide auf den Kopf begrenzt. */
/* ── Ergänzung Grav (W2-B): Kopf-KI-Hinweis, Grundregel aus site/aufbau/aufbau.css (.bm-neu .bm-kopf-ki) ── */
.bb-m-kopf .bm-kopf-ki {
  position: absolute;
  z-index: 1;
  right: var(--bm-rand);
  bottom: 1rem;
  font-size: var(--bm-t-mini);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-titel);
  pointer-events: none;
}
.bb-m-kopf .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Chat-Symbol im Knopf „KI-Chat öffnen“ (Kopf branche), Regeln aus site/chat/chat.css, auf den Kopf begrenzt. */
.bb-m-kopf__chat .bm-chat-symbol { flex: none; display: block; overflow: visible; }
.bb-m-kopf__chat .bm-chat-symbol__von { stop-color: var(--kern-signal-pol); }
.bb-m-kopf__chat .bm-chat-symbol__bis { stop-color: var(--bm-signal); }
.bb-m-kopf__chat .bm-chat-symbol__akzent { opacity: 0; }

/* Modul „kopf“ (module/kopf): Seitenkopf mit der H1. Werte übernommen aus
   seiten/module/d2a.css (Hero), seiten/kopf/kopf.css (Formen, Avatar-Zeile),
   seiten/insights/insights.css (Artikel-, Übersichtskopf),
   seiten/konzept/konzept.css (Satz-Kopf), seiten/ki/ki.css (Medien-Bühne),
   site/cd/branchenkopf/branchenkopf.css und seiten/start/start.css.
   Nur Tokens: --bm-* (Website), --bb-* (Bausteine, Ton-Regel); lokale
   Rechenwerte --kf-*. Farben je Fläche aus der Ton-Regel (--bb-grund,
   --bb-text …). Keine eigene Bewegung (kein Film, kein Heranfahren).
   Breakpoints der Hausliste: 640 / 768 / 1024 (max: 639 / 767 / 1023). */

/* ════════════════════════════════════════════════════════════════════════
   Rahmen und Text (alle Formen)
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-kopf {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.bb-m-kopf > .bb-sektion__innen {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
}
.bb-m-kopf__text { min-width: 0; }
.bb-m-kopf__titel {
  max-width: 13em;
  margin: 0;
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h1);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  line-height: var(--bm-zh-snug);
  letter-spacing: var(--bm-sp-leicht);
  color: var(--bb-text);
  text-wrap: balance;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
}
.bb-m-kopf__subline {
  max-width: 34rem;
  margin: clamp(1.25rem, 0.8rem + 1.2vw, 2rem) 0 0;
  font-size: var(--bm-t-lead);
  line-height: var(--bm-zh-lang);
  color: var(--bb-text);
  text-wrap: pretty;
}
.bb-m-kopf__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem 1rem;
  margin-top: clamp(2rem, 1.4rem + 1.6vw, 3rem);
}
/* KI-Kennzeichen des Kopfs (site/aufbau: .bm-kopf-ki): Farbe der Fläche. */
.bb-m-kopf .bm-kopf-ki { color: var(--bb-text-ruhig); }

/* Rest des Kopf-Textes: erster Absatz direkt unter dem Kopf. */
.bb-m-kopf-nachtext { padding-bottom: var(--bm-sektion-halb); }
.bb-m-kopf-nachtext__absatz {
  max-width: calc(var(--bm-textbreite) * 0.85);
  margin: 0;
  font-size: var(--bm-t-lead);
  line-height: var(--bm-zh-lang);
  color: var(--bb-text-ruhig);
}

/* ── Bühne: Bild über die ganze Fläche (vollbild, branche, start) ───────── */
.bb-m-kopf__buehne {
  --bb-medium-radius: 0;
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background: var(--bb-grund);
}
.bb-m-kopf__buehnenbild { position: absolute; inset: 0; }
/* Medium füllt seinen Rahmen (Bildfeld, Medium, Produktbild). */
:is(.bb-m-kopf__feld, .bb-m-kopf__medium, .bb-m-kopf__produkt) { position: relative; }
:is(.bb-m-kopf__feld, .bb-m-kopf__medium, .bb-m-kopf__produkt) > .bb-medium { position: absolute; inset: 0; height: auto; }
.bb-m-kopf__schleier { position: absolute; inset: 0; }

/* ── Avatar-Zeile am unteren Kopfrand ───────────────────────────────────── */
.bb-sektion.bb-m-kopf.bb-m-kopf--stimme { padding-bottom: 1.25rem; }
.bb-m-kopf__stimme {
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--bb-linie-zart);
}
.bb-m-kopf__stimme-bild {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bb-karte);
}
.bb-m-kopf__stimme-satz {
  max-width: 46rem;
  margin: 0;
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h4);
  line-height: var(--bm-zh-kompakt);
  color: var(--bb-text);
}
/* Kennzeichen am Ende der Zeile, frei vom schwebenden Avatar rechts. */
.bb-m-kopf .bb-m-kopf__stimme .bm-kopf-ki {
  position: static;
  flex: none;
  margin-left: auto;
  margin-right: 5.5rem;
  padding-left: 1rem;
}
@media (max-width: 767px) {
  .bb-m-kopf__stimme { flex-wrap: wrap; align-items: flex-start; }
  .bb-m-kopf__stimme-satz { flex: 1 1 0; min-width: 0; font-size: var(--bm-t-body); }
  .bb-m-kopf .bb-m-kopf__stimme .bm-kopf-ki { flex-basis: 100%; margin: 0; padding: 0 5.5rem 0 0; text-align: right; }
}
@media (max-width: 639px) {
  .bb-m-kopf .bb-m-kopf__stimme .bm-kopf-ki { padding-right: 3.75rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   Hero-Höhe: vollbild, geteilt, zwei, mosaik, schrift/typo
   Hoch und luftig, Text im unteren Drittel (d2a.css, TY-1).
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-kopf:is(.bb-m-kopf--vollbild, .bb-m-kopf--bilder, .bb-m-kopf--typo) {
  min-height: max(calc(78svh - var(--bm-kopf-h)), 32rem);
  padding-top: clamp(2.5rem, 1rem + 5vw, 6rem);
  padding-bottom: clamp(4rem, 2rem + 6vw, 7rem);
}
@media (max-width: 767px) {
  .bb-m-kopf:is(.bb-m-kopf--vollbild, .bb-m-kopf--bilder, .bb-m-kopf--typo) { min-height: max(calc(70svh - var(--bm-kopf-h)), 26rem); }
}

/* ════════════════════════════════════════════════════════════════════════
   vollbild – Bild randlos hinter dem Text
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-kopf--vollbild .bb-medium__bild { object-position: right center; }
.bb-m-kopf--vollbild .bb-m-kopf__schleier {
  /* Schleier aus dem Ton der Fläche (keine Kante zur Kopfleiste). */
  --kf-vignette: 60%;
  --kf-s-leicht: color-mix(in srgb, var(--bb-grund) 45%, transparent);
  --kf-s-mittel: color-mix(in srgb, var(--bb-grund) 55%, transparent);
  --kf-s-stark: color-mix(in srgb, var(--bb-grund) 82%, transparent);
  background:
    linear-gradient(to bottom, var(--bb-grund) 0%, transparent 14%),
    linear-gradient(to right, var(--kf-s-stark) 0%, var(--kf-s-mittel) 35%, transparent 70%),
    linear-gradient(to top, var(--kf-s-leicht) 0%, transparent 40%),
    radial-gradient(ellipse 72% 85% at 66% 45%,
      transparent 30%,
      color-mix(in srgb, var(--bb-grund) var(--kf-vignette), transparent) 100%);
}
/* Schleier über dem Vordergrund des Motivs: in den Maßen des Bildes, deckt
   bis zur Kante der Szene (--kf-kante = bild.ab, sonst 37 %). */
@media (min-width: 768px) {
  .bb-m-kopf--vollbild .bb-m-kopf__schleier::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    min-width: 100%;
    aspect-ratio: 2400 / 1018;
    background: linear-gradient(to right,
      color-mix(in srgb, var(--bb-grund) 94%, transparent) 0%,
      color-mix(in srgb, var(--bb-grund) 94%, transparent) var(--kf-kante, 37%),
      color-mix(in srgb, var(--bb-grund) 78%, transparent) calc(var(--kf-kante, 37%) + 3%),
      color-mix(in srgb, var(--bb-grund) 42%, transparent) calc(var(--kf-kante, 37%) + 10%),
      transparent calc(var(--kf-kante, 37%) + 26%));
  }
}
@media (min-width: 1024px) {
  .bb-m-kopf--vollbild .bb-m-kopf__schleier {
    background:
      linear-gradient(to bottom, var(--bb-grund) 0%, transparent 14%),
      linear-gradient(to right, var(--kf-s-stark) 0%, var(--kf-s-leicht) 30%, transparent 55%),
      linear-gradient(to top, var(--kf-s-leicht) 0%, transparent 40%),
      radial-gradient(ellipse 72% 85% at 66% 45%,
        transparent 30%,
        color-mix(in srgb, var(--bb-grund) var(--kf-vignette), transparent) 100%);
  }
}
@media (max-width: 767px) {
  .bb-m-kopf--vollbild .bb-medium__bild { object-position: 72% center; }
  .bb-m-kopf--vollbild .bb-m-kopf__schleier {
    background:
      linear-gradient(to bottom, var(--bb-grund) 0%, transparent 12%),
      linear-gradient(to top, var(--kf-s-stark) 0%, var(--kf-s-stark) 30%, var(--kf-s-mittel) 62%, transparent 92%);
  }
}
/* Kennzeichen unten rechts, neben der Ecke des schwebenden Avatars; breit an
   der Kante der Inhaltsbreite. */
.bb-m-kopf.bb-m-kopf--vollbild .bm-kopf-ki { right: max(calc(var(--bm-rand) + 5.5rem), calc((100% - var(--bm-inhalt-max)) / 2)); }
@media (max-width: 639px) {
  .bb-m-kopf.bb-m-kopf--vollbild .bm-kopf-ki { right: calc(var(--bm-rand) + 3.75rem); }
}
.bb-m-kopf.bb-m-kopf--vollbild .bb-m-kopf__stimme .bm-kopf-ki { right: auto; }
@media (max-width: 767px) {
  .bb-m-kopf--vollbild.bb-m-kopf--stimme { min-height: max(calc(84svh - var(--bm-kopf-h)), 32rem); }
}

/* ════════════════════════════════════════════════════════════════════════
   geteilt · zwei · mosaik – Text links, Bildblock rechts
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-kopf.bb-m-kopf--bilder {
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.bb-m-kopf__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);
  align-items: center;
  margin-block: auto;   /* eine Achse: Text und Bildblock mittig im Kopf */
}
.bb-m-kopf__bilder { position: relative; min-width: 0; }
@media (min-width: 1024px) {
  .bb-m-kopf__raster { grid-template-columns: minmax(0, 1fr) auto; }
}
/* Kennzeichen unter dem Bildblock, an dessen linker Kante (aus dem Fluss). */
.bb-m-kopf .bb-m-kopf__bilder .bm-kopf-ki {
  position: absolute;
  top: calc(100% + 0.625rem);
  right: auto;
  bottom: auto;
  left: 0;
}
@media (max-width: 1023px) {
  .bb-m-kopf .bb-m-kopf__bilder .bm-kopf-ki { left: auto; right: 5.5rem; }
}
@media (max-width: 639px) {
  .bb-m-kopf .bb-m-kopf__bilder .bm-kopf-ki { right: 3.75rem; }
}

/* ── Bildfeld: festes Verhältnis, Ausschnitt um den Schwerpunkt ───────────
   Motive im Querformat (2400 × 1018), Hauptmotiv rechts. --kf-v: Anteil der
   Motivbreite, den das Feld zeigt (Feldverhältnis / 2,357); --kf-f:
   Schwerpunkt (0–1); --kf-ab: linker Rand der Szene – das Feld beginnt
   frühestens dort, sonst rückt das Bild heran (--kf-z, höchstens 1,25). */
.bb-m-kopf__feld {
  --kf-f: 0.7;
  --kf-v: 0.566;
  --kf-ab: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--bb-medium-radius);
}
.bb-m-kopf__feld--4-5 { aspect-ratio: 4 / 5; --kf-v: 0.339; }
.bb-m-kopf__feld--1-1 { aspect-ratio: 1 / 1; --kf-v: 0.424; }
.bb-m-kopf__feld--4-3 { aspect-ratio: 4 / 3; --kf-v: 0.566; }
.bb-m-kopf__feld .bb-medium__bild {
  --kf-z: clamp(1, var(--kf-v) / (1 - var(--kf-ab)), 1.25);
  --kf-s: calc(var(--kf-v) / var(--kf-z));
  --kf-start: min(max(var(--kf-ab), var(--kf-f) - var(--kf-s) / 2), 1 - var(--kf-s));
  object-position: clamp(0%, calc((var(--kf-start) - var(--kf-v) + var(--kf-s)) / (1 - var(--kf-v)) * 100%), 100%) 50%;
  transform: scale(var(--kf-z));
  transform-origin: 100% 50%;
}

/* ── Geteilt ────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .bb-m-kopf__geteilt .bb-m-kopf__feld--4-5 { height: clamp(22rem, 56svh, 33rem); }
  .bb-m-kopf__geteilt .bb-m-kopf__feld--1-1 { height: clamp(20rem, 50svh, 30rem); }
  .bb-m-kopf--stimme .bb-m-kopf__geteilt .bb-m-kopf__feld--4-5 { height: clamp(20rem, 50svh, 30rem); }
  .bb-m-kopf--stimme .bb-m-kopf__geteilt .bb-m-kopf__feld--1-1 { height: clamp(18rem, 46svh, 28rem); }
  .bb-m-kopf__geteilt .bb-m-kopf__feld--4-3 { width: clamp(24rem, 38vw, 35rem); }
}
@media (max-width: 1023px) {
  .bb-m-kopf__geteilt .bb-m-kopf__feld { aspect-ratio: 3 / 2; --kf-v: 0.636; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .bb-m-kopf__geteilt .bb-m-kopf__feld { aspect-ratio: 2 / 1; --kf-v: 0.849; }
}

/* ── Zwei Bilder: großes oben rechts, kleines davor unten links ─────────── */
.bb-m-kopf__zwei {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
}
@media (min-width: 1024px) {
  .bb-m-kopf__zwei { width: clamp(24rem, min(40vw, 66svh), 36rem); }
}
@media (max-width: 1023px) {
  .bb-m-kopf__bilder:has(> .bb-m-kopf__zwei) { max-width: 32rem; }
}
.bb-m-kopf__zwei-gross { position: absolute; top: 0; right: 0; width: 80%; }
.bb-m-kopf__zwei-klein {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;
  box-sizing: content-box;
  margin: -0.375rem;
  border: 0.375rem solid var(--bb-grund);   /* Farbe der Kopffläche */
}

/* ── Mosaik: zwei Spalten, die zweite versetzt ──────────────────────────── */
.bb-m-kopf__mosaik {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
  width: 100%;
}
.bb-m-kopf__mosaik-spalte { display: grid; gap: 0.75rem; }
.bb-m-kopf__mosaik-spalte + .bb-m-kopf__mosaik-spalte { margin-top: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 1024px) {
  .bb-m-kopf__mosaik { width: clamp(21rem, min(34vw, 46svh), 29rem); }
  .bb-m-kopf__mosaik--3 { align-items: center; }
  .bb-m-kopf__mosaik--3 .bb-m-kopf__mosaik-spalte + .bb-m-kopf__mosaik-spalte { margin-top: 0; }
}
@media (max-width: 1023px) {
  .bb-m-kopf__mosaik-spalte > .bb-m-kopf__feld:nth-child(n + 2) { display: none; }
  .bb-m-kopf__mosaik .bb-m-kopf__feld { aspect-ratio: 1 / 1; --kf-v: 0.424; }
}

/* ════════════════════════════════════════════════════════════════════════
   schrift – typo · schlicht · artikel (ohne Bild)
   ════════════════════════════════════════════════════════════════════════ */
/* Höhe wie die Bildköpfe (heute gewinnt d2a.css über kopf.css). */
.bb-m-kopf--typo .bb-m-kopf__titel {
  max-width: 17em;
  font-size: var(--bm-t-buehne);
  line-height: var(--bm-zh-eng);
}
.bb-m-kopf--typo .bb-m-kopf__subline { max-width: 40rem; }
/* Schlicht (Formularseiten): flach, das Formular beginnt im ersten Bild. */
.bb-m-kopf.bb-m-kopf--schlicht {
  padding-top: clamp(3rem, 1.5rem + 5vw, 6rem);
  padding-bottom: clamp(3rem, 1.5rem + 4vw, 5rem);
}
/* Artikel: Etiketten, große H1, Subline ruhig, Metazeile mit Linie. */
.bb-m-kopf.bb-m-kopf--artikel { padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3rem, 6vw, 5.5rem); }
.bb-m-kopf--artikel > .bb-sektion__innen { justify-content: flex-start; }
.bb-m-kopf--artikel .bb-m-kopf__titel {
  max-width: 20em;
  font-size: var(--bm-t-buehne);
  line-height: var(--bm-zh-eng);
  letter-spacing: var(--bm-sp-display);
}
.bb-m-kopf__etiketten + .bb-m-kopf__titel { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.bb-m-kopf--artikel .bb-m-kopf__subline {
  max-width: 40rem;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  color: var(--bb-text-ruhig);
}
.bb-m-kopf--artikel .bb-m-kopf__knoepfe { gap: 0.75rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.bb-m-kopf__etiketten {
  --kf-zugabe: calc((1.5rem - var(--bm-t-mini) * var(--bm-zh-kompakt)) / 2);   /* Ziel 24 px hoch (WCAG 2.5.8) */
  display: flex;
  flex-wrap: wrap;
  gap: calc(2 * var(--kf-zugabe)) 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-mittel);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-ziffer);
  text-transform: uppercase;
  color: var(--bb-text-ruhig);
}
.bb-m-kopf__etiketten li:first-child { color: var(--bb-akzent); }
.bb-m-kopf__etiketten a {
  display: inline-block;
  margin-block: calc(-1 * var(--kf-zugabe));
  padding-block: var(--kf-zugabe);
  color: inherit;
  text-decoration: none;
}
.bb-m-kopf__etiketten a:is(:hover, :focus-visible) { color: var(--bb-akzent); }
.bb-m-kopf__etiketten a:focus-visible { outline: var(--bm-fokus-breite) solid var(--bb-fokus); outline-offset: var(--bm-fokus-versatz); }
.bb-m-kopf__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bb-linie-zart);
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bb-text-ruhig);
}

/* ════════════════════════════════════════════════════════════════════════
   satz – ganzer Satz als H1
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-kopf--satz > .bb-sektion__innen { justify-content: flex-start; }
.bb-m-kopf--satz .bb-m-kopf__titel {
  font-size: var(--bm-t-buehne);
  line-height: var(--bm-zh-eng);
  letter-spacing: var(--bm-sp-display);
}
.bb-m-kopf--satz .bb-m-kopf__subline { margin: 0; color: var(--bb-text-ruhig); }
.bb-m-kopf--satz .bb-m-kopf__knoepfe { gap: 0.75rem; margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
/* versetzt (Konzeptseite): Subline und Knopf ab 768 px bei 5/12. */
.bb-m-kopf.bb-m-kopf--versetzt { padding-block: clamp(4rem, 9vw, 9rem) clamp(3rem, 6vw, 6rem); }
.bb-m-kopf--versetzt .bb-m-kopf__titel { max-width: 21em; }
.bb-m-kopf--versetzt .bb-m-kopf__neben { margin-top: clamp(2rem, 4vw, 4rem); }
.bb-m-kopf--versetzt .bb-m-kopf__subline { max-width: 36rem; }
@media (min-width: 768px) {
  .bb-m-kopf--versetzt .bb-m-kopf__neben { margin-left: 41.666%; }
}
@media (max-width: 767px) {
  .bb-m-kopf--versetzt .bb-m-kopf__knoepfe > * { flex: 1 1 auto; }
}
/* untereinander (Übersicht Insights): Subline in der Titelschrift. */
.bb-m-kopf.bb-m-kopf--untereinander { padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3rem, 6vw, 5.5rem); }
.bb-m-kopf--untereinander .bb-m-kopf__titel { max-width: 18em; }
.bb-m-kopf--untereinander .bb-m-kopf__subline {
  max-width: 34rem;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h3);
  line-height: var(--bm-zh-kompakt);
}

/* ════════════════════════════════════════════════════════════════════════
   medium – H1, Satz, Medium in der Inhaltsbreite (KI-Bühne)
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-kopf.bb-m-kopf--medium {
  padding-top: var(--bm-sektion-halb);
  padding-bottom: calc(var(--bm-sektion) * 1.25);
}
.bb-m-kopf--medium > .bb-sektion__innen { justify-content: flex-start; }
.bb-m-kopf--medium .bb-m-kopf__text { margin-bottom: clamp(2rem, 1.25rem + 2.2vw, 3.5rem); }
.bb-m-kopf--medium .bb-m-kopf__titel { max-width: 16em; }
.bb-m-kopf--medium .bb-m-kopf__subline {
  max-width: 32em;
  margin-top: clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
  color: var(--bb-text-ruhig);
}
.bb-m-kopf__medium { aspect-ratio: var(--kf-format, 8 / 3); }
@media (max-width: 767px) {
  .bb-m-kopf__medium { aspect-ratio: var(--kf-format-mobil, 1 / 1); }
}

/* ════════════════════════════════════════════════════════════════════════
   kasten – Produktkopf im gerundeten Kasten (/ki)
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-kopf.bb-m-kopf--kasten { padding-block: clamp(1rem, 0.5rem + 1.5vw, 1.5rem) var(--bm-sektion-halb); }
.bb-m-kopf__kasten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 1rem + 3vw, 4.5rem);
  border-radius: var(--bm-radius-gross);
  background: var(--bb-grund);
  color: var(--bb-text);
}
.bb-m-kopf__produkt { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .bb-m-kopf__kasten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: max(calc(62svh - var(--bm-kopf-h)), 26rem); }
}

/* ════════════════════════════════════════════════════════════════════════
   branche – Standbild, Text links unten, Einstieg rechts
   Der Kopf ist sein eigener Behälter (@container).
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-kopf.bb-m-kopf--branche {
  --kf-s-dicht: color-mix(in srgb, var(--bb-grund) 88%, transparent);
  --kf-s-stark: color-mix(in srgb, var(--bb-grund) 78%, transparent);
  --kf-s-mittel: color-mix(in srgb, var(--bb-grund) 52%, transparent);
  --kf-s-leicht: color-mix(in srgb, var(--bb-grund) 22%, transparent);
  container-type: inline-size;
  overflow: hidden;
  min-height: max(calc(88svh - var(--bm-kopf-h)), 36rem);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-bottom: 1.25rem;
}
.bb-m-kopf--branche .bb-medium__bild { object-position: var(--kf-lage, 50% 50%); }
.bb-m-kopf--branche .bb-m-kopf__schleier {
  background:
    linear-gradient(to top, var(--kf-s-dicht) 0, var(--kf-s-stark) 5.5rem, transparent 10.5rem),
    linear-gradient(to right, var(--kf-s-dicht) 0%, var(--kf-s-stark) 28%, var(--kf-s-mittel) 42%, var(--kf-s-leicht) 54%, transparent 66%);
}
.bb-m-kopf__branche {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  align-items: end;
}
.bb-m-kopf--branche .bb-m-kopf__text { position: relative; }
.bb-m-kopf--branche .bb-m-kopf__knoepfe { margin-top: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); }
/* Schleier an der Schrift: so breit wie Titel, Subline und Knopf. */
@container (min-width: 640px) {
  .bb-m-kopf--branche .bb-m-kopf__text { justify-self: start; width: fit-content; max-width: 100%; }
  .bb-m-kopf--branche .bb-m-kopf__text::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -5rem -12rem -2rem -100vw;
    pointer-events: none;
    background: linear-gradient(to right, var(--kf-s-stark) calc(100% - 12rem), var(--kf-s-mittel) calc(100% - 8rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, currentColor 5rem, currentColor calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, currentColor 5rem, currentColor calc(100% - 2rem), transparent 100%);
  }
}
/* Einstieg „Erstanliegen klären“ (helle Karte, Ton über tonStil('hell')). */
.bb-m-kopf__einstieg {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 26rem;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border: 1px solid var(--bb-linie);
  border-radius: var(--bm-radius-gross);
  background: var(--bb-grund);
  color: var(--bb-text);
  box-shadow: var(--bm-schatten-schwebend);
}
.bb-m-kopf__einstieg-titel {
  margin: 0;
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h3);
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-titel);
  color: var(--bb-text);
}
.bb-m-kopf__anliegen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.bb-m-kopf__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;   /* 44 px Zielgröße (2.5.5) */
  padding: 0.375rem 1rem;
  border: 1px solid var(--bb-linie-feld);
  border-radius: var(--bm-radius-pille);
  background: var(--bb-grund);
  color: var(--bb-text);
  font-family: var(--bm-font);
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-m-kopf__chip:hover { background: var(--bm-kachel); }
.bb-m-kopf__chip:focus-visible { outline: var(--bm-fokus-breite) solid var(--bb-fokus); outline-offset: var(--bm-fokus-versatz); }
.bb-m-kopf__chat { justify-self: start; gap: 0.5rem; cursor: pointer; }
/* Fuß ohne Avatar-Zeile: Kennzeichen rechts unten. */
.bb-m-kopf__fuss { display: flex; align-items: center; gap: 1rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.bb-m-kopf .bb-m-kopf__fuss .bm-kopf-ki { position: static; margin-left: auto; margin-right: 5.5rem; }
.bb-m-kopf--branche[data-ton='hell'] .bm-kopf-ki { color: var(--bb-text); }
.bb-m-kopf--branche .bb-m-kopf__stimme { border-top-color: var(--bb-linie-feld); }
@container (min-width: 1024px) {
  .bb-m-kopf__branche { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); }
  .bb-m-kopf__einstieg { justify-self: end; }
}
@container (max-width: 1023px) {
  .bb-m-kopf--branche .bb-m-kopf__schleier {
    background:
      linear-gradient(to top, var(--kf-s-dicht) 0, var(--kf-s-stark) 5.5rem, transparent 10.5rem),
      linear-gradient(to right, var(--kf-s-dicht) 0%, var(--kf-s-stark) 48%, var(--kf-s-mittel) 66%, var(--kf-s-leicht) 82%, transparent 100%);
  }
}
@container (max-width: 639px) {
  .bb-m-kopf__branche { padding-top: 9rem; }
  .bb-m-kopf--branche .bb-m-kopf__schleier {
    background: linear-gradient(to bottom, transparent 0, var(--kf-s-leicht) 5rem, var(--kf-s-stark) 11rem, var(--kf-s-dicht) 100%);
  }
  .bb-m-kopf__einstieg { max-width: none; }
  .bb-m-kopf--branche .bb-m-kopf__knoepfe { flex-direction: column; align-items: stretch; }
}

/* ════════════════════════════════════════════════════════════════════════
   start – Startbühne mit Bereichsumschalter
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-kopf.bb-m-kopf--start {
  --kf-vignette: 78%;         /* Ränder der Vignette */
  --kf-schleier-text: 72%;    /* Abdunklung links unter dem Text */
  z-index: 1;                 /* der Umschalter ragt in die nächste Sektion */
  min-height: clamp(32rem, 72svh, 52rem);
}
.bb-m-kopf--start > .bb-sektion__innen {
  justify-content: center;
  padding-block: 2.5rem calc(var(--bm-knopf-punkt) + 3rem);
}
.bb-m-kopf--start .bb-m-kopf__ebene { position: absolute; inset: 0; }
.bb-m-kopf--start .bb-medium__bild { object-position: 78% center; }
.bb-m-kopf--start .bb-m-kopf__schleier {
  background:
    linear-gradient(to bottom, var(--bb-grund) 0%, transparent 16%),
    linear-gradient(to top, color-mix(in srgb, var(--bb-grund) 75%, transparent) 0%, transparent 26%),
    linear-gradient(to right,
      color-mix(in srgb, var(--bb-grund) calc(var(--kf-schleier-text) + 10%), transparent) 0%,
      color-mix(in srgb, var(--bb-grund) var(--kf-schleier-text), transparent) 34%,
      color-mix(in srgb, var(--bb-grund) calc(var(--kf-schleier-text) * 0.5), transparent) 50%,
      transparent 70%),
    radial-gradient(ellipse 70% 80% at 64% 48%,
      transparent 28%,
      color-mix(in srgb, var(--bb-grund) calc(var(--kf-vignette) * 0.55), transparent) 70%,
      color-mix(in srgb, var(--bb-grund) var(--kf-vignette), transparent) 100%);
}
.bb-m-kopf--start .bb-m-kopf__text { max-width: 40rem; }
.bb-m-kopf--start .bb-m-kopf__titel {
  font-size: max(var(--bm-t-buehne), min(4.5vw, 4.5rem));
  hyphens: manual;
}
.bb-m-kopf--start .bb-m-kopf__subline {
  margin-top: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
  line-height: var(--bm-zh-mittel);
}
.bb-m-kopf--start .bb-m-kopf__knoepfe { gap: 0.75rem; margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
.bb-m-kopf--start .bb-knopf { min-height: 3.5rem; padding-inline: 2rem; font-size: 1rem; font-weight: var(--bm-g-fett); }

/* Bereiche: nur der gewählte ist sichtbar (ohne :has(): der erste). */
.bb-m-kopf--start :is(.bb-m-kopf__ebene, .bb-m-kopf__bereich, .bb-m-kopf__ki):not(:is(.bb-m-kopf__ebene--1, .bb-m-kopf__bereich--1, .bb-m-kopf__ki--1)) { display: none; }
.bb-m-kopf--start:has(.bb-m-kopf__wahl:not(.bb-m-kopf__wahl--1):checked) :is(.bb-m-kopf__ebene--1, .bb-m-kopf__bereich--1, .bb-m-kopf__ki--1) { display: none; }
.bb-m-kopf--start:has(.bb-m-kopf__wahl--2:checked) :is(.bb-m-kopf__ebene--2, .bb-m-kopf__bereich--2, .bb-m-kopf__ki--2),
.bb-m-kopf--start:has(.bb-m-kopf__wahl--3:checked) :is(.bb-m-kopf__ebene--3, .bb-m-kopf__bereich--3, .bb-m-kopf__ki--3),
.bb-m-kopf--start:has(.bb-m-kopf__wahl--4:checked) :is(.bb-m-kopf__ebene--4, .bb-m-kopf__bereich--4, .bb-m-kopf__ki--4) { display: block; }
/* KI-Kennzeichen unten rechts an der Inhaltskante, neben dem Umschalter. */
.bb-m-kopf.bb-m-kopf--start .bm-kopf-ki { right: max(var(--bm-rand), calc((100% - var(--bm-inhalt-max)) / 2)); }

/* Umschalter: weiße Pille halb über der Unterkante, gewähltes Segment dunkel. */
.bb-m-kopf__umschalter {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  translate: -50% 50%;
  width: max-content;
  max-width: calc(100% - 2 * var(--bm-rand));
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.bb-m-kopf__reiter-liste {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--bm-linie-zart);
  border-radius: var(--bm-radius-pille);
  background: var(--bm-bg-weiss);
}
.bb-m-kopf__reiter-platz { display: flex; }
.bb-m-kopf__reiter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.75rem;
  border-radius: var(--bm-radius-pille);
  color: var(--bm-text);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--bm-dauer) var(--bm-ease), color var(--bm-dauer) var(--bm-ease);
}
.bb-m-kopf__reiter:hover { background: var(--bm-bg-alt); }
.bb-m-kopf__wahl:checked + .bb-m-kopf__reiter { background: var(--bm-flaeche-dunkel); color: var(--bm-text-invers); }
.bb-m-kopf__wahl:focus-visible + .bb-m-kopf__reiter { outline: var(--bm-fokus-breite) solid var(--bm-fokus-auf-hell); outline-offset: 2px; }
/* Wortmarke je Bereich: „brandmediale“ + Zusatz in eigener Haltung. */
.bb-m-kopf__marke { display: inline-flex; align-items: baseline; gap: 0.3em; line-height: 1; }
.bb-m-kopf__marke-wort {
  font-family: var(--bm-font);
  font-size: var(--bm-t-fest);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-eng);
}
.bb-m-kopf__marke-zusatz { font-size: var(--bm-t-fest); }
.bb-m-kopf__marke:is([data-bereich='one'], [data-bereich='studio']) .bb-m-kopf__marke-zusatz {
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-lead);
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
}
.bb-m-kopf__marke[data-bereich='studio'] .bb-m-kopf__marke-zusatz { font-style: italic; }
.bb-m-kopf__marke[data-bereich='digital'] .bb-m-kopf__marke-zusatz { font-family: var(--bm-font); font-weight: var(--bm-g-mittel); }
@media (max-width: 1023px) {
  .bb-m-kopf__reiter { padding-inline: 1.125rem; }
}
@media (max-width: 767px) {
  /* Schmales Fenster: Ausschnitt je Bereich auf die Gesichter (Bild ist rund 1450 px breit). */
  .bb-m-kopf--start .bb-medium__bild { object-position: 85% center; }
  .bb-m-kopf--start .bb-m-kopf__ebene--2 .bb-medium__bild { object-position: 84% center; }
  .bb-m-kopf--start .bb-m-kopf__ebene--3 .bb-medium__bild { object-position: 80% center; }
  .bb-m-kopf--start .bb-m-kopf__schleier {
    background:
      linear-gradient(to bottom, var(--bb-grund) 0%, transparent 12%),
      linear-gradient(to top, var(--bm-schleier-dicht) 0%, var(--bm-schleier-mittel) 50%, var(--bm-schleier-leicht) 100%),
      radial-gradient(ellipse 90% 70% at 60% 35%,
        transparent 30%,
        color-mix(in srgb, var(--bb-grund) var(--kf-vignette), transparent) 100%);
  }
  .bb-m-kopf.bb-m-kopf--start { min-height: max(calc(80svh - var(--bm-kopf-h)), 30rem); }
  .bb-m-kopf--start > .bb-sektion__innen { justify-content: flex-end; padding-bottom: calc(var(--bm-knopf-punkt) + 4.5rem); }
  .bb-m-kopf__umschalter { width: calc(100% - 2 * var(--bm-rand)); }
  /* Der Umschalter liegt mobil über die ganze Breite: Kennzeichen darüber. */
  .bb-m-kopf.bb-m-kopf--start .bm-kopf-ki { bottom: 2.75rem; }
  .bb-m-kopf__reiter-platz { flex: 1; }
  .bb-m-kopf__reiter { flex: 1; min-height: 2.75rem; padding-inline: 0.5rem; }
  .bb-m-kopf__marke-wort { display: none; }
  .bb-m-kopf--start .bb-m-kopf__knoepfe { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-m-kopf :is(.bb-m-kopf__chip, .bb-m-kopf__reiter) { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   welt – dunkler Kopf mit 3D-Welt (Insel welt3d); Höhe wie vollbild
   ════════════════════════════════════════════════════════════════════════ */
.bb-m-kopf.bb-m-kopf--welt {
  padding: 0;
  /* Kein eigener Stapelkontext: die offene Welt (fixed) muss über Kopfleiste, Rail und Chat liegen. */
  isolation: auto;
}
/* Die Insel füllt den Kopf; sie nimmt Höhe und Luft nach oben aus diesen Variablen. */
.bb-m-kopf--welt { --welt-hoehe: max(calc(78svh - var(--bm-kopf-h)), 32rem); }
@media (max-width: 767px) {
  .bb-m-kopf--welt { --welt-hoehe: max(calc(70svh - var(--bm-kopf-h)), 26rem); }
}
/* Bausteinliste: echtes HTML, visuell versteckt (Vorleser, Suchmaschinen). */
.bb-m-kopf__welt-liste {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  list-style: none;
}
.bb-m-kopf__welt-liste-titel { font-size: var(--bm-t-lead); }

/* Bühnenfilm (start, Feld film): liegt über dem Standbild; ohne Bewegung bleibt das Bild. */
.bb-m-kopf__film { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) {
  .bb-m-kopf__film { display: none; }
}

/* Bereiche mit Film: Der Schleier wird auf die Schrift geformt. Dunkel nur links hinter H1, Subline und Knöpfen,
 * Fläche rechts und die eingebrannten Untertitel (quer rechts/unten, mobil über der H1) bleiben hell. */
.bb-m-kopf--start:has(.bb-m-kopf__wahl--film:checked) .bb-m-kopf__schleier {
  background:
    linear-gradient(to bottom, var(--bb-grund) 0%, transparent 14%),
    radial-gradient(ellipse 62% 95% at 0% 58%,
      color-mix(in srgb, var(--bb-grund) 80%, transparent) 0%,
      color-mix(in srgb, var(--bb-grund) 66%, transparent) 45%,
      color-mix(in srgb, var(--bb-grund) 22%, transparent) 78%,
      transparent 100%);
}
.bb-m-kopf--start:has(.bb-m-kopf__wahl--film:checked) .bb-m-kopf__bereich :is(.bb-m-kopf__titel, .bb-m-kopf__subline) {
  text-shadow: 0 1px 14px color-mix(in srgb, var(--bb-grund) 70%, transparent);
}
@media (max-width: 767px) {
  .bb-m-kopf--start:has(.bb-m-kopf__wahl--film:checked) .bb-m-kopf__schleier {
    background:
      linear-gradient(to bottom, var(--bb-grund) 0%, transparent 12%),
      linear-gradient(to top,
        color-mix(in srgb, var(--bb-grund) 82%, transparent) 0%,
        color-mix(in srgb, var(--bb-grund) 74%, transparent) 40%,
        color-mix(in srgb, var(--bb-grund) 50%, transparent) 60%,
        color-mix(in srgb, var(--bb-grund) 24%, transparent) 70%,
        transparent 77%);
  }
}

/* Play-Knopf und Spot-Modus (start, Feld film) ───────────────────────────
 * Hintergrund: stummer Schleifenfilm (cover). Play: Spot von vorn mit Ton, Text und Schleier blenden aus,
 * der Kopf wird zum Kinoformat (21:9) und der Film liegt vollständig im Bild (contain, schwarz).
 * Stopp/Ende/Esc: Schleier und Text kommen zurück, der Schleifenfilm läuft stumm weiter. */
.bb-m-kopf__spieler { display: none; }
.bb-m-kopf--start .bb-m-kopf__spieler--1 { display: flex; }
.bb-m-kopf--start:has(.bb-m-kopf__wahl:not(.bb-m-kopf__wahl--1):checked) .bb-m-kopf__spieler--1 { display: none; }
.bb-m-kopf--start:has(.bb-m-kopf__wahl--2:checked) .bb-m-kopf__spieler--2,
.bb-m-kopf--start:has(.bb-m-kopf__wahl--3:checked) .bb-m-kopf__spieler--3,
.bb-m-kopf--start:has(.bb-m-kopf__wahl--4:checked) .bb-m-kopf__spieler--4 { display: flex; }
.bb-m-kopf__spieler {
  position: absolute;
  z-index: 2;
  bottom: 2.5rem;
  left: max(var(--bm-rand), calc((100% - var(--bm-inhalt-max)) / 2));
  align-items: center;
  gap: 0.625rem;
}
.bb-m-kopf__play, .bb-m-kopf__ton {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--bm-text-invers) 55%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #000 28%, transparent); /* design-check: erlaubt – Kinoschwarz unter dem Film */
  color: var(--bm-text-invers);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background-color var(--bm-dauer) var(--bm-ease), border-color var(--bm-dauer) var(--bm-ease), color var(--bm-dauer) var(--bm-ease);
}
.bb-m-kopf__play:hover, .bb-m-kopf__ton:hover { border-color: var(--bm-signal); background: var(--bm-signal); color: var(--bm-text-invers); }
.bb-m-kopf__play:focus-visible, .bb-m-kopf__ton:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus-auf-dunkel); outline-offset: 3px; }
.bb-m-kopf__play { border-color: var(--bm-signal); }
.bb-m-kopf__play-icon, .bb-m-kopf__ton svg { width: 1.25rem; height: 1.25rem; }
.bb-m-kopf__play-icon--an { translate: 1px 0; }
.bb-m-kopf__play-icon--aus, .bb-m-kopf__play[aria-pressed='true'] .bb-m-kopf__play-icon--an { display: none; }
.bb-m-kopf__play[aria-pressed='true'] .bb-m-kopf__play-icon--aus { display: block; }
.bb-m-kopf__ton[aria-pressed='true'] { opacity: 0.6; }

.bb-m-kopf--start .bb-m-kopf__bereich,
.bb-m-kopf--start .bb-m-kopf__schleier,
.bb-m-kopf--start .bb-m-kopf__ki { transition: opacity var(--bm-dauer-langsam) var(--bm-ease), visibility 0s 0s; }
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__bereich { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--bm-dauer) var(--bm-ease), visibility 0s var(--bm-dauer); }
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__schleier { opacity: 0; }
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__ki { opacity: 0; }
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__umschalter { opacity: 0.35; transition: opacity var(--bm-dauer) var(--bm-ease); }
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__umschalter:is(:hover, :focus-within) { opacity: 1; }
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__buehne { background: #000; /* design-check: erlaubt – Kinoschwarz */ }
.bb-m-kopf--start .bb-m-kopf__buehne { transition: background-color var(--bm-dauer-langsam) var(--bm-ease); }
/* Kino: volle Bildschirmhöhe (alle Breiten), Film mittig mit contain, Rest schwarz. */
.bb-m-kopf.bb-m-kopf--start { transition: min-height var(--bm-dauer-langsam) var(--bm-ease); }
.bb-m-kopf.bb-m-kopf--start[data-film='spielt'] { min-height: 100svh; min-height: 100dvh; }
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__film { object-fit: contain; object-position: center; background: #000; /* design-check: erlaubt – Kinoschwarz */ }
.bb-m-kopf--start[data-film='spielt'] { background: #000; /* design-check: erlaubt – Kinoschwarz */ }
@media (max-width: 767px) {
  .bb-m-kopf__spieler { bottom: 4.5rem; }
}
/* Kino-Modus (Wurzelattribut data-kino): Umschalter innen unten, kleiner und dezenter. */
.bb-m-kopf__umschalter { transition: translate var(--bm-dauer-langsam) var(--bm-ease), scale var(--bm-dauer-langsam) var(--bm-ease), opacity var(--bm-dauer) var(--bm-ease); }
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__umschalter { translate: -50% -1.25rem; scale: 0.85; transform-origin: 50% 100%; opacity: 0.6; }
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__spieler { bottom: 1.5rem; }
@media (max-width: 767px) {
  .bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__spieler { bottom: 5rem; }
  .bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__untertitel { bottom: calc((100% - min(100%, 100vw * 16 / 9)) / 2 + 0.75rem); }
}
/* Kino: Standbild ausblenden, damit außerhalb des Films nur Schwarz steht. */
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__buehnenbild { visibility: hidden; }
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__film { visibility: visible; }
/* Kino Desktop: Film im Cinemascope-Ausschnitt (2,39:1, cover), vertikal mittig, schwarze Streifen oben und unten.
 * Untertitel innerhalb des Bildes nahe der unteren Bildkante. Mobil bleibt die Hochformat-Fassung (contain). */
@media (min-width: 768px) {
  .bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__film {
    inset: auto 0 auto 0;
    top: 50%;
    translate: 0 -50%;
    width: 100%;
    height: auto;
    max-height: 100%;
    aspect-ratio: 2.39 / 1;
    object-fit: cover;
  }
  .bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__untertitel { bottom: calc((100% - min(100%, 100vw / 2.39)) / 2 + 0.9rem); }
}
/* Kopfleiste kompakt (nur Variablen/Deckkraft/Skalierung; Navigationsdateien unberührt). */
header.bm-kopf { transition: transform var(--bm-kopf-dauer) var(--bm-kopf-ease), box-shadow var(--bm-kopf-dauer) var(--bm-kopf-ease), height var(--bm-dauer-langsam) var(--bm-ease), background-color var(--bm-dauer-langsam) var(--bm-ease); }
:root[data-kino='an'] header.bm-kopf {
  --bm-kopf-h: 60px;
  background: var(--bm-flaeche-dunkel);
}
:root[data-kino='an'] header.bm-kopf :is(.bm-kopf__logo, .bm-kopf__nav, .bm-kopf__rechts) { transform: scale(0.94); transition: transform var(--bm-dauer-langsam) var(--bm-ease); }
:root[data-kino='an'] header.bm-kopf .bm-kopf__nav { transform-origin: left center; }
:root[data-kino='an'] header.bm-kopf .bm-kopf__rechts { transform-origin: right center; }
/* Ohne Bewegung: kein Schleifenfilm im Hintergrund, im Play-Modus aber sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__film { display: block; }
  .bb-m-kopf--start * { transition-duration: 0s !important; transition-delay: 0s !important; }
  header.bm-kopf, header.bm-kopf * { transition-duration: 0s !important; }
}
.bb-m-kopf__ton[hidden] { display: none; }

/* Kino-Untertitel (Overlay aus der VTT): unten mittig, einzeilig, klein, dezenter Balken. */
.bb-m-kopf__untertitel {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 7.5rem;
  translate: -50% 0;
  max-width: 92%;
  padding: 0.1em 0.4em;
  border-radius: var(--bm-radius-klein);
  background: #000; /* design-check: erlaubt – Kinoschwarz */
  color: #fff; /* design-check: erlaubt – Untertitel weiß */
  font-family: var(--bm-font);
  font-size: clamp(0.875rem, 0.8rem + 0.15vw, 0.9375rem);
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}
.bb-m-kopf__untertitel[hidden] { display: none; }
@media (max-width: 767px) { .bb-m-kopf__untertitel { font-size: 0.6875rem; bottom: 9rem; max-width: 94%; } }

/* Fortschrittsleiste: 1 px am unteren Rand; im Hintergrund-Loop ausgeblendet, im Play-Modus scrubbbar. */
.bb-m-kopf__fortschritt { display: none; }
.bb-m-kopf--start[data-film='spielt'] .bb-m-kopf__fortschritt[data-aktiv] {
  display: block;
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1rem;
  cursor: pointer;
  touch-action: none;
}
.bb-m-kopf__fortschritt-balken {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--bm-signal);
  transform-origin: left;
  transform: scaleX(0);
  transition: height var(--bm-dauer-kurz) var(--bm-ease);
}
.bb-m-kopf__fortschritt:hover .bb-m-kopf__fortschritt-balken,
.bb-m-kopf__fortschritt:focus-visible .bb-m-kopf__fortschritt-balken { height: 3px; }
.bb-m-kopf__fortschritt:focus-visible { outline: none; }