/* --- Formulare (DESIGN 5 „Eingabefeld“, „Suchfeld“, „Autovervollständigung“) --------------- */

.form {
  display: grid;
  gap: var(--space-4);
}

/* Formular in einer Zeile, z. B. „Neue Einladung“ über der Liste (Admin). */
.form--inline {
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 320px);
  align-items: start;
  justify-content: start;
}

.form--inline > .btn {
  /* Auf Höhe der Eingabefelder: Beschriftung (16 px) plus Abstand (6 px). */
  margin-top: 22px;
}

@media (width < 760px) {
  .form--inline {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  .form--inline > .btn {
    margin-top: 0;
    justify-self: start;
  }
}

/* Formular, dessen Felder in Zeilen umbrechen (AP 4.2, Admin-Maske): so viele Spalten wie
   Platz ist, jede mindestens 260 px; der Knopf steht darunter am Anfang. `form--inline`
   bricht erst unter 760 px um und lief mit vier Feldern und Knopf aus der Karte. */
.form--wrap {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  align-items: start;
}

.form--wrap > .btn {
  grid-column: 1 / -1;
  justify-self: start;
}

.form__errors {
  display: grid;
  gap: var(--space-2);
}

.field {
  display: grid;
  gap: 6px;
}

.field__label {
  color: var(--text-2);
  font: var(--text-label);
}

.field__required {
  color: var(--accent);
}

/* --text-2 (6,1 : 1), nicht --text-3 (3,25 : 1): Der Hilfetext ist die Anleitung zum Feld und
   damit eine Pflichtinfo – DESIGN 2.2 lässt --text-3 dafür nicht zu, DESIGN 8 verlangt 4,5 : 1
   (AP 1.7, Review; dieselbe Korrektur wie bei der ISIN-Zeile in AP 1.4). */
.field__help {
  color: var(--text-2);
  font-size: 0.75rem;
  line-height: 1rem;
}

.field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--neg-soft);
  font-size: 0.75rem;
  line-height: 1rem;
}

.input,
.field :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: var(--surface-input);
  color: var(--text-1);
  font-size: 0.875rem;
  transition: border-color var(--ease), box-shadow var(--ease);
}

/* Höhe und Innenabstand nur für einzeilige Felder (Ä-40, Nebenbefund): Stand das Textfeld mit in
   dieser Regel (0-2-1), verlor `.field textarea` (0-1-1) alles außer der Mindesthöhe – der Text
   klebte am oberen Rand, `rows` zählte nicht. Für Eingaben und Auswahlfelder ändert sich nichts:
   gleicher Selektor, gleiche Stelle. */
.input,
.field :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select) {
  height: 40px;
  padding: 0 14px;
}

.field textarea {
  min-height: 96px;
  padding: 10px 14px;
  resize: vertical;
}

/* Die Basisregel oben trägt durch `:is(input:not(…), …)` die Spezifität 0-2-1 und setzt mit dem
   Kurzbefehl `background` auch `background-image: none`. `.field select` hat nur 0-1-1 und
   verlor deshalb – jedes Auswahlfeld in einem `.field` sah aus wie ein Textfeld (AP 3.1,
   Review). `:is(select:not([multiple]))` kommt auf dieselbe Spezifität und steht später im
   Stylesheet; damit gewinnt der Pfeil. Eine Mehrfachauswahl hat ohnehin keinen. */
.field :is(select:not([multiple])),
select.input {
  padding-right: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9AA0' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 16px;
}

/* Dateiauswahl (DESIGN 5 „Dateifeld“, ergänzt mit AP 3.1). Der Browser zeichnet hier von sich
   aus einen Knopf und den Text „No file chosen“ – beides in seiner eigenen Sprache und Form.
   Der Knopf bekommt deshalb das Aussehen von `.btn--secondary`, das Feld die Höhe der übrigen. */
.field input[type="file"],
input[type="file"].input {
  padding: 7px 10px;
  line-height: 24px;
}

.field input[type="file"]::file-selector-button,
input[type="file"].input::file-selector-button {
  height: 24px;
  margin-right: var(--space-3);
  padding: 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: var(--surface-pill);
  color: var(--text-1);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.field input[type="file"]::file-selector-button:hover,
input[type="file"].input::file-selector-button:hover {
  background: var(--surface-pill-hover);
}

.input::placeholder,
.field :is(input, textarea)::placeholder {
  color: var(--text-3);
}

.input:hover,
.field :is(input, select, textarea):hover {
  border-color: var(--border-strong);
}

.input:focus,
.field :is(input, select, textarea):focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Gesperrtes Feld (Ä-18: feste Adresse einer älteren Einladung): ohne Fläche, gestrichelt, Text
   gedämpft – sonst sieht es aus wie eines, das sich ausfüllen lässt. Gleiche Spezifität wie die
   Grundregel des Felds, deshalb dahinter. */
.field :is(input, select, textarea):disabled,
.field :is(input, select, textarea):disabled:hover {
  border-color: var(--border);
  border-style: dashed;
  background: transparent;
  color: var(--text-2);
  cursor: not-allowed;
}

.field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: rgba(216, 78, 90, 0.7);
}

/* Ankreuzfeld (DESIGN 5): Kästchen links in der ersten Zeile der Beschriftung (16 px wie deren
   Zeilenhöhe), alles andere – Beschriftung, Fehler, Hilfetext – in der Spalte daneben. So brechen
   lange Beschriftungen um, ohne unter das Kästchen zu laufen, und der Hilfetext steht bündig mit
   der Beschriftung. Vorher stand das Kästchen der Parameterfelder mittig unter der Beschriftung
   und ein Hilfetext neben „Aktiv“ in derselben Zeile (27.09.2026). */
.field--check {
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: start;
}

.field--check > :not(input) {
  grid-column: 2;
}

.field--check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}