/* ===== Jupi-Startseite: Jahreszeiten- und Feiertags-Themes =====
   Wird NUR von index.php geladen (nach css/jupi.css). Die Automatik setzt
   <html data-saison="weihnachten|winter|fasching|ostern|fruehling|sommer|
   halloween|herbst">; alle Regeln haengen an diesem Attribut und an
   body.jupi_startseite. Spielseiten bleiben unberuehrt.

   Die Palette je Theme steht als CSS-Variablen auf <html>. Dunkelmodus
   (html[data-theme="dark"]) bekommt eigene, gedaempfte Werte; Karten,
   Filterleiste und Papiere bleiben wie bisher hell bzw. dunkel. */

/* ---------- 1. Farben: hell ---------- */
html[data-saison="weihnachten"] {
  --sai-akzent: #1b5e20;
  --sai-akzent-2: #b8860b;
  --sai-intro: #14452a;
  --sai-leise: #55634a;
  --sai-bg-base: #f3f7ef;
  --sai-bg-glow1: #f7e8d2;
  --sai-bg-glow2: #dcecd9;
  --sai-header-a: #123f22;
  --sai-header-b: #2e6b34;
  --sai-header-c: #8a6a2a;
  --sai-rand: #d8c9a3;




  --sai-deko: #2e6b34;
}
html[data-saison="winter"] {
  --sai-akzent: #1f5f8b;
  --sai-akzent-2: #7fb8de;
  --sai-intro: #123f5c;
  --sai-leise: #4f6b7d;
  --sai-bg-base: #eef6fb;
  --sai-bg-glow1: #d9ecf9;
  --sai-bg-glow2: #e8f1f7;
  --sai-header-a: #143d5c;
  --sai-header-b: #236a99;
  --sai-header-c: #3d7b9f;
  --sai-rand: #bfd8e8;




  --sai-deko: #2b6f9e;
}
html[data-saison="fasching"] {
  --sai-akzent: #6a1b9a;
  --sai-akzent-2: #d81b60;
  --sai-intro: #4a148c;
  --sai-leise: #6d4a7a;
  --sai-bg-base: #faf3fb;
  --sai-bg-glow1: #efdcf7;
  --sai-bg-glow2: #fbe0ea;
  --sai-header-a: #3c0a5e;
  --sai-header-b: #7b1fa2;
  --sai-header-c: #c2185b;
  --sai-rand: #e3bfd6;




  --sai-deko: #8e24aa;
}
html[data-saison="ostern"] {
  --sai-akzent: #2e7d32;
  --sai-akzent-2: #f9a825;
  --sai-intro: #1b5e20;
  --sai-leise: #5c6e46;
  --sai-bg-base: #f5faef;
  --sai-bg-glow1: #e6f4d4;
  --sai-bg-glow2: #fdf0c9;
  --sai-header-a: #1b4d20;
  --sai-header-b: #3f7d2d;
  --sai-header-c: #5f7d22;
  --sai-rand: #d6dfb8;




  --sai-deko: #4f8a32;
}
html[data-saison="halloween"] {
  --sai-akzent: #b23c00;
  --sai-akzent-2: #6a1b9a;
  --sai-intro: #5a2a0b;
  --sai-leise: #6e4d31;
  --sai-bg-base: #f7f0e7;
  --sai-bg-glow1: #f6ddc2;
  --sai-bg-glow2: #e9d9ee;
  --sai-header-a: #25122e;
  --sai-header-b: #4b2459;
  --sai-header-c: #b24a0f;
  --sai-rand: #d9b98d;




  --sai-deko: #9a4d00;
}
html[data-saison="fruehling"] {
  --sai-akzent: #2e7d32;
  --sai-akzent-2: #e91e63;
  --sai-intro: #1b5e20;
  --sai-leise: #56704e;
  --sai-bg-base: #f1faf0;
  --sai-bg-glow1: #dff3d6;
  --sai-bg-glow2: #fde4ee;
  --sai-header-a: #1d4f22;
  --sai-header-b: #357a34;
  --sai-header-c: #3f7730;
  --sai-rand: #cbe3c3;




  --sai-deko: #3d8b3b;
}
html[data-saison="sommer"] {
  --sai-akzent: #0277bd;
  --sai-akzent-2: #f9a825;
  --sai-intro: #01579b;
  --sai-leise: #4d6b79;
  --sai-bg-base: #f2faff;
  --sai-bg-glow1: #d7effd;
  --sai-bg-glow2: #fff2c5;
  --sai-header-a: #014f7a;
  --sai-header-b: #0277bd;
  --sai-header-c: #1f7f74;
  --sai-rand: #b9ddec;




  --sai-deko: #0288d1;
}
html[data-saison="herbst"] {
  --sai-akzent: #a64b00;
  --sai-akzent-2: #6d4c41;
  --sai-intro: #6d3b12;
  --sai-leise: #6b543c;
  --sai-bg-base: #faf3e9;
  --sai-bg-glow1: #f6e1c4;
  --sai-bg-glow2: #eadbc5;
  --sai-header-a: #4a2c1a;
  --sai-header-b: #7a421c;
  --sai-header-c: #a85c18;
  --sai-rand: #ddc7a5;




  --sai-deko: #a0522d;
}

/* ---------- 2. Farben: dunkel ---------- */
html[data-theme="dark"][data-saison="weihnachten"] {
  --sai-akzent: #ffd54f;
  --sai-akzent-2: #ef9a9a;
  --sai-intro: #ffd54f;
  --sai-leise: #c0c9b3;
  --sai-bg-base: #0f1410;
  --sai-bg-glow1: #1c2a1b;
  --sai-bg-glow2: #2a2112;
  --sai-header-a: #101b12;
  --sai-header-b: #1f3d24;
  --sai-header-c: #5a4a1d;
  --sai-rand: #4a5a3a;




  --sai-deko: #8fbf8f;
}
html[data-theme="dark"][data-saison="winter"] {
  --sai-akzent: #90caf9;
  --sai-akzent-2: #b3e5fc;
  --sai-intro: #90caf9;
  --sai-leise: #b0c4d4;
  --sai-bg-base: #0d141b;
  --sai-bg-glow1: #16242f;
  --sai-bg-glow2: #1a2632;
  --sai-header-a: #0e1a24;
  --sai-header-b: #1b3a4f;
  --sai-header-c: #2b5d7a;
  --sai-rand: #34506a;




  --sai-deko: #64b5f6;
}
html[data-theme="dark"][data-saison="fasching"] {
  --sai-akzent: #f48fb1;
  --sai-akzent-2: #ce93d8;
  --sai-intro: #f48fb1;
  --sai-leise: #cdb7d5;
  --sai-bg-base: #160f1d;
  --sai-bg-glow1: #24162e;
  --sai-bg-glow2: #2a1420;
  --sai-header-a: #1b0d26;
  --sai-header-b: #3b1650;
  --sai-header-c: #651c3c;
  --sai-rand: #5a3a66;




  --sai-deko: #ce93d8;
}
html[data-theme="dark"][data-saison="ostern"] {
  --sai-akzent: #c5e1a5;
  --sai-akzent-2: #ffe082;
  --sai-intro: #c5e1a5;
  --sai-leise: #c3cfb4;
  --sai-bg-base: #0f150d;
  --sai-bg-glow1: #1a2414;
  --sai-bg-glow2: #261f10;
  --sai-header-a: #17230f;
  --sai-header-b: #26451a;
  --sai-header-c: #4c5a1c;
  --sai-rand: #4a5a35;




  --sai-deko: #aed581;
}
html[data-theme="dark"][data-saison="halloween"] {
  --sai-akzent: #ffb74d;
  --sai-akzent-2: #ce93d8;
  --sai-intro: #ffb74d;
  --sai-leise: #d0b59f;
  --sai-bg-base: #140f18;
  --sai-bg-glow1: #2a1820;
  --sai-bg-glow2: #231426;
  --sai-header-a: #1a0f20;
  --sai-header-b: #3a1a33;
  --sai-header-c: #652d0d;
  --sai-rand: #5a3e2e;




  --sai-deko: #ff8a65;
}
html[data-theme="dark"][data-saison="fruehling"] {
  --sai-akzent: #a5d6a7;
  --sai-akzent-2: #f48fb1;
  --sai-intro: #a5d6a7;
  --sai-leise: #bfcfb7;
  --sai-bg-base: #0e150e;
  --sai-bg-glow1: #182417;
  --sai-bg-glow2: #241722;
  --sai-header-a: #12260f;
  --sai-header-b: #22501b;
  --sai-header-c: #3a6a2a;
  --sai-rand: #3f5c38;




  --sai-deko: #81c784;
}
html[data-theme="dark"][data-saison="sommer"] {
  --sai-akzent: #81d4fa;
  --sai-akzent-2: #ffe082;
  --sai-intro: #81d4fa;
  --sai-leise: #b4cedd;
  --sai-bg-base: #0b141b;
  --sai-bg-glow1: #12242f;
  --sai-bg-glow2: #26210f;
  --sai-header-a: #06283d;
  --sai-header-b: #0b4f6c;
  --sai-header-c: #145c58;
  --sai-rand: #2f5364;




  --sai-deko: #4fc3f7;
}
html[data-theme="dark"][data-saison="herbst"] {
  --sai-akzent: #ffb74d;
  --sai-akzent-2: #ffd54f;
  --sai-intro: #ffcc80;
  --sai-leise: #d0b898;
  --sai-bg-base: #17110b;
  --sai-bg-glow1: #2a1c10;
  --sai-bg-glow2: #241b12;
  --sai-header-a: #2a170d;
  --sai-header-b: #522a12;
  --sai-header-c: #74380c;
  --sai-rand: #5a442c;




  --sai-deko: #ff8a65;
}

/* ---------- 3. Seite, Kopfzeile, Karten ---------- */
html[data-saison] body.jupi.jupi_startseite {
  background-color: var(--sai-bg-base);
  background-image:
    radial-gradient(75rem 42rem at 8% -12%, var(--sai-bg-glow1) 0%, transparent 62%),
    radial-gradient(60rem 36rem at 100% 0%, var(--sai-bg-glow2) 0%, transparent 58%);
  background-repeat: no-repeat;
}
html[data-saison] body.jupi.jupi_startseite .jupi_header {
  background: linear-gradient(135deg,
    var(--sai-header-a) 0%, var(--sai-header-b) 55%, var(--sai-header-c) 100%);
}
/* Die Startseite soll ihre Saisonfarbe zeigen: die weisse Flaeche der
   Hauptspalte wird durchsichtig, Karten und Filterleiste bleiben deckend. */
html[data-saison] body.jupi.jupi_startseite .jupi_container > .jupi_main {
  background: transparent;
}
html[data-saison] body.jupi.jupi_startseite .jupi_container {
  position: relative;
  z-index: 1;
}
html[data-saison] body.jupi.jupi_startseite .jupi_intro h1,
html[data-saison] body.jupi.jupi_startseite .jupi_intro h2,
html[data-saison] body.jupi.jupi_startseite .jupi_tagesauswahl h2,
html[data-saison] body.jupi.jupi_startseite .jupi_favoriten h2,
html[data-saison] body.jupi.jupi_startseite .jupi_lab_text strong {
  color: var(--sai-intro);
}
html[data-saison] body.jupi.jupi_startseite .jupi_intro p,
html[data-saison] body.jupi.jupi_startseite .jupi_tages_datum {
  color: var(--sai-leise);
}
html[data-saison] body.jupi.jupi_startseite .jupi_game_card::before {
  background: linear-gradient(90deg, var(--sai-akzent), var(--sai-akzent-2));
  opacity: .35;
}
html[data-saison] body.jupi.jupi_startseite .jupi_game_card:hover::before {
  opacity: 1;
}
html[data-saison] body.jupi.jupi_startseite .jupi_game_card:hover {
  border-color: var(--sai-akzent);
}
html[data-saison] body.jupi.jupi_startseite .jupi_game_card .card_play,
html[data-saison] body.jupi.jupi_startseite .jupi_game_card .card_kompetenz strong {
  color: var(--sai-akzent);
}
html[data-saison] body.jupi.jupi_startseite .jupi_tages_grid .jupi_game_card {
  border-color: var(--sai-akzent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .10);
}
html[data-saison] body.jupi.jupi_startseite .jupi_fav_grid .jupi_game_card {
  border-color: var(--sai-akzent-2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
html[data-saison] body.jupi.jupi_startseite .jupi_filter {
  border: 1px solid var(--sai-rand);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
html[data-saison] body.jupi.jupi_startseite .jupi_lab_link {
  border-color: var(--sai-rand);
}
html[data-saison] body.jupi.jupi_startseite .jupi_footer {
  border-top-color: var(--sai-rand);
}

/* ---------- 4. Saison-Symbole ---------- */
/* Sprite unsichtbar, aber im DOM verfuegbar (display:none wuerde <use> in
   manchen Browsern die Formen nehmen). */
.jupi_saison_sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- 5. Schwebende Deko ---------- */
.jupi_saison_deko {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.jupi_saison_teil {
  position: absolute;
  /* Platz für Drehung und die seitliche Bewegung am Fensterrand. */
  left: clamp(28px, var(--x), calc(100% - var(--s) - 28px));
  top: var(--y);
  width: var(--s);
  height: var(--s);
  color: var(--sai-deko);
  opacity: var(--o);
  transform: rotate(var(--r));
  animation: jupi_saison_wehen var(--d) ease-in-out infinite;
  animation-delay: var(--verzug);
}
@keyframes jupi_saison_wehen {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(var(--r));
  }
  50% {
    transform: translate3d(var(--dx), var(--dy), 0) rotate(calc(var(--r) + 14deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .jupi_saison_teil { animation: none; }
}

/* ---------- 6. Schmale Fenster ---------- */
@media (max-width: 47.99rem) {
  .jupi_saison_teil:nth-child(n+9) {
    display: none;
  }
}

/* ---------- 7. Druck ---------- */
@media print {
  .jupi_saison_deko {
    display: none;
  }
}