/* Route 1: Nachtmodus (html[data-mode="nacht"]). Lädt nach style.css.
   Die hellen Kacheln werden dunkel und warm, Messing übernimmt die Akzente,
   über allem liegt ein leiser Lampenschein. Umgeschaltet wird mit der Zugkette. */

/* ---------- Zugschalter ---------- */
.frame { position: relative; }
html[data-mode="nacht"] .cord-chain { filter: drop-shadow(0 0 6px rgba(240, 200, 120, .45)) drop-shadow(1px 3px 2px rgba(0, 0, 0, .6)); }

/* ---------- Lampenschein ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(62vw 54vh at 10% -6%, rgba(198, 161, 90, .2), transparent 70%),
    radial-gradient(46vw 60vh at 104% 104%, rgba(161, 75, 53, .13), transparent 70%);
}
html[data-mode="nacht"] body::before { opacity: 1; }

/* ---------- Töne ---------- */
html[data-mode="nacht"] {
  --ground: #080706;
  --coal: #120f0c;
  --hair-dark: rgba(241, 232, 214, .17);
  --focus-light: #C6A15A;        /* die hellen Kacheln sind jetzt dunkel */
  --night-surface: #1a1511;
  --night-line: rgba(198, 161, 90, .3);
  --night-ink: #F1E8D6;
  --night-mute: rgba(241, 232, 214, .72);
}
html[data-mode="nacht"] body { color: var(--night-ink); }

/* ---------- Flächen ---------- */
html[data-mode="nacht"] :is(.t-head, .t-kontakt, .t-news, .creme, .sand, .v-tabs.t, .v-list.t, .nw.t) {
  background: var(--night-surface);
  color: var(--night-ink);
  box-shadow: inset 0 0 0 1px var(--night-line);
}
/* Die Terminliste ist eine zusammenhängende Fläche, also ohne Rahmen je Zeile */
html[data-mode="nacht"] .ev.t { background: var(--night-surface); color: var(--night-ink); }
html[data-mode="nacht"] :is(.t-tisch, .olive, .ev.t:first-child) { background: #262e22; color: var(--night-ink); box-shadow: none; }

/* ---------- Akzente in Messing ---------- */
html[data-mode="nacht"] :is(.t-num, .t-date, .ev-day) { color: var(--messing); }
html[data-mode="nacht"] .ev.t:first-child .ev-day { color: inherit; }
html[data-mode="nacht"] .t-status { color: #D9C08A; }
html[data-mode="nacht"] :is(.mg-name, .nw-date, .creme .done-kicker) { color: var(--messing); }
html[data-mode="nacht"] :is(.mg-note, .mi-d, .fine) { color: var(--night-mute); }
html[data-mode="nacht"] .hours .is-today dt::before { background: var(--messing); }
html[data-mode="nacht"] .v-scroll { scrollbar-color: rgba(241, 232, 214, .3) transparent; }

/* ---------- Reiter und Knöpfe ---------- */
html[data-mode="nacht"] .v-tabs button { color: var(--night-ink); }
html[data-mode="nacht"] .v-tabs button:hover { background: rgba(241, 232, 214, .09); }
html[data-mode="nacht"] .v-tabs button[aria-selected="true"] { background: var(--night-ink); color: #14110e; }
html[data-mode="nacht"] .back { background: var(--night-ink); color: #14110e; box-shadow: none; }
html[data-mode="nacht"] .back:hover { background: var(--messing); }
html[data-mode="nacht"] .flip { background: var(--messing); color: #14110e; }
html[data-mode="nacht"] .flip:hover { background: #E2C98F; }

/* ---------- Formulare auf vormals hellen Kacheln ---------- */
html[data-mode="nacht"] .v-form.creme {
  --f-line: rgba(241, 232, 214, .5);
  --f-chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23F1E8D6' stroke-width='1.1'><path d='M2 4.200l4 4 4-4'/></svg>");
}
html[data-mode="nacht"] .creme .f :is(input, select, textarea) { color-scheme: dark; }
html[data-mode="nacht"] .creme .f-err { color: #F3C3B3; }
html[data-mode="nacht"] .creme .f-submit { background: var(--night-ink); color: #14110e; }
html[data-mode="nacht"] .creme .f-submit .ico { background: #14110e; color: var(--night-ink); }
html[data-mode="nacht"] .creme .f-submit:hover { background: var(--messing); }
html[data-mode="nacht"] .creme .done-again:hover { background: var(--night-ink); color: #14110e; }

/* Stadtplan bei Nacht */
html[data-mode="nacht"] .v-addr {
  --map-ground: var(--night-surface);
  --map-build: rgba(241, 232, 214, .1);
  --map-road: rgba(241, 232, 214, .035);
  --map-water: rgba(120, 138, 132, .26);
  --map-green: rgba(120, 140, 110, .1);
  --map-church: rgba(241, 232, 214, .34);
  --map-home: var(--messing);
  --map-ink: var(--night-ink);
}

/* Impressum und Datenschutz */
html[data-mode="nacht"] .v-legal .lg { --lg-mute: var(--night-mute); --lg-acc: var(--messing); }

/* Helle Abendmotive im Bildwechsel, von denen es keine Nachtversion gibt */
html[data-mode="nacht"] .t-photo img.is-dim { filter: brightness(.66) contrast(1.06) sepia(.14); }

/* Runner-Siegel etwas gedimmt, damit es nachts nicht leuchtet */
html[data-mode="nacht"] .runner { filter: brightness(.88) sepia(.14); }

/* Das echte Porträt bekommt etwas vom Lampenlicht */
html[data-mode="nacht"] .v-host img { filter: saturate(.85) brightness(.84) sepia(.18); }

/* Umschalten: ruhig überblenden, als würde jemand das Licht dimmen */
html.mode-switch::view-transition-old(root),
html.mode-switch::view-transition-new(root),
html.mode-switch::view-transition-old(stage),
html.mode-switch::view-transition-new(stage) { animation-duration: 1.6s; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }

/* Anfragen: Auswahl Private Feier / Firma / Künstler:in */
html[data-mode="nacht"] .creme .f-seg button:hover { background: rgba(241, 232, 214, .09); }
html[data-mode="nacht"] .creme .f-seg button[aria-checked="true"] { background: var(--night-ink); border-color: var(--night-ink); color: #14110e; }