/* Baustein feld: Feld und Folgeeingabe (Bedienkonzept, Pilot Maschinen,
   Bauplan 1.3). Besitzer: WP9. Die Grundvorlage bindet die Datei nach dem
   globalen Stylesheet ein. Nur Regeln fuer eigene, neue Klassen; Farben
   als Token mit Rueckfall; eine Regel fuer die Telefonbreite (560px).
   Benutzt, aber nicht umdefiniert: label, input, select, textarea,
   .ankreuz, .feld-hinweis, .hilfe, .knopf-schlicht (vorabsafe.css).
   Rot heisst hier "Fehler am Feld"; der Stern ist Navy, nicht Rot und
   nicht Gold (eine Ampel, eine Bedeutung). */

/* Ein Feld: Beschriftung, Eingabe, Fehler, Hinweis. Ein Sprung aus dem
   Kopf "n Angaben fehlen" landet unter der festen Kopfzeile. */
.feldblock {
  min-width: 0;
  scroll-margin-top: calc(var(--kopf-hoehe, 64px) + 16px);
}
/* Haken: Kaestchen und Wort stehen in einer Zeile (.ankreuz); der
   Block haelt nur Fehler und Hinweis darunter zusammen. */
.feldblock-haken { min-width: 0; }

/* Pflicht: ein Stern hinter der Beschriftung. Der bedingte Stern wird
   von feld.js ein- und ausgeblendet. */
.feld-stern, .feld-stern-bedingt {
  color: var(--navy-mid, #305186);
  font-weight: 700;
  margin-left: 3px;
}
.feld-stern[hidden], .feld-stern-bedingt[hidden] { display: none; }

/* Fehler am Feld: roter Rand und der Satz rot darunter. */
.feldblock-fehler input:not([type="checkbox"]):not([type="radio"]),
.feldblock-fehler select,
.feldblock-fehler textarea {
  border-color: var(--rot, #b3261e);
}
.feldblock-fehler input:focus,
.feldblock-fehler select:focus,
.feldblock-fehler textarea:focus {
  border-color: var(--rot, #b3261e);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}
.feldblock-fehler input[type="checkbox"] {
  outline: 2px solid var(--rot, #b3261e);
  outline-offset: 2px;
}
.feld-fehler {
  color: var(--rot, #b3261e);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 6px 0 0;
}
/* In einer Feldreihe (unten buendig) zog ein Feld mit Fehlersatz sein
   Eingabefeld nach oben; oben buendig stehen die Felder wieder auf einer
   Linie (dieselbe Ausnahme wie fuer .feld-hinweis in vorabsafe.css). */
.feld-reihe:has(> .feldblock > .feld-fehler) { align-items: flex-start; }

/* Saetze ohne Feld oben in einer Folgeeingabe. */
.feld-fehler-liste {
  margin: 0 0 12px;
  padding: 8px 12px 8px 28px;
  color: var(--rot, #b3261e);
  background: #fdecec;
  border-radius: 6px;
  font-size: 0.9rem;
}
.feld-fehler-liste:focus { outline: 2px solid var(--rot, #b3261e); }

/* Feldgruppe; "eines davon" traegt den Stern an der Gruppe. */
.feldgruppe {
  border: 0;
  margin: 14px 0 0;
  padding: 0;
  min-width: 0;
  scroll-margin-top: calc(var(--kopf-hoehe, 64px) + 16px);
}
.feldgruppe-titel {
  padding: 0;
  margin: 0 0 2px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text, #1c2733);
}
.feldgruppe-eines {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted, #5f7183);
}
.feldgruppe-fehler {
  border-left: 3px solid var(--rot, #b3261e);
  padding-left: 12px;
}

/* Gliederung eines laengeren Formulars (Was? Wo? Wer? ...). */
.formular-abschnitt {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border, #e2e7ee);
  scroll-margin-top: calc(var(--kopf-hoehe, 64px) + 16px);
}
.formular-abschnitt:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.formular-abschnitt-titel {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--navy, #1F4570);
}

/* Oben im Formular: "n Angaben fehlen" mit Spruengen. */
.luecken-kopf {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: #fdecec;
  border-left: 4px solid var(--rot, #b3261e);
  border-radius: 6px;
  scroll-margin-top: calc(var(--kopf-hoehe, 64px) + 16px);
}
.luecken-kopf:focus { outline: 2px solid var(--rot, #b3261e); }
.luecken-kopf-titel {
  margin: 0 0 4px;
  font-weight: 700;
  color: #8a1c15;
}
.luecken-kopf-liste { margin: 0; padding-left: 20px; }
.luecken-kopf-liste a { color: #8a1c15; }

/* Abhaengiger Teil: ohne Skript sichtbar, feld.js setzt hidden. */
.abhaengig { min-width: 0; }
.abhaengig[hidden] { display: none; }

/* Folgeeingabe: der aufgeklappte Teil an der Akte. Getoent und
   abgesetzt, damit man sieht, wo Lesen aufhoert und Eingeben anfaengt;
   kein Gold (das heisst "wird faellig"). */
.folgeeingabe {
  margin: 10px 0 16px;
  padding: 14px 16px;
  background: var(--grau-hell, #f4f6f9);
  border: 1px solid var(--border, #e2e7ee);
  border-left: 4px solid var(--navy-mid, #305186);
  border-radius: 8px;
  scroll-margin-top: calc(var(--kopf-hoehe, 64px) + 16px);
}
.folgeeingabe[hidden] { display: none; }
.folgeeingabe-titel {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--navy, #1F4570);
}
.folgeeingabe-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

/* Telefon: Knoepfe untereinander ueber die volle Breite, weniger Rand. */
@media (max-width: 560px) {
  .folgeeingabe { padding: 12px; margin-left: -4px; margin-right: -4px; }
  .folgeeingabe-knoepfe { flex-direction: column; align-items: stretch; }
  .folgeeingabe-knoepfe .knopf-schlicht { justify-content: center; }
  .luecken-kopf { padding: 10px 12px; }
}