/* Webinar-Seiten im Look von stornofabrik.de: Work Sans, Rot #AB1F24, Creme, dunkler Grund,
   helle Abschnitte mit weißen Karten. Schrift liegt lokal (kein Google-Server, DSGVO). */
@font-face{font-family:"Work Sans";font-style:normal;font-weight:300;font-display:swap;src:url(/webinar/fonts/work-sans-300.woff2) format("woff2");}
@font-face{font-family:"Work Sans";font-style:italic;font-weight:300;font-display:swap;src:url(/webinar/fonts/work-sans-300-italic.woff2) format("woff2");}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/webinar/fonts/work-sans-400.woff2) format("woff2");}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/webinar/fonts/work-sans-600.woff2) format("woff2");}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/webinar/fonts/work-sans-800.woff2) format("woff2");}

:root{
  --ground:#151010;
  --ground-2:#1D1616;
  --line:#3A2E2E;
  --red:#AB1F24;
  --red-hot:#C8262C;
  --cream:#F0E2CC;
  --text:#EDE6E0;
  --muted:#A99E99;
  --light:#ECECEC;
  --ink:#1A1515;
  --ink-muted:#5E5654;
  --font:"Work Sans","Helvetica Neue",Arial,sans-serif;
  --measure:62ch;
}
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--font); font-weight:300; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.5px; text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
strong,b{font-weight:600;}
.wrap{width:min(1120px,calc(100% - 32px)); margin-inline:auto;}
.rot{color:var(--red-hot);}

/* Badge und Labels wie auf der Homepage */
.badge{
  display:inline-block; background:var(--red); color:var(--cream);
  font-size:13px; font-weight:400; text-transform:uppercase; letter-spacing:.5px;
  padding:6px 10px; border-radius:4px; line-height:1.35;
}
.label{
  display:block; margin-bottom:12px; color:var(--red-hot);
  font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.6px;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 20% 0%, #2A1A1A 0%, var(--ground) 70%);
}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0 18px; border-bottom:1px solid var(--line); margin-bottom:22px;}
.logo{display:block; height:52px; width:auto;}
.topbar-text{font-size:13px; font-weight:600; color:var(--cream); text-transform:uppercase; letter-spacing:.5px;}
.hero-grid{position:relative; display:grid; grid-template-columns:1fr; gap:0; padding-bottom:44px;}
.hero-copy{position:relative; z-index:2;}
@media (min-width:900px){ .logo{height:64px;} .topbar{padding:20px 0; margin-bottom:0;} }
.display{font-size:clamp(36px,10.5vw,64px); line-height:1.08; margin-top:14px; color:#fff;}
.display .rot{color:#d73238;}
.sub{margin-top:12px; color:var(--text); max-width:var(--measure); font-size:16px; line-height:1.5;}
.meta{display:none;}
.deadline{
  margin-top:14px; display:inline-flex; gap:8px; align-items:center;
  border:1px solid var(--red-hot); color:var(--cream); border-radius:4px;
  font-size:13px; font-weight:600; padding:7px 10px;
}

/* Formular direkt auf dem dunklen Grund, kein Kasten */
.su-form{display:flex; flex-direction:column; gap:10px; margin-top:20px; max-width:480px;}
.field{display:flex; flex-direction:column; gap:4px;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.field input,.field textarea{
  font:inherit; font-weight:400; font-size:17px; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:6px;
  padding:13px 14px; width:100%; transition:border-color .18s ease, background .18s ease;
}
.field textarea{min-height:100px; resize:vertical; line-height:1.45;}
.field input::placeholder,.field textarea::placeholder{color:#8F8480;}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--red-hot); background:rgba(255,255,255,.09);}
.field input[aria-invalid="true"]{border-color:var(--red-hot);}
.err{font-size:13px; color:#FF8A80;}
.consent{display:flex; gap:10px; align-items:flex-start; margin-top:2px;}
.consent input{width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:var(--red);}
.consent label{font-size:12.5px; color:var(--muted); line-height:1.4;}
.consent a{text-decoration:underline; text-underline-offset:.18em;}
.consent[aria-invalid="true"] label{color:#FF8A80;}
.submit,.btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:100%; min-height:58px; cursor:pointer; text-decoration:none;
  font-family:var(--font); font-size:18px; font-weight:600; color:#fff;
  background:var(--red); border:0; border-radius:6px; padding:10px 20px;
  box-shadow:0 10px 32px rgba(171,31,36,.42);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.submit small,.btn small{font-size:12.5px; font-weight:300; opacity:.85;}
.submit:hover,.btn:hover{background:var(--red-hot); box-shadow:0 12px 38px rgba(200,38,44,.5);}
.submit:active,.btn:active{transform:translateY(1px);}
.submit:focus-visible,.btn:focus-visible{outline:2px solid var(--cream); outline-offset:3px;}
.submit:disabled{opacity:.6; cursor:default;}
.btn.ghost{background:rgba(255,255,255,.04); border:1px solid var(--line); box-shadow:none;}
.btn.ghost:hover{border-color:var(--muted); background:rgba(255,255,255,.08);}
.formstate{font-size:14px; border-left:3px solid var(--red-hot); padding:8px 0 8px 12px; color:var(--text);}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.bullets{list-style:none; margin:30px 0 0; padding:0; display:grid; gap:12px;}
.bullets li{position:relative; padding-left:30px; color:var(--text); font-size:16px; line-height:1.45;}
.bullets li::before{
  content:""; position:absolute; left:3px; top:4px; width:13px; height:7px;
  border-left:2px solid var(--red-hot); border-bottom:2px solid var(--red-hot); transform:rotate(-45deg);
}
.bullets li:last-child{color:#fff; font-weight:600;}
.bullets-desk{display:none;}

@media (min-width:900px){
  .hero-grid{grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; padding:64px 0 80px;}
  .hero-copy{margin-top:0;}
  .display{font-size:60px;}
  .sub{font-size:19px; margin-top:18px;}
  .su-form{margin-top:28px;}
  .bullets-mobil{display:none;}
  .bullets-desk{display:grid;}
  .hero-bild{display:block !important;}
}
/* Handy: Foto von Rik direkt unter dem Button, Desktop: rechts neben dem Formular */
.hero-bild{display:block; position:relative; margin-top:28px;}
@media (min-width:900px){ .hero-bild{margin-top:0;} }
.hero-bild img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block;
  /* Kein Kasten: das Foto läuft an allen Rändern weich in den dunklen Hintergrund aus */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 14%, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;}
.hero-bild::after{
  content:""; position:absolute; inset:0; border-radius:8px;
  background:linear-gradient(180deg, rgba(21,16,16,0) 55%, rgba(21,16,16,.85) 100%);
}
.hero-bild .bild-tag{
  position:absolute; left:20px; bottom:18px; z-index:2; color:#fff;
  font-weight:600; font-size:16px; line-height:1.35;
}
.hero-bild .bild-tag span{display:block; font-weight:300; font-size:14px; color:var(--cream);}
/* Handy: kleines Porträt mit Text daneben statt großem Foto */
@media (max-width:899px){
  .hero-bild{display:flex; align-items:center; gap:clamp(18px,5vw,32px); margin-top:28px;}
  .hero-bild picture{display:contents;}
  .hero-bild::after{display:none;}
  .hero-bild img{width:clamp(128px,36vw,180px); flex:0 0 clamp(128px,36vw,180px); aspect-ratio:1/1; object-position:50% 30%; border-radius:50%;
    -webkit-mask-image:none; mask-image:none; box-shadow:0 0 0 3px rgba(215,50,56,.6), 0 10px 30px rgba(0,0,0,.5);}
  .hero-bild .bild-tag{position:static; font-size:clamp(20px,5.6vw,26px); line-height:1.3;}
  .hero-bild .bild-tag span{font-size:clamp(15px,4.2vw,18px); margin-top:6px; line-height:1.45;}
}

/* ---------- Abschnitte ---------- */
.block{padding:64px 0;}
.block.hell{background:var(--light); color:var(--ink);}
.block.tief{background:var(--ground-2);}
.sec-h{font-size:clamp(30px,7.6vw,46px); line-height:1.15; margin-bottom:28px; color:#fff; max-width:24ch;}
.hell .sec-h{color:var(--ink);}
.block h3{font-size:21px; line-height:1.25; color:#fff;}
.hell h3{color:var(--ink);}

/* Kennst du das? */
.checks{list-style:none; margin:0; padding:0; display:grid; gap:12px; max-width:780px;}
.checks li{
  position:relative; padding:16px 18px 16px 50px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text);
}
.checks li::before{
  content:""; position:absolute; left:20px; top:23px; width:13px; height:7px;
  border-left:2px solid var(--red-hot); border-bottom:2px solid var(--red-hot); transform:rotate(-45deg);
}
.schluss{margin-top:28px; font-size:21px; line-height:1.4; color:#fff; font-weight:600; max-width:36ch;}

/* Was du mitnimmst: helle Fläche, weiße Karten */
.karten{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.karte{background:#fff; border-radius:8px; padding:26px 22px 28px; box-shadow:0 1px 2px rgba(0,0,0,.04);}
.knum{display:block; font-weight:800; font-size:44px; line-height:1; color:var(--red); margin-bottom:14px; letter-spacing:-1px;}
.karte p{margin-top:10px; font-size:16px; color:var(--ink-muted);}

/* Für wen */
.zwei{display:grid; gap:16px; grid-template-columns:1fr;}
@media (min-width:760px){ .zwei{grid-template-columns:1fr 1fr;} }
.zwei > div{border-radius:8px; padding:24px 22px; border:1px solid var(--line); background:rgba(255,255,255,.04);}
.zwei > div.ja-box{border-color:rgba(200,38,44,.55);}
.zwei h3{margin-bottom:16px;}
.zwei h3.nein{color:var(--muted);}
.liste{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.liste li{position:relative; padding-left:30px; line-height:1.45;}
.liste.ja li{color:var(--text);}
.liste.nein li{color:var(--muted);}
.liste.ja li::before{
  content:""; position:absolute; left:3px; top:5px; width:13px; height:7px;
  border-left:2px solid var(--red-hot); border-bottom:2px solid var(--red-hot); transform:rotate(-45deg);
}
.liste.nein li::before,.liste.nein li::after{
  content:""; position:absolute; left:2px; top:11px; width:15px; height:2px; background:var(--muted); transform:rotate(45deg);
}
.liste.nein li::after{transform:rotate(-45deg);}

/* Ablauf */
.zeit{list-style:none; margin:0; padding:0; display:grid; gap:12px; max-width:780px;}
.zeit li{display:grid; grid-template-columns:64px 1fr; gap:14px; background:#fff; border-radius:8px; padding:18px 20px;}
.uhr{font-weight:800; font-size:20px; line-height:1.25; color:var(--red); font-variant-numeric:tabular-nums;}
.zeit h3{font-size:18px;}
.zeit p{margin-top:4px; font-size:15px; color:var(--ink-muted);}
.ablauf .zeit li{background:rgba(255,255,255,.04); border:1px solid var(--line);}
.ablauf .uhr{color:var(--red-hot);}
.ablauf .zeit p{color:var(--muted);}

/* Rik */
.rik-grid{display:grid; gap:28px;}
@media (min-width:860px){ .rik-grid.mit-foto{grid-template-columns:400px 1fr; gap:56px; align-items:start;} }
.rik-foto{width:100%; aspect-ratio:3/2; object-fit:cover; object-position:50% 20%; display:block; border-radius:8px;}
@media (min-width:860px){ .rik-foto{aspect-ratio:4/5;} }
.rik-zitat{font-style:italic; font-size:18px; line-height:1.55; color:var(--ink); margin-bottom:22px; max-width:var(--measure);}
.rik-text{max-width:var(--measure); color:var(--ink-muted); font-size:16px;}
.zahlen{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:26px 0 0; max-width:640px;}
.zahlen > div{background:#fff; border-radius:8px; padding:18px 10px; text-align:center;}
.zwert{font-weight:800; font-size:clamp(28px,8vw,40px); line-height:1; color:var(--red); letter-spacing:-1px;}
.zahlen dd{margin:8px 0 0; font-size:13px; line-height:1.35; color:var(--ink-muted);}

/* Diskret */
.diskret-box{display:flex; gap:16px; align-items:flex-start; max-width:780px;
  border:1px solid var(--line); border-radius:8px; padding:22px 20px; background:rgba(255,255,255,.04);}
.diskret-box svg{flex:0 0 auto; margin-top:2px;}
.diskret-box p{color:var(--text);}
.diskret-box strong{display:block; color:#fff; margin-bottom:4px;}

/* FAQ */
.fragen{display:grid; gap:10px; max-width:820px;}
.fragen details{background:#fff; border-radius:8px;}
.fragen summary{
  cursor:pointer; list-style:none; padding:18px 52px 18px 20px; position:relative;
  font-weight:600; font-size:17px; color:var(--ink);
}
.fragen summary::-webkit-details-marker{display:none;}
.fragen summary::after{
  content:""; position:absolute; right:22px; top:24px; width:9px; height:9px;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red); transform:rotate(45deg); transition:transform .2s ease;
}
.fragen details[open] summary::after{transform:rotate(-135deg); top:28px;}
.fragen summary:focus-visible{outline:2px solid var(--red); outline-offset:2px; border-radius:8px;}
.fragen details p{padding:0 20px 20px; color:var(--ink-muted); font-size:16px;}

/* Abschluss */
.abschluss{text-align:center; background:radial-gradient(ellipse 70% 80% at 50% 100%, #3A1A1A 0%, var(--ground) 70%);}
.abschluss .sec-h{margin-inline:auto; margin-bottom:14px;}
.abschluss-text{margin-bottom:26px; color:var(--text);}
.abschluss .btn{max-width:420px; margin-inline:auto;}
.avatar-zeile{display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:22px;}
.avatar-zeile img{width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--cream);}
.avatar-zeile span{font-size:14px; color:var(--muted); text-align:left; line-height:1.35;}
.avatar-zeile b{color:#fff; display:block;}

/* ---------- Fuss ---------- */
.foot{padding:36px 0 48px; border-top:1px solid var(--line);}
.foot-inner{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline;}
.foot-brand{font-weight:800; font-size:18px; color:#fff;}
.foot-link{font-size:14px; color:var(--muted);}
.foot-legal{font-size:13px; color:var(--muted); flex-basis:100%;}
.foot-legal a{text-decoration:underline; text-underline-offset:.18em;}
.foot-legal a:hover{color:#fff;}

/* ---------- Danke-Seite ---------- */
.danke{padding:0 0 64px;}
.danke .topbar{margin-bottom:32px;}
.danke-h{font-size:clamp(40px,11vw,68px); line-height:1.05; margin-top:14px; color:#fff;}
.danke-sub{margin-top:14px; color:var(--text); font-size:18px; max-width:46ch;}
.termin{
  margin-top:26px; display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline;
  border-radius:8px; padding:16px 18px; background:rgba(255,255,255,.04); border:1px solid var(--line); max-width:560px;
}
.termin-val{font-weight:800; font-size:24px; color:#fff;}
.termin-sub{font-size:14px; color:var(--muted);}
.kal{display:grid; gap:10px; margin-top:14px; max-width:560px;}
@media (min-width:600px){ .kal{grid-template-columns:1.4fr 1fr;} }
.kal .btn{flex-direction:row; gap:10px; min-height:54px; font-size:16px;}
.danke-grid{display:grid; gap:32px; grid-template-columns:1fr; margin-top:40px; max-width:560px;}
.danke-grid.mit-video{max-width:none;}
@media (min-width:900px){ .danke-grid.mit-video{grid-template-columns:340px 1fr; align-items:start; gap:56px;} }
.video{width:min(100%,340px); aspect-ratio:9/16; background:#000; border-radius:8px; overflow:hidden;}
.video video,.video iframe{width:100%; height:100%; border:0; display:block; object-fit:cover;}
.card{background:var(--light); color:var(--ink); border-radius:8px; padding:24px 20px 26px;}
.card-h{font-size:24px; line-height:1.2; color:var(--ink);}
.card-sub{font-size:14px; color:var(--ink-muted); margin:4px 0 16px;}
.card .su-form{margin-top:0; max-width:none; gap:14px;}
.card .field label{font-size:14px; font-weight:600; color:var(--ink);}
.card .field .opt{font-weight:300; color:var(--ink-muted); margin-left:6px;}
.card .field input,.card .field textarea{background:#fff; color:var(--ink); border-color:#D5CFCB;}
.card .field input:focus,.card .field textarea:focus{border-color:var(--red); background:#fff;}
.card .consent label{color:var(--ink-muted);}
.card .err{color:#B3261E;}
.card .formstate{color:var(--ink);}
.done{font-size:15px; border-left:3px solid var(--red); padding:10px 0 10px 14px; background:#fff; border-radius:0 6px 6px 0;}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }