/* ═══════════════════════════════════════════════════════════════════════════
   seasons/kern.css — what every seasonal skin shares (app/base/saison.py).

   Loaded only while a skin is on (base.html, partials/_saison_kopf.html),
   before the skin's own sheet. Prefix "sz-" for everything (no Tailwind
   class, no clash with the site's names). Rules here:

   - Layers (.sz-layer) are fixed, cover the viewport, take no click and
     never move the layout; whatever a skin draws in them is aria-hidden.
   - Every animation of a skin hangs on html.sz-fx (kern.js sets it while
     effects may run); html.sz-pause (hidden tab) holds them; reduced motion
     stops them twice (kern.js never sets sz-fx, and theme.css already sets
     animation: none for everything).
   - Printing shows the page without any of it.
   ═══════════════════════════════════════════════════════════════════════════ */

.sz-layer {
  position: fixed; inset: 0; z-index: 45;
  pointer-events: none; overflow: hidden;
  contain: strict;
}
.sz-layer * { pointer-events: none }
.sz-canvas { position: absolute; inset: 0; width: 100%; height: 100% }

/* A hidden tab: everything of the skin holds still (rAF stops by itself). */
html.sz-pause [class*="sz-"],
html.sz-pause [class*="sz-"]::before,
html.sz-pause [class*="sz-"]::after,
html.sz-pause [class*="sz-"] *,
html.sz-pause [class*="sz-"] *::before,
html.sz-pause [class*="sz-"] *::after { animation-play-state: paused !important }

/* ── Der Schalter „Effekte" ──────────────────────────────────────────────── */
.sz-schalter {
  position: fixed; left: .75rem; bottom: .75rem; z-index: 41;
  display: inline-flex; align-items: center; gap: .45rem;
  height: 2.25rem; padding: 0 .8rem 0 .55rem;
  border: 1px solid var(--border); border-radius: 999px;
  background-color: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--foreground);
  font: 500 12px/1 'Inter', ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 8px 24px -12px oklch(0 0 0 / .55);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.sz-schalter[hidden] { display: none }
.sz-schalter:hover { transform: translateY(-1px); background-color: var(--card) }
.sz-schalter:focus-visible { outline: 2px solid var(--ring, var(--brand)); outline-offset: 2px }
.sz-schalter-icon { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; color: var(--brand) }
.sz-schalter-icon svg { width: 100%; height: 100%; display: block }
.sz-schalter[aria-pressed="false"] .sz-schalter-icon { color: var(--muted-foreground); filter: grayscale(1) }
.sz-schalter-zustand { font-weight: 650 }
.sz-schalter-vorschau {
  margin-left: .15rem; padding: .2rem .45rem; border-radius: 999px;
  background-color: var(--brand); color: var(--brand-ink);
  font-size: 10.5px; font-weight: 650; letter-spacing: .02em;
}
@media (min-width: 640px) { .sz-schalter { left: 1.25rem; bottom: 1.25rem } }
/* Narrow screens and the end of the page: only the icon (and on a preview the
   short note) — the button covers as little of the page as it can. */
@media (max-width: 639px) {
  .sz-schalter { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center }
  .sz-schalter-text, .sz-schalter-vorschau { display: none }
}
.sz-schalter.sz-am-ende { width: 2.25rem; padding: 0; justify-content: center; bottom: .75rem }
.sz-schalter.sz-am-ende .sz-schalter-text,
.sz-schalter.sz-am-ende .sz-schalter-vorschau { display: none }
/* … and on a preview a dot in the skin's colour says so. */
.sz-schalter.sz-am-ende[data-vorschau]::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: .6rem; height: .6rem;
  border-radius: 999px; background-color: var(--brand); box-shadow: 0 0 0 2px var(--card);
}
@media (max-width: 639px) {
  .sz-schalter[data-vorschau]::after {
    content: ""; position: absolute; top: -2px; right: -2px; width: .6rem; height: .6rem;
    border-radius: 999px; background-color: var(--brand); box-shadow: 0 0 0 2px var(--card);
  }
}
/* Over the notice of the site (base.html #hinweis, bottom centre) on a narrow screen. */
@media (max-width: 767px) { .sz-schalter.sz-ueber-hinweis { bottom: 5.5rem } }

@media (prefers-reduced-motion: reduce) {
  .sz-schalter { display: none }
}

@media print {
  .sz-layer, .sz-schalter, [class^="sz-"], [class*=" sz-"] { display: none !important }
}