/* Saisonwelt (04.11.2026) – nur geladen, wenn eine Saison aktiv ist (die Weiche verlinkt es).
   Regeln: nur Farb-Tokens neu setzen; Deko auf eigenen Ebenen, nie über Bedienelementen;
   bewegt wird nur transform/opacity; „Bewegung reduzieren“ und „Deko aus“ = still. */
@property --sx-akzent { syntax: "<color>"; inherits: true; initial-value: #5fd3ec; }
/* Bewusst OHNE @layer: Die Grundstile (global.css) liegen in keiner Ebene, und Stile ohne Ebene
   gewinnen immer gegen Stile in einer Ebene – die Saisonfarben wären still verloren.
   Die Farben je Saison setzt die Weiche aus src/config/saison.js (EINE Quelle). */
html[data-saison] { --c-accent: var(--sx-akzent); transition: --sx-akzent .6s ease; }


/* Farbklima */
html[data-saison][data-saison-teile~="farben"] body { background: radial-gradient(1100px 650px at 75% -10%, color-mix(in oklab, var(--c-purple-glow) 16%, transparent), transparent 70%), var(--c-black); }
html[data-saison][data-saison-teile~="farben"] .topbar { background: linear-gradient(90deg, var(--sx-b1), var(--sx-b2) 50%, var(--sx-b3)); }
html[data-saison][data-saison-teile~="farben"] .btn-primary { background: linear-gradient(120deg, color-mix(in oklab, var(--c-accent) 80%, #fff), var(--c-accent)); color: var(--sx-knopf-text, #1b1226); box-shadow: 0 8px 24px color-mix(in oklab, var(--c-accent) 32%, transparent); }
html[data-saison][data-saison-teile~="farben"] .hero-photo { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--c-accent) 60%, transparent), 0 18px 40px rgba(0,0,0,.5), 0 0 30px color-mix(in oklab, var(--c-purple-glow) 20%, transparent); }
html[data-saison][data-saison-teile~="farben"] .eyebrow { color: var(--c-accent); }

/* Zeile oben: wechselt sanft mit der Standardzeile (eine Leiste, beide Infos) */
.topbar-default:has(.sx-zeile) { display: grid; place-items: center; }
.topbar-default:has(.sx-zeile) > .sx-zeile, .topbar-default:has(.sx-zeile) > .topbar-standard { grid-area: 1 / 1; }
.sx-zeile { font-weight: 500; animation: sx-zeile-a 12s ease-in-out infinite; }
.topbar-default:has(.sx-zeile) > .topbar-standard { animation: sx-zeile-b 12s ease-in-out infinite; }
@keyframes sx-zeile-a { 0%, 46% { opacity: 1; } 50%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sx-zeile-b { 0%, 46% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* Saison-Chip im Kopfbereich */
.sx-chip { display: flex; width: fit-content; align-items: center; gap: 8px; margin: 0 0 14px; padding: 7px 14px; border-radius: 99px; font-weight: 600; font-size: .9rem; color: var(--c-text); background: color-mix(in oklab, var(--c-accent) 14%, transparent); border: 1px solid color-mix(in oklab, var(--c-accent) 50%, transparent); }

/* Schaufenster / Saison-Regal */
.sx-regal-titel { margin: 0 0 14px; }
.sx-regal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Laufband: die Spur gleitet per transform (Compositor), die Reihe bleibt von Hand scrollbar. padding-right = Lücke,
   damit −50 % genau eine Kartenrunde ist (sonst springt das Band um eine halbe Lücke). */
.sx-regal-reihe.sx-band { display: block; scroll-snap-type: none; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.sx-regal-reihe.sx-band::-webkit-scrollbar { display: none; }
.sx-band-spur { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 220px); gap: 16px; padding-right: 16px; width: max-content; animation: sx-band linear infinite; will-change: transform; }
.sx-band-spur .sx-karte { scroll-snap-align: none; }
/* Name und Preis lesbar über jedem Hintergrund – eine ruhige Fläche (kein backdrop-filter: der würde bei der bewegten
   Spur in jedem Bild neu gerechnet) */
.sx-regal .sx-karte { padding: 8px 8px 10px; border-radius: calc(var(--radius-m) + 6px); background: rgba(12, 9, 22, .62); }
@keyframes sx-band { to { transform: translateX(-50%); } }
.sx-band:hover .sx-band-spur, .sx-band:focus-within .sx-band-spur, .sx-band-halt .sx-band-spur, .sx-band-weg .sx-band-spur, html.sx-ruhe .sx-band-spur { animation-play-state: paused; }
.sx-band-knoepfe { display: flex; gap: 8px; margin: 0 0 14px; }
.sx-band-knopf { inline-size: 40px; block-size: 40px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--c-accent) 45%, transparent); background: rgba(255,255,255,.06); color: var(--c-text); font: 600 1.05rem/1 var(--font-body, inherit); cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.sx-band-knopf:hover { background: color-mix(in oklab, var(--c-accent) 22%, transparent); }
.sx-band-knopf:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.sx-regal-reihe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 220px); gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.sx-karte { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--c-text); scroll-snap-align: start; }
.sx-karte-bild { aspect-ratio: 3 / 4; border-radius: var(--radius-m); overflow: hidden; border: 1px solid color-mix(in oklab, var(--c-accent) 40%, transparent); background: var(--c-anthracite); }
.sx-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.sx-karte:hover .sx-karte-bild img, .sx-karte:focus-visible .sx-karte-bild img { transform: scale(1.04); }
.sx-karte-name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.sx-karte-preis { color: var(--c-accent); font-weight: 600; }
.sx-seite-status { display: inline-flex; gap: 8px; padding: 8px 16px; border-radius: 99px; font-weight: 600; color: var(--c-text); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.sx-seite-leer { margin: 1.25rem 0 0; max-width: 38rem; color: var(--c-text-muted); line-height: 1.6; }
.sx-seite-status.sx-laeuft { background: color-mix(in oklab, var(--c-accent) 16%, transparent); border-color: color-mix(in oklab, var(--c-accent) 55%, transparent); }
/* Saisonseiten ohne laufende Saison bekommen die Grundfarben des Shops – die Karten sehen trotzdem gut aus */

/* Logo-Kostüm (Bild kommt aus saison.js als data-URI-Hintergrund) */
.site-header .brand { position: relative; }
.sx-kostuem { position: absolute; pointer-events: none; z-index: 3; width: 46px; height: 40px; left: 4px; top: -22px; background: no-repeat center / contain; }
@media (max-width: 720px) { .sx-kostuem { width: 36px; height: 32px; top: -17px; } }

/* Deko-Ebenen */
[data-sx-deko] { pointer-events: none; }
.sx-kette { position: absolute; left: 0; right: 0; bottom: -34px; height: 40px; z-index: 41; }
.sx-kette svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sx-kette .sx-glimm { animation: sx-glimm 3.2s ease-in-out infinite; transform-box: fill-box; }
.sx-kette .sx-glimm:nth-child(3n) { animation-delay: -1.1s; } .sx-kette .sx-glimm:nth-child(3n+1) { animation-delay: -2.2s; }
@keyframes sx-glimm { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sx-himmel { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.sx-lebt { position: absolute; right: 6%; top: 14px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sx-lebt svg { width: 150px; height: auto; display: block; }
.sx-lebt-zeile { font-weight: 600; font-size: .82rem; color: var(--c-text); background: rgba(10,10,24,.82); border: 1px solid color-mix(in oklab, var(--c-accent) 45%, transparent); padding: 5px 12px; border-radius: 99px; white-space: nowrap; }
.hero { position: relative; }
/* Am Handy: kleiner, ganz oben am Rand, ohne Zeile (die Leiste oben sagt es schon) – nie über den Fotos */
@media (max-width: 720px) { .sx-lebt { right: 3%; top: -2px; } .sx-lebt svg { width: 78px; } .sx-lebt-zeile { display: none; } }
.sx-flamme { animation: sx-flackern 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sx-flackern { 0%, 100% { transform: scale(1, 1); opacity: 1; } 50% { transform: scale(.94, 1.04); opacity: .9; } }
@starting-style { [data-sx-deko] { opacity: 0; } }
[data-sx-deko] { transition: opacity .8s ease; }

/* Deko-aus-Knopf (unten links – rechts sitzt der Musik-Knopf) */
.sx-schalter { position: fixed; left: 14px; bottom: 14px; z-index: 60; height: 36px; padding: 0 14px; border-radius: 99px; font: 600 13px/1 var(--font-body); color: var(--c-text); background: rgba(12,10,22,.82); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); cursor: pointer; }
@media (max-width: 720px) { .sx-schalter { width: 38px; height: 38px; padding: 0; font-size: 16px; overflow: hidden; white-space: nowrap; } .sx-schalter .sx-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.sx-schalter:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Mitmachen: Ei / Kürbis */
.sx-fund { position: fixed; z-index: 55; width: 52px; height: 60px; border: 0; padding: 0; background: none; cursor: pointer; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.sx-fund svg { width: 100%; height: 100%; }
.sx-fund.oben-rechts { right: 18px; top: 140px; } .sx-fund.oben-links { left: 18px; top: 160px; } .sx-fund.unten-links { left: 18px; bottom: 70px; }
.sx-fund.unten-rechts { right: 80px; bottom: 90px; } .sx-fund.mitte-rechts { right: 18px; top: 48vh; }
.sx-fund:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 12px; }
.sx-dialog { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(5,4,12,.6); }
.sx-dialog > div { width: min(420px, calc(100vw - 32px)); padding: 24px 22px; border-radius: 24px; text-align: center; color: var(--c-text); background: linear-gradient(160deg, var(--sx-b1, #2e1b47), var(--c-black)); border: 1px solid color-mix(in oklab, var(--c-accent) 55%, transparent); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.sx-dialog .sx-code { display: inline-block; font: 700 1.4rem/1 var(--font-body); letter-spacing: .08em; padding: 10px 18px; margin: 12px 0; border-radius: 12px; border: 1.5px dashed var(--c-accent); color: var(--c-text); }
.sx-dialog button { margin-top: 10px; }

/* Ruhe: Deko aus (Besucherin) oder „Bewegung reduzieren“ (Gerät) */
html.sx-ruhe [data-sx-deko] { display: none !important; }
html.sx-ruhe .sx-zeile, html.sx-ruhe .topbar-standard { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sx-zeile, .topbar-standard, .sx-kette .sx-glimm, .sx-flamme { animation: none !important; }
  .topbar-default:has(.sx-zeile) { display: block; }
  .topbar-default:has(.sx-zeile) > .topbar-standard { display: none; }
  html[data-saison] { transition: none; }
}
html.sx-ruhe .topbar-default:has(.sx-zeile) { display: block; }
html.sx-ruhe .topbar-default:has(.sx-zeile) > .topbar-standard { display: none; }
@media (prefers-contrast: more) { .sx-himmel { display: none; } }