/* Tagesansicht: Umschalter im Kopf (ansicht.js), Wahl setzt frueh.js als <html data-ansicht="tag">. Die dunkle Ansicht bleibt
   Standard und ist von dieser Datei nicht berührt. Reihenfolge: Farben · dunkle Inseln · Umschalter · Bausteine · Seiten */

/* ---------- Umschalter (gilt in beiden Ansichten) ---------- */
.ansicht-knopf { width: 30px; height: 30px; color: var(--on-dark); }
.ansicht-knopf .icon { width: 17px; height: 17px; }
@media (max-width: 991px) { .topbar__rechts { gap: 6px; } }
.ansicht-knopf__mond { display: none; }
:root[data-ansicht="tag"] .ansicht-knopf__sonne { display: none; }
:root[data-ansicht="tag"] .ansicht-knopf__mond { display: block; }

/* ---------- Farben ---------- */
:root[data-ansicht="tag"] .seite-dunkel {
  --cream: #f8f3ea; --muted: #f0e9dc; --surface: #fffdf8; --line: #ddd2bf;
  --text: #1f1a16; --text-soft: #5c5249; --ink: #1f1a16; --ink-soft: #3a322b;
  --gold: #846322; --gold-light: #846322; --gold-dark: #755820;
  --knopf-text: #fffef4; --knopf-hover: #3a322b; --fehler: #a8201a;
  --shadow: 0 10px 30px -14px rgb(27 23 20 / .28); --shadow-lg: 0 24px 60px -22px rgb(27 23 20 / .4);
  --lila-schimmer: rgb(176 138 62 / .13);
}

/* ---------- Dunkle Inseln: Flächen, die auch am Tag dunkel bleiben (Bildbänder, Fuß, obere Leiste), bekommen die Farben der
   dunklen Ansicht zurück. So stimmen Knöpfe und Texte darin ohne Einzelregeln ---------- */
:root[data-ansicht="tag"] .topbar, :root[data-ansicht="tag"] .footer, :root[data-ansicht="tag"] .bildband,
:root[data-ansicht="tag"] .banner, :root[data-ansicht="tag"] .empfehl-band, :root[data-ansicht="tag"] .teaser,
:root[data-ansicht="tag"] .section--dark, :root[data-ansicht="tag"] .gutschein__karte, :root[data-ansicht="tag"] .chat__kopf,
:root[data-ansicht="tag"] .mock.is-wartend, :root[data-ansicht="tag"] .maler, :root[data-ansicht="tag"] .anfrage {
  --cream: #1d1d1d; --muted: #222120; --surface: #272625; --line: #3e4040;
  --text: #fffef4; --text-soft: #c8c2b6; --ink: #fffef4; --ink-soft: #e9e4d8;
  --gold: #b08a3e; --gold-light: #d8b96e; --gold-dark: #8a6a2b;
  --knopf-text: #1d1d1d; --knopf-hover: #e9e4d8; --fehler: #f3b1b9;
}
:root[data-ansicht="tag"] .seite-dunkel .topbar, :root[data-ansicht="tag"] .seite-start .topbar { background: #1b1714; }
:root[data-ansicht="tag"] .seite-dunkel .section--dark { background-color: #1b1714; color: var(--text); }
:root[data-ansicht="tag"] .maler, :root[data-ansicht="tag"] .anfrage { color: var(--text); }

/* ---------- Knöpfe ---------- */
:root[data-ansicht="tag"] .seite-dunkel .btn--gold, :root[data-ansicht="tag"] .seite-dunkel .btn--dark { background: var(--ink); color: var(--knopf-text); }
:root[data-ansicht="tag"] .seite-dunkel .btn--gold:hover, :root[data-ansicht="tag"] .seite-dunkel .btn--dark:hover { background: var(--knopf-hover); }
:root[data-ansicht="tag"] .seite-dunkel .header__cta, :root[data-ansicht="tag"] .seite-dunkel .schritt__aktionen .btn--gold { background: var(--wein); border-color: var(--wein); color: #fffef4; }
:root[data-ansicht="tag"] .seite-dunkel .header__cta:hover { background: #8b263b; }
:root[data-ansicht="tag"] .seite-dunkel .schritt__aktionen .btn--gold:hover:not(:disabled) { background: #8f2a42; }
:root[data-ansicht="tag"] .seite-dunkel .round-btn:hover, :root[data-ansicht="tag"] .seite-dunkel .chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--knopf-text); }
:root[data-ansicht="tag"] .seite-dunkel .radio-karte input:checked + span, :root[data-ansicht="tag"] .seite-dunkel .chip[aria-pressed="true"],
:root[data-ansicht="tag"] .seite-dunkel .kasse__nr, :root[data-ansicht="tag"] .seite-dunkel .mini-position__menge { color: var(--knopf-text); }
:root[data-ansicht="tag"] .seite-dunkel .cta-banner .btn--dark { background: #1b1714; color: #fffef4; }
:root[data-ansicht="tag"] .seite-dunkel .cta-banner .btn--dark:hover { background: #000; }
:root[data-ansicht="tag"] .seite-dunkel .schritt__aktionen .btn--ghost { border-color: rgb(31 26 22 / .45); color: var(--ink); }
:root[data-ansicht="tag"] .seite-dunkel .schritt__aktionen .btn--ghost:hover { border-color: var(--ink); }
:root[data-ansicht="tag"] .spare-label { background: var(--gold); color: #fffef4; }
:root[data-ansicht="tag"] .spare-label:hover, :root[data-ansicht="tag"] .spare-label:focus-visible { background: var(--ink); color: #fffef4; }
:root[data-ansicht="tag"] .chat-knopf, :root[data-ansicht="tag"] .chat__email button, :root[data-ansicht="tag"] .chat__eingabe button { color: #fffef4; }

/* ---------- Kopf ---------- */
:root[data-ansicht="tag"] .seite-dunkel .header.is-stuck { background: rgb(248 243 234 / .96); }
:root[data-ansicht="tag"] .seite-dunkel .nav__link::after { background: var(--ink); }
:root[data-ansicht="tag"] .seite-dunkel .header:not(.is-stuck) .logo, :root[data-ansicht="tag"] .seite-dunkel .header:not(.is-stuck) .nav__link,
:root[data-ansicht="tag"] .seite-dunkel .header:not(.is-stuck) .icon-btn { text-shadow: none; }
:root[data-ansicht="tag"] .seite-dunkel .logo--schriftzug { color: var(--ink); filter: none; }
:root[data-ansicht="tag"] .seite-dunkel .header:not(.is-stuck) .logo__kopf { filter: none; }
:root[data-ansicht="tag"] .seite-dunkel .footer .logo--schriftzug { color: #fffef4; }
@media (max-width: 991px) {
  :root[data-ansicht="tag"] .seite-dunkel .header .nav { background: var(--cream); }
}
@media (max-width: 767px) {
  :root[data-ansicht="tag"] .schritt__aktionen { background: rgb(248 243 234 / .96); border-top-color: var(--line); }
}

/* ---------- Startseite: großes Bild oben ---------- */
:root[data-ansicht="tag"] .seite-dunkel .slider { background-color: var(--cream); }
:root[data-ansicht="tag"] .seite-dunkel .slide { --on-dark: var(--ink); --on-dark-soft: var(--text-soft); background: radial-gradient(90% 90% at 80% 45%, #ebdfc8 0%, #f8f3ea 62%); }
:root[data-ansicht="tag"] .seite-dunkel .slide::before { background: linear-gradient(rgb(248 243 234 / .95), rgb(248 243 234 / .68) 60%, transparent); }
:root[data-ansicht="tag"] .slide__formate a { border-color: rgb(31 26 22 / .28); color: var(--ink); }
:root[data-ansicht="tag"] .slide__formate a:hover { border-color: var(--ink); }
:root[data-ansicht="tag"] .seite-dunkel .slide__formate li, :root[data-ansicht="tag"] .seite-dunkel .slide__formate .slide__versand { color: var(--ink); }
:root[data-ansicht="tag"] .seite-dunkel .slider__runter { color: var(--ink); }
:root[data-ansicht="tag"] .seite-dunkel .slider__runter .icon { filter: none; }
/* Goldband vor dem Fuß: Goldtöne der dunklen Ansicht, sonst wird das Band zu dunkel für die Schrift */
:root[data-ansicht="tag"] .cta-banner { --gold: #b08a3e; --gold-light: #d8b96e; --gold-dark: #8a6a2b; }
:root[data-ansicht="tag"] .seite-dunkel .gift__visual { background-color: var(--muted); }
:root[data-ansicht="tag"] .seite-dunkel .motiv-karte__bild { background: #e9e1d2; }
:root[data-ansicht="tag"] .kuenstler-info:hover, :root[data-ansicht="tag"] .kuenstler-info:focus-visible, :root[data-ansicht="tag"] .kuenstler-link:hover { color: var(--ink); }
:root[data-ansicht="tag"] .kuenstler-info::after { background: #1f1a16; }
:root[data-ansicht="tag"] .kuenstler-info--teaser:hover, :root[data-ansicht="tag"] .kuenstler-info--teaser:focus-visible { color: #fffef4; }

/* ---------- Meldungen ---------- */
:root[data-ansicht="tag"] .seite-dunkel .upload__fehler, :root[data-ansicht="tag"] .seite-dunkel .kasse__fehler, :root[data-ansicht="tag"] .seite-dunkel .kasse__meldung,
:root[data-ansicht="tag"] .seite-dunkel .position__warnung, :root[data-ansicht="tag"] .seite-dunkel .warenkorb__gesperrt, :root[data-ansicht="tag"] .seite-dunkel .gutschein__msg.is-fehler,
:root[data-ansicht="tag"] .seite-dunkel .konto__meldung, :root[data-ansicht="tag"] .seite-dunkel .ist-geprueft .check input:invalid + span, :root[data-ansicht="tag"] .seite-dunkel .newsletter__msg.is-fehler,
:root[data-ansicht="tag"] .anfrage__fehler, :root[data-ansicht="tag"] .chat__fehler { color: var(--fehler); }
:root[data-ansicht="tag"] .seite-dunkel .kasse__meldung, :root[data-ansicht="tag"] .seite-dunkel .ist-geprueft .eingabe:invalid { border-color: var(--fehler); }
:root[data-ansicht="tag"] .seite-dunkel .fortschritt li.is-fertig .fortschritt__punkt::after { border-color: #fffef4; }
:root[data-ansicht="tag"] .spar-info a, :root[data-ansicht="tag"] .kuenstler__werk-meta { color: var(--gold-dark); }
:root[data-ansicht="tag"] .spar-info { background: rgb(143 108 40 / .1); }

/* ---------- Künstlerseiten ---------- */
:root[data-ansicht="tag"] .kuenstler__werke { background: rgb(143 108 40 / .07); }