/* ==========================================================
   WEIHNACHTEN 2026 – design-xmas.css (live seit 2026-10-06, freigegebenes Theme)
   Saisonal: zum Abschalten den <link> auf design-xmas.css entfernen. Ab v20261006c sitewide:
   Schnee-Ebene (data-xs-snow="page"), Hero-Schnee (data-xs-snow="hero"), Gold-Schimmer auf allen Primär-CTAs.
   Markup per /workspace/scripts/xmas_snow_sitewide.py (idempotent).
   Basis: Eisblau + Silberweiß · Akzente: Nachtblau/Gold + Tiefrot/Gold
   ========================================================== */
:root{
  --ice-25:#f7fbfe; --ice-50:#eef6fc; --ice-100:#e1eef9; --ice-200:#c8dff2; --ice-300:#a4c6e4; --ice-500:#5f8fbe;
  --silver-50:#f8fafc; --silver-100:#eef1f5; --silver-300:#cfd7e1; --silver-500:#97a3b4;
  --navy-950:#071331; --navy-900:#0b1a3f; --navy-800:#13285c; --navy-700:#1d3b7c;
  --gold-300:#f1dc9e; --gold-400:#e2c26d; --gold-500:#c9a24a; --gold-600:#a7812e; --gold-700:#7f611e;
  --wine-700:#8a1730; --wine-800:#6e1026; --wine-900:#4d0a1a;
  --xs-serif: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}

/* ---------- Top bars ---------- */
.xs-bar{background:linear-gradient(90deg,var(--ice-100),#fff 30%,#fff 70%,var(--ice-100));color:var(--navy-900);text-align:center;font-weight:700;font-size:.92rem;padding:.6rem 1rem;border-bottom:1px solid var(--silver-300)}
.xs-bar strong{color:var(--wine-700)}
.xs-bar a{color:var(--navy-800);font-weight:800;text-decoration:underline;text-decoration-color:var(--gold-500);text-underline-offset:3px}
.xs-bar .xs-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--wine-700);margin-right:.45rem;vertical-align:.08em;box-shadow:0 0 0 0 rgba(138,23,48,.5);animation:xs-ping 1.8s ease-out infinite}
@keyframes xs-ping{0%{box-shadow:0 0 0 0 rgba(138,23,48,.55)}100%{box-shadow:0 0 0 10px rgba(138,23,48,0)}}

/* ---------- Snow (CSS only) ---------- */
.xs-snow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.xs-snow i{position:absolute;top:-6%;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff 0%,rgba(255,255,255,.95) 40%,rgba(255,255,255,0) 72%);
  opacity:var(--o,.85);filter:blur(var(--b,0px));
  animation:xs-fall var(--d) linear infinite, xs-sway calc(var(--d) / 3) ease-in-out infinite alternate;
  animation-delay:var(--t),var(--t)}
.xs-snow.on-light i{background:radial-gradient(circle at 40% 35%,#fff 0%,#fff 45%,#e1eef9 70%,rgba(225,238,249,0) 74%);box-shadow:0 0 0 1px rgba(164,198,228,.55),0 0 10px 1px rgba(95,143,190,.55),0 2px 4px rgba(29,59,124,.18);opacity:calc(var(--o,.85) + .1)}
@keyframes xs-fall{0%{transform:translate3d(0,-10vh,0)}100%{transform:translate3d(var(--dx,24px),115vh,0)}}
@keyframes xs-sway{0%{margin-left:-14px}100%{margin-left:14px}}
.xs-frost{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
   radial-gradient(60px 60px at 8% 18%,rgba(255,255,255,.55),transparent 70%),
   radial-gradient(90px 90px at 92% 12%,rgba(255,255,255,.45),transparent 70%),
   radial-gradient(40px 40px at 70% 78%,rgba(255,255,255,.35),transparent 70%),
   radial-gradient(120px 120px at 30% 92%,rgba(255,255,255,.35),transparent 70%)}
.xs-drift{position:absolute;left:0;right:0;bottom:-1px;height:70px;z-index:3;pointer-events:none;color:#fff}
.xs-drift svg{width:100%;height:100%;display:block}

/* ---------- Typography helpers ---------- */
.xs-kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-800);background:rgba(255,255,255,.75);border:1px solid var(--silver-300);padding:.45rem .95rem;border-radius:999px;box-shadow:0 4px 18px rgba(29,59,124,.08);backdrop-filter:blur(6px)}
.xs-kicker b{color:var(--gold-600)}
.xs-h1{font-weight:900;color:var(--navy-900);letter-spacing:-.03em;line-height:1.02;font-size:2.4rem;margin:1.1rem 0 1.1rem}
@media(min-width:640px){.xs-h1{font-size:3.1rem}}
@media(min-width:1024px){.xs-h1{font-size:3.55rem}}
.xs-h1 em,.xs-h2 em{font-family:var(--xs-serif);font-style:italic;font-weight:600;letter-spacing:-.01em;
  background:linear-gradient(100deg,var(--wine-800) 0%,var(--wine-700) 45%,var(--gold-600) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--wine-700);padding-right:.08em}
.xs-dark .xs-h2 em,.xs-dark .xs-h1 em{background:linear-gradient(100deg,var(--gold-300),var(--gold-400) 50%,#fff3cf);-webkit-background-clip:text;background-clip:text}
.xs-lead{font-size:1.125rem;line-height:1.65;color:#2a3b5c;max-width:36rem;margin:0 0 1.4rem}
@media(min-width:768px){.xs-lead{font-size:1.25rem}}
.xs-h2{font-weight:900;color:var(--navy-900);letter-spacing:-.025em;line-height:1.1;font-size:1.9rem;margin:0 0 .8rem}
@media(min-width:768px){.xs-h2{font-size:2.6rem}}
.xs-eyebrow{display:block;font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-600);margin-bottom:.6rem}
.xs-sub{color:#3b4d6e;font-size:1.08rem;line-height:1.6;max-width:42rem}
.xs-center{text-align:center}.xs-center .xs-sub{margin-left:auto;margin-right:auto}
.xs-wrap{max-width:1280px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:4}

/* ---------- Buttons ---------- */
.xs-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;text-decoration:none;font-weight:900;border-radius:1.1rem;transition:transform .18s ease,box-shadow .18s ease,filter .18s;overflow:hidden;line-height:1.15}
.xs-btn-gold{color:var(--navy-950)!important;background:linear-gradient(135deg,#f6e3a6 0%,var(--gold-400) 38%,var(--gold-500) 70%,#d9b65c 100%);padding:1.05rem 1.6rem;font-size:1.08rem;
  box-shadow:0 14px 34px -10px rgba(167,129,46,.75),0 0 0 1px rgba(127,97,30,.25) inset,0 1px 0 rgba(255,255,255,.7) inset;animation:xs-glow 3.2s ease-in-out infinite}
.xs-btn-gold small{display:block;font-size:.74rem;font-weight:700;opacity:.8;letter-spacing:.02em}
.xs-btn-gold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:xs-shine 4.5s ease-in-out infinite}
.xs-btn-gold:hover{transform:translateY(-2px) scale(1.015);filter:brightness(1.04)}
.xs-btn-navy{color:#fff!important;background:linear-gradient(135deg,var(--navy-800),var(--navy-950));padding:1.05rem 1.5rem;font-size:1.02rem;box-shadow:0 12px 28px -12px rgba(7,19,49,.7);border:1px solid rgba(226,194,109,.45)}
.xs-btn-navy:hover{transform:translateY(-2px)}
.xs-btn-ghost{color:var(--navy-900)!important;background:rgba(255,255,255,.7);border:1.5px solid var(--silver-300);padding:1rem 1.4rem;font-size:1rem;backdrop-filter:blur(6px)}
.xs-btn-ghost:hover{border-color:var(--gold-500);background:#fff}
.xs-btn-wine{color:#fff!important;background:linear-gradient(135deg,var(--wine-700),var(--wine-900));padding:1.05rem 1.5rem;border:1px solid rgba(226,194,109,.55);box-shadow:0 12px 28px -12px rgba(77,10,26,.7)}
.xs-dark .xs-btn-ghost{color:#fff!important;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
.xs-dark .xs-btn-ghost:hover{background:rgba(255,255,255,.16);border-color:var(--gold-400)}
@keyframes xs-glow{0%,100%{box-shadow:0 14px 34px -10px rgba(167,129,46,.7),0 0 0 0 rgba(226,194,109,.0)}50%{box-shadow:0 18px 40px -10px rgba(167,129,46,.9),0 0 0 7px rgba(226,194,109,.18)}}
@keyframes xs-shine{0%,60%{left:-60%}100%{left:130%}}
.xs-ctas{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.xs-micro{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:1rem;font-size:.86rem;color:#3b4d6e;font-weight:600;padding:0;list-style:none}
.xs-micro li::before{content:"✓";color:var(--gold-600);font-weight:900;margin-right:.35rem}
.xs-dark .xs-micro{color:#d6e3f3}.xs-dark .xs-micro li::before{color:var(--gold-400)}

/* ---------- Countdown ---------- */
.xs-count{display:inline-flex;align-items:center;gap:.75rem;background:#fff;border:1px solid var(--silver-300);border-radius:1rem;padding:.55rem .9rem .55rem .6rem;box-shadow:0 8px 24px -12px rgba(29,59,124,.35);margin-bottom:1.3rem}
.xs-count .xs-cn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:3.4rem;padding:.35rem .5rem;border-radius:.7rem;background:linear-gradient(160deg,var(--navy-800),var(--navy-950));color:var(--gold-300);font-weight:900;font-size:1.45rem;line-height:1}
.xs-count .xs-cn small{font-size:.58rem;letter-spacing:.14em;color:#c8d6ee;margin-top:.2rem;font-weight:700}
.xs-count p{margin:0;font-size:.9rem;line-height:1.35;color:var(--navy-900);font-weight:700}
.xs-count p span{display:block;font-weight:600;color:#4a5b7c;font-size:.82rem}

/* ---------- HERO ---------- */
.xs-hero{position:relative;overflow:hidden;background:
  radial-gradient(1200px 600px at 85% 20%,rgba(255,255,255,.9),transparent 60%),
  radial-gradient(900px 500px at 10% 100%,rgba(200,223,242,.9),transparent 60%),
  linear-gradient(180deg,var(--ice-50) 0%,var(--ice-100) 55%,#f4f8fc 100%);
  padding:3.25rem 0 5.5rem}
@media(min-width:1024px){.xs-hero{padding:4.25rem 0 6.5rem}}
.xs-hero-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:1024px){.xs-hero-grid{grid-template-columns:1.12fr .88fr;gap:3rem}.xs-hero .xs-ctas{flex-wrap:nowrap}}
.xs-hero-pic{position:relative;border-radius:2rem;padding:10px;background:linear-gradient(145deg,#fff,var(--silver-100) 40%,var(--silver-300) 70%,#fff);box-shadow:0 40px 80px -30px rgba(19,40,92,.55),0 0 0 1px rgba(201,162,74,.35)}
.xs-hero-pic img{display:block;width:100%;height:auto;border-radius:1.55rem;aspect-ratio:16/10;object-fit:cover}
.xs-hero-pic::before{content:"";position:absolute;inset:-18px;border-radius:2.6rem;background:radial-gradient(closest-side,rgba(226,194,109,.35),transparent);z-index:-1;filter:blur(18px)}
.xs-tag{position:absolute;display:flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--silver-300);border-radius:1rem;padding:.6rem .85rem;box-shadow:0 14px 30px -14px rgba(19,40,92,.5);font-size:.82rem;font-weight:700;color:var(--navy-900);line-height:1.25}
.xs-tag b{display:block;font-size:1rem;color:var(--wine-700)}
.xs-tag .xs-ico{width:2.1rem;height:2.1rem;border-radius:.7rem;display:grid;place-items:center;background:linear-gradient(145deg,var(--navy-800),var(--navy-950));color:var(--gold-300);font-size:1rem;flex:none}
.xs-tag-a{left:-14px;bottom:28px}.xs-tag-b{right:-10px;top:24px}
@media(max-width:640px){.xs-tag-a{left:8px;bottom:14px}.xs-tag-b{right:8px;top:14px}.xs-tag{font-size:.74rem}}
.xs-hero-pic .xs-ribbon{position:absolute;top:0;left:2.2rem;background:linear-gradient(180deg,var(--wine-700),var(--wine-900));color:var(--gold-300);font-weight:900;font-size:.72rem;letter-spacing:.14em;padding:1.1rem .55rem .9rem;border-radius:0 0 .5rem .5rem;writing-mode:vertical-rl;text-transform:uppercase;box-shadow:0 10px 20px -8px rgba(77,10,26,.7)}

/* Full-bleed hero variant (Weihnachtswerbung-Seite) */
.xs-hero-bleed{position:relative;overflow:hidden;min-height:640px;display:flex;align-items:center;padding:4rem 0 6rem;background:var(--ice-100)}
.xs-hero-bleed .xs-bg{position:absolute;inset:0;z-index:0}
.xs-hero-bleed .xs-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.xs-hero-bleed .xs-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(238,246,252,.97) 0%,rgba(238,246,252,.92) 34%,rgba(238,246,252,.55) 55%,rgba(238,246,252,0) 75%)}
@media(max-width:900px){.xs-hero-bleed .xs-bg::after{background:linear-gradient(180deg,rgba(238,246,252,.94) 0%,rgba(238,246,252,.88) 60%,rgba(238,246,252,.6) 100%)}}
.xs-hero-bleed .xs-copy{max-width:40rem}

/* ---------- Trust strip ---------- */
.xs-trust{background:#fff;border-top:1px solid var(--silver-300);border-bottom:1px solid var(--silver-300)}
.xs-trust ul{max-width:1280px;margin:0 auto;padding:1rem 1.5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem;list-style:none;font-weight:700;color:var(--navy-900);font-size:.92rem}
.xs-trust li span{color:var(--gold-600);margin-right:.4rem}

/* ---------- Nostalgia (dark navy) ---------- */
.xs-dark{position:relative;overflow:hidden;color:#e8eef8;background:radial-gradient(900px 500px at 20% 0%,rgba(29,59,124,.65),transparent 60%),radial-gradient(700px 400px at 100% 100%,rgba(110,16,38,.45),transparent 60%),linear-gradient(160deg,var(--navy-900),var(--navy-950))}
.xs-dark .xs-h2{color:#fff}.xs-dark .xs-sub,.xs-dark p{color:#cfdbee}
.xs-dark .xs-eyebrow{color:var(--gold-400)}
.xs-story{padding:5rem 0}
.xs-story-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){.xs-story-grid{grid-template-columns:.95fr 1.05fr;gap:4rem}}
.xs-story-pics{position:relative;min-height:440px}
.xs-story-pics figure{margin:0;position:absolute;border-radius:1.4rem;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);border:1px solid rgba(226,194,109,.4)}
.xs-story-pics figure img{display:block;width:100%;height:100%;object-fit:cover}
.xs-story-pics .p1{left:0;top:0;width:80%;aspect-ratio:16/11}
.xs-story-pics .p2{right:0;bottom:0;width:44%;aspect-ratio:1/1;border:6px solid var(--navy-950);outline:1px solid rgba(226,194,109,.55)}
@media(max-width:959px){.xs-story-pics{min-height:0;aspect-ratio:16/12}}
.xs-quote{font-family:var(--xs-serif);font-style:italic;font-size:1.35rem;line-height:1.5;color:#fff;border-left:3px solid var(--gold-500);padding:.2rem 0 .2rem 1.2rem;margin:1.6rem 0}
.xs-story p{font-size:1.08rem;line-height:1.75}

/* ---------- Gallery ---------- */
.xs-gallery{padding:5rem 0 4.5rem;background:linear-gradient(180deg,#fff 0%,var(--ice-50) 100%);position:relative;overflow:hidden}
.xs-gal{display:grid;gap:1rem;margin-top:2.4rem;grid-template-columns:1fr}
@media(min-width:700px){.xs-gal{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.xs-gal{grid-template-columns:repeat(4,1fr);grid-auto-rows:210px}
  .xs-gal .g-big{grid-column:span 2;grid-row:span 2}.xs-gal .g-wide{grid-column:span 2}}
.xs-gal figure{position:relative;margin:0;border-radius:1.3rem;overflow:hidden;background:var(--navy-900);box-shadow:0 18px 40px -22px rgba(19,40,92,.6);isolation:isolate;min-height:220px}
.xs-gal figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.xs-gal figure:hover img{transform:scale(1.06)}
.xs-gal figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,19,49,.82) 100%);z-index:1}
.xs-gal figcaption{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:2;color:#fff;font-weight:800;font-size:1rem;line-height:1.25}
.xs-gal figcaption span{display:block;font-weight:600;font-size:.8rem;color:var(--gold-300);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.2rem}
.xs-gal .g-big figcaption{font-size:1.3rem}
.xs-swatches{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.2rem}
.xs-swatches span{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:700;color:var(--navy-900);background:#fff;border:1px solid var(--silver-300);padding:.3rem .7rem .3rem .35rem;border-radius:999px}
.xs-swatches i{width:1.1rem;height:1.1rem;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* ---------- Urgency / loss aversion ---------- */
.xs-urgent{padding:4.75rem 0;background:linear-gradient(180deg,var(--ice-50),#fff);position:relative;overflow:hidden}
.xs-time{display:grid;gap:1rem;margin-top:2.2rem}
@media(min-width:900px){.xs-time{grid-template-columns:repeat(3,1fr)}}
.xs-tc{position:relative;background:#fff;border:1px solid var(--silver-300);border-radius:1.4rem;padding:1.6rem 1.5rem 1.5rem;box-shadow:0 14px 34px -24px rgba(19,40,92,.6)}
.xs-tc .xs-tw{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ice-500)}
.xs-tc .xs-tn{font-size:3rem;font-weight:900;letter-spacing:-.04em;color:var(--navy-900);line-height:1;margin:.4rem 0 .2rem}
.xs-tc .xs-tn small{font-size:1rem;font-weight:800;letter-spacing:0;color:#4a5b7c;margin-left:.3rem}
.xs-tc p{margin:.4rem 0 0;color:#3b4d6e;line-height:1.55}
.xs-tc.best{background:linear-gradient(160deg,var(--navy-800),var(--navy-950));border-color:rgba(226,194,109,.6);color:#fff;transform:translateY(-6px);box-shadow:0 30px 50px -24px rgba(7,19,49,.8)}
.xs-tc.best .xs-tw{color:var(--gold-400)}.xs-tc.best .xs-tn{color:var(--gold-300)}.xs-tc.best .xs-tn small,.xs-tc.best p{color:#d6e3f3}
.xs-tc .xs-flag{position:absolute;top:-12px;right:1.2rem;background:linear-gradient(135deg,var(--gold-300),var(--gold-500));color:var(--navy-950);font-weight:900;font-size:.72rem;letter-spacing:.08em;padding:.3rem .7rem;border-radius:999px;text-transform:uppercase}
.xs-tc.late{background:var(--silver-50)}
.xs-tc.late .xs-tn{color:var(--wine-700)}
.xs-bar-track{height:10px;border-radius:999px;background:var(--silver-100);overflow:hidden;margin-top:1rem}
.xs-bar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-400),var(--gold-600))}
.xs-tc.late .xs-bar-track i{background:linear-gradient(90deg,var(--wine-700),var(--wine-800))}
.xs-tc.best .xs-bar-track{background:rgba(255,255,255,.12)}

/* ---------- Packages ---------- */
.xs-pack{padding:5rem 0;background:#fff;position:relative}
.xs-packs{display:grid;gap:1.2rem;margin-top:2.4rem}
@media(min-width:900px){.xs-packs{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.xs-pk{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,var(--ice-25));border:1px solid var(--silver-300);border-radius:1.6rem;overflow:hidden;box-shadow:0 20px 40px -30px rgba(19,40,92,.6);transition:transform .25s,box-shadow .25s}
.xs-pk:hover{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgba(19,40,92,.65)}
.xs-pk .pk-img{aspect-ratio:16/9;overflow:hidden}
.xs-pk .pk-img img{width:100%;height:100%;object-fit:cover;display:block}
.xs-pk .pk-body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.xs-pk h3{font-weight:900;font-size:1.3rem;color:var(--navy-900);margin:0 0 .4rem}
.xs-pk p{color:#3b4d6e;margin:0 0 1rem;line-height:1.55;font-size:.97rem}
.xs-pk ul{list-style:none;padding:0;margin:0 0 1.2rem;font-size:.92rem;color:var(--navy-900);font-weight:600}
.xs-pk ul li{padding:.25rem 0}.xs-pk ul li::before{content:"❄";color:var(--ice-500);margin-right:.5rem}
.xs-price{margin-top:auto;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.xs-price b{font-size:2.1rem;font-weight:900;color:var(--navy-900);letter-spacing:-.03em}
.xs-price span{color:#4a5b7c;font-weight:700;font-size:.9rem}
.xs-pk .xs-btn{width:100%}
.xs-pk.feat{border:2px solid var(--gold-500);box-shadow:0 30px 60px -30px rgba(167,129,46,.7)}
.xs-pk .pk-flag{position:absolute;top:1rem;left:1rem;z-index:2;background:linear-gradient(135deg,var(--wine-700),var(--wine-900));color:var(--gold-300);font-weight:900;font-size:.72rem;letter-spacing:.1em;padding:.35rem .75rem;border-radius:999px;text-transform:uppercase;box-shadow:0 8px 18px -8px rgba(77,10,26,.8)}
.xs-note{margin-top:1.4rem;text-align:center;color:#4a5b7c;font-size:.88rem}

/* ---------- Steps ---------- */
.xs-steps{display:grid;gap:1rem;margin-top:2.2rem;counter-reset:xs}
@media(min-width:900px){.xs-steps{grid-template-columns:repeat(4,1fr)}}
.xs-steps li{list-style:none;position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:1.2rem;padding:1.3rem 1.2rem 1.2rem 1.2rem}
.xs-steps li::before{counter-increment:xs;content:counter(xs);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:linear-gradient(135deg,var(--gold-300),var(--gold-500));color:var(--navy-950);font-weight:900;margin-bottom:.7rem}
.xs-steps strong{display:block;color:#fff;font-size:1.05rem;margin-bottom:.25rem}
.xs-steps span{color:#cfdbee;font-size:.93rem;line-height:1.5}

/* ---------- Final CTA ---------- */
.xs-final{position:relative;overflow:hidden;padding:5.5rem 0;color:#fff;isolation:isolate}
.xs-final .xs-bg{position:absolute;inset:0;z-index:-2}
.xs-final .xs-bg img{width:100%;height:100%;object-fit:cover}
.xs-final::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,19,49,.94) 0%,rgba(11,26,63,.85) 45%,rgba(11,26,63,.35) 100%)}
.xs-final .xs-h2{color:#fff;max-width:40rem}
.xs-final p{color:#d6e3f3;max-width:36rem;font-size:1.12rem;line-height:1.65}

/* ---------- Restyle bestehender Bausteine (sitewide) ---------- */
.cta-block:not(.cta-hero){background:var(--ice-50)!important;border-color:var(--silver-300)!important}
.cta-btn-req{background:linear-gradient(135deg,#f6e3a6,var(--gold-400) 45%,var(--gold-500))!important;color:var(--navy-950)!important}
.cta-block:not(.cta-hero) .cta-btn-call{background:var(--navy-900)!important}
.d-cta-req{background:var(--gold-400)!important;color:var(--navy-950)!important}
.xs-search{padding:3rem 0 2.5rem}.xs-search .idx-h2{color:#fff}.xs-search .w247-slabel{color:#e8eef8}
.xs-search .xs-wrap{max-width:1000px}
.xs-search .idx-prices strong{color:var(--gold-300)}
.xs-kontakt{background:radial-gradient(800px 400px at 50% 0%,rgba(29,59,124,.7),transparent 70%),linear-gradient(160deg,var(--navy-900),var(--navy-950))!important}
.xs-kontakt .xs-btn-gold{width:100%;height:3.6rem}
.xs-kontakt h2 em{font-family:var(--xs-serif);font-style:italic;color:var(--gold-300);font-weight:600}

/* Weihnachtswerbung-Seite: alte Klassen auf neue Palette umfärben */
.xmas-badge{background:linear-gradient(90deg,var(--gold-300),var(--gold-500))!important;color:var(--navy-950)!important}
.gold-text{color:var(--gold-700)!important;-webkit-text-fill-color:var(--gold-700)!important}
.card-xmas{border:1px solid var(--silver-300)!important;background:linear-gradient(180deg,#fff,var(--ice-25))!important}
.card-xmas:hover{box-shadow:0 20px 40px -14px rgba(19,40,92,.3)!important;border-color:var(--gold-500)!important}
.card-xmas h3{color:var(--navy-900)!important}
.btn-gold{background:linear-gradient(135deg,#f6e3a6,var(--gold-400) 45%,var(--gold-500))!important;color:var(--navy-950)!important}
.xs-ice-sec{background:linear-gradient(180deg,var(--ice-50),#fff)!important;border-color:var(--silver-300)!important}

@media (prefers-reduced-motion: reduce){
  .xs-snow i,.xs-btn-gold,.xs-btn-gold::after,.xs-bar .xs-dot{animation:none!important}
  .xs-snow{display:none}
}
.xs-c-navy{color:var(--navy-800)!important}
.xs-c-gold{color:var(--gold-600)!important}
.xs-story .xs-ctas .xs-btn-ghost{padding:1rem 1.2rem}
@media(min-width:640px){.xs-story .xs-btn{white-space:nowrap}}
.xs-story-grid>*{min-width:0}
@media(max-width:640px){.xs-kicker{display:inline-block;font-size:.68rem;letter-spacing:.1em;line-height:1.5}.xs-bar{font-size:.8rem}}

/* ==========================================================
   GLOBALE SAISON-AKZENTE (alle Seiten) – dezent, ohne Struktur-Änderung
   ========================================================== */
/* Saison-Leiste: kompakter, ohne Layout-Sprung */
.xs-bar{line-height:1.4;position:relative;z-index:51}
.xs-bar .xs-flake{color:var(--ice-500);margin-right:.35rem}
@media(max-width:640px){.xs-bar{padding:.5rem .75rem}.xs-bar .xs-opt{display:none}}
/* Navigation: silberne Linie mit Goldschimmer, Haupt-CTA in Nachtblau/Gold */
nav[aria-label="Hauptnavigation"]{border-bottom-color:var(--silver-300)!important;box-shadow:0 1px 0 rgba(201,162,74,.28),0 8px 24px -18px rgba(19,40,92,.35)}
nav[aria-label="Hauptnavigation"] .lg\:flex a:hover{color:var(--navy-800)!important;text-decoration:underline;text-decoration-color:var(--gold-500);text-underline-offset:6px;text-decoration-thickness:2px}
nav[aria-label="Hauptnavigation"] a[href="kontakt.html"].bg-slate-900{background:linear-gradient(135deg,var(--navy-800),var(--navy-950))!important;box-shadow:inset 0 0 0 1px rgba(226,194,109,.6),0 8px 18px -10px rgba(7,19,49,.7)}
nav[aria-label="Hauptnavigation"] a[href="kontakt.html"].bg-slate-900:hover{filter:brightness(1.12)}
.mnav-btn-primary{background:linear-gradient(135deg,var(--navy-800),var(--navy-950))!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(226,194,109,.6)}
/* Footer: Nachtblau mit Gold-Rot-Kante */
footer[role="contentinfo"]{background:linear-gradient(180deg,var(--navy-950),#050d24)!important;border-top:0!important;position:relative}
footer[role="contentinfo"]::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--navy-800),var(--gold-500) 30%,var(--gold-300) 50%,var(--gold-500) 70%,var(--wine-700))}
footer[role="contentinfo"] a:hover{color:var(--gold-300)!important}
/* CTA-Blöcke & Buttons: Gold-Akzent */
.cta-btn-req{box-shadow:0 10px 24px -12px rgba(167,129,46,.75),inset 0 1px 0 rgba(255,255,255,.6)}
.cta-btn-req:hover{filter:brightness(1.05)}
.cta-block:not(.cta-hero){border-top:1px solid var(--silver-300)!important;border-bottom:1px solid var(--silver-300)!important}
.cta-block .cta-lead strong{color:var(--navy-900)}
@media (prefers-reduced-motion: reduce){.xs-bar .xs-dot{animation:none!important}}
/* Produkt-/Stadtseiten-Hero (bg-slate-900): Nachtblau mit statischem Frostschimmer + Goldkante, Inhalt unverändert */
header.bg-slate-900{position:relative;overflow:hidden;background:radial-gradient(900px 420px at 85% 0%,rgba(29,59,124,.75),transparent 65%),radial-gradient(700px 380px at 0% 100%,rgba(110,16,38,.35),transparent 65%),linear-gradient(160deg,var(--navy-900),var(--navy-950))!important}
header.bg-slate-900::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent 70%),radial-gradient(1.2px 1.2px at 28% 70%,#e1eef9,transparent 70%),radial-gradient(2px 2px at 46% 18%,#fff,transparent 70%),radial-gradient(1.4px 1.4px at 63% 52%,#f1dc9e,transparent 70%),radial-gradient(1.8px 1.8px at 78% 28%,#fff,transparent 70%),radial-gradient(1.2px 1.2px at 90% 76%,#e1eef9,transparent 70%),radial-gradient(1.5px 1.5px at 55% 88%,#fff,transparent 70%)}
header.bg-slate-900::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold-500) 25%,var(--gold-300) 50%,var(--gold-500) 75%,transparent)}
header.bg-slate-900>*{position:relative;z-index:1}
header.bg-slate-900 a.bg-amber-400{background:linear-gradient(135deg,#f6e3a6 0%,var(--gold-400) 40%,var(--gold-500) 100%)!important;color:var(--navy-950)!important;box-shadow:0 14px 30px -12px rgba(167,129,46,.8),inset 0 1px 0 rgba(255,255,255,.6)}
header.bg-slate-900 a.bg-amber-400:hover{filter:brightness(1.05)}
/* Mobil: kürzere Saison-Leiste, H1 ohne Silbentrennung im Wort */
.xs-bar .xs-short{display:none}
@media(max-width:640px){.xs-bar .xs-long{display:none}.xs-bar .xs-short{display:inline}}
@media(max-width:639px){.xs-h1{font-size:clamp(1.7rem,8vw,2.4rem);overflow-wrap:normal;word-break:normal}}

/* ==========================================================
   SITEWIDE WEIHNACHTS-EFFEKTE (v20261006c)
   1) Dezente Schnee-Ebene über der ganzen Seite (fixed, klickneutral)
   2) Stärkerer Schnee in allen Hero-/Header-Bereichen
   3) Gold-Schimmer auf allen primären CTAs
   ========================================================== */
/* 1) Seitenweite Schnee-Ebene: unter Navigation (z-50) & Sticky-CTA, über Inhalt, pointer-events:none */
.xs-snow.xs-snow-page{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden;contain:strict}
.xs-snow.xs-snow-page i{filter:none;opacity:calc(var(--o,.6) * .85)}
@media(max-width:640px){.xs-snow.xs-snow-page i:nth-child(n+11){display:none}}
@media print{.xs-snow{display:none!important}}

/* 2) Hero-Schnee in Produkt-/Stadtseiten (header.bg-slate-900) und Angebote-Hero */
header.bg-slate-900>.xs-snow,.idx-hero>.xs-snow{position:absolute;inset:0;z-index:2;pointer-events:none}
.idx-hero{position:relative;overflow:hidden;background:radial-gradient(900px 420px at 85% 0%,rgba(29,59,124,.75),transparent 65%),radial-gradient(700px 380px at 0% 100%,rgba(110,16,38,.35),transparent 65%),linear-gradient(160deg,var(--navy-900),var(--navy-950))!important}
.idx-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold-500) 25%,var(--gold-300) 50%,var(--gold-500) 75%,transparent);pointer-events:none}
.idx-hero>*:not(.xs-snow){position:relative;z-index:1}
@media(max-width:640px){header.bg-slate-900>.xs-snow i:nth-child(n+19),.idx-hero>.xs-snow i:nth-child(n+19){display:none}}

/* 3) Gold-Schimmer auf allen primären CTAs (Hintergrund-Sweep – funktioniert auch bei Inline-Links, kein Layout-Eingriff) */
.cta-btn-req,.d-cta-req,.btn-gold,.w247-sbtn,
a.bg-amber-400,button.bg-amber-400,header.bg-slate-900 a.bg-amber-400,
button[type="submit"].from-amber-400{
  background-color:var(--gold-400)!important;
  background-image:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.78) 50%,rgba(255,255,255,0) 58%),linear-gradient(135deg,#f6e3a6 0%,var(--gold-400) 40%,var(--gold-500) 75%,#d9b65c 100%)!important;
  background-size:300% 100%,100% 100%!important;background-repeat:no-repeat!important;background-position:var(--xs-sp,100%) 0,0 0!important;
  color:var(--navy-950)!important;
  box-shadow:0 12px 28px -12px rgba(167,129,46,.8),inset 0 0 0 1px rgba(127,97,30,.22),inset 0 1px 0 rgba(255,255,255,.65);
  animation:xs-sweep 4.5s ease-in-out infinite,xs-glow 3.2s ease-in-out infinite}
.cta-btn-req:hover,.d-cta-req:hover,.btn-gold:hover,.w247-sbtn:hover,a.bg-amber-400:hover,button.bg-amber-400:hover,button[type="submit"].from-amber-400:hover{filter:brightness(1.06)}
/* Primärer CTA im Mobilmenü (Nachtblau/Gold) bekommt einen silbernen Schimmer */
.mnav-btn-primary{background-image:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(241,220,158,.38) 50%,rgba(255,255,255,0) 58%),linear-gradient(135deg,var(--navy-800),var(--navy-950))!important;background-size:300% 100%,100% 100%!important;background-repeat:no-repeat!important;background-position:var(--xs-sp,100%) 0,0 0!important;animation:xs-sweep 5s ease-in-out infinite}
nav[aria-label="Hauptnavigation"] a[href="kontakt.html"].bg-slate-900{background-image:linear-gradient(100deg,rgba(255,255,255,0) 42%,rgba(241,220,158,.4) 50%,rgba(255,255,255,0) 58%),linear-gradient(135deg,var(--navy-800),var(--navy-950))!important;background-size:300% 100%,100% 100%!important;background-repeat:no-repeat!important;background-position:var(--xs-sp,100%) 0,0 0!important;animation:xs-sweep 5s ease-in-out infinite}
/* Sweep über registrierte Custom Property – greift auch dort, wo ältere Regeln background !important setzen */
@property --xs-sp{syntax:"<percentage>";inherits:false;initial-value:100%}
@keyframes xs-sweep{0%,55%{--xs-sp:100%}100%{--xs-sp:0%}}
/* xs-glow-Pulse nur auf großen CTAs, kleine Nav-/Leisten-Buttons nur Schimmer */
.d-cta-req,.w247-sbtn,nav a.bg-amber-400{animation:xs-sweep 4.5s ease-in-out infinite}

/* 4) Bewegung reduzieren: Schnee & Schimmer komplett aus */
@media (prefers-reduced-motion: reduce){
  .xs-snow,.xs-snow.xs-snow-page{display:none!important}
  .cta-btn-req,.d-cta-req,.btn-gold,.w247-sbtn,a.bg-amber-400,button.bg-amber-400,header.bg-slate-900 a.bg-amber-400,button[type="submit"].from-amber-400,
  .mnav-btn-primary,nav[aria-label="Hauptnavigation"] a[href="kontakt.html"].bg-slate-900,.xs-btn-gold,.xs-btn-gold::after{animation:none!important}
}
/* Hero-Schnee: Fallstrecke an Headerhöhe angepasst (dichter & sichtbarer als 115vh) */
.xs-snow.xs-snow-hero i{animation-name:xs-fall-hero,xs-sway;opacity:calc(var(--o,.85) + .05)}
@keyframes xs-fall-hero{0%{transform:translate3d(0,-20px,0)}100%{transform:translate3d(var(--dx,24px),780px,0)}}