/*
 * PixelHobel – gemeinsamer Formular-Standard (.phx-form)
 * Einheitliches Layout (einspaltig, volle Breite, gleiche Feldhöhen), Abstände,
 * Zustände für die Live-Prüfung (grün/rot + Hinweis). Nutzt die Template-Variablen
 * aus ars.css (mit Fallbacks), damit Hell-/Dunkelmodus automatisch mitgeht.
 * Von mehreren Komponenten eingebunden – NICHT komponentenspezifisch erweitern.
 */
.phx-form {
  --phx-accent: #00969b;
  --phx-ok: #287c4b;
  --phx-err: #9b1c31;
  --phx-line: #ff8f1f;
  max-width: 760px;
  margin-inline: auto;
}
.phx-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.phx-form__field { min-width: 0; }
.phx-form__field--wide { grid-column: 1 / -1; }

.phx-form__field > label:not(.phx-form__check) { display: block; margin-bottom: .35rem; font-weight: 750; }

.phx-form__field input:not([type="checkbox"]):not([type="radio"]),
.phx-form__field select,
.phx-form__field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  height: 50px;
  padding: .7rem .8rem;
  border: 1px solid var(--ars-border, #d8dde2);
  border-radius: 2px;
  color: var(--ars-text, #20252b);
  background: var(--ars-bg, #fff);
  font: inherit;
}
.phx-form__field textarea { height: auto; min-height: 10rem; resize: vertical; }
.phx-form__field input[type="file"] { height: auto; min-height: 50px; padding: .55rem .7rem; }
.phx-form__field :is(input, select, textarea):focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
  border-color: var(--ars-text, #20252b);
}

/* Zustände Live-Prüfung */
.phx-form__field.is-valid :is(input, select, textarea) { border: 2px solid var(--phx-ok); }
.phx-form__field.is-invalid :is(input, select, textarea),
.phx-form__field.has-error :is(input, select, textarea) { border: 2px solid var(--phx-err); }
.phx-form__hint { margin: .4rem 0 0; font-size: .9rem; font-weight: 700; line-height: 1.4; }
.phx-form__hint:empty { display: none; }
.phx-form__field.is-invalid .phx-form__hint { color: var(--phx-err); }
.phx-form__field.is-valid .phx-form__hint { color: var(--phx-ok); }

/* Checkbox-Zeile */
.phx-form__check { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border-radius: 3px; background: var(--ars-form-soft, #eef6f5); }
.phx-form__check input { width: 1.35rem; height: 1.35rem; margin-top: .1rem; flex: 0 0 auto; }
.phx-form__field.is-invalid .phx-form__check, .phx-form__field.has-error .phx-form__check { box-shadow: inset 0 0 0 2px var(--phx-err); }
.phx-form__field.is-valid .phx-form__check { box-shadow: inset 0 0 0 2px var(--phx-ok); }

.phx-form__desc { margin: .4rem 0 0; color: var(--ars-text-soft, #5a6570); font-size: .88rem; line-height: 1.45; }
.phx-form__required { margin-top: 1.2rem; color: var(--ars-text-soft, #5a6570); font-size: .9rem; }

/* Aktionsbutton (optional, wenn Komponente die Klasse nutzt) */
.phx-form__submit {
  min-height: 50px; padding: .75rem 1.2rem; border: 2px solid var(--ars-form-action, #941430);
  border-radius: 2px; color: #fff; background: var(--ars-form-action, #941430);
  font: inherit; font-weight: 800; cursor: pointer;
}
.phx-form__submit:hover { background: #6f0e23; border-color: #6f0e23; }
.phx-form__submit:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phx-form__field.is-valid :is(input, select, textarea) { border-color: #4fb055; }
  :root:not([data-theme="light"]) .phx-form__field.is-valid .phx-form__hint { color: #7fd493; }
  :root:not([data-theme="light"]) .phx-form__field.is-invalid .phx-form__hint { color: #f0949c; }
}
:root[data-theme="dark"] .phx-form__field.is-valid :is(input, select, textarea) { border-color: #4fb055; }
:root[data-theme="dark"] .phx-form__field.is-valid .phx-form__hint { color: #7fd493; }
:root[data-theme="dark"] .phx-form__field.is-invalid .phx-form__hint { color: #f0949c; }