/* ============================================================
   Beirat Editorial Cinema — EFFEKT-STYLES (cinema.css)
   ============================================================
   Gehoert zu: beirat-cinema.php (Loader) + motion.js (Engine) + tokens.css.
   Tuning-Werte (Tempo/Licht/Tiefe): NUR in tokens.css aendern.

   INHALT
   00  Gating-Grundregeln (html.bc-motion, data-motion)
   01  B1 Reveal-System + Signal-Linien
   02  C2 Button-Energie-Ring · C3 Links · C4 Karten-Tiefe · C8 Medien
   03  A1 Raum-Zonen (bc-space): Canvas + statischer Fallback-Nebel
   04  B8 Hero-3D-Instrument (Buehne, Ebenen, Idle-Rotation)
   05  A4/A6 Kompass-Wasserzeichen + Orbit
   06  A5 Wissens-Graph-Konstellation (/basics/)
   07  B4 Sektionsuebergaenge (Licht-Horizont)
   08  B7 Artikel-Hero-Choreografie
   09  B3 Scroll-Kompass (Signature) + Ersatzregel .beirat-progress
   10  C1 Collapsible-Sweep · C6 merkpunkt-Shimmer · C7 TOC-Marker
   11  D1-D4 Rewards
   12  B5 View Transitions
   13  Gutenberg-Block-Styles (5)
   14  Dark Mode
   15  Reduced Motion (Endzustaende, Parity)
   16  Mobile
   17  V3 C2-MAX Space-Hover fuer jeden Button (nur spectacle)
   18  V3 Kompassnadel-Cursor (nur spectacle + Desktop)
   19  V3 K1/H1 Kosmos-Nebel-Drift + Himmelskoerper-Canvases (nur spectacle)
   20  V3 B1-MAX Zuendungs-Flare + Reveal-Glow-Kante (nur spectacle)

   V3-STUFEN-SEMANTIK (VOYAGE, 2026-07-03): cinematic == konservierter
   v4-Stand (ehem. spectacle-Gates auf cinematic abgesenkt), spectacle ==
   Maximalausbau (alle html[data-motion="spectacle"]-Regeln + tokens-Override).

   GRUNDSAETZE
   - Animiert werden ausschliesslich transform + opacity (Compositor-only).
     Box-shadow-HOVER-Uebergaenge folgen dem etablierten Site-Muster (0.18s).
   - Alle Verhaltens-Overrides tragen das Praefix html.bc-motion: ohne JS,
     bei reduced-motion oder data-motion=off existiert keine dieser Regeln
     -> die Site ist exakt der statische Ist-Stand.
   - Farben nur als var(--bc-*) bzw. Site-Tokens — nie Hex (Dark-Mode-Remap).
   ============================================================ */


/* == 00 · Gating-Grundregeln ================================= */

/* Elemente, die ein Redakteur explizit ausnimmt: keinerlei Cinema-Verhalten. */
[data-motion="off"], [data-motion="off"] * {
  animation: none !important;
  transition: none !important;
}


/* == 01 · B1 Reveal-System + Signal-Linien =================== */

/* Initial-Hidden NUR unter html.bc-motion (JS gesetzt) und nur fuer Elemente,
   die motion.js dekoriert hat UND die beim Dekorieren unterhalb des Viewports
   lagen (JS ueberspringt sichtbare Elemente -> kein FOUC, LCP nie betroffen). */
html.bc-motion [data-bc-reveal]:not(.bc-in) {
  opacity: 0;
  transform: translateY(var(--bc-reveal-distance));
}
html.bc-motion [data-bc-reveal] {
  transition:
    opacity var(--bc-dur-base) var(--bc-ease-out),
    transform var(--bc-dur-base) var(--bc-ease-out);
  transition-delay: var(--bc-delay, 0ms);   /* Stagger: JS setzt --bc-delay pro Kind */
}
html.bc-motion [data-bc-reveal].bc-in {
  opacity: 1;
  transform: none;
}

/* Signal-Linien: die BESTEHENDEN statischen Linien (Related-Eyebrow, Artikel-
   H2-Signaturlinie) wachsen beim Reveal von links. [data-bc-reveal]-Guard ist
   PFLICHT — ohne ihn waeren Linien auf nie-dekorierten Elementen dauerhaft
   unsichtbar (Review-Fund #1). Keine zweite Liniensprache, nur Bestand animiert. */
html.bc-motion .beirat-related-eyebrow[data-bc-reveal]:not(.bc-in)::before,
html.bc-motion .single .entry-content h2[data-bc-reveal]:not(.bc-in)::before {
  transform: scaleX(0);
}
html.bc-motion .beirat-related-eyebrow[data-bc-reveal]::before,
html.bc-motion .single .entry-content h2[data-bc-reveal]::before {
  transform-origin: left center;
  transition: transform var(--bc-dur-slow) var(--bc-ease-signal);
  transition-delay: 120ms;                  /* Linie zeichnet NACH dem Text-Reveal */
}
/* Kategorie-Kicker (immer im Erst-Viewport, nie IO-dekoriert): Linie zeichnet
   einmalig beim Seitenstart — gleiche Mechanik wie die Editorial-Regel (B7). */
html.bc-motion:not([data-motion="calm"]) .beirat-single-kicker::before {
  transform-origin: left center;
  animation: bc-rule-grow var(--bc-dur-slow) var(--bc-ease-signal) 1;
}


/* == 02 · C2 Ring · C3 Links · C4 Karten · C8 Medien ========= */

/* C2: Energie-Ring auf Primaer-/Sekundaer-CTAs. Ring = eigenes Pseudo-Element
   (opacity-Fade), Klick = kurzer Puls. Funken bewusst NUR spectacle (Kap. 00-
   Philosophie: Praezision statt Casino; Charles-GO 2026-07-03). */
html.bc-motion .btn { position: relative; }
/* V3: auch Formular-Submits + Basics-CTA sind Funken-/Effekt-Hosts. */
html.bc-motion :is(.ff-btn-submit, .brk-basics-cta-btn) { position: relative; }
html.bc-motion .btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--bc-glow-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bc-dur-fast) var(--bc-ease-out);
}
html.bc-motion .btn:hover::after,
html.bc-motion .btn:focus-visible::after { opacity: 1; }
@keyframes bc-btn-puls {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1.12); opacity: 0; }
}
html.bc-motion .btn:active::after {
  animation: bc-btn-puls var(--bc-dur-fast) var(--bc-ease-out);
}
/* Funken (Gold-Punkte, selbstentsorgend). V3-Remap: liefen frueher nur auf
   spectacle, cinematic ist jetzt der konservierte v4-spectacle-Stand. */
html.bc-motion:not([data-motion="calm"]) .bc-spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bc-line-gold);
  pointer-events: none;
  animation: bc-spark var(--bc-dur-base) var(--bc-ease-out) forwards;
}
@keyframes bc-spark {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--bc-sx, 20px), var(--bc-sy, -24px)) scale(0.4); opacity: 0; }
}

/* A3-MAX (V3 VOYAGE, Direktive 7 — kehrt das v1-Loop-Verbot fuer das Logo
   bewusst um, datierter Charles-Entscheid 2026-07-03): der Gold-Halo liegt
   jetzt HINTER dem Logo (isolation + z-index:-1 — Root-Cause-Fix: das alte
   ::after malte UEBER das Logo und endete innerhalb der Logo-Box), ist
   groesser (inset -28px) und nutzt das kraeftige Token --bc-glow-logo.
   cinematic: unveraendert EIN Puls pro Session (bc-signal, JS).
   spectacle: dauerhafter Atem (4.8s) + einmaliger Signal-Glitch beim
   Seiteneinstieg (bc-glitch, JS nach der Anflug-Sequenz). Der Dark-invert
   auf dem Logo-img bleibt unberuehrt (kein filter auf dem img). */
html.bc-motion .site-logo { position: relative; isolation: isolate; }
html.bc-motion .site-logo::after {
  content: "";
  position: absolute;
  inset: -28px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--bc-glow-logo) 0%, rgba(181, 144, 78, 0.18) 55%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  pointer-events: none;
}
html.bc-motion .site-logo.bc-signal::after {
  animation: bc-logo-signal 1600ms var(--bc-ease-out) 1;
}
@keyframes bc-logo-signal {
  0% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: 0.45; } 75% { opacity: 1; } 100% { opacity: 0; }
}
/* spectacle: sichtbarer Dauer-Atem — Peak klar wahrnehmbar, Tal nie ganz aus. */
html[data-motion="spectacle"].bc-motion .site-logo::after {
  animation: bc-logo-breath 4800ms ease-in-out infinite;
}
@keyframes bc-logo-breath {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
/* spectacle: Signal-Glitch beim Einstieg (2 kurze Versatz-Impulse, WCAG-konform
   deutlich unter 3 Blitzen/s; JS setzt bc-glitch einmal pro Pageview). */
html[data-motion="spectacle"].bc-motion .site-logo.bc-glitch img {
  animation: bc-logo-glitch 700ms steps(1, end) 1;
}
@keyframes bc-logo-glitch {
  0%   { transform: translateX(0); }
  12%  { transform: translateX(2px); }
  22%  { transform: translateX(-2px); }
  32%  { transform: translateX(0); }
  58%  { transform: translateX(1px); }
  68%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}

/* C4: Karten-Tiefe — Erweiterung des bestehenden Lift-Systems (translateY(-2px)
   + --shadow-lift in beirat.css). Zusatz: hauchduenne Gold-Lichtkante oben.
   Bewusst KEINE zweite transform-Regel (wuerde den Bestand ueberschreiben). */
html.bc-motion .hp-latest-card:hover,
html.bc-motion .hp-hero-card:hover,
html.bc-motion .blog-folder:hover,
html.bc-motion .beirat-404-card:hover,
html.bc-motion .brk-hub-card:hover {
  box-shadow: var(--shadow-lift, 0 10px 24px rgba(28, 20, 22, 0.12)),
              inset 0 1px 0 var(--bc-line-gold);
}

/* C8: Medien-Rahmen (statisch) + einmaliger dezenter Eintritts-Glow (opacity). */
html.bc-motion .entry-content figure { position: relative; }
html.bc-motion .entry-content figure::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-md, 8px);
  /* V3: Token --bc-glow-media — auf spectacle Bordeaux (Gold hat auf den
     hellen Lese-Inseln nur ~1.6:1 und war dort physikalisch unsichtbar). */
  box-shadow: 0 0 24px var(--bc-glow-media, var(--bc-glow-gold));
  opacity: 0;
  pointer-events: none;
}
html.bc-motion:not([data-motion="calm"]) .entry-content figure.bc-in::after {
  animation: bc-media-glow var(--bc-dur-cine) var(--bc-ease-out);
}
@keyframes bc-media-glow {
  0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; }
}


/* == 03 · A1 Raum-Zonen (bc-space) =========================== */

/* motion.js markiert die Raum-Zonen (.hp-hero, .hp-newsletter, .beirat-footer,
   .is-style-bc-raumfenster, Artikel-Kopfband .beirat-post-visual) mit .bc-space
   und haengt den Sternen-Canvas ein.
   isolation: eigener Stacking-Context -> Canvas (z -1) liegt UEBER dem
   Sektions-Hintergrund, aber UNTER jedem Inhalt. */
/* overflow: hidden clippt angeschnittene Wasserzeichen/Canvas-Raender —
   verhindert horizontalen Scroll-Overflow (Hero hat das bereits, die
   anderen Zonen sind geschlossene Dunkel-Panels ohne Aussen-Schatten). */
.bc-space { position: relative; isolation: isolate; overflow: hidden; }
.bc-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Artikel-Kopfband (v2): die dunklen Kategorie-Visuals werden zur Raum-Zone —
   Sterne fliegen UEBER dem Band-Bild (z 1), der Artikel beginnt im All. */
.bc-space--over .bc-stars { z-index: 1; }

/* UNIVERSUM-REISE (v3/v4): Full-Page-Raum hinter dem gesamten Inhalt.
   z-index:-1 ist PFLICHT (v3-Review-P0): fixed ohne z-index malt ueber
   unpositioniertem Text — mit -1 liegt der Canvas hinter ALLEN Inhalten
   und Container-Hintergruenden; sichtbar ist er ueberall dort, wo v4 die
   Flaechen transparent stellt (Deep-Space-Scope unten). Text liegt damit
   strukturell IMMER ueber den Sternen. Formular-Fokus dimmt (bc-dim). */
.bc-universe {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  transition: opacity 400ms var(--bc-ease-out);
}
.bc-universe.bc-dim { opacity: 0.2; }

/* == 03b · DEEP SPACE (v4) =================================== */
/* Charles-Freigabe 2026-07-03: Galaxiefarben fuer die GESAMT-Website; die
   Beirat-Palette bleibt die Sprache der INHALTE. Der Seitenraum wird zur
   Galaxie (Grund + Nebel), die Inhalte schweben als helle Lese-Inseln darin.
   Serverseitig gegated ueber data-motion (kein FOUC, gilt auch ohne JS und
   bei reduced-motion — dort steht das All einfach still). */
html:is([data-motion="cinematic"], [data-motion="spectacle"]) body {
  background-color: var(--bc-space-bg, #120E1A);
  background-image:
    radial-gradient(55% 40% at 12% 8%,  var(--bc-nebula-1) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(45% 35% at 88% 22%, var(--bc-nebula-2) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(60% 45% at 70% 85%, var(--bc-nebula-3) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(40% 30% at 25% 70%, var(--bc-nebula-1) 0%, rgba(0, 0, 0, 0) 70%);
  background-attachment: fixed;
}
/* Content-Kette: Zwischencontainer transparent, die Lese-Insel ist .site-main
   (Beirat-Palette, opak — Lesbarkeit strukturell garantiert). Blog + Archive
   oeffnen den Raum: dort sind die KARTEN die Inseln, das All fliesst durch
   die Zwischenraeume. */
html:is([data-motion="cinematic"], [data-motion="spectacle"]) .content-area {
  background: transparent;
}
html:is([data-motion="cinematic"], [data-motion="spectacle"]) .site-main {
  background-color: var(--bg-base, #FAF8F4);
  border-radius: 14px;
}
html:is([data-motion="cinematic"], [data-motion="spectacle"]) :is(.blog, .archive) .site-main {
  background: transparent;
  border-radius: 0;
}
/* Chrome-Texte, die jetzt auf dem All liegen (Blog/Archiv): Cream statt Dunkel. */
html:is([data-motion="cinematic"], [data-motion="spectacle"]) :is(.blog, .archive) :is(.page-header, .page-header h1, .archive-description, .beirat-archive-kicker, .blog-folders-title, .blog-folders-intro) {
  color: var(--text-on-dark, #EDE7E3);
  background: transparent;
}
html:is([data-motion="cinematic"], [data-motion="spectacle"]) :is(.blog, .archive) .paging-navigation a {
  color: var(--text-on-dark, #EDE7E3);
  border-color: rgba(237, 231, 227, 0.45);
}
/* V3-Politur (Charles «Seitenzahlen kaum sichtbar»): GPs separate-containers
   gibt der Pagination-Box einen HELLEN Grund (--base-3) -> Cream auf Weiss
   war unsichtbar; ausserdem ist die aktive Zahl ein span (kein a). Box
   transparent (Raum offen), alle .page-numbers cream, aktive Zahl Gold. */
html:is([data-motion="cinematic"], [data-motion="spectacle"]) :is(.blog, .archive) .paging-navigation {
  background-color: transparent;
}
html:is([data-motion="cinematic"], [data-motion="spectacle"]) :is(.blog, .archive) .paging-navigation .page-numbers {
  color: var(--text-on-dark, #EDE7E3);
}
html:is([data-motion="cinematic"], [data-motion="spectacle"]) :is(.blog, .archive) .paging-navigation .page-numbers.current {
  color: var(--gold, #B5904E);
  font-weight: 700;
}
/* Homepage-Sektionen liegen ausserhalb von .site-main -> eigene Insel-Baender.
   V3-Politur (Charles «alle Panels mit abgerundeten Ecken»): schwebende
   Inseln wie .site-main — 14px-Radius, Luft zur Galaxie, Haarlinie weg. */
html:is([data-motion="cinematic"], [data-motion="spectacle"]) :is(.hp-rankings, .hp-agenten-teaser, .hp-latest, .hp-current-test) {
  background-color: var(--bg-base, #FAF8F4);
  border-radius: 14px;
  border-bottom: none;
  margin: 2rem 0;
}
/* Briefing-Block als dunkle Insel konsistent abrunden (bc-space clippt via
   overflow:hidden exakt an den runden Ecken). Footer bewusst OHNE Radius
   (full-width-Seitenabschluss). */
html:is([data-motion="cinematic"], [data-motion="spectacle"]) .hp-newsletter {
  border-radius: 14px;
  margin: 2rem 0;
}
/* Front-Page: der leere Page-Container wuerde als leerer heller Kasten
   zwischen den Sektionen haengen -> transparent (Sektionen sind die Inseln). */
html:is([data-motion="cinematic"], [data-motion="spectacle"]) .home .site-main {
  background: transparent;
  border-radius: 0;
}
/* V3-Politur (Charles «leeres Panel nach Hero»): der GP-Loop rendert den
   leeren Seiten-Artikel der statischen Front-Page (article > .inside-article,
   separate-containers-Padding + heller Grund = ~60px toter Kasten). Die
   Front-Page kommt vollstaendig aus Hooks -> ausblenden. */
html:is([data-motion="cinematic"], [data-motion="spectacle"]) .home .site-main > article.page {
  display: none;
}
/* Plugin-Templates (Basics/Rankings/Agenten/Ueber/Akademie) rendern OHNE .site-main —
   ihre Wrapper werden eigene Lese-Inseln (sonst laege Text auf der Galaxie). */
html:is([data-motion="cinematic"], [data-motion="spectacle"]) :is(.brk-basics-wrap, .brk-rankings-wrap, .brk-guide-wrap, .brk-ueber-wrap, .bak-wrap) {
  background-color: var(--bg-base, #FAF8F4);
  border-radius: 14px;
}
/* Sektionen ausserhalb der Inseln (FAQ-Anhang, 404-Karten): eigener Kasten. */
html:is([data-motion="cinematic"], [data-motion="spectacle"]) .beirat-faq {
  background-color: var(--bg-base, #FAF8F4);
  border-radius: 14px;
  border-top: none;
  padding: 2.25rem 24px;
  margin: 2.5rem auto;
}
html:is([data-motion="cinematic"], [data-motion="spectacle"]) .beirat-404 {
  background-color: var(--bg-base, #FAF8F4);
  border-radius: 14px;
  padding: 2.5rem 24px;
  margin: 2rem auto;
  max-width: var(--page-max-width, 1200px);
}
/* Desktop-Header wird Teil des Raums (Mobile-Toggle-Kaskade bleibt unberuehrt). */
@media (min-width: 769px) {
  html:is([data-motion="cinematic"], [data-motion="spectacle"]) .site-header {
    background-color: var(--bc-space-bg, #120E1A);
    border-bottom-color: rgba(237, 231, 227, 0.16);
  }
  html:is([data-motion="cinematic"], [data-motion="spectacle"]) .main-navigation .nav-menu > li > a {
    color: var(--text-on-dark, #EDE7E3);
  }
  html:is([data-motion="cinematic"], [data-motion="spectacle"]) .main-navigation .nav-menu > li > a:hover {
    color: var(--accent-soft, #C7A6AB);
  }
  html:is([data-motion="cinematic"], [data-motion="spectacle"]) .site-logo img {
    filter: invert(0.92) sepia(0.06);
  }
  /* V3-Politur (Charles «Beirat oben im Hell-Modus»): der Site-Title-TEXT
     neben dem Logo blieb GP-dunkel (--contrast #222) auf dem Galaxie-Header
     -> im Light-Schema unsichtbar (1.2:1). Cream, wie die Nav-Links. */
  html:is([data-motion="cinematic"], [data-motion="spectacle"]) .main-title a,
  html:is([data-motion="cinematic"], [data-motion="spectacle"]) .main-title a:hover,
  html:is([data-motion="cinematic"], [data-motion="spectacle"]) .main-title a:focus {
    color: var(--text-on-dark, #EDE7E3);
  }
}
/* Statischer "Nebel" als dezenter Sternenlicht-Hauch. Der Hero ist AUSGENOMMEN
   und bekommt den Nebel als ZUSATZ-Layer — sonst wuerde diese spezifischere
   Regel seinen abgenommenen Bordeaux-Tiefengradienten ersetzen (Review-Fund #2).
   Der zweite Layer unten spiegelt beirat.css:351 (bei Aenderung dort nachziehen). */
html.bc-motion .bc-space:not(.hp-hero) {
  background-image: radial-gradient(90% 60% at 70% 20%,
    rgba(var(--bc-star-rgb), 0.05) 0%, rgba(var(--bc-star-rgb), 0) 60%);
}
html.bc-motion .hp-hero.bc-space {
  background-image:
    radial-gradient(90% 60% at 70% 20%,
      rgba(var(--bc-star-rgb), 0.05) 0%, rgba(var(--bc-star-rgb), 0) 60%),
    radial-gradient(120% 90% at 78% 30%,
      rgba(122, 42, 56, 0.26) 0%, rgba(122, 42, 56, 0) 60%);
}
/* Formular-Fokus-Daempfung (Conversion-Schutz): Ambient tritt zurueck,
   solange in der Zone ein Formular fokussiert ist (Klasse setzt motion.js). */
.bc-space.bc-form-active .bc-stars { opacity: 0.3; transition: opacity var(--bc-dur-base) var(--bc-ease-out); }


/* == 04 · B8 Hero-3D-Instrument ============================== */

/* motion.js ersetzt das flache Hero-Ornament (.hp-hero-compass) durch die
   3-Ebenen-Buehne aus dem Kompass-Sprite. Ohne JS/bei RM bleibt das flache
   Ornament — exakt der abgenommene Ist-Stand. */
html.bc-motion .hp-hero-compass.bc-replaced { display: none; }

.bc-stage {
  position: absolute;
  top: 50%;
  right: -180px;                  /* identische Platzierung wie das Ornament */
  width: 660px;
  height: 660px;
  transform: translateY(-50%);
  perspective: var(--bc-perspective);
  color: var(--gold, #B5904E);
  opacity: var(--bc-instrument-opacity);
  pointer-events: none;
  z-index: 0;
}
/* B8-MAX (V3, Direktive 6): auf spectacle wird das Instrument DER Hero-Star —
   groesser, weniger geclippt (Zentrum + Nordpfeil treten aus der Karten-
   Deckung), der Ring umschliesst die Aufmacher-Karte sichtbar. */
html[data-motion="spectacle"] .bc-stage {
  right: -120px;
  width: 720px;
  height: 720px;
}
/* Lokale Dunkel-Vignette hinter dem Instrument: hebt die Goldlinien vom
   Nebel ab (Umfeld ~15 % dunkler), ::before liegt unter den Ebenen. */
html[data-motion="spectacle"] .bc-stage::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 8, 12, 0.55) 0%, rgba(10, 8, 12, 0.25) 55%, rgba(0, 0, 0, 0) 75%);
}
/* Specular-Lichtstreif: alle 8 s zieht ein schmaler Gold-Schein ueber die
   Rose (transform/opacity-only, lange Ruhephase in den Keyframes). */
html[data-motion="spectacle"].bc-motion .bc-stage::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: linear-gradient(115deg, rgba(0, 0, 0, 0) 42%, rgba(237, 231, 227, 0.22) 50%, rgba(0, 0, 0, 0) 58%);
  opacity: 0;
  transform: translateX(-40%);
  animation: bc-stage-specular 8s var(--bc-ease-glide) infinite;
}
@keyframes bc-stage-specular {
  0%, 78%  { opacity: 0; transform: translateX(-40%); }
  86%      { opacity: 1; }
  94%, 100% { opacity: 0; transform: translateX(40%); }
}
.bc-stage-gimbal {                /* EIN Tilt-Schreiber (rotateX/rotateY via JS) */
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.bc-stage-layer {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.bc-stage-layer svg { width: 100%; height: 100%; display: block; }
.bc-stage-back  { transform: translateZ(var(--bc-z-back)); }
.bc-stage-mid   { transform: translateZ(var(--bc-z-mid)); }
.bc-stage-front { transform: translateZ(var(--bc-z-front)); }
/* Low-Device/Save-Data: geschichtet, aber ohne Dauerlauf (JS setzt bc-static). */
.bc-stage.bc-static .bc-stage-back { animation: none; }

/* Idle-Rotation: nur der Gradmarken-Bezel dreht, ruhig (36s), Startwinkel
   seeded via --bc-b8-rot0 (JS). Laeuft NICHT auf calm (data-motion-Gate). */
@keyframes bc-orbit-idle {
  from { transform: translateZ(var(--bc-z-back)) rotate(var(--bc-b8-rot0, 0deg)); }
  to   { transform: translateZ(var(--bc-z-back)) rotate(calc(var(--bc-b8-rot0, 0deg) + 360deg)); }
}
html[data-motion="cinematic"].bc-motion .bc-stage-back,
html[data-motion="spectacle"].bc-motion .bc-stage-back {
  animation: bc-orbit-idle 36s linear infinite;
}
/* Einmaliges Nord-Einschwingen beim Ankommen (der eine Hero-Moment).
   V3: 1.2 s verzoegert, damit der Moment NACH der Anflug-Sequenz faellt und
   nicht waehrend des Seitenaufbaus verpufft (Verifier-Fund Phase 0). */
@keyframes bc-north-settle {
  0%   { transform: translateZ(var(--bc-z-front)) rotate(-14deg); }
  60%  { transform: translateZ(var(--bc-z-front)) rotate(4deg); }
  100% { transform: translateZ(var(--bc-z-front)) rotate(0deg); }
}
html.bc-motion .bc-stage-front {
  animation: bc-north-settle 800ms var(--bc-ease-out) 1;
  animation-delay: 1.2s;
  animation-fill-mode: backwards;
}


/* == 05 · A4/A6 Kompass-Wasserzeichen + Orbit ================ */

.bc-watermark {
  position: absolute;
  pointer-events: none;
  color: var(--gold, #B5904E);
  opacity: var(--bc-watermark-opacity);
  z-index: -1;                    /* im isolierten bc-space hinter dem Inhalt */
}
/* Dunkle Zonen (A4): gross, rechts angeschnitten, Orbit dreht sehr langsam. */
.bc-watermark--deep { top: 50%; right: -140px; width: 480px; height: 480px; transform: translateY(-50%); }
@keyframes bc-wm-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
html[data-motion="cinematic"].bc-motion .bc-watermark--deep .bc-wm-bezel,
html[data-motion="spectacle"].bc-motion .bc-watermark--deep .bc-wm-bezel {
  transform-origin: 50% 50%;
  animation: bc-wm-orbit 90s linear infinite;
}
/* Helle Flaechen (A6): sehr subtil, statisch, im Dark Mode aus (Kap. 14).
   OHNE Anschnitt (helle Sektionen clippen nicht -> kein Scroll-Overflow).
   isolation setzt motion.js auf dem Host — noetig, damit das z:-1-Wasserzeichen
   VOR dem Sektions-Hintergrund liegt (Review-Fund #5). */
.bc-watermark--light { top: 32px; right: 24px; width: 280px; height: 280px; color: var(--accent-primary, #7A2A38); }
/* V3 A6-MAX: Artikel-Kopf-Rose — halb im Seitenrand, Opacity fest 0.07
   (unter der 8-%-Fliesstext-Grenze, unabhaengig vom watermark-Token). */
.bc-watermark--article {
  top: -40px; right: -80px;
  width: 340px; height: 340px;
  color: var(--accent-primary, #7A2A38);
  opacity: 0.07;
}


/* == 06 · A5 Wissens-Graph-Konstellation (/basics/) ========== */

/* Kanten zeichnen sich beim Eintritt (JS misst Laenge, setzt dasharray/offset). */
html.bc-motion .brk-graph-edge.bc-draw {
  transition: stroke-dashoffset var(--bc-dur-cine) var(--bc-ease-signal);
}
/* D3: erreichte Level "entzuenden" — Gold-Knoten, kraeftigerer Rahmen. */
.bc-lit .brk-graph-node { stroke: var(--gold, #B5904E) !important; stroke-width: 2.5; }
.bc-lit .brk-graph-step { fill: var(--gold, #B5904E) !important; }
@keyframes bc-node-ignite {
  0%   { opacity: 0.2; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}
html.bc-motion .bc-lit.bc-ignite .brk-graph-node { animation: bc-node-ignite var(--bc-dur-cine) var(--bc-ease-out) 1; }


/* == 07 · B4 Sektionsuebergaenge (Licht-Horizont) ============ */

/* Weicher Uebergang hell -> dunkel: ein Licht-Horizont aus der jeweils
   darueberliegenden Flaechenfarbe + Gold-Haarlinie (Muster des Hero-::after).
   Nutzt --bg-base -> funktioniert in Light UND Dark automatisch. */
html.bc-motion:not([data-motion="calm"]) .hp-newsletter,
html.bc-motion:not([data-motion="calm"]) .beirat-footer { position: relative; }
html.bc-motion:not([data-motion="calm"]) .hp-newsletter::before,
html.bc-motion:not([data-motion="calm"]) .beirat-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--bg-base, #FAF8F4) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.12;
  pointer-events: none;
}


/* == 08 · B7 Artikel-Hero-Choreografie ======================= */

/* Editorial-Header-Regel (bestehende ::after-Linie unter dem Header) waechst
   einmalig nach dem Titel-Paint. H1, Meta und Visual-Band bleiben statisch (LCP). */
html.bc-motion:not([data-motion="calm"]) .single .entry-header::after {
  transform-origin: left center;
  animation: bc-rule-grow var(--bc-dur-slow) var(--bc-ease-signal) 1;
}
@keyframes bc-rule-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* == 09 · B3 Scroll-Kompass (Signature) ====================== */

/* Ersatzregel: solange der JS-Scroll-Kompass lebt, ruht der CSS-Balken.
   Faellt JS/Motion aus, bleibt .beirat-progress der Fallback — es gibt zu
   jedem Zeitpunkt genau EINEN Fortschrittsindikator. */
html.bc-motion.bc-has-compass .beirat-progress { display: none; }

.bc-scrollcompass {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 1px solid var(--border, #E5DDD3);
  border-radius: 50%;
  background: var(--bg-elevated, #F1ECE6);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(28, 20, 22, 0.10));
  color: var(--accent-primary, #7A2A38);
  cursor: pointer;
  z-index: 90;                          /* unter Sticky-Chrome (200), ueber Inhalt */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--bc-dur-base) var(--bc-ease-out),
              transform var(--bc-dur-base) var(--bc-ease-out);
  pointer-events: none;
}
.bc-scrollcompass.bc-visible { opacity: 1; transform: none; pointer-events: auto; }
.bc-scrollcompass svg { width: 100%; height: 100%; display: block; }
.bc-scrollcompass .bc-needle-rot { transform-origin: 50% 50%; will-change: transform; }
/* Gold-Fortschrittsring (v2): das Instrument ZEIGT den Fortschritt sichtbar —
   Kreisbogen fuellt sich mit der Lesestrecke (JS setzt stroke-dashoffset). */
.bc-scrollcompass .bc-prog {
  fill: none;
  stroke: var(--gold, #B5904E);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  opacity: 0.9;
}
.bc-scrollcompass:hover, .bc-scrollcompass:focus-visible { color: var(--accent-hover, #5E202C); }
.bc-scrollcompass:focus-visible { outline: 2px solid var(--accent-primary, #7A2A38); outline-offset: 3px; }

/* «Ziel erreicht»: Nadel rastet auf Norden, einmaliger Gold-Puls (D2-Hook). */
.bc-scrollcompass.bc-north { color: var(--gold, #B5904E); }
@keyframes bc-compass-puls {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
html.bc-motion:not([data-motion="calm"]) .bc-scrollcompass.bc-north { animation: bc-compass-puls 700ms var(--bc-ease-out) 1; }

/* Mobile-Variante: schmale obere Fortschrittslinie + wandernder Kompass-Punkt
   (nicht interaktiv, rein dekorativ; ersetzt .beirat-progress 1:1 an Ort). */
.bc-scrolltrack {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 200;
  pointer-events: none;
  background: transparent;
}
.bc-scrolltrack-fill {
  height: 100%;
  background: var(--accent-primary, #7A2A38);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}
.bc-scrolltrack-dot {
  position: absolute;
  top: -3px;
  left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold, #B5904E);
  transform: translateX(-4px);
  will-change: transform;
}
.bc-scrollcompass, .bc-scrolltrack { display: none; }         /* JS blendet passend ein */
html.bc-motion .bc-scrollcompass { display: block; }
@media (max-width: 767px) {
  html.bc-motion .bc-scrollcompass { display: none; }
  html.bc-motion .bc-scrolltrack { display: block; }
}


/* == 10 · C1 Sweep · C6 Shimmer · C7 TOC-Marker ============== */

/* C1: Licht-Sweep ueber die Summary beim Oeffnen (alle drei details-Familien).
   CSS-only am [open]-Zustand — feuert nur auf direkte Nutzeraktion. */
html.bc-motion details.beirat-faq-item > summary,
html.bc-motion details.brk-spoke-adv > summary,
html.bc-motion details.brk-guide-adv > summary {
  position: relative;
  overflow: hidden;
}
html.bc-motion:not([data-motion="calm"]) details.beirat-faq-item[open] > summary::before,
html.bc-motion:not([data-motion="calm"]) details.brk-spoke-adv[open] > summary::before,
html.bc-motion:not([data-motion="calm"]) details.brk-guide-adv[open] > summary::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0) 0%, var(--bc-glow-gold) 50%, rgba(0, 0, 0, 0) 100%);
  transform: translateX(-120%);
  animation: bc-sweep var(--bc-dur-base) var(--bc-ease-out) 1 forwards;
  pointer-events: none;
}
@keyframes bc-sweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(320%); }
}

/* C6: merkpunkt — einmaliger Gold-Shimmer entlang der bestehenden Gold-Kante. */
html.bc-motion .brk-spoke-merkpunkt { position: relative; }
html.bc-motion .brk-spoke-merkpunkt::after {
  content: "";
  position: absolute;
  left: -3px; top: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(var(--bc-star-rgb), 0.9) 50%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  pointer-events: none;
}
html.bc-motion:not([data-motion="calm"]) .brk-spoke-merkpunkt.bc-in::after {
  animation: bc-shimmer var(--bc-dur-cine) var(--bc-ease-glide) 1;
}
@keyframes bc-shimmer {
  0%   { opacity: 0; transform: translateY(-60%); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(60%); }
}

/* C7: aktiver Abschnitt im Inhaltsverzeichnis (ez-toc) — Gold-Punkt vor dem
   aktiven Eintrag. Markierung laeuft auch bei reduced-motion (nur ohne Transition). */
#ez-toc-container a.bc-current {
  color: var(--accent-primary, #7A2A38);
  font-weight: 600;
}
#ez-toc-container a.bc-current::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--gold, #B5904E);
  vertical-align: 0.08em;
}


/* == 11 · D1-D4 Rewards ====================================== */

/* Konstellations-Grids (v2, «Raum auch auf hellen Flaechen»): Karten-Gruppen
   und Lesefluss-Bereiche site-weit erhalten ein sehr dezentes Gold-Sternfeld
   als Hintergrund — statisch, 0 Laufzeitkosten, im calm-Modus aus. */
html.bc-motion:not([data-motion="calm"]) :is(.hp-latest-grid, .brk-levels, .beirat-404-grid, .blog .site-main, .archive .site-main, .nl-bullets, .brk-spoke-lessons) {
  /* V3: Punktgroesse skaliert per Token (spectacle 1.8x — 1.1-1.6px waren
     unter der Wahrnehmungsschwelle, Root-Cause-Befund Phase 0). */
  background-image:
    radial-gradient(calc(1.6px * var(--bc-dot-scale, 1)) calc(1.6px * var(--bc-dot-scale, 1)) at 8% 12%,  var(--bc-line-gold) 50%, rgba(0, 0, 0, 0) 51%),
    radial-gradient(calc(1.2px * var(--bc-dot-scale, 1)) calc(1.2px * var(--bc-dot-scale, 1)) at 88% 8%,  var(--bc-glow-gold) 50%, rgba(0, 0, 0, 0) 51%),
    radial-gradient(calc(1.4px * var(--bc-dot-scale, 1)) calc(1.4px * var(--bc-dot-scale, 1)) at 72% 38%, var(--bc-glow-gold) 50%, rgba(0, 0, 0, 0) 51%),
    radial-gradient(calc(1.1px * var(--bc-dot-scale, 1)) calc(1.1px * var(--bc-dot-scale, 1)) at 22% 62%, var(--bc-glow-gold) 50%, rgba(0, 0, 0, 0) 51%),
    radial-gradient(calc(1.5px * var(--bc-dot-scale, 1)) calc(1.5px * var(--bc-dot-scale, 1)) at 94% 78%, var(--bc-line-gold) 50%, rgba(0, 0, 0, 0) 51%),
    radial-gradient(calc(1.2px * var(--bc-dot-scale, 1)) calc(1.2px * var(--bc-dot-scale, 1)) at 45% 92%, var(--bc-glow-gold) 50%, rgba(0, 0, 0, 0) 51%);
  background-repeat: no-repeat;
}

/* D2-Mini-Konstellation lebt ueber der Weiterlesen-Sektion. Doppel-Klasse
   noetig: die .bc-constellation-Basisregel (inset:-70px) steht spaeter in der
   Datei und wuerde eine gleich-spezifische Regel ueberschreiben. */
html.bc-motion .beirat-related { position: relative; }
.bc-constellation.bc-constellation--mini {
  inset: auto;
  top: -18px;
  right: 8px;
  bottom: auto;
  left: auto;
  width: 220px;
  height: 80px;
}

/* D1 (/bestaetigt/): Konstellation zeichnet sich um das Bestaetigungs-Zeichen.
   Markup injiziert motion.js (SVG mit Linien + Sternen aus dem Sprite). */
.bc-constellation {
  position: absolute;
  inset: -70px;
  pointer-events: none;
  color: var(--gold, #B5904E);
}
.bc-constellation line {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.55;
}
html.bc-motion .bc-constellation line.bc-draw {
  transition: stroke-dashoffset var(--bc-dur-cine) var(--bc-ease-signal);
}
.bc-constellation .bc-c-star { opacity: 0; }
html.bc-motion .bc-constellation .bc-c-star {
  transition: opacity var(--bc-dur-base) var(--bc-ease-out);
  transition-delay: var(--bc-delay, 0ms);
}
html.bc-motion .bc-constellation.bc-in .bc-c-star { opacity: 1; }
.nl-confirmed { position: relative; }

/* D3 (Level-Abschluss auf einem Spoke): die Forward-Nav-Karte erhaelt einen
   einmaligen, ruhigen Gold-Rahmen-Moment — «Etappe kartiert» (Review-Fund #6:
   vorher war der D3-Gewinner visuell ein No-op und verbrauchte nur das Gate). */
html.bc-motion .bc-level-done { position: relative; }
html.bc-motion .bc-level-done::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--bc-line-gold);
  border-radius: var(--radius-md, 8px);
  opacity: 0;
  pointer-events: none;
  animation: bc-level-glow var(--bc-dur-cine) var(--bc-ease-out) 1;
}
@keyframes bc-level-glow {
  0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; }
}

/* D4 (404): die Kompass-Marke sucht kurz die Richtung und rastet ein. */
@keyframes bc-seek {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(-24deg); }
  65%  { transform: rotate(14deg); }
  100% { transform: rotate(0deg); }
}
html.bc-motion .beirat-404-mark { animation: bc-seek 1600ms var(--bc-ease-glide) 1; transform-origin: 50% 50%; }


/* == 12 · B5 View Transitions ================================ */

/* Die at-rule (@view-transition) druckt der Loader nur auf cinematic+.
   v3: «Durchflug»-Wechsel — die alte Seite zieht minimal auf dich zu, die
   neue kommt aus der Tiefe (Zoom 1.5-3 %, kein fliegendes Element). */
::view-transition-old(root) {
  animation: bc-vt-out 320ms var(--bc-ease-glide) both;
}
::view-transition-new(root) {
  animation: bc-vt-in 320ms var(--bc-ease-glide) both;
}
@keyframes bc-vt-out {
  to { opacity: 0; transform: scale(1.03); }
}
@keyframes bc-vt-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(*) {
    animation: none !important;
  }
}


/* == 13 · Gutenberg-Block-Styles (5) ========================= */

/* «Raumfenster» (Gruppe): dunkles Panorama-Band im Artikel; motion.js behandelt
   es als bc-space (Sterne). Text bleibt AA (Cream auf Wein-Dunkel). */
.is-style-bc-raumfenster {
  background: var(--bg-deep, #1C1416);
  color: var(--text-on-dark, #EDE7E3);
  border-radius: var(--radius-md, 8px);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
  overflow: hidden;
}
.is-style-bc-raumfenster :is(h2, h3, h4) { color: var(--text-on-dark, #EDE7E3); }
.is-style-bc-raumfenster a { color: var(--accent-soft, #C7A6AB); }

/* «Konstellations-Karte» (Gruppe): elevated Panel mit Sternenpunkt-Ecke. */
.is-style-bc-konstellation {
  background: var(--bg-elevated, #F1ECE6);
  border: 1px solid var(--border, #E5DDD3);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(28, 20, 22, 0.05));
  padding: clamp(1.25rem, 3vw, 2rem);
  background-image:
    radial-gradient(2px 2px at 88% 14%, var(--bc-line-gold) 50%, rgba(0, 0, 0, 0) 51%),
    radial-gradient(1.5px 1.5px at 94% 26%, var(--bc-glow-gold) 50%, rgba(0, 0, 0, 0) 51%),
    radial-gradient(1.5px 1.5px at 82% 30%, var(--bc-glow-gold) 50%, rgba(0, 0, 0, 0) 51%);
  background-repeat: no-repeat;
}

/* «Merksatz Gold» (Absatz): ruhige Gold-Kante, Lora-Stimme. */
.is-style-bc-merksatz {
  border-left: 3px solid var(--gold, #B5904E);
  background: var(--bg-elevated, #F1ECE6);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  padding: 1rem 1.25rem;
  font-family: var(--font-serif-display, Lora, Georgia, serif);
  font-size: 1.1em;
}

/* «Kompass-Punkte» (Liste): Gold-Rauten statt Standard-Punkte. */
ul.is-style-bc-kompass-punkte { list-style: none; padding-left: 0.25rem; }
ul.is-style-bc-kompass-punkte > li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
ul.is-style-bc-kompass-punkte > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px; height: 8px;
  background: var(--gold, #B5904E);
  transform: rotate(45deg);
  border-radius: 1px;
}

/* «Zitat Signal» (Zitat): Signal-Linie oben, grosse Serif-Stimme. */
.is-style-bc-zitat-signal {
  border-left: none !important;
  border-top: 2px solid var(--gold, #B5904E);
  padding: 1.25rem 0 0;
  margin-left: 0;
  font-family: var(--font-serif-display, Lora, Georgia, serif);
  font-size: 1.2em;
  line-height: 1.55;
}
.is-style-bc-zitat-signal cite { font-family: var(--font-ui, Inter, sans-serif); font-size: 0.8em; color: var(--text-secondary, #5E544E); }


/* == 14 · Dark Mode ========================================== */

@media (prefers-color-scheme: dark) {
  /* Der Raum bleibt verknappt: Ambient NUR in bc-space, helle-Flaechen-
     Wasserzeichen (A6) entfallen — base-Flaechen bleiben die Ruhe-Differenz. */
  .bc-watermark--light { display: none; }
  /* Scroll-Kompass auf dunkler Elevated-Flaeche (Tokens remappen automatisch,
     nur der Gold-Puls bleibt Gold — modus-stabil). */
}


/* == 15 · Reduced Motion (Parity-Garantie) =================== */

/* Der globale Kill in beirat.css nullt bereits alle Dauern. Hier zusaetzlich:
   Endzustaende erzwingen + bewegliche Chrome-Elemente entfernen, damit die
   Site zu 100 % dem statischen Ist-Stand entspricht. motion.js initialisiert
   bei RM ohnehin nur Funktions-Pfade (TOC-Markierung, Lernfortschritt). */
@media (prefers-reduced-motion: reduce) {
  html.bc-motion [data-bc-reveal] { opacity: 1 !important; transform: none !important; }
  .bc-scrollcompass, .bc-scrolltrack { display: none !important; }
  /* v4 (Charles: Nicht-Ziel 12 aufgehoben): das Universum bleibt bei
     reduced-motion SICHTBAR, steht aber still (JS zeichnet genau 1 Frame). */
  .bc-stage-back, .bc-stage-front, .bc-stage-mid { animation: none !important; }
  .bc-stage-gimbal { transform: none !important; }
  .beirat-404-mark, .brk-spoke-merkpunkt::after, .entry-content figure::after { animation: none !important; }
  html.bc-motion details.beirat-faq-item[open] > summary::before,
  html.bc-motion details.brk-spoke-adv[open] > summary::before,
  html.bc-motion details.brk-guide-adv[open] > summary::before { animation: none !important; opacity: 0; }
  .bc-constellation line { stroke-dashoffset: 0 !important; }
  .bc-constellation .bc-c-star { opacity: 1 !important; }
}


/* == 16 · Mobile ============================================= */

@media (max-width: 767px) {
  :root {
    --bc-stagger: 40ms;             /* kuerzere Staffelung auf kleinen Screens */
    --bc-reveal-distance: 10px;
  }
  .bc-watermark { display: none; }  /* Wasserzeichen brauchen Flaeche */
  html.bc-motion .btn:active { transform: scale(0.97); }  /* Tap-Feedback statt Hovering */

  /* B8-MAX mobil (V3, Direktive 6 «Mobile >= 260px sichtbar»): motion.js baut
     die 3-Ebenen-Buehne auf spectacle auch mobil (Scroll-Tilt statt Cursor).
     Position analog dem flachen Ornament, aber sichtbar statt opacity 0.11. */
  html[data-motion="spectacle"] .bc-stage {
    top: -110px;
    right: -80px;
    width: 360px;
    height: 360px;
    transform: none;
    opacity: 0.5;
  }
  html[data-motion="spectacle"].bc-motion :is(.btn-primary, .btn-secondary, .ff-btn-submit, .wp-block-button__link):active {
    transform: scale(0.97);         /* Tap-Puls-Aequivalent (C2-MAX Touch) */
  }
}


/* == 17 · V3 C2-MAX: Space-Hover fuer jeden Button (nur spectacle) == */
/* Direktive 9: JEDER Button erhaelt einen Space-Hover-Spezialeffekt.
   Systematik (nicht zufaellig): Primaer-CTAs + Formular-Submits =
   Triebwerksschub · Sekundaer = Orbit-Funke · Text-/Lesen-Links =
   Kometenschweif · Nav + Pagination = Stern-Aufleuchten.
   Tastatur (:focus-visible) erhaelt jeweils denselben Effekt. */

/* -- 17a Triebwerksschub: Gold-Glow-Ring + Schub-Streaks + Lift ------- */
html[data-motion="spectacle"].bc-motion :is(.btn-primary, .ff-btn-submit, .brk-basics-cta-btn) {
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease,
              transform var(--bc-dur-fast) var(--bc-ease-out),
              box-shadow var(--bc-dur-fast) var(--bc-ease-out);
}
html[data-motion="spectacle"].bc-motion :is(.btn-primary, .ff-btn-submit, .brk-basics-cta-btn):hover,
html[data-motion="spectacle"].bc-motion :is(.btn-primary, .ff-btn-submit, .brk-basics-cta-btn):focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--bc-line-gold), 0 6px 24px rgba(181, 144, 78, 0.5);
}
html[data-motion="spectacle"].bc-motion :is(.btn-primary, .ff-btn-submit, .brk-basics-cta-btn)::before {
  content: "";
  position: absolute;
  left: 20%; right: 20%;
  bottom: -13px;
  height: 13px;
  background:
    linear-gradient(180deg, var(--bc-line-gold), rgba(0, 0, 0, 0)) no-repeat 10% 0 / 2px 100%,
    linear-gradient(180deg, var(--bc-glow-gold), rgba(0, 0, 0, 0)) no-repeat 50% 0 / 2px 75%,
    linear-gradient(180deg, var(--bc-line-gold), rgba(0, 0, 0, 0)) no-repeat 90% 0 / 2px 100%;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity var(--bc-dur-fast) var(--bc-ease-out),
              transform var(--bc-dur-fast) var(--bc-ease-out);
  pointer-events: none;
}
html[data-motion="spectacle"].bc-motion :is(.btn-primary, .ff-btn-submit, .brk-basics-cta-btn):hover::before,
html[data-motion="spectacle"].bc-motion :is(.btn-primary, .ff-btn-submit, .brk-basics-cta-btn):focus-visible::before {
  opacity: 1;
  transform: translateY(0);
  animation: bc-thrust 700ms ease-in-out infinite;
}
@keyframes bc-thrust {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(1.5px) scaleY(1.3); }
}
/* Der calm-Energie-Ring (.btn::after) wird auf Primaer golden: */
html[data-motion="spectacle"].bc-motion .btn-primary::after { border-color: var(--bc-line-gold); }

/* -- 17b Orbit-Funke: ein Gold-Funke umkreist den Rahmen -------------- */
@property --bc-orbit {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
html[data-motion="spectacle"].bc-motion :is(.btn-secondary, .wp-block-button__link) { position: relative; }
html[data-motion="spectacle"].bc-motion :is(.btn-secondary, .wp-block-button__link)::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--bc-orbit),
    rgba(0, 0, 0, 0) 0deg, rgba(0, 0, 0, 0) 296deg,
    var(--bc-line-gold) 330deg, rgba(237, 231, 227, 0.95) 348deg, rgba(0, 0, 0, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--bc-dur-fast) var(--bc-ease-out);
  pointer-events: none;
}
html[data-motion="spectacle"].bc-motion :is(.btn-secondary, .wp-block-button__link):hover::before,
html[data-motion="spectacle"].bc-motion :is(.btn-secondary, .wp-block-button__link):focus-visible::before {
  opacity: 1;
  animation: bc-orbit-spin 1.3s linear infinite;
}
@keyframes bc-orbit-spin {
  to { --bc-orbit: 360deg; }
}

/* -- 17c Kometenschweif: Unterstreichung zieht mit Schweif durch -------
   Review-P2-Fix: die «Lesen»-Labels der Karten sind SPANS (.hp-hero-card-
   more, .hp-latest-more) — der Schweif triggert dort auf den Karten-Hover,
   nicht auf ein eigenes :hover des Spans. */
html[data-motion="spectacle"].bc-motion :is(.read-more, .beirat-readmore, .hp-rankings-col-link, .brk-spoke-next a, .hp-hero-trust-link, .hp-hero-card-more, .hp-latest-more) {
  background-image: linear-gradient(90deg,
    rgba(181, 144, 78, 0) 0%, var(--bc-line-gold) 55%, rgba(237, 231, 227, 0.95) 100%);
  background-repeat: no-repeat;
  background-position: left calc(100% - 1px);
  background-size: 0% 2px;
  transition: background-size var(--bc-dur-base) var(--bc-ease-out);
}
html[data-motion="spectacle"].bc-motion :is(.read-more, .beirat-readmore, .hp-rankings-col-link, .brk-spoke-next a, .hp-hero-trust-link):hover,
html[data-motion="spectacle"].bc-motion :is(.read-more, .beirat-readmore, .hp-rankings-col-link, .brk-spoke-next a, .hp-hero-trust-link):focus-visible,
html[data-motion="spectacle"].bc-motion .hp-hero-card:hover .hp-hero-card-more,
html[data-motion="spectacle"].bc-motion .hp-hero-card:focus-visible .hp-hero-card-more,
html[data-motion="spectacle"].bc-motion .hp-latest-card:hover .hp-latest-more,
html[data-motion="spectacle"].bc-motion .hp-latest-card:focus-visible .hp-latest-more {
  background-size: 100% 2px;
}

/* -- 17d Stern-Aufleuchten: Nav-Punkte + Pagination -------------------- */
html[data-motion="spectacle"].bc-motion .main-navigation .menu > li > a,
html[data-motion="spectacle"].bc-motion a.page-numbers,
html[data-motion="spectacle"].bc-motion .paging-navigation :is(.nav-previous, .nav-next) a {
  position: relative;
}
html[data-motion="spectacle"].bc-motion .main-navigation .menu > li > a::after,
html[data-motion="spectacle"].bc-motion a.page-numbers::after,
html[data-motion="spectacle"].bc-motion .paging-navigation :is(.nav-previous, .nav-next) a::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 4px;
  width: 8px; height: 8px;
  background: var(--gold, #B5904E);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px var(--bc-glow-gold));
  transform: scale(0);
  opacity: 0;
  transition: transform var(--bc-dur-fast) var(--bc-ease-out),
              opacity var(--bc-dur-fast) var(--bc-ease-out);
  pointer-events: none;
}
html[data-motion="spectacle"].bc-motion .main-navigation .menu > li:hover > a::after,
html[data-motion="spectacle"].bc-motion .main-navigation .menu > li > a:focus-visible::after,
html[data-motion="spectacle"].bc-motion .main-navigation .menu > li.current-menu-item > a::after,
html[data-motion="spectacle"].bc-motion a.page-numbers:hover::after,
html[data-motion="spectacle"].bc-motion a.page-numbers:focus-visible::after,
html[data-motion="spectacle"].bc-motion .paging-navigation :is(.nav-previous, .nav-next) a:hover::after,
html[data-motion="spectacle"].bc-motion .paging-navigation :is(.nav-previous, .nav-next) a:focus-visible::after {
  transform: scale(1);
  opacity: 1;
}


/* == 18 · V3 Kompassnadel-Cursor (nur spectacle + Desktop) ==== */
/* Direktive 11: edle goldene Kompassnadel als Cursor. Nur pointer:fine;
   Eingabefelder behalten den System-Text-Cursor (Bedienbarkeit). Faellt
   das SVG aus, greift der System-Fallback (auto/pointer) — nie «kein Cursor». */
@media (pointer: fine) {
  html[data-motion="spectacle"] body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpolygon points='3 3,15.4 10.6,10.6 15.4' fill='%23B5904E' stroke='%23EDE7E3' stroke-width='0.7'/%3E%3Cpolygon points='23 23,10.6 15.4,15.4 10.6' fill='%237A2A38' stroke='%23EDE7E3' stroke-width='0.7'/%3E%3Ccircle cx='13' cy='13' r='1.7' fill='%23EDE7E3' stroke='%23B5904E' stroke-width='0.6'/%3E%3C/svg%3E") 3 3, auto;
  }
  html[data-motion="spectacle"] :is(a, button, [role="button"], .btn, summary, label, select, input[type="submit"], input[type="checkbox"], input[type="radio"], .page-numbers, .bc-scrollcompass) {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='13' cy='13' r='10.5' fill='none' stroke='%23B5904E' stroke-width='1.2' opacity='0.85'/%3E%3Cpolygon points='3 3,15.4 10.6,10.6 15.4' fill='%23B5904E' stroke='%23EDE7E3' stroke-width='0.7'/%3E%3Cpolygon points='23 23,10.6 15.4,15.4 10.6' fill='%237A2A38' stroke='%23EDE7E3' stroke-width='0.7'/%3E%3Ccircle cx='13' cy='13' r='1.7' fill='%23EDE7E3' stroke='%23B5904E' stroke-width='0.6'/%3E%3C/svg%3E") 3 3, pointer;
  }
  html[data-motion="spectacle"] :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea) {
    cursor: text;
  }
  /* Review-P2-Fix: Fliesstext behaelt den I-Beam (Selektier-Affordanz) —
     die Nadel gehoert dem Chrome (Nav, Karten, Buttons, Raum). */
  html[data-motion="spectacle"] .entry-content :is(p, li, blockquote, figcaption, td) {
    cursor: text;
  }
}


/* == 19 · V3 K1/H1: Kosmos-Nebel-Drift + Himmelskoerper ====== */
/* K1 (Direktive 3): zusaetzliche Kosmos-Wolken (Tiefblau/Tuerkis/Magenta/
   Glut) als eigene fixe Schicht HINTER allem — compositor-only Drift
   (transform, Periode 90 s), Alphas 12-22 %. cinematic behaelt exakt den
   v4-Nebel (body-Background, unangetastet). Serverseitig gegated ->
   kein FOUC; ohne bc-motion (No-JS/RM) steht die Schicht still. */
html[data-motion="spectacle"] body::before {
  content: "";
  position: fixed;
  inset: -10%;                    /* Ueberhang: Drift zeigt nie einen Rand
                                     (V3-Politur: -18% -> -10%, kleinerer
                                     Compositor-Layer, weniger GPU-Speicher) */
  z-index: -2;                    /* hinter dem Universum-Canvas (-1) */
  pointer-events: none;
  background-image:
    radial-gradient(42% 34% at 18% 30%, var(--bc-cosmos-blue) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(38% 30% at 82% 14%, var(--bc-cosmos-teal) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(44% 36% at 74% 78%, var(--bc-cosmos-magenta) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(30% 26% at 30% 86%, var(--bc-cosmos-ember) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(50% 40% at 50% 50%, var(--bc-cosmos-violet) 0%, rgba(0, 0, 0, 0) 74%);
}
html[data-motion="spectacle"].bc-motion body::before {
  animation: bc-nebula-drift 90s ease-in-out infinite alternate;
}
@keyframes bc-nebula-drift {
  from { transform: translate3d(-1.8%, -1.2%, 0) scale(1); }
  to   { transform: translate3d(1.8%, 1.2%, 0) scale(1.06); }
}

/* H1: Himmelskoerper-Canvases (cosmos.js). Deep-Schicht = fixed hinter dem
   Sternen-Universum (DOM frueher = dahinter gemalt); Zonen-Galaxie = absolute
   im bc-space (ueber den Zonen-Sternen, unter jedem Inhalt). */
/* Politur-7: die Deep-Himmelskoerper zeichnen IM Universum-Canvas
   (bcEngine.universeLayer) — .bc-cosmos-deep existiert nicht mehr;
   die Formular-Dimmung des Universums (.bc-universe.bc-dim) dimmt die
   Objekte automatisch mit. */
.bc-cosmos-zone {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* Politur-8: Deep-Galaxie als eigenes Compositor-Element — Rotation per
   CSS (Spin-Klasse unten), Parallaxe als translate3d vom JS. */
.bc-deep-galaxy {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.bc-deep-galaxy.bc-dim { opacity: 0.2; transition: opacity 400ms var(--bc-ease-out); }
/* Zonen-Galaxie: Rotation als Compositor-CSS (statisches Canvas dreht um
   sein Galaxie-Zentrum via transform-origin, JS-frei). Gate: nur bei
   aktiver Engine, nie bei reduced-motion (bc-motion fehlt dort). */
html.bc-motion:not([data-motion="calm"]) .bc-cosmos-zone--spin {
  animation: bc-cosmos-spin 160s linear infinite;
  will-change: transform;
}
@keyframes bc-cosmos-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* == 20 · V3 B1-MAX: Zuendungs-Flare + Reveal-Glow-Kante ===== */
/* Direktive 10: der /basics/-Zuendungs-Moment (bc-node-ignite) wird
   site-weit generalisiert. Der Flare ist ein reines Overlay-Element
   (JS injiziert span.bc-flare, selbstentsorgend) — NIE opacity:0 auf dem
   Inhalt selbst, LCP unberuehrt. Gate-frei (Charles-Entscheid Frage 3/4). */
.bc-flare {
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-md, 8px);
  pointer-events: none;
  background: radial-gradient(60% 120% at 50% 50%, var(--bc-glow-gold) 0%, rgba(181, 144, 78, 0.12) 55%, rgba(0, 0, 0, 0) 78%);
  opacity: 0;
  z-index: 2;
}
html[data-motion="spectacle"].bc-motion .bc-flare {
  animation: bc-ignite-flare 650ms var(--bc-ease-out) 1 forwards;
}
@keyframes bc-ignite-flare {
  0%   { opacity: 0; transform: scaleX(0.6); }
  35%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.04); }
}
/* Politur-5: die fruehere Gold-Glow-Kante auf JEDEM Reveal (box-shadow-
   Animation = Paint statt Compositor) war eine Jank-Quelle beim ersten
   Scroll nach dem Load — GESTRICHEN. Der Zuendungs-Flare oben (Overlay,
   transform/opacity) bleibt der Reveal-Akzent. */


/* == 21 · V3 W1 Warp-Overlay (nur spectacle, JS-gebaut) ====== */
/* Fixes Cockpit-Overlay ueber allem; pointer-events:none — es faengt NIE
   Eingaben ab, die Navigation haengt nie am Overlay (Failsafe-Vertrag). */
.bc-warp {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
}
.bc-warp canvas { width: 100%; height: 100%; display: block; }
.bc-warp.bc-warp-arrive { animation: bc-warp-arrive-fade 520ms var(--bc-ease-out) 1 forwards; }
@keyframes bc-warp-arrive-fade {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-warp { display: none !important; }         /* doppelter Boden zur JS-Sperre */
}