/* EH Group Adventskalender 2026 · generated from the two design packages (desktop ≥1024px, mobile <1024px; v2026.9: tablets in portrait use the mobile package, desktop never scales below 0.7) + robOS overrides. Do not edit the .raw.css files on the server; rebuild locally. */
@font-face{font-family:'HappyFont_Headline';src:url(../fonts/HappyFont_Headline.woff) format('woff');font-weight:normal;font-style:normal;font-display:block;}

@font-face{font-family:'Moderat';font-weight:400;font-style:normal;src:url(../fonts/Moderat-Regular.woff) format('woff');}
@font-face{font-family:'Moderat';font-weight:700;font-style:normal;src:url(../fonts/Moderat-Bold.woff) format('woff');}

@media (min-width:1024px){


:root{
  --nori:#1b5950;
  --nori-dark:#0f3a34;
  --pine:#2c6860;
  --coral:#ed6e72;
  --coral-dark:#d1494f;
  --blush:#f6dfe3;
  --paper:#fbf3e6;
  --paper-dim:#efe3cf;
  --gold:#c8a15c;
  --ink:#0c211d;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  width:1920px;
  background:var(--nori-dark);
  font-family:'Outfit',sans-serif;
  color:var(--paper);
  overflow-x:hidden;
  position:relative;
}

/* ============ SNOW ============ */
#snowLayer{position:absolute;top:0;left:0;width:1920px;height:100%;pointer-events:none;z-index:90;overflow:hidden;}
.flake{position:absolute;top:-20px;border-radius:50%;background:#fff;opacity:.85;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite;}
@keyframes fall{
  0%{transform:translate(0,0) rotate(0deg);}
  100%{transform:translate(var(--drift,20px), 2400px) rotate(360deg);}
}

/* ============ HEADER ============ */
.sitehead{position:absolute;top:0;left:0;width:1920px;z-index:70;padding:26px 64px;}
.brandlogo{position:absolute;left:50%;top:30px;transform:translateX(-50%);width:190px;height:auto;display:block;}
.sitehead-inner{display:flex;align-items:center;justify-content:space-between;}

/* ============ HERO ============ */
.hero{
  position:relative;
  width:1920px;
  height:1610px;
  background-image:url(../img/desktop/background-winter-market.webp);
  background-repeat:no-repeat;
  background-size:1920px 1070px;
  background-position:center bottom;
  background-color:var(--nori-dark);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:420px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(15,58,52,.35) 0%, rgba(15,58,52,.22) 20%,
    rgba(15,58,52,.10) 45%, rgba(15,58,52,.03) 70%,
    rgba(15,58,52,0) 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,18,18,.28) 0%, rgba(8,18,18,0) 30%, rgba(8,18,18,0) 60%, rgba(8,18,18,.32) 100%);
}
.phototrack{position:absolute;left:0;bottom:0;width:1920px;height:1070px;z-index:3;}

.bandclip{position:absolute;left:0;top:0;width:1920px;height:700px;overflow:hidden;z-index:3;pointer-events:none;}
.lanternband{
  position:absolute;left:0;top:-106px;width:1920px;height:544px;z-index:1;
  transform-origin:50% 0%;animation:lanternsway 5.5s ease-in-out infinite;
}
.lanternband img{width:100%;height:100%;display:block;object-fit:contain;}
@keyframes lanternsway{0%,100%{transform:rotate(-1deg);}50%{transform:rotate(1.1deg);}}

.herocopy{position:absolute;top:168px;left:50%;transform:translateX(-50%);text-align:center;z-index:20;width:1200px;}
.herocopy h1{font-family:'HappyFont_Headline','Baloo 2',sans-serif;font-weight:400;font-synthesis:none;font-size:76px;line-height:1.03;margin:0 0 18px;color:var(--paper);text-shadow:0 10px 30px rgba(0,0,0,.35);}
.herocopy h1 span{color:var(--coral);}
.herocopy p{font-family:'Moderat','Baloo 2',sans-serif;font-weight:400;font-synthesis:none;font-size:19px;line-height:1.6;max-width:640px;margin:0 auto;color:var(--blush);opacity:.92;}

/* ---------- Bühne: Shop, Truhe, Kundenstopper ---------- */
.stage{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:1600px;height:900px;z-index:10;display:flex;align-items:flex-end;justify-content:center;}

.shopwrap{position:relative;width:800px;z-index:11;}
.shopwrap img{width:100%;display:block;filter:drop-shadow(0 34px 40px rgba(0,0,0,.45));}

/* ---------- LED-Laufschrift im TV-Screen ---------- */
.tvscreen{position:absolute;left:14.16%;top:30.14%;width:7.11%;height:15.57%;overflow:hidden;z-index:14;pointer-events:none;}
.ledstrip{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:40px;padding-bottom:40px;animation:ledscroll 7s linear infinite;}
.ledstrip .ledtext{flex:none;font-family:'HappyFont_Headline','Baloo 2',sans-serif;font-weight:400;font-synthesis:none;font-size:35px;line-height:1;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);color:#fff4dc;text-shadow:0 0 5px rgba(255,236,190,.75),0 0 2px rgba(255,255,255,.6);}
@keyframes ledscroll{from{transform:translateY(-50%);}to{transform:translateY(0);}}


.lampwrap{position:relative;width:150px;margin-right:-18px;z-index:15;align-self:flex-end;cursor:pointer;}
.lampwrap img{width:100%;display:block;filter:drop-shadow(0 20px 20px rgba(0,0,0,.45));}
.burst-particle{position:fixed;pointer-events:none;z-index:9999;opacity:0;top:0;left:0;}
@keyframes burstRise{
  0%{transform:translate(0,0) rotate(0deg);opacity:1;}
  100%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) * 0.3));opacity:1;}
}
@keyframes burstFall{
  0%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) * 0.3));opacity:1;}
  85%{opacity:1;}
  100%{transform:translate(calc(var(--dx) + (var(--dx) * .35)),calc(var(--dy) + var(--fall))) rotate(var(--rot));opacity:0;}
}

/* ---------- Schneemann: wackelt & zeigt Fun Fact zum Tag ---------- */
.snowmanwrap{position:relative;width:200px;margin-left:-48px;z-index:14;align-self:flex-end;}
.snowmanwrap img{width:100%;display:block;filter:drop-shadow(0 22px 22px rgba(0,0,0,.45));transform-origin:50% 92%;cursor:pointer;}
.snowmanwrap.wiggle img{animation:kswiggle .65s ease-in-out;}
@keyframes kswiggle{
  0%{transform:rotate(0deg);}18%{transform:rotate(-6deg);}38%{transform:rotate(5.5deg);}
  58%{transform:rotate(-3.5deg);}76%{transform:rotate(2deg);}100%{transform:rotate(0deg);}
}
.snowmanwrap .sspeech{
  position:absolute;left:50%;bottom:104%;transform:translateX(-50%) translateY(8px) scale(.92);width:270px;
  background:var(--paper);color:var(--ink);padding:16px 18px;border-radius:14px;font-size:14.5px;line-height:1.45;
  box-shadow:0 14px 30px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
}
.snowmanwrap .sspeech .kdate{display:block;font-family:'Fraunces',serif;font-style:italic;font-weight:600;color:var(--coral-dark);margin-bottom:4px;font-size:13px;}
.snowmanwrap .sspeech::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-8px;width:16px;height:16px;background:var(--paper);transform:rotate(45deg);}
.snowmanwrap.open .sspeech{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto;}

/* Dach-Münze */
.roofbadge{
  position:absolute;left:83.36%;top:0.84%;width:15.38%;height:19.43%;z-index:16;cursor:pointer;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.4));
}
.roofbadge img{width:100%;height:100%;object-fit:contain;border-radius:50%;display:block;transform-origin:50% 50%;animation:slowspin 16s linear infinite;}
.roofbadge:hover img{animation-duration:5s;}
.roofbadge.spin-fast img{animation:fastspin .85s cubic-bezier(.25,.85,.35,1) 1;}

@keyframes slowspin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes fastspin{from{transform:rotate(0deg);}to{transform:rotate(720deg);}}
.roofbadge .rspeech{
  position:absolute;left:50%;top:104%;transform:translateX(-50%) translateY(4px) scale(.9);width:250px;
  background:var(--coral);color:#fff;padding:12px 16px;border-radius:14px;font-size:14px;line-height:1.4;text-align:center;
  box-shadow:0 14px 26px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;font-weight:500;
}
.roofbadge .rspeech::after{content:"";position:absolute;left:50%;top:-7px;margin-left:-8px;width:16px;height:16px;background:var(--coral);transform:rotate(45deg);}
.roofbadge.open .rspeech{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}

/* ---------- Türchen-Trigger auf den Verpackungen ---------- */
.pkgspot{position:absolute;cursor:pointer;display:block;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;}
.pkgspot .hint{
  position:absolute;inset:6%;border-radius:14px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.4) 0%, rgba(255,255,255,.1) 55%, rgba(255,255,255,0) 78%);
  opacity:0;transition:opacity .2s ease;
}
.pkgspot:hover .hint{opacity:1;}
.pkgspot.found-badge::after{
  content:"✓";position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;
  background:var(--coral);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
}

.pkgspot .hint{display:none;}
@keyframes pkgblink{
  0%,100%{opacity:.35;background:radial-gradient(ellipse at center, rgba(237,110,114,.55) 0%, rgba(237,110,114,.2) 55%, rgba(237,110,114,0) 78%);}
  50%{opacity:.95;background:radial-gradient(ellipse at center, rgba(237,110,114,.85) 0%, rgba(237,110,114,.35) 55%, rgba(237,110,114,0) 78%);}
}
.pkgspot.today-spot .hopper{
  position:absolute;left:50%;top:-10px;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  animation:pkghop 1.3s ease-in-out infinite;
}
@keyframes pkghop{
  0%,100%{transform:translate(-50%,0);}
  30%{transform:translate(-50%,-10px);}
  50%{transform:translate(-50%,0);}
}

/* ============ TÜRCHEN-POPUP ============ */
.doormodal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease, visibility .25s;}
.doormodal.show{opacity:1;visibility:visible;pointer-events:auto;}
.doormodal-backdrop{position:absolute;inset:0;background:rgba(9,20,18,.78);backdrop-filter:blur(3px);}
.doormodal-close{
  position:absolute;top:40px;right:56px;width:46px;height:46px;border-radius:50%;
  background:rgba(251,243,230,.14);border:1.5px solid rgba(251,243,230,.4);color:var(--paper);
  font-size:22px;line-height:1;cursor:pointer;z-index:2;
}
.doormodal-card{position:relative;width:260px;height:300px;perspective:1200px;transform:scale(.875);transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.doormodal.show .doormodal-card{transform:scale(1.25);}
.doormodal-hint{font-family:'Moderat','Baloo 2',sans-serif;font-weight:400;position:absolute;bottom:-38px;left:0;width:100%;text-align:center;font-size:13px;color:var(--blush);opacity:.8;}

.door{position:relative;width:100%;height:100%;}
.flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.34,1.56,.64,1);}
.door.open .flip{transform:rotateY(180deg);}
.face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.face.front{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), var(--pine);
  border:2px solid rgba(251,243,230,.16);box-shadow:0 14px 26px rgba(0,0,0,.35), inset 0 0 0 6px rgba(27,89,80,.35);}
.face.front .roofcap{width:56%;height:20px;background:var(--coral);border-radius:8px 8px 0 0;margin-bottom:-6px;position:relative;top:2px;}
.face.front .num{font-family:'Baloo 2';font-weight:800;font-size:88px;line-height:1;margin-top:14px;color:var(--paper);}
.face.front .lbl{font-family:'Fraunces';font-style:italic;font-size:13px;color:var(--blush);opacity:.85;margin-top:2px;letter-spacing:.03em;}
.face.front .knob{position:absolute;bottom:16px;width:8px;height:8px;border-radius:50%;background:var(--gold);}
.face.back{background:var(--paper);color:var(--ink);transform:rotateY(180deg);border:2px dashed var(--coral-dark);padding:20px;}
.face.back .ticket-num{position:absolute;top:12px;left:16px;font-family:'Baloo 2';font-weight:700;font-size:14px;color:var(--coral-dark);}
.face.back{padding:16px 18px;justify-content:center;gap:10px;}
.face.back .giftphoto{width:110px;height:96px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));}
.face.back .giftphoto img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.face.back .win-text{font-family:'Moderat','Baloo 2',sans-serif;font-weight:700;font-size:15px;line-height:1.3;text-align:center;color:var(--nori);}
.face.back .win-btn{font-family:'Moderat','Baloo 2',sans-serif;font-weight:700;font-size:14px;color:#fff;background:var(--coral);border:0;border-radius:999px;padding:9px 18px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.2);}
.face.back .win-btn:hover{background:var(--coral-dark);}
.face.back .win-msg{font-family:'Moderat','Baloo 2',sans-serif;font-weight:400;font-size:13px;line-height:1.4;text-align:center;color:var(--ink);display:none;}
.face.back .win-msg.show{display:block;}
.face.back .ticket-num{font-family:'Moderat','Baloo 2',sans-serif;font-weight:700;}
.face.front .num{font-family:'Moderat','Baloo 2',sans-serif;font-weight:700;}
.face.front .lbl{font-family:'Moderat','Baloo 2',sans-serif;font-style:normal;font-weight:400;}
.face.back .win-btn{margin-top:30px;}
.face.back .win-big{font-weight:700;font-size:22px;color:var(--coral-dark);margin-bottom:6px;}
.face.back .win-msg{font-size:15px;max-width:200px;}
.face.back.revealed .win-text,.face.back.revealed .win-desc{display:none;}

.door.today-highlight .face.front{border-color:var(--coral);}

.confetti-pop{position:absolute;inset:0;pointer-events:none;overflow:visible;}
.bit{position:absolute;width:6px;height:10px;opacity:0;border-radius:1px;}


/* ---------- Anmelde-Popup ---------- */
.signup{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(9,20,18,.78);backdrop-filter:blur(4px);transition:opacity .35s ease, visibility .35s;font-family:'Moderat','Baloo 2',sans-serif;}
.signup.hide{opacity:0;visibility:hidden;pointer-events:none;}
.signup-box{position:relative;width:min(380px,calc(100vw - 32px));background:var(--paper);color:var(--ink);border-radius:20px;padding:30px 28px 24px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.5);border:2px dashed var(--coral-dark);}
.signup-box img{width:84px;height:auto;display:block;margin:-62px auto 8px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3));}
.signup-box h2{font-weight:700;font-size:24px;line-height:1.2;margin:0 0 8px;color:var(--nori);}
.signup-box p{font-weight:400;font-size:15px;line-height:1.45;margin:0 0 16px;}
.signup-box input[type=email]{width:100%;box-sizing:border-box;font-family:inherit;font-weight:400;font-size:16px;padding:12px 16px;border-radius:999px;border:1.5px solid var(--paper-dim);background:#fff;color:var(--ink);outline:none;}
.signup-box input[type=email]:focus{border-color:var(--coral);}
.signup-box button.go{margin-top:12px;width:100%;font-family:inherit;font-weight:700;font-size:16px;color:#fff;background:var(--coral);border:0;border-radius:999px;padding:12px 18px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.2);}
.signup-box button.go:hover{background:var(--coral-dark);}
.signup-err{font-weight:400;font-size:13px;color:var(--coral-dark);min-height:18px;margin-top:8px;}
.signup-skip{display:inline-block;margin-top:6px;font-weight:400;font-size:13px;color:var(--ink);opacity:.6;background:none;border:0;cursor:pointer;text-decoration:underline;font-family:inherit;}
.signup-ok{display:none;}
.signup.done .signup-form{display:none;}
.signup.done .signup-ok{display:block;}
.footcredit{font-family:'Moderat','Baloo 2',sans-serif;font-weight:400;font-synthesis:none;position:relative;padding:34px 0 40px;text-align:center;color:var(--blush);opacity:.6;font-size:13px;letter-spacing:.04em;background:var(--nori-dark);z-index:5;}
.ledstrip{gap:0 !important;padding-bottom:0 !important;}
.ledstrip img.ledtext{display:block;width:84%;height:auto;transform:none;flex:none;}
.pkgspot.today-spot .hopper{background:none !important;box-shadow:none !important;width:38px;height:38px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));}
.pkgspot.today-spot .hopper img{width:100%;height:100%;display:block;}

/* robOS: scale the fixed 1920px layout to the viewport */
body{width:100%;overflow-x:hidden}
.advent-desktop-outer{position:relative;width:100%;overflow:hidden}
.advent-desktop{width:1920px;transform-origin:top left;position:relative}
.advent-mobile{display:none}
}

@media (max-width:1023px){
/* EH Group Adventskalender – Mobil · Styles */



:root{
  --nori:#1b5950;
  --nori-dark:#0f3a34;
  --pine:#2c6860;
  --coral:#ed6e72;
  --coral-dark:#d1494f;
  --blush:#f6dfe3;
  --paper:#fbf3e6;
  --paper-dim:#efe3cf;
  --gold:#c8a15c;
  --ink:#0c211d;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#05100e;
  font-family:'Outfit',sans-serif;
  color:var(--paper);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px 0;
}
img{max-width:100%;}

/* ---------- Echtes Handyformat (Phone-Frame) ---------- */
.phone-frame{
  position:relative;
  width:390px;
  height:844px;
  background:var(--nori-dark);
  border-radius:52px;
  border:10px solid #111;
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 2px rgba(255,255,255,.05) inset;
  overflow:hidden;
  transform:translateZ(0);
}
.phone-screen{
  position:relative;width:100%;height:100%;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.phone-screen::-webkit-scrollbar{display:none;}
button{font-family:inherit;}

/* ---------- Weihnachtlicher Hero-Hintergrund ---------- */
.m-scene{
  position:relative;
  background-image:url(../img/mobile/hintergrund-winter.webp);
  background-size:cover;
  background-position:center top;
  background-color:var(--nori-dark);
}
.m-hero{position:relative;padding-top:34px;}
.m-hero-fade{
  position:absolute;top:0;left:0;width:100%;height:420px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(15,58,52,1) 0%, rgba(15,58,52,.97) 30%,
    rgba(15,58,52,.9) 52%, rgba(15,58,52,.6) 70%, rgba(15,58,52,.25) 86%, rgba(15,58,52,0) 100%);
}
.m-scene-floorfade{
  position:absolute;left:0;bottom:0;width:100%;height:120px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(15,58,52,0) 0%, rgba(15,58,52,.55) 100%);
}
.m-hero-content{position:relative;z-index:3;}

/* ---------- Header ---------- */
.m-head{padding:18px 16px 8px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;}
.m-brandlogo{width:150px;height:auto;display:block;margin:6px auto 0;filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));}

/* ---------- Überschrift ---------- */
.m-hdgwrap{padding:6px 18px 22px;text-align:center;}
.m-hdgwrap h1{font-family:'HappyFont_Headline','Baloo 2',sans-serif;font-weight:400;font-synthesis:none;font-size:24px;line-height:1.08;margin:0 0 10px;text-shadow:0 3px 12px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.6);}
.m-hdgwrap h1 span{color:var(--coral);}
.m-hdgwrap p{font-family:'Moderat',sans-serif;font-weight:400;font-style:normal;font-synthesis:none;font-size:14px;line-height:1.55;color:var(--blush);opacity:.95;max-width:480px;margin:0 auto;text-shadow:0 2px 8px rgba(0,0,0,.7);}

/* ---------- Truhe ---------- */
.m-truhe-wrap{padding:24px 16px 6px;text-align:center;}
.m-truhe{position:relative;width:100%;max-width:440px;margin:0 auto;aspect-ratio:1023/1537;}
.m-truhe-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45));}

/* Münze oben rechts – dreht sich wie am Shop */
.m-coin{
  /* passgenau über dem Kreis im Truhenbild (Mitte 835/133 px, Außenradius 112 px bei 1023×1538) */
  position:absolute;left:70.67%;top:1.37%;width:21.9%;aspect-ratio:1/1;z-index:6;
  border:none;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  border-radius:50%;background:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.m-coin img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:contain;display:block;transform-origin:50% 50%;animation:m-spin 16s linear infinite;}
.m-coin:active img{animation-duration:5s;}
.m-coin.spin-fast img{animation:m-fastspin .85s cubic-bezier(.25,.85,.35,1) 1;}
@keyframes m-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes m-fastspin{from{transform:rotate(0deg);}to{transform:rotate(720deg);}}
.m-coin-toast{
  position:absolute;right:0;top:106%;transform:translateY(6px) scale(.9);width:200px;
  background:var(--coral);color:#fff;padding:9px 12px;border-radius:12px;font-size:12px;line-height:1.4;text-align:center;
  box-shadow:0 10px 20px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:7;font-weight:500;
}
.m-coin.open .m-coin-toast{opacity:1;transform:translateY(0) scale(1);}

/* LED-Laufband über dem "eathappy.de"-Streifen: Logos laufen von rechts nach links */
.m-ledband{
  position:absolute;left:8.4%;top:76.0%;width:82.4%;height:6.5%;z-index:5;
  overflow:hidden;
  background:#013f33;
  border-radius:3px;
}
.m-ledtrack{
  position:absolute;top:0;left:0;height:100%;
  display:flex;align-items:center;gap:36px;white-space:nowrap;
  animation:m-ledscroll 24s linear infinite;
  width:max-content;
  padding:0 10px;
}
.m-ledtrack img{height:52%;width:auto;object-fit:contain;flex:none;opacity:.92;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.35));}
@keyframes m-ledscroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Verpackungs-Hotspots (Türchen-Trigger) */
.pkgspot{position:absolute;cursor:pointer;display:block;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;}
.pkgspot .hint{
  position:absolute;inset:2%;border-radius:12px;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.35) 0%, rgba(255,255,255,.1) 55%, rgba(255,255,255,0) 78%);
  opacity:0;
}
.pkgspot.found-badge::after{
  content:"✓";position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;
  background:var(--coral);color:#fff;font-size:8.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:2;
}
.pkgspot.today-spot .hint{
  opacity:1;animation:pkgblink 1.7s ease-in-out infinite;
}
@keyframes pkgblink{
  0%,100%{opacity:.35;background:radial-gradient(ellipse at center, rgba(237,110,114,.55) 0%, rgba(237,110,114,.2) 55%, rgba(237,110,114,0) 78%);}
  50%{opacity:.95;background:radial-gradient(ellipse at center, rgba(237,110,114,.85) 0%, rgba(237,110,114,.35) 55%, rgba(237,110,114,0) 78%);}
}
.pkgspot.today-spot .hopper img{width:100%;height:100%;display:block;border-radius:50%;}
.pkgspot.today-spot .hopper{
  position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50%;background:none;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
  animation:pkghop 1.3s ease-in-out infinite;z-index:2;
}
@keyframes pkghop{
  0%,100%{transform:translate(-50%,0);}
  30%{transform:translate(-50%,-10px);}
  50%{transform:translate(-50%,0);}
}

/* ---------- Türchen-Popup ---------- */
.doormodal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:14px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease, visibility .25s;}
.doormodal.show{opacity:1;visibility:visible;pointer-events:auto;}
.doormodal-backdrop{position:absolute;inset:0;background:rgba(9,20,18,.8);backdrop-filter:blur(3px);}
.doormodal-close{
  position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  background:rgba(251,243,230,.14);border:1.5px solid rgba(251,243,230,.4);color:var(--paper);
  font-size:18px;line-height:1;cursor:pointer;z-index:2;
}
.doormodal-card{position:relative;width:260px;height:300px;perspective:1200px;transform:scale(.8);transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.doormodal.show .doormodal-card{transform:scale(1.15);}
.doormodal-hint{font-family:'Moderat','Baloo 2',sans-serif;font-weight:400;position:absolute;bottom:-34px;left:0;width:100%;text-align:center;font-size:13px;color:var(--blush);opacity:.8;}

.door{position:relative;width:100%;height:100%;}
.flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.34,1.56,.64,1);}
.door.open .flip{transform:rotateY(180deg);}
.face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.face.front{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), var(--pine);
  border:2px solid rgba(251,243,230,.16);box-shadow:0 14px 26px rgba(0,0,0,.35), inset 0 0 0 6px rgba(27,89,80,.35);}
.face.front .roofcap{width:56%;height:20px;background:var(--coral);border-radius:8px 8px 0 0;margin-bottom:-6px;position:relative;top:2px;}
.face.front .num{font-family:'Baloo 2';font-weight:800;font-size:88px;line-height:1;margin-top:14px;color:var(--paper);}
.face.front .lbl{font-family:'Fraunces';font-style:italic;font-size:13px;color:var(--blush);opacity:.85;margin-top:2px;letter-spacing:.03em;}
.face.front .knob{position:absolute;bottom:16px;width:8px;height:8px;border-radius:50%;background:var(--gold);}
.face.back{background:var(--paper);color:var(--ink);transform:rotateY(180deg);border:2px dashed var(--coral-dark);padding:20px;}
.face.back .ticket-num{position:absolute;top:12px;left:16px;font-family:'Baloo 2';font-weight:700;font-size:14px;color:var(--coral-dark);}
.face.back{padding:16px 18px;justify-content:center;gap:10px;}
.face.back .giftphoto{width:110px;height:96px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));}
.face.back .giftphoto img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.face.back .win-text{font-family:'Moderat','Baloo 2',sans-serif;font-weight:700;font-size:15px;line-height:1.3;text-align:center;color:var(--nori);}
.face.back .win-btn{font-family:'Moderat','Baloo 2',sans-serif;font-weight:700;font-size:14px;color:#fff;background:var(--coral);border:0;border-radius:999px;padding:9px 18px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.2);}
.face.back .win-btn:hover{background:var(--coral-dark);}
.face.back .win-msg{font-family:'Moderat','Baloo 2',sans-serif;font-weight:400;font-size:13px;line-height:1.4;text-align:center;color:var(--ink);display:none;}
.face.back .win-msg.show{display:block;}
.face.back .ticket-num{font-family:'Moderat','Baloo 2',sans-serif;font-weight:700;}
.face.front .num{font-family:'Moderat','Baloo 2',sans-serif;font-weight:700;}
.face.front .lbl{font-family:'Moderat','Baloo 2',sans-serif;font-style:normal;font-weight:400;}
.face.back .win-btn{margin-top:30px;}
.face.back .win-big{font-weight:700;font-size:22px;color:var(--coral-dark);margin-bottom:6px;}
.face.back .win-msg{font-size:15px;max-width:200px;}
.face.back.revealed .win-text,.face.back.revealed .win-desc{display:none;}

.door.today-highlight .face.front{border-color:var(--coral);}

.confetti-pop{position:absolute;inset:0;pointer-events:none;overflow:visible;}
.bit{position:absolute;width:5px;height:8px;opacity:0;border-radius:1px;}

.m-footer{font-family:'Moderat','Baloo 2',sans-serif;font-weight:400;font-synthesis:none;padding:26px 16px 34px;text-align:center;color:var(--blush);opacity:.6;font-size:11.5px;letter-spacing:.03em;}
/* ---------- Anmelde-Popup ---------- */
.signup{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:rgba(9,20,18,.78);backdrop-filter:blur(4px);transition:opacity .35s ease, visibility .35s;font-family:'Moderat','Baloo 2',sans-serif;}
.signup.hide{opacity:0;visibility:hidden;pointer-events:none;}
.signup-box{position:relative;width:calc(100% - 40px);max-width:340px;background:var(--paper);color:var(--ink);border-radius:20px;padding:28px 22px 22px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.5);border:2px dashed var(--coral-dark);}
.signup-box img{width:84px;height:auto;display:block;margin:-62px auto 8px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.3));}
.signup-box h2{font-weight:700;font-size:22px;line-height:1.2;margin:0 0 8px;color:var(--nori);}
.signup-box p{font-weight:400;font-size:15px;line-height:1.45;margin:0 0 16px;}
.signup-box input[type=email]{width:100%;box-sizing:border-box;font-family:inherit;font-weight:400;font-size:16px;padding:12px 16px;border-radius:999px;border:1.5px solid var(--paper-dim);background:#fff;color:var(--ink);outline:none;}
.signup-box input[type=email]:focus{border-color:var(--coral);}
.signup-box button.go{margin-top:12px;width:100%;font-family:inherit;font-weight:700;font-size:16px;color:#fff;background:var(--coral);border:0;border-radius:999px;padding:12px 18px;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.2);}
.signup-box button.go:hover{background:var(--coral-dark);}
.signup-err{font-weight:400;font-size:13px;color:var(--coral-dark);min-height:18px;margin-top:8px;}
.signup-skip{display:inline-block;margin-top:6px;font-weight:400;font-size:13px;color:var(--ink);opacity:.6;background:none;border:0;cursor:pointer;text-decoration:underline;font-family:inherit;}
.signup-ok{display:none;}
.signup.done .signup-form{display:none;}
.signup.done .signup-ok{display:block;}

/* Lampions oben – wie Desktop sanft schwingend */
.m-lanterns{position:absolute;left:-27.75%;top:180px;width:155.5%;z-index:3;pointer-events:none;
  transform-origin:50% 0%;animation:m-lanternsway 5.5s ease-in-out infinite;}
.m-lanterns img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));}
@keyframes m-lanternsway{0%,100%{transform:rotate(-1deg);}50%{transform:rotate(1.1deg);}}
.m-truhe-wrap{position:relative;z-index:4;}

/* robOS: the phone-frame mock-up becomes the real phone screen */
body{display:block;padding:0;background:var(--nori-dark);min-height:100vh}
.phone-frame{width:100%;max-width:none;height:auto;min-height:100vh;border:0;border-radius:0;box-shadow:none;overflow:visible;margin:0}
.phone-screen{overflow:visible;height:auto;border-radius:0}
/* .m-lanterns is 155% wide (left:-27.75%): clip it here since the frame no longer does */
html,body{overflow-x:hidden}
.advent-mobile,.m-scene{overflow-x:hidden}
.advent-desktop-outer{display:none}
}

/* ---- shared overrides ---- */
.toast26{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:10000;background:#0c211d;color:#fbf3e6;font-family:'Moderat',sans-serif;font-size:14px;line-height:1.35;padding:12px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:92vw;text-align:center}
.toast26.show{opacity:1;transform:translateX(-50%) translateY(0)}
.signup-consent{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.35;color:var(--ink);margin:10px 0 2px;text-align:left}
.signup-consent input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--coral)}
.signup-consent a{color:var(--coral-dark);text-decoration:underline}
.signup-form .go[disabled]{opacity:.6;cursor:wait}
.face.back .win-prize{font-family:'Moderat',sans-serif;font-weight:700;font-size:13px;color:var(--coral-dark);text-align:center;line-height:1.3;max-width:100%}
.face.back .pastmark{position:absolute;top:8px;right:12px;width:28px;height:28px;border-radius:50%;background:var(--nori);color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.face.back .win-past{font-family:'Moderat',sans-serif;font-size:13px;color:var(--ink);text-align:center;margin-top:6px;opacity:.85}
.face.back .win-btn[disabled]{opacity:.6;cursor:wait}
.face.back .win-desc{font-family:'Moderat',sans-serif;font-weight:400;font-size:12px;line-height:1.35;color:var(--ink);opacity:.85;text-align:center;max-width:100%}
.pkgspot.future{cursor:default}
.pkgspot.future .hint{display:none}
.pkgspot:focus-visible,.door:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:12px}
/* desktop: switch between doors 1–9 and 10–18 once door 10 is open (JS shows it) */
.doorrange{display:inline-flex;gap:0;margin-top:22px;border:2px solid rgba(251,243,230,.35);border-radius:999px;padding:3px;background:rgba(9,20,18,.35)}
.doorrange[hidden]{display:none}
.doorrange button{font-family:'Moderat',sans-serif;font-weight:700;font-size:14px;line-height:1;color:var(--paper);background:transparent;border:0;border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .15s,color .15s}
.doorrange button.on{background:var(--coral);color:#fff}
.doorrange button:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
/* No prefers-reduced-motion block on purpose: the client's design package has none and the
   decorative motion (lanterns, badge spin, LED ticker, snow) is part of the brief. */

/* Demo: prize hidden server-side, card shows a blurred placeholder (v2026.7) */
.face.back .win-blur{filter:blur(7px);user-select:none;pointer-events:none;}
.face.back .giftphoto.win-blur{filter:blur(9px) drop-shadow(0 6px 8px rgba(0,0,0,.25));}

/* Demo: hint in the signup popup (v2026.8) */
.signup-form .signup-demo{font-size:.85em;color:#b3261e;margin:-.3em 0 .6em;}
.signup-form .signup-demo.hide{display:none;}

/* robOS v2026.9: tablets (600–1023px) use the mobile package, scaled up a notch: bigger copy and fridge, lanterns no longer 155% wide */
@media (min-width:600px) and (max-width:1023px){
  .m-hdgwrap h1{font-size:40px;margin-bottom:14px;}
  .m-hdgwrap p{font-size:17px;max-width:560px;}
  .m-truhe{max-width:560px;}
  .m-lanterns{left:-8%;width:116%;top:230px;}
}