/* formulare.css — Formular-Bauteile aus dem HIG-Abgleich (Paket w2-formulare, 29.10.2026).
   Gehört zu feld-pruefung.js. Farben nur über Tokens, beide Modi. */

/* ── Punkt 5: Satz am Feld ─────────────────────────────────────── */
.feld-fehler, .field-validation-error { display: block; margin-top: 4px; font-size: var(--fs-small); line-height: 1.35; }
.feld-fehler[hidden] { display: none; }
fieldset > .feld-fehler { margin-top: 6px; }
[aria-invalid="true"] { scroll-margin-top: calc(var(--topbar-h, 56px) + 24px); scroll-margin-bottom: 96px; }
.sm-form-control[aria-invalid="true"], .form-control[aria-invalid="true"], .form-select[aria-invalid="true"] { border-color: var(--danger-border); }
.form-check-input[aria-invalid="true"] { border-color: var(--danger-border); }
/* Alle Feldfehler stehen am Feld: oben bleibt ein Satz ohne Aufzählungspunkt. */
.validation-summary-errors.nur-hinweis ul { list-style: none; padding-left: 0; }
/* Beginn/Ende liegen in einem Subgrid mit zwei Zeilen (site.css .termin-zeitfelder). Ein Satz am Feld
   braucht eine dritte, sonst liegt er über den Knöpfen. */
.termin-zeitfelder > .sm-form-group:has(> .feld-fehler:not([hidden])) { grid-row: span 3; }

/* ── Punkt 136: Kreuz zum Leeren ───────────────────────────────── */
.feld-mit-loeschen { position: relative; display: block; }
.feld-mit-loeschen > input { padding-right: var(--tap, 48px); }
.feld-mit-loeschen > input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.feld-loeschen {
    position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
    display: none; align-items: center; justify-content: center;
    padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: 1.05rem;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.feld-mit-loeschen.hat-inhalt:focus-within .feld-loeschen { display: flex; }
.feld-loeschen:active i { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) { .feld-loeschen:hover { color: var(--text-secondary); } }

/* ── Punkt 111: drei Werte als Segmente statt Klappliste ───────── */
.segment-wahl { display: flex; gap: 0; padding: 3px; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); }
.segment-wahl label { position: relative; flex: 1 1 0; display: flex; margin: 0; min-width: 0; }
.segment-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segment-wahl span {
    flex: 1; display: flex; align-items: center; justify-content: center; min-height: calc(var(--tap, 48px) - 8px);
    padding: 0 8px; border-radius: calc(var(--radius-md) - 2px); color: var(--text-secondary);
    font-weight: 600; text-align: center; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color var(--dauer) var(--ease-aus), color var(--dauer) var(--ease-aus);
}
.segment-wahl input:checked + span { background: var(--bg-elevated, var(--bg-surface)); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-muted), 0 1px 2px rgba(15, 23, 42, .12); }
.segment-wahl input:focus-visible + span { outline: 2px solid var(--fokus-ring); outline-offset: 1px; }
.segment-wahl input:disabled + span { opacity: .55; cursor: default; }
.segment-wahl label:active span { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .segment-wahl span { transition: none; } .segment-wahl label:active span { transform: none; } }

/* ── Punkt 74: Schalter-Zeile, die sofort speichert ───────────── */
.einst-sofort { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.einst-sofort-zeile { align-items: flex-start; font-weight: 400; }
.einst-sofort-zeile .konto-schalter-bahn { margin-top: 2px; }
.einst-sofort-text { min-width: 0; }
.einst-sofort-status { flex: none; margin-top: 4px; }

/* ── Punkt 97: Hochladen mit Fortschritt, Abbrechen und Ablegen ── */
.ablage-ziel { transition: box-shadow var(--dauer) var(--ease-aus), background-color var(--dauer) var(--ease-aus); }
.ablage-ziel.ist-ziel { box-shadow: 0 0 0 2px var(--color-primary) inset; background-color: var(--primary-bg); }
.ablage-hinweis { color: var(--text-muted); font-size: var(--fs-small); }
.hochladen-stand { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.hochladen-stand[hidden] { display: none; }
.hochladen-stand progress { flex: 1; min-width: 0; height: 8px; accent-color: var(--color-primary); }
.hochladen-stand-text { flex: none; font-size: var(--fs-small); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ── Punkt 138: Wert neben dem Regler ─────────────────────────── */
.regler-mit-wert { display: flex; align-items: center; gap: 12px; }
.regler-mit-wert input[type="range"] { flex: 1; min-width: 0; }
.regler-wert { flex: none; min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* ── Punkt 123: fester Hinweis unter einem Knopf, der wartet ──── */
.knopf-dauer { margin: 6px 0 0; color: var(--text-muted); font-size: var(--fs-small); }
@media (pointer: coarse) { .ablage-am-pc { display: none; } }