@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton.woff2) format("woff2")}
@font-face{font-family:"Kaushan Script";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/kaushan-script.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-400.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat-500.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/montserrat-600.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-700.woff2) format("woff2")}
:root{
  --ground:#FAF7F2; --tile:#F0E9DC; --tile-open:#FFFFFF; --ink:#1D1A17; --muted:#655C53;
  --line:#E0D5C3; --red:#E30613; --red-deep:#AF151B; --headline:#E30613; --green:#00843D;
  --on-red:#FFFFFF; --sheet:#FFFFFF;
  --display:"Anton","Arial Narrow","Haettenschweiler",Impact,sans-serif;
  --body:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --script:"Kaushan Script","Brush Script MT","Segoe Script",cursive;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#143A28; --tile:#1D4B35; --tile-open:#0F2E20; --ink:#FAF7F2; --muted:#BFD2C5;
    --line:#2E6048; --headline:#FAF7F2; --green:#7BD69B; --sheet:#1A4431;
  }
}
:root[data-theme="dark"]{
  --ground:#143A28; --tile:#1D4B35; --tile-open:#0F2E20; --ink:#FAF7F2; --muted:#BFD2C5;
  --line:#2E6048; --headline:#FAF7F2; --green:#7BD69B; --sheet:#1A4431;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:1rem; line-height:1.55; padding-bottom:1.5rem; -webkit-font-smoothing:antialiased}
img{max-width:100%}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
.wrap{max-width:68rem; margin:0 auto; padding:0 1.15rem}

/* Kopf */
.top{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.9rem; padding-bottom:.4rem}
.logo{display:block; height:3.4rem; width:auto}
.logo-dark{display:none}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
}
.who{font-size:.85rem; text-align:right; color:var(--muted)}
.who button{background:none; border:0; padding:.6rem 0; min-height:44px; font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* Hero */
.hero{position:relative; padding-top:2.2rem; padding-bottom:1.5rem; overflow:hidden}
.hero h1{font-family:var(--display); font-weight:400; color:var(--headline); margin:0; line-height:.9; letter-spacing:-.005em;
  font-size:clamp(3.6rem, 19.5vw, 11.5rem); max-width:9.5ch}
.hero p{max-width:34rem; margin:1.4rem 0 0; font-size:1.08rem; font-weight:500}
.wurst{position:absolute; top:-1rem; right:max(1.1rem, 6%); width:clamp(4.6rem, 15vw, 10.5rem); height:auto; transform-origin:50% 0; animation:pendel 2.6s cubic-bezier(.3,.6,.3,1) 1 both}
@keyframes pendel{0%{transform:rotate(11deg)}28%{transform:rotate(-7deg)}52%{transform:rotate(4deg)}74%{transform:rotate(-2deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion: reduce){.wurst{animation:none} html{scroll-behavior:auto} .door,.btn{transition:none !important}}

/* Heute */
.today{display:grid; gap:1.2rem; background:var(--red); color:var(--on-red); border-radius:1.4rem; padding:1.4rem 1.3rem 1.5rem; position:relative; overflow:hidden; margin-top:1rem}
.today .num{position:absolute; right:-1.6rem; top:-1.6rem; width:8.5rem; height:8.5rem; border-radius:50%; background:var(--ground); color:var(--red);
  display:grid; place-items:center; font-family:var(--script); font-size:4.6rem; line-height:1; padding:1.1rem 1.2rem 0 0}
:root[data-theme="dark"] .today .num{background:#FAF7F2}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .today .num{background:#FAF7F2}}
.today h2{font-family:var(--display); font-weight:400; font-size:clamp(2rem,7vw,3.2rem); line-height:1; margin:0; max-width:calc(100% - 6.5rem)}
.today .prize{font-size:1.15rem; font-weight:600; margin:.55rem 0 0; max-width:calc(100% - 6rem)}
.today .note{margin:0; font-size:.95rem; max-width:36rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:3.25rem; padding:.7rem 1.6rem; border-radius:999px; border:0; cursor:pointer;
  font-weight:700; font-size:1.05rem; transition:transform .12s ease}
.btn:active{transform:scale(.97)}
.btn-light{background:#FAF7F2; color:#8E1015}
.btn-red{background:var(--red-deep); color:#fff; width:100%}
.today :focus-visible{outline-color:#fff}
.done{display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:1.15rem}
.done svg{width:2.2rem; height:2.2rem; flex:none}


/* Kalender */
.kal h2,.how h2{font-family:var(--display); font-weight:400; font-size:clamp(2rem,6vw,3rem); line-height:1; margin:2.6rem 0 1rem; color:var(--headline)}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem; list-style:none; margin:0; padding:0}
@media (min-width:40rem){.grid{grid-template-columns:repeat(4,1fr); gap:.5rem}}
@media (min-width:62rem){.grid{grid-template-columns:repeat(6,1fr)}}
.door{container-type:inline-size; position:relative; display:block; width:100%; aspect-ratio:4/5; border:0; padding:0; background:var(--tile); color:var(--ink); overflow:hidden; cursor:pointer; text-align:left; transition:filter .15s ease}
.door:hover{filter:brightness(.97)}
.door .c{position:absolute; width:62%; aspect-ratio:1; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-family:var(--script); font-size:34cqw; line-height:1; right:-11%; bottom:-7%; padding:0 9% 5% 0}
.grid li:nth-child(3n+2) .door .c{top:-7%; bottom:auto; padding:9% 9% 0 0}
.grid li:nth-child(4n+3) .door .c{left:-11%; right:auto; padding:0 0 5% 9%}
.door .t{position:absolute; left:9%; top:8%; right:9%; font-size:clamp(.68rem,7.4cqw,.92rem); line-height:1.3; font-weight:600}
.grid li:nth-child(3n+2) .door .t{top:auto; bottom:8%}
.grid li:nth-child(4n+3) .door .t{text-align:right}
.door .t small{display:block; font-weight:500; color:var(--muted); font-size:1em}
.door.open{background:var(--tile-open); box-shadow:inset 0 0 0 2px var(--line)}
.door.open .c{background:transparent; color:var(--red); box-shadow:inset 0 0 0 3px var(--red)}
:root[data-theme="dark"] .door.open .c{color:#FF8A8F; box-shadow:inset 0 0 0 3px #FF8A8F}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .door.open .c{color:#FF8A8F; box-shadow:inset 0 0 0 3px #FF8A8F}}
.door.dabei .t small{color:var(--green); font-weight:700}
.door.today-door{background:var(--red); color:#fff}
.door.today-door .c{background:#FAF7F2; color:var(--red)}
.door.today-door .t small{color:#fff}
.door.today-door:focus-visible{outline-color:var(--ink); outline-offset:-6px}

/* Ablauf */
.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:1.3rem}
@media (min-width:48rem){.steps{grid-template-columns:repeat(3,1fr); gap:2rem}}
.steps li{counter-increment:s; padding-left:3.6rem; position:relative; min-height:2.8rem}
.steps li::before{content:counter(s); position:absolute; left:0; top:-.1rem; width:2.8rem; height:2.8rem; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-family:var(--script); font-size:1.6rem; line-height:1}
.steps strong{display:block}
.steps span{color:var(--muted); font-size:.95rem}

footer{margin-top:3rem; padding:1.4rem 0 1rem; border-top:2px solid var(--line); font-size:.85rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}
footer a{color:inherit; padding:.5rem 0}

/* Anmeldung */
dialog{border:0; padding:0; background:var(--sheet); color:var(--ink); width:min(30rem,100%); max-width:100%; max-height:92vh; border-radius:1.4rem; margin:auto}
@media (max-width:34rem){dialog{margin:auto 0 0; border-radius:1.4rem 1.4rem 0 0; padding-bottom:env(safe-area-inset-bottom,0px)}}
dialog::backdrop{background:rgba(29,26,23,.62)}
.sheet{padding:1.5rem 1.3rem 1.6rem; display:grid; gap:1rem}
.sheet h2{font-family:var(--display); font-weight:400; font-size:2rem; line-height:1.05; margin:0; color:var(--headline); padding-right:3rem}
.sheet p{margin:0; font-size:.95rem; color:var(--muted)}
.x{position:absolute; right:.7rem; top:.7rem; width:2.75rem; height:2.75rem; border-radius:50%; border:0; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer}
.field{display:grid; gap:.3rem}
.field label{font-size:.9rem; font-weight:600}
.field input{font:inherit; font-size:1rem; padding:.8rem .9rem; border:2px solid var(--line); border-radius:.7rem; background:var(--ground); color:var(--ink); min-height:3rem; width:100%}
.field input:focus-visible{outline:3px solid var(--ink); outline-offset:1px}
.check{display:grid; grid-template-columns:1.6rem 1fr; gap:.7rem; align-items:start; font-size:.9rem; cursor:pointer; padding:.25rem 0}
.check input{width:1.4rem; height:1.4rem; margin:.1rem 0 0; accent-color:var(--red-deep)}
.check small{display:block; color:var(--muted)}
.ts{border:2px dashed var(--line); border-radius:.7rem; padding:.8rem; font-size:.82rem; color:var(--muted)}
.err{color:#B3261E; font-weight:600; font-size:.9rem; min-height:1.2em; margin:0}
:root[data-theme="dark"] .err{color:#FFB4AB}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .err{color:#FFB4AB}}
.switch{background:none; border:0; padding:.6rem 0; min-height:44px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-weight:600; justify-self:start}

/* Hinweis */
.toast{position:fixed; left:50%; bottom:calc(1.5rem + env(safe-area-inset-bottom,0px)); transform:translate(-50%,1rem); background:var(--ink); color:var(--ground); padding:.8rem 1.1rem; border-radius:.9rem; font-size:.92rem; font-weight:500; width:max-content; max-width:calc(100% - 2rem); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:30}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* Ergänzungen zum Prototyp */
.today .pic{display:block; width:min(12rem,52%); height:auto; aspect-ratio:4/5; object-fit:contain; background:#FAF7F2; border-radius:1rem; margin-top:.9rem}
.today.closed{background:var(--tile); color:var(--ink)}
.today.closed h2{color:var(--headline)}
.today.closed .note a{color:inherit; font-weight:700}
.who strong{color:var(--ink)}
.check a{color:inherit; font-weight:600; text-underline-offset:3px}
.ts{min-height:4.4rem}
.ts:has(iframe){border:0; padding:0}
.btn[disabled]{opacity:.6; cursor:progress}

/* Teilnahmebedingungen */
.legal main{max-width:44rem}
.legal h1{font-family:var(--display); font-weight:400; color:var(--headline); font-size:clamp(2.4rem,9vw,4rem); line-height:1; margin:1.6rem 0 .4rem}
.legal .back{color:inherit; font-weight:600; display:inline-block; padding:.6rem 0}
.confirm main{padding-bottom:2rem}
.confirm .btn{margin-top:1rem; width:100%; max-width:24rem; min-height:3.6rem; font-size:1.15rem}
.confirm footer{display:flex; gap:1.4rem}
.draft{margin:1rem 0 0; padding:.9rem 1rem; border:2px dashed var(--red); border-radius:.8rem; color:var(--ink); background:var(--tile)}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}