/* ============= Weihnachts-Theme – Grundschalter ============= */
:root{
  --koq-green: #2f7a32;
  --xmas-red: #b7182e;
  --xmas-gold: #f6d36b;
  --xmas-snow: rgba(255,255,255,.85);
}

/* Body-Schalter: .xmas-active */
body.xmas-active{
  /* sanfte Gesamtstimmung */
  background-image:
    radial-gradient(1200px 800px at 15% -10%, rgba(246,211,107,.10), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(183,24,46,.08), transparent 60%);
  background-attachment: fixed;
}

/* -------------------------------------------
   1) Weihnachtsglow (für Boxen/Buttons/Badges)
-------------------------------------------- */
.xmas-glow{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.4) inset,
    0 6px 18px rgba(183,24,46,.25),
    0 0 24px rgba(246,211,107,.35);
}

/* Variante für Hover-Intensivierung */
.xmas-hover-glow:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.55) inset,
    0 8px 22px rgba(183,24,46,.32),
    0 0 34px rgba(246,211,107,.5);
  transform: translateY(-1px);
}

/* -------------------------------------------
   2) Akzent-Überschreibung für bestehende Elemente
-------------------------------------------- */
/* Aktive Navigation-Pills, Links, Badges etc. */
body.xmas-active .staffel-nav .is-active,
body.xmas-active .char-nav .is-active,
body.xmas-active a:hover,
body.xmas-active .btn-primary{
  background: linear-gradient(135deg, var(--koq-green), var(--xmas-red));
  color:#fff;
}

/* Karten-Kanten + leichte Glorie */
body.xmas-active .karte.karte--full{
  border-color: rgba(246,211,107,.6);
  position: relative;
}
body.xmas-active .karte.karte--full::after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:12px;
  pointer-events:none;
  box-shadow: 0 0 24px rgba(246,211,107,.35);
}

/* Headline-Schimmer */
body.xmas-active h1, 
body.xmas-active h2{
  text-shadow: 0 1px 0 #fff, 0 0 14px rgba(246,211,107,.35);
}

/* -------------------------------------------
   3) Dezente „Sparkles“ (Goldpunkte, optional)
-------------------------------------------- */
@keyframes twinkle { 
  0%,100% { opacity:.25; transform:translateY(0) }
  50% { opacity:1; transform:translateY(-1px) }
}
body.xmas-active .xmas-sparkles{
  position:relative; overflow:visible;
}
body.xmas-active .xmas-sparkles::before{
  content:"";
  position:absolute; inset:-10%;
  background:
    radial-gradient(3px 3px at 10% 20%, var(--xmas-gold), transparent 55%),
    radial-gradient(2.5px 2.5px at 40% 10%, var(--xmas-gold), transparent 55%),
    radial-gradient(2.5px 2.5px at 70% 25%, var(--xmas-gold), transparent 55%),
    radial-gradient(3px 3px at 85% 15%, var(--xmas-gold), transparent 55%),
    radial-gradient(2px 2px at 30% 75%, var(--xmas-gold), transparent 55%),
    radial-gradient(3px 3px at 80% 70%, var(--xmas-gold), transparent 55%);
  animation: twinkle 2.8s ease-in-out infinite;
  pointer-events:none;
}

/* -------------------------------------------
   4) Ultra-leichter CSS-Schnee (respektiert reduced-motion)
-------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  body.xmas-active::after{
    content:"";
    position: fixed; left:0; top:0; right:0; bottom:0;
    pointer-events: none;
    background-image:
      radial-gradient(2px 2px at 20% 0%, var(--xmas-snow) 50%, transparent 51%),
      radial-gradient(2px 2px at 60% -10%, var(--xmas-snow) 50%, transparent 51%),
      radial-gradient(2px 2px at 80% 0%, var(--xmas-snow) 50%, transparent 51%);
    background-repeat: repeat;
    background-size: 220px 140px, 260px 170px, 300px 200px;
    animation: snowFall 18s linear infinite;
    opacity:.7;
    z-index: 9999;
  }
  @keyframes snowFall{
    from{ background-position: 0 0, 0 0, 0 0; }
    to  { background-position: 0 600px, 0 700px, 0 800px; }
  }
}

/* -------------------------------------------
   5) Utilities zum gezielten Einsatz
-------------------------------------------- */
/* gib einzelnen Elementen gezielt Glow: */
.karte--xmas, .btn--xmas, .badge--xmas{ }

/* Beispiel: Buttons überall leicht weihnachtlich */
body.xmas-active .btn,
body.xmas-active button{
  border:1px solid rgba(246,211,107,.6);
  transition: box-shadow .25s, transform .2s;
}
body.xmas-active .btn:hover{ /* nutzt .xmas-hover-glow falls vorhanden */ }

/* Fallback, wenn du nur an wenigen Stellen Glow willst:
   einfach class="xmas-glow xmas-hover-glow" auf das Element. */

/* Mini-Ribbon in der Ecke */
body.xmas-active .koq-header::after{
  content:"Frohe Weihnachten";
  position:absolute; right:10px; top:10px;
  background: linear-gradient(135deg, var(--koq-green), var(--xmas-red));
  color:#fff; padding:6px 10px; font-weight:600; font-size:.9rem;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* Weihnachts-Toggle */
#xmas-toggle{
  position:fixed; right:18px; bottom:86px; /* ggf. anpassen */
  width:44px; height:44px; border-radius:9999px;
  background:linear-gradient(135deg, #2f7a32, #b7182e);
  color:#fff; border:1px solid rgba(246,211,107,.6);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  display:grid; place-items:center; cursor:pointer;
  z-index:99999;
}
#xmas-toggle[aria-pressed="true"]{ filter: saturate(1.1) brightness(1.05); }
#xmas-toggle svg{ display:block; width:22px; height:22px; }

/* ===== Sichtbare Weihnachtsakzente ohne HTML-Änderungen ===== */

/* sanfter Gesamt-Hintergrund für die ganze Seite */
body.xmas-active{
  background-image:
    radial-gradient(1200px 800px at 15% -10%, rgba(246,211,107,.10), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(183,24,46,.08), transparent 60%) !important;
  background-attachment: fixed !important;
}

/* Karten (Episodenguide, Darsteller, etc.) */
body.xmas-active .karte.karte--full{
  border-color: rgba(246,211,107,.7) !important;
  box-shadow: 0 6px 18px rgba(183,24,46,.25), 0 0 24px rgba(246,211,107,.35) !important;
}

/* Headline-Schimmer */
body.xmas-active h1,
body.xmas-active h2{
  text-shadow: 0 1px 0 #fff, 0 0 14px rgba(246,211,107,.35) !important;
}

/* Aktive Navigations-Pills */
body.xmas-active .staffel-nav .is-active,
body.xmas-active .char-nav .is-active{
  background: linear-gradient(135deg, #2f7a32, #b7182e) !important;
  color:#fff !important;
  border-color: rgba(246,211,107,.7) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
}

/* Buttons (so breit wie möglich abholen) */
body.xmas-active .btn,
body.xmas-active .button,
body.xmas-active .readon,
body.xmas-active a.btn,
body.xmas-active a.button,
body.xmas-active .btn-primary{
  border:1px solid rgba(246,211,107,.7) !important;
  background: linear-gradient(135deg, #2f7a32, #b7182e) !important;
  color:#fff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 0 22px rgba(246,211,107,.45) !important;
}

/* Hover-Verstärkung */
body.xmas-active .btn:hover,
body.xmas-active .button:hover,
body.xmas-active .readon:hover,
body.xmas-active a.btn:hover,
body.xmas-active a.button:hover,
body.xmas-active .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28), 0 0 30px rgba(246,211,107,.6) !important;
}

/* Mini-Ribbon im Header (falls .koq-header existiert, sonst ignoriert der Browser’s einfach) */
body.xmas-active .koq-header::after{
  content:"Frohe Weihnachten";
  position:absolute; right:10px; top:10px;
  background: linear-gradient(135deg, #2f7a32, #b7182e);
  color:#fff; padding:6px 10px; font-weight:600; font-size:.9rem;
  border-radius:999px; box-shadow:0 6px 14px rgba(0,0,0,.18);
}

/* ===== Dezentes Weihnachts-Theme (Vermilion-kompatibel) ===== */

/* Farbvariablen */
body.xmas-active {
  --xmas-primary: #2f7a32;   /* KOQ-Grün */
  --xmas-red:     #b7182e;   /* Weinrot */
  --xmas-gold:    #f6d36b;   /* Gold */
}

/* ===== Header & Hauptbereiche: Nur Farbakzente, keine Hintergründe ===== */
body.xmas-active #rt-header,
body.xmas-active #rt-top,
body.xmas-active #rt-navigation {
  border-bottom: 3px solid var(--xmas-gold) !important;
}
body.xmas-active #rt-header .rt-logo-block,
body.xmas-active #rt-header .module-content {
  filter: drop-shadow(0 0 10px rgba(246,211,107,0.4));
}

/* ===== Menü / Navigation ===== */
body.xmas-active #rt-navigation .gf-menu > li:hover > a,
body.xmas-active #rt-navigation .gf-menu > li.active > a {
  background: linear-gradient(135deg, var(--xmas-primary), var(--xmas-red)) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  border-radius: 6px;
}

/* Untermenüs neutral lassen */
body.xmas-active #rt-navigation .dropdown,
body.xmas-active #rt-navigation .gf-menu .dropdown {
  background: inherit !important;
  border: none !important;
}

/* ===== Buttons ===== */
body.xmas-active .btn,
body.xmas-active .button,
body.xmas-active .readon,
body.xmas-active a.btn,
body.xmas-active a.button {
  background: linear-gradient(135deg, var(--xmas-primary), var(--xmas-red)) !important;
  border: 1px solid var(--xmas-gold) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
  transition: all 0.2s ease-in-out;
}
body.xmas-active .btn:hover,
body.xmas-active .button:hover,
body.xmas-active .readon:hover {
  background: linear-gradient(135deg, var(--xmas-red), var(--xmas-primary)) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* ===== Modulrahmen & Akzente ===== */
body.xmas-active .rt-block.accent,
body.xmas-active .accent {
  border-top: 3px solid var(--xmas-gold) !important;
  border-bottom: 3px solid var(--xmas-gold) !important;
  box-shadow: 0 0 12px rgba(246,211,107,0.35);
}

/* ===== Karten (Episodenguide etc.) ===== */
body.xmas-active .karte.karte--full {
  border-color: rgba(246,211,107,0.6) !important;
  box-shadow: 0 4px 10px rgba(183,24,46,0.2), 0 0 18px rgba(246,211,107,0.25) !important;
}

/* ===== Hover-Farben NUR für Texte & Links (kein Overlay!) ===== */
/* ===== Linkfarben feinjustiert ===== */

/* Im Seiteninhalt: Rot beim Hover */
body.xmas-active #rt-main a:hover,
body.xmas-active #rt-content a:hover,
body.xmas-active .component-content a:hover,
body.xmas-active .karte.karte--full a:hover {
  color: var(--xmas-red) !important;
  text-decoration: underline;
}

/* In Header, Navigation, Top-Bereichen: weiß wie vorher */
body.xmas-active #rt-header a,
body.xmas-active #rt-top a,
body.xmas-active #rt-navigation a {
  color: #fff !important;
  text-decoration: none !important;
}
body.xmas-active #rt-header a:hover,
body.xmas-active #rt-top a:hover,
body.xmas-active #rt-navigation a:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* ===== Header-Titel mit leichtem Glanz ===== */
body.xmas-active h1, body.xmas-active h2 {
  text-shadow: 0 0 10px rgba(246,211,107,0.4);
}

/* ===== Dezente Schneeglut im Hintergrund (beibehalten) ===== */
body.xmas-active {
  background-image:
    radial-gradient(1000px 700px at 10% -5%, rgba(246,211,107,0.05), transparent 60%),
    radial-gradient(800px 600px at 90% 0%, rgba(183,24,46,0.06), transparent 60%);
  background-attachment: fixed;
}