/* ============================================================
   umfrage.css — NUR das Umfrage-Formular (+ fuenf Klassen, die Inline-Styles
   der Vorlage ersetzen, weil CSP style-src 'self' style="…" blockt).
   Alles andere kommt woertlich aus site.css (= /upgrades/index.html).
   Jeder Wert hier ist einem Baustein der Vorlage entnommen — Herkunft steht dran.
   Runde 3, Job 5fbdc671, 13.09.2026.
   ============================================================ */

/* Inline-Styles der Vorlage als Klassen */
.nav-cta{padding:10px 18px}                                   /* Vorlage: "Jetzt starten" style="padding:10px 18px" */
.nav-dropdown-coming{opacity:.4;cursor:default;display:flex;flex-direction:column;padding:var(--space-2) 0;gap:2px}
.team-lead-foto{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:0 0 auto}   /* Vorlage: Ronald-Foto in #wer */
.team-lead p.team-lead-sig,.mk-hero-sig{font-family:var(--font-display);font-style:italic;font-size:var(--fs-lg);color:var(--ink-primary)}
.mk-hero-sig{margin-bottom:var(--space-6)}

/* ---------- Formular-Spalte: so breit wie .section-header der Vorlage (760px) ---------- */
.umfrage{max-width:760px}

/* Frage-Karte = .mk-course der Vorlage (Flaeche, Rand, Radius, Innenabstand), ohne Hover-Hub */
.panel{background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-md);
  padding:clamp(1.6rem,3vw,2.4rem);margin:0 0 var(--space-5)}
fieldset{border:0;margin:0;padding:0;min-width:0}
/* Frage-Nummer = .mk-course-kicker (nach Calm-Nachtrag: Body-Font, uppercase, ink-muted) */
.qnum{font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:var(--ls-mono);text-transform:uppercase;
  color:var(--ink-muted);display:block;margin-bottom:var(--space-3)}
/* Frage-Text = .mk-course h3 (Body 700), eine Stufe kleiner als die Karten-Ueberschrift der Vorlage */
legend,label.flabel{display:block;width:100%;font-family:var(--font-body);font-weight:700;font-size:1.15rem;line-height:1.35;
  color:var(--ink-primary);margin-bottom:var(--space-2)}
/* Hinweis = .mk-how p */
.hint{font-size:.9rem;color:var(--ink-muted);line-height:1.5;margin:0 0 var(--space-4)}
.req{color:var(--accent-primary)}

/* Auswahl-Karten: Flaeche/Rand wie .mk-capture-form input, gewaehlt = Marken-Orange wie :focus-visible der Site */
.opt{display:block;position:relative;margin:0 0 var(--space-2)}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .box{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--surface-inset);
  border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);
  cursor:pointer;transition:border-color var(--transition-fast);min-height:52px}
.opt .box:hover{border-color:var(--border-strong)}
.opt .dot{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong);
  background:var(--surface-base);margin-top:3px;position:relative}
.opt .dot::after{content:"";position:absolute;inset:5px;border-radius:50%;background:transparent}
.opt input:checked + .box{border-color:var(--accent-primary)}
.opt input:checked + .box .dot{border-color:var(--accent-primary)}
.opt input:checked + .box .dot::after{background:var(--accent-primary)}
.opt input:focus-visible + .box{outline:2px solid var(--accent-primary);outline-offset:2px}
.opt .txt strong{display:block;font-weight:600;color:var(--ink-primary);margin-bottom:2px}
.opt .txt span{color:var(--ink-body);font-size:var(--fs-sm);line-height:1.5}
.opt.short .txt{padding-top:2px;color:var(--ink-primary)}

/* Freitext + E-Mail = .mk-capture-form input der Vorlage (woertlich), Fokus in Marken-Orange */
textarea,input[type=text],input[type=email]{
  width:100%;background:var(--surface-inset);border:1px solid var(--border-default);border-radius:var(--radius-sm);
  color:var(--ink-primary);font-family:var(--font-body);font-size:1rem;padding:var(--space-3) var(--space-4);
  line-height:1.55;resize:vertical}
textarea{min-height:130px}
textarea:focus,input[type=text]:focus,input[type=email]:focus{outline:none;border-color:var(--accent-primary)}
::placeholder{color:var(--ink-muted)}

/* Folgefeld E: Linie links wie .mk-how (border-top) — hier als border-left */
.followup{margin-top:var(--space-4);padding-left:var(--space-4);border-left:1px solid var(--border-default)}
.followup label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink-body);margin-bottom:var(--space-2)}

/* Einwilligung: gleiche Flaeche wie die Auswahl-Karten */
.consent{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--surface-inset);
  border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:var(--space-4);cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:var(--accent-primary)}
.consent span{font-size:var(--fs-sm);line-height:1.55;color:var(--ink-body)}
.consent strong{color:var(--ink-primary);font-weight:600}

/* Warteliste-Feld: Trennlinie wie .mk-voice-transcript (border-top border-subtle) */
.warteliste{margin-top:var(--space-5);border-top:1px solid var(--border-subtle);padding-top:var(--space-5)}
.warteliste .hint{margin-bottom:var(--space-3)}

/* Fehler: Semantik-Rot der Tokens, sonst Karten-Vokabular */
.errbox{background:rgba(239,68,68,.08);border:1px solid var(--semantic-danger);border-radius:var(--radius-sm);
  padding:var(--space-4) var(--space-5);margin:0 0 var(--space-5)}
.errbox b{display:block;margin-bottom:var(--space-2);color:#F87171}
.errbox ul{margin:0;padding-left:20px;list-style:disc}
.errbox li{margin:3px 0}
.ferr{display:block;color:#F87171;font-weight:600;font-size:var(--fs-sm);margin:var(--space-2) 0 0}
.panel.bad{border-color:var(--semantic-danger)}

/* Absenden = .btn.btn-primary.btn-lg der Vorlage; am Handy volle Breite wie .vk-hero-cta .btn */
.send{margin-top:var(--space-5)}
.send:focus-visible{outline:2px solid var(--ink-primary);outline-offset:3px}
@media(max-width:560px){.send{width:100%}}
/* Hinweis unter dem Knopf = .mk-cta-note */
.sendnote{font-family:var(--font-body);font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-muted);
  margin-top:var(--space-3);display:block}

/* Honeypot — fuer Menschen unsichtbar, fuer Bots ein Feld */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Datenschutzhinweis = .mk-faq details der Vorlage; nur die Zwischen-Ueberschriften des Lex-Bausteins dazu */
.umfrage .mk-faq{margin:var(--space-5) 0 0;max-width:none}
.dsinhalt h3{font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm);margin:var(--space-4) 0 var(--space-2);color:var(--ink-primary)}
.dsinhalt p{color:var(--ink-body);margin-top:var(--space-3);line-height:1.6;font-size:.95rem}

/* ---------- Runde 4 (Job 493fa754): Terminal-LP mit .mk-capture der Vorlage ---------- */
/* Fehlerbox im zentrierten Capture-Block linksbuendig und so breit wie das Formular (480px) */
.mk-capture .errbox{text-align:left;max-width:480px;margin-inline:auto}
/* Knopf steht in der Flex-Zeile neben dem Feld: der Abstand nach oben gilt nur fuer die Umfrage */
.mk-capture-form .send{margin-top:0}
/* Verweis-Link im Hero-Sub = .team-lead p a der Vorlage (Unterstrich, sonst nur Orange) */
.mk-hero-sub a{text-decoration:underline;text-underline-offset:3px}