/* ==========================================================================
   Startseite – Scroll-Story (index.php)
   --------------------------------------------------------------------------
   Der filmische Einstieg der Startseite: Video-Scrubbing, Text-Choreografie,
   Ladeschirm. Alle Flächen und Farben kommen aus bre-core.css; über dem Video
   ist die Schrift immer hell, deshalb stehen hier bewusst weiße Werte.
   Die übrigen Abschnitte der Startseite nutzen die Core-Komponenten.
   ========================================================================== */

.bre-cinematic-home {
  /* Über dem Video: hell auf Schwarz, unabhängig vom Theme */
  --cn-night: var(--night);
  --cn-blue: #7ec8f0;
  --cn-blue-soft: #7ec8f0;
  --cn-surface: var(--paper);
  --cn-ink: var(--ink);
  --cn-ink-2: var(--ink-2);
  --cn-ink-3: var(--ink-3);

  --cn-ease: var(--ease);
  --cn-ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --cn-shell: var(--shell);
  --cn-gap: clamp(64px, 9vw, 148px);

  --cn-track: 5;
  --cn-overlap: 34svh;

  --cn-p: 0;
  --cn-exit: 0;

  position: relative;
  isolation: isolate;
  display: block;
}

/* Horizontaler Overflow, ohne position:sticky zu zerstoeren.
   overflow-x: clip erzeugt — anders als hidden — keinen Scroll-Container. */
html.bre-cinematic-page body {
  overflow-x: clip;
}

/* Auch die Grundflaeche der Seite folgt den zwei Farben — das dunkle Theme
   setzt hier sonst einen leicht abweichenden Ton per !important. */
html.bre-cinematic-page body {
  background: var(--paper);
}

.bre-cinematic-home *,
.bre-cinematic-home *::before,
.bre-cinematic-home *::after {
  box-sizing: border-box;
}

.bre-cinematic-shell {
  width: var(--cn-shell);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   1b. Ladeschirm
   Liegt ausserhalb von .bre-cinematic-home, arbeitet daher mit eigenen
   Werten statt mit den Tokens — und nutzt dieselben zwei Flaechenfarben.
   -------------------------------------------------------------------------- */

.bre-cinematic-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: var(--paper);
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

.bre-cinematic-loader[hidden] {
  display: none;
}

html[data-theme="dark"] .bre-cinematic-loader {
  background: var(--night);
}

.bre-cinematic-loader[data-done] {
  opacity: 0;
  pointer-events: none;
}

/* Scrollsperre ausschliesslich waehrend der Ladeschirm sichtbar ist.
   Das JavaScript hebt sie garantiert wieder auf, auch im Fehlerfall. */
html.bre-cinematic-loading,
html.bre-cinematic-loading body,
html.bre-cinematic-navopen,
html.bre-cinematic-navopen body {
  overflow: hidden;
}

.bre-cinematic-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 4vh, 40px);
  padding: 24px;
}

.bre-cinematic-loader-inner img {
  width: clamp(96px, 11vw, 132px);
  height: auto;
}

.bre-cinematic-loader-track {
  position: relative;
  width: min(220px, 48vw);
  height: 2px;
  overflow: hidden;
  background: var(--line);
}

html[data-theme="dark"] .bre-cinematic-loader-track {
  background: rgba(255, 255, 255, 0.18);
}

.bre-cinematic-loader-track > span {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s linear;
}

.bre-cinematic-loader-pct {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--ink-3);
}

html[data-theme="dark"] .bre-cinematic-loader-pct {
  color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .bre-cinematic-loader,
  .bre-cinematic-loader-track > span {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   2. Typografie-Bausteine
   -------------------------------------------------------------------------- */

.bre-cinematic-home h1,
.bre-cinematic-home h2,
.bre-cinematic-home h3,
.bre-cinematic-home .bre-cinematic-headline,
.bre-cinematic-home .bre-cinematic-display {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.bre-cinematic-kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cn-blue);
}

.bre-cinematic-home .bre-cinematic-lead {
  font-size: clamp(16px, 1.32vw, 19px);
  line-height: 1.65;
  color: var(--cn-ink-2) !important;
  margin: 0;
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   3. Scroll-Story — statische Basis (kein JS / reduced motion / kein Codec)
   -------------------------------------------------------------------------- */

.bre-cinematic-story {
  position: relative;
  background: var(--cn-night);
  color: #fff;
}

.bre-cinematic-stage {
  position: relative;
  min-height: min(86svh, 760px);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--cn-night);
}

.bre-cinematic-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--cn-night);
}

.bre-cinematic-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  opacity: 1;
}

.bre-cinematic-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  opacity: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

/* Filmische Abdunklung — haelt Typo lesbar, ohne das Bild zuzukleistern */
.bre-cinematic-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(5, 9, 15, 0.62) 0%,
    rgba(5, 9, 15, 0.16) 26%,
    rgba(5, 9, 15, 0) 48%,
    rgba(5, 9, 15, 0.22) 78%,
    rgba(5, 9, 15, 0.66) 100%
  );
}

.bre-cinematic-vignette {
  display: none;
}

.bre-cinematic-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    116% 92% at 50% 46%,
    rgba(5, 9, 15, 0) 42%,
    rgba(5, 9, 15, 0.34) 78%,
    rgba(5, 9, 15, 0.72) 100%
  );
}

.bre-cinematic-copy {
  position: relative;
  z-index: 4;
  width: var(--cn-shell);
  margin-inline: auto;
  padding: clamp(72px, 12vh, 140px) 0;
}

.bre-cinematic-beat {
  --cn-a: 1;
  max-width: min(100%, 1120px);
}

/* Über dem Video keine Silbentrennung und kein Zerlegen von Wörtern.
   Die Zeilenlänge begrenzt das jeweilige Textelement selbst (ch bezieht
   sich damit auf dessen eigene Schriftgröße). */
.bre-cinematic-copy,
.bre-cinematic-copy * {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

.bre-cinematic-beat--brand {
  max-width: none;
}

.bre-cinematic-beat--message {
  max-width: min(100%, 1120px);
}

/* Satz der Scroll Story: sieht aus wie die frühere H1, ist aber ein Absatz (die H1 der
   Startseite steht in #intro). Stärker als die allgemeine Absatzregel der Beats unten. */
.bre-cinematic-home .bre-cinematic-beat--message .bre-cinematic-headline {
  max-width: 15ch;
  color: #fff !important;
  hyphens: auto;
}

.bre-cinematic-home .bre-cinematic-beat > * {
  color: #fff !important;
}

.bre-cinematic-home .bre-cinematic-beat .bre-cinematic-kicker {
  color: rgba(255, 255, 255, 0.74) !important;
}

.bre-cinematic-home .bre-cinematic-beat .bre-cinematic-headline,
.bre-cinematic-home .bre-cinematic-beat .bre-cinematic-display {
  font-size: clamp(38px, 6.1vw, 92px);
  font-weight: 700;
  line-height: 0.98;
  margin-top: 26px;
  text-shadow: 0 22px 60px rgba(3, 7, 12, 0.62);
}

.bre-cinematic-home .bre-cinematic-beat .bre-cinematic-headline em,
.bre-cinematic-home .bre-cinematic-beat .bre-cinematic-display em {
  font-style: normal;
  color: transparent !important;
  background: linear-gradient(100deg, #7ec8f0 0%, #4fd1c5 55%, #5fe0a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-shadow: none;
}

.bre-cinematic-home .bre-cinematic-beat p {
  margin: 22px 0 0;
  max-width: 44ch;
  font-size: clamp(15px, 1.28vw, 18px);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.84) !important;
  text-shadow: 0 10px 34px rgba(3, 7, 12, 0.6);
}

/* Wortmarke CREATE. BUILD. BEYOND. */
.bre-cinematic-words {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(16px, 2.4vw, 38px);
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.bre-cinematic-home .bre-cinematic-words li {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 8px 28px rgba(3, 7, 12, 0.7);
}

.bre-cinematic-home .bre-cinematic-words li:last-child {
  color: var(--cn-blue-soft) !important;
}

.bre-cinematic-beat--coda {
  max-width: min(100%, 1120px);
}

.bre-cinematic-home .bre-cinematic-beat--coda .bre-cinematic-display {
  max-width: 24ch;
  font-size: clamp(22px, 2.5vw, 38px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.24;
  margin-top: 22px;
}

/* Abspann-Wortmarke — erscheint, sobald der Satellit im Schlussbild
   ankommt. Querformat: unter ihm ueber der Erde, im Hochformat im freien
   Sternenhimmel ueber ihm. Nur mit laufendem Video (gesetzte Variante): ihre
   Lage ist auf das jeweilige Schlussbild abgestimmt. */
.bre-cinematic-beat--reveal {
  display: none;
  max-width: none;
}

.bre-cinematic-story[data-variant] .bre-cinematic-beat--reveal {
  display: block;
}

/* Ueber der Erde haelt ein weicher Lichtabfall die Schrift lesbar — kein
   Kasten, nur eine Abdunklung, die mit der Schrift erscheint. */
.bre-cinematic-story[data-variant="landscape"] .bre-cinematic-beat--reveal::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(1100px, 92vw);
  height: 280%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgba(3, 7, 12, 0.55),
    rgba(3, 7, 12, 0.3) 55%,
    rgba(3, 7, 12, 0) 100%
  );
  opacity: var(--cn-a);
  pointer-events: none;
}

.bre-cinematic-home .bre-cinematic-beat--reveal .bre-cinematic-wordmark {
  /* Die generische Beat-Absatzregel setzt Rand, Breite und Schriftgroesse —
     hier bewusst zurueckgenommen. */
  margin: 0;
  max-width: none;
  text-align: center;
  font-family: var(--font-sans);
  font-size: clamp(26px, min(2.9vw, 5.2vh), 52px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: #fff !important;
  text-shadow:
    0 0 32px rgba(126, 200, 240, 0.22),
    0 12px 40px rgba(3, 7, 12, 0.7);
  /* Zieht beim Erscheinen aus der Unschaerfe scharf. */
  filter: blur(calc((1 - var(--cn-a)) * 8px));
}

/* Die Sperrung laeuft beim Erscheinen von weit auf ihr Mass zusammen. Der
   linke Innenabstand gleicht die Sperrung hinter dem letzten Buchstaben aus,
   damit jedes Wort optisch mittig steht. */
.bre-cinematic-home .bre-cinematic-beat--reveal .bre-cinematic-wordmark span {
  --cn-wm-track: calc(0.2em + (1 - var(--cn-a)) * 0.5em);
  display: inline-block;
  padding-left: var(--cn-wm-track);
  letter-spacing: var(--cn-wm-track);
  color: #fff !important;
}

/* Zweite Zeile: klein und weit gesperrt, ohne Trennlinie — wie ein Filmtitel.
   Sie folgt der ersten Zeile leicht verzoegert und zieht ebenfalls aus
   weiter Sperrung zusammen; text-indent gleicht die Sperrung hinter dem
   letzten Buchstaben aus. */
.bre-cinematic-home .bre-cinematic-beat--reveal .bre-cinematic-wordmark em {
  --cn-wm-track-2: calc(0.62em + (1 - var(--cn-a)) * 0.6em);
  display: block;
  margin-top: 1.25em;
  font-style: normal;
  font-size: clamp(10px, min(0.82vw, 1.45vh), 14px);
  font-weight: 600;
  letter-spacing: var(--cn-wm-track-2);
  text-indent: var(--cn-wm-track-2);
  color: rgba(255, 255, 255, 0.8) !important;
  opacity: clamp(0, calc(var(--cn-a) * 2 - 0.8), 1);
}

/* Im Hochformat ist ueber dem Satelliten viel Himmel: die Marke steht dort
   gestapelt und groesser. */
.bre-cinematic-story[data-variant="portrait"] .bre-cinematic-beat--reveal .bre-cinematic-wordmark {
  font-size: clamp(34px, 11vw, 64px);
  line-height: 0.96;
}

.bre-cinematic-story[data-variant="portrait"] .bre-cinematic-beat--reveal .bre-cinematic-wordmark span {
  display: block;
}

.bre-cinematic-story[data-variant="portrait"] .bre-cinematic-beat--reveal .bre-cinematic-wordmark em {
  margin-top: 1.4em;
  font-size: clamp(11px, 3.3vw, 16px);
}

/* Scroll-Hinweis und Fortschritt (nur im Live-Modus sichtbar) */
.bre-cinematic-hint,
.bre-cinematic-progress {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Scroll-Story — Live-Modus (JS aktiv, Video wird gescrubbt)
   -------------------------------------------------------------------------- */

html.bre-cinematic-live .bre-cinematic-story {
  height: calc(var(--cn-track) * 100svh);
}

/* Schwebende Navigation: Story randlos bis unter die Navigation ziehen,
   damit das Video oben nicht abgesetzt und unten nicht angeschnitten ist. */
html.bre-cinematic-live.bre-cinematic-nav-float .bre-cinematic-story {
  margin-top: calc(-1 * var(--cn-lift, 0px));
}

html.bre-cinematic-live .bre-cinematic-stage {
  position: sticky;
  top: 0;
  /* Groesste Viewport-Hoehe, nicht die kleinste: faehrt auf dem Handy beim
     Scrollen die Adressleiste ein, waechst der sichtbare Bereich. Mit svh
     blieb die Buehne kuerzer und darunter entstand ein dunkler Balken.
     Bei sichtbarer Leiste liegt das untere Stueck einfach unter ihr. */
  height: 100vh;
  height: 100lvh;
  min-height: 0;
  display: block;
}

/* Schlussbewegung bewusst ohne scale(): eine laufende Skalierung tastet das
   Video in jedem Frame neu ab und laesst feines Detail — Sand, Wortmarke —
   sichtbar zittern. Der Hub kommt als ganzzahliger Pixelwert aus dem Skript. */
html.bre-cinematic-live .bre-cinematic-canvas {
  /* Reserve nach unten: der Hub der Schlussbewegung wuerde sonst die
     Unterkante des Bildes freilegen und die dunkle Buehne durchscheinen
     lassen. Die Buehne schneidet den Ueberstand ohnehin ab. */
  bottom: -5vh;
  bottom: -5lvh;
  transform: translate3d(0, var(--cn-exit-px, 0px), 0);
}

html.bre-cinematic-live .bre-cinematic-video {
  opacity: 1;
}

html.bre-cinematic-live .bre-cinematic-still {
  /* Liegt bis zum bestaetigten Videobild ueber dem Video. Auch nach Ablauf
     der kurzen Ladephase bleibt damit ein vollflaechiges Bild sichtbar. */
  z-index: 1;
  opacity: 1;
  transition: opacity 0.2s linear;
}

html.bre-cinematic-live .bre-cinematic-story[data-ready="1"] .bre-cinematic-still {
  opacity: 0;
}

/* Degradation: Video nicht verfuegbar -> Standbild bleibt, Story laeuft weiter */
html.bre-cinematic-live .bre-cinematic-story[data-mode="still"] .bre-cinematic-video {
  display: none;
}

html.bre-cinematic-live .bre-cinematic-story[data-mode="still"] .bre-cinematic-still {
  opacity: 1;
}

html.bre-cinematic-live .bre-cinematic-copy {
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 0;
  pointer-events: none;
}

html.bre-cinematic-live .bre-cinematic-beat {
  --cn-a: 0;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translate3d(0, calc(-50% + (1 - var(--cn-a)) * 30px), 0);
  opacity: var(--cn-a);
}

/* Die Schlusszeile sitzt hoeher als die Bildmitte, damit sie der aus der
   Duene wachsenden Wortmarke zu keinem Zeitpunkt in die Quere kommt. */
html.bre-cinematic-live .bre-cinematic-beat--coda {
  top: 32%;
}

/* Lage der Abspann-Wortmarke: aus der Geometrie des Videos berechnet (cover,
   Ausrichtung 50 % 46 %, Bildflaeche 105 vh hoch), damit sie bei jedem
   Seitenverhaeltnis an derselben Stelle des Schlussbilds steht — mit
   Mindestabstand zur Navigation bzw. zum unteren Rand. Sie faehrt mit der
   Schlussbewegung des Bildes mit, die Lage zum Satelliten bleibt gleich. */
html.bre-cinematic-live .bre-cinematic-story[data-variant] .bre-cinematic-beat--reveal {
  transform: translate3d(0, calc(-50% + var(--cn-exit-px, 0px) + (1 - var(--cn-a)) * 14px), 0);
}

html.bre-cinematic-live .bre-cinematic-story[data-variant="landscape"] .bre-cinematic-beat--reveal {
  --cn-frame-h: max(105vh, 56.25vw);
  top: min(
    calc((105vh - var(--cn-frame-h)) * 0.46 + var(--cn-frame-h) * 0.8),
    calc(100vh - 7rem)
  );
}

html.bre-cinematic-live .bre-cinematic-story[data-variant="portrait"] .bre-cinematic-beat--reveal {
  --cn-frame-h: max(105vh, 177.78vw);
  top: max(
    calc((105vh - var(--cn-frame-h)) * 0.46 + var(--cn-frame-h) * 0.235),
    calc(var(--header-h, 4.25rem) + 5.5rem)
  );
}

html.bre-cinematic-live .bre-cinematic-beat[data-cn-idle] {
  visibility: hidden;
}

html.bre-cinematic-live .bre-cinematic-beat:not([data-cn-idle]) {
  will-change: transform, opacity;
}

/* Scroll-Hinweis */
html.bre-cinematic-live .bre-cinematic-hint {
  --cn-a: 1;
  display: flex;
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(clamp(28px, 5vh, 54px) + var(--cn-headroom, 0px));
  bottom: calc(clamp(28px, 5svh, 54px) + var(--cn-headroom, 0px) + 100lvh - 100svh);
  transform: translate3d(-50%, calc((1 - var(--cn-a)) * 14px), 0);
  opacity: var(--cn-a);
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  pointer-events: none;
  white-space: nowrap;
}

.bre-cinematic-hint-label {
  /* Das Sperrsatz-Leerzeichen am Wortende optisch ausgleichen */
  text-indent: 0.36em;
}

/* Maus mit laufendem Scrollrad */
.bre-cinematic-mouse {
  position: relative;
  display: block;
  width: 24px;
  height: 38px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 13px;
}

.bre-cinematic-mouse > span {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--paper);
  animation: bre-cinematic-wheel 1.9s var(--cn-ease-io, ease-in-out) infinite;
}

@keyframes bre-cinematic-wheel {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  62% {
    transform: translateY(13px);
    opacity: 1;
  }
  90%,
  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bre-cinematic-mouse > span {
    animation: none;
    opacity: 1;
  }
}

/* Fortschritts-Hairline rechts */
html.bre-cinematic-live .bre-cinematic-progress {
  display: block;
  position: absolute;
  z-index: 5;
  right: clamp(18px, 2.6vw, 42px);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: min(220px, 26svh);
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

.bre-cinematic-progress::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: linear-gradient(180deg, #7ec8f0, #3dcc8e);
  transform: scaleY(var(--cn-p));
  transform-origin: top;
}

/* --------------------------------------------------------------------------
   5. Uebergang: die Seite steigt aus der Duene auf
   -------------------------------------------------------------------------- */

@media (max-aspect-ratio: 8 / 7) {
  /* Im Hochformat laeuft die eigens gerechnete Fassung, in der das Bild
     bereits bildschirmfuellend komponiert ist. Es gilt daher exakt dieselbe
     Darstellung wie am Desktop — cover, randlos, ohne Maske und ohne Balken. */

  /* Typo in die obere Bildhaelfte, klar oberhalb des scharfen Bildbands.
     Beats sind absolut positioniert — der Abstand muss ueber top gesetzt
     werden, ein padding des Containers wuerde sie nicht verschieben. */
  html.bre-cinematic-live .bre-cinematic-copy {
    align-items: flex-start;
  }

  html.bre-cinematic-live .bre-cinematic-beat,
  html.bre-cinematic-live .bre-cinematic-beat--coda {
    top: clamp(88px, 12svh, 150px);
    transform: translate3d(0, calc((1 - var(--cn-a)) * 22px), 0);
  }

  .bre-cinematic-beat,
  .bre-cinematic-beat--message,
  .bre-cinematic-beat--coda {
    max-width: none;
  }

  /* Kompaktere Schlagzeile, damit sie sicher oberhalb des Bildbands endet */
  .bre-cinematic-home .bre-cinematic-beat .bre-cinematic-headline,
  .bre-cinematic-home .bre-cinematic-beat .bre-cinematic-display {
    font-size: clamp(28px, 7.4vw, 46px);
    margin-top: 18px;
  }

  .bre-cinematic-home .bre-cinematic-beat--coda .bre-cinematic-display {
    font-size: clamp(19px, 5vw, 28px);
  }
}

/* --------------------------------------------------------------------------
   14. Reduced Motion / statischer Fallback
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bre-cinematic-home *,
  .bre-cinematic-home *::before,
  .bre-cinematic-home *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Statischer Modus: nur Marke + Kernbotschaft, sauber gestapelt */
html:not(.bre-cinematic-live) .bre-cinematic-beat--coda {
  display: none;
}

html:not(.bre-cinematic-live) .bre-cinematic-beat--brand .bre-cinematic-words {
  margin-top: 22px;
}

html:not(.bre-cinematic-live) .bre-cinematic-beat--message {
  margin-top: 30px;
}


/* --------------------------------------------------------------------------
   15. Mobile Navigation
   Unterhalb des Navigations-Breakpoints ersetzt ein schwebender Ausloeser die

/* --------------------------------------------------------------------------
   Kopfzeile über dem Video
   Solange die Story im Bild ist, liegt die Kopfzeile ohne eigene Fläche über
   dem dunklen Bild. Schrift und Rahmen werden deshalb hell – unabhängig vom
   Theme. Das offene Mobilmenü behält seine eigene Fläche und Farben.
   -------------------------------------------------------------------------- */

html.bre-cinematic-nav-over .site-header,
html.bre-cinematic-nav-over .site-header__brand,
html.bre-cinematic-nav-over .site-header__name {
  color: #ffffff;
}

html.bre-cinematic-nav-over .site-nav:not([data-open="true"]) .site-nav__link {
  color: rgba(255, 255, 255, 0.82);
}

html.bre-cinematic-nav-over .site-nav:not([data-open="true"]) .site-nav__link:hover,
html.bre-cinematic-nav-over .site-nav:not([data-open="true"]) .site-nav__link[aria-current="page"] {
  color: #ffffff;
}

html.bre-cinematic-nav-over .site-header__actions .btn--ghost,
html.bre-cinematic-nav-over .site-header__actions .icon-btn {
  border-color: rgba(255, 255, 255, 0.42);
  color: #ffffff;
  background: transparent;
}

html.bre-cinematic-nav-over .site-header__actions .btn--ghost:hover,
html.bre-cinematic-nav-over .site-header__actions .icon-btn:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}


html.bre-cinematic-nav-over .site-header__toggle span {
  background: #ffffff;
}

/* Das Aufklappmenü der Tools bleibt eine eigene Fläche */
html.bre-cinematic-nav-over .site-nav__menu a {
  color: var(--ink-2);
}

html.bre-cinematic-nav-over .site-nav__menu a:hover {
  color: var(--ink);
}

/* Eckdaten und Zeilenliste im Setup-Abschnitt brauchen Luft dazwischen */
.section .def-list + .rows {
  margin-top: clamp(2rem, 5vh, 3rem);
}

/* --------------------------------------------------------------------------
   Website Analyzer – Teaser-Abschnitt (nutzt Schnellcheck & Score aus landing.css)
   -------------------------------------------------------------------------- */

.home-analyzer__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.5rem, 4.5vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* Dezentes Markenlicht in der Ecke */
.home-analyzer__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 70% at 100% 0%, rgb(74 158 232 / 0.16), transparent 70%),
    radial-gradient(40% 60% at 85% 100%, rgb(61 204 142 / 0.14), transparent 70%);
}

/* Verlaufslinie oben wie beim Abschluss-CTA */
.home-analyzer__card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-gradient);
}

.home-analyzer__main { min-width: 0; }

/* Schrift wie die übrigen Startseiten-Überschriften (700); Abstände hier explizit,
   da .bre-cinematic-home h2 den Außenabstand zurücksetzt. */
.bre-cinematic-home .home-analyzer__title,
.home-analyzer__title {
  max-width: 16ch;
  margin: 1rem 0 1.25rem;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  line-height: 1.04;
  hyphens: auto;
}

.home-analyzer__main .lead { max-width: 34rem; }
.home-analyzer .cluster-check { margin-top: 1.75rem; }

.home-analyzer__aside {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.home-analyzer__links {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-analyzer__links a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 48px;
  padding: 0.6rem 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
}

.home-analyzer__icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.9rem;
}

.home-analyzer__name { font-weight: 500; letter-spacing: -0.01em; }

.home-analyzer__arrow {
  color: var(--accent);
  font-size: 0.85rem;
  transition: transform 0.25s var(--ease);
}

.home-analyzer__links a:hover .home-analyzer__name { color: var(--accent); }
.home-analyzer__links a:hover .home-analyzer__arrow { transform: translateX(4px); }

@media (max-width: 960px) {
  .home-analyzer__card { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .home-analyzer__arrow { transition: none; }
  .home-analyzer__links a:hover .home-analyzer__arrow { transform: none; }
}