/* Denkraum Adventskalender, im Look von Theiners Denkraum (Theme-Tokens --dr-*) */
.dra-root, .dra-modal, .dra-toast{
  --a-ink: var(--dr-ink, #102D36);
  --a-paper: var(--dr-paper, #F6F3ED);
  --a-surface: var(--dr-surface, #FFFFFF);
  --a-soft: var(--dr-soft, #EDF0EA);
  --a-mid: var(--dr-mid, #647579);
  --a-rule: var(--dr-rule, #DDD8CD);
  --a-dark: var(--dr-dark, #102D36);
  --a-dark-2: var(--dr-dark-2, #183A43);
  --a-on-dark-mid: rgba(255,255,255,.74);
  --a-dark-rule: rgba(255,255,255,.14);
  --a-accent: var(--dr-accent, #E56A47);
  --a-accent-hi: var(--dr-accent-hi, #FF7957);
  --a-mint: var(--dr-mint, #D9F3EA);
  --a-ok: var(--dr-ok, #1F7A55);
  --a-font: var(--dr-font, "Inter", ui-sans-serif, -apple-system, system-ui, "Segoe UI", Arial, sans-serif);
  font-family: var(--a-font);
}
.dra-root{
  position:relative; overflow:hidden; isolation:isolate;
  color:#fff; line-height:1.6; -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 360px at 85% -20%, rgba(229,106,71,.16), transparent 60%),
    radial-gradient(700px 420px at 0% 110%, rgba(255,255,255,.05), transparent 60%),
    var(--a-dark);
  border-radius:16px; padding:clamp(28px,4vw,48px) clamp(16px,4vw,40px); margin:0 0 2.5rem 0 !important; width:min(1120px, calc(100vw - 32px)); max-width:none; left:50%; transform:translateX(-50%);
}
.dra-root *, .dra-modal *{box-sizing:border-box}
.dra-snow{position:absolute; inset:0; pointer-events:none; z-index:-1; width:100%; height:100%}
.dra-loading{padding:60px 0; text-align:center; color:var(--a-on-dark-mid); font-weight:600}

/* Kopf */
.dra-head{max-width:760px; margin:0 0 26px}
.dra-kicker{display:flex; align-items:center; gap:12px; font-size:.8rem; font-weight:850; letter-spacing:.105em; text-transform:uppercase; color:var(--a-accent-hi); margin:0}
.dra-kicker::before{content:""; width:28px; height:2px; background:currentColor; flex:none}
.dra-kicker svg{width:14px; height:14px; fill:currentColor}
.dra-root h2.dra-title{font-family:inherit; font-weight:780; letter-spacing:-.045em; line-height:1.04; font-size:clamp(2rem,4.2vw,2.9rem); margin:18px 0 14px !important; color:#fff; text-wrap:balance}
.dra-sub{color:var(--a-on-dark-mid); font-size:1.05rem; margin:0; max-width:640px}
.dra-greet{margin:14px 0 0; color:#fff; font-weight:700; letter-spacing:-.01em}

/* Adventskerzen */
.dra-candles{display:flex; gap:10px; align-items:flex-end; margin:18px 0 0}
.dra-candle svg{width:16px; height:36px; display:block; overflow:visible}
.dra-candle rect{fill:rgba(255,255,255,.14); stroke:rgba(255,255,255,.22); stroke-width:1}
.dra-candle .wick{stroke:rgba(255,255,255,.35); stroke-width:1.4; stroke-linecap:round}
.dra-candle.on rect{fill:var(--a-paper); stroke:none}
.dra-candle.on .wick{stroke:var(--a-ink)}
.dra-candle .flame{fill:var(--a-accent-hi); transform-origin:10px 13px; animation:dra-flicker 2.4s ease-in-out infinite; filter:drop-shadow(0 0 6px rgba(255,121,87,.75))}
.dra-candle:nth-child(2) .flame{animation-delay:-.6s}
.dra-candle:nth-child(3) .flame{animation-delay:-1.2s}
.dra-candle:nth-child(4) .flame{animation-delay:-1.8s}
@keyframes dra-flicker{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.06,.94) rotate(-3deg)}60%{transform:scale(.95,1.05) rotate(2deg)}}

/* Hinweisbänder */
.dra-banner{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; justify-content:space-between;
  background:var(--a-dark-2); border:1px solid var(--a-dark-rule); border-radius:16px; padding:16px 20px; margin:0 0 16px; color:var(--a-on-dark-mid); font-size:.98rem}
.dra-banner > span{flex:1 1 280px}
.dra-banner strong{color:#fff}
.dra-banner .dra-btn{flex:none}

/* Fortschritt */
.dra-progress{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:4px 0 22px}
.dra-stars{display:flex; flex-wrap:wrap; gap:3px}
.dra-stars span{width:13px; height:13px; display:block; opacity:.22; transition:opacity .4s, transform .4s}
.dra-stars span.on{opacity:1; transform:scale(1.1)}
.dra-stars svg{width:100%; height:100%; fill:var(--a-accent-hi)}
.dra-progress-label{font-size:.72rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--a-on-dark-mid)}

/* Raster */
.dra-grid{display:grid; grid-template-columns:repeat(6, 1fr); grid-auto-rows:minmax(96px, auto); grid-auto-flow:dense; gap:10px}
.dra-door{position:relative; perspective:900px; min-height:96px; border:0; padding:0; background:none; cursor:pointer; font:inherit; color:inherit; border-radius:14px; -webkit-tap-highlight-color:transparent}
.dra-door.big{grid-column:span 2; grid-row:span 2}
.dra-door.wide{grid-column:span 2}
.dra-door:focus-visible{outline:3px solid var(--a-accent); outline-offset:3px}

.dra-inside{position:absolute; inset:0; border-radius:14px; background:var(--a-paper); color:var(--a-ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px; text-align:center;
  box-shadow:inset 0 0 0 1px var(--a-rule), inset 0 8px 18px rgba(16,45,54,.10)}
.dra-inside svg{width:24px; height:24px; stroke:var(--a-accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.dra-inside small{font-size:.74rem; font-weight:700; letter-spacing:-.005em; line-height:1.25; color:var(--a-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

.dra-front{position:absolute; inset:0; border-radius:14px; transform-origin:left center; transition:transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
  display:flex; align-items:flex-end; justify-content:flex-start; padding:12px 14px; backface-visibility:hidden;
  background-color:var(--dra-c, var(--a-dark-2)); border:1px solid var(--a-dark-rule);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M28 18v20M18 28h20M21 21l14 14M35 21L21 35'/%3E%3C/g%3E%3C/svg%3E")}
.dra-front::after{content:""; position:absolute; right:12px; top:50%; width:6px; height:6px; border-radius:50%; background:var(--a-accent); transform:translateY(-50%); opacity:.85}
.dra-num{font-size:clamp(1.7rem, 3.6vw, 2.3rem); font-weight:800; letter-spacing:-.05em; line-height:1; color:#fff}
.dra-door.big .dra-num{font-size:clamp(3rem, 8vw, 5rem)}
.dra-lock{position:absolute; right:10px; top:10px; width:13px; height:13px; stroke:rgba(255,255,255,.45); fill:none; stroke-width:1.8}

.dra-door:hover .dra-front{transform:rotateY(-8deg); border-color:rgba(255,255,255,.28)}
.dra-door.is-open .dra-front{transform:rotateY(-74deg); box-shadow:8px 6px 18px -6px rgba(0,0,0,.5)}
.dra-door.is-open:hover .dra-front{transform:rotateY(-80deg)}
.dra-door.is-open .dra-inside{padding-left:30%}
.dra-door.is-open .dra-lock{display:none}
.dra-door.is-locked .dra-inside{visibility:hidden}
.dra-door.is-locked .dra-num{color:rgba(255,255,255,.82)}

.dra-door.is-today .dra-front{border:2px solid var(--a-accent)}
.dra-door.is-today:not(.is-open) .dra-front{animation:dra-glow 2.8s ease-in-out infinite}
.dra-ribbon{position:absolute; top:-9px; left:14px; background:var(--a-accent); color:#fff; font-size:.64rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; z-index:3}
.dra-badge{position:absolute; top:7px; right:7px; width:22px; height:22px; z-index:3; border-radius:50%; background:var(--a-accent); display:grid; place-items:center; animation:dra-pop .5s cubic-bezier(.3,1.6,.5,1)}
.dra-badge svg{width:12px; height:12px; fill:#fff}

.dra-door.shake{animation:dra-shake .45s}
@keyframes dra-glow{0%,100%{box-shadow:0 0 0 0 rgba(229,106,71,.0)}50%{box-shadow:0 0 0 6px rgba(229,106,71,.18)}}
@keyframes dra-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px) rotate(-1deg)}40%{transform:translateX(5px) rotate(1deg)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes dra-pop{0%{transform:scale(0)}100%{transform:scale(1)}}

/* Buttons im Denkraum-Stil */
.dra-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--a-accent); border-radius:999px; padding:.75rem 1.25rem;
  font:800 .78rem/1.2 var(--a-font); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; text-decoration:none; white-space:nowrap;
  background:var(--a-accent); color:#fff; transition:transform .15s, background .15s, border-color .15s}
.dra-btn:hover{transform:translateY(-1px); background:var(--a-accent-hi); border-color:var(--a-accent-hi); color:#fff}
.dra-root a.dra-btn, .dra-modal a.dra-btn, .dra-root a.dra-btn:visited, .dra-modal a.dra-btn:visited{color:#fff; text-decoration:none}
.dra-root a.dra-btn.ghost{color:#fff}
.dra-modal a.dra-btn.ghost, .dra-gate a.dra-btn.ghost{color:var(--a-ink)}
.dra-btn.ghost{background:transparent; border-color:currentColor; color:#fff}
.dra-btn.ghost:hover{background:rgba(255,255,255,.08); color:#fff; border-color:#fff}
.dra-btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.dra-btn[disabled]{opacity:.6; cursor:default}

.dra-foot{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start; align-items:center; margin-top:26px; padding-top:22px; border-top:1px solid var(--a-dark-rule)}

.dra-reward{margin:0 0 20px; background:var(--a-mint); color:var(--a-ink); border-radius:16px; padding:18px 20px}
.dra-reward h3{font-family:inherit; font-weight:780; letter-spacing:-.03em; font-size:1.25rem; line-height:1.15; margin:0 0 6px; color:var(--a-ink)}
.dra-reward p{margin:0}

/* Toast */
.dra-toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%, 30px); opacity:0; z-index:100001; max-width:min(92vw, 440px);
  background:var(--a-dark); color:#fff; border:1px solid var(--a-dark-rule); border-left:4px solid var(--a-accent); border-radius:12px; padding:13px 18px; font-size:.95rem; font-weight:600; text-align:left;
  box-shadow:0 14px 34px rgba(13,27,26,.35); transition:transform .3s, opacity .3s; pointer-events:none}
.dra-toast.show{transform:translate(-50%, 0); opacity:1}

/* Modal */
.dra-modal{position:fixed; inset:0; z-index:100000; display:flex; align-items:flex-end; justify-content:center; padding:0;
  background:rgba(13,27,26,.62); opacity:0; transition:opacity .25s; color:var(--a-ink); line-height:1.6}
.dra-modal.show{opacity:1}
.dra-card{position:relative; width:100%; max-width:700px; max-height:92vh; overflow:auto; background:var(--a-paper); color:var(--a-ink);
  border-radius:16px 16px 0 0; transform:translateY(40px); transition:transform .35s cubic-bezier(.2,.8,.2,1); box-shadow:0 30px 60px rgba(13,27,26,.4); overscroll-behavior:contain}
.dra-modal.show .dra-card{transform:none}
@media (min-width:640px){ .dra-modal{align-items:center; padding:24px} .dra-card{border-radius:16px} }

.dra-card-top{position:relative; background:var(--a-dark); color:#fff; padding:24px 1rem 24px; overflow:hidden}
@media (min-width:640px){ .dra-card-top{padding:30px 34px 28px} }
.dra-card-top::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 200px at 100% 0%, rgba(229,106,71,.20), transparent 60%)}
.dra-card-top > *{position:relative}
.dra-close{position:absolute !important; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:1px solid var(--a-dark-rule); cursor:pointer; background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; z-index:2}
.dra-close:hover{background:rgba(255,255,255,.08)}
.dra-close svg{width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none}
.dra-date{display:flex; align-items:center; gap:12px; font-size:.75rem; font-weight:850; letter-spacing:.105em; text-transform:uppercase; color:var(--a-accent-hi); margin:0 0 12px}
.dra-date::before{content:""; width:28px; height:2px; background:currentColor; flex:none}
.dra-daynum{display:none}
.dra-card-title{font-family:inherit; font-weight:780; letter-spacing:-.04em; line-height:1.08; font-size:clamp(1.6rem, 4.6vw, 2.2rem); margin:0; color:#fff; padding-right:40px; text-wrap:balance}
.dra-chip{display:inline-block; margin-top:14px; font-size:.68rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.1); color:#fff; padding:4px 10px; border-radius:999px}

.dra-card-body{padding:24px 1rem 8px; font-size:1.05rem}
@media (min-width:640px){ .dra-card-body{padding:28px 34px 8px} }
.dra-card-body p{margin:0 0 .9em}
.dra-task{background:var(--a-surface); border:1px solid var(--a-rule); border-left:4px solid var(--a-accent); border-radius:6px 16px 16px 6px; padding:18px 20px; margin:0 0 20px}
.dra-label{display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; color:var(--a-accent); margin-bottom:8px}
.dra-label svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.dra-task p{font-size:1.14rem; font-weight:600; letter-spacing:-.01em; line-height:1.5; color:var(--a-ink); margin:0}
.dra-why{color:var(--a-mid)}
.dra-why .dra-label{color:var(--a-mid)}

.dra-extra{margin:24px 0 10px; border:1px solid var(--a-rule); border-radius:16px; background:var(--a-surface); overflow:hidden}
.dra-extra-head{display:flex; align-items:center; gap:14px; padding:16px 20px; background:var(--a-soft); color:var(--a-ink)}
.dra-extra-head svg{width:28px; height:28px; flex:0 0 auto; stroke:var(--a-accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.dra-extra-head h3{font-family:inherit; font-weight:780; letter-spacing:-.03em; font-size:1.25rem; line-height:1.15; margin:0; color:var(--a-ink)}
.dra-extra-head small{display:block; font-size:.68rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; color:var(--a-mid); margin-bottom:2px}
.dra-extra-body{padding:18px 20px 6px}
.dra-extra-body ul, .dra-extra-body ol{margin:0 0 1em 1.2em; padding:0}
.dra-extra-body li{margin:.25em 0}
.dra-extra-body li::marker{color:var(--a-accent); font-weight:800}
.dra-extra-body a{color:var(--a-accent)}
.dra-extra.letter{background:var(--a-surface)}
.dra-extra.letter .dra-extra-head{background:var(--a-mint)}
.dra-extra.letter .dra-extra-body{font-size:1.08rem; color:var(--a-ink)}
.dra-extra.letter .dra-extra-body p:last-child{font-weight:780; letter-spacing:-.02em}
.dra-video{margin:0 20px 18px}

/* Rätsel */
.dra-hints{list-style:none; margin:0 0 12px !important; padding:0 !important; counter-reset:h}
.dra-hints li{counter-increment:h; position:relative; padding:11px 14px 11px 50px; margin:0 0 8px !important; border-radius:12px; background:var(--a-soft); animation:dra-in .4s ease}
.dra-hints li::before{content:counter(h); position:absolute; left:12px; top:10px; width:26px; height:26px; border-radius:50%; background:var(--a-accent); color:#fff; font-size:.78rem; font-weight:800; display:grid; place-items:center}
@keyframes dra-in{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.dra-hint-btn{background:none; border:1px dashed var(--a-mid); color:var(--a-ink); border-radius:12px; padding:11px 14px; cursor:pointer; font:800 .74rem/1.2 var(--a-font); letter-spacing:.06em; text-transform:uppercase; width:100%; margin-bottom:16px}
.dra-hint-btn:hover{border-color:var(--a-accent); color:var(--a-accent)}
.dra-form{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.dra-form input{flex:1 1 200px; min-width:0; font:inherit; font-size:1rem; padding:11px 16px; border:1px solid var(--a-rule); border-radius:999px; background:var(--a-surface); color:var(--a-ink)}
.dra-form input:focus{outline:3px solid var(--a-accent); outline-offset:1px}
.dra-note{font-size:.92rem; color:var(--a-mid); margin:0 0 12px}
.dra-note.ok{color:var(--a-ok); font-weight:600}
.dra-reveal{background:var(--a-mint); border-radius:12px; padding:14px 16px; margin-bottom:14px}
.dra-reveal .dra-label{color:var(--a-ink)}

/* Karten-Fuß */
.dra-card-foot{position:sticky; bottom:0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:14px 1rem calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(to top, var(--a-paper) 78%, rgba(246,243,237,0))}
@media (min-width:640px){ .dra-card-foot{padding:18px 34px 24px} }
.dra-done{position:relative; display:inline-flex; align-items:center; gap:10px; border:1px solid var(--a-ink); background:transparent; color:var(--a-ink);
  font:800 .78rem/1.2 var(--a-font); letter-spacing:.06em; text-transform:uppercase; padding:.7rem 1.2rem .7rem .8rem; border-radius:999px; cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .15s}
.dra-done:hover{transform:translateY(-1px)}
.dra-done .box{width:22px; height:22px; border-radius:50%; border:1.5px solid currentColor; display:grid; place-items:center; transition:background .2s}
.dra-done .box svg{width:13px; height:13px; stroke:var(--a-accent); stroke-width:3; fill:none; opacity:0; transition:opacity .2s}
.dra-done.on{background:var(--a-accent); border-color:var(--a-accent); color:#fff}
.dra-done.on .box{background:#fff; border-color:#fff}
.dra-done.on .box svg{opacity:1}
.dra-later{background:none; border:0; color:var(--a-mid); font:800 .74rem/1.2 var(--a-font); letter-spacing:.06em; text-transform:uppercase; cursor:pointer}
.dra-later:hover{color:var(--a-ink)}
.dra-card-foot .dra-btn.ghost{color:var(--a-ink)}
.dra-burst{position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none}
.dra-burst i{position:absolute; width:10px; height:10px; margin:-5px; background:var(--a-accent); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); animation:dra-fly .9s ease-out forwards}
.dra-burst i:nth-child(3n){background:var(--a-accent-hi)}
.dra-burst i:nth-child(4n){background:var(--a-mint)}
@keyframes dra-fly{to{transform:translate(var(--x), var(--y)) rotate(200deg) scale(.4); opacity:0}}

.dra-gate{padding:28px 1rem 30px}
@media (min-width:640px){ .dra-gate{padding:30px 34px 34px} }
.dra-gate h3{font-family:inherit; font-weight:780; letter-spacing:-.035em; line-height:1.1; font-size:1.6rem; color:var(--a-ink); margin:0 0 10px}
.dra-gate p{color:var(--a-mid); margin:0 0 20px}
.dra-gate .dra-btn.ghost{color:var(--a-ink)}
.dra-gate .dra-actions{display:flex; gap:10px; flex-wrap:wrap}

body.dra-modal-open{overflow:hidden}

@media (max-width:720px){
  .dra-grid{grid-template-columns:repeat(4, 1fr); gap:8px; grid-auto-rows:minmax(80px, auto)}
  .dra-door{min-height:80px}
  .dra-door.big{grid-row:span 1}
  .dra-door.big .dra-num{font-size:2.6rem}
  .dra-front{padding:10px 11px}
}
@media (max-width:380px){
  .dra-grid{grid-template-columns:repeat(3, 1fr)}
}
@media (prefers-reduced-motion:reduce){
  .dra-root *, .dra-modal *{animation:none !important; transition:none !important}
}

/* ===== Weihnachtlicher Schmuck (v1.2) ===== */
.dra-root, .dra-modal{ --a-gold:#E9B949; --a-warm:#FFF4D6; }
.dra-root{padding-top:clamp(52px,5vw,64px); padding-bottom:clamp(44px,5vw,60px)}

/* Lichterkette */
.dra-lights{position:absolute; left:0; right:0; top:0; height:40px; overflow:hidden; pointer-events:none; z-index:1;
  display:grid; grid-template-columns:repeat(auto-fill, 64px); justify-content:center;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='24'%3E%3Cpath d='M0 3 Q32 22 64 3' fill='none' stroke='%23ffffff' stroke-opacity='.28' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x 0 0 / 64px 24px}
.dra-lights i{display:block; width:9px; height:13px; margin:11px auto 0; border-radius:50% 50% 45% 45%; position:relative;
  background:var(--c); box-shadow:0 0 10px 2px var(--c), 0 0 22px 4px color-mix(in srgb, var(--c) 45%, transparent);
  animation:dra-twinkle 2.6s ease-in-out infinite alternate}
.dra-lights i::before{content:""; position:absolute; left:2px; top:-4px; width:5px; height:5px; border-radius:1px; background:rgba(255,255,255,.35)}
.dra-lights i:nth-child(4n+1){--c:var(--a-accent-hi)}
.dra-lights i:nth-child(4n+2){--c:var(--a-gold); animation-delay:-.7s}
.dra-lights i:nth-child(4n+3){--c:#9EE6CD; animation-delay:-1.4s}
.dra-lights i:nth-child(4n){--c:var(--a-warm); animation-delay:-2.1s}
.dra-lights i:nth-child(3n){animation-duration:1.9s}
@keyframes dra-twinkle{0%{opacity:.45; transform:scale(.9)}60%{opacity:1}100%{opacity:1; transform:scale(1.05)}}

/* Schneewehe am Boden */
.dra-snowbank{position:absolute; left:0; right:0; bottom:-1px; height:46px; pointer-events:none; z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 46' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C60 14 110 26 170 20 S280 6 340 18 S460 30 520 16 S580 14 600 22 V46 H0Z' fill='%23ffffff' fill-opacity='.10'/%3E%3Cpath d='M0 38 C80 26 140 40 220 32 S360 22 430 34 S560 40 600 32 V46 H0Z' fill='%23ffffff' fill-opacity='.16'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%}

/* Funkelnder Stern im Kicker */
.dra-kicker::after{content:"✦"; font-size:.9rem; color:var(--a-gold); animation:dra-star 3s ease-in-out infinite}
@keyframes dra-star{0%,100%{opacity:.5; transform:scale(.85) rotate(0)}50%{opacity:1; transform:scale(1.15) rotate(25deg)}}

/* Türen als Geschenke */
.dra-door.is-locked.gift-0 .dra-front, .dra-door.is-locked.gift-1 .dra-front{
  background-image:
    linear-gradient(90deg, transparent calc(72% - 4px), var(--rb) calc(72% - 4px), var(--rb) calc(72% + 4px), transparent calc(72% + 4px)),
    linear-gradient(180deg, transparent calc(30% - 4px), var(--rb) calc(30% - 4px), var(--rb) calc(30% + 4px), transparent calc(30% + 4px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M28 18v20M18 28h20M21 21l14 14M35 21L21 35'/%3E%3C/g%3E%3C/svg%3E")}
.dra-door.gift-0{--rb:rgba(229,106,71,.85)}
.dra-door.gift-1{--rb:rgba(233,185,73,.8)}
.dra-door.is-locked.gift-0 .dra-front::after, .dra-door.is-locked.gift-1 .dra-front::after{display:none}
.dra-door.is-locked.gift-0 .dra-front::before, .dra-door.is-locked.gift-1 .dra-front::before{content:""; position:absolute; left:72%; top:30%; width:30px; height:20px; transform:translate(-50%,-62%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.9' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M15 11 C9 3 2 4 3 9 C4 13 10 13 15 11Z'/%3E%3Cpath d='M15 11 C21 3 28 4 27 9 C26 13 20 13 15 11Z'/%3E%3Cpath d='M15 11 L11 19 M15 11 L19 19'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.dra-door.is-locked .dra-lock{right:auto; left:12px; top:10px}

/* Bewegung */
.dra-door:hover:not(.is-open) .dra-front{transform:translateY(-3px) rotateY(-10deg); box-shadow:0 14px 26px -12px rgba(0,0,0,.65)}
.dra-door.is-today:not(.is-open){animation:dra-jiggle 4.5s ease-in-out infinite}
@keyframes dra-jiggle{0%,84%,100%{transform:none}87%{transform:rotate(-3deg) scale(1.02)}90%{transform:rotate(3deg) scale(1.02)}93%{transform:rotate(-2deg)}96%{transform:rotate(1deg)}}
.dra-door.is-open .dra-front{transition:transform .9s cubic-bezier(.34,1.56,.64,1), box-shadow .3s}
.dra-door.is-open .dra-inside svg{animation:dra-peek .6s .25s both}
@keyframes dra-peek{from{transform:translateY(8px) scale(.6); opacity:0}to{transform:none; opacity:1}}
.dra-badge{animation:dra-badge .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes dra-badge{0%{transform:scale(0) rotate(-180deg)}100%{transform:scale(1) rotate(0)}}
.dra-stars span.on svg{filter:drop-shadow(0 0 4px rgba(255,121,87,.7))}
.dra-burst i{width:12px; height:12px; margin:-6px}

/* Fenster wie eine Karte, die sich aufklappt */
.dra-card{transform:perspective(1400px) rotateX(-14deg) translateY(40px) scale(.96); transform-origin:50% 0; transition:transform .55s cubic-bezier(.2,.9,.25,1.15)}
.dra-card-top::after{content:""; position:absolute; inset:-60px 0 0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 90px 80px,#fff,transparent),radial-gradient(2px 2px at 160px 20px,#fff,transparent),radial-gradient(1px 1px at 230px 60px,#fff,transparent),radial-gradient(1.5px 1.5px at 300px 100px,#fff,transparent);
  background-size:320px 120px; animation:dra-fall 9s linear infinite}
@keyframes dra-fall{from{background-position:0 0}to{background-position:40px 120px}}
.dra-card-top{border-bottom:3px solid transparent; border-image:repeating-linear-gradient(90deg, var(--a-accent) 0 14px, var(--a-paper) 14px 28px) 3}

@media (max-width:720px){ .dra-lights{grid-template-columns:repeat(auto-fill, 52px); background-size:52px 24px} }

/* ===== Feenstaub und goldenes Bokeh (v1.2) ===== */
.dra-root::before{content:""; position:absolute; inset:-10%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(70px 70px at 12% 16%, rgba(244,201,106,.42), transparent 70%),
    radial-gradient(110px 110px at 86% 10%, rgba(255,231,168,.30), transparent 70%),
    radial-gradient(46px 46px at 68% 36%, rgba(244,201,106,.34), transparent 70%),
    radial-gradient(150px 150px at 28% 64%, rgba(229,106,71,.16), transparent 70%),
    radial-gradient(80px 80px at 93% 70%, rgba(244,201,106,.34), transparent 70%),
    radial-gradient(56px 56px at 48% 90%, rgba(255,231,168,.26), transparent 70%),
    radial-gradient(36px 36px at 6% 82%, rgba(244,201,106,.38), transparent 70%),
    radial-gradient(260px 160px at 50% 0%, rgba(244,201,106,.20), transparent 70%);
  filter:blur(4px); animation:dra-bokeh 22s ease-in-out infinite alternate}
@keyframes dra-bokeh{0%{transform:translate(0,0) scale(1)}100%{transform:translate(3%,-2%) scale(1.06)}}
.dra-dust{position:absolute; left:0; top:0; width:var(--sz); height:var(--sz); margin:calc(var(--sz) / -2); pointer-events:none; z-index:6; border-radius:50%;
  background:radial-gradient(circle, #FFF8E1 0, #F4C96A 45%, rgba(244,201,106,0) 72%); box-shadow:0 0 8px 2px rgba(244,201,106,.55);
  animation:dra-dust 1.2s ease-out forwards}
.dra-dust.star{border-radius:0; background:#FFE7A8; clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); box-shadow:none; filter:drop-shadow(0 0 4px rgba(244,201,106,.9))}
@keyframes dra-dust{0%{opacity:1; transform:translate(0,0) scale(1) rotate(0)}100%{opacity:0; transform:translate(var(--dx), 34px) scale(.2) rotate(120deg)}}
.dra-burst i:nth-child(2n){background:#F4C96A}
.dra-modal .dra-card-top::before{background:radial-gradient(520px 200px at 100% 0%, rgba(244,201,106,.22), transparent 60%), radial-gradient(300px 160px at 0% 100%, rgba(229,106,71,.16), transparent 60%)}

/* ===== Registrierungs-Aufruf für Gäste (v1.3) ===== */
.dra-cta{position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:18px 22px; align-items:center; margin:0 0 22px; padding:22px 24px; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg, rgba(244,201,106,.18), rgba(229,106,71,.14) 60%, rgba(255,255,255,.04)); border:1px solid rgba(244,201,106,.45); color:#fff}
.dra-cta::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg, transparent 30%, rgba(255,240,200,.16) 45%, transparent 60%); transform:translateX(-100%); animation:dra-sheen 5s ease-in-out infinite 1s}
@keyframes dra-sheen{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}
.dra-cta-icon{width:58px; height:58px; border-radius:16px; display:grid; place-items:center; background:rgba(244,201,106,.18); animation:dra-float 3.2s ease-in-out infinite}
.dra-cta-icon svg{width:32px; height:32px; stroke:#F4C96A; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@keyframes dra-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.dra-cta small{display:block; font-size:.72rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; color:#F4C96A; margin-bottom:4px}
.dra-root .dra-cta h3{font-family:inherit; font-weight:780; letter-spacing:-.035em; line-height:1.08; font-size:clamp(1.4rem,2.6vw,1.9rem); margin:0 0 6px; color:#fff}
.dra-cta p{margin:0; color:var(--a-on-dark-mid); font-size:.98rem; max-width:620px}
.dra-cta .dra-cta-actions{display:flex; flex-direction:column; gap:10px; align-items:stretch; position:relative; z-index:1}
.dra-cta .dra-cta-note{font-size:.78rem; color:var(--a-on-dark-mid); text-align:center}
.dra-cta.bottom{margin:26px 0 0}
@media (max-width:760px){ .dra-cta{grid-template-columns:auto 1fr} .dra-cta .dra-cta-actions{grid-column:1 / -1} }
@container (max-width:780px){ .dra-cta{grid-template-columns:auto 1fr} .dra-cta .dra-cta-actions{grid-column:1 / -1} }
@container (max-width:520px){ .dra-cta{grid-template-columns:1fr; padding:20px 18px} .dra-cta-icon{width:46px; height:46px; border-radius:12px} .dra-cta-icon svg{width:26px; height:26px} }