/*
 * Eigene Ergänzungen zum Theme — wird als LETZTES geladen.
 *
 * Alles, was vom Original abweicht, steht hier und nicht im Vendor-CSS. Damit bleibt
 * sb-admin-2.min.css eine unveränderte Kopie und lässt sich jederzeit austauschen, und
 * jede bewusste Abweichung ist an einer Stelle nachlesbar.
 *
 * Siehe docs/plan-m2.md §4C.
 */

/* --------------------------------------------------------------------------
 * 1. Hintergrundbild der Anmeldeseite
 *
 * sb-admin-2 lädt für .bg-login-image ein Foto von source.unsplash.com — bei jedem
 * Aufruf der Anmeldeseite ein Abruf bei einem fremden Server, noch bevor irgendwer
 * angemeldet ist. Das ersetzt ein Verlauf in den Hausfarben; das Bild ist rein
 * dekorativ und ohnehin erst ab Breite lg sichtbar.
 * -------------------------------------------------------------------------- */
.bg-login-image,
.bg-register-image,
.bg-password-image {
    background: linear-gradient(180deg, #4e73df 10%, #224abe 100%) !important;
    position: relative;
}

/* Ein dezentes Muster, damit die Fläche nicht nach fehlendem Bild aussieht. */
.bg-login-image::after,
.bg-register-image::after,
.bg-password-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .10) 0, transparent 45%),
                      radial-gradient(circle at 70% 75%, rgba(255, 255, 255, .07) 0, transparent 40%);
}

/* --------------------------------------------------------------------------
 * 2. Schrift
 *
 * Das Alt-System holt Nunito bei jedem Seitenaufruf von fonts.googleapis.com — damit
 * geht die IP jedes Benutzers an Google, auf jeder Seite eines CRM mit Kundendaten.
 * Hier liegen die Dateien lokal.
 *
 * ZWEI Blöcke, nicht acht: Nunito ist eine VARIABLE Schrift. Google liefert für 400,
 * 600, 700 und 800 dieselbe Datei aus und unterscheidet nur nach Zeichensatz. Der
 * Bereich steht deshalb in `font-weight: 400 800` — der Browser interpoliert daraus
 * jeden Schnitt. Vier Dateien je Gewicht wären dieselbe Datei viermal.
 *
 * Die unicode-range-Angaben sind unverändert die von Google: Sie sorgen dafür, dass
 * der Browser latin-ext nur lädt, wenn ein Zeichen daraus wirklich vorkommt.
 * Heruntergeladen am 2026-08-11 von fonts.gstatic.com (Nunito v32, SIL Open Font
 * License). Zusammen 73 KB.
 * -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/nunito/nunito-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/nunito/nunito-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
 * 3. Das Bild im Benutzermenü
 *
 * Im Original steht dort <img src="#">. Das lädt die aktuelle Seite ein zweites Mal
 * als Bild und zeigt ein kaputtes Symbol. Ersetzt durch einen Kreis mit den
 * Initialen — dieselbe Stelle, dieselbe Größe, nur ohne den Fehler.
 * -------------------------------------------------------------------------- */
.img-profile-initialen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #4e73df;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}

/* Das Foto auf der Seite «Mein Profil» (01.10.2026): dreimal so groß wie in der
 * Kopfleiste. Ohne Foto derselbe Kreis mit den Initialen — nur größer. */
.profil-foto {
    flex: none;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
}

.profil-foto-initialen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4e73df;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* --------------------------------------------------------------------------
 * 4. Ziehen in der Favoritenleiste
 *
 * Aus M1 übernommen: Die Leiste lässt sich direkt in der Seitenleiste sortieren.
 * Ohne user-select markiert der Zug den halben Seitentext mit.
 * -------------------------------------------------------------------------- */
.leiste-ziehbar {
    user-select: none;
}

.leiste-ziehbar .zieht {
    opacity: .45;
}

.leiste-speichert {
    opacity: .6;
}

.leiste-fehler > .nav-link {
    box-shadow: inset 3px 0 0 #e74a3b;
}

/* Der Stern sitzt rechts in der Zeile und darf die Beschriftung nicht verdrängen. */
.sidebar .nav-eintrag,
.sidebar .collapse-item.nav-eintrag {
    position: relative;
}

/* Der Link im Untermenü-Eintrag: Bei uns trägt das umschließende DIV die Klasse
 * collapse-item, weil der Stern daneben im selben Eintrag wohnt — im Original von
 * SB Admin 2 sitzt die Klasse am Anker selbst. Ohne diese Regel fällt der Anker
 * auf Browser-Blau mit Unterstrich zurück (aufgefallen erst produktiv, im direkten
 * Wechsel mit den Alt-Seiten). Farbe erbt er vom Eintrag, damit auch der
 * Aktiv-Zustand (primärblau, fett am Eintrag) durchschlägt. */
.sidebar .collapse-item.nav-eintrag a {
    color: inherit;
    text-decoration: none;
    display: block;
}

.sidebar .stern {
    position: absolute;
    top: 50%;
    right: .45rem;
    transform: translateY(-50%);
    padding: 0 .25rem;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .45);
    cursor: pointer;
    line-height: 1;
}

.sidebar .stern.an {
    color: #f6c23e;
}

.sidebar .collapse-inner .stern {
    color: rgba(0, 0, 0, .25);
}

.sidebar .collapse-inner .stern.an {
    color: #f6c23e;
}

.sidebar .stern-formular {
    margin: 0;
}

/* --------------------------------------------------------------------------
 * 5. Das Band während einer Übernahme
 *
 * Farben und Aufbau wie im Alt-System (views/layout/header.php), nur ohne die dort
 * inline gesetzten Stile — die stünden sonst in jeder Seite noch einmal.
 * -------------------------------------------------------------------------- */
.band-uebernahme {
    background: #f6c23e;
    color: #4a3800;
    padding: .55rem 1rem;
    text-align: center;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);
}

/* --------------------------------------------------------------------------
 * 6. Das Vokabular der M1-Bildschirme
 *
 * Benutzer, Gruppen, Rechtematrix, Ausnahmen, Protokoll und der
 * Navigations-Editor stammen aus M1 und benutzen ein kleines eigenes
 * Klassen-Vokabular (karte, tabellenrahmen, knopf, gedaempft …). Hier bekommt es
 * das Aussehen des Themes.
 *
 * Warum nicht das Markup umschreiben: Diese Bildschirme sind durchgetestet, und
 * drei Tests prüfen im Editor auf EXAKTE Klassennamen (class="ziehliste",
 * class="ziehzeile", class="griff") — dort ändert schon ein zusätzliches Wort im
 * Attribut das Ergebnis. Die Module ab Schritt 4 werden dagegen aus den Alt-Views
 * portiert und tragen die Theme-Klassen direkt; dieses Vokabular ist also eine
 * Brücke für die M1-Bildschirme, kein zweiter Weg für Neues.
 * -------------------------------------------------------------------------- */

.karte,
.tabellenrahmen {
    background: #fff;
    border: 1px solid #e3e6f0;
    border-radius: .35rem;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15);
    margin-bottom: 1.5rem;
}

.karte {
    padding: 1.25rem;
}

.tabellenrahmen {
    overflow-x: auto;
}

.tabellenrahmen > table {
    width: 100%;
    margin: 0;
    color: var(--schrift);
    border-collapse: collapse;
}

.tabellenrahmen th,
.tabellenrahmen td {
    padding: .6rem .75rem;
    border-top: 1px solid #e3e6f0;
    vertical-align: middle;
    font-size: .875rem;
}

.tabellenrahmen thead th {
    border-top: 0;
    border-bottom: 2px solid #e3e6f0;
    color: var(--schrift);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.tabellenrahmen tbody tr:hover {
    background: #f8f9fc;
}

.gedaempft {
    color: var(--schrift-neben);
    font-size: .875rem;
}

.nebenlink {
    font-size: .8rem;
}

/* Eingabefelder im Stil von .form-control-sm, ohne dass jede Ansicht die Klasse
   tragen muss. Bewusst eng gefasst: nur innerhalb der M1-Bildschirme. */
.tabellenrahmen input[type="text"],
.tabellenrahmen input[type="email"],
.tabellenrahmen input[type="password"],
.tabellenrahmen input[type="number"],
.tabellenrahmen select,
.karte input[type="text"],
.karte input[type="email"],
.karte input[type="number"],
.karte select {
    padding: .25rem .5rem;
    border: 1px solid #d1d3e2;
    border-radius: .2rem;
    background: #fff;
    color: var(--schrift);
    font-size: .875rem;
    line-height: 1.5;
}

.tabellenrahmen input:focus,
.tabellenrahmen select:focus,
.karte input:focus,
.karte select:focus {
    outline: 0;
    border-color: #bac8f3;
    box-shadow: 0 0 0 .2rem rgba(78, 115, 223, .25);
}

/* Knöpfe: .knopf entspricht btn-primary, .leise einem stillen Sekundärknopf,
   .gefahr dem roten. */
.knopf,
.leise,
.gefahr {
    display: inline-block;
    padding: .25rem .5rem;
    border: 1px solid transparent;
    border-radius: .2rem;
    font-size: .875rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.knopf {
    background: #4e73df;
    border-color: #4e73df;
    color: #fff;
}

.knopf:hover {
    background: #2e59d9;
    border-color: #2653d4;
    color: #fff;
}

.leise {
    background: #fff;
    border-color: #d1d3e2;
    color: var(--schrift-neben);
}

.leise:hover {
    background: #eaecf4;
    color: var(--schrift);
}

/* Rot eine Stufe dunkler als im Theme (29.09.2026): Weiß trägt auf #e74a3b nur 3,9 : 1. */
.gefahr {
    background-color: #e02d1b;
    border-color: #e02d1b;
    color: #fff;
}

.gefahr:hover {
    background-color: #d52a1a;
    color: #fff;
}

.fehler {
    padding: .75rem 1.25rem;
    border: 1px solid #f5c6cb;
    border-radius: .35rem;
    background: #f8d7da;
    color: #721c24;
}

.werkzeugleiste {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.felder {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

/* --------------------------------------------------------------------------
 * 7. Der Navigations-Editor
 *
 * Klassennamen unverändert aus M1 — drei Tests prüfen sie zeichengenau.
 * -------------------------------------------------------------------------- */
.ordnerblock {
    background: #fff;
    border: 1px solid #e3e6f0;
    border-radius: .35rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.ziehliste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ziehzeile {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    border: 1px solid #e3e6f0;
    border-radius: .2rem;
    background: #f8f9fc;
    margin-bottom: .3rem;
}

.ziehzeile.zieht {
    opacity: .45;
}

.griff,
.griff-beispiel {
    cursor: grab;
    color: #b7b9cc;
    user-select: none;
}

.ziehbereich {
    user-select: none;
}

.bezeichnung {
    flex: 1;
}

/* Mehrfachauswahl in einer Tabellenzelle (Gruppen je Benutzer, Rechte je Rolle):
   je Zeile eine Auswahl, Kästchen und Beschriftung nebeneinander statt untereinander
   umgebrochen. */
.tabellenrahmen td label {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .15rem;
    white-space: nowrap;
}

/* Knöpfe ohne eigene Klasse — in den M1-Ansichten steht dort schlicht <button>. */
.tabellenrahmen button:not(.stern),
.karte button:not(.stern) {
    padding: .25rem .5rem;
    border: 1px solid #4e73df;
    border-radius: .2rem;
    background: #4e73df;
    color: #fff;
    font-size: .875rem;
    line-height: 1.5;
    cursor: pointer;
}

.tabellenrahmen button:not(.stern):hover,
.karte button:not(.stern):hover {
    background: #2e59d9;
    border-color: #2653d4;
}

/* Schlüssel (slug) nicht mitten im Wort umbrechen — „super_ad min" liest sich wie
   ein Fehler und ist keiner. */
.tabellenrahmen code {
    white-space: nowrap;
    font-size: .8rem;
}

/* ---------------------------------------------------------------------------
   Echtzeit-Hinweise (M2 Funktion 20).

   Übernommen aus views/layout/footer.php des Alt-Systems, wo derselbe Stil als
   <style>-Block mitten in der Seite steht. Hier gehört er hierher — die
   Inhaltsrichtlinie erlaubt zwar Inline-Stile, aber nicht in verstreuten Blöcken
   nachvollziehbar.

   z-index 1080 liegt über Bootstrap-Modals (1050): Ein Toast, der hinter einem
   offenen Dialog erscheint, wäre keiner.
   --------------------------------------------------------------------------- */
#rt-toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 22rem;
    /* Der leere Behälter darf keine Klicks abfangen — die einzelnen Toasts
       schalten das für sich wieder ein. */
    pointer-events: none;
}

.rt-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border-left: 4px solid #4e73df;
    box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .2);
    border-radius: .35rem;
    padding: .7rem .9rem;
    color: #3a3b45;
    font-size: .9rem;
    text-decoration: none;
    transform: translateX(120%);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}

.rt-toast.rt-show {
    transform: translateX(0);
    opacity: 1;
}

.rt-toast:hover {
    color: #3a3b45;
    text-decoration: none;
}

.rt-toast-icon {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Wer „reduzierte Bewegung" eingestellt hat, bekommt den Toast ohne Einflug —
   im Original fehlt das. Sichtbar bleibt er genauso lange. */
@media (prefers-reduced-motion: reduce) {
    .rt-toast {
        transition: none;
        transform: none;
    }
}

/* ==========================================================================
   Lesbare Schrift (28.09.2026, Uwe über Peter: «graue Schriften, die man sehr
   schwer erkennen kann»)

   Das Theme SB Admin 2 setzt die Grundschrift auf #858796 — 3,6 : 1 Kontrast zu
   Weiß, unter der Norm für Fließtext (WCAG 4,5 : 1). Nebeninfos sind noch heller
   (#b7b9cc, 1,9 : 1). Peters Entscheidung: Hauptschrift fast schwarz, Nebeninfos
   dunkelgrau — lesbar, aber Inhalt und Zusatz bleiben auf einen Blick getrennt.

     --schrift        #212529  16 : 1   Bootstraps eigene Grundfarbe
     --schrift-neben  #495057  8,2 : 1  erfüllt sogar die strengste Stufe (7 : 1)

   Bewusst NICHT angefasst:
     - Symbole (i, svg) in den hellen Grautönen: Sie sind Schmuck, kein Text.
     - Platzhalter in leeren Feldern: Schwarz sähe aus wie ein eingetragener Wert.
     - Gesperrte Elemente: Dort sagt das Grau «geht gerade nicht».

   Steht hier und nicht in jeder Ansicht: medios.css lädt als letzte Stildatei
   (ReadableTextColorsTest hält das fest). Die Hilfsklassen des Themes tragen
   !important — deshalb hier ebenso.
   ========================================================================== */
:root {
    --schrift: #212529;
    --schrift-neben: #495057;
    /* Farbige Schrift eine Stufe dunkler (29.09.2026, Abschnitt am Ende dieses Blocks). */
    --verweis: #2e59d9;
    --verweis-hover: #224abe;
    --erfolg-schrift: #117a54;
    --info-schrift: #217582;
    --warnung-schrift: #8a6506;
    --gefahr-schrift: #ce2919;
    --code-schrift: #cd186b;
}

body,
caption,
pre,
.table,
.table .thead-light th,
.form-control,
.form-control:focus,
.form-control-plaintext,
.custom-select,
.input-group-text,
.custom-file-label,
.dropdown-menu,
.dropdown-item,
.dropdown-item-text,
.list-group-item-action,
.list-group-item-action:focus,
.list-group-item-action:hover,
.table-hover tbody tr:hover,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.popover-body,
.toast-header {
    color: var(--schrift);
}

.text-body,
.text-dark,
.text-gray-800,
.text-gray-900 {
    color: var(--schrift) !important;
}

.text-muted,
.text-secondary,
.text-gray-600,
.text-gray-700,
.text-gray-500:not(i):not(svg),
.text-gray-400:not(i):not(svg) {
    color: var(--schrift-neben) !important;
}

/* Menü-Überschriften — ohne die Glocken-Menüs der Kopfleiste (.dropdown-list): Deren
   Überschrift ist blau mit weißer Schrift, und diese Regel wöge genauso viel wie die
   des Theme. Ohne das :not() gewänne sie allein durch die spätere Stelle. */
.dropdown-header,
.dropdown .dropdown-menu:not(.dropdown-list) .dropdown-header,
.blockquote-footer,
.figure-caption,
.breadcrumb-item.active {
    color: var(--schrift-neben);
}

/* Stille Umriss-Knöpfe («Abbrechen», «Zurücksetzen»): Schrift und Rahmen dunkler,
   beim Darüberfahren bleibt das Theme (grau hinterlegt, weiße Schrift). */
.btn-outline-secondary:not(:hover):not(:active):not(.active) {
    color: var(--schrift-neben);
    border-color: #6c757d;
}

/* Das helle Hinweisfeld (alert-light): graue Schrift #818183 auf Weiß, 3,9 : 1. */
.alert-light,
.alert-light .alert-link {
    color: var(--schrift-neben);
}

/* Graue Abzeichen und Knöpfe mit weißer Schrift. Das Theme-Grau #858796 trägt Weiß nur
   mit 3,6 : 1 — gefunden vom Kontrast-Messlauf über 57 Seiten, allein 26 Abzeichen auf
   /automatik. Bootstraps eigenes Grau #6c757d schafft 4,7 : 1. Beim Darüberfahren und
   Drücken jeweils eine Stufe DUNKLER, wie im Original — das Theme hätte dort sonst ein
   helleres Grau als im Ruhezustand. */
.badge-secondary {
    background-color: #6c757d;
}

a.badge-secondary:hover,
a.badge-secondary:focus {
    background-color: #545b62;
}

.btn-secondary,
.btn-secondary.disabled,
.btn-secondary:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    background-color: #545b62;
    border-color: #4e555b;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
    background-color: #6c757d;
    border-color: #6c757d;
}

/* ==========================================================================
   Farbige Schrift, Abzeichen und Leisten (29.09.2026, Peter: «ja mach beides»)

   Nach der schwarzen Schrift lagen die FARBIGEN Theme-Töne noch unter 4,5 : 1 —
   als Schrift auf Weiß Grün 2,2, Gelb 1,6, Türkis 2,3, Rot 3,9, Blau 4,3, und als
   weiße Schrift auf grünen Abzeichen 2,2 (die grüne 0 an jedem Symbol oben rechts).

     Schrift        eine Stufe dunkler; gerechnet auf 4,5 : 1 noch auf dem hellsten
                    Theme-Grau #eaecf4, auf Weiß rund 5,3. Blau nimmt den eigenen
                    Darüberfahr-Ton des Theme.
     Helle Flächen  Grün, Gelb, Türkis tragen dunkle Schrift (7,1 / 9,3 / 6,6 : 1) —
                    FEST #212529, weil die Flächen auch im dunklen Modus hell sind.
     Rote Flächen   den Darüberfahr-Ton des Theme (#e02d1b): Weiß 4,6 statt 3,9.
     Dunkler Fuß    .thead-dark etwas dunkler, darin die hellen Farben.
     Seitenleiste   Überschriften und Einträge 90 % Weiß, oben ein tieferes Blau —
                    auf dem hellen Theme-Blau schafft nicht einmal reines Weiß 4,5.
     Kopfleiste     Symbole #5a5c69 (6,6 : 1) statt #d1d3e2 (1,5 : 1).

   Die Schriftfarben stehen als Variablen oben in :root. Der dunkle Modus
   (dark-mode.css) setzt dort die hellen Töne ein, ohne Regeln doppelt zu führen.
   ========================================================================== */
a,
.btn-link,
.page-link {
    color: var(--verweis);
}

a:hover,
.btn-link:hover,
.page-link:hover {
    color: var(--verweis-hover);
}

code {
    color: var(--code-schrift);
}

/* In einem farbigen Hinweis nimmt Code dessen Schrift — Pink auf Hellrot hatte 4,1 : 1. */
.alert code {
    color: inherit;
}

/* Die Farb-Hilfsklassen tragen im Theme !important, ihre Link-Fassung beim
   Darüberfahren ebenso — und dort einen Ton, der im dunklen Modus unlesbar wäre. */
.text-primary {
    color: var(--verweis) !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: var(--verweis-hover) !important;
}

.text-success,
a.text-success:hover,
a.text-success:focus {
    color: var(--erfolg-schrift) !important;
}

.text-info,
a.text-info:hover,
a.text-info:focus {
    color: var(--info-schrift) !important;
}

.text-warning,
a.text-warning:hover,
a.text-warning:focus {
    color: var(--warnung-schrift) !important;
}

.text-danger,
a.text-danger:hover,
a.text-danger:focus {
    color: var(--gefahr-schrift) !important;
}

.invalid-feedback {
    color: var(--gefahr-schrift);
}

/* Umriss-Knöpfe: Schrift in der dunkleren Fassung, der Rahmen bleibt in der Farbe. */
.btn-outline-primary {
    color: var(--verweis);
}

.btn-outline-success {
    color: var(--erfolg-schrift);
}

.btn-outline-info {
    color: var(--info-schrift);
}

.btn-outline-warning {
    color: var(--warnung-schrift);
}

.btn-outline-danger {
    color: var(--gefahr-schrift);
}

/* Helle Flächen (Grün, Gelb, Türkis): dunkle Schrift in jedem Zustand — das Theme
   setzt beim Darüberfahren und Drücken jedes Mal wieder Weiß. */
.badge-success,
.badge-warning,
.badge-info,
a.badge-success:hover,
a.badge-success:focus,
a.badge-warning:hover,
a.badge-warning:focus,
a.badge-info:hover,
a.badge-info:focus,
.btn-success,
.btn-success:hover,
.btn-success.disabled,
.btn-success:disabled,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle,
.btn-warning,
.btn-warning:hover,
.btn-warning.disabled,
.btn-warning:disabled,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle,
.btn-info,
.btn-info:hover,
.btn-info.disabled,
.btn-info:disabled,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle,
.btn-outline-success:hover,
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle,
.btn-outline-warning:hover,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle,
.btn-outline-info:hover,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
    color: #212529;
}

/* Gedrückt nahm das Theme ein noch dunkleres Grün/Türkis (dunkle Schrift 4,4) —
   dort bleibt jetzt der Darüberfahr-Ton (4,9). */
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
    background-color: #17a673;
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
    background-color: #2c9faf;
}

/* Rote Flächen mit weißer Schrift: eine Stufe dunkler, in jedem Zustand. */
.badge-danger {
    background-color: #e02d1b;
}

.bg-danger {
    background-color: #e02d1b !important;
}

.btn-danger,
.btn-danger.disabled,
.btn-danger:disabled,
.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
    background-color: #e02d1b;
    border-color: #e02d1b;
}

.btn-danger:hover {
    background-color: #d52a1a;
    border-color: #ca2819;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
    background-color: #ca2819;
    border-color: #be2617;
}

/* Dunkle Tabellenköpfe und -füße (Lead-Dashboard, Buchungsvergleich) tragen rote
   und grüne Summen. Auf dem Theme-Grau #5a5c69 erreichten die hellen Farben nur
   2,8–3,1 : 1, die dunkleren gar nichts. Also: etwas dunklerer Grund, darin die
   hellen Farben des dunklen Modus (Grün 5,1, Hellrot 4,7, Weiß 11,1). */
.table .thead-dark th {
    background-color: #3a3b45;
    border-color: #4e505c;
}

.bg-dark {
    background-color: #3a3b45 !important;
}

.thead-dark,
.table-dark,
.bg-dark {
    --verweis: #8fa8f2;
    --verweis-hover: #b8c7f7;
    --erfolg-schrift: #1cc88a;
    --info-schrift: #36b9cc;
    --warnung-schrift: #f6c23e;
    --gefahr-schrift: #f28b82;
    --code-schrift: #f38ab8;
}

/* Seitenleiste: Überschriften und Einträge 90 % Weiß. Oben ein etwas tieferes Blau,
   unten bleibt das Theme-Blau — auf #4e73df schaffte nicht einmal reines Weiß 4,5. */
.sidebar.bg-gradient-primary {
    background-color: #3e63d2;
    background-image: linear-gradient(180deg, #3e63d2 10%, #224abe 100%);
}

.sidebar-dark .sidebar-heading,
.sidebar-dark .nav-item .nav-link {
    color: rgba(255, 255, 255, .9);
}

/* Der aktive Eintrag im aufgeklappten Ordner (weißer Kasten) hat eine eigene
   Theme-Regel mit dem hellen Blau (4,3 : 1). */
.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
    color: var(--verweis);
}

/* Kopfleiste: die Symbole oben rechts (Glocke, Brief, Buchungen …). */
.topbar.navbar-light .navbar-nav .nav-item .nav-link {
    color: #5a5c69;
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
    color: #3a3b45;
}

.topbar.navbar-light .navbar-nav .nav-item .nav-link:active {
    color: #212529;
}

/* --------------------------------------------------------------------------
 * Hauptstatistik: Jahreskopf gelb, Summenzeile grau. Stand vorher als
 * style-Attribut in der Ansicht — als Klasse, damit der dunkle Modus sie
 * umfärben kann (28.09.2026). Im hellen Modus unverändert.
 * -------------------------------------------------------------------------- */
.statistik-jahreskopf {
    background-color: #fffc9e;
}

.statistik-summe {
    background-color: #f0f0f0;
}