/* ==========================================================================
   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-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);
}

.bre-cinematic-beat--message h1 {
  max-width: 15ch;
}

.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 h1,
.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 h1 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;
}

/* Reveal-Wortmarke — ersetzt im Hochformat die im Bild angeschnittene
   3D-Schrift. Am Desktop zeigt das Video sie vollstaendig, dort bleibt
   dieser Block deshalb aus. */
.bre-cinematic-beat--reveal {
  display: none;
  max-width: none;
}

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

/* Damit die Schrift im Bild sitzt und nicht davor schwebt, bekommt sie eine
   weiche, mitwachsende Abdunklung als Auflage — kein Kasten, nur ein
   Lichtabfall, der mit dem Text erscheint. */
.bre-cinematic-beat--reveal::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190vw;
  height: 120vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgba(5, 9, 15, 0.62),
    rgba(5, 9, 15, 0.34) 52%,
    rgba(5, 9, 15, 0) 100%
  );
  opacity: var(--cn-a);
  pointer-events: none;
  z-index: -1;
}

.bre-cinematic-home .bre-cinematic-beat--reveal .bre-cinematic-wordmark {
  position: relative;
  /* 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-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  /* Warmes Gebrochenweiss statt reinem Weiss: das Bild ist sandbeleuchtet,
     kaltes Weiss wirkt darin aufgeklebt. */
  color: #f2ece2 !important;
  text-shadow:
    0 2px 0 rgba(28, 16, 8, 0.28),
    0 22px 60px rgba(12, 7, 4, 0.78);
}

.bre-cinematic-home .bre-cinematic-beat--reveal .bre-cinematic-wordmark span {
  display: block;
  font-size: clamp(40px, 13.4vw, 78px);
  letter-spacing: -0.035em;
  color: #f2ece2 !important;
}

/* Die dritte Zeile sitzt wie im Video auf einer schmalen Bank:
   feine Linie, gesperrte Versalien, deutlich kleiner. */
.bre-cinematic-home .bre-cinematic-beat--reveal .bre-cinematic-wordmark em {
  display: block;
  position: relative;
  margin-top: 0.62em;
  padding-top: 0.62em;
  font-style: normal;
  font-size: clamp(12px, 3.75vw, 22px);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: rgba(242, 236, 226, 0.88) !important;
}

.bre-cinematic-home .bre-cinematic-beat--reveal .bre-cinematic-wordmark em::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(56px, 22vw, 110px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    rgba(242, 236, 226, 0),
    rgba(242, 236, 226, 0.6),
    rgba(242, 236, 226, 0)
  );
}

/* 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%;
}

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 h1,
  .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);
  }

  /* Die Wortmarke steht als Schlussbild mittig, nicht wie die uebrigen
     Beats im oberen Bereich. */
  html.bre-cinematic-live .bre-cinematic-beat--reveal {
    top: 50%;
    transform: translate3d(0, calc(-50% + (1 - var(--cn-a)) * 22px), 0);
  }
}

/* --------------------------------------------------------------------------
   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);
}