/* ══════════════════════════════════════════════════════════════════════════════
   SAISON-WELT — die Ebene, die sich über alle öffentlichen Seiten legt
   ──────────────────────────────────────────────────────────────────────────────
   Bewusst KEINE Umfärbung des bestehenden Designs: alles hier liegt als eigene
   Schicht darüber und arbeitet mit Mischmodi. Dadurch bleibt jede Seite genauso
   bedienbar wie vorher, sie bekommt nur eine andere Atmosphäre.

   Alle Schichten haben pointer-events:none — nur das Saison-Abzeichen unten links
   ist anklickbar. Die Höhenstaffelung liegt über allem anderen (Schnee fällt vor
   dem Fenster, nicht dahinter), stört aber nichts, weil nichts davon Klicks fängt.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --sa-akzent:  #c4a35a;
  --sa-akzent2: #8b7ce8;
  --sa-licht:   #fdf3d8;
  --sa-tief:    #0a0b0f;
  --sa-staerke: 1;

  --sa-z-grund:  2147482988;
  --sa-z-licht:  2147482989;
  --sa-z-tint:   2147482990;
  --sa-z-vig:    2147482991;
  --sa-z-deko:   2147482993;
  --sa-z-partikel: 2147482995;
  --sa-z-korn:   2147482996;
  --sa-z-ui:     2147482998;
}

/* Himmelslicht, Bodenhauch und Grundton haben KEINE eigenen Ebenen mehr.
   Jede Fläche mit mix-blend-mode zwingt den Browser, bei jedem Bild das ganze
   Fenster neu zu mischen. Mit fünf solchen Ebenen übereinander wurden alle
   Seiten spürbar zäh. Licht liegt jetzt im Farbschleier (beides screen), der
   Grundton in der Vignette (beides multiply) — gleiche Wirkung, zwei Ebenen
   statt fünf. */

/* ── Farbschleier ──────────────────────────────────────────────────────────── */
/* screen ist hier die richtige Wahl, nicht soft-light: die Portale haben fast
   schwarze Hintergründe, auf denen soft-light praktisch unsichtbar bleibt. screen
   hellt dunkle Flächen in der Saisonfarbe auf und lässt helle Flächen — also den
   Text — nahezu unberührt. Genau das wollen wir: Farbe im Raum, Text unangetastet. */
/* Alle Ebenen sind sofort auf ihrem Endwert — bewusst ohne Einblendung.
   Wird eine Seite in einem HINTERGRUNDTAB geöffnet, pausiert der Browser
   Übergänge und Animationen; sie bleiben dann auf halbem Weg stehen und laufen
   beim Hinschauen nicht weiter. Genau das ist passiert (4 % statt 62 %).
   Ein fester Wert kann nicht hängen bleiben. Das sanfte Erscheinen übernehmen
   die Partikel selbst — sie fallen ohnehin von oben herein. */
#saison-tint {
  position: fixed; inset: 0; z-index: var(--sa-z-tint);
  pointer-events: none; mix-blend-mode: screen; opacity: 1;
}

/* ── Vignette ──────────────────────────────────────────────────────────────── */
#saison-vignette {
  position: fixed; inset: 0; z-index: var(--sa-z-vig);
  pointer-events: none; mix-blend-mode: multiply; opacity: 1;
}

/* Früher flackerte das Licht an Halloween. Das war beim Lesen anstrengend und
   ist deshalb einem sehr langsamen, kaum merklichen Atmen gewichen: gerade genug,
   dass der Raum lebt, zu wenig, um aufzufallen. */
@keyframes sa-atmen {
  0%, 100% { opacity: 1; }
  50%      { opacity: .82; }
}
#saison-tint.flackern.an { animation: sa-atmen 14s ease-in-out infinite; }

/* ── Partikelfläche ────────────────────────────────────────────────────────── */
/* Die Partikel liegen über der Seite — damit sie trotzdem nie beim Lesen stören,
   wird die BILDMITTE ausmaskiert. Dort steht der Inhalt. Sichtbar sind sie nur
   in der Peripherie: man nimmt sie wahr, liest aber ungestört weiter.
   Dazu eine deutlich zurückgenommene Deckkraft — es soll eine Stimmung sein,
   kein Vordergrund. */
#saison-canvas {
  position: fixed; inset: 0; z-index: var(--sa-z-partikel);
  pointer-events: none; opacity: .62;
  -webkit-mask-image: radial-gradient(76% 92% at 50% 46%,
    transparent 0%, transparent 40%, rgba(0,0,0,.34) 64%, rgba(0,0,0,.78) 86%, #000 100%);
          mask-image: radial-gradient(76% 92% at 50% 46%,
    transparent 0%, transparent 40%, rgba(0,0,0,.34) 64%, rgba(0,0,0,.78) 86%, #000 100%);
}

/* ── Filmkorn ──────────────────────────────────────────────────────────────────
   Die großen weichen Verläufe zeigen auf dunklen Flächen sonst Streifen — der
   Farbraum reicht für so flache Übergänge schlicht nicht. Eine hauchfeine Körnung
   bricht das auf: die Streifen verschwinden und das Ganze bekommt Textur, statt
   wie eine glatte Folie zu wirken. Die Grafik ist ein eingebettetes SVG-Rauschen,
   also kein zusätzlicher Ladevorgang, und sie bewegt sich nicht. */
#saison-korn {
  position: fixed; inset: 0; z-index: var(--sa-z-korn);
  /* Ohne Mischmodus: als schlichte, sehr blasse Auflage kostet das Korn nichts,
     bricht die Streifen in den Verläufen aber genauso gut. */
  pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
/* Auf sehr kleinen Bildschirmen bringt das Korn nichts und kostet nur Füllrate. */
@media (max-width: 560px) { #saison-korn { display: none; } }

/* ── Deko-Aufbauten ────────────────────────────────────────────────────────── */
#saison-deko {
  position: fixed; inset: 0; z-index: var(--sa-z-deko);
  pointer-events: none; overflow: hidden; opacity: .8;
}
/* Die Aufbauten am Rand tragen das Motto: sie sitzen fest, bewegen sich kaum und
   liegen nie über dem Text. Deshalb dürfen sie deutlicher sein als die Partikel. */
#saison-deko > * { position: absolute; }

.sa-oben   { top: 0;    left: 0; right: 0; }
/* Deko am unteren Rand wird nach oben hin weich ausgeblendet. Dort stehen auf
   echten Portalseiten Knöpfe und Text — eine harte Silhouette würde sie
   verschlucken. Oben genügt eine sanftere Blende, da liegt selten Inhalt. */
.sa-unten  { bottom: 0; left: 0; right: 0;
  -webkit-mask-image: linear-gradient(to top, #000 34%, rgba(0,0,0,.55) 68%, transparent 100%);
          mask-image: linear-gradient(to top, #000 34%, rgba(0,0,0,.55) 68%, transparent 100%); }
.sa-oben   {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 100%); }

/* Lichterkette: die Lampen glimmen versetzt */
@keyframes sa-lampe { 0%,100% { opacity: 1; filter: brightness(1.15); } 50% { opacity: .55; filter: brightness(.8); } }
.sa-lampe { animation: sa-lampe 2.6s ease-in-out infinite; transform-origin: center; }

/* Nebelschwaden am unteren Rand */
@keyframes sa-schwade { 0% { transform: translateX(-12%); } 100% { transform: translateX(12%); } }
.sa-schwade { animation: sa-schwade 26s ease-in-out infinite alternate; }

/* Wellen */
@keyframes sa-welle { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.sa-welle { animation: sa-welle 18s linear infinite; }

/* Sanftes Schwingen für Ranken, Zweige, Wimpel */
@keyframes sa-wiegen { 0%,100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } }
.sa-wiegen { animation: sa-wiegen 6s ease-in-out infinite; transform-origin: top center; }

/* ── Saison-Abzeichen unten links ──────────────────────────────────────────── */
#saison-abzeichen {
  position: fixed; right: 40px; bottom: 9px; z-index: var(--sa-z-ui);
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 10px; border-radius: 999px;
  background: rgba(10, 10, 14, .72);
  border: 1px solid color-mix(in srgb, var(--sa-akzent) 42%, transparent);
  box-shadow: 0 8px 26px -14px color-mix(in srgb, var(--sa-akzent) 90%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  color: #eee; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11.5px; letter-spacing: .3px; line-height: 1;
  cursor: pointer; user-select: none;
  transition: border-color .2s, box-shadow .2s;
}
#saison-abzeichen:hover {
  border-color: color-mix(in srgb, var(--sa-akzent) 75%, transparent);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--sa-akzent) 100%, transparent);
}
#saison-abzeichen .sa-sym {
  font-size: 14px; line-height: 1;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--sa-akzent) 75%, transparent));
}
#saison-abzeichen .sa-nam { font-weight: 600; color: var(--sa-licht); }
#saison-abzeichen .sa-pkt {
  width: 5px; height: 5px; border-radius: 50%; background: var(--sa-akzent);
  box-shadow: 0 0 8px var(--sa-akzent); animation: sa-puls 2.4s ease-in-out infinite;
}
@keyframes sa-puls { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }

/* ── Saison-Karte (öffnet sich beim Klick aufs Abzeichen) ──────────────────── */
#saison-karte {
  position: fixed; right: 10px; bottom: 50px; z-index: var(--sa-z-ui);
  width: min(330px, calc(100vw - 20px));
  background: linear-gradient(170deg, rgba(20, 20, 26, .97), rgba(10, 10, 14, .97));
  border: 1px solid color-mix(in srgb, var(--sa-akzent) 34%, transparent);
  border-radius: 16px; padding: 0; overflow: hidden;
  box-shadow: 0 26px 70px -24px rgba(0, 0, 0, .95),
              0 0 0 1px rgba(0, 0, 0, .5),
              inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #e8e8ee; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  display: none; animation: sa-karte-auf .3s cubic-bezier(.2, 1.1, .3, 1);
}
#saison-karte.an { display: block; }
@keyframes sa-karte-auf { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

#saison-karte .sa-k-kopf {
  padding: 15px 16px 13px; position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: radial-gradient(120% 130% at 12% 0%, color-mix(in srgb, var(--sa-akzent) 26%, transparent), transparent 62%);
}
#saison-karte .sa-k-sym {
  font-size: 25px; line-height: 1; margin-bottom: 8px; display: block;
  filter: drop-shadow(0 0 13px color-mix(in srgb, var(--sa-akzent) 85%, transparent));
}
#saison-karte .sa-k-name { font-size: 17px; font-weight: 700; color: var(--sa-licht); letter-spacing: .2px; }
#saison-karte .sa-k-unter { font-size: 11px; color: rgba(255, 255, 255, .5); margin-top: 2px; letter-spacing: 1.3px; text-transform: uppercase; }
#saison-karte .sa-k-text { padding: 13px 16px; font-size: 12.5px; line-height: 1.65; color: rgba(255, 255, 255, .74); }
#saison-karte .sa-k-zeilen { padding: 0 16px 6px; display: flex; flex-direction: column; gap: 7px; }
#saison-karte .sa-k-zeile { display: flex; align-items: center; gap: 9px; font-size: 12px; color: rgba(255, 255, 255, .62); }
#saison-karte .sa-k-zeile b { color: var(--sa-licht); font-weight: 600; }
#saison-karte .sa-k-zeile .sa-k-ic {
  width: 21px; height: 21px; flex: 0 0 21px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  background: color-mix(in srgb, var(--sa-akzent) 17%, transparent);
  border: 1px solid color-mix(in srgb, var(--sa-akzent) 27%, transparent);
}
#saison-karte .sa-k-fuss {
  padding: 11px 16px 13px; border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex; align-items: center; gap: 9px; justify-content: space-between;
}
#saison-karte .sa-k-schalter {
  display: flex; align-items: center; gap: 7px; font-size: 11.5px;
  color: rgba(255, 255, 255, .6); cursor: pointer; user-select: none;
}
#saison-karte .sa-k-box {
  width: 32px; height: 18px; border-radius: 999px; position: relative; flex: 0 0 32px;
  background: rgba(255, 255, 255, .13); transition: background .2s;
}
#saison-karte .sa-k-box::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: transform .2s;
}
#saison-karte .sa-k-schalter.an .sa-k-box { background: var(--sa-akzent); }
#saison-karte .sa-k-schalter.an .sa-k-box::after { transform: translateX(14px); }
#saison-karte .sa-k-zu {
  background: none; border: 1px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .6);
  border-radius: 8px; padding: 5px 11px; font-size: 11.5px; cursor: pointer; font-family: inherit;
}
#saison-karte .sa-k-zu:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }

/* ── Handy ─────────────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  #saison-abzeichen { right: 36px; bottom: 8px; padding: 6px 10px 6px 8px; font-size: 10.5px; }
  #saison-abzeichen .sa-nam { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #saison-karte { left: 8px; right: 8px; bottom: 46px; width: auto; }
}

/* ── Wer keine Bewegung will, bekommt keine ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #saison-canvas { display: none !important; }
  .sa-lampe, .sa-schwade, .sa-welle, .sa-wiegen,
  #saison-tint.flackern.an, #saison-abzeichen .sa-pkt { animation: none !important; }

  #saison-abzeichen { transition: none !important; }
}