/* ==========================================================================
   WEIHNACHTS-SKIN — vollständig eigenständig und optional (Opt-in-Schalter)
   ==========================================================================
   Gehört zusammen mit js/christmas.js. Um alles rückgängig zu machen:
   1) diese Datei + js/christmas.js löschen
   2) in jeder HTML-Seite die beiden Zeilen entfernen, die auf
      css/christmas.css und js/christmas.js verweisen
   Am restlichen CSS/JS/HTML der Website muss dafür nichts geändert werden —
   dieser Skin greift ausschließlich über die Klasse "xmas-mode" am <html>-
   Element sowie eigene, per JS injizierte Elemente (Präfix "xmas-").
   ========================================================================== */

:root{
  --xmas-red:#c8262f;
  --xmas-green:#1f7a4d;
  --xmas-green-dark:#0f4d30;
  --xmas-gold:#e0b34d;
}

/* ---------- Schalter, oben rechts (immer sichtbar, auch wenn Modus aus ist) ----------
   Bewusst NICHT als Teil der Header-Nav-Leiste eingefügt: Die Nav-Leiste hat auf
   vielen Bildschirmbreiten (v.a. mit längeren Übersetzungen) bereits keinerlei
   Platzreserve mehr — ein zusätzliches Element dort hätte sie zum Überlaufen
   gebracht. Als frei schwebender, fest positionierter Button (gleiches Prinzip
   wie die bereits vorhandenen .to-top/.float-cta-Buttons unten rechts) ist er
   von der Nav-Breite komplett unabhängig und kann nichts zum Überlaufen bringen. */
.xmas-toggle{
  position:fixed;
  top:14px;right:16px;
  z-index:1600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  border:1px solid rgba(21,89,165,0.22);
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);
  cursor:pointer;
  box-shadow:0 4px 14px rgba(15,52,100,0.18);
  transition:background .35s ease, border-color .35s ease, transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, top .3s ease;
}
.xmas-toggle svg{width:18px;height:18px;stroke:var(--blue-dark);transition:stroke .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1);}
.xmas-toggle:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 6px 18px rgba(15,52,100,0.26);}
.xmas-toggle:active{transform:translateY(0) scale(.94);}
.xmas-toggle.is-on{
  background:linear-gradient(135deg,var(--xmas-green),var(--xmas-green-dark));
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(31,122,77,0.2), 0 6px 18px rgba(15,77,48,0.45);
}
.xmas-toggle.is-on svg{stroke:var(--xmas-gold);transform:rotate(-10deg) scale(1.05);}
/* Unterhalb von ~1300px reicht der Platz neben Logo/Nav/DEKRA/Sprachwahl auf
   vielen Sprachen nicht mehr aus (die Leiste ist dort bereits ohne den
   Schalter eng) — der Button rutscht dann unter die Kopfzeile, statt
   irgendetwas zu überlagern. */
@media(max-width:1300px){
  .xmas-toggle{top:96px;}
}
@media(max-width:600px){
  .xmas-toggle{top:80px;right:10px;width:32px;height:32px;}
  .xmas-toggle svg{width:16px;height:16px;}
}
/* Bei aufgeklapptem Hamburger-Menü würde der Schalter über den Menüpunkten
   liegen — solange ausblenden. */
html:has(.main-nav.open) .xmas-toggle{opacity:0;visibility:hidden;pointer-events:none;}

/* ---------- Einmaliger Hinweis am Schalter ----------
   Sprechblase UNTER dem Schalter (rechtsbündig, Spitze + Pfeil zeigen nach
   oben auf den Knopf) — bewusst nicht daneben, weil sie dort je nach Breite
   Sprachwahl, DEKRA-Logo, CTA bzw. auf dem Handy Logo/Menü verdecken würde.
   Die genaue Höhe setzt js/christmas.js: so dicht wie möglich unter dem
   Schalter, aber nie über Logo, Menü, DEKRA-Logo oder Sprachwahl.
   Verschwindet nach 10 s oder beim ersten Klick auf den Schalter (bzw. die
   Blase) dauerhaft. */
.xmas-hint{
  position:fixed;
  top:144px;right:16px;
  z-index:1600;
  display:flex;align-items:center;gap:8px;
  max-width:min(300px, calc(100vw - 32px));
  padding:9px 12px 9px 14px;
  background:#195090; /* Blau der obersten Header-Leiste */
  color:#fff;
  font-weight:600;font-size:.82rem;line-height:1.35;
  text-wrap:balance;
  border:none;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(15,52,100,0.3);
  cursor:pointer;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease, top .3s ease;
}
.xmas-hint.is-visible{opacity:1;transform:translateY(0);}
/* Spitze der Sprechblase, mittig unter dem Schalter (36px breit -> 18px - 6px) */
.xmas-hint::before{
  content:"";
  position:absolute;
  top:-6px;right:12px;
  width:12px;height:12px;
  background:#195090;
  border-radius:2px 0 0 0;
  transform:rotate(45deg);
}
.xmas-hint-arrow{display:flex;flex-shrink:0;align-self:flex-start;}
.xmas-hint-arrow svg{width:18px;height:18px;stroke:#fff;animation:xmasHintNudge 1.1s ease-in-out infinite;}
@keyframes xmasHintNudge{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@media(max-width:600px){
  .xmas-hint{right:10px;font-size:.76rem;max-width:calc(100vw - 20px);padding:8px 10px 8px 12px;gap:6px;}
  .xmas-hint::before{right:10px;} /* 32px-Schalter -> 16px - 6px */
  .xmas-hint-arrow svg{width:16px;height:16px;}
}
html:has(.main-nav.open) .xmas-hint{opacity:0;visibility:hidden;pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  .xmas-hint-arrow svg{animation:none;}
}

/* ==========================================================================
   Ab hier: alles NUR sichtbar/aktiv, solange <html> die Klasse "xmas-mode"
   trägt (wird von js/christmas.js gesetzt/entfernt).
   ========================================================================== */

/* ---------- Schneefall (Canvas, ganzer Viewport) ---------- */
.xmas-snow{
  position:fixed;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  /* absichtlich UNTER dem Header (z-index:1000) — sonst "durchlöchert"
     vorbeifallender Schnee optisch alles im Header (Logo, Mütze, Nav,
     Sprachumschalter), weil er als eigener, höherer Stapelkontext sonst
     immer über der kompletten Kopfzeile liegen würde. */
  z-index:500;
  display:none;
}
html.xmas-mode .xmas-snow{display:block;}

/* ---------- Lichterkette am unteren Header-Rand ---------- */
.xmas-lights{
  display:none;
  position:absolute;
  left:0;right:0;top:100%;
  width:100%;height:42px;
  pointer-events:none;
  overflow:visible;
  z-index:2;
}
html.xmas-mode .xmas-lights{display:block;}

/* ---------- dezente festliche Kopfleiste ---------- */
html.xmas-mode .site-header{
  box-shadow:0 2px 0 rgba(224,179,77,0.4), 0 10px 30px rgba(15,52,100,0.12);
}

/* ---------- festliche Akzente auf den Haupt-CTAs ---------- */
html.xmas-mode .btn-primary{
  box-shadow:0 10px 28px rgba(186,36,55,0.35), 0 0 0 1px rgba(224,179,77,0.55) inset;
}
html.xmas-mode .nav-cta-inner{
  box-shadow:0 6px 18px rgba(21,89,165,0.3), 0 0 0 1px rgba(224,179,77,0.55) inset;
}

@keyframes xmasBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.xmas-bob{animation:xmasBob 4.4s ease-in-out infinite;transform-origin:center bottom;}

/* ---------- Sticker auf den Kacheln (Karten, Stat-Boxen, Referenz-Logos, ...) ---------- */
html.xmas-mode .xmas-has-sticker{position:relative;}
.xmas-sticker{
  display:none;
  position:absolute;
  top:-9px;
  z-index:6;
  width:26px;height:26px;
  align-items:center;justify-content:center;
  filter:drop-shadow(0 3px 5px rgba(15,30,50,0.35));
  animation:xmasWiggle 3.6s ease-in-out infinite;
  pointer-events:none;
}
html.xmas-mode .xmas-sticker{display:flex;}
.xmas-sticker--right{right:-9px;}
.xmas-sticker--left{left:-9px;}
@keyframes xmasWiggle{
  0%,100%{transform:rotate(var(--xr,0deg)) scale(1);}
  50%{transform:rotate(var(--xr,0deg)) scale(1.08);}
}

/* ---------- große, langsam treibende Schneeflocken ---------- */
.xmas-bigflakes{
  position:fixed;inset:0;
  width:100%;height:100%;
  overflow:hidden;
  pointer-events:none;
  z-index:480; /* ebenfalls unter dem Header, siehe .xmas-snow */
  display:none;
}
html.xmas-mode .xmas-bigflakes{display:block;}
.xmas-flake-big{
  position:absolute;
  top:-40px;
  color:#fff;
  filter:drop-shadow(0 0 4px rgba(255,255,255,0.6));
  animation-name:xmasFall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes xmasFall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0deg);}
  50%{transform:translateY(55vh) translateX(28px) rotate(160deg);}
  100%{transform:translateY(115vh) translateX(-14px) rotate(320deg);}
}

/* ---------- Deko im Hero-/Seitenkopf-Bereich ---------- */
html.xmas-mode .xmas-hero-deco-host{position:relative;}
.xmas-hero-garland{
  position:absolute;
  top:100px;right:16px;
  height:0;
  pointer-events:none;
  z-index:3;
  display:none;
}
@media(max-width:600px){.xmas-hero-garland{top:82px;right:8px;}}
html.xmas-mode .xmas-hero-garland{display:block;}
.xmas-bauble{
  position:absolute;
  top:0;
  width:26px;height:26px;
  transform-origin:top center;
  animation-name:xmasSwing;
  animation-duration:3.6s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.xmas-bauble::before{
  content:"";
  position:absolute;
  left:50%;top:-16px;
  width:1px;height:16px;
  background:rgba(15,30,50,0.35);
  transform:translateX(-50%);
}
@keyframes xmasSwing{0%,100%{transform:rotate(-7deg);}50%{transform:rotate(7deg);}}

.xmas-sparkles{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:2;
  overflow:hidden;
  display:none;
}
html.xmas-mode .xmas-sparkles{display:block;}
.xmas-sparkle{
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px 2px rgba(255,255,255,0.8);
  animation:xmasTwinkle 2.6s ease-in-out infinite;
  opacity:0;
}
@keyframes xmasTwinkle{0%,100%{opacity:0;transform:scale(.5);}50%{opacity:.9;transform:scale(1);}}

/* ---------- Nikolausmütze auf dem Logo ---------- */
html.xmas-mode .xmas-logo-host{position:relative;}
/* Die Mütze ist an die Logo-Bildhöhe gekoppelt (Basisgröße = 40x34px bei der
   vollen 88px-Logohöhe) und skaliert per CSS-Variable --hs exakt in den
   gleichen Momenten/Breakpoints mit, in denen auch das Logo selbst seine
   Höhe ändert (Scroll-Zustand .scrolled sowie die Mobile-Breakpoints) — so
   bleibt sie immer proportional richtig auf dem Logo "sitzen", statt bei
   kleinerem Logo relativ zu groß/verschoben zu wirken. */
.xmas-santa-hat{
  display:none;
  position:absolute;
  top:-14px;left:-10px;
  width:40px;height:34px;
  transform-origin:80% 80%;
  z-index:7;
  pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(15,30,50,0.3));
  transition:width .3s ease, height .3s ease, top .3s ease, left .3s ease;
  animation:xmasHatTilt 4.8s ease-in-out infinite;
  --hs:1;
}
html.xmas-mode .xmas-santa-hat{display:block;}
.xmas-santa-hat svg{width:100%;height:100%;display:block;}
@keyframes xmasHatTilt{
  0%,100%{transform:rotate(-18deg) scale(var(--hs,1));}
  50%{transform:rotate(-13deg) scale(var(--hs,1));}
}
html.xmas-mode .site-header.scrolled .xmas-santa-hat{--hs:0.77;}
@media(max-width:720px){
  .xmas-santa-hat{width:26px;height:22px;top:-9px;left:-6px;}
  html.xmas-mode .site-header.scrolled .xmas-santa-hat{--hs:0.929;}
}
@media(max-width:360px){
  .xmas-santa-hat{width:20px;height:17px;top:-7px;left:-5px;}
  html.xmas-mode .site-header.scrolled .xmas-santa-hat{--hs:0.909;}
}



/* ---------- barrierefreiheit: Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce){
  .xmas-bob, .xmas-sticker, .xmas-flake-big, .xmas-bauble, .xmas-sparkle{animation:none !important;}
  .xmas-sparkle{opacity:.7;}
  .xmas-bigflakes{display:none !important;}
}