/* =====================================================================
   Allyver Theme System
   - Definiert semantische Farb-Tokens fuer Surface/Text/Border
   - Default = Dark (heutiges Erscheinungsbild)
   - [data-theme="light"] kehrt die semantischen Tokens fuer Light um
   - Brand-Farben (Primary/Accent/Status) bleiben in beiden Themes gleich
   - Aliase fuer die alten --dark-XXX / --white Variablen werden in
     style.css gepflegt und verweisen auf die semantischen Tokens.
   ===================================================================== */

:root {
  /* Surface (Backgrounds, von tiefster zur erhoehtesten Ebene) */
  --surface-base: #0a0f1c;       /* App-Hintergrund (entspricht --dark-900) */
  --surface-elevated: #111827;   /* Cards, Sektionen (entspricht --dark-800) */
  --surface-overlay: #1f2937;    /* Modals, Popups, Eingaben (entspricht --dark-700) */
  --surface-sunken: #060912;     /* tiefer als base (Hero, Footer) */

  /* Border / Divider */
  --border-strong: #374151;      /* (entspricht --dark-600) */
  --border-subtle: #4b5563;      /* (entspricht --dark-500) */

  /* Text-Tonleiter */
  --text-muted: #6b7280;         /* (entspricht --dark-400) */
  --text-secondary: #9ca3af;     /* (entspricht --dark-300) */
  --text-primary: #d1d5db;       /* (entspricht --dark-200) */
  --text-strong: #ffffff;        /* (entspricht --white) – Headlines, klare Texte */
  --text-inverse: #0a0f1c;       /* Text auf hellen Flaechen */

  /* Generische Schatten (passen zu dunklem Hintergrund) */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-strong: 0 16px 40px rgba(0, 0, 0, 0.55);

  /* Page-Hintergrund (wird auf body angewendet, Light-Mode setzt eigenen Wert) */
  --page-bg: var(--surface-base);
  --page-text: var(--text-primary);

  /* Glas-Effekt fuer Header/Cards mit Backdrop-Filter */
  --glass-bg: rgba(17, 24, 39, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* Tint fuer Body-Hintergrund-Pattern (siehe body::before Overrides unten) */
  --bg-tint-1: rgba(0, 212, 170, 0.08);
  --bg-tint-2: rgba(108, 92, 231, 0.06);
}

/* ===== Light Theme Overrides ===== */
[data-theme="light"] {
  --surface-base: #ffffff;
  --surface-elevated: #f8fafc;
  --surface-overlay: #f1f5f9;
  --surface-sunken: #eef2f7;

  --border-strong: #cbd5e1;
  --border-subtle: #e2e8f0;

  --text-muted: #64748b;
  --text-secondary: #475569;
  --text-primary: #1e293b;
  --text-strong: #0f172a;
  --text-inverse: #ffffff;

  --shadow-soft: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-strong: 0 16px 40px rgba(15, 23, 42, 0.16);

  --page-bg: var(--surface-base);
  --page-text: var(--text-primary);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(15, 23, 42, 0.08);

  --bg-tint-1: rgba(0, 212, 170, 0.06);
  --bg-tint-2: rgba(108, 92, 231, 0.04);
}

/* ===== Light-Theme Body / Globale Anpassungen =====
   Reicht die semantischen Tokens an die Body-Properties weiter.
   style.css setzt body { background: var(--dark-900) } – via Alias-Layer
   bekommt das im Light-Mode automatisch den hellen Wert. */

[data-theme="light"] html {
  background: var(--surface-base) !important;
}
[data-theme="light"] body {
  background: var(--surface-base) !important;
  color: var(--text-primary) !important;
}

/* Body-Hintergrund-Pattern in Light leiser stellen (sonst zu unruhig) */
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse at 20% 20%, var(--bg-tint-1) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, var(--bg-tint-2) 0%, transparent 60%),
    var(--surface-base) !important;
  opacity: 0.7;
}

/* ===== Light-Mode Pattern-Overrides =====
   Viele Templates verwenden hartkodierte rgba(255,255,255,X) fuer
   Borders/Hovers/Glass-Effekte. Im Light-Mode sieht das alles unsichtbar
   aus. Wir invertieren diese Patterns gezielt fuer die haeufigsten
   Selektoren. */
[data-theme="light"] .navbar,
[data-theme="light"] .site-footer,
[data-theme="light"] .footer-mobile-brand,
[data-theme="light"] .footer-mobile-links,
[data-theme="light"] .footer-mobile-group {
  border-color: var(--border-subtle) !important;
}

/* Footer: dunkler hellgrauer Hintergrund statt fast-schwarz */
[data-theme="light"] .site-footer {
  background: var(--surface-elevated) !important;
  color: var(--text-primary);
}
[data-theme="light"] .footer-brand p,
[data-theme="light"] .footer-column a,
[data-theme="light"] .footer-mobile-row a {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .footer-column h4 {
  color: var(--text-strong) !important;
}
[data-theme="light"] .footer-mobile-brand p,
[data-theme="light"] .footer-mobile-label {
  color: var(--text-muted) !important;
}

/* Navbar: helle Glasflaeche */
[data-theme="light"] .navbar {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle) !important;
}
[data-theme="light"] .navbar a,
[data-theme="light"] .navbar-menu a {
  color: var(--text-primary);
}
[data-theme="light"] .navbar-slogan {
  color: var(--text-secondary) !important;
}

/* Mobile Fullscreen-Menu: helles Theme */
[data-theme="light"] .fullscreen-menu {
  background: var(--surface-base) !important;
  color: var(--text-primary);
}
[data-theme="light"] .fullscreen-menu-bg .menu-gradient-orb {
  opacity: 0.4;
}
[data-theme="light"] .fullscreen-nav-item {
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .fullscreen-nav-item:hover,
[data-theme="light"] .fullscreen-nav-item:active {
  background: rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .fullscreen-nav-section-title,
[data-theme="light"] .menu-tagline {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .fullscreen-menu-close .close-line {
  background: var(--text-primary) !important;
}
[data-theme="light"] .hamburger-line {
  background: var(--text-primary) !important;
}

/* Generische Cards/Sections die direkt rgba(255,255,255,X) Borders nutzen –
   ueber attribute selector den haeufigsten Fall (1px solid weiss-alpha) abfangen */
[data-theme="light"] [style*="rgba(255, 255, 255, 0.05)"],
[data-theme="light"] [style*="rgba(255,255,255,0.05)"] {
  /* visuell sehr leichte Borders – im Light-Mode mit dezentem Dunkel-Tint */
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Eingabefelder / Form Controls */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: var(--surface-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Tabellen / Listen */
[data-theme="light"] table {
  color: var(--text-primary);
}
[data-theme="light"] table th {
  background: var(--surface-overlay);
  color: var(--text-strong);
}
[data-theme="light"] table td {
  border-color: var(--border-subtle);
}

/* Code/Kbd */
[data-theme="light"] code,
[data-theme="light"] kbd,
[data-theme="light"] pre {
  background: var(--surface-overlay);
  color: var(--text-strong);
}

/* Scrollbars (WebKit) */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--surface-elevated);
}

/* Native Form Controls / Scrollbars folgen dem Theme */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* ===== Sanfte Transition beim Theme-Wechsel =====
   Nicht auf jedes Element anwenden (verursacht Lag) – nur die wichtigsten
   Hintergrund-/Text-/Border-Eigenschaften, und auch das nur kurz. */
html.theme-transitioning,
html.theme-transitioning * {
  transition:
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease,
    fill 220ms ease,
    stroke 220ms ease !important;
}

/* ===== Bilder mit Theme-spezifischer Behandlung =====
   Klasse .theme-invert-on-light: weisse SVG-Logos im Light-Mode invertieren.
   Klasse .theme-hide-on-dark / .theme-hide-on-light: Sichtbarkeit per Theme. */
[data-theme="light"] .theme-invert-on-light {
  filter: invert(1) hue-rotate(180deg);
}
[data-theme="dark"] .theme-hide-on-dark,
:root:not([data-theme="light"]) .theme-hide-on-dark { display: none !important; }
[data-theme="light"] .theme-hide-on-light { display: none !important; }

/* Allyver-Logo: KEINE Inversion – Logo hat bereits eigene Farben
   fuer beide Themes und soll unveraendert bleiben. */

/* ===== Theme Toggle Button =====
   Drei Varianten: --icon (Header/Nav), --menu (Mobile-Menue),
   --footer (dezent im Footer). Die Sun/Moon-Icons werden je nach
   aktivem Theme ein-/ausgeblendet. */
.theme-toggle {
  display: none !important;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--border-strong, #374151);
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  line-height: 1;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-subtle, #4b5563);
  color: var(--text-strong, #fff);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-strong, #0f172a);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--primary, #00d4aa);
  outline-offset: 2px;
}
.theme-toggle:active { transform: scale(0.96); }

.theme-toggle-icon {
  position: relative;
  width: 1.05em;
  height: 1.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle-icon i {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.theme-toggle-icon-sun  { opacity: 0; transform: rotate(-90deg) scale(0.7); color: #f59e0b; }
.theme-toggle-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); color: #c4b5fd; }
[data-theme="light"] .theme-toggle-icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="light"] .theme-toggle-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.7); }

/* Variante: nur Icon (kompakt fuer Header) */
.theme-toggle--icon {
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
}
.theme-toggle--icon .theme-toggle-label { display: none; }

/* Label-Logik: zeigt jeweils das Wort fuer das _zukuenftige_ Theme an */
.theme-toggle-label-light { display: inline; }
.theme-toggle-label-dark { display: none; }
[data-theme="light"] .theme-toggle-label-light { display: none; }
[data-theme="light"] .theme-toggle-label-dark { display: inline; }

/* Variante: Mobile-Menue Listenpunkt */
.theme-toggle--menu {
  width: 100%;
  justify-content: flex-start;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--text-primary, #d1d5db);
}
[data-theme="light"] .theme-toggle--menu {
  border-color: rgba(15, 23, 42, 0.10);
}

/* Variante: dezenter Link im Footer */
.theme-toggle--footer {
  font-size: 0.78rem;
  padding: 0.35rem 0.7rem;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #9ca3af);
  font-weight: 600;
}
[data-theme="light"] .theme-toggle--footer {
  background: rgba(15, 23, 42, 0.04);
}

/* =======================================================================
   LIGHT-MODE SEKTIONS-OVERRIDES
   Alles was hardcodierte Dark-Farben/rgba nutzt und nicht ueber die
   semantischen Tokens laeuft. Geordnet nach Seitenposition (oben→unten).
   ======================================================================= */

/* ===== Stats-Bar ===== */
[data-theme="light"] .stats-bar {
  background: var(--surface-elevated) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .stat-item {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .stat-item strong {
  color: var(--text-strong) !important;
}

/* ===== Merchant-Cards (Mall) ===== */
[data-theme="light"] .merchant-card,
[data-theme="light"] .mall-card {
  background: var(--surface-elevated) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-soft);
}
[data-theme="light"] .merchant-card:hover,
[data-theme="light"] .mall-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-strong);
}

/* ===== Partner-Hero Section (Verkaufe lokal. Wachse global.) ===== */
[data-theme="light"] .partner-hero-section {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(0, 212, 170, 0.06), transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(108, 92, 231, 0.06), transparent 50%),
    var(--surface-elevated) !important;
}
[data-theme="light"] .partner-hero-title {
  color: var(--text-strong) !important;
}
[data-theme="light"] .partner-hero-subtitle {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .partner-hero-stat-value {
  color: var(--text-strong) !important;
}
[data-theme="light"] .partner-hero-stat-label {
  color: var(--text-muted) !important;
}
[data-theme="light"] .partner-hero-btn-glass {
  background: rgba(15, 23, 42, 0.06) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .partner-hero-ring {
  border-color: rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .partner-floating-card {
  background: var(--surface-base) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-soft) !important;
  color: var(--text-primary) !important;
}

/* ===== Mall-Empty-Hero (Pole Position / CTA Cards) ===== */
[data-theme="light"] .mall-empty-hero {
  background: var(--surface-elevated) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .mall-empty-hero::before {
  opacity: 0.3 !important;
}
[data-theme="light"] .mall-empty-hero-title {
  color: var(--text-strong) !important;
}
[data-theme="light"] .mall-empty-hero-desc {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .mall-empty-hero-motivation {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .mall-empty-hero-notice {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}

/* ===== CTA Section (Verkaufe lokal. / Jetzt kostenlos starten) ===== */
[data-theme="light"] .cta-section {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(0, 212, 170, 0.06), transparent 50%),
    radial-gradient(ellipse at 70% 50%, rgba(108, 92, 231, 0.06), transparent 50%),
    var(--surface-elevated) !important;
}
[data-theme="light"] .cta-section-title {
  color: var(--text-strong) !important;
}
[data-theme="light"] .cta-section-subtitle {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .cta-section-trust span {
  color: var(--text-muted) !important;
}

/* ===== Customer-Benefits Section ===== */
[data-theme="light"] .customer-benefits-section,
[data-theme="light"] .benefits-section {
  background: var(--surface-base) !important;
}
[data-theme="light"] .benefit-card,
[data-theme="light"] .customer-benefit-card {
  background: var(--surface-elevated) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .benefit-card h3,
[data-theme="light"] .customer-benefit-card h3 {
  color: var(--text-strong) !important;
}
[data-theme="light"] .benefit-card p,
[data-theme="light"] .customer-benefit-card p {
  color: var(--text-secondary) !important;
}

/* ===== Staedte-Sektion (cities-section / de-*) ===== */
[data-theme="light"] .de-section {
  background: var(--surface-base) !important;
}
[data-theme="light"] .de-h2 {
  color: var(--text-strong) !important;
}
[data-theme="light"] .de-country-pill {
  color: var(--text-secondary) !important;
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .de-country-pill:hover {
  color: var(--text-strong) !important;
  border-color: rgba(0, 212, 170, 0.3) !important;
  background: rgba(0, 212, 170, 0.06) !important;
}
[data-theme="light"] .de-country-pill.active {
  color: var(--text-inverse) !important;
}
[data-theme="light"] .de-bl-pill {
  color: var(--text-secondary) !important;
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .de-bl-pill:hover {
  color: var(--text-strong) !important;
}
[data-theme="light"] .de-bl-pill.active {
  color: var(--text-strong) !important;
  background: rgba(0, 212, 170, 0.08) !important;
  border-color: rgba(0, 212, 170, 0.35) !important;
}
[data-theme="light"] .de-active-bl-inner {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.06), rgba(108, 92, 231, 0.04)) !important;
  border-color: rgba(0, 212, 170, 0.2) !important;
}
[data-theme="light"] .de-bl-info strong {
  color: var(--text-strong) !important;
}
[data-theme="light"] .de-bl-info span {
  color: var(--text-muted) !important;
}
[data-theme="light"] .de-bl-close {
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-muted) !important;
}
[data-theme="light"] .de-city {
  background: rgba(15, 23, 42, 0.02) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .de-city:hover {
  border-color: rgba(0, 212, 170, 0.3) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(0, 212, 170, 0.1) !important;
}
[data-theme="light"] .de-rank {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.15), rgba(0, 212, 170, 0.06)) !important;
  border-color: rgba(0, 212, 170, 0.25) !important;
}
[data-theme="light"] .de-rank.gold {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.25), rgba(0, 212, 170, 0.10)) !important;
  border-color: rgba(0, 212, 170, 0.4) !important;
}
[data-theme="light"] .de-city-name {
  color: var(--text-strong) !important;
}
[data-theme="light"] .de-arrow {
  color: var(--text-muted) !important;
}
[data-theme="light"] .de-seo {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .de-seo a {
  color: var(--text-muted) !important;
}
[data-theme="light"] .de-more-btn {
  background: rgba(0, 212, 170, 0.04) !important;
  border-color: rgba(0, 212, 170, 0.2) !important;
}

/* ===== Bottom Navigation (Kategorie-Bar) ===== */
[data-theme="light"] .bottom-navbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--border-subtle) !important;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06) !important;
}
[data-theme="light"] .bottom-nav-icon-btn {
  color: var(--text-muted) !important;
}
[data-theme="light"] .bottom-nav-icon-btn:hover {
  color: var(--primary, #00D4AA) !important;
}
[data-theme="light"] .bottom-nav-icon-btn.active {
  color: var(--primary, #00D4AA) !important;
}
[data-theme="light"] .bottom-nav-icon-label {
  color: var(--text-muted) !important;
}
[data-theme="light"] .bottom-nav-subcategory-chip {
  background: var(--surface-overlay) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .bottom-nav-subcategory-chip i {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .bottom-nav-subcategory-chip .chip-count {
  background: rgba(15, 23, 42, 0.08) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .bottom-nav-subcategory-chip:hover {
  background: rgba(0, 212, 170, 0.10) !important;
  border-color: rgba(0, 212, 170, 0.35) !important;
  color: var(--primary, #00D4AA) !important;
}
[data-theme="light"] .bottom-nav-subcategory-chip.active {
  background: linear-gradient(135deg, var(--primary, #00D4AA), #00B894) !important;
  border-color: transparent !important;
  color: #fff !important;
}
[data-theme="light"] .bottom-nav-subcategory-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}
[data-theme="light"] .bottom-nav-subcategory-arrow {
  background: rgba(0, 212, 170, 0.08) !important;
  border-color: var(--border-strong) !important;
}

/* ===== Floating Search FAB ===== */
[data-theme="light"] .floating-search-fab .fab-search-container {
  background: var(--surface-base) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-soft) !important;
}
[data-theme="light"] .fab-search-input {
  color: var(--text-primary) !important;
}
[data-theme="light"] .fab-search-results {
  background: var(--surface-base) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-strong) !important;
}

/* ===== Footer: sicherstellen dass alle Texte + Borders lesbar sind ===== */
[data-theme="light"] .site-footer {
  border-top: 1px solid var(--border-subtle) !important;
}
[data-theme="light"] .footer-mobile-brand {
  border-bottom: 1px solid var(--border-subtle) !important;
}
[data-theme="light"] .footer-mobile-links {
  border-bottom: 1px solid var(--border-subtle) !important;
}
[data-theme="light"] .footer-mobile-group:first-child {
  border-right: 1px solid var(--border-subtle) !important;
}
[data-theme="light"] .footer-social-compact {
  color: var(--text-muted) !important;
}
[data-theme="light"] .footer-social-icon {
  color: var(--text-muted) !important;
  background: rgba(15, 23, 42, 0.05) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .footer-social-icon:hover {
  color: var(--primary, #00D4AA) !important;
  background: rgba(0, 212, 170, 0.06) !important;
}
[data-theme="light"] .footer-store-badge {
  color: var(--text-secondary) !important;
  border-color: var(--border-subtle) !important;
  background: rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .footer-social-label {
  color: var(--text-muted) !important;
}

/* Powered-by / Copyright im Footer */
[data-theme="light"] .powered-by-bar {
  border-top-color: var(--border-subtle) !important;
}
[data-theme="light"] .powered-by-bar .copyright-easter-egg {
  color: var(--text-muted) !important;
}
[data-theme="light"] .powered-by-link {
  color: var(--text-muted) !important;
}
[data-theme="light"] .powered-by-link:hover {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .powered-by-brand {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .powered-by,
[data-theme="light"] .footer-powered {
  color: var(--text-muted) !important;
}
[data-theme="light"] .powered-by a,
[data-theme="light"] .footer-powered a {
  color: var(--text-secondary) !important;
}

/* ===== Globales rgba-Override-Pattern =====
   Die haeufigsten rgba(255,255,255,*)-Patterns auf <section>/<div> Ebene. */
[data-theme="light"] [style*="rgba(255, 255, 255, 0.0"],
[data-theme="light"] [style*="rgba(255,255,255,0.0"] {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Text-Farbe: alle #fff / #ffffff auf Nicht-Brand-Elementen → token-basiert */
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #FFF"],
[data-theme="light"] [style*="color:#FFF"],
[data-theme="light"] [style*="color: white"],
[data-theme="light"] [style*="color:white"] {
  color: var(--text-strong) !important;
}

/* Background-Farbe: inline dark backgrounds → surfaces */
[data-theme="light"] [style*="background: #0a0f1c"],
[data-theme="light"] [style*="background:#0a0f1c"],
[data-theme="light"] [style*="background-color: #0a0f1c"],
[data-theme="light"] [style*="background: #111827"],
[data-theme="light"] [style*="background:#111827"],
[data-theme="light"] [style*="background-color: #111827"],
[data-theme="light"] [style*="background: #1f2937"],
[data-theme="light"] [style*="background:#1f2937"],
[data-theme="light"] [style*="background-color: #1f2937"] {
  background: var(--surface-elevated) !important;
}

/* ===== Splashscreen ===== */
[data-theme="light"] .splash-screen {
  background: var(--surface-base) !important;
}

/* ===== Cart-Overlay / Drawer ===== */
[data-theme="light"] .cart-overlay,
[data-theme="light"] .cart-drawer {
  background: var(--surface-base) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

/* ===== Suchfeld (Sticky Controls) ===== */
[data-theme="light"] .mall-search-wrapper,
[data-theme="light"] .mall-search-field {
  background: var(--surface-elevated) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .mall-search-field input {
  color: var(--text-primary) !important;
}
[data-theme="light"] .mall-search-btn {
  color: var(--text-inverse) !important;
}

/* ===== City Popup (Standort wählen) ===== */
[data-theme="light"] .city-popup {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18), 0 0 0 1px var(--border-subtle) !important;
}
[data-theme="light"] .city-popup-header {
  border-bottom-color: var(--border-subtle) !important;
}
[data-theme="light"] .city-popup-header h3 {
  color: var(--text-strong) !important;
}
[data-theme="light"] .city-popup-close {
  background: rgba(15, 23, 42, 0.05) !important;
  color: var(--text-muted) !important;
}
[data-theme="light"] .city-popup-close:hover {
  background: rgba(15, 23, 42, 0.1) !important;
  color: var(--text-strong) !important;
}
[data-theme="light"] .city-popup-search-input i {
  color: var(--text-muted) !important;
}
[data-theme="light"] .city-popup-search-input input {
  background: var(--surface-overlay) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-strong) !important;
}
[data-theme="light"] .city-popup-search-input input::placeholder {
  color: var(--text-muted) !important;
}
[data-theme="light"] .city-popup-search-input input:focus {
  border-color: var(--primary, #00D4AA) !important;
  background: rgba(0, 212, 170, 0.04) !important;
}
[data-theme="light"] .city-popup-geo-btn {
  border-color: var(--border-subtle) !important;
  background: var(--surface-overlay) !important;
  color: var(--text-muted) !important;
}
[data-theme="light"] .city-popup-geo-btn:hover {
  border-color: var(--primary, #00D4AA) !important;
  color: var(--primary, #00D4AA) !important;
}
[data-theme="light"] .city-popup-section-title {
  color: var(--text-muted) !important;
}
[data-theme="light"] .city-popup-countries {
  border-bottom-color: var(--border-subtle) !important;
}
[data-theme="light"] .city-country-chip {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.04), rgba(108, 92, 231, 0.03)) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .city-country-chip:hover {
  background: rgba(0, 212, 170, 0.08) !important;
  border-color: rgba(0, 212, 170, 0.3) !important;
  color: var(--text-strong) !important;
}
[data-theme="light"] .city-country-text strong {
  color: var(--text-strong) !important;
}
[data-theme="light"] .city-chip {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .city-chip:hover {
  background: rgba(0, 212, 170, 0.06) !important;
  border-color: rgba(0, 212, 170, 0.2) !important;
  color: var(--text-strong) !important;
}
[data-theme="light"] .city-chip i {
  color: var(--primary, #00D4AA) !important;
}
[data-theme="light"] .city-popup-result-item {
  color: var(--text-primary) !important;
}
[data-theme="light"] .city-popup-result-item:hover {
  background: rgba(0, 212, 170, 0.06) !important;
  color: var(--text-strong) !important;
}
[data-theme="light"] .city-popup-result-item .city-plz {
  color: var(--text-muted) !important;
}
[data-theme="light"] .city-popup-no-results {
  color: var(--text-muted) !important;
}
[data-theme="light"] .city-popup-current-btn {
  background: rgba(0, 212, 170, 0.06) !important;
  border-color: rgba(0, 212, 170, 0.2) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .city-popup-current-btn:hover {
  background: rgba(0, 212, 170, 0.12) !important;
  color: var(--text-strong) !important;
}

/* ===== Radius-Selector (Umkreis-Button + Popup) ===== */
[data-theme="light"] .navbar-radius-btn {
  background: rgba(108, 92, 231, 0.08) !important;
  border-color: rgba(108, 92, 231, 0.25) !important;
  color: #5b4cc4 !important;
}
[data-theme="light"] .navbar-radius-text {
  color: #5b4cc4 !important;
}
[data-theme="light"] .navbar-radius-chevron {
  color: rgba(91, 76, 196, 0.5) !important;
}
[data-theme="light"] .navbar-radius-btn:hover {
  background: rgba(108, 92, 231, 0.14) !important;
  border-color: rgba(108, 92, 231, 0.4) !important;
}
[data-theme="light"] .navbar-radius-btn.is-open {
  background: rgba(108, 92, 231, 0.18) !important;
  border-color: rgba(108, 92, 231, 0.5) !important;
}
[data-theme="light"] .navbar-radius-btn.is-open .navbar-radius-chevron {
  color: #5b4cc4 !important;
}
[data-theme="light"] .navbar-radius-pop {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14), 0 0 0 1px var(--border-subtle) !important;
}
[data-theme="light"] .navbar-radius-pop-arrow {
  background: rgba(255, 255, 255, 0.98) !important;
  border-left-color: var(--border-subtle) !important;
  border-top-color: var(--border-subtle) !important;
}
[data-theme="light"] .navbar-radius-pop-header {
  border-bottom-color: var(--border-subtle) !important;
}
[data-theme="light"] .navbar-radius-pop-title {
  color: var(--text-muted) !important;
}
[data-theme="light"] .navbar-radius-pop-hint {
  color: var(--text-muted) !important;
}
[data-theme="light"] .radius-opt {
  background: rgba(15, 23, 42, 0.03) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .radius-opt:hover {
  background: rgba(108, 92, 231, 0.08) !important;
  border-color: rgba(108, 92, 231, 0.3) !important;
  color: var(--text-strong) !important;
}
[data-theme="light"] .radius-opt[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(0, 212, 170, 0.10)) !important;
  border-color: rgba(0, 212, 170, 0.5) !important;
  color: var(--text-strong) !important;
  box-shadow: 0 4px 14px rgba(0, 212, 170, 0.12) !important;
}
[data-theme="light"] .radius-opt-plus {
  color: var(--text-muted) !important;
}
[data-theme="light"] .radius-opt[aria-selected="true"] .radius-opt-plus {
  color: var(--text-strong) !important;
}
[data-theme="light"] .radius-opt-unit {
  color: var(--text-muted) !important;
}
[data-theme="light"] .radius-opt[aria-selected="true"] .radius-opt-unit {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .radius-opt-sub {
  color: var(--text-muted) !important;
}
[data-theme="light"] .radius-opt[aria-selected="true"] .radius-opt-sub {
  color: var(--text-secondary) !important;
}