/* =====================================================================================================
   Helles Design "Morgenhimmel" (gewählt 4.11.2026, Variante Hell 2.2) – gilt, solange <html class="theme-light">
   gesetzt ist und diese Datei eingebunden ist (index.html, impressum.html).

   ZURÜCK ZUM DUNKLEN DESIGN ("Weltraum"): in index.html und impressum.html bei <html> die Klasse
   "theme-light" entfernen und die <link>-Zeile zu theme-light.css löschen. Fertig – styles.css enthält das
   dunkle Design unverändert, globe3d.js schaltet Globus-Licht/-Farben automatisch mit.
   Weitere getestete Varianten (Hell 1, 2, 2.3, 3): tools/design-archive/
   ===================================================================================================== */

/* Seitenfarbe "Morgendunst": helles Grau mit einem Hauch Gelb; Abriss-Flächen etwas heller */
html.theme-light { --page: #f4f3ea; --paper-2: #fbf7f3; }

/* ---------- Kopfzeile: hell, Glas-Effekt ---------- */
html.theme-light .site-header {
  background: rgba(255, 255, 255, 0.8);
  border-bottom-color: rgba(14, 34, 64, 0.1);
  color: var(--navy-900);
}
html.theme-light .cart-link { border-color: rgba(14, 34, 64, 0.22); }
html.theme-light .lang-switch { color: rgba(14, 34, 64, 0.3); }
html.theme-light .lang-switch button { color: rgba(14, 34, 64, 0.5); }
html.theme-light .lang-switch button:hover,
html.theme-light .lang-switch button[aria-pressed="true"] { color: var(--navy-900); }

/* ---------- Bühne: Morgenhimmel statt Weltraum – Himmelblau läuft genau in die Seitenfarbe aus ---------- */
html.theme-light .stage { background: var(--page); }
html.theme-light .stage::after { background: none; }   /* kein Übergangsverlauf nötig: Himmel endet in Seitenfarbe */
html.theme-light .stage-sticky {
  color: var(--navy-900);
  background:
    radial-gradient(60% 55% at 50% 52%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #b9d6f2 0%, #d6e7f7 40%, #eef0f2 68%, var(--page) 100%);
}
/* statt Sterne: zwei ganz zarte Wolkenschleier */
html.theme-light .stage-sticky::before {
  opacity: 1;
  background-image:
    radial-gradient(40% 9% at 18% 22%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(34% 7% at 82% 34%, rgba(255, 255, 255, 0.6), transparent 70%);
}

/* ---------- Hero-Texte dunkel ---------- */
html.theme-light .lede { color: rgba(14, 34, 64, 0.72); }
html.theme-light .lede strong,
html.theme-light .lede-price { color: var(--navy-900); }
html.theme-light .lede-price span { color: var(--coral-hover); }
html.theme-light .scroll-cue { color: rgba(14, 34, 64, 0.6); }

/* ---------- Globus-Bedienung ---------- */
html.theme-light .globe-hint { background: rgba(10, 26, 51, 0.72); border-color: rgba(10, 26, 51, 0.2); color: #fff; }
html.theme-light .hud-arrow { color: var(--navy-900); background: rgba(255, 255, 255, 0.7); border-color: rgba(14, 34, 64, 0.22); box-shadow: 0 6px 18px -10px rgba(10, 26, 51, 0.5); }
html.theme-light .hud-arrow:hover { border-color: var(--coral); background: #fff; }
html.theme-light .hud-card { box-shadow: 0 18px 40px -22px rgba(10, 26, 51, 0.7); }
html.theme-light .tag:not(.active) { box-shadow: 0 6px 16px -10px rgba(10, 26, 51, 0.6); }
/* Alle Städte gleich: weiße Schilder; die ausgewählte Stadt wird koralle (.tag.active) –
   ob kaufbar oder "bald verfügbar", zeigt nur die Anzeigetafel darunter */
html.theme-light .tag:not(.active) { background: rgba(255, 255, 255, 0.88); border-color: rgba(14, 34, 64, 0.15); color: var(--navy-900); }
html.theme-light .tag:not(.active):hover { background: #fff; }