/* Adventskalender: Stil der WebinarButler-Verkaufsseite (Figtree, Karten), hell in Beige mit dunkelgrüner Schrift
   und Gold. Der Kopfbereich liegt auf dem Bild mit dem grünen Schrank.
   Der Orange-Ton des Buttons ist die Markenfarbe des WebinarButlers. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --bg:#F5EADD; --ink:#0B3A28; --muted:#3F5A4D; --faint:#6B7F73;
  --line:rgba(11,58,40,.14); --line2:rgba(11,58,40,.24);
  --glass:rgba(255,253,247,.7); --glass2:rgba(255,253,247,.9);
  --tanne:#14573B; --tanne-hell:#1F7A52; --tanne-dunkel:#0B3324;
  /* Gold für Schrift und Symbole auf hellem Grund ist dunkler als das Gold auf dunklen Flächen (Fenster, Hinweis) */
  --gold:#B3680C; --gold-rgb:196,138,42;
  --o:#E97400; --o-dark:#D66A00; --o-deep:#C05C00; --o-rgb:233,116,0;
  --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); font-family:"Figtree",Arial,sans-serif; color:var(--ink)}
::selection{background:rgba(228,178,90,.5); color:#0B3A28}
a{text-decoration:none}
button{font-family:inherit}
.page{
  color:var(--ink); line-height:1.6; font-size:17px; min-height:100vh; position:relative; overflow-x:clip; -webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,#F7EFE2 0,#F4E9D7 100%);
}
.wrap{max-width:1160px; margin:0 auto; padding:0 clamp(18px,4vw,44px)}
.narrow{max-width:800px}
section{padding:clamp(48px,5.5vw,88px) 0; position:relative; z-index:1}
section[id]{scroll-margin-top:24px}
p{margin:0 0 1.1em} p:last-child{margin-bottom:0}
h1,h2,h3{letter-spacing:-.02em; line-height:1.12; text-wrap:balance; margin:0; font-weight:800}
h3{line-height:1.3; font-weight:700}
.grad{color:var(--gold)}
svg{display:block}
.ico{width:1.05em; height:1.05em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.center{text-align:center}
.center .eyebrow{margin-left:auto; margin-right:auto}
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{outline:3px solid var(--gold); outline-offset:3px}

/* Schnee über der Seite: Farbe kommt aus dem Stil, hier ein warmes Gold, weil Weiß auf Beige nicht zu sehen wäre */
#schnee{color:#D9A23A; position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:30}

/* Lichterkette über dem Kopf der Seite: Kabel fest, zwei Gruppen Birnen blinken im Wechsel */
.lichter{position:absolute; top:0; left:0; right:0; height:56px; pointer-events:none; z-index:3}
.lichter i{position:absolute; inset:0; background-repeat:repeat-x; background-position:-10px 0}
.lichter .kabel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='56'%3E%3Cpath d='M0 6Q70 40 140 6' fill='none' stroke='%232C5A45' stroke-width='2.5'/%3E%3C/svg%3E")}
.lichter .a{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='56'%3E%3Cpath d='M35 18.7V24M105 18.7V24' stroke='%232C5A45' stroke-width='2'/%3E%3Cellipse cx='35' cy='30' rx='4.2' ry='6.2' fill='%23F5C65A'/%3E%3Cellipse cx='105' cy='30' rx='4.2' ry='6.2' fill='%23F0524A'/%3E%3C/svg%3E"); filter:drop-shadow(0 0 7px rgba(245,198,90,.75)); animation:blink 2.8s ease-in-out infinite}
.lichter .b{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='56'%3E%3Cpath d='M70 23V28' stroke='%232C5A45' stroke-width='2'/%3E%3Cellipse cx='70' cy='34' rx='4.2' ry='6.2' fill='%23FFF1C9'/%3E%3C/svg%3E"); filter:drop-shadow(0 0 7px rgba(255,241,201,.8)); animation:blink 2.8s ease-in-out -1.4s infinite}
@keyframes blink{0%,100%{opacity:1} 50%{opacity:.3}}

/* Bausteine */
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:var(--ink);
  background:var(--glass); border:1px solid var(--line); padding:8px 15px 8px 11px; border-radius:100px; margin:0 0 22px}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--gold); animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),.5)} 70%{box-shadow:0 0 0 7px rgba(var(--gold-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),0)}}
.lead{font-size:clamp(16px,1.5vw,18.5px); color:var(--muted); line-height:1.6; margin-bottom:22px}
.btn{font-size:15.5px; font-weight:500; border-radius:13px; padding:15px 24px; cursor:pointer; border:1px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:9px; color:inherit;
  transition:transform .18s var(--ease), filter .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease)}
.btn .ico{width:17px; height:17px}
.btn-primary{background:linear-gradient(180deg,var(--o) 0%,var(--o-dark) 55%,var(--o-deep) 100%); color:#fff;
  box-shadow:0 12px 28px -10px rgba(var(--o-rgb),.6), inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.05)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-voll{width:100%}
.pills{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px}
.pill{font-size:13px; color:var(--muted); background:var(--glass); border:1px solid var(--line); padding:8px 14px; border-radius:100px; display:inline-flex; gap:7px; align-items:center}
.pill .ico{width:15px; height:15px; color:var(--gold)}
.glass{background:rgba(255,253,247,.88); border:1px solid rgba(154,104,20,.24); border-radius:20px;
  box-shadow:0 1px 0 #fff inset, 0 26px 46px -32px rgba(11,58,40,.4)}
h2.sec{font-size:clamp(27px,3.7vw,43px); letter-spacing:-.03em; margin:0 0 20px}
.prose{font-size:clamp(16.5px,1.6vw,18.5px); color:var(--muted); line-height:1.68; max-width:62ch}

/* Kopfbereich: Das Bild mit dem Schrank steht verkleinert rechts, oben bleibt Luft für den Schmuck, unten schließt der Boden
   bündig mit dem Vorteilsband ab. Links setzt ein Streifen aus der äußersten Bildspalte die Wand und den Tisch bis zum Rand fort. */
.hero{position:relative; padding:clamp(78px,7vw,96px) 0 clamp(40px,6vw,64px); overflow:hidden; background:#F5EADD;
  --szene-b:min(80vw,1500px); --oben:clamp(40px,4.5vw,64px);
  --ink:#0B3A28; --muted:#3C5748; --line:rgba(11,58,40,.18); --glass:rgba(255,255,255,.55)}
.hero-szene{position:absolute; z-index:0; right:0; bottom:0; width:var(--szene-b); aspect-ratio:1672/941}
.hero-szene::before{content:""; position:absolute; top:-24px; bottom:-24px; right:99%; width:100vw;
  background:url(schrank.webp) left 24px / 8000% calc(100% - 48px) no-repeat; filter:blur(18px)}
.hero-bg{position:absolute; inset:0; background:url(schrank.webp) center / 100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 8%, #000 26%), linear-gradient(to bottom, transparent 0, #000 9%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.35) 8%, #000 26%), linear-gradient(to bottom, transparent 0, #000 9%);
  mask-composite:intersect}
.hero .wrap{max-width:1400px; width:100%; position:relative; z-index:2; pointer-events:none}
.hero-text{pointer-events:auto}
.hero-text{width:min(640px, 47vw); margin-bottom:clamp(80px,11.3vw,170px)}
.hero .eyebrow{border-color:rgba(179,104,12,.35); box-shadow:0 8px 20px -14px rgba(11,58,40,.5); margin-bottom:20px}
.hero .eyebrow .dot{background:#E97400}
.hero h1{font-size:clamp(26px,3.2vw,48px); line-height:1.06; letter-spacing:-.03em; margin:0 0 18px; color:#0B3A28}
.hero .grad{color:#B3680C; white-space:nowrap}
.hero .lead{margin-bottom:28px}
.hero .btn-gross{padding:18px 26px; font-size:17px; border-radius:15px; text-align:left}
.btn-gross .ic-chip{width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; flex:none; transition:transform .4s var(--ease-out)}
.btn-gross .ic-chip .ico{width:15px; height:15px}
.btn-gross:hover .ic-chip{transform:translateY(3px)}
.hero .pills{margin-top:22px}
.hero .pill{background:rgba(255,255,255,.6); color:#2F4A3C; border-color:rgba(11,58,40,.16); white-space:nowrap}
.hero .pill .ico{color:#B3680C}

/* Stempel als Anhänger, hängt an der Lichterkette und pendelt leicht */
.anhaenger{position:absolute; z-index:4; left:43.3%; top:calc(8px - var(--oben)); width:14%; translate:-50% 0; transform-origin:50% 0; animation:schwingen 6s ease-in-out infinite; pointer-events:none}
.anhaenger-link{display:block; pointer-events:auto; cursor:pointer; border-radius:50%}
.anhaenger-link:hover .anhaenger-bild{filter:drop-shadow(0 14px 16px rgba(80,30,10,.5)) brightness(1.06)}
.anhaenger-bild{display:block; width:100%; height:auto; filter:drop-shadow(0 12px 14px rgba(80,30,10,.45))}
.glanz{animation:glanz 4.5s ease-in-out infinite}
@keyframes glanz{0%,100%{fill-opacity:.34} 50%{fill-opacity:.62}}
@keyframes schwingen{0%,100%{rotate:-2.4deg} 50%{rotate:2.4deg}}

@media(min-width:1100px){
  .hero{display:flex; align-items:center; padding-bottom:0; min-height:calc(var(--szene-b) * .5628 + var(--oben))}
  .hero .pills{flex-wrap:nowrap; gap:clamp(5px,.6vw,9px)}
  .hero .pill{font-size:clamp(11.5px,.95vw,13px); padding:8px clamp(9px,1vw,14px)}
}
@media(max-width:1099px){
  .hero{background:linear-gradient(180deg,#F5EADD,#EFDDC8); padding-bottom:0}
  .hero-text{width:auto; margin-bottom:0}
  .hero h1{font-size:clamp(28px,8vw,44px)}
  .hero-szene{position:relative; z-index:1; right:auto; bottom:auto; width:auto; aspect-ratio:1/1; max-height:620px; margin:26px 0 0}
  .hero-szene::before{display:none}
  .hero-bg{background-size:auto 86%; background-position:90% 100%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 13%, #000 34%); mask-image:linear-gradient(to bottom, transparent 13%, #000 34%);
    -webkit-mask-composite:source-in; mask-composite:intersect}
  /* Auf dem Handy hängt der Stempel am oberen Rand des Bildes, der obere Teil der Schnur ist abgeschnitten */
  .anhaenger{left:20%; top:0; width:30%; aspect-ratio:200/231; clip-path:inset(0 -30px -30px -30px)}
  .anhaenger-bild{margin-top:-49.5%}
}

/* Anmeldeformular */
.anmeldung{padding:clamp(22px,3.4vw,34px); margin-top:34px; text-align:left; background:#FFFDF7; border:1px solid rgba(154,104,20,.32);
  box-shadow:0 34px 60px -38px rgba(11,58,40,.5), 0 1px 0 #fff inset}
.feld-label{display:block; font-size:14px; font-weight:500; color:var(--muted); margin:0 0 7px}
.feld{display:block; width:100%; height:54px; padding:0 16px; margin:0 0 18px; font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid rgba(11,58,40,.26); border-radius:13px}
.feld::placeholder{color:#7B8E83}
.feld:focus{outline:3px solid var(--gold); outline-offset:2px}
.haken{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--muted); line-height:1.5; margin:4px 0 22px; cursor:pointer}
.haken input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--o); flex:none}
.haken.frei{margin-top:-8px; color:var(--faint)}
.micro{margin:14px 0 0; font-size:12.5px; color:var(--faint); text-align:center; line-height:1.5}
.micro.entwurf{color:#9A5B12}
[hidden]{display:none!important}
.fallstrick{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.form-fehler{margin:0 0 18px; padding:12px 16px; border-radius:12px; background:#FCEDE6; border:1px solid #E9B9A3; color:#8A2E12; font-size:15px; line-height:1.5}
.form-erfolg{text-align:center; padding:10px 6px 6px}
.form-erfolg .erfolg-symbol{display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; background:rgba(42,166,107,.16); color:#0E5A3A; margin-bottom:14px}
.form-erfolg .erfolg-symbol .ico{width:28px; height:28px; stroke-width:2.4}
.form-erfolg h3{font-size:24px; margin:0 0 10px}
.form-erfolg p{color:var(--muted); font-size:16.5px; line-height:1.6; max-width:46ch; margin:0 auto}
.btn:disabled{opacity:.65; cursor:wait; transform:none; filter:none}
.unter{font-size:clamp(17px,1.8vw,21px); font-weight:600; color:var(--gold); margin:-6px auto 4px; max-width:34em; line-height:1.4}

/* Band mit den drei Vorteilen */
.vorteilsband{position:relative; z-index:1; background:linear-gradient(180deg,#EFE1C8,#E8D8BB); border-block:1px solid rgba(154,104,20,.32)}
.vorteilsband .row{display:grid; grid-template-columns:repeat(3,1fr); padding-top:26px; padding-bottom:26px}
.vorteil{display:flex; align-items:center; justify-content:center; gap:16px; padding:0 18px; font-size:17px; font-weight:500; line-height:1.3}
.vorteil + .vorteil{border-left:1px solid rgba(11,58,40,.2)}
.vorteil .ico{width:42px; height:42px; color:var(--gold); stroke-width:1.6}
@media(max-width:760px){.vorteilsband .row{grid-template-columns:1fr; gap:16px} .vorteil{justify-content:flex-start; padding:0} .vorteil + .vorteil{border-left:0}}

.karten{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:34px 0 28px}
@media(max-width:900px){.karten{grid-template-columns:1fr}}
.karte-v{display:flex; gap:18px; align-items:center; padding:24px 26px}
.karte-v > .ico{width:54px; height:54px; color:var(--gold); stroke-width:1.4}
.karte-v h3{font-size:19px; margin:0 0 4px}
.karte-v p{font-size:15.5px; color:var(--muted); line-height:1.55; margin-top:8px}
@media(min-width:901px){.karte-v{flex-direction:column; align-items:flex-start; gap:16px}}
.banner{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 18px; padding:18px 22px; background:rgba(255,253,247,.92);
  border:2px solid rgba(184,116,31,.7); border-radius:14px; color:#8A5410; font-weight:700; font-size:clamp(16px,1.7vw,19px); text-align:center;
  transition:transform .3s var(--ease-out), background .3s var(--ease-out)}
.banner:hover{transform:translateY(-2px); background:#fff}
.banner > .ico{width:34px; height:34px; stroke-width:1.6}
.banner .funke{width:22px; height:22px; fill:currentColor; stroke:none}
@media(max-width:620px){.banner .funke{display:none}}

/* Abschnitte */
.schritte{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; counter-reset:s}
@media(max-width:860px){.schritte{grid-template-columns:1fr}}
.schritt{padding:28px 26px}
.schritt .n{counter-increment:s; width:46px; height:46px; border-radius:13px; background:linear-gradient(180deg,var(--tanne-hell),var(--tanne-dunkel)); color:#FFE9A8; font-weight:700; font-size:19px; display:grid; place-items:center; margin-bottom:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.schritt .n::before{content:counter(s)}
.schritt h3{font-size:19px; margin:0 0 8px}
.schritt p{font-size:15.5px; color:var(--muted); line-height:1.6}
#so-gehts{background:rgba(255,253,247,.5)}
#anmeldung{background:linear-gradient(180deg,#EFE1C8,#E9D9BE)}
.lift{transition:transform .5s var(--ease-out), border-color .5s var(--ease-out)}
.lift:hover{transform:translateY(-4px); border-color:rgba(154,104,20,.5)}

.verlosung-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(28px,5vw,64px); align-items:center}
@media(max-width:900px){.verlosung-grid{grid-template-columns:1fr}}
.pcard{padding:clamp(28px,4vw,42px); position:relative; overflow:hidden; border-color:rgba(154,104,20,.4);
  box-shadow:0 1px 0 #fff inset, 0 44px 80px -48px rgba(11,58,40,.5)}
.pcard::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg,#0E5A3A,#E4B25A,#0E5A3A)}
.pcard .pname{font-weight:700; font-size:20px; margin:0 0 4px}
.pcard .psub{font-size:14.5px; color:var(--muted); margin:0 0 22px}
.amount{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px}
.amount b{font-size:clamp(52px,7vw,72px); font-weight:800; letter-spacing:-.03em; line-height:1; color:#0E5A3A}
.amount span{font-size:15px; color:var(--muted); font-weight:500}
.pcard .pnote{font-size:14px; color:var(--faint); margin:0 0 26px}
.incl{list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:13px}
.incl li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.45}
.chk{width:24px; height:24px; border-radius:50%; background:rgba(42,166,107,.16); display:grid; place-items:center; flex:none; margin-top:1px}
.chk .ico{width:15px; height:15px; color:#0E5A3A}

footer{position:relative; z-index:1; background:#0B3A28; color:#B9D0C2; padding:22px 0 30px; font-size:13.5px}
footer .row{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; align-items:center}
footer a{color:#E9DDC0; font-weight:500} footer a:hover{color:#fff}

/* Hinweis auf dem Entwurf */
.toast{position:fixed; left:50%; bottom:26px; z-index:80; translate:-50% 30px; opacity:0; pointer-events:none; width:min(460px, calc(100vw - 28px));
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:15px 18px; border-radius:16px; font-size:15px; line-height:1.45;
  --ink:#F6F1E6; --gold:#F5C65A; --gold-rgb:245,198,90;
  background:rgba(8,30,21,.94); border:1px solid rgba(var(--gold-rgb),.45); color:var(--ink); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85); transition:opacity .3s var(--ease-out), translate .4s var(--ease)}
.toast.sichtbar{opacity:1; translate:-50% 0; pointer-events:auto}
.toast .ico{width:22px; height:22px; color:var(--gold)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{animation:none!important; transition:none!important}
  #schnee{display:none}
}