/* ════════════════════════════════════════════════════════════════════════════════
   DAS EINE ERFASSUNGS-BAUTEIL (§3.6) — Namespace `.vie-`

   Ausschließlich Tokens, kein Hexwert, keine eigene Feldoptik: Höhe, Rahmen und
   Fokusring der Felder gehören `.form-input`/`.form-select` aus der Tokenschicht.
   Hier steht nur, wie die Felder ANGEORDNET sind.
   ════════════════════════════════════════════════════════════════════════════════ */

.vie { display: flex; flex-direction: column; gap: var(--space-2); }

/* Mehrere kurze Felder in einer Zeile — sie brechen von selbst um, es gibt
   keinen Breakpoint dafür: maßgeblich ist die Breite des Dialogs, nicht die des
   Fensters. */
.vie-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
}
.vie-row > .form-group { margin: 0; min-width: 0; }

/* Der Hinweis zur Objektpflicht steht AM Feld, nicht in einem Banner über der
   Maske: er gilt für dieses eine Feld. */
.vie-hint {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--gray-500);
  line-height: 1.4;
}

/* Melder: zwei ausdrückliche Möglichkeiten statt drei leerer Freitextfelder. */
.vie-melder {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin: 0;
}
.vie-melder > legend {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gray-500);
  padding: 0 6px;
}
.vie-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: var(--space-3);
  font-size: var(--text-md);
  cursor: pointer;
}
.vie-melder .vie-row { margin-top: var(--space-2); }

/* Freitext-Melder ist die AUSNAHME und muss aufgeklappt werden — der Registerweg
   steht darüber. `<details>` ist hier richtig: es ist kein Akkordeon über einer
   Akte, sondern ein ausdrücklich zu wählender Sonderweg in EINEM Feld. */
.vie-frei > summary {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--gray-500);
  padding: 4px 0;
}
.vie-frei[open] > summary { margin-bottom: 4px; }

/* Mobile Lesart: dieselben Felder, untereinander, volle Breite. Keine zweite
   Feldliste — nur eine andere Anordnung. */
.vie-k .vie-row { grid-template-columns: 1fr; }
.vie-k .vie-radio { display: flex; margin: 0 0 6px 0; min-height: var(--control-h-lg); }

/* ── DUBLETTENHINWEIS (Abnahmekriterium 12) ───────────────────────────────────
   Bernstein, nicht rot: es ist ein Hinweis auf etwas, das zu prüfen ist, kein
   Fehler (Designregel „eine Warnung darf nie aussehen wie ein Fehler"). Er sitzt
   direkt unter dem Betreff — dort, wo der Nutzer gerade hinsieht — und schiebt
   die Maske nicht auseinander, wenn es nichts zu sagen gibt (`hidden`). */
.vie-dub {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning-border, var(--gray-300));
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--color-warning-soft, var(--gray-50));
  font-size: var(--text-sm);
}
.vie-dub-head { font-weight: 600; color: var(--color-warning-ink); margin-bottom: 4px; }
.vie-dub-row { display: flex; gap: var(--space-2); align-items: baseline; min-width: 0; padding: 2px 0; }
.vie-dub-nr { font-weight: 600; flex: 0 0 auto; }
.vie-dub-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vie-dub-m { flex: 0 0 auto; color: var(--gray-500); font-size: var(--text-xs); }
.vie-dub-foot { margin-top: 4px; color: var(--gray-500); font-size: var(--text-xs); }

/* Mobil untereinander: drei Angaben nebeneinander sind auf 360 px keine Zeile. */
@media (max-width: 767px) {
  .vie-dub-row { flex-direction: column; gap: 0; }
  .vie-dub-t { white-space: normal; }
}