/* Formularfelder: EIN Maß für alle (Bea 29.10.2026, docs/styleguide.md).
 *
 * Gilt in beiden Rahmen (neu: wd.css, älter: style.css) und kommt in beiden
 * Basis-Vorlagen NACH dem jeweiligen Stylesheet. Höhe nur über --feld-h:
 * Computer 36 px, Touch 44 px, Monteur 48 px (Handschuh). Neue Feldarten
 * bekommen ihr Maß HIER, nicht in einer Seitenregel. */
:root { --feld-h: 36px; --feld-r: 8px; --feld-text: 80px; --feld-flaeche: 96px; }
@media (pointer: coarse) { :root { --feld-h: 44px; } }
body.knopf-monteur { --feld-h: 48px; }
body {
  --f-bd: var(--bd, var(--border));
  --f-bg: var(--s2, var(--surface2));
  --f-tx: var(--tx, var(--text));
  --f-mu: var(--mu, var(--text-muted));
  --f-ak: var(--or-tx, var(--primary-text, #9c4708));
}

/* Einzeilige Felder: Text, E-Mail, Telefon, Suche, Datum, Uhrzeit, Zahl, Auswahl */
body :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=range],
    [type=submit], [type=button], [type=reset], [type=color], [type=image]),
  select, .form-select, .form-input):not(textarea, [type=file], .btn) {
  height: var(--feld-h);
  min-height: var(--feld-h);
  padding-top: 0;
  padding-bottom: 0;
  border-radius: var(--feld-r);
  box-sizing: border-box;
}
body textarea { min-height: var(--feld-text); border-radius: var(--feld-r); }

/* Kästchen und Auswahlknopf: 18 px, nie so breit wie ein Textfeld */
body :is(input[type=checkbox], input[type=radio]) {
  width: 18px; height: 18px; min-height: 0; padding: 0; flex: none; margin: 0 8px 0 0;
}

/* Datei-Upload (static/js/dateifeld.js): A = Zeile, B = Fläche bei mehreren Dateien */
.dfeld {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  flex: 1 1 auto; height: var(--feld-h); padding: 0 12px;
  border: 1px dashed var(--f-mu); border-radius: var(--feld-r);
  background: var(--f-bg); color: var(--f-tx); font-size: 14px; line-height: 1.2;
}
.dfeld > input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; border: 0; font-size: 0;
}
.dfeld > input[type=file]::file-selector-button { cursor: pointer; }
.dfeld svg { flex: none; width: 16px; height: 16px; color: var(--f-mu); }
.dfeld__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfeld__text b { font-weight: 600; color: var(--f-ak); }
.dfeld__gr { flex: none; font-size: 12px; color: var(--f-mu); }
.dfeld__weg {
  position: relative; z-index: 2; flex: none; display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 0 -6px 0 0; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--f-mu); font-size: 20px; line-height: 1; cursor: pointer;
}
.dfeld__weg:hover { background: rgba(127,127,127,.18); color: var(--f-tx); }
.dfeld--voll { border-style: solid; border-color: var(--f-bd); }
.dfeld--voll .dfeld__weg { display: inline-flex; }
.dfeld:focus-within, .dfeld--zieh { border-color: var(--focus, var(--primary)); outline: 2px solid var(--focus, var(--primary)); outline-offset: 1px; }
.dfeld--flaeche { flex-direction: column; justify-content: center; gap: 2px; height: var(--feld-flaeche); text-align: center; }
.dfeld--flaeche svg { width: 22px; height: 22px; }
.dfeld--flaeche .dfeld__text { flex: none; max-width: 100%; }
.dfeld--flaeche.dfeld--voll { flex-direction: row; justify-content: flex-start; height: var(--feld-h); text-align: left; }
.dfeld--flaeche.dfeld--voll svg { width: 16px; height: 16px; }
.dfeld--flaeche.dfeld--voll .dfeld__text { flex: 1; }

/* Schrift in Feldern 16 px (02.11.2026, Bea): kleiner zoomt iOS Safari beim Antippen in die Seite. Gilt fuer beide Rahmen. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]),
select, textarea { font-size: 16px; }

/* Bausteine (Bea 02.11.2026): Kaestchen, Auswahlknopf und Upload flach. Aus = nur Rand (--ctl, mind. 3:1), an = Rand und Toenung in Orange. */
body :is(input[type=checkbox], input[type=radio]) {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center;
  border: 1px solid var(--ctl); background: transparent; cursor: pointer;
}
body input[type=checkbox] { border-radius: 6px; }
body input[type=radio] { border-radius: 50%; }
body :is(input[type=checkbox], input[type=radio]):checked { border-color: var(--f-ak); background: var(--orange-bg); }
body input[type=checkbox]:checked::before {
  content: ""; width: 5px; height: 9px; border: solid var(--f-ak); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg);
}
body input[type=radio]:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f-ak); }
body :is(input[type=checkbox], input[type=radio]):disabled { opacity: .5; cursor: not-allowed; }
.dfeld { border-color: var(--ctl); }
.dfeld__fort { flex: none; width: 96px; height: 4px; border-radius: 6px; background: var(--ctl); overflow: hidden; }
.dfeld__fort > i { display: block; height: 100%; background: var(--or, var(--primary)); }  /* --or gibt es nur in wd.css */

/* Platzhaltertext (Kontrast-Uebergabe Bea 02.11.2026): der Browser-Standard (Chromium #a9a9a9) hielt auf dem
   hellen Feldgrund nur rund 2:1. Gedaempfte Schriftfarbe der Palette, sie haelt 4,5:1 auf allen Flaechen. */
body ::placeholder { color: var(--f-mu); opacity: 1; }

/* Feldfehler unter dem Feld (Bea 03.11.2026, ganze App; Skript: static/js/feldfehler.js).
   Farben nur aus der Palette: Werkstatt/Betrieb haben --bad, der alte Rahmen --danger-text. */
.feld-fehltext { color: var(--bad); font-size: 14px; margin: 4px 0 0; }
.feld-fehlt { border: 2px solid var(--bad) !important; }