/* Alsterbahn – Dunkelmodus. Wird per data-theme="dark" am <html> aktiv (19 bis 7 Uhr Ortszeit des Besuchers, siehe Skript in ds_head).
   Prinzip: Die Farb-Tokens werden umgekehrt (Fläche dunkel, Text hell). Bereiche, die in beiden Modi dunkel bzw. hell bleiben sollen
   (Footer, Hero, Kacheln mit Produktbildern), setzen die Tokens lokal auf den Hellmodus zurück. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #121314;
  --weiss: #1C1E20;
  --hellgrau: #26292B;
  --linie: #34383B;
  --tiefschwarz: #F1F2F0;
  --text-body: #D3D7D5;
  --text-lead: #BCC1BF;
  --text-meta: #8F9598;
  --schiefer: #9CA2A5;
  --fehler: #FF7468;
  --shadow-sm: 0 2px 12px -2px rgba(0, 0, 0, .5);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, .6);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .7);
}

/* Bereiche, die immer im Hellmodus-Look bleiben (Produktbilder liegen auf hellem Grund, Footer und Hero sind in beiden Modi dunkel). */
:root[data-theme="dark"] .ds-footer,
:root[data-theme="dark"] .ds-hero,
:root[data-theme="dark"] .uu-hero,
:root[data-theme="dark"] .uu-card--dark,
:root[data-theme="dark"] .ds-adminbar,
:root[data-theme="dark"] .ds-skip,
:root[data-theme="dark"] .ab-on-dark,
:root[data-theme="dark"] .ds-tile,
:root[data-theme="dark"] .uu-haltung,
:root[data-theme="dark"] .ds-kcard__media,
:root[data-theme="dark"] .ds-gallery__main,
:root[data-theme="dark"] .ds-hero--studio,
:root[data-theme="dark"] .ab-card__media,
:root[data-theme="dark"] .co-row__img {
  --canvas: #F3F3F1;
  --weiss: #FFFFFF;
  --hellgrau: #E3E6E5;
  --linie: #D9DCDB;
  --tiefschwarz: #191919;
  --text-body: #2B2D29;
  --text-lead: #4A4D47;
  --text-meta: #7E8386;
  --schiefer: #5E6468;
}
/* Footer, Hero und dunkle Karte behalten ihren dunklen Hintergrund und hellen Text. */
:root[data-theme="dark"] .ds-footer { border-top: 1px solid var(--linie); }

/* Kopfzeile: halbtransparent dunkel statt hell. */
:root[data-theme="dark"] .ab-header { background: rgba(18, 19, 20, .88); }

/* Icons und Logo sind dunkle Linien: im Dunkelmodus invertieren, außer in Bereichen, die hell bleiben, und auf Knöpfen (dort schon geregelt). */
:root[data-theme="dark"] .ds-root img[src*="/ds/icons/"],
:root[data-theme="dark"] .ab-header__logo img,
:root[data-theme="dark"] .co-head__in > a img { filter: invert(1); }
:root[data-theme="dark"] .ds-root .ds-invert,
:root[data-theme="dark"] .ds-tile img[src*="/ds/icons/"],
:root[data-theme="dark"] .ds-footer img,
:root[data-theme="dark"] .ab-on-dark img[src*="/ds/icons/"] { filter: none; }
:root[data-theme="dark"] .ds-footer img[src*="/icons/"] { filter: invert(1); }
:root[data-theme="dark"] .ds-root .ab-btn--primary img { filter: none !important; }

/* Eingabefelder, Meldungen */
:root[data-theme="dark"] .co-msg--ok,
:root[data-theme="dark"] .co-coupon__on { background: #1F3A2C; color: #BFE3CC; }
:root[data-theme="dark"] .co-msg--err { background: #3A1F1B; color: #FFB4AB; }
:root[data-theme="dark"] .ds-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .ab-badge { background: var(--hellgrau); color: var(--tiefschwarz); }
:root[data-theme="dark"] .ds-kcard__badge .ab-badge,
:root[data-theme="dark"] .ds-gallery__badge .ab-badge { background: rgba(255, 255, 255, .92); color: #191919; }

/* PayPal-Buttons laufen in einem iframe: Hell-Schema erzwingen, sonst bekommt er einen weißen Rahmen. */
:root[data-theme="dark"] [id^="paypal"] { color-scheme: light; }

/* Anleitungs-Link: Karte ist im Dunkelmodus hell, Pfeil bleibt dunkel. */
:root[data-theme="dark"] .ds-root a.ds-manuallink img { filter: none !important; }

/* Zustimmungs-Pillen der Kasse im Dunkelmodus */
:root[data-theme="dark"] .co-pill:has(input:checked) { background: #1F3A2C; border-color: #4C8F5E; color: #BFE3CC; }
:root[data-theme="dark"] .co-pill:has(input:checked) .co-pill__tag { color: #7DC788; }