/*
 * Lumen Layout - Dialog-Inhalte (jQuery-UI-Dialoge, z. B. auf der Kurs-Detailseite:
 * Termin bearbeiten/absagen, Kursdaten anpassen, Honorar abrechnen, Dokumente,
 * Bescheinigung, Filter). Die Dialoge laden komplette Seiten-Templates per AJAX
 * (mit .container, h1, section usw.); das Seiten-Chrome aus page.css greift nur
 * in #main-content, daher werden die Inhalte hier dialog-tauglich gestylt.
 * Die Widget-Optik (Titelleiste, Buttonleiste, Overlay) liegt in jquery-ui.css.
 */

/* Seiten-Chrome im Dialog zuruecksetzen */
.ui-dialog .ui-dialog-content .container {
  width: auto;
  margin: 0;
  padding: 0;
}

/* Ueberschriften der geladenen Seiten kompakt statt in Seitengroesse */
.ui-dialog .ui-dialog-content h1 {
  margin: 0 0 14px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}

.ui-dialog .ui-dialog-content h2,
.ui-dialog .ui-dialog-content h3 {
  margin: 18px 0 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.ui-dialog .ui-dialog-content h2:first-child,
.ui-dialog .ui-dialog-content h3:first-child {
  margin-top: 0;
}

/* Buttonzeile des geladenen Formulars (z. B. Speichern/Zurueck) */
.ui-dialog .ui-dialog-content .buttonleiste {
  margin: 16px 0 0;
}

/* Zusatztext links neben den Dialog-Buttons (KuferTools.ButtonPane.Text);
   im klassischen Layout über style.css positioniert. */
.ui-dialog .ui-dialog-buttonpane .ui-button-pane {
  display: inline-block;
  margin: 0 auto 0 4px;
  color: var(--ink-2);
  font-size: 13px;
}

/* Listen im Dialog ohne Aufzaehlungszeichen */
.ui-dialog .ui-dialog-content ul,
.ui-dialog .ui-dialog-content ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-dialog .ui-dialog-content li::marker {
  content: none;
}

/* Validierungs-Meldung (KuferTools.ValidateFormInput): Liste der fehlerhaften
   Felder rot hervorheben. Die allgemeine Listen-Zuruecksetzung oben nimmt Punkte
   und Einzug; fuer diese Fehlerliste bewusst wiederherstellen. */
.ui-dialog .ui-dialog-content ul.errorFields {
  margin: 8px 0 0;
  padding-left: 20px;
  list-style: disc outside;
  color: var(--red);
}

.ui-dialog .ui-dialog-content ul.errorFields li {
  display: list-item;
  margin: 2px 0;
}

.ui-dialog .ui-dialog-content ul.errorFields li::marker {
  content: normal;
  color: var(--red);
}

/* Termin-bearbeiten-Dialog: Beschriftungsspalte wie Formular-Labels */
.kurstag_bearbeiten_zeile > [class*="col-"]:first-child {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--ink);
}

/* Kursdaten-anpassen-Dialog (nach Termin bearbeiten): eine Zeile =
   Checkbox/Beschriftung | "alt:" | alter Wert | "neu:" | neuer Wert.
   Die Bootstrap-Spalten der Markup tragen ohne .row keine Breiten mehr,
   deshalb uebernimmt ein Grid die Zeilenaufteilung. */
.kursAnpassen .kursAnpassenRow {
  display: grid;
  grid-template-columns: minmax(min-content, 1.8fr) auto minmax(min-content, 1fr) auto minmax(min-content, 1fr);
  gap: 6px 10px;
  align-items: center;
  margin: 0 0 10px;
}

.kursAnpassen .kursAnpassen_bezeichnung {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kursAnpassen .text_alt,
.kursAnpassen .text_neu {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--ink-3);
}

/*
 * Termine-nach-Kalender-Dialog (.icsButton -> action=icsAuswahl): Liste mit
 * Auswahl-Optionen (Radios) und der Variante "nur die Termine von ... bis ...".
 * Ohne style.css wuerden die Datumsfelder (.form-control) als blockfuellende
 * Felder unter der Beschriftung landen; hier inline neben "von"/"bis" halten.
 */
.terminbereich > li {
  margin-bottom: 8px;
}

/* Zeile "nur die Termine von [..] bis [..]": Radio-Beschriftung und die beiden
   Datums-Beschriftungen fliessen in einer Zeile und brechen bei Bedarf um. */
.terminbereich .radio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.terminbereich .label_datum_von,
.terminbereich .label_datum_bis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 400;
}

.terminbereich #terminvon,
.terminbereich #terminbis {
  display: inline-block;
  width: 8.5em;
}

/*
 * --- Termine-Reiter-Filter (#dialogTermineFilter) ---
 * Die Zeilen "Datum"/"Uhrzeit" bieten "(o) gesamt" und
 * "(o) Zeitraum zwischen [von] und [bis]"; letzteres soll in EINER Zeile stehen.
 *
 * Warum das Markup das erschwert: Von/Bis tragen .form-control (width:100%) und
 * die Bootstrap-%-Spalten (col-md-3/9). Der jQuery-UI-Dialog ist width:auto und
 * misst seine Breite aus dem Inhalt - Prozent-Spalten tragen dazu aber nicht
 * verlaesslich bei, und verschiedene Browser messen die Auto-Breite unterschiedlich
 * (Firefox schmaler als Chrome). Ergebnis: mal Umbruch, mal horizontale Scrollbar.
 *
 * Loesung (browserunabhaengig statt "Dialog waechst schon"):
 *  - Von/Bis als GLEICH breite Kurzfelder mit fester Breite -> deterministische,
 *    browserunabhaengige Zeilenbreite (keine fluiden %-/Inhaltsbreiten mehr).
 *  - Bereichs-.radio als flex-Zeile (nowrap) -> "Zeitraum zwischen [von] und [bis]"
 *    bleibt garantiert einzeilig.
 *  - Feste, buendige Label-Spalte statt der %-Spalten.
 *  - min-width als Boden: der Dialog ist in allen Browsern mindestens so breit,
 *    dass die Zeile passt (keine Scrollbar durch zu schmal berechnete Auto-Breite).
 */
#dialogTermineFilter {
  min-width: 34rem;
}

/* Datum- UND Uhrzeitfelder gleich breit und kompakt */
#dialogTermineFilter input.val_date.form-control,
#dialogTermineFilter input.val_time.form-control {
  display: inline-block;
  width: 8em;
}

/* Feste, buendige Label-Spalte; Inhalts-Spalte fuellt den Rest; Label|Inhalt nicht umbrechen */
#dialogTermineFilter .row.nomargin {
  flex-wrap: nowrap;
  align-items: flex-start;
}

#dialogTermineFilter .row.nomargin > [class*="col-"] {
  width: auto;
  padding: 0;
}

#dialogTermineFilter .row.nomargin > [class*="col-"]:first-child {
  flex: 0 0 6rem;
}

#dialogTermineFilter .row.nomargin > [class*="col-"]:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* Bereichs-Auswahl ("Zeitraum zwischen [von] und [bis]") als einzeilige flex-Zeile;
   die drei Labels (Zeitraum | zwischen [von] | und [bis]) bleiben zusammen. */
#dialogTermineFilter .radio:has(input.val_date),
#dialogTermineFilter .radio:has(input.val_time) {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

#dialogTermineFilter .radio:has(input.val_date) > label,
#dialogTermineFilter .radio:has(input.val_time) > label {
  flex: 0 0 auto;
  margin: 0;
}

/* Abstand zwischen dem Dozent-Freitextfeld und den darunter folgenden
   Radiobuttons ("nur meine Termine" / "alle Termine"). */
#dialogTermineFilter div:has(> input.filterDozent) {
  margin-bottom: 10px;
}

/* Schmale Viewports: feste Breiten/nowrap aufheben (Label ueber den Feldern,
   Bereich darf umbrechen), damit im schmalen Dialog nichts ueberlaeuft. */
@media (max-width: 47.9375em) {
  #dialogTermineFilter {
    min-width: 0;
  }

  #dialogTermineFilter .row.nomargin {
    flex-wrap: wrap;
  }

  #dialogTermineFilter .row.nomargin > [class*="col-"]:first-child {
    flex: 1 1 100%;
  }

  #dialogTermineFilter .radio:has(input.val_date),
  #dialogTermineFilter .radio:has(input.val_time) {
    flex-wrap: wrap;
  }
}

/*
 * Weitere Dialog-spezifische Feldlayouts, im klassischen Layout über style.css
 * gesetzt (dort nicht geladen). Ohne diese würden kompakte Eingabe-/Auswahlfelder
 * (Datum, Uhrzeit, Minuten, kurze Selects) als blockfüllende Felder erscheinen.
 * Selektoren sind eng auf den jeweiligen Dialog/Feldklassen gehalten.
 */

/* --- Termin-Sammeländerung (Dozent-Kursplanung) --- */
.uhrzeit.form-control {
  width: 70px;
}

.form-inline .ue.form-control,
.form-inline .minuten.form-control,
.form-inline .pause.form-control {
  width: 60px;
}

/* Tage-verschieben- und Kursort-Select inline statt blockfüllend
   (Breite inkl. Platz für den Lumen-Auswahlpfeil) */
#wt_kt_changeDate_val {
  display: inline-block;
  width: auto;
  min-width: 72px;
}

#wt_kt_changeKursort_val {
  min-width: 270px;
  /* Platz fuer das im Feld sitzende Hinterlegungs-Symbol */
  padding-right: 48px;
}

@media (max-width: 47.9375em) {
  #wt_kt_changeMinuten_val,
  #wt_kt_changePause_val {
    margin-top: 10px;
  }
}

/* Zeilenlayout des Sammeländerungs-Dialogs: Label-Spalte (Checkbox + Text) mit
   fester Breite, Felder dahinter buendig in einer Zeile; die Bootstrap-
   Prozentspalten des klassischen Templates ergeben im schmalen Dialog sonst
   umbrechende Labels und unausgerichtete Felder. */
.ui-dialog-content form[action*="terminsammelaenderungabsenden"] .row.nomargin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.ui-dialog-content form[action*="terminsammelaenderungabsenden"] .row.nomargin > [class*="col-"] {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
}

.ui-dialog-content form[action*="terminsammelaenderungabsenden"] .row.nomargin > [class*="col-"]:first-child {
  flex: 0 0 9.5rem;
}

/* Checkbox im Label mit Abstand zum Text */
.ui-dialog-content form[action*="terminsammelaenderungabsenden"] .control-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* UE/Minuten/Pause inline neben dem Zeitfeld statt versetzt darunter */
.ui-dialog-content form[action*="terminsammelaenderungabsenden"] .form-inline.form-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.ui-dialog-content form[action*="terminsammelaenderungabsenden"] .form-inline label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* "Kurstage um [x] Tage verschieben" als eine ausgerichtete Zeile */
.ui-dialog-content form[action*="terminsammelaenderungabsenden"] p {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

/* Bemerkungs-Textarea fuellt die Restbreite der Zeile */
.ui-dialog-content form[action*="terminsammelaenderungabsenden"] .row.nomargin > [class*="col-"]:has(textarea) {
  flex: 1 1 260px;
  min-width: 0;
}

.ui-dialog-content form[action*="terminsammelaenderungabsenden"] textarea.form-control {
  width: 100%;
}

/* Status-Select nicht auf Inhaltsbreite schrumpfen lassen */
#wt_kt_changeAusfall_val {
  min-width: 270px;
}

/* --- Anwesenheit: "alle setzen"-Select kompakt ---
   Steht in der oberen Buttonleiste direkt neben den .btn-default-Buttons und wird
   daher in Hoehe und Schriftgroesse an diese angeglichen, damit die Reihe
   einheitlich wirkt (Rahmenfarbe kommt aus .form-control = --ink-3). */
select.anw_status_alle_setzen_select {
  display: inline-block;
  width: auto;
  max-width: 160px;
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  /* Mit appearance: base-select (form.css) zentriert die feste Hoehe den
     Text nicht mehr von selbst - er klebte oben; native Selects
     (Firefox/Safari) zentrieren selbst und ignorieren das hier. */
  align-content: center;
  /* Chevron-Abstand kompakter, gleicht die breitere 600er-Schrift aus -
     sonst kippt die Kopfleiste frueher in den "Mehr"-Ueberlauf */
  padding-right: 28px;
  background-position: right 8px center;
  font-size: 13px;
  /* wie die font-weight der .btn-default daneben */
  font-weight: 600;
}

/* Firefox nutzt den nativen Pfeil (form.css) - dessen knapperen
   Innenabstand nicht durch die 28px oben verdraengen */
@supports (-moz-appearance: none) {
  select.anw_status_alle_setzen_select {
    padding-right: 12px;
  }
}

/* Die Aufklappliste erbt die 600 des Selects nicht - dort markiert fett
   weiterhin nur den gewaehlten Status (form.css option:checked). */
.anw_status_alle_setzen_select option {
  font-weight: 400;
}

/* In Browsern mit anpassbarem Select ist die Platzhalter-Option ("Alle setzen
   auf") in der Aufklappliste nur ein wirkungsloser Eintrag - ausblenden, die
   Liste zeigt dann nur echte Status. Die geschlossene Anzeige (selectedcontent)
   klont den Options-Inhalt und bleibt sichtbar. */
@supports selector(::picker(select)) {
  select.anw_status_alle_setzen_select option[value=""] {
    display: none;
  }
}

/* --- Verhaltenslisten-Dialog ("Einstellungen zu Verhaltenseinträgen") ---
   Die Filter-Zeilen nutzen .row.nomargin und stehen dadurch ohne jeden vertikalen
   Abstand direkt aufeinander. Daher hier ein einheitlicher Zeilenabstand. */
.ui-dialog-content .anzeigeZeitraum,
.ui-dialog-content .fachEingabe,
.ui-dialog-content .dozentenEingabe,
.ui-dialog-content .teilnehmerEingabe,
.ui-dialog-content .verhaltenEingabe {
  margin-bottom: 12px;
}

/* Schmale Viewports: Die Auswahllisten stehen sonst nur in col-xs-11, weil das
   Hinweis-Icon (?) eine eigene Spalte (col-xs-1) daneben belegt. Auf Mobil füllt
   die Liste die volle Breite; das Icon rückt in die obere rechte Ecke der Zeile
   (neben das Label). */
@media (max-width: 47.9375em) {
  .ui-dialog-content .fachEingabe,
  .ui-dialog-content .dozentenEingabe,
  .ui-dialog-content .teilnehmerEingabe,
  .ui-dialog-content .verhaltenEingabe {
    position: relative;
  }

  .ui-dialog-content .fachEingabe > .auswahl,
  .ui-dialog-content .dozentenEingabe > .auswahl,
  .ui-dialog-content .teilnehmerEingabe > .auswahl,
  .ui-dialog-content .verhaltenEingabe > .auswahl {
    width: 100%;
  }

  .ui-dialog-content .fachEingabe > .hinweis,
  .ui-dialog-content .dozentenEingabe > .hinweis,
  .ui-dialog-content .teilnehmerEingabe > .hinweis,
  .ui-dialog-content .verhaltenEingabe > .hinweis {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 0;
  }
}

/* --- Honorarvereinbarung-Dialog (dozentenHonorarForm) --- */
/* Der Dialog stapelt vier .panel-Karten direkt untereinander. Im Lumen hat .panel
   selbst keinen Aussenabstand - der kommt sonst vom .panels-Raster (gap, siehe
   panel.css) -, die Karten klebten deshalb aneinander. */
#dozentenHonorarForm > .panel + .panel {
  margin-top: 16px;
}

#dozentenHonorarForm .ohnehonorar {
  margin-bottom: 15px;
}

/* "Dozent absichtlich ohne Honorar" ist die einzige Zeile des Dialogs, in der das
   Kaestchen NEBEN dem Label steht statt darin (<label>Text</label><input>). In der
   Flex-.row des Lumen schrumpft der Kasten damit auf die Labelbreite und das
   Kaestchen rutscht in die naechste Zeile; ausserdem fehlt ihm das 8px-Polster, mit
   dem .row > .col-* den negativen Rand der Reihe ausgleicht - die Zeile stand also
   8px weiter links als die Radiozeilen darunter. */
#dozentenHonorarForm .ohnehonorar > .checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 8px;
}

/* Das Label traegt col-Klassen; ausserhalb einer Spalte gibt ihm form.css width:100%. */
#dozentenHonorarForm .ohnehonorar > .checkbox > label {
  width: auto;
  margin: 0;
}

#dozentenHonorarForm #doz_fahrtkmsatz {
  min-width: 52px;
}

#dozentenHonorarForm .calcsymbol {
  font-weight: 700;
  color: var(--ink-2);
}

@media (min-width: 48em) {
  #dozentenHonorarForm .calcsymbol {
    margin-top: 25px;
  }

  #dozentenHonorarForm .spesenprotn {
    margin-top: 24px;
  }
}

/* --- Honorarvertrag-Dialog (dozentenVertragForm) --- */
/* Die vier Karten stehen paarweise nebeneinander statt untereinander: links die
   Einstellungen, rechts die Freitexte. Das Raster ist die Rezeptur von .panels-2
   (panel.css) - nur mit kleinerer Mindestbreite, weil die Karten in einem Dialog
   stehen. Unterhalb von rund 700px Dialogbreite faellt es von selbst auf eine
   Spalte zurueck; auf dem Telefon ist der Dialog ohnehin fensterbreit.
   Der Abstand zwischen den Karten kommt aus dem gap - .panel selbst hat im Lumen
   keinen Aussenabstand (siehe panel.css), die Karten klebten vorher aneinander.
   Ohne das Raster braucht der Inhalt 868px Hoehe und der Dialog scrollt; mit ihm
   sind es 473px. */
#dozentenVertragForm {
  --panels-gap: 16px;
  --panel-min: 20rem;
  display: grid;
  gap: var(--panels-gap);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--panel-min), calc((100% - var(--panels-gap)) / 2))), 1fr));
  max-width: 900px;
}

/* "Dozenten-Typ" (1 Zeichen) und "Bearbeiter" (2 Zeichen) stehen im Template in zwei
   eigenen .row-Bloecken untereinander, jeder ueber die volle Kartenbreite. Nebeneinander
   gestellt sparen sie eine Zeile und die Karte wirkt nicht mehr leer. */
#dozentenVertragForm .dozbearbeiter {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

#dozentenVertragForm .dozbearbeiter > .row {
  margin: 0;
  width: auto;
}

/* Die beiden Freitextfelder stehen in col-sm-8, also auf zwei Dritteln der Karte -
   in der halben Karte des Rasters ist dafuer kein Platz mehr uebrig. */
#dozentenVertragForm .row > .col-sm-8 {
  width: 100%;
}

#dozentenVertragForm label[for="dozVertrag_gedrucktAm"] {
  cursor: pointer;
  font-weight: 400;
}

#dozVertrag_gedrucktAm {
  display: inline-block;
  width: auto;
  max-width: 90px;
  margin-left: 5px;
}

#dozVertrag_dozTyp {
  margin-left: 5px;
}

.dozbearbeiter .form-group {
  margin-bottom: 10px;
}

.dozbearbeiter input {
  max-width: 50px;
}

/* --- Storno-/Abmeldedialog (stornodialog) --- */
#stornodialog .table_cell {
  vertical-align: middle;
}

#stornodialog select {
  text-align: center;
}

/* --- Weitere-Personen-/Kinder-Dialog (kinderDialog) --- */
#kinderDialog .buttonsWeiterePersonen {
  margin-top: 15px;
}

.weiterePersonenAnzahl {
  margin-top: 7px;
}

/* Standardmäßig ausgeblendete Hinweise (werden per JS eingeblendet) */
.weiterePersonenVoll {
  display: none;
}

/* --- Historienkriterien-Dialog (histKritDialog) --- */
.historiekrit_zeile {
  margin-bottom: 10px;
}

#histKritDialog .input-group-btn {
  font-size: 1.3em;
}

/* --- TN-Tools-Anmeldedialog (dialogTNToolsAnmelden) --- */
/* Lastschrift-Felder erst nach Auswahl der Zahlart einblenden (JS-gesteuert) */
#dialogTNToolsAnmelden .nurLastschrift {
  display: none;
}

/* Status-Hinweise im Anmeldedialog: rot = Warnung/fehlend, grün = vorhanden */
.maAnmeld_hinweise,
.anm_kursstatus_rot,
.kein_sepa_mandat {
  color: var(--red);
  font-weight: 600;
}

.sepa_mandat_vorhanden {
  color: var(--green-d);
  font-weight: 600;
}

/*
 * Druck-/PDF-Einstellungsdialoge (drucklisten.css). Diese Dialoge werden im
 * Lumen-Layout bereits weitgehend korrekt dargestellt: das klassische
 * drucklisten.css (Feldbreiten/-abstände, Sektions-Umschaltung) wird in beiden
 * Layouts geladen, das übrige Chrome kommt aus den Lumen-Komponenten
 * (Panels, Formularfelder, Buttons, Alerts). Hier werden nur die wenigen
 * fest verdrahteten Klassik-Farben überschrieben, die in der Lumen-Optik
 * auffallen. Scope auf .ui-dialog-content, damit die Regeln das nachgeladene
 * drucklisten.css überstimmen (höhere Spezifität) – und nur im Lumen-Layout.
 */

/* Hilfe-Symbole an den Auswahlfeldern (z. B. Verhaltensliste): statt
   knallrot auf gelb dezent im Teal-Ton */
.ui-dialog-content .hinweis .fa-question-circle-o {
  color: var(--teal-d);
  background-color: transparent;
  border-radius: 0;
}

.ui-dialog-content .hinweis .fa-question-circle-o:hover {
  color: var(--teal);
}

/* Info-/Einstellungs-Kasten am Formularende: neutralen Rahmen im Lumen-Ton */
.ui-dialog-content .showInfoEinstell_style {
  border-color: var(--line);
}

/*
 * --- Filter-/Such-Dialoge (#suchformDiv) ---
 * Die Filter der Übersichten (Termine, Kurse, Teilnehmer, Räume, Dozenten …)
 * laden als jQuery-UI-Dialog ein gemeinsames Markup mit dem Formular
 * id="suchformDiv". Pro Zeile eine Bootstrap-Zeile (.row.nomargin) aus
 * Beschriftungsspalte (col-md-3) und Feldspalte(n) – bei Bereichen
 * col-md-4 + col-md-1 ("-") + col-md-4. Im schmalen Dialog ergibt col-md-3 nur
 * ~100px, sodass die deutschen Beschriftungen umbrechen.
 *
 * .row ist bereits Flex (form.css); hier werden nur die Spaltenbreiten ersetzt:
 * Beschriftungs- und Trennerspalten so breit wie ihr Inhalt (kein Umbruch), die
 * Feldspalten füllen den Rest. Das wirkt für einfache Zeilen (Label | Feld) ebenso
 * wie für Bereichszeilen (Label [Feld] - [Feld]). Greift nur im Dialog
 * (.ui-dialog-content); inline gerenderte Filter bleiben unberührt.
 */
.ui-dialog-content #suchformDiv .form-group {
  margin: 0 0 12px;
}

.ui-dialog-content #suchformDiv .row.nomargin {
  align-items: center;
  gap: 6px 12px;
  margin: 0;
}

.ui-dialog-content #suchformDiv .row.nomargin > [class*="col-"] {
  width: auto;
  min-width: 0;
  padding: 0;
  /* Basis 0 (nicht auto): Die Feld-Spalten teilen sich den Rest der Zeile und
     schrumpfen mit, statt anhand ihrer Inhaltsbreite umzubrechen. Mit flex-basis:auto
     brechen die Von/Bis-Bereichszeilen in schmalen Dialogen um - insbesondere in
     Firefox, das den Auto-Breite-Dialog etwas schmaler (~580px vs. ~630px in Chrome)
     und Textfelder etwas breiter rendert. */
  flex: 1 1 0;
}

/* Beschriftungs-, Trenner- ("-") und Gruppentitel-Spalten ("Weitere/Andere
   Suchkriterien", label-like) so breit wie ihr Inhalt, nicht wachsend */
.ui-dialog-content #suchformDiv .row.nomargin > [class*="col-"]:has(> .control-label),
.ui-dialog-content #suchformDiv .row.nomargin > [class*="col-"]:has(> .label-like) {
  flex: 0 0 auto;
}

/* Die ERSTE Beschriftungsspalte jeder Zeile bekommt eine einheitliche Breite,
   damit alle Felder buendig an derselben Position beginnen (inhaltsbreite
   Spalten liessen jede Zeile woanders starten). Bereichs-Zwischenlabels
   ("bis", "-") bleiben inhaltsbreit. */
.ui-dialog-content #suchformDiv .row.nomargin > [class*="col-"]:first-child:has(> .control-label) {
  flex: 0 0 10rem;
}

.ui-dialog-content #suchformDiv .row.nomargin > [class*="col-"]:first-child > .control-label {
  white-space: normal;
}

.ui-dialog-content #suchformDiv .control-label {
  padding-top: 0;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 47.9375em) {
  /* Einfache Zeilen (Beschriftung + ein Feld, col-*-9) stapeln: Label über das
     Feld, Feld über die volle Breite. Bereichszeilen (col-*-4 / col-*-1) bleiben
     in einer Zeile. */
  .ui-dialog-content #suchformDiv .row.nomargin:has(> [class*="col-md-9"]),
  .ui-dialog-content #suchformDiv .row.nomargin:has(> [class*="col-sm-9"]) {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .ui-dialog-content #suchformDiv .row.nomargin:has(> [class*="col-md-9"]) > [class*="col-"],
  .ui-dialog-content #suchformDiv .row.nomargin:has(> [class*="col-sm-9"]) > [class*="col-"],
  .ui-dialog-content #suchformDiv .row.nomargin:has(> [class*="col-md-9"]) > [class*="col-"]:first-child:has(> .control-label),
  .ui-dialog-content #suchformDiv .row.nomargin:has(> [class*="col-sm-9"]) > [class*="col-"]:first-child:has(> .control-label) {
    /* gestapelte Zeilen: feste Label-Spaltenbreite aufheben (flex-basis wirkte
       in Spaltenrichtung sonst als Hoehe) */
    flex: 0 0 auto;
  }

  .ui-dialog-content #suchformDiv .control-label {
    white-space: normal;
  }

  /* Bereichszeilen (Beschriftung | [Von] bis [Bis], erkennbar an der Trennerspalte
     col-md-1): Die Beschriftungsspalte behielte sonst ihre 10rem, und den beiden
     Feldern blieben auf dem Smartphone nur je ~65px - ein Datum passte nicht mehr
     hinein. Die Beschriftung bekommt deshalb eine eigene Zeile, darunter teilen sich
     Von, Trenner und Bis die volle Breite. */
  .ui-dialog-content #suchformDiv .row.nomargin:has(> .col-md-1) {
    row-gap: 4px;
  }

  .ui-dialog-content #suchformDiv .row.nomargin:has(> .col-md-1) > [class*="col-"]:first-child:has(> .control-label) {
    flex: 0 0 100%;
  }

  /* Einzel-Checkbox-Zeile ("nur meine Termine") nicht stapeln: Kästchen und
     Beschriftung bleiben in einer Zeile als großzügiges, touch-freundliches
     Tippziel; das Kästchen wird für die Bedienung am Touchscreen vergrößert. */
  .ui-dialog-content #suchformDiv .form-group:has(.nur_meinetermine) .row.nomargin {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 40px;
  }

  .ui-dialog-content #suchformDiv .nur_meinetermine {
    order: -1;
    flex: 0 0 auto;
  }

  .ui-dialog-content #suchformDiv .form-group:has(.nur_meinetermine) .control-label {
    cursor: pointer;
  }

  .ui-dialog-content #suchformDiv .nur_meinetermine input[type="checkbox"] {
    width: 26px;
    height: 26px;
  }
}

/*
 * Anwesenheiten-Filter (#dialogAnwesenheitFilter): Die Checkbox-Gruppen "Status"
 * und "Anzeige" sind eine Folge aus Beschriftungs-/Leerspalten (col-md-3) und
 * Optionsspalten (col-md-9). Über die generische Flex-Regel oben würden die leeren
 * Abstandsspalten mitwachsen und die Optionen gegeneinander versetzt umbrechen.
 * Daher diese Zeilen als ausgerichtetes Raster: Beschriftung über die volle Breite,
 * Optionen in gleich breiten, bündigen Spalten. Greift nur auf Zeilen mit
 * Checkboxen – die Zeitraum-Bereichszeile bleibt unberührt.
 */
#dialogAnwesenheitFilter .form-group .row.nomargin:has(input[type="checkbox"]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 6px 16px;
  align-items: center;
}

#dialogAnwesenheitFilter .form-group .row.nomargin:has(input[type="checkbox"]) > [class*="col-"] {
  width: auto;
  flex: none;
}

/* Beschriftung (Status / Anzeige) als Kopfzeile über den Optionen */
#dialogAnwesenheitFilter .form-group .row.nomargin:has(input[type="checkbox"]) > [class*="col-md-3"]:first-child {
  grid-column: 1 / -1;
  font-weight: 600;
}

/* leere Abstandsspalten zwischen den Optionen entfallen */
#dialogAnwesenheitFilter .form-group .row.nomargin:has(input[type="checkbox"]) > [class*="col-md-3"]:not(:first-child) {
  display: none;
}

/* Option = Kästchen + Text in einer Zeile */
#dialogAnwesenheitFilter .form-group .row.nomargin:has(input[type="checkbox"]) > [class*="col-md-9"] > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 400;
}

/* Mobil: Optionen einspaltig (volle Breite, kein Umbruch) und Kästchen für die
   Touch-Bedienung vergrößert. */
@media (max-width: 47.9375em) {
  #dialogAnwesenheitFilter .form-group .row.nomargin:has(input[type="checkbox"]) {
    grid-template-columns: 1fr;
    gap: 4px 16px;
  }

  #dialogAnwesenheitFilter .form-group .row.nomargin:has(input[type="checkbox"]) input[type="checkbox"] {
    width: 24px;
    height: 24px;
  }
}

/* ---------- Anmeldeart-Dialog (#anmArtDialog) ----------
 * Auswahl der Anmeldeart (Normal, Eltern-Kind, Kind, Mehrfach, Firma - hier werden
 * ggf. weitere Personen einbezogen). Die Optionen als gleichbreite, klar tappbare
 * Liste statt inhaltsbreiter, mittig wirkender Buttons. */
#anmArtDialog .form-group {
  margin: 0 0 8px;
}

#anmArtDialog .form-group:last-child {
  margin-bottom: 0;
}

#anmArtDialog .btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  font-weight: 600;
}

/* ---------- Bestätigungsdialog "Teilnehmer anmelden" (ma_anmelden.js) ----------
 * Der Dialog baut Label/Wert-Paare als col-md-3 + col-md-9 OHNE .row. Klassisch
 * (Bootstrap) stehen sie nebeneinander; im Lumen-Layout würden sie stapeln und
 * Label wie Wert sähen gleich aus (schwer lesbar). Hier wieder als zweispaltige
 * Liste mit gedämpftem Label. Präzise über das im ganzen Dialog wiederholte
 * label[for='kalwochnr'] gescopet, damit andere Dialoge unberührt bleiben. */
.ui-dialog-content .col-md-3:has(label[for="kalwochnr"]) {
  float: left;
  clear: left;
  width: 34%;
  padding: 3px 10px 3px 0;
}

.ui-dialog-content .col-md-3:has(label[for="kalwochnr"]) + .col-md-9 {
  float: left;
  width: 66%;
  padding: 3px 0;
  color: var(--ink);
}

.ui-dialog-content label[for="kalwochnr"] {
  margin: 0;
  color: var(--ink-3);
  font-weight: 600;
}

/* Das "Hinweise:"-Label ist eine Warnung (z. B. "Kurs hat bereits begonnen") und
   bleibt daher rot - die graue Label-Regel oben würde es sonst verschlucken. */
.ui-dialog-content label[for="kalwochnr"].maAnmeld_hinweise {
  color: var(--red);
}

/* Überschrift des Bestätigungsdialogs ("Hiermit melden Sie ... an") maßvoll halten
   und die Float-Liste darunter sauber abschließen. */
.ui-dialog-content > div > h1 {
  margin: 0 0 12px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

/* ===== Hinterlegungs-Auswahltabellen (z. B. "Bemerkung aus Hinterlegung wählen"
   im Klassenbuch): Die Zeilen sind klickbar (Auswahl per Klick, Übernahme per
   Doppelklick oder Ok). Hover-/Aktiv-Feedback lag bisher nur im klassischen
   style.css, das im Lumen nicht geladen wird - ohne sichtbare Markierung wirkte
   die Auswahl funktionslos. */
.ui-dialog table.hinterlegung tr.waehlbar {
  cursor: pointer;
}

.ui-dialog table.hinterlegung tr.waehlbar:hover > td,
.ui-dialog table.hinterlegung tr.waehlbar:hover > th {
  background: var(--bg);
}

.ui-dialog table.hinterlegung tr.waehlbar.active > td,
.ui-dialog table.hinterlegung tr.waehlbar.active > th {
  background: var(--teal-soft);
}

/* Auswahl-Akzent an der linken Kante der markierten Zeile */
.ui-dialog table.hinterlegung tr.waehlbar.active > :first-child {
  box-shadow: inset 3px 0 0 var(--teal);
}

/* ===== Mehrspaltige Hinterlegungs-Dialoge (Unit/Stufe/Keypoint/Hausarbeit,
   Kursorte, ...; project.js DisplayHinterlegungsDialogMultiCol[Filtered]):
   Ein Klick auf eine Zeile uebernimmt den Wert - das war den Zeilen nicht
   anzusehen. Der Schluesselwert links erscheint daher wie ein Link (teal),
   Hover/Fokus heben die ganze Zeile hervor. */
.ui-dialog-content tr.hinterlegung-waehlbar > td:first-child {
  color: var(--teal-d);
  font-weight: 600;
}

.ui-dialog-content tr.hinterlegung-waehlbar > td {
  transition: background-color 0.08s ease;
}

.ui-dialog-content tr.hinterlegung-waehlbar:hover > td,
.ui-dialog-content tr.hinterlegung-waehlbar:focus-visible > td {
  background: var(--teal-soft);
}

.ui-dialog-content tr.hinterlegung-waehlbar:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* ===== Hinterlegungs-Auswahldialoge (HinterlegungDialogBasis, z. B. Raum-,
   Verhaltens-Auswahl): Die ganze Zeile uebernimmt per Klick - das [+]-Symbol
   je Zeile ist ein redundantes Klickziel und entfaellt (samt leerer Spalte);
   die Suche filtert live beim Tippen, der Such-Button ist ueberfluessig. */
.ui-dialog-content .hinterlegung_search_button,
.ui-dialog-content .hl_zeile > td:first-child,
.ui-dialog-content table:has(.hl_zeile) thead th:first-child {
  display: none;
}

/* ===== Medien-Eintrag anlegen/aendern (Terminbearbeitung): Zeilen wie die
   uebrigen Dialog-Formulare - Label ueber dem Feld, Eingaben in Feld-Optik
   (das Markup bringt rohe, ungestylte Inputs ohne form-control mit). */
.ui-dialog-content .medienupdate {
  margin: 0 0 12px;
}

.ui-dialog-content .medienupdatelabel {
  display: block;
  margin: 0 0 4px;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--ink);
}

.ui-dialog-content .medienupdate input {
  width: 100%;
  min-width: 280px;
  padding: 9px 12px;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--ink);
}

.ui-dialog-content .medienupdate:has(> button.no-button-style > .hinterlegung-button-icon) input {
  padding-right: 48px;
}

/* ===== Checkbox-Auswahllisten (ul.addCheckbox, z. B. Medien-Hinterlegung der
   Terminbearbeitung): grosszuegige, klar bedienbare Zeilen statt gedraengter
   Checkbox-Label-Paare ohne Abstand. */
.ui-dialog-content ul.addCheckbox {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-dialog-content ul.addCheckbox > li + li {
  border-top: 1px solid var(--line-2);
}

.ui-dialog-content ul.addCheckbox label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  margin: 0;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.ui-dialog-content ul.addCheckbox label:hover {
  background: var(--bg);
}

.ui-dialog-content ul.addCheckbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--teal);
}

/* ===== mn-Listen-Dialoge (mnlisten.js: ReferentIn/Kooperationspartner/
   Veranstaltungsort/Dokument anlegen bzw. aendern): Die per JS erzeugten Zeilen
   (div > label.mnlabel + input) kamen ohne jeden Abstand und ohne Label-Stil. */
.ui-dialog-content div:has(> .mnlabel) {
  margin: 0 0 12px;
}

.ui-dialog-content .mnlabel {
  display: block;
  margin: 0 0 4px;
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--ink);
}

/* Checkbox-Zeilen (z. B. "Erstattung der Fahrtkosten"): Label und Kaestchen
   nebeneinander */
.ui-dialog-content div:has(> .mnlabel):has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-dialog-content div:has(> .mnlabel):has(> input[type="checkbox"]) > .mnlabel {
  margin: 0;
  order: 2;
}

.ui-dialog-content div:has(> .mnlabel):has(> input[type="checkbox"]) > input[type="checkbox"] {
  order: 1;
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}

/* ===== Dokument-Upload-Dialoge der Kursdetails (Reiter Dokumente: "Dokumente
   versenden" -> #uploadDokumentForm, Reiter Downloads: "Upload" ->
   #detailsDokumente, auch Bearbeiten-Dialog im MA-Tool): Die .form-row-Zeilen
   (Label-Spalte + Feld-Spalte) stapeln im Lumen ohne Bootstrap zu Label ueber
   Feld - wie die uebrigen Dialog-Formulare, nur fehlten Zeilenabstand und
   Label-Abstand zum Feld. */
#uploadDokumentForm .form-row,
#detailsDokumente .form-row {
  margin: 0 0 14px;
}

#uploadDokumentForm .control-label,
#detailsDokumente .control-label {
  display: block;
  margin: 0 0 4px;
}

/* Checkbox-Zeilen ("Freigeben fuer Firmen/Teilnehmer", "Freigabe durch einen
   Mitarbeiter ist noetig"): Kaestchen und Beschriftung nebeneinander statt
   gestapelt; das Kaestchen steht vor dem Text (Muster der uebrigen
   Dialog-Checkboxen, s. o.). */
#uploadDokumentForm .form-row:has(input[type="checkbox"]),
#detailsDokumente .form-row:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Die Spalten tragen width:100% und wuerden sonst 50/50 teilen - Beschriftung
   startete mitten im Dialog; beide auf Inhaltsbreite */
#uploadDokumentForm .form-row:has(input[type="checkbox"]) > [class*="col-"],
#detailsDokumente .form-row:has(input[type="checkbox"]) > [class*="col-"] {
  width: auto;
  flex: 0 0 auto;
}

#uploadDokumentForm .form-row:has(input[type="checkbox"]) > div:has(> input[type="checkbox"]),
#detailsDokumente .form-row:has(input[type="checkbox"]) > div:has(> input[type="checkbox"]) {
  order: -1;
  display: flex;
  align-items: center;
}

#uploadDokumentForm .form-row:has(input[type="checkbox"]) .control-label,
#detailsDokumente .form-row:has(input[type="checkbox"]) .control-label {
  margin: 0;
  cursor: pointer;
}

/* Datums- und Kostenfeld nicht dialogfuellend, "EUR" inline neben dem Feld
   (der Text steht als nackter Textknoten hinter dem Input) */
#detailsDokumente #detail_stand_dokumente {
  max-width: 10em;
}

#detailsDokumente .form-row > div:has(> #detail_kosten_dokumente) {
  display: flex;
  align-items: center;
  gap: 8px;
}

#detailsDokumente #detail_kosten_dokumente {
  max-width: 10em;
}

/* Schmale Viewports: auch Datums- und Kostenfeld ueber die volle Dialogbreite
   ("EUR" bleibt durch den Flex-Container inline neben dem Kostenfeld) */
@media (max-width: 47.9375em) {
  #detailsDokumente #detail_stand_dokumente {
    max-width: none;
  }

  #detailsDokumente #detail_kosten_dokumente {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Freigabe-Hinweis ("Das Dokument wird erst nach Freigabe ... angezeigt")
   als gedaempfter Hinweistext statt in Label-Optik */
#detailsDokumente div:has(> input[type="hidden"][name="detail_freigabenoetig_dokumente"]) > .label-like {
  font-weight: 500;
  color: var(--ink-2);
}

/* Radio-Optionen ("Download der Dokumente ist moeglich fuer") mit etwas Luft */
#detailsDokumente .form-row div:has(> .thinLabel) {
  margin: 4px 0;
}

/* Die Freigabe-Felder ("Freigeben", "Freigabe am", "von") stehen im Template alle
   in EINER .form-row. Deren Spalten stapeln im Lumen als Bloecke direkt aneinander,
   waehrend zwischen den uebrigen Feldern der 14px-Abstand der .form-row liegt - die
   beiden Beschriftungen klebten deshalb ohne Luft am Element darueber. Der Ausschluss
   der Kaestchen-Zeilen ist noetig, weil die weiter oben auf Flex umgestellt werden
   (dort wuerde ein oberer Abstand die Zeile verschieben). */
#detailsDokumente .form-row:not(:has(input[type="checkbox"])) > [class*="col-"]:not(:first-child):has(> label.control-label) {
  margin-top: 14px;
}

/* "von" ist ein reines Anzeigefeld: der Wert liegt im hidden Input daneben, der
   sichtbare span traegt nur .form-control und sah dadurch wie ein Eingabefeld aus -
   man versucht hineinzuschreiben. Optik der nicht bearbeitbaren Felder geben
   (form.css: .form-control[readonly]/.form_nichtbearbeitbar) und die Hoehe einer
   Feldzeile sichern: im Upload-Dialog ist das Feld immer leer und fiel sonst auf
   die halbe Hoehe zusammen (min-height wie bei .form-inline .form_nichtbearbeitbar). */
#detailsDokumente .freigabeVon {
  display: flex;
  align-items: center;
  min-height: calc(1.4em + 20px);
  background: var(--bg);
  color: var(--ink-2);
  cursor: default;
}

/* Klick-Feedback auf der ganzen Zeile */
.ui-dialog-content tr.hl_zeile {
  cursor: pointer;
}

.ui-dialog-content tr.hl_zeile > td {
  transition: background-color 0.08s ease;
}

.ui-dialog-content tr.hl_zeile:hover > td {
  background: var(--teal-soft);
}

/* ===== Hinterlegungs-Auswahl als LISTE (#hldialog) ==========================
 * KuferTools.DisplayHinterlegungsDialogAsList (project.js) baut
 * <ul><li class="hl_zeile"><a class="opt"><span class="text">…  - benutzt vom
 * Nachlassgrund und von den Kursorten der Terminsammelaenderung.
 * Das klassische Layout stylt das ueber "#hldialog ul li" (style.css); im Lumen
 * gab es dazu nichts, die Auswahl stand als nackte Textzeilen da: schwer zu
 * lesen und auf dem Telefon leicht daneben zu treffen.
 * Jede Zeile ist deshalb ein flaechiger Auswahlkasten mit eigener Trefferflaeche.
 * ========================================================================== */

#hldialog .ui-dialog-content ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Dieselbe Fassung zeigt an anderer Stelle alle Kursorte (Terminsammel-
     aenderung). Mit Kaesten je Zeile waere der Dialog dort ueber den Bildschirm
     hinausgewachsen: die Liste scrollt, der Abbrechen-Knopf bleibt sichtbar.
     jQuery UI setzt am Inhalt max-height:none, begrenzt also selbst nichts. */
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  /* Rollbalken bekommt eigenen Platz, damit er nicht auf den Kaesten liegt */
  scrollbar-gutter: stable;
}

/* Ohne Kopfzeile (pShowHeader = false) bleibt ein leeres <li> uebrig */
#hldialog .hldialog_header:empty {
  display: none;
}

#hldialog .hldialog_header {
  padding: 0 2px 4px;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#hldialog li.hl_zeile {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.08s ease, border-color 0.08s ease;
}

#hldialog li.hl_zeile:hover {
  background: var(--teal-soft);
  border-color: var(--teal);
}

/* Die Zeile ist per Tastatur erreichbar (project.js setzt tabindex/role) */
#hldialog li.hl_zeile:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  background: var(--teal-soft);
  border-color: var(--teal);
}

/* Das <a> hat kein href und ist nur Textbehaelter - lange Gruende duerfen
   umbrechen, sonst laeuft der Dialog auf schmalen Fenstern ueber. */
#hldialog li.hl_zeile > .opt {
  display: block;
  color: inherit;
  text-decoration: none;
  white-space: normal;
}

/* Touch: WCAG 2.5.8 verlangt 24px, angenehm sind 44px Zeilenhoehe. */
@media (pointer: coarse) {
  #hldialog li.hl_zeile {
    padding: 13px 14px;
  }
}