/* Creator Business · Videokurs-Funnel · Stil (Nachtbau 11./12.11.2026)
   Marke: Lovable_01_Brand_Guidelines.md, Register B (Teilnehmerinnen): Creme und Blush, Altrosa für Knöpfe,
   PT Serif / PT Sans, Radius höchstens 4 px, keine Schatten, keine Verläufe, keine Emojis. Mobil zuerst. */
:root{
  --espresso:#46342F; --tiefe:#382A26; --creme:#FBF5EE; --blush:#F2E4D7; --altrosa:#A8666F; --karamell:#CBA083;
  --leise:#6B5751;          /* Espresso aufgehellt, für Nebentext (AA auf Creme und Blush) */
  --knopf:#9A5560;          /* Altrosa, eine Stufe tiefer: Knopfschrift Creme erreicht AA (5,0:1) */
  --knopf-hover:#87494F;
  --titel:'PT Serif',Georgia,serif; --text:'PT Sans',-apple-system,system-ui,sans-serif;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:56px;--s7:72px;--s8:96px;
  --breite:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--creme);color:var(--espresso);font:400 17px/1.7 var(--text);overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:var(--espresso);text-decoration-color:var(--altrosa);text-underline-offset:3px}
h1,h2,h3{font-family:var(--titel);font-weight:400;line-height:1.2;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,4.2vw,50px)}
h2{font-size:clamp(26px,3vw,38px)}
h3{font-size:20px;line-height:1.3}
p{margin:0 0 var(--s2)}
:focus-visible{outline:2px solid var(--altrosa);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.innen{max-width:var(--breite);margin:0 auto;padding:0 20px}
.schmal{max-width:720px;margin:0 auto;padding:0 20px}
.eyebrow{display:block;font:700 13px/1.4 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--leise);margin-bottom:var(--s2)}
.eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:var(--altrosa);vertical-align:middle;margin-right:10px}

/* Band und Kopf */
.band{background:var(--tiefe);color:var(--creme);text-align:center;font-size:14px;padding:8px 16px;letter-spacing:.02em}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);max-width:var(--breite);margin:0 auto;padding:16px 20px;border-bottom:1px solid var(--karamell)}
.marke{font:400 22px/1 var(--titel);color:var(--espresso);text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.marke b{font-weight:700}
.kopf nav{display:none;gap:24px;font-size:15px}
.kopf nav a{text-decoration:none}
.kopf nav a:hover{text-decoration:underline}
.kopf .knopf{min-height:42px;padding:0 16px;font-size:15px}
@media (min-width:980px){.kopf nav{display:flex}}
@media (max-width:420px){.kopf .knopf{display:none}}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border:0;border-radius:4px;
  background:var(--knopf);color:var(--creme);font:700 18px/1.2 var(--text);text-decoration:none;cursor:pointer;text-align:center;transition:background .15s}
.knopf:hover{background:var(--knopf-hover)}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf--rand{background:transparent;color:var(--espresso);border:1.5px solid var(--espresso)}
.knopf--rand:hover{background:var(--blush)}
.knopf-zeile{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.knopf-zeile small{font-size:14px;color:var(--leise)}

/* Abschnitte */
.abschnitt{padding:var(--s7) 0}
.blush{background:var(--blush)}
.dunkel{background:var(--tiefe);color:var(--creme)}
.dunkel a{color:var(--creme)}
.kopfzeile{max-width:640px;margin-bottom:var(--s5)}
.kopfzeile p{color:var(--leise);margin-top:var(--s2)}
.dunkel .kopfzeile p,.dunkel .eyebrow{color:#E9D9CB}
@media (max-width:700px){.abschnitt{padding:var(--s6) 0}}

/* Startbereich */
.start{padding:var(--s5) 0 var(--s6)}
.start-raster{display:grid;gap:var(--s4);grid-template-areas:"kopf" "video" "aktion"}
.start-kopf{grid-area:kopf}
.start-video{grid-area:video}
.start-aktion{grid-area:aktion}
.start h1 .zweit{display:block;font-size:.62em;line-height:1.35;color:var(--leise);margin-top:.5em}
.unterzeile{font-size:18px;line-height:1.55;margin:0 0 var(--s3);max-width:44ch}
.start h1{font-size:clamp(29px,4.2vw,50px)}
.haken{list-style:none;padding:0;margin:0 0 var(--s4);display:grid;gap:10px}
.haken li{display:flex;gap:12px;align-items:baseline;font-size:17px}
.haken li::before{content:"";flex:none;width:14px;height:8px;border-left:2px solid var(--altrosa);border-bottom:2px solid var(--altrosa);transform:rotate(-45deg) translateY(-3px)}
@media (min-width:980px){
  .start{padding:var(--s7) 0}
  .start-raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"kopf video" "aktion video";column-gap:64px;align-items:start}
}
@media (max-width:979px){.start-kopf,.start-aktion{text-align:left}}

/* Video im Rahmen */
.rahmen{position:relative;margin:0;background:var(--tiefe);border:1px solid var(--karamell);border-radius:4px;overflow:hidden}
.rahmen video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--tiefe);cursor:pointer}
.rahmen figcaption{position:absolute;left:12px;bottom:12px;background:var(--creme);color:var(--espresso);font:400 15px/1.2 var(--titel);padding:7px 12px;border-radius:2px;pointer-events:none;transition:opacity .2s}
.rahmen.laeuft figcaption{opacity:0}
.rahmen .abspielen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:var(--knopf);display:grid;place-items:center;pointer-events:none;transition:opacity .2s}
.rahmen .abspielen svg{width:26px;height:26px;margin-left:4px;fill:var(--creme)}
.rahmen.laeuft .abspielen{opacity:0}
.rahmen-unter{font-size:14px;color:var(--leise);margin:10px 0 0}

/* Wiedererkennen */
.zwei-spalten{display:grid;gap:var(--s5)}
@media (min-width:900px){.zwei-spalten{grid-template-columns:1fr 1fr;gap:72px;align-items:start}}
.liste-strich{list-style:none;padding:0;margin:var(--s3) 0 0;border-top:1px solid var(--karamell)}
.liste-strich li{padding:16px 0;border-bottom:1px solid var(--karamell);font-size:18px}
.zitat-gross{font:400 clamp(24px,2.6vw,32px)/1.35 var(--titel);margin:0}
.zitat-gross cite{display:block;font:400 15px/1.5 var(--text);color:var(--leise);margin-top:var(--s2);font-style:normal}
.dunkel .zitat-gross cite{color:#E9D9CB}

/* Kursübersicht */
.lektionen{list-style:none;padding:0;margin:0;display:grid;gap:0;counter-reset:l;border-top:1px solid var(--karamell)}
.lektionen li{display:grid;grid-template-columns:56px 1fr;gap:4px 16px;padding:20px 0;border-bottom:1px solid var(--karamell)}
.lektionen .nr{font:400 30px/1 var(--titel);color:var(--altrosa);grid-row:span 2}
.lektionen h3{font-size:20px}
.lektionen p{margin:0;color:var(--leise);font-size:16px}
@media (min-width:900px){.lektionen{grid-template-columns:1fr 1fr;column-gap:56px}.lektionen li:nth-child(2){border-top:0}}

/* Über Valerie */
.valerie{display:grid;gap:var(--s5);align-items:center}
.valerie figure{margin:0}
.valerie img{width:100%;height:auto;border-radius:4px;border:1px solid var(--karamell)}
.valerie figcaption{font-size:14px;color:var(--leise);margin-top:8px}
@media (min-width:900px){.valerie{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px}}
.unterschrift{font:400 italic 22px/1.3 var(--titel);margin:var(--s3) 0}

/* Anonymität: Regler und Schutzschichten */
.regler{display:grid;gap:0;border:1px solid var(--karamell);border-radius:4px;overflow:hidden;background:var(--creme)}
.regler-stufe{padding:var(--s3);border-bottom:1px solid var(--karamell);position:relative}
.regler-stufe:last-child{border-bottom:0}
.regler-stufe .stufe{font:700 13px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--leise);display:block;margin-bottom:8px}
.regler-stufe h3{margin-bottom:6px}
.regler-stufe p{margin:0;color:var(--leise);font-size:16px}
.regler-stufe.an{background:var(--blush)}
.regler-stufe.an::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--altrosa)}
@media (min-width:900px){.regler{grid-template-columns:repeat(3,1fr)}.regler-stufe{border-bottom:0;border-right:1px solid var(--karamell)}.regler-stufe:last-child{border-right:0}.regler-stufe.an::before{left:0;right:0;bottom:auto;width:auto;height:4px}}
.schichten{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;gap:var(--s3)}
.schichten li{display:grid;grid-template-columns:40px 1fr;gap:4px 14px}
.schichten .nr{width:40px;height:40px;border:1.5px solid var(--altrosa);border-radius:50%;display:grid;place-items:center;font:400 18px/1 var(--titel);color:var(--espresso);grid-row:span 2}
.schichten h3{font-size:19px;align-self:center}
.schichten p{margin:0;color:var(--leise);font-size:16px}
@media (min-width:900px){.schichten{grid-template-columns:1fr 1fr;column-gap:56px;row-gap:var(--s4)}}
.merksatz{margin-top:var(--s5);padding:var(--s3);border:1px solid var(--karamell);border-radius:4px;background:var(--creme);font-size:17px}

/* Zeit */
.zahlen{display:grid;gap:var(--s3);margin:0}
.zahl-feld{border-top:2px solid var(--altrosa);padding-top:var(--s2)}
.zahl-feld b{display:block;font:400 clamp(30px,3.4vw,40px)/1.1 var(--titel)}
.zahl-feld span{color:var(--leise);font-size:16px}
@media (min-width:760px){.zahlen{grid-template-columns:repeat(3,1fr)}}

/* Nicht für jede */
.ehrlich ul{list-style:none;padding:0;margin:var(--s3) 0 0}
.ehrlich li{padding:14px 0 14px 32px;border-bottom:1px solid rgba(233,217,203,.35);position:relative;font-size:18px}
.ehrlich li::before{content:"";position:absolute;left:4px;top:26px;width:14px;height:1.5px;background:var(--karamell)}

/* Ablauf */
.schritte{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4)}
.schritte li{border-top:1px solid var(--karamell);padding-top:var(--s3)}
.schritte .nr{font:400 15px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--leise);display:block;margin-bottom:12px}
.schritte h3{margin-bottom:8px}
.schritte p{margin:0;color:var(--leise);font-size:16px}
.marke-klein{display:inline-block;font:700 12px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;background:var(--blush);color:var(--espresso);padding:6px 9px;border-radius:2px;margin-top:12px}
@media (min-width:900px){.schritte{grid-template-columns:repeat(3,1fr);gap:48px}}

/* Fragen */
.fragen details{border-bottom:1px solid var(--karamell)}
.fragen details:first-of-type{border-top:1px solid var(--karamell)}
.fragen summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font:400 20px/1.35 var(--titel);position:relative}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";position:absolute;right:8px;top:28px;width:10px;height:10px;border-right:1.5px solid var(--espresso);border-bottom:1.5px solid var(--espresso);transform:rotate(45deg);transition:transform .2s}
.fragen details[open] summary::after{transform:rotate(-135deg);top:32px}
.fragen details p{margin:0 0 20px;color:var(--leise);max-width:62ch}

/* Schluss mit Formular */
.schluss{text-align:center}
.schluss h2{max-width:22ch;margin:0 auto}
.schluss > .schmal > p{color:var(--leise);margin:var(--s2) auto var(--s4);max-width:46ch}
.formular{display:grid;gap:var(--s2);text-align:left;max-width:440px;margin:0 auto;position:relative}
.formular label{display:grid;gap:6px;font-weight:700;font-size:16px}
.formular input[type=text],.formular input[type=email],.formular input[type=tel]{width:100%;min-height:52px;border:1.5px solid var(--karamell);border-radius:4px;background:#FFFDFA;padding:0 14px;font:400 17px var(--text);color:var(--espresso)}
.formular input:focus{border-color:var(--altrosa);outline:2px solid var(--altrosa);outline-offset:1px}
.formular .knopf{width:100%}
.tel-feld{display:flex;gap:8px}
.tel-feld input{flex:1 1 auto;min-width:0}
.tel-feld select{flex:none;min-height:52px;border:1.5px solid var(--karamell);border-radius:4px;background:#FFFDFA;font:400 16px var(--text);color:var(--espresso);padding:0 8px}
.formular .pruef{font-size:13.5px;font-weight:400;color:var(--leise)}
.formular .einw{font-size:12.5px;line-height:1.5;color:var(--leise);margin:0;padding-top:12px;border-top:1px solid var(--karamell);text-align:center}
.formular .diskret{text-align:center;font-size:15px;margin:0;color:var(--espresso)}
.formular-fehler{color:#9B1C1C;font-weight:700;margin:0}
.formular-fehler:empty{display:none}
/* Ländervorwahl (vorwahl.js) in Markenform */
.vw-knopf{border-radius:4px!important;border:1.5px solid var(--karamell)!important;background:#FFFDFA!important;min-height:52px!important}

/* Fenster zum Eintragen */
dialog.eintragen{border:0;border-radius:4px;padding:0;width:min(460px,calc(100vw - 24px));max-height:calc(100vh - 24px);background:var(--creme);color:var(--espresso)}
dialog.eintragen::backdrop{background:rgba(56,42,38,.55)}
dialog.eintragen .formular{padding:28px 22px 22px;max-width:none}
dialog.eintragen h2{font-size:26px;text-align:center}
dialog.eintragen .unter{text-align:center;color:var(--leise);margin:-6px 0 0;font-size:15px}
dialog.eintragen .zu{position:absolute;right:6px;top:4px;width:44px;height:44px;border:0;background:none;font-size:28px;line-height:1;color:var(--espresso);cursor:pointer}
.fortschritt{height:4px;background:var(--blush);border-radius:2px;overflow:hidden}
.fortschritt i{display:block;height:100%;width:100%;background:var(--altrosa);transform:scaleX(.5);transform-origin:left;transition:transform .3s}
.fortschritt-text{font-size:13px;color:var(--leise);text-align:center;margin:-6px 0 0}
.stufe{display:grid;gap:var(--s2)}
.stufe[hidden]{display:none}

/* Leiste unten am Handy */
.leiste-unten{display:none}
@media (max-width:820px){
  .leiste-unten{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(251,245,238,.97);border-top:1px solid var(--karamell);transform:translateY(110%);transition:transform .25s}
  .leiste-unten.an{transform:none}
  .leiste-unten .knopf{width:100%}
}

/* Fuß */
.fuss{background:var(--tiefe);color:#E9D9CB;padding:var(--s5) 0;font-size:14px}
.fuss .zeile{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-bottom:var(--s2)}
.fuss .marke{color:var(--creme)}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.fuss a{color:var(--creme)}
.fuss small{display:block;font-size:13px;line-height:1.5;margin-top:6px}

/* Unterseiten */
.seite{padding-top:var(--s6);padding-bottom:var(--s7)}
.seite h1{font-size:clamp(28px,3.6vw,42px)}
.seite .unterzeile{color:var(--leise)}
.kopf--ruhig{justify-content:center}
.leiste-oben{background:var(--blush);text-align:center;font-size:14px;padding:8px 16px;border-bottom:1px solid var(--karamell)}
.karten{display:grid;gap:var(--s2);margin:var(--s5) 0}
.karte{border:1px solid var(--karamell);border-radius:4px;padding:var(--s3);background:var(--creme)}
.karte .zahl{display:inline-grid;place-items:center;width:32px;height:32px;border:1.5px solid var(--altrosa);border-radius:50%;font:400 16px/1 var(--titel);margin-bottom:12px}
.karte h3{margin-bottom:6px}
.karte p{margin:0;color:var(--leise);font-size:16px}
.hinweis-box{background:var(--blush);border-radius:4px;padding:16px 20px;margin:var(--s4) 0;color:var(--espresso)}
@media (min-width:760px){.karten--zwei{grid-template-columns:1fr 1fr}}