/* =====================================================================
   WEIHNACHTSKARTEN-AKTION — weihnachtskarten.html
   Leitmotiv: Post, die ankommt. Karte öffnet sich im Hero beim Scrollen,
   Ablauf als Postroute, Konfigurator mit Live-Kartenvorschau.
   ===================================================================== */
@property --o{syntax:'<number>'; inherits:true; initial-value:0;}
@property --f{syntax:'<number>'; inherits:true; initial-value:0;}

.xmas{--paper:#f3eee4; --paper2:#e9e2d4; --ink:#16161c; --red:#B02828;}

/* ---------- HERO ---------- */
.xh{position:relative; padding:0; height:240vh; background:var(--bg);}
.xh-sticky{position:sticky; top:0; height:100vh; display:flex; align-items:center; overflow:hidden;}
.xh::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 45% at 72% 48%, rgba(139,28,28,0.20), transparent 70%);}
.xh-snow{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.75;}
.xh-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,5vw,80px); align-items:center; padding-top:70px;}
.xh-eyebrow{display:inline-flex; align-items:center; gap:12px; margin-bottom:26px;}
.xh-eyebrow .rec{width:8px; height:8px; border-radius:50%; background:var(--gold-bright); animation:blink 2s ease-in-out infinite;}
.xh-title{font-size:clamp(2.8rem,6.4vw,6.4rem); line-height:.98; letter-spacing:-0.03em; margin-bottom:28px;}
.xh-title .acc{color:var(--gold-bright);}
.xh-lead{font-size:clamp(1rem,1.3vw,1.15rem); max-width:520px; margin-bottom:34px;}
.xh-lead b{color:#fff; font-weight:500;}
.xh-cta{display:flex; gap:14px; flex-wrap:wrap;}
.xh-deadline{display:flex; align-items:center; gap:16px; margin-top:40px;}
.xd-stamp{width:62px; height:62px; border-radius:50%; border:1.5px dashed rgba(176,40,40,0.8); color:var(--gold-bright);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; transform:rotate(-10deg);
  font-family:"Space Grotesk",sans-serif; flex-shrink:0;}
.xd-stamp span{font-size:20px; font-weight:700;}
.xd-stamp small{font-size:9px; letter-spacing:.2em; margin-top:3px;}
.xd-txt{display:flex; flex-direction:column; font-size:13px; color:var(--silver);}
.xd-txt b{font-family:"Space Grotesk",sans-serif; font-weight:600; color:#fff; font-size:14px;}

.xh-stage{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; perspective:2200px; min-height:420px;}
.xh-hint{margin-top:34px; font-family:"Space Grotesk",sans-serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,0.4); transition:opacity .4s;}

/* Einblenden beim Laden */
.xh-copy > *{opacity:0; transform:translateY(26px); animation:xIn 1.1s var(--ease-expo) forwards;}
.xh-copy > *:nth-child(2){animation-delay:.1s} .xh-copy > *:nth-child(3){animation-delay:.2s}
.xh-copy > *:nth-child(4){animation-delay:.3s} .xh-copy > *:nth-child(5){animation-delay:.4s}
.xh-stage{opacity:0; animation:xCard 1.6s var(--ease-expo) .25s forwards;}
@keyframes xIn{to{opacity:1; transform:none;}}
@keyframes xCard{from{opacity:0; transform:translateY(60px) rotateX(18deg) rotateZ(-6deg) scale(.9);} to{opacity:1; transform:none;}}

@media (max-width:900px){
  .xh{height:auto;}
  .xh-sticky{position:relative; height:auto; min-height:100vh; padding:120px 0 80px;}
  .xh-grid{grid-template-columns:1fr; padding-top:0;}
  .xh-stage{order:-1; min-height:0;}
  .xh-hint{display:none;}
}

/* =====================================================================
   KARTE (Komponente .kc) — Papier-Objekt, unabhängig vom Theme
   --o: Klappkarte offen (0..1)   --f: Postkarte gewendet (0..1)
   ===================================================================== */
.kc{--w:min(440px,82vw); --ar:1.4095; position:relative; width:var(--w); aspect-ratio:var(--ar);
  transform-style:preserve-3d; container-type:inline-size;}
.kc[data-format="dl"]{--ar:2.1212;}
.kc-hero{--w:min(460px,38vw);}
@media (max-width:900px){ .kc-hero{--w:min(360px,72vw); transition:width 1.6s var(--ease-expo);} .kc-hero.is-open{--w:min(300px,58vw);} }
.kc-preview{--w:100%;}
.kc[data-format="dl"].kc-preview{--w:100%;}

.kc-body{position:absolute; inset:0; transform-style:preserve-3d;
  transform:translateX(calc(var(--o) * 50%)) scale(calc(1 - var(--o) * .32)) rotateY(calc(var(--f) * 180deg)) rotateX(calc(var(--o) * 6deg));
  transition:--o 1.1s var(--ease-expo), --f 1s var(--ease-expo);}
@media (min-width:901px){ .kc-hero .kc-body{transition:none;} }
@media (max-width:900px){ .kc-hero .kc-body{transition-duration:1.8s;} }
.kc.is-open{--o:1;} .kc.is-turned{--f:1;}

.kc-face{position:absolute; inset:0; border-radius:6px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--paper); color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 30px 60px -20px rgba(0,0,0,.6), 0 12px 24px -12px rgba(0,0,0,.45);}
.kc-face::after{content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .45 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");}

.kc-cover{position:absolute; inset:0; transform-style:preserve-3d; transform-origin:left center;
  transform:rotateY(calc(var(--o) * -172deg));}
.kc-coverback{transform:rotateY(180deg);}
.kc-inside{transform:translateZ(-1px);}
.kc-back{transform:rotateY(180deg);}
/* Format-Logik */
.kc:not([data-format="klapp"]) .kc-coverback, .kc:not([data-format="klapp"]) .kc-inside{display:none;}
.kc[data-format="klapp"] .kc-back{display:none;}
.kc[data-format="klapp"] .kc-front{border-radius:2px 6px 6px 2px;}
.kc[data-format="klapp"] .kc-front::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; z-index:3;
  background:linear-gradient(90deg, rgba(0,0,0,.18), transparent);}

/* --- Motive (Vorderseite) --- */
.kc-motif{position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease-expo);}
.kc[data-motif="typo"] .m-typo, .kc[data-motif="illu"] .m-illu,
.kc[data-motif="foto"] .m-foto, .kc[data-motif="team"] .m-foto{opacity:1;}
.kc-co{position:absolute; left:7cqw; bottom:6cqw; font-family:"Space Grotesk",sans-serif; font-weight:600;
  font-size:3.1cqw; letter-spacing:.14em; text-transform:uppercase; z-index:2; max-width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* Typografisch */
.m-typo{background:var(--paper); padding:7cqw;}
.m-typo .t-big{font-family:"Space Grotesk",sans-serif; font-weight:600; letter-spacing:-0.045em; line-height:.86;
  font-size:15.5cqw; color:var(--ink);}
.m-typo .t-big i{font-style:normal; color:var(--red);}
.m-typo .t-sub{margin-top:3.5cqw; font-family:"Space Grotesk",sans-serif; font-size:3.2cqw; color:#55555f; letter-spacing:.02em;}
.m-typo .t-ring{position:absolute; right:7cqw; top:7cqw; width:13cqw; height:13cqw; border-radius:50%; border:.5cqw solid var(--red);
  display:flex; align-items:center; justify-content:center;}
.m-typo .t-ring::after{content:""; width:3.4cqw; height:3.4cqw; border-radius:50%; background:var(--red);}
.kc[data-motif="typo"] .kc-co{color:var(--ink);}
.kc[data-format="dl"] .m-typo .t-big{font-size:11cqw;}

/* Illustration */
.m-illu{background:linear-gradient(180deg,#0c0f1e 0%, #1a1e35 62%, #2a2c45 100%);}
.m-illu svg{position:absolute; inset:0; width:100%; height:100%;}
.m-illu .i-txt{position:absolute; left:7cqw; top:6.5cqw; font-family:"Space Grotesk",sans-serif; font-weight:600; color:#fff;
  font-size:8.4cqw; letter-spacing:-0.035em; line-height:.92; z-index:2;}
.m-illu .i-txt i{font-style:normal; color:#ff6a5c;}
.kc[data-motif="illu"] .kc-co{color:var(--ink);}

/* Foto */
.m-foto{background:#111;}
.m-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.75) contrast(1.05) brightness(.82);}
.m-foto::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,16,.15) 30%, rgba(10,10,16,.78) 100%);}
.m-foto .f-txt{position:absolute; left:7cqw; bottom:13cqw; z-index:2; color:#fff; font-family:"Space Grotesk",sans-serif;
  font-weight:600; font-size:8.4cqw; letter-spacing:-0.035em; line-height:.92;}
.m-foto .f-txt i{font-style:normal; color:#ff6a5c;}
.m-foto .f-chip{position:absolute; right:5cqw; top:5cqw; z-index:2; font-family:"Space Grotesk",sans-serif; font-size:2.5cqw;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(10,10,16,.55); border:1px solid rgba(255,255,255,.3);
  padding:1.4cqw 2.6cqw; border-radius:99px; opacity:0; transition:opacity .4s;}
.kc[data-motif="team"] .f-chip{opacity:1;}
.kc[data-motif="foto"] .kc-co, .kc[data-motif="team"] .kc-co{color:rgba(255,255,255,.85);}

/* Innen links (Rückseite Cover) */
.kc-coverback{background:var(--paper2);}
.kc-coverback .cb-pat{position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(circle at 1px 1px, rgba(176,40,40,.35) 1px, transparent 1.4px); background-size:5cqw 5cqw;}
.kc-coverback .cb-mark{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:14cqw; height:14cqw;
  border-radius:50%; border:.5cqw solid var(--red); display:flex; align-items:center; justify-content:center; background:var(--paper2);}
.kc-coverback .cb-mark::after{content:""; width:3.6cqw; height:3.6cqw; border-radius:50%; background:var(--red);}

/* Innen rechts: Grusstext */
.kc-inside{padding:8cqw 8cqw 7cqw;}
.kc-inside .in-l{font-family:"Space Grotesk",sans-serif; font-size:2.6cqw; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:4cqw;}
.kc-inside .in-h{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:7cqw; letter-spacing:-0.035em; line-height:1; color:var(--ink); margin-bottom:4cqw;}
.kc-inside .in-p{font-family:"Inter",sans-serif; font-weight:400; font-size:3.2cqw; line-height:1.5; color:#4a4a55;}
.kc-inside .in-s{position:absolute; left:8cqw; bottom:7cqw; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:3.4cqw; color:var(--ink);}

/* Rückseite Postkarte */
.kc-back{display:grid; grid-template-columns:1fr 1fr; padding:6cqw;}
.kc-back .bk-l{padding-right:5cqw; border-right:1px solid rgba(22,22,28,.15);}
.kc-back .bk-l .in-h{font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:5cqw; letter-spacing:-0.03em; line-height:1.02; color:var(--ink); margin-bottom:3cqw;}
.kc-back .bk-l .in-p{font-size:2.6cqw; line-height:1.5; color:#4a4a55; font-family:"Inter",sans-serif; font-weight:400;}
.kc-back .bk-l .in-s{margin-top:3cqw; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:2.9cqw; color:var(--ink);}
.kc-back .bk-r{position:relative; padding-left:5cqw;}
.kc-back .bk-stamp{position:absolute; right:0; top:0; width:13cqw; height:15cqw; border:.4cqw dashed rgba(176,40,40,.7);
  display:flex; align-items:center; justify-content:center; font-family:"Space Grotesk",sans-serif; font-size:2.2cqw; letter-spacing:.1em; color:var(--red);}
.kc-back .bk-lines{position:absolute; left:5cqw; right:0; bottom:4cqw; display:flex; flex-direction:column; gap:5cqw;}
.kc-back .bk-lines span{height:1px; background:rgba(22,22,28,.25);}
.kc-back .bk-lines span:first-child{width:70%;}
.kc[data-format="dl"] .kc-back .bk-l .in-p{font-size:2cqw;}

/* ---------- ABLAUF: Postroute ---------- */
.xr{padding-top:clamp(90px,10vw,150px);}
.route{position:relative; padding-top:14px;}
.route-line{position:absolute; left:0; right:0; top:30px; width:100%; height:40px; overflow:visible;}
.route-line path{fill:none; stroke-width:1.4; vector-effect:non-scaling-stroke;}
.rl-bg{stroke:rgba(255,255,255,0.14); stroke-dasharray:6 7;}
.rl-fg{stroke:var(--gold-bright); stroke-width:2; stroke-dasharray:1000; stroke-dashoffset:calc(1000 - var(--rp,0) * 1000);}
.route-dot{position:absolute; top:43px; left:calc(var(--rp,0) * 100%); width:14px; height:14px; margin-left:-7px; border-radius:50%;
  background:var(--gold-bright); box-shadow:0 0 0 6px rgba(176,40,40,.18), 0 0 24px rgba(176,40,40,.6);}
.route-steps{list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); position:relative;}
.rs-pm{width:62px; height:62px; border-radius:50%; background:var(--bg); border:1.5px dashed rgba(255,255,255,0.3);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; margin-bottom:30px;
  font-family:"Space Grotesk",sans-serif; transition:border-color .5s, color .5s, transform .6s var(--ease-back); color:#fff;}
.rs-pm b{font-size:17px; font-weight:700;}
.rs-pm small{font-size:7.5px; letter-spacing:.16em; margin-top:4px; color:var(--text-muted);}
.route-steps li.on .rs-pm{border-color:var(--gold-bright); border-style:solid; transform:rotate(-8deg) scale(1.04);}
.route-steps li.on .rs-pm small{color:var(--gold-bright);}
.route-steps h4{font-size:clamp(1.3rem,1.8vw,1.6rem); margin-bottom:10px;}
.route-steps p{font-size:13.5px;}
@media (max-width:900px){
  .route-line, .route-dot{display:none;}
  .route-steps{grid-template-columns:1fr; gap:0; border-left:1.5px dashed rgba(255,255,255,0.18); margin-left:30px;}
  .route-steps li{position:relative; padding:0 0 38px 52px;}
  .rs-pm{position:absolute; left:-32px; top:-6px; margin:0;}
}

/* ---------- KONFIGURATOR ---------- */
.xc{padding-top:clamp(90px,10vw,150px);}
.xc-grid{display:grid; grid-template-columns:1.12fr 1fr; gap:clamp(30px,4vw,60px); align-items:start;}
.xc-side{position:sticky; top:96px; display:flex; flex-direction:column; gap:16px;}
.config-opt{--accent:var(--gold-bright);}
.config-opt .co-sub{line-height:1.45;}
.config-opt > div:first-child{flex:1;}
.xc-base{border:1px solid var(--border-gold); background:rgba(139,28,28,0.07); border-radius:12px; padding:18px 18px 8px;}
.xc-base-top{display:flex; justify-content:space-between; gap:16px; align-items:baseline; margin-bottom:10px;}
.xc-base .co-name{font-family:"Space Grotesk",sans-serif; font-size:15px; color:#fff; font-weight:500;}
.xc-base .co-price{font-family:"Space Grotesk",sans-serif; font-size:15px; font-weight:700; color:#fff; white-space:nowrap;}
.xc-incl{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 18px;}
.xc-incl li{font-size:12.5px; color:var(--silver); padding:8px 0 8px 18px; position:relative; border-top:1px solid var(--border);}
.xc-incl li::before{content:"→"; position:absolute; left:0; color:var(--gold-bright); font-size:11px; font-weight:700;}
.xc-2col{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
.field input[type=number]{-moz-appearance:textfield;}
@media (max-width:640px){ .xc-incl, .xc-2col{grid-template-columns:1fr;} }

.xc-preview{border:1px solid var(--border); border-radius:16px; background:
  radial-gradient(80% 70% at 50% 40%, rgba(139,28,28,0.16), transparent 70%), var(--bg03); padding:18px 18px 16px; overflow:hidden;}
.xc-pv-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.xc-turn{font-family:"Space Grotesk",sans-serif; font-size:12px; color:#fff; background:none; border:1px solid rgba(255,255,255,0.25);
  border-radius:99px; padding:8px 14px; cursor:pointer; transition:all .3s var(--ease-expo);}
.xc-turn:hover{border-color:#fff; background:rgba(255,255,255,.06);}
.xc-pv-stage{perspective:1800px; display:flex; align-items:center; justify-content:center; padding:26px 8% 22px; min-height:260px;}
.kc-preview{transition:aspect-ratio .5s var(--ease-expo);}
.kc-preview.is-open{--w:74%;}
.kc-preview{transition:width .9s var(--ease-expo);}
.xc-pv-note{font-family:"Space Grotesk",sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); text-align:center;}
.xc-sum{position:static; padding:24px 22px;}
.xc-sum .cs-line{animation:xLine .45s var(--ease-expo);}
@keyframes xLine{from{opacity:0; transform:translateX(-8px);}}
.xc-excl{font-size:12px; line-height:1.55; color:var(--silver); margin-top:16px; padding:14px 14px; border-radius:10px;
  border:1px dashed rgba(255,255,255,0.18);}
.xc-excl b{color:#fff; font-weight:500;}
.xc-err{color:#ff6b6b; font-size:13px; margin-top:14px;}
.xc-small{font-size:12px; color:var(--text-muted); text-align:center;}
.xc-success{border:1px solid var(--border-gold); border-radius:16px; padding:34px 26px; text-align:center;
  background:linear-gradient(180deg, rgba(139,28,28,0.1), var(--bg03));}
.xs-stamp{display:inline-flex; width:64px; height:64px; border-radius:50%; border:1.5px dashed var(--gold-bright); color:var(--gold-bright);
  align-items:center; justify-content:center; font-size:24px; transform:rotate(-10deg); margin-bottom:18px;}
.xc-success h4{font-size:1.5rem; margin-bottom:10px;}
.xc-success p{font-size:13.5px;}
#cs-pulse{transition:transform .3s;}
.cs-tv.bump{animation:bump .5s var(--ease-back);}
@keyframes bump{40%{transform:scale(1.08); color:var(--gold-bright);}}

/* Mobile: Vorschau oben, dann Optionen, dann Zusammenfassung */
@media (max-width:980px){
  .xc-grid{grid-template-columns:1fr; gap:22px;}
  .xc-side{display:contents;}
  .xc-preview{order:0;} .xc-form{order:1;} .xc-sum, .xc-success{order:2;}
}

.xf{padding-top:clamp(90px,10vw,150px);}
.xend{padding-top:clamp(60px,8vw,110px);}

/* ---------- Bewegung reduziert ---------- */
@media (prefers-reduced-motion:reduce){
  .xh{height:auto;} .xh-sticky{position:relative; min-height:100vh;}
  .xh-copy > *, .xh-stage{animation:none; opacity:1; transform:none;}
  .kc-body{transition:none;}
}

/* ---------- WHITEMODE ---------- */
html[data-theme="light"] .xh-lead b, html[data-theme="light"] .xd-txt b,
html[data-theme="light"] .xc-base .co-name, html[data-theme="light"] .xc-base .co-price,
html[data-theme="light"] .xc-excl b, html[data-theme="light"] .rs-pm{color:var(--ink);}
html[data-theme="light"] .xh-hint{color:rgba(20,20,28,0.45);}
html[data-theme="light"] .rl-bg{stroke:rgba(20,20,28,0.18);}
html[data-theme="light"] .rs-pm{border-color:rgba(20,20,28,0.3);}
html[data-theme="light"] .route-steps{border-color:rgba(20,20,28,0.2);}
html[data-theme="light"] .xc-turn{color:var(--ink); border-color:rgba(20,20,28,0.25);}
html[data-theme="light"] .xc-excl{border-color:rgba(20,20,28,0.2);}
html[data-theme="light"] .xh-snow{opacity:.35; filter:invert(1);}
html[data-theme="light"] .kc-face{box-shadow:0 30px 60px -24px rgba(20,20,28,.35), 0 10px 20px -12px rgba(20,20,28,.25);}