/* Pool Buddy – Dark Mode
   Wird per html[data-theme="dark"] aktiviert (JS: theme-init.js).
   System-Auto, immer hell und immer dunkel werden über settings.html gesteuert. */

/* Statusfarben als Variablen. JS setzt Farben zur Laufzeit per element.style;
   der Browser serialisiert das als rgb(), weshalb die [style*="color:#..."]-
   Regeln weiter unten dort NICHT greifen. Über Variablen bekommt JS direkt den
   zum Thema passenden, kontraststarken Wert. */
:root {
  --pb-status-ok: #276b4e;
  --pb-status-warn: #c98a00;
  --pb-status-bad: #ba1a1a;
}
html[data-theme="dark"] {
  --pb-status-ok: #52d87c;
  --pb-status-warn: #f0bc72;
  --pb-status-bad: #ffb4ab;
}

html[data-theme="dark"] {

  color-scheme: dark;

  --pb-focus: #61caf8;
  --pb-focus-soft: rgba(97,202,248,.18);

  /* ── Surfaces ─────────────────────────────────────────────────────────────── */
  background-color: #0c1929;
  color: #cfe3f4;

}

html[data-theme="dark"] body { background-color: #0c1929 !important; color: #cfe3f4; }

/* ── Surfaces ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .bg-surface          { background-color: #0c1929 !important; }
html[data-theme="dark"] .bg-background       { background-color: #0c1929 !important; }
html[data-theme="dark"] .bg-surface-container-lowest   { background-color: #070e18 !important; }
html[data-theme="dark"] .bg-surface-container-low      { background-color: #101d2c !important; }
html[data-theme="dark"] .bg-surface-container          { background-color: #141f2e !important; }
html[data-theme="dark"] .bg-surface-container-high     { background-color: #1b2a3a !important; }
html[data-theme="dark"] .bg-surface-variant            { background-color: #1c2d3e !important; }
html[data-theme="dark"] .bg-surface\/90                { background-color: rgba(12,25,41,.9) !important; }
html[data-theme="dark"] .bg-surface-container\/40      { background-color: rgba(20,31,46,.5) !important; }
html[data-theme="dark"] .bg-surface-container-lowest\/60 { background-color: rgba(7,14,24,.6) !important; }
html[data-theme="dark"] .bg-on-surface { background-color: #1e3249 !important; }

/* ── Text ───────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .text-on-surface,
html[data-theme="dark"] .text-on-background    { color: #cfe3f4 !important; }
html[data-theme="dark"] .text-on-surface-variant { color: #8aaec5 !important; }
html[data-theme="dark"] .text-outline          { color: #6d95a9 !important; }
/* Klassen mit fest verdrahteter Grauton-Farbe erreichen die
   [style*="color:#..."]-Regeln unten nicht — hier explizit nachziehen. */
html[data-theme="dark"] .section-label         { color: #6d95a9 !important; }

/* tipps.html definiert seine Textfarben in einem eigenen <style>-Block mit
   hellen Werten (#0b1c30 wäre auf Dunkel praktisch unlesbar). */
html[data-theme="dark"] .tips-section-title,
html[data-theme="dark"] .tip-title             { color: #cfe3f4 !important; }
html[data-theme="dark"] .tips-section-count    { color: #6d95a9 !important; }
html[data-theme="dark"] .tip-body,
html[data-theme="dark"] .tips-filter button    { color: #8aaec5 !important; }
/* Hintergründe müssen mitgezogen werden — sonst steht heller Text auf hellem Grund. */
html[data-theme="dark"] .tips-toc a {
  background: #101d2c !important;
  border-color: #1e3042 !important;
  color: #61caf8 !important;
}
html[data-theme="dark"] .tips-toc a:hover      { background: #1e3042 !important; }
html[data-theme="dark"] .tips-filter           { background: #101d2c !important; }
html[data-theme="dark"] .tips-filter button.active { background: #1e3042 !important; color: #61caf8 !important; }
html[data-theme="dark"] details.tip-card       { background: #070e18 !important; }
html[data-theme="dark"] .tips-section-header   { background: #101d2c !important; }
html[data-theme="dark"] .text-primary          { color: #61caf8 !important; }
html[data-theme="dark"] .text-secondary        { color: #52d87c !important; }
html[data-theme="dark"] .text-tertiary         { color: #f0bc72 !important; }
html[data-theme="dark"] .text-error            { color: #ffb4ab !important; }
html[data-theme="dark"] .text-on-primary-container { color: #c3e6ff !important; }
html[data-theme="dark"] .text-amber-400        { color: #fbbf24 !important; }
html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-900        { color: #f0bc72 !important; }
html[data-theme="dark"] .text-green-800        { color: #52d87c !important; }
html[data-theme="dark"] .text-red-800          { color: #ffb4ab !important; }
html[data-theme="dark"] .text-yellow-800       { color: #f0bc72 !important; }

/* ── Borders ────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .border-outline             { border-color: #3d5570 !important; }
html[data-theme="dark"] .border-outline-variant     { border-color: #1e3042 !important; }
html[data-theme="dark"] .border-outline-variant\/20 { border-color: rgba(30,48,66,.2) !important; }
html[data-theme="dark"] .border-outline-variant\/30 { border-color: rgba(30,48,66,.35) !important; }
html[data-theme="dark"] .border-outline-variant\/40 { border-color: rgba(30,48,66,.45) !important; }
html[data-theme="dark"] .border-outline-variant\/50 { border-color: rgba(30,48,66,.55) !important; }
html[data-theme="dark"] .border-outline-variant\/60 { border-color: rgba(30,48,66,.65) !important; }
html[data-theme="dark"] .border-primary             { border-color: #61caf8 !important; }
html[data-theme="dark"] .border-primary-fixed       { border-color: #002d44 !important; }
html[data-theme="dark"] .border-primary\/20         { border-color: rgba(97,202,248,.2) !important; }
html[data-theme="dark"] .border-surface-container   { border-color: #1b2a3a !important; }
html[data-theme="dark"] .border-error               { border-color: #ffb4ab !important; }
html[data-theme="dark"] .border-error-container     { border-color: #550003 !important; }
html[data-theme="dark"] .border-secondary           { border-color: #52d87c !important; }
html[data-theme="dark"] .border-secondary-container { border-color: #005229 !important; }
html[data-theme="dark"] .border-tertiary-fixed      { border-color: #3f2600 !important; }
html[data-theme="dark"] .border-tertiary\/20        { border-color: rgba(240,188,114,.2) !important; }
html[data-theme="dark"] .border-amber-200           { border-color: #5c3a00 !important; }
html[data-theme="dark"] .border-green-200           { border-color: #005229 !important; }
html[data-theme="dark"] .border-red-200             { border-color: #6b0000 !important; }
html[data-theme="dark"] .border-yellow-200          { border-color: #4a3100 !important; }
html[data-theme="dark"] .divide-outline-variant\/30 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(30,48,66,.35) !important;
}

/* ── Primary ────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .bg-primary              { background-color: #004d6b !important; }
html[data-theme="dark"] .bg-primary-container    { background-color: #006f9e !important; }
html[data-theme="dark"] .bg-primary-fixed        { background-color: #002a3d !important; }
html[data-theme="dark"] .bg-primary-fixed\/30    { background-color: rgba(0,42,61,.4)  !important; }
html[data-theme="dark"] .bg-primary-fixed\/35    { background-color: rgba(0,42,61,.45) !important; }
html[data-theme="dark"] .bg-primary-fixed\/40    { background-color: rgba(0,42,61,.5)  !important; }
html[data-theme="dark"] .bg-primary-fixed\/45    { background-color: rgba(0,42,61,.55) !important; }
html[data-theme="dark"] .bg-primary-fixed\/50    { background-color: rgba(0,42,61,.6)  !important; }
html[data-theme="dark"] .bg-primary-fixed\/60    { background-color: rgba(0,42,61,.7)  !important; }
html[data-theme="dark"] .bg-primary-fixed\/70    { background-color: rgba(0,42,61,.75) !important; }
html[data-theme="dark"] .bg-primary\/5           { background-color: rgba(97,202,248,.06) !important; }

/* ── Secondary / Error / Tertiary ───────────────────────────────────────────── */
html[data-theme="dark"] .bg-secondary              { background-color: #004f24 !important; }
html[data-theme="dark"] .bg-secondary-container\/20 { background-color: rgba(82,216,124,.12) !important; }
html[data-theme="dark"] .bg-secondary-container\/30 { background-color: rgba(82,216,124,.18) !important; }
html[data-theme="dark"] .bg-secondary\/10           { background-color: rgba(82,216,124,.1)  !important; }
html[data-theme="dark"] .bg-error                  { background-color: #93000a !important; }
html[data-theme="dark"] .bg-error-container        { background-color: #550003 !important; }
html[data-theme="dark"] .bg-error-container\/30    { background-color: rgba(85,0,3,.35) !important; }
html[data-theme="dark"] .bg-error\/10              { background-color: rgba(255,180,171,.1) !important; }
html[data-theme="dark"] .bg-tertiary-fixed         { background-color: #3f2600 !important; }
html[data-theme="dark"] .bg-tertiary-fixed\/50     { background-color: rgba(63,38,0,.55) !important; }
html[data-theme="dark"] .bg-tertiary-fixed\/55     { background-color: rgba(63,38,0,.6)  !important; }
html[data-theme="dark"] .bg-tertiary\/10           { background-color: rgba(240,188,114,.1) !important; }

/* ── Misc Backgrounds ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .bg-outline-variant     { background-color: #1e3042 !important; }
html[data-theme="dark"] .bg-outline-variant\/50 { background-color: rgba(30,48,66,.5) !important; }
html[data-theme="dark"] .bg-amber-50  { background-color: #3a2000 !important; }
html[data-theme="dark"] .bg-green-50  { background-color: #00200d !important; }
html[data-theme="dark"] .bg-red-50    { background-color: #200001 !important; }
html[data-theme="dark"] .bg-yellow-50 { background-color: #2a1c00 !important; }
html[data-theme="dark"] .bg-white              { background-color: #101d2c !important; }
html[data-theme="dark"] .bg-white\/10  { background-color: rgba(255,255,255,.04) !important; }
html[data-theme="dark"] .bg-white\/15  { background-color: rgba(255,255,255,.06) !important; }
html[data-theme="dark"] .bg-white\/20  { background-color: rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .bg-white\/60  { background-color: rgba(255,255,255,.1)  !important; }

/* ── Hover / Active States ──────────────────────────────────────────────────── */
html[data-theme="dark"] .hover\:bg-surface-container-low:hover { background-color: #1a2b3b !important; }
html[data-theme="dark"] .hover\:bg-surface-container:hover     { background-color: #1e2f40 !important; }
html[data-theme="dark"] .hover\:bg-primary-fixed:hover         { background-color: #002034 !important; }
html[data-theme="dark"] .hover\:bg-error-container:hover       { background-color: #3d0002 !important; }
html[data-theme="dark"] .active\:bg-surface-container:active   { background-color: #1e2f40 !important; }
html[data-theme="dark"] .active\:bg-outline-variant\/30:active { background-color: rgba(30,48,66,.35) !important; }
html[data-theme="dark"] .active\:bg-outline-variant\/40:active { background-color: rgba(30,48,66,.45) !important; }

/* ── Shadows ────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .shadow-sm  { --tw-shadow: 0 1px 2px 0 rgba(0,0,0,.3) !important; }
html[data-theme="dark"] .shadow-lg  { --tw-shadow: 0 10px 15px -3px rgba(0,0,0,.35), 0 4px 6px -4px rgba(0,0,0,.35) !important; }
html[data-theme="dark"] .shadow-xl  { --tw-shadow: 0 20px 25px -5px rgba(0,0,0,.35), 0 8px 10px -6px rgba(0,0,0,.35) !important; }
html[data-theme="dark"] .shadow-2xl { --tw-shadow: 0 25px 50px -12px rgba(0,0,0,.5) !important; }

/* ── Form Inputs ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6d95a9 !important; opacity: 1 !important; }

html[data-theme="dark"] .pool-input {
  border-color: #3d5570 !important;
  background: #101d2c !important;
  color: #cfe3f4 !important;
}
html[data-theme="dark"] .pool-input:focus   { border-color: #61caf8 !important; }
html[data-theme="dark"] .pool-input.valid   { border-color: #52d87c !important; }
html[data-theme="dark"] .pool-input.warning { border-color: #f0bc72 !important; }
html[data-theme="dark"] .pool-input.invalid { border-color: #ffb4ab !important; }

/* ── Range Chips ────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .chip-ok   { background: rgba(82,216,124,.15)  !important; color: #52d87c  !important; }
html[data-theme="dark"] .chip-warn { background: rgba(240,188,114,.15) !important; color: #f0bc72  !important; }
html[data-theme="dark"] .chip-bad  { background: rgba(255,180,171,.15) !important; color: #ffb4ab  !important; }

/* ── motion.css Overrides ───────────────────────────────────────────────────── */
html[data-theme="dark"] #reset-actions {
  background: #0c1929 !important;
}
html[data-theme="dark"] body > nav.fixed {
  background: rgba(12,25,41,.92) !important;
  border-top-color: rgba(30,48,66,.5) !important;
  box-shadow: 0 -8px 28px -12px rgba(0,0,0,.4) !important;
}
html[data-theme="dark"] body > header.sticky {
  background: rgba(12,25,41,.9) !important;
}
html[data-theme="dark"] .soft-glow {
  box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 10px 28px -12px rgba(0,100,180,.12) !important;
}
html[data-theme="dark"] button.bg-primary-container,
html[data-theme="dark"] a.bg-primary-container {
  background: linear-gradient(135deg, #0077a8 0%, #005880 55%, #003d5c 130%) !important;
  box-shadow: 0 8px 20px -8px rgba(0,119,168,.4) !important;
}
html[data-theme="dark"] .pool-input:focus,
html[data-theme="dark"] .dose-input:focus {
  box-shadow: 0 0 0 4px rgba(97,202,248,.2) !important;
}

@media (min-width: 900px) {
  html[data-theme="dark"] body > nav.fixed {
    border-color: rgba(30,48,66,.45) !important;
    box-shadow: 0 12px 36px -12px rgba(0,0,0,.5) !important;
  }
}

/* ── Icons – alle weiß im Dark Mode ────────────────────────────────────────── */
html[data-theme="dark"] .icon {
  filter: brightness(0) invert(1) !important;
}

/* index.html / en/index.html – Landing-Page-Icons mit inline hardcoded
   filter:invert(26%)…hue-rotate(175deg) ergeben Pool-Buddy-Blau. Auf dem
   dunklen bg-primary-fixed (#002a3d) verschwinden sie im Dark Mode.
   Weiß überschreiben für hohen Kontrast (WCAG AAA). */
html[data-theme="dark"] img[style*="hue-rotate(175deg)"] {
  filter: brightness(0) invert(1) !important;
}

/* ── Inline hardcoded Textfarben – Dark Mode Override ───────────────────────
   SVG-Icons als <img> ignorieren die color-Eigenschaft; Textelemente mit
   fest eincodierten style="color:#..." werden hier flächendeckend übersteuert. */
html[data-theme="dark"] [style*="color:#0b1c30"] { color: #cfe3f4 !important; }
html[data-theme="dark"] [style*="color:#3e4850"] { color: #8aaec5 !important; }
html[data-theme="dark"] [style*="color:#6b7580"],
html[data-theme="dark"] [style*="color:#6e7881"] { color: #6d95a9 !important; }
html[data-theme="dark"] [style*="color:#4a5560"] { color: #7a9db8 !important; }
html[data-theme="dark"] [style*="color:#9aa5af"] { color: #4a6b80 !important; }
html[data-theme="dark"] [style*="color:#5a3800"] { color: #f0bc72 !important; }
html[data-theme="dark"] [style*="color:#004d20"],
html[data-theme="dark"] [style*="color:#2e7d5b"] { color: #52d87c !important; }
html[data-theme="dark"] [style*="color:#7a0000"],
html[data-theme="dark"] [style*="color:#ba1a1a"] { color: #ffb4ab !important; }
html[data-theme="dark"] [style*="color:#8a5a00"],
html[data-theme="dark"] [style*="color:#c98a00"],
html[data-theme="dark"] [style*="color:#b06f00"] { color: #f0bc72 !important; }
html[data-theme="dark"] [style*="color:#7a4f00"] { color: #f0bc72 !important; }
html[data-theme="dark"] [style*="color:#06331f"] { color: #52d87c !important; }
html[data-theme="dark"] [style*="color:#006591"] { color: #61caf8 !important; }

/* ── Onboarding Tour (#pp-tour): dynamic white card mit inline-Styles ─── */
html[data-theme="dark"] #pp-tour > div:last-child {
  background: #141f2e !important;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55) !important;
}
html[data-theme="dark"] #pp-tour p[style*="color:#0b1c30"] { color: #e6f0fa !important; }
html[data-theme="dark"] #pp-tour p[style*="color:#3e4850"] { color: #b8c9d9 !important; }
html[data-theme="dark"] #pp-tour button[id="pp-tour-skip"] { color: #8aaec5 !important; }
html[data-theme="dark"] #pp-tour span[style*="background:#bec8d2"] { background: #3d5570 !important; }

/* ── Onboarding: Age-Confirm Checkbox (#age-box) leerer Zustand ─────────
   JS setzt bei checked inline background/borderColor auf #006591 — daher
   nur den leeren Zustand (Checkbox nicht gecheckt) hier stylen. */
html[data-theme="dark"] #age-label:has(#age-check:not(:checked)) #age-box {
  background-color: transparent !important;
  border-color: #6d95a9 !important;
}
html[data-theme="dark"] #age-label p[style*="color:#3e4850"] { color: #b8c9d9 !important; }

/* ── Edit-Sheet (pool_details.html): edit-list-card + edit-choice-card ──── */
html[data-theme="dark"] .edit-list-card {
  background: #141f2e !important;
  border-color: #1e3042 !important;
  box-shadow: 0 4px 20px -2px rgba(0,0,0,.35) !important;
}
html[data-theme="dark"] .edit-list-icon { background: #0a2a45 !important; }
html[data-theme="dark"] .edit-list-label { color: #8aaec5 !important; }
html[data-theme="dark"] .edit-list-input { color: #cfe3f4 !important; }
html[data-theme="dark"] .edit-list-input::placeholder { color: #6d95a9 !important; }
html[data-theme="dark"] .edit-list-input option { background: #141f2e !important; color: #cfe3f4 !important; }
html[data-theme="dark"] .edit-list-input[type="date"] { color-scheme: dark; }
html[data-theme="dark"] .edit-choice-card {
  background: #141f2e !important;
  border-color: #3d5570 !important;
  color: #cfe3f4 !important;
}
html[data-theme="dark"] .edit-choice-card.is-selected {
  background: #0a2a45 !important;
  border-color: #61caf8 !important;
}
html[data-theme="dark"] .edit-choice-card .choice-icon { background: #0a2a45 !important; }

/* ── Feedback-Cards (settings.html) ─────────────────────────────────────── */
html[data-theme="dark"] .feedback-cat-card       { background: #141f2e !important; border-color: #1e3042 !important; }
html[data-theme="dark"] .feedback-cat-card:hover { border-color: #61caf8 !important; }
html[data-theme="dark"] .fb-label                { color: #cfe3f4 !important; }
html[data-theme="dark"] .fb-sub                  { color: #6d95a9 !important; }

/* ── Hero Card (app.html) ───────────────────────────────────────────────────── */
html[data-theme="dark"] #hero-card              { background: #101d2c !important; border-color: #1e3042 !important; }
html[data-theme="dark"] #verdict-title,
html[data-theme="dark"] #center-word            { color: #cfe3f4 !important; text-shadow: none !important; }
html[data-theme="dark"] #verdict-sub            { color: #8aaec5 !important; }
/* Wasser-SVG-Layer im Ring: helle Fills durch dunkle ersetzen */
html[data-theme="dark"] #ring-container svg:first-child circle { fill: #0a1929 !important; }
html[data-theme="dark"] #ring-container svg:first-child path   { fill: #0f3460 !important; }
/* Ring-Innenfläche: weißes radial-gradient durch dunkles ersetzen */
html[data-theme="dark"] #ring-container > div  { background: radial-gradient(closest-side at 50% 50%, rgba(10,25,41,.95) 28%, rgba(10,25,41,.60) 48%, rgba(10,25,41,0) 65%) !important; }
/* Status-Ring-Track dunkler */
html[data-theme="dark"] #ring-container svg:last-of-type circle:first-child { stroke: #1e3042 !important; }
/* Center-Icon weiß/hell im Dark Mode */
html[data-theme="dark"] #center-icon           { filter: brightness(0) invert(1) !important; }
/* STATUS-Label unter dem Icon */
html[data-theme="dark"] #ring-container > div > span:last-child { color: #8aaec5 !important; text-shadow: none !important; }
html[data-theme="dark"] #status-badge {
  background: rgba(240,188,114,.20) !important;
  color: #f0bc72 !important;
  box-shadow: inset 0 0 0 1px rgba(240,188,114,.35) !important;
}
html[data-theme="dark"] #status-badge[style*="c6efd8"],
html[data-theme="dark"] #status-badge[style*="rgb(198, 239, 216)"] {
  background: rgba(82,216,124,.18) !important;
  color: #52d87c !important;
  box-shadow: inset 0 0 0 1px rgba(82,216,124,.35) !important;
}
html[data-theme="dark"] #status-hint            { background: rgba(201,138,0,.12) !important; }
html[data-theme="dark"] #status-hint img.icon   { color: #f0bc72 !important; }
html[data-theme="dark"] #status-hint-text       { color: #f0bc72 !important; }
html[data-theme="dark"] #reminder-banner        { background: #1e1600 !important; border-color: #5c3a00 !important; }
html[data-theme="dark"] #reminder-banner img.icon { color: #f0bc72 !important; }

/* ── Heute-Aufgaben-Karten (app.html) ─────────────────────────────────────── */
/* Weiße Karten-BG (inline style aus JS) → dunkel */
html[data-theme="dark"] .today-task             { background: #141f2e !important; border-color: #1e3042 !important; }
/* Erledigte Karte (background:#f2faf5) */
html[data-theme="dark"] .today-task[style*="background:#f2faf5"] { background: #0d2218 !important; border-color: #1a4030 !important; }
/* Amber-Aufgaben (background:#fffdf7) */
html[data-theme="dark"] .today-task[style*="background:#fffdf7"] { background: #1e1a0d !important; border-color: #3d2e00 !important; }
/* Action-Button „Messen" etc. */
html[data-theme="dark"] .task-action            { background: rgba(97,202,248,.15) !important; color: #61caf8 !important; }
/* Check-Kreis-Rand im undone-State */
html[data-theme="dark"] .task-toggle[style*="border:2px solid #006591"] { border-color: #61caf8 !important; }
html[data-theme="dark"] .task-toggle[style*="border:2px solid #b06f00"] { border-color: #f0bc72 !important; }

/* ── app.html: Pooldetails / Wartung Quick-Cards ─────────────────────────── */
html[data-theme="dark"] [data-nav-href="pool_details.html"]  { background: #141f2e !important; border-color: #1e3042 !important; }
html[data-theme="dark"] [data-nav-href="pool_school.html"]   { background: #141f2e !important; border-color: #1e3042 !important; }
html[data-theme="dark"] [data-nav-href="tipps.html"]         { background: #141f2e !important; border-color: #1e3042 !important; }
html[data-theme="dark"] #quick-maint-btn                     { background: #141f2e !important; border-color: #1e3042 !important; }
/* Generell: hell hinterlegte Inline-Badges würden im Dunkelmodus hellen Text
   auf hellem Grund ergeben (z. B. das „BALD“-Badge in den Einstellungen). */
html[data-theme="dark"] [style*="background:#e5eeff"] { background: #1e3042 !important; }

/* Icon-Container #e5eeff in diesen Karten */
html[data-theme="dark"] [data-nav-href="pool_details.html"] span[style*="background:#e5eeff"],
html[data-theme="dark"] [data-nav-href="pool_school.html"]  span[style*="background:#e5eeff"],
html[data-theme="dark"] [data-nav-href="tipps.html"]        span[style*="background:#e5eeff"],
html[data-theme="dark"] #quick-maint-btn span[style*="background:#e5eeff"] { background: #1e3042 !important; }
/* Streifen scannen (coming soon) Icon-Container #f0f2f5 */
html[data-theme="dark"] [style*="background:#f0f2f5"]        { background: #141f2e !important; }

/* ── Hilfe & Kontakt Box (alle Seiten, via a11y.css) ─────────────────────── */
html[data-theme="dark"] .pb-consistent-help              { background: #141f2e !important; border-color: #1e3042 !important; color: #cfe3f4 !important; }
html[data-theme="dark"] .pb-consistent-help strong       { color: #cfe3f4 !important; }
html[data-theme="dark"] .pb-consistent-help a            { color: #61caf8 !important; }

/* ── Settings: info-row Trennlinie & size-btn (Pool-Größe Auswahl) ──────── */
html[data-theme="dark"] .info-row                        { border-bottom-color: #1e3042 !important; }
html[data-theme="dark"] .size-btn                        { background: #141f2e !important; border-color: #1e3042 !important; color: #cfe3f4 !important; }
html[data-theme="dark"] .size-btn .size-icon             { background: #1e3042 !important; }
html[data-theme="dark"] .size-btn .size-label            { color: #cfe3f4 !important; }
html[data-theme="dark"] .size-btn .size-sub              { color: #6d95a9 !important; }
html[data-theme="dark"] .size-btn.selected               { background: #0a2a45 !important; border-color: #61caf8 !important; }
html[data-theme="dark"] .size-btn.selected .size-icon    { background: #0d3a60 !important; }

/* ── First Start: dose-input & seg-btn ──────────────────────────────────── */
html[data-theme="dark"] .dose-input                      { background: #141f2e !important; border-color: #1e3042 !important; color: #cfe3f4 !important; }
html[data-theme="dark"] .dose-input:focus                { border-color: #61caf8 !important; }
html[data-theme="dark"] .seg-btn                         { background: #141f2e !important; border-color: #1e3042 !important; color: #8aaec5 !important; }
html[data-theme="dark"] .seg-btn.selected                { background: #0a2a45 !important; border-color: #61caf8 !important; color: #61caf8 !important; }

/* ── Onboarding: choice-btn & model-btn ─────────────────────────────────── */
html[data-theme="dark"] .choice-btn,
html[data-theme="dark"] .model-btn                       { background: #141f2e !important; border-color: #1e3042 !important; color: #cfe3f4 !important; }
html[data-theme="dark"] .choice-btn.selected,
html[data-theme="dark"] .model-btn.selected              { background: #0a2a45 !important; border-color: #61caf8 !important; }

/* ── First Start: Erfahrungslevel-Sheet & Warn-Karten ─────────────────────
   - #exp-expert-note (gelbe Anfänger-Warnung) hat inline light-Farben.
   - bg-white/60 Icon-Container in tertiary-fixed Sektionen wirkt sonst zu
     hell; wir tönen sie warm-transluzent passend zur Karte. */
html[data-theme="dark"] #exp-expert-note                 { background: #2a1c00 !important; border-color: #5c3a00 !important; }
html[data-theme="dark"] [style*="color:#5f4300"]         { color: #f0bc72 !important; }
html[data-theme="dark"] .bg-tertiary-fixed\/55 .bg-white\/60,
html[data-theme="dark"] .bg-tertiary-fixed .bg-white\/60 { background-color: rgba(240,188,114,.15) !important; }

/* ── index.html – "Early Version" / Roadmap-Karte ──────────────────────────
   Inline linear-gradient(#eff4ff→#f8f9ff) macht die Karte im Dark Mode
   nahezu weiß. Wir setzen einen dunklen Verlauf und passen den gestrichelten
   Rahmen an. */
html[data-theme="dark"] #roadmap > div[style*="linear-gradient(135deg,#eff4ff"] {
  background: linear-gradient(135deg,#101d2c 0%,#0c1929 100%) !important;
  border-color: rgba(97,202,248,0.45) !important;
}

/* ── impressum.html – inline Light-Styles überschreiben ───────────────────
   body/header/H1/Cards/Prose/Back-Button haben harte inline-Farben.
   Attribut-Selektoren mit !important überstimmen inline non-!important. */
html[data-theme="dark"] body[style*="background:#f8f9ff"] {
  background: #0c1929 !important;
  color: #cfe3f4 !important;
}
html[data-theme="dark"] header[style*="rgba(248,249,255"] {
  background: rgba(12,25,41,0.92) !important;
  border-bottom-color: #1c2d3e !important;
}
html[data-theme="dark"] [style*="color:#0b1c30"] { color: #e6f0fa !important; }
html[data-theme="dark"] [style*="color:#3e4850"] { color: #b8c9d9 !important; }
html[data-theme="dark"] [style*="color:#6e7881"] { color: #8fa2b5 !important; }
html[data-theme="dark"] a[style*="color:#006591"] { color: #61caf8 !important; }

/* Weiße Card-Hintergründe (Impressum, teils Privacy) */
html[data-theme="dark"] div[style*="background:#fff"].bg-surface-container-lowest,
html[data-theme="dark"] div[style*="background:#ffffff"].bg-surface-container-lowest {
  background: #101d2c !important;
}

/* Zurück-Button (Impressum) */
html[data-theme="dark"] a[style*="background:#e5eeff"] {
  background: #1b2a3a !important;
  color: #e6f0fa !important;
}

/* ── privacy.html – Prose-Section & Tags ──────────────────────────────────
   Die lokalen <style>-Blöcke setzen dunkle Text-Farben & helle Tag-Chips. */
html[data-theme="dark"] .prose-section h2 { color: #e6f0fa !important; }
html[data-theme="dark"] .prose-section p,
html[data-theme="dark"] .prose-section li { color: #b8c9d9 !important; }
html[data-theme="dark"] .prose-section strong,
html[data-theme="dark"] .prose-section b { color: #e6f0fa !important; }
html[data-theme="dark"] .tag-green { background: rgba(46,125,91,0.22) !important; color: #86e5b4 !important; }
html[data-theme="dark"] .tag-blue  { background: rgba(29,78,216,0.22) !important; color: #9dbcff !important; }

/* ── index.html – Install-Panel Header (iPhone / iPad, Android) ──────────── */
html[data-theme="dark"] .install-panel-header { color: #e6f0fa !important; }
html[data-theme="dark"] .install-panel-header svg { fill: #4ea3d0 !important; }

/* ── Ratgeber-Seiten – cause-table (Ursachen-Tabellen) ─────────────────────── */
html[data-theme="dark"] .cause-table th {
  background: #14263c !important;
  color: #cfe3f4 !important;
}
html[data-theme="dark"] .cause-table th,
html[data-theme="dark"] .cause-table td {
  border-bottom-color: #1e3350 !important;
}

/* ── Ratgeber-Seiten – CTA-Block (helles Blau-Gradient inline) ─────────────── */
html[data-theme="dark"] div[style*="linear-gradient(135deg, #e0f2fe"] {
  background: linear-gradient(135deg, #0f2942 0%, #0c1929 100%) !important;
  border-color: #1e3a5f !important;
}
html[data-theme="dark"] div[style*="linear-gradient(135deg, #e0f2fe"] h2 { color: #e6f0fa !important; }
html[data-theme="dark"] div[style*="linear-gradient(135deg, #e0f2fe"] p { color: #b8c9d9 !important; }
html[data-theme="dark"] div[style*="linear-gradient(135deg, #e0f2fe"] .text-outline { color: #7a8ea3 !important; }

/* ── Ratgeber-Seiten – Tipp-Boxen (helles Blau inline) ─────────────────────── */
html[data-theme="dark"] div[style*="background:#f0f9ff"] {
  background: #14263c !important;
  border-color: #1e3a5f !important;
}
html[data-theme="dark"] div[style*="background:#f0f9ff"] p,
html[data-theme="dark"] div[style*="background:#f0f9ff"] li {
  color: #cfe3f4 !important;
}
html[data-theme="dark"] div[style*="background:#f0f9ff"] strong {
  color: #e6f0fa !important;
}

/* ── Ratgeber-Seiten – Matrix-Tabelle (pool-app-vergleich) ─────────────────── */
html[data-theme="dark"] .matrix thead th {
  background: #14263c !important;
  color: #cfe3f4 !important;
}
html[data-theme="dark"] .matrix tbody th {
  background: #0f1e2f !important;
  color: #cfe3f4 !important;
}
html[data-theme="dark"] .matrix td,
html[data-theme="dark"] .matrix th {
  border-color: #1e3350 !important;
}

/* ── Ratgeber-Seiten – Hover-States der internen Nav-Chips ─────────────────── */
html[data-theme="dark"] .nav-link:hover {
  background: #14263c !important;
  color: #61caf8 !important;
}
html[data-theme="dark"] .faq-toc a:hover {
  background: #14263c !important;
  border-color: #61caf8 !important;
}

/* ── ueber-uns – Icon-Chips der 4-Grundsätze-Grid ──────────────────────────── */
html[data-theme="dark"] .principle .icon {
  background: #14263c !important;
  color: #61caf8 !important;
}
html[data-theme="dark"] .timeline-item::before {
  border-color: #0c1929 !important;
  box-shadow: 0 0 0 2px #14263c !important;
}
html[data-theme="dark"] .person-card,
html[data-theme="dark"] .principle {
  background: #0f1e2f !important;
  border-color: #1e3350 !important;
}
html[data-theme="dark"] .person-card h3,
html[data-theme="dark"] .principle h3,
html[data-theme="dark"] .timeline-item h3 {
  color: #e6f0fa !important;
}
html[data-theme="dark"] .person-card p,
html[data-theme="dark"] .principle p,
html[data-theme="dark"] .timeline-item p {
  color: #b8c9d9 !important;
}

/* ── FAQ – Dark-Mode für Accordion-Items ───────────────────────────────────── */
html[data-theme="dark"] details.faq-item {
  background: #0f1e2f !important;
  border-color: #1e3350 !important;
}
html[data-theme="dark"] details.faq-item[open] {
  border-color: #61caf8 !important;
}
html[data-theme="dark"] details.faq-item summary { color: #e6f0fa !important; }
html[data-theme="dark"] details.faq-item .faq-body,
html[data-theme="dark"] details.faq-item .faq-answer { color: #b8c9d9 !important; }
html[data-theme="dark"] details.faq-item .faq-body a,
html[data-theme="dark"] details.faq-item .faq-answer a { color: #61caf8 !important; }
html[data-theme="dark"] details.faq-item[open] > summary { color: #61caf8 !important; }
html[data-theme="dark"] .faq-category h2 {
  color: #e6f0fa !important;
  border-bottom-color: #1e3350 !important;
}

/* ── Ratgeber-Seiten – alle weißen Card-Varianten ──────────────────────────── */
html[data-theme="dark"] .related-card,
html[data-theme="dark"] .method-card,
html[data-theme="dark"] .cat-card,
html[data-theme="dark"] .persona-card,
html[data-theme="dark"] .algae-card,
html[data-theme="dark"] .info-card {
  background: #0f1e2f !important;
  border-color: #1e3350 !important;
}
html[data-theme="dark"] .related-card .related-title,
html[data-theme="dark"] .method-card h3,
html[data-theme="dark"] .cat-card h3,
html[data-theme="dark"] .persona-card h3,
html[data-theme="dark"] .algae-card h3,
html[data-theme="dark"] .info-card h3 {
  color: #e6f0fa !important;
}
html[data-theme="dark"] .related-card .related-desc,
html[data-theme="dark"] .method-card p,
html[data-theme="dark"] .cat-card p,
html[data-theme="dark"] .persona-card p,
html[data-theme="dark"] .algae-card p,
html[data-theme="dark"] .info-card p,
html[data-theme="dark"] .method-card li,
html[data-theme="dark"] .cat-card li,
html[data-theme="dark"] .persona-card li,
html[data-theme="dark"] .algae-card li,
html[data-theme="dark"] .info-card li {
  color: #b8c9d9 !important;
}
html[data-theme="dark"] .related-card:hover,
html[data-theme="dark"] .method-card:hover,
html[data-theme="dark"] .cat-card:hover {
  border-color: #61caf8 !important;
}

/* FAQ-TOC-Chips oben auf faq.html */
html[data-theme="dark"] .faq-toc a {
  background: #0f1e2f !important;
  border-color: #1e3350 !important;
  color: #61caf8 !important;
}

/* Card-Inhalts-Klassen (Titel, Tags, Preise, Beispiele) */
html[data-theme="dark"] .cat-card .cat-title,
html[data-theme="dark"] .persona-card h3,
html[data-theme="dark"] .method-card h3,
html[data-theme="dark"] .algae-card h3,
html[data-theme="dark"] .info-card h3 {
  color: #e6f0fa !important;
}
html[data-theme="dark"] .cat-card .cat-price,
html[data-theme="dark"] .persona-card .persona-pick,
html[data-theme="dark"] .method-card .method-tag {
  color: #61caf8 !important;
}
html[data-theme="dark"] .cat-card ul,
html[data-theme="dark"] .cat-card ul li,
html[data-theme="dark"] .cat-card .cat-examples,
html[data-theme="dark"] .method-card .method-time {
  color: #b8c9d9 !important;
}
html[data-theme="dark"] .cat-card .cat-examples {
  border-top-color: #1e3350 !important;
}