/* ITN Marina App 3.0 – dunkles Design (30.09.2026).
   Greift nur bei <html data-theme="dark"> (gesetzt von assets/js/theme.js: Einstellung des Geräts, bis der Nutzer oben
   den runden Knopf drückt – dann fest hell oder dunkel). Wird als letzte Stildatei geladen; die helle Gestaltung bleibt unberührt.
   Grundsatz: Die Hauptfarbe ist im Dunkeln ein HELLES Blau (sie steht meist als Schriftfarbe); Flächen mit weißer Schrift
   (Knöpfe, aktive Reiter) bekommen ein kräftiges Blau. Das Backend der Marina-Verwaltung hat KEIN dunkles Design. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --dk-bg: #0e1620; --dk-card: #16212d; --dk-card-2: #1c2937; --dk-card-3: #22344a; --dk-line: #2b3b4d;
  --dk-ink: #e3eaf2; --dk-ink-2: #f3f7fb; --dk-muted: #9eb0c3;
  --dk-fill: #1f6fb8; --dk-fill-hover: #2a80cf; --dk-link: #7cbcf0;
  /* Hülle (shell.css) */
  --k1-primary: var(--dk-link); --k1-primary-dark: #a6d2f6; --k1-accent: #33b9ee;
  --k1-bg: var(--dk-bg); --k1-line: var(--dk-line); --k1-ink: var(--dk-ink); --k1-muted: var(--dk-muted);
  --k1-shadow: 0 2px 10px rgba(0,0,0,.45);
  /* Seiten (app.css, map.css, nav.css) */
  --ocean: var(--dk-link); --ocean-mid: #a6d2f6; --ocean-light: #9ccbf3;
  --wave: #33b9ee; --wave-light: #12324a;
  --sky: #15293c; --sky-mid: #1d3a55;
  --sand: #6b5d42; --sand-light: #221e17; --sand-dark: #8a7a58;
  --primary: var(--dk-link); --primary-dark: #a6d2f6; --accent: #33b9ee; --accent-dark: #22a6db;
  --bg: var(--dk-bg); --card: var(--dk-card); --line: var(--dk-line); --line-light: #1f2c3a;
  --ink: var(--dk-ink); --ink-dark: var(--dk-ink-2); --muted: var(--dk-muted);
  --good: #6fd49b; --good-bg: #12301f; --good-line: #2e9e5e;
  --warn: #f2c265; --warn-bg: #33290f; --warn-line: #c98a12;
  --bad: #f1938a; --bad-bg: #3a1b18; --bad-line: #d4574b;
  --info: #62b0ea; --info-bg: #13283d;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.4); --shadow: 0 2px 10px rgba(0,0,0,.45);
  --shadow-md: 0 4px 18px rgba(0,0,0,.5); --shadow-lg: 0 10px 34px rgba(0,0,0,.55);
}
:root[data-theme="dark"] body { background: var(--dk-bg); color: var(--dk-ink); }
:root[data-theme="dark"] a { color: var(--dk-link); }
:root[data-theme="dark"] a:hover { color: #a6d2f6; }
:root[data-theme="dark"] h2 { color: #d3e6f8; }
:root[data-theme="dark"] img:not([src$=".svg"]) { filter: none; }

/* ── Hülle: Hafenzeile, blaue Leiste, untere Leiste, Menü ─────────────────── */
:root[data-theme="dark"] .skip { background: var(--dk-card); }
:root[data-theme="dark"] .ctxbar { background: #0a121b; color: var(--dk-muted); border-bottom-color: var(--dk-line); }
:root[data-theme="dark"] .ctxbar-hafen strong { color: var(--dk-ink); }
:root[data-theme="dark"] .ctxbar a, :root[data-theme="dark"] .ctx-switch > summary { color: var(--dk-link); }
:root[data-theme="dark"] .ctxbar-install { background: var(--dk-fill); color: #fff; }
:root[data-theme="dark"] .ctxbar-install:hover { background: var(--dk-fill-hover); }
:root[data-theme="dark"] .ctx-dd-menu { background: var(--dk-card); border-color: var(--dk-line); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
:root[data-theme="dark"] .ctx-dd-menu a { color: var(--dk-ink); }
:root[data-theme="dark"] .ctx-dd-menu a:hover, :root[data-theme="dark"] .ctx-dd-menu a.active { background: var(--dk-card-3); color: var(--dk-link); }
:root[data-theme="dark"] .lang-dd > summary { background: var(--dk-card); border-color: var(--dk-line); color: var(--dk-ink); }
:root[data-theme="dark"] .lang-dd > summary:hover { background: var(--dk-card-2); }
:root[data-theme="dark"] .appbar { background: #0c2c4d; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
:root[data-theme="dark"] .appbar .brand, :root[data-theme="dark"] .appbar .icon-btn { color: #fff; }
:root[data-theme="dark"] .cattab:hover, :root[data-theme="dark"] .cattab.active { color: #fff; }
:root[data-theme="dark"] .actionbar, :root[data-theme="dark"] .abtn { background: var(--dk-card); }
:root[data-theme="dark"] .abtn { border-color: var(--dk-line); color: var(--dk-ink); }
:root[data-theme="dark"] .abtn:hover { background: var(--dk-card-3); color: var(--dk-ink); }
:root[data-theme="dark"] .abtn-primary, :root[data-theme="dark"] .abtn-primary:hover { background: var(--dk-fill); border-color: var(--dk-fill); color: #fff; }
:root[data-theme="dark"] .abtn-primary:hover { background: var(--dk-fill-hover); }
:root[data-theme="dark"] .abtn[aria-current="page"]:not(.abtn-primary) { color: var(--dk-link); }
@media (max-width: 899px) {
  :root[data-theme="dark"] .actionbar { box-shadow: 0 -4px 16px rgba(0,0,0,.5); }
  :root[data-theme="dark"] .abtn:not(.abtn-primary) { background: transparent; color: var(--dk-muted); border-color: transparent; }
  :root[data-theme="dark"] .abtn[aria-current="page"]:not(.abtn-primary) { color: var(--dk-link); }
}
:root[data-theme="dark"] .sheet-bg { background: rgba(0,0,0,.6); }
:root[data-theme="dark"] .sheet { background: var(--dk-card); box-shadow: 0 -12px 32px rgba(0,0,0,.6); }
:root[data-theme="dark"] .sheet-item:hover { background: var(--dk-card-3); }
:root[data-theme="dark"] .sheet-item.is-active { background: #1b3552; }
:root[data-theme="dark"] .sheet-item.is-danger { color: #f1938a; }
:root[data-theme="dark"] .sheet-ic { background: var(--dk-card-3); }
:root[data-theme="dark"] .sheet-item.is-danger .sheet-ic { background: #3a1b18; color: #f1938a; }
:root[data-theme="dark"] .sheet-langs .chip { background: var(--dk-card-2); }
:root[data-theme="dark"] .sheet-langs .chip.is-on { background: var(--dk-fill); color: #fff; }
:root[data-theme="dark"] .foot { background: var(--dk-card); }

/* Schalter hell/dunkel (in der Hafenzeile neben der Sprache) */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 1px solid #dbe4ee; background: #fff; color: #0f2233; cursor: pointer; flex: none; }
.theme-btn:hover { background: #f3f6fa; }
.theme-btn .ic { width: 18px; height: 18px; }
:root[data-theme="dark"] .theme-btn { background: var(--dk-card); border-color: var(--dk-line); color: var(--dk-ink); }
:root[data-theme="dark"] .theme-btn:hover { background: var(--dk-card-2); }
/* Handy: Knopf so groß wie ein Finger (Rahmen bleibt 32 px, Tippfläche 44 px) */
@media (max-width: 767px) { .theme-btn { position: relative; } .theme-btn::after { content: ""; position: absolute; inset: -6px; } }

/* ── Seiten (app.css) ─────────────────────────────────────────────────────── */
:root[data-theme="dark"] .searchbar, :root[data-theme="dark"] .tile, :root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .tabs a, :root[data-theme="dark"] .chip, :root[data-theme="dark"] .chip-check, :root[data-theme="dark"] .qr-box,
:root[data-theme="dark"] .msg, :root[data-theme="dark"] .act, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .service-card,
:root[data-theme="dark"] .contact-card, :root[data-theme="dark"] .harbor-card, :root[data-theme="dark"] .card { background: var(--dk-card); }
:root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn-light { color: var(--dk-ink); border-color: var(--dk-line); }
:root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .btn-light:hover { background: var(--dk-card-3); color: var(--dk-ink); }
:root[data-theme="dark"] .qr-box { background: #fff; }   /* QR-Code braucht hellen Grund zum Scannen */
:root[data-theme="dark"] .tile-boat { background: linear-gradient(135deg, var(--dk-card), var(--sky)); }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .tabs a.active, :root[data-theme="dark"] .chip.active,
:root[data-theme="dark"] .route-gast-ic, :root[data-theme="dark"] .act-on { background: var(--dk-fill); border-color: var(--dk-fill); color: #fff; }
:root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .chip.active:hover, :root[data-theme="dark"] .act-on:hover { background: var(--dk-fill-hover); border-color: var(--dk-fill-hover); color: #fff; }
:root[data-theme="dark"] .btn-accent { background: #0e86bf; border-color: #0e86bf; color: #fff; }
:root[data-theme="dark"] .btn-danger { background: #b83a2e; border-color: #b83a2e; color: #fff; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
  background: #111c27; color: var(--dk-ink); border-color: var(--dk-line); }
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #71849a; }
:root[data-theme="dark"] .subform, :root[data-theme="dark"] .notes, :root[data-theme="dark"] .findings li, :root[data-theme="dark"] .msgs { background: var(--dk-card-2); }
:root[data-theme="dark"] .danger-zone { border-color: #6b2a24; }
:root[data-theme="dark"] .bh-list li { border-color: var(--dk-line); }
:root[data-theme="dark"] .ring-bg { stroke: #2b3b4d; }
:root[data-theme="dark"] .sev-major { background: #3a2412 !important; }
:root[data-theme="dark"] .sev-major .sev { color: #f3a86b; }
:root[data-theme="dark"] .fav { color: #7f8fa0; }
:root[data-theme="dark"] .msg.own { background: #16324d; border-color: #24496d; }
:root[data-theme="dark"] .msg-actions button:hover { background: var(--dk-card-3); }
:root[data-theme="dark"] .dlg { background: var(--dk-card); color: var(--dk-ink); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
:root[data-theme="dark"] .dlg::backdrop { background: rgba(0,0,0,.6); }
:root[data-theme="dark"] .hero, :root[data-theme="dark"] .route-cta { background: linear-gradient(135deg, #0c2c4d 0%, #123d66 60%, #16487a 100%); }
:root[data-theme="dark"] .service-icon { background: linear-gradient(135deg, #16324a, #1d3a55); }
:root[data-theme="dark"] .harbor-card.is-active { box-shadow: 0 0 0 2px rgba(124,188,240,.35), var(--shadow); }
:root[data-theme="dark"] .alert-ok, :root[data-theme="dark"] .alert-success { background: var(--good-bg); color: var(--good); }
:root[data-theme="dark"] .alert-warn { background: var(--warn-bg); color: var(--warn); }
:root[data-theme="dark"] .alert-error { background: var(--bad-bg); color: var(--bad); }
:root[data-theme="dark"] table th, :root[data-theme="dark"] table td { border-color: var(--dk-line); }
:root[data-theme="dark"] hr { border-color: var(--dk-line); }
:root[data-theme="dark"] code, :root[data-theme="dark"] pre { background: var(--dk-card-2); color: var(--dk-ink); }

/* ── Karten bleiben hell (Nutzervorgabe 30.09.2026) ──────────────────────────
   Innerhalb der Karte (.k1nav: Kartenfläche, Ebenen-Menü, Knöpfe, Fenster, Legende) gelten die hellen Werte weiter. */
:root[data-theme="dark"] :is(.k1nav, .maplibregl-map) {
  color-scheme: light;
  --primary: #002b5c; --primary-dark: #004080; --ocean: #002b5c; --ocean-mid: #004080; --accent: #00a8e8; --wave: #00a8e8;
  --card: #ffffff; --line: #e2e8f0; --line-light: #f0f4f8; --ink: #2d3748; --ink-dark: #1a2332; --muted: #718096; --bg: #f7f9fc;
  --sky: #e8f4fd; --sky-mid: #cce4f7; --wave-light: #e0f7ff;
  --good: #1a7a44; --good-bg: #eafaf1; --warn: #9a6006; --warn-bg: #fef9ec; --bad: #922b21; --bad-bg: #fdecea; --info-bg: #eaf4fd;
  --k1-primary: #002b5c; --k1-ink: #2d3748; --k1-muted: #718096; --k1-line: #e2e8f0; --k1-bg: #f7f9fc;
  color: #2d3748;
}
:root[data-theme="dark"] :is(.k1nav, .maplibregl-map) :is(a) { color: #002b5c; }
:root[data-theme="dark"] :is(.k1nav, .maplibregl-map) :is(.btn, .btn-light, .chip, input, select, textarea) { background: #fff; color: #2d3748; border-color: #e2e8f0; }
:root[data-theme="dark"] :is(.k1nav, .maplibregl-map) :is(.btn-primary, .chip.active) { background: #002b5c; border-color: #002b5c; color: #fff; }
/* Flächen unter/neben der Karte (keine Kartenbestandteile) */
:root[data-theme="dark"] .route-cta { background: linear-gradient(135deg, #0c2c4d 0%, #123d66 60%, #16487a 100%); }
:root[data-theme="dark"] .route-cta-btn { background: var(--dk-fill); border-color: var(--dk-fill); color: #fff !important; }
:root[data-theme="dark"] .nv-hud { background: #0c2c4d; }
:root[data-theme="dark"] .nv-hud .btn { background: var(--dk-card); color: var(--dk-ink); }
:root[data-theme="dark"] :is(.chart-item.is-on, .avail-free) { border-color: #2e7d52; }
:root[data-theme="dark"] .avail-few { border-color: #8a6d1f; }
:root[data-theme="dark"] .avail-full { border-color: #8a3a33; }
:root[data-theme="dark"] :is(.map-chip.on, .nv-tabs button[aria-selected="true"]) { background: var(--dk-fill); color: #fff; }
:root[data-theme="dark"] .nv-tabs i { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .sheet-item { color: var(--dk-ink); }
:root[data-theme="dark"] .sheet-item .sheet-ic { color: var(--dk-link); }

/* Test „Navigation wie eine App“ (30.09.2026) */
@media (max-width: 899px) {
  :root[data-theme="dark"].nav-a .actionbar { background: var(--dk-bg); border-bottom-color: var(--dk-line); }
  :root[data-theme="dark"].nav-a .actionbar .abtn:not(.abtn-primary) { background: var(--dk-card); border-color: var(--dk-line); color: var(--dk-ink); }
  :root[data-theme="dark"].nav-a .actionbar .abtn-primary { background: var(--dk-fill); border-color: var(--dk-fill); color: #fff; }
  :root[data-theme="dark"].nav-a .tabbar { background: var(--dk-card); border-top-color: var(--dk-line); box-shadow: 0 -4px 16px rgba(0,0,0,.5); }
  :root[data-theme="dark"].nav-a .tab { color: var(--dk-muted); }
  :root[data-theme="dark"].nav-a .tab.is-on { color: var(--dk-link); }
  :root[data-theme="dark"].nav-a .tab.is-on .tab-ic { background: #1b3552; }
}