/* * Lumen Layout - wss-Formulare (Vollseiten-Formulare mit dynamischen wss-Feldern) * * Einheitliches Layout fuer alle Formulare, deren Feldzeilen aus der wss- * Konfiguration kommen (Persoenliche Daten, Kursvorschlag/-bearbeitung, * Bewerbungsformular, Wunschtermine, Urlaube, Termin-Formulare, Visitenkarten, * Raumreservierung, Apothekertag-Anmeldungen). Die Templates legen dazu ein * div.wss-felder um die wss-Feldzeilen-Sektion - fuer das klassische Layout * neutral, dort ist die Klasse ungestylt. * * Anatomie wie die Honorarabrechnung (honorarabrechnung.css): Seitenkopf und * Buttonleiste liegen auf dem Seitengrund, die Feldzeilen auf einer weissen * Karte. Die Buttonleiste bleibt direktes Formular-Kind und behaelt die * globale Andock-Mechanik aus form.css. * * Ab ausreichender Kartenbreite stehen die Zeilen in zwei Spalten; grosse * Freitexte (Textareas), Checkbox-/Datei-Zeilen, Zwischenueberschriften und * Statusmeldungen laufen ueber die volle Breite. Container-Query statt * Media-Query, damit dieselben Regeln unabhaengig vom Kontext funktionieren * (Vollseite heute, Dialog-Formulare als moeglicher zweiter Schritt). * Diese Datei ersetzt die frueheren formular-spezifischen Regeln fuer * #form_kursvorschlag / .kursplanung_zeile in form.css. */ /* Formular begrenzen - gilt fuer Karte UND (andockende) Buttonleiste. Das Formular ist zugleich der Query-Container fuer die Spaltenschaltung: die Karte selbst kann nicht ihr eigener Container sein (Container-Queries messen den naechsten VORFAHREN-Container). .form-karte ist das Pendant fuer die statisch getippten Kontakt-Formulare (Feedback, Nachricht an Einrichtung, Sammel-E-Mail/-SMS, ...) - sie teilen das Karten-Chrome, ihre eigenen Regeln liegen in kontaktform.css. */ #main-content form:has(.wss-felder), #main-content form:has(.form-karte) { container-type: inline-size; max-width: 68rem; } /* Karte um die Feldzeilen (Chrome wie .panel/.honabr-card) */ .wss-felder, .form-karte { padding: 18px 22px 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } /* Bootstrap-Clearfix-Trenner der (geteilten) Templates sind in Lumen ohne Funktion und waeren im Spalten-Raster leere Zellen */ .wss-felder > .clearfix, .form-karte .clearfix { display: none; } /* Einheitlicher Zeilenabstand fuer alle Feldzeilen (ersetzt die frueheren Einzelregeln fuer .kursvorschlag_zeile/.kursplanung_zeile) */ .wss-felder > div { min-width: 0; margin: 0 0 14px; } /* Sehr hohe wss-Textareas (rows=8) kompakter vorbelegen - per Ziehgriff weiterhin vergroesserbar */ .wss-felder textarea.form-control { height: 7rem; } /* ---------- Zwischenueberschriften ---------- * Der wss-Feldtyp "nur Label" liefert leeres Feld-Markup und dient als * Abschnittstitel. Erkannt wird er an der Klasse wss-ueberschrift, die * WssField::getZustandsklassen aus isUeberschrift() setzt. * * Frueher stand hier :not(:has(input, select, textarea, .form-control)) - also * "Zeile ohne Formularelement". Das war im Formular richtig, im Nur-Lesen-Modus * aber grundfalsch: dort hat KEINE Zeile ein Formularelement, weshalb jedes * Feld als Ueberschrift dargestellt wurde (Bestaetigungsseite Kursvorschlag). */ .wss-felder > div:has(.wss-label.wss-ueberschrift) { margin: 10px 0; padding-bottom: 6px; border-bottom: 1px solid var(--line); } .wss-felder > div:has(.wss-label.wss-ueberschrift) .control-label, .wss-felder > div:has(.wss-label.wss-ueberschrift) .label-like { font-size: 0.9375rem; font-weight: 700; color: var(--teal-d); } /* ---------- Nur-Lesen-Zeilen ---------- * Gleiche Anatomie wie im Formular - Beschriftung oben, Wert darunter an der * Stelle des Eingabefelds -, damit eine Zusammenfassung wie das Formular zu * lesen ist, aus dem sie stammt. Der Wert bekommt bewusst keinen Rahmen: Er * soll als Text lesbar sein, nicht als gesperrtes Feld. */ .wss-felder .wss-wert.wss-anzeige { display: block; min-height: 1.45em; padding: 7px 0 0; color: var(--ink); font-size: 0.875rem; line-height: 1.45; overflow-wrap: anywhere; } /* Der angezeigte Wert ist der in der Feldeinstellung hinterlegte Ersatztext ("Wenn leer" = [TEXT]...), keine Angabe des Anwenders - entsprechend ruhig setzen, damit beides unterscheidbar bleibt. */ .wss-felder .wss-wert.wss-anzeige.wss-ersatztext { color: var(--ink-3); font-style: italic; } /* Feine Trennlinie zwischen den Anzeigezeilen. Im Formular halten die Rahmen der Eingabefelder Beschriftung und Wert optisch zusammen; ohne sie stehen zwei Textbloecke im gleichen Abstand zueinander wie zur naechsten Zeile. Bewusst --line-2 statt --line, damit die Abschnittslinie der echten Zwischenueberschriften staerker bleibt - die sind daher ausgenommen. */ .wss-felder > div:has(.wss-wert.wss-anzeige):not(:has(.wss-label.wss-ueberschrift)) { padding-bottom: 11px; border-bottom: 1px solid var(--line-2); } /* Letzte Zeile ohne Linie - der Kasten schliesst mit seinem eigenen Rand ab. * Erkannt wird sie daran, dass ihr keine weitere Feldzeile mehr folgt (Clearfixe, * Statusmeldungen und lose col-Bloecke zaehlen nicht mit). Das ist unabhaengig * davon, ob ein Template hinter jede Zeile einen Clearfix setzt. * * Bewusst nur EINSPALTIG: Im Raster besteht die letzte Rasterreihe je nach * Feldzahl aus einer oder aus zwei Zellen, und CSS kann das nicht * unterscheiden. Entfernte man dort nur die Linie der letzten Zelle, bliebe sie * bei gerader Feldzahl unter der linken Nachbarzelle stehen - das sieht nach * Fehler aus. Zweispaltig schliesst die Karte deshalb mit einer durchgehenden * Linie ab, was sich als Abschluss liest. */ @container (max-width: 53.9375rem) { .wss-felder > div:has(.wss-wert.wss-anzeige):not(:has(~ div:not(.clearfix):not(.alert):not([class*="col-"]))) { padding-bottom: 0; border-bottom: 0; } } /* ---------- Checkbox-Zeilen als Options-Kasten ---------- Eine wss-Zeile mit einzelner Checkbox waere sonst ein einsames Kaestchen unter seinem Label (Label-ueber-Feld-Muster). Stattdessen wird die Zeile ein erkennbar klickbarer Kasten: Checkbox links, Beschriftung rechts, gewaehlt = teal gerahmt + gefuellt - dasselbe Muster wie die Options- Kaesten der Listen-Einstellungen (listensettings.css). Gilt fuer regulaere wss-Checkboxen (.formular_checkbox) UND die Checkboxen der "Frei waehlbaren Eingabefelder": deren Responsive-Variante (HtmlFreiWaehlbaresEingabefeldResponsive) traegt beide Klassen, abgesichert wird zusaetzlich auf .freifeld_checkbox selektiert. Sonderfelder mit mehreren Inline-Checkboxen (z. B. Wunschtermin-Wochentage) tragen keine der Klassen und behalten ihr eigenes Layout. */ .wss-felder > div:has(input[type="checkbox"].formular_checkbox), .wss-felder > div:has(input[type="checkbox"].freifeld_checkbox) { /* row-reverse stellt die Feld-Spalte (Checkbox) VOR die Label-Spalte - rein visuell, DOM- und Vorlese-Reihenfolge bleiben unveraendert. position: relative ist der Bezug fuer das Label-Overlay (siehe unten). */ position: relative; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); transition: border-color 0.12s, background-color 0.12s; } /* Die GESAMTE Kastenflaeche schaltet die Checkbox: ein unsichtbares Label-Overlay deckt den Kasten ab (das Label ist ein