/* campera.media · Sprecher-Casting (js/casting.js), seit 06.11.2026.
   Nur Tokens aus main.css, damit Hell und Dunkel von selbst stimmen. */
.cst{position:relative;max-width:1120px;margin:0 auto;text-align:left;background:rgba(var(--n),.025);border:1px solid rgba(var(--n),.09);border-radius:12px;padding:clamp(22px,4vw,44px);box-shadow:var(--shadow-s,0 20px 50px rgba(0,0,0,.25))}
.cst-kopf{display:flex;align-items:center;gap:16px;margin-bottom:clamp(20px,3vw,32px)}
.cst-zaehl{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--c-text);white-space:nowrap}
.cst-balken{flex:1;height:2px;background:rgba(var(--n),.1);border-radius:2px;overflow:hidden}
.cst-balken span{display:block;height:100%;background:var(--c);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--ease)}
.cst-titel{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:-.02em;color:var(--fg);margin-bottom:10px;outline:none}
.cst-titel em{font-style:italic;color:var(--c-text)}
.cst-unter{color:var(--tx-3);font-size:.98rem;line-height:1.7;max-width:58ch;margin-bottom:6px}
.cst-gruppe{margin-top:26px}
.cst-label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-3);margin-bottom:10px}
.cst-label span,.cst-opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--tx-4)}

/* Kacheln: Einfachwahl, ein Klick schaltet weiter */
.cst-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:820px){.cst-kacheln{grid-template-columns:repeat(2,1fr)}}
.cst-kachel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:84px;padding:16px 40px 16px 18px;text-align:left;border:1px solid rgba(var(--n),.12);border-radius:10px;background:rgba(var(--n),.02);cursor:pointer;transition:border-color .25s var(--ease),background-color .25s var(--ease),transform .25s var(--ease)}
.cst-kachel:hover{border-color:rgba(var(--n),.28);background:rgba(var(--n),.045)}
.cst-kachel:active{transform:scale(.98)}
.cst-k-titel{font-size:1rem;font-weight:600;color:var(--fg);line-height:1.3}
.cst-k-unter{font-size:.82rem;color:var(--tx-4);line-height:1.45}
.cst-k-haken{position:absolute;top:16px;right:14px;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(var(--n),.3);transition:border-color .25s,background-color .25s,box-shadow .25s}
.cst-kachel[aria-pressed="true"]{border-color:var(--c);background:rgba(208,0,0,.08)}
.cst-kachel[aria-pressed="true"] .cst-k-haken{border-color:var(--c);background:var(--c);box-shadow:0 0 0 3px rgba(208,0,0,.18),0 0 14px rgba(208,0,0,.5)}

/* Chips: Mehrfachwahl und kurze Antworten */
.cst-chips{display:flex;flex-wrap:wrap;gap:8px}
.cst-chip{min-height:42px;padding:9px 16px;border:1px solid rgba(var(--n),.14);border-radius:100px;background:transparent;font-size:.9rem;font-weight:500;color:var(--fg);cursor:pointer;transition:border-color .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease)}
.cst-chip:hover{border-color:rgba(var(--n),.32)}
.cst-chip[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:var(--on-accent,#fff)}
.cst-kachel:focus-visible,.cst-chip:focus-visible,.cst-weiter:focus-visible,.cst-zurueck:focus-visible,.cst-aendern:focus-visible{outline:2px solid var(--c-text);outline-offset:3px}
.cst-sonst{margin:16px 0 0;max-width:420px}

/* Leiste */
.cst-fehler{min-height:1.3em;margin-top:16px;font-size:.9rem;color:var(--c-text)}
.cst-fehler:empty{margin-top:8px}
.cst-leiste{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.cst-weiter{margin-left:auto;padding:14px 32px;border-radius:100px;background:var(--c);color:var(--on-accent,#fff);font-size:.95rem;font-weight:600;cursor:pointer;box-shadow:0 4px 15px rgba(208,0,0,.2);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
.cst-weiter:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(208,0,0,.35);background:var(--accent-h,#b30000)}
.cst-weiter:active{transform:scale(.97)}
.cst-weiter:disabled{opacity:.6;cursor:wait;transform:none}
.cst-zurueck{padding:12px 4px;font-size:.9rem;font-weight:500;color:var(--tx-3);cursor:pointer;transition:color .2s}
.cst-zurueck:hover{color:var(--fg)}

/* Kontaktschritt */
.cst-zf{margin:22px 0 26px;padding:16px 18px;border-radius:8px;background:rgba(var(--n),.035);border:1px solid rgba(var(--n),.06)}
.cst-zf ul{list-style:none;display:grid;gap:8px}
.cst-zf li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:.92rem;color:var(--text);line-height:1.5}
.cst-aendern{flex:none;font-size:.8rem;font-weight:600;color:var(--c-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cst-zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 20px}
.cst .audit-form-group{margin-bottom:20px}
.cst .audit-input[aria-invalid="true"]{border-color:var(--c-text)}
.cst-hinweis{margin-top:4px;font-size:.8rem;color:var(--tx-4);line-height:1.6}
.cst-hinweis a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cst-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Danke */
.cst-danke{text-align:center;padding:clamp(20px,5vw,48px) 0 8px}
.cst-danke .cst-unter{margin:0 auto 24px}
.cst-lampe{display:block;width:14px;height:14px;margin:0 auto 22px;border-radius:50%;background:var(--c);box-shadow:0 0 0 6px rgba(208,0,0,.15),0 0 30px rgba(208,0,0,.7);animation:cstLampe 2.4s ease-in-out infinite}
@keyframes cstLampe{50%{box-shadow:0 0 0 9px rgba(208,0,0,.08),0 0 40px rgba(208,0,0,.9)}}

/* Schrittwechsel: kurz, von der Seite der Bewegung */
.cst-rein-vor{animation:cstVor .38s var(--ease) both}
.cst-rein-zurueck{animation:cstZurueck .38s var(--ease) both}
@keyframes cstVor{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes cstZurueck{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cst-balken span{transition:none}.cst-lampe{animation:none}}

/* Ohne JavaScript */
.cst-ohne-js{text-align:center}
.cst.cst-an .cst-ohne-js{display:none}

/* Seite drumherum */
.cst-hero{padding-top:clamp(120px,16vh,170px)!important}
.cst-hero .sh{margin-bottom:16px}
.cst-hero .sp{max-width:640px}
/* Wizard seit 07.11.2026 so breit wie die Abschnitte, Fließtext bleibt lesbar schmal */
.cst-unter{max-width:62ch}
.cst-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:22px auto 0;max-width:1120px;font-size:.85rem;color:var(--tx-3)}
.cst-trust span::before{content:'';display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--c);vertical-align:middle}
/* Gemeinsame Breite für alle Inhaltsabschnitte (seit 07.11.2026, vorher 760 bis 1300 px gemischt) */
.cst-sec{padding-top:clamp(72px,9vw,128px);padding-bottom:clamp(72px,9vw,128px)}
.cst-i{max-width:1120px}
.cst-i .sh{margin-bottom:18px}
.cst-sp{max-width:62ch;margin-bottom:0}
.cst-a{color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
#casting{scroll-margin-top:96px}

/* Erklärt: Text links, Kasten rechts */
.cst-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.cst-text p{font-size:1.02rem;line-height:1.8;color:var(--text);margin-bottom:1.1rem;max-width:62ch}
.cst-box{padding:clamp(24px,3vw,34px);border:1px solid var(--line);border-radius:12px;background:rgba(var(--n),.025)}
.cst-box h3{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--c-text);margin-bottom:18px}
.cst-liste{list-style:none;display:grid;gap:16px;margin:0 0 24px;padding:0}
.cst-liste li{display:grid;grid-template-columns:18px 1fr;column-gap:12px;row-gap:2px}
.cst-liste li::before{content:'';grid-row:span 2;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--c)}
.cst-liste b{font-size:1rem;font-weight:600;color:var(--fg);line-height:1.45}
.cst-liste span{font-size:.92rem;line-height:1.6;color:var(--tx-3)}
.cst-box-cta,.cst-go{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--c-text)}
.cst-box-cta svg,.cst-go svg{transition:transform .2s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.cst-box-cta:hover svg,.cst-einsatz:hover .cst-go svg{transform:translateX(3px)}}

/* Einsätze: Karten springen direkt in den passenden Schritt */
.cst-einsaetze{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:2.5rem}
.cst-einsatz{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:12px;background:rgba(var(--n),.02);color:inherit;text-decoration:none;transition:border-color .2s ease,background-color .2s ease}
.cst-einsatz h3{font-size:1.05rem;font-weight:600;color:var(--fg);line-height:1.3}
.cst-einsatz p{flex:1;font-size:.92rem;line-height:1.65;color:var(--text);margin:0}
.cst-einsatz .cst-go{margin-top:6px;font-size:.85rem}
@media (hover:hover) and (pointer:fine){.cst-einsatz:hover{border-color:rgba(var(--n),.3);background:rgba(var(--n),.045)}}
.cst-einsatz:focus-visible{outline:2px solid var(--c-text);outline-offset:3px}

/* Ablauf */
.cst-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:2.5rem}
.cst-schritte div{padding:26px 24px;border:1px solid var(--line);border-radius:12px}
.cst-schritte b{display:block;font-family:var(--serif);font-weight:400;font-size:2.2rem;color:var(--c-text);line-height:1;margin-bottom:14px}
.cst-schritte h3{font-size:1.1rem;font-weight:600;margin-bottom:8px;color:var(--fg)}
.cst-schritte p{font-size:.95rem;line-height:1.7;color:var(--text)}

/* Echte Stimme oder KI */
.cst-vergleich{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:2.5rem}
.cst-vergleich-spalte{padding:clamp(24px,3vw,34px);border:1px solid var(--line);border-radius:12px}
.cst-vergleich-spalte:first-child{border-color:rgba(208,0,0,.35);background:rgba(208,0,0,.04)}
.cst-vergleich-spalte h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.4vw,2rem);line-height:1.1;color:var(--fg);margin-bottom:6px}
.cst-vergleich-spalte p{font-size:.95rem;color:var(--tx-3);margin-bottom:18px}
.cst-vergleich-spalte ul{list-style:none;display:grid;gap:10px;padding:0;margin:0}
.cst-vergleich-spalte li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.55;color:var(--text)}
.cst-vergleich-spalte li::before{content:'';position:absolute;left:2px;top:.62em;width:8px;height:2px;background:var(--c)}
.cst-ki li::before{background:rgba(var(--n),.4)}
.cst-note{max-width:70ch;margin-top:1.75rem;margin-bottom:0;font-size:.95rem}

/* Figur sitzt im Erklärteil, Abstand zum Text darüber */
.cst-i .cm-anatomy-track{margin-top:clamp(56px,7vw,96px)}

@media (max-width:980px){.cst-einsaetze{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.cst-split,.cst-vergleich,.cst-schritte{grid-template-columns:1fr}}
@media (max-width:560px){
  .cst-einsaetze{grid-template-columns:1fr}
  .cst{padding:20px 16px;border-radius:10px}
  .cst-kacheln{grid-template-columns:1fr 1fr}
  .cst-kachel{min-height:76px;padding:14px 32px 14px 14px}
  .cst-k-titel{font-size:.93rem}
  .cst-k-haken{top:14px;right:10px;width:14px;height:14px}
  .cst-weiter{padding:14px 26px}
}