/* Käferclub-Adventskalender */
:root{
  --ink:#1c2a38; --muted:#6b7c8d; --gold:#f2a33a; --gold2:#c27d12; --cream:#fffaf0;
  --red:#a8332b; --green:#2f6b45; --navy:#2c5d8a; --amber:#d98a1f;
}
*{box-sizing:border-box}
html,body{margin:0;background:transparent}
body{max-width:var(--maxw,760px);margin:0 auto}
body{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button{font:inherit}

.testbar{background:#fff3cd;color:#5c4400;padding:8px 12px;font-size:14px;text-align:center;border-bottom:1px solid #f0d68a}
.testbar a{color:#8a5a00}

/* ------------------------------------------------ Szene */
.scene{
  position:relative; overflow:hidden; border-radius:14px; padding:0 12px 16px;
  background:radial-gradient(1200px 500px at 80% -10%,#2b4a6b 0%,transparent 60%),
             linear-gradient(180deg,#0b1520 0%,#13243a 45%,#1d3550 100%);
  box-shadow:0 14px 40px rgba(10,20,32,.35);
  isolation:isolate;
}
.sky{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.garland{position:relative;display:block;height:40px;z-index:2;margin:0 -12px;width:calc(100% + 24px)}
.garland .wire{fill:none;stroke:#2a3a2a;stroke-width:2}
.garland .bulb{animation:blink 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
.garland .bulb.sway{animation:blink 2.4s ease-in-out infinite, sway 3.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;filter:drop-shadow(0 0 6px currentColor)}50%{opacity:.35;filter:none}}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* ------------------------------------------------ Kopf mit Käfer */
.hero{position:relative;z-index:1;margin:2px 0 0}
.banner{position:relative;margin:10px 0 12px;border-radius:12px;overflow:hidden;aspect-ratio:1024/205;
  box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12);animation:rise .9s ease .5s both}
.banner img{display:block;width:100%;height:100%;object-fit:cover;animation:kenburns 24s ease-in-out infinite alternate;transform-origin:55% 55%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,210,120,.18),transparent 60%),linear-gradient(180deg,rgba(11,21,32,.25),transparent 30%,transparent 75%,rgba(11,21,32,.35));
  animation:candle 3.2s ease-in-out infinite}
@keyframes candle{0%,100%{opacity:.85}45%{opacity:1}55%{opacity:.7}}
.car{transform:translateX(250px);animation:drive 3.2s cubic-bezier(.2,.75,.25,1) .3s both}
@keyframes drive{from{transform:translateX(-560px)}to{transform:translateX(250px)}}
.carbody{animation:bounce .9s ease-in-out infinite;transform-box:view-box}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
.wheel{animation:spin .45s linear 7 .3s}
@keyframes spin{to{transform:rotate(360deg)}}
.beam{opacity:0;animation:beamOn .6s ease 3.4s forwards, flicker 6s ease-in-out 4s infinite}
@keyframes beamOn{to{opacity:1}}
@keyframes flicker{0%,100%{opacity:1}48%{opacity:1}50%{opacity:.6}52%{opacity:1}}
.headlight{filter:drop-shadow(0 0 6px #fff3b0)}
.puffs circle{fill:#dfe8f1;opacity:0;animation:puff 1.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
.puffs circle:nth-child(2){animation-delay:.45s}.puffs circle:nth-child(3){animation-delay:.9s}
@keyframes puff{0%{opacity:.7;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(-26px,-14px) scale(1.4)}}
.twinkle{animation:tw 1.2s ease-in-out infinite}
.twinkle.t2{animation-delay:.4s}.twinkle.t3{animation-delay:.8s}
@keyframes tw{50%{opacity:.25}}

.logo{position:absolute;z-index:3;top:12px;right:6px;height:90px;width:auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));animation:rise .9s ease .2s both;pointer-events:none}
.hero .titles{padding:0 100px}
@media (max-width:640px){.logo{height:50px;top:6px;right:0}.hero .titles{padding:0 44px}.titles h1{font-size:19px}}
.titles{position:relative;z-index:2;text-align:center;padding:0 12px;pointer-events:none}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:Georgia,"Times New Roman",serif;font-weight:bold;
  font-size:clamp(12px,1.7vw,15px);letter-spacing:4px;text-transform:uppercase;
  background:linear-gradient(90deg,#ffd27a,#f2a33a,#ffe9b0,#f2a33a);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite,rise .9s ease both}
.kicker::before,.kicker::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,#f2c66d)}
.kicker::after{background:linear-gradient(90deg,#f2c66d,transparent)}
.kicker .orn{font-size:.8em}
.titles h1{
  margin:2px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(22px,4vw,36px);line-height:1.1;color:#fff;letter-spacing:.3px;
  text-shadow:0 2px 12px rgba(0,0,0,.5);animation:rise .9s ease .1s both
}
@keyframes shine{to{background-position:300% 0}}
.titles p{margin:6px auto 0;max-width:560px;color:#d7e6f4;font-size:clamp(12px,1.6vw,14px);line-height:1.45;text-wrap:balance;text-shadow:0 1px 6px rgba(0,0,0,.6);animation:rise .9s ease .35s both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}

/* ------------------------------------------------ Countdown */
.countdown[hidden]{display:none !important}
.countdown{position:relative;z-index:1;text-align:center;margin:4px auto 18px;color:#fff;width:max-content;max-width:100%}
.cd-label{font-size:13px;color:#cfe0f0;margin-bottom:8px;letter-spacing:1.5px;text-transform:uppercase}
.cd-units{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.cd-unit{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:8px 10px;min-width:60px;backdrop-filter:blur(3px)}
.cd-num{font-family:Georgia,serif;font-size:24px;font-weight:bold;display:block;color:#ffd27a}
.cd-num.tick{animation:tick .45s ease}
@keyframes tick{0%{transform:rotateX(90deg);opacity:.2}100%{transform:none;opacity:1}}
.cd-cap{font-size:12px;color:#cfe0f0;text-transform:uppercase;letter-spacing:.8px}

/* ------------------------------------------------ Türchen-Raster */
.grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:8px;margin-top:2px}
@media (max-width:640px){.grid{grid-template-columns:repeat(3,1fr);gap:9px}}

.door{
  --rx:0deg; --ry:0deg;
  position:relative;aspect-ratio:1/1;border:0;padding:0;background:transparent;cursor:pointer;
  perspective:1800px;border-radius:10px;outline:none;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease;
  animation:doorIn .6s cubic-bezier(.2,.9,.3,1.3) backwards;animation-delay:calc(var(--i) * 40ms + .4s)
}
@keyframes doorIn{from{opacity:0;transform:translateY(24px) scale(.7)}}
.door.wide{grid-column:span 2;aspect-ratio:auto}
.door.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.door:focus-visible{box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--gold)}

.frame{position:absolute;inset:0;border-radius:10px;background:#0c1621;box-shadow:inset 0 0 0 2px rgba(0,0,0,.4)}
.inside{
  position:absolute;inset:3px;border-radius:7px;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,#fff8e6 0%,#f6e5c2 70%,#e8cf9d 100%);
  display:flex;align-items:center;justify-content:center;font-size:clamp(22px,3.2vw,32px)
}
.inside img{width:100%;height:100%;object-fit:cover}
.door.big .inside{font-size:clamp(48px,8vw,80px)}
.inside::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,220,130,.75),transparent 65%);opacity:0;transition:opacity .4s}
.door.opening .inside::after{opacity:1}

.leaf{
  position:absolute;inset:0;border-radius:10px;transform-origin:left center;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.3,1.35,.45,1), box-shadow .9s;z-index:2
}
.door.open .leaf{transform:rotateY(-108deg);box-shadow:-8px 0 18px rgba(0,0,0,.45)}
.face,.back{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.back{transform:rotateY(180deg);box-shadow:inset 0 0 0 5px rgba(0,0,0,.18), inset 0 0 0 7px rgba(255,255,255,.08);filter:brightness(.62)}
.c0 .back{background:linear-gradient(90deg,#7d1f19,#a8332b)}.c1 .back{background:linear-gradient(90deg,#1c432b,#2f6b45)}
.c2 .back{background:linear-gradient(90deg,#9a5d0c,#d98a1f)}.c3 .back{background:linear-gradient(90deg,#173350,#2c5d8a)}
.door.big .back{background:linear-gradient(90deg,#6e1a14,#a8332b)}
.face{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:2px solid rgba(255,255,255,.25);box-shadow:inset 0 0 0 5px rgba(255,255,255,.06), inset 0 -18px 30px rgba(0,0,0,.25)
}
.c0 .face{background:radial-gradient(circle at 30% 20%,#c9473e,#7d1f19)}
.c1 .face{background:radial-gradient(circle at 30% 20%,#3f8a5b,#1c432b)}
.c2 .face{background:radial-gradient(circle at 30% 20%,#f3b14d,#b06c10)}
.c3 .face{background:radial-gradient(circle at 30% 20%,#3d74a6,#173350)}
.face::before{ /* feines Muster */
  content:"";position:absolute;inset:0;opacity:.13;
  background-image:radial-gradient(#fff 1.2px,transparent 1.6px);background-size:14px 14px
}
.face::after{ /* Glanz-Streifen */
  content:"";position:absolute;top:-60%;left:-80%;width:50%;height:220%;transform:rotate(25deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:gloss 7s ease-in-out infinite;animation-delay:calc(var(--i) * 230ms)
}
@keyframes gloss{0%,80%{left:-80%}100%{left:160%}}
.num{
  position:relative;font-family:Georgia,"Times New Roman",serif;font-weight:bold;color:#fff;
  font-size:clamp(18px,2.8vw,26px);text-shadow:0 2px 0 rgba(0,0,0,.25),0 0 14px rgba(255,255,255,.25)
}
.deco{position:absolute;font-size:12px;opacity:.75;color:#fff}
.deco.tl{top:6px;left:8px}.deco.br{bottom:6px;right:8px}
.knob{position:absolute;right:9px;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:#ffd27a;box-shadow:0 0 4px #ffd27a}
.ribbonV,.ribbonH{position:absolute;background:linear-gradient(90deg,#e9c46a,#ffe9a8,#e9c46a);opacity:.95}
.ribbonV{top:0;bottom:0;left:50%;width:14px;margin-left:-7px}
.ribbonH{left:0;right:0;top:50%;height:14px;margin-top:-7px}
.bow{position:absolute;top:50%;left:50%;transform:translate(-50%,-62%);font-size:40px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.door.big .face{background:radial-gradient(circle at 30% 20%,#d0493f,#7a1c16)}
.door.big .num{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);z-index:1;background:#fffaf0;color:#8d2a24;text-shadow:none;padding:0 22px;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.35);font-size:clamp(28px,5vw,46px)}
.door.big .bow{font-size:clamp(40px,6vw,64px);transform:translate(-50%,-58%)}
.door.big .face::before{opacity:.18;background-image:radial-gradient(#ffd27a 1.4px,transparent 1.8px);background-size:18px 18px}

/* Zustände */
.door:hover:not(.locked) .leaf{transform:rotateY(-12deg)}
.door.open:hover .leaf{transform:rotateY(-116deg)}
.door.locked{cursor:not-allowed}
.door.locked .face{filter:saturate(.45) brightness(.72)}
.door.locked .face::after{display:none}
.snowcap{position:absolute;left:5px;right:5px;top:-5px;height:11px;z-index:3;pointer-events:none;background:#fff;border-radius:9px 9px 7px 7px / 9px 9px 5px 5px;box-shadow:0 2px 3px rgba(0,0,0,.25), inset 0 -2px 2px rgba(160,190,220,.5)}
.snowcap::before,.snowcap::after{content:"";position:absolute;top:7px;width:6px;height:9px;background:#fff;border-radius:0 0 4px 4px}
.snowcap::before{left:22%}.snowcap::after{right:30%;height:6px}
.door.locked .lock{position:absolute;right:7px;bottom:5px;font-size:12px;opacity:.85;z-index:3}
.door.today{z-index:2}
.door.today .frame{animation:halo 1.8s ease-in-out infinite}
@keyframes halo{0%,100%{box-shadow:0 0 0 2px #ffd27a,0 0 16px 2px rgba(242,163,58,.6)}50%{box-shadow:0 0 0 3px #fff3c4,0 0 34px 8px rgba(242,163,58,.85)}}
.door.today:not(.open) .leaf{animation:knock 4s ease-in-out infinite 2s}
@keyframes knock{0%,86%,100%{transform:rotateY(0)}90%{transform:rotateY(-14deg)}94%{transform:rotateY(-4deg)}97%{transform:rotateY(-9deg)}}
.tag-today{position:absolute;top:-9px;left:50%;transform:translateX(-50%);z-index:4;background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#3a2300;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,.35);white-space:nowrap;
  animation:pop 2s ease-in-out infinite}
@keyframes pop{50%{transform:translateX(-50%) scale(1.08)}}
.door.shake{animation:shake .5s ease}
@keyframes shake{20%{transform:translateX(-6px) rotate(-2deg)}40%{transform:translateX(6px) rotate(2deg)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.door .done{position:absolute;right:6px;top:6px;z-index:1;font-size:12px;background:#fff;border-radius:999px;padding:1px 6px;box-shadow:0 1px 3px rgba(0,0,0,.3)}

.foot{position:relative;z-index:1;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;color:#cfe0f0;font-size:12px;margin-top:12px;text-align:center}
.foot a{color:#ffd27a}

/* ------------------------------------------------ Karte (Inhalt eines Türchens) */
.overlay{position:absolute;left:0;top:0;width:100%;z-index:20;background:rgba(6,12,20,.62);backdrop-filter:blur(2px);animation:fade .3s ease}
.overlay[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.card{
  position:absolute;left:50%;width:min(480px,calc(100% - 24px));margin-left:calc(min(480px,calc(100% - 24px)) / -2);
  background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5)
}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 50px 14px 18px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:#3a2300;position:relative;overflow:hidden}
.card-head::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-100%);animation:sweep 1.4s ease .3s}
@keyframes sweep{to{transform:translateX(100%)}}
.card-day{font-family:Georgia,serif;font-weight:bold;font-size:21px}
.card-tag{background:rgba(255,255,255,.6);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.close{position:absolute;right:10px;top:9px;z-index:2;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.75);
  font-size:22px;line-height:1;cursor:pointer;color:#3a2300}
.close:hover{background:#fff}
.card-body{padding:18px}
.card-body > *{animation:rise .5s ease both}
.card-body > *:nth-child(2){animation-delay:.08s}.card-body > *:nth-child(3){animation-delay:.16s}
.card-body > *:nth-child(4){animation-delay:.24s}.card-body > *:nth-child(5){animation-delay:.32s}
.card-icon{font-size:54px;text-align:center;line-height:1.1;animation:wobble 2.5s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) scale(1.06)}}
.card h2{font-family:Georgia,serif;margin:6px 0 8px;font-size:22px}
.card p{margin:0 0 12px;line-height:1.55}
.card .photo{margin:-18px -18px 14px;background:#0c1621;position:relative}
.card .photo img{display:block;width:100%;max-height:360px;object-fit:contain}
.card .linkbtn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;border-radius:8px;padding:9px 14px;font-size:14px}
.q{font-weight:600;font-size:17px;margin:4px 0 10px}
.answers{display:grid;gap:8px;margin-bottom:12px}
.ans{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:11px 12px;border:2px solid #dcecfa;background:#f3f8fd;border-radius:10px;cursor:pointer;
  font-size:15px;color:var(--ink);transition:transform .15s, border-color .15s, background .15s}
.ans:hover:not(:disabled){transform:translateX(3px);border-color:#9cc3e6}
.ans .letter{flex:none;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid #c4d7ea;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.ans.sel{border-color:var(--gold2);background:#fff6e5}
.ans.sel .letter{background:var(--gold2);color:#fff;border-color:var(--gold2)}
.ans.ok{border-color:#2f8a4f;background:#e6f6ec}.ans.ok .letter{background:#2f8a4f;color:#fff;border-color:#2f8a4f}
.ans.no{border-color:#c0392b;background:#fdecea}.ans.no .letter{background:#c0392b;color:#fff;border-color:#c0392b}
.ans:disabled{cursor:default}
.form{display:grid;gap:8px}
.form input[type=text],.form input[type=email]{width:100%;padding:10px;border:1px solid #c9d5e1;border-radius:8px;font-size:15px}
.form label.chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted)}
.form label.chk a{color:var(--gold2)}
.btn{background:linear-gradient(135deg,#24384c,#14212e);color:#fff;border:0;border-radius:10px;padding:12px 16px;font-size:16px;cursor:pointer;font-weight:600}
.btn:hover{filter:brightness(1.15)}
.btn:disabled{opacity:.6;cursor:wait}
.err{color:#b02a1e;font-size:14px;min-height:1em;margin:0}
.result{border-radius:12px;padding:12px 14px;margin-top:4px;font-weight:600}
.result.good{background:#e6f6ec;color:#1d5e33}
.result.bad{background:#fdecea;color:#8d2a24}
.result small{display:block;font-weight:400;margin-top:4px;color:var(--ink)}
.muted{color:var(--muted);font-size:13px}
.prizes{background:#fffaf0;border:1px dashed var(--gold2);border-radius:10px;padding:10px 12px;font-size:14px}

/* Partikel */
.particle{position:absolute;z-index:40;pointer-events:none;will-change:transform,opacity}
.toast{position:absolute;z-index:50;left:50%;transform:translateX(-50%) translateY(10px);background:#14212e;color:#fff;padding:9px 14px;border-radius:999px;
  font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ------------------------------------------------ Kompakte 16:9-Ansicht für die Startseite */
html:has(body.compact),body.compact{height:100%;overflow:hidden}
body.compact{max-width:none}
.compact .scene{height:100vh;border-radius:0;padding:0 1.4vw 1vw;display:flex;flex-direction:column;box-shadow:none}
.compact .garland{height:5vw;margin:0 -1.4vw;width:calc(100% + 2.8vw);flex:none}
/* 16:9: Titelbild als Hintergrund des Kopfs, Text links darüber, Logo rechts */
.compact .hero{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"t . l" "c . l";column-gap:2vw;row-gap:.7vw;
  align-items:center;min-height:17vw;margin:-1.2vw 0 1.1vw;padding:1.1vw 1.6vw 1vw 1.8vw;border-radius:1.2vw;overflow:hidden;flex:none;
  box-shadow:0 .6vw 1.8vw rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12)}
.compact .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,18,30,.92) 0%,rgba(9,18,30,.78) 30%,rgba(9,18,30,.15) 58%,rgba(9,18,30,0) 70%,rgba(9,18,30,.35) 100%)}
.compact .banner{position:absolute;inset:0;z-index:0;width:100%;height:100%;aspect-ratio:auto;margin:0;border-radius:0;box-shadow:none}
.compact .banner img{object-position:62% 50%}
.compact .titles{grid-area:t;text-align:left;padding:0;align-self:end;z-index:2}
.compact .logo{grid-area:l;position:relative;z-index:2;height:10.5vw;align-self:center;top:auto;right:auto}
.compact .kicker{font-size:1.2vw;letter-spacing:.4vw;gap:.8vw}
.compact .kicker::before{display:none}
.compact .kicker::after{width:4vw}
.compact .titles h1{font-size:3.2vw;white-space:nowrap;margin-top:.15vw}
.compact .titles p{font-size:1.25vw;margin:.4vw 0 0;max-width:34vw}
/* klein eingebettet (z.B. 380 px breit auf der Startseite): nur das Lesbare zeigen */
@media (max-width:640px){
  .compact .titles p,.compact .cd-label,.compact .cd-cap{display:none}
  .compact .kicker{font-size:2vw}
  .compact .titles h1{font-size:4.3vw}
  .compact .cd-num{font-size:3vw}
  .compact .cd-unit{min-width:0;padding:.3vw 1.2vw}
  .compact .logo{height:13vw}
}
.compact .countdown{grid-area:c;z-index:2;margin:0;text-align:left;width:auto;display:flex;align-items:center;gap:1.2vw;align-self:start}
.compact .cd-label{font-size:1.1vw;margin:0;letter-spacing:.15vw;max-width:15vw;line-height:1.3}
.compact .cd-units{gap:.7vw;justify-content:flex-start;flex-wrap:nowrap}
.compact .cd-unit{min-width:5vw;padding:.35vw .8vw;border-radius:.8vw;text-align:center}
.compact .cd-num{font-size:2.2vw}
.compact .cd-cap{font-size:.9vw}
.compact .grid{flex:1;min-height:0;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);gap:.9vw}
.compact .door{aspect-ratio:auto}
.compact .num{font-size:2.6vw}
.compact .deco{font-size:1vw;top:.5vw}
.compact .deco.br{bottom:.5vw}
.compact .knob{width:.7vw;height:.7vw;right:.8vw}
.compact .inside{font-size:3vw}
.compact .door[data-day="24"] .num{position:relative;bottom:auto;left:auto;transform:none;font-size:2.6vw;padding:0 1vw;border-radius:.8vw}
.compact .door[data-day="24"] .bow{font-size:3.4vw;transform:translate(-50%,-80%)}
.compact .ribbonV{width:1vw;margin-left:-.5vw}.compact .ribbonH{height:1vw;margin-top:-.5vw}
.compact .snowcap{height:1vw;top:-.45vw}
.compact .tag-today{font-size:1.1vw;padding:.1vw .8vw;top:-1vw}
.compact .door.locked .lock{font-size:1.1vw;right:.6vw;bottom:.4vw}
.compact .snowcap::before,.compact .snowcap::after{top:.6vw;width:.6vw;height:.8vw}
.compact .door.today .frame{animation-name:haloS}
@keyframes haloS{0%,100%{box-shadow:0 0 0 .2vw #ffd27a,0 0 1.4vw .2vw rgba(242,163,58,.6)}50%{box-shadow:0 0 0 .3vw #fff3c4,0 0 2.6vw .6vw rgba(242,163,58,.85)}}
.compact .foot{margin-top:.8vw;font-size:1.5vw;flex:none}
.compact .cta{color:#ffd27a;font-weight:600;animation:pop2 1.6s ease-in-out infinite}
@keyframes pop2{50%{transform:scale(1.05)}}
.compact .toast{font-size:1.6vw}
.compact .testbar{position:absolute;z-index:60;left:0;right:0;bottom:0;font-size:1.3vw;padding:.3vw;opacity:.92}
@media (max-width:640px){.compact .grid{grid-template-columns:repeat(8,1fr)}}

/* Weniger Bewegung, wenn im Betriebssystem eingestellt */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}