/* Weihnachtliche Stimmung – NUR Testseite (Tobias, 21.09.2026).
   Idee „Winterabend in Leipzig, drinnen brennt Licht": dieselben Farben, Texte, Funktionen und dieselbe
   Anordnung wie die Live-Seite. Alles hier ist Zierde ohne Inhalt (pointer-events:none, kein Text),
   verschiebt nichts und laesst sich entfernen, indem man die eine <link>-Zeile in index.html loescht.
   Farben nur aus der UniverSaH-Palette: Blau = Nachthimmel, --himmel/Weiss = Schnee und Sternenlicht,
   --papier = warmes Licht der Lichterkette. Bewegung ruhig und langsam; bei „weniger Bewegung" steht alles still. */

/* Inhalt liegt immer ueber der Zierde */
#oben .innen, #programm .innen, #anfrage .innen { position: relative; z-index: 2; }
#anfrage { overflow: hidden; }   /* der Schnee beginnt oberhalb und wird am Abschnitt abgeschnitten */

/* ---------- 1  Leiser Schnee im Einstieg und bei der Anfrage (Anfang und Ende der Seite) ----------
   Zwei Kachelgroessen (200 und 300 px) ueberlagert: das Muster wiederholt sich erst nach 600 px und
   wirkt dadurch zufaellig. Bewegt wird die ganze Ebene per transform (guenstig fuer Handys). */
#oben::before, #anfrage::before {
  content: ""; position: absolute; left: 0; right: 0; top: -600px; height: calc(100% + 600px);
  pointer-events: none; z-index: 0; opacity: .6;
  background-image:
    radial-gradient(circle at 23px 31px,   rgba(255,255,255,.95) 0 1.6px, rgba(255,255,255,0) 2.4px),
    radial-gradient(circle at 131px 97px,  rgba(255,255,255,.70) 0 1.1px, rgba(255,255,255,0) 1.9px),
    radial-gradient(circle at 78px 163px,  rgba(142,203,255,.85) 0 1.9px, rgba(142,203,255,0) 2.8px),
    radial-gradient(circle at 211px 52px,  rgba(255,255,255,.60) 0 2.3px, rgba(255,255,255,0) 3.3px),
    radial-gradient(circle at 47px 139px,  rgba(255,255,255,.85) 0 1.3px, rgba(255,255,255,0) 2.1px),
    radial-gradient(circle at 262px 251px, rgba(142,203,255,.70) 0 1.7px, rgba(142,203,255,0) 2.6px);
  background-size: 200px 200px, 200px 200px, 200px 200px, 300px 300px, 300px 300px, 300px 300px;
  animation: wh-schnee 64s linear infinite;
}
#anfrage::before { opacity: .42; animation-duration: 80s; }
@keyframes wh-schnee { to { transform: translateY(600px); } }

/* ---------- 2  Lichterkette oben im Einstieg und bei der Anfrage ----------
   Tief durchhaengende Boegen (320 px, 5 Lampen) wie eine echte Lichterkette, Lampen in warmem Papierweiss und Himmelblau; sie „atmen" langsam. */
#oben::after, #anfrage::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px;
  pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='64' viewBox='0 0 320 64'%3E%3Cdefs%3E%3CradialGradient id='w'%3E%3Cstop offset='0' stop-color='%23F4F2EE' stop-opacity='1'/%3E%3Cstop offset='.35' stop-color='%23F4F2EE' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%23F4F2EE' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b'%3E%3Cstop offset='0' stop-color='%238ECBFF' stop-opacity='.95'/%3E%3Cstop offset='.35' stop-color='%238ECBFF' stop-opacity='.4'/%3E%3Cstop offset='1' stop-color='%238ECBFF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 6Q160 58 320 6' fill='none' stroke='%238ECBFF' stroke-opacity='.55' stroke-width='1.3'/%3E%3Cpath d='M40.0 17.4v4' stroke='%238ECBFF' stroke-opacity='.75' stroke-width='2'/%3E%3Ccircle cx='40.0' cy='26.4' r='13' fill='url%28%23w%29'/%3E%3Cellipse cx='40.0' cy='25.9' rx='2.8' ry='4' fill='%23F4F2EE'/%3E%3Cpath d='M100.0 28.3v4' stroke='%238ECBFF' stroke-opacity='.75' stroke-width='2'/%3E%3Ccircle cx='100.0' cy='37.3' r='13' fill='url%28%23b%29'/%3E%3Cellipse cx='100.0' cy='36.8' rx='2.8' ry='4' fill='%23FFFFFF'/%3E%3Cpath d='M160.0 32.0v4' stroke='%238ECBFF' stroke-opacity='.75' stroke-width='2'/%3E%3Ccircle cx='160.0' cy='41.0' r='13' fill='url%28%23w%29'/%3E%3Cellipse cx='160.0' cy='40.5' rx='2.8' ry='4' fill='%23F4F2EE'/%3E%3Cpath d='M220.0 28.3v4' stroke='%238ECBFF' stroke-opacity='.75' stroke-width='2'/%3E%3Ccircle cx='220.0' cy='37.3' r='13' fill='url%28%23b%29'/%3E%3Cellipse cx='220.0' cy='36.8' rx='2.8' ry='4' fill='%23FFFFFF'/%3E%3Cpath d='M280.0 17.4v4' stroke='%238ECBFF' stroke-opacity='.75' stroke-width='2'/%3E%3Ccircle cx='280.0' cy='26.4' r='13' fill='url%28%23w%29'/%3E%3Cellipse cx='280.0' cy='25.9' rx='2.8' ry='4' fill='%23F4F2EE'/%3E%3C/svg%3E") repeat-x 0 0 / 320px 64px;
  animation: wh-lichter 6s ease-in-out infinite alternate;
}
@keyframes wh-lichter { from { opacity: .7; } to { opacity: 1; } }

/* ---------- 2b  Warmes Fensterlicht im Einstieg: ein weicher Schein aus Papierweiss hinter dem Handybild ---------- */
.einstieg .innen::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -4%; bottom: -6%; width: min(620px, 70vw); aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(244,242,238,.20), rgba(244,242,238,.08) 55%, rgba(244,242,238,0));
}
@media (max-width: 600px) {
  .einstieg .innen::before { right: -30%; bottom: auto; top: -8%; width: 110vw; opacity: .8; }
}

/* ---------- 3  Sterne im Programm (dunkler Abschnitt): wenige, an den Raendern, zwei Gruppen im Wechsel ---------- */
#programm::before, #programm::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-repeat: no-repeat;
  animation: wh-funkeln 5s ease-in-out infinite alternate;
}
#programm::before {
  background-image:
    radial-gradient(circle at 4% 12%,  rgba(142,203,255,.95) 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 96% 8%,  rgba(255,255,255,.95) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.8)  0 1px,   transparent 1.8px),
    radial-gradient(circle at 2% 58%,  rgba(255,255,255,.85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 97% 71%, rgba(142,203,255,.9)  0 1.4px, transparent 2.3px),
    radial-gradient(circle at 55% 4%,  rgba(255,255,255,.75) 0 1px,   transparent 1.8px);
}
#programm::after {
  animation-delay: -2.5s;
  background-image:
    radial-gradient(circle at 9% 30%,  rgba(255,255,255,.9)  0 1px,   transparent 1.8px),
    radial-gradient(circle at 93% 44%, rgba(255,255,255,.85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 35% 6%,  rgba(142,203,255,.9)  0 1.3px, transparent 2.2px),
    radial-gradient(circle at 6% 86%,  rgba(142,203,255,.8)  0 1.5px, transparent 2.4px),
    radial-gradient(circle at 99% 92%, rgba(255,255,255,.8)  0 1px,   transparent 1.8px),
    radial-gradient(circle at 76% 3%,  rgba(255,255,255,.9)  0 1.5px, transparent 2.4px);
}
@keyframes wh-funkeln { from { opacity: .25; } to { opacity: .95; } }

/* ---------- 4  Ein Schneestern auf der Naht zu jedem weissen Abschnitt – wie auf einer Weihnachtskarte ---------- */
.abschnitt.weiss::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 34px; height: 34px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='16' fill='%23FFFFFF' stroke='%23E2E0DC'/%3E%3Cg stroke='%23006A9E' stroke-width='1.5' stroke-linecap='round' fill='none'%3E%3Cpath d='M17 8.5v17M9.6 12.75l14.8 8.5M9.6 21.25l14.8-8.5'/%3E%3Cpath d='M15 10.4l2 2 2-2M15 23.6l2-2 2 2M10.3 15.4l2.7-.7-.7-2.7M23.7 18.6l-2.7.7.7 2.7M10.3 18.6l2.7.7-.7 2.7M23.7 15.4l-2.7-.7.7-2.7'/%3E%3C/g%3E%3C/svg%3E") center / 34px 34px no-repeat;
}

/* ---------- 5  Warme Papierstruktur in den Papier-Abschnitten (kaum sichtbar, fuehlt sich nach Karte an) ---------- */
.abschnitt:not(.weiss):not(.hell) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .29 0 0 0 0 .24 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Wer weniger Bewegung eingestellt hat, bekommt dieselbe Stimmung – nur still */
@media (prefers-reduced-motion: reduce) {
  #oben::before, #anfrage::before, #oben::after, #anfrage::after, #programm::before, #programm::after { animation: none; }
}
@media print {
  #oben::before, #anfrage::before, #oben::after, #anfrage::after, #programm::before, #programm::after, .abschnitt.weiss::before { display: none; }
}