*{box-sizing:border-box}body{margin:0;background:#063f29;color:#fff7e5;font:17px/1.5 Arial,sans-serif;min-height:100svh}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffbb76;outline-offset:5px}header{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:25px 5%}header a{font:bold 30px Georgia;letter-spacing:-1.3px;color:#fff7e5;text-decoration:none}header i{color:#ff82bf;font-style:normal}header span{font-size:12px;color:#b7d2c4}header button,.back{background:none;border:1px solid #ffffff40;border-radius:24px;color:#e4ecdf;padding:8px 13px;font-size:12px}main{max-width:1060px;margin:0 auto;min-height:75svh;padding:35px 35px 55px;outline:none}.stage{animation:enter .4s ease}.kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#ffb078;margin:0 0 15px}h1,h2{font:normal clamp(35px,5vw,60px)/1.08 Georgia,serif;letter-spacing:-1.7px;margin:15px 0 20px}h1 em,h2 em{color:#ff82bf}.lead{max-width:580px;color:#d1e1d7;font-size:18px}.intro{text-align:center;max-width:750px;margin:auto}.intro .lead{margin:18px auto 25px}.compass{width:145px;height:145px;border-radius:50%;background:#fff3d8;border:9px solid #ed338c;box-shadow:0 14px 40px #001f17aa;display:grid;place-items:center;margin:25px auto 38px;position:relative}.compass:before{content:'✦';font-size:105px;color:#e6007e;animation:needle 2s ease-in-out 1;line-height:1}.compass:after{content:'';width:18px;height:18px;background:#ff9b46;border-radius:50%;position:absolute}.primary{background:#d50070;border:1px solid #ff82bf;color:white;padding:15px 25px;border-radius:12px;font-weight:bold;display:inline-block}.secondary{background:transparent;border:1px solid #ffffff80;color:#fff7e5;padding:15px 23px;border-radius:12px}.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px}.intro .actions{justify-content:center}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:760px}.option{background:#fffdf8;color:#123c2c;text-align:left;padding:21px;border:3px solid transparent;border-radius:16px;display:flex;align-items:center;gap:17px;min-height:86px;transition:border-color .15s,transform .15s}.option[aria-pressed=true]{border-color:#ff60b0;background:#fff0f7}.option:hover{transform:translateY(-2px)}.option b{display:block;font-size:18px}.option small{display:block;font-size:13px;color:#53655b;margin-top:4px}.dot{width:20px;height:20px;border:2px solid #9eada2;border-radius:50%;flex:none}.option[aria-pressed=true] .dot{background:#d50070;box-shadow:inset 0 0 0 4px #fff;border-color:#d50070}.split{display:grid;grid-template-columns:1.3fr .7fr;gap:40px}.hatfield{height:300px;position:relative;align-self:center;border-bottom:1px solid #ffffff20;overflow:hidden}.tinyhat{position:absolute;left:var(--x);top:var(--y);width:44px;height:55px;animation:hatpop 5s var(--delay) infinite both}.tinyhat svg{width:100%;height:100%}.helper{font-size:13px;color:#b9d4c4;margin-top:20px}.error{color:#ffc8de;min-height:24px;margin:15px 0 0}input{background:white;color:#123c2c;border:2px solid #bfd0c3;border-radius:12px;padding:14px;max-width:100%;width:230px}label.field{display:block;margin:20px 0 9px}.fact{margin-top:25px;max-width:760px;border-top:1px solid #ffffff30;padding-top:18px}.fact summary{cursor:pointer;font-size:15px;color:#ffb078}.fact p{font-size:14px;color:#d1e1d7}.fact a{color:#ffb6d8}.face{width:85px;height:85px;object-fit:contain;flex:none;filter:drop-shadow(0 5px 5px #69351324)}.goal.option{min-height:132px;padding:12px 18px}.santa-layout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:25px}.santa{width:100%;max-height:460px;object-fit:contain;mask-image:radial-gradient(ellipse 65% 67%,#000 45%,transparent 76%)}.santa-note{font-size:11px;color:#a8cbb8;text-align:center}.profile{background:#ffffff0b;border:1px solid #ffffff20;border-radius:12px;padding:15px;color:#c8ddce;font-size:14px}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}.product{background:#fffdf8;color:#143f2d;border-radius:18px;padding:20px}.product img{width:100%;height:180px;object-fit:contain}.product h3{font:27px Georgia;margin:15px 0}.product p{font-size:14px}.product a{color:#a70058}.badge{display:inline-block;background:#f9dfeb;color:#8c0049;border-radius:20px;font-size:11px;padding:5px 10px}.back{border:none;padding-left:0;font-size:14px}.reveal{animation:enter .5s .1s both}footer{max-width:1060px;margin:0 auto;padding:20px 35px 28px;color:#a3c0b0;font-size:11px}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes needle{from{transform:rotate(-140deg)}to{transform:rotate(360deg)}}@keyframes hatpop{0%,12%{opacity:0;transform:translateY(15px) rotate(-12deg) scale(.65)}20%,65%{opacity:1;transform:translateY(0) rotate(5deg) scale(1)}85%,100%{opacity:0;transform:translateY(-5px) scale(.9)}}.still *{animation:none!important;transition:none!important}.still .tinyhat{opacity:.7}@media(max-width:700px){header{padding:20px 6%;flex-wrap:wrap}header a{font-size:27px}header span{display:none}main{padding:20px 6% 35px;min-height:75svh}h1,h2{font-size:39px;letter-spacing:-1.2px}.lead{font-size:17px}.options{grid-template-columns:1fr;gap:10px}.option{padding:16px;min-height:70px}.option b{font-size:17px}.split{display:block}.hatfield{height:110px;margin-top:14px}.tinyhat{width:30px;height:38px}.face{width:68px;height:68px}.goal.option{min-height:98px}.santa-layout{display:flex;flex-direction:column-reverse;gap:0}.santa{height:240px;max-width:230px;display:block;margin:auto}.santa-note{display:none}.products{grid-template-columns:1fr}.actions{gap:10px}.primary,.secondary{font-size:16px;padding:14px 18px}.intro .compass{width:120px;height:120px;margin:18px auto 30px}.intro h1{font-size:43px}footer{padding:20px 6%}.product img{height:160px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.tinyhat{opacity:.7}}
.face{display:block;background-image:url(assets/lebkuchengesichter.png);background-size:200% 200%;background-repeat:no-repeat}.face-0{background-position:0 0}.face-1{background-position:100% 0}.face-2{background-position:0 100%}.face-3{background-position:100% 100%}
.face{width:108px;height:72px}@media(max-width:700px){.face{width:84px;height:56px}}

header .wordmark{font:bold 30px Georgia;letter-spacing:-1.3px;color:#fff7e5}header .wordmark i{color:#ff82bf}header>span:not(.wordmark){font-size:12px}.question-layout{display:block}.back{padding:14px 18px}.actions{gap:12px}.quantity-grid{grid-template-columns:repeat(3,1fr);max-width:850px}.quantity.option{aspect-ratio:1;min-height:0;flex-direction:column;justify-content:center;gap:16px;text-align:center;padding:20px}.quantity.option b{font-size:15px}.number-art{width:80%;height:65px;object-fit:contain}.goal-grid{grid-template-columns:repeat(2,1fr);max-width:780px}.goal.option{flex-direction:column;justify-content:center;text-align:center;background:#13583d;color:#fff7e5;min-height:230px;padding:18px}.goal.option small{color:#d2e4d8}.goal.option[aria-pressed=true]{border-color:#ff82bf;background:#22684b}.cookie{display:block;width:130px;height:130px;background-image:url(assets/lebkuchen-koerper.webp);background-size:200% 200%;background-repeat:no-repeat}.cookie-0{background-position:0 0}.cookie-1{background-position:100% 0}.cookie-2{background-position:0 100%}.cookie-3{background-position:100% 100%}
.advent{display:flex;gap:22px;justify-content:center;align-items:flex-end;height:155px;margin:15px auto 25px}.candle{position:relative;width:34px;height:80px;background:repeating-linear-gradient(145deg,#ff82bf 0 12px,#ffe8d0 12px 20px);border-radius:5px 5px 3px 3px;box-shadow:0 10px 10px #00281b}.c1{height:110px}.c2{height:65px}.flame{position:absolute;bottom:calc(100% + 8px);left:6px;width:23px;height:35px;background:#fff4b5;border-radius:75% 20% 65% 35%;transform:rotate(-20deg);opacity:0;animation:lightup 1s .4s forwards}.c1 .flame{animation-delay:.85s}.c2 .flame{animation-delay:1.3s}.flame:after{content:'';position:absolute;inset:-25px;background:#ffb75066;filter:blur(17px);border-radius:50%}.intro-cta{opacity:0;transform:translateY(9px);transition:opacity .7s,transform .7s}.intro-cta.ready{opacity:1;transform:none}.intro-cta button:disabled{cursor:default}@keyframes lightup{to{opacity:1;box-shadow:0 0 35px #ffd46b88}}
.santa-scene{text-align:center;position:relative}.santa-claim{font:27px Georgia;margin:0 0 6px}.santa-claim em{color:#ff82bf}.santa-screen{height:480px;overflow:hidden;position:relative}.santa-screen .santa{width:100%;height:100%;max-height:none;object-fit:contain;mask-image:none}.santa-followup[hidden]{display:none}.santa-followup .lead{margin:12px auto}.santa-followup .actions{justify-content:center}.santa-followup .lead{animation:enter .6s both}.santa-followup .primary{animation:enter .6s .25s both}.santa-followup .secondary{animation:enter .6s .55s both}.skip-scene{border:0;background:none;color:#b9d4c4;font-size:12px;text-decoration:underline;padding:12px}.skip-scene[hidden]{display:none}.finished .santa-screen{height:300px;transition:height .6s}
@media(max-width:700px){header .wordmark{font-size:25px}.quantity-grid{grid-template-columns:repeat(2,1fr);gap:12px}.quantity.option{padding:12px;gap:12px}.number-art{height:53px}.quantity.option b{font-size:14px}.quantity.option small{font-size:12px}.goal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.goal.option{min-height:200px;padding:12px 8px;gap:9px}.goal.option b{font-size:15px}.goal.option small{font-size:12px;line-height:1.4}.cookie{width:110px;height:110px}.santa-claim{font-size:25px}.santa-screen{height:calc(100svh - 180px);min-height:360px;margin:0 -6.8%}.santa-screen .santa{max-width:none;max-height:none;height:100%;width:100%}.finished .santa-screen{height:40svh;min-height:230px}.santa-followup .actions{flex-direction:column;align-items:stretch}.santa-followup .lead{font-size:17px}.advent{height:140px}.actions .primary{max-width:76%}.santa-followup .primary{max-width:none}}
@media(prefers-reduced-motion:reduce){.flame{opacity:1}.intro-cta{opacity:1;transform:none}}.still .flame{opacity:1}

.still .santa-screen .santa{opacity:1}@media(prefers-reduced-motion:reduce){.santa-screen .santa{opacity:1}}

.santa-screen .santa{mask-image:linear-gradient(to bottom,#000 0%,#000 84%,transparent 100%)}

/* V3: proportion and spacing aligned with native Fluent reference patterns. */
.quantity-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:840px}
.quantity.option{aspect-ratio:auto;min-height:112px;height:112px;padding:15px 12px;gap:8px;background:#15583e;border:2px solid #ffffff18;border-radius:13px;color:#fff;position:relative}
.quantity.option:hover{background:#1b6448;transform:translateY(-1px)}
.quantity.option[aria-pressed=true]{background:#22694d;border-color:#ff82bf;box-shadow:0 0 0 1px #ff82bf}
.quantity.option[aria-pressed=true]:after{content:'✓';position:absolute;right:9px;top:6px;color:#ffacd1;font-size:15px;font-weight:bold}
.quantity-number{font-family:'Arial Black','Arial',sans-serif;font-weight:900;font-size:44px;line-height:1;letter-spacing:-2px;font-variant-numeric:lining-nums tabular-nums;color:#fff}
.quantity-number.range-number{font-size:36px;letter-spacing:-1.8px}
.quantity.option b{font:400 14px/1.25 Arial,sans-serif;color:#e0ede4}
.quantity.option small:empty{display:none}
main[data-screen="2"] h1{max-width:760px;margin:10px 0 22px}
main[data-screen="2"] .error{margin:8px 0;min-height:20px;font-size:13px}
main[data-screen="2"] .actions{margin-top:16px}
@media(max-width:700px){
.quantity-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quantity.option{height:102px;min-height:102px;padding:12px 7px;gap:9px;border-radius:11px}
.quantity.option:last-child{grid-column:1/-1;height:76px;min-height:76px;flex-direction:row;gap:15px}
.quantity-number{font-size:39px;letter-spacing:-1.7px}.quantity-number.range-number{font-size:30px;letter-spacing:-1.5px}
.quantity.option b{font-size:13px;line-height:1.25}
main[data-screen="2"]{padding-top:8px;padding-bottom:20px;min-height:0}
main[data-screen="2"] h1{font-size:33px;line-height:1.08;letter-spacing:-1px;margin:8px 0 18px;max-width:330px}
main[data-screen="2"] .kicker{margin-bottom:8px;font-size:10px}
main[data-screen="2"] .actions{margin-top:8px;flex-wrap:nowrap}
main[data-screen="2"] .actions button{min-height:48px;font-size:16px}
}
@media(max-width:360px){.quantity-number.range-number{font-size:27px}.quantity.option b{font-size:12px}}
@media(max-height:650px) and (max-width:700px){main[data-screen="2"] h1{font-size:29px;margin-bottom:13px}.quantity.option{height:88px;min-height:88px}.quantity.option:last-child{height:62px;min-height:62px}.quantity-number{font-size:34px}.quantity-number.range-number{font-size:27px}}

main[data-screen="3"] h1{margin:8px 0 18px}main[data-screen="3"] .error{min-height:20px;margin:8px 0}main[data-screen="3"] .actions{margin-top:12px}@media(max-width:700px){main[data-screen="3"]{padding-top:8px;padding-bottom:20px;min-height:0}main[data-screen="3"] h1{font-size:33px;max-width:330px}main[data-screen="3"] .helper{font-size:12px;margin-top:13px}main[data-screen="3"] .fact{margin-top:14px;padding-top:12px}main[data-screen="3"] .quantity-number{font-size:29px;letter-spacing:-1.4px}main[data-screen="3"] .actions{flex-wrap:nowrap}}

/* V5: quieter typography, sequential choices and selection-led navigation. */
[hidden]{display:none!important}
.question-actions{max-width:840px;justify-content:space-between;flex-wrap:nowrap;min-height:54px}
.question-actions .back{padding-left:0}.question-actions .primary{margin-left:auto}
.option{animation:choice-in .42s var(--choice-delay,0ms) both}
.choice-ready{animation:choice-in .3s both}
@keyframes choice-in{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
.quantity-number,.quantity-number.range-number{font-family:'Segoe UI',Arial,sans-serif;font-weight:600;font-size:40px;letter-spacing:-1.3px;font-variant-numeric:lining-nums tabular-nums}
.quantity-number i{font-weight:300;font-style:normal;font-size:.83em;letter-spacing:0}
.fact summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:15px}
.fact summary::-webkit-details-marker{display:none}.fact summary:after{content:'+';font-size:24px;font-weight:300;line-height:1}.fact[open] summary:after{content:'−'}
.santa-screen:not(.soft-in) .santa{opacity:0}
.santa-screen.soft-in .santa{animation:santa-arrive .85s cubic-bezier(.22,.61,.36,1) both}
@keyframes santa-arrive{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.santa-screen .santa{mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,#000 0%,#000 80%,transparent 100%);mask-composite:intersect}
@media(max-width:700px){.quantity-number,.quantity-number.range-number,main[data-screen="3"] .quantity-number{font-size:32px;letter-spacing:-1px}.question-actions .primary{max-width:none}.intro .lead{font-size:16px}.question-actions{scroll-margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){.option,.choice-ready{animation:none}.santa-screen .santa{opacity:1}}

.santa-screen .santa{width:auto;max-width:100%;margin:0 auto;display:block}