/* Eigene Felder (Erfassungsformulare Paket A, 29.9.2026) — Baustein js/zusatzfelder.js.
   Nur Tokens der Wirtsseite; die Masken bringen .field/.f-input mit, der Dialog der Personalakte bekommt sie hier.
   Der Schleier trägt .modal-overlay (Hausmuster); .zf-overlay schaltet Anzeige und Ebene selbst, weil die Seiten
   .modal-overlay unterschiedlich schalten (.show auf mitarbeitende, .hidden auf den Masken und in sidebar.css). */
.zf-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4, 16px);
}
.zf-raster > .zf-breit {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .zf-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}
.zf-feld {
  min-width: 0;
}
fieldset.zf-feld {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
fieldset.zf-feld > legend {
  padding: 0;
}
.zf-feld .field-error:not([hidden]) {
  display: block;
}
.zf-sicht {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--r-full, 9999px);
  background: var(--bg-inset, var(--bg-warm));
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: 1px;
  white-space: nowrap;
}

.modal-overlay.zf-overlay {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s4, 16px);
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
:root[data-theme='dark'] .modal-overlay.zf-overlay {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
.modal-overlay.zf-overlay.open {
  display: flex;
}
body.zf-offen {
  overflow: hidden;
}
.modal-content.zf-dialog {
  width: min(640px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  box-shadow: var(--sh-xl);
  padding: var(--s6, 24px);
}
.zf-dialog-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3, 12px);
}
.zf-dialog-titel {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.zf-dialog-zu {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: -6px -8px 0 0;
  border: 0;
  border-radius: var(--r-sm, 10px);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.zf-dialog-zu:hover {
  background: var(--bg-hover);
  color: var(--ink);
}
.zf-dialog-zu:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.zf-dialog-text {
  font-size: 14px;
  color: var(--ink-3);
  margin: 4px 0 var(--s5, 20px);
}
.zf-dialog-fehler {
  color: var(--coral-text, var(--coral));
  font-size: 14px;
  margin: var(--s3, 12px) 0 0;
}
.zf-dialog-fuss {
  display: flex;
  justify-content: flex-end;
  gap: var(--s2, 8px);
  margin-top: var(--s5, 20px);
}
.zf-laden,
.zf-leer {
  color: var(--ink-3);
  font-size: 14px;
  margin: 0;
}
.zf-leer a {
  color: var(--gold-schrift, var(--gold-text, var(--gold)));
  font-weight: 600;
}
.zf-dialog .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zf-dialog .field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.zf-dialog .f-input,
.zf-dialog .f-select,
.zf-dialog .f-textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--rand-feld, var(--border));
  border-radius: var(--r-sm, 10px);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}
.zf-dialog .f-textarea {
  resize: vertical;
}
.zf-dialog .f-input:focus,
.zf-dialog .f-select:focus,
.zf-dialog .f-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.zf-dialog .field-hint {
  font-size: 12px;
  color: var(--ink-3);
}
.zf-dialog .field-error {
  font-size: 12px;
  color: var(--coral-text, var(--coral));
}
.zf-dialog .f-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
}
.zf-dialog .f-check-label input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--gold);
}
.zf-dialog .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.zf-dialog .has-error .f-input,
.zf-dialog .has-error .f-select,
.zf-dialog .has-error .f-textarea {
  border-color: var(--coral);
}
@media (max-width: 640px) {
  .modal-overlay.zf-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-content.zf-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: var(--r-md, 14px) var(--r-md, 14px) 0 0;
    padding: var(--s5, 20px) var(--s4, 16px) calc(var(--s4, 16px) + env(safe-area-inset-bottom));
  }
  .zf-dialog-fuss .btn {
    flex: 1;
    min-height: 44px;
  }
}

/* Paket D: Mehrfachauswahl — Kästchen untereinander, 44 px Trefferfläche */
.zf-kaesten {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.zf-kaesten .f-check-label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
.zf-kaesten input[type='checkbox'] {
  width: 20px;
  height: 20px;
  accent-color: var(--gold);
}

/* Paket D: Gruppe am Ende eines Abschnitts der Maske, Pflichtstern, schreibgeschützt, sanftes Ein-/Ausblenden */
.zf-gruppe {
  margin-top: var(--s5, 20px);
  padding-top: var(--s5, 20px);
  border-top: 1px dashed var(--border);
}
.zf-gruppe:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.zf-gruppe[hidden],
.zf-feld[hidden] {
  display: none !important; /* .field und .zf-raster setzen display und schlügen sonst das hidden-Attribut */
}
.zf-pflicht {
  color: var(--coral-text, var(--red));
  font-size: 12px;
}
.zf-feld [disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}
/* UX-08 Abnahme Paket D: gesperrtes Feld sagt, wer es ausfüllt — statt einer stummen, grauen Eingabe */
.zf-wer:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--ink-leise, var(--ink-2));
  font-size: 13px;
  line-height: 1.4;
}
.zf-wer svg {
  flex: none;
}
.zf-feld.zf-animiert {
  overflow: hidden;
  transition:
    height 0.22s ease,
    opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .zf-feld.zf-animiert {
    transition: none;
  }
}

/* Paket D Task 9: Datei-Feld — Stand (Name oder Link auf das Dokument der Personalakte) über der Dateiauswahl */
.zf-datei-stand {
  font-size: 14px;
  color: var(--ink-2, var(--ink));
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.zf-datei-leer,
.zf-datei-verborgen {
  color: var(--ink-leise, var(--ink-2));
}
.zf-datei-link {
  color: var(--gold-schrift, var(--ink));
  text-decoration: underline;
}
.zf-datei input[type='file'] {
  min-height: 44px;
  font-size: 16px;
  max-width: 100%;
}
/* UX-13: die Dateiauswahl im Dialog der Personalakte und in den Masken wie ein Knopf der Seite, nicht im Browserstil */
.zf-datei input[type='file']::file-selector-button {
  min-height: 44px;
  margin-right: 12px;
  padding: 0 16px;
  border: 1px solid var(--rand-feld, var(--border));
  border-radius: var(--r-md, 8px);
  background: var(--bg-card, var(--bg));
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.zf-datei input[type='file']:not([disabled])::file-selector-button:hover {
  border-color: var(--gold-schrift, var(--ink-2));
}

/* Datei entfernen (Paket D): Knopf neben dem Dateinamen, Bestätigung als eigene Hülle im Felddialog */
.zf-datei .zf-datei-entfernen {
  min-height: 44px;
  margin: 0 0 8px;
  color: var(--coral-text, var(--ink));
}
.zf-datei-entfernt {
  color: var(--ink-2, var(--ink));
}
.zf-frage-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}
:root[data-theme='dark'] .zf-frage-overlay {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
.zf-frage {
  width: min(440px, 100%);
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 14px);
  box-shadow: var(--sh-xl);
  padding: var(--s6, 24px);
}
.zf-frage-titel {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}
.zf-frage-text {
  font-size: 15px;
  color: var(--ink-2, var(--ink));
  margin: 0;
  overflow-wrap: anywhere;
}
.zf-frage .btn {
  min-height: 44px;
}
.zf-frage .btn-danger {
  background: var(--coral-text, #b3261e);
  border-color: var(--coral-text, #b3261e);
  color: var(--bg-card);
}
:root[data-theme='dark'] .zf-frage .btn-danger {
  background: var(--coral, #e5675c);
  border-color: var(--coral, #e5675c);
  color: var(--bg);
}
@media (max-width: 420px) {
  .zf-frage .zf-dialog-fuss {
    flex-direction: column-reverse;
  }
  .zf-frage .zf-dialog-fuss .btn {
    width: 100%;
  }
}