/* SkipEdit Website – Stile aus dem Entwurf (landingpage_entwurf.dc.html) plus Banner, Warteliste, Rechtsseiten.
   Akzentfarbe: #C8FF3D. Die meisten Abschnitts-Stile stehen wie im Entwurf direkt am Element (style="…"). */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#0A0A0C}
a{color:#F4F4F2}a:hover{color:#FFFFFF}
[hidden]{display:none!important}

/* Seitenrahmen (im Entwurf das äußere div). overflow-x: clip statt hidden, damit die Nav "sticky" bleibt. */
.se-seite{background:#0A0A0C;color:#F4F4F2;font-family:'DM Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden;overflow-x:clip;min-height:100vh;display:flex;flex-direction:column}
.se-seite > main{flex:1 0 auto}

/* Zwei Modi: konfig.js → <html data-modus="warteliste|live"> */
html:not([data-modus="live"]) .nur-live{display:none!important}
html[data-modus="live"] .nur-warteliste{display:none!important}

/* Knöpfe, die im Wartelisten-Modus wie die Links des Entwurfs aussehen */
button.se-knopf{font:inherit;border:0;cursor:pointer;margin:0;-webkit-appearance:none;appearance:none}
.se-knopf:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #C8FF3D;outline-offset:3px}

/* ---------- Animationen aus dem Entwurf ---------- */
@keyframes se-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes se-cut{0%,30%{flex-grow:1;opacity:1}55%,85%{flex-grow:0;opacity:0}100%{flex-grow:1;opacity:1}}
@keyframes se-tag{0%,30%{opacity:1}50%,85%{opacity:0}100%{opacity:1}}
@keyframes se-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes se-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes se-play{from{left:0%}to{left:100%}}
.se-cut{animation:se-cut 5s ease-in-out infinite}
.se-tag{animation:se-tag 5s ease-in-out infinite}
.se-float{animation:se-float 4s ease-in-out infinite}
.se-float2{animation:se-float 4.6s ease-in-out .8s infinite}
.se-pulse{animation:se-pulse 1.6s ease-in-out infinite}
.se-marquee{animation:se-marquee 32s linear infinite}
.se-play{animation:se-play 5s linear infinite}
input[type=range]{width:100%;accent-color:#C8FF3D;height:28px}
@media (max-width: 600px){.se-float,.se-float2{transform:scale(.85)}.se-chipl{left:0!important}.se-chipr{right:0!important}.se-res{border-left:0!important;border-top:1px solid #2B3315}}
@keyframes se-progk{from{width:0}to{width:100%}}
@keyframes se-upk{from{width:4%}to{width:100%}}
@keyframes se-ink{from{opacity:0;transform:scaleY(.3)}to{opacity:1;transform:scaleY(1)}}
@keyframes se-collapsek{to{flex-grow:0;opacity:0;padding:0;margin:0 -1.5px}}
@keyframes se-fadek{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes se-backk{0%,40%{opacity:.25}100%{opacity:1;background:#2B1A1A}}
@keyframes se-pulse2k{0%,100%{box-shadow:0 0 0 0 rgba(200,255,61,.45)}50%{box-shadow:0 0 0 12px rgba(200,255,61,0)}}
@keyframes se-strikek{0%,8%{width:0}30%,85%{width:calc(100% - 28px)}100%{width:0}}
@keyframes se-donek{0%,10%{background:#22222A}25%,85%{background:#C8FF3D}100%{background:#22222A}}
@keyframes se-notek{0%,55%{opacity:0;transform:translateY(8px)}65%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes se-tightk{0%,20%{gap:22px}50%,80%{gap:3px}100%{gap:22px}}
@keyframes se-wordk{0%{color:#FFFFFF}8%,30%{color:#C8FF3D}40%,100%{color:#FFFFFF}}
@keyframes se-trimk{0%,100%{flex-grow:3}50%{flex-grow:1.6}}
.se-strike2{position:absolute;left:14px;right:14px;top:50%;height:2px;background:#FF8A8A;opacity:.7}
.se-done{background:#22222A;animation:se-donek 5s ease-in-out infinite}
.se-note{opacity:0;animation:se-notek 5s ease-in-out infinite}
.se-tight{gap:22px;animation:se-tightk 4.5s ease-in-out infinite}
.se-word{animation:se-wordk 3.5s linear infinite}
.se-trim{flex-grow:3;animation:se-trimk 4s ease-in-out infinite}
.se-b4{grid-column:span 4}.se-b3{grid-column:span 3}.se-b2{grid-column:span 2}.se-b6{grid-column:span 6}
@media (max-width: 900px){.se-b4,.se-b6{grid-column:span 6}.se-b2{grid-column:span 3}}
@media (max-width: 600px){.se-b4,.se-b6,.se-b2,.se-b3{grid-column:span 6}}
#so-gehts button:focus-visible{outline:2px solid #C8FF3D;outline-offset:4px}
.se-prog{animation:se-progk 5.2s linear forwards}
.se-up{animation:se-upk 3.2s cubic-bezier(.3,.7,.3,1) forwards}
.se-in{opacity:0;animation:se-ink .5s ease-out forwards}
.se-collapse{animation:se-collapsek .9s cubic-bezier(.6,0,.3,1) 1.2s forwards}
.se-fade{opacity:0;animation:se-fadek .6s ease-out 2.6s forwards}
.se-back{animation:se-backk 2.4s ease-out forwards}
.se-pulse2{animation:se-pulse2k 1.8s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.se-strike{animation:none;width:calc(100% - 28px)}.se-done{animation:none;background:#C8FF3D}.se-note{animation:none;opacity:1}.se-tight,.se-word,.se-trim{animation:none}.se-cut,.se-tag,.se-float,.se-float2,.se-pulse,.se-marquee,.se-play,.se-pulse2,.se-back,.se-up{animation:none}.se-prog{animation:none;width:100%}.se-in,.se-fade{animation:none;opacity:1}.se-collapse{animation:none;flex-grow:0!important;opacity:0}}

/* ---------- Countdown-Banner (nur Warteliste) ---------- */
.se-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;width:100%;margin:0;border:0;cursor:pointer;
  background:#C8FF3D;color:#0A0A0C;font:inherit;font-size:14px;line-height:1.35;font-weight:500;padding:8px 16px;text-align:center}
.se-banner:hover{background:#D4FF5A}
.se-banner:focus-visible{outline:2px solid #0A0A0C;outline-offset:-4px}
.se-banner strong{font-weight:700}
.se-banner-uhr{display:inline-flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:#0A0A0C;color:#C8FF3D;border-radius:999px;padding:2px 10px;font-size:13px}
.se-banner-uhr b{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14px}
.se-banner-pfeil{font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.banner-kurz{display:none}
@media (max-width: 600px){.se-banner{font-size:13px;padding:7px 12px;flex-wrap:nowrap}.se-banner-pfeil{display:none}.banner-lang{display:none}.banner-kurz{display:inline;white-space:nowrap}}

/* ---------- Wartelisten-Fenster ---------- */
html.wl-offen,html.wl-offen body{overflow:hidden}
.wl{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;
  font-family:'DM Sans',system-ui,sans-serif;font-size:17px;line-height:1.5;color:#F4F4F2}
.wl-hinten{position:absolute;inset:0;background:rgba(5,5,6,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:wl-ein .2s ease-out}
.wl-fenster{position:relative;width:100%;max-width:480px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;box-sizing:border-box;
  background:#111114;border:1px solid #26262C;border-radius:28px;padding:36px 32px 30px;box-shadow:0 40px 90px rgba(0,0,0,.6);animation:wl-hoch .28s cubic-bezier(.2,.8,.2,1)}
.wl-zu{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:#1C1C21;color:#F4F4F2;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.wl-zu:hover{background:#26262C}
.wl-marke{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C8FF3D}
.wl h2{margin:10px 48px 8px 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(28px,6vw,34px);line-height:1.05;letter-spacing:-.02em}
.wl-intro{margin:0 0 22px;color:#B9B9B5;font-size:16px}
.wl-feld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.wl-feld label{font-size:15px;font-weight:500;color:#C9C9C5}
.wl-feld label span{color:#6E6E74;font-weight:400}
.wl-feld input{font:inherit;font-size:17px;color:#F4F4F2;background:#0A0A0C;border:1px solid #33333A;border-radius:14px;padding:13px 16px;min-height:52px;box-sizing:border-box;width:100%}
.wl-feld input::placeholder{color:#55555B}
.wl-feld input:focus{outline:none;border-color:#C8FF3D;box-shadow:0 0 0 3px rgba(200,255,61,.18)}
.wl-feld input[aria-invalid="true"]{border-color:#FF8A8A}
.wl-check{display:flex;gap:12px;align-items:flex-start;margin:6px 0 4px;font-size:15px;line-height:1.45;color:#C9C9C5;cursor:pointer}
.wl-check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:#C8FF3D;cursor:pointer}
.wl-check input[aria-invalid="true"]{outline:2px solid #FF8A8A;outline-offset:2px}
.wl-klein{margin:4px 0 0 34px;font-size:13px;color:#8E8E94}
.wl-klein a{color:#B9B9B5}
.wl-fehler{margin:14px 0 0;padding:10px 14px;border-radius:12px;background:#2B1A1A;border:1px solid #5A2A2A;color:#FFB4B4;font-size:15px}
.wl-fehler:empty{display:none}
.wl-senden{margin-top:20px;width:100%;min-height:54px;border:0;border-radius:999px;background:#C8FF3D;color:#0A0A0C;font:inherit;font-size:18px;font-weight:700;cursor:pointer;padding:14px 24px}
.wl-senden:disabled{opacity:.6;cursor:progress}
.wl-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.wl-ok-symbol{width:56px;height:56px;border-radius:18px;background:#1F2414;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.wl-ok-text{margin:0 0 12px;font-size:17px;color:#F4F4F2}
.wl-ok-spam{margin:0 0 22px;font-size:15px;color:#8E8E94}
.wl-zweit{width:100%;min-height:52px;border:1px solid #3A3A40;border-radius:999px;background:transparent;color:#F4F4F2;font:inherit;font-size:17px;font-weight:700;cursor:pointer}
@keyframes wl-ein{from{opacity:0}to{opacity:1}}
@keyframes wl-hoch{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes wl-sheet{from{transform:translateY(100%)}to{transform:none}}
@media (max-width: 600px){
  .wl{align-items:flex-end;padding:0}
  .wl-fenster{max-width:none;border-radius:24px 24px 0 0;border-bottom:0;padding:30px 20px calc(24px + env(safe-area-inset-bottom));max-height:92vh;max-height:92dvh;animation:wl-sheet .3s cubic-bezier(.2,.8,.2,1)}
  .wl-fenster::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#33333A}
}
@media (prefers-reduced-motion: reduce){.wl-hinten,.wl-fenster{animation:none}}

/* ---------- Rechtsseiten ---------- */
.recht{max-width:72ch;margin:0 auto;padding:64px 24px 96px;box-sizing:content-box}
.recht h1{margin:0 0 28px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(36px,6vw,56px);line-height:1.02;letter-spacing:-.02em}
.recht h2{margin:44px 0 12px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(22px,3vw,28px);line-height:1.15;letter-spacing:-.01em}
.recht h3{margin:28px 0 8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:20px;line-height:1.2}
.recht p{margin:0 0 16px;color:#C9C9C5}
.recht strong{color:#F4F4F2}
.recht ul{margin:0 0 16px;padding-left:1.3em;color:#C9C9C5}
.recht li{margin:0 0 8px}
.recht li::marker{color:#C8FF3D}
.recht a{color:#C8FF3D;overflow-wrap:anywhere}
.recht a:hover{color:#D4FF5A}
mark.platzhalter{background:#FFE14D;color:#000000;border-radius:3px;padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.recht-zurueck{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;font-size:15px;color:#8E8E94;text-decoration:none}
.recht-zurueck:hover{color:#F4F4F2}