@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-024F}
@font-face{font-family:Nunito;src:url(fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--nacht:#0c1b33;--nacht2:#132a4c;--rot:#c8102e;--rot2:#e63946;--gold:#f4c95d;--schnee:#fffdf8;--creme:#fbf4e8;--tanne:#1f6b4a;--text:#1d2433;--leise:#5d6577;--linie:#eadfcc;--r:22px}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:Nunito,system-ui,sans-serif;background:var(--creme);color:var(--text);font-size:18px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:800;line-height:1.1}
.kicker{font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--rot)}
.luecke{background:#fff2a8;color:#5a4a00;padding:0 .3em;border-radius:4px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font:700 17px Nunito;border:0;border-radius:999px;padding:15px 28px;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.knopf:hover{transform:translateY(-2px)}
.knopf.rot{background:linear-gradient(180deg,var(--rot2),var(--rot));color:#fff;box-shadow:0 12px 28px -10px rgba(200,16,46,.7)}
.knopf.hell{background:#fff;color:var(--nacht);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.knopf.rand{background:transparent;color:var(--nacht);box-shadow:inset 0 0 0 2px var(--nacht)}
.knopf.klein{padding:10px 18px;font-size:15px}
.knopf:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s}
.kopf.fest{background:rgba(12,27,51,.92);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(0,0,0,.2)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font:800 22px Fraunces}
.marke svg{width:38px;height:38px}
.nav{display:flex;gap:24px;align-items:center}
.nav>a:not(.knopf){color:#dfe7f5;text-decoration:none;font-weight:700;font-size:15px}
.nav>a:not(.knopf):hover{color:var(--gold)}
.menue{display:none;background:none;border:0;width:44px;height:44px}
.menue span{display:block;width:24px;height:2px;background:#fff;margin:6px auto}

/* Hero */
.hero{position:relative;min-height:100svh;background:radial-gradient(900px 600px at 75% 30%,#1d3d6b,transparent 70%),linear-gradient(180deg,#081428,var(--nacht) 60%,#18375f);color:#fff;overflow:hidden;display:flex;align-items:center;padding:110px 0 120px}
#schnee{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;width:100%}
.hero h1{font-size:clamp(42px,6vw,78px);margin:16px 0 18px}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .kicker{color:var(--gold)}
.hero p.lead{font-size:20px;color:#d6e0f0;max-width:560px}
.knoepfe{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.vertrauen{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;font-size:15px;color:#c3cfe4}
.vertrauen span::before{content:"✓ ";color:var(--gold);font-weight:700}
.hero-bild{position:relative}
.hero-bild svg{width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.4))}
.huegel{position:absolute;left:0;right:0;bottom:-2px;height:120px;pointer-events:none}
.countdown{position:relative;display:table;margin:-10px auto 0;z-index:2;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);border-radius:18px;padding:14px 18px;text-align:center}
.countdown b{display:block;font:800 34px Fraunces;color:var(--gold)}
.countdown small{font-size:13px;color:#dfe7f5}

section{padding:100px 0}
.titel{text-align:center;max-width:720px;margin:0 auto 50px}
.titel h2{font-size:clamp(32px,4vw,50px);margin-top:10px;color:var(--nacht)}
.titel p{color:var(--leise);margin-top:12px}

/* Schritte */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.schritt{background:#fff;border-radius:var(--r);padding:30px;box-shadow:0 20px 40px -30px rgba(12,27,51,.4);position:relative}
.schritt b{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--rot);color:#fff;font:800 24px Fraunces;margin-bottom:14px}
.schritt h3{font-size:24px;color:var(--nacht);margin-bottom:6px}
.schritt p{color:var(--leise)}

/* Buchung */
.buchung-bereich{background:linear-gradient(180deg,var(--creme),#f3e6cf)}
.buchung{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.karte{background:#fff;border-radius:26px;box-shadow:0 30px 60px -40px rgba(12,27,51,.55);padding:34px}
.stufen{display:flex;gap:6px;margin-bottom:24px}
.stufen i{flex:1;height:6px;border-radius:6px;background:#efe6d6;transition:background .3s}
.stufen i.an{background:var(--rot)}
.stufe h3{font-size:28px;color:var(--nacht);margin-bottom:4px}
.stufe .unter{color:var(--leise);margin-bottom:20px;font-size:16px}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.felder label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700;color:var(--nacht)}
.felder .breit{grid-column:1/-1}
input,select,textarea{font:400 16px Nunito;padding:13px 14px;border:2px solid var(--linie);border-radius:14px;background:var(--schnee);color:var(--text);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rot2)}
textarea{min-height:90px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px}
.chips button{border:2px solid var(--linie);background:var(--schnee);border-radius:999px;padding:8px 14px;font:700 14px Nunito;color:var(--nacht);cursor:pointer;transition:.15s}
.chips button:hover{border-color:var(--rot2)}
.chips button.an{background:var(--tanne);border-color:var(--tanne);color:#fff}
.chips.rot button.an{background:var(--rot);border-color:var(--rot)}
.gruppe{font-weight:700;font-size:14px;color:var(--nacht);margin-top:6px}
.zeiten{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.zeiten button{border:2px solid var(--linie);background:var(--schnee);border-radius:12px;padding:10px 0;font:700 15px Nunito;cursor:pointer}
.zeiten button.an{background:var(--nacht);color:#fff;border-color:var(--nacht)}
.haken{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--text);margin-top:12px}
.haken input{width:20px;height:20px;margin-top:3px;accent-color:var(--rot);flex:none}
.leiste{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:12px;flex-wrap:wrap}
.zurueck{background:none;border:0;font:700 15px Nunito;color:var(--leise);cursor:pointer}
.fehler{color:var(--rot);font-weight:700;font-size:15px;margin-top:12px}
.hinweis{font-size:13.5px;color:var(--leise);margin-top:12px}
.preis-zeile{display:flex;justify-content:space-between;align-items:center;background:var(--creme);border-radius:16px;padding:16px 18px;margin-top:18px;font-weight:700}
.preis-zeile b{font:800 26px Fraunces;color:var(--rot)}
.vorschau{position:sticky;top:96px;background:var(--nacht);color:#e8eef9;border-radius:26px;padding:30px;box-shadow:0 30px 60px -30px rgba(12,27,51,.8)}
.vorschau h3{color:#fff;font-size:22px;margin-bottom:4px}
.vorschau .klein{font-size:13px;color:#9fb0cc;margin-bottom:18px}
.blase{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:18px 18px 18px 4px;padding:14px 16px;margin-bottom:10px;font-size:16px;line-height:1.5}
.blase.wm::before{content:"🎅 Weihnachtsmann";display:block;font-size:12px;font-weight:700;color:var(--gold);margin-bottom:4px;letter-spacing:.06em}
.blase.leer{color:#9fb0cc;font-style:italic}

/* Leistungen */
.leistungen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.leistung{background:#fff;border-radius:var(--r);padding:28px;box-shadow:0 20px 40px -32px rgba(12,27,51,.45)}
.leistung .sym{font-size:34px;margin-bottom:10px}
.leistung h3{font-size:22px;color:var(--nacht);margin-bottom:6px}
.leistung p{color:var(--leise);font-size:16px}

/* Sprechprobe-Hinweis */
.probe{background:var(--nacht);color:#fff;border-radius:30px;padding:46px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;position:relative;overflow:hidden}
.probe::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(244,201,93,.35),transparent 70%)}
.probe h2{font-size:clamp(28px,3.4vw,42px)}
.probe p{color:#cdd8ea;margin-top:8px;max-width:620px}

/* Sicherheit + FAQ */
.sicher{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sicher div{background:#fff;border-radius:18px;padding:22px;border:2px solid var(--linie)}
.sicher b{display:block;font:800 18px Fraunces;color:var(--tanne);margin-bottom:6px}
.sicher p{font-size:15px;color:var(--leise)}
.faq{max-width:820px;margin:0 auto;display:grid;gap:10px}
.faq details{background:#fff;border-radius:16px;padding:18px 22px;border:2px solid var(--linie)}
.faq details[open]{border-color:var(--rot2)}
.faq summary{cursor:pointer;font:700 18px Nunito;color:var(--nacht);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--rot);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--leise);margin-top:10px}

.cta{background:linear-gradient(180deg,#18375f,var(--nacht));color:#fff;text-align:center;position:relative;overflow:hidden}
.cta h2{font-size:clamp(34px,5vw,62px)}
.cta h2 em{font-style:normal;color:var(--gold)}
.cta p{color:#cdd8ea;margin:14px auto 0;max-width:560px}
.cta .knoepfe{justify-content:center}
.fuss{background:#081428;color:#9fb0cc;padding:44px 0 90px;font-size:14.5px}
.fuss .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fuss a{color:#dfe7f5;text-decoration:none;margin-left:16px}

.zeig{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.zeig.da{opacity:1;transform:none}
.handy-leiste{display:none}

@media (max-width:1000px){.hero .wrap,.buchung{grid-template-columns:1fr}.vorschau{position:static}.schritte,.leistungen{grid-template-columns:1fr}.sicher{grid-template-columns:1fr 1fr}.probe{grid-template-columns:1fr}.hero-bild{max-width:420px;margin:0 auto}.countdown{right:0;top:-10px}}
@media (max-width:760px){
  body{font-size:16px}.wrap{padding:0 16px}section{padding:76px 0}
  .nav{position:fixed;inset:74px 0 auto;flex-direction:column;align-items:stretch;gap:0;background:var(--nacht);padding:10px 16px 20px;transform:translateY(-130%);transition:transform .35s}
  .nav.offen{transform:none}.nav>a:not(.knopf){padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}.nav .knopf{margin-top:12px}
  .menue{display:block}.felder,.sicher{grid-template-columns:1fr}.zeiten{grid-template-columns:repeat(3,1fr)}.karte{padding:24px 18px}.probe{padding:30px 22px}
  .handy-leiste{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:40}.handy-leiste .knopf{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.zeig{opacity:1;transform:none}}

.hero-bild svg{animation:wiegen 7s ease-in-out infinite;transform-origin:50% 90%}
@keyframes wiegen{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}