/* ===== List Card Layout ===== */

.list-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.list-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    background: #fff;
    border-radius: 8px 8px 0 0;
}

.list-card-header-flush {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 0 14px 0;
    background: #fff;
}

.list-card-header:only-child {
    border-radius: 8px;
}

.list-card-body:first-child {
    border-radius: 8px;
}

.list-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .list-card-title h5 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #212529;
        white-space: nowrap;
    }

.list-card-icon {
    font-size: 1.3rem;
    color: #6c757d;
    opacity: 0.7;
}

.list-card-filter-summary {
    display: inline;
    margin-top: 2px;
}

    .list-card-filter-summary .text-muted {
        word-break: break-word;
    }

.list-card-filter-clear {
    color: #dc3545;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}

    .list-card-filter-clear:hover {
        color: #a71d2a;
    }

.list-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.list-card-search {
    min-width: 0;
}

    .list-card-search .form-control {
        max-width: 180px;
    }

.list-card-actions-separator {
    width: 1px;
    height: 20px;
    background: #dee2e6;
}

/* Labelled control group inside .list-card-actions. The planning toolbars are dense and largely
   icon-only, so each group names itself instead of relying on tooltips alone. Where groups are used,
   the row aligns on the controls' bottom edge so the captions sit on one line. */
.list-card-actions-labelled {
    align-items: flex-end;
}

.list-card-actions-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Die Beschriftung ueber einem Bedienelement - in der Kopfzeile einer Liste ebenso wie in einer
   Filterzeile, die als eigene Zeile unter dem Kopf sitzt (Karte, Tageszeitstrahl, Baufortschritt).
   Deshalb bewusst ohne Bindung an .list-card-actions: Bootstraps .form-label small ist mit 0.875em
   fast so gross wie der Wert darunter und laesst dieselbe Leiste je nach Maske anders aussehen. */
.list-card-actions-label {
    font-size: .7rem;
    line-height: 1.1;
    margin-bottom: 2px;
    color: #6c757d;
    white-space: nowrap;
}

/* Fixed row height so every caption sits on the same line: the group bodies hold controls of
   differing heights (a toggle switch is shorter than a btn-sm), and with the row aligned on its
   bottom edge a shorter body would push its caption upwards. */
.list-card-actions-body {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: calc(1.5em + .5rem + 2px);
}

/* A separator sits between groups, so it has to clear the caption line. */
.list-card-actions-labelled .list-card-actions-separator {
    margin-bottom: 6px;
}

.list-card-body {
    padding: 0;
    overflow: visible;
    border-radius: 0 0 8px 8px;
}

.list-card-divider {
    margin: 0;
    border-top: 1px solid #e9ecef;
}

.list-card-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border-radius: 0 0 8px 8px;
}

/* Rahmen und Rundung gehoeren der Karte; das Gitter uebernimmt sie, statt sie ein zweites Mal
   zu zeichnen. border-radius: inherit nimmt genau das, was .list-card-body fuehrt: nur unten
   gerundet, wenn eine Kopfzeile darueber sitzt, und rundum, wenn die Karte mit dem Gitter
   beginnt (.list-card-body:first-child). Eine feste Angabe liess die oberen Ecken eckig
   hervorschauen, sobald die Karte keine eigene Kopfzeile hatte. */
.list-card-body .grid-enhanced-wrapper {
    border: none;
    border-radius: inherit;
}

/* Unten gerundet wird nur, wenn das Gitter die Karte auch abschliesst. Folgt darunter noch ein
   Fussstreifen - etwa die Zeile "Geprueft: hoechstens 10 Stunden am Tag ..." -, dann endete die
   Flaeche mitten in der Karte rund und der eckige Streifen sass darunter. Oben bleibt es bei
   der Rundung der Karte. */
.list-card-body .grid-enhanced-wrapper:not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Fussstreifen einer Karte: die Zeile unter dem Gitter, die sagt, wogegen geprueft oder was
   gezaehlt wurde. Eigene Klasse statt gestapelter Hilfsklassen (px-3 py-2 + text-muted small),
   damit Abstand, Trennlinie und die Rundung der Karte an einer Stelle stehen und in jeder Maske
   gleich aussehen. */
.list-card-note {
    padding: 10px 18px;
    background: #fff;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 8px 8px;
    font-size: .8rem;
    line-height: 1.45;
    color: #6c757d;
}

/* Ist die Liste leer, faellt auch die Trennlinie weg: die Karte traegt dann eine einzige
   Flaeche - Hinweis in der Mitte, Fussnote darunter - und keinen Kasten im Kasten. */
.list-card-body:has(tr.hpo-empty-row) .list-card-note {
    border-top: none;
}

/* ===== Detail Card Layout (Edit / Insert / Details) ===== */

.detail-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Das overflow:hidden darueber haelt Tabellen und Reiter in den runden Ecken der Karte - es
   beschneidet aber auch jedes Menue, das aus der Karte herausklappt. Eine Karte, die in ihrem Kopf
   die Tabelleneinstellungen traegt, ist reine Bedienleiste: dort gibt es nichts zu beschneiden, und
   das Zahnradmenue klappt nach unten aus dem Kopf heraus. Dieselbe Karte gilt fuer die Suche und
   jedes weitere Dropdown der Leiste.

   Der Listenkopf (.list-card) hat das Problem nicht, er steht ohnehin auf overflow: visible.
   Wo :has() fehlt, bleibt es beim bisherigen Zustand - das Menue ist dann beschnitten wie zuvor. */
.detail-card:has(> .detail-card-header .grid-settings-menu),
.detail-card:has(> .detail-card-header .dropdown-menu) {
    overflow: visible;
}

.detail-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
    border-radius: 8px 8px 0 0;
}

    .detail-card-header:only-child {
        border-radius: 8px;
        border-bottom: none;
    }

.detail-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .detail-card-title h5 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: #212529;
    }

.detail-card-subtitle {
    display: block;
    margin-top: 1px;
}

.detail-card-icon {
    font-size: 1.3rem;
    color: #6c757d;
    opacity: 0.7;
}

.detail-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.detail-card-body {
    padding: 16px 18px;
}

/* Scrollable detail card - tab body scrolls, page does not scroll */
.detail-card-scrollable {
    display: flex;
    flex-direction: column;
}

    .detail-card-scrollable .detail-card-body {
        padding: 0;
        overflow: hidden;
    }

    /* Die 0 darueber gilt nur, weil den Innenabstand sonst jemand anderes mitbringt: bei Reitern
       das aktive Blatt (.tab-pane-scroll.active.show), in der Anzeige der Feldbehaelter aus
       EntityTemplates/Default.ascx (.tab-fields-row).

       Eine Entitaet ohne [EntityUIHint("TabGroups")] hat beim Bearbeiten weder das eine noch das
       andere - Default_Edit.ascx rendert die Felder als blanke .form-group direkt in den
       Kartenkoerper. Sie klebten dort am Rand. Betrifft die Tabellen aus dem hpo.Data-Paket, die
       keine Reiter deklarieren: Fehler- und Anwendungsprotokoll.

       Wo :has() fehlt, bleibt es beim bisherigen Zustand - kein Rueckschritt. */
    .detail-card-scrollable .detail-card-body:not(:has(.tab-content, .tab-fields-row)) {
        padding: 16px 18px;
    }

    .detail-card-scrollable .tab-content {
        overflow: hidden;
    }

/* Suppress Bootstrap's fade transition on tab panes to prevent layout flash */
.tab-pane-scroll.fade {
    transition: none !important;
    opacity: 1 !important;
}

.tab-pane-scroll {
    display: none;
}

    .tab-pane-scroll.active {
        display: block;
        visibility: hidden;
    }

        .tab-pane-scroll.active.show {
            visibility: visible;
        }

/* Die Hoehe des aktiven Blatts misst masterpage.js (fitDetailCardPanes) und legt sie als
   --detail-card-pane-height an die Karte: vom Beginn des Reiterinhalts bis zum unteren
   Bildrand, Fussleiste abgezogen. Der feste Wert dahinter ist nur der Rueckfall, bis das
   Skript gelaufen ist - als Schaetzung war er zu vorsichtig: auf den meisten Masken blieb
   unter der Karte eine Handbreit frei, waehrend das Blatt darueber schon rollte. */
.detail-card-scrollable .tab-content .tab-pane-scroll.active.show {
    max-height: var(--detail-card-pane-height, calc(100vh - 340px));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 18px;
    box-sizing: border-box;
}

    .detail-card-scrollable .tab-content .tab-pane-scroll.active.show .grid-enhanced-wrapper,
    .detail-card-scrollable .tab-content .tab-pane-scroll.active.show .table-responsive {
        max-height: calc(var(--detail-card-pane-height, calc(100vh - 340px)) - 20px);
        overflow-y: auto;
    }

        .detail-card-scrollable .tab-content .tab-pane-scroll.active.show .grid-enhanced-wrapper .table thead th,
        .detail-card-scrollable .tab-content .tab-pane-scroll.active.show .table-responsive .table thead th,
        .tab-pane-scroll.active.show .grid-enhanced-wrapper .table thead th,
        .grid-enhanced-wrapper .table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #fff;
        }

.detail-card-scrollable .nav-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    flex-shrink: 0;
    padding: 0 18px;
    border-bottom: 2px solid #e9ecef;
    margin: 0;
}

/* ===== Tab styling inside detail cards ===== */

/* Auch im Kartenkopf: Reiter stehen dort, wo sie die ganze Karte umschalten (Arbeitskleidung,
   Kostensätze). Ohne diese Zeile blieben sie beim Bootstrap-Grau stehen, während dieselben
   Reiter im Kartenkörper die Hausfarbe tragen - zwei Sorten Reiter in einer Anwendung. */
.detail-card-header .nav-tabs,
.detail-card-body .nav-tabs {
    border-bottom: 2px solid #e9ecef;
    padding: 0;
    margin: 0 0 16px 0;
}

    .detail-card-header .nav-tabs .nav-link,
    .detail-card-body .nav-tabs .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        color: #6c757d;
        font-weight: 500;
        font-size: 0.9rem;
        padding: 8px 16px;
        margin-bottom: -2px;
        transition: color 0.15s, border-color 0.15s;
    }

        .detail-card-header .nav-tabs .nav-link:hover,
        .detail-card-body .nav-tabs .nav-link:hover {
            color: #495057;
            border-bottom-color: #adb5bd;
        }

        .detail-card-header .nav-tabs .nav-link.active,
        .detail-card-body .nav-tabs .nav-link.active {
            color: #324E76;
            border-bottom-color: #324E76;
            background: transparent;
        }

/* Fix form labels inside tab groups - push right with more space */
.detail-card-body .form-group.row {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 6px 0;
}

    .detail-card-body .form-group.row .col-form-label {
        padding-left: 4px;
    }

/* ===== Breadcrumb Card ===== */

.breadcrumb-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    padding: 10px 18px;
    margin-bottom: 16px;
}

    .breadcrumb-card .breadcrumb {
        margin: 0;
        padding: 0;
        background: transparent;
    }

.detail-card-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

    .detail-card-table tr {
        border-bottom: 1px solid #f0f0f0;
    }

        .detail-card-table tr:last-child {
            border-bottom: none;
        }

        .detail-card-table tr:hover {
            background: #f8f9fa;
        }

    .detail-card-table td {
        padding: 10px 18px;
        vertical-align: middle;
    }

        .detail-card-table td:first-child {
            font-weight: 500;
            color: #495057;
            white-space: nowrap;
            width: 220px;
            background: rgba(0, 0, 0, 0.01);
        }

.detail-card-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #e9ecef;
    background: #fff;
}

/* ===== Button Color Overrides ===== */

/* Grundfarbe und Zustaende des Knopfes stehen weiter unten bei den Bootstrap-Variablen. */

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        background-color: #283f5f;
        border-color: #283f5f;
        box-shadow: none;
    }

.btn-success {
    background-color: #3a9d5c;
    border-color: #3a9d5c;
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:not(:disabled):not(.disabled):active,
    .btn-success:not(:disabled):not(.disabled).active,
    .show > .btn-success.dropdown-toggle {
        background-color: #328a50;
        border-color: #328a50;
        box-shadow: none;
    }

.btn-danger {
    background-color: #c9444d;
    border-color: #c9444d;
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:not(:disabled):not(.disabled):active,
    .btn-danger:not(:disabled):not(.disabled).active,
    .show > .btn-danger.dropdown-toggle {
        background-color: #b33b43;
        border-color: #b33b43;
        box-shadow: none;
    }

.btn-info {
    background-color: #3a8fb5;
    border-color: #3a8fb5;
    color: #fff;
}

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:not(:disabled):not(.disabled):active,
    .btn-info:not(:disabled):not(.disabled).active,
    .show > .btn-info.dropdown-toggle {
        background-color: #327da0;
        border-color: #327da0;
        color: #fff;
        box-shadow: none;
    }

/* Syncfusion link buttons in brand blue instead of bootstrap #0d6efd */
.e-btn.e-link,
.e-css.e-btn.e-link {
    color: #324E76;
}

    .e-btn.e-link:hover,
    .e-css.e-btn.e-link:hover,
    .e-btn.e-link:focus,
    .e-css.e-btn.e-link:focus {
        color: #283f5f;
    }

.btn-warning {
    background-color: #c99a2e;
    border-color: #c99a2e;
    color: #fff;
}

    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:not(:disabled):not(.disabled):active,
    .btn-warning:not(:disabled):not(.disabled).active,
    .show > .btn-warning.dropdown-toggle {
        background-color: #b38828;
        border-color: #b38828;
        color: #fff;
        box-shadow: none;
    }

.btn-secondary {
    background-color: #5a6473;
    border-color: #5a6473;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:not(:disabled):not(.disabled):active,
    .btn-secondary:not(:disabled):not(.disabled).active,
    .show > .btn-secondary.dropdown-toggle {
        background-color: #4e5766;
        border-color: #4e5766;
        box-shadow: none;
    }

.btn-outline-secondary {
    color: #5a6473;
    border-color: #ced4da;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus,
    .btn-outline-secondary:not(:disabled):not(.disabled):active,
    .btn-outline-secondary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-secondary.dropdown-toggle {
        background-color: #f0f2f5;
        color: #3d4654;
        border-color: #b8bfc9;
        box-shadow: none;
    }

/* ===== Dialog centering in sidebar layout ===== */

/* When sidebar is open (260px wide), offset dialogs so they center over the content area */
@media screen and (min-width: 768px) {
    .page-wrapper.toggled .modal,
    .page-wrapper.toggled .swal2-container {
        padding-left: 260px;
    }
}

/* ===== Link Color Overrides ===== */

a {
    color: #324E76;
}

    a:hover {
        color: #283f5f;
    }

/* ===== SweetAlert-Dialoge ===== */

/* SweetAlert bringt eigene Knopffarben mit - der Bestaetigungsknopf ist von Haus aus lila
   (#7066e0) und faellt damit aus der Anwendung heraus. Die Farben werden hier zentral
   gesetzt und nicht bei jedem Aufruf, denn Swal.fire steht an vielen Stellen: in hpo.js
   (Dialog, ContinueDialog), in den Masken und in den Toasts. Eine Regel im Stilblatt
   erwischt alle, auch die, die spaeter dazukommen. */
.swal2-styled.swal2-confirm {
    background-color: #324E76;
    border-color: #324E76;
}

    .swal2-styled.swal2-confirm:hover,
    .swal2-styled.swal2-confirm:focus {
        background-color: #283f5f;
        border-color: #283f5f;
        box-shadow: none;
    }

/* Der Abbrechen-Knopf ist ab Werk kraeftig rot. Abbrechen ist keine Warnung, sondern der
   harmlose der beiden Wege - deshalb dieselbe zurueckhaltende Form wie btn-outline-secondary. */
.swal2-styled.swal2-cancel {
    background-color: transparent;
    border: 1px solid #6c757d;
    color: #6c757d;
}

    .swal2-styled.swal2-cancel:hover,
    .swal2-styled.swal2-cancel:focus {
        background-color: #6c757d;
        border-color: #6c757d;
        color: #fff;
        box-shadow: none;
    }

/* Ein Dialog, der wirklich etwas zerstoert, faerbt seinen Bestaetigungsknopf rot ein -
   dafuer bekommt der Aufruf customClass: { confirmButton: 'swal-gefahr' }. */
.swal2-styled.swal2-confirm.swal-gefahr {
    background-color: #c9444d;
    border-color: #c9444d;
}

    .swal2-styled.swal2-confirm.swal-gefahr:hover,
    .swal2-styled.swal2-confirm.swal-gefahr:focus {
        background-color: #b33b43;
        border-color: #b33b43;
    }

/* ===== Bootstrap-Blau auf das Hausblau =====================================================

   Bootstrap bringt sein eigenes Blau mit (#0d6efd). Es taucht dort auf, wo eine Maske nichts
   dagegen setzt: im angehakten Kästchen, im Fokusrahmen eines Eingabefelds, im Umriss-Knopf, im
   Fortschrittsbalken, in der Blätterleiste. Neben dem Hausblau der Listen (#324E76) sieht das
   nach zwei Anwendungen aus.

   Zwei Wege, je nachdem was Bootstrap 5.2 anbietet: wo die Komponente ihre Farbe über eine
   eigene CSS-Variable bezieht, wird die Variable gesetzt - damit stimmen auch Hover, Aktiv und
   Deaktiviert. Wo sie fest im Stilblatt steht (Formularfelder), muss die Regel selbst noch
   einmal her.

   #9db2cd ist das aufgehellte Hausblau für Fokusrahmen, rgba(50,78,118,.25) der Fokusschein -
   dieselben Rollen, die Bootstrap mit #86b7fe und rgba(13,110,253,.25) besetzt. */

:root {
    --bs-primary: #324E76;
    --bs-primary-rgb: 50, 78, 118;
    --bs-link-color: #324E76;
    --bs-link-color-rgb: 50, 78, 118;
    --bs-link-hover-color: #283f5f;
}

/* --- Komponenten mit eigenen Variablen --- */

.btn-primary {
    --bs-btn-bg: #324E76;
    --bs-btn-border-color: #324E76;
    --bs-btn-hover-bg: #283f5f;
    --bs-btn-hover-border-color: #283f5f;
    --bs-btn-active-bg: #283f5f;
    --bs-btn-active-border-color: #283f5f;
    --bs-btn-disabled-bg: #324E76;
    --bs-btn-disabled-border-color: #324E76;
    --bs-btn-focus-shadow-rgb: 50, 78, 118;
}

.btn-outline-primary {
    --bs-btn-color: #324E76;
    --bs-btn-border-color: #324E76;
    --bs-btn-hover-bg: #324E76;
    --bs-btn-hover-border-color: #324E76;
    --bs-btn-active-bg: #324E76;
    --bs-btn-active-border-color: #324E76;
    --bs-btn-disabled-color: #324E76;
    --bs-btn-disabled-border-color: #324E76;
    --bs-btn-focus-shadow-rgb: 50, 78, 118;
}

.btn-link {
    --bs-btn-color: #324E76;
    --bs-btn-hover-color: #283f5f;
    --bs-btn-active-color: #283f5f;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: #324E76;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #324E76;
}

.pagination {
    --bs-pagination-color: #324E76;
    --bs-pagination-hover-color: #283f5f;
    --bs-pagination-focus-color: #283f5f;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
    --bs-pagination-active-bg: #324E76;
    --bs-pagination-active-border-color: #324E76;
}

.progress {
    --bs-progress-bar-bg: #324E76;
}

.list-group {
    --bs-list-group-active-bg: #324E76;
    --bs-list-group-active-border-color: #324E76;
}

.accordion {
    --bs-accordion-active-color: #324E76;
    --bs-accordion-active-bg: #eef2f7;
    --bs-accordion-btn-focus-border-color: #9db2cd;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23324E76'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ===== Auswahlkaestchen des Hauses =====

   Das Kaestchen des Browsers passt in kein Programm: es traegt die Farbe des Betriebssystems, ist
   auf jedem Geraet anders gross und steht neben Tabellenkopf und Schaltern wie ein Fremdkoerper.
   Deshalb ein eigenes - im selben Blau wie der Tabellenkopf und der Schalter (.toggle-switch).

   Es gilt ueberall dort, wo ausgewaehlt wird: in der Liste (Kopf und Zeile), in den Filterlisten
   der Planungsmasken und in den Dialogen. Wo ein neues Kaestchen dazukommt, genuegt die Huelle
   .hpo-check darum - dann sieht es aus wie alle anderen.

   Nicht betroffen sind die Ja/Nein-Schalter (.toggle-switch) und die Kaestchen von Bootstrap
   (.form-check-input); die tragen das Hausblau in ihrer eigenen Regel. */
.grid-enhanced-wrapper table .bulk-select-cb input[type="checkbox"],
.grid-enhanced-wrapper table > thead > tr > th input[type="checkbox"],
.abs-cbl input[type="checkbox"],
.bp-cbl input[type="checkbox"],
.oncall-cbl input[type="checkbox"],
.hpo-check input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    vertical-align: middle;
    background-color: #fff;
    border: 1.5px solid #adb5bd;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* In der Zeile steht das Kaestchen allein in seiner Spalte - dort darf es keinen Abstand
   mitbringen, sonst sitzt es nicht mittig. Das Kaestchen im Kopf laesst grid-enhanced.css ueber
   margin: 0 auto einruecken; ein margin: 0 von hier wuerde das aufheben, weil theme.css spaeter
   geladen wird. In den Auswahllisten steht der Text daneben; deren eigene Regeln setzen den
   Abstand. */
.grid-enhanced-wrapper table .bulk-select-cb input[type="checkbox"] {
    margin: 0;
}

.grid-enhanced-wrapper table .bulk-select-cb input[type="checkbox"]:hover,
.grid-enhanced-wrapper table > thead > tr > th input[type="checkbox"]:hover,
.abs-cbl input[type="checkbox"]:hover,
.bp-cbl input[type="checkbox"]:hover,
.oncall-cbl input[type="checkbox"]:hover,
.hpo-check input[type="checkbox"]:hover {
    border-color: #324E76;
}

.grid-enhanced-wrapper table .bulk-select-cb input[type="checkbox"]:focus,
.grid-enhanced-wrapper table > thead > tr > th input[type="checkbox"]:focus,
.abs-cbl input[type="checkbox"]:focus,
.bp-cbl input[type="checkbox"]:focus,
.oncall-cbl input[type="checkbox"]:focus,
.hpo-check input[type="checkbox"]:focus {
    outline: none;
    border-color: #324E76;
    box-shadow: 0 0 0 .2rem rgba(50, 78, 118, .25);
}

/* Der Haken steckt im Kaestchen selbst und kommt aus keiner Schriftart - so sitzt er auf jedem
   Rechner an derselben Stelle, auch wenn Font Awesome einmal nicht geladen ist. */
.grid-enhanced-wrapper table .bulk-select-cb input[type="checkbox"]:checked,
.grid-enhanced-wrapper table > thead > tr > th input[type="checkbox"]:checked,
.abs-cbl input[type="checkbox"]:checked,
.bp-cbl input[type="checkbox"]:checked,
.oncall-cbl input[type="checkbox"]:checked,
.hpo-check input[type="checkbox"]:checked {
    background-color: #324E76;
    border-color: #324E76;
    background-image: 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='m5.5 10.5 3 3 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --- Was der Browser selbst zeichnet --- */

/* Ein blankes <input type="checkbox"> ohne Bootstrap-Klasse - davon gibt es im Programm viele,
   vom Filter über den Dialog bis zur Massenbearbeitung - malt der Browser in der Farbe des
   Betriebssystems, unter Windows also im Systemblau. accent-color gibt ihm dieselbe Farbe wie
   .btn-primary. Die Angabe wird vererbt, deshalb genügt sie einmal an der Wurzel; sie gilt
   ebenso für Auswahlknöpfe, Fortschrittsbalken und Schieberegler. Kästchen mit eigenem Anstrich
   (appearance: none, etwa .toggle-switch oder .bulk-select-cb) bleiben davon unberührt - die
   tragen das Hausblau bereits in ihrer eigenen Regel. */
:root {
    accent-color: #324E76;
}

/* --- Formularfelder: hier steht die Farbe fest im Bootstrap-Stilblatt --- */

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: #324E76;
    border-color: #324E76;
}

.form-check-input:focus {
    border-color: #9db2cd;
    box-shadow: 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
}

/* Der Schieber des Bootstrap-Schalters: sein Punkt ist ein eingebettetes Bild und muss deshalb
   als Ganzes ersetzt werden. (Der Hausschalter .toggle-switch in Site.css ist davon unberührt -
   er traegt das Hausblau schon.) */
.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239db2cd'/%3e%3c/svg%3e");
}

.form-control:focus,
.form-select:focus {
    border-color: #9db2cd;
    box-shadow: 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
}

.form-range::-webkit-slider-thumb {
    background-color: #324E76;
}

.form-range::-moz-range-thumb {
    background-color: #324E76;
}

.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
}

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem rgba(50, 78, 118, 0.25);
}

/* Die Hilfsklassen: sie stehen mit !important im Bootstrap-Stilblatt und brauchen es deshalb
   hier ebenso. */
.text-primary {
    color: #324E76 !important;
}

.bg-primary {
    background-color: #324E76 !important;
}

.border-primary {
    border-color: #324E76 !important;
}

.link-primary {
    color: #324E76 !important;
}

    .link-primary:hover,
    .link-primary:focus {
        color: #283f5f !important;
    }