/* theme-dark.css v1.0 — Dark-Variante für die (hellen) Hauptseiten.
   Wird durch theme-toggle.js via [data-theme="dark"] aktiviert.
   Die Funk/FPV-Standalone-Seiten sind bereits dunkel; dort setzt
   das Toggle eine noch dunklere bzw. neutrale Variante (siehe unten). */

html[data-theme="dark"] {
  --bg-page:      #12161f;
  --bg-surface:   #1a1f2b;
  --bg-white:     #1e2531;
  --bg-deep:      #0d1017;
  --bg-deep2:     #161b26;
  --text-main:    #e8edf5;
  --text-muted:   #9aa4b6;
  --text-light:   #5a6478;
  --border:       #2a3242;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.4);
  --shadow-md:    0 4px 20px rgba(0,0,0,.5);
}

/* Cards / white surfaces need to switch too */
html[data-theme="dark"] .bg-alt { background: var(--bg-surface); }
html[data-theme="dark"] .tech-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .ev-row,
html[data-theme="dark"] .bio-card { background: var(--bg-white); border-color: var(--border); }
html[data-theme="dark"] img { opacity: .96; }

/* Theme toggle button visual */
.theme-toggle-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--border, #c5cdd8);
  color: var(--text-muted, #5a6478); border-radius: 8px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  -webkit-transition: color .15s, border-color .15s; transition: color .15s, border-color .15s;
}
.theme-toggle-btn:hover { color: var(--accent, #5b7fa6); border-color: var(--accent, #5b7fa6); }
.theme-toggle-btn .tt-icon { font-size: 14px; }

/* ── Light-Variante für die (dunklen) Funk/FPV-Standalone-Seiten ──
   Diese Seiten sind per Default dunkel. data-theme="light" hellt sie auf.
   Erkennung: die shared-sidenav ist nur auf diesen Seiten vorhanden. */
html[data-theme="light"] body.has-shared-nav {
  --bg-page:    #f4f6f9;
  --bg-surface: #ffffff;
  --bg-card:    #ffffff;
  --text-main:  #1c2333;
  --text-muted: #5a6478;
  --border:     #d5dbe4;
}
html[data-theme="light"] body.has-shared-nav .shared-sidenav {
  background: #f4f6f9; border-right-color: #d5dbe4;
}
html[data-theme="light"] .shared-sidenav .ssn-logo { color: #1c2333; }
html[data-theme="light"] .shared-sidenav .ssn-header { border-bottom-color: #d5dbe4; }
html[data-theme="light"] html[data-theme="light"] .shared-sidenav .ssn-home-link { color: #5a6478; border-color: #d5dbe4; }
html[data-theme="light"] .shared-sidenav .ssn-home-link:hover { color: #1c2333; }
html[data-theme="light"] .shared-sidenav .sb-acc-header { color: #3a4356; }
html[data-theme="light"] .shared-sidenav .sb-acc-header:hover { color: #1c2333; background: rgba(0,0,0,.04); }
html[data-theme="light"] .shared-sidenav .sb-acc-group.open .sb-acc-header { color: #1c2333; }
html[data-theme="light"] .shared-sidenav .sb-link { color: #5a6478; }
html[data-theme="light"] .shared-sidenav .sb-link:hover { color: #1c2333; background: rgba(0,0,0,.04); }
html[data-theme="light"] .shared-sidenav .sb-link.active { color: #1c2333; background: rgba(0,0,0,.06); }
html[data-theme="light"] .shared-sidenav .bl-search-trigger { color: #5a6478; border-color: #d5dbe4; }
html[data-theme="light"] .shared-sidenav .bl-search-trigger:hover { color: #1c2333; }
html[data-theme="light"] .shared-sidenav .theme-toggle-btn { color: #5a6478; border-color: #d5dbe4; }
html[data-theme="light"] .shared-sidenav .theme-toggle-btn:hover { color: #1c2333; }
html[data-theme="light"] .ssn-mob-toggle { background: #f4f6f9; color: #1c2333; border-color: #d5dbe4; }
html[data-theme="light"] body.has-shared-nav header {
  background: #ffffff; border-bottom-color: #d5dbe4;
}
html[data-theme="light"] body.has-shared-nav .logo { color: #1c2333; }
html[data-theme="light"] body.has-shared-nav pre,
html[data-theme="light"] body.has-shared-nav code {
  background: #eef1f5; color: #1c2333;
}
html[data-theme="light"] body.has-shared-nav .info-box { background: #ffffff; }

/* ═══════════════════════════════════════════════════════════
   [154] LICHT-THEME LESBARKEIT
   Auf den (dunklen) Funk/FPV-Standalone-Seiten sind viele Texte
   hart auf #fff gesetzt. Im hellen Modus müssen diese dunkel
   werden, sonst weiß-auf-weiß = unlesbar.
   ═══════════════════════════════════════════════════════════ */
html[data-theme="light"] body.has-shared-nav h1,
html[data-theme="light"] body.has-shared-nav h2,
html[data-theme="light"] body.has-shared-nav h3,
html[data-theme="light"] body.has-shared-nav h4,
html[data-theme="light"] body.has-shared-nav .card h3,
html[data-theme="light"] body.has-shared-nav .set-title,
html[data-theme="light"] body.has-shared-nav .way-title,
html[data-theme="light"] body.has-shared-nav .cm-val,
html[data-theme="light"] body.has-shared-nav .calc-big-val,
html[data-theme="light"] body.has-shared-nav strong,
html[data-theme="light"] body.has-shared-nav .spec-chip strong,
html[data-theme="light"] body.has-shared-nav th {
  color: #1c2333 !important;
}

/* Header-Logo im Seiteninhalt (nicht Sidebar) dunkel */
html[data-theme="light"] body.has-shared-nav > header .logo {
  color: #1c2333;
}
html[data-theme="light"] body.has-shared-nav > header .logo span {
  color: var(--accent, #4ade80);
}

/* Tabellen-Kopf + Zellen lesbar */
html[data-theme="light"] body.has-shared-nav table th {
  background: #eef1f5; color: #1c2333;
}
html[data-theme="light"] body.has-shared-nav table td { color: #2a3242; }

/* Steps / Nummern-Badges */
html[data-theme="light"] body.has-shared-nav .step-body { color: #2a3242; }

/* "weiße" Buttons/Chips im Header */
html[data-theme="light"] body.has-shared-nav .back-btn {
  color: #1c2333; border-color: #d5dbe4; background: #fff;
}

/* Set-Play-Button Text bleibt weiß (farbiger Button) — nur wenn accent hell wäre */
html[data-theme="light"] body.has-shared-nav .set-play-btn { color: #fff; }

/* Hero-/Section-Texte, die auf hellem BG standen */
html[data-theme="light"] body.has-shared-nav .lead,
html[data-theme="light"] body.has-shared-nav p { color: #2a3242; }

/* Eyebrow/Akzent-Label bleibt in Akzentfarbe (lesbar auf hell) */
html[data-theme="light"] body.has-shared-nav .eyebrow { color: var(--accent, #4ade80); }

/* ── Light-Theme für Flask base.html .sidebar (Hauptseiten) ── */
html[data-theme="light"] .sidebar {
  background: #f4f6f9; border-right: 1px solid #d5dbe4;
}
html[data-theme="light"] .sidebar .sb-logo { color: #1c2333; }
html[data-theme="light"] .sidebar .sb-header { border-bottom-color: #d5dbe4; }
html[data-theme="light"] .sidebar .sb-acc-header { color: #3a4356; }
html[data-theme="light"] .sidebar .sb-acc-header:hover { color: #1c2333; background: rgba(0,0,0,.04); }
html[data-theme="light"] .sidebar .sb-acc-group.open .sb-acc-header { color: #1c2333; }
html[data-theme="light"] .sidebar .sb-link { color: #5a6478; }
html[data-theme="light"] .sidebar .sb-link:hover { color: #1c2333; background: rgba(0,0,0,.04); }
html[data-theme="light"] .sidebar .sb-link.active { color: #1c2333; background: rgba(0,0,0,.06); }
html[data-theme="light"] .sidebar .bl-search-trigger,
html[data-theme="light"] .sidebar .theme-toggle-btn { color: #5a6478; border-color: #d5dbe4; }
html[data-theme="light"] .sidebar .bl-search-trigger:hover,
html[data-theme="light"] .sidebar .theme-toggle-btn:hover { color: #1c2333; }
html[data-theme="light"] .sidebar .sb-toggle span { background: #5a6478; }

/* Main-Content Headings auf Flask-Hauptseiten (nicht has-shared-nav) */
html[data-theme="light"] .heading,
html[data-theme="light"] .section h2,
html[data-theme="light"] .card h3 { color: #1c2333; }


/* ═══════════════════════════════════════════════════════════
   [180] LESBARKEITS-VOLLPASS für das helle Design
   Deckt inline-Styles UND alle Seiten-Klassen ab.
   ═══════════════════════════════════════════════════════════ */

/* 1. Inline-Styles mit weißem/hellem Text → dunkel erzwingen.
   Attribut-Selektor matcht style="...255,255,255..." */
html[data-theme="light"] [style*="color:rgba(255,255,255"],
html[data-theme="light"] [style*="color: rgba(255,255,255"],
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"] {
  color: #2a3242 !important;
}

/* 2. Alle bekannten Klassen mit hartem Weiß (aus Seiten-Styles) */
html[data-theme="light"] .logo,
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero p,
html[data-theme="light"] .card,
html[data-theme="light"] .card h3,
html[data-theme="light"] .step-body,
html[data-theme="light"] .spec-chip,
html[data-theme="light"] .week-head,
html[data-theme="light"] .vorkapitel-box,
html[data-theme="light"] .doc-header,
html[data-theme="light"] .day-row,
html[data-theme="light"] .way-title,
html[data-theme="light"] .vid-title,
html[data-theme="light"] .tutorial-block,
html[data-theme="light"] .social-item,
html[data-theme="light"] .set-title,
html[data-theme="light"] .dl-name,
html[data-theme="light"] .ks-link,
html[data-theme="light"] .rel-card,
html[data-theme="light"] .bb-meta-lbl,
html[data-theme="light"] .cmdp-label,
html[data-theme="light"] .ant-res-label {
  color: #1c2333 !important;
}

/* 3. Gedämpfte (muted) Texte: dunkelgrau statt hellgrau */
html[data-theme="light"] .set-meta,
html[data-theme="light"] .vid-desc,
html[data-theme="light"] .dl-desc,
html[data-theme="light"] .ant-res-label small,
html[data-theme="light"] .bb-hint,
html[data-theme="light"] .update-date,
html[data-theme="light"] .related-head,
html[data-theme="light"] .log-count,
html[data-theme="light"] .log-empty,
html[data-theme="light"] .ls-lbl,
html[data-theme="light"] footer {
  color: #5a6478 !important;
}

/* 4. Karten/Boxen: heller Grund, dunkle Ränder */
html[data-theme="light"] .card,
html[data-theme="light"] .set-card,
html[data-theme="light"] .vid-card,
html[data-theme="light"] .dl-item,
html[data-theme="light"] .ks-link,
html[data-theme="light"] .rel-card,
html[data-theme="light"] .ls-item,
html[data-theme="light"] .log-form,
html[data-theme="light"] .ant-calc,
html[data-theme="light"] .bb-meta-item,
html[data-theme="light"] .info-box {
  background: #f4f6f9 !important;
  border-color: #d5dbe4 !important;
}

/* 5. Formularfelder hell */
html[data-theme="light"] .log-fields input,
html[data-theme="light"] .log-fields select,
html[data-theme="light"] .log-filter,
html[data-theme="light"] .cf input,
html[data-theme="light"] .cf textarea,
html[data-theme="light"] .cf select,
html[data-theme="light"] .ant-calc-input input {
  background: #ffffff !important; color: #1c2333 !important; border-color: #cbd3df !important;
}
html[data-theme="light"] .cf input::placeholder,
html[data-theme="light"] .cf textarea::placeholder {
  color: rgba(28,35,51,.45) !important;
}

/* 6. Tabellen in Guides */
html[data-theme="light"] table code { color: #b3123e; background: #f0e9ec; }
html[data-theme="light"] .log-table td { color: #2a3242; }

/* 7. Player-Panel + Fußzeilen-Player Texte */
html[data-theme="light"] .blp-title { color: #1c2333 !important; }
html[data-theme="light"] .blp-artist, html[data-theme="light"] .blp-time { color: #5a6478 !important; }
html[data-theme="light"] .blp-pl-item { color: #2a3242 !important; }
html[data-theme="light"] .blp-sw-btn { color: #5a6478; background: #eef1f5; border-color: #cbd3df; }
html[data-theme="light"] .blp-sw-btn.active { color: #fff; }


/* ═══════════════════════════════════════════════════════════
   [203] WEISSE-KAESTEN-DARK-PASS
   Im dunklen Design dürfen keine weißen Hintergründe auftreten.
   Deckt alle Kasten-Klassen + inline background:#fff ab.
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .event-card,
html[data-theme="dark"] .tech-card,
html[data-theme="dark"] .blog-item,
html[data-theme="dark"] .fun-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .link-card,
html[data-theme="dark"] .toc,
html[data-theme="dark"] .calc-scale-marker,
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"] {
  background: #171e2e !important;
  border-color: #26304a !important;
  color: #e8edf5 !important;
}
/* Text in diesen Kästen lesbar halten */
html[data-theme="dark"] .event-card h3,
html[data-theme="dark"] .tech-card h3,
html[data-theme="dark"] .blog-item h3,
html[data-theme="dark"] .fun-card h3,
html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] .link-card h3 {
  color: #e8edf5 !important;
}
html[data-theme="dark"] .blog-item:hover {
  background: #1c2540 !important;
}