und |
stehen — dieselbe Einschraenkung wie bei den Mahngebuehren. */
.crs-zeilen {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.crs-zeile {
display: grid;
gap: 0.35rem;
align-items: center;
}
/* Anrede, Name, Vorname, Geburtsdatum, Ticket, Preis, Tax, Gebuehr */
.crs-zeile.cols-pax {
grid-template-columns: 5rem minmax(0, 1.3fr) minmax(0, 1.3fr) 8.5rem minmax(0, 1fr) 6.5rem 6.5rem 6.5rem;
}
/* Kopfzeile: dasselbe Raster, damit Beschriftung und Feld untereinander stehen.
Kleiner und gedaempft — sie ist Beschriftung, nicht Inhalt. */
.crs-zeile.crs-kopf {
padding: 0 0.5rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* Eine zu lange Beschriftung wird ABGESCHNITTEN, nicht in die Nachbarspalte
geschoben: sonst steht sie ueber dem falschen Feld, und das ist schlimmer als
ein fehlendes Wortende. */
.crs-zeile.crs-kopf > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Der Text der Kopfzelle folgt der Ausrichtung ihrer Spalte: ueber einem
rechtsbuendigen Betrag steht die Beschriftung ebenfalls rechts. */
.crs-zeile.crs-kopf .text-right {
text-align: right;
}
/* Gesellschaft, Nummer, von, nach, Datum, ab, an, Klasse
Die erste Spalte ist breiter als ihr Feld ("XQ") — sie muss die Beschriftung
tragen. Vorher lief "GESELLSCHAFT" in die naechste Spalte hinein. */
.crs-zeile.cols-flug {
grid-template-columns: 6.5rem 5.5rem 4rem 4rem 8.5rem 7.5rem 7.5rem 4rem;
}
/* Position, Einzelpreis, Anzahl, Gesamt.
Die Position nimmt den Rest: dort steht "DTM-ADB LUFTVERKEHRSSTEUER", und
sie ist die einzige Spalte, deren Laenge nicht vorhersehbar ist. */
/* Verkauf und Einkauf stehen NEBENEINANDER (.crs-preis-reihe). Jede Seite hat
damit nur die halbe Dialogbreite, und die Spalten sind entsprechend enger:
die Position nimmt, was uebrig ist, die drei Zahlenspalten stehen fest.
Keine Leerspur wie bei den breiten Rastern darueber — hier ist nichts
uebrig, was aufzunehmen waere. */
.crs-zeile.cols-preis {
grid-template-columns: minmax(0, 1fr) 6.5rem 4rem 6.5rem;
}
/* Betraege rechtsbuendig — Kommastellen stehen damit untereinander. */
.crs-zeile.cols-preis input.feld-betrag,
.crs-zeile.cols-preis input.feld-zahl {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Der Gesamtpreis ist zur Ansicht: er wird beim Speichern aus Einzelpreis mal
Anzahl neu gerechnet. Sichtbar unbedienbar ist ehrlicher als ein Feld, das
sich beschreiben laesst und den Wert dann verwirft. */
.crs-zeile.cols-preis input[readonly] {
background: var(--color-bg);
color: var(--color-text-muted);
border-style: dashed;
}
.crs-zeile.crs-summe {
padding: 0.35rem 0.5rem 0;
border-top: 1px solid var(--color-border);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.crs-zeile.crs-summe > span:last-child {
text-align: right;
padding-right: 0.6rem;
}
.crs-zeile input,
.crs-zeile select {
width: 100%;
font-family: inherit;
font-size: 0.85rem;
}
/* Schmales Fenster: die Zeilen brechen um. Die Zuordnung geht dabei verloren,
aber ein waagerechtes Rollen im Dialog ist schlimmer. */
@media (max-width: 1100px) {
.crs-zeile.cols-pax,
.crs-zeile.cols-flug {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ---------------------------------------------------------------------------
CRS-Uebernahme: der Knopf "Zwischenablage einlesen" (bookings/crs-import.php)
Eine Zeile ueber der Liste, rechtsbuendig wie die Werkzeugzeilen der Listen.
--------------------------------------------------------------------------- */
/* Der Knopf "Zwischenablage einlesen" steht LINKS: er ist der Einstieg in diese
Maske — hier faengt die Arbeit an, und der Blick beginnt links. Die
Zeilenaktionen (uebernehmen, loeschen) sitzen dagegen rechts an ihrer Zeile. */
.crs-clipboard-zeile {
display: flex;
justify-content: flex-start;
margin-bottom: 1rem;
}
/* ---------------------------------------------------------------------------
Mahngebuehren im Dialog "Zahlungsdaten bearbeiten"
Stufe, Datum, Betrag, Bedienung — je Zeile ein Formular (.row-grid).
--------------------------------------------------------------------------- */
.row-grid-head.cols-mahn,
.row-grid.cols-mahn {
grid-template-columns: 3rem minmax(8rem, 1fr) 8rem 4.75rem;
}
.mahn-liste {
/* Der Dialog hat oben schon einen gepolsterten Bereich; dieser zweite
braucht nur die Trennlinie dazwischen. */
border-top: 1px solid var(--color-border);
padding-top: 1rem;
}
.mahn-liste h3 {
margin: 0 0 0.5rem;
font-size: 0.95rem;
}
/* Im Mahnung-Dialog steht die Liste des Bisherigen unter den Eingabefeldern —
sie braucht Abstand, sonst klebt der Spaltenkopf am Feld darueber. */
#mahnung-dialog .table-scroll {
margin-top: 1rem;
}
/* ---------------------------------------------------------------------------
Dialog "Angaben der Kanzlei" (accounting/fibu-export.php)
Sechs kurze Felder — die 920 px der grossen Dialoge waeren hier eine leere
Flaeche, und die Knopfreihe stand ohne Seitenrand am Rand der Box.
--------------------------------------------------------------------------- */
.fibu-dialog-box {
width: min(640px, 100%);
}
/* Der DOKUMENT-Dialog ist breiter und hoeher als der FIBU-Dialog, obwohl er
dessen Kasten benutzt: er traegt drei Belegzeilen mit je drei Knoepfen und
darunter den Block der E-Rechnung. Bei 640px brach die Knopfreihe um, und der
Kasten rollte innen, obwohl auf dem Schirm Platz war.
max-height statt einer festen Hoehe: auf einem kleinen Notebook soll er nicht
ueber den Rand hinauslaufen. */
/* Dieser Dialog beginnt HOEHER als die uebrigen: der Schleier haelt oben 4rem
Abstand (fuer kleine Dialoge richtig, damit sie nicht am Fensterrand kleben),
und die kosten hier Hoehe, die der Inhalt braucht. 2rem oben und unten geben
dem Kasten die ganze Fensterhoehe minus 4rem — mehr ist nicht zu holen, ohne
dass sein unterer Rand aus dem Bild laeuft. */
#dokument-dialog {
padding-top: 1rem;
padding-bottom: 1rem;
}
.dokument-dialog-box {
width: min(860px, 100%);
/* Die ganze verfuegbare Hoehe: Fenster minus die 1rem Schleierabstand oben
und unten. MEHR IST NICHT ZU HOLEN — ohne diesen Rest lief der untere Rand
des Kastens aus dem Fenster.
Vorher 88vh bei 4rem Abstand: die Grenze lag damit mitten im Feldsatz der
E-Rechnung, und die Zeile mit Steuernummer und IBAN war nur durch Rollen
zu lesen. Auf einem 900px hohen Fenster sind es jetzt 868 statt 792 —
76 Pixel mehr, gut zwei Textzeilen. */
max-height: calc(100vh - 2rem);
/* Und wenn die Grenze doch greift, rollt der Kasten INNEN. Mit
`overflow: visible` (der Vorgabe) laeuft der Inhalt ueber den weissen
Grund hinaus und steht auf dem grauen Schleier — sichtbar, aber nicht mehr
erreichbar, weil der Hintergrund den Rollbefehl bekommt. */
overflow-y: auto;
}
/* Etwas mehr Luft unter der letzten Zeile als daneben: unter dem Feldsatz der
E-Rechnung steht noch ein Hinweissatz, und mit den gleichen 1.25rem wie oben
klebte er am unteren Rand. */
.dokument-dialog-box .modal-body {
padding-bottom: 1.75rem;
}
.fibu-dialog-hinweis {
/* form-hint bringt margin-top mit; im Dialog steht der Hinweis oben und
braucht stattdessen Abstand nach UNTEN zu den Feldern. */
margin: 0 0 1.25rem;
}
/* Festschreibung im FIBU-Dialog: Ankreuzfeld UND Text in einer Zeile, nicht
untereinander wie die Feldreihen darueber. */
.fibu-festschreibung {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
font-size: 0.85rem;
color: var(--color-text);
}
.fibu-festschreibung input {
width: auto;
}
/* Stern hinter der Beschriftung eines Pflichtfeldes. Kraeftige Farbe, aber keine
eigene Zeile und kein Symbol: er soll die Beschriftung nicht auseinanderziehen
und im Ausdruck erhalten bleiben. */
.pflicht-stern {
/* Abstand ueber margin, NICHT als Leerzeichen im Text: ein Leerzeichen ist
eine Umbruchstelle, und in den schmalen Spalten der Unterbringungsreihe
("Anzahl", "Erwachsene") rutschte der Stern dadurch in eine zweite Zeile
und machte die ganze Reihe 20 Pixel hoeher. */
margin-left: 0.15rem;
color: var(--color-danger-text);
font-weight: 700;
}
/* Zeilenzahl neben dem Blocktitel — auf einen Blick, ob der Block belegt ist. */
.block-editor-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
height: 1.5rem;
padding: 0 0.4rem;
border-radius: var(--radius-pill);
background: var(--color-surface-alt);
color: var(--color-text-muted);
font-size: 0.78rem;
font-weight: 600;
}
.block-rows {
margin-top: 0.9rem;
}
/* Die einzeilige Form uebernimmt die festen Spaltenbreiten des Wizards; mit
Leistungsnummer und zwei Aktionsknoepfen ist eine Flugzeile rund 71rem breit
und passt auf schmaleren Bildschirmen nicht in den Inhaltsbereich. Der Bereich
scrollt deshalb selbst — vorher tat das die Tabellenhuelle. Die Felder statt-
dessen zu quetschen waere schlechter: Uhrzeiten und Datum brauchen ihre Breite.
Unter 1200px greift weiter unten der Umbruch auf zwei Spalten. */
.block-editor .block-rows,
.block-editor .block-editor-new {
overflow-x: auto;
}
/* Die einzeiligen Formulare (Flug, Preise) stehen direkt untereinander. */
.block-rows > .row-grid + .row-grid {
margin-top: 0.5rem;
}
/* Speichern und Löschen als Paar am Zeilenende. */
.row-actions {
display: flex;
gap: 0.35rem;
align-items: center;
}
.row-action-save {
color: var(--color-primary);
}
.row-action-save:hover {
background: var(--color-primary-soft);
border-color: var(--color-primary);
}
/* Leistungsnummer im Kopf der mehrreihigen Karten — kompakt, damit Titel,
Auswahl und Knöpfe in eine Zeile passen. */
/* ---------------------------------------------------------------------------
Laufnummer im Kopf einer Blockzeile — GANZ VORNE, wie die erste Spalte der
einzeiligen Form (Flug, Preiszeilen). Feste Breite, damit die Nummer bei allen
Zeilen des Blocks an derselben Stelle steht, auch wenn eine zweistellig ist.
--------------------------------------------------------------------------- */
.block-lfnr-badge {
min-width: 2.25rem;
text-align: center;
flex-shrink: 0;
}
/* Neue Zeile: dieselbe Spalte, dasselbe Abzeichen. Die Nummer ist nicht
eingebbar — sie kommt aus der Leistungsauswahl oben (siehe
_block-editor.php und _leistung-auswahl.php). */
.block-lfnr-neu {
flex-shrink: 0;
}
/* Flugzeile im Editor: wie .cols-flug im Wizard, aber mit Leistungsnummer vorn
und zwei Aktionsknoepfen statt einem hinten.
DIESE Regel ist staerker als die allgemeine .cols-flug weiter oben (drei
Klassen gegen zwei) — wer dort Breiten aendert, aendert das Buchungsdetail
NICHT mit. Genau daran lag der ueberlappende Kopf: die Korrektur oben griff,
hier stand weiter das alte Raster.
ZWEI Aenderungen:
PNR hat ein MINDESTMASS (4.5rem statt minmax(0, 1fr)). Die festen Spuren waren
zusammen breiter als die Karte; eine Spur mit Untergrenze 0 faellt dann auf
null zusammen, und die Beschriftung "PNR" lag ueber "Klasse".
Die uebrigen Spuren sind knapper und nehmen die Marken des Design-Systems fuer
Datum und Uhrzeit — ein Datumsfeld ist ueberall in der Anwendung gleich breit.
Passt die Zeile trotzdem nicht, ROLLT die Karte waagerecht (.flug-karte,
overflow-x). Vorher lief sie einfach ueber den Rand hinaus: die beiden
Zeilenknoepfe am Ende waren dann nicht mehr zu sehen und nicht erreichbar. */
/* ZWEI BREITEN FUER DIESELBEN SPALTEN — und das ist der Kern:
Die UEBERSICHTSZEILE (.block-summary-row) und ihre Kopfzeile in der Flugkarte
zeigen TEXT: "26.04.2025", "10:15", "TK". Die NEU-ZEILE darunter zeigt
EINGABEFELDER: ein date-Feld traegt das Kalendersymbol, ein time-Feld die Uhr,
beide brauchen deutlich mehr Platz.
Bisher galten fuer beide die Feldbreiten. Die Uebersichtszeile war damit rund
80 px breiter als die Karte, und was hinten herausfiel, war die Aktionsspalte:
der Bearbeiten-Knopf stand noch halb im Bild, der Loeschen-Knopf gar nicht
mehr. Genau das war zu sehen.
Die Aktionsspalte ist ausserdem von 4.75 auf 5rem gewachsen: zwei
Symbolknoepfe zu je 36 px plus 0.35rem Abstand sind 78 px, in 76 px passten
sie nicht. */
.block-editor .row-grid-head.cols-flug,
.block-editor .row-grid.cols-flug {
/* FLUGNUMMER 6.5rem statt 5: gemessen brauchte die Ueberschrift 88 px und
hatte 80 — die acht Pixel liefen in den Spaltenabstand, im Kopf stand
"FLUGNUMMERPNR" als ein Wort. Dieselbe Korrektur wie an der allgemeinen
Regel weiter oben; sie greift hier NICHT mit (drei Klassen gegen zwei),
und genau davor warnt der Kommentar darueber. */
grid-template-columns: 3rem 6.5rem 4rem 4rem 4.5rem 4.5rem 4rem 6.5rem
minmax(4.5rem, 1fr) 4rem 3rem 3.5rem 5rem;
min-width: 56.5rem;
justify-content: start;
}
/* Neu-Formular: EINGABEFELDER, also die Feldbreiten des Design-Systems — und
ohne Aktionsspalte, der Speichern-Knopf steht eine Zeile darunter. */
.block-editor .row-grid-head.cols-flug.row-grid-ohne-aktion,
.block-editor .row-grid.cols-flug.row-grid-ohne-aktion {
grid-template-columns: 3.5rem var(--feld-datum) 4rem 4rem var(--feld-zeit) var(--feld-zeit)
4.5rem 7rem minmax(4.5rem, 1fr) 4rem 3.5rem 4rem;
min-width: 62rem;
}
/* Preiszeile im Editor: zusätzlich zum Wizard der Rabattpreis (RB_PREIS), weil er
bei Bestandsdaten vom berechneten Wert abweichen kann und dann sichtbar
bleiben muss. */
.block-editor .row-grid-head.cols-preis-edit,
.block-editor .row-grid.cols-preis-edit {
grid-template-columns: 4rem minmax(0, 1fr) 5.5rem 3.5rem 6rem 5rem 6rem 3rem 4.75rem;
}
/* Leistungen: Übersichtszeile mit Lfnr, Reiseart, PNR, Zielgebiet, Zeitraum,
Summe und den beiden Knöpfen — das vollständige Formular klappt darunter auf
(.block-detail). Zeitraum und Summe sind reine Anzeige, sie werden hier nicht
bearbeitet. Das Zielgebiet waechst mit, der Rest steht fest. */
.block-editor .row-grid-head.cols-leistung,
.block-editor .row-grid.cols-leistung {
grid-template-columns: 3.5rem 6.5rem 6.5rem 7rem minmax(0, 1fr) 6.75rem 6.75rem 7.5rem 4.75rem;
}
/* Die Übersichtszeile enthält Text, keine Eingabefelder: etwas Luft und eine
Trennlinie, damit die Zeilen als Liste lesbar bleiben. */
.block-summary-row {
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-border);
font-size: 0.9rem;
}
.block-summary-row > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
Auswahl einer Leistung (_leistung-auswahl.php): die angeklickte Zeile
bestimmt, welche Detailblöcke darunter stehen. Sie muss deshalb erkennbar
bleiben, auch wenn man weiter unten arbeitet und sie aus dem Blick gerät.
--------------------------------------------------------------------------- */
.block-summary-row[data-leistung] {
cursor: pointer;
}
.block-summary-row[data-leistung]:hover {
background: var(--color-surface-alt, rgba(99, 102, 241, 0.04));
}
.block-summary-row[data-leistung]:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.block-summary-row.leistung-aktiv {
/* Farbige Kante links statt eines Rahmens: der Rahmen würde die Zeile um
seine Breite verschieben und das Spaltenraster gegen die Kopfzeile
verrutschen lassen. */
box-shadow: inset 3px 0 0 0 var(--color-primary);
background: var(--color-surface-alt, rgba(99, 102, 241, 0.06));
font-weight: 600;
}
/* Aufgeklappter Bereich unter einer Übersichtszeile.
EIN Rahmen um alles, was zu dieser Leistung gehört: ihre Felder UND ihre
Verkaufs- und Einkaufspreise. Der Rahmen sitzt deshalb hier und nicht am
Formular — die Preiszeilen sind eigene Formulare (HTML erlaubt keine
Verschachtelung) und standen vorher sichtbar außerhalb des Rahmens, als
dritter und vierter Kasten unter dem der Leistung.
Flächenfarbe wie eine Leistung im Wizard (.wizard-row): grau, damit der offene
Bereich sich von der Liste darüber abhebt. */
.block-detail {
display: none;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg);
padding: 0.9rem 1rem 1rem;
margin: 0.9rem 0;
}
.block-detail.visible {
display: block;
}
/* Das Formular der Leistung trägt in diesem Bereich keinen eigenen Rahmen und
keine eigene Fläche mehr: beides gehört jetzt dem Bereich als Ganzem. */
.block-detail > form.wizard-row {
border: 0;
background: none;
padding: 0;
margin-top: 0;
}
/* Einkaufspreise führen kein "Zeigen" — eine Spalte weniger. */
.block-editor .row-grid-head.cols-preis-edit.ohne-zeigen,
.block-editor .row-grid.cols-preis-edit.ohne-zeigen {
grid-template-columns: 4rem minmax(0, 1fr) 5.5rem 3.5rem 6rem 5rem 6rem 4.75rem;
}
/* Preiszeilen INNERHALB einer Leistung: ohne Lfnr-Spalte, weil die Leistung schon
durch ihre Gruppe benannt ist. Sie stehen zu zweit nebeneinander (Verkauf/Einkauf)
und damit in etwa halber Breite — deshalb schmaler als im Blockeditor. */
/* Die Bezeichnung hat eine MINDESTbreite, keine reine 1fr-Spalte: die acht
festen Spalten daneben füllen die halbe Breite fast aus, und 1fr fiel dadurch
auf wenige Pixel zusammen — das Eingabefeld war rund 30 px breit und die
Spaltenköpfe liefen ineinander ("BezeichnuEinzelpreis"). Wird es wirklich zu
eng, scrollt der Block waagerecht (.vk-ek-block: overflow-x: auto), statt eine
Spalte unlesbar zu machen. */
.vk-ek-pair .row-grid-head.cols-preis-lfnr,
.vk-ek-pair .row-grid.cols-preis-lfnr {
display: grid;
gap: 0.4rem;
align-items: center;
grid-template-columns: minmax(7rem, 1fr) 4.75rem 3rem 5rem 4.25rem 5rem 2.5rem 4.75rem;
}
/* Einkaufspreise führen kein "Zeigen" — eine Spalte weniger. */
.vk-ek-pair .row-grid-head.cols-preis-lfnr.ohne-zeigen,
.vk-ek-pair .row-grid.cols-preis-lfnr.ohne-zeigen {
grid-template-columns: minmax(7rem, 1fr) 4.75rem 3rem 5rem 4.25rem 5rem 4.75rem;
}
/* Verkauf und Einkauf nebeneinander im aufgeklappten Bereich der Leistung. */
.vk-ek-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
}
/* Verkauf und Einkauf sind zwei eigene Bloecke IM Rahmen der Leistung: eigene
weisse Flaeche auf dem grauen Grund, eigener Rahmen, Kopfzeile mit Trennlinie.
Ohne das gingen sie in der grauen Flaeche unter — man sah eine lange Reihe von
Feldern und musste an den Ueberschriften ablesen, wo der eine Block endet und
der andere beginnt. Der GEMEINSAME Rahmen bleibt der der Leistung. */
.vk-ek-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.6rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-border);
}
.vk-ek-title {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 600;
}
/* Das Symbol der Kopfzeile in der Kennfarbe — dasselbe Mittel, mit dem sich die
Abschnittsueberschriften der Maske voneinander abheben. */
.vk-ek-title .icon {
color: var(--color-primary);
}
/* Summe der Zeilen — bei den Verkaufspreisen der Betrag, der als VER_SUMME in der
Leistung steht. Schiebt den Hinzufügen-Knopf ans Ende. */
.vk-ek-sum {
margin-left: auto;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text-muted);
}
.vk-ek-pair .row-grid-head {
font-size: 0.72rem;
}
.vk-ek-pair .row-grid + .row-grid {
margin-top: 0.4rem;
}
/* Untereinander statt nebeneinander, solange nicht genug Breite da ist.
Die Grenze liegt bei 1700 px und nicht bei 1400: eine Preiszeile hat neun
Spalten, davon acht mit fester Breite (zusammen gut 500 px). Zu zweit
nebeneinander blieb der Bezeichnung darunter so wenig, dass der Block
waagerecht scrollen musste — untereinander hat sie die ganze Breite. */
@media (max-width: 1700px) {
.vk-ek-pair {
grid-template-columns: minmax(0, 1fr);
}
}
/* Die Leistungsauswahl in der einzeiligen Form muss in ihre schmale Spalte
passen, ohne das Raster zu sprengen. */
.block-editor .row-grid > select {
min-width: 0;
padding: 0.5rem 0.35rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-text);
font-family: inherit;
font-size: 0.9rem;
}
/* Formular für eine neue Zeile. Bewusst NICHT .edit-row: das ist ein div, und
.edit-row.visible würde es zur Tabellenzeile machen. */
.block-editor-new {
display: none;
margin-top: 0.9rem;
padding-top: 0.9rem;
border-top: 1px solid var(--color-border);
}
.block-editor-new.visible {
display: block;
}
/* Neu-Formular eines Leistungsblocks auf derselben Flaeche wie das
Aufklappformular einer bestehenden Zeile (.block-detail) — dieselben Werte,
damit "neu anlegen" und "bearbeiten" gleich aussehen.
Die obere Trennlinie entfaellt dabei: der Rahmen der Karte leistet, was sie
leisten sollte, und beides zusammen waere eine Linie direkt ueber einer
Rahmenkante. */
.block-editor-new-karte {
/* border ersetzt die border-top der Grundregel — alle vier Seiten, damit es
eine Karte ist und keine Linie darueber. */
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg);
padding: 0.9rem 1rem 1rem;
/* Passt die einzeilige Flugzeile nicht (sie hat ein Mindestmass von
56.5rem), rollt die Karte waagerecht — Kopfzeile und Eingabezeile
gemeinsam, weil beide darin liegen. Dieselbe Loesung wie bei den
bestehenden Zeilen darueber (.flug-karte). Vorher lief die Zeile aus der
Karte hinaus, und der Speichern-Knopf sass unter dem Nichts. */
overflow-x: auto;
}
/* Folgt der Neu-Bereich DIREKT auf die Kopfzeile, gibt es keine Zeilen zwischen
ihnen — dann waere seine obere Trennlinie die zweite unmittelbar unter der des
Kopfes. Zwei Linien im Abstand von zwei Millimetern lesen sich als Fehler.
Der Nachbar-Selektor trifft genau diesen Fall: sobald eine Zeile dazwischen
steht, greift die Regel nicht mehr und die Trennlinie ist wieder richtig. */
.vk-ek-head + .block-editor-new {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
/* Preisblöcke stehen zu zweit nebeneinander (siehe .detail-info-row) und dürfen
die Zeile nicht sprengen. */
.block-editor-compact {
min-width: 0;
}
/* Auf schmalen Fenstern taugen die festen Spaltenbreiten nicht mehr: die Zeile
wird zum zweispaltigen Raster, die Beschriftungen der Kopfzeile entfallen
(sie stehen dann nicht mehr über den passenden Feldern). */
@media (max-width: 1200px) {
/* :not(.row-grid-ohne-aktion) — die Kopfzeile des NEU-Formulars bleibt.
Seine Zeile bricht naemlich nicht um: sie hat eine eigene Regel mit vier
Klassen (.block-editor .row-grid.cols-flug.row-grid-ohne-aktion) und
behaelt ihre zwoelf Spalten in jeder Breite. Ohne diese Ausnahme stand
das Formular unter 1200 px wieder ohne Beschriftungen da — derselbe
Fehler wie zwischen 1200 und 1400, nur eine Stufe tiefer. Gerollt wird
dann waagerecht, Kopf und Zeile gemeinsam
(.block-editor-new-karte, overflow-x). */
.block-editor .row-grid-head.cols-flug:not(.row-grid-ohne-aktion),
.block-editor .row-grid-head.cols-preis-edit,
.block-editor .row-grid-head.cols-preis-edit.ohne-zeigen,
.block-editor .row-grid-head.cols-leistung {
display: none;
}
/* Auch hier :not(.row-grid-ohne-aktion) — und nicht nur wegen der Spalten:
diese Regel gibt der Zeile ausserdem Polster und Rahmen. Beim
NEU-Formular, dessen Spalten eine Regel mit vier Klassen festhaelt, kam
davon nur das Polster durch — die Eingabezeile sass 13 px weiter rechts
als ihre Kopfzeile darueber. Gemessen bei 1150 px: Kopf ab 314, Zeile ab
327. */
.block-editor .row-grid.cols-flug:not(.row-grid-ohne-aktion),
.block-editor .row-grid.cols-preis-edit,
.block-editor .row-grid.cols-preis-edit.ohne-zeigen,
.block-editor .row-grid.cols-leistung {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg);
}
}
/* ---------------------------------------------------------------------------
Bestätigungsfenster (partials/confirm-dialog.php)
Ersetzt die Systemabfrage confirm() im ganzen Programm.
--------------------------------------------------------------------------- */
/* Anders als die Auswahl-Popups mittig statt oben: eine Rückfrage ist kurz und
soll dort stehen, wo der Blick ohnehin ist. */
.confirm-dialog {
align-items: center;
padding: 1rem;
}
.confirm-dialog-box {
width: min(520px, 100%);
}
/* Etwas mehr Luft um die Frage als in den Auswahl-Popups: hier steht ein einzelner
Satz, der sonst am Rand klebt. */
.confirm-dialog .modal-body {
padding: 1.5rem;
}
.confirm-dialog-text {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text);
}
/* .modal-foot bringt nur padding-top mit — im Wizard sitzt es innerhalb von
.modal-body und erbt dessen seitliche Polsterung. Hier steht es direkt in der
Box, deshalb die Polsterung ausdrücklich. Ohne sie kleben die Knöpfe am unteren
und rechten Rand. */
.confirm-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 0;
padding: 1.25rem 1.5rem;
}
/* ---------------------------------------------------------------------------
Dialog "Zahlung erfassen" (_zahlung-dialog.php). Baut auf .modal-* auf, setzt
nur die Breite und die Knopfreihe — die Felder stehen in .form-grid-Rastern
wie in den uebrigen Masken.
--------------------------------------------------------------------------- */
.zahlung-dialog-box {
width: min(720px, 100%);
}
/* Zahlungsdaten: FUENF Felder in einer Zeile (Anzahlung, ihre Frist, die Frist
der Restzahlung, Rabatt, Gebuehr). Mit 720px blieben davon rund 125px je
Spalte — ein Datumsfeld mit Kalenderzeichen steht darin am Rand des
Lesbaren. */
#zahlungsdaten-dialog .zahlung-dialog-box {
width: min(980px, 100%);
}
/* ---------------------------------------------------------------------------
Frist der OPTION im Reisedatenblock (bookings/detail.php).
Die Zeile steht als letztes dt/dd-Paar in der Beschreibungsliste der
Reisedaten und ist die einzige darin, die man aendern kann. Damit sie wie
eine Zeile der Liste aussieht und nicht wie ein eingesetztes Formular:
Datum und Speicherzeichen NEBENEINANDER, kein eigener Rahmen, keine eigene
Beschriftung (die steht im und traegt damit dieselbe Rasterspalte wie
"Gebucht am" darueber).
.form-grid liefert nur die Feldgestaltung (Rahmen, Polsterung, Fokus); das
display: grid daraus wird hier ueberschrieben.
--------------------------------------------------------------------------- */
.option-frist {
display: flex;
align-items: center;
gap: 0.4rem;
}
/* Das Datumsfeld nicht ueber die ganze Spaltenbreite ziehen — es braucht so
viel, wie ein Datum braucht, und das Zeichen sitzt direkt daneben.
Der Waehler `.form-grid.option-frist` ist genauso stark wie die allgemeine
Feldregel oben (`.form-grid input:not([type="checkbox"]):not([type="radio"])`)
und steht spaeter in der Datei — mit `.option-frist input[type="datetime-local"]`
allein blieb die Polsterung von 0.5rem stehen und das Feld war 37px hoch.
Der Typ ist ein datetime-local, seit OPT_DATUM ein DATETIME ist. */
.form-grid.option-frist input[type="datetime-local"] {
/* Flacher als die Felder im Wizard (0.5rem/0.9rem): die Zeile soll so hoch
bleiben wie die Listenzeilen darueber. */
padding: 0.15rem 0.4rem;
font-size: 0.85rem;
}
/* Das Speicherzeichen kleiner als die 28px der Listen: hier steht es in einer
Textzeile und nicht in einer Tabellenzeile — mit 28px war die Zeile der
Option um sieben Pixel hoeher als jede andere Zeile der Liste. */
.option-frist .row-action {
width: 22px;
height: 22px;
}
.option-frist .row-action .icon {
width: 14px;
height: 14px;
}
/* Beschriftung und Wert MITTIG zueinander: die letzte Zeile dieser Liste
traegt ein Eingabefeld und ist damit hoeher als eine Textzeile. Ohne das
sass "Option gueltig bis" am oberen Rand seiner Zelle und stand sichtbar
ueber dem Datum daneben. */
.reisedaten-liste {
align-items: center;
}
/* ---------------------------------------------------------------------------
Lieferantenzahlung: Auswahlgitter der Leistungen oben im Dialog
(_lieferantenzahlung-dialog.php). Eine Zahlung gehoert zu genau einem
b_vorgang; die Zeile ist das Auswahlfeld.
--------------------------------------------------------------------------- */
/* Der Dialog traegt die Leistungstabelle und ist deshalb breiter als der
Kundendialog — mit 720 px stand die Tabelle unter einem Balken. */
#lieferantenzahlung-dialog .zahlung-dialog-box {
width: min(1040px, 100%);
}
/* Dokument-Historie: dieselbe Begruendung. Die Zeile traegt Datum, Art, Nummer,
Betrag und zwei Knoepfe, und beim Senden klappt darunter noch eine Adresszeile
auf — mit 720 px brach die Art auf drei Zeilen um. */
#dokument-historie-dialog .zahlung-dialog-box {
width: min(1040px, 100%);
}
/* Hoehe begrenzt: eine Buchung kann viele Leistungen haben, und dann waere die
Tabelle der ganze Dialog und die Felder darunter ausser Sicht. */
.lz-leistungen {
max-height: 13rem;
overflow-y: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius);
margin-bottom: 1rem;
}
.lz-leistungen .data-table {
font-size: 0.82rem;
}
.lz-leistung {
cursor: pointer;
}
.lz-leistung:hover {
background: var(--color-surface-alt, rgba(99, 102, 241, 0.04));
}
/* Die gewaehlte Zeile: farbige Kante links statt eines Rahmens — ein Rahmen
wuerde die Zeile um seine Breite verschieben. Dasselbe Mittel wie bei der
gewaehlten Leistung im Buchungsdetail. */
.lz-leistung-aktiv {
box-shadow: inset 3px 0 0 0 var(--color-primary);
background: var(--color-surface-alt, rgba(99, 102, 241, 0.06));
font-weight: 600;
}
.lz-wahl {
width: 2.25rem;
text-align: center;
}
/* Beschriftung ueber einem Block, der kein einzelnes Feld ist (das Gitter) —
sieht aus wie die Beschriftung eines Feldes daneben. */
.modal-label {
margin: 0 0 0.35rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--color-text-muted);
}
/* ═══════════════════════════════════════════════════════════════════════════
DIE KNOPFLEISTE EINES DIALOGS
═══════════════════════════════════════════════════════════════════════════
Sie steht in ZWEI Bauformen im Haus:
a) INNERHALB von .modal-body (der Zahlungsdialog: das |