/* ctrans-bausteine.css - #3101 W9: zentrale Bausteine nach R0 (UI-Regelwerk), geladen als LETZTES Stylesheet
 * (nach Bootstrap, catkin-hyper app.min.css, DevExtreme + dx-farben.css und css/custom/catkin/app*.css).
 *
 * Teil A  K1/U14.8: eine Hoehe fuer alle einzeiligen Eingabeelemente und Knoepfe (--catkin-control-height der Dichte,
 *         in Tabellenzeilen --catkin-control-height-row), zentral fuer Bootstrap, native Felder und DevExtreme.
 * Teil B  Kopfleiste (U1.8, U13.3, U14.8): Menue-Knopf und Filter der Kopfleiste auf Control-Hoehe, kein Ueberlauf.
 * Teil C  Baukasten .ct-* (Seitenkopf, Karte, Schalterleiste, Formularraster, Filterzeile, Aktionsspalte, Hinweisleiste).
 *
 * Regeln: Werte nur aus Tokens (CI24), keine Farb-/px-Literale. Die Dichte setzt das Layout als data-density am <html>
 * (Helpers/SichtDichte.cs, ViewData["Dichte"]). Hinweis Massstab: cOPERATOR rechnet mit 14 px Grundschrift
 * (html { font-size: 87.5% }, #1039 "Aufgeblaehte UI" in css/custom/catkin/app*.css); die rem-Tokens ergeben daher
 * Normal 35 px / Zeile 21 px, Kompakt 28 px / Zeile 17,5 px.
 *
 * !important nur bei den Hoehen der Teile A/B: DevExtreme schreibt per Widget-Option (.Height(..)) Inline-Hoehen; ein
 * Einzelwert je Feld ist nach K1.5/CI24 ein Befund, die zentrale Hoehe gewinnt deshalb bewusst. */

/* Teil Z  #3101 FIX-4 Ebenenordnung (eine Stelle fuer alle Ueberlagerungen; UI-Regelwerk Abschnitt 3 „Ebenenordnung“).
 * Von unten nach oben: Inhalt < haftende Leisten und Tabellenkoepfe < Kopfleiste mit ihren Popups (Sprache und Darstellung,
 * Benutzer/Willkommen, Gruppenwechsel, Suche) < Seitenleiste als Overlay < Dialog-Abdunklung < Dialog < Popover < Tooltip
 * < Meldung (Bootstrap) < DevExtreme-Overlays (baseZIndex 1500: Popups, Auswahllisten, Datumswaehler, auch aus Dialogen)
 * < schwebende Hinweise (Dispo) < Ladeschicht.
 * Die Werte schliessen an Bootstrap 5 an (dropdown 1000, modal-backdrop 1050, modal 1055, popover 1070, tooltip 1080,
 * toast 1090). Seitenweite z-index nur ueber diese Variablen; kleine Werte (0-9) nur innerhalb eines Bausteins, der einen
 * eigenen Stapelkontext bildet (z. B. Dispo-Tafel, Tabellenzellen). */
:root {
    --ct-ebene-inhalt: 1;
    --ct-ebene-haftend: 1010;
    --ct-ebene-kopf: 1030;
    --ct-ebene-kopf-popup: 1035;
    --ct-ebene-seitenleiste: 1045;
    --ct-ebene-scrim: 1050;
    --ct-ebene-dialog: 1055;
    --ct-ebene-popover: 1070;
    --ct-ebene-tooltip: 1080;
    --ct-ebene-meldung: 1090;
    --ct-ebene-overlay: 1500;
    --ct-ebene-schwebend: 1600;
    --ct-ebene-ladeschicht: 2000;
    /* Bootstrap/catkin-hyper setzen ihre Werte (--ct-dropdown-zindex 1000, --ct-backdrop-zindex 1050, --ct-modal-zindex 1055,
       --ct-popover-zindex 1070, --ct-tooltip-zindex 1080, --ct-toast-zindex 1090) am Baustein selbst; sie entsprechen der Ordnung oben. */
}
/* Die Kopfleiste bildet den Stapelkontext ihrer Popups: sie liegt ueber jeder haftenden Leiste der Seite (PO 24.10.2026). */
html .navbar-custom { z-index: var(--ct-ebene-kopf); }
html[data-sidenav-size=full]:not([data-layout=topnav]).sidebar-enable .leftside-menu,
html[data-sidenav-size=sm-hover]:not([data-layout=topnav]) .wrapper .leftside-menu:hover { z-index: var(--ct-ebene-seitenleiste); }


/* =====================================================================================================
 * A. K1 - Control-Hoehe
 * ===================================================================================================== */

/* A1 Bootstrap- und native Felder (ausser mehrzeilig, Datei, Mehrfachauswahl) */
html .form-control:not(textarea):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([multiple]):not([size]),
html .form-select:not([multiple]):not([size]),
html .input-group-text,
html input:is([type="text"], [type="number"], [type="date"], [type="time"], [type="datetime-local"], [type="month"],
              [type="week"], [type="email"], [type="search"], [type="password"], [type="tel"], [type="url"]):not(.dx-texteditor-input),
html select:not([multiple]):not([size]):not(.dx-texteditor-input) {
    height: var(--catkin-control-height) !important;
    min-height: 0;
    box-sizing: border-box;
    padding-block: 0;
}

/* A2 Bootstrap-Knoepfe: eine Hoehe, einzeilig (K2.2), Inhalt mittig */
html .btn:not(.btn-link):not(.btn-close):not(.dropdown-item) {
    height: var(--catkin-control-height) !important;
    min-height: 0;
    box-sizing: border-box;
    padding-block: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--catkin-space-2xs);
    white-space: nowrap;
}
html .btn.w-100, html .btn.d-block { display: flex; }

/* A3 DevExtreme-Editoren (einzeilig) */
html .dx-texteditor:not(.dx-textarea):not(.dx-htmleditor):not(.dx-tagbox):not(.dx-daterangebox .dx-texteditor),
html .dx-daterangebox {
    height: var(--catkin-control-height) !important;
    box-sizing: border-box;
}
html .dx-tagbox:not(.dx-textarea) {
    min-height: var(--catkin-control-height);
    box-sizing: border-box;
}
html .dx-texteditor:not(.dx-textarea):not(.dx-htmleditor):not(.dx-tagbox) > .dx-texteditor-container,
html .dx-daterangebox .dx-texteditor-container { height: 100%; }
html .dx-daterangebox .dx-texteditor { height: 100%; }
html .dx-texteditor:not(.dx-textarea):not(.dx-htmleditor):not(.dx-tagbox) .dx-texteditor-input {
    min-height: 0;
    height: 100%;
    padding-block: 0;
}
html .dx-texteditor:not(.dx-textarea):not(.dx-htmleditor) .dx-placeholder {
    display: flex;
    align-items: center;
}
html .dx-texteditor:not(.dx-textarea):not(.dx-htmleditor) .dx-placeholder::before {
    padding-block: 0;
}
html .dx-texteditor .dx-texteditor-buttons-container { align-self: stretch; }
html .dx-texteditor .dx-texteditor-buttons-container > .dx-button {
    height: auto !important;
    align-self: stretch;
    margin-block: 0;
}
html .dx-texteditor .dx-texteditor-buttons-container > .dx-button > .dx-button-content { padding-block: 0; }

/* A4 DevExtreme-Knoepfe (ausserhalb der Editoren, Kalender, Reiter, Planer und Editor-Werkzeugleisten) */
html .dx-button:not(:where(.dx-texteditor-buttons-container .dx-button, .dx-calendar .dx-button, .dx-tabs .dx-button,
                           .dx-scheduler .dx-button, .dx-htmleditor .dx-button, .dx-buttongroup-item)) {
    height: var(--catkin-control-height) !important;
    min-width: var(--catkin-control-height);
    box-sizing: border-box;
}
html .dx-button:not(:where(.dx-texteditor-buttons-container .dx-button)) > .dx-button-content { padding-block: 0; }
html .dx-buttongroup { height: var(--catkin-control-height); }
html .dx-buttongroup .dx-buttongroup-item { height: 100% !important; }

/* A5 Tabellenzeilen (K1.2): Datenzeilen, Filterzeile und Bearbeitungszeilen der Grids, HTML-Tabellen */
html :is(.dx-datagrid, .dx-treelist) :is(.dx-data-row, .dx-datagrid-filter-row, .dx-treelist-filter-row, .dx-edit-row)
    .dx-texteditor:not(.dx-textarea):not(.dx-htmleditor):not(.dx-tagbox),
html :is(.dx-datagrid, .dx-treelist) :is(.dx-data-row, .dx-datagrid-filter-row, .dx-treelist-filter-row, .dx-edit-row) .dx-button,
html :is(.dx-datagrid-filter-row, .dx-treelist-filter-row) .dx-menu,
html :is(.dx-data-row, table tbody tr) :is(.btn:not(.btn-link):not(.btn-close), .form-control:not(textarea), .form-select) {
    height: var(--catkin-control-height-row) !important;
    min-height: 0;
    min-width: var(--catkin-control-height-row);
}
html :is(.dx-data-row, table tbody tr) .btn:not(.btn-link):not(.btn-close) {
    padding-inline: var(--catkin-space-2xs);
    font: var(--catkin-type-body-sm);
}
html :is(.dx-data-row, table tbody tr) .btn svg {
    width: var(--catkin-icon-body-2xs);
    height: var(--catkin-icon-body-2xs);
}
html :is(.dx-datagrid, .dx-treelist) :is(.dx-data-row, .dx-datagrid-filter-row, .dx-treelist-filter-row, .dx-edit-row) .dx-tagbox {
    min-height: var(--catkin-control-height-row);
}
html :is(.dx-datagrid-filter-row, .dx-treelist-filter-row) .dx-menu .dx-menu-item-content {
    height: 100%;
    padding-block: 0;
    display: flex;
    align-items: center;
}
html :is(.dx-datagrid, .dx-treelist) .dx-tagbox .dx-tag-container.dx-texteditor-input-container .dx-texteditor-input {
    min-height: 0;
    padding-block: 0;
}
html :is(.dx-datagrid-headers, .dx-datagrid-rowsview, .dx-treelist-headers, .dx-treelist-rowsview) .dx-texteditor-input {
    min-height: 0;
}

/* =====================================================================================================
 * B. Kopfleiste
 * ===================================================================================================== */

/* B1 Menue-Knopf: rahmenloser Icon-Knopf in Control-Hoehe (vorher 38 px neben 36-px-Feldern, U14.8) */
html .navbar-custom .button-toggle-menu {
    height: var(--catkin-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: 0;
}

/* B2 Eine Reihe (U14.8): DevExtreme-Editoren mit Beschriftung (Zeitraum "Anfangsdatum/Enddatum") reservieren oben Platz
   fuer die Beschriftung auf dem Rahmen (margin-top); in der Kopfleiste stehen sie damit tiefer als ihre Nachbarn. */
html .navbar-custom .dx-texteditor-with-label { margin-top: 0; }
/* Der Unendlich-Knopf neben dem Zeitraum trug einen Versatz (Light inline am Knopf, Dark in app-dark.css .infinity-btn). */
html .navbar-custom .infinity-btn { margin-top: 0; align-items: center !important; }

/* B3 Kein Ueberlauf (U1.8/U1.1): Die linke Gruppe (Marke, Menue-Knopf, Suche, Zeitraum, Kundentyp) behaelt ihre Breite,
   nichts darin wird abgeschnitten; es weicht nur der Hinweis der Gruppe (voller Text im Tooltip, #2782). Abstaende aus den
   Tokens statt der Inline-Werte des Bestands (padding-left: 2rem je Filter). */
html .navbar-custom .topbar { gap: var(--catkin-space-xs); }
html .navbar-custom .topbar > .d-flex { flex: 0 0 auto; }
html .navbar-custom .topbar > .d-flex > .topbar-menu { flex-wrap: nowrap; gap: var(--catkin-space-xs) !important; }
html .navbar-custom .topbar > .topbar-menu { flex: 1 1 auto; justify-content: flex-end; min-width: 0; gap: var(--catkin-space-xs) !important; }
html .navbar-custom .topbar-menu .bd-highlight[style*="padding-left"],
html .navbar-custom .topbar-menu .bd-highlight.ps-4 { padding-left: 0 !important; }
html .navbar-custom .topbar-menu > li { flex-shrink: 0; }
html .navbar-custom .topbar > .topbar-menu > li.notification-list:first-child,
html .navbar-custom .topbar > .topbar-menu > li.ct-devlogin:first-child + li.notification-list { flex-shrink: 1; min-width: 0; } /* Q4: Kennzeichnung Entwicklungs-Login davor darf den Hinweis nicht am Schrumpfen hindern */
@media (max-width: 100em) { /* = 1600 px, wie #2782 in app.css (Media Queries kennen keine Tokens) */
    html .navbar-custom .topbar .dx-dropdownbox { width: var(--catkin-container-3xs) !important; }
    html .navbar-custom .topbar-notice { min-width: var(--catkin-size-2xl); }
}

/* =====================================================================================================
 * C. Baukasten .ct-*  (Beispiel-Markup: PROGRESS.md, Abschnitt "W9 - Baukasten")
 * ===================================================================================================== */

/* C1 Seitenkopf (K10.1, CI15, U14.3): genau eine H1, rechts hoechstens eine Hauptaktion und Nebenaktionen davor */
.ct-seitenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--catkin-space-sm);
    margin-block-end: var(--catkin-space-md);
}
.ct-seitenkopf__titel {
    font: var(--catkin-type-title-xs);
    color: var(--catkin-on-surface-100);
    margin: 0;
    min-width: 0;
}
.ct-seitenkopf__aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--catkin-space-xs);
    margin-inline-start: auto;
}
/* Rueckmeldung einer Kopfaktion (z. B. Ergebnis von "Erneut senden", U4.5): auf der Linie der Knoepfe, ohne Fuellung */
.ct-seitenkopf__meldung { align-self: center; font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
/* #3101 HB-1: Absprung „Hilfe im Handbuch“ direkt hinter der H1 – Icon-Knopf, quadratisch in der Höhe der Dichte (K1, K2.3, CI17) */
.btn.ct-seitenkopf__hilfe { display: inline-flex; align-items: center; inline-size: var(--catkin-control-height); padding-inline: 0; justify-content: center; }
.btn.ct-seitenkopf__hilfe svg.lucide { inline-size: var(--catkin-icon-body-md); block-size: var(--catkin-icon-body-md); }
/* #3101 HB-3: folgt dem Knopf keine Aktionsleiste (sondern Kennung oder Suche), bleibt er an der H1, und der Rest rückt nach rechts */
/* #3101 HB-6: folgt die Zeilenart-Umschaltung einer Dispo-Sicht (Planung, Garnituren-Dispo), bleibt sie wie bisher neben dem Titel */
.btn.ct-seitenkopf__hilfe:not(:has(+ .ct-seitenkopf__aktionen, + .ct-formular-kopf__aktionen, + .ct-dispo__ansicht)) { margin-inline-end: auto; }
/* #3101 HB-4: bricht die Aktionsleiste hinter dem Knopf in eine zweite Reihe um (z. B. Kundenauftrag bei 1366 px), bleibt der Knopf an der H1 und die Leiste
   steht rechtsbündig darunter: die Leiste füllt den Rest der Reihe und richtet ihre Knöpfe rechts aus (statt eines Auto-Abstands, der den Knopf nach rechts schob) */
.btn.ct-seitenkopf__hilfe + :is(.ct-seitenkopf__aktionen, .ct-formular-kopf__aktionen) { margin-inline-start: 0; flex-grow: 1; }
.btn.ct-seitenkopf__hilfe:has(+ :is(.ct-seitenkopf__aktionen, .ct-formular-kopf__aktionen)) { margin-inline-end: auto; }


/* C2 Karte (U15.1, K10.2): Thema als Karte mit Kopf (H3 + Bereichsaktion), Inhalt, Fuss (Aktionen rechts, U14.2) */
.ct-karte {
    background: var(--catkin-surface-2); /* Q2: Karte = Ebene 2, Rahmen transparent (die Ebene trennt) */
    color: var(--catkin-on-surface-100);
    border: var(--catkin-border-width-3xs) solid transparent;
    border-radius: var(--catkin-radius-md);
    margin-block-end: var(--catkin-space-md);
    min-width: 0;
}
.ct-karte__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--catkin-space-xs);
    padding: var(--catkin-space-sm) var(--catkin-space-md);
    border-block-end: var(--catkin-border-width-3xs) solid var(--catkin-border-decor);
}
.ct-karte__titel {
    font: var(--catkin-type-title-2xs);
    color: var(--catkin-on-surface-100);
    margin: 0;
}
/* Bereichsaktionen im Kartenkopf (U14.3): rechts neben der Ueberschrift */
.ct-karte__aktionen { display: flex; flex-wrap: wrap; gap: var(--catkin-space-xs); margin-inline-start: auto; }
.ct-karte__inhalt { padding: var(--catkin-space-md); }
.ct-karte__fuss {
    display: flex;
    justify-content: flex-end;
    padding: var(--catkin-space-sm) var(--catkin-space-md);
    border-block-start: var(--catkin-border-width-3xs) solid var(--catkin-border-decor);
}

/* C3 Schalterleiste (R2, U14.1, U14.2): alle Knoepfe gleich breit (breitester bestimmt), rechtsbuendig,
   Hauptaktion als letzter Knopf; bricht bei Platzmangel um (U1.8). */
.ct-leiste {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--catkin-space-xs);
    margin-inline-start: auto;
    max-width: 100%;
}
.ct-leiste > * { width: 100%; }
@media (max-width: 48em) { /* = --catkin-screen-sm */
    .ct-leiste { grid-auto-flow: row; }
}

/* C4 Formularraster (R3, K3.2, K3.6): Felder linksbuendig unter der Beschriftung, gleiche Abstaende, Spalten nach Platz */
.ct-formular {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--catkin-container-3xs)), 1fr));
    gap: var(--catkin-space-md) var(--catkin-space-lg);
    align-items: start;
}
.ct-feld {
    display: flex;
    flex-direction: column;
    gap: var(--catkin-space-2xs);
    min-width: 0;
}
.ct-feld--breit { grid-column: 1 / -1; }
/* Nur gelesener Wert im Raster (z. B. Waehrung eines gespeicherten Datensatzes): Hoehe und Rahmen wie ein Feld, ohne Eingabe */
.ct-feld__wert { display: flex; align-items: center; min-height: var(--catkin-control-height); }
.ct-feld__label,
.ct-feld > label {
    font: var(--catkin-type-body-sm);
    color: var(--catkin-on-surface-100);
    font-weight: var(--catkin-font-weight-regular);
    margin: 0;
}
.ct-feld__hilfe { font: var(--catkin-type-body-xs); color: var(--catkin-on-surface-80); }
.ct-feld__fehler,
.ct-feld > .field-validation-error {
    font: var(--catkin-type-body-xs);
    color: var(--catkin-critical-on-surface-80);
}
.ct-feld > .field-validation-valid:empty { display: none; }

/* C5 Filterzeile (R1, U14.8): Felder mit Beschriftung darueber, Knopf auf der Unterkante der Felder, umbrechend.
   Die Filterleiste der Hauptlauf-Buchungen (.catkin-filter-bar, #2760) folgt demselben Raster. */
.ct-filterzeile,
.catkin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--catkin-space-sm) var(--catkin-space-md);
    margin-block-end: var(--catkin-space-sm);
}
.ct-filterzeile > .ct-feld { flex: 0 1 var(--catkin-container-3xs); }
/* W11: Auswahlzaehler ("Auswahl: 3") und Hinweise in der Filterzeile: Fliesstext in Kontrolleshoehe, vertikal zu den Feldern, nicht fett */
.ct-filterzeile > .selected-data,
.ct-filterzeile > .ct-leer {
    align-self: flex-end;
    font: var(--catkin-type-body-sm);
    min-height: var(--catkin-control-height);
    display: flex;
    align-items: center;
    gap: var(--catkin-space-2xs);
}
.ct-filterzeile > .selected-data .caption { font-weight: var(--catkin-font-weight-regular); }
.catkin-filter-bar .filter-item label {
    font: var(--catkin-type-body-sm);
    margin-block-end: var(--catkin-space-2xs);
}

/* C6 Aktionsspalte in Tabellen (U14.7): feste, gleich breite Plaetze in fester Reihenfolge; ein leerer Platz bleibt leer
   (.ct-aktionen__platz ohne Inhalt). Einspaltig (.ct-aktionen--spalte, U14.7 Ausnahme): Aktionen ruecken ohne Luecke auf,
   linksbuendig, oben buendig, gleich breit. Zeilenaktionen sind umrandet, nie gefuellt; Rollenfarben nach U14.9 neu (FIX-5 am Dateiende). */
.ct-aktionen {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--catkin-space-2xs);
    align-items: start;
    vertical-align: top;
}
.ct-aktionen--spalte { grid-auto-flow: row; justify-items: stretch; }
.ct-aktionen > *, .ct-aktionen__platz { min-width: var(--catkin-control-height-row); }

/* C7 Ghost-Knopf (CI15, CI21): Nebenaktion ohne Fuellung, Rahmen neutral, gruen erst bei Hover/Fokus */
.btn.ct-ghost {
    --ct-btn-color: var(--catkin-on-surface-100);
    --ct-btn-bg: transparent;
    --ct-btn-border-color: var(--catkin-border-control);
    --ct-btn-hover-color: var(--catkin-on-surface-100);
    --ct-btn-hover-bg: var(--catkin-surface-1-hover);
    --ct-btn-hover-border-color: var(--catkin-border-active);
    --ct-btn-active-color: var(--catkin-on-surface-100);
    --ct-btn-active-bg: var(--catkin-surface-1-pressed);
    --ct-btn-active-border-color: var(--catkin-border-active);
    --ct-btn-disabled-color: var(--catkin-on-surface-80);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--catkin-border-decor);
}

/* C7b N6 (PO-Aussage 21.10.2026 "Neutral und wenn aktiv farbig, wie in BIMS"): .btn-primary ist im Bestand die Nebenaktion fast jeder
   Maske (rund 145 Stellen). Ruhezustand wie der Ghost-Knopf C7 (Rahmen --catkin-border-control, ohne Fuellung, Schrift Inhaltsstaerke 100);
   Hover und Fokus zeigen den Rahmen --catkin-border-active (CI21), Hover und Gedrueckt die Zustandsrollen der Flaeche (CI22); gewaehlt/eingeschaltet
   eine Stufe staerker (K14: Rahmen aktiv, Linkfarbe, halbfett, surface-3). Keine Kundenfarbe an Knoepfen - die bleibt Kopfleiste und Aktivmarker
   (Festlegung 22; seit N10 nur noch Kopfleiste). Bisher traegt custom/catkin/app(-dark).css den Rahmen in --company-Color und fuellt beim Hover mit ihr; die Regeln sind dort
   entfernt. Hauptaktionen (.ct-formular__speichern, .ct-dialog__haupt, .ct-hauptaktion, zwei Klassen) und Gefahr (.btn-danger) bleiben gefuellt. */
.btn-primary {
    --ct-btn-color: var(--catkin-on-surface-100);
    --ct-btn-bg: transparent;
    --ct-btn-border-color: var(--catkin-border-control);
    --ct-btn-hover-color: var(--catkin-on-surface-100);
    --ct-btn-hover-bg: var(--catkin-surface-1-hover);
    --ct-btn-hover-border-color: var(--catkin-border-active);
    --ct-btn-active-color: var(--catkin-on-surface-100);
    --ct-btn-active-bg: var(--catkin-surface-1-pressed);
    --ct-btn-active-border-color: var(--catkin-border-active);
    --ct-btn-disabled-color: var(--catkin-on-surface-80);
    --ct-btn-disabled-bg: transparent;
    --ct-btn-disabled-border-color: var(--catkin-border-decor);
    box-shadow: none;
}
.btn-primary:focus-visible { border-color: var(--catkin-border-active); outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active); outline-offset: var(--catkin-border-width-2xs); box-shadow: none; }
.btn-primary.active, .btn-primary[aria-pressed="true"], .btn-check:checked + .btn-primary {
    border-color: var(--catkin-border-active); color: var(--catkin-link); background-color: var(--catkin-surface-3); font-weight: var(--catkin-font-weight-semibold);
}

/* C8 Hinweisleiste (CI19, CI22, K7.1): Kategorie ueber data-color am Element (info = Neu/Information, warning = Offen,
   critical = Fehler), Flaeche surface-3, Text on-surface-100, Icon on-surface-70. Kein Farbstreifen, keine Signalfarbe. */
.ct-hinweis {
    display: flex;
    align-items: flex-start;
    gap: var(--catkin-space-xs);
    padding: var(--catkin-space-xs) var(--catkin-space-sm);
    margin-block-end: var(--catkin-space-md);
    border-radius: var(--catkin-radius-sm);
    background: var(--catkin-surface-3);
    color: var(--catkin-on-surface-100);
    font: var(--catkin-type-body-sm);
}
.ct-hinweis > svg, .ct-hinweis > i[data-lucide] {
    flex: 0 0 auto;
    width: var(--catkin-icon-body-xs);
    height: var(--catkin-icon-body-xs);
    color: var(--catkin-on-surface-70);
}
.ct-hinweis ul { margin: 0; padding-inline-start: var(--catkin-space-md); }
/* Validierungs-Zusammenfassung als Hinweisleiste: ohne Fehler unsichtbar */
.ct-hinweis.validation-summary-valid { display: none; }

/* C9 Aktionsbereich (W10b; CI13, CI15, U14.1, U14.6): mehrere Schalterleisten eines Bereichs nebeneinander, rechtsbuendig,
   umbrechend. Zerstoerende Aktionen stehen in einer eigenen, abgesetzten Leiste (.ct-leiste--gefahr: Trennlinie davor),
   hoechstens ein gefuellter Gefahr-Knopf je Leiste; ihre Beschriftung endet mit "…" (sie fragen vorher). */
.ct-aktionsbereich {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--catkin-space-xs) var(--catkin-space-md);
    min-width: 0;
}
.ct-aktionsbereich > .ct-leiste { margin-inline-start: 0; }
.ct-karte__werkzeuge > .ct-aktionsbereich { margin-inline-start: auto; } /* umgebrochen bleibt er rechts (U14.2) */
.ct-leiste--gefahr {
    padding-inline-start: var(--catkin-space-md);
    border-inline-start: var(--catkin-border-width-3xs) solid var(--catkin-border-decor);
}
@media (max-width: 48em) { /* = --catkin-screen-sm */
    .ct-leiste--gefahr { padding-inline-start: 0; border-inline-start: 0; }
}

/* C10 Karte mit Reitern im Kopf (U15.3, K11, CI17): Reitergruppe als Textreiter im Kartenkopf, Bereichsaktionen rechts daneben;
   der Inhalt der Reiter liegt im Kartenrumpf ohne eigenen Rand. */
.ct-karte__kopf > .nav-tabs { border-block-end: 0; margin-block-end: calc(-1 * var(--catkin-space-sm)); align-self: flex-end; }
.ct-karte__kopf > .nav-tabs .nav-link { border: 0; border-block-end: var(--catkin-border-width-2xs) solid transparent; background: transparent; color: var(--catkin-on-surface-80); }
.ct-karte__kopf > .nav-tabs .nav-link:hover { color: var(--catkin-on-surface-100); }
.ct-karte__kopf > .nav-tabs .nav-link.active { color: var(--catkin-link); font-weight: var(--catkin-font-weight-semibold); border-block-end-color: var(--catkin-link); background: transparent; }
.ct-karte__inhalt--tabelle { padding: var(--catkin-space-sm); }
.ct-karte__werkzeuge {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--catkin-space-xs) var(--catkin-space-md);
    margin-block-end: var(--catkin-space-sm);
}

/* C11 Zweispaltige Liste mit Detailbereich (U15.2): links die Liste, rechts die Details des gewaehlten Eintrags; schmaler als
   64 em (Tablet) untereinander. Beide Spalten sind Karten. */
.ct-liste-details {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--catkin-space-md);
    align-items: start;
}
@media (max-width: 64em) { /* = --catkin-screen-md */
    .ct-liste-details { grid-template-columns: minmax(0, 1fr); }
}

/* C12 Kopfformular einer Karte (W10b): wenige Felder mit ihrer Aktion rechts im Kartenkopf (z. B. Gueltigkeit + "Veroeffentlichen"),
   eine Reihe, eine Hoehe (U14.5, U14.8), umbrechend. Zeitachse unter einer Tabelle: feste Hoehe aus dem Fenster, in sich scrollbar. */
.ct-veroeffentlichen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--catkin-space-xs);
    margin-inline-start: auto;
}
.ct-veroeffentlichen > .dx-daterangebox { width: var(--catkin-container-xs); max-width: 100%; margin-block-start: 0; } /* DX reserviert oben Platz fuer die Beschriftung (vgl. B2) */
.ct-zeitachse { height: 60vh; overflow: auto; margin-block-start: var(--catkin-space-sm); }
/* Leerzustand einer Karte (U3.1): sagt, warum leer und was zu tun ist */
.ct-leer { color: var(--catkin-on-surface-80); font: var(--catkin-type-body-sm); }

/* =====================================================================================================
 * D. Seitenleiste und Kopfleiste (W9b): dichter nach DB-B2B "functional", ein Logo, Kuerzel-Sprachwahl
 *    Aus Tokens der Dichte Kompakt (data-density="compact" am .leftside-menu, CI23/CI24). cOperator rechnet mit 14 px
 *    Grundschrift (#1039); die Schrift kommt deshalb aus body-md (12,25 px), denn body-sm waere in Kompakt 10,5 px (< 12 px, CI8).
 * ===================================================================================================== */

/* D1 Ein Logo (DB-B2B): Die Kopfleiste steht ueber die ganze Breite und traegt die Marke; die Seitenleiste beginnt darunter.
   Gilt in allen Groessen der Seitenleiste (Normal, eingeklappt, ausgeblendet). */
html[data-sidenav-size]:not([data-layout=topnav]) .wrapper .navbar-custom { margin-left: 0; }
html .leftside-menu { top: var(--ct-topbar-height); }

/* D2 Masse der Seitenleiste: die Theme-Variablen zeigen auf Tokens, damit Abstaende, Pfeil und Einrueckung des Themes mitwandern */
html .leftside-menu {
    --ct-menu-item-padding-y: var(--catkin-space-xs);
    --ct-menu-item-padding-x: var(--catkin-space-md);
    --ct-menu-item-font-size: var(--catkin-size-xs); /* Kompakt 0,875 rem = Schriftgroesse body-md; das Theme rechnet daraus den Pfeil */
    --ct-menu-item-icon-size: var(--catkin-icon-body-sm);
}
html .side-nav .side-nav-link,
html .side-nav-second-level li a,
html .side-nav-third-level li a,
html .side-nav-forth-level li a {
    font: var(--catkin-type-body-md);
    padding-block: var(--catkin-space-xs);
    min-height: var(--catkin-target-min); /* CI23: Klickflaeche mindestens 24 px */
}
html .side-nav .side-nav-title {
    font: var(--catkin-type-body-md);
    font-weight: var(--catkin-font-weight-bold);
    padding-block: var(--catkin-space-sm) var(--catkin-space-2xs);
    padding-inline: var(--catkin-space-md); /* Titel auf einer Linie mit dem Icon */
}

/* D3 Icon und Text (nicht im eingeklappten Zustand: dort traegt das Theme die Icon-Spalte) */
html:not([data-sidenav-size=condensed]) .side-nav .side-nav-link i,
html:not([data-sidenav-size=condensed]) .side-nav .side-nav-link > svg.lucide {
    width: var(--ct-menu-item-icon-size);
    min-width: var(--ct-menu-item-icon-size);
    height: var(--ct-menu-item-icon-size);
    margin: 0 var(--catkin-space-xs) 0 0;
}
/* Untereinträge stehen buendig unter dem Text der Gruppe; die Einrueckung steckt im Link, damit der Aktivmarker am linken Rand sitzt */
html:not([data-sidenav-size=condensed]) .side-nav .side-nav-link > span:not(.menu-arrow) { margin-inline-start: -0.25em; } /* Leerzeichen vor dem Text des Markups: Text buendig mit den Untereintraegen */
html:not([data-sidenav-size=condensed]) .side-nav-second-level,
html:not([data-sidenav-size=condensed]) .side-nav-third-level,
html:not([data-sidenav-size=condensed]) .side-nav-forth-level { margin-top: 0; padding-left: 0; }
html:not([data-sidenav-size=condensed]) .side-nav .side-nav-second-level li a {
    padding-inline: calc(var(--ct-menu-item-padding-x) + var(--ct-menu-item-icon-size) + var(--catkin-space-xs)) var(--catkin-space-sm) !important;
}
html:not([data-sidenav-size=condensed]) .side-nav .side-nav-third-level li a {
    padding-inline: calc(var(--ct-menu-item-padding-x) + var(--ct-menu-item-icon-size) + var(--catkin-space-xs) + var(--catkin-space-sm)) var(--catkin-space-sm) !important;
}
html:not([data-sidenav-size=condensed]) .side-nav .side-nav-forth-level li a {
    padding-inline: calc(var(--ct-menu-item-padding-x) + var(--ct-menu-item-icon-size) + var(--catkin-space-xs) + 2 * var(--catkin-space-sm)) var(--catkin-space-sm) !important;
}

/* D4 Aktivmarker: genau eine Farbe; vorher lagen der Randstreifen der Kundenfarbe (app.css) und der Theme-Marker in Primaerfarbe
   (app.min.css) uebereinander. N10 (PO-Festlegung 21.10.2026): der Marker folgt der Markenfarbe der Farbwelt (--catkin-border-active,
   Grafik >= 3:1 in beiden Modi), nicht mehr der Firmenfarbe der Gruppe; die Schrift traegt --catkin-link (app.css/app-dark.css). */
html .side-nav .menuitem-active > a,
html .side-nav .side-nav-second-level li.active > a,
html .side-nav .side-nav-third-level li.menuitem-active > a,
html .side-nav .side-nav-forth-level li.menuitem-active > a,
html .side-nav .side-nav-second-level > li.menuitem-active > a.side-nav-a-item {
    border-left: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block !important;
    box-shadow: inset var(--catkin-border-width-xs) 0 0 0 var(--catkin-border-active) !important;
}
html .side-nav .side-nav-link:focus-visible,
html .side-nav-second-level li a:focus-visible {
    outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active);
    outline-offset: calc(var(--catkin-border-width-2xs) * -1); /* U7.2: Fokus sichtbar, innerhalb der Leiste */
}

/* D5 Kopfecke "Sprache und Darstellung" (U13.3, Vorbild BIMS-Kopfecke): Schalter mit Kuerzel + Popup (Sprache, Darstellung, Vollbild) */
.ct-kopfanker { position: relative; }
.ct-kopfschalter {
    display: inline-flex; align-items: center; gap: var(--catkin-space-2xs);
    height: var(--catkin-control-height); padding-inline: var(--catkin-space-xs);
    background: transparent; color: var(--catkin-text);
    border: var(--catkin-border-width-3xs) solid transparent; border-radius: var(--catkin-radius-sm);
    font: var(--catkin-type-body-md);
}
.ct-kopfschalter:hover, .ct-kopfschalter[aria-expanded="true"] { color: var(--catkin-link); border-color: var(--catkin-border-active); }
.ct-kopfschalter:focus-visible { outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active); outline-offset: var(--catkin-border-width-3xs); }
.ct-kopfschalter .ct-kuerzel { font-weight: var(--catkin-font-weight-semibold); letter-spacing: 0.04em; }
.ct-kopfschalter svg.lucide { width: var(--catkin-icon-body-md); height: var(--catkin-icon-body-md); }
.ct-kopfpopup {
    position: absolute; top: calc(100% + var(--catkin-space-2xs)); right: 0; z-index: var(--ct-ebene-kopf-popup);
    width: var(--catkin-container-xs); max-width: 90vw; padding: var(--catkin-space-md);
    background: var(--catkin-surface-1); color: var(--catkin-text);
    border: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60); border-radius: var(--catkin-radius-md);
}
.ct-kopfpopup[hidden] { display: none; }
.ct-kopfpopup:focus { outline: none; }
.ct-kopfpopup__titel { font: var(--catkin-type-title-2xs); margin: 0 0 var(--catkin-space-sm); color: var(--catkin-on-surface-100); }
.ct-kopfgruppe { border: 0; margin: 0 0 var(--catkin-space-sm); padding: 0; min-width: 0; }
.ct-kopfgruppe legend { font: var(--catkin-type-body-md); font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-text-muted); padding: 0; margin-bottom: var(--catkin-space-2xs); float: none; width: auto; }
.ct-sprachen { display: flex; flex-direction: column; gap: var(--catkin-space-3xs); }
.ct-sprachwahl {
    display: flex; align-items: center; gap: var(--catkin-space-xs); min-height: var(--catkin-control-height-row);
    padding: var(--catkin-space-3xs) var(--catkin-space-xs); border-radius: var(--catkin-radius-xs); cursor: pointer; margin: 0;
    font: var(--catkin-type-body-md); font-weight: var(--catkin-font-weight-regular);
}
.ct-sprachwahl:hover { background: var(--catkin-surface-alt); }
.ct-sprachwahl--aktiv, .ct-sprachwahl.ct-sprachwahl--aktiv { background: var(--catkin-surface-alt); color: var(--catkin-link); font-weight: var(--catkin-font-weight-semibold); }
.ct-sprachwahl input { margin: 0; }
.ct-sprachcode { margin-inline-start: auto; font: var(--catkin-type-body-md); color: var(--catkin-text-muted); }
.ct-kopfhinweis { font: var(--catkin-type-body-md); color: var(--catkin-text-muted); margin: var(--catkin-space-2xs) 0 0; }
/* Segmentgruppe (CI17): ein gemeinsamer Rahmen, aktives Segment Link-Farbe, fett, surface-alt; Rahmen neutral, gruen bei Hover/Fokus (CI21) */
/* N3 (K1): der gemeinsame Rahmen liegt auf den Segmenten selbst, damit jedes Segment so hoch ist wie die uebrigen Bedienelemente
   (vorher: Rahmen am Behaelter, Segmente 2 px niedriger); Bild unveraendert: aussen border-control, Trenner border-decor. */
.ct-segmente {
    display: inline-flex; align-items: stretch; height: var(--catkin-control-height);
    border-radius: var(--catkin-radius-sm); overflow: hidden;
}
.ct-segment {
    box-sizing: border-box; height: 100%; margin: 0;
    border: var(--catkin-border-width-3xs) solid var(--catkin-border-control); border-inline-start-width: 0;
    background: transparent; color: var(--catkin-text); padding-inline: var(--catkin-space-md);
    font: var(--catkin-type-body-md); cursor: pointer;
}
.ct-segment:first-child { border-inline-start-width: var(--catkin-border-width-3xs); border-start-start-radius: var(--catkin-radius-sm); border-end-start-radius: var(--catkin-radius-sm); }
.ct-segment:last-child { border-start-end-radius: var(--catkin-radius-sm); border-end-end-radius: var(--catkin-radius-sm); }
.ct-segment:not(:last-child) { border-inline-end-color: var(--catkin-border-decor); }
.ct-segmente:is(:hover, :focus-within) > .ct-segment { border-block-color: var(--catkin-border-active); }
.ct-segmente:is(:hover, :focus-within) > .ct-segment:first-child { border-inline-start-color: var(--catkin-border-active); }
.ct-segmente:is(:hover, :focus-within) > .ct-segment:last-child { border-inline-end-color: var(--catkin-border-active); }
.ct-segment--aktiv { background: var(--catkin-surface-alt); color: var(--catkin-link); font-weight: var(--catkin-font-weight-semibold); }
.ct-vollbild { margin-top: var(--catkin-space-sm); }

/* D6 (W9c) Eingeklappte Seitenleiste: der Eintrag unter dem Zeiger ist keine gruene Flaeche mehr (CI14: Gruen ist Akzent), sondern
   die Hover-Rolle der Flaeche (CI22) mit Schrift in Inhaltsstaerke 100 und dem Marker wie der Aktivmarker (D4, N10: Markenfarbe);
   das ausklappende Untermenue ist eine Flaeche der Ebene 2 mit 1-px-Rahmen statt Schatten (CI5). */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) { --ct-menu-condensed-link-bg: var(--catkin-neutral-surface-2-hover); --ct-menu-condensed-link-color: var(--catkin-on-surface-100); }
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item:hover .side-nav-link {
    color: var(--catkin-on-surface-100);
    background: var(--catkin-neutral-surface-2-hover);
    box-shadow: inset var(--catkin-border-width-xs) 0 0 0 var(--catkin-border-active),
                inset 0 0 0 var(--catkin-border-width-3xs) var(--catkin-border-decor);
}
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .wrapper .leftside-menu .side-nav .side-nav-item:hover > :is(.collapse, .collapsing) > ul {
    background: var(--catkin-surface-2);
    box-shadow: none;
    border: var(--catkin-border-width-3xs) solid var(--catkin-border-decor);
}

/* =====================================================================================================
 * E. Formularwaechter (W10a, UI-Regelwerk U16, Teil F Entwurf Rev. 7; JS js/catkin/ct-formular.js, Partial _CtFormularLeiste)
 *    "Geaendert, noch nicht gespeichert" = Kategorie Offen: Rand und Punkt in --catkin-warning-on-surface-70 (U16.4; die Rolle
 *    --catkin-changed kommt erst mit der Freigabe von Revision 7). Farbe nie allein: Punkt + aria-description "geaendert".
 * ===================================================================================================== */

/* E1 Leiste: Speichern (Hauptaktion) und Abbrechen rechts daneben (E-0013), gleich breit (R2), nebeneinander */
.ct-formular-leiste {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--catkin-space-xs);
    align-items: center;
}
.ct-formular-leiste > .btn { width: 100%; }
/* E1b "Aenderungen speichern" sieht in jeder Maske gleich aus (U14.4, CI15; W10c): gefuellte Hauptaktion in der Brand-Rolle
   (--catkin-primary-*, kontrastgeprueft), nicht in der Kundenfarbe - die bleibt Akzent der Kopfleiste, des Aktivmarkers und der
   uebrigen .btn-primary (Festlegung 22); als Fuellung waere sie nicht geprueft (DB Cargo #EC0016 = Gefahrsignal, CI13).
   W20-Nachbesserung: dieselbe Rolle traegt die Hauptaktion im Dialogfuss (.ct-dialog__haupt, CI15/K2.1), nie die Kundenfarbe.
   Gesperrt (keine Aenderung, U16.3): ohne Fuellung, gestrichelter neutraler Rahmen, Text in Stufe 80 - ohne Deckkraft-Trick (CI22). */
.btn.ct-formular__speichern,
.btn.ct-dialog__haupt,
.btn.ct-hauptaktion { /* W21: .ct-hauptaktion = dieselbe Rolle fuer die eine Hauptaktion einer Seite ohne Formularwaechter (Statusseite, Suche) */
    --ct-btn-color: var(--catkin-primary-fg);
    --ct-btn-bg: var(--catkin-primary-bg);
    --ct-btn-border-color: var(--catkin-primary-bg);
    --ct-btn-hover-color: var(--catkin-primary-fg);
    --ct-btn-hover-bg: var(--catkin-primary-bg-hover);
    --ct-btn-hover-border-color: var(--catkin-primary-bg-hover);
    --ct-btn-active-color: var(--catkin-primary-fg);
    --ct-btn-active-bg: var(--catkin-brand-fill-pressed);
    --ct-btn-active-border-color: var(--catkin-brand-fill-pressed);
    --ct-btn-focus-shadow-rgb: none;
    color: var(--ct-btn-color);
    background-color: var(--ct-btn-bg);
    border-color: var(--ct-btn-border-color);
    font-weight: var(--catkin-font-weight-semibold);
}
.btn.ct-formular__speichern:hover, .btn.ct-dialog__haupt:hover, .btn.ct-hauptaktion:hover { color: var(--ct-btn-hover-color); background-color: var(--ct-btn-hover-bg); border-color: var(--ct-btn-hover-border-color); }
.btn.ct-formular__speichern:active, .btn.ct-dialog__haupt:active, .btn.ct-hauptaktion:active { color: var(--ct-btn-active-color); background-color: var(--ct-btn-active-bg); border-color: var(--ct-btn-active-border-color); }
.btn.ct-formular__speichern:focus-visible, .btn.ct-dialog__haupt:focus-visible, .btn.ct-hauptaktion:focus-visible { outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active); outline-offset: var(--catkin-border-width-2xs); }
.btn.ct-formular__speichern:disabled,
.btn.ct-formular__speichern.disabled,
.btn.ct-dialog__haupt:disabled,
.btn.ct-dialog__haupt.disabled {
    opacity: 1;
    color: var(--catkin-on-surface-80);
    background-color: transparent;
    border-color: var(--catkin-border-control);
    border-style: dashed;
    font-weight: var(--catkin-font-weight-regular);
    cursor: not-allowed;
    pointer-events: auto;
}
.ct-formular__zaehler:empty { display: none; }
.ct-formular__zaehler { font-variant-numeric: tabular-nums; }
.ct-formular__ring {
    display: inline-block;
    width: var(--catkin-icon-body-2xs);
    height: var(--catkin-icon-body-2xs);
    border: var(--catkin-border-width-2xs) solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--catkin-radius-full);
    animation: ct-formular-ring var(--catkin-duration-xslow) linear infinite;
}
@keyframes ct-formular-ring { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .ct-formular__ring { animation: none; } }

/* E2 Haftende Kopfleiste der Maske (U17.2): Speichern/Abbrechen bleiben ohne Scrollen erreichbar */
.ct-formular-kopf {
    position: sticky;
    top: var(--ct-topbar-height);
    z-index: var(--ct-ebene-haftend);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--catkin-space-xs) var(--catkin-space-md);
    padding: var(--catkin-space-xs) var(--catkin-space-md);
    margin-block-end: var(--catkin-space-sm);
    background: var(--catkin-surface-2); /* Q2: Seitenkopf-Flaeche = Bereich (Ebene 2) */
    border-block-end: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60);
}
.ct-formular-kopf__titel {
    display: flex;
    align-items: center;
    gap: var(--catkin-space-xs);
    margin: 0;
    font: var(--catkin-type-title-xs);
    color: var(--catkin-on-surface-100);
    min-width: 0;
}
.ct-formular-kopf__aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--catkin-space-xs);
    margin-inline-start: auto;
}

/* E3 Markierung geaenderter Felder: Rand in Offen; Punkt an der Beschriftung (oder neben dem Feld, wenn es keine gibt) */
html .ct-geaendert:is(input, select, textarea, .form-control, .form-select),
html .dx-widget.ct-geaendert.dx-editor-outlined,
html .dx-widget.ct-geaendert.dx-editor-filled,
html .dx-widget.ct-geaendert.dx-editor-underlined {
    border-color: var(--catkin-warning-on-surface-70) !important;
    box-shadow: inset 0 0 0 var(--catkin-border-width-3xs) var(--catkin-warning-on-surface-70);
}
html input.ct-geaendert:is([type="checkbox"], [type="radio"]),
html .dx-checkbox.ct-geaendert .dx-checkbox-icon {
    outline: var(--catkin-border-width-2xs) solid var(--catkin-warning-on-surface-70);
    outline-offset: var(--catkin-border-width-3xs);
}
.ct-geaendert-label::after,
.ct-geaendert-punkt,
.ct-geaendert-reiter::after {
    content: "";
    display: inline-block;
    width: var(--catkin-space-xs);
    height: var(--catkin-space-xs);
    margin-inline-start: var(--catkin-space-2xs);
    border-radius: var(--catkin-radius-full);
    background: var(--catkin-warning-on-surface-70);
    vertical-align: middle;
}
.ct-geaendert-punkt { flex: 0 0 auto; align-self: center; }

/* E4 Tabellen im Waechter: geaenderte Zelle mit Rand und Punkt (statt der DX-Toenung), neue Zeile mit Randstreifen am Anfang,
   zum Loeschen vorgemerkte Zeile durchgestrichen. Eigene Speichern-Knoepfe der Tabellen entfallen (U16.1: ein Speichern je Maske). */
html [data-ct-formular-tabelle] .dx-datagrid-rowsview .dx-data-row > td.dx-cell-modified,
html [data-ct-formular-tabelle] .dx-datagrid-rowsview .dx-data-row > td.dx-cell-modified:not(.dx-field-item-content) {
    position: relative;
    background-color: transparent;
    box-shadow: inset 0 0 0 var(--catkin-border-width-2xs) var(--catkin-warning-on-surface-70);
}
html [data-ct-formular-tabelle] .dx-datagrid-rowsview .dx-data-row > td.dx-cell-modified::after {
    content: "";
    position: absolute;
    inset: var(--catkin-space-3xs) var(--catkin-space-3xs) auto auto; /* oben rechts in der Zelle */
    width: var(--catkin-space-xs);
    height: var(--catkin-space-xs);
    border-radius: var(--catkin-radius-full);
    background: var(--catkin-warning-on-surface-70);
}
html [data-ct-formular-tabelle] .dx-datagrid-rowsview .dx-row-inserted > td:first-child {
    box-shadow: inset var(--catkin-border-width-xs) 0 0 0 var(--catkin-warning-on-surface-70);
}
html [data-ct-formular-tabelle] .dx-datagrid-rowsview .dx-row-removed > td { text-decoration: line-through; }
html [data-ct-formular-tabelle] .dx-datagrid-header-panel .dx-datagrid-save-button { display: none; }

/* E5 Sammelhinweis nach abgewiesenem Speichern (U17.4) */
.ct-formular__sammelhinweis { align-items: center; }
.ct-formular__sammelhinweis:focus { outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active); outline-offset: var(--catkin-border-width-3xs); }
.ct-formular__sprung { height: auto !important; padding: 0; color: var(--catkin-link); }

/* =====================================================================================================
 * F. Prioritaetsmasken W10b (Hauptlauf-Buchungen, Fahrttemplates, Blockzug): Ergaenzungen zum Baukasten
 * ===================================================================================================== */

/* F1 Zusatz im Maskenkopf (Auftrag im catkin-Portal) und Aktionsbereich links unter dem Kopf (Funktionen des Blockzugs) */
.ct-formular-kopf__zusatz { font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
.ct-aktionsbereich--links { justify-content: flex-start; margin-block-end: var(--catkin-space-sm); }
.ct-aktionsgruppe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-xs); margin: 0; }

/* F2 Zugdaten (Blockzug, Ausprägung ohne Versand/Empfang): Auslastung links, Zugkopf rechts, schmal untereinander */
.ct-zugdaten { display: grid; grid-template-columns: minmax(var(--catkin-container-3xs), var(--catkin-container-2xs)) minmax(0, 1fr); gap: var(--catkin-space-md); align-items: start; }
@media (max-width: 64em) { .ct-zugdaten { grid-template-columns: minmax(0, 1fr); } }
.ct-zugdaten__werkzeuge { margin-block: var(--catkin-space-md) 0; }
.train-doc-menus--drei { grid-template-columns: 1fr auto 1fr 1fr; }

/* F3 Lokomotiven neben Wagen (Blockzug, Reiter "Lok/Wagen" seit FIX-13); schmal untereinander */
/* Die Lok-Tabelle ist mindestens so breit wie ihre Spalten (Lok + "Entfernen", sonst rollt sie waagrecht); ist der Reiter dafuer zu schmal
   (Seitenleiste offen bei 1366 px), stehen Loks ueber den Wagen und beide bekommen die volle Breite. */
.ct-te-wagen { display: grid; grid-template-columns: minmax(calc(var(--catkin-container-xs) + var(--catkin-space-sm)), 1fr) minmax(0, 3fr); gap: var(--catkin-space-md); }
.ct-te-wagen > .col { min-width: 0; padding: 0; }
@media (max-width: 64em) { .ct-te-wagen { grid-template-columns: minmax(0, 1fr); } }
.ct-reiterkarte > .ct-karte__inhalt { container-type: inline-size; }
@container (max-width: 50em) { .ct-te-wagen { grid-template-columns: minmax(0, 1fr); } }

/* F4 #3101 FIX-13 (Festlegung 41) Arbeitsflaeche: Reiterkarte links, einklappbare Seitenleiste rechts (U1.4, K11, CI17, U15.3). Baustein fuer
   jede Maske (R0); Verhalten js/catkin/ct-reiter.js (Zustand im Browser gemerkt, Raster beim Sichtbarwerden neu vermessen).
   Markup: .ct-arbeitsflaeche[data-ct-seitenleiste=<schluessel>] > section.ct-karte.ct-reiterkarte (Kopf: ul.nav-tabs[data-ct-reiter]) +
   aside.ct-karte.ct-seitenleiste (Kopf: Titel + Schalter [data-ct-seitenleiste-schalter], Inhalt .ct-seitenleiste__inhalt). Eingeklappt bleibt nur
   der Schalter stehen, die Reiter bekommen die volle Breite. Bei schmalem Fenster steht die Leiste unter den Reitern. */
.ct-arbeitsflaeche { display: grid; grid-template-columns: minmax(0, 1fr) var(--catkin-container-sm); gap: var(--catkin-space-md); align-items: start; margin-block-start: var(--catkin-space-md); }
.ct-arbeitsflaeche > * { min-width: 0; margin-block-end: 0; }
.ct-arbeitsflaeche--zu { grid-template-columns: minmax(0, 1fr) auto; }
.ct-arbeitsflaeche--ohne-leiste { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 64em) { .ct-arbeitsflaeche, .ct-arbeitsflaeche--zu { grid-template-columns: minmax(0, 1fr); } }
.ct-reiterkarte > .ct-karte__inhalt > .tab-pane { min-width: 0; }
.ct-reiterkarte > .ct-karte__inhalt > .tab-pane:focus-visible { outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active); outline-offset: var(--catkin-border-width-2xs); }
.ct-reiterkarte > .ct-karte__kopf > .nav-tabs .nav-link:focus-visible { outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active); outline-offset: calc(-1 * var(--catkin-border-width-2xs)); }
.ct-seitenleiste__inhalt { display: flex; flex-direction: column; gap: var(--catkin-space-lg); }
.ct-seitenleiste__abschnitt { display: flex; flex-direction: column; gap: var(--catkin-space-sm); min-width: 0; }
.ct-seitenleiste__abschnitt > form { margin: 0; }
.ct-seitenleiste__abschnitt .card { margin-block-end: 0; }
.ct-seitenleiste__titel { font: var(--catkin-type-title-2xs); color: var(--catkin-on-surface-100); margin: 0; }
.ct-seitenleiste__untertitel { font: var(--catkin-type-body-md); font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-on-surface-100); margin: 0; }
/* Formulare in der Leiste stehen untereinander (schmale Spalte, U1.8): jede Bootstrap-Spalte nimmt die ganze Breite */
.ct-seitenleiste .row > :is([class*="col-"], .col) { flex: 0 0 100%; max-width: 100%; }
/* Hinweis der Dateiauswahl ("oder hier ablegen") bricht in der schmalen Leiste um statt abgeschnitten zu werden (U1.8, U2.7) */
.ct-seitenleiste .dx-fileuploader-input-wrapper { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--catkin-space-xs); }
.ct-seitenleiste .dx-fileuploader-input-container { display: block; overflow: visible; }
.ct-seitenleiste .dx-fileuploader-input-label { white-space: normal; overflow: visible; text-overflow: clip; }
.ct-seitenleiste__schalter { flex: 0 0 auto; margin-inline-start: auto; }
.ct-seitenleiste__schalter[aria-expanded="true"] .ct-seitenleiste__zeichen-zu,
.ct-seitenleiste__schalter[aria-expanded="false"] .ct-seitenleiste__zeichen-offen { display: none; }
.ct-arbeitsflaeche--zu > .ct-seitenleiste > .ct-karte__kopf { border-block-end: 0; padding-inline: var(--catkin-space-xs); }
.ct-arbeitsflaeche--zu > .ct-seitenleiste > .ct-karte__kopf > .ct-karte__titel,
.ct-arbeitsflaeche--zu > .ct-seitenleiste > .ct-seitenleiste__inhalt { display: none; }

/* =====================================================================================================
 * G. W10c: Gruppeneinstellungen, Mailkonto mit "Verbindung testen", Kundenauftrag/Transportangaben
 * ===================================================================================================== */

/* G1 Mailkonto: Server und Anmeldung nebeneinander (Tablet untereinander), HTML-Zeilen nebeneinander */
.ct-mailkonto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--catkin-container-sm)), 1fr)); gap: 0 var(--catkin-space-md); }
/* N3: Kopf-/Fusszeile links untereinander, Vorschau rechts (unter 64 em darunter), siehe Abschnitt N3 */
.ct-feld--schalter { justify-content: center; min-height: var(--catkin-control-height); }

/* G2 Ergebnis des Verbindungstests am Knopf (U4.5, K9.4): je Teil eine Hinweiszeile (CI19), Einzelheiten aufklappbar (R16) */
.ct-mailtest__hinweis { margin: 0 0 var(--catkin-space-sm); }
.ct-mailtest__ergebnis:empty { display: none; }
.ct-mailtest__ergebnis { display: grid; gap: var(--catkin-space-xs); margin-block-end: var(--catkin-space-md); }
.ct-mailtest__ergebnis > .ct-hinweis { margin: 0; }
.ct-mailtest__einzelheiten { margin-block-start: var(--catkin-space-2xs); }
.ct-mailtest__einzelheiten > summary { cursor: pointer; color: var(--catkin-link); }
.ct-mailtest__einzelheiten > code { display: block; white-space: pre-wrap; word-break: break-word; font: var(--catkin-type-body-xs); color: var(--catkin-on-surface-80); }
/* Verbindungstest einer Tabellenzeile (Gruppeneinstellungen): Ergebnis im Popover am Knopf (K7.4) */
.ct-mailtest-popover { display: grid; gap: var(--catkin-space-xs); max-width: var(--catkin-container-sm); }
.ct-mailtest-popover .ct-hinweis { margin: 0; }

/* G3 Viele Reiter in einer Karte (U15.3, K11.3): senkrecht links, Inhalt rechts; aktiver Reiter Link-Farbe, fett, Marker am Rand und
   surface-alt (CI17, K14); unter 64 em stehen die Reiter als umbrechende Zeile ueber dem Inhalt. */
.ct-reiter-senkrecht { display: grid; grid-template-columns: var(--catkin-container-2xs) minmax(0, 1fr); } /* feste Breite: der fette aktive Reiter verschiebt nichts */
.ct-reiter-senkrecht__liste {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--catkin-space-3xs);
    padding: var(--catkin-space-sm) 0;
    margin: 0;
    border-inline-end: var(--catkin-border-width-3xs) solid var(--catkin-border-decor);
}
.ct-reiter-senkrecht__liste .nav-link {
    display: flex;
    align-items: center;
    min-height: var(--catkin-target-min);
    padding: var(--catkin-space-xs) var(--catkin-space-md);
    border: 0;
    border-radius: 0;
    color: var(--catkin-on-surface-80);
    background: transparent;
    box-shadow: inset var(--catkin-border-width-2xs) 0 0 0 transparent;
    overflow-wrap: anywhere;
}
.ct-reiter-senkrecht__liste .nav-link:hover { color: var(--catkin-on-surface-100); background: var(--catkin-surface-1-hover); }
.ct-reiter-senkrecht__liste .nav-link:focus-visible { outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active); outline-offset: calc(-1 * var(--catkin-border-width-2xs)); }
.ct-reiter-senkrecht__liste .nav-link.active {
    color: var(--catkin-link);
    font-weight: var(--catkin-font-weight-semibold);
    background: var(--catkin-surface-alt);
    box-shadow: inset var(--catkin-border-width-2xs) 0 0 0 var(--catkin-link);
}
.ct-reiter-senkrecht__inhalt { padding: var(--catkin-space-md); min-width: 0; }
.ct-reiter__titel { font: var(--catkin-type-title-2xs); color: var(--catkin-on-surface-100); margin: 0 0 var(--catkin-space-md); }
.ct-abschnitt { font: var(--catkin-type-body-md); font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-on-surface-100); margin: var(--catkin-space-lg) 0 var(--catkin-space-sm); }
@media (max-width: 64em) {
    .ct-reiter-senkrecht { grid-template-columns: minmax(0, 1fr); }
    .ct-reiter-senkrecht__liste { flex-direction: row; flex-wrap: wrap; border-inline-end: 0; border-block-end: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); }
}

/* G4 Raster-Varianten und Kontrollkaestchen (R3, K4.1): zwei Spalten fuer Paare (Benutzer/Passwort, Import/Export);
   Kontrollkaestchen mit Beschriftung rechts daneben, untereinander in einer Schalterliste; Hilfe und Fehler unter der Beschriftung */
.ct-formular--zwei { grid-template-columns: repeat(2, minmax(0, var(--catkin-container-xs))); }
@media (max-width: 48em) { .ct-formular--zwei { grid-template-columns: minmax(0, 1fr); } }
.ct-formular + .ct-schalterliste, .ct-schalterliste + .ct-formular, .ct-hinweis + .ct-schalterliste { margin-block-start: var(--catkin-space-md); }
.ct-schalterliste { display: grid; gap: var(--catkin-space-xs); justify-items: start; }
.ct-feld--check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--catkin-space-xs);
    align-items: center;
    min-height: var(--catkin-target-min);
}
.ct-feld--check > .form-check-input { margin: 0; float: none; }
.ct-feld--check > label { font: var(--catkin-type-body-sm); font-weight: var(--catkin-font-weight-regular); margin: 0; }
.ct-feld--check > .ct-feld__hilfe, .ct-feld--check > .ct-feld__fehler { grid-column: 2; }
.ct-feld--check > .field-validation-valid:empty { display: none; }

/* G5 Firmenbild: Bild und Hochladen links, Felder rechts; Tabellen der Reiter; Mailkonto ohne Zugangsdaten (Achtung, mit Tooltip) */
.ct-gs-firma { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--catkin-space-md); align-items: start; }
@media (max-width: 64em) { .ct-gs-firma { grid-template-columns: minmax(0, 1fr); } }
.ct-gs-tabelle { min-width: 0; }
html .dx-datagrid .dx-data-row.ct-zeile-unvollstaendig > td { background-color: var(--catkin-critical-surface-3); color: var(--catkin-critical-on-surface-100); }

/* G6 Eine Reihe, eine Linie (U14.8, R3): Beschriftungen einer Rasterzeile brechen verschieden um (z. B. eine- und zweizeilig) - die Felder
   stehen trotzdem auf einer Hoehe. Jedes Feld belegt vier Spuren des Rasters (Beschriftung, Feld, Hilfe, Fehler) als Subgrid; die
   Beschriftung steht unten in ihrer Spur, direkt ueber dem Feld. Gilt fuer alle .ct-formular (W9-Baukasten). */
@supports (grid-template-rows: subgrid) {
    .ct-formular > .ct-feld:not(.ct-feld--check) {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        row-gap: var(--catkin-space-2xs);
        align-content: start;
    }
    .ct-formular > .ct-feld > label, .ct-formular > .ct-feld > .ct-feld__label { align-self: end; }
    /* Schalter ohne eigene Beschriftung (DX-Kontrollkaestchen mit Text) stehen in der Spur der Felder, linksbuendig */
    .ct-formular > .ct-feld--schalter { justify-items: start; justify-content: start; }
    .ct-formular > .ct-feld--schalter > .dx-checkbox, .ct-formular > .ct-feld--schalter > .dx-switch { grid-row: 2; align-self: center; }
    /* Editoren mit eingebauter Beschriftung (DX label) belegen die Feldspur */
    .ct-formular > .ct-feld > .dx-texteditor.dx-editor-with-label:first-child { grid-row: 2; }
}

/* G7 Kopf der Datenpflege-Masken (W10c, CI13/U14.6, E-0013): Nebenaktionen | abgesetzte Gefahr-Leiste | Speichern und Abbrechen.
   Die Gefahr-Leiste steht zwischen zwei Trennlinien, die Leiste des Waechters bleibt rechts aussen. */
.ct-formular-kopf__aktionen > .ct-leiste { margin-inline-start: 0; }
.ct-leiste--zwischen { padding-inline: var(--catkin-space-md); border-inline: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); }
@media (max-width: 48em) { .ct-leiste--zwischen { padding-inline: 0; border-inline: 0; } }
/* Pflichtkennzeichen am Feld (statt fester roter Schrift): Textstaerke der Familie critical (Guideline 4b, >= 4,5:1) */
.ct-pflicht { color: var(--catkin-critical-on-surface-80); }

/* G8 Kundenauftrag und Transportangaben (W10c, Rest aus W10a): Karten nach U15.1 und Raster nach R3/R4 - zentral fuer die
   Bestandsklassen der beiden Masken (.card, .card-header, .form-group in .row), ohne die Feldreihenfolge zu aendern (U17.5: beide Masken
   haben eine fachliche Reihenfolge, Wissensbasis "Kundenauftrag anlegen" und Reiter der Transportangaben). */
.ct-maske-raster .card { background: var(--catkin-surface-2); border: var(--catkin-border-width-3xs) solid transparent; border-radius: var(--catkin-radius-md); box-shadow: none; }
.ct-maske-raster .card.shadow { box-shadow: none !important; } /* CI5: flach, keine Schatten (Bootstrap-Hilfsklasse mit !important) */
.ct-maske-raster .card-header { background: transparent; border-block-end: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); padding: var(--catkin-space-sm) var(--catkin-space-md); font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
.ct-maske-raster .card-header > b, .ct-maske-raster .card-header .card-title { font: var(--catkin-type-title-2xs); color: var(--catkin-on-surface-100); margin: 0; }
.ct-maske-raster .card-body { padding: var(--catkin-space-md); }
/* R4: Feldbeschriftungen nicht fett; R3: Felder einer Zeile auf einer Linie (Beschriftungen brechen verschieden um) */
.ct-maske-raster label.control-label, .ct-maske-raster label.form-label { font: var(--catkin-type-body-sm); font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-100); }
.ct-maske-raster .row > .form-group { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--catkin-space-2xs); margin-block-end: var(--catkin-space-sm); }
.ct-maske-raster .row > .form-group > .field-validation-valid:empty { display: none; }
/* Spalten mit Beschriftung: die Zeile richtet ihre Spalten unten aus - Felder auf einer Linie, Pflichtstern bleibt neben der Beschriftung */
.ct-maske-raster .row:has(> [class^="col"] > label.control-label) { align-items: flex-end; }
.ct-maske-raster .row > [class^="col"] > .field-validation-valid:empty { display: none; }
/* Popover des Zeilentests: flach mit Rahmen (CI5), Titel als H3-Stufe, voller Kontoname darf umbrechen */
.ct-mailtest-huelle .dx-overlay-content { box-shadow: none; border: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); }
.ct-mailtest-huelle .dx-popup-title .dx-toolbar-label { font: var(--catkin-type-title-2xs); white-space: normal; }

/* H1 Live-Kanal (#3101 HD-2) – Meldung, die bleibt, bis sie geschlossen wird (K7.2): Text und Schliessen-Knopf in der Zeile; der
   Knopf ist rahmenlos mit Tooltip und aria-label (CI17), Klickflaeche mindestens --catkin-target-min (K2.6). */
/* HD-4 (Bildbefund D-UI): die Meldung füllt die Breite des Toasts, der Schließen-Knopf steht rechts am Ende (U14.2), nicht direkt hinter dem Text */
.ct-meldung { display: flex; align-items: flex-start; gap: var(--catkin-space-xs); flex: 1 1 auto; width: 100%; min-width: 0; }
.ct-meldung__text { flex: 1 1 auto; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; }
/* #3101 GD-2: Link in der Meldung (U6.2) – Link-Rolle des Farbkontexts, unterstrichen, Icon in Textgröße */
.ct-meldung__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--catkin-space-2xs); flex: 1 1 auto; min-width: 0; }
.ct-meldung__link { display: inline-flex; align-items: center; gap: var(--catkin-space-3xs); margin-top: 0; white-space: nowrap; color: var(--catkin-link); text-decoration: underline; font-weight: var(--catkin-font-weight-semibold); }
.ct-meldung__link:hover { color: var(--catkin-link); text-decoration-thickness: var(--catkin-border-width-2xs); }
.ct-meldung__link svg { width: var(--catkin-icon-body-sm); height: var(--catkin-icon-body-sm); }
.ct-meldung__schliessen {
    flex: 0 0 auto; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--catkin-target-min); min-height: var(--catkin-target-min);
    padding: 0; border: 0; background: transparent; color: inherit; border-radius: var(--catkin-radius-sm); cursor: pointer;
}
.ct-meldung__schliessen:focus-visible { outline: var(--catkin-border-width-2xs) solid currentColor; outline-offset: var(--catkin-space-3xs); }
.ct-meldung__schliessen svg { width: var(--catkin-icon-body-sm); height: var(--catkin-icon-body-sm); }
/* Toast (DevExpress notify) nach CI19/K7.2/CI22 (#3101 D-UI, Befund HD-2: kraeftige orange Flaeche mit weisser Schrift): die Kategorie
   setzt _Layout ueber data-color am Inhalt (info, success, warning, critical); Flaeche surface-3, Text on-surface-100, Rahmen dekorativ,
   Icon in on-surface-70 als Maske (Zeichen wie die Statuszeichen: Haken, Warndreieck = CI12 (b)-Platzhalter; Information = Kreis mit i). */
.dx-toast-content.ct-meldung-toast {
    background-color: var(--catkin-surface-3); color: var(--catkin-on-surface-100);
    border: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60); border-radius: var(--catkin-radius-sm); box-shadow: none;
    font: var(--catkin-type-body-sm);
}
.dx-toast-content.ct-meldung-toast .dx-toast-icon {
    background-image: none; background-color: var(--catkin-on-surface-70);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.8' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.8' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
.dx-toast-content.ct-meldung-toast[data-color="success"] .dx-toast-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 7'/%3E%3C/svg%3E"); }
.dx-toast-content.ct-meldung-toast[data-color="warning"] .dx-toast-icon,
.dx-toast-content.ct-meldung-toast[data-color="critical"] .dx-toast-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 2.9 17.4a2 2 0 0 0 1.7 3h14.8a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='17.1' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.3 2.9 17.4a2 2 0 0 0 1.7 3h14.8a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Ccircle cx='12' cy='17.1' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.dx-toast-content.ct-meldung-toast .dx-toast-message { color: var(--catkin-on-surface-100); }
.dx-toast-content.ct-meldung-toast .ct-meldung__schliessen { color: var(--catkin-on-surface-80); }

/* H2 Verbindungsanzeige (ct-live.js anzeigeBinden, fuer die Dispo-Sichten): Punkt + Text, Farbe nie das einzige Merkmal (CI3) –
   der Text sagt den Zustand. live = success, verbindet = warning, getrennt = critical (Inhaltsstaerke 70 fuer den Punkt, 80 fuer Text). */
.ct-live-anzeige { display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); font: var(--catkin-type-body-sm); /* D-UI: body-xs = 10,5 px bei 14 px Grundschrift (CI8) */ color: var(--catkin-on-surface-80); }
.ct-live-anzeige__punkt { width: var(--catkin-size-3xs); height: var(--catkin-size-3xs); border-radius: var(--catkin-radius-full); background: var(--catkin-neutral-on-surface-70); }
.ct-live-anzeige[data-zustand="live"] .ct-live-anzeige__punkt { background: var(--catkin-success-on-surface-70); }
.ct-live-anzeige[data-zustand="verbindet"] .ct-live-anzeige__punkt { background: var(--catkin-warning-on-surface-70); }
.ct-live-anzeige[data-zustand="getrennt"] .ct-live-anzeige__punkt { background: var(--catkin-critical-on-surface-70); }
.ct-live-anzeige[data-zustand="getrennt"] .ct-live-anzeige__text { color: var(--catkin-critical-on-surface-80); }
@media (prefers-reduced-motion: no-preference) {
    .ct-live-anzeige[data-zustand="verbindet"] .ct-live-anzeige__punkt { animation: ct-live-puls calc(var(--catkin-duration-xslow) * 3) var(--catkin-easing-functional) infinite alternate; }
}
@keyframes ct-live-puls { 50% { opacity: var(--catkin-opacity-md); } }

/* ---- #3101 Q1 (K3.8, R0): Datum und Uhrzeit maskiert – ct-datum.js -------------------------------------------------------------------
   Das native Feld (type=date|datetime-local|time) bleibt als Träger des ISO-Werts im Formular und ist unsichtbar; sichtbar ist das maskierte
   Feld daneben (.ct-datum, DevExtreme DateBox, Höhe nach K1 wie jedes DX-Feld). Fehler der Validierung am Träger färben dessen Rahmen (K3.3). */
.ct-datum__traeger { display: none !important; }
.ct-datum { min-width: 0; }
.input-group > .ct-datum { flex: 1 1 auto; width: 1%; }
html .ct-datum.ct-datum--fehler.dx-texteditor { border-color: var(--catkin-critical-on-surface-70); }
/* Fehlermeldung eines ungültigen Datumsfelds nach K3.3: Text critical-on-surface-80 auf der Fläche, Rahmen critical-on-surface-70 (keine rote Füllfläche) */
html [data-ct-datum-ungueltig] .dx-invalid-message > .dx-overlay-content {
    background: var(--catkin-surface-1); color: var(--catkin-critical-on-surface-80);
    border: var(--catkin-border-width-3xs) solid var(--catkin-critical-on-surface-70); font: var(--catkin-type-body-sm);
}

/* ---- #3101 Q1 Nachbesserung (K3.6, U1.8, R3): Datumsfelder mindestens so breit wie ihr Format ------------------------------------
   Breite = Zeichen des Formats (TT.MM.JJJJ = 10, mit Zeit 16, Zeit 5; ch der Feldschrift) + Innenabstand + Knöpfe (Löschen, Kalender) aus
   den Größen-Tokens. Die Spalte, die ein Datumsfeld trägt, wird nie schmaler als das Feld (Raster bricht um statt zu überlappen). */
html {
    --ct-datum-knoepfe: calc(2 * var(--catkin-control-height) + 2 * var(--catkin-space-xs));
    --ct-datum-breite-date: calc(10ch + var(--ct-datum-knoepfe));
    --ct-datum-breite-datetime: calc(16ch + var(--ct-datum-knoepfe));
    --ct-datum-breite-time: calc(5ch + var(--ct-datum-knoepfe));
}
html .dx-datebox[data-ct-datum-art="date"]:not(.dx-daterangebox .dx-datebox):not(.dx-datagrid .dx-datebox) { min-inline-size: var(--ct-datum-breite-date); }
html .dx-datebox[data-ct-datum-art="datetime"]:not(.dx-daterangebox .dx-datebox):not(.dx-datagrid .dx-datebox) { min-inline-size: var(--ct-datum-breite-datetime); }
html .dx-datebox[data-ct-datum-art="time"]:not(.dx-daterangebox .dx-datebox):not(.dx-datagrid .dx-datebox) { min-inline-size: var(--ct-datum-breite-time); }
html [class*="col"]:has(> .dx-datebox[data-ct-datum-art]:not(.dx-datagrid .dx-datebox)) { min-inline-size: min-content; }
/* Beschriftungen in schmalen Spalten brechen um (Silbentrennung nach der Sprache der Seite), statt in die Nachbarspalte zu ragen */
html [class*="col"] > label, html [class*="col"] > .control-label { overflow-wrap: break-word; hyphens: auto; max-inline-size: 100%; }

/* =====================================================================================================
 * Q2 (#3101, Festlegung 36 mit Ergaenzung 20.10.2026): Ebenen nach Revision 6 und einfache Trennstriche
 *    Guideline 4b "Seite und Karten", U15.1: Seite surface-1 (hell weiss, dunkel neutral-1), Karten und Bereiche surface-2,
 *    Verschachteltes surface-3; Rahmen nur, wo die Ebene allein nicht trennt (on-surface-60, 1 px, K10.3). Bedienelemente und
 *    Tabellenkoerper haben eine eigene Flaeche (surface-1) und heben sich so von der grauen Karte ab (CI2: Feldrahmen
 *    border-control >= 3:1 zur Karte). Popups und Dialoge stehen auf surface-1 ueber der Abdunklung (K8.6), flach (CI5).
 *    Seitenleiste und Kopfleiste: surface-1, je ein 1-px-Strich (rechts bzw. unten) in der dekorativen Linienfarbe, keine
 *    Schatten, keine Flaeche als Trenner (DB-Design-System); die Kopfleiste in Mandantenfarbe bleibt (Festlegung 22).
 *    Zuordnung Element -> Rolle: PROGRESS.md, Abschnitt "Q2".
 * ===================================================================================================== */

/* Q2.1 Rollen des Themes (Bootstrap/catkin-hyper app.min.css) auf die Ebenen. secondary-bg traegt in Bootstrap Karten,
   Akkordeon und Listengruppen (= Karte, surface-2); Dropdown, Modal, Popover und Offcanvas bekommen unten surface-1. */
:root, [data-bs-theme] {
    --ct-body-bg: var(--catkin-surface-1);
    --ct-body-bg-rgb: var(--catkin-surface-1-rgb);
    --ct-secondary-bg: var(--catkin-surface-2);
    --ct-secondary-bg-rgb: var(--catkin-surface-2-rgb);
    --ct-tertiary-bg: var(--catkin-surface-3);
    --ct-tertiary-bg-rgb: var(--catkin-surface-3-rgb);
    --ct-input-bg: var(--catkin-surface-1);
    --ct-input-disabled-bg: var(--catkin-surface-3);
}

/* Q2.2 Kopfleiste und Seitenleiste: Flaeche surface-1, je ein Strich in der dekorativen Linienfarbe (Rahmenbreite aus Token).
   Die Mandantenfarbe der Kopfleiste (.stage-color, OverwriteStageColor) ueberschreibt nur die Flaeche, der Strich bleibt. */
html[data-topbar-color] { --ct-topbar-bg: var(--catkin-surface-1); }
html[data-menu-color] { --ct-menu-bg: var(--catkin-surface-1); }
html .navbar-custom { border-bottom: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60); box-shadow: none; }
html[data-menu-color] .leftside-menu { border-right: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60); box-shadow: none; }

/* Q2.3 Karten und Bereiche (U15.1): surface-2 ohne Rahmen (die Ebene trennt); Kopf- und Fusslinien bleiben als schwache Linie.
   Der Rahmen wird transparent statt entfernt, damit sich keine Masse verschieben (K1, U1.8). Verschachtelte Karten: surface-3. */
html .card { --ct-card-bg: var(--catkin-surface-2); --ct-card-border-color: transparent; }
html :is(.ct-karte, .ct-maske-raster .card) { background: var(--catkin-surface-2); border-color: transparent; }
html :is(.card, .ct-karte) :is(.card, .ct-karte) { --ct-card-bg: var(--catkin-surface-3); background: var(--catkin-surface-3); }
html :is(.ct-karte__kopf, .ct-karte__fuss, .card-header, .card-footer) { border-color: var(--catkin-on-surface-60); }
/* Seitenkopf-Flaeche der Datenpflege-Masken (E2, haftend): ein Bereich (surface-2); die Linie unten trennt ihn beim Rollen von Karten
   gleicher Ebene darunter. Akkordeon und Listengruppe sind Bereiche einer Karte. */
.ct-formular-kopf { background: var(--catkin-surface-2); border-block-end-color: var(--catkin-on-surface-60); }

/* Q2.4 Felder: eigene Flaeche surface-1 mit Rahmen border-control (CI2 >= 3:1 zur Karte, auch zu surface-3); gruen erst bei
   Hover/Fokus (CI21). Gesperrte Felder: surface-3 mit dekorativem Rahmen (K3.7: sichtbar nicht bedienbar). */
html :is(.form-control, .form-select):not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
    background-color: var(--catkin-surface-1);
    border-color: var(--catkin-border-control);
}
html :is(.form-control, .form-select):is(:hover, :focus):not(:disabled):not([readonly]) { border-color: var(--catkin-border-active); }
html :is(.form-control, .form-select):not([type="file"]):not([type="checkbox"]):not([type="radio"]):is(:disabled, [readonly]) { background-color: var(--catkin-surface-3); border-color: var(--catkin-on-surface-60); }
html .input-group-text:not(.btn) { background-color: var(--catkin-surface-3); border-color: var(--catkin-border-control); }
/* DevExtreme-Editoren (Flaeche surface-1 aus dx-farben.css): Ruherahmen neutral border-control; in Tabellenzeilen und Filterzeilen der
   Grids bleibt die Darstellung der Bibliothek (dort traegt die Zelle den Rahmen). */
html .dx-texteditor.dx-editor-outlined:not(.dx-state-hover):not(.dx-state-focused):not(.dx-invalid):not(.dx-state-readonly):not(:is(.dx-datagrid, .dx-treelist) .dx-texteditor):not(.dx-daterangebox .dx-texteditor) {
    border-color: var(--catkin-border-control);
}
html .dx-daterangebox.dx-editor-outlined:not(.dx-state-hover):not(.dx-state-focused):not(.dx-invalid) { border-color: var(--catkin-border-control); }
html .dx-texteditor.dx-state-readonly:not(:is(.dx-datagrid, .dx-treelist) .dx-texteditor) { background-color: var(--catkin-surface-3); }

/* Q2.5 Tabellen: Koerper surface-1 (eigene Flaeche, keine grau-auf-grau-Zeilen in Karten), Kopf, Filterzeile und Streifen surface-3
   (CI14: Tabellenkoepfe neutral). Gilt fuer jede Tabelle (R0), auch ausserhalb von Karten, damit Listen und Karten gleich lesen.
   In einer Karte grenzt ein 1-px-Rahmen die Tabelle ab, weil surface-1 und surface-2 allein zu nah beieinanderliegen. */
html :is(.dx-datagrid-headers, .dx-treelist-headers),
html :is(.dx-datagrid-headers, .dx-treelist-headers) :is(.dx-header-row, .dx-datagrid-filter-row, .dx-treelist-filter-row) { background-color: var(--catkin-surface-3); }
html :is(.dx-datagrid-header-panel, .dx-treelist-header-panel) { background-color: transparent; }
html :is(.dx-datagrid, .dx-treelist) { background-color: transparent; }
html :is(.dx-datagrid-rowsview, .dx-treelist-rowsview, .dx-datagrid-total-footer) { background-color: var(--catkin-surface-1); }
html :is(.dx-datagrid-pager, .dx-treelist-pager) { background-color: transparent; }
html :is(.card, .ct-karte, .ct-dispo__seite) :is(.dx-datagrid, .dx-treelist):not(:has(> .dx-datagrid-borders, > .dx-treelist-borders)) > :is(.dx-datagrid-headers, .dx-datagrid-rowsview, .dx-treelist-headers, .dx-treelist-rowsview) {
    border-inline: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60);
}
html :is(.card, .ct-karte) .table { --ct-table-bg: var(--catkin-surface-1); }
html .table { --ct-table-striped-bg: var(--catkin-surface-3); --ct-table-hover-bg: var(--catkin-surface-1-hover); }
html .table > thead > tr > th { background-color: var(--catkin-surface-3); }

/* Q2.6 Reiter ueber dem Inhalt (Bootstrap nav-tabs): der aktive Reiter traegt die Flaeche seines Inhalts (Seite) */
html .nav-tabs { --ct-nav-tabs-link-active-bg: var(--catkin-surface-1); --ct-nav-tabs-link-hover-border-color: var(--catkin-on-surface-60); --ct-nav-tabs-border-color: var(--catkin-on-surface-60); --ct-nav-tabs-link-active-border-color: var(--catkin-on-surface-60) var(--catkin-on-surface-60) var(--catkin-surface-1); }
html :is(.card, .ct-karte) .nav-tabs { --ct-nav-tabs-link-active-bg: var(--catkin-surface-2); --ct-nav-tabs-link-active-border-color: var(--catkin-on-surface-60) var(--catkin-on-surface-60) var(--catkin-surface-2); }

/* Q2.7 Ueberlagerungen (K7.3, K7.4, K8): Dropdown, Popover, Dialog, Seitenleiste (Offcanvas) und DevExtreme-Popups auf surface-1
   mit 1-px-Rahmen statt Schatten (CI5); Abdunklung --catkin-scrim (K8.6). */
html .dropdown-menu { --ct-dropdown-bg: var(--catkin-surface-1); --ct-dropdown-border-color: var(--catkin-on-surface-60); --ct-dropdown-box-shadow: none; }
html .popover { --ct-popover-bg: var(--catkin-surface-1); --ct-popover-border-color: var(--catkin-on-surface-60); --ct-popover-box-shadow: none; }
html .modal { --ct-modal-bg: var(--catkin-surface-1); --ct-modal-border-color: var(--catkin-on-surface-60); --ct-modal-box-shadow: none; }
html :is(.offcanvas, .offcanvas-start, .offcanvas-end) { --ct-offcanvas-bg: var(--catkin-surface-1); --ct-offcanvas-border-color: var(--catkin-on-surface-60); }
html .modal-backdrop { --ct-backdrop-bg: var(--catkin-scrim); --ct-backdrop-opacity: 1; }
html .offcanvas-backdrop { background-color: var(--catkin-scrim); }
html .offcanvas-backdrop.show { opacity: 1; }
html .dx-overlay-shader { background-color: var(--catkin-scrim); }
html .dx-overlay-wrapper .dx-overlay-content.dx-popup-normal,
html .dx-dropdowneditor-overlay .dx-overlay-content,
html .dx-tooltip-wrapper .dx-overlay-content,
html .dx-popover-wrapper .dx-overlay-content { box-shadow: none; }
html .swal2-popup { background: var(--catkin-surface-1); color: var(--catkin-on-surface-100); border: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60); }

/* =====================================================================================================
 * W13 Teil 0 - Kontrollkaestchen, Optionsfelder und Schalter (K1.4, K4, K14, CI2, CI21, CI22, K3.7)
 * PO-Befund 20.10.2026 (Kundenauftrag "Split-Auftrag": graues Quadrat in Feldgroesse, wirkt im hellen Layout inaktiv). Ursache
 * zentral: Bootstrap .form-check-input traegt Flaeche --ct-secondary-bg und Rahmen --ct-border-color (= border-decor, dekorativ,
 * 1,5-1,7:1 zur Karte surface-2) - also die Farben eines gesperrten Felds (Q2.4); DevExtreme-Kaestchen und -Schalter ebenso
 * (dx-farben.css: border-decor). Dazu Einzelgroessen je Maske (inline 2rem/2,4rem) statt einer Groesse.
 * Regel: rahmenlose Elemente nach K1.4 haben eine eigene Groesse (--catkin-icon-body-sm), stehen mittig zur Reihe bzw. auf der
 * Feldlinie, Ruhe-Rahmen border-control (>= 3:1, CI2), Hover/Fokus border-active (CI21), gewaehlt = gefuellt in der Rolle der
 * Auswahl (primary, K14) mit Haken, gesperrt = surface-3 mit gestricheltem Rahmen on-surface-60 (K3.7, wie gesperrte Knoepfe).
 * ===================================================================================================== */

/* W13.1 Bootstrap und native Kaestchen/Optionsfelder (ausserhalb der DevExtreme-Widgets) */
html :is(.form-check-input, input[type="checkbox"]:not(.btn-check), input[type="radio"]:not(.btn-check)):not(.dx-widget input) {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--catkin-icon-body-sm) !important;      /* !important: Einzelgroessen inline je Maske (K1.5, CI24) */
    height: var(--catkin-icon-body-sm) !important;
    min-height: 0;
    padding: 0;
    vertical-align: middle;
    background-color: var(--catkin-surface-1);
    background-image: var(--ct-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--catkin-border-width-3xs) solid var(--catkin-border-control);
    border-radius: var(--catkin-radius-xs);
    opacity: 1;
    filter: none;
    cursor: pointer;
}
html input[type="radio"]:not(.btn-check):not(.dx-widget input), html .form-check-input[type="radio"] { border-radius: var(--catkin-radius-full); }
html :is(.form-check-input, input[type="checkbox"], input[type="radio"]):not(.dx-widget input):is(:hover, :focus):not(:disabled) { border-color: var(--catkin-border-active); }
html :is(.form-check-input, input[type="checkbox"], input[type="radio"]):not(.dx-widget input):focus-visible {
    outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active);
    outline-offset: var(--catkin-border-width-3xs);
    box-shadow: none;
}
html :is(.form-check-input, input[type="checkbox"], input[type="radio"]):not(.dx-widget input):active { filter: none; }   /* CI22: kein brightness */
html :is(.form-check-input, input[type="checkbox"], input[type="radio"]):not(.dx-widget input):is(:checked, :indeterminate) {
    background-color: var(--catkin-primary-bg);
    border-color: var(--catkin-border-active);   /* Kante >= 3:1 auch auf surface-3 im Dunkelmodus (Fuellung allein 2,8:1) */
}
html input[type="checkbox"]:not(.form-check-input):not(.dx-widget input):checked { --ct-form-check-bg-image: var(--ct-w13-haken); }
html input[type="radio"]:not(.form-check-input):not(.dx-widget input):checked { --ct-form-check-bg-image: var(--ct-w13-punkt); }
html :is(.form-check-input, input[type="checkbox"], input[type="radio"]):not(.dx-widget input):is(:checked, :indeterminate):hover:not(:disabled) {
    background-color: var(--catkin-primary-bg-hover);
    border-color: var(--catkin-border-active);
}
html :is(.form-check-input, input[type="checkbox"], input[type="radio"]):not(.dx-widget input):disabled {
    background-color: var(--catkin-surface-3);
    border-style: dashed;
    border-color: var(--catkin-on-surface-60);
    opacity: 1;
    cursor: not-allowed;
}
html :is(.form-check-input, input[type="checkbox"], input[type="radio"]):not(.dx-widget input):disabled:is(:checked, :indeterminate) {
    background-color: var(--catkin-on-surface-60);
    border-color: var(--catkin-on-surface-60);
}
html .form-check-input:disabled ~ .form-check-label, html .form-check-input[disabled] ~ .form-check-label { opacity: 1; color: var(--catkin-on-surface-80); }
/* Ein Kaestchen mit Feldklasse (.form-control) bleibt ein Kaestchen, kein Feld in voller Breite */
html input[type="checkbox"].form-control, html input[type="radio"].form-control { display: inline-block; flex: none; }
/* Haken und Punkt fuer Kaestchen ohne Bootstrap-Klasse: dieselben Bilder wie .form-check-input:checked (app.css) */
html { --ct-w13-haken: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
       --ct-w13-punkt: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); }

/* W13.2 Schalter (Bootstrap .form-switch, K4.3): doppelte Breite, runde Bahn; Knopf aus app.css, gewaehlt gefuellt (K14) */
/* N5: Selektor so spezifisch wie noetig: die allgemeine Kaestchen-Regel W13.1 (html :is(... input[type=checkbox]:not(.btn-check) ...)) ist spezifischer als
   ".form-switch .form-check-input" und machte jeden Schalter zum Kaestchen (Bestand, bis N5 ohne Verwender).
   Knopf als Verlauf aus Rollen statt Bootstrap-SVG (rgba schwarz 25 % = 1,9:1, im Dunkelmodus unsichtbar): aus Inhaltsstaerke 70 (>= 3:1, CI2),
   gewaehlt in der Schrift der Fuellung auf Primaer (K14). */
html .form-switch input.form-check-input[type="checkbox"]:not(.dx-widget input) {
    width: calc(var(--catkin-icon-body-sm) * 2) !important;
    border-radius: var(--catkin-radius-full);
    background-image: radial-gradient(circle closest-side, var(--catkin-border-control) 62%, transparent 68%);
    background-position: left center;
    background-size: var(--catkin-icon-body-sm) var(--catkin-icon-body-sm);
    background-repeat: no-repeat;
}
html .form-switch input.form-check-input[type="checkbox"]:not(.dx-widget input):checked {
    background-position: right center;
    background-image: radial-gradient(circle closest-side, var(--catkin-primary-fg) 62%, transparent 68%);
}

/* W13.3 Beschriftung ueber dem Kaestchen wie bei den Nachbarfeldern (R3): das Kaestchen steht auf der Feldlinie, mittig in
   Feldhoehe (K1.4) - nicht als eigenes "Feld" in Feldgroesse. Bestandsmuster: .form-group > label + .form-check */
html .form-group > :is(label, .control-label) + .form-check,
html .form-group > :is(label, .control-label) + div > .form-check:only-child {
    display: flex;
    align-items: center;
    gap: var(--catkin-space-xs);
    min-height: var(--catkin-control-height);
    margin-block: 0 !important;                          /* .mt-1 (Bootstrap !important) */
    padding-inline-start: 0;
}
html .form-group > :is(label, .control-label) + .form-check > .form-check-input,
html .form-group > :is(label, .control-label) + div > .form-check:only-child > .form-check-input { float: none; margin: 0 !important; }
/* Bestandsmuster ohne .form-check: Beschriftung, darunter direkt das Kaestchen (z. B. Benutzerdialog) - mittig in Feldhoehe */
html .form-group > :is(label, .control-label) + input:is([type="checkbox"], [type="radio"]) {
    display: block;
    margin-block: calc((var(--catkin-control-height) - var(--catkin-icon-body-sm)) / 2) !important;
    margin-inline: 0;
}
/* Kaestchen mit Beschriftung rechts (.form-check): Beschriftung mittig zum Kaestchen */
html .form-check:not(.form-switch) { display: flex; align-items: center; gap: var(--catkin-space-xs); padding-inline-start: 0; min-height: var(--catkin-target-min); }
html .form-check:not(.form-switch) > .form-check-input { float: none; margin: 0; }
html .form-check.form-check-inline { display: inline-flex; }
html .form-switch { display: flex; align-items: center; gap: var(--catkin-space-xs); padding-inline-start: 0; min-height: var(--catkin-target-min); }
html .form-switch > .form-check-input { float: none; margin: 0; }

/* W13.4 DevExtreme-Kaestchen, -Optionsfelder und -Schalter: dieselbe Groesse und dieselben Rollen */
html .dx-checkbox-icon {
    font-size: var(--catkin-icon-body-sm);
    border: var(--catkin-border-width-3xs) solid var(--catkin-border-control);
    border-radius: var(--catkin-radius-xs);
    background-color: var(--catkin-surface-1);
}
html .dx-checkbox.dx-state-hover:not(.dx-state-readonly):not(.dx-state-disabled) .dx-checkbox-icon,
html .dx-checkbox.dx-state-focused:not(.dx-state-readonly) .dx-checkbox-icon { border-color: var(--catkin-border-active); }
html .dx-checkbox.dx-state-focused:not(.dx-state-readonly) .dx-checkbox-icon { outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active); outline-offset: var(--catkin-border-width-3xs); }
html :is(.dx-checkbox-checked, .dx-checkbox-indeterminate) .dx-checkbox-icon {
    font-size: var(--catkin-icon-body-sm);
    background-color: var(--catkin-primary-bg);
    border-color: var(--catkin-border-active);
    color: var(--catkin-primary-fg);
}
/* Tabellen setzen die Kaestchen kleiner (.dx-datagrid-checkbox-size 16 px): dieselbe Groesse wie ausserhalb (K1.4) */
html :is(.dx-datagrid-checkbox-size, .dx-treelist-checkbox-size) .dx-checkbox-icon { font-size: var(--catkin-icon-body-sm); }
html .dx-checkbox-indeterminate .dx-checkbox-icon::before { background-color: var(--catkin-primary-fg); }
html .dx-checkbox.dx-state-hover:is(.dx-checkbox-checked, .dx-checkbox-indeterminate):not(.dx-state-readonly):not(.dx-state-disabled) .dx-checkbox-icon {
    background-color: var(--catkin-primary-bg-hover);
    border-color: var(--catkin-border-active);
}
html .dx-checkbox.dx-state-active .dx-checkbox-icon { filter: none; }
html :is(.dx-checkbox.dx-state-readonly, .dx-checkbox.dx-state-disabled, .dx-state-disabled .dx-checkbox) .dx-checkbox-icon {
    background-color: var(--catkin-surface-3);
    border-style: dashed;
    border-color: var(--catkin-on-surface-60);
    opacity: 1;
}
html :is(.dx-checkbox.dx-state-readonly, .dx-checkbox.dx-state-disabled, .dx-state-disabled .dx-checkbox):is(.dx-checkbox-checked, .dx-checkbox-indeterminate) .dx-checkbox-icon {
    background-color: var(--catkin-on-surface-60);
    border-color: var(--catkin-on-surface-60);
    color: var(--catkin-primary-fg);
}
html :is(.dx-state-disabled .dx-checkbox-text, .dx-state-disabled.dx-checkbox .dx-checkbox-text) { opacity: 1; color: var(--catkin-on-surface-80); }
html .dx-radiobutton-icon {
    width: var(--catkin-icon-body-sm);
    height: var(--catkin-icon-body-sm);
    box-sizing: border-box;
    border: var(--catkin-border-width-3xs) solid var(--catkin-border-control);
    background-color: var(--catkin-surface-1);
}
html .dx-radiobutton:is(.dx-state-hover, .dx-state-focused):not(.dx-state-readonly) .dx-radiobutton-icon { border-color: var(--catkin-border-active); }
html .dx-radiobutton-icon-checked { border-color: var(--catkin-border-active); }
html .dx-radiobutton-icon-checked .dx-radiobutton-icon-dot { background-color: var(--catkin-primary-bg); border-color: var(--catkin-surface-1); border-width: var(--catkin-border-width-xs); }
html .dx-switch-container { border-color: var(--catkin-border-control); background-color: var(--catkin-surface-1); }
html .dx-switch.dx-switch-on-value:not(.dx-state-readonly):not(.dx-state-disabled) .dx-switch-container { border-color: var(--catkin-border-active); background-color: var(--catkin-primary-bg); }
html .dx-switch.dx-switch-on-value:not(.dx-state-readonly):not(.dx-state-disabled) .dx-switch-handle::before { background-color: var(--catkin-primary-fg); }
html .dx-switch:is(.dx-state-readonly, .dx-state-disabled) .dx-switch-container { border-style: dashed; border-color: var(--catkin-on-surface-60); background-color: var(--catkin-surface-3); }
/* Kaestchen in Tabellenzeilen (Auswahlspalte, Ja/Nein-Spalten): dieselbe Groesse, mittig in der Zelle */
html :is(.dx-datagrid, .dx-treelist) .dx-checkbox { vertical-align: middle; }

/* W13.5 Auswahl mit eingebauter Beschriftung (DX "outlined" mit Label, z. B. "Company" im Kundenauftrag): die Rahmenstuecke um die
   Beschriftung (label-before/-after) trugen im Ruhezustand border-decor (1,7:1) neben dem Feldrahmen border-control - im Ruhezustand
   jetzt ebenfalls border-control (CI2/CI21); Hover/Fokus bleiben border-active (dx-farben.css). Der gruene Rahmen im Befundbild war der
   Fokus: der Formularwaechter setzt ihn beim Laden auf das erste leere Pflichtfeld (Company ist Pflicht, ExceptionRes.InvoiceCreatorIsRequired). */
html .dx-editor-outlined.dx-texteditor-with-label:not(.dx-state-hover):not(.dx-state-focused):not(.dx-invalid):not(.dx-state-readonly):not(:is(.dx-datagrid, .dx-treelist) .dx-texteditor) :is(.dx-label-before, .dx-label, .dx-label-after) {
    border-color: var(--catkin-border-control);
}

/* ===================================================================================================================================
   W14 Grosse Listen und Datenpflege (Teil 1)
   =================================================================================================================================== */
/* W14.1 (ersetzt durch FIX-5, PO 24.10.2026): kein Zustand an einer Zeilenaktion - Depotvalidierung und Planungsstand stehen als Kachel in der
   Statusspalte (Helpers/StatusKachel.cs: Depot, Workflow-Liste: Planungsstand). */
/* W14.2 Auftragsfamilie: Referenzsuche als Feld im Seitenkopf (rechts, Beschriftung ueber dem Feld); die Trefferliste steht unter dem Kopf */
.ct-auftraege__suche { margin-block-end: 0; }
.ct-auftraege__suche > .ct-feld { flex: 0 1 var(--catkin-container-xs); }
.ct-auftraege__suche > .ct-formular__ring { align-self: center; }
.ct-auftraege__treffer { margin-block-end: var(--catkin-space-sm); max-block-size: calc(6 * var(--catkin-control-height)); overflow-y: auto; }
.ct-auftraege__treffer .table { margin: 0; }
/* W14.3 Platzhalter-Hinweise (E-Mail-Vorlage): Hinweisleiste mit Liste (CI19), Zwischenueberschriften in Textgroesse; Zeichen im Textfluss */
.ct-hinweis.ct-platzhalter { display: block; }
.ct-hinweis.ct-platzhalter > svg { vertical-align: text-bottom; margin-inline-end: var(--catkin-space-2xs); }
.ct-platzhalter__gruppe { font: var(--catkin-type-body-sm); font-weight: var(--catkin-font-weight-semibold); margin: var(--catkin-space-xs) 0 0; }
.ct-liste-details--inhalt { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
/* W14.4 Massenupdate (Kunden): aufklappbarer Bereich in einer Karte; der Schalter im Kartenkopf zeigt den Zustand am Pfeil */
.ct-massenupdate__schalter[aria-expanded="true"] svg { transform: rotate(180deg); }
/* W14.5 Gelesener Wert ueber der Grenze (Transportakte: Anzahl Ladeeinheiten ueber dem Hoechstwert): Rolle "critical" statt bg-danger;
   die Bedeutung traegt die Hinweisleiste darunter (CI3, aria-describedby) */
.ct-feld__wert--kritisch, .ct-feld__wert--kritisch[readonly] { background: var(--catkin-critical-surface-3); color: var(--catkin-critical-on-surface-100); }
/* W14.6 Schalterliste ohne Eintraege (Kontrollkaestchen je nach Recht/Mandant ausgeblendet) nimmt keinen Platz ein */
.ct-schalterliste:not(:has(*)) { display: none; }
.ct-massenupdate:has(> .collapse:not(.show)) > .ct-karte__kopf { border-block-end-color: transparent; }

/* ===================================================================================================================================
   W15 Grosse Listen und Datenpflege (Teil 2)
   =================================================================================================================================== */
/* W15.1 Kartenpaar (U15.2): zwei gleichrangige Karten nebeneinander (z. B. zwei Tabellen einer Maske), bei wenig Breite untereinander;
   die Abstaende kommen aus dem Raster (K10.4), nicht aus den Karten */
.ct-karten-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--catkin-space-md); align-items: start; margin-block-end: var(--catkin-space-md); }
.ct-karten-paar > .ct-karte { margin-block-end: 0; }
@media (max-width: 64em) { /* = --catkin-screen-md */
    .ct-karten-paar { grid-template-columns: minmax(0, 1fr); }
}
/* W15.2 Nachricht eines Vorgangs (_OutgoingMailPartial): Kuerzel + Karte; ausgehend links, eingehend rechts (Seite statt Farbe, CI3);
   Empfaenger als Liste "An/Cc", Text gekuerzt bis "Mehr anzeigen" (Bootstrap-Collapse), Aktionen im Fuss */
.ct-mail { display: flex; align-items: flex-start; gap: var(--catkin-space-sm); }
.ct-mail--eingehend { flex-direction: row-reverse; }
.ct-mail__avatar {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    inline-size: var(--catkin-size-md); block-size: var(--catkin-size-md); border-radius: var(--catkin-radius-full);
    background: var(--catkin-surface-3); color: var(--catkin-on-surface-100); font: var(--catkin-type-body-sm); font-weight: var(--catkin-font-weight-semibold);
}
.ct-mail__karte { flex: 1 1 auto; }
.ct-mail__empfaenger { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--catkin-space-2xs) var(--catkin-space-sm); margin: 0 0 var(--catkin-space-sm); font: var(--catkin-type-body-sm); }
.ct-mail__empfaenger dt { font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-80); }
.ct-mail__empfaenger dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--catkin-space-2xs); }
.ct-mail__adresse { padding: 0 var(--catkin-space-xs); border-radius: var(--catkin-radius-sm); background: var(--catkin-surface-3); color: var(--catkin-on-surface-100); overflow-wrap: anywhere; }
.ct-mail__text { overflow-wrap: anywhere; }
.ct-mail__text.collapse:not(.show) { display: block; max-block-size: calc(12 * var(--catkin-control-height)); overflow: hidden; }
.ct-mail__aktionen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--catkin-space-xs); inline-size: 100%; }
.ct-mail__mehr.collapsed .ct-mail__weniger-text, .ct-mail__mehr:not(.collapsed) .ct-mail__mehr-text { display: none; }
.ct-mail + .ct-mail { margin-block-start: 0; }
/* W15.3 Eintrag einer Auswahlliste mit Zustand (inaktiver bzw. gesperrter Kunde/Dienstleister in den Frachtraten): Flaeche und Text aus der
   Familie (CI22) statt Bootstrap-Alert-Farben */
.ct-eintrag[data-color] { background: var(--catkin-surface-3); color: var(--catkin-on-surface-100); padding-inline: var(--catkin-space-2xs); border-radius: var(--catkin-radius-sm); }
/* W15.4 Zustandszeichen ausserhalb der Zeilenaktionen (z. B. Temperaturhinweis der Touren): Inhaltsstaerke 70 der Familie (data-color, CI22),
   die Bedeutung steht in Tooltip/aria-label (CI3) */
.ct-zeichen[data-color] { color: var(--catkin-on-surface-70); }
.ct-karten-paar--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 64em) { /* = --catkin-screen-md */
    .ct-karten-paar--drei { grid-template-columns: minmax(0, 1fr); }
}
/* W15.5 Ja/Nein-Feld im Raster (.ct-feld: Beschriftung, darunter das Kaestchen, z. B. "Gesperrt" bei Fahrer/Zugmaschine/Chassis): wie W13.3
   mittig in Feldhoehe auf der Feldlinie der Nachbarn (K1.4, R3) */
html .ct-feld > :is(label, .ct-feld__label) + input:is([type="checkbox"], [type="radio"]) {
    display: block;
    margin-block: calc((var(--catkin-control-height) - var(--catkin-icon-body-sm)) / 2) !important;
    margin-inline: 0;
    align-self: start;
}

/* ===================================================================================================================================
   W16 Datenpflege ohne Liste (Teil 1)
   =================================================================================================================================== */
/* W16.1 Feld und Knopf in einer Zeile (U14.5): z. B. Postleitzahl und "Neu …" der Distanzmatrix; der Knopf ist so hoch wie das Feld (K1),
   das Feld nimmt den Rest der Breite */
.ct-feld__reihe { display: flex; align-items: stretch; gap: var(--catkin-space-xs); min-width: 0; }
.ct-feld__reihe > :first-child { flex: 1 1 auto; min-width: 0; }
.ct-feld__reihe > .btn { flex: 0 0 auto; }
/* W16.2 Hinweisleiste in einer Karte vor dem Raster bekommt denselben Abstand wie zwischen Raster und Schalterliste (K10.4) */
.ct-karte__inhalt > .ct-hinweis + .ct-formular, .ct-karte__inhalt > .ct-hinweis + .ct-ampelraster { margin-block-start: var(--catkin-space-md); }
/* W16.3 Ampelraster (Schiffszeiten): Zeilen = Zeitspanne bzw. Farbe, Spalten = OK / Warnung / Kritisch; Kopfzeile und -spalte als
   Beschriftung (R3/R4: nicht fett), Werte in Feldhoehe, Intervalle "zwischen [ a und b ]" in einer Reihe (U14.8), bei wenig Platz nur zwischen den Haelften umbrechend (U1.8, U2.7) */
.ct-ampelraster {
    display: grid;
    grid-template-columns: var(--catkin-size-2xl) repeat(3, minmax(0, 1fr));
    gap: var(--catkin-space-sm) var(--catkin-space-lg);
    align-items: center;
}
.ct-ampelraster__spalte, .ct-ampelraster__zeile { font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-100); }
.ct-ampelraster__spalte { font-weight: var(--catkin-font-weight-semibold); }
.ct-ampelraster__wert { min-width: 0; }
.ct-intervall { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-2xs); font: var(--catkin-type-body-sm); }
.ct-intervall .dx-numberbox { inline-size: var(--catkin-size-xl); max-inline-size: 100%; }
.ct-intervall__teil { display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); white-space: nowrap; }
@media (max-width: 64em) { /* = --catkin-screen-md */
    .ct-ampelraster { grid-template-columns: minmax(0, 1fr); }
    .ct-ampelraster > span:empty { display: none; }
}
/* W16.4 Inhalt + schmale Begleitspalte (z. B. Dokumente neben den Tabellen eines Vertrags, bisher col-10/col-2) */
.ct-liste-details--seite { grid-template-columns: minmax(0, 5fr) minmax(0, 1fr); }
@media (max-width: 64em) { .ct-liste-details--seite { grid-template-columns: minmax(0, 1fr); } }
/* W16.5 Dateiauswahl in einer Filterzeile (z. B. Ratesheet-Upload des Vertrags): die Innenabstaende der DevExtreme-Dateiauswahl entfallen,
   damit ihr Knopf auf der Linie der Nachbarfelder und des Hochladen-Knopfs steht (U14.8, R1) */
.ct-filterzeile .dx-fileuploader-wrapper, .ct-filterzeile .dx-fileuploader-input-wrapper { padding: 0; }
.ct-filterzeile .dx-fileuploader-input-wrapper { border: 0; }
.ct-filterzeile > .ct-feld:has(.dx-fileuploader) { flex: 1 1 var(--catkin-container-xs); }
.ct-feld__reihe--schmal { max-inline-size: var(--catkin-container-md); }

/* ===================================================================================================================================
   W17 Datenpflege ohne Liste (Teil 2): Transportangaben Bahn/LKW, Nichtverfuegbarkeiten, Benutzergruppen, Wagenverladung, Wagen- und Lokmanagement
   =================================================================================================================================== */
/* W17.1 Drei Kataloge nebeneinander (Schadensstammdaten: Schadensarten breit, Verursacher und Schweregrad schmal, wie bisher 2:1:1) */
.ct-liste-details--drei { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 64em) { .ct-liste-details--drei { grid-template-columns: minmax(0, 1fr); } }
/* W17.2 Ladeschicht ueber der Seite fuer einen langen Formular-Post (Upload des Wagenstamms, CI20/Guideline 6a): Abdunklung --catkin-scrim
   (K8.6), in der Mitte eine flache Flaeche mit Ring (40 px, Bogen Link-Farbe auf Spur border-decor) und Text; bei reduzierter Bewegung still */
.ct-ladeschicht { position: fixed; inset: 0; z-index: var(--ct-ebene-ladeschicht); display: grid; place-items: center; background: var(--catkin-scrim); }
.ct-ladeschicht.d-none { display: none; }
.ct-ladeschicht__box {
    display: flex; align-items: center; gap: var(--catkin-space-sm);
    padding: var(--catkin-space-lg) var(--catkin-space-xl);
    border-radius: var(--catkin-radius-md);
    background: var(--catkin-surface-1); color: var(--catkin-on-surface-100); font: var(--catkin-type-body-md);
}
.ct-ring--bereich {
    width: var(--catkin-icon-body-2xl); height: var(--catkin-icon-body-2xl);
    border-color: var(--catkin-border-decor); border-block-start-color: var(--catkin-link);
}
/* W17.3 Reitergruppe vieler Seiten im Kartenkopf (Wagen- und Lokmanagement, acht Reiter): bricht bei wenig Breite um statt ueberzulaufen (U1.8, K11.3) */
.ct-karte__kopf > .nav-tabs { flex-wrap: wrap; row-gap: var(--catkin-space-2xs); }
/* W17.4 Hinweis neben einer Handlung, die sofort wirkt (Wagenverladung: Ziehen speichert sofort, K4.3/Festlegung 26 Ausnahme) */
.ct-seitenkopf__hinweis { align-self: center; font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
/* W17.5 Angaben als Liste Begriff/Wert (Benutzergruppen: Rollen und Gruppen der Anmeldung), Begriff nicht fett (R4) */
.ct-angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--catkin-space-2xs) var(--catkin-space-md); margin: 0; font: var(--catkin-type-body-sm); }
.ct-angaben > dt { font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-80); }
.ct-angaben > dd { margin: 0; color: var(--catkin-on-surface-100); overflow-wrap: anywhere; }
/* W17.6 Karten in der Reiterkarte einer Maske (Transportangaben Bahn/LKW, Pflichtfelder: Containerangaben, Zoll) sind verschachtelt:
   Ebene surface-3 (Festlegung 36, U15.1); Felder behalten ihre eigene Flaeche surface-1 (Q2) */
html .ct-maske-raster .ct-karte .card { background: var(--catkin-surface-3); }
/* W17.7 Pflichtstern und Kennzeichen (Import/Export/Zoll, per Skript gesetzt) stehen in derselben Zeile wie ihre Beschriftung (R3; bisher
   rutschte der Stern im Spaltenfluss der Feldgruppe in eine eigene Zeile, auch in Transportangaben und Kundenauftrag): die Feldgruppe fliesst
   in Zeilen, Beschriftung und Kennzeichen teilen sich eine Zeile, alles andere (Feld, Pruefhinweis, Fehlertext) nimmt die ganze Breite. */
.ct-maske-raster .row > .form-group { flex-flow: row wrap; justify-content: flex-start; align-content: flex-end; column-gap: 0; }
.ct-maske-raster .row > .form-group > :not(label.control-label):not(label.form-label):not(label.col-form-label):not(.ct-pflicht):not(.ct-namenhinweis):not([class^="lbl-"]) { flex: 1 0 100%; min-width: 0; }
/* W17.8 Spalten einer Feldzeile werden nie schmaler als ein Feld lesbar ist (U1.8, U2.7: "Aktuelle Containernummer" brach Silbe fuer Silbe);
   reicht der Platz nicht, bricht die Zeile um (Bootstrap .row). Nur in Masken mit diesem Zusatz (Transportangaben Bahn/LKW). */
.ct-maske-raster--mindestbreite .row > .form-group.col { min-width: var(--catkin-size-2xl); }
/* W17.9 Pruefhinweis unter der Containernummer (Badge "Containernummer korrekt") bricht in seiner Spalte um, statt in die Nachbarspalte zu ragen (U1.8) */
.ct-maske-raster .row > .form-group > .badge { white-space: normal; text-align: start; max-inline-size: 100%; }
/* W17.10 Zusatz "(Name)" hinter einer Beschriftung (Auswahl nach Name) in Groesse und Farbe der Beschriftung, in derselben Zeile (R3: sonst hob die
   groessere Schrift die Beschriftungszeile und versetzte das Feld gegen die Nachbarn); die Containernummer behaelt Platz fuer Wert und Pruefzeichen */
.ct-namenhinweis { font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); margin-inline-start: var(--catkin-space-2xs); }
.ct-maske-raster--mindestbreite .row > .form-group.col:has(.js-container-check) { min-width: var(--catkin-size-3xl); }
/* W17.11 Beschriftungen der Klasse form-label tragen im Raster keinen eigenen Abstand (Bootstrap 0.5rem), den Abstand gibt die Feldgruppe (R3:
   sonst standen ihre Felder tiefer als die der Nachbarn mit control-label) */
.ct-maske-raster .form-group > label.form-label { margin-block-end: 0; }
/* W17.12 Pflichtstern und per Skript gesetzte Kennzeichen in der Schrift der Beschriftung (sonst hob die groessere Grundschrift die Zeile) */
.ct-maske-raster .form-group > :is(.ct-pflicht, [class^="lbl-"]) { font: var(--catkin-type-body-sm); }

/* ===================================================================================================================================
   W18 Operativ I: Neuer Transport, Auftrag im Einsatz (LKW-Auftragsdetails), Hauptlauf-Buchung, Kundenauftrag TE, Neue Zugbuchung
   =================================================================================================================================== */
/* W18.1 Raster mit fester Spaltenzahl (R3: Reihen der Maske bleiben Reihen, auch wenn die Karte breiter wird); bei wenig Breite eine Spalte.
   Die Subgrid-Ausrichtung (G6) gilt weiter: Felder einer Reihe stehen auf einer Linie (U14.8). */
.ct-formular--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ct-formular--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ct-formular--eine { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 64em) { /* = --catkin-screen-md */
    .ct-formular--drei, .ct-formular--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48em) { /* = --catkin-screen-sm */
    .ct-formular--drei, .ct-formular--vier { grid-template-columns: minmax(0, 1fr); }
}
/* zwei Raster untereinander in derselben Karte: Abstand wie zwischen den Reihen eines Rasters (K10.4) */
.ct-formular + .ct-formular { margin-block-start: var(--catkin-space-md); }
/* W18.2 Titel eines Dialogs (K8.2): Ebene H2 in der Groesse H3 der Karten (CI8) */
.ct-dialog__titel { font: var(--catkin-type-title-2xs); color: var(--catkin-on-surface-100); margin: 0; }
/* W18.3 Neuer Transport: Termin (Datum und Uhrzeit nebeneinander, U14.5), "Neuer Ort" als Untergruppe unter dem Ortsfeld (K10.5, U15.1:
   Untergruppe mit eigenem Rahmen, keine eigene Karte), Verfuegbarkeiten unter dem Raster, Pruefzeichen der Containernummer unter dem Feld */
.ct-co-termin > .dx-widget { flex: 1 1 0; min-width: 0; }
/* Reihe Termin | Abruf | Transporteinheit | Reeder: der Termin (Datum + Uhrzeit) braucht zwei Felder Platz, das Kaestchen nur seine Beschriftung */
.ct-formular--vier.ct-co-zeile { grid-template-columns: minmax(0, 2fr) minmax(0, 0.7fr) minmax(0, 1.5fr) minmax(0, 1.5fr); }
@media (max-width: 64em) { .ct-formular--vier.ct-co-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48em) { .ct-formular--vier.ct-co-zeile { grid-template-columns: minmax(0, 1fr); } }
.ct-co-neuerort__inhalt {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--catkin-space-sm);
    margin-block-start: var(--catkin-space-xs); padding: var(--catkin-space-sm);
    background: var(--catkin-surface-3); border: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); border-radius: var(--catkin-radius-sm);
}
.ct-co-verfuegbarkeit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-sm); margin-block-start: var(--catkin-space-md); font: var(--catkin-type-body-sm); }
.ct-co-pruefung { display: flex; flex-wrap: wrap; gap: var(--catkin-space-2xs); }
.ct-co-pruefung > .badge:empty { display: none; }
.ct-co-solas { margin-block-start: var(--catkin-space-md); }
/* W18.4 Auftrag im Einsatz (LKW-Auftragsdetails): Kennung neben dem Titel, Handgriffe in Gruppen unter dem Kopf (Wechseln zu | Handlungen |
   Schalter "wirkt sofort" | abgesetzt Zerstoerendes), Karten Transport | Referenzen (zwei Spalten) | Notizen, Disposition, Termine, Reiterkarte */
.ct-od-kennung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-2xs) var(--catkin-space-xs); font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
.ct-od-art { display: inline-flex; align-items: center; padding: 0 var(--catkin-space-xs); border: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); border-radius: var(--catkin-radius-sm); color: var(--catkin-on-surface-100); }
.ct-od-aktionen { justify-content: flex-start; align-items: center; margin-block-end: var(--catkin-space-md); }
.ct-od-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-xs); }
.ct-od-gruppe + .ct-od-gruppe { padding-inline-start: var(--catkin-space-md); border-inline-start: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); }
.ct-od-gruppe__titel, .ct-od-hinweis { font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
.ct-od-schalter .btn[aria-pressed="true"] { border-color: var(--catkin-border-active); font-weight: var(--catkin-font-weight-semibold); } /* K14: eine Stufe staerker, nicht nur Farbe (Zeichen) */
@media (max-width: 48em) { .ct-od-gruppe + .ct-od-gruppe { padding-inline-start: 0; border-inline-start: 0; } }
.ct-od-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: var(--catkin-space-md); align-items: start; margin-block-end: var(--catkin-space-md); }
.ct-od-raster > .ct-karte { margin-block-end: 0; }
.ct-od-raster--extern { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 64em) { .ct-od-raster { grid-template-columns: minmax(0, 1fr); } }
.ct-od-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--catkin-space-md) var(--catkin-space-lg); align-items: start; }
.ct-od-spalten > .ct-formular + .ct-formular { margin-block-start: 0; }
@media (max-width: 48em) { .ct-od-spalten { grid-template-columns: minmax(0, 1fr); } }
.ct-od-statusbild { block-size: var(--catkin-icon-body-sm); inline-size: auto; }
.ct-od-rechnung:not(:empty) { margin-block-start: var(--catkin-space-sm); font: var(--catkin-type-body-sm); }
.ct-od-rechnung dl.row { margin: 0; }
.ct-od-dispo__raster { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) max-content; }
@media (max-width: 64em) { .ct-od-dispo__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-od-dispo__mail { margin-block-start: var(--catkin-space-xs); display: flex; align-items: center; gap: var(--catkin-space-xs); }
.ct-od-dispo__fuss { flex-wrap: wrap; gap: var(--catkin-space-xs); }
.ct-od-dispo__leiste { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--catkin-space-xs); }
.ct-od-dispo__hinweis { font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
.ct-od-dispo__hinweis--kritisch { color: var(--catkin-critical-on-surface-80); }
.ct-od-reiter--achtung { color: var(--catkin-critical-on-surface-80) !important; }
.ct-od-abschnitte { display: flex; flex-wrap: wrap; gap: var(--catkin-space-sm); align-items: flex-start; margin-block-end: var(--catkin-space-sm); }
.ct-od-abschnitte > .card { margin: 0 !important; }
.ct-od-tabelle { overflow-x: auto; }
.ct-od-sammler { margin: 0; font: var(--catkin-type-body-sm); }
.ct-od-sammler th { font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-80); background: var(--catkin-surface-alt); }
.ct-od-sammler td { vertical-align: middle; }
.ct-od-sammler__fuss { display: flex; justify-content: flex-end; padding-block-start: var(--catkin-space-sm); }
.ct-od-zwischentitel { font: var(--catkin-type-title-2xs); color: var(--catkin-on-surface-100); margin-block: var(--catkin-space-md) var(--catkin-space-xs); }
.ct-od-abschluss { display: grid; gap: var(--catkin-space-sm); justify-items: start; }
.ct-od-abschluss__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-sm); }
.ct-od-abschluss__feld { min-inline-size: var(--catkin-container-3xs); }
.ct-od-ergebnis { font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
/* W18.5 Termine entlang des Transports (Festlegung 34, wie die Karte der Haus-Dispo HD-6): Gestellungszeile, Fahrtleiste, Gestellung hervorgehoben */
.ct-termine__gestellung { margin: 0 0 var(--catkin-space-sm); font: var(--catkin-type-body-md); color: var(--catkin-on-surface-100); }
.ct-termine__leer { margin: 0; font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
.ct-termine__rahmen { overflow-x: auto; }
.ct-termine__tabelle { inline-size: 100%; border-collapse: collapse; font: var(--catkin-type-body-sm); }
.ct-termine__tabelle th { text-align: start; font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-80); background: var(--catkin-surface-alt); }
.ct-termine__tabelle :is(th, td) { padding: var(--catkin-space-2xs) var(--catkin-space-sm); border-block-end: var(--catkin-border-width-3xs) solid var(--catkin-border-subtle); }
.ct-termine__g > td { font-weight: var(--catkin-font-weight-semibold); }
.ct-termine__g > td:first-child { box-shadow: inset var(--catkin-border-width-2xs) 0 0 var(--catkin-border-active); }
.ct-termine__spaet { color: var(--catkin-critical-on-surface-80); }
/* W18.6 Hauptlauf-Buchung: oben Transport | Kundenangabe (drei Spalten wie bisher), unten Reiterkarte | LKW-Auftraege und Dokumente */
.ct-bd-oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--catkin-space-md); align-items: start; margin-block-end: var(--catkin-space-md); }
.ct-bd-oben > .ct-karte, .ct-bd-unten .ct-karte { margin-block-end: 0; }
@media (max-width: 64em) { .ct-bd-oben { grid-template-columns: minmax(0, 1fr); } }
.ct-bd-angaben { margin-block: var(--catkin-space-md); }
.ct-bd-zwischentitel { font: var(--catkin-type-body-sm); font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-on-surface-100); margin: 0 0 var(--catkin-space-xs); }
.ct-bd-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--catkin-space-md) var(--catkin-space-lg); align-items: start; }
.ct-bd-spalten > .ct-formular + .ct-formular { margin-block-start: 0; }
@media (max-width: 64em) { .ct-bd-spalten { grid-template-columns: minmax(0, 1fr); } }
.ct-bd-dispo { margin-block-start: var(--catkin-space-md); }
.ct-bd-rechnung:not(:empty) { margin-block-start: var(--catkin-space-sm); font: var(--catkin-type-body-sm); }
.ct-bd-rechnung dl.row { margin: 0; }
.ct-bd-pickup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-xs) var(--catkin-space-sm); margin-block-start: var(--catkin-space-md);
    padding: var(--catkin-space-sm); background: var(--catkin-surface-3); border-radius: var(--catkin-radius-sm); font: var(--catkin-type-body-sm); }
.ct-bd-pickup__titel { font-weight: var(--catkin-font-weight-semibold); }
.ct-bd-pickup__stand { display: inline-flex; flex-wrap: wrap; gap: var(--catkin-space-2xs); }
.ct-bd-pickup .btn[aria-pressed="true"] { border-color: var(--catkin-border-active); font-weight: var(--catkin-font-weight-semibold); }
.ct-bd-ergebnis { color: var(--catkin-on-surface-80); }
.ct-bd-unten { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--catkin-space-md); align-items: start; }
.ct-bd-unten--voll { grid-template-columns: minmax(0, 1fr); }
.ct-bd-unten__seite { display: grid; gap: var(--catkin-space-md); min-width: 0; }
.ct-bd-unten__haupt { min-width: 0; }
@media (max-width: 64em) { .ct-bd-unten { grid-template-columns: minmax(0, 1fr); } }
.ct-bd-reiter .ct-karte__inhalt > .tab-pane > .card { margin: 0; }
/* W18.7 Neue Zugbuchung: die drei Karten Ladung/Schiffsdaten/Zollangaben nebeneinander (bisher untereinander, Bootstrap 5 kennt .form-row nicht);
   Felder darin wie im Raster: Beschriftung ueber dem Feld, gleicher Abstand (R3), Pflichtstern mit Abstand zur Beschriftung */
.ct-ctb-karten > .col { padding: 0; min-width: 0; }
.ct-ctb-karten > .col > .card { block-size: 100%; margin: 0; }
.ct-ctb-karten .card-bodyquote { margin: 0; display: grid; gap: var(--catkin-space-md); }
.ct-ctb-karten .card-bodyquote > .form-group { display: flex; flex-flow: row wrap; align-content: flex-start; gap: var(--catkin-space-2xs) 0; padding: 0; margin: 0; }
.ct-ctb-karten .card-bodyquote > .form-group > :not(label):not(.ct-pflicht):not([class^="lbl-"]) { flex: 1 0 100%; min-width: 0; }
.ct-ctb-karten .card-bodyquote > .form-group > :is(.ct-pflicht, [class^="lbl-"]) { font: var(--catkin-type-body-sm); }
.ct-ctb-karten .form-group > label + .ct-pflicht { margin-inline-start: var(--catkin-space-2xs); }

/* ===================================================================================================================================
   #3101 W19 - Operativ II (Planung, Kapazitaet, Gantt, Rest). Nur Tokens.
   =================================================================================================================================== */
/* W19.1 Hochladen: Beispieldaten schmal links, Upload breit rechts (wie bisher 3:9), bei wenig Breite untereinander (U1.1) */
.ct-liste-details.ct-upload { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
@media (max-width: 64em) { .ct-liste-details.ct-upload { grid-template-columns: minmax(0, 1fr); } }
/* W19.2 Rangierbereich (Festlegung 30: nur CI/Baukasten): drei Karten nebeneinander (Gleise | Wagen des Gleises | Rangierauftraege),
   bei wenig Breite untereinander; "Alle Gleise": Gleiskarten nebeneinander, waagrecht im Rollbereich (wie bisher) */
.ct-rangier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--catkin-space-md); align-items: start; }
@media (max-width: 64em) { .ct-rangier { grid-template-columns: minmax(0, 1fr); } }
.ct-gleise { display: flex; flex-flow: row nowrap; gap: var(--catkin-space-md); align-items: flex-start; }
.ct-gleise > .ct-gleis { flex: 0 0 auto; }
/* W19.3 Kapazitaet LKW: Kennzahlen als Begriff/Wert-Reihe; Tabelle bricht um (U1.3, U1.8 - bisher 847 px zu breit in MT); Kundenfarbe der
   Zeile (Fachkodierung aus den Kundenstammdaten, Bestand) als heller Teilbaum; Absattler-Zelle und Abfall-Kennzeichen in den Fachfarben
   --ct-fach-kapazitaet-* (CI18); "Ueberbucht" und Gefahrgut in der Textstaerke der Familie critical (K3.3, nie nur Farbe: Text bzw. Tooltip) */
.ct-kap-zahlen { display: flex; flex-wrap: wrap; gap: var(--catkin-space-2xs) var(--catkin-space-lg); margin: 0 0 var(--catkin-space-sm); font: var(--catkin-type-body-sm); }
.ct-kap-zahlen > div { display: flex; flex-direction: row-reverse; gap: var(--catkin-space-2xs); align-items: baseline; }
.ct-kap-zahlen dt { font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-80); }
.ct-kap-zahlen dd { margin: 0; font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-on-surface-100); }
.ct-kap-zahlen__trenner { padding-inline-start: var(--catkin-space-lg); border-inline-start: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); }
.ct-kap-tabelle { max-width: 100%; overflow-x: auto; }
.ct-kap-tabelle table { width: 100%; table-layout: auto; }
.ct-kap-tabelle td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.ct-kap-tabelle td:nth-child(1), .ct-kap-tabelle td:nth-child(5) { white-space: nowrap; }
.ct-kap-tabelle tr.ct-kap-kunde > td { background-color: var(--ct-kap-kunde) !important; color: var(--catkin-on-surface-100); }
.ct-kap-tabelle tr.ct-kap-kunde a { color: var(--catkin-link); }
.ct-kap-tabelle td.ct-kap-absattler { background-color: var(--ct-fach-kapazitaet-absattler) !important; color: var(--catkin-on-surface-100); }
.ct-kap-kennzeichen { display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); }
.ct-kap-kennzeichen svg { width: var(--catkin-icon-body-sm); height: var(--catkin-icon-body-sm); }
.ct-kap-befund, .ct-kap-gefahrgut { color: var(--catkin-critical-on-surface-80); }
.ct-kap-befund { display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); font: var(--catkin-type-body-sm); }
.ct-kap-befund svg { width: var(--catkin-icon-body-sm); height: var(--catkin-icon-body-sm); }
.ct-kap-abfall {
    display: inline-grid; place-items: center; min-width: var(--catkin-icon-body-sm); padding-inline: var(--catkin-space-3xs);
    border-radius: var(--catkin-radius-xs); background: var(--ct-fach-kapazitaet-abfall); color: var(--catkin-on-surface-100);
    font: var(--catkin-type-body-xs); font-weight: var(--catkin-font-weight-semibold);
}
/* W19.4 Fahrplaene (Gantt-Sichten): Reitergruppe der drei Sichten im Seitenkopf (CI17, K11), aktive Filter als entfernbare Kennzeichen
   (K6.2: einzeilig, gekuerzt mit vollem Text im Tooltip des Werts, eigener Schliessen-Knopf, Klickflaeche --catkin-target-min) */
.ct-seitenkopf__reiter { margin: 0; border-block-end: 0; flex-wrap: wrap; }
.ct-filterchips { display: flex; flex-wrap: wrap; gap: var(--catkin-space-xs); margin-block-end: var(--catkin-space-sm); }
.ct-filterchips:not(:has(.ct-filterchip)) { display: none; }
.ct-filterchip {
    display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); max-width: var(--catkin-size-3xl);
    min-height: var(--catkin-target-min); padding-inline: var(--catkin-space-xs) var(--catkin-space-3xs);
    border: var(--catkin-border-width-3xs) solid var(--catkin-border-control); border-radius: var(--catkin-radius-sm);
    background: var(--catkin-surface-1); color: var(--catkin-on-surface-100); font: var(--catkin-type-body-sm); white-space: nowrap;
}
.ct-filterchip__text { color: var(--catkin-on-surface-80); }
.ct-filterchip__wert { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ct-filterchip__wert * { display: inline; }
.ct-filterchip__weg {
    display: inline-grid; place-items: center; min-width: var(--catkin-target-min); min-height: var(--catkin-target-min);
    border-radius: var(--catkin-radius-xs); color: var(--catkin-on-surface-80);
}
.ct-filterchip__weg:hover, .ct-filterchip__weg:focus-visible { color: var(--catkin-on-surface-100); background: var(--catkin-surface-3); }
.ct-filterchip__weg svg { width: var(--catkin-icon-body-sm); height: var(--catkin-icon-body-sm); }
/* W19.5 Touren-Verplanung: Touren (1/3) | Planer (2/3) wie bisher, Karten nebeneinander; bei wenig Breite untereinander (U1.1) */
.ct-touren { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--catkin-space-md); align-items: stretch; }
.ct-touren__planer { display: flex; flex-direction: column; min-width: 0; }
.ct-touren__planer > #schedWrap { flex: 1 1 auto; min-height: 0; }
@media (max-width: 64em) { .ct-touren { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================================================
 * W20 Dialoge (UI-Regelwerk K8, K7.4, U1.6, U14, CI13-CI17; Huelle Pages/Shared/_CtDialog.cshtml, Verhalten ct-dialog.js)
 * Ein Dialog: Kopf mit Titel und Schliessen; Inhalt im Raster (R3/R4) mit eigenem Scrollbereich - nichts ragt hinaus (U1.6); Fuss mit den
 * Aktionen rechts (Hauptaktion aussen, Abbrechen/Schliessen daneben, Zerstoerendes links abgesetzt), haftet unten im Scrollbereich;
 * Breitenstufen nach Inhalt (K8.4). Flaeche surface-1 ueber der Abdunklung (Q2.7). Nur Tokens.
 * ===================================================================================================== */
/* W20.1 Breitenstufen (K8.4): klein = Rueckfrage, mittel = kurzes Formular, gross = Formular mit Tabelle, voll = datenreich */
html .modal-dialog.ct-dialog--klein { --ct-modal-width: var(--catkin-container-md); }
html .modal-dialog.ct-dialog--mittel { --ct-modal-width: var(--catkin-container-3xl); }
html .modal-dialog.ct-dialog--gross { --ct-modal-width: var(--catkin-screen-md); }
html .modal-dialog.ct-dialog--voll { --ct-modal-width: min(var(--catkin-screen-lg), calc(100vw - 2 * var(--catkin-space-xl))); }
/* W20.2 Kopf: Titel (H2 in Groesse H3, .ct-dialog__titel W18.2) und Schliessen auf einer Linie */
html .ct-dialog .modal-header { gap: var(--catkin-space-sm); }
html .ct-dialog .modal-header .btn-close { margin: 0 0 0 auto; flex: 0 0 auto; }
/* W20.3 Inhalt: eigener Scrollbereich, Breite des Dialogs (U1.6) - Tabellen und Raster duerfen nie breiter werden als der Dialog */
html .ct-dialog .modal-body { min-width: 0; }
.ct-dialog__bereich { min-width: 0; }
.ct-dialog__laden { display: inline-flex; align-items: center; gap: var(--catkin-space-xs); color: var(--catkin-on-surface-80); font: var(--catkin-type-body-sm); }
.ct-dialog__inhalt { display: flex; flex-direction: column; gap: var(--catkin-space-md); min-width: 0; }
.ct-dialog__inhalt .dx-datagrid, .ct-dialog__inhalt .table-responsive { max-width: 100%; }
.ct-dialog__abschnitt { display: flex; flex-direction: column; gap: var(--catkin-space-xs); min-width: 0; }
.ct-dialog__abschnittstitel { font: var(--catkin-type-title-2xs); color: var(--catkin-on-surface-100); margin: 0; }
.ct-dialog__hinweis { margin: 0; font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
.ct-dialog__nebeneinander { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--catkin-space-md); align-items: start; }
@media (max-width: 64em) { .ct-dialog__nebeneinander { grid-template-columns: minmax(0, 1fr); } }
/* W20.4 Fuss im Inhalt: Auswahl/Zaehler links, Leiste rechts (U14.2), haftet am unteren Rand des Scrollbereichs */
.ct-dialog__fuss {
    position: sticky; bottom: calc(-1 * var(--ct-modal-padding)); z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--catkin-space-xs) var(--catkin-space-md);
    margin: var(--catkin-space-md) calc(-1 * var(--ct-modal-padding)) calc(-1 * var(--ct-modal-padding));
    padding: var(--catkin-space-sm) var(--ct-modal-padding);
    background: var(--catkin-surface-1);
    border-block-start: var(--catkin-border-width-3xs) solid var(--catkin-border-decor);
}
.ct-dialog__fuss > .ct-leiste { margin-inline-start: 0; }
.ct-dialog__auswahl { margin-inline-end: auto; font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); min-width: 0; overflow-wrap: anywhere; }
.ct-dialog__gefahr { margin-inline-end: auto; }
.ct-dialog__fuss form { display: contents; }
/* Fuss in einem DevExtreme-Popup (keine Bootstrap-Abstaende) */
.dx-popup-content .ct-dialog__fuss { bottom: 0; margin-inline: 0; margin-block-end: 0; padding-inline: 0; }
/* W20.4b Hauptaktion im Fuss eines DevExtreme-Popups (ctDialog.popup setzt .ct-dialog-popup): dieselbe Brand-Rolle wie .ct-dialog__haupt (CI15) */
.ct-dialog-popup .dx-popup-bottom .dx-button.dx-button-success {
    color: var(--catkin-primary-fg);
    background-color: var(--catkin-primary-bg);
    border-color: var(--catkin-primary-bg);
    font-weight: var(--catkin-font-weight-semibold);
}
.ct-dialog-popup .dx-popup-bottom .dx-button.dx-button-success .dx-button-text { color: var(--catkin-primary-fg); }
.ct-dialog-popup .dx-popup-bottom .dx-button.dx-button-success.dx-state-hover { background-color: var(--catkin-primary-bg-hover); border-color: var(--catkin-primary-bg-hover); }
.ct-dialog-popup .dx-popup-bottom .dx-button.dx-button-success.dx-state-active { background-color: var(--catkin-brand-fill-pressed); border-color: var(--catkin-brand-fill-pressed); }
.ct-dialog-popup .dx-popup-bottom .dx-button.dx-button-success.dx-state-focused { outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active); outline-offset: var(--catkin-border-width-2xs); }

/* W20.5 Bestandshuellen ohne _CtDialog, in die ein IntegratedForm geladen wird: Karte mit Band (ribbon-box) im Dialog flach (Q2: der Dialog
   ist die Flaeche, keine graue Karte im weissen Dialog) */
html .modal .modal-content > .card.ribbon-box:has([data-ct-dialog-inhalt]) { background: transparent; border: 0; margin: 0; }
/* W20.6 Angaben Begriff/Wert im Dialog: Baustein .ct-angaben (W17.5); mehrere Paare in einer Reihe (Hauptlaeufe: Anzahl, Datum, Von, Nach) */
.ct-angaben--reihe { grid-template-columns: repeat(4, max-content minmax(0, 1fr)); }
@media (max-width: 64em) { .ct-angaben--reihe { grid-template-columns: max-content minmax(0, 1fr); } }
.ct-dialog__liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--catkin-space-xs); }
.ct-dialog__liste > li { margin: 0; }
/* W20.7 Bausteine einzelner Dialoge (nur Tokens) */
.ct-feld--zwei { grid-column: span 2; }
@media (max-width: 48em) { .ct-feld--zwei { grid-column: auto; } }
/* Datum und Uhrzeit in einem Feld nebeneinander (U14.5) */
.ct-termin { display: flex; gap: var(--catkin-space-xs); }
.ct-termin > * { flex: 1 1 0; min-width: 0; }
/* Pruefergebnis/Fehler als Hinweisleiste mit Handgriff rechts (Validierung, ESSB-Fehler) */
.ct-hinweis.ct-pruefung { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--catkin-space-md); }
.ct-pruefung__text { min-width: 0; overflow-wrap: anywhere; }
.ct-pruefung__link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); color: var(--catkin-link); white-space: nowrap; }
.ct-pruefung__link svg { width: var(--catkin-icon-body-sm); height: var(--catkin-icon-body-sm); }
/* Rechte der Anmeldung in Spalten statt einer langen Zeilenliste */
.ct-rechte { display: block; columns: var(--catkin-container-3xs); column-gap: var(--catkin-space-lg); font: var(--catkin-type-body-sm); }
.ct-rechte > li { break-inside: avoid; }
/* Vorschau des Ladelisten-Formats unter dem Hochladen */
.ct-ladeformat { margin-block-start: var(--catkin-space-sm); }
.ct-ladeformat caption { caption-side: top; padding-block: 0 var(--catkin-space-2xs); }
/* PDF aufteilen: Seiten im Raster, das umbricht */
.ct-pdfseiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--catkin-container-2xs)), 1fr)); gap: var(--catkin-space-md); }
/* Drucken: drei Wege untereinander, je Optionsfeld und darunter sein Feld */
.ct-druckwege { display: flex; flex-direction: column; gap: var(--catkin-space-md); }
.ct-druckweg { display: flex; flex-direction: column; gap: var(--catkin-space-2xs); }
.ct-druckweg > .form-check { margin: 0; }
/* Klassifikation: Vorschau links, Angaben rechts (1:2), bei wenig Breite untereinander */
.ct-klassifikation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--catkin-space-lg); align-items: start; }
@media (max-width: 64em) { .ct-klassifikation { grid-template-columns: minmax(0, 1fr); } }
.ct-klassifikation__vorschau { min-width: 0; }
.ct-klassifikation form { display: flex; flex-direction: column; gap: var(--catkin-space-md); }
/* Vorschau eines PDF: Hoehe aus dem Platz des Dialogs statt 100 % eines Bereichs ohne Hoehe */
.ct-vorschau__pdf { display: block; width: 100%; height: 70vh; border: 0; }
/* Kachel eines Dokuments (Dokumentansicht des Kundenauftrags): Leiste mit Name und Handgriffen unten auf der Kachel */
.ct-dokkachel__leiste {
    position: absolute; inset-inline: 10%; bottom: 3%; z-index: 1;
    display: flex; align-items: center; gap: var(--catkin-space-xs); padding: var(--catkin-space-2xs) var(--catkin-space-sm);
    background: var(--catkin-surface-1); color: var(--catkin-on-surface-100);
    border: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); border-radius: var(--catkin-radius-md);
}
.ct-dokkachel__name { flex: 1 1 auto; min-width: 0; margin: 0; font: var(--catkin-type-body-sm); font-weight: var(--catkin-font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================================================
 * W21 Cockpit, Dashboards, Bausteine und Rest (UI-Regelwerk U15.1 Kacheln als Karten, K10.1 Ueberschriften, CI14/CI15/CI18,
 * U14.7/U14.9 Zeilenaktionen, U1.9). Nur Tokens.
 * ===================================================================================================== */
/* W21.1 Cockpit: Kacheln als Karten in einem Raster; breit/schmal nebeneinander, bei wenig Breite untereinander (U1.1) */
.ct-cockpit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--catkin-space-md); align-items: start; }
.ct-cockpit > * { grid-column: 1 / -1; min-width: 0; }
.ct-cockpit > .ct-cockpit__halb { grid-column: span 6; }
.ct-cockpit > .ct-cockpit__breit { grid-column: span 8; }
.ct-cockpit > .ct-cockpit__schmal { grid-column: span 4; }
@media (max-width: 64em) { .ct-cockpit > :is(.ct-cockpit__halb, .ct-cockpit__breit, .ct-cockpit__schmal) { grid-column: 1 / -1; } }
.ct-cockpit .ct-karte, .ct-cockpit > * > .ct-karte { margin-block-end: 0; }
/* Kartenueberschrift als Verweis auf die Vollansicht (U6.2): Link-Farbe, Unterstrich bei Hover */
.ct-karte__titel > a { color: var(--catkin-link); text-decoration: none; }
.ct-karte__titel > a:hover, .ct-karte__titel > a:focus-visible { text-decoration: underline; }
/* Anzahl neben der Ueberschrift (Begriff/Wert, kein Badge: CI3 Badges nur fuer Zustaende) */
.ct-karte__anzahl { font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); margin-inline-start: var(--catkin-space-xs); }
/* Hinweistext unter dem Kartenkopf (K7.1): erklaert, was die Karte zeigt */
.ct-karte__hinweis { margin: 0; padding: var(--catkin-space-xs) var(--catkin-space-md) 0; font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
/* Untergruppen in einer Karte (U15.1): kleine Zwischenueberschrift statt eigener Karte */
.ct-karte__untertitel { margin: 0 0 var(--catkin-space-xs); font: var(--catkin-type-body-md); font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-on-surface-100); }
/* Leerzustand einer Karte (U3.1) und Kacheltabellen: Hoehe nach Inhalt, hoechstens etwa sieben Zeilen, dann scrollt die Tabelle in sich (U1.9) */
.ct-karte__leer { margin: 0; padding: var(--catkin-space-sm) var(--catkin-space-md); }
html .ct-karte .dashboard-Tables-scrollable { height: auto; max-height: var(--catkin-container-sm); overflow-y: auto; }
.ct-karte__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--catkin-container-md), 1fr)); gap: var(--catkin-space-md); }
.ct-karte__spalten--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 64em) { .ct-karte__spalten--7-5 { grid-template-columns: minmax(0, 1fr); } }

/* W21.2 Kennzahlen (Dashboards): Zahl in Textstaerke 100, Beschriftung in Textstaerke 80; Verweis nur, wo die Zahl in eine Liste fuehrt */
.ct-kennzahlen { display: flex; flex-wrap: wrap; gap: var(--catkin-space-md) var(--catkin-space-lg); }
.ct-kennzahl { display: flex; flex-direction: column; text-decoration: none; color: inherit; min-width: 0; }
.ct-kennzahl__wert { font: var(--catkin-type-title-xs); color: var(--catkin-on-surface-100); }
.ct-kennzahl__begriff { font: var(--catkin-type-body-xs); color: var(--catkin-on-surface-80); white-space: nowrap; }
a.ct-kennzahl:hover .ct-kennzahl__wert, a.ct-kennzahl:focus-visible .ct-kennzahl__wert { color: var(--catkin-link); text-decoration: underline; }

/* W21.3 Versand-Dashboard (DB Cargo, #2590): Kacheln als Karten; die DB-Sekundaerfarben (--ct-fach-dispatch-*) bleiben Fachkodierung
   (Kreis des Symbols, Balken, Sonder-LE-Marker), Texte und Rahmen kommen aus den Rollen (CI18, CI22). Vorher Style-Block in der Komponente. */
.dispatch-tabs { margin-block-end: var(--catkin-space-md); }
.dispatch-tabs .nav-link.active { color: var(--catkin-link); border-block-end: var(--catkin-border-width-2xs) solid var(--catkin-link); font-weight: var(--catkin-font-weight-semibold); }
.dispatch-filter-station { min-width: var(--catkin-container-xs); }
.dispatch-busy { opacity: var(--catkin-opacity-md); pointer-events: none; transition: opacity var(--catkin-duration-fast) var(--catkin-easing-functional); }
.dispatch-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--catkin-container-2xs), 1fr)); gap: var(--catkin-space-md); margin-block-end: var(--catkin-space-md); }
.dispatch-card { display: flex; align-items: flex-start; gap: var(--catkin-space-md); margin: 0; padding: var(--catkin-space-md); }
.dispatch-card-icon { width: var(--catkin-size-md); height: var(--catkin-size-md); flex: 0 0 var(--catkin-size-md); border-radius: var(--catkin-radius-full); display: flex; align-items: center; justify-content: center; color: var(--catkin-white); line-height: 1; background: var(--ct-fach-dispatch-cool-600); }
.dispatch-card-icon svg { width: var(--catkin-icon-body-md); height: var(--catkin-icon-body-md); display: block; }
.dispatch-card-body { min-width: 0; }
.dispatch-card-title { margin: 0 0 var(--catkin-space-xs); font: var(--catkin-type-title-2xs); color: var(--catkin-on-surface-100); }
.dispatch-card-blue .dispatch-card-icon { background: var(--ct-fach-dispatch-blau); }
.dispatch-card-green .dispatch-card-icon { background: var(--ct-fach-dispatch-gruen); }
.dispatch-card-turquoise .dispatch-card-icon { background: var(--ct-fach-dispatch-tuerkis); }
.dispatch-card-red .dispatch-card-icon { background: var(--ct-fach-dispatch-rot); }
.dispatch-legend { display: flex; flex-wrap: wrap; gap: var(--catkin-space-sm) var(--catkin-space-md); margin-inline-start: auto; font: var(--catkin-type-body-xs); color: var(--catkin-on-surface-80); }
.dispatch-legend-item { display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); }
.dispatch-swatch { display: inline-block; width: var(--catkin-size-2xs); height: var(--catkin-size-2xs); border-radius: var(--catkin-radius-2xs); border: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60); }
.dispatch-bar { display: flex; width: 100%; min-width: var(--catkin-size-3xl); height: var(--catkin-control-height-row); border-radius: var(--catkin-radius-2xs); overflow: hidden; }
.dispatch-seg { flex-basis: 0; display: flex; align-items: center; justify-content: center; min-width: var(--catkin-size-sm); font: var(--catkin-type-body-xs); line-height: 1; color: var(--ct-fach-dispatch-cool-800); }
.dispatch-seg-new { background: var(--catkin-surface-1); color: var(--catkin-on-surface-100); box-shadow: inset 0 0 0 var(--catkin-border-width-3xs) var(--catkin-on-surface-60); }
.dispatch-seg-ready { background: var(--ct-fach-dispatch-orange); }
.dispatch-seg-handed { background: var(--ct-fach-dispatch-gelb); }
.dispatch-seg-departed { background: var(--ct-fach-dispatch-blau); color: var(--catkin-white); }
.dispatch-seg-cancelled { background: var(--ct-fach-dispatch-cool-600); color: var(--catkin-white); }
.dispatch-seg-rejected { background: var(--ct-fach-dispatch-rot); color: var(--catkin-white); }
.dispatch-swatch.dispatch-seg-new { box-shadow: none; }
/* Merge 5 (master #3088): Reiter "Empfang" - Reiterwechsel schaltet nur die Sichtbarkeit; Legendenklassen des Empfangs mit denselben
   Fachfarben (CI18) wie der Versand ("Angekommen" orange, "Eingangsbestaetigt" gelb, "Erledigt" gruen). */
/* Reitergruppe mit Unterstrich (CI17, K11, K14): Ruhezustand neutral ohne Kasten, aktiver Reiter Link-Farbe, fett, Unterstrich. */
.dispatch-tabs .nav-link { cursor: pointer; color: var(--catkin-on-surface-80); background: transparent; border: 0; border-block-end: var(--catkin-border-width-2xs) solid transparent; }
.dispatch-tabs .nav-link:hover { color: var(--catkin-link); }
.dispatch-tabs .nav-link.active { background: transparent; }
.dashboard-panel { display: none; }
.dashboard-panel.active { display: block; }
.receipt-seg-planned { background: var(--catkin-surface-1); color: var(--catkin-on-surface-100); box-shadow: inset 0 0 0 var(--catkin-border-width-3xs) var(--catkin-on-surface-60); }
.receipt-seg-departed { background: var(--ct-fach-dispatch-blau); color: var(--catkin-white); }
.receipt-seg-arrived { background: var(--ct-fach-dispatch-orange); }
.receipt-seg-gatein { background: var(--ct-fach-dispatch-gelb); }
.receipt-seg-done { background: var(--ct-fach-dispatch-gruen); color: var(--catkin-white); }
.dispatch-swatch.receipt-seg-planned { box-shadow: none; }
.dispatch-table th { font: var(--catkin-type-body-xs); font-weight: var(--catkin-font-weight-semibold); white-space: nowrap; }
.dispatch-table th.dispatch-sort { cursor: pointer; user-select: none; }
.dispatch-table th.dispatch-sort:hover { background-color: var(--catkin-surface-3-hover); }
.dispatch-table th.dispatch-sort::after { content: "\2195"; margin-inline-start: var(--catkin-space-2xs); color: var(--catkin-on-surface-60); }
.dispatch-table th.dispatch-sort-asc::after { content: "\2191"; color: var(--catkin-on-surface-100); }
.dispatch-table th.dispatch-sort-desc::after { content: "\2193"; color: var(--catkin-on-surface-100); }
.dispatch-table td { vertical-align: middle; }
.dispatch-col-bar { min-width: var(--catkin-size-3xl); width: 20%; }
.dispatch-train-number { font-weight: var(--catkin-font-weight-bold); }
.dispatch-train-id, .dispatch-relation { color: var(--catkin-on-surface-80); font: var(--catkin-type-body-xs); }
.dispatch-state { display: inline-block; padding: var(--catkin-space-3xs) var(--catkin-space-sm); border-radius: var(--catkin-radius-full); font: var(--catkin-type-body-xs); white-space: nowrap; }
.dispatch-state-planned { background: var(--ct-fach-dispatch-cool-200); color: var(--ct-fach-dispatch-cool-800); }
.dispatch-state-shunted { background: var(--ct-fach-dispatch-gelb); color: var(--ct-fach-dispatch-cool-800); }
.dispatch-state-departed { background: var(--ct-fach-dispatch-blau); color: var(--catkin-white); }
.dispatch-state-arrived { background: var(--ct-fach-dispatch-gruen); color: var(--catkin-white); }
.dispatch-special { white-space: nowrap; }
.dispatch-special span { display: inline-block; min-width: var(--catkin-size-lg); font: var(--catkin-type-body-xs); }
.dispatch-mark { width: var(--catkin-icon-body-2xs); height: var(--catkin-icon-body-2xs); vertical-align: middle; margin-inline-end: var(--catkin-space-3xs); }
.dispatch-mark-rid { fill: var(--ct-fach-dispatch-orange); }
.dispatch-mark-waste { fill: var(--ct-fach-dispatch-waste); }
.dispatch-mark-customs { fill: var(--ct-fach-dispatch-customs); }
.dispatch-mark-lq { fill: var(--catkin-on-surface-100); } /* Schlusslauf: cool-800 war im Dunkelmodus unsichtbar (1,2:1); neutrale Textstaerke statt Fachfarbe */

/* W21.4 Touren-Dashboard: Touren als Karten nebeneinander (umbrechend); erledigte/laufende Touren ruhig auf surface-3 (vorher "lightgrey") */
.ct-touren-tafel { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--catkin-container-2xs), 1fr)); gap: var(--catkin-space-md); align-items: start; }
.ct-tour { margin: 0; }
.ct-tour--ruhig { background: var(--catkin-surface-3); }
.ct-tour .ct-karte__kopf { align-items: flex-start; flex-wrap: nowrap; }
.ct-tour__zeile { margin: 0; font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
.ct-tour__zeile--ueber { color: var(--catkin-critical-on-surface-80); }
.ct-tour__kunde { margin: 0 0 var(--catkin-space-2xs); font: var(--catkin-type-body-md); color: var(--catkin-on-surface-100); }
.ct-tour__status { width: var(--catkin-icon-body-md); height: var(--catkin-icon-body-md); flex: 0 0 auto; }
.ct-tour__fuss { justify-content: flex-start; }

/* W21.5 Rechnungswesen: Ablehnungsgruende der Aktivierung im Dialog (vorher Inline-Stile), je Grund ein Sprung zum Auftrag */
.ct-ablehnung { text-align: start; max-height: 60vh; overflow-y: auto; }
.ct-ablehnung__zeile { display: flex; align-items: baseline; gap: var(--catkin-space-xs); margin-block-end: var(--catkin-space-xs); }
.ct-ablehnung__zeile > .btn { flex: 0 0 auto; }
.ct-leiste.ct-leiste--links { margin-inline-start: 0; margin-block-end: var(--catkin-space-xs); }

/* W21.6 Statusseiten (Fehler, Seite nicht gefunden, Zugriff verweigert, Abgemeldet): eine Karte in der Mitte, Zeichen in der Inhaltsstaerke 70
   der Kategorie (data-color, CI22), H1, Text, eine Handlung (CI15); Einzelheiten aufklappbar (R16). Hell und dunkel aus den Rollen. */
.ct-statusseite { max-width: var(--catkin-container-3xl); margin: var(--catkin-space-xl) auto; }
.ct-statusseite > .ct-karte__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--catkin-space-sm); padding: var(--catkin-space-lg); }
.ct-statusseite__zeichen { display: inline-flex; color: var(--catkin-on-surface-70); }
.ct-statusseite__zeichen > svg { width: var(--catkin-icon-title-xl); height: var(--catkin-icon-title-xl); }
.ct-statusseite__titel { margin: 0; font: var(--catkin-type-title-sm); color: var(--catkin-on-surface-100); }
.ct-statusseite__text { margin: 0; font: var(--catkin-type-body-md); color: var(--catkin-on-surface-80); overflow-wrap: anywhere; }
.ct-statusseite__details { width: 100%; }
.ct-statusseite__details > summary { cursor: pointer; color: var(--catkin-link); font: var(--catkin-type-body-sm); }
.ct-statusseite__details > pre { margin: var(--catkin-space-xs) 0 0; padding: var(--catkin-space-sm); max-height: var(--catkin-container-xs); overflow: auto; white-space: pre-wrap;
    background: var(--catkin-surface-1); color: var(--catkin-on-surface-100); border: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60); border-radius: var(--catkin-radius-sm); font: var(--catkin-type-body-xs); }
.ct-statusseite__laden { display: flex; align-items: center; gap: var(--catkin-space-sm); }

/* W21.7 Oeffentliche Sendungsverfolgung: Suchmaske als Raster untereinander (R3), Optionsfelder nebeneinander (K4.2) */
.ct-tracing-suche { display: flex; flex-direction: column; gap: var(--catkin-space-sm); max-width: var(--catkin-container-3xl); }
.ct-tracing-suche > fieldset { border: 0; padding: 0; margin: 0; }
.ct-tracing-suche .ct-schalterliste { display: flex; flex-wrap: wrap; gap: var(--catkin-space-md); }
.ct-tracing-suche > .btn { align-self: flex-start; }

/* W21.8 Hilfsfunktionen: Auswahl und Knopf untereinander in einer schmalen Karte */
.ct-helfer { max-width: var(--catkin-container-2xl); }
.ct-helfer__form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--catkin-space-sm); }
.ct-helfer__form > .dx-tagbox { align-self: stretch; }
.ct-helfer__auswahl { margin-block-start: var(--catkin-space-md); }

/* W21.9 Hervorhebungen im Text aus Rollen (Dienstleistung IST-Daten): Achtung = Textstaerke 80 der Familie critical (vorher red), Planwert = Textstaerke 80 (vorher blue) */
.ct-text--achtung, .nav-link[data-ct-achtung] { color: var(--catkin-critical-on-surface-80); font-weight: var(--catkin-font-weight-semibold); }
.ct-text--plan { color: var(--catkin-on-surface-80); }
/* W21: Protokolldateien - Beschriftung, Feld und Hilfetext je Zeile auf einer Linie (U14.8), Knoepfe auf der Feldzeile (R1) */
.ct-logviewer { display: grid; grid-template-columns: minmax(var(--catkin-container-sm), 2fr) minmax(var(--catkin-container-3xs), 1fr) auto; column-gap: var(--catkin-space-md); row-gap: var(--catkin-space-2xs); align-items: end; }
.ct-logviewer > .ct-feld { display: contents; }
.ct-logviewer > .ct-feld > .ct-feld__label { grid-row: 1; }
.ct-logviewer > .ct-feld > :nth-child(2) { grid-row: 2; }
.ct-logviewer > .ct-feld > .ct-feld__hilfe { grid-row: 3; align-self: start; }
.ct-logviewer > .ct-leiste { grid-row: 2; grid-column: 3; }
@media (max-width: 64em) { .ct-logviewer { grid-template-columns: minmax(0, 1fr); } .ct-logviewer > .ct-feld { display: flex; } .ct-logviewer > .ct-leiste { grid-row: auto; grid-column: auto; } }

/* W21.10 Terminal-Anmeldung (TR02, nur CI nach Festlegung 30): Masse aus Tokens statt Inline-Pixel, kleinste Schrift 12 px (CI8) */
.ct-tr02-tag { min-width: var(--catkin-container-sm); max-width: var(--catkin-container-sm); }
.ct-tr02-terminals { min-width: var(--catkin-container-md); }
.ct-tr02-eng { padding: var(--catkin-space-2xs); }
.ct-tr02-stops { height: var(--catkin-container-2xs); }
.ct-tr02-voll { height: 100%; }
.ct-tr02-schienen { display: flex; height: 100%; gap: var(--catkin-space-xs); }
.ct-tr02-angabe { margin: 0 0 var(--catkin-space-xs); font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-100); }
.ct-tr02-angabe > span:first-child { color: var(--catkin-on-surface-80); }
.ct-tr02-hinweis { font: var(--catkin-type-body-xs); color: var(--catkin-info-on-surface-80); }
.ct-tr02-trucks { display: flex; flex-wrap: wrap; flex-direction: column; height: var(--catkin-size-3xl); gap: var(--catkin-space-xs); }
html .btn.ct-tr02-truck { height: auto !important; min-height: var(--catkin-size-xl); width: var(--catkin-size-2xl); flex-direction: column; align-items: flex-start; gap: var(--catkin-space-2xs); padding: var(--catkin-space-xs); white-space: normal; }
.ct-tr02-truck__kennzeichen { font: var(--catkin-type-body-sm); font-weight: var(--catkin-font-weight-semibold); }
.ct-tr02-truck__angabe { font: var(--catkin-type-body-xs); color: var(--catkin-on-surface-80); text-align: start; }
.ct-tr02-truck__wert { font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-on-surface-100); }

/* W21.11 Umschalter als Ghost-Knopf (Shuttle, Absattler in der Buchungsteil-Karte): eingeschaltet = eine Stufe staerker (K14.1): Rahmen aktiv,
   Link-Farbe, fette Schrift, Flaeche surface-3; nie nur ueber Farbe (aria-pressed, K14.2). Vorher btn-success (gruen gefuellt) bzw. Kundenfarbe. */
.btn.ct-ghost.active, .btn.ct-ghost[aria-pressed="true"] { border-color: var(--catkin-border-active); color: var(--catkin-link); background: var(--catkin-surface-3); font-weight: var(--catkin-font-weight-semibold); }
.ct-statusbild { height: var(--catkin-icon-body-sm); width: auto; }

/* #3101 Schlusslauf: Pruefzeichen (validation-mark, #2766) in den Pruef-Knoepfen der Hauptlauf-Buchungen/Blockzugmaske. Die btn-outline-*-Klassen
   sind im Theme gefuellt (Familie fill); das Zeichen trug die Textstaerke on-surface-80 derselben Familie und war auf der Fuellung unsichtbar
   (hell und dunkel). Im Knopf traegt es die Schrift der Fuellung (on-fill, CI2/CI3); ausserhalb eines Knopfs gilt weiter app.css. */
.btn[class*="btn-outline-"] > .validation-mark { color: var(--ct-btn-color) !important; }

/* =====================================================================================================
 * N1 Auftrag im Einsatz: Kopfband, Referenz-Zusammenfassung, kompakte Notizen, eine Aktionsleiste (PO-Aussagen 21.10.2026)
 * ===================================================================================================== */
/* N1.1 Kopfband: eine Karte volle Breite; links Kennzahlen (Zeile 1) und Referenzen (Zeile 2), rechts die Notizen */
.ct-od-band { display: grid; grid-template-columns: minmax(0, 3fr) minmax(var(--catkin-container-3xs), 1fr); gap: var(--catkin-space-md); padding: var(--catkin-space-sm) var(--catkin-space-md); }
.ct-od-band--extern { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 64em) { .ct-od-band { grid-template-columns: minmax(0, 1fr); } }
.ct-od-band__haupt { display: flex; flex-direction: column; gap: var(--catkin-space-sm); min-width: 0; }
.ct-od-band__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-xs) var(--catkin-space-lg); min-width: 0; }
.ct-od-kennzahlen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-xs) var(--catkin-space-lg); margin: 0; min-width: 0; font: var(--catkin-type-body-sm); }
.ct-od-kennzahl { display: flex; align-items: center; gap: var(--catkin-space-xs); min-width: 0; }
.ct-od-kennzahl > dt { font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-80); white-space: nowrap; }
.ct-od-kennzahl > dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-2xs); margin: 0; color: var(--catkin-on-surface-100); overflow-wrap: anywhere; }
.ct-od-kennzahl--feld > dd { inline-size: var(--catkin-container-3xs); }
.ct-od-kennzahl--feld > dd > .dx-widget { inline-size: 100%; }
/* Rechnung (Baustein InvoiceOnOrder, Bootstrap-Raster dl.row) waagrecht in der Zeile */
.ct-od-band .ct-od-rechnung { margin: 0; font: var(--catkin-type-body-sm); }
.ct-od-band .ct-od-rechnung:not(:has(*)) { display: none; }
.ct-od-band .ct-od-rechnung dl.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-2xs) var(--catkin-space-xs); margin: 0; }
.ct-od-band .ct-od-rechnung dl.row > dt, .ct-od-band .ct-od-rechnung dl.row > dd { inline-size: auto; flex: 0 0 auto; padding: 0; margin: 0; }
.ct-od-band .ct-od-rechnung dl.row > dt { font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-80); }
.ct-od-band .ct-od-rechnung dl.row > dt:empty { display: none; }
.ct-od-band .ct-od-rechnung .btn-group { margin: 0 !important; }

/* N1.2 Referenzen: eine Zeile (gekuerzt mit "+n weitere", R2/U1.8), Bereichsaktion rechts (U14.3), Hoehe der Dichte (K1) */
.ct-od-ref { display: flex; align-items: center; gap: var(--catkin-space-xs) var(--catkin-space-sm); min-width: 0; min-block-size: var(--catkin-control-height); padding-block-start: var(--catkin-space-sm); border-block-start: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); font: var(--catkin-type-body-sm); }
.ct-od-ref__titel { flex: 0 0 auto; font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-on-surface-100); }
.ct-od-ref__liste { display: flex; flex: 0 1 auto; align-items: center; gap: var(--catkin-space-md); min-width: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; white-space: nowrap; }
.ct-od-ref__eintrag { display: inline-flex; align-items: center; flex: 0 0 auto; max-inline-size: var(--catkin-container-xs); min-width: 0; }
.ct-od-ref__eintrag[hidden] { display: none; }
.ct-od-ref__bez { flex: 0 0 auto; color: var(--catkin-on-surface-80); margin-inline-end: var(--catkin-space-2xs); }
.ct-od-ref__wert { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--catkin-on-surface-100); }
.ct-od-ref__leer { color: var(--catkin-on-surface-80); }
.ct-od-ref__mehr { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--catkin-link); cursor: help; white-space: nowrap; }
.ct-od-ref__mehr[hidden] { display: none; }
.ct-od-ref__mehr:focus-visible { outline: var(--catkin-border-width-2xs) solid var(--catkin-border-active); outline-offset: var(--catkin-border-width-3xs); border-radius: var(--catkin-radius-xs); }
.ct-od-ref__knopf { flex: 0 0 auto; margin-inline-start: auto; }
.ct-od-ref-traeger[hidden] { display: none !important; }
/* Dialog: Felder in zwei Spalten (.ct-od-spalten), Hinweis links im Fuss */
.ct-od-ref-dialog .ct-dialog__auswahl { margin-block: 0; }
/* G6-Subgrid: die Zeilenluecke des Rasters zaehlt je Feld dreimal (Hilfe- und Fehlerspur leer) - im Dialog kleine Luecke, Abstand je Feld */
.ct-od-ref-dialog .ct-formular { row-gap: var(--catkin-space-2xs); }
.ct-od-ref-dialog .ct-formular > .ct-feld { margin-block-end: var(--catkin-space-sm); }

/* N1.3 Notizen kompakt: Werkzeugleiste der Tabelle ist der Kopf (Titel + Zaehler links, "+"/"Rückgängig" rechts) */
.ct-od-notizen { min-width: 0; padding-inline-start: var(--catkin-space-md); border-inline-start: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); }
@media (max-width: 64em) { .ct-od-notizen { padding-inline-start: 0; border-inline-start: 0; } }
.ct-od-notizen__titel { margin: 0; font: var(--catkin-type-body-sm); font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-on-surface-100); white-space: nowrap; }
.ct-od-notizen__zahl { font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-80); }
.ct-od-notizen .dx-datagrid-header-panel { padding: 0; border-block-end: 0; }
.ct-od-notizen .dx-datagrid-header-panel .dx-toolbar { margin-block-end: var(--catkin-space-2xs); }
.ct-od-notizen .dx-datagrid-nodata { font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); }
.ct-od-notizen .dx-datagrid-rowsview.dx-empty { block-size: var(--catkin-control-height); min-block-size: var(--catkin-control-height); }

/* N1.4 Eine Aktionsleiste: Absprünge (und Handlungen) links, "Wirkt sofort" abgesetzt am Ende, rechtsbuendig auch nach Umbruch */
.ct-od-aktionen > .ct-od-schalter { margin-inline-start: auto; }

/* =====================================================================================================
 * N2 Transportangaben-Kopf und Fahrten-Kaertchen (PO-Befund 21.10.2026: "card in card", Kaertchen "nicht sauber gerendert")
 * ===================================================================================================== */
/* N2.1 Kopfband (Q2, K1): Rechnungsempfaenger als schreibgeschuetztes Feld, Beschriftung darueber; Meldungen ohne eigene Karte */
.ct-td-kopf__band { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--catkin-space-sm) var(--catkin-space-md); padding: var(--catkin-space-sm) var(--catkin-space-md); }
.ct-td-kopf__feld { display: flex; flex-direction: column; gap: var(--catkin-space-2xs); inline-size: var(--catkin-container-lg); max-inline-size: 100%; min-width: 0; }
.ct-td-kopf__feld > .form-label { margin: 0; }
.ct-td-kopf__hinweis { color: var(--catkin-on-surface-80); font-weight: var(--catkin-font-weight-regular); }
/* Spezifitaet ueber der Feldregel aus Q2 (surface-1): schreibgeschuetzt = surface-3 wie [readonly] (K3.7) */
html .ct-td-kopf .form-control.ct-td-kopf__anzeige[role="textbox"][aria-readonly="true"]:not([type]) { display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: var(--catkin-surface-3); border-color: var(--catkin-on-surface-60); }
.ct-td-kopf__meldungen { flex: 1 1 var(--catkin-container-md); min-width: 0; }
.ct-td-kopf__meldungen:empty, .ct-td-kopf__meldungen:not(:has(*)) { display: none; }
.ct-td-kopf__zeile { margin: 0; padding: 0 var(--catkin-space-md) var(--catkin-space-sm); }
/* N2.2 Reitergruppe als eine Karte (U15.3): Reiter im Kopf, Bereichsaktion "Route planen | Zug hinzufuegen" rechts, nur beim Reiter "Fahrten" (U14.3) */
:is(.ct-td-reiter, .ct-reiterkarte) > .ct-karte__kopf { align-items: flex-end; padding-block-end: 0; }
:is(.ct-td-reiter, .ct-reiterkarte) > .ct-karte__kopf > .nav-tabs { margin-block-end: 0; }
.ct-td-reiter > .ct-karte__kopf > .ct-karte__aktionen { padding-block-end: var(--catkin-space-sm); }
.ct-td-reiter:not(:has(#ordersTab.active)) .ct-td-fahrten-aktionen { display: none; }
.ct-td-reiter > .ct-karte__inhalt > .tab-pane { min-width: 0; }

/* N2.3 Fahrten-Kaertchen (Baustein CustomForBookingPart): verschachtelte Ebene surface-3 ohne Rahmen; Kopf in der Fachfarbe (CI18,
   Wert aus dem Baustein: --ct-bp-kopf, Hell/Dunkel), Schrift on-surface-100 (>= 4,5:1 auf allen Kopffarben, Nachweis n2-kontrast.json).
   Eine Schriftgroesse je Ebene: Titel body-md halbfett, alles Weitere body-sm. */
.ct-bp-liste { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--catkin-space-sm); }
.ct-bp {
    display: flex; flex-direction: column;
    inline-size: var(--catkin-container-lg); max-inline-size: 100%; min-width: 0;
    margin: var(--catkin-space-2xs);
    background: var(--catkin-surface-3); color: var(--catkin-on-surface-100);
    border: var(--catkin-border-width-2xs) solid transparent; border-radius: var(--catkin-radius-md);
    overflow: hidden; font: var(--catkin-type-body-sm);
}
:is(.ct-bp-liste, .ct-od-abschnitte) > .ct-bp { margin: 0; }
.ct-bp[data-ct-bp-rahmen="konflikt"], .ct-bp[data-ct-bp-rahmen="storno"] { border-color: var(--catkin-critical-on-surface-70); }
.ct-bp[data-ct-bp-rahmen="ohne-zug"] { border-color: var(--catkin-on-surface-100); }
.ct-bp__kopf { display: flex; flex-direction: column; gap: var(--catkin-space-2xs); padding: var(--catkin-space-xs) var(--catkin-space-sm); background: var(--ct-bp-kopf, var(--catkin-surface-3)); color: var(--catkin-on-surface-100); }
.ct-bp__kopf a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--catkin-border-width-3xs); text-underline-offset: var(--catkin-border-width-2xs); }
.ct-bp__titelzeile { display: flex; align-items: center; gap: var(--catkin-space-xs); min-width: 0; min-block-size: var(--catkin-control-height); }
.ct-bp__titel { flex: 1 1 auto; min-width: 0; font: var(--catkin-type-body-md); font-weight: var(--catkin-font-weight-semibold); overflow-wrap: anywhere; }
.ct-bp svg.lucide.ct-bp__icon, .ct-bp i.ct-bp__icon { flex: 0 0 auto; inline-size: var(--catkin-icon-body-xs); block-size: var(--catkin-icon-body-xs); }
.ct-bp__titelzeile > svg.lucide.ct-bp__icon { inline-size: var(--catkin-icon-body-sm); block-size: var(--catkin-icon-body-sm); }
.btn.ct-bp__symbolknopf { flex: 0 0 auto; inline-size: var(--catkin-control-height); padding-inline: 0; justify-content: center; }
.ct-bp__kopf .btn.ct-bp__symbolknopf { --ct-btn-bg: var(--catkin-surface-1); }
.ct-bp .btn svg.lucide { inline-size: var(--catkin-icon-body-xs); block-size: var(--catkin-icon-body-xs); }
.ct-bp__le { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-2xs) var(--catkin-space-xs); min-width: 0; }
.ct-bp__le-einheit { font-weight: var(--catkin-font-weight-semibold); }
.ct-bp__strecke { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--catkin-space-xs); }
.ct-bp__ort { display: flex; align-items: flex-start; gap: var(--catkin-space-2xs); min-width: 0; overflow-wrap: anywhere; }
.ct-bp__ort > .ct-bp__icon { margin-block-start: var(--catkin-space-3xs); }
.ct-bp__pfeil, .ct-bp__pfeil-platz { inline-size: var(--catkin-icon-body-xs); }
/* N7 (PO 21.10.2026): Ist-Ort-Abweichung = Abzeichen "Geaendert" (Achtung) vor dem Ort; der Ort selbst bleibt ohne Flaeche (keine Warnfarbe, U16.4) */
.ct-bp__abweichung { display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); min-width: 0; }
.ct-bp__abweichung a { color: inherit; }
.ct-bp__inhalt { padding: var(--catkin-space-xs) var(--catkin-space-sm); }
.ct-bp__werte { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: var(--catkin-space-2xs) var(--catkin-space-md); margin: 0; }
.ct-bp__werte > dt { font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-80); }
.ct-bp__werte > dt label { font: inherit; color: inherit; margin: 0; }
.ct-bp__werte > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ct-bp__werte > dd > .badge { margin: 0; }
/* Rechnung (Baustein InvoiceOnBookingPart, Bootstrap dl.row) im selben Raster */
.ct-bp__rechnung:not(:has(*)) { display: none; }
.ct-bp__rechnung dl.row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--catkin-space-2xs) var(--catkin-space-md); margin: var(--catkin-space-xs) 0 0; padding-block-start: var(--catkin-space-xs); border-block-start: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60); }
.ct-bp__rechnung dl.row > dt, .ct-bp__rechnung dl.row > dd { inline-size: auto; padding: 0; margin: 0; }
.ct-bp__rechnung dl.row > dt { font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-80); }
.ct-bp__rechnung dl.row > dt:empty { display: none; }
.ct-bp__rechnung dl.row > dt:empty + dd { grid-column: 1 / -1; }
.ct-bp__rechnung .btn-group { margin: 0 !important; }
.ct-bp__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-xs); margin-block-start: auto; padding: var(--catkin-space-xs) var(--catkin-space-sm); border-block-start: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60); }
.ct-bp__abstand { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-md); color: var(--catkin-on-surface-80); font-variant-numeric: tabular-nums; }
.ct-bp__abstand > span { display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); }
.ct-bp__aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--catkin-space-xs); margin-inline-start: auto; }
.ct-bp__aktionen > .btn { margin: 0; }
/* N2.4 Legende der Kopffarben (U8.2): nur Eintraege, deren Farbe im selben Behaelter vorkommt */
.ct-bp-legende { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-2xs) var(--catkin-space-md); margin: 0; font: var(--catkin-type-body-xs); color: var(--catkin-on-surface-80); }
.ct-bp-legende__titel { font-weight: var(--catkin-font-weight-semibold); }
.ct-bp-legende__eintrag { display: none; align-items: center; gap: var(--catkin-space-2xs); margin: 0; }
.ct-bp-legende__feld { inline-size: var(--catkin-icon-body-xs); block-size: var(--catkin-icon-body-xs); border-radius: var(--catkin-radius-xs); border: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60); background: var(--ct-bp-kopf); }
.ct-bp-legende__feld--rahmen { background: var(--catkin-surface-3); border: var(--catkin-border-width-2xs) solid var(--catkin-critical-on-surface-70); }
*:not(:has(> .ct-bp)) > .ct-bp-legende { display: none; }
.ct-bp-legende__eintrag[data-ct-bp-farbe="zug"] { --ct-bp-kopf: light-dark(var(--ct-fach-bookingpart-gelb-hell), var(--ct-fach-bookingpart-gelb-dunkel)); }
.ct-bp-legende__eintrag[data-ct-bp-farbe="vorlauf"] { --ct-bp-kopf: light-dark(var(--ct-fach-bookingpart-blau-hell), var(--ct-fach-bookingpart-blau-dunkel)); }
.ct-bp-legende__eintrag[data-ct-bp-farbe="nachlauf"] { --ct-bp-kopf: light-dark(var(--ct-fach-bookingpart-gruen-hell), var(--ct-fach-bookingpart-gruen-dunkel)); }
.ct-bp-legende__eintrag[data-ct-bp-farbe="sonstige"] { --ct-bp-kopf: light-dark(var(--ct-fach-bookingpart-pink-hell), var(--ct-fach-bookingpart-pink-dunkel)); }
.ct-bp-legende__eintrag[data-ct-bp-farbe="storno"] { --ct-bp-kopf: light-dark(var(--ct-fach-bookingpart-storno-hell), var(--ct-fach-bookingpart-storno-dunkel)); }
.ct-bp-legende__eintrag[data-ct-bp-farbe="ohne-zug"] { --ct-bp-kopf: light-dark(var(--ct-fach-bookingpart-ohne-zug), var(--ct-fach-bookingpart-ohne-zug-dunkel)); }
:has(> .ct-bp[data-ct-bp-farbe="zug"]) > .ct-bp-legende > [data-ct-bp-farbe="zug"],
:has(> .ct-bp[data-ct-bp-farbe="vorlauf"]) > .ct-bp-legende > [data-ct-bp-farbe="vorlauf"],
:has(> .ct-bp[data-ct-bp-farbe="nachlauf"]) > .ct-bp-legende > [data-ct-bp-farbe="nachlauf"],
:has(> .ct-bp[data-ct-bp-farbe="sonstige"]) > .ct-bp-legende > [data-ct-bp-farbe="sonstige"],
:has(> .ct-bp[data-ct-bp-farbe="storno"]) > .ct-bp-legende > [data-ct-bp-farbe="storno"],
:has(> .ct-bp[data-ct-bp-farbe="ohne-zug"]) > .ct-bp-legende > [data-ct-bp-farbe="ohne-zug"],
:has(> .ct-bp[data-ct-bp-rahmen="konflikt"]) > .ct-bp-legende > [data-ct-bp-rahmen="konflikt"] { display: inline-flex; }

/* =====================================================================================================
 * N3: HTML-Feld mit DevExtreme-HtmlEditor (ct-htmleditor.js, _CtHtmlFeld) und Mail-Vorschau (PO-Aussage 21.10.2026)
 * ===================================================================================================== */
/* N3.1 Mailkonto: Felder links, Vorschau rechts; unter 64 em untereinander (U1.1) */
.ct-mailkonto__html { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--catkin-space-md); align-items: stretch; }
.ct-mailkonto__felder { display: grid; gap: var(--catkin-space-md); align-content: start; min-inline-size: 0; }
@media (max-width: 64em) { /* = --catkin-screen-md */
    .ct-mailkonto__html { grid-template-columns: minmax(0, 1fr); }
}
/* N3.2 Feldkopf: Beschriftung links, Umschalter "Editor | Quelltext" rechts in einer Reihe (U14.5, CI17) */
.ct-html__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--catkin-space-xs); }
.ct-html__kopf > label { margin: 0; font: var(--catkin-type-body-sm); font-weight: var(--catkin-font-weight-regular); color: var(--catkin-on-surface-100); } /* R4 */
.ct-html > .ct-hinweis { margin: 0; }
/* N3.3 Editor- und Quelltextflaeche gleich hoch (rund neun Zeilen); verborgen ist verborgen */
.ct-html [hidden] { display: none !important; }
.ct-html__quelltext { block-size: calc(var(--catkin-control-height) * 9); min-block-size: calc(var(--catkin-control-height) * 4); resize: vertical; font: var(--catkin-type-body-sm); }
.ct-html .dx-htmleditor { background: var(--catkin-surface-1); color: var(--catkin-on-surface-100); border-color: var(--catkin-border-control); }
.ct-html .dx-htmleditor:focus-within { border-color: var(--catkin-border-active); }
.ct-html .dx-htmleditor-content { block-size: calc(var(--catkin-control-height) * 7); overflow-y: auto; font: var(--catkin-type-body-md); color: var(--catkin-on-surface-100); }
.ct-html .dx-htmleditor-content a { color: var(--catkin-link); }
/* N3.4 Werkzeugleiste (K1): Knoepfe und Schriftgroesse in der Hoehe der Bedienelemente, Flaeche wie der Kartenkopf, flach (CI5) */
.ct-html .dx-htmleditor-toolbar-wrapper { background: var(--catkin-surface-2); border-block-end: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); }
.ct-html .dx-htmleditor-toolbar .dx-toolbar-item .dx-button,
.ct-html .dx-htmleditor-toolbar .dx-toolbar-item .dx-dropdownbutton,
.ct-html .dx-htmleditor-toolbar .dx-toolbar-item .dx-texteditor { block-size: var(--catkin-control-height) !important; min-block-size: 0; box-sizing: border-box; }
.ct-html .dx-htmleditor-toolbar .dx-toolbar-item .dx-button { min-inline-size: var(--catkin-control-height); }
.ct-html .dx-htmleditor-toolbar .dx-toolbar-item .dx-texteditor { inline-size: calc(var(--catkin-control-height) * 4) !important; }
.ct-html .dx-htmleditor-toolbar .dx-button-mode-text.dx-format-active { background: var(--catkin-surface-alt); color: var(--catkin-link); }
/* Feste Schriftfarben: Farbmuster + Name (Farbe ist nie das einzige Merkmal, CI3) */
.ct-html__farbe { display: inline-flex; align-items: center; gap: var(--catkin-space-xs); }
.ct-html__farbmuster { inline-size: var(--catkin-icon-body-xs); block-size: var(--catkin-icon-body-xs); border-radius: var(--catkin-radius-xs); border: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); }
.ct-html__farbmuster--standard { background: var(--catkin-surface-1); }
/* Markierung "geaendert" (E3) an der Editorflaeche */
html .ct-html .dx-htmleditor.ct-geaendert { border-color: var(--catkin-warning-on-surface-70) !important; box-shadow: inset 0 0 0 var(--catkin-border-width-3xs) var(--catkin-warning-on-surface-70); }
/* N3.5 Vorschau "So sieht die Mail aus": immer hell (Inhalt im iframe mit data-theme="light"), Rahmen dekorativ, fuellt die Spalte */
.ct-html-vorschau { display: flex; flex-direction: column; gap: var(--catkin-space-2xs); min-inline-size: 0; }
.ct-html-vorschau__titel { margin: 0; display: flex; align-items: center; min-block-size: var(--catkin-control-height); font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-100); } /* auf einer Linie mit den Feldkoepfen (U14.8) */
.ct-html-vorschau__rahmen { flex: 1 1 auto; inline-size: 100%; min-block-size: calc(var(--catkin-control-height) * 9); border: var(--catkin-border-width-3xs) solid var(--catkin-border-decor); border-radius: var(--catkin-radius-sm); background: var(--catkin-white); color-scheme: light; }
.ct-html-vorschau > .ct-feld__hilfe { margin: 0; }

/* ===================================================================================================================================
   Merge 21.10.2026 (master #3090): Wartungshinweis im Fuss als Hinweisleiste (CI19, K7.1; Kategorie ueber data-color, _Footer.cshtml)
   umbrechend statt einzeilig abgeschnitten (U1.8). Ersetzt die festen Werte aus custom/catkin/app*.css (CI24).
   Merge 5 (master #3090 zweite Fassung): wieder ein Chip - inline-block, nur so breit wie der Text, volle Breite nur als Obergrenze; rechtsbuendig.
   =================================================================================================================================== */
.footer .ct-hinweis.maintenance-banner {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    font: var(--catkin-type-body-md);
    font-weight: var(--catkin-font-weight-semibold);
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Mit Hinweis nimmt der Fuss seine Hoehe aus dem Inhalt; die Grundhoehe haengt bewusst nicht an --ct-footer-height (das Skript im Fuss
   fuehrt diese Variable auf die gewachsene Hoehe nach - sonst Rueckkopplung, siehe master #3090). */
.footer.footer-banner {
    height: auto;
    min-height: var(--catkin-size-lg);
    padding-block: var(--catkin-space-xs);
}

/* =====================================================================================================
   #3101 N4 – Zugkopf des Blockzugs (#1833, Kundenticket 35762, AK 1-7) und Kennzeichen-Tags (K6.2, R12)
   ===================================================================================================== */
/* #3101 RD-6 (RL18): Cockpit „Verpasste Zeitslots“ – Zug-Slots heute (gefährdet oder nicht bedient): Statuskachel, Slot mit Befunden, Absprung
   in die Rangier-Dispo. Befundtext in Textstärke 80 der Familie (K3.3, Guideline 4b), nie die Füllung. */
.ct-cockpit-slots { padding: var(--catkin-space-sm) var(--catkin-space-md); border-block-start: var(--catkin-border-width-xs) solid var(--catkin-border-subtle); }
.ct-cockpit-slots__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--catkin-space-xs); }
.ct-cockpit-slots__zeile { display: flex; align-items: flex-start; gap: var(--catkin-space-xs); }
.ct-cockpit-slots__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: var(--catkin-space-3xs); }
.ct-cockpit-slots__kopf { font: var(--catkin-type-body-sm); font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-on-surface-100); overflow-wrap: break-word; }
.ct-cockpit-slots__befund { font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); overflow-wrap: break-word; }
.ct-cockpit-slots__befund--achtung { color: var(--catkin-critical-on-surface-80); }
.ct-cockpit-slots__befund--offen { color: var(--catkin-warning-on-surface-80); }
.ct-cockpit-slots__summe { font-weight: var(--catkin-font-weight-semibold); }

/* N4.1 Zugkopf (DataEditing/DirectTransportAvailability und …TE): Das Raster richtet sich nach der Breite der Karte (Containerabfrage,
   auch bei eingeklappter Seitenleiste). Breit (ab 85em) acht Spalten in der Anordnung des Tickets; schmaler (ab 60em) sechs Spalten mit
   denselben Beziehungen: Abfahrt ueber Ankunft, Produktionstag ueber Versandtag, OTN und TrainID unter der Zugnummer, Status unter dem
   Versandbahnhof, Zuginformationen unter dem Empfangsbahnhof, Kommentar einzeilig unter Abfahrt bis Ladeschluss. Ab 45em (Blockzug TE mit
   Kundenspalte bei 1366) vier Spalten mit denselben Spaltenbeziehungen, Zeiten und Kommentar darunter. Noch schmaler: Felder
   fliessen in so viele Spalten, wie Platz ist (Bestand #2792), der Kommentar nimmt die ganze Breite. Werte brechen nie mitten in einer
   Nummer oder Zeitangabe um (U2.7), Beschriftungen nie mitten im Wort (jede Spalte mindestens so breit wie ihr laengstes Wort bzw. ihre laengste Zeile, min-content); nichts ragt
   ueber die Karte (U1.8). Ersetzt die Regeln in app.css/app-dark.css (#2792). */
.ct-zugkopf { container-type: inline-size; }
.ct-zugkopf > .transport-card {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--catkin-size-3xl)), 1fr));
    gap: var(--catkin-space-sm) var(--catkin-space-lg);
    align-items: start;
}
.ct-zugkopf .transport-section { min-width: 0; overflow-wrap: break-word; }
.ct-zugkopf .transport-section > label {
    display: block; margin: 0 0 var(--catkin-space-3xs);
    font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-on-surface-100);
}
.ct-zugkopf .ct-zugkopf__komm { grid-column: 1 / -1; }
.ct-zugkopf .ct-zugkopf__komm .dx-texteditor { width: 100% !important; }
.ct-zugkopf__zeit, .ct-zugkopf__info > div { white-space: nowrap; } /* Zeitpunkt, Zahl und Einheit bleiben zusammen (U2.7) */
.ct-zugkopf__zeit--ist { padding-inline-start: var(--catkin-space-md); } /* "IST:" buendig unter der Uhrzeit von "PLAN:" (Abbildung #1833) */
.ct-zugkopf__kachel { margin-inline-start: var(--catkin-space-2xs); vertical-align: text-bottom; }
.ct-zugkopf__nummer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; contain: inline-size; } /* TrainID 34-stellig: eine Zeile, Tooltip mit vollem Text */
@container (min-width: 45em) {
    .ct-zugkopf > .transport-card {
        grid-template-columns:
            minmax(min-content, 0.8fr) minmax(min-content, 0.8fr)
            minmax(min-content, 1.3fr) minmax(min-content, 1.3fr);
        grid-template-areas:
            "zug  prod von  nach"
            "otn  vers stat info"
            "tid  tid  tid  info"
            "ab   ab   an   lade"
            "komm komm komm komm";
        grid-template-rows: auto auto 1fr auto auto;
    }
}
@container (min-width: 60em) {
    .ct-zugkopf > .transport-card {
        grid-template-columns:
            minmax(min-content, 0.8fr) minmax(min-content, 0.8fr)
            minmax(min-content, 1.3fr) minmax(min-content, 1.3fr)
            minmax(calc(var(--catkin-size-2xl) + var(--catkin-size-md)), 1.3fr) minmax(calc(var(--catkin-size-xl) + var(--catkin-size-sm)), 0.9fr);
        grid-template-areas:
            "zug  prod von  nach ab   lade"
            "otn  vers stat info an   ."
            "tid  tid  tid  info komm komm";
        grid-template-rows: auto auto 1fr; /* Mehrhoehe der Zuginformationen in die letzte Zeile: TrainID direkt unter OTN */
    }
}
@container (min-width: 85em) {
    .ct-zugkopf > .transport-card {
        grid-template-columns:
            minmax(min-content, 0.8fr) minmax(min-content, 0.8fr)
            minmax(min-content, 1.3fr) minmax(min-content, 1.3fr)
            minmax(calc(var(--catkin-size-2xl) + var(--catkin-size-md)), 1.1fr) minmax(calc(var(--catkin-size-2xl) + var(--catkin-size-md)), 1.1fr)
            minmax(min-content, 0.8fr) minmax(calc(var(--catkin-size-xl) + var(--catkin-size-sm)), 0.9fr);
        grid-template-areas:
            "zug prod von  nach ab   an   vers lade"
            "otn otn  stat info komm komm komm komm"
            "tid tid  tid  info komm komm komm komm";
        grid-template-rows: auto auto 1fr;
    }
}
@container (min-width: 45em) {
    .ct-zugkopf__zug  { grid-area: zug; }  .ct-zugkopf__prod { grid-area: prod; } .ct-zugkopf__von  { grid-area: von; }
    .ct-zugkopf__nach { grid-area: nach; } .ct-zugkopf__ab   { grid-area: ab; }   .ct-zugkopf__an   { grid-area: an; }
    .ct-zugkopf__vers { grid-area: vers; } .ct-zugkopf__lade { grid-area: lade; } .ct-zugkopf__otn  { grid-area: otn; }
    .ct-zugkopf__tid  { grid-area: tid; }  .ct-zugkopf__stat { grid-area: stat; } .ct-zugkopf__info { grid-area: info; }
    .ct-zugkopf .ct-zugkopf__komm { grid-area: komm; }
}

/* N4.2 Kennzeichen-Tag (K6.1/K6.2): Daten neben dem Element, das sie beschreiben (Auftragsart "Auto", SBH, BZA, ADR/RID, Laendercode,
   Dokumenttyp, Zaehler) - kein Zustand, nicht anklickbar. Neutral als Standard; eine Kategorie darf ueber data-color eine FACHFARBE
   tragen (CI18/CI22: yellow, pink, cyan, turquoise, burgundy), nie Status- oder Markenfarbe. Text in Inhaltsstaerke 100 auf Ebene 3
   (>= 4,5:1 in beiden Modi, Kontrastbericht), Rahmen dekorativ (60). Schrift Klein (body-sm; body-xs ergaebe bei der 14-px-Grundschrift von cOPERATOR 10,5 px < 12 px, CI8), Zeilenhoehe der Caption:
   gleich hoch wie die Statuspille .ct-status (U14.8, +-1 px), damit Tags und Status in einer Zeile buendig stehen. */
.ct-tag {
    display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); box-sizing: border-box;
    max-inline-size: 100%; padding-block: calc(var(--catkin-space-2xs) - var(--catkin-border-width-3xs)); padding-inline: var(--catkin-space-xs);
    border: var(--catkin-border-width-3xs) solid var(--catkin-on-surface-60); border-radius: var(--catkin-radius-full);
    background: var(--catkin-surface-3); color: var(--catkin-on-surface-100);
    font: var(--catkin-type-body-sm); line-height: 1.3333; font-weight: var(--catkin-font-weight-semibold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.ct-tag:not([data-color]) {
    border-color: var(--catkin-neutral-on-surface-60); background: var(--catkin-neutral-surface-3); color: var(--catkin-neutral-on-surface-100);
}
.ct-formular-kopf__titel .ct-tag { vertical-align: middle; } /* "Auto" neben der H1 (AK 9-10 #1833) */

/* N4.3 Sicherheitsnetz (R12): Bootstrap-Farbabzeichen, die (noch) kein Baustein sind - text-bg-*, bg-* und die in Bootstrap 5 ungueltigen
   badge-<farbe> und bg-error - nehmen dieselbe Form wie .ct-tag mit der Familie ihrer bisherigen Farbe (Guideline 9: Rollen statt Werte), damit keine
   Kombination aus fester Schrift (text-dark/-light, #000/#fff) und Themenflaeche unlesbar wird. Kein Status nach CI3 (ohne Icon) - die
   Zuordnung der EDI-, Planungs- und Betragsabzeichen zu Kategorien bleibt PO-Frage (W7b). Neue Stellen nutzen .ct-tag bzw. .ct-status. */
.badge:not(.ct-status):is(.text-bg-primary, .bg-primary, .badge-primary, .text-bg-info, .bg-info, .badge-info, .text-bg-secondary, .bg-secondary,
    .badge-secondary, .text-bg-light, .bg-light, .badge-light, .text-bg-dark, .bg-dark, .badge-dark, .text-bg-success, .bg-success, .badge-success,
    .text-bg-warning, .bg-warning, .badge-warning, .text-bg-danger, .bg-danger, .badge-danger, .bg-error) {
    --ct-tag-flaeche: var(--catkin-neutral-surface-3); --ct-tag-schrift: var(--catkin-neutral-on-surface-100); --ct-tag-rahmen: var(--catkin-neutral-on-surface-60);
    display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); box-sizing: border-box;
    padding-block: calc(var(--catkin-space-2xs) - var(--catkin-border-width-3xs)); padding-inline: var(--catkin-space-xs);
    border: var(--catkin-border-width-3xs) solid var(--ct-tag-rahmen); border-radius: var(--catkin-radius-full);
    background-color: var(--ct-tag-flaeche) !important; color: var(--ct-tag-schrift) !important;
    font: var(--catkin-type-body-sm); line-height: 1.3333; font-weight: var(--catkin-font-weight-semibold); vertical-align: middle;
}
.badge:not(.ct-status):is(.text-bg-primary, .bg-primary, .badge-primary, .text-bg-info, .bg-info, .badge-info) {
    --ct-tag-flaeche: var(--catkin-info-surface-3); --ct-tag-schrift: var(--catkin-info-on-surface-100); --ct-tag-rahmen: var(--catkin-info-on-surface-60);
}
.badge:not(.ct-status):is(.text-bg-success, .bg-success, .badge-success) {
    --ct-tag-flaeche: var(--catkin-success-surface-3); --ct-tag-schrift: var(--catkin-success-on-surface-100); --ct-tag-rahmen: var(--catkin-success-on-surface-60);
}
.badge:not(.ct-status):is(.text-bg-warning, .bg-warning, .badge-warning) {
    --ct-tag-flaeche: var(--catkin-warning-surface-3); --ct-tag-schrift: var(--catkin-warning-on-surface-100); --ct-tag-rahmen: var(--catkin-warning-on-surface-60);
}
.badge:not(.ct-status):is(.text-bg-danger, .bg-danger, .badge-danger, .bg-error) {
    --ct-tag-flaeche: var(--catkin-critical-surface-3); --ct-tag-schrift: var(--catkin-critical-on-surface-100); --ct-tag-rahmen: var(--catkin-critical-on-surface-60);
}
.badge:not(.ct-status):is(.text-bg-dark, .bg-dark, .badge-dark) {
    --ct-tag-flaeche: var(--catkin-neutral-surface-inverse-strong); --ct-tag-schrift: var(--catkin-neutral-on-inverse); --ct-tag-rahmen: transparent;
}
.badge:not(.ct-status):is(.text-bg-primary, .text-bg-info, .text-bg-secondary, .text-bg-light, .text-bg-dark, .text-bg-success, .text-bg-warning,
    .text-bg-danger, .bg-primary, .bg-info, .bg-secondary, .bg-light, .bg-dark, .bg-success, .bg-warning, .bg-danger) > svg { color: currentColor; }

/* =====================================================================================================
 * N9 Kompakt-Sichten (data-density="compact" am <html>, CI23) – Mindestschrift CI8
 *    Seit N9 wirkt das Attribut wirklich (vorher kodiert, jede Sicht lief in Normal). cOperator rechnet mit 14 px Grundschrift (#1039):
 *    die Kompakt-Tokens body-sm, body-xs, body-2xs und body-3xs ergaeben 10,5 px (< 12 px). In einer Kompakt-Sicht zeigen sie deshalb auf
 *    body-md (12,25 px) – dieselbe Loesung wie die Seitenleiste (Abschnitt D). Nur am <html>: die Seitenleiste und Karten mit eigener
 *    Dichte (N5) setzen ihre Tokens selbst und bleiben unberuehrt; Normal-Sichten aendern sich nicht.
 * ===================================================================================================== */
html[data-density="compact"] {
    --catkin-type-body-sm: var(--catkin-type-body-md);
    --catkin-type-body-xs: var(--catkin-type-body-md);
    --catkin-type-body-2xs: var(--catkin-type-body-md);
    --catkin-type-body-3xs: var(--catkin-type-body-md);
}


/* N5 Datenkorrektur (DataEditing/OrderSupplement, PO-Aussage 21.10.2026): Vergleich der drei Saeulen des Feldertripels, eine Zeile je Angabe.
   N5.1 Stand im Seitenkopf: Bestaetigungszeitpunkt, Zaehler je Art, Schalter "Nur Abweichungen" (K4.3, wirkt sofort).
   N5.2 Tabelle (Rollen table/row/cell, Spalten per subgrid buendig): Angabe | Kunde (catkin) | Bestaetigt | Aktuell | Abweichung. Die Karte ist
        Kompakt (data-density, CI23); Schrift Text (body-md), weil body-sm in Kompakt unter 12 px laege (CI8). Werte einzeilig, gekuerzt mit
        Tooltip (R2, U1.8). Abweichende Zelle: Inhaltsstaerke 100, halbfett, Strich am Zellanfang in neutral (kein Status-, keine Warnfarbe:
        die Warnfarbe heisst "ungespeichert", U16.4). Gleiche Werte in Inhaltsstaerke 80.
   N5.3 Kennzeichen "Kunde geaendert" / "Neu vom Kunden" / "Disponent geaendert": .ct-tag neutral mit UI-Icon (K6.2, CI3: Text + Zeichen).
   N5.4 Schmale Karte: jede Zeile als Block, Spaltenname vor dem Wert.
   "Sonstige Angaben" bleibt Normal: Feldbeschriftungen waeren in Kompakt 10,5 px (< 12 px, CI8). */
.ct-dk-stand {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--catkin-space-2xs) var(--catkin-space-md);
    font: var(--catkin-type-body-sm); color: var(--catkin-on-surface-80); min-width: 0;
}
.ct-dk-stand__bestaetigt { display: inline-flex; align-items: center; gap: var(--catkin-space-2xs); color: var(--catkin-on-surface-100); font-weight: var(--catkin-font-weight-semibold); }
.ct-dk-stand__bestaetigt > svg { width: var(--catkin-icon-body-xs); height: var(--catkin-icon-body-xs); color: var(--catkin-on-surface-70); }
.ct-dk-stand__schalter { margin: 0; color: var(--catkin-on-surface-100); }

.ct-dk { container-type: inline-size; }
.ct-dk .ct-karte__inhalt { font: var(--catkin-type-body-md); }
.ct-dk__hinweis {
    display: flex; flex-wrap: wrap; gap: var(--catkin-space-2xs) var(--catkin-space-lg); margin: 0 0 var(--catkin-space-sm);
    color: var(--catkin-on-surface-80); font: var(--catkin-type-body-md);
}
.ct-dk__hinweis > span { display: inline-flex; align-items: baseline; gap: var(--catkin-space-2xs); }
.ct-dk__hinweis svg { flex: none; align-self: center; width: var(--catkin-icon-body-xs); height: var(--catkin-icon-body-xs); color: var(--catkin-on-surface-70); }
.ct-dk__hinweis strong { color: var(--catkin-on-surface-100); font-weight: var(--catkin-font-weight-semibold); white-space: nowrap; }

.ct-dk__tabelle {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) max-content;
    column-gap: var(--catkin-space-sm);
}
.ct-dk__gruppe, .ct-dk__zeile { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.ct-dk__zeile { align-items: center; padding-block: var(--catkin-space-2xs); border-block-end: var(--catkin-border-width-3xs) solid var(--catkin-border-subtle); }
.ct-dk__zeile > * { min-width: 0; }
.ct-dk__kopfzeilen .ct-dk__zeile { padding-block: var(--catkin-space-2xs); background: var(--catkin-surface-alt); border-block-end-color: var(--catkin-border-decor); }
.ct-dk__kopfzeilen [role="columnheader"] { padding-inline: var(--catkin-space-2xs); font-weight: var(--catkin-font-weight-semibold); color: var(--catkin-on-surface-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-dk__angabe { padding-inline: var(--catkin-space-2xs); color: var(--catkin-on-surface-100); font-weight: var(--catkin-font-weight-semibold); }
.ct-dk__angabe label { margin: 0; font: inherit; }
.ct-dk__wert {
    display: block; padding-inline: var(--catkin-space-xs) var(--catkin-space-2xs); color: var(--catkin-on-surface-80);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-dk__wert--abweichung, .ct-dk__aktuell--abweichung {
    background: var(--catkin-surface-3); border-radius: var(--catkin-radius-xs);
    box-shadow: inset var(--catkin-border-width-xs) 0 0 0 var(--catkin-on-surface-100);
}
.ct-dk__wert--abweichung { padding-block: var(--catkin-space-2xs); }
.ct-dk__aktuell--abweichung { padding-block: var(--catkin-space-3xs); padding-inline-end: var(--catkin-space-3xs); }
.ct-dk__wert--abweichung { color: var(--catkin-on-surface-100); font-weight: var(--catkin-font-weight-semibold); }
.ct-dk__aktuell { display: grid; gap: var(--catkin-space-3xs); padding-inline-start: var(--catkin-space-xs); }
.ct-dk__aktuell .ct-feld__fehler:empty { display: none; }
.ct-dk__abweichung { display: flex; flex-direction: column; align-items: flex-start; gap: var(--catkin-space-3xs); }
.ct-dk__kennzeichen { font: var(--catkin-type-body-md); line-height: 1.3333; font-weight: var(--catkin-font-weight-semibold); }
.ct-dk__kennzeichen > svg { flex: none; width: var(--catkin-icon-body-2xs); height: var(--catkin-icon-body-2xs); color: var(--catkin-on-surface-70); }

/* Schalter "Nur Abweichungen": Zeilen ohne Kennzeichen weichen, ausser sie tragen eine ungespeicherte Aenderung (U16.4) */
.ct-dk--nur-abweichungen .ct-dk__koerper > .ct-dk__zeile[data-ct-dk-abweichung="0"]:not(:has(.ct-geaendert)) { display: none; }
.ct-dk__leer { display: none; margin: var(--catkin-space-sm) 0 0; color: var(--catkin-on-surface-80); }
.ct-dk--nur-abweichungen:not(:has(.ct-dk__koerper > .ct-dk__zeile:is([data-ct-dk-abweichung="1"], :has(.ct-geaendert)))) .ct-dk__leer { display: block; }

@container (max-width: 48em) {
    .ct-dk__tabelle, .ct-dk__gruppe, .ct-dk__zeile { display: block; }
    .ct-dk__kopfzeilen { display: none; }
    .ct-dk__zeile { padding-block: var(--catkin-space-xs); }
    .ct-dk__zeile > [role="cell"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: var(--catkin-space-xs); padding-block: var(--catkin-space-3xs); }
    .ct-dk__zeile > [role="cell"]::before { content: attr(data-spalte); color: var(--catkin-on-surface-80); font-weight: var(--catkin-font-weight-regular); }
    .ct-dk__wert { white-space: normal; }
    .ct-dk__abweichung { flex-direction: row; flex-wrap: wrap; }
}

/* ORT-1 (Facelift 3101): Orts-, Laender- und PLZ-Suche (ct-ortsuche.js). Hoehe, Rahmen und Fokus kommen zentral aus dem Theme der Auswahl (K1, CI21). */
.ct-ortsuche { min-width: 0; max-width: 100%; }
.ct-ortsuche__treffer { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* N11 (Facelift 3101): Auswahl mit Suche fuer feste Wertelisten (ct-auswahl.js, select[data-ct-auswahl]). Das native select bleibt
   Formularfeld und ist versteckt; Hoehe, Rahmen und Fokus kommen zentral aus dem Theme der Auswahl (K1, CI21). Mehrfachauswahl nach K1.3:
   eine Zeile, ab zwei Werten die Anzahl; nichts waechst in der Hoehe. */
select.ct-auswahl__quelle { display: none; }
.ct-auswahl { min-width: 0; max-width: 100%; }
.ct-auswahl__eintrag { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-auswahl--mehrfach .dx-tag-container { flex-wrap: nowrap; overflow: hidden; }
.ct-auswahl--mehrfach .dx-tag { max-width: 100%; min-width: 0; }
.ct-auswahl--mehrfach .dx-tag-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* N11 (Facelift 3101): Adresszeile PLZ / Ort / Land in Adresskarten (Kundenauftrag, TE-Variante, Transportangaben; R3, K3.6, U1.8, U2.7).
   Felder mit Mindestbreite aus den Groessen-Tokens; reicht der Platz nicht, bricht die Zeile um, statt die Felder zu quetschen.
   Beschriftungen brechen nie im Wort (keine Silbentrennung); die Mindestbreiten tragen die laengste Beschriftung mit Pflichtstern. */
.ct-adresszeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--catkin-space-sm);
    align-items: flex-start;
}
.ct-adresszeile__feld { min-width: 0; }
.ct-adresszeile__feld--plz { flex: 1 1 var(--catkin-size-xl); }
.ct-adresszeile__feld--ort { flex: 2 1 var(--catkin-size-xl); }
.ct-adresszeile__feld--land { flex: 2 1 var(--catkin-size-2xl); }
.ct-adresszeile__feld > label { white-space: nowrap; hyphens: manual; }

/* #3101 FIX-3 Menüeinträge mit Icon: Icon vor dem Text, nie Text im data-lucide-Element (lucide.createIcons ersetzt es samt Inhalt) */
.dropdown-item:has(> svg.lucide) { display: flex; align-items: center; gap: var(--catkin-space-xs); }
.dropdown-item > svg.lucide { flex: 0 0 auto; inline-size: var(--catkin-icon-body-sm); block-size: var(--catkin-icon-body-sm); }

/* ===================================================================================================================================
   #3101 FIX-5 Zeilenaktionen und Status (PO-Festlegungen 24.10.2026)
   =================================================================================================================================== */
/* FIX-5.1 Spaltenreihenfolge (Auswahl) · Aktionen · Status · Daten: Aktionsspalte nur Handgriffe, Statusspalte nur Kacheln (CI3, U14.7).
   Die Spalten kommen aus Extensions/CtSpaltenExtensions.cs (Name ctAktionen / ctStatus, Koepfe "Aktionen" / "Status"). */
.ct-spalte-status .catkin-kachel + .catkin-kachel { margin-inline-start: var(--catkin-space-2xs); }
.ct-spalte-status { white-space: nowrap; }

/* FIX-5.2 U14.9 (neu, PO 24.10.2026): Rollenfarben der Zeilenaktionen, umrandet, nie gefuellt. Ansehen/Navigieren und Kopieren bleiben
   neutral (Ghost C7). Zerstoeren/Stornieren = Gefahr-Rolle umrandet, ausloesende Fachhandgriffe = Markengruen umrandet. Hover und Gedrueckt
   aus den Zustandsrollen derselben Familie (CI22). Die Rolle setzt die Klasse am Knopf; fehlt sie, ordnet das Zeichen zu (eine Liste hier,
   R0) - Tabelle in docs/UI-REGELWERK.md. */
.btn.ct-aktion--gefahr,
.ct-aktionen .btn.ct-ghost:not(.ct-aktion--neutral):not(.ct-aktion--ausloesen):has(> svg:is(.lucide-trash-2, .lucide-trash, .lucide-circle-x, .lucide-ban, .lucide-user-minus, .lucide-octagon-x)) {
    --ct-btn-color: var(--catkin-critical-on-surface-70);
    --ct-btn-bg: transparent;
    --ct-btn-border-color: var(--catkin-critical-on-surface-70);
    --ct-btn-hover-color: var(--catkin-critical-on-surface-70-hover);
    --ct-btn-hover-bg: var(--catkin-critical-surface-1-hover);
    --ct-btn-hover-border-color: var(--catkin-critical-on-surface-70-hover);
    --ct-btn-active-color: var(--catkin-critical-on-surface-70-pressed);
    --ct-btn-active-bg: var(--catkin-critical-surface-1-pressed);
    --ct-btn-active-border-color: var(--catkin-critical-on-surface-70-pressed);
}
.btn.ct-aktion--ausloesen,
.ct-aktionen .btn.ct-ghost:not(.ct-aktion--neutral):not(.ct-aktion--gefahr):has(> svg:is(.lucide-warehouse, .lucide-container, .lucide-check, .lucide-user-check, .lucide-send, .lucide-truck, .lucide-forklift, .lucide-play, .lucide-square-check, .lucide-square, .lucide-phone-call)) {
    --ct-btn-color: var(--catkin-brand-on-surface-70);
    --ct-btn-bg: transparent;
    --ct-btn-border-color: var(--catkin-brand-on-surface-70);
    --ct-btn-hover-color: var(--catkin-brand-on-surface-70-hover);
    --ct-btn-hover-bg: var(--catkin-brand-surface-1-hover);
    --ct-btn-hover-border-color: var(--catkin-brand-on-surface-70-hover);
    --ct-btn-active-color: var(--catkin-brand-on-surface-70-pressed);
    --ct-btn-active-bg: var(--catkin-brand-surface-1-pressed);
    --ct-btn-active-border-color: var(--catkin-brand-on-surface-70-pressed);
}

/* FIX-5.3 Hand-Zeiger und Hover nur fuer Knoepfe; Kacheln sind Zustand: kein Hand-Zeiger, keine Hover-Aenderung, Rahmen bleibt (Guideline 6.0) */
.btn:not(:disabled):not(.disabled) { cursor: pointer; }
.catkin-kachel, .ct-statuskachel { cursor: default; }
a .catkin-kachel, a .ct-statuskachel, .btn .catkin-kachel { cursor: inherit; }
.catkin-kachel:hover, .ct-statuskachel:hover { filter: none; opacity: 1; }

/* FIX-5.4 Tooltip sofort (K7.3 "ohne spuerbare Verzoegerung", PO 24.10.2026): ein Baustein (js/catkin/ct-tooltip.js) fuer Icon-Knoepfe und
   Kacheln, auch in Rasterzeilen (Delegation). Ebene Tooltip aus der Ebenenordnung (FIX-4). */
.ct-tooltip {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--ct-ebene-tooltip);
    max-inline-size: var(--catkin-container-3xs);
    padding: var(--catkin-space-2xs) var(--catkin-space-xs);
    border-radius: var(--catkin-radius-sm);
    background: var(--catkin-neutral-surface-inverse-strong);
    color: var(--catkin-neutral-on-inverse);
    font: var(--catkin-type-body-xs);
    pointer-events: none;
    overflow-wrap: anywhere;
}
.ct-tooltip[hidden] { display: none; }
/* #3101 Merge 8 (master #3084): mehrzeiliger Tooltip (Gefahrgutpositionen, Abfallschluessel an GG/Abf der Hauptlauf-Buchungen) behaelt seine
   Zeilen und darf breiter werden; die Zelle, die ihn traegt, zeigt den Hilfe-Zeiger (kein Hand-Zeiger, sie ist kein Knopf). */
.ct-tooltip--zeilen { white-space: pre-line; max-inline-size: var(--catkin-container-sm); }
.ct-zelle--hinweis { cursor: help; }

/* #3101 Merge 6 (master #3217): Notizvorschlag in der Autovervollstaendigung der Auftragsnotizen - Text links (voller Text, Umbruch statt Abschneiden,
   U1.8), rechts der Icon-Knopf "Ausblenden" (Ghost, Zeilengroesse, Klickflaeche K2.6). */
.ct-notiz-vorschlag { display: flex; align-items: flex-start; gap: var(--catkin-space-sm); }
.ct-notiz-vorschlag__text { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ct-notiz-vorschlag__ausblenden { flex: none; min-block-size: var(--catkin-target-min); min-inline-size: var(--catkin-target-min); }

/* #3101 FIX-10: Reste des Icon-Fonts "Material Design Icons" im Hyper-Theme (app.css/app.min.css, erzeugtes Bundle ohne Quelle). Der Font entfiel mit W2
   (icons.min.css); die Pseudo-Elemente zeichneten Ersatzkaestchen. Hier zentral (R0) ohne Font: Chevron als Rahmenform (wie .menu-arrow:before in app.css),
   Haken/Auge als Maske aus dem Lucide-Satz in currentColor. Drehung des Menuepfeils (aufgeklappt) bleibt in app.css an span.menu-arrow. */
.side-nav .menu-arrow:before,
*[dir=rtl] .side-nav .side-nav-item .menu-arrow:before {
    content: "" !important;
    font-family: none;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "";
    font-family: none;
    float: none;
    display: inline-block;
    inline-size: 0.4em;
    block-size: 0.4em;
    margin-inline-end: 0.5em;
    border-block-start: var(--catkin-border-width-3xs) solid currentColor;
    border-inline-end: var(--catkin-border-width-3xs) solid currentColor;
    transform: rotate(45deg);
    vertical-align: middle;
}
html[data-layout=topnav] .arrow-down:before {
    content: "";
    font-family: none;
    display: inline-block;
    inline-size: 0.5em;
    block-size: 0.5em;
    border-block-end: var(--catkin-border-width-3xs) solid currentColor;
    border-inline-end: var(--catkin-border-width-3xs) solid currentColor;
    transform: rotate(45deg) translate(-0.15em, -0.15em);
}
.card-radio .form-check-input:checked + .form-check-label:before,
.password-eye:before,
.show-password .password-eye:before {
    content: "";
    font-family: none;
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    background: currentColor;
    vertical-align: middle;
    -webkit-mask: var(--ct-fix10-maske) no-repeat center / contain;
            mask: var(--ct-fix10-maske) no-repeat center / contain;
}
.card-radio .form-check-input:checked + .form-check-label:before {
    --ct-fix10-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 7'/%3E%3C/svg%3E");
    color: var(--catkin-link);
}
.password-eye:before {
    --ct-fix10-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.show-password .password-eye:before {
    --ct-fix10-maske: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E");
}