/* Customer-Display-Renderer — Tokens, Stage-Wrapper, Empty-State,
 * Typ-spezifische Layouts.
 *
 * Display ist Vollbild auf Tablet, helles Theme als Default
 * (warm-cremig, ruhige Anmutung). Theme-Switch via
 * #stage[data-display-mode="dark"] für counter+menu. entrance und
 * promo bleiben thematisch immer light — Bild bestimmt die Stimmung.
 *
 * 4 Layout-Typen seit SB3: counter / menu / entrance / promo.
 * Geometrie+Zone-Konzept ist weg.
 *
 * Token-Werte aus dem Mockup kiosk-layouts-v3.html (siehe
 * tappr_docs/09_design_decisions.md). Coral = #d85a30 (Mockup-Coral,
 * NICHT Brand-Coral #ff4d4d). Pickup-Tile-Grün = #1d9e75.
 */

:root {
  /* Farben — helles Default-Theme */
  --d-bg:           #fafaf7;                    /* Stage warm-cremig */
  --d-bg-2:         #ffffff;                    /* Card-BG pures Weiss */
  --d-bg-3:         #f3f1ea;                    /* Hover/Secondary */
  --d-ink:          #1a1a1c;                    /* Primary-Text */
  --d-ink-mute:     #6b6a64;                    /* Secondary-Text */
  --d-ink-faint:    #8e8d85;                    /* Tertiary-Text */
  --d-rule:         rgba(0, 0, 0, 0.10);        /* Hairlines */
  --d-rule-strong:  rgba(0, 0, 0, 0.20);        /* Stärkere Borders */
  --d-coral:        #d85a30;                    /* Mockup-Coral, warm-orange */
  --d-coral-glow:   rgba(216, 90, 48, 0.50);
  --d-green:        #1d9e75;                    /* Gedämpftes Grün, Pickup-Tile */
  --d-green-glow:   rgba(29, 158, 117, 0.50);
  --d-amber:        #854f0b;                    /* Warm-erdig */

  /* Typografie-Skala (für die 1920×1080 Stage-Welt — scale.js
   * skaliert proportional auf die jeweilige Tablet-Auflösung). */
  --type-display-1: 168px;
  --type-display-2: 120px;
  --type-display-3: 96px;
  --type-headline:  72px;
  --type-title:     32px;
  --type-body:      22px;
  --type-caption:   18px;
  --type-eyebrow:   16px;
  --type-meta:      14px;

  --ls-tight:       -0.02em;
  --ls-default:     -0.01em;
  --ls-eyebrow:     0.08em;

  --lh-tight:       1.0;
  --lh-default:     1.2;
  --lh-relaxed:     1.5;

  /* Spacing-Skala */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  --radius-pill:   6px;
  --radius-card:   8px;
  --radius-card-l: 16px;
  --d-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05),
                   0 4px 12px rgba(0, 0, 0, 0.04);
  --d-shadow-tile: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Display-Font (SB6) — wird per layout-engine.js auf #stage als
   * Custom-Property überschrieben je nach layout.display_font. Default
   * für Stage selbst und für promo (das Property ignoriert).
   * Mono bleibt für Preise/Pickup-Nummern hard-coded. */
  --display-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* HTML-hidden-Attribut muss alle Layout-Regeln (display:flex/grid/...)
 * überstimmen. Renderer lädt base.css NICHT, also lokales Pendant.
 * Ohne diese Regel rendert .menu-empty (display:flex) und .menu-sections
 * (display:grid) sichtbar trotz [hidden]. */
[hidden] {
  display: none !important;
}

/* Dark-Mode Token-Override für counter+menu. Akzentfarben (--d-coral,
 * --d-green) bleiben themenneutral — sie funktionieren auf hellem wie
 * dunklem Hintergrund. */
#stage[data-display-mode="dark"] {
  --d-bg:           #1a1a1c;
  --d-bg-2:         #2a2a2c;
  --d-bg-3:         #3a3a3c;
  --d-ink:          #fafaf7;
  --d-ink-mute:     #b0afaa;
  --d-ink-faint:    #8a8985;
  --d-rule:         rgba(255, 255, 255, 0.10);
  --d-rule-strong:  rgba(255, 255, 255, 0.20);
  background: var(--d-bg);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--d-bg);
  color: var(--d-ink);
  font-family: var(--display-font);
  -webkit-font-smoothing: antialiased;
}

/* SB8.1 Font-Cascade-Fix: --display-font wird via layout-engine auf
 * #stage gesetzt (je nach layout.display_font). font-family auf body
 * resolved gegen :root (Default DM Sans), Children erben den fertig-
 * resolvten String. Damit der Override auf #stage greift, MUSS
 * font-family hier neu deklariert werden — sonst sehen alle Display-
 * Texte den Default. Mono-Selektoren bleiben spezifischer und schlagen
 * diese Regel. */
#stage {
  font-family: var(--display-font);
}

body {
  /* dvh-Fallback: iOS Safari rechnet 100vh inkl. URL-Bar, dvh ist die
   * wahre Sicht-Höhe. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

/* Stage = fixe Render-Auflösung 1920×1080. transform-Scale wird vom
 * scale.js-Modul auf --shell-scale gesetzt. transform-origin top left
 * verankert die Stage am Viewport-Eck, ohne Verzerrung. */
#stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  transform: scale(var(--shell-scale, 1));
  background: var(--d-bg);
  overflow: hidden;
}

/* Empty-State / Boot-Anzeige. Liegt direkt in der Stage, wird
 * versteckt sobald ein Layout gerendert wird. */
.renderer-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-10);
  text-align: center;
  color: var(--d-ink-mute);
  font-size: var(--type-headline);
  font-weight: 500;
  letter-spacing: var(--ls-default);
  line-height: var(--lh-default);
}
.renderer-empty.is-hidden { display: none; }

/* ─── Typ: counter ─────────────────────────────────────────────── */
/* 2-Spalten-Grid: links Bild + optional Overlay, rechts Pickup-Reihen.
 * data-no-bg auf #stage wechselt auf 1-spaltig (nur Pickup). */

#stage[data-layout-type="counter"] .counter-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#stage[data-layout-type="counter"][data-no-bg] .counter-grid {
  grid-template-columns: 1fr;
}

.counter-bg-col {
  position: relative;
  overflow: hidden;
  background: var(--d-bg-3);
}
/* SB8.2: counter-bg-host als Slideshow-Container (statt Single-Img) */
.counter-bg-host {
  position: absolute;
  inset: 0;
}
.counter-bg-host .slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.counter-overlay {
  position: absolute;
  left: var(--space-9);
  bottom: var(--space-9);
  right: var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-8);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-card-l);
  box-shadow: var(--d-shadow-card);
  color: #1a1a1c;
}
/* SB8.2 Theme-Bug-Fix: data-display-mode auf .counter-overlay reagiert
 * auf den Owner-Theme-Toggle. Default (light) bleibt wie heute, Dark
 * invertiert Background + Text-Color. */
.counter-overlay[data-display-mode="dark"] {
  background: rgba(26, 26, 28, 0.85);
  color: #ffffff;
}
.counter-overlay[data-display-mode="dark"] .counter-overlay-eyebrow {
  color: #ff8a5a;
}
.counter-overlay[data-display-mode="dark"] .counter-overlay-price {
  color: rgba(255, 255, 255, 0.85);
}
.counter-overlay-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--d-coral);
}
.counter-overlay-headline {
  font-size: var(--type-headline);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.counter-overlay-price {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-title);
  font-weight: 500;
  color: var(--d-ink-mute);
}

.counter-pickup {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--space-9);
  overflow: hidden;
  height: 100%;
  min-height: 0;
}
/* SB8.6: beide Sektionen teilen sich den Platz gleichmässig (50/50).
 * min-height: 0 erlaubt flex-shrink unter intrinsic-Grösse — sonst
 * würde preparing bei 10+ Slots die ready-Section komplett vom
 * Bildschirm pushen (overflow:hidden auf .counter-pickup schneidet
 * den Rest weg). Bei 4-Reihen-Slot-Grössen kann das visuell die
 * untere Slot-Reihe leicht anschneiden — akzeptierter Trade-off
 * gegenüber komplett verschwundener "BEREIT"-Section. */
.counter-pickup-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
/* SB8.2: counter-row-header reagiert auf den Display-Font (statt
 * hard-coded Mono) und ist deutlich grösser für 3-5m-Lesbarkeit. */
.counter-row-header {
  font-family: var(--display-font);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--d-ink-mute);
}
.counter-pickup-section[data-status="ready"] .counter-row-header {
  color: var(--d-green);
}

/* SB8.7: Empty-State für leere ready-Sektion. Theme-aware: bei
 * data-display-mode="dark" hellere Schrift, bei light dunkler.
 * Variable --d-ink-faint kommt aus dem Token-Set und ist im Dark-Mode
 * sichtbar genug auf dunklem BG, im Light-Mode dezent auf hellem BG. */
.counter-pickup-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display-font);
  font-size: 64px;
  font-weight: 500;
  color: var(--d-ink-faint);
  text-align: center;
}

/* SB8.7: Slot-Grid nutzt verfügbare Section-Höhe — Slots schrumpfen
 * mit der Anzahl Reihen. data-rows treibt grid-template-rows, sodass
 * 4-Reihen-Layout in derselben Höhe passt wie 1-Reihe (kompaktere
 * Slots). aspect-ratio 16:7 ist raus — sonst koppelt Slot-Höhe an
 * (volle) Slot-Breite und 4 Reihen sprengen die Section. */
.counter-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  flex: 1 1 auto;
  min-height: 0;
}
.counter-slot-grid[data-rows="1"] { grid-template-rows: 1fr; }
.counter-slot-grid[data-rows="2"] { grid-template-rows: repeat(2, 1fr); }
.counter-slot-grid[data-rows="3"] { grid-template-rows: repeat(3, 1fr); }
.counter-slot-grid[data-rows="4"] { grid-template-rows: repeat(4, 1fr); }
.counter-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  background: var(--d-bg-2);
  border: 1px solid var(--d-rule);
  border-radius: var(--radius-card);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: var(--ls-default);
  color: var(--d-ink);
  box-shadow: var(--d-shadow-tile);
  overflow: hidden;
}
.counter-slot.is-empty {
  background: transparent;
  border: 2px dashed var(--d-rule);
  box-shadow: none;
}
.counter-slot[data-status="ready"] {
  background: var(--d-green);
  color: #ffffff;
  border-color: transparent;
}
.counter-slot[data-test="true"] {
  outline: 2px solid var(--d-amber);
  outline-offset: -4px;
}

/* Font-Skala 3-6-9-12 — Anzahl Slots bestimmt die Schrift.
 * SB8.4: Werte aggressiver hochgezogen — auf Lenovo-Tablet-Distanz
 * (3-5m) waren die alten Werte (32/26/22/18) zu klein, vor allem
 * bei 10+ "In Zubereitung"-Slots verschwanden die Nummern in den
 * Boxen. Per-Reihe-Logik ist via separatem _renderPickupSection
 * für preparing/ready schon da. */
.counter-slot-grid[data-rows="1"] .counter-slot { font-size: 96px; }
.counter-slot-grid[data-rows="2"] .counter-slot { font-size: 72px; }
.counter-slot-grid[data-rows="3"] .counter-slot { font-size: 56px; }
.counter-slot-grid[data-rows="4"] .counter-slot { font-size: 44px; }

.counter-overflow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-meta);
  color: var(--d-ink-faint);
  text-align: right;
  margin-top: var(--space-1);
}

/* ─── Typ: menu ────────────────────────────────────────────────── */
/* Optionaler Eyebrow + adaptive Sektions-Aufteilung (1/2/3/4). */

#stage[data-layout-type="menu"] .menu-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-9);
  gap: var(--space-7);
}
.menu-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-title);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--d-coral);
}
.menu-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-headline);
  color: var(--d-ink-mute);
}

.menu-sections {
  flex: 1;
  display: grid;
  gap: var(--space-9);
  min-height: 0;
}
.menu-sections[data-count="1"] { grid-template-columns: 1fr; }
.menu-sections[data-count="2"] { grid-template-columns: 1fr 1fr; }
.menu-sections[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; }
.menu-sections[data-count="4"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
/* 1 Sektion: Produkte 2-spaltig innerhalb der Sektion */
.menu-sections[data-count="1"] .menu-section-products {
  columns: 2;
  column-gap: var(--space-9);
}
.menu-sections[data-count="1"] .menu-product-row {
  break-inside: avoid;
}

.menu-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}
.menu-section-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-title);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--d-coral);
  border-bottom: 1px solid var(--d-rule);
  padding-bottom: var(--space-3);
}
.menu-section-products {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.menu-product-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--type-body);
  color: var(--d-ink);
}
.menu-product-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-product-price {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--d-ink-mute);
}

/* ─── Typ: entrance ────────────────────────────────────────────── */
/* Hintergrundbild full-bleed + dunkler Bottom-Gradient + Texte +
 * optional Top-Pick-Cards. Kein Theme-Switch (Bild bestimmt Stimmung). */

#stage[data-layout-type="entrance"] .entrance-stage {
  position: absolute;
  inset: 0;
  background: #1a1a1c;
}
/* SB7: BG-Host (Slideshow-Modul rendert hier rein) statt Single-IMG.
 * z-index 0, Gradient + Content liegen darüber. */
.entrance-bg-host {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.entrance-bg-host .slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.entrance-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.30) 50%,
    rgba(0, 0, 0, 0.70) 100%);
  pointer-events: none;
}
.entrance-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: var(--space-9);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-7);
  color: #ffffff;
}
.entrance-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-title);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
}
.entrance-headline {
  font-size: var(--type-display-3);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.50);
}
.entrance-top-picks {
  display: flex;
  gap: var(--space-7);
  margin-top: var(--space-7);
}
.entrance-top-picks[hidden] { display: none; }
.entrance-pick-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-7);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-card-l);
  color: #1a1a1c;
}
.entrance-pick-name {
  font-size: var(--type-title);
  font-weight: 500;
  letter-spacing: var(--ls-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entrance-pick-price {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--type-body);
  color: var(--d-coral);
}

/* ─── Typ: promo ───────────────────────────────────────────────── */
/* Vollbild-Slideshow mit Crossfade. Kein Theme-Switch. */

#stage[data-layout-type="promo"] .slideshow {
  position: absolute;
  inset: 0;
  background: var(--d-bg);
  overflow: hidden;
}
.slideshow-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.slideshow-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--type-headline);
  font-weight: 500;
  color: var(--d-ink-mute);
  background: var(--d-bg-2);
  letter-spacing: var(--ls-default);
}
.slideshow-empty::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  background: var(--d-coral);
  border-radius: 2px;
}
.slideshow-empty[hidden] { display: none; }

/* ─── Fullscreen-Tap-Overlay ───────────────────────────────────── */
/* Erscheint einmalig beim Boot, fordert zum Tap auf, um die
 * Fullscreen-API zu aktivieren. Kein Layout-bezogener Effekt. */

.fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 14, 0.85);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: opacity 300ms ease;
  opacity: 1;
}
.fs-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.fs-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-9);
  background: var(--d-bg-2);
  border: 1px solid var(--d-rule);
  border-radius: var(--radius-card-l);
  box-shadow: var(--d-shadow-card);
  color: var(--d-ink);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--type-title);
  font-weight: 500;
  letter-spacing: var(--ls-default);
}
.fs-overlay-icon {
  display: flex;
  color: var(--d-coral);
}
.fs-overlay-icon svg { display: block; }

/* ─── Promo/Entrance Slideshow-Transitions (SB6, SB8.1 reduced) ─
 * data-transition auf .slideshow steuert den Wechsel-Effekt.
 * Crossfade ist Default. ken-burns überlagert Crossfade mit
 * kontinuierlichem CSS-Zoom auf das aktuelle Bild. */

@keyframes ken-burns-zoom {
  from { transform: scale(1.0); transform-origin: center }
  to   { transform: scale(1.08); transform-origin: center }
}
.slideshow[data-transition="ken-burns"] .slideshow-img.slideshow-current {
  animation: ken-burns-zoom var(--ss-interval-ms, 8000ms) ease-out forwards;
}

/* ─── Reduced-Motion Override ───────────────────────────────────
 * Wer prefers-reduced-motion: reduce gesetzt hat, kriegt keine
 * Animationen — Slideshow-Wechsel instant ohne Crossfade/Ken-Burns. */
@media (prefers-reduced-motion: reduce) {
  .slideshow .slideshow-img { transition: opacity 0ms !important; }
  .slideshow[data-transition="ken-burns"] .slideshow-img.slideshow-current {
    animation: none !important;
  }
}

/* ─── Entrance Overlay-Position (SB7) ─────────────────────────────
 * Default 'bottom' bleibt unverändert. top/left/right überschreiben
 * Layout + Gradient-Richtung. Top-Picks-Layout passt sich bei
 * left/right von Reihe auf Spalte. */

.entrance-content[data-position="top"] {
  justify-content: flex-start;
}
.entrance-content[data-position="left"] {
  width: 50%;
  justify-content: center;
}
.entrance-content[data-position="right"] {
  width: 50%;
  left: 50%;
  justify-content: center;
}
.entrance-content[data-position="left"] .entrance-top-picks,
.entrance-content[data-position="right"] .entrance-top-picks {
  flex-direction: column;
}

/* Gradient-Richtung folgt der Position (Dark-Theme) */
.entrance-stage[data-position="bottom"] .entrance-gradient {
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0.70) 100%);
}
.entrance-stage[data-position="top"] .entrance-gradient {
  background: linear-gradient(to top,
    rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0.70) 100%);
}
.entrance-stage[data-position="left"] .entrance-gradient {
  background: linear-gradient(to left,
    rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.75) 100%);
}
.entrance-stage[data-position="right"] .entrance-gradient {
  background: linear-gradient(to right,
    rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.75) 100%);
}

/* ─── Light-Overlay-Theme Override (SB7) ──────────────────────────
 * Helle Texte → dunkle Texte; Gradient kippt von dunkel auf hell. */

.entrance-content[data-overlay-theme="light"] {
  color: #1a1a1c;
}
.entrance-content[data-overlay-theme="light"] .entrance-eyebrow {
  color: rgba(26, 26, 28, 0.85);
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.40);
}
.entrance-content[data-overlay-theme="light"] .entrance-headline {
  text-shadow: 0 4px 16px rgba(255, 255, 255, 0.50);
}
.entrance-content[data-overlay-theme="light"] .entrance-pick-card {
  background: rgba(26, 26, 28, 0.85);
  color: #ffffff;
}
.entrance-content[data-overlay-theme="light"] .entrance-pick-name {
  color: #ffffff;
}
.entrance-content[data-overlay-theme="light"] .entrance-pick-price {
  color: #ff8a5a;
}

/* Light-Gradient pro Position (4 Definitionen, kombiniert mit dem
 * data-overlay-theme Attribut auf der entrance-stage) */
.entrance-stage[data-overlay-theme="light"][data-position="bottom"] .entrance-gradient {
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.40) 50%, rgba(255,255,255,0.75) 100%);
}
.entrance-stage[data-overlay-theme="light"][data-position="top"] .entrance-gradient {
  background: linear-gradient(to top,
    rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.40) 50%, rgba(255,255,255,0.75) 100%);
}
.entrance-stage[data-overlay-theme="light"][data-position="left"] .entrance-gradient {
  background: linear-gradient(to left,
    rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.50) 50%, rgba(255,255,255,0.80) 100%);
}
.entrance-stage[data-overlay-theme="light"][data-position="right"] .entrance-gradient {
  background: linear-gradient(to right,
    rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.50) 50%, rgba(255,255,255,0.80) 100%);
}