/* Dark theme for all draft pages (Marco 14.10.2026: the device's colour scheme is the default, the
   header switch overrides it, the choice is remembered). Paper surfaces become «Nachtpapier», slightly lighter than
   the night of hero and contact, so those sections still stand apart. Loaded after each page's own
   styles, so these rules win over the page defaults. The dark token values themselves live in tokens.css. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: 0.1; }

/* Paper background (Marco 14.10.2026, «Netz mit Licht»): a fine survey grid with small crosses like
   a map sheet, plus a soft warm glow top left and a cool one bottom right. Both sit fixed behind the
   page; night sections and cards keep their own backgrounds and simply cover it. The grid is a mask
   filled with the theme ink, so it follows light and dark mode without a second image. */
body { background: transparent; }
.monument { background: transparent; }
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before { background:
  radial-gradient(1100px 760px at 12% -8%, var(--glow-warm), transparent 62%),
  radial-gradient(1000px 900px at 108% 105%, var(--glow-cool), transparent 60%); }
body::after { background: var(--ink); opacity: var(--grid-strength);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0 .5H160M.5 0V160' stroke='%23000' stroke-opacity='.35'/%3E%3Cpath d='M.5 -6V7M-6 .5H7' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 160px 160px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0 .5H160M.5 0V160' stroke='%23000' stroke-opacity='.35'/%3E%3Cpath d='M.5 -6V7M-6 .5H7' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 160px 160px; }

/* Surfaces that were hard-coded light in the page styles. */
.top.is-paper { background: var(--header-paper); }
.gets li, .tier { background: var(--card); }
.tier-art { background: linear-gradient(var(--sky), transparent 85%); }
/* Closed accordion entries were a fixed half-transparent ink; follow the theme ink instead. */
.acc button { color: color-mix(in srgb, var(--ink) 50%, transparent); }

/* Text and borders on the accent stay dark in both themes. */
.sign:not(.ghost), .tier .price { color: var(--on-accent); }

/* Theme switch in the header: moon in light mode, sun in dark mode. */
.theme-toggle { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: none; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent); color: inherit; transition: border-color .3s, background .3s; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: currentColor; outline: none; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }
/* The switch stays visually small (32–36 px); an invisible ring makes the tap area 44 px. */
.theme-toggle { position: relative; }
.theme-toggle::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
/* Narrow screens hide the nav, so the switch itself pushes to the right, next to the CTA. */
@media (max-width: 900px) {
  .top { gap: 10px; }
  .theme-toggle { margin-left: auto; width: 32px; height: 32px; }
  .top .theme-toggle + .sign { margin-left: 0; }
}

/* The switch cross-fades the whole page instead of jumping. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}