/* OKNXT Unterseite Webinare. Baut auf site.css, abschnitte.css und agenten-seite.css auf.
   Termine pflegt main.js (OKNXT_WEBINARE); webinare-seite.js blendet vergangene Termine aus und bewegt das Studio. */

/* ---------- W1 · Einstieg ---------- */
.wb-start{position:relative;padding:clamp(28px,5vh,64px) var(--seitenrand) 0}
.wb-start-innen{max-width:var(--ab-breite);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center;min-height:calc(100svh - var(--oben-hoehe,100px) - 40px)}
.wb-start .h1{max-width:15ch;font-size:clamp(2.4rem,4.4vw,4.1rem)}
.wb-start .unterzeile{max-width:46ch}
.wb-fakten{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.wb-fakten li{display:flex;align-items:center;gap:7px;font-size:.92rem;color:var(--text-2)}
.wb-fakten svg{width:16px;height:16px;fill:none;stroke:#7CF0B0;stroke-width:2.4}
.wb-naechst{margin-top:28px;padding:22px 24px;border-radius:22px;border:1px solid rgba(143,164,255,.3);background:linear-gradient(160deg,rgba(28,33,48,.9),rgba(17,20,28,.85));box-shadow:0 20px 50px -24px rgba(0,0,0,.8),0 0 40px -16px rgba(47,107,255,.6);max-width:520px}
.wb-naechst-kopf{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:.74rem;color:#8FDCFF}
.wb-naechst-datum{margin:0;font-size:1.15rem;font-weight:600}
.wb-naechst-datum span{display:inline-block;margin-left:8px;font-size:.78rem;font-weight:500;color:var(--text-2)}
.wb-naechst-thema{margin:4px 0 0;color:var(--text-2)}
.wb-countdown{display:flex;align-items:flex-start;gap:12px;margin:16px 0 18px}
.wb-countdown div{display:flex;flex-direction:column;align-items:center;min-width:58px;padding:8px 6px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--linie)}
.wb-countdown b{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wb-countdown span{font-size:.7rem;color:var(--text-3)}
.wb-countdown i{font-style:normal;padding-top:10px;color:var(--text-3)}

/* Nachgebautes Live-Studio */
.wb-studio{position:relative;margin:0;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0B0D14;box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 30px 140px -60px rgba(47,107,255,.6)}
.wb-st-leiste{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linie);font-size:.9rem}
.wb-st-leiste b{font-weight:600}
.wb-st-live{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:rgba(229,72,77,.18);color:#FF8A8D;font-size:.66rem}
.wb-st-live i{width:7px;height:7px;border-radius:50%;background:#E5484D;box-shadow:0 0 8px #E5484D;animation:pa-puls 1.4s ease-in-out infinite}
.wb-st-zeit{margin-left:auto;font-size:.72rem;color:var(--text-3)}
.wb-st-koerper{display:grid;grid-template-columns:minmax(0,1fr) 168px;grid-template-rows:auto auto;gap:12px;padding:14px}
.wb-st-folie{position:relative;min-height:230px;border-radius:14px;padding:22px;background:radial-gradient(70% 90% at 70% 30%,rgba(80,70,200,.45),transparent 70%),linear-gradient(140deg,#141a2e,#0B0D14);overflow:hidden}
.wb-st-folie img:first-child{width:96px;height:auto}
.wb-st-folie p{margin:18px 0 0;font-size:1.45rem;font-weight:600;line-height:1.15;letter-spacing:-.02em}
.wb-st-gesichter{display:flex;margin-top:18px}
.wb-st-gesichter img{width:40px;height:40px;border-radius:50%;object-fit:cover;margin-right:-8px;box-shadow:0 0 0 2px #0B0D14,0 0 14px rgba(47,107,255,.5)}
.wb-st-teilen{position:absolute;right:12px;bottom:12px;font-size:.6rem;padding:4px 8px;border-radius:6px;background:rgba(9,11,16,.7);color:var(--text-2)}
.wb-st-kacheln{display:flex;flex-direction:column;gap:12px}
.wb-st-kachel{position:relative;flex:1;min-height:109px;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#2F4BB0,#151A33 70%);box-shadow:0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .3s}
.wb-st-kachel img{position:absolute;left:50%;top:6%;width:96%;height:auto;transform:translateX(-50%)}
.wb-st-kachel small{position:absolute;left:8px;bottom:7px;font-size:.66rem;padding:3px 7px;border-radius:6px;background:rgba(9,11,16,.7)}
.wb-st-pegel{position:absolute;right:8px;bottom:8px;display:flex;align-items:flex-end;gap:2px;height:12px;opacity:0;transition:opacity .3s}
.wb-st-pegel i{width:3px;border-radius:2px;background:#7CF0B0;animation:wb-pegel .6s ease-in-out infinite alternate}
.wb-st-pegel i:nth-child(2){animation-delay:.2s}.wb-st-pegel i:nth-child(3){animation-delay:.4s}
@keyframes wb-pegel{from{height:3px}to{height:12px}}
.wb-st-kachel.spricht{box-shadow:0 0 0 2px #7CF0B0,0 0 20px rgba(124,240,176,.35)}
.wb-st-kachel.spricht .wb-st-pegel{opacity:1}
.wb-st-chat{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wb-st-chat li{padding:10px 12px;border-radius:12px;background:var(--panel-3);border:1px solid var(--linie);font-size:.8rem;line-height:1.4}
.wb-st-chat li span{display:block;font-size:.58rem;color:var(--text-3);margin-bottom:3px}
.wb-st-chat li p{margin:0}
.wb-st-chat em{display:flex;align-items:center;gap:5px;margin-top:6px;font-style:normal;font-size:.66rem;color:#7CF0B0}
.wb-st-chat em svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6}
.ab-js .wb-st-chat li{opacity:0;transform:translateY(12px)}
.ab-js .wb-st-chat li em{opacity:0}
.wb-st-chat li.da{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,1.2,.4,1)}
.wb-st-chat li.beantwortet em{opacity:1;transition:opacity .4s ease}

/* ---------- W2 · Termine und Anmeldung ---------- */
.wb-raster{max-width:1140px;margin:0 auto}
.wb-formular{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,3vw,40px);align-items:start}
.wb-liste{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.wb-termin{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 20px;border-radius:20px;border:1.5px solid var(--linie-stark);background:linear-gradient(160deg,var(--panel-2),var(--panel));cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.wb-termin:hover{border-color:rgba(143,220,255,.45);transform:translateY(-2px)}
.wb-termin input{position:absolute;opacity:0;pointer-events:none}
.wb-termin:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:3px}
.wb-termin:has(input:checked){border-color:#7EA0FF;box-shadow:0 0 0 3px rgba(47,107,255,.18),0 0 40px -12px rgba(47,107,255,.8);background:linear-gradient(160deg,rgba(47,107,255,.14),var(--panel))}
.wb-datum{display:flex;flex-direction:column;align-items:center;justify-content:center;width:66px;height:72px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--linie)}
.wb-datum b{font-size:1.7rem;font-weight:600;line-height:1;letter-spacing:-.03em}
.wb-datum small{font-size:.68rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em}
.wb-termin:has(input:checked) .wb-datum{background:var(--verlauf);border-color:transparent}
.wb-termin:has(input:checked) .wb-datum small{color:rgba(255,255,255,.85)}
.wb-termin-text{display:flex;flex-direction:column;gap:4px}
.wb-termin-text b{font-size:1.05rem;font-weight:600;line-height:1.35}
.wb-meta{font-size:.84rem;color:var(--text-3)}
.wb-naechster{display:none;width:fit-content;font-size:.62rem;padding:3px 8px;border-radius:999px;background:rgba(229,72,77,.16);color:#FF8A8D}
.wb-termin.ist-naechster .wb-naechster{display:inline-block}
.wb-haken{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--linie-stark);transition:all .25s}
.wb-haken svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;opacity:0;transform:scale(.5);transition:all .25s cubic-bezier(.2,1.5,.4,1)}
.wb-termin:has(input:checked) .wb-haken{background:var(--blau);border-color:var(--blau)}
.wb-termin:has(input:checked) .wb-haken svg{opacity:1;transform:none}
.wb-liste .feld-fehler{margin:2px 0 0}
.wb-liste.hat-fehler .wb-termin{border-color:rgba(255,120,120,.5)}
.wb-felder{padding:clamp(22px,2.6vw,30px);border-radius:var(--radius-gross);border:1px solid var(--linie-stark);background:linear-gradient(160deg,var(--panel-2),var(--panel));box-shadow:var(--schatten)}
.wb-felder-titel{margin:0 0 16px;font-size:1.2rem;font-weight:600}
.wb-felder .knopf[type=submit]{width:100%;justify-content:center;margin-top:6px}
.wb-danke{max-width:620px;margin:0 auto;padding:clamp(28px,3vw,40px);border-radius:var(--radius-gross);border:1px solid rgba(124,240,176,.35);background:linear-gradient(160deg,var(--panel-2),var(--panel));text-align:center}
.wb-danke-ic{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 14px;border-radius:50%;background:rgba(124,240,176,.15);border:1px solid rgba(124,240,176,.45)}
.wb-danke-ic svg{width:28px;height:28px;fill:none;stroke:#7CF0B0;stroke-width:2.4}
.wb-danke .danke-titel{font-size:1.4rem;font-weight:600;margin:0 0 8px}
.wb-danke .danke-text,.wb-danke-termine{color:var(--text-2);margin:0 0 12px}
.wb-danke-termine{white-space:pre-line}
.wb-ics{display:inline-flex;align-items:center;gap:9px;margin-top:6px}
.wb-ics svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}

/* ---------- W3 · Ablauf ---------- */
.wb-zeit{max-width:1080px;margin:0 auto}
.wb-zeit-leiste{position:relative;height:30px;margin:0 0 26px}
.wb-zeit-leiste::before{content:"";position:absolute;left:0;right:0;top:6px;height:4px;border-radius:4px;background:rgba(255,255,255,.1)}
.wb-zeit-fuell{position:absolute;left:0;top:6px;height:4px;width:calc(var(--p,0) * 100%);border-radius:4px;background:var(--verlauf);box-shadow:0 0 12px rgba(47,107,255,.8)}
.wb-zeit-punkt{position:absolute;top:2px;left:calc(var(--p,0) * 100%);width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(92,203,255,.25),0 0 16px #5CCBFF}
.wb-zeit-leiste span{position:absolute;top:16px;left:var(--x);transform:translateX(-50%);font:500 .7rem/1 "JetBrains Mono",monospace;color:var(--text-3);white-space:nowrap}
.wb-zeit-leiste span:first-of-type{transform:none}.wb-zeit-leiste span:last-of-type{transform:translateX(-100%)}
.wb-phasen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wb-phasen li{padding:22px;border-radius:20px;border:1px solid var(--linie-stark);background:linear-gradient(160deg,var(--panel-2),var(--panel));transition:border-color .4s,box-shadow .4s}
.wb-phasen li.an{border-color:rgba(92,203,255,.55);box-shadow:0 0 40px -14px rgba(47,107,255,.8)}
.wb-phasen span{font-size:.66rem;color:var(--cyan)}
.wb-phasen h3{margin:8px 0 8px;font-size:1.1rem}
.wb-phasen p{margin:0;color:var(--text-2);font-size:.94rem}

/* ---------- W4 · Gastgeber ---------- */
.wb-gastgeber{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:980px;margin:0 auto}
.wb-gastgeber article{display:flex;gap:20px;align-items:center;padding:24px;border-radius:var(--radius-gross);border:1px solid var(--linie-stark);background:linear-gradient(160deg,var(--panel-2),var(--panel))}
.wb-gg-bild{position:relative;flex:none;width:110px;height:110px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 30%,#2F4BB0,#151A33 70%);box-shadow:0 0 0 2px rgba(143,220,255,.4),0 0 30px rgba(47,107,255,.45)}
.wb-gg-bild img{position:absolute;left:50%;top:7%;width:118%;height:auto;max-width:none;transform:translateX(-50%)}
.wb-gastgeber h3{font-size:1.25rem;margin-bottom:4px}
.wb-gg-rolle{margin:0 0 8px;font-size:.84rem;color:var(--text-3)}
.wb-gastgeber p{margin:0;color:var(--text-2);font-size:.96rem}
.wb-gastgeber .wb-gg-rolle{margin-bottom:8px;color:var(--text-3)}
.wb-presse{max-width:980px;margin:22px auto 0;text-align:center;color:var(--text-2)}

/* ---------- Handy und Tablet ---------- */
@media (max-width:1000px){
  .wb-start-innen{grid-template-columns:1fr;min-height:0}
  .wb-studio{max-width:640px;width:100%;justify-self:center}
  .wb-formular{grid-template-columns:1fr}
}
@media (max-width:760px){
  .wb-phasen{grid-template-columns:1fr}
  .wb-gastgeber{grid-template-columns:1fr}
}
@media (max-width:600px){
  .wb-st-koerper{grid-template-columns:minmax(0,1fr) 100px}
  .wb-st-folie{min-height:180px;padding:16px}
  .wb-st-folie p{font-size:1.05rem}
  .wb-st-kachel{min-height:84px}
  .wb-st-chat{grid-template-columns:1fr}
  .wb-st-chat li:nth-child(n+2){display:none}
  .wb-termin{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px}
  .wb-haken{position:absolute;right:12px;top:12px;width:24px;height:24px}
  .wb-datum{width:56px;height:62px}
  .wb-gastgeber article{flex-direction:column;text-align:center}
  .wb-countdown div{min-width:50px}
}
@media (prefers-reduced-motion:reduce){
  .wb-st-live i,.wb-st-pegel i{animation:none}
  .ab-js .wb-st-chat li,.ab-js .wb-st-chat li em{opacity:1;transform:none}
}

/* ---------- Webinare auf dem Handy (18.10.2026) ---------- */
@media (max-width:640px){
  .wb-seite{--pe-abstand:84px}
  /* Fragen: statt Wischleiste und Chat eine Liste zum Aufklappen wie auf der Startseite */
  .wb-seite .fa-js .fa-knoepfe,.wb-seite .fa-js .fa-chat,.wb-seite .fa-js .fa-unter{display:none}
  .wb-seite .fa-js .fragen-liste{position:static;width:auto;height:auto;overflow:visible;clip:auto;margin-top:18px}
  .wb-seite .fragen-liste summary{padding:16px 0;font-size:1rem;gap:16px}
}