/* 2000-reisen — Weihnachts-Template (Kind von Cassiopeia)
 * ---------------------------------------------------------------------------
 * Lädt zuerst das normale Brand-CSS des Eltern-Templates und legt die
 * Weihnachtsdeko darüber. Alles Saisonale steht NUR hier und in js/user.js –
 * das Eltern-Template bleibt unberührt.
 *
 * Umschalten: Backend → System → Website-Template-Stile → Stern bei
 * „Cassiopeia - Weihnachten“. Zurück im Januar: Stern bei „Cassiopeia - Default“.
 * Vorschau ohne Umschalten: https://2000.reisen/?templateStyle=<ID dieses Stils>
 *
 * Vorlage für weitere Saisons (Ostern, Halloween): Paket kopieren, Namen
 * ersetzen, Farben/Grafiken unten und SAISON in js/user.js anpassen.
 */
@import url("../../cassiopeia/css/user.css");

:root {
  --xmas-rot:    #c8102e;
  --xmas-gruen:  #1d6b3a;
  --xmas-gold:   #d4a017;
  --xmas-schnee: #ffffff;
}

/* ---------- Hintergrund: zartes Schneeflocken-Muster ---------- */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23c9d6e3' stroke-width='1.2' stroke-linecap='round' opacity='.55'%3E%3Cg transform='translate(40 45)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5M0-6l-2.5-2.5M0-6l2.5-2.5M0 6l-2.5 2.5M0 6l2.5 2.5'/%3E%3C/g%3E%3Cg transform='translate(130 120) scale(.7)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5M0-6l-2.5-2.5M0-6l2.5-2.5M0 6l-2.5 2.5M0 6l2.5 2.5'/%3E%3C/g%3E%3Cg transform='translate(120 30) scale(.45)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3Cg transform='translate(55 150) scale(.5)'%3E%3Cpath d='M0-9V9M-7.8-4.5 7.8 4.5M-7.8 4.5 7.8-4.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
}

/* ---------- Logo: Weihnachtsbild ist oben 12 px höher (Schnee) ---------- */
/* So bleiben die Ohren so groß wie beim normalen Logo (70 px + 12 px Schnee). */
.container-header .brand-logo img { height: 82px; width: auto; }

/* ---------- Kopf: Sternenhimmel hinter dem Logo ---------- */
.container-header {
  position: relative;
  border-bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='%23e8c35a' opacity='.45'%3E%3Cpath d='M30 20l1.6 3.6 3.9.4-2.9 2.6.8 3.9L30 28.5l-3.4 2 .8-3.9-2.9-2.6 3.9-.4z'/%3E%3Cpath d='M170 70l1.1 2.5 2.7.3-2 1.8.6 2.7-2.4-1.4-2.4 1.4.6-2.7-2-1.8 2.7-.3z'/%3E%3Cpath d='M110 100l.8 1.8 2 .2-1.5 1.3.4 2-1.7-1-1.7 1 .4-2-1.5-1.3 2-.2z'/%3E%3Cpath d='M215 25l.8 1.8 2 .2-1.5 1.3.4 2-1.7-1-1.7 1 .4-2-1.5-1.3 2-.2z'/%3E%3C/g%3E%3Cg fill='%23d0dceb'%3E%3Ccircle cx='80' cy='50' r='1.3'/%3E%3Ccircle cx='140' cy='18' r='1'/%3E%3Ccircle cx='200' cy='95' r='1.2'/%3E%3Ccircle cx='15' cy='85' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
/* funkelnde Sterne – per JS als <span class="xmas-stern"> eingesetzt */
.xmas-stern {
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath fill='%23e2b13c' d='M0-10 2.2-2.2 10 0 2.2 2.2 0 10-2.2 2.2-10 0-2.2-2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: xmas-funkeln 3.2s ease-in-out infinite;
  opacity: .2;
  z-index: 0;
}
.container-header > .grid-child { position: relative; z-index: 1; }
@keyframes xmas-funkeln {
  0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); }
  50%      { opacity: .95; transform: scale(1.05) rotate(20deg); }
}

/* ---------- Girlande unter dem Kopf (per JS eingesetzt) ---------- */
.xmas-girlande {
  position: relative;
  height: 46px;
  margin-bottom: -14px;           /* hängt leicht über den Inhalt */
  z-index: 50;
  pointer-events: none;
  background: url("../images/girlande.svg") 0 0 / 200px 46px repeat-x;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.18));
}
@media (max-width: 575px) {
  .xmas-girlande { height: 34px; background-size: 148px 34px; margin-bottom: -10px; }
}

/* ---------- Menü: aktiver Punkt mit kleinem Stern ---------- */
.container-nav .mod-menu > li.active > a::before,
.container-nav .mod-menu > li.current > a::before {
  content: "★";
  color: var(--xmas-gold);
  margin-right: .3em;
  font-size: .85em;
}

/* ---------- Fuß: Schneeverwehung + Sterne auf dem dunklen Grund ---------- */
.container-footer {
  position: relative;
  margin-top: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='140' viewBox='0 0 300 140'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='25' cy='30' r='1.1' opacity='.7'/%3E%3Ccircle cx='90' cy='75' r='.8' opacity='.5'/%3E%3Ccircle cx='160' cy='40' r='1.3' opacity='.8'/%3E%3Ccircle cx='230' cy='100' r='.9' opacity='.6'/%3E%3Ccircle cx='280' cy='20' r='1' opacity='.7'/%3E%3Ccircle cx='60' cy='120' r='.8' opacity='.5'/%3E%3C/g%3E%3Cpath fill='%23f3d36b' opacity='.8' d='M200 55l1.2 2.7 3 .3-2.2 2 .6 2.9-2.6-1.5-2.6 1.5.6-2.9-2.2-2 3-.3z'/%3E%3C/svg%3E");
}
.container-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -40px;
  height: 42px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='42' viewBox='0 0 600 42' preserveAspectRatio='none'%3E%3Cpath fill='%23dde7f1' d='M0 30C40 14 80 12 130 22s90 16 140 4 100-22 160-12 110 20 170 8V42H0z'/%3E%3Cpath fill='%23fff' d='M0 34c50-14 95-14 140-6s85 12 135 0 105-20 165-10 100 16 160 6V42H0z'/%3E%3Cpath fill='%231a2733' d='M0 40c100-4 200-4 300-1s200 3 300 0v3H0z'/%3E%3C/svg%3E") 0 0 / 600px 42px repeat-x;
}

/* ---------- Winterlandschaft am Seitenende (per JS eingesetzt) ---------- */
/* Die Seite hat keinen Fußbereich – deshalb ein eigenes Element nach .site-grid. */
.xmas-landschaft {
  height: 120px;
  margin-top: 1.5rem;
  pointer-events: none;
  background: url("../images/schneewehe.svg") center bottom / 1067px 120px repeat-x;
}
@media (max-width: 575px) {
  .xmas-landschaft { height: 80px; background-size: 711px 80px; }
}

/* ---------- Schneefall-Ebene + Schalter ---------- */
#xmas-schnee {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 900;                   /* über dem Inhalt, unter Menüs/Dialogen (1000+) */
}
.xmas-schalter {
  position: fixed;
  left: 12px; bottom: 12px;
  z-index: 901;
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 39, 51, .78);
  color: #fff;
  font-size: 20px;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  opacity: .75;
  transition: opacity .2s;
}
.xmas-schalter:hover, .xmas-schalter:focus-visible { opacity: 1; }
.xmas-schalter[aria-pressed="false"] { text-decoration: line-through; opacity: .45; }

/* Wer reduzierte Bewegung eingestellt hat, bekommt ruhige Deko */
@media (prefers-reduced-motion: reduce) {
  .xmas-stern { animation: none; opacity: .7; }
  .xmas-girlande { background-image: url("../images/girlande-ruhig.svg"); }
}
@media print {
  #xmas-schnee, .xmas-schalter, .xmas-girlande, .xmas-stern, .xmas-landschaft { display: none !important; }
}