/* ==================================================================
   Jahreszeiten
   ==================================================================

   Hiess bis zum 2026-09-15 halloween.css. Seit die Marke im Kopf
   zwischen den Jahreszeiten wechselt, waere der Name gelogen.

   WIE MAN DAS WIEDER LOSWIRD: die Zeile `<script src="/saison.js">`
   aus index.html nehmen. Fertig.

   Die Klasse `saison-an` setzt das Skript selbst, und zwar nur, wenn
   gerade eine Jahreszeit faellig ist. Im HTML steht die NORMALE
   Marke -- ohne das Skript bleibt sie stehen. Diese Datei kann
   verlinkt bleiben, sie greift dann nirgends.

   WARUM UEBERALL DIE `-dunkel`-FASSUNGEN: Deko, die auf hellem Grund
   gut aussieht, verschwindet auf #04070c -- beim Halloween-Logo
   gemessen, nicht vermutet. Die dunklen Fassungen haben dieselbe
   Geometrie und dieselben LOGOfarben, nur die Deko ist aufgehellt.
   Siehe docs/web.md.

   WAS HIER BEWUSST NICHT PASSIERT: keine Funktionsfarbe wird
   angefasst. Der gruene Punkt am Serverstatus bleibt gruen, eine
   Warnung bleibt eine Warnung. Eine Jahreszeit faerbt Deko, nicht
   Auskunft. Und kein Text aendert sich: was die Seite sagt, sagt sie
   das ganze Jahr.                                                    */

/* --- Der Kopf ----------------------------------------------------- */

/* Die Saisonfassung ist die WORTmarke -- sie enthaelt den Schriftzug
   schon als Teil des Bildes. Der Text daneben muss deshalb weg, sonst
   stuende "Zypo" zweimal nebeneinander. */
.saison-an .wortmarke { display: none; }

/* Hoehe statt Breite: so bleibt die Kopfzeile gleich hoch, egal wie
   breit das Bild wird.
   Im Bild ist die Marke nur der mittlere Teil -- die Fledermaeuse
   stehen darueber, die Kuerbisse darunter. Gerechnet war 68 px: der
   Schriftzug spannt im SVG 78,8 von 134 Einheiten Gesamthoehe, und
   40 * 134 / 78,8 = 68 ergibt genau die alte Schriftgroesse.
   Auf Joeys Wunsch 13 % groesser -- der Schriftzug steht damit auf
   45 px statt 40. Die Rechnung bleibt hier stehen, weil sie die
   Bezugsgroesse nennt: wer spaeter zurueck will, weiss wohin. */
/* FESTE BUEHNE, nicht `width: auto`.
   Die Fassungen haben leicht verschiedene Seitenverhaeltnisse
   (Halloween 360x134, Ostern und Weihnachten 364x138). Bei freier
   Breite wuerde die Kopfzeile bei jedem Wechsel um ein paar Pixel
   zucken -- und die Marke steht in der Mitte eines Rasters, das
   faellt sofort auf. `object-fit: contain` legt jede Fassung
   stattdessen in dieselbe Flaeche und laesst den Rest frei. */
.saison-an .saisonbild {
  position: relative; display: block;
  width: 207px; height: 77px;
}
.saison-an .saisonbild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
.saison-an .logo { gap: 0; padding-top: 8px; }

/* Das zweite Bild liegt unsichtbar darunter und wird beim Wechsel
   eingeblendet. Ohne Ueberblendung blitzt beim Tausch der Quelle
   kurz nichts -- ein Zucken mitten in der Kopfzeile. */
.saison-an .saisonbild img { transition: opacity .8s ease; }
.saison-an .saisonbild img.leise { opacity: 0; }

/* Wer Bewegung abgestellt hat, bekommt eine Fassung und keine
   Ueberblendung. saison.js hoert ebenfalls auf diese Einstellung und
   wechselt dann gar nicht erst. */
@media (prefers-reduced-motion: reduce) {
  .saison-an .saisonbild img { transition: none; }
}

/* Unter 720 px rutscht der Kopf ohnehin untereinander (landing.css).
   Dort etwas kleiner, damit die breite Wortmarke nicht die halbe
   Zeile frisst. */
@media (max-width: 720px) {
  .saison-an .saisonbild { width: 159px; height: 59px; }
}

/* --- Der Heldenbereich -------------------------------------------- */

/* Die grosse Marke im Hintergrund bleibt die normale: sie liegt auf
   5 % Deckkraft und angeschnitten hinter dem Text. Deko, die man bei
   5 % ohnehin nicht erkennt, waere dort nur mehr Dateigroesse -- und
   die Wortmarke ist fuer diese Stelle das falsche Format, sie ist
   dreimal so breit wie hoch.

   Stattdessen ein warmer Schein von unten rechts, als stuende die
   Laterne ausserhalb des Bildes. Er liegt UEBER der Flaeche und UNTER
   dem Text (.held-innen hat z-index 1). */
.saison-an .held::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 38% at 90% 94%, rgba(255,122,24,.10), transparent 70%),
    radial-gradient(34% 28% at 10% 6%,  rgba(155,16,245,.10), transparent 72%);
}