/* ==========================================================================
   Beyond Reality Entertainment — Cinematic Scroll Story
   --------------------------------------------------------------------------
   Eigenstaendige Design-Schicht ausschliesslich fuer die Startseite (index.php).
   Alle Regeln sind unter .bre-cinematic-* gescoped bzw. an
   html.bre-cinematic-page gebunden. bre-vision-design.css bleibt unberuehrt.
   ========================================================================== */

@property --cn-a {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* --------------------------------------------------------------------------
   1. Tokens (nur innerhalb des Startseiten-Wrappers gueltig)
   -------------------------------------------------------------------------- */

.bre-cinematic-home {
  --cn-blue: #4a9ee8;
  --cn-blue-deep: #1f6bb4;
  --cn-blue-soft: #7ec8f0;
  --cn-sand: #c9a274;
  --cn-night: #05090f;

  --cn-ink: #101d2c;
  --cn-ink-2: #55697f;
  --cn-ink-3: #627386;
  /* Genau zwei Flaechenfarben auf der ganzen Seite: hell und Nacht.
     --cn-wash ist keine dritte Flaeche, sondern nur der Hover-Schleier. */
  --cn-surface: #ffffff;
  --cn-wash: rgba(16, 29, 44, 0.045);
  --cn-line: rgba(16, 29, 44, 0.12);
  --cn-line-soft: rgba(16, 29, 44, 0.07);

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

  --cn-shell: min(1240px, 100% - 10vw);
  --cn-gap: clamp(64px, 9vw, 148px);

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

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

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

html[data-theme="dark"] .bre-cinematic-home {
  --cn-ink: #f2f7fc;
  --cn-ink-2: rgba(232, 240, 249, 0.74);
  --cn-ink-3: rgba(232, 240, 249, 0.5);
  /* Im dunklen Theme fallen beide Flaechen auf dieselbe Nachtfarbe zusammen —
     die Seite bleibt dadurch aus einem Guss. */
  --cn-surface: #05090f;
  --cn-wash: rgba(255, 255, 255, 0.05);
  --cn-line: rgba(149, 190, 228, 0.18);
  --cn-line-soft: rgba(149, 190, 228, 0.1);
}

/* 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 .bre-page-shell {
  background: var(--cn-surface, #ffffff) !important;
}

.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: #ffffff;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

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

html[data-theme="dark"] .bre-cinematic-loader {
  background: #05090f;
}

.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: rgba(16, 29, 44, 0.12);
}

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

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

.bre-cinematic-loader-pct {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: rgba(16, 29, 44, 0.55);
}

html[data-theme="dark"] .bre-cinematic-loader-pct {
  color: rgba(232, 240, 249, 0.55);
}

@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: "Outfit", "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.bre-cinematic-kicker {
  display: inline-block;
  font-family: "Outfit", system-ui, sans-serif;
  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: 20ch;
}

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

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

.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: var(--cn-blue-soft) !important;
}

.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: "Outfit", system-ui, sans-serif;
  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: 26ch;
}

.bre-cinematic-home .bre-cinematic-beat--coda .bre-cinematic-display {
  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: "Outfit", system-ui, sans-serif;
  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;
  height: 100svh;
  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 {
  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));
  transform: translate3d(-50%, calc((1 - var(--cn-a)) * 14px), 0);
  opacity: var(--cn-a);
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: "Outfit", system-ui, sans-serif;
  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: #ffffff;
  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, var(--cn-blue-soft), var(--cn-blue));
  transform: scaleY(var(--cn-p));
  transform-origin: top;
}

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

.bre-cinematic-threshold {
  position: relative;
  z-index: 3;
  background: var(--cn-surface);
  padding: clamp(74px, 11vh, 132px) 0 var(--cn-gap);
}

html.bre-cinematic-live .bre-cinematic-threshold {
  margin-top: calc(-1 * var(--cn-overlap));
  padding-top: calc(var(--cn-overlap) + clamp(20px, 5vh, 64px));
}

html.bre-cinematic-live .bre-cinematic-threshold::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: var(--cn-overlap);
  opacity: var(--cn-exit);
  background: linear-gradient(
    180deg,
    rgba(5, 9, 15, 0) 0%,
    color-mix(in srgb, var(--cn-surface) 34%, transparent) 46%,
    color-mix(in srgb, var(--cn-surface) 86%, transparent) 78%,
    var(--cn-surface) 100%
  );
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  html.bre-cinematic-live .bre-cinematic-threshold::before {
    background: linear-gradient(
      180deg,
      rgba(5, 9, 15, 0) 0%,
      var(--cn-surface) 88%
    );
  }
}

html.bre-cinematic-live .bre-cinematic-threshold > .bre-cinematic-shell {
  position: relative;
  z-index: 1;
}

/* Threshold-Inhalt */
.bre-cinematic-threshold-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: end;
}

.bre-cinematic-home .bre-cinematic-threshold h2 {
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.06;
  margin-top: 24px;
  color: var(--cn-ink);
}

.bre-cinematic-home .bre-cinematic-threshold h2 em {
  font-style: normal;
  color: var(--cn-blue);
}

.bre-cinematic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Eigene Buttons — bewusst kantig, ohne Glow */
.bre-cinematic-home .bre-cinematic-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border-radius: 2px;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.4s var(--cn-ease),
    color 0.4s var(--cn-ease),
    border-color 0.4s var(--cn-ease);
}

.bre-cinematic-home .bre-cinematic-btn i {
  font-size: 12px;
  transition: transform 0.45s var(--cn-ease);
}

.bre-cinematic-home .bre-cinematic-btn--solid {
  background: var(--cn-ink);
  color: var(--cn-surface);
}

html[data-theme="dark"] .bre-cinematic-home .bre-cinematic-btn--solid {
  background: var(--cn-blue);
  color: #06101c;
}

.bre-cinematic-home .bre-cinematic-btn--solid:hover,
.bre-cinematic-home .bre-cinematic-btn--solid:focus-visible {
  background: var(--cn-blue);
  color: #ffffff;
}

.bre-cinematic-home .bre-cinematic-btn--ghost {
  border-color: var(--cn-line);
  color: var(--cn-ink);
}

.bre-cinematic-home .bre-cinematic-btn--ghost:hover,
.bre-cinematic-home .bre-cinematic-btn--ghost:focus-visible {
  border-color: var(--cn-ink);
}

.bre-cinematic-home .bre-cinematic-btn:hover i,
.bre-cinematic-home .bre-cinematic-btn:focus-visible i {
  transform: translateX(4px);
}

/* Konto-Hinweis fuer eingeloggte Nutzer */
.bre-cinematic-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 30px;
  padding: 18px 22px;
  border: 1px solid var(--cn-line);
  border-left: 2px solid var(--cn-blue);
  border-radius: 2px;
}

.bre-cinematic-home .bre-cinematic-account span {
  font-size: 15px;
  color: var(--cn-ink-2) !important;
}

.bre-cinematic-home .bre-cinematic-account a {
  font-size: 14px;
  font-weight: 600;
  color: var(--cn-blue) !important;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* Kennzahlen-Leiste */
.bre-cinematic-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--cn-line);
}

.bre-cinematic-fact {
  padding: 26px clamp(14px, 2vw, 30px) 4px 0;
  border-right: 1px solid var(--cn-line-soft);
}

.bre-cinematic-fact:last-child {
  border-right: 0;
}

.bre-cinematic-home .bre-cinematic-fact strong {
  display: block;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cn-ink) !important;
}

.bre-cinematic-home .bre-cinematic-fact span {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cn-ink-2) !important;
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   6. Sektions-Grundraster
   -------------------------------------------------------------------------- */

.bre-cinematic-section {
  position: relative;
  padding: var(--cn-gap) 0;
  background: var(--cn-surface);
}

.bre-cinematic-section--night {
  background: var(--cn-night);
}

.bre-cinematic-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  padding-bottom: clamp(40px, 5vw, 72px);
}

.bre-cinematic-home .bre-cinematic-head h2 {
  font-size: clamp(30px, 3.5vw, 52px);
  margin-top: 22px;
  color: var(--cn-ink);
}

.bre-cinematic-home .bre-cinematic-section--night .bre-cinematic-head h2 {
  color: #ffffff !important;
}

.bre-cinematic-home .bre-cinematic-section--night .bre-cinematic-lead {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* --------------------------------------------------------------------------
   7. Leistungen — grosse Zeilen statt Karten
   -------------------------------------------------------------------------- */

.bre-cinematic-index {
  border-top: 1px solid var(--cn-line);
}

.bre-cinematic-home .bre-cinematic-row {
  position: relative;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr) minmax(0, 1fr) 44px;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--cn-line);
  text-decoration: none;
  color: inherit;
  /* Nur transform und opacity animieren. padding zu animieren erzwingt in
     jedem Frame ein Reflow und laesst die Spalten neu umbrechen — genau das
     wirkte abgehackt. */
  transition: transform 0.55s var(--cn-ease);
  /* Eigener Stapelkontext, damit der Schleier (::before, z-index -1)
     zuverlaessig ueber der Sektionsflaeche liegt statt dahinter. */
  isolation: isolate;
}

.bre-cinematic-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -2vw;
  background: var(--cn-wash);
  opacity: 0;
  transition: opacity 0.5s var(--cn-ease);
}

.bre-cinematic-home .bre-cinematic-row:hover,
.bre-cinematic-home .bre-cinematic-row:focus-visible {
  transform: translateX(clamp(10px, 1.4vw, 22px));
}

.bre-cinematic-row:hover::before,
.bre-cinematic-row:focus-visible::before {
  opacity: 1;
}

.bre-cinematic-home .bre-cinematic-row-no {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.7;
  padding-right: 12px;
  color: var(--cn-ink-3) !important;
  transition: color 0.5s var(--cn-ease);
}

.bre-cinematic-row:hover .bre-cinematic-row-no,
.bre-cinematic-row:focus-visible .bre-cinematic-row-no {
  color: var(--cn-blue) !important;
}

.bre-cinematic-home .bre-cinematic-row h3 {
  font-size: clamp(22px, 2.5vw, 38px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.08;
  color: var(--cn-ink) !important;
}

.bre-cinematic-home .bre-cinematic-row p {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.66;
  color: var(--cn-ink-2) !important;
  margin: 0;
  max-width: 46ch;
}

.bre-cinematic-row-go {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cn-line);
  border-radius: 50%;
  color: var(--cn-ink);
  font-size: 12px;
  transition:
    transform 0.55s var(--cn-ease),
    background-color 0.45s var(--cn-ease),
    border-color 0.45s var(--cn-ease),
    color 0.45s var(--cn-ease);
}

.bre-cinematic-row:hover .bre-cinematic-row-go,
.bre-cinematic-row:focus-visible .bre-cinematic-row-go {
  background: var(--cn-blue);
  border-color: var(--cn-blue);
  color: #fff;
  transform: rotate(-45deg);
}

.bre-cinematic-index-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: clamp(34px, 4vw, 58px);
}

.bre-cinematic-home .bre-cinematic-index-foot p {
  margin: 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cn-ink-2) !important;
}

/* --------------------------------------------------------------------------
   8. Technische Basis (aus dem frueheren Dashboard abgeleitet)
   -------------------------------------------------------------------------- */

.bre-cinematic-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bre-cinematic-spec {
  background: var(--cn-night);
  padding: clamp(26px, 3vw, 40px);
}

.bre-cinematic-home .bre-cinematic-spec > span {
  display: block;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cn-blue-soft) !important;
}

.bre-cinematic-home .bre-cinematic-spec strong {
  display: block;
  margin-top: 18px;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff !important;
}

.bre-cinematic-home .bre-cinematic-spec em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62) !important;
}

.bre-cinematic-deliverables {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 46px);
  margin-top: clamp(40px, 5vw, 70px);
}

.bre-cinematic-deliverable {
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.bre-cinematic-deliverable i {
  font-size: 15px;
  color: var(--cn-blue-soft);
}

.bre-cinematic-home .bre-cinematic-deliverable strong {
  display: block;
  margin-top: 16px;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  color: #ffffff !important;
}

.bre-cinematic-home .bre-cinematic-deliverable span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6) !important;
}

.bre-cinematic-home .bre-cinematic-deliverable em {
  display: inline-block;
  margin-top: 14px;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42) !important;
}

/* --------------------------------------------------------------------------
   9. Warum BRE — Statement + Index
   -------------------------------------------------------------------------- */

.bre-cinematic-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: start;
}

.bre-cinematic-home .bre-cinematic-statement {
  font-size: clamp(26px, 3.1vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: var(--cn-ink) !important;
  margin-top: 22px;
}

.bre-cinematic-home .bre-cinematic-statement em {
  font-style: normal;
  color: var(--cn-blue) !important;
}

.bre-cinematic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: cn;
}

.bre-cinematic-home .bre-cinematic-list li {
  counter-increment: cn;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--cn-line-soft);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.5;
  color: var(--cn-ink) !important;
}

.bre-cinematic-home .bre-cinematic-list li::before {
  content: "0" counter(cn);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--cn-blue) !important;
}

/* --------------------------------------------------------------------------
   10. Projektablauf
   -------------------------------------------------------------------------- */

/* Vier Stationen mit eigener Haarlinie. Die blaue Markierung wandert
   entsprechend der Schrittnummer von links nach rechts. */
.bre-cinematic-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 52px);
  row-gap: clamp(30px, 4vw, 52px);
}

.bre-cinematic-step {
  --cn-step-position: 0%;
  position: relative;
  padding: clamp(24px, 2.6vw, 38px) 0 0 0;
  border-top: 1px solid var(--cn-line);
}

.bre-cinematic-step:nth-child(2) {
  --cn-step-position: 33.333333%;
}

.bre-cinematic-step:nth-child(3) {
  --cn-step-position: 66.666667%;
}

.bre-cinematic-step:nth-child(4) {
  --cn-step-position: 100%;
}

.bre-cinematic-step::after {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--cn-step-position);
  transform: translateX(calc(0% - var(--cn-step-position)));
  width: 36px;
  height: 2px;
  background: var(--cn-blue);
}

.bre-cinematic-home .bre-cinematic-step > span {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--cn-blue) !important;
}

.bre-cinematic-home .bre-cinematic-step h3 {
  margin-top: 14px;
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 600;
  color: var(--cn-ink) !important;
}

.bre-cinematic-home .bre-cinematic-step p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--cn-ink-2) !important;
}

.bre-cinematic-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 72px);
  margin-top: clamp(46px, 6vw, 86px);
}

.bre-cinematic-quote {
  padding-left: clamp(20px, 2.4vw, 34px);
  border-left: 1px solid var(--cn-blue);
}

.bre-cinematic-home .bre-cinematic-quote p {
  margin: 0;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(17px, 1.75vw, 25px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: var(--cn-ink) !important;
}

.bre-cinematic-quote div {
  margin-top: 20px;
}

.bre-cinematic-home .bre-cinematic-quote strong {
  display: block;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cn-ink) !important;
}

.bre-cinematic-home .bre-cinematic-quote span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--cn-ink-3) !important;
}

/* --------------------------------------------------------------------------
   11. Region + Abschluss-CTA
   -------------------------------------------------------------------------- */

.bre-cinematic-outro {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 14vh, 190px) 0;
  background: var(--cn-night);
}

.bre-cinematic-outro > .bre-cinematic-shell {
  position: relative;
  z-index: 1;
}

.bre-cinematic-home .bre-cinematic-outro h2 {
  font-size: clamp(30px, 4vw, 62px);
  line-height: 1.04;
  margin-top: 24px;
  max-width: 20ch;
  color: #ffffff !important;
}

.bre-cinematic-home .bre-cinematic-outro-copy {
  margin: 26px 0 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.24vw, 18px);
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.7) !important;
}

.bre-cinematic-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(48px, 6vw, 82px);
  background: rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.bre-cinematic-home .bre-cinematic-shortcuts a {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--cn-night);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition:
    background-color 0.45s var(--cn-ease),
    color 0.45s var(--cn-ease);
}

.bre-cinematic-home .bre-cinematic-shortcuts a i {
  font-size: 17px;
  color: var(--cn-blue-soft);
  transition: color 0.45s var(--cn-ease);
}

.bre-cinematic-home .bre-cinematic-shortcuts a:hover,
.bre-cinematic-home .bre-cinematic-shortcuts a:focus-visible {
  background: var(--cn-blue);
  color: #ffffff;
}

.bre-cinematic-home .bre-cinematic-shortcuts a:hover i,
.bre-cinematic-home .bre-cinematic-shortcuts a:focus-visible i {
  color: #ffffff;
}

.bre-cinematic-outro-cta {
  margin-top: clamp(44px, 5vw, 72px);
}

.bre-cinematic-home .bre-cinematic-outro .bre-cinematic-btn--solid {
  background: #ffffff;
  color: var(--cn-night);
}

.bre-cinematic-home .bre-cinematic-outro .bre-cinematic-btn--solid:hover,
.bre-cinematic-home .bre-cinematic-outro .bre-cinematic-btn--solid:focus-visible {
  background: var(--cn-blue);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   12. Navigation ueber der Story (nur wenn nav fixed/sticky ist)
   -------------------------------------------------------------------------- */

html.bre-cinematic-nav-float nav {
  transition:
    background-color 0.55s var(--cn-ease-io, ease),
    border-color 0.55s var(--cn-ease-io, ease),
    box-shadow 0.55s var(--cn-ease-io, ease);
}

/* Ueber der Story traegt die Navigation keine eigene Flaeche — sonst bleibt
   sie exakt die originale Navigation. Kein Verlauf, keine Trennlinie,
   kein Schatten, keine Umfaerbung einzelner Elemente.
   Flaeche, Rahmen und Schatten setzt bre-scroll-story.js direkt am Element:
   die bestehenden Themes benutzen dafuer !important-Regeln, die sich per
   Stylesheet nicht zuverlaessig neutralisieren lassen. */

/* Nur im hellen Theme waere reine Textschrift auf dem Video nicht lesbar —
   ausschliesslich diese Links werden aufgehellt.
   Bewusst NICHT betroffen, weil sie eine eigene Flaeche mitbringen und
   deshalb ueberall gleich aussehen sollen:
   Login und Registrieren (.nav-left), der aktive Punkt (.active) und der
   Theme-Schalter (.nav-theme-toggle, ein button ausserhalb dieser Selektoren).
   Der Kindselektor haelt ausserdem die Eintraege im Tools-Menue heraus. */
html[data-theme="light"].bre-cinematic-nav-float.bre-cinematic-nav-over
  nav .nav-right li > a:not(.active),
html[data-theme="light"].bre-cinematic-nav-float.bre-cinematic-nav-over
  nav .nav-right li > .nav-dropdown-toggle:not(.active) {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .bre-cinematic-home {
    --cn-track: 4.2;
    --cn-shell: min(1240px, 100% - 8vw);
  }

  .bre-cinematic-threshold-grid,
  .bre-cinematic-head,
  .bre-cinematic-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .bre-cinematic-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bre-cinematic-home .bre-cinematic-row {
    grid-template-columns: 56px minmax(0, 1fr) 40px;
    align-items: start;
    row-gap: 12px;
  }

  .bre-cinematic-home .bre-cinematic-row p {
    grid-column: 2 / 3;
  }

  .bre-cinematic-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .bre-cinematic-home {
    /* Laengere Strecke = mehr Scrollweg pro Videoframe = weichere Progression */
    --cn-track: 4.6;
    --cn-overlap: 24svh;
    --cn-gap: clamp(56px, 13vw, 88px);
    --cn-shell: min(1240px, 100% - 44px);
  }

  /* Die Video-Darstellung im Hochformat regelt der Aspect-Ratio-Block (13b). */

  html.bre-cinematic-live .bre-cinematic-progress {
    height: 110px;
    right: 14px;
  }

  .bre-cinematic-facts,
  .bre-cinematic-specs,
  .bre-cinematic-deliverables,
  .bre-cinematic-quotes,
  .bre-cinematic-shortcuts {
    grid-template-columns: minmax(0, 1fr);
  }

  .bre-cinematic-fact {
    border-right: 0;
    border-bottom: 1px solid var(--cn-line-soft);
    padding-bottom: 22px;
  }

  .bre-cinematic-fact:last-child {
    border-bottom: 0;
  }

  .bre-cinematic-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .bre-cinematic-home .bre-cinematic-row {
    grid-template-columns: minmax(0, 1fr) 40px;
    row-gap: 10px;
  }

  .bre-cinematic-home .bre-cinematic-row-no {
    grid-column: 1 / 2;
  }

  .bre-cinematic-home .bre-cinematic-row p {
    grid-column: 1 / 2;
  }

  .bre-cinematic-row-go {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
  }

  .bre-cinematic-home .bre-cinematic-row:hover,
  .bre-cinematic-home .bre-cinematic-row:focus-visible {
    transform: none;
  }

  .bre-cinematic-actions .bre-cinematic-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   13b. Hochformat-Sicherung
   Sobald der Viewport zu schmal fuer 16:9 wird, wuerde object-fit: cover die
   Wortmarke seitlich abschneiden. Dann wird das Video zu einem filmischen
   Band mit weich auslaufenden Kanten — nie beschnitten, nie letterboxed
   wirkend. Gilt fuer Smartphones ebenso wie fuer hohe, schmale Fenster.
   -------------------------------------------------------------------------- */

@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
   Leiste. Die Eintraege werden zur Laufzeit aus der bestehenden Navigation
   uebernommen — nav.php und die Desktop-Navigation bleiben unveraendert.
   -------------------------------------------------------------------------- */

.bre-cinematic-navtrigger {
  display: none;
  position: fixed;
  z-index: 90000;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  width: 48px;
  height: 48px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(5, 9, 15, 0.62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.bre-cinematic-navtrigger > span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff;
}

.bre-cinematic-navtrigger:active {
  background: rgba(5, 9, 15, 0.82);
}

/* Overlay */
.bre-cinematic-navmodal {
  position: fixed;
  inset: 0;
  z-index: 95000;
  display: flex;
  align-items: flex-start;
  background: rgba(5, 9, 15, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.36s cubic-bezier(0.65, 0, 0.35, 1);
}

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

.bre-cinematic-navmodal[data-open] {
  opacity: 1;
}

.bre-cinematic-navmodal-panel {
  position: relative;
  width: 100%;
  max-height: 90svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + 78px) 26px
    calc(env(safe-area-inset-bottom, 0px) + 30px);
  background: #05090f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 22px 22px;
  transform: translateY(-16px);
  opacity: 0;
  transition:
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

.bre-cinematic-navmodal[data-open] .bre-cinematic-navmodal-panel {
  transform: translateY(0);
  opacity: 1;
}

/* Schliessen */
.bre-cinematic-navclose {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 20px;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bre-cinematic-navclose > span {
  grid-area: 1 / 1;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff;
}

.bre-cinematic-navclose > span:first-child {
  transform: rotate(45deg);
}

.bre-cinematic-navclose > span:last-child {
  transform: rotate(-45deg);
}

/* Eintraege */
.bre-cinematic-navlinks {
  display: block;
}

.bre-cinematic-home .bre-cinematic-navlink,
.bre-cinematic-navlink {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
}

.bre-cinematic-navlink[aria-current="page"] {
  color: #7ec8f0;
}

.bre-cinematic-navgroup {
  padding: 18px 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bre-cinematic-navgroup-label {
  display: block;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.bre-cinematic-navsublink {
  display: block;
  padding: 11px 0;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.bre-cinematic-navmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.bre-cinematic-navmetalink {
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.bre-cinematic-navtheme {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: transparent;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bre-cinematic-navtheme i {
  font-size: 14px;
  color: #7ec8f0;
}

/* Nur unterhalb des vorhandenen Navigations-Breakpoints aktiv. Ohne
   JavaScript fehlt html.bre-cinematic-page — dann bleibt die urspruengliche
   Navigation sichtbar und nichts geht verloren. */
@media (max-width: 768px) {
  html.bre-cinematic-page nav {
    display: none !important;
  }

  html.bre-cinematic-page .bre-cinematic-navtrigger {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bre-cinematic-navmodal,
  .bre-cinematic-navmodal-panel {
    transition: none;
  }
}