/* =====================================================================
   HSB Simulations · Saisonale Farbschemata und Deko
   ---------------------------------------------------------------------
   Überschreibt ausschließlich Farben und ergänzt Deko über freie
   Pseudo-Elemente. Kein Eingriff in Markup, Aufbau oder Abstände.
   Ohne gesetztes data-season ist die Datei vollständig wirkungslos.

   Einbinden   <link rel="stylesheet" href="/seasonal.css">
               direkt NACH dem <style>-Block der Seite
   Automatik   <script src="/seasonal.js"></script> im <head>
   Von Hand    <html data-season="halloween">   (hat Vorrang)
   Testen      ?season=silvester  an die URL hängen

   Die beiden Seiten werden über ihre Hero-IDs getrennt:
   #home = Hauptseite, #top = VVH-Seite.
   ===================================================================== */

/* ===================== HALLOWEEN ===================== */

/* Hauptseite */
:root[data-season="halloween"]{
  --bg:#130d1c; --card:#221433; --card2:#2b1a3f;
  --accent1:#ff9442; --accent2:#b06bf5;
  --grad:linear-gradient(135deg,#ff9442,#b06bf5);
  --grad-hover:linear-gradient(135deg,#ffab6c,#c28cf8);
  --text2:#e3d2fb;
  --border:rgba(255,148,66,.20);
}
:root[data-season="halloween"] .hero-overlay{
  background:linear-gradient(to bottom,rgba(19,13,28,.40) 0%,rgba(19,13,28,.70) 70%,#130d1c 100%);
}

/* VVH-Seite, hell */
:root[data-season="halloween"]{
  --vvh-teal:#6d28d9; --vvh-teal-dark:#4c1d95; --vvh-teal-soft:#f0e9fe;
  --vvh-bg:#faf7fd; --vvh-ink:#1b1424; --vvh-muted:#635c70;
  --vvh-line:#e2dced; --vvh-warn:#c2410c; --vvh-warn-soft:#fdeee2;
  --np-bg:#f1ecfa; --np-rg:#ddd4ee;
}
/* VVH-Seite, dunkel */
@media (prefers-color-scheme: dark){
  :root[data-season="halloween"]:not([data-theme="light"]){
    --vvh-teal:#a78bfa; --vvh-teal-dark:#c4b5fd; --vvh-teal-soft:#2a1b43;
    --vvh-bg:#130d1c; --vvh-surface:#1f1430; --vvh-ink:#f0e9fb;
    --vvh-text:#d6c9e8; --vvh-muted:#9b8fae; --vvh-line:#352347;
    --vvh-warn:#fb923c; --vvh-warn-soft:#3a220d;
    --on-teal:#1a0f2b; --np-bg:#1b1128; --np-rg:#3a2750;
    --footer-bg:#0c0714; --board-bg:#0c0714; --tag-off-bg:#352347;
  }
}
:root[data-season="halloween"][data-theme="dark"]{
  --vvh-teal:#a78bfa; --vvh-teal-dark:#c4b5fd; --vvh-teal-soft:#2a1b43;
  --vvh-bg:#130d1c; --vvh-surface:#1f1430; --vvh-ink:#f0e9fb;
  --vvh-text:#d6c9e8; --vvh-muted:#9b8fae; --vvh-line:#352347;
  --vvh-warn:#fb923c; --vvh-warn-soft:#3a220d;
  --on-teal:#1a0f2b; --np-bg:#1b1128; --np-rg:#3a2750;
  --footer-bg:#0c0714; --board-bg:#0c0714; --tag-off-bg:#352347;
}
/* VVH-Hero: Verlauf steht in der Seite fest verdrahtet */
:root[data-season="halloween"] #top{ background:#4c1d95; }
:root[data-season="halloween"] #top::after,
:root[data-season="halloween"][data-theme="dark"] #top::after{ background:linear-gradient(100deg,rgba(40,14,88,.97) 0%,rgba(76,29,149,.90) 45%,rgba(76,29,149,.45) 100%); }
@media (prefers-color-scheme: dark){
  :root[data-season="halloween"]:not([data-theme="light"]) #top::after{ background:linear-gradient(100deg,rgba(40,14,88,.97) 0%,rgba(76,29,149,.90) 45%,rgba(76,29,149,.45) 100%); }
}

/* ===================== WINTER & WEIHNACHTEN ===================== */

/* Hauptseite */
:root[data-season="winter"]{
  --bg:#0a1020; --card:#15203a; --card2:#1b2847;
  --accent1:#8ec5ff; --accent2:#ffd27a;
  --grad:linear-gradient(135deg,#8ec5ff,#ffd27a);
  --grad-hover:linear-gradient(135deg,#aed6ff,#ffe0a1);
  --text2:#cfe3ff;
  --border:rgba(142,197,255,.20);
}
:root[data-season="winter"] .hero-overlay{
  background:linear-gradient(to bottom,rgba(10,16,32,.40) 0%,rgba(10,16,32,.70) 70%,#0a1020 100%);
}

/* VVH-Seite, hell */
:root[data-season="winter"]{
  --vvh-teal:#1e5f8c; --vvh-teal-dark:#143f5e; --vvh-teal-soft:#e3eff8;
  --vvh-bg:#f4f8fb; --vvh-ink:#111a22; --vvh-muted:#5c6b78;
  --vvh-line:#d4e0ea; --vvh-warn:#9f1239; --vvh-warn-soft:#fce7ec;
  --np-bg:#e9f0f6; --np-rg:#cfdce6;
}
/* VVH-Seite, dunkel */
@media (prefers-color-scheme: dark){
  :root[data-season="winter"]:not([data-theme="light"]){
    --vvh-teal:#7dd3fc; --vvh-teal-dark:#a5e0ff; --vvh-teal-soft:#0f2b40;
    --vvh-bg:#0a1020; --vvh-surface:#141f33; --vvh-ink:#e7f1fb;
    --vvh-text:#c5d7e8; --vvh-muted:#8ba0b4; --vvh-line:#243349;
    --vvh-warn:#f6c177; --vvh-warn-soft:#33260f;
    --on-teal:#061a2b; --np-bg:#101a2b; --np-rg:#26384f;
    --footer-bg:#070c18; --board-bg:#070c18; --tag-off-bg:#243349;
  }
}
:root[data-season="winter"][data-theme="dark"]{
  --vvh-teal:#7dd3fc; --vvh-teal-dark:#a5e0ff; --vvh-teal-soft:#0f2b40;
  --vvh-bg:#0a1020; --vvh-surface:#141f33; --vvh-ink:#e7f1fb;
  --vvh-text:#c5d7e8; --vvh-muted:#8ba0b4; --vvh-line:#243349;
  --vvh-warn:#f6c177; --vvh-warn-soft:#33260f;
  --on-teal:#061a2b; --np-bg:#101a2b; --np-rg:#26384f;
  --footer-bg:#070c18; --board-bg:#070c18; --tag-off-bg:#243349;
}
/* VVH-Hero: Verlauf steht in der Seite fest verdrahtet */
:root[data-season="winter"] #top{ background:#143f5e; }
:root[data-season="winter"] #top::after,
:root[data-season="winter"][data-theme="dark"] #top::after{ background:linear-gradient(100deg,rgba(9,32,48,.97) 0%,rgba(20,63,94,.90) 45%,rgba(20,63,94,.45) 100%); }
@media (prefers-color-scheme: dark){
  :root[data-season="winter"]:not([data-theme="light"]) #top::after{ background:linear-gradient(100deg,rgba(9,32,48,.97) 0%,rgba(20,63,94,.90) 45%,rgba(20,63,94,.45) 100%); }
}

/* ===================== SILVESTER ===================== */

/* Hauptseite */
:root[data-season="silvester"]{
  --bg:#0b0d1a; --card:#171a2e; --card2:#1d2140;
  --accent1:#ffd166; --accent2:#f472b6;
  --grad:linear-gradient(135deg,#ffd166,#f472b6);
  --grad-hover:linear-gradient(135deg,#ffdf91,#f895c7);
  --text2:#e4e3ff;
  --border:rgba(255,209,102,.20);
}
:root[data-season="silvester"] .hero-overlay{
  background:linear-gradient(to bottom,rgba(11,13,26,.40) 0%,rgba(11,13,26,.70) 70%,#0b0d1a 100%);
}

/* VVH-Seite, hell */
:root[data-season="silvester"]{
  --vvh-teal:#4338ca; --vvh-teal-dark:#312e81; --vvh-teal-soft:#ebeafc;
  --vvh-bg:#f8f8fd; --vvh-ink:#16162a; --vvh-muted:#5f5f78;
  --vvh-line:#e0e0ee; --vvh-warn:#b45309; --vvh-warn-soft:#fef3e2;
  --np-bg:#efeffa; --np-rg:#dadaee;
}
/* VVH-Seite, dunkel */
@media (prefers-color-scheme: dark){
  :root[data-season="silvester"]:not([data-theme="light"]){
    --vvh-teal:#a5b4fc; --vvh-teal-dark:#c7d2fe; --vvh-teal-soft:#23234a;
    --vvh-bg:#0b0d1a; --vvh-surface:#16182c; --vvh-ink:#eceaf9;
    --vvh-text:#c8c9e2; --vvh-muted:#9093ad; --vvh-line:#2b2e4a;
    --vvh-warn:#fbbf5c; --vvh-warn-soft:#342611;
    --on-teal:#141236; --np-bg:#12142a; --np-rg:#2d3156;
    --footer-bg:#070813; --board-bg:#070813; --tag-off-bg:#2b2e4a;
  }
}
:root[data-season="silvester"][data-theme="dark"]{
  --vvh-teal:#a5b4fc; --vvh-teal-dark:#c7d2fe; --vvh-teal-soft:#23234a;
  --vvh-bg:#0b0d1a; --vvh-surface:#16182c; --vvh-ink:#eceaf9;
  --vvh-text:#c8c9e2; --vvh-muted:#9093ad; --vvh-line:#2b2e4a;
  --vvh-warn:#fbbf5c; --vvh-warn-soft:#342611;
  --on-teal:#141236; --np-bg:#12142a; --np-rg:#2d3156;
  --footer-bg:#070813; --board-bg:#070813; --tag-off-bg:#2b2e4a;
}
/* VVH-Hero: Verlauf steht in der Seite fest verdrahtet */
:root[data-season="silvester"] #top{ background:#312e81; }
:root[data-season="silvester"] #top::after,
:root[data-season="silvester"][data-theme="dark"] #top::after{ background:linear-gradient(100deg,rgba(18,16,66,.97) 0%,rgba(49,46,129,.90) 45%,rgba(49,46,129,.45) 100%); }
@media (prefers-color-scheme: dark){
  :root[data-season="silvester"]:not([data-theme="light"]) #top::after{ background:linear-gradient(100deg,rgba(18,16,66,.97) 0%,rgba(49,46,129,.90) 45%,rgba(49,46,129,.45) 100%); }
}

/* ===================== OSTERN ===================== */

/* Hauptseite */
:root[data-season="ostern"]{
  --bg:#101522; --card:#1a2436; --card2:#1f2b40;
  --accent1:#6ee7b7; --accent2:#cbb6fd;
  --grad:linear-gradient(135deg,#6ee7b7,#cbb6fd);
  --grad-hover:linear-gradient(135deg,#92efca,#ddcbfe);
  --text2:#d4e8e0;
  --border:rgba(110,231,183,.20);
}
:root[data-season="ostern"] .hero-overlay{
  background:linear-gradient(to bottom,rgba(16,21,34,.40) 0%,rgba(16,21,34,.70) 70%,#101522 100%);
}

/* VVH-Seite, hell */
:root[data-season="ostern"]{
  --vvh-teal:#15803d; --vvh-teal-dark:#0d5529; --vvh-teal-soft:#e5f5e9;
  --vvh-bg:#f6faf5; --vvh-ink:#131c16; --vvh-muted:#5f6e65;
  --vvh-line:#d8e6da; --vvh-warn:#935c06; --vvh-warn-soft:#fdf4e0;
  --np-bg:#ecf3ec; --np-rg:#d3e2d5;
}
/* VVH-Seite, dunkel */
@media (prefers-color-scheme: dark){
  :root[data-season="ostern"]:not([data-theme="light"]){
    --vvh-teal:#4ade80; --vvh-teal-dark:#86efac; --vvh-teal-soft:#12301f;
    --vvh-bg:#0d1612; --vvh-surface:#15241c; --vvh-ink:#e8f5ec;
    --vvh-text:#c6dccd; --vvh-muted:#8aa494; --vvh-line:#24382b;
    --vvh-warn:#e0b25c; --vvh-warn-soft:#2e240f;
    --on-teal:#06230f; --np-bg:#101d16; --np-rg:#26402e;
    --footer-bg:#070f0b; --board-bg:#070f0b; --tag-off-bg:#24382b;
  }
}
:root[data-season="ostern"][data-theme="dark"]{
  --vvh-teal:#4ade80; --vvh-teal-dark:#86efac; --vvh-teal-soft:#12301f;
  --vvh-bg:#0d1612; --vvh-surface:#15241c; --vvh-ink:#e8f5ec;
  --vvh-text:#c6dccd; --vvh-muted:#8aa494; --vvh-line:#24382b;
  --vvh-warn:#e0b25c; --vvh-warn-soft:#2e240f;
  --on-teal:#06230f; --np-bg:#101d16; --np-rg:#26402e;
  --footer-bg:#070f0b; --board-bg:#070f0b; --tag-off-bg:#24382b;
}
/* VVH-Hero: Verlauf steht in der Seite fest verdrahtet */
:root[data-season="ostern"] #top{ background:#0d5529; }
:root[data-season="ostern"] #top::after,
:root[data-season="ostern"][data-theme="dark"] #top::after{ background:linear-gradient(100deg,rgba(5,44,21,.97) 0%,rgba(13,85,41,.90) 45%,rgba(13,85,41,.45) 100%); }
@media (prefers-color-scheme: dark){
  :root[data-season="ostern"]:not([data-theme="light"]) #top::after{ background:linear-gradient(100deg,rgba(5,44,21,.97) 0%,rgba(13,85,41,.90) 45%,rgba(13,85,41,.45) 100%); }
}

/* =====================================================================
   DEKO
   #home::before  ruhendes Motivmuster      #home::after  Partikel
   Beide liegen über dem Bildverlauf und unter Überschrift und Zahlen.
   Die VVH-Seite bekommt nur das Muster, keine Bewegung.
   ===================================================================== */

:root[data-season] body > nav{ overflow:visible; }
:root[data-season] body > nav::after,
:root[data-season] .vvh-header::after{
  content:""; position:absolute; left:0; right:0; pointer-events:none;
}
:root[data-season] body > nav::after{ bottom:-11px; height:11px; }
:root[data-season] .vvh-header::after{ bottom:-7px; height:7px; opacity:.5; }

:root[data-season] #home::before,
:root[data-season] #home::after,
:root[data-season] #top::before{
  content:""; position:absolute; z-index:1; pointer-events:none;
}
:root[data-season] #home::before,
:root[data-season] #top::before{ inset:0; }

/* Die Motive bleiben am Rand: in der Mitte, wo Überschrift und Text
   stehen, wird das Muster ausgeblendet.                             */
:root[data-season] #home::before{
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,transparent 0%,transparent 46%,#000 96%);
          mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,transparent 0%,transparent 46%,#000 96%);
}
:root[data-season] #top::before{
  opacity:.6;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 44%,#000 88%);
          mask-image:linear-gradient(100deg,transparent 0%,transparent 44%,#000 88%);
}
:root[data-season] #home::after{ inset:-20% 0 0 0; }

/* Halloween */
:root[data-season="halloween"] body > nav::after{
  background-image:radial-gradient(circle at 11px 0,#ff9442 0 7px,transparent 7.5px);
  background-size:26px 11px;
  background-repeat:repeat-x; opacity:.55;
}
:root[data-season="halloween"] .vvh-header::after{
  background-image:radial-gradient(circle at 9px 0,#6d28d9 0 5px,transparent 5.5px); background-size:22px 7px; background-repeat:repeat-x;
}
:root[data-season="halloween"] #home::before,
:root[data-season="halloween"] #top::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='330' viewBox='0 0 330 330'%3E%3Cg fill='%23ff9442' fill-opacity='.11'%3E%3Cg transform='translate(18 34) scale(1.15)'%3E%3Cellipse cx='50' cy='33' rx='4.5' ry='7'/%3E%3Cpath d='M46 20l-2-6-3 5zM54 20l2-6 3 5z'/%3E%3Cpath d='M46 27C40 20 30 17 20 19c4 2 6 5 6 9-4-1-8 0-11 3 5 0 8 2 10 6 1.5 3 1.8 6 1 9 3-4 7-6 12-5 3.5.7 6 2.6 8 5.4z'/%3E%3Cpath d='M54 27C60 20 70 17 80 19c-4 2-6 5-6 9 4-1 8 0 11 3-5 0-8 2-10 6-1.5 3-1.8 6-1 9-3-4-7-6-12-5-3.5.7-6 2.6-8 5.4z'/%3E%3C/g%3E%3Cg transform='translate(182 196) scale(0.78)'%3E%3Cellipse cx='50' cy='33' rx='4.5' ry='7'/%3E%3Cpath d='M46 20l-2-6-3 5zM54 20l2-6 3 5z'/%3E%3Cpath d='M46 27C40 20 30 17 20 19c4 2 6 5 6 9-4-1-8 0-11 3 5 0 8 2 10 6 1.5 3 1.8 6 1 9 3-4 7-6 12-5 3.5.7 6 2.6 8 5.4z'/%3E%3Cpath d='M54 27C60 20 70 17 80 19c-4 2-6 5-6 9 4-1 8 0 11 3-5 0-8 2-10 6-1.5 3-1.8 6-1 9-3-4-7-6-12-5-3.5.7-6 2.6-8 5.4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:330px 330px; background-repeat:repeat;
}
:root[data-season="halloween"] #home::after{
  background-image:radial-gradient(2.5px 2.5px at 60px 40px,rgba(255,148,66,.55),transparent),radial-gradient(2px 2px at 220px 160px,rgba(176,107,245,.5),transparent),radial-gradient(1.5px 1.5px at 380px 90px,rgba(255,148,66,.4),transparent);
  background-size:460px 460px,460px 460px,300px 300px; background-repeat:repeat;
  animation:hsb-fall 34s linear infinite;
}

/* Winter & Weihnachten */
:root[data-season="winter"] body > nav::after{
  background-image:radial-gradient(circle at 15px 7px,#ffd27a 0 3.5px,transparent 4px),radial-gradient(circle at 45px 7px,#8ec5ff 0 3.5px,transparent 4px),linear-gradient(#8ec5ff,#8ec5ff);
  background-size:60px 11px,60px 11px,100% 1px;
  background-position:0 0,0 0,0 2px;
  background-repeat:repeat-x; opacity:.8;
}
:root[data-season="winter"] .vvh-header::after{
  background-image:radial-gradient(circle at 13px 4px,#1e5f8c 0 2.5px,transparent 3px),radial-gradient(circle at 39px 4px,#9f1239 0 2.5px,transparent 3px); background-size:52px 7px; background-repeat:repeat-x;
}
:root[data-season="winter"] #home::before,
:root[data-season="winter"] #top::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg stroke='%238ec5ff' stroke-opacity='.13' stroke-width='2.4' stroke-linecap='round' fill='none'%3E%3Cg transform='translate(72 78) scale(1.25)'%3E%3Cpath d='M0-26V26M-22.5-13L22.5 13M22.5-13L-22.5 13'/%3E%3Cpath d='M0-15l-7-7M0-15l7-7M0 15l-7 7M0 15l7 7'/%3E%3Cpath d='M-13-7.5l-9.5-2.5M-13-7.5l-2.5-9.5M13 7.5l9.5 2.5M13 7.5l2.5 9.5'/%3E%3Cpath d='M13-7.5l9.5-2.5M13-7.5l2.5-9.5M-13 7.5l-9.5 2.5M-13 7.5l-2.5 9.5'/%3E%3C/g%3E%3Cg transform='translate(256 250) scale(0.85)'%3E%3Cpath d='M0-26V26M-22.5-13L22.5 13M22.5-13L-22.5 13'/%3E%3Cpath d='M0-15l-7-7M0-15l7-7M0 15l-7 7M0 15l7 7'/%3E%3Cpath d='M-13-7.5l-9.5-2.5M-13-7.5l-2.5-9.5M13 7.5l9.5 2.5M13 7.5l2.5 9.5'/%3E%3Cpath d='M13-7.5l9.5-2.5M13-7.5l2.5-9.5M-13 7.5l-9.5 2.5M-13 7.5l-2.5 9.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:360px 360px; background-repeat:repeat;
}
:root[data-season="winter"] #home::after{
  background-image:radial-gradient(2.5px 2.5px at 50px 60px,rgba(255,255,255,.75),transparent),radial-gradient(2px 2px at 250px 180px,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 120px 90px,rgba(226,240,255,.5),transparent);
  background-size:420px 420px,420px 420px,260px 260px; background-repeat:repeat;
  animation:hsb-fall 24s linear infinite;
}

/* Silvester */
:root[data-season="silvester"] body > nav::after{
  background-image:radial-gradient(circle at 14px 5px,#ffd166 0 3px,transparent 3.5px),radial-gradient(circle at 38px 6px,#f472b6 0 2.5px,transparent 3px);
  background-size:52px 11px;
  background-repeat:repeat-x; opacity:.75;
}
:root[data-season="silvester"] .vvh-header::after{
  background-image:radial-gradient(circle at 12px 4px,#4338ca 0 2.5px,transparent 3px),radial-gradient(circle at 36px 4px,#b45309 0 2.5px,transparent 3px); background-size:48px 7px; background-repeat:repeat-x;
}
:root[data-season="silvester"] #home::before,
:root[data-season="silvester"] #top::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380' viewBox='0 0 380 380'%3E%3Cg stroke-linecap='round' fill='none' stroke-width='2.6'%3E%3Cg stroke='%23ffd166' stroke-opacity='.14' color='%23ffd166'%3E%3Cg transform='translate(82 86) scale(1.25)'%3E%3Cpath d='M0-30V-11M0 11v19M-30 0h19M11 0h19'/%3E%3Cpath d='M-21-21l9.5 9.5M11.5 11.5l9.5 9.5M21-21l-9.5 9.5M-11.5 11.5l-9.5 9.5'/%3E%3Ccircle cx='0' cy='0' r='2.6' fill='currentColor' stroke='none'/%3E%3C/g%3E%3C/g%3E%3Cg stroke='%23f472b6' stroke-opacity='.12' color='%23f472b6'%3E%3Cg transform='translate(272 262) scale(0.85)'%3E%3Cpath d='M0-30V-11M0 11v19M-30 0h19M11 0h19'/%3E%3Cpath d='M-21-21l9.5 9.5M11.5 11.5l9.5 9.5M21-21l-9.5 9.5M-11.5 11.5l-9.5 9.5'/%3E%3Ccircle cx='0' cy='0' r='2.6' fill='currentColor' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:380px 380px; background-repeat:repeat;
}
:root[data-season="silvester"] #home::after{
  background-image:radial-gradient(2.5px 2.5px at 70px 70px,rgba(255,209,102,.6),transparent),radial-gradient(2px 2px at 230px 190px,rgba(244,114,182,.55),transparent),radial-gradient(1.5px 1.5px at 350px 110px,rgba(255,209,102,.45),transparent);
  background-size:480px 480px,480px 480px,320px 320px; background-repeat:repeat;
  animation:hsb-rise 28s linear infinite;
}

/* Ostern */
:root[data-season="ostern"] body > nav::after{
  background-image:radial-gradient(circle at 13px 4px,#6ee7b7 0 4px,transparent 4.5px),radial-gradient(circle at 39px 4px,#cbb6fd 0 4px,transparent 4.5px);
  background-size:52px 11px;
  background-repeat:repeat-x; opacity:.6;
}
:root[data-season="ostern"] .vvh-header::after{
  background-image:radial-gradient(circle at 12px 4px,#15803d 0 2.5px,transparent 3px),radial-gradient(circle at 36px 4px,#935c06 0 2.5px,transparent 3px); background-size:48px 7px; background-repeat:repeat-x;
}
:root[data-season="ostern"] #home::before,
:root[data-season="ostern"] #top::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg transform='translate(74 80) scale(1.15)'%3E%3Cpath d='M0-32c13 0 22 16 22 30S13 24 0 24-22 12-22-2 -13-32 0-32Z' fill='%236ee7b7' fill-opacity='.11'/%3E%3Cpath d='M-20 2h40M-20 13h40' stroke='%23cbb6fd' stroke-opacity='.13' stroke-width='4' fill='none'/%3E%3C/g%3E%3Cg transform='translate(244 238) scale(0.8)'%3E%3Cpath d='M0-32c13 0 22 16 22 30S13 24 0 24-22 12-22-2 -13-32 0-32Z' fill='%23cbb6fd' fill-opacity='.11'/%3E%3Cpath d='M-20 2h40M-20 13h40' stroke='%236ee7b7' stroke-opacity='.13' stroke-width='4' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size:340px 340px; background-repeat:repeat;
}
:root[data-season="ostern"] #home::after{
  background-image:radial-gradient(2.5px 2.5px at 70px 50px,rgba(110,231,183,.5),transparent),radial-gradient(2px 2px at 240px 200px,rgba(203,182,253,.5),transparent),radial-gradient(1.5px 1.5px at 150px 120px,rgba(110,231,183,.35),transparent);
  background-size:440px 440px,440px 440px,280px 280px; background-repeat:repeat;
  animation:hsb-fall 40s linear infinite;
}

@keyframes hsb-fall{
  from{ background-position:0 0, 160px 0, 80px 0; }
  to  { background-position:0 920px, 160px 920px, 80px 560px; }
}
@keyframes hsb-rise{
  from{ background-position:0 0, 160px 0, 80px 0; }
  to  { background-position:0 -960px, 160px -960px, 80px -640px; }
}
@media (prefers-reduced-motion: reduce){
  :root[data-season] #home::after{ animation:none; }
}