/* =============================================================================
   1) Design-Variablen (Light) + Verlauf-Hintergrund
   ========================================================================== */
:root {
  /* Textfarben */
  --ink: #0f172a; /* Primärtext (dunkel)  */
  --muted: #64748b; /* sekundärer Text      */

  /* Oberflächen / Rahmen */
  --card-bg: #ffffff; /* Karten/Boxen         */
  --input-bg: #ffffff; /* Inputs/Selects       */
  --border: #e5e7eb; /* Rahmen               */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* Verlauf (Light) */
  --grad-from: #6366f1; /* Indigo oben          */
  --grad-to: #10b981; /* Grün unten           */

  /* Akzente/Buttons/States */
  --accent: #0f172a; /* z.B. aktiver Tab     */
  --accent-ink: #ffffff; /* Text auf Accent      */
}

/* -----------------------------------------------------------------------------
       1a) Dark-Variablen (automatisch – System)
       ----------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e5e7eb;
    --muted: #94a3b8;

    --card-bg: #0b1220; /* sehr dunkles Blau/Schwarz      */
    --input-bg: #0f172a; /* dunkle Inputs                  */
    --border: #1f2937; /* dunkler Rahmen                 */

    --grad-from: #0b1220; /* Verlauf dunkler                */
    --grad-to: #0b1220; /* (leicht ton-in-ton)            */

    --accent: #111827; /* aktiver Tab dunkelgrau         */
    --accent-ink: #ffffff;
  }
}

/* -----------------------------------------------------------------------------
       1b) Manuelles Override per data-theme (optional)
       ----------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --ink: #e5e7eb;
  --muted: #94a3b8;

  --card-bg: #0b1220;
  --input-bg: #0f172a;
  --border: #1f2937;

  --grad-from: #0b1220;
  --grad-to: #0b1220;

  --accent: #111827;
  --accent-ink: #ffffff;
}

/* =============================================================================
       2) Grundlayout & Typo
       ========================================================================== */
html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--grad-from), var(--grad-to));
  background-attachment: fixed; /* Gradient „klebt“ am Viewport */
}

/* =============================================================================
       3) Karten/Boxen/Container
       ========================================================================== */
.fact-card,
.review-card,
.modal .panel,
.leaflet-popup-content-wrapper {
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

/* Popup-Pfeil einfärben (Leaflet) */
.leaflet-popup-tip {
  background: var(--card-bg);
  border: 1px solid var(--border);
}

/* „normale“ Karten (deine 3 Facts-Boxen) */
.fact-card {
  padding: 16px;
}

/* Übersicht (lokale Bewertungen) Karten */
.review-card {
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.review-card:hover {
  box-shadow: var(--shadow-md);
}

/* =============================================================================
       4) Eingabefelder (Suchfeld, Selects …)
       ========================================================================== */
input[type="text"],
input[type="search"],
input[type="number"],
select,
textarea {
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  box-shadow: none;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

/* Fokus gut sichtbar (beide Themes) */
input:focus,
select:focus,
textarea:focus {
  border-color: #60a5fa; /* blau */
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35);
}

/* Buttons, die wie „Pill“ aussehen dürfen (z. B. Locate/Show) */
button,
.btn {
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
button:hover,
.btn:hover {
  filter: brightness(1.05);
}

/* =============================================================================
       5) Tabs (Explore / Rate)
       ========================================================================== */
.tabbtn {
  /* geerbter Stil (kommt oft aus dem Markup); hier nur Farbe */
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--border);
}
.tabbtn.active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* =============================================================================
       6) „Facts“-Layout (unter der Karte immer EINspaltig)
       ========================================================================== */
#facts {
  margin-top: 12px;
}

.facts-grid {
  display: grid;
  grid-template-columns: 1fr; /* nie nebeneinander */
  gap: 12px;
}
@media (min-width: 0px) {
  .facts-grid {
    grid-template-columns: 1fr !important;
  }
}

/* kompakte Rows im Score-Block */
.fact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.fact-muted {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* =============================================================================
       7) Hinweiszeilen (Onboarding-Zeile unter Tabs)
       ========================================================================== */
.hint-text,
#tabHint {
  color: #ffffff !important; /* Light: weiß */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
  font-weight: 500;
  text-align: center;
}

/* Dark (System oder data-theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hint-text,
  :root:not([data-theme="light"]) #tabHint {
    color: #ffffff !important; /*  Textfarbe Adresse eingeben oder orten weiß */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  }
}
:root[data-theme="dark"] .hint-text,
:root[data-theme="dark"] #tabHint {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* =============================================================================
       8) Leaflet-Feinschliff
       ========================================================================== */
#map {
  height: 420px;
}
.leaflet-popup-content {
  margin: 8px 12px;
}
.custom-pin {
  transform: translate(-16px, -16px);
}

/* Kartensteuerung etwas absetzen (sichtbarer in Dark) */
.leaflet-control-zoom a {
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--border);
}

/* =============================================================================
       9) Review-Übersicht (unten)
       ========================================================================== */
#reviewList {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* =============================================================================
       10) Sterne-Komponente (Form)
       ========================================================================== */
.stars {
  display: flex;
  gap: 4px;
}
.stars button {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--ink);
  cursor: pointer;
  margin-right: 4px;
  font-size: 14px;
  line-height: 1;
}
.stars button.active {
  background: #fbbf24; /* Gelb */
  color: #111;
  border-color: #f59e0b;
}
.stars button:hover {
  filter: brightness(0.98);
}

/* =============================================================================
       11) „Chip“-Badges (optional)
       ========================================================================== */
.aq-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--ink);
  font-size: 13px;
}
/* =============================================================================
     12) Desktop-Fix: Action-Buttons (Locate / Show) immer gleich hoch
     ========================================================================== */
@media (min-width: 768px) {
  #btnLocate,
  #btnGo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 14px;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
  }
}
/* =============================================================================
     Review-Kommentare: intelligenter Umbruch + Zeilenumbrüche behalten
     ========================================================================== */
.review-comment {
  word-break: break-word; /* lange Wörter/URLs umbrechen */
  overflow-wrap: anywhere; /* auch ohne Leerzeichen umbruchfähig */
  white-space: pre-line; /* \n aus dem User-Text als echte Zeilenumbrüche */
  hyphens: auto; /* Silbentrennung, wo möglich */
}
/* =============================================================================
     13) Mobile-Fix: Bewertungssterne bekommen rechts Puffer
     - greift nur im Rate-Tab (#viewRate) und nur bis 768px Breite
     - hohe Spezifität + !important, damit Tailwind-Klassen nicht drüber gehen
     ========================================================================== */
@media (max-width: 768px) {
  /* zusätzlicher Innenabstand rechts für den gesamten Block */
  #viewRate #rateCats {
    padding-right: calc(16px + env(safe-area-inset-right)) !important;
    box-sizing: border-box;
  }

  /* falls einzelne Zeilen enger sind, bekommen sie ebenfalls Puffer */
  #viewRate #rateCats > div {
    padding-right: calc(16px + env(safe-area-inset-right)) !important;
  }

  /* Sterne sicher linksbündig halten */
  #viewRate #rateCats .stars {
    display: flex;
    justify-content: flex-start !important;
    gap: 6px;
  }
}

/* Extra-Feinschliff für sehr kleine Screens */
@media (max-width: 420px) {
  #viewRate #rateCats .stars button {
    width: 22px;
    height: 22px;
    margin-right: 3px;
  }
}
/* =============================================================================
     14) iPhone-Fix: rechter Abstand für Sterne via Flex-Spacer
     - wirkt nur im Rate-Tab
     - unabhängig von Padding; nutzt Safe-Area, fällt sonst auf 16px zurück
     ========================================================================== */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari-Erkennung */
  #viewRate #rateCats > div {
    display: flex; /* zur Sicherheit */
    align-items: center;
    gap: 12px; /* dein Row-Abstand */
  }
  #viewRate #rateCats > div::after {
    content: "";
    flex: 0 0 max(16px, env(safe-area-inset-right));
  }
  #viewRate #rateCats .stars {
    display: inline-flex;
    justify-content: flex-start !important;
    gap: 6px;
  }
}
/* =============================================================================
     15) Darkmode – Premium Finish (ADD-ON ONLY)
     ========================================================================== */

/* 15.1 Background: tiefer Navy-Vignette + subtile farbige Glows */
/* 15.1 Background – clean Darkmode Verlauf */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body,
  :root[data-theme="dark"] body {
    background: linear-gradient(180deg, #0f172a, #1a1a1a);
    color: var(--ink);
  }
}

/* 15.2 Cards/Popups: Glassy Navy + feiner Rahmen + tiefer Shadow */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fact-card,
  :root:not([data-theme="light"]) .review-card,
  :root:not([data-theme="light"]) .modal .panel,
  :root:not([data-theme="light"]) .leaflet-popup-content-wrapper,
  :root[data-theme="dark"] .fact-card,
  :root[data-theme="dark"] .review-card,
  :root[data-theme="dark"] .modal .panel,
  :root[data-theme="dark"] .leaflet-popup-content-wrapper {
    background: #0f172aee; /* slightly translucent navy */
    border: 1px solid #233044; /* crisp cool border */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
    backdrop-filter: saturate(110%) blur(3px);
  }

  /* Hover/Focus: zarter Indigo-Glow statt hellem Flash */
  :root:not([data-theme="light"]) .fact-card:hover,
  :root[data-theme="dark"] .fact-card:hover,
  :root:not([data-theme="light"]) .review-card:hover,
  :root[data-theme="dark"] .review-card:hover,
  :root:not([data-theme="light"]) .fact-card:focus-within,
  :root[data-theme="dark"] .fact-card:focus-within {
    border-color: #3f51b5;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(99, 102, 241, 0.25), 0 0 32px -6px rgba(99, 102, 241, 0.25);
  }

  /* Leaflet-Popup-Pfeil passend einfärben */
  :root:not([data-theme="light"]) .leaflet-popup-tip,
  :root[data-theme="dark"] .leaflet-popup-tip {
    background: #0f172aee;
    border: 1px solid #233044;
  }
}

/* 15.3 Typografie-Kontrast & Sekundärtexte */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) h1,
  :root:not([data-theme="light"]) h2,
  :root:not([data-theme="light"]) h3,
  :root[data-theme="dark"] h1,
  :root[data-theme="dark"] h2,
  :root[data-theme="dark"] h3 {
    color: #e8ecf5;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  }
  :root:not([data-theme="light"]) .fact-muted,
  :root[data-theme="dark"] .fact-muted,
  :root:not([data-theme="light"]) .text-slate-500,
  :root[data-theme="dark"] .text-slate-500 {
    color: #8fa1bd !important;
  }
}

/* 15.4 Inputs & Textareas: dunkler Chrome + klare Foki */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type="text"],
  :root:not([data-theme="light"]) input[type="search"],
  :root:not([data-theme="light"]) input[type="number"],
  :root:not([data-theme="light"]) select,
  :root:not([data-theme="light"]) textarea,
  :root[data-theme="dark"] input[type="text"],
  :root[data-theme="dark"] input[type="search"],
  :root[data-theme="dark"] input[type="number"],
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] textarea {
    background: #111a2c;
    color: #e6edf7;
    border-color: #2a3a54;
  }
  :root:not([data-theme="light"]) input::placeholder,
  :root:not([data-theme="light"]) textarea::placeholder,
  :root[data-theme="dark"] input::placeholder,
  :root[data-theme="dark"] textarea::placeholder {
    color: #6d7d99;
  }
  :root:not([data-theme="light"]) input:focus,
  :root:not([data-theme="light"]) select:focus,
  :root:not([data-theme="light"]) textarea:focus,
  :root[data-theme="dark"] input:focus,
  :root[data-theme="dark"] select:focus,
  :root[data-theme="dark"] textarea:focus {
    border-color: #7aa2ff;
    box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.22);
  }

  /* >>> Zusatz: Adresseingabe-Farben im Darkmode etwas dunkler (weniger grell) */
  :root:not([data-theme="light"]) #addr,
  :root:not([data-theme="light"]) #revAddr,
  :root[data-theme="dark"] #addr,
  :root[data-theme="dark"] #revAddr {
    color: #464d55; /* dezentes Slate-300 */
  }
}

/* 15.5 Tabs: inaktiv dezent, aktiv solide */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabbtn,
  :root[data-theme="dark"] .tabbtn {
    background: #0f172aee;
    border-color: #233044;
    color: #dbe2ee;
  }
  :root:not([data-theme="light"]) .tabbtn.active,
  :root[data-theme="dark"] .tabbtn.active {
    background: #111827;
    border-color: #33425e;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
}

/* 15.6 Buttons: klare Kanten + sanfte Hover-Stufen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) button,
  :root[data-theme="dark"] button,
  :root:not([data-theme="light"]) .btn,
  :root[data-theme="dark"] .btn {
    background: #0f172aee;
    border-color: #2a3a54;
    color: #e8ecf5;
  }
  :root:not([data-theme="light"]) button:hover,
  :root[data-theme="dark"] button:hover,
  :root:not([data-theme="light"]) .btn:hover,
  :root[data-theme="dark"] .btn:hover {
    background: #172238;
    border-color: #3a4e74;
    filter: none;
  }
}

/* 15.7 Leaflet-Controls: integriert in den Navy-Look */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-control-zoom a,
  :root[data-theme="dark"] .leaflet-control-zoom a {
    background: #0f172aee;
    border-color: #233044;
    color: #e8ecf5;
  }
}

/* 15.8 Sterne: matte Buttons, aktiv leuchtendes Amber */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stars button,
  :root[data-theme="dark"] .stars button {
    background: #101a2f;
    border-color: #2a3a54;
    color: #c7d2fe;
  }
  :root:not([data-theme="light"]) .stars button:hover,
  :root[data-theme="dark"] .stars button:hover {
    background: #15223b;
  }
  :root:not([data-theme="light"]) .stars button.active,
  :root[data-theme="dark"] .stars button.active {
    background: #fbbf24;
    color: #111;
    border-color: #f59e0b;
  }
}

/* 15.9 Header-Gradient (Tailwind-Klasse) – etwas tiefer im Darkmode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bg-gradient-to-r {
    filter: saturate(105%) brightness(0.95);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 12px 28px rgba(0, 0, 0, 0.45);
  }
}

/* 15.10 Badge im Popup (User-Bewertung) – dunkler Stil */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-popup-content .badge-user,
  :root[data-theme="dark"] .leaflet-popup-content .badge-user {
    background: rgba(124, 58, 237, 0.16);
    border: 1px solid rgba(167, 139, 250, 0.45);
    color: #d7caff;
  }
}

/* 15.11 Kleines UX-Detail: Auswahl/Scrollbar passend dunkel */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ::selection,
  :root[data-theme="dark"] ::selection {
    background: #3730a3;
    color: #fff;
  }
  :root:not([data-theme="light"]) *::-webkit-scrollbar,
  :root[data-theme="dark"] *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  :root:not([data-theme="light"]) *::-webkit-scrollbar-thumb,
  :root[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 9999px;
    border: 2px solid #0b1220;
  }
  :root:not([data-theme="light"]) *::-webkit-scrollbar-track,
  :root[data-theme="dark"] *::-webkit-scrollbar-track {
    background: transparent;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f1f5f9; /* sehr helles Grau für Text */
    --muted: #9ca3af; /* dezenter grauer Text */

    --card-bg: #1e1e1e; /* Hauptfenster/Boxen Dunkelgrau */
    --input-bg: #2a2a2a; /* Inputs leicht heller */
    --border: #333; /* dezente, dunkle Rahmen */

    --grad-from: #0f172a; /* subtiler Verlauf oben */
    --grad-to: #1a1a1a; /* unten dunkler, aber nicht schwarz */

    --accent: #2563eb; /* Blau als Akzent (Buttons/Tabs) */
    --accent-ink: #ffffff; /* Text auf Akzent */
  }
}

:root[data-theme="dark"] {
  --ink: #f1f5f9;
  --muted: #9ca3af;

  --card-bg: #1e1e1e;
  --input-bg: #2a2a2a;
  --border: #333;

  --grad-from: #0f172a;
  --grad-to: #1a1a1a;

  --accent: #2563eb;
  --accent-ink: #ffffff;
}
/* =============================================================================
     16) Darkmode Tailwind-Overrides (ADD-ON ONLY) 
     - macht weiße Tailwind-Boxen im Darkmode dunkel
     - schärft Textfarben & Ränder
     ========================================================================== */
@media (prefers-color-scheme: dark) {
  /* 16.1: Alle "bg-white"-Container im Darkmode abdunkeln */
  :root:not([data-theme="light"]) .bg-white,
  :root[data-theme="dark"] .bg-white {
    background-color: #0f172aee !important; /* deep navy glass */
  }

  /* 16.2: Standard-Ränder/Tailwind-Border abdunkeln */
  :root:not([data-theme="light"]) .border,
  :root[data-theme="dark"] .border {
    border-color: #233044 !important;
  }

  /* 16.3: Typo – zu dunkle Slate-Töne aufhellen für Lesbarkeit */
  :root:not([data-theme="light"]) .text-slate-900,
  :root[data-theme="dark"] .text-slate-900,
  :root:not([data-theme="light"]) .text-slate-800,
  :root[data-theme="dark"] .text-slate-800,
  :root:not([data-theme="light"]) .text-slate-700,
  :root[data-theme="dark"] .text-slate-700 {
    color: #e8ecf5 !important; /* fast weiß */
  }
  :root:not([data-theme="light"]) .text-slate-600,
  :root[data-theme="dark"] .text-slate-600,
  :root:not([data-theme="light"]) .text-slate-500,
  :root[data-theme="dark"] .text-slate-500 {
    color: #8fa1bd !important; /* dezentes Hellgrau */
  }

  /* 16.4: „Karten“-Sektionen, die nicht .fact-card/.review-card sind
         (z. B. deine <section class="rounded-xl border bg-white ...">) */
  :root:not([data-theme="light"]) section.rounded-xl.border.bg-white,
  :root[data-theme="dark"] section.rounded-xl.border.bg-white {
    background-color: #0f172aee !important;
    border-color: #233044 !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
    backdrop-filter: saturate(110%) blur(3px);
  }

  /* 16.5: Kleine Boxen/Buttons, die explizit „bg-white“ tragen */
  :root:not([data-theme="light"]) .hover\:bg-slate-50:hover,
  :root[data-theme="dark"] .hover\:bg-slate-50:hover {
    background-color: #172238 !important;
  }

  /* 16.6: Karte/Leaflet noch etwas integrieren */
  :root:not([data-theme="light"]) .leaflet-container,
  :root[data-theme="dark"] .leaflet-container {
    background: #0b1220; /* Map-„Meer“ außerhalb der Tiles */
  }
}
/* === DARK PARITY (manual = auto) ============================================
   Diese Regeln gelten NUR, wenn per Switch data-theme="dark" gesetzt ist,
   unabhängig vom System-Theme. Sie spiegeln die Auto-Dark-Styles 1:1. */

/* 1) Hintergrund + Grundfarben */
:root[data-theme="dark"] {
  /* Variablen exakt wie in deinem Auto-Dark (unten in der Datei) */
  --ink: #f1f5f9;
  --muted: #9ca3af;

  --card-bg: #1e1e1e;
  --input-bg: #2a2a2a;
  --border: #333;

  --grad-from: #0f172a;
  --grad-to: #1a1a1a;

  --accent: #2563eb;
  --accent-ink: #ffffff;
}
:root[data-theme="dark"] body {
  background: linear-gradient(180deg, #0f172a, #1a1a1a);
  color: var(--ink);
}

/* 2) Cards/Popups (wie 15.2) */
:root[data-theme="dark"] .fact-card,
:root[data-theme="dark"] .review-card,
:root[data-theme="dark"] .modal .panel,
:root[data-theme="dark"] .leaflet-popup-content-wrapper {
  background: #0f172aee;
  border: 1px solid #233044;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: saturate(110%) blur(3px);
}
:root[data-theme="dark"] .fact-card:hover,
:root[data-theme="dark"] .review-card:hover,
:root[data-theme="dark"] .fact-card:focus-within {
  border-color: #3f51b5;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(99, 102, 241, 0.25),
    0 0 32px -6px rgba(99, 102, 241, 0.25);
}
:root[data-theme="dark"] .leaflet-popup-tip {
  background: #0f172aee;
  border: 1px solid #233044;
}

/* 3) Typografie-Kontrast (wie 15.3) */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 {
  color: #e8ecf5;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
:root[data-theme="dark"] .fact-muted,
:root[data-theme="dark"] .text-slate-500 {
  color: #8fa1bd !important;
}

/* 4) Inputs/Textareas (wie 15.4) + Adresseingaben dezenter */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: #111a2c;
  color: #e6edf7;
  border-color: #2a3a54;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #6d7d99;
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
  border-color: #7aa2ff;
  box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.22);
}
/* Adresseingaben – wie Auto-Dark */
:root[data-theme="dark"] #addr,
:root[data-theme="dark"] #revAddr {
  color: #464d55;
}

/* 5) Tabs (wie 15.5) */
:root[data-theme="dark"] .tabbtn {
  background: #0f172aee;
  border-color: #233044;
  color: #dbe2ee;
}
:root[data-theme="dark"] .tabbtn.active {
  background: #111827;
  border-color: #33425e;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* 6) Buttons (wie 15.6) */
:root[data-theme="dark"] button,
:root[data-theme="dark"] .btn {
  background: #0f172aee;
  border-color: #2a3a54;
  color: #e8ecf5;
}
:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .btn:hover {
  background: #172238;
  border-color: #3a4e74;
  filter: none;
}

/* 7) Leaflet Controls (wie 15.7) */
:root[data-theme="dark"] .leaflet-control-zoom a {
  background: #0f172aee;
  border-color: #233044;
  color: #e8ecf5;
}

/* 8) Sterne (wie 15.8) */
:root[data-theme="dark"] .stars button {
  background: #101a2f;
  border-color: #2a3a54;
  color: #c7d2fe;
}
:root[data-theme="dark"] .stars button:hover {
  background: #15223b;
}
:root[data-theme="dark"] .stars button.active {
  background: #fbbf24;
  color: #111;
  border-color: #f59e0b;
}

/* 9) Header-Gradient (wie 15.9) */
:root[data-theme="dark"] .bg-gradient-to-r {
  filter: saturate(105%) brightness(0.95);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.45);
}

/* 10) Popup-Badge (wie 15.10) */
:root[data-theme="dark"] .leaflet-popup-content .badge-user {
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.45);
  color: #d7caff;
}

/* 11) Selection & Scrollbar (wie 15.11) */
:root[data-theme="dark"] ::selection {
  background: #3730a3;
  color: #fff;
}
:root[data-theme="dark"] *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
:root[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: #1f2937;
  border-radius: 9999px;
  border: 2px solid #0b1220;
}
:root[data-theme="dark"] *::-webkit-scrollbar-track {
  background: transparent;
}

/* 12) Tailwind-/Utility-Boxen mit bg-white abdunkeln (wie 16.1/16.4) */
:root[data-theme="dark"] .bg-white {
  background-color: #0f172aee !important;
}
:root[data-theme="dark"] section.rounded-xl.border.bg-white {
  background-color: #0f172aee !important;
  border-color: #233044 !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: saturate(110%) blur(3px);
}

/* 13) Utility-Textfarben wie Auto-Dark (ergänzt Parität) */
:root[data-theme="dark"] .text-slate-900,
:root[data-theme="dark"] .text-slate-800,
:root[data-theme="dark"] .text-slate-700,
:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-gray-800,
:root[data-theme="dark"] .text-gray-700 {
  color: #e8ecf5 !important;
}
:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .text-slate-500,
:root[data-theme="dark"] .text-gray-600,
:root[data-theme="dark"] .text-gray-500 {
  color: #8fa1bd !important;
}

/* 14) Hint-Zeile unter Tabs */
:root[data-theme="dark"] .hint-text,
:root[data-theme="dark"] #tabHint {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* 15) Leaflet-Meer */
:root[data-theme="dark"] .leaflet-container {
  background: #0b1220;
}
/* === EMAIL FIELD PARITY (Light + Auto-Dark + Manual-Dark) ================== */
/* Light */
input[type="email"] {
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  box-shadow: none;
}
input[type="email"]::placeholder {
  color: var(--muted);
}
input[type="email"]:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.35);
}

/* Auto-Dark (System) + Platzhalter/Fokus */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type="email"],
  :root[data-theme="dark"] input[type="email"] {
    background: #111a2c;
    color: #e6edf7;
    border-color: #2a3a54;
  }
  :root:not([data-theme="light"]) input[type="email"]::placeholder,
  :root[data-theme="dark"] input[type="email"]::placeholder {
    color: #6d7d99;
  }
  :root:not([data-theme="light"]) input[type="email"]:focus,
  :root[data-theme="dark"] input[type="email"]:focus {
    border-color: #7aa2ff;
    box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.22);
  }

  /* (Optional) Autofill-Fix (Chrome/Safari) */
  :root:is(:not([data-theme="light"]), [data-theme="dark"])
    input[type="email"]:-webkit-autofill {
    -webkit-text-fill-color: #e6edf7;
    caret-color: #e6edf7;
    transition: background-color 9999s ease-in-out 0s;
  }
}
/* === Manual Dark parity for EMAIL ========================================= */
:root[data-theme="dark"] input[type="email"] {
  background: #111a2c; /* wie andere Inputs im Dark */
  color: #e6edf7;
  border-color: #2a3a54;
}
:root[data-theme="dark"] input[type="email"]::placeholder {
  color: #6d7d99;
}
:root[data-theme="dark"] input[type="email"]:focus {
  border-color: #7aa2ff;
  box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.22);
}

/* Optional: Autofill (Chrome/Safari) angleichen */
:root[data-theme="dark"] input[type="email"]:-webkit-autofill {
  -webkit-text-fill-color: #e6edf7;
  caret-color: #e6edf7;
  transition: background-color 9999s ease-in-out 0s;
}
/* === Inline-Validation (Email/andere Inputs) ============================= */
:root {
  --error: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --error: #f87171;
    --error-bg: rgba(248, 113, 113, 0.12);
  }
}
:root[data-theme="dark"] {
  --error: #f87171;
  --error-bg: rgba(248, 113, 113, 0.12);
}

/* Zustand per Klasse ODER aria-invalid steuern */
input.is-invalid,
input[aria-invalid="true"],
textarea.is-invalid,
textarea[aria-invalid="true"],
select.is-invalid,
select[aria-invalid="true"] {
  border-color: var(--error) !important;
  background: var(--error-bg) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

.form-error {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--error);
}
/* Hintergrund für das Modal Bewertung absenden*/
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55); /* Abdunkeln der Seite */
  backdrop-filter: blur(2px); /* leichter Blur-Effekt */
}

/* Box selbst */
.modal-box {
  background: var(
    --card-bg
  ); /* deine Hintergrundfarbe (passt sich Dark/Light an) */
  color: var(--ink); /* Textfarbe (Dark/Light) */
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  width: min(640px, 96vw);
}

.modal-header {
  text-align: center;
  padding: 16px 16px 0;
}
.modal-body {
  padding: 12px 16px;
}
.modal-actions {
  padding: 0 16px 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Buttons */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
}
.btn-ghost {
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
}
.btn-primary:hover,
.btn-ghost:hover {
  filter: brightness(1.05);
}