/* ==========================================================================
   Spuk — Halloween-Aufsatz (Farben und Buehne)
   --------------------------------------------------------------------------
   Alles haengt an einem einzigen Schalter: dem Attribut data-spuk="an" am
   <html>. Gesetzt wird es von spuk.js. Solange es fehlt, aendert diese
   Datei nichts — sie darf also das ganze Jahr eingebunden bleiben, ohne
   dass im Juli Fledermaeuse fliegen.

   Hier steht nur, was sich NICHT bewegt: Palette, Buehne, die beiden
   Spinnweben in den Ecken. Alles Bewegte (Nebel, Glut, Fledermaeuse,
   Blitz, Spinne) wird in spuk.js auf eine Leinwand gezeichnet — mit
   Keyframes waere davon nichts moeglich gewesen, weil die Tiere selbst
   steuern und die Spinne auf den Mauszeiger reagiert.

   Aufbau:
     1. Palette
     2. Buehne (Leinwand, Blitzflaeche, Schein, Mond, Spinnweben)
     3. Ruecksichten (reduzierte Bewegung, Druck)
     4. Farbtoene der Seite  <- der einzige Teil, der pro Seite anders ist
   ========================================================================== */

/* == 1. Palette ========================================================== */

html[data-spuk="an"] {
  --spuk-kuerbis: #ff7a18;   /* Kerzenlicht, Hauptakzent */
  --spuk-glut:    #ffb347;   /* heller Rand desselben Lichts */
  --spuk-hexe:    #a06cff;   /* kaltes Gegenlicht */
  --spuk-gift:    #7ee63b;   /* sparsam, nur fuer "lebt noch" */
  --spuk-nacht:   #0a0710;
}

/* == 2. Buehne ===========================================================
   spuk.js haengt genau ein <div class="spuk"> in den <body>. Die Ebene
   liegt fest im Fenster, faengt keine Mausereignisse ab und ist fuer
   Screenreader unsichtbar. --spuk-z laesst sich pro Seite setzen, damit
   die Kulisse ueber dem Hintergrund, aber unter der Bedienung liegt.
   ------------------------------------------------------------------------ */

.spuk {
  position: fixed;
  inset: 0;
  z-index: var(--spuk-z, 5);
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}

.spuk-canvas { position: absolute; inset: 0; display: block }

/* Der Blitz ist bewusst eine eigene Flaeche und nicht auf der Leinwand:
   so deckt er auch die Seite darunter mit auf, statt nur die Kulisse. */
.spuk-blitz {
  position: absolute;
  inset: 0;
  background: #cfd8ff;
  opacity: 0;
  mix-blend-mode: screen;
}

/* --- Kerzenschein ------------------------------------------------------
   Ein warmer Schein von oben, der unregelmaessig atmet. Die Stufen sind
   absichtlich ungleich verteilt — eine saubere Sinuskurve sieht nach
   Pulsieren aus, nicht nach Flamme. */
.spuk-glut {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 0%,
      rgba(255, 138, 43, .20) 0%,
      rgba(255, 110, 20, .10) 38%,
      transparent 72%);
  animation: spuk-kerze 5.5s ease-in-out infinite;
}
@keyframes spuk-kerze {
  0%, 100% { opacity: .85 }
  12% { opacity: 1 }   21% { opacity: .72 }  30% { opacity: .96 }
  44% { opacity: .80 } 58% { opacity: 1 }    71% { opacity: .78 }
  86% { opacity: .93 }
}

/* --- Mond --------------------------------------------------------------- */
.spuk-mond {
  position: absolute;
  top: 30px;
  right: 9%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%,
      #fff7e6 0%, #ffeecb 50%, #f7d79c 70%, #ecc78a 77%, transparent 78%);
  box-shadow: 0 0 90px 30px rgba(255, 205, 140, .12);
  opacity: .5;
}

/* --- Spinnweben in den oberen Ecken ------------------------------------
   Von Hand gezeichnet und als data-URI eingebettet: keine zweite Anfrage,
   keine fremde Lizenz, und nichts, woran sich eine strenge CSP stoert. */
.spuk-netz {
  position: absolute;
  top: 0;
  width: min(260px, 26vw);
  aspect-ratio: 1;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M0 0L244.8 0M0 0L232.8 75.6M0 0L198 143.9M0 0L143.9 198M0 0L75.6 232.8M0 0L0 244.8M58 0Q49.3 7.8 55.2 17.9Q44.4 22.6 46.9 34.1Q35.3 35.3 34.1 46.9Q22.6 44.4 17.9 55.2Q7.8 49.3 0 58M100 0Q84.9 13.5 95.1 30.9Q76.6 39 80.9 58.8Q60.8 60.8 58.8 80.9Q39 76.6 30.9 95.1Q13.5 84.9 0 100M142 0Q120.6 19.1 135.1 43.9Q108.8 55.4 114.9 83.5Q86.4 86.4 83.5 114.9Q55.4 108.8 43.9 135.1Q19.1 120.6 0 142M184 0Q156.3 24.8 175 56.9Q141 71.8 148.9 108.2Q111.9 111.9 108.2 148.9Q71.8 141 56.9 175Q24.8 156.3 0 184M226 0Q192 30.4 214.9 69.8Q173.2 88.2 182.8 132.8Q137.4 137.4 132.8 182.8Q88.2 173.2 69.8 214.9Q30.4 192 0 226' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .26;
  filter: drop-shadow(0 0 6px rgba(255, 138, 43, .22));
}
.spuk-netz--l { left: 0 }
.spuk-netz--r { right: 0; transform: scaleX(-1) }

/* == 3. Ruecksichten =====================================================
   Wer im Betriebssystem weniger Bewegung verlangt hat, bekommt die Kulisse
   als Standbild: spuk.js zeichnet dann genau ein Bild und haelt an, der
   Blitz bleibt ganz aus. Gedruckt wird nichts davon. */

@media (prefers-reduced-motion: reduce) {
  .spuk-glut { animation: none }
  .spuk-blitz { display: none }
}
@media print {
  .spuk { display: none !important }
}

/* == 4. Farbtoene: ridebetter ============================================
   Die Seite ist ohnehin dunkel; der Aufsatz dreht die Grundtoene von
   Stahlblau nach Nachtviolett und tauscht den Akzent aus.

   Was ausdruecklich NICHT angefasst wird: --head, --cross und --tail. Das
   sind die drei Windfarben (Gegen-, Seiten-, Rueckenwind), also Bedeutung
   und nicht Geschmack. Genau deshalb ist der Halloween-Akzent hier violett
   statt orange: Orange ist auf dieser Seite schon vergeben (--cross,
   Seitenwind), und zwei Dinge in derselben Farbe waeren eine Falle.
   ------------------------------------------------------------------------ */

html[data-spuk="an"] {
  /* Die Karte liegt auf z 1-3, die Bedienfelder auf z 6. Dazwischen. */
  --spuk-z: 5;

  --bg:        #0a0710;
  --panel:     rgba(22, 15, 31, .82);
  --panel-2:   rgba(33, 23, 45, .74);
  --line:      rgba(255, 170, 90, .13);
  --line-2:    rgba(255, 170, 90, .24);
  --text:      #f3ebf8;
  --muted:     #b6a1c6;
  --dim:       #7d6792;
  --accent:    #b07cff;
  --accent-dk: #2f1c50;
}

/* Diese beiden Stellen tragen ihre Farbe fest im Regelwerk, nicht als
   Token — sie muessen einzeln nachgezogen werden, sonst bleibt ein
   blaustichiger Rand um eine violette Seite. */
html[data-spuk="an"] #vignette {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(8, 5, 14, .58) 100%),
    linear-gradient(180deg, rgba(8, 5, 14, .78) 0%, transparent 22%,
                    transparent 62%, rgba(8, 5, 14, .88) 100%);
}
html[data-spuk="an"] .maplibregl-ctrl-attrib {
  background: rgba(12, 8, 18, .78) !important;
}

/* Drei Stellen tragen ihr Cyan fest im Regelwerk statt als Token. Die
   Haupttaste wird kuerbisfarben — das ist die eine Stelle, an der Orange
   auf dieser Seite unmissverstaendlich ist: eine grosse gefuellte Taste
   verwechselt niemand mit einem Windpunkt in der Legende. */
html[data-spuk="an"] .btn--primary {
  background: linear-gradient(180deg, #ffa348, #ef7318);
  color: #2a1103;
  box-shadow: 0 6px 22px rgba(239, 115, 24, .32);
}
html[data-spuk="an"] .btn--primary:hover {
  background: linear-gradient(180deg, #ffb96b, #ff8a2b);
}
html[data-spuk="an"] .btn--ghost.is-on {
  background: rgba(176, 124, 255, .18);
  border-color: rgba(176, 124, 255, .5);
}

/* Die Windfaeden auf #wind-canvas werden in app.js gezeichnet, nicht in
   CSS. app.js liest diese Farbe beim ersten Bild aus und faellt ohne den
   Aufsatz auf sein gewohntes 135,212,255 zurueck. Im Spuk weht der Wind
   damit als Funkenflug statt als hellblauer Strich. */
html[data-spuk="an"] { --wind-strich: 255,150,60 }

/* --- Buehne: Erntenacht --------------------------------------------------
   Warmes Wetterleuchten statt kaltem Gewitterblitz — ueber einer Karte im
   Abendlicht liest sich Blaeuliches wie ein Anzeigefehler. */
html[data-spuk="an"] .spuk-blitz { background: #ffe9cd }