/* ===========================================================================
   Onda – Formularfeld                              components/formular/formularfeld.css
   Regeln: R14.4.16 (Flächen für Erwachsene), R14.2.2 (kein Rot)
   Stand 2026-10-09 – Passwort-Auge im Feld (passwort-auge.js) auf Jan-Philips
   Freigabe nach dem Handtest. Zuvor 2026-09-29 – im Kit auf Jan-Philips
   Freigabe. Entstanden im Elternbereich des Dummys (eltern.css).

   Beschriftung über dem Feld, Hinweis darunter. Das Feld steht im
   Petrol-Hauch mit Rand --onda-track, weil ein Rand allein auf Weiß kaum zu
   sehen war; beim Tippen wird es weiß mit Petrol-Rand. Mindesthöhe 48 px.
   Text, E-Mail, Passwort, Datum und Auswahl sehen gleich aus.

   Nur auf Flächen für Erwachsene. Die Kind-App verlangt keine Texteingabe
   über die Bildschirmtastatur (R14.3.4); den Code nimmt das Code-Feld (EL34).

   <label class="feld"><span>E-Mail-Adresse</span>
     <input type="email" name="email" autocomplete="email"></label>
   <label class="feld"><span>Passwort</span>
     <input type="password" name="passwort" minlength="8">
     <small>Mindestens 8 Zeichen.</small></label>
   passwortAuge(input) setzt das Auge rechts ins Passwortfeld (passwort-auge.js).
   <label class="feld"><span>Klassenstufe</span>
     <select name="klasse">…</select></label>
   =========================================================================== */

.feld { display: block; margin-bottom: 18px; }
.feld > span { display: block; font-weight: 500; font-size: 15px; margin-bottom: 4px; }
.feld small { display: block; color: var(--onda-text-muted); font-size: 13px; margin-top: 4px; }

.feld :is(input[type="text"], input[type="email"], input[type="password"], input[type="date"], select) {
  box-sizing: border-box;
  width: 100%;
  font: 500 17px/1.3 var(--onda-font-body);
  color: var(--onda-text);
  background-color: var(--onda-petrol-wash);
  border: 1.5px solid var(--onda-track);
  border-radius: var(--onda-radius-button);
  padding: 11px 12px;
  min-height: 48px;
  appearance: none;
  -webkit-appearance: none;
}
.feld select {
  background-image: linear-gradient(45deg, transparent 50%, var(--onda-petrol) 50%),
                    linear-gradient(135deg, var(--onda-petrol) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.feld :is(input, select):focus {
  outline: 3px solid var(--onda-petrol-tint);
  border-color: var(--onda-petrol);
  background-color: var(--onda-white);
}

/* --- Auge im Passwortfeld (passwort-auge.js) --------------------------------
   Rechts im Feld, 48 px Tippfläche wie die Feldhöhe, Symbol in Petrol. */
.passwort-auge { position: relative; display: block; }
.feld .passwort-auge > input { padding-right: 52px; }

.passwort-auge-knopf {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 100%;
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0 var(--onda-radius-button) var(--onda-radius-button) 0;
  background: none;
  color: var(--onda-petrol);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.passwort-auge-knopf svg { width: 24px; height: 24px; display: block; }
.passwort-auge-knopf:focus-visible { outline: 3px solid var(--onda-petrol-tint); outline-offset: -3px; }

/* Edge bringt ein eigenes Auge mit; zwei wären eines zu viel. */
.passwort-auge > input::-ms-reveal { display: none; }