/*
 * Lumen Layout - Formulare & Grid
 * Stylt die in den Templates verwendeten Bootstrap-3-Klassennamen ohne Bootstrap
 * und ohne Template-Eingriff:
 *
 * - Eingabefelder/Labels/Input-Gruppen (.form-control, .control-label, .input-group)
 *   inkl. Pflichtfeld-/Fehler-Zuständen (form_mandatory, form_error)
 * - Minimaler 12-Spalten-Grid-Ersatz (.row, .col-*) für Dialoge und Seitenlayouts
 * - Feld-Layout der WSS-Formulare (.validate_form, z. B. Kursvorschlag,
 *   Persönliche Daten): dort liegen die col-* direkt in .form-group (ohne .row)
 *   und werden BEWUSST gestapelt (Label über Feld, wie im Prototyp). Die
 *   Spaltenbreiten gelten deshalb nur für col-* innerhalb von .row.
 */

/* ---------- Grid ---------- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}

.row.nomargin {
  margin: 0;
}

/* Spalten ausserhalb von .row (WSS-Formulare) bleiben gestapelte Bloecke */
[class^="col-"],
[class*=" col-"] {
  width: 100%;
  min-width: 0;
}

.row > [class^="col-"],
.row > [class*=" col-"] {
  padding: 0 8px;
}

/* Spaltenbreiten wie Bootstrap 3: xs immer, sm >= 768px, md >= 992px, lg >= 1200px.
   Größere Breakpoints überschreiben kleinere (Reihenfolge!). */
.row > .col-xs-1 { width: 8.3333%; }
.row > .col-xs-2 { width: 16.6667%; }
.row > .col-xs-3 { width: 25%; }
.row > .col-xs-4 { width: 33.3333%; }
.row > .col-xs-5 { width: 41.6667%; }
.row > .col-xs-6 { width: 50%; }
.row > .col-xs-7 { width: 58.3333%; }
.row > .col-xs-8 { width: 66.6667%; }
.row > .col-xs-9 { width: 75%; }
.row > .col-xs-10 { width: 83.3333%; }
.row > .col-xs-11 { width: 91.6667%; }
.row > .col-xs-12 { width: 100%; }

@media (min-width: 48em) {
  /* Nur die tatsächlich in den Templates verwendeten Offsets */
  .row > .col-sm-offset-2 { margin-left: 16.6667%; }
  .row > .col-sm-offset-3 { margin-left: 25%; }

  .row > .col-sm-1 { width: 8.3333%; }
  .row > .col-sm-2 { width: 16.6667%; }
  .row > .col-sm-3 { width: 25%; }
  .row > .col-sm-4 { width: 33.3333%; }
  .row > .col-sm-5 { width: 41.6667%; }
  .row > .col-sm-6 { width: 50%; }
  .row > .col-sm-7 { width: 58.3333%; }
  .row > .col-sm-8 { width: 66.6667%; }
  .row > .col-sm-9 { width: 75%; }
  .row > .col-sm-10 { width: 83.3333%; }
  .row > .col-sm-11 { width: 91.6667%; }
  .row > .col-sm-12 { width: 100%; }
}

@media (min-width: 62em) {
  .row > .col-md-offset-1 { margin-left: 8.3333%; }
  .row > .col-md-offset-2 { margin-left: 16.6667%; }

  .row > .col-md-1 { width: 8.3333%; }
  .row > .col-md-2 { width: 16.6667%; }
  .row > .col-md-3 { width: 25%; }
  .row > .col-md-4 { width: 33.3333%; }
  .row > .col-md-5 { width: 41.6667%; }
  .row > .col-md-6 { width: 50%; }
  .row > .col-md-7 { width: 58.3333%; }
  .row > .col-md-8 { width: 66.6667%; }
  .row > .col-md-9 { width: 75%; }
  .row > .col-md-10 { width: 83.3333%; }
  .row > .col-md-11 { width: 91.6667%; }
  .row > .col-md-12 { width: 100%; }
}

@media (min-width: 75em) {
  .row > .col-lg-1 { width: 8.3333%; }
  .row > .col-lg-2 { width: 16.6667%; }
  .row > .col-lg-3 { width: 25%; }
  .row > .col-lg-4 { width: 33.3333%; }
  .row > .col-lg-5 { width: 41.6667%; }
  .row > .col-lg-6 { width: 50%; }
  .row > .col-lg-7 { width: 58.3333%; }
  .row > .col-lg-8 { width: 66.6667%; }
  .row > .col-lg-9 { width: 75%; }
  .row > .col-lg-10 { width: 83.3333%; }
  .row > .col-lg-11 { width: 91.6667%; }
  .row > .col-lg-12 { width: 100%; }
}

/* ---------- Formular-Gruppen ---------- */
.form-group,
.formular,
.formular_zeile {
  margin: 0 0 14px;
}

/* ---------- Beschriftungen ---------- */
.control-label,
.label-like {
  display: inline-block;
  max-width: 100%;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--ink);
}

/* In horizontalen Zeilen (Label-Spalte neben Feld-Spalte) auf die
   Eingabefeld-Höhe ausrichten */
.row > [class*="col-"] > .control-label {
  padding-top: 7px;
}

legend.label-like {
  font-size: 1em;
  border: none;
}

/* ---------- Eingabefelder, Auswahllisten, Textbereiche ---------- */
.form-control {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.84375rem;
  line-height: 1.4;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.form-control:hover {
  border-color: var(--ink-2);
}

.form-control:focus {
  outline: none;
  border-color: var(--teal-d);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

.form-control::placeholder {
  color: var(--ink-3);
}

/* Nicht bearbeitbare / schreibgeschützte Felder */
.form-control[readonly],
.form-control:disabled,
.form-control.disabled,
.form_nichtbearbeitbar {
  background: var(--bg);
  color: var(--ink-2);
  cursor: default;
}

/* Auswahllisten: eigener Pfeil, da Bootstrap entfällt. Der Pfeil liegt als
   Custom Property vor, damit Regeln mit mehreren background-image-Ebenen
   (Anwesenheitsstatus-Farbpunkt, s. u.) ihn ohne URL-Kopie mitführen können. */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7780' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Mehrzeilige Auswahllisten (multiple bzw. size > 1, z. B. die Fach-/Dozenten-/
   Teilnehmerauswahl im Verhaltenslisten-Dialog) sind keine Dropdowns – daher
   ohne Aufklapp-Pfeil und mit normalem Innenabstand sowie etwas Luft je Eintrag.
   Einheitliche, kompakte Höhe (ca. 4 Zeilen) statt der oft viel zu hohen, am
   size-Attribut hängenden Standardhöhe; längere Listen scrollen. */
select[multiple].form-control,
select[size]:not([size="1"]).form-control {
  height: 7.25rem;
  padding-right: 12px;
  background-image: none;
}

select[multiple].form-control option,
select[size]:not([size="1"]).form-control option {
  padding: 5px 8px;
  border-radius: var(--radius-sm);
}

/* Markierte Einträge im Lumen-Teal statt im grauen Browser-Standard. Dunkler
   Hintergrund mit weißer Schrift: Im fokussierten Listenfeld erzwingt der Browser
   bei markierten Einträgen ohnehin weiße Schrift – auf hellem Grund wäre die dann
   unlesbar; auf dunklem Teal ist sie in beiden Zuständen gut lesbar. Der
   linear-gradient-"Trick" ist nötig, weil Chrome eine schlichte background-color
   auf option:checked ignoriert. */
select[multiple].form-control option:checked,
select[size]:not([size="1"]).form-control option:checked {
  background: var(--teal-d) linear-gradient(0deg, var(--teal-d), var(--teal-d));
  color: #fff;
  font-weight: 600;
}

/* drucklisten.css (klassisches Layout) richtet die Fach-Optionen als 70%-Inline-Blöcke
   für den alten 2-Spalten-optgroup-Workaround aus. Im Lumen liefert pdfdruck.js
   einzeilige Optionen ("Fach - Pflichtfach") - daher wieder normale Zeilen in voller
   Breite wie in den übrigen Auswahllisten des Verhaltenslisten-Dialogs. */
select[multiple].form-control option.fachoption,
select[size]:not([size="1"]).form-control option.fachoption {
  display: block;
  width: auto;
  margin-left: 0;
}

/* Touch (v. a. iOS): Mehrfach-Auswahllisten rendern als natives Control, das ein
   System-Overlay öffnet - die feste Desktop-Höhe ließe nur einen weitgehend leeren,
   hohen Kasten stehen. Daher dort die natürliche (kompakte) Höhe des Controls. */
@media (pointer: coarse) {
  select[multiple].form-control,
  select[size]:not([size="1"]).form-control {
    height: auto;
  }

  /* iOS Safari zoomt beim Fokussieren von Eingabefeldern mit weniger als 16px
     Schriftgröße automatisch heran (und nicht zuverlässig zurück). Auf
     Touch-Geräten daher effektive 16px für alle Formular-Eingaben (SAF-01). */
  input.form-control,
  select.form-control,
  textarea.form-control {
    font-size: 1rem;
  }
}

textarea.form-control {
  min-height: 96px;
  resize: vertical;
}

/* Firefox ignoriert saemtliche Options-Farben in der nativen Aufklappliste, sobald
   das Select selbst ein background-image traegt (toolkit/actors/SelectChild.sys.mjs,
   _allowCustomStyling) - der Lumen-Chevron-Pfeil (s. o.) ist so ein background-image.
   Fuer die Status-Selects in Firefox daher: eigenen Pfeil weglassen und den nativen
   Pfeil zeigen, damit die Statusfarben der Optionen (background-color aus
   KuferTools.getAnwOptionStyle) in der Liste wirken. @supports (-moz-appearance)
   matcht nur Firefox; Chrome/Edge behalten Chevron + base-select-Rahmen. */
@supports (-moz-appearance: none) {
  select.anw_status_select,
  select.anw_extra_status_select,
  select.anw_status_alle_setzen_select,
  select.dialog_anw_select {
    appearance: auto;
    background-image: none;
    padding-right: 12px;
  }
}

/* ===== Anwesenheitsstatus: gewählter Status als getönte Fläche mit Farbbalken =====
   Der 2px-Rahmen (colorAnwSelect im jeweiligen JS) allein ist aus dem Augenwinkel
   kaum zu erkennen, ähnliche Statusfarben erfordern Lesen. Daher zusätzlich eine
   getönte Füllung in der Statusfarbe (12 % auf Kartengrund - die dunkle Schrift
   bleibt bei beliebigen BASys-Farben lesbar) und ein satter Farbbalken am linken
   Rand als konstanter Farbanker - dieselbe Bildsprache wie die Status-Legende der
   Anwesenheiten-Übersicht (anwesenheiten_uebersicht.css). Farbe kommt gedeckelt
   als --anw-status-farbe über KuferTools.setAnwSelectStatusFarbe (project.js).
   Wirkt in allen Browsern; ohne color-mix (Safari < 16.2) bleiben Balken + Rahmen. */
select.anw_status_select.anw-status-gewaehlt,
select.anw_extra_status_select.anw-status-gewaehlt,
select.anw_status_alle_setzen_select.anw-status-gewaehlt,
select.dialog_anw_select.anw-status-gewaehlt {
  background-color: color-mix(in srgb, var(--anw-status-farbe) 12%, var(--card));
  background-image:
    linear-gradient(to right, var(--anw-status-farbe) 0 22px, transparent 22px),
    var(--select-chevron);
  padding-left: 32px;
  font-weight: 600;
}

/* Firefox zeigt für die Status-Selects den nativen Pfeil (s. o.) - dort nur der
   Farbbalken, ohne Chevron-Ebene. Steht nach der allgemeinen Regel, damit er bei
   gleicher Spezifität gewinnt. */
@supports (-moz-appearance: none) {
  select.anw_status_select.anw-status-gewaehlt,
  select.anw_extra_status_select.anw-status-gewaehlt,
  select.anw_status_alle_setzen_select.anw-status-gewaehlt,
  select.dialog_anw_select.anw-status-gewaehlt {
    background-image: linear-gradient(to right, var(--anw-status-farbe) 0 22px, transparent 22px);
  }
}

/* ===== Anwesenheitsstatus-Aufklapplisten: Optionen in ihrer Statusfarbe =====
   Fuer die Status-Selects im Klassenbuch (.anw_status_select, "Alle setzen auf",
   doz_anwesenheitseingabe.js) und im Bearbeiten-Dialog der Anwesenheiten-Uebersicht
   zum Kurs (.dialog_anw_select, anwesenheitenFuerKurs.js).
   Nur in Browsern mit anpassbarem Select (appearance: base-select, Chrome/Edge):
   Dort rendert die Seite die Aufklappliste selbst, sodass jede Option - wie das
   Select beim jeweils gewaehlten Status (s. o.) - Rahmen, getoente Fuellung und
   Farbpunkt in ihrer Statusfarbe tragen kann (--anw-status-farbe je Option, gesetzt
   im jeweiligen JS via KuferTools.getAnwOptionStyle). Firefox faerbt stattdessen
   die Options-Hintergruende in der nativen Liste (ebenfalls getAnwOptionStyle),
   Safari zeigt die native Liste ohne Farbsignal. */
@supports selector(::picker(select)) {
  select.anw_status_select,
  select.anw_extra_status_select,
  select.anw_status_alle_setzen_select,
  select.dialog_anw_select {
    appearance: base-select;
  }

  /* Der eigene SVG-Pfeil (s. o.) bleibt - den zusaetzlichen Standard-Pfeil
     des anpassbaren Selects ausblenden. */
  select.anw_status_select::picker-icon,
  select.anw_extra_status_select::picker-icon,
  select.anw_status_alle_setzen_select::picker-icon,
  select.dialog_anw_select::picker-icon {
    display: none;
  }

  select.anw_status_select::picker(select),
  select.anw_extra_status_select::picker(select),
  select.anw_status_alle_setzen_select::picker(select),
  select.dialog_anw_select::picker(select) {
    appearance: base-select;
    margin-top: 4px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--card);
    box-shadow: 0 8px 24px rgba(16, 40, 44, 0.14);
  }

  select.anw_status_select option,
  select.anw_extra_status_select option,
  select.anw_status_alle_setzen_select option,
  select.dialog_anw_select option {
    /* Nicht die --anw-status-farbe des Selects (gewaehlter Status) erben -
       sonst faerbt sie die Platzhalter-Option mit. "initial" macht die Property
       ungueltig, sodass die var()-Fallbacks greifen; Optionen mit eigener
       Statusfarbe ueberschreiben das per Inline-Style (getAnwOptionStyle). */
    --anw-status-farbe: initial;
    padding: 5px 10px 5px 28px;
    border: 2px solid var(--anw-status-farbe, transparent);
    border-radius: var(--radius-sm);
    /* Toenung + Farbbalken wie beim gewaehlten Status im Select selbst; die
       Platzhalter-Option hat keine Statusfarbe (Fallback transparent) und
       bleibt damit ungefaerbt, nur gleich eingerueckt. */
    background-color: color-mix(in srgb, var(--anw-status-farbe, transparent) 12%, var(--card));
    background-image: linear-gradient(to right, var(--anw-status-farbe, transparent) 0 18px, transparent 18px);
    background-repeat: no-repeat;
  }

  select.anw_status_select option + option,
  select.anw_extra_status_select option + option,
  select.anw_status_alle_setzen_select option + option,
  select.dialog_anw_select option + option {
    margin-top: 4px;
  }

  /* Hover/Fokus: kraeftigere Toenung in der Statusfarbe (nur background-color,
     damit der Farbpunkt stehen bleibt); die farblose Platzhalter-Option
     bekommt ersatzweise das uebliche Teal. */
  select.anw_status_select option:hover,
  select.anw_status_select option:focus,
  select.anw_extra_status_select option:hover,
  select.anw_extra_status_select option:focus,
  select.anw_status_alle_setzen_select option:hover,
  select.anw_status_alle_setzen_select option:focus,
  select.dialog_anw_select option:hover,
  select.dialog_anw_select option:focus {
    background-color: color-mix(in srgb, var(--anw-status-farbe, var(--teal-d)) 24%, var(--card));
  }

  select.anw_status_select option:checked,
  select.anw_extra_status_select option:checked,
  select.anw_status_alle_setzen_select option:checked,
  select.dialog_anw_select option:checked {
    font-weight: 600;
  }
}

/* Checkboxen/Radios sollen nicht über die volle Breite gehen */
.form-control.formular_checkbox,
input[type="checkbox"].form-control,
input[type="radio"].form-control {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  box-shadow: none;
  accent-color: var(--teal);
  cursor: pointer;
}

/*
 * Pflichtfelder (form_mandatory; nicht_leer ist ein Synonym dafür) und fehlerhafte
 * Eingaben (form_error).
 * Gilt für Eingaben, Auswahllisten, Textbereiche und Checkboxen/Radios.
 * Drei klar unterscheidbare Farben: Amber = Pflicht, Rot = Fehler, Teal = Fokus.
 */

/* Pflichtfeld: Akzent am linken Rand. Bewusst als border (nicht box-shadow), damit er
   unabhängig vom Fokus-Ring (box-shadow) ist und bei Fokus/leerem Feld sichtbar bleibt. */
.form-control.form_mandatory,
.form-control.nicht_leer {
  border-left: 3px solid var(--amber);
}

/* Fehlerhafte Eingabe: roter Rahmen + leicht roter Hintergrund */
.form-control.form_error {
  border-color: var(--red);
  background: var(--red-bg);
}

.form-control.form_error:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-bg);
}

/* Pflichtfeld-Stern am Label (project.js KennzeichnePflichtfelder): nicht-farbliches
   Merkmal zusaetzlich zum Amber-Akzent (WCAG 1.4.1) */
.pflicht-stern {
  color: var(--amber-d);
  font-weight: 700;
}

/* Checkboxen/Radios: Akzent als Ring (box-shadow), damit der Fokus-Outline sichtbar bleibt */
.form-control.formular_checkbox.form_mandatory,
.form-control.formular_checkbox.nicht_leer,
input[type="checkbox"].form_mandatory,
input[type="checkbox"].nicht_leer,
input[type="radio"].form_mandatory,
input[type="radio"].nicht_leer {
  box-shadow: 0 0 0 2px var(--amber);
}

.form-control.formular_checkbox.form_error,
input[type="checkbox"].form_error,
input[type="radio"].form_error {
  box-shadow: 0 0 0 2px var(--red);
}

/* ---------- Checkboxen / Radios (Bootstrap-Wrapper, z. B. Filter-Dialoge) ---------- */
.checkbox,
.radio {
  display: block;
  margin: 0 0 8px;
}

.checkbox label,
.radio label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
}

/* Inline-Varianten (z. B. Wochentage- und Suchkriterien-Auswahl in den
   Filter-Formularen): Checkbox/Radio und Beschriftung in einer Zeile, mit
   Abstand zwischen den einzelnen Optionen. */
.checkbox-inline,
.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 8px 0;
  font-weight: 400;
  cursor: pointer;
}

.checkbox-inline input[type="checkbox"],
.radio-inline input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
}

/* Option-Labels mit Radio/Checkbox + Text in einer Zeile (z. B. Dokument-Upload-
   Optionen und Einstellungen auf Detailseiten). .thinLabel-Listen werden per <br>
   gestapelt; daher hier ohne Außenabstand, damit kontextspezifische Regeln
   (z. B. anwesenheit.css) unberührt bleiben. */
.thinLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  cursor: pointer;
}

.thinLabel input[type="checkbox"],
.thinLabel input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
}

/* Touch-Bedienung: die 18px-Checkboxen/Radios (u. a. Wochentage und Suchkriterien
   im Kursfilter) auf die WCAG-Mindest-Treffergröße von 24px (WCAG 2.5.8) anheben;
   auf Zeigegeräten bleiben sie kompakt. */
@media (pointer: coarse) {
  .form-control.formular_checkbox,
  input[type="checkbox"].form-control,
  input[type="radio"].form-control,
  .checkbox input[type="checkbox"],
  .radio input[type="radio"],
  .checkbox-inline input[type="checkbox"],
  .radio-inline input[type="radio"],
  .thinLabel input[type="checkbox"],
  .thinLabel input[type="radio"] {
    width: 24px;
    height: 24px;
  }
}

/* ---------- Eingabegruppen mit Präfix/Suffix bzw. Button ---------- */
.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .form-control {
  flex: 1;
  min-width: 0;
}

.input-group .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-btn {
  display: flex;
}

.input-group-btn:first-child > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -1px;
}

.input-group-btn:last-child > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.input-group-addon {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--ink-3);
  background: var(--bg);
  color: var(--ink-2);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.input-group-addon:first-child {
  border-right: 0;
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.input-group-addon:last-child {
  border-left: 0;
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

/* Hinterlegungs-Addons (title="Hinterlegung ...", z. B. Verhaltens-Dialog im
   Klassenbuch): als angesetzter Feld-Button rechts am Feld - einheitliche Optik
   aller Hinterlegungs-Ausloeser (Vorbild: Raum-Feld der Terminbearbeitung,
   PageButtonsAPI Variante A). Ueberstimmt die btn/btn-primary-Klassen des
   Markups. */
.input-group > .input-group-addon[title^="Hinterlegung"] {
  padding: 0 12px;
  min-height: 0;
  background: #fff;
  border-color: var(--ink-3);
  box-shadow: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 1rem;
}

.input-group > .input-group-addon[title^="Hinterlegung"] button {
  color: inherit;
  font-size: inherit;
  cursor: pointer;
}

.input-group > .input-group-addon[title^="Hinterlegung"]:hover {
  background: var(--bg);
  color: var(--ink);
}

/* Alte absolut positionierte Hinterlegungs-Ausloeser (PageButtonsAPI::
   getHinterlegungSymbol bzw. mnlisten.js, z. B. Raumplanung Uhrzeit/Bestuhlung,
   Kursort im Sammelaenderungs-Dialog, Gemeinde/Anredetitel in den mn-Dialogen):
   im Lumen ebenfalls als angesetzter Feld-Button. !important ist noetig, um die
   harten Inline-Styles des Markups (right:20px, top:-3px, font-size:27px,
   color:#555) zu ueberstimmen. Bewusst nur DIREKTE Kinder von Spalten,
   mn-Dialogzeilen oder einem .feld-mit-hinterlegung (Lumen-Templates, die
   ohne Bootstrap-Spalten auskommen und nur Feld + Ausloeser umschliessen) -
   Button-Leisten wie .medien_buttons (Hand/Edit/Loeschen uebereinander)
   haben eine eigene Optik weiter unten. */
[class*="col-"]:has(> button.no-button-style > .hinterlegung-button-icon),
.feld-mit-hinterlegung:has(> button.no-button-style > .hinterlegung-button-icon),
div:has(> .mnlabel):has(> button.no-button-style > .hinterlegung-button-icon),
div.medienupdate:has(> button.no-button-style > .hinterlegung-button-icon) {
  position: relative;
}

[class*="col-"] > button.no-button-style:has(> .hinterlegung-button-icon),
.feld-mit-hinterlegung > button.no-button-style:has(> .hinterlegung-button-icon),
div:has(> .mnlabel) > button.no-button-style:has(> .hinterlegung-button-icon),
div.medienupdate > button.no-button-style:has(> .hinterlegung-button-icon) {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background: #fff;
  border: 1px solid var(--ink-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink) !important;
  cursor: pointer;
  font-size: 1rem !important;
}

[class*="col-"] > button.no-button-style:has(> .hinterlegung-button-icon):hover,
.feld-mit-hinterlegung > button.no-button-style:has(> .hinterlegung-button-icon):hover,
div:has(> .mnlabel) > button.no-button-style:has(> .hinterlegung-button-icon):hover,
div.medienupdate > button.no-button-style:has(> .hinterlegung-button-icon):hover {
  background: var(--bg);
}

/* Platz fuer den angesetzten Button im Feld */
[class*="col-"]:has(> button.no-button-style > .hinterlegung-button-icon) > .form-control,
.feld-mit-hinterlegung:has(> button.no-button-style > .hinterlegung-button-icon) > .form-control,
div:has(> .mnlabel):has(> button.no-button-style > .hinterlegung-button-icon) > .form-control {
  padding-right: 48px;
}

/* In den mn-/Medien-Dialogzeilen (Label ueber dem Feld) beginnt der angesetzte
   Button unter dem Label statt auf Zeilenhoehe. */
div:has(> .mnlabel) > button.no-button-style:has(> .hinterlegung-button-icon),
div.medienupdate > button.no-button-style:has(> .hinterlegung-button-icon) {
  top: auto !important;
  height: 38px;
}

/* Button-Leiste der Listen-Felder (z. B. "Bis dato eingeplante Medien":
   Hinterlegung/Bearbeiten/Loeschen uebereinander am rechten Feldrand) als
   kleine, klar erkennbare Einzel-Buttons. !important gegen die Inline-Styles
   (font-size:2em, right:25px, top:5px). Dieselbe Leiste mit eigenem Klassennamen
   (qualifikationenauswahl_buttons, dozentenauswahl_buttons, fotos_buttons ...)
   haben alle Listenfelder; sie folgt dem Feld (.mnlist_mit_buttons) als
   Geschwister. */
.medien_buttons,
.mnlist_mit_buttons ~ [class$="_buttons"] {
  top: 8px !important;
  right: 8px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 1rem !important;
}

.medien_buttons button.no-button-style,
.mnlist_mit_buttons ~ [class$="_buttons"] button.no-button-style {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #fff;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  font-size: 1rem;
}

.medien_buttons button.no-button-style:hover,
.mnlist_mit_buttons ~ [class$="_buttons"] button.no-button-style:hover {
  background: var(--bg);
}

/* Die Listen-Tabelle im Feld (medientable): Lumen-Tabellenoptik statt der
   attributbasierten 1px-Gitterlinien (border/rules) und 12px-Inline-Schrift.
   Den Platz fuer die Button-Leiste haelt das Feld selbst frei
   (.mnlist_mit_buttons, siehe MN-Listen-Boxen unten) - nur lesende Felder
   nutzen so die volle Breite. */
.form-control .medientable {
  width: 100% !important;
  border: 0;
  border-collapse: collapse;
  font-size: 0.8125rem !important;
}

.form-control .medientable th,
.form-control .medientable td {
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  text-align: left;
}

/* mn-Listen (mnlisten.js, z. B. ReferentIn/Kooperationspartner/Veranstaltungsort
   im Kursvorschlag): Zeilen sind anklickbar (markieren), die markierte Zeile
   traegt .mnhighlight - im Lumen teal statt des klassischen Blaus. */
.mnlisttable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.mnlisttable td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-2);
}

tr.mnzeile {
  cursor: pointer;
}

tr.mnzeile:hover > td {
  background: var(--bg);
}

tr.mnzeile.mnhighlight > td {
  background: var(--teal-soft);
}

/* ---------- Mehrzeiliges Feld mit angehängter vertikaler Button-Leiste ---------- */
/*
 * Box/Textarea-Felder mit mehreren Aktionen (z. B. Kategorien, Qualifikationen, Medien):
 * Feld + rechts angehängte, vertikale Button-Leiste bilden EIN Bedienelement. Nur die vier
 * äußeren Ecken sind gerundet; die Naht zum Feld und die Trennlinien zwischen den Buttons
 * bleiben gerade. Die Leistenfläche füllt die volle Höhe (Buttons oben), dadurch entfällt
 * der knifflige "letzter Button am unteren Rand"-Fall - nur der erste Button trägt oben
 * rechts den Radius, die Leiste selbst unten rechts.
 */
.feld-mit-leiste {
  display: flex;
  width: 100%;
  align-items: stretch;
}

.feld-mit-leiste > .form-control {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.feld-mit-leiste-aktionen {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  border: 1px solid var(--ink-3);
  border-left: 0;
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  background: var(--bg);
}

.feld-mit-leiste-aktionen .feld-leiste-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.feld-mit-leiste-aktionen .feld-leiste-btn:first-child {
  border-top-right-radius: var(--radius-sm);
}

.feld-mit-leiste-aktionen .feld-leiste-btn:last-child {
  border-bottom: 0;
}

.feld-mit-leiste-aktionen .feld-leiste-btn:hover,
.feld-mit-leiste-aktionen .feld-leiste-btn:focus-visible {
  outline: none;
  background: var(--teal-soft);
  color: var(--teal-d);
}

/*
 * Einheitliches Aussehen der an Felder angehängten Auslöser-Buttons - egal ob Einzelfeld
 * (.input-group .hinterlegung-button, sonst .btn.btn-default) oder vertikale Leiste der
 * Mehrfach-Box (.feld-leiste-btn): gleiche gedämpfte Aktionsfläche, gleiche (größere)
 * Symbolgröße und gleiche Hover-Farbe. Größere Symbole sind bewusst gewählt - sie lassen
 * sich leichter erfassen.
 */
.input-group .hinterlegung-button {
  width: 40px;
  padding: 0;
  background: var(--bg);
  color: var(--ink-2);
}

.input-group .hinterlegung-button:hover,
.input-group .hinterlegung-button:focus-visible {
  background: var(--teal-soft);
  border-color: var(--ink-3);
  color: var(--teal-d);
}

.input-group .hinterlegung-button .fa,
.feld-mit-leiste-aktionen .feld-leiste-btn .fa {
  font-size: 1.25rem;
}

/* ---------- Einträge in den MN-Listen-Boxen (Kategorien, Qualifikationen, Medien ...) ---------- */
/*
 * Die Boxen (.mnlist) enthalten eine Tabelle (.mnlisttable) mit den ausgewählten Einträgen
 * (.mnzeile). Klassisch werden die über die HTML-Attribute border="1" rules="all" gezeichnet
 * (kantig/altbacken) - hier durch ein ruhiges Zeilen-Layout ersetzt. Die markierte Zeile
 * (.mnhighlight) wird deutlich hervorgehoben; im klassischen Layout war sie nur fett und damit
 * kaum erkennbar.
 */
/* Die Box ist je nach Feld .mnlist (Kategorien) oder nur .form-control mit einer
   .mnlisttable darin (Qualifikationen, Einsatzbezirke ...) - daher per :has die Box
   ansprechen, die eine MN-Liste enthält. Knapperer Innenabstand, damit die Zeilen die
   Box gut ausfüllen. */
.form-control:has(.mnlisttable) {
  padding: 4px;
}

/* Bearbeitbare Listenfelder: rechts liegt die absolut positionierte Button-Leiste
   (34px breit, 8px vom Rand). Das Feld haelt ihr den Platz frei, sonst laufen die
   Zeilen darunter - klassisch dasselbe per style.css. Steht nach der Regel oben,
   weil sie gleich spezifisch ist. */
.form-control.mnlist_mit_buttons {
  padding-right: 52px;
}

/* width:95% steht als Inline-Style am <table> (Alt-Code) - hier bewusst überschrieben,
   damit Zeilen (und ihre Hover-/Markierungsfläche) die volle Breite einnehmen. */
.mnlisttable {
  width: 100% !important;
  border: 0;
  border-collapse: collapse;
}

.mnlisttable td,
.mnlisttable th {
  border: 0;
}

.mnlisttable .mnzeile {
  cursor: pointer;
}

.mnlisttable .mnzeile > td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  transition: background 0.12s;
}

.mnlisttable .mnzeile:last-child > td {
  border-bottom: 0;
}

.mnlisttable .mnzeile:hover > td {
  background: var(--line-2);
}

.mnlisttable .mnzeile.mnhighlight > td {
  background: var(--teal-soft);
  color: var(--teal-d);
  font-weight: 600;
}

.mnlisttable .mnzeile.mnhighlight > td:first-child {
  box-shadow: inset 3px 0 0 var(--teal);
}

/* ---------- Eingebettetes Hinterlegungs-Symbol (jQuery-UI-Dialog-Trigger) ---------- */
/*
 * Felder wie Kurs-Dauer oder Staatsangehoerigkeit haengen rechts im Eingabefeld ein
 * Symbol an, das einen jQuery-UI-Dialog oeffnet (PageButtonsAPI::getHinterlegungSymbol).
 * Der Trigger ist ein <button.no-button-style> mit Inline-Style
 * "position:absolute; right:Npx; top:-3px" - die Offsets sind auf das rechte Ende des
 * Eingabefeldes getunt. Im klassischen Layout lieferte die Feldzelle den Positions-
 * kontext; in Lumen fehlt er, sodass das Symbol an einen entfernten Vorfahren (Main-
 * Content) springt. Wir setzen den Kontext hier auf der Feldspalte nach, ohne den
 * geteilten Inline-Style anzufassen. Da Label und Feld in getrennten Spalten liegen
 * (z. B. kursbearbeiten.sgt), enthaelt die getroffene Spalte nur das Feld + Symbol,
 * sodass top/right exakt am Eingabefeld greifen.
 */
[class*="col-"]:has(.hinterlegung-button-icon) {
  position: relative;
}

/*
 * Feld-Layout der WSS-Formulare (.validate_form): Felder werden vertikal gestapelt
 * (Label über Eingabe); die Label-Spalte bekommt einen kleinen Abstand zum Feld.
 * Der Zeilenabstand kommt einheitlich von .form-group (siehe oben).
 */
.validate_form {
  max-width: 51.25rem;
}

.validate_form .col-xs-12,
.validate_form .col-sm-2,
.validate_form .col-md-2,
.validate_form .col-sm-3,
.validate_form .col-md-3 {
  margin-bottom: 4px;
}

/* Die Buttonleiste des Formulars steht etwas abgesetzt unter den Feldern */
.validate_form .buttonleiste {
  margin-top: 8px;
}

/*
 * Vollseiten-Formulare: die primäre Aktionszeile (Speichern/Abbrechen u. Ä.)
 * bleibt beim Scrollen dauerhaft am unteren Bildschirmrand sichtbar - so sind
 * die Aktionen auch in langen Formularen jederzeit erreichbar. Einheitlich für
 * ALLE KuferTools-Formulare (analog zur andockenden Reiter-Aktionszeile).
 *
 * Umsetzung als position:sticky auf der ABSCHLIESSENDEN .buttonleiste des
 * Formulars. Die Leiste lebt in der Inhaltsspalte und die Seite scrollt normal
 * (#main-content ist kein eigener Scroll-Container) - daher KEIN Sidebar-Offset
 * und KEINE JS-Höhenmessung nötig (anders als die frühere fixe
 * anwesenheitseingabe-Leiste). Nur die LETZTE Buttonleiste je Formular andocken;
 * frühere Leisten (z. B. die Anmelde-Modifikatoren im Anmeldeformular) bleiben
 * im Fluss. Die primäre Anmelde-Leiste .anmeldung-absenden wird zusätzlich
 * angedockt, wenn sie (Firma-/Vorgesetzten-Anmeldeformular) in einer Spalte
 * (.col-md-12) statt als direktes Formular-Kind steckt.
 *
 * Scope #main-content grenzt die jQuery-UI-Dialoge aus - die hängen an <body>,
 * also außerhalb von #main-content. Nur @media screen: im Druck bleibt die
 * Leiste im normalen Fluss.
 */
@media screen {
  #main-content form.validate_form > .buttonleiste:last-child,
  #main-content form.validate_form .buttonleiste.anmeldung-absenden,
  #main-content .container.validate_form .anw_save_cancel_buttons.buttonleiste,
  /* Raumplanung: das Formular traegt bewusst kein validate_form (es bringt
     seine eigene Validierung in doz_kursplanung.js mit), soll aber dieselbe
     andockende Leiste bekommen. */
  #main-content .raumplanung form#raumplanung_form > .buttonleiste:last-child {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: 16px;
    margin-bottom: 0;
    padding: 12px 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--line);
  }
}

/*
 * Anmeldeformular (Firma/Vorgesetzte): die primäre .anmeldung-absenden-Leiste
 * steckt dort in einer .col-md-12-Spalte (nicht als direktes Formular-Kind).
 * Die kurze Spalte würde position:sticky einsperren (Sticky wirkt nur innerhalb
 * des Elternelements). Die Spalte per display:contents auflösen, sodass der
 * Sticky-Bezug der Leiste das (hohe) Formular wird und sie über die gesamte
 * Formularhöhe andockt. Lumen-only, kein Template-/Klassik-Eingriff.
 */
@media screen {
  #main-content form.validate_form > [class*="col-"]:has(> .buttonleiste.anmeldung-absenden) {
    display: contents;
  }

  /* Anwesenheitseingabe: die Aktionsleiste sitzt in .save_or_cancel > form.anweingabe;
     beide Wrapper aufloesen, damit der Sticky-Bezug der Leiste das (hohe) Formular
     .container.validate_form wird und sie ueber die gesamte Teilnehmerliste andockt. */
  #main-content .container.validate_form .save_or_cancel,
  #main-content .container.validate_form form.anweingabe {
    display: contents;
  }
}

/*
 * Formulare mit dynamischen wss-Feldern (Kursvorschlag, Kursplanung bearbeiten,
 * Persoenliche Daten, Wunschtermine, Urlaube, Termin-Formulare ...): einheitliches
 * Karten- und Spaltenlayout in components/wssform.css (div.wss-felder). Die
 * frueheren Einzelregeln fuer #form_kursvorschlag / .kursplanung_zeile sind
 * dort aufgegangen.
 */

/* Verschachtelte Buttonleiste (im Anmeldeformular umschließt eine innere
   .buttonleiste den "jetzt anmelden"-Button): keine Eigenränder, sonst schiebt
   deren margin die vertikale Zentrierung und der Button sitzt ~5px höher als die
   übrigen Aktionsbuttons derselben Zeile. */
.validate_form .buttonleiste .buttonleiste {
  margin: 0;
}

/*
 * Anmeldeformular (Lumen-Template .../anmeldung/anmeldeformular.sgt): Die Aktionen
 * stehen ÜBER dem Formular - die Anmeldeart (Modus) zuerst und hervorgehoben,
 * darunter die optionalen Modifikatoren (Details / abw. Zahlweg / Nachlass); die
 * Primäraktion "jetzt anmelden" steht am Formularende.
 */
/* Abstand zwischen der Teilnehmer-/Kurs-Kartenzeile und den darunter liegenden
   Aktionen (erste Aktion berührte sonst die Karten). Über die Anmelde-Aktionen
   (:has(~ ...)) auf das Anmeldeformular begrenzt, damit andere .validate_form-
   Formulare unberührt bleiben - unabhängig davon, welche Aktion zuerst kommt. */
.validate_form > .row:has(~ .anmeldung-absenden),
.validate_form > .row:has(~ .anmeldung-anmeldeart),
.validate_form > .row:has(~ .anmeldung-modifikatoren) {
  margin-bottom: 16px;
}

/* Auf schmalen Screens stapeln die Teilnehmer-/Kurs-Karten untereinander (col-xs-12);
   das Grid liefert nur horizontale Gutter, daher hier vertikalen Abstand ergänzen.
   Nebeneinander (eine Flex-Zeile) hat row-gap keine Wirkung. */
.validate_form > .row:has(.anmeldung-detailpanel) {
  row-gap: 16px;
}

.validate_form .anmeldung-anmeldeart {
  margin: 0 0 14px;
}

.validate_form .buttonleiste.anmeldung-modifikatoren {
  margin: 0 0 18px;
}

.validate_form .buttonleiste.anmeldung-absenden {
  margin-top: 18px;
}

/*
 * Teilnehmer-/Kurs-Detailkarten im Anmeldeformular: die flachen Label/Wert-Paare
 * (panel_label + panel_feld, je durch .clearfix getrennt) zweispaltig anordnen -
 * Label links und gedämpft, Wert rechts (wie im Bestätigungsdialog). Vorher eine
 * lange gestapelte Liste, in der Label und Wert kaum zu unterscheiden waren.
 * Floats + clear je Zeile; display:flow-root hält die Floats in der Karte.
 */
.anmeldung-detailpanel {
  display: flow-root;
}

.anmeldung-detailpanel > .clearfix {
  clear: both;
}

.anmeldung-detailpanel > .panel_label {
  float: left;
  clear: left;
  width: 38%;
  padding: 3px 10px 3px 0;
}

.anmeldung-detailpanel > .panel_feld {
  float: left;
  width: 62%;
  min-width: 0;
  padding: 3px 0;
  overflow-wrap: anywhere;
}

.anmeldung-detailpanel > .panel_label .label-like {
  color: var(--ink-3);
  font-weight: 600;
}

/*
 * "Anmeldeart wählen" ist mehr als ein Sekundär-Button - hier wird die Mehrfach-/
 * Firmen-/Eltern-Kind-Anmeldung gewählt (also ob weitere Personen dazukommen).
 * Als hervorgehobene Auswahl-Steuerung: linksbündig, Teal-Akzent, Chevron rechts,
 * aktueller Wert gedämpft. Der Teal-Akzent hebt sie über die neutralen
 * Modifikator-Buttons, ohne mit dem grünen Primär-Button zu konkurrieren.
 */
.validate_form .maAnmeld_anmArt {
  position: relative;
  text-align: left;
  padding-right: 32px;
  line-height: 1.3;
}

.validate_form .anmeldung-anmeldeart .maAnmeld_anmArt {
  border-color: var(--teal);
  color: var(--teal-d);
}

.validate_form .anmeldung-anmeldeart .maAnmeld_anmArt:hover,
.validate_form .anmeldung-anmeldeart .maAnmeld_anmArt:focus-visible {
  background: var(--teal-soft);
  border-color: var(--teal-d);
  color: var(--teal-d);
}

.validate_form .maAnmeld_anmArt::after {
  content: "\25BE"; /* ▾ */
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--teal-d);
}

/* Die aktuell gewählte Anmeldeart ist wichtige Information (steht sonst nirgends
   im Formular) - daher betont statt gedämpft: kräftiges Teal, fett. */
.validate_form .maAnmeld_anmArt .maAnmeld_anmArt_derzeit {
  color: var(--teal-d);
  font-weight: 700;
}

/*
 * Inline-Anordnung: Anzeige-Feld + Button in einer Zeile (z. B. "kopiert von" mit dem
 * "Kurs kopieren"-Button). Ohne Bootstrap würden Span und Button (beide tragen .form-control)
 * als Blöcke untereinander stehen.
 */
.form-inline {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}

/* Anzeige-Span behält Breite und Höhe, auch wenn er leer ist (gleiche Höhe wie der Button). */
.form-inline .form_nichtbearbeitbar {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 200px;
  min-height: calc(1.4em + 20px);
}

/* Der danebenstehende Button soll Button bleiben (er trägt zusätzlich .form-control). */
.form-inline .btn {
  display: inline-flex;
  width: auto;
}

/*
 * Nackte fieldset-Gruppen (kt-feldgruppe, z. B. die Wochentage im Kursfilter):
 * verhalten sich wie eine normale Formularzeile - ohne Browser-Standardrahmen.
 * Die zugehoerige legend ist visually-hidden (Screenreader-Gruppenlabel),
 * sichtbar bleibt das bisherige Spalten-Label.
 */
fieldset.kt-feldgruppe {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}