/* ==========================================================================
   theme.css – Hell/Dunkel-Modus (nach site.css laden)

   Das Attribut <html data-theme="light|dark"> setzt ein kleines Skript im
   <head> (inc/layout.php), bevor die Seite gezeichnet wird. Standard ist
   dunkel; die Wahl über den Knopf im Header wird in localStorage und im
   Cookie "fdb-theme" gespeichert.
   Dunkel = bisheriges Design (styles.css). Hier stehen nur die Abweichungen
   für den hellen Modus und der Umschalt-Knopf.
   ========================================================================== */

:root { color-scheme: dark; }

/* ---------- Umschalt-Knopf ---------- */

.theme-toggle {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; padding: 0; margin-left: -14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: #b4c1d0; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--cyan); color: var(--cyan); }
.theme-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* ohne Suche im Header direkt nach dem Menü: nach rechts schieben */
.main-nav + .theme-toggle { margin-left: 0; }

@media (max-width: 1050px) {
  .main-nav + .theme-toggle { margin-left: auto; }
  .topbar > .hamburger { margin-left: -14px; }
}
@media (max-width: 650px) {
  .topbar > .theme-toggle { margin-left: auto; width: 44px; height: 44px; }
  .topbar > .hamburger { margin-left: -14px; }
}

/* ==========================================================================
   Heller Modus
   ========================================================================== */

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fa;
  --surface: #ffffff;
  --surface-2: #f5f8fb;
  --line: #dbe3ec;
  --text: #0f1c2d;
  --muted: #5c6c80;
  --cyan: #0a7fa8;
  --cyan-2: #086b8f;
  --green: #0b8a61;
  --shadow: 0 16px 40px rgba(16, 38, 66, .12);
  /* Zusatzfarben nur für den hellen Modus */
  --hover: #edf3f9;
  --field: #f7f9fc;
  --field-line: #cdd8e4;
  --soft-text: #3d4d61;
}

/* Startseite: helles Kartenbild (img/flightdb-hero-light-*), dunkler Text */
:root[data-theme="light"] .hero-overlay {
  background:
    linear-gradient(90deg, rgba(243, 246, 250, .97) 8%, rgba(243, 246, 250, .8) 45%, rgba(243, 246, 250, .08) 84%),
    linear-gradient(0deg, var(--bg), transparent 30%);
}
:root[data-theme="light"] .hero h1 span {
  background-image: linear-gradient(90deg, #0f1c2d, var(--cyan));
  -webkit-background-clip: text;
}
:root[data-theme="light"] .hero p { color: var(--soft-text); }
:root[data-theme="light"] .hero .global-search { background: rgba(255, 255, 255, .95); }
:root[data-theme="light"] .quick-links { color: var(--muted); }
:root[data-theme="light"] .quick-links a {
  color: var(--soft-text); border-color: var(--field-line); background: rgba(255, 255, 255, .7);
}
:root[data-theme="light"] .quick-links a:hover { border-color: var(--cyan); color: var(--cyan); }

/* ---------- Header & Navigation ---------- */

:root[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: var(--line);
}
:root[data-theme="light"] .brand { color: var(--text); }
:root[data-theme="light"] .brand-mark {
  border-color: rgba(10, 127, 168, .3);
  background: linear-gradient(145deg, rgba(10, 127, 168, .14), rgba(10, 127, 168, .03));
}
:root[data-theme="light"] .main-nav a { color: var(--muted); }
:root[data-theme="light"] .main-nav a:hover,
:root[data-theme="light"] .main-nav a.active { color: var(--text); }
:root[data-theme="light"] .main-nav a.active:after { box-shadow: none; }

:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .icon-button { color: var(--soft-text); }
:root[data-theme="light"] .theme-toggle:hover { color: var(--cyan); }
:root[data-theme="light"] .hamburger span { background: var(--text); }

:root[data-theme="light"] .top-search input::placeholder,
:root[data-theme="light"] .global-search input::placeholder { color: #8090a3; }
:root[data-theme="light"] .top-search button { background: var(--hover); }
:root[data-theme="light"] .top-search:focus-within { border-color: rgba(10, 127, 168, .55); }

:root[data-theme="light"] .mobile-drawer {
  background: var(--surface);
  border-right-color: var(--line);
  box-shadow: 20px 0 50px rgba(16, 38, 66, .18);
}
:root[data-theme="light"] .drawer-backdrop { background: rgba(15, 28, 45, .35); }
:root[data-theme="light"] .drawer-close { background: var(--surface-2); color: var(--text); }
:root[data-theme="light"] .drawer-nav a { color: var(--soft-text); }
:root[data-theme="light"] .drawer-nav a:hover,
:root[data-theme="light"] .drawer-nav a.active { background: var(--hover); color: var(--cyan); }

/* ---------- Suche & Vorschläge ---------- */

:root[data-theme="light"] .global-search {
  border-color: var(--field-line);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(16, 38, 66, .08);
}
:root[data-theme="light"] .global-search input { color: var(--text); }
:root[data-theme="light"] .global-search kbd { color: var(--muted); border-color: var(--field-line); }

:root[data-theme="light"] .suggest-list { background: var(--surface); color: var(--text); }
:root[data-theme="light"] .suggest-list li.active a,
:root[data-theme="light"] .suggest-list a:hover { background: var(--hover); }


/* ---------- Knöpfe ---------- */

:root[data-theme="light"] .global-search button,
:root[data-theme="light"] .cta-button,
:root[data-theme="light"] .filter-form button {
  background: linear-gradient(135deg, #0c95c4, #0a6f99);
  color: #fff;
}

:root[data-theme="light"] .ghost-button,
:root[data-theme="light"] .outline-button {
  border-color: var(--field-line); background: var(--surface); color: var(--soft-text);
}
:root[data-theme="light"] .ghost-button:hover { border-color: var(--cyan); color: var(--cyan); }

:root[data-theme="light"] .filters button { border-color: var(--field-line); background: var(--surface); color: var(--muted); }

/* ---------- Seitenkopf, Karten, Panels ---------- */

:root[data-theme="light"] .page-head {
  background:
    radial-gradient(900px 340px at 85% -20%, rgba(10, 127, 168, .12), transparent 70%),
    linear-gradient(180deg, #e7eff7, var(--bg));
}
:root[data-theme="light"] .page-head h1 span {
  background-image: linear-gradient(90deg, #0f1c2d, var(--cyan));
}
:root[data-theme="light"] .page-head p,
:root[data-theme="light"] .notice p,
:root[data-theme="light"] .tips,
:root[data-theme="light"] .faq details > div,
:root[data-theme="light"] .prose { color: var(--soft-text); }

:root[data-theme="light"] .stat-card {
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(16, 38, 66, .06);
}
:root[data-theme="light"] .stat-icon.cyan   { background: #e0f3fa; color: var(--cyan); }
:root[data-theme="light"] .stat-icon.violet { background: #efeafd; color: #6d43d9; }
:root[data-theme="light"] .stat-icon.amber  { background: #fdf3dc; color: #b7791f; }
:root[data-theme="light"] .stat-icon.green  { background: #def5ec; color: var(--green); }

:root[data-theme="light"] .panel,
:root[data-theme="light"] .features article,
:root[data-theme="light"] .faq details { box-shadow: 0 4px 16px rgba(16, 38, 66, .04); }
:root[data-theme="light"] .features a:hover article { border-color: rgba(10, 127, 168, .5); }
:root[data-theme="light"] .features article > span { color: #98a7b8; }

:root[data-theme="light"] .tab-bar a { color: var(--muted); }
:root[data-theme="light"] .tab-bar a:hover { color: var(--text); border-color: rgba(10, 127, 168, .5); }
:root[data-theme="light"] .tab-bar a.active { background: rgba(10, 127, 168, .07); }

:root[data-theme="light"] .link-list a:hover,
:root[data-theme="light"] .dir-grid a:hover { background: var(--hover); }

:root[data-theme="light"] .prose .placeholder { background: #fdf3dc; color: #8a5a00; }

/* ---------- Tabellen ---------- */

:root[data-theme="light"] .data-table td { border-bottom-color: #e8eef4; }
:root[data-theme="light"] .data-table tbody tr:hover { background: var(--hover); }
:root[data-theme="light"] .aircraft-table tr { border-bottom-color: #e8eef4; }
:root[data-theme="light"] .silhouette { background: #e3f0fa; box-shadow: inset 0 0 0 1px #d2e3f0; }
:root[data-theme="light"] .star { color: #e59a00; fill: #f5b300; }
:root[data-theme="light"] .row-interesting td:first-child { box-shadow: inset 3px 0 0 #f5b300; }

:root[data-theme="light"] .chip { border-color: #cfe1ec; background: #eef7fb; }

:root[data-theme="light"] .badge-danger { background: #fdecee; color: #c0263a; border-color: #f4b9c0; }
:root[data-theme="light"] .badge-warn   { background: #fdf3dc; color: #8a5a00; border-color: #f0d38c; }
:root[data-theme="light"] .badge-ok     { background: #e3f6ef; color: var(--green); border-color: #a9dfc9; }

:root[data-theme="light"] .pager-item { background: var(--surface); color: var(--soft-text); }
:root[data-theme="light"] .pager-item.current { background: var(--cyan); color: #fff; }
:root[data-theme="light"] .pager-item.gap { background: none; }

:root[data-theme="light"] .filter-form input,
:root[data-theme="light"] .filter-form select { border-color: var(--field-line); background: var(--field); }

/* ---------- Diagramme ---------- */

:root[data-theme="light"] .bar-track { background: #e6edf4; }
:root[data-theme="light"] .bar-value { color: var(--soft-text); }
:root[data-theme="light"] .column-chart .cols {
  border-bottom-color: var(--field-line);
  background: repeating-linear-gradient(to top, transparent 0 49px, rgba(15, 28, 45, .06) 49px 50px);
}
:root[data-theme="light"] .column-chart .col:hover .col-bar,
:root[data-theme="light"] .column-chart .col:focus .col-bar { background: #0c95c4; }
:root[data-theme="light"] .column-chart .col:hover::after,
:root[data-theme="light"] .column-chart .col:focus::after { background: var(--surface); }

/* ---------- Karten (Leaflet): normale helle OSM-Kacheln ---------- */

:root[data-theme="light"] .map,
:root[data-theme="light"] .leaflet-container { background: #e8eef3; }
:root[data-theme="light"] .leaflet-tile-pane { filter: none; }
:root[data-theme="light"] .leaflet-popup-content-wrapper,
:root[data-theme="light"] .leaflet-popup-tip { background: #fff; color: var(--text); }
:root[data-theme="light"] .leaflet-control-attribution { background: rgba(255, 255, 255, .85) !important; color: var(--muted); }
:root[data-theme="light"] .leaflet-control-attribution a { color: var(--cyan); }
:root[data-theme="light"] .leaflet-bar a { background: #fff; color: var(--text); }
:root[data-theme="light"] .leaflet-bar a:hover { background: var(--hover); }

/* ---------- Footer ---------- */

:root[data-theme="light"] footer { background: var(--surface); }
:root[data-theme="light"] footer a { color: var(--soft-text); }
:root[data-theme="light"] footer a:hover { color: var(--cyan); }