/* Formular-Atome und -Moleküle – eine Quelle für Jobbörse, Bewerbungs-Wizard,
   Kandidaten- und Firmenportal (docs/reconstruction/05_DESIGN_SYSTEM.md §2.2).
   Scope-frei; auf allen Jobs-Seiten direkt nach dem Button-Atom geladen.

   Kanonische Klassen:
     ee-form            Feldstapel (Abstand --ee-space-stack-form)
     ee-form-grid       zwei Spalten, einspaltig < 768 px; Feld mit ee-field--span-2
     ee-field           Label → Control → Hint → Error (feste Anatomie)
     ee-field__label    14 px / 600, Pflichtmarker <span class="req">*</span>
     ee-input / ee-select / ee-textarea   16 px, 48 px, ein Fokusstil
     ee-field__hint     13 px, muted, per aria-describedby verknüpft
     ee-field__error    13 px, Statusrot, sichtbar sobald Text vorhanden
     ee-field--check    Checkbox/Radio mit Label, Fehlertext in voller Breite
   Bestandsnamen (ee-portal-*, ee-fld / ee-in / ee-hint / ee-fld-err / ee-check,
   ee-apply2-row) sind Aliasse derselben Regeln, bis das Markup migriert ist
   (Stage 4/5). Keine Hex-Werte, keine Token-Definitionen (tokens.test.js). */

/* ── Layout ─────────────────────────────────────────────────────────── */
.ee-form,
.ee-portal-form,
.ee-apply2-form {
  display: flex;
  flex-direction: column;
  gap: var(--ee-space-stack-form);
}

.ee-form-grid,
.ee-portal-form-grid,
.ee-apply2-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ee-space-stack-form) var(--ee-space-4);
  min-width: 0;
}
.ee-field--span-2,
.ee-portal-field.span-2 { grid-column: span 2; }

@media (max-width: 767px) {
  .ee-form-grid,
  .ee-portal-form-grid,
  .ee-apply2-row { grid-template-columns: 1fr; }
  .ee-field--span-2,
  .ee-portal-field.span-2 { grid-column: span 1; }
}

/* ── Feld (Molekül) ─────────────────────────────────────────────────── */
.ee-field,
.ee-portal-field,
.ee-fld {
  display: flex;
  flex-direction: column;
  gap: var(--ee-space-2);
  min-width: 0;
}

.ee-field__label,
.ee-portal-label,
.ee-fld > label {
  font-size: var(--ee-text-sm);
  font-weight: 600;
  line-height: var(--ee-leading-snug);
  color: var(--ee-color-text-strong);
}
.ee-field__label .req,
.ee-field__req,
.ee-portal-label .req { color: var(--ee-color-action-primary); }

/* ── Eingabe, Auswahl, Textbereich (Atome) ──────────────────────────── */
.ee-input,
.ee-select,
.ee-textarea,
.ee-portal-input,
.ee-portal-select,
.ee-portal-textarea,
.ee-in {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  height: var(--ee-size-control);
  padding: 0 var(--ee-space-4);
  font-family: var(--ee-font-sans);
  font-size: var(--ee-text-base);       /* 16 px: kein Zoom auf iOS */
  line-height: var(--ee-leading-snug);
  color: var(--ee-color-text-primary);
  background-color: var(--ee-color-surface-0);
  border: 1px solid var(--ee-color-border-strong);
  border-radius: var(--ee-radius-control);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--ee-duration-fast) var(--ee-ease-standard),
              background-color var(--ee-duration-fast) var(--ee-ease-standard);
}

.ee-textarea,
.ee-portal-textarea,
textarea.ee-in {
  height: auto;
  min-height: 8rem;
  padding: var(--ee-space-3) var(--ee-space-4);
  line-height: var(--ee-leading-normal);
  resize: vertical;
}

.ee-select,
.ee-portal-select,
select.ee-in {
  padding-right: calc(var(--ee-space-4) + var(--ee-space-5));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2368686F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ee-space-4) center;
  cursor: pointer;
}

.ee-input::placeholder,
.ee-textarea::placeholder,
.ee-portal-input::placeholder,
.ee-portal-textarea::placeholder,
.ee-in::placeholder { color: var(--ee-color-text-placeholder); opacity: 1; }

.ee-input:hover,
.ee-select:hover,
.ee-textarea:hover,
.ee-portal-input:hover,
.ee-portal-select:hover,
.ee-portal-textarea:hover,
.ee-in:hover { border-color: var(--ee-color-text-placeholder); }

/* Ein Fokusstil: Ring aus tokens.css, hier ohne Abstand, Rahmen in Markenfarbe */
.ee-input:focus-visible,
.ee-select:focus-visible,
.ee-textarea:focus-visible,
.ee-portal-input:focus-visible,
.ee-portal-select:focus-visible,
.ee-portal-textarea:focus-visible,
.ee-in:focus-visible {
  outline: 2px solid var(--ee-color-focus);
  outline-offset: 0;
  border-color: var(--ee-color-brand);
}

.ee-input:disabled,
.ee-select:disabled,
.ee-textarea:disabled,
.ee-portal-input:disabled,
.ee-portal-select:disabled,
.ee-portal-textarea:disabled,
.ee-in:disabled,
.ee-input[readonly],
.ee-portal-input[readonly] {
  color: var(--ee-color-text-muted);
  background-color: var(--ee-color-surface-2);
  cursor: not-allowed;
}

/* Fehlerzustand: über aria-invalid am Control oder is-invalid am Feld */
[aria-invalid="true"].ee-input,
[aria-invalid="true"].ee-select,
[aria-invalid="true"].ee-textarea,
[aria-invalid="true"].ee-portal-input,
[aria-invalid="true"].ee-portal-select,
[aria-invalid="true"].ee-portal-textarea,
[aria-invalid="true"].ee-in,
.is-invalid .ee-input,
.is-invalid .ee-select,
.is-invalid .ee-textarea,
.is-invalid .ee-portal-input,
.is-invalid .ee-portal-select,
.is-invalid .ee-portal-textarea,
.is-invalid .ee-in { border-color: var(--ee-color-status-error); }

/* ── Hinweis und Fehler ─────────────────────────────────────────────── */
.ee-field__hint,
.ee-portal-hint,
.ee-hint {
  margin: 0;
  font-size: var(--ee-text-xs);
  line-height: var(--ee-leading-snug);
  color: var(--ee-color-text-muted);
}

.ee-field__error,
.ee-fld-err {
  display: none;
  margin: 0;
  font-size: var(--ee-text-xs);
  font-weight: 500;
  line-height: var(--ee-leading-snug);
  color: var(--ee-color-status-error);
}
.ee-field__error:not(:empty),
.ee-fld-err:not(:empty),
.is-invalid > .ee-field__error,
.is-invalid > .ee-fld-err { display: block; }

/* Übergang: Portal-Formularmeldung (#loginMessage, #registerMessage …) mit
   role="alert" unter den Aktionen – reserviert eine Zeile, bis ee-notice
   (Stage 4/5) sie ersetzt. */
.ee-portal-error {
  display: block;
  margin: 0;
  min-height: 1.1rem;
  font-size: var(--ee-text-xs);
  line-height: var(--ee-leading-snug);
  color: var(--ee-color-status-error);
}

/* ── Checkbox-/Radio-Feld ───────────────────────────────────────────── */
/* Grid statt Flex: auch ein reiner Textknoten (label.ee-portal-checkbox ist
   selbst der Container) landet schrumpfbar in Spalte 2; der Fehlertext
   belegt beide Spalten. */
.ee-field--check,
.ee-check,
.ee-portal-checkbox {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--ee-space-3);
  row-gap: var(--ee-space-2);
  align-items: start;
  font-size: var(--ee-text-sm);
  line-height: 1.5;
  color: var(--ee-color-text-secondary);
}
.ee-field--check input,
.ee-check input,
.ee-portal-checkbox input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ee-color-brand);
}
.ee-field--check label,
.ee-check label,
.ee-portal-checkbox label { min-width: 0; }
.ee-field--check a,
.ee-check a,
.ee-portal-checkbox a { color: var(--ee-color-text-primary); }
.ee-field--check .ee-field__error,
.ee-check .ee-fld-err { grid-column: 1 / -1; }
.ee-field--check.is-invalid > label,
.ee-check.is-invalid > label { color: var(--ee-color-status-error); }