/* ============================================================================
   theme-dark.css – Konsolidiertes Dunkelbraun-Theme (Artur). Wird ZULETZT
   geladen; !important, weil seitenspezifische Widget-CSS im Body nachladen.
   Braun #58584E · Orange #ED8008 · Text weiß auf Braun / schwarz in weißen
   Kästen · Arial. Ziel: durchgehend braun + guter Kontrast.
   ============================================================================ */

:root { --ts-accent-onbg: #F7A23C; }   /* helleres Orange NUR für Text auf Braun (Lesbarkeit) */

/* --- Einheitlich brauner Seitenhintergrund: helle Bänder/Hero neutralisieren --- */
.hero, .home-games, .aom, .aom__inner,
.plaques-hero, .plaques-steps, .plaques-split, .plaques-form-section,
.games-intro, .discover-hero, .geo-hero, .db-hero { background: transparent !important; }
.hero::before, .hero::after { display: none !important; }

/* --- Header überall schwarz, Marke weiß --- */
.ts-header, .ts-header--solid, .ts-header--animal { background: #000 !important; border-bottom: 1px solid rgba(255,255,255,.15) !important; position: relative !important; }
.ts-brand, .ts-brand__name, .ts-brand__logo { color: #fff !important; }

/* --- Überschriften ERBEN die Container-Farbe → nie Weiß-auf-Weiß --- */
h1, h2, h3, h4, .section-title, .ce-hero__title, .ce-heading__title { color: inherit; }

/* --- Text direkt auf dem braunen Hintergrund: weiß / gedämpft-weiß --- */
body.ts-body { color: #fff; }
.hero__stats, .hero__stats dt, .hero__stats dd,
.plaques-hero__lead, .plaques-split__note, .plaques-form__sub, .plaques-step p,
.games-lead,
.ce-hero__lead, .ce-section__lead, .ce-sectionhead__lead, .section-lead,
.ce-step__text, .ce-image__cap, .ts-crumbs, .ts-crumbs a,
.legal__content, .legal__content p, .legal__content li, .legal__content strong,
.aom__name, .aom__sci, .aom__hab { color: rgba(255,255,255,.9) !important; }
.legal h1, .legal__content h2, .legal__content h3 { color: #fff !important; }

/* --- Weiße Kästen: dunkler Text (Überschriften erben → dunkel) --- */
.ce-card, .ce-prize, .ce-widget-teaser__inner, .ce--bg-surface,
.game-area, .game-pick, .split-card, .plaque-mock, .ce-cta { color: var(--ts-ink) !important; }
.ce-card h2, .ce-card h3, .ce-card h4, .ce-card__title,
.ce-widget-teaser__inner h2, .ce-widget-teaser__inner h3, .ce-widget-teaser__title,
.game-area h2, .game-area h3, .game-pick__name, .plaque-mock__name,
.split-card__label, .ce-cta__title, .ce-prize__title { color: var(--ts-ink) !important; }
.ce-card__text, .ce-prize__text, .game-pick__desc, .plaque-mock__sub,
.ce-cta__text, .split-card__items,
.game-hint, .game-bar, .olymp-desc, .olymp-prev { color: #5a5348 !important; }
.game-bar b, .game-area h4 { color: var(--ts-ink) !important; }   /* Werte im Spiel-Balken dunkel */
.split-card__pct { color: #b3590a !important; }   /* Orange auf Weiß dunkler = lesbar */

/* --- Orange Akzente auf Braun: helleres Orange (Lesbarkeit) --- */
.ce-eyebrow, .section-eyebrow, .plaques-hero__eyebrow,
body.games-page .section-title, body.games-page .ce-sectionhead__title,
body.discover-page .section-title, body.discover-page .ce-sectionhead__title,
body.database-page .section-title, body.database-page .ce-sectionhead__title,
body.geo-page .section-title { color: var(--ts-accent-onbg) !important; }

/* --- Navigation: orange auf schwarzem Header; Sprachwahl weiß --- */
.ts-nav a { color: var(--ts-accent-onbg) !important; }
.ts-nav a:hover { color: #fff !important; }
.switch-dd__toggle, .switch-dd__label { color: #fff !important; }
.switch-dd__menu { background: #fff !important; }
.switch-dd__item { color: #1c1c18 !important; }                    /* Menü ist weiß → dunkle Einträge */
.switch-dd__item.is-active { background: #b3590a !important; color: #fff !important; }

/* --- Buttons: Arturs Orange, weiße Schrift + weißer Umriss (Füllung leicht
       dunkler, damit weiße Schrift lesbar ist – „im Sinne von Artur"). --- */
.btn--primary, .ts-cart-fab, .game-btn--primary { background: #d16b06 !important; color: #fff !important; border: 1.5px solid #fff !important; }
.btn--ghost { background: transparent !important; color: var(--ts-accent-onbg) !important; border: 1.5px solid var(--ts-accent-onbg) !important; }
.ce-card__cta { color: #b3590a !important; }

/* --- Kästen auf Braun bekommen weißen Umriss (Artur) --- */
.plaques-step, .split-card, .plaque-mock, .game-area { border: 1px solid rgba(255,255,255,.55) !important; }
.plaque-mock { background: linear-gradient(160deg, #c8ccd1, #9aa0a6) !important; color: #20242a !important; }
.pf-input { background: #fff !important; color: #1c1c18 !important; border: 1px solid rgba(0,0,0,.3) !important; }

/* --- Misc-Fixes (Messung) --- */
.aom__card { background: transparent !important; }
.pf-label, .pf-consent { color: rgba(255,255,255,.85) !important; }

/* --- Tier-/Datenseiten: helle Bänder → braun (Titel weiß), weiße Karten → dunkler Text --- */
.related, .paten, .wozusehen, .rangemap-section,
.animal__intro, .animal__body, .animal__section, .animal-data, .games-promo { background: transparent !important; }
.related__title, .paten__title, .wozusehen__title, .rangemap__title, .animal__title,
.animal__section h2, .animal__section h3, .animal-data h2, .animal-data h3 { color: #fff !important; }
/* Gedämpfte Unter-/Legendentexte auf Braun → weiß statt Grau */
.related__sub, .paten__sub, .wozusehen__sub, .rangemap__sub, .rangemap__legend,
.rangemap__err, .scalebar__ref, .scalebar__label, .animal__meta { color: rgba(255,255,255,.88) !important; }
/* Fließtext-Absätze der Tiersektionen + Merch-Labels: weiß auf Braun (waren --ts-ink dunkel) */
.animal__section p, .animal__section li,
.merch__sub, .merch-group__label { color: rgba(255,255,255,.92) !important; }
.animal__eyebrow { color: var(--ts-accent-onbg) !important; }
/* Weiße Info-Karte (Fakten/Taxonomie/Maße): dunkler Text statt geerbtem Weiß */
.facts, .facts dd { color: var(--ts-ink) !important; }
.facts dt { color: var(--ts-muted) !important; }
/* Verwandte Arten + Paten-/Zoo-Kacheln: weiße Kästen, schwarze Schrift (Artur) */
.related__item, .paten-tier, .zoo-card__link, .patentier-card__link {
    background: #fff !important; color: var(--ts-ink) !important; border: 1px solid rgba(0,0,0,.15) !important;
}
.related__item *, .paten-tier * { color: var(--ts-ink) !important; }
.paten-tier__badge, .paten-tier__cta { color: #fff !important; }
/* Orange auf Weiß (Ghost-Buttons/CTAs in weißen Karten) → dunkleres Orange lesbar */
.merch .btn--ghost, .patentier-card__cta, .related__item .related__cta { color: #b3590a !important; }

/* --- Footer: dunkelgrau auf Dunkel → aufgehellt (global, alle Seiten) --- */
.ts-footer__copy { color: rgba(255,255,255,.7) !important; }
.ts-footer a, .ts-footer__link, .ts-footer__col a { color: rgba(255,255,255,.82) !important; }
.ts-footer__col a:hover { color: #fff !important; }
.ts-footer__col h4 { color: rgba(255,255,255,.72) !important; }   /* Spaltentitel waren #8a7e6a */

/* ============================================================================
   Runde 3 – weitere systematische Kontrast-Fixes (Playwright-gemessen)
   ============================================================================ */

/* Sprach-/Währungs-Menü: Einträge dunkel auf weißem Menü (Kinder mit erfassen) */
.switch-dd__menu, .switch-dd__menu a, .switch-dd__menu span,
.switch-dd__item, .switch-dd__item * { color: #1c1c18 !important; }
.switch-dd__item.is-active, .switch-dd__item.is-active * { color: #fff !important; }
.switch-dd__toggle, .switch-dd__toggle * { color: #fff !important; }   /* Toggle im schwarzen Header */

/* Startseite „Spielen": Kacheln als weiße Kästen (waren braun + dunkler Text) */
.home-game { background: #fff !important; color: var(--ts-ink) !important; border: 1px solid rgba(0,0,0,.15) !important; }
.home-game__name, .home-game__icon { color: var(--ts-ink) !important; }
.home-game__desc { color: #5a5348 !important; }

/* „So funktioniert's"-Schritt-Titel auf Braun → weiß */
.ce-step__title { color: #fff !important; }

/* Bestimmen-Tool: weiße Karten → dunkle Texte; Optionszeilen hellgrau statt braun */
.ident-tree, .ident-panel, .foto, .dt-q, .dt-q h3, .dt-q h3 *, .ident-row__q { color: var(--ts-ink) !important; }
.dt-opt { background: #f4f2ee !important; color: var(--ts-ink) !important; border-color: rgba(0,0,0,.18) !important; }
.dt-opt--skip { color: var(--ts-muted) !important; }

/* Metalltafel-Mock: Fallback-Hintergrundfarbe, damit heller Verlauf messbar bleibt */
.plaque-mock { background: linear-gradient(160deg,#c8ccd1,#9aa0a6) #b3b8bd !important; }

/* Merch-Widget (liegt auf Braun): Preis weiß, Chips/Warenkorb lesbar */
.merch-price { color: #fff !important; }
.merch-price small { color: var(--ts-accent-onbg) !important; }
.merch-prod.is-active { background: #b3590a !important; border-color: #b3590a !important; }
.merch .btn--ghost, .merch-cart { background: #d16b06 !important; color: #fff !important; border: 1.5px solid #fff !important; }

/* Prozent-Statistiken auf Braun: helleres Orange (große Zahl → lesbar) */
.ce-stat__value { color: var(--ts-accent-onbg) !important; }

/* Vergleich + Länder: gedämpfte/dunkle Texte auf Braun → weiß */
.cmp-vs, .geo-maptip, .geo-empty { color: rgba(255,255,255,.85) !important; }
.cmp-name { color: #fff !important; }
/* Metalltafel-Mock (heller Verlauf): Untertitel dunkler für 4.5:1 */
.plaque-mock__sub { color: #2a2620 !important; }