/* =====================================================
   Dark-Modus – NUR für die normale Webseite (.ws).
   Greift ausschließlich unter :root[data-theme="dark"] .ws, damit Blog,
   Landingpages und Admin garantiert unberührt bleiben.

   Prinzip: die Farb-Variablen von .ws und .lp werden umdefiniert, dazu die
   wenigen Stellen mit hart codiertem Weiß (Karten/Boxen) auf dunkel gesetzt.
   ===================================================== */

/* ── Umschalt-Button (immer sichtbar, hell wie dunkel) ── */
.ws-theme-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--ws-line, rgba(0,0,0,.12));
  color: var(--ws-ink, #16181d); transition: background .15s, border-color .15s, color .15s;
}
.ws-theme-btn:hover { background: rgba(0,0,0,.05); }
/* Reihenfolge im Header: nach dem Menü, vor Twitch. Ohne Menü nach rechts. */
.ws-head-in > .ws-theme-btn { margin-left: 8px; }
.ws-head-in > .ws-nav ~ .ws-theme-btn { margin-left: 8px; }
.ws-head-in > .ws-theme-btn:nth-child(2) { margin-left: auto; }   /* kein Menü -> nach rechts */
/* Icons: standardmäßig Mond aus, Sonne an; im Dark-Mode umgekehrt. */
.ws-theme-btn .ws-th-moon { display: none; }
.ws-theme-btn .ws-th-sun  { display: block; }

/* ============ DARK ============ */
:root[data-theme="dark"] .ws.ws,
:root[data-theme="dark"] .ws .lp {
  --ws-ink:   #e8eaed;
  --ws-muted: #9aa1ac;
  --ws-line:  rgba(255,255,255,.12);
  --lp-ink:   #e8eaed;
  --lp-muted: #9aa1ac;
  --lp-soft:  #1b1f26;
  --lp-line:  rgba(255,255,255,.12);
  --lp-card:  #171a20;   /* Paket-Karten (pkg-card) & Co. dunkel */
}
/* Paket-Karten (pricing_ref, .pkg-*) an Dark angleichen. */
:root[data-theme="dark"] .ws .pkg-card { border-color: var(--ws-line); color: var(--ws-ink); }
:root[data-theme="dark"] .ws .pkg-img { background: #22262e; }
:root[data-theme="dark"] .ws.ws { background: #0f1115; color: var(--ws-ink); }
:root[data-theme="dark"] .ws .lp { background: #0f1115; }
/* Design-Presets setzen die Überschriftenfarbe FEST (Hex, kein var(--lp-ink)),
   weil sie ursprünglich nur für Landingpages gedacht waren – das trifft per
   generischem Tag-Selektor (".lp h1/h2/h3") JEDE Überschrift, auch Baustein-
   eigene wie .ps-h2, .lp-card-t, .lp-feat-t, .lp-q-t etc., die seit dem
   Font-Family-Fix ebenfalls wie Überschriften behandelt werden. Ohne diese
   Korrektur bleiben sie im Dark-Mode dunkel auf dunklem Grund (Bug, Nutzer-
   Report: "Privat oder Business?" auf /preise kaum lesbar). */
:root[data-theme="dark"] .ws .lp .lp-h1,
:root[data-theme="dark"] .ws .lp .lp-h2,
:root[data-theme="dark"] .ws .lp .lp-h3,
:root[data-theme="dark"] .ws .lp h1,
:root[data-theme="dark"] .ws .lp h2,
:root[data-theme="dark"] .ws .lp h3,
:root[data-theme="dark"] .ws .lp .ps-h2,
:root[data-theme="dark"] .ws .lp .lp-card-t,
:root[data-theme="dark"] .ws .lp .lp-feat-t,
:root[data-theme="dark"] .ws .lp .lp-srv-t,
:root[data-theme="dark"] .ws .lp .lp-infobox-t,
:root[data-theme="dark"] .ws .lp .lp-tl-t,
:root[data-theme="dark"] .ws .lp .lp-sc-t,
:root[data-theme="dark"] .ws .lp .lp-q-t,
:root[data-theme="dark"] .ws .lp .pkg-name,
:root[data-theme="dark"] .ws .lp .cs-form-t { color: #f3f4f6; }
/* Gleicher Bug-Typ beim Liquid-Glass-Preset, Baustein-Option "Verlauf-
   Hintergrund: aus (schlicht)" (lp-glassbg-off): setzt Text/Überschriften
   ebenfalls fest auf die Preset-Textfarbe, mit !important – braucht daher
   noch höhere Spezifität, um im Dark-Mode zu gewinnen. */
:root[data-theme="dark"] .ws .lp section.lp-glassbg-off .lp-h1,
:root[data-theme="dark"] .ws .lp section.lp-glassbg-off .lp-h2,
:root[data-theme="dark"] .ws .lp section.lp-glassbg-off .lp-h3,
:root[data-theme="dark"] .ws .lp section.lp-glassbg-off .lp-kick,
:root[data-theme="dark"] .ws .lp section.lp-glassbg-off .lp-sub,
:root[data-theme="dark"] .ws .lp section.lp-glassbg-off .lp-tx,
:root[data-theme="dark"] .ws .lp section.lp-glassbg-off p { color: #f3f4f6 !important; }

/* Button-Icon tauschen. */
:root[data-theme="dark"] .ws .ws-theme-btn { color: #e8eaed; border-color: rgba(255,255,255,.16); }
:root[data-theme="dark"] .ws .ws-theme-btn:hover { background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .ws .ws-theme-btn .ws-th-sun  { display: none; }
:root[data-theme="dark"] .ws .ws-theme-btn .ws-th-moon { display: block; }

/* Kopf-/Fußzeile dunkel. */
:root[data-theme="dark"] .ws .ws-head { background: rgba(16,18,22,.86); border-bottom: 1px solid var(--ws-line); }
:root[data-theme="dark"] .ws .ws-foot { background: #0f1115; border-top: 1px solid var(--ws-line); }
:root[data-theme="dark"] .ws .ws-sub  { background: #171a20; border-color: var(--ws-line); }
:root[data-theme="dark"] .ws .ws-burger span { background: var(--ws-ink); }
/* Mobiles Aufklapp-Menü (< 920px) hat einen weißen Grund -> dunkel. */
/* Dunkler Grund NUR für das mobile aufgeklappte Menü (bis 920px). Auf dem Desktop
   liegt die Nav horizontal im Header und darf KEINEN Kasten hinter dem Menütext
   haben. */
@media (max-width: 920px) {
  :root[data-theme="dark"] .ws .ws-nav { background: #14171d; }
}
:root[data-theme="dark"] .ws .ws-a { color: #cfd3da; }
/* Menü-Text ohne Kasten: nur die Farbe ändert sich beim Hover, kein Hintergrund. */
:root[data-theme="dark"] .ws .ws-a:hover { color: #fff; background: transparent; }
:root[data-theme="dark"] .ws .ws-a.on { color: #fff; }
:root[data-theme="dark"] .ws .ws-li + .ws-li { border-top-color: var(--ws-line); }
:root[data-theme="dark"] .ws .ws-sub a { color: #cfd3da; }
:root[data-theme="dark"] .ws .ws-sub a:hover { background: rgba(255,255,255,.08); color: #fff; }
/* Footer-Links: heller Hover. */
:root[data-theme="dark"] .ws .ws-foot a { color: #9aa1ac; }
:root[data-theme="dark"] .ws .ws-foot a:hover { color: #fff; }

/* Karten / Boxen (hart codiertes Weiß) -> dunkle Fläche. */
:root[data-theme="dark"] .ws .lp-feat,
:root[data-theme="dark"] .ws .lp-srv,
:root[data-theme="dark"] .ws .lp-card,
:root[data-theme="dark"] .ws .lp-tst,
:root[data-theme="dark"] .ws .lp-price,
:root[data-theme="dark"] .ws .lp-cmp-card {
  background: #171a20; border-color: var(--ws-line); color: var(--ws-ink);
}
/* FAQ-Zeilen, Logos-Kästen u.ä. dezent. */
:root[data-theme="dark"] .ws .lp-faq-item { border-color: var(--ws-line); }

/* Helle Bereichs-Hintergründe (soft) im Dark-Mode angleichen. */
:root[data-theme="dark"] .ws .lp-bg-soft,
:root[data-theme="dark"] .ws .lp-bg-grad-soft { background: #14171d; }
:root[data-theme="dark"] .ws .lp-bg-beige { background: #1c1a15; }

/* Weiße Buttons behalten Kontrast (heller Button auf dunklem Grund ist ok). */
:root[data-theme="dark"] .ws .lp-btn-white { background: #e8eaed; color: #14171d; }

/* Bilder minimal abdunkeln, damit sie im Dark-Mode nicht „leuchten“ (dezent). */
:root[data-theme="dark"] .ws .lp img { filter: brightness(.95); }

/* Kicker nutzt sonst die (dunkle) Akzentfarbe -> auf dunklem Grund unsichtbar.
   Im Dark-Mode hell einfärben. Über Bildern (Hero) bleibt er weiß (eigene Regel). */
:root[data-theme="dark"] .ws .lp .lp-kick { color: #cfd3da; }
:root[data-theme="dark"] .ws .lp .lp-hero.has-img .lp-kick { color: #fff; }

/* ── Preise-Section (pricing, .ps-*) dunkel angleichen ── */
:root[data-theme="dark"] .ws .ps-card,
:root[data-theme="dark"] .ws .ps-tdet,
:root[data-theme="dark"] .ws .ps-mini {
  background: #171a20; border-color: var(--ws-line); color: var(--ws-ink);
}
:root[data-theme="dark"] .ws .ps-badge { background: #e8eaed; color: #14171d; }
:root[data-theme="dark"] .ws .ps-feat .ps-mini { background: #22262e; color: var(--ws-ink); border-color: var(--ws-line); }

/* ── Portfolio-Streifen: Bild-/Textkontrast sicherstellen ──
   Der Baustein ist schon dunkel (#111). Kicker/Überschrift darüber hell halten.
   Der Streifen-Button selbst ("Mehr erfahren") wird weiter unten zusammen mit
   lp-btn-accent auf das einheitliche Schwarz/Weiß-Schema gesetzt. */
:root[data-theme="dark"] .ws .pfs-split .lp-kick,
:root[data-theme="dark"] .ws .pfs-split .lp-h2,
:root[data-theme="dark"] .ws .pfs-txt .lp-kick { color: #fff; }

/* ── Icons (Merkmale/Leistungen/Karten) hell einfärben ──
   Nutzen sonst die dunkle Akzentfarbe -> auf dunklem Grund unsichtbar. */
:root[data-theme="dark"] .ws .lp-ico {
  color: #e8eaed; background: rgba(255,255,255,.10);
}

/* Twitch-Button: helleres Lila + etwas mehr Grund im Dark, damit gut lesbar. */
:root[data-theme="dark"] .ws .tw-badge {
  color: #c9a9ff; background: rgba(145,70,255,.20); border-color: rgba(145,70,255,.45);
}
:root[data-theme="dark"] .ws .tw-badge:hover { background: rgba(145,70,255,.30); }

/* ── Logo im Header: einfarbig dunkles Logo hell darstellen ──
   invert(1) macht Dunkel->Hell; hue-rotate gleicht Farbstich aus. Bei einem
   einfarbigen Wort-/Bildlogo (wie „MARKUS PALMER") ist das genau richtig. */
:root[data-theme="dark"] .ws .ws-logo { filter: invert(1) brightness(1.9) contrast(1.1); }

/* Video-/Embed-Consent-Platzhalter (weißer Kasten „Klick lädt …") dunkel. */
:root[data-theme="dark"] .ws .lp-vid-embed,
:root[data-theme="dark"] .ws .lp-consent,
:root[data-theme="dark"] .ws .cc-placeholder,
:root[data-theme="dark"] .ws .mp-embed-ask,
:root[data-theme="dark"] .ws [data-consent-placeholder] {
  background: #171a20 !important; color: var(--ws-ink); border-color: var(--ws-line);
}
/* mp-embed-ask liegt evtl. außerhalb von .ws (Formular-Widget) -> ohne .ws matchen. */
:root[data-theme="dark"] .mp-embed-ask { background: #171a20 !important; color: #e8eaed !important;
  border-color: rgba(255,255,255,.14) !important; }
:root[data-theme="dark"] .mp-embed-ask * { color: #e8eaed !important; }

/* ── Blog: eigene, hart codierte Farben (blog-*) im Dark hell machen ── */
:root[data-theme="dark"] .ws .blog-list-title,
:root[data-theme="dark"] .ws .blog-card-title,
:root[data-theme="dark"] .ws .blog-post-title,
:root[data-theme="dark"] .ws .blog-nav-title,
:root[data-theme="dark"] .ws .blog-more-h { color: #f3f4f6; }
:root[data-theme="dark"] .ws .blog-list-sub,
:root[data-theme="dark"] .ws .blog-card-excerpt,
:root[data-theme="dark"] .ws .blog-post-lead,
:root[data-theme="dark"] .ws .blog-date { color: #b9bfc9; }
/* Kicker über der Blog-Überschrift: nur Textfarbe, KEIN Chip-Hintergrund. */
:root[data-theme="dark"] .ws .blog-list .lp-kick { color: #cfd3da; }
/* Echte Chips (Kategorie-Badges) dürfen einen dezenten Hintergrund haben. */
:root[data-theme="dark"] .ws .blog-chip { color: #e8eaed; background: rgba(255,255,255,.12); }
:root[data-theme="dark"] .ws .blog-cat-pill { color: #cfd3da; background: #171a20; border-color: var(--ws-line); }
:root[data-theme="dark"] .ws .blog-cat-pill:hover { color: #fff; border-color: rgba(255,255,255,.35); }
:root[data-theme="dark"] .ws .blog-cat-pill.on,
:root[data-theme="dark"] .ws .blog-cat-pill.on:hover { background: #e8eaed; border-color: #e8eaed; color: #14171d; }
:root[data-theme="dark"] .ws .blog-card { color: inherit; }
:root[data-theme="dark"] .ws .blog-nav { border-top-color: var(--ws-line); }
/* Blog-Hover-/Aktiv-Zustände: nutzen sonst die dunkle Akzentfarbe -> im Dark hell. */
:root[data-theme="dark"] .ws .blog-back { color: #9aa1ac; }
:root[data-theme="dark"] .ws .blog-back:hover,
:root[data-theme="dark"] .ws .blog-card:hover .blog-card-more,
:root[data-theme="dark"] .ws .blog-card-more,
:root[data-theme="dark"] .ws .blog-nav-link:hover .blog-nav-title,
:root[data-theme="dark"] .ws .blog-nav-back a:hover,
:root[data-theme="dark"] .ws .blog-cat-pill:hover { color: #fff; }
:root[data-theme="dark"] .ws a.blog-chip:hover { background: rgba(255,255,255,.20); }

/* ── Kicker anderer Sektionen (Preise/Kontakt) heller ── */
:root[data-theme="dark"] .ws .ps-kicker,
:root[data-theme="dark"] .ws .cs-kick { color: #cfd3da; }

/* ── Buttons: dunkler Button auf dunklem Grund -> hell ── */
:root[data-theme="dark"] .ws .lp-btn-dark { background: #e8eaed; color: #14171d; }
:root[data-theme="dark"] .ws .lp-btn-bd.lp-btn-dark { background: transparent; color: #e8eaed; border-color: rgba(255,255,255,.4); }

/* ── Akzent-Buttons (lp-btn-accent) ─────────────────────────────────────
   Das Design-Preset (Button-Farbe im Preset-Editor, sonst die Akzentfarbe)
   gewinnt IMMER – keine feste Schwarz/Weiß-Überschreibung mehr (frühere
   Design-Entscheidung, per Nutzer-Rückmeldung aufgehoben: eine eigene
   Preset-Button-Farbe wie z.B. #ff7900 wurde vorher ignoriert). Im
   Dark-Mode wird die Preset-Farbe nur leicht aufgehellt, damit sie sich
   auf dunklem Grund erkennbar absetzt (ohne den Farbton zu verlieren). */
.ws .lp-card-btn .lp-btn.lp-btn-dark {
  background: #14171d; color: #fff; border-color: transparent;
}
.ws .lp-card-btn .lp-btn.lp-btn-dark:hover { background: #2a2e37; color: #fff; }
.ws .lp-card-btn .lp-btn-bd.lp-btn-dark {
  background: transparent; color: #14171d; border-color: #14171d;
}
.ws .lp-card-btn .lp-btn-bd.lp-btn-dark:hover { background: #14171d; color: #fff; }

/* Immer die REINE Preset-Akzentfarbe, auch im Dark Mode - keine Aufhellung
   mehr per color-mix. Der Button soll unabhaengig vom Farb-/Hell-Dunkel-Modus
   optisch derselbe bleiben (Design-Preset-Vorgabe hat Vorrang). */
:root[data-theme="dark"] .ws .lp-btn-accent,
:root[data-theme="dark"] .ws .pfs-btn .lp-btn.lp-btn-white {
  background: var(--lp-btn-accent, var(--lp-accent));
  color: var(--lp-btn-text-dark, var(--lp-btn-text, #fff));
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .ws .lp-btn-accent:hover,
:root[data-theme="dark"] .ws .pfs-btn .lp-btn.lp-btn-white:hover {
  background: var(--lp-btn-accent-hover, var(--lp-btn-accent, var(--lp-accent)));
  color: var(--lp-btn-text-dark, var(--lp-btn-text, #fff));
}
:root[data-theme="dark"] .ws .lp-btn-bd.lp-btn-accent {
  background: transparent;
  color: var(--lp-btn-accent, var(--lp-accent));
  border-color: var(--lp-btn-accent, var(--lp-accent));
}
:root[data-theme="dark"] .ws .lp-btn-bd.lp-btn-accent:hover {
  background: var(--lp-btn-accent, var(--lp-accent));
  color: #fff;
}
:root[data-theme="dark"] .ws .lp-card-btn .lp-btn.lp-btn-dark {
  background: #f3f4f6; color: #14171d; border-color: transparent;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .ws .lp-card-btn .lp-btn.lp-btn-dark:hover { background: #fff; color: #14171d; }
:root[data-theme="dark"] .ws .lp-card-btn .lp-btn-bd.lp-btn-dark {
  background: transparent; color: #f3f4f6; border-color: #f3f4f6;
}
:root[data-theme="dark"] .ws .lp-card-btn .lp-btn-bd.lp-btn-dark:hover { background: #f3f4f6; color: #14171d; }
/* Mobiler schwebender CTA: heller Button, dunkle Schrift. Der Button liegt
   fixed direkt im <body> (evtl. außerhalb von .ws) – daher auch ohne .ws matchen. */
:root[data-theme="dark"] .mb-mcta { background: #e8eaed !important; color: #14171d !important; }
:root[data-theme="dark"] .mb-mcta span { color: #14171d; }

/* ── FAQ-Seite (.fq) – eigenes Farbsystem (--fq-*) umstellen ── */
:root[data-theme="dark"] .fq-page {
  --fq-ink:   #e8eaed;
  --fq-muted: #9aa1ac;
  --fq-line:  rgba(255,255,255,.14);
  background: #0f1115 !important; color: var(--fq-ink);
}
:root[data-theme="dark"] .fq-page .fq-h1,
:root[data-theme="dark"] .fq-page .fq-cat-title { color: #f3f4f6; }
:root[data-theme="dark"] .fq-page .fq-kick { color: #cfd3da; }
/* FAQ-Kästen (Akkordeon) dunkel. */
:root[data-theme="dark"] .fq-page .fq-item { background: #171a20; border-color: var(--fq-line); }
:root[data-theme="dark"] .fq-page .fq-item > summary { color: #e8eaed; }
:root[data-theme="dark"] .fq-page .fq-item > summary:hover { color: #fff; }
:root[data-theme="dark"] .fq-page .fq-a { color: #b9bfc9; }
/* Filter-Buttons dunkel. */
:root[data-theme="dark"] .fq-page .fq-fbtn { background: #171a20; color: var(--fq-muted); border-color: var(--fq-line); }
:root[data-theme="dark"] .fq-page .fq-fbtn:hover { color: #fff; border-color: rgba(255,255,255,.35); }
:root[data-theme="dark"] .fq-page .fq-fbtn.is-on,
:root[data-theme="dark"] .fq-page .fq-fbtn.is-on:hover { background: #e8eaed; border-color: #e8eaed; color: #14171d; }

/* ── Portfolio-Seite (.pf) – eigenes Farbsystem (--pf-*) umstellen ── */
:root[data-theme="dark"] .pf {
  --pf-bg:    #0f1115;
  --pf-ink:   #e8eaed;
  --pf-muted: #9aa1ac;
  --pf-line:  rgba(255,255,255,.14);
}
:root[data-theme="dark"] .pf { background: #0f1115; color: var(--pf-ink); }
:root[data-theme="dark"] .pf .pf-kick { color: #cfd3da; }
:root[data-theme="dark"] .pf .pf-h1 { color: #f3f4f6; }
/* Filter-Chips: dunkle Fläche, heller Text. */
:root[data-theme="dark"] .pf .pf-fbtn { background: #171a20; color: var(--pf-muted); border-color: var(--pf-line); }
:root[data-theme="dark"] .pf .pf-fbtn:hover { color: #fff; border-color: rgba(255,255,255,.35); }
:root[data-theme="dark"] .pf .pf-fbtn.is-on,
:root[data-theme="dark"] .pf .pf-fbtn.is-on:hover { background: #e8eaed; border-color: #e8eaed; color: #14171d; }
/* Detail-Seite: weiße Karten/Kästen ebenfalls dunkel (falls vorhanden). */
:root[data-theme="dark"] .pf .pf-card,
:root[data-theme="dark"] .pf .pf-meta,
:root[data-theme="dark"] .pf .pf-box { background: #171a20; border-color: var(--pf-line); color: var(--pf-ink); }
/* Galerie-Detailseite: helle Bereichs-Hintergründe + eigene Textfarben. */
:root[data-theme="dark"] .pf.pf-bg-beige,
:root[data-theme="dark"] .pf .pf-bg-beige { background: #16171b; }
:root[data-theme="dark"] .pf .pf-g-title { color: #f3f4f6; }
:root[data-theme="dark"] .pf .pf-g-kick { color: #cfd3da; }
:root[data-theme="dark"] .pf .pf-g-intro { color: #b9bfc9; }
:root[data-theme="dark"] .pf .pf-back { color: #9aa1ac; }
:root[data-theme="dark"] .pf .pf-back:hover { color: #fff; }
:root[data-theme="dark"] .pf .pf-g-cell,
:root[data-theme="dark"] .pf .pf-g-cover { background: #22262e; }
:root[data-theme="dark"] .pf .pf-credit { color: #b9bfc9; }
:root[data-theme="dark"] .pf .pf-lock-form input { background: #22262e; border-color: rgba(255,255,255,.2); color: #fff; }

/* ── Blog-Beitrag: Fließtext (.blog-article .lp-tx = #333) im Dark aufhellen ── */
:root[data-theme="dark"] .ws .blog-article .lp-tx { color: #d4d8de; }
:root[data-theme="dark"] .ws .blog-article .lp-h2 { color: #f3f4f6; }
:root[data-theme="dark"] .ws .blog-article .lp-q-l,
:root[data-theme="dark"] .ws .blog-article .lp-q-t { color: #e8eaed; }
/* Prev/Next-Navigation: Richtungslabel nutzt sonst die dunkle Akzentfarbe. */
:root[data-theme="dark"] .ws .blog-nav-dir { color: #cfd3da; }
:root[data-theme="dark"] .ws .blog-nav-back a { color: #9aa1ac; }
:root[data-theme="dark"] .ws .blog-nav-back a:hover { color: #fff; }

/* Hochkant-Video: Quellenangabe im Dark gut lesbar (war zu blass). */
:root[data-theme="dark"] .ws .lp-pv1-src { color: #c3c8d0; }
:root[data-theme="dark"] .ws .lp-pv1-src a { color: #d6dae1; }
:root[data-theme="dark"] .ws .lp-pv1-src a:hover { color: #fff; }

/* CTA auf soft-Hintergrund (dunkel) -> Text/Kicker hell. */
:root[data-theme="dark"] .ws .lp-bg-soft .lp-kick { color: #cfd3da; }
:root[data-theme="dark"] .ws .lp-bg-soft .lp-tx { color: #cbd0d7; }

/* Farbige Marken-Sektionen (lp-bgc-*, lp-bg-accent, lp-bg-dark) behalten in
   BEIDEN Modi weißen Text – die Hintergrundfarbe ändert sich ja nicht. So bleibt
   z.B. der Terrakotta-CTA immer gut lesbar (nicht blass-grau im Dark). */
:root[data-theme="dark"] .ws [class*="lp-bgc-"] .lp-kick,
:root[data-theme="dark"] .ws .lp-bg-accent .lp-kick,
:root[data-theme="dark"] .ws .lp-bg-dark .lp-kick,
:root[data-theme="dark"] .ws [class*="lp-bgc-"] .lp-tx,
:root[data-theme="dark"] .ws .lp-bg-accent .lp-tx,
:root[data-theme="dark"] .ws .lp-bg-dark .lp-tx,
:root[data-theme="dark"] .ws [class*="lp-bgc-"] .lp-h1,
:root[data-theme="dark"] .ws [class*="lp-bgc-"] .lp-h2,
:root[data-theme="dark"] .ws [class*="lp-bgc-"] .lp-h3 { color: #fff; }
/* Auf farbigen Sektionen NICHT die Karten/Icons abdunkeln (die Section ist ja farbig). */
:root[data-theme="dark"] .ws [class*="lp-bgc-"] .lp-ico,
:root[data-theme="dark"] .ws .lp-bg-accent .lp-ico { color: #fff; background: rgba(255,255,255,.18); }

/* =====================================================
   Sichtbarkeit von Buttons/Chips (ganz am Ende, damit diese Regeln gewinnen).
   Manche dunklen Flächen (#171a20) heben sich kaum vom Seitengrund (#0f1115) ab
   -> hellere Fläche + klarer Rand, damit die Button-FORM erkennbar ist.
   ===================================================== */
:root[data-theme="dark"] .ws .blog-cat-pill:not(.on),
:root[data-theme="dark"] .fq-page .fq-fbtn:not(.is-on),
:root[data-theme="dark"] .pf .pf-fbtn:not(.is-on),
:root[data-theme="dark"] .ws .ps-tdet,
:root[data-theme="dark"] .ws .ps-mini,
:root[data-theme="dark"] .ws .ig-follow-btn {
  background: #262b34 !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  color: #e8eaed !important;
}
:root[data-theme="dark"] .ws .blog-cat-pill:not(.on):hover,
:root[data-theme="dark"] .fq-page .fq-fbtn:not(.is-on):hover,
:root[data-theme="dark"] .pf .pf-fbtn:not(.is-on):hover,
:root[data-theme="dark"] .ws .ps-tdet:hover,
:root[data-theme="dark"] .ws .ps-mini:hover,
:root[data-theme="dark"] .ws .ig-follow-btn:hover {
  background: #313742 !important;
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
}

/* ── Blog-Passwortschutz (Teaser-Sperre) im Dark ── */
:root[data-theme="dark"] .ws .blog-teaser::after { background: linear-gradient(to bottom, rgba(15,17,21,0), #0f1115); }
:root[data-theme="dark"] .ws .blog-lock-h { color: #f3f4f6; }
:root[data-theme="dark"] .ws .blog-lock-p { color: #b9bfc9; }
:root[data-theme="dark"] .ws .blog-lock-ico { background: rgba(255,255,255,.10); color: #e8eaed; }
:root[data-theme="dark"] .ws .blog-lock-form input { background: #171a20; border-color: rgba(255,255,255,.2); color: #fff; }
:root[data-theme="dark"] .ws .blog-lock-form button { background: #e8eaed; color: #14171d; }

/* Fließtext-Links ohne eigene Klasse (FAQ-Antworten, Datenschutz, Texte): das
   Browser-Standardblau ist auf dunklem Grund kaum lesbar -> hell + unterstrichen. */
:root[data-theme="dark"] .ws a:not([class]) { color: #e8eaed; text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .ws a:not([class]):hover { color: #fff; }