/* ===========================================================================
   formular.css — mehrstufiges Formular (eine Frage je Bildschirm)
   Teil des Haus-Bausatzes. Lädt NACH tokens.css und basis.css.
   Keine eigene Farbe hier: alles kommt aus tokens.css (--marke, --tinte …).
   Skill: 07-Skills/mehrstufiges-formular/start-here.md
   =========================================================================== */

.mf,.mf *,.mf *::before,.mf *::after{box-sizing:border-box}
.mf{
  --mf-breite:640px;
  --mf-weg:28px;               /* wie weit eine Frage beim Überblenden gleitet */
  --mf-dauer:280ms;
  position:relative;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--karte);color:var(--tinte);font-family:var(--font);overflow-x:clip;
}

/* Fortschritt: dünne Linie ganz oben, weich wachsend */
.mf-fortschritt{position:sticky;top:0;z-index:3;height:4px;background:var(--linie-2)}
.mf-fortschritt span{display:block;height:100%;width:0;background:var(--marke);
  border-radius:0 var(--radius-pill) var(--radius-pill) 0;
  transition:width var(--mf-dauer) var(--kurve)}

.mf-kopf{display:flex;align-items:center;gap:var(--abstand-3);
  padding:var(--abstand-4) var(--abstand-4) 0;max-width:var(--mf-breite);width:100%;margin:0 auto}
.mf-kopf img{height:36px;width:auto;display:block}
.mf-kopf .mf-titel{font-size:var(--schrift-2);color:var(--text-3);margin-left:auto}

/* Bühne: genau eine Frage sichtbar. Beim Wechsel liegt die alte kurz absolut darüber. */
.mf-buehne{position:relative;flex:1;display:flex;align-items:center;
  max-width:var(--mf-breite);width:100%;margin:0 auto;padding:var(--abstand-6) var(--abstand-4)}
.mf-schritt{width:100%;opacity:1;transform:none;
  transition:opacity var(--mf-dauer) var(--kurve),transform var(--mf-dauer) var(--kurve)}
.mf-schritt.mf-unten{opacity:0;transform:translateY(var(--mf-weg))}
.mf-schritt.mf-oben{opacity:0;transform:translateY(calc(var(--mf-weg) * -1))}
.mf-schritt.mf-geht{position:absolute;left:var(--abstand-4);right:var(--abstand-4);pointer-events:none}

.mf-nummer{display:flex;align-items:center;gap:var(--abstand-2);
  font-size:var(--schrift-2);color:var(--marke-dunkel);font-weight:600;margin-bottom:var(--abstand-2)}
.mf-frage{font-family:var(--font-marke);font-size:var(--schrift-5);line-height:1.25;font-weight:600;
  color:var(--tinte);margin:0 0 var(--abstand-2);text-wrap:balance}
.mf-frage .mf-pflicht{color:var(--marke-dunkel)}
.mf-hilfe{font-size:var(--schrift-3);color:var(--text-2);margin:0 0 var(--abstand-5);text-wrap:pretty;hyphens:manual}
.mf-frage,.mf-option-text,.mf-einwilligung{hyphens:manual}

/* Auswahl als große, antippbare Kacheln mit Tastenkürzel wie bei Typeform */
.mf-optionen{display:grid;gap:var(--abstand-2);margin-top:var(--abstand-4)}
.mf-option{display:flex;align-items:center;gap:var(--abstand-3);width:100%;min-height:52px;
  padding:var(--abstand-3) var(--abstand-4);text-align:left;font:inherit;font-size:var(--schrift-3);
  color:var(--tinte);background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius-knopf);
  cursor:pointer;transition:border-color var(--dauer-2) var(--kurve),background var(--dauer-2) var(--kurve),
  transform var(--dauer-1) var(--kurve),box-shadow var(--dauer-2) var(--kurve)}
.mf-option:hover{border-color:var(--marke);box-shadow:var(--schatten-1)}
.mf-option:active{transform:scale(.99)}
.mf-option:focus-visible{outline:2px solid var(--marke);outline-offset:2px}
.mf-option[aria-checked="true"]{border-color:var(--marke);background:var(--marke-bg)}
.mf-taste{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;
  font-size:var(--schrift-1);font-weight:700;color:var(--marke-dunkel);
  border:1px solid currentColor;border-radius:6px;background:var(--karte)}
.mf-option[aria-checked="true"] .mf-taste{background:var(--marke);border-color:var(--marke);color:var(--knopf-primaer-text)}
.mf-option-text{flex:1;min-width:0;overflow-wrap:anywhere}
.mf-option-text small{display:block;color:var(--text-2);font-size:var(--schrift-2);margin-top:2px}
.mf-haken{flex:none;opacity:0;transition:opacity var(--dauer-2) var(--kurve);color:var(--marke-dunkel)}
.mf-option[aria-checked="true"] .mf-haken{opacity:1}

/* Eingabefelder: groß, ruhig, nur eine Unterstreichung wie bei Typeform */
.mf-feldgruppe{display:grid;gap:var(--abstand-4);margin-top:var(--abstand-4)}
.mf-feldgruppe.mf-zweispaltig{grid-template-columns:1fr 1fr}
.mf-feldgruppe .mf-breit{grid-column:1/-1}
.mf-feld label{display:block;font-size:var(--schrift-2);color:var(--text-2);margin-bottom:var(--abstand-1)}
.mf-feld input,.mf-feld textarea{width:100%;font:inherit;font-size:var(--schrift-4);color:var(--tinte);
  background:transparent;border:0;border-bottom:2px solid var(--linie);border-radius:0;
  padding:var(--abstand-2) 0;transition:border-color var(--dauer-2) var(--kurve)}
/* Langtext wie eine Zeile: Text sitzt direkt auf der Linie und das Feld wächst mit (Wolfgang 05.10.2026). */
.mf-feld textarea{font-size:var(--schrift-3);line-height:1.5;resize:none;overflow:hidden;min-height:0;display:block;field-sizing:content}
.mf-feld input:focus,.mf-feld textarea:focus{outline:none;border-bottom-color:var(--marke)}
.mf-feld input::placeholder,.mf-feld textarea::placeholder{color:var(--text-3)}
.mf-feld[data-fehler] input,.mf-feld[data-fehler] textarea{border-bottom-color:var(--rot)}

/* Einwilligung */
.mf-einwilligung{display:flex;gap:var(--abstand-3);align-items:flex-start;margin-top:var(--abstand-4);
  padding:var(--abstand-4);border:1px solid var(--linie);border-radius:var(--radius-knopf);cursor:pointer;
  font-size:var(--schrift-3);line-height:1.5}
.mf-einwilligung input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--marke)}
.mf-einwilligung:has(input:checked){border-color:var(--marke);background:var(--marke-bg)}

/* Datei und Foto */
.mf-ablage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--abstand-2);
  margin-top:var(--abstand-4);min-height:140px;padding:var(--abstand-5);text-align:center;
  border:2px dashed var(--linie);border-radius:var(--radius-karte);color:var(--text-2);cursor:pointer;
  transition:border-color var(--dauer-2) var(--kurve),background var(--dauer-2) var(--kurve)}
.mf-ablage:hover,.mf-ablage.mf-ziehen{border-color:var(--marke);background:var(--marke-bg)}
.mf-ablage strong{color:var(--marke-dunkel)}
.mf-ablage input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mf-vorschau{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--abstand-2);margin-top:var(--abstand-3)}
.mf-bild{position:relative;aspect-ratio:1;border-radius:var(--radius-knopf);overflow:hidden;background:var(--flaeche);
  border:1px solid var(--linie);display:grid;place-items:center;font-size:var(--schrift-1);color:var(--text-2);
  padding:var(--abstand-1);text-align:center;overflow-wrap:anywhere}
.mf-bild img{width:100%;height:100%;object-fit:cover}
.mf-bild button{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:var(--radius-pill);
  border:0;background:hsl(0 0% 0%/.6);color:#fff;font-size:16px;line-height:1;cursor:pointer}

/* Bild zur Frage (wie Typeform „split"): Handy oben, Desktop rechts daneben */
.mf-abbild{margin:0 0 var(--abstand-5);border-radius:var(--radius-karte);overflow:hidden;aspect-ratio:16/10;background:var(--flaeche)}
.mf-abbild img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
@media (min-width:900px){
  .mf:has(.mf-schritt.mf-hat-bild:not(.mf-geht)){--mf-breite:1080px}   /* Kopf, Bühne und Fuß wachsen gemeinsam */
  .mf-hat-bild{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--abstand-6);align-items:center}
  .mf-hat-bild .mf-abbild{order:2;margin:0;aspect-ratio:3/4;max-height:72vh;box-shadow:var(--schatten-2)}
}

/* Fehlerzeile */
.mf-fehler{min-height:1.5em;margin-top:var(--abstand-3);font-size:var(--schrift-2);color:var(--rot)}

/* Fußleiste: Zurück links, ein Primärknopf rechts. Am Handy klebt sie unten. */
.mf-fuss{position:sticky;bottom:0;z-index:2;background:color-mix(in srgb,var(--karte) 92%,transparent);
  backdrop-filter:blur(6px);border-top:1px solid var(--linie-2)}
.mf-fuss-innen{display:flex;align-items:center;justify-content:flex-end;gap:var(--abstand-3);max-width:var(--mf-breite);margin:0 auto;
  padding:var(--abstand-3) var(--abstand-4) calc(var(--abstand-3) + env(safe-area-inset-bottom))}
.mf-zurueck{min-height:44px;padding:0 var(--abstand-3);font:inherit;font-size:var(--schrift-3);color:var(--text-2);
  background:transparent;border:0;border-radius:var(--radius-knopf);cursor:pointer;margin-right:auto}
.mf-zurueck:hover{color:var(--tinte);background:var(--flaeche)}
.mf-zurueck[hidden]{display:none}
.mf-hinweis-taste{font-size:var(--schrift-1);color:var(--text-3)}
.mf-hinweis-taste[hidden]{display:none}
.mf-weiter{min-height:44px;padding:0 var(--abstand-5);font:inherit;font-size:var(--schrift-3);font-weight:600;
  color:var(--knopf-primaer-text);background:var(--knopf-primaer);border:0;border-radius:var(--radius-knopf);
  cursor:pointer;transition:background var(--dauer-2) var(--kurve),transform var(--dauer-1) var(--kurve)}
.mf-weiter:hover{background:var(--knopf-primaer-hover)}
.mf-weiter:active{transform:scale(.98)}
.mf-weiter:disabled{opacity:.6;cursor:wait}

/* Honeypot: für Menschen unsichtbar, für Bots ein Feld */
.mf-falle{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Ende */
.mf-ende{text-align:center}
.mf-ende .mf-kreis{width:64px;height:64px;margin:0 auto var(--abstand-4);border-radius:var(--radius-pill);
  display:grid;place-items:center;background:var(--gruen-bg);color:var(--gruen)}

@media (max-width:560px){
  .mf-buehne{align-items:flex-start;padding-top:var(--abstand-5)}
  .mf-frage{font-size:var(--schrift-4)}
  .mf-feldgruppe.mf-zweispaltig{grid-template-columns:1fr}
  .mf-hinweis-taste{display:none}
  .mf-weiter{flex:1;max-width:60%}
}

@media (prefers-reduced-motion:reduce){
  .mf{--mf-weg:0px}
}