/* Kopie aus der gerenderten Astro-Website (http://127.0.0.1:8099, site/navigation/ui/kopf.css, kompiliert mit Autoprefixer), Stand 07.10.2026. Nicht von Hand angleichen, sondern neu kopieren. */
/* Desktop-Kopf + Mega-Panel der Agentur-Website (Welle N1-A, auf Tokens
   umgestellt in Z0-C). Vorbild sunzinet.com, Maße aus
   docs/positionierung/design/sunzinet-navigation.md (Abschnitt 7, Bauvorgabe).
   Farben/Schrift/Zeiten/Ebenen nur aus site/design/tokens.css; nur die
   vom Token abgeleiteten Mega-Panel-Mischungen (--bm-kopf-flaeche,
   --bm-kopf-linie-leicht) bleiben lokal (siehe .bm-seite, .bm-kopf unten). */

.bm-seite,
.bm-kopf {
  /* Kopfhöhe, Rand, Rahmenbreite, Kopf-Dauer/-Kurve und Schatten kommen aus
     tokens.css (--bm-kopf-h, --bm-rand, --bm-rahmen-max, --bm-kopf-dauer,
     --bm-kopf-ease, --bm-schatten-kopf, --bm-schatten-schwebend) – wirkt auch
     auf .bm-seite--fremd (kein .bm-neu), weil die Tokens auf
     :root:has(.bm-neu) liegen. Hier bleiben nur die vom Token abgeleiteten
     Einzelmischungen fürs Mega-Panel. */
  --bm-kopf-flaeche: color-mix(in srgb, var(--bm-linie) 35%, transparent);
  --bm-kopf-linie-leicht: color-mix(in srgb, var(--bm-linie) 55%, var(--bm-bg));
}

/* Seiteninhalt rückt immer unter den festen, deckenden Kopf – auch Bühnen
   (TY-1, Alexander 27.09.2026: „das bringt mehr Ordnung in den Screen“). */
.bm-seite main#inhalt { padding-top: var(--bm-kopf-h); }
.bm-seite main#inhalt [id] { scroll-margin-top: var(--bm-kopf-h); }

/* Fremdrahmen (Case-Detail, 404): Die Seiten bringen nur ihr eigenes main
   mit; die alte Page-Shell läuft seit P2-G nirgends mehr im Fremdrahmen, die
   Regeln zu ihrem Ausblenden sind entfallen (P2-A). */

/* Scroll-Fortschrittsleiste (geteilte ScrollProgress, 2 px, Verlauf per
   Inline-Stil – deshalb !important): im neuen Rahmen der Signalverlauf.
   Rein dekorativ; Kontrast der Pole zum Grund ≥ 3:1 (farbwechsel.md).
   Rahmen montiert sie direkt in .bm-seite.bm-neu, FremdRahmen in
   .bm-fortschritt.bm-neu. */
.bm-neu:is(.bm-seite, .bm-fortschritt) > .fixed[aria-hidden] { z-index: var(--bm-z-fortschritt); }
.bm-neu:is(.bm-seite, .bm-fortschritt) > .fixed[aria-hidden] > div { background: var(--bm-signal-verlauf) !important; }

/* ── Sprungmarke „Zum Inhalt springen“ ────────────────────────────────────
   Nur bei Tastatur-Fokus sichtbar (sr-only/focus:not-sr-only, Sprungmarke.tsx).
   Alter Fokusring (rgb(217,169,75), enerbolt-Akzent) entfällt zugunsten der
   Tokens. Die Marke liegt über der Kopfleiste: Der Rahmen (außen, mit Lücke)
   folgt deshalb dem Ton der Leiste (P3-A). */
.bm-sprungmarke { --bm-fokus: var(--bm-fokus-auf-hell); --bm-fokus-gegen: var(--bm-fokus-auf-dunkel); }
:root:has(.bm-kopf[data-ton='dunkel']) .bm-sprungmarke { --bm-fokus: var(--bm-fokus-auf-dunkel); --bm-fokus-gegen: var(--bm-fokus-auf-hell); }
.bm-sprungmarke:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--bm-z-sprung);
  padding: 0.625rem 1rem;
  border-radius: var(--bm-radius-pille);
  background: var(--bm-text);
  color: var(--bm-text-invers);
  font-family: var(--bm-font);
  font-size: var(--bm-t-fest);
  font-weight: var(--bm-g-normal);
  box-shadow: var(--bm-schatten-schwebend);
  outline: var(--bm-fokus-breite) solid var(--bm-fokus);
  outline-offset: 2px;
}

/* ── Kopf ─────────────────────────────────────────────────────────────── */
/* Dunkle, deckende Leiste (Alexander, 27.09.2026, 17:25): Kopf, Mega-Panel,
   Mobil-Menü und Suche stehen immer auf Dunkel; Bühnen beginnen UNTER der
   Leiste (main rückt immer um --bm-kopf-h ein, oben). Umgesetzt wie
   .bm-umkehr (basis.css): die Farb-Tokens werden hier umgekehrt, die
   Bausteine lesen weiter --bm-bg/--bm-text/… . Markierungen auf Dunkel:
   --bm-signal-licht (Signal-Regeln, design/README.md).
   Schalter (P2-A): Die Umkehr hängt am Ton der Leiste, header[data-ton]
   (Kopf.tsx, KOPF_TON). Mobil-Menü und Suche hängen außerhalb des Kopfs
   (Portal bzw. Geschwister) und lesen den Schalter über :has(). Für eine
   helle Leiste genügt KOPF_TON = 'hell': Kopf, Mega-Panel, Mobil-Menü und
   Suche stehen dann auf den Tokens der Seite.
   Fokusrahmen (P3-A): Derselbe Schalter setzt --bm-fokus je Ton (tokens.css
   »Fokusrahmen je Fläche«). Das Mega-Panel und das Klappmenü hängen im Kopf
   und stehen auf --bm-bg der Leiste – sie erben den Schalter. Der helle Ton
   setzt ihn ausdrücklich zurück, damit die Leiste nie den Wert einer
   umgebenden Fläche übernimmt.
   --bm-linie-feld: Grenze von Bedienelementen (Linie des Suchfelds,
   kopf-suche.css) – auf Dunkel der Ton mit mindestens 3:1. */
.bm-neu.bm-kopf[data-ton='hell'],
:root:has(.bm-kopf[data-ton='hell']) :is(.bm-neu.bm-mobilmenue, .bm-neu.bm-suche) {
  --bm-fokus: var(--bm-fokus-auf-hell);
  --bm-fokus-gegen: var(--bm-fokus-auf-dunkel);
}
.bm-neu.bm-kopf[data-ton='dunkel'],
:root:has(.bm-kopf[data-ton='dunkel']) :is(.bm-neu.bm-mobilmenue, .bm-neu.bm-suche) {
  --bm-bg: var(--bm-flaeche-dunkel);
  --bm-bg-alt: var(--bm-karte-dunkel);
  --bm-kachel: var(--bm-dunkel-erhaben);
  --bm-text: var(--bm-text-invers);
  --bm-text-leise: var(--bm-text-invers-leise);
  --bm-linie: var(--bm-linie-invers);
  --bm-linie-zart: var(--bm-linie-invers);
  --bm-linie-feld: var(--bm-linie-invers-stark);
  --bm-fokus: var(--bm-fokus-auf-dunkel);
  --bm-fokus-gegen: var(--bm-fokus-auf-hell);
  --bm-signal-kontur: var(--bm-signal-licht);
  --bm-signal-dunkel: var(--bm-signal-licht);
}
header.bm-kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--bm-z-kopf);
  height: var(--bm-kopf-h);
  background: var(--bm-bg);
  color: var(--bm-text);
  font-family: var(--bm-font);
  transition: transform var(--bm-kopf-dauer) var(--bm-kopf-ease),
    box-shadow var(--bm-kopf-dauer) var(--bm-kopf-ease);
}
header.bm-kopf.bm-kopf--gepinnt { box-shadow: 0 1px 0 var(--bm-linie-zart); }
header.bm-kopf.bm-kopf--versteckt:not(:focus-within) { transform: translateY(-100%); box-shadow: none; }

/* Drei Spalten: links Navigation (bzw. Menü-Symbol), Mitte Marke, rechts
   Werkzeuge. minmax(0, 1fr) links und rechts hält die Marke exakt in der
   Mitte des Wrappers, gleich wie breit die Seitengruppen sind. */
.bm-kopf__zeile {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  height: 100%;
  max-width: var(--bm-rahmen-max);
  margin-inline: auto;
  padding-inline: var(--bm-rand);
}
.bm-kopf__links { display: flex; align-items: center; justify-self: start; min-width: 0; }
/* Symbole rechts: unter 1024 px ohne Lücke (je 44 px Tippfläche), damit ein
   weiteres Symbol neben die mittige Marke passt (P1-A). */
.bm-kopf__rechts { display: flex; align-items: center; justify-content: flex-end; justify-self: end; gap: 0; min-width: 0; }
@media (min-width: 1024px) { .bm-kopf__rechts { gap: 0.25rem; } }

.bm-kopf__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  color: inherit;
  text-decoration: none;
}
/* Wortmarke in der Hausschrift. Die geteilte Marke-Komponente setzt Hanken
   Grotesk per Inline-Stil; nur hier im Kopf wird sie überstimmt (deshalb
   !important), die Komponente selbst bleibt unverändert. Ruhige Größe:
   Schriftgrad 22/24 px, Versalhöhe um 16 px. */
.bm-kopf .bm-kopf__marke {
  color: inherit;
  font-family: var(--bm-font) !important;
  font-weight: var(--bm-g-mittel) !important;
  font-size: 1.25rem;           /* Logo-Maß, kein Typo-Token (M-K: 22 → 20 px mit dem niedrigeren Kopf) */
  line-height: 1;
  letter-spacing: var(--bm-sp-eng);
}
@media (min-width: 1440px) {
  .bm-kopf .bm-kopf__marke { font-size: 1.375rem; }   /* Logo-Maß (M-K: 24 → 22 px) */
}
/* Bildmarke (navigation/marke.ts): Höhe 21 → 22 → 23 px mit der Kopfhöhe
   56 → 60 → 64 (M-K 30.09.2026, Mercedes-Anmutung; vorher 24/26/28 bei
   64/72/80, Anmerkung 0638b5e2). Tippflächen bleiben 44 px. */
.bm-kopf__bildmarke { display: block; width: auto; height: 21px; }
@media (min-width: 1024px) { .bm-kopf__bildmarke { height: 22px; } }
@media (min-width: 1440px) { .bm-kopf__bildmarke { height: 23px; } }

/* Signet-Animation (nur Transform/Opacity, kein Layout-Shift): Kippen im
   Raum (perspective, rotateY/X) mit Nachschwingen, Koralle-Lichtschein läuft
   über die Kante (Maske = Signet). Auslöser: Hover und data-puls (Kopf.tsx). */
.bm-kopf__signet { position: relative; display: block; perspective: 220px; }
.bm-kopf__signet .bm-kopf__bildmarke { transform-origin: 50% 60%; }
.bm-kopf__signet::after {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, var(--kern-signal) 50%, transparent 65%) 130% 0 / 250% 100% no-repeat;
  -webkit-mask: url('../../images/rahmen/brandmediale-signet-hell.svg') center / 100% 100% no-repeat;
  mask: url('../../images/rahmen/brandmediale-signet-hell.svg') center / 100% 100% no-repeat;
}
/* Logo statisch (Alexander 13.10.2026): keine Hover-/Puls-Animation. */
@keyframes bm-signet-kipp {
  0%   { transform: rotateY(0) rotateX(0); }
  35%  { transform: rotateY(-38deg) rotateX(10deg); }
  65%  { transform: rotateY(12deg) rotateX(-4deg); }
  85%  { transform: rotateY(-4deg) rotateX(1deg); }
  100% { transform: rotateY(0) rotateX(0); }
}
@keyframes bm-signet-licht {
  0%   { opacity: 0; background-position: 130% 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}

.bm-kopf__nav { display: none; }
.bm-kopf__liste { display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
/* Kopf als Insel (B1-I): Server-HTML trägt beide Fassungen (3 oder 5 Punkte
   in der Leiste), bis der Kopf im Browser die Breite kennt (Kopf.useBreit). */
@media (max-width: 1439.98px) { .bm-kopf__liste > li.bm-kopf__nur-breit { display: none; } }
@media (min-width: 1440px) {
  .bm-kopf__liste > li.bm-kopf__nur-schmal,
  .bm-mega__gruppe.bm-mega__nur-schmal { display: none; } .bm-kopf__liste { gap: 1.625rem; }
}

.bm-kopf__punkt-knopf,
.bm-kopf__kontakt {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;          /* auch als Link (Arbeiten) */
  display: inline-flex;
  align-items: center;
  min-height: 44px;             /* Tippfläche */
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: var(--bm-t-nav);
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-kopf__punkt-text { position: relative; display: inline-block; }
/* Feine Linie (1 px) unter dem Wort statt Fettung: zieht von der Mitte auf
   (Hover, Tastaturfokus, aktiver Punkt). Auf Dunkel --bm-signal-licht. */
.bm-kopf__punkt-text::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.4375rem;
  width: 0;
  height: 1px;
  background: var(--bm-signal-kontur);
  transform: translateX(-50%);
  transition: width var(--bm-dauer) var(--bm-ease);
}
:is(.bm-kopf__punkt-knopf, .bm-kopf__kontakt):is(:hover, :focus-visible) .bm-kopf__punkt-text::before,
.bm-kopf__punkt-knopf.ist-markiert .bm-kopf__punkt-text::before,
.bm-kopf__kontakt[aria-current='page'] .bm-kopf__punkt-text::before { width: 100%; }

/* Rechte Seite: Kontakt als Text, dann drei feine Linien-Symbole */
.bm-kopf__kontakt { display: none; margin-right: 1rem; }
.bm-kopf__werkzeug {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0 0.625rem;
  border: 0;
  border-radius: var(--bm-radius-pille);
  background: none;
  color: var(--bm-text-leise);
  font: inherit;
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-normal);
  letter-spacing: var(--bm-sp-knopf);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--bm-dauer-kurz) var(--bm-ease), background-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-kopf__werkzeug:hover,
.bm-kopf__werkzeug[aria-expanded='true'] { color: var(--bm-text); background: var(--bm-kopf-flaeche); }
/* auf Dunkel das helle Glas (hängt am Schalter, siehe oben) */
.bm-kopf[data-ton='dunkel'] .bm-kopf__werkzeug:is(:hover, [aria-expanded='true']) { background: var(--bm-glas); }
.bm-kopf__symbol { flex: none; display: block; }
.bm-kopf__werkzeug-text { display: none; }
.bm-kopf__recht { display: none; }
.bm-kopf__rechts > .bm-kopf__werkzeug:last-child { margin-right: -0.625rem; }   /* Symbol fluchtet mit der Inhaltskante */
/* Unter 360 px reichen drei Symbole (je 44 px) in die mittige Marke
   (gemessen bei 320 px: 5,6 px Überlappung). „Anmelden" steht dort im
   Mobil-Menü (mobil.css), die Suche rückt an die Inhaltskante. */
@media (max-width: 359px) {
  .bm-kopf__rechts > .bm-kopf__anmelden { display: none; }
  .bm-kopf__rechts > .bm-kopf__werkzeug:nth-last-child(2) { margin-right: -0.625rem; }
}

/* Klappmenü „Rechtliches": kleine Liste unter dem Auslöser („Mehr" ist seit
   NV-2 ein Mega-Panel) */
.bm-kopf__klapp-ort { position: relative; }
.bm-kopf__klapp {
  position: absolute;
  top: calc(100% + (var(--bm-kopf-h) - 44px) / 2);
  left: -1.5rem;
  z-index: var(--bm-z-mega);
  min-width: 14rem;
  padding: 0.75rem 0;
  background: var(--bm-bg);
  box-shadow: var(--bm-schatten-schwebend);
  opacity: 0;
  visibility: hidden;
  translate: 0 -0.5rem;
  transition: opacity var(--bm-dauer) var(--bm-ease), translate var(--bm-dauer) var(--bm-ease), visibility var(--bm-dauer) var(--bm-ease);
}
.bm-kopf__klapp--rechts { left: auto; right: -0.625rem; }
.bm-kopf__klapp.ist-offen { opacity: 1; visibility: visible; translate: none; transition-duration: var(--bm-dauer), var(--bm-dauer), 0s; }   /* sofort fokussierbar */
/* Kontaktwege: öffnen beim Überfahren und bei Tastaturfokus (kein Klick vorweg);
   die Brücke schließt die Lücke zwischen Knopf und Liste. */
.bm-kopf__kontakt-klapp::before { content: ''; position: absolute; left: 0; right: 0; top: calc((var(--bm-kopf-h) - 44px) / -2); height: calc((var(--bm-kopf-h) - 44px) / 2); }
.bm-kopf__kontakt-ort:is(:hover, :focus-within) .bm-kopf__kontakt-klapp {
  opacity: 1; visibility: visible; translate: none; transition-duration: var(--bm-dauer), var(--bm-dauer), 0s;
}
.bm-kopf__klapp-liste { margin: 0; padding: 0; list-style: none; }
.bm-kopf__klapp-link {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.625rem 1.5rem;
  border: 0;
  border-left: 1px solid transparent;
  background: none;
  color: var(--bm-text);
  font: inherit;
  font-size: var(--bm-t-nav);
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--bm-dauer-kurz) var(--bm-ease), background-color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-kopf__klapp-link:is(:hover, :focus-visible, .ist-aktiv, [aria-current='page'], [aria-expanded='true']) {
  border-left-color: var(--bm-signal-kontur);
  background: var(--bm-kopf-flaeche);
}
/* Rahmen innen (der Eintrag füllt die Breite des Klappmenüs); zwei Klassen,
   damit die allgemeine Regel des Kopfs unten ihn nicht nach außen setzt. */
.bm-kopf .bm-kopf__klapp-link:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz-innen); }

/* Menü-Symbol (unter 1024): drei feine Linien, offen ein X. Die Box (44 px)
   fluchtet links mit der Inhaltskante; die Tippfläche reicht per ::after
   3 px darüber hinaus. */
.bm-kopf__burger {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.bm-kopf__burger::after { content: ''; position: absolute; inset: -3px; }
.bm-kopf__burger-linie {
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--bm-dauer-kurz) var(--bm-ease), opacity var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-kopf__burger-linie:nth-child(1) { top: 15px; }
.bm-kopf__burger-linie:nth-child(2) { top: 21.25px; }
.bm-kopf__burger-linie:nth-child(3) { top: 27.5px; width: 14px; }
.bm-kopf__burger[aria-expanded='true'] .bm-kopf__burger-linie:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.bm-kopf__burger[aria-expanded='true'] .bm-kopf__burger-linie:nth-child(2) { opacity: 0; }
.bm-kopf__burger[aria-expanded='true'] .bm-kopf__burger-linie:nth-child(3) { width: 22px; transform: translateY(-6.25px) rotate(-45deg); }

@media (min-width: 1024px) {
  .bm-kopf__nav { display: block; }
  .bm-kopf__burger { display: none; }
  .bm-kopf__kontakt { display: inline-flex; }
  .bm-kopf__recht { display: block; }
}
@media (min-width: 1440px) {
  .bm-kopf__werkzeug-text { display: inline; }
  .bm-kopf__anmelden { padding-inline: 0.625rem 0.75rem; }
}

/* Fokus sichtbar – Rahmenfarbe der Fläche (Schalter --bm-fokus am Ton der
   Leiste, oben), nicht die Schriftfarbe des Elements. */
.bm-kopf :focus-visible {
  outline: var(--bm-fokus-breite) solid var(--bm-fokus);
  outline-offset: var(--bm-fokus-versatz, 3px);
}
.bm-kopf__werkzeug:focus-visible { outline-offset: var(--bm-fokus-versatz-innen); }

/* ── Mega-Panel (flach, NV-2) ─────────────────────────────────────────────
   Alles auf einer Ebene: Gruppen als Blöcke in vier Spalten, feine
   senkrechte Linie zwischen den Spalten, jeder Block mit Titel und Linie.
   Spaltensatz (column-count): die Blöcke laufen in Lesereihenfolge von oben
   nach unten durch die Spalten und gleichen die Höhe aus; ein Block bricht
   nie um. Wenige Gruppen belegen nur die ersten Spalten. Passt das Panel
   nicht auf den Bildschirm, scrollt es in sich. */
.bm-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--bm-z-mega);
  max-height: calc(100dvh - var(--bm-kopf-h));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bm-bg);
  color: var(--bm-text);
  border-top: 1px solid var(--bm-linie-zart);
  box-shadow: var(--bm-schatten-schwebend);
  opacity: 0;
  visibility: hidden;
  /* Weiches Öffnen: blendet auf und rückt ein kleines Stück nach unten. */
  translate: 0 -0.5rem;
  transition: opacity var(--bm-dauer) var(--bm-ease), translate var(--bm-dauer) var(--bm-ease), visibility var(--bm-dauer) var(--bm-ease);
}
.bm-mega.ist-offen { opacity: 1; visibility: visible; translate: none; transition-duration: var(--bm-dauer), var(--bm-dauer), 0s; }   /* sofort fokussierbar */

.bm-mega__innen {
  box-sizing: border-box;
  max-width: var(--bm-rahmen-max);
  margin-inline: auto;
  padding: 1.75rem var(--bm-rand) 0.75rem;
}

/* Intro: unter 1440 eine Zeile über den Spalten, ab 1440 eine eigene Spalte
   links (ein Sechstel), die Gruppen behalten ihre vier Spalten. */
.bm-mega__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  margin-bottom: 1.5rem;
}
.bm-mega__titel {
  position: relative;
  margin: 0;
  padding-bottom: 0.625rem;
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-kartentitel);   /* P1-A: 18 → 20 px (vorher --bm-t-h3, 20 → 23) */
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  line-height: var(--bm-zh-titel);
  color: var(--bm-text);
}
/* Linie unter dem Titel zieht beim Öffnen von links auf. */
.bm-mega__titel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--bm-signal-kontur);
  transform-origin: left center;
  scale: 0 1;
  transition: scale var(--bm-dauer-langsam) var(--bm-ease);
}
.bm-mega.ist-offen .bm-mega__titel::after { scale: 1 1; transition-delay: var(--bm-dauer-kurz); }
.bm-mega__uebersicht {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.5rem;   /* Tippfläche ≥ 24 px */
  color: var(--bm-text);
  font-size: var(--bm-t-klein);
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  text-decoration: none;
}

.bm-mega__gruppen {
  -moz-column-count: 4;
       column-count: 4;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  -moz-column-rule: 1px solid var(--bm-linie-zart);
       column-rule: 1px solid var(--bm-linie-zart);
}
/* Block = eine Gruppe (im Sammelpanel „Mehr": ein Hauptpunkt) */
.bm-mega__gruppe {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  padding-bottom: 1.5rem;
}
.bm-mega__spalten-titel {
  /* Grundlinie unten, feste Mindesthöhe: die Linien aller Titel einer Reihe
     stehen auf gleicher Höhe, auch bei den Bereichs-Wortmarken. */
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  min-height: 2.0625rem;        /* 24 px Titel-Link + Abstand + Linie: Linien einer Reihe auf gleicher Höhe */
  margin: 0 0 0.375rem;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--bm-kopf-linie-leicht);
  font-family: var(--bm-font-titel);   /* Gruppentitel: Titelschrift, klein */
  font-size: var(--bm-t-body);         /* P1-A: 16 → 17 px (vorher --bm-t-h4, 18 → 20) */
  font-weight: var(--bm-g-normal);
  font-synthesis: none;
  line-height: var(--bm-zh-titel);
  color: var(--bm-text);
}
/* Titel als Link: Gruppentitel führt zur Übersichtsseite der Gruppe
   (Anmerkung 2219cda9), im Sammelpanel der Titel des Hauptpunkts zu dessen
   Übersicht. Erkennbar an Farbe und feiner Linie bei Hover/Fokus; die
   Tippfläche ist mindestens 24 px hoch und läuft über die Spaltenbreite. */
.bm-mega__titel-link {
  display: flex;
  flex: 1;
  align-items: flex-end;
  min-height: 1.5rem;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: color var(--bm-dauer-kurz) var(--bm-ease);
}
.bm-mega__titel-link:is(:hover, :focus-visible, [aria-current]) { color: var(--bm-signal-dunkel); }
/* Sammelpanel „Mehr": Block des aktuellen Bereichs – Titel in der
   Signalfarbe, Linie darunter als Markierung wie in der Leiste (P2-A). */
.bm-mega__gruppe.ist-aktiv > .bm-mega__spalten-titel { border-bottom-color: var(--bm-signal-kontur); color: var(--bm-signal-dunkel); }
.bm-mega__titel-link:is(:hover, :focus-visible) { text-decoration-line: underline; }
.bm-mega__titel-link:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz, 2px); }
.bm-mega__untertitel .bm-mega__titel-link { align-items: center; }
.bm-mega__untergruppe + .bm-mega__untergruppe { margin-top: 1rem; }
.bm-mega__untertitel {
  margin: 0 0 0.125rem;
  padding-top: 0.375rem;
  font-size: var(--bm-t-mini);
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  color: var(--bm-text-leise);
}

.bm-mega__liste { margin: 0; padding: 0; list-style: none; }

/* Link: Fläche und feine Signal-Linie links bei Hover, Fokus, aktueller Seite.
   Der Text steht in der Flucht des Gruppentitels, die Fläche ragt links und
   rechts darüber hinaus. */
.bm-mega__link {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: block;
  margin-inline: -0.625rem;
  padding: 0.3125rem 0.625rem;   /* 14 px × 1,3 + 10 = 28 px Zeile (Tippfläche ≥ 24) */
  color: var(--bm-text);
  font-size: var(--bm-t-klein);  /* P1-A: Einträge in der kleinen Fließtextgröße (vorher --bm-t-nav) */
  font-weight: var(--bm-g-normal);
  line-height: var(--bm-zh-kompakt);
  letter-spacing: var(--bm-sp-knopf);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--bm-dauer) var(--bm-ease);
}
.bm-mega__link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-left: 1px solid var(--bm-signal-kontur);   /* feine Markierung (TY-1) */
  background: var(--bm-kopf-flaeche);
  opacity: 0;
  transition: opacity var(--bm-dauer) var(--bm-ease);
}
.bm-mega__link:is(:hover, :focus-visible, [aria-current='page'])::before { opacity: 1; }
.bm-mega__link:focus-visible { outline: var(--bm-fokus-breite) solid var(--bm-fokus); outline-offset: var(--bm-fokus-versatz-innen); }

/* Unterseiten eines Eintrags: eingerückt, feine Linie links, leiser */
.bm-mega__liste--unter {
  margin: 0.125rem 0 0.375rem 0.625rem;
  padding-left: 0.625rem;
  border-left: 1px solid var(--bm-linie-zart);
}
.bm-mega__liste--unter .bm-mega__link {
  padding-block: 0.25rem;        /* 13 px × 1,3 + 8 = 25 px */
  font-size: var(--bm-t-meta);   /* eine Stufe kleiner und leiser */
  color: var(--bm-text-leise);
}
.bm-mega__liste--unter .bm-mega__link:is(:hover, :focus-visible, [aria-current='page']) { color: var(--bm-text); }

/* Lange Blöcke (MegaPanel.tsx: mehr als LANG Ziele, z. B. Insights „Formate")
   dürfen zwischen zwei Einträgen in die nächste Spalte laufen – sonst wird
   eine Spalte höher als das Fenster. Ein Eintrag bleibt mit seinen
   Unterseiten zusammen, ein Titel steht nie allein am Spaltenende. */
.bm-mega__gruppe--lang { -moz-column-break-inside: auto; break-inside: auto; }
.bm-mega__gruppe--lang :is(.bm-mega__spalten-titel, .bm-mega__untertitel) { -moz-column-break-after: avoid; break-after: avoid; }
.bm-mega__gruppe--lang .bm-mega__liste:not(.bm-mega__liste--unter) > li { -moz-column-break-inside: avoid; break-inside: avoid; }
.bm-mega__gruppe:not(.bm-mega__gruppe--lang) .bm-mega__untergruppe { -moz-column-break-inside: avoid; break-inside: avoid; }

/* Touch (Tablet quer ab 1024 px): Tippfläche 44 px; das Panel scrollt dann
   bei Bedarf in sich. */
@media (pointer: coarse) {
  .bm-mega__link,
  .bm-mega__liste--unter .bm-mega__link { display: flex; align-items: center; min-height: 44px; padding-block: 0.25rem; }
  .bm-mega__uebersicht,
  .bm-mega__titel-link { min-height: 44px; }
}

/* Unter 1440 dichter gesetzt, damit auch das längste Panel (Technologien)
   bei 1024 × 768 auf den Bildschirm passt. */
@media (max-width: 1439px) {
  .bm-mega__innen { padding-top: 1.25rem; padding-bottom: 0.25rem; }
  .bm-mega__intro { margin-bottom: 1rem; }
  .bm-mega__gruppen { -moz-column-gap: 1.5rem; column-gap: 1.5rem; }
  .bm-mega__gruppe { padding-bottom: 1rem; }
  .bm-mega__untergruppe + .bm-mega__untergruppe { margin-top: 0.5rem; }
  .bm-mega__untertitel { padding-top: 0.25rem; }
  .bm-mega__link { padding-block: 0.25rem; }   /* 26 px Zeile */
}
@media (min-width: 1440px) {
  .bm-mega__innen { padding-top: 2.5rem; padding-bottom: 1.25rem; }
  .bm-mega:not(.bm-mega--sammlung) .bm-mega__innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 5fr);   /* P1-A: Intro ein Sechstel (vorher ein Fünftel) */
    -moz-column-gap: 3rem;
         column-gap: 3rem;
    align-items: start;
  }
  .bm-mega__intro { flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 0; }
  .bm-mega__gruppen { -moz-column-gap: 3rem; column-gap: 3rem; }
}

/* Bereichs-Titel (LS-1/TY-1): Bereichs-Wortmarke wie auf der Startbühne
   (BereichsMarke.tsx) – „brandmediale" Hausschrift mittel, Zusatz One in der
   Titelschrift, Digital Hausschrift mittel, Studio Titelschrift kursiv.
   Gilt im Mega-Panel, im Mobil-Menü und im Footer; unabhängig davon, ob
   start.css geladen ist. */
.bm-bereichstitel .bm-bereichsmarke { display: inline-flex; align-items: baseline; gap: 0.3em; line-height: 1; }
.bm-bereichstitel .bm-bereichsmarke__wort {
  display: inline;
  font-family: var(--bm-font);
  font-size: var(--bm-t-nav);
  font-weight: var(--bm-g-mittel);
  font-style: normal;
  letter-spacing: var(--bm-sp-eng);
}
.bm-bereichstitel .bm-bereichsmarke__zusatz {
  font-family: var(--bm-font-titel);
  font-size: var(--bm-t-h4);
  font-weight: var(--bm-g-normal);
  font-style: normal;
  font-synthesis: none;
}
.bm-bereichstitel .bm-bereichsmarke[data-bereich='studio'] .bm-bereichsmarke__zusatz { font-style: italic; }
.bm-bereichstitel .bm-bereichsmarke[data-bereich='digital'] .bm-bereichsmarke__zusatz {
  font-family: var(--bm-font);
  font-size: var(--bm-t-nav);
  font-weight: var(--bm-g-mittel);
}
/* Mega-Panel: Bereichs-Wortmarke als Gruppentitel */
.bm-mega__spalten-titel .bm-bereichstitel .bm-bereichsmarke { line-height: inherit; }

@media (prefers-reduced-motion: reduce) {
  header.bm-kopf,
  .bm-kopf *,
  .bm-kopf *::before,
  .bm-kopf *::after,
  .bm-mega { transition: none !important; }
}