/* ==========================================================================
   1. Allgemeine Body- und HTML-Styles
   ========================================================================== */
body {
    /* padding-top: für die fixed-top Navbar.
       Der Wert (z.B. 56px oder 70px) hängt von der tatsächlichen Höhe Ihrer Navbar ab.
       Ihr aktueller Wert ist 70px, was mehr Platz lässt. */
    padding-top: 50px;
    background-color: var(--bs-body-bg); /* Standard-Hintergrund von Bootstrap */
    color: var(--bs-body-color);      /* Standard-Textfarbe von Bootstrap */
    transition: background-color 0.3s ease, color 0.3s ease; /* Sanfter Übergang für Theme-Wechsel */
}

/* ==========================================================================
   2. Navbar Styling
   ========================================================================== */
.navbar {
    /* margin-bottom: 1rem; */ /* Normalerweise nicht nötig bei fixed-top */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Leichter Schatten für die Navbar */
}

.navbar-brand-logo {
    height: 1.8em; /* Etwas größer für bessere Sichtbarkeit */
    width: auto;
    vertical-align: middle; /* Bessere Ausrichtung mit Text */
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
}

/* Icon-basierte Navigation mit Text darunter (me-auto Teil) */
.navbar-nav .nav-link {
    padding-top: 0.4rem;
    padding-bottom: 0.2rem;
}

.navbar-nav .nav-link .bi {
    font-size: 1.5rem;
    margin-bottom: 0;
    line-height: 1;
    display: block;
}

.nav-link-text {
    font-size: 0.65rem;
    line-height: 1.1;
    display: block;
    margin-top: 2px;
    letter-spacing: 0.05em;
}

.navbar-nav .nav-link.active .nav-link-text {
    font-weight: 500;
}

/* Rechte Navbar-Elemente (ms-auto Teil) - für saubere horizontale Ausrichtung */
.navbar-nav.ms-auto {
    align-items: center; /* Bootstrap Standard, hier zur Bestätigung */
}

.navbar-nav.ms-auto .nav-item { /* Gilt für alle <li> im rechten Teil */
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-nav.ms-auto .rank-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.5rem; /* Etwas Padding für die Optik */
    color: #f8f9fa; /* Heller Text auf dunkler Navbar */
}

.navbar-nav.ms-auto .rank-info .rank-title-sm {
    font-size: 0.65rem; /* Kleinere Schrift */
    line-height: 1;
    font-weight: normal;
}

.navbar-nav.ms-auto .rank-info .rank-progress-sm {
    height: 5px !important;
    width: 80px !important; /* Etwas schmaler */
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.navbar-nav.ms-auto .rank-info .next-rank-sm {
    font-size: 0.55rem; /* Sehr klein */
    line-height: 1;
    color: #adb5bd;
}

.navbar-nav.ms-auto .nav-link,
.navbar-nav.ms-auto .btn { /* Gilt für Theme-Button und User-Dropdown-Link */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex; /* Hilft bei der Zentrierung von Icons im Button/Link */
    align-items: center;
}

/* ==========================================================================
   3. Progress-Container-Wrapper (unter der Navbar)
   ========================================================================== */
.progress-container-wrapper {
    background-color: var(--bs-tertiary-bg); /* Hellerer Hintergrund im Light-Mode */
    color: var(--bs-emphasis-color);      /* Dunklerer Text für guten Kontrast */
    padding: 10px 0;
    /* margin-top: 56px; Entfernt, da body.padding-top den Raum schafft */
    border-bottom: 1px solid var(--bs-border-color);
}

.progress-container-wrapper .rank-progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.8rem;
}

.progress-container-wrapper .rank-progress-info strong {
    color: var(--bs-body-color); /* Standard-Textfarbe für hervorgehobenen Text */
}

.progress-container-wrapper .next-rank-display {
    font-size: 0.75rem;
    text-align: right;
    margin-top: 3px;
    color: var(--bs-secondary-color); /* Gedämpfte Farbe */
}

/* ==========================================================================
   4. Hauptinhaltsbereiche
   ========================================================================== */
.main-content {
    /* Der Abstand zum darüberliegenden Element (Navbar oder Progress-Container)
       wird oft durch Bootstrap Margins (z.B. .mt-4 auf dem Container) oder
       durch den Fluss des Dokuments nach dem body-padding-top geregelt.
       Falls der .progress-container-wrapper immer da ist, wenn User eingeloggt: */
}
body:not(:has(.progress-container-wrapper)) .main-content {
    /* Falls der Progress-Container fehlt (z.B. Gast), braucht der main-content
       eventuell einen direkten Abstand zum (nicht sichtbaren) body-padding-top Bereich.
       Dies ist komplexer und hängt davon ab, ob .progress-container-wrapper im PHP
       immer einen Platzhalter einnimmt oder komplett fehlt.
       Einfacher ist es, wenn der .main-content Container in PHP immer ein mt-4 hat. */
}

.verse-container {
    line-height: 1.8;
    text-align: justify;
}

.verse-num {
    font-size: 0.7em;
    font-weight: bold;
    color: #888; /* Wird im Dark Mode überschrieben */
    vertical-align: super;
    margin-right: 2px;
}

.verse {
    cursor: pointer;
    padding: 3px 2px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.verse:hover {
    background-color: var(--bs-tertiary-bg-subtle); /* Sanfter Hover mit BS Variable */
}

.user-important-star {
    color: #ffc107;
    font-size: 0.8em;
    margin-right: 3px;
    vertical-align: super;
}

/* ==========================================================================
   5. Komponenten-Styling
   ========================================================================== */

/* Farbauswahl im Modal (ehemals Popover-Color-Picker) */
.popover-color-picker { /* Behalten wir den Klassennamen für Konsistenz */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 5px;
}

.popover-color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 5px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-height: 75px;
}

.popover-color-item:hover {
    background-color: var(--bs-secondary-bg-subtle);
}

.popover-color-item .popover-color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 25%;
    margin-bottom: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.popover-color-item .popover-color-name {
    font-size: 14px;
    text-align: center;
    line-height: 1.3;
    color: var(--bs-body-color); /* Passt sich Hell-/Dunkelmodus an */
}

.popover-color-item .remove-color-swatch {
    background-color: var(--bs-tertiary-bg);
    background-image: linear-gradient(135deg, #dc3545 45%, transparent 45%, transparent 55%, #dc3545 55%, #dc3545 60%, transparent 60%);
    background-size: 8px 8px;
}

/* Highscore-Tabelle */
.highscore-table {
    /* Allgemeine Stile für die Highscore-Tabelle hier, falls nötig */
}
.highscore-table thead th {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
    border-bottom-width: 2px;
    white-space: nowrap;
}
.highscore-table tbody tr:nth-of-type(odd) {
    background-color: var(--bs-secondary-bg-subtle);
}
.highscore-table tbody tr:hover {
    background-color: var(--bs-primary-bg-subtle);
}
.highscore-table .badge {
    min-width: 100px;
    text-align: center;
    font-size: 0.8rem; /* Badge Schriftgröße etwas angepasst */
    padding: 0.3em 0.6em; /* Badge Padding */
}
.highscore-table tr.current-user-highlight {
    background-color: var(--bs-info-bg-subtle) !important;
    font-weight: bold;
}
.highscore-table tr.current-user-highlight td,
.highscore-table tr.current-user-highlight th {
    color: var(--bs-info-text-emphasis);
}

/* Status-Seite Kacheln */
.book-status-compact-item {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
    display: block;
}
.book-status-compact-item:hover {
    background-color: var(--bs-tertiary-bg);
    transform: translateY(-2px);
}
.book-status-compact-item .book-name {
    font-size: 0.8rem;
    font-weight: 500;
}
.book-status-compact-item .book-stats {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
}
.book-status-compact-item .book-status-tiny-progress {
    background-color: var(--bs-light-bg-subtle);
    border-radius: var(--bs-progress-border-radius);
}

/* Pinsel-Modus Button */
#brush-mode-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    z-index: 1030;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 0;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
    border: 1px solid var(--bs-border-color);
}
#brush-mode-toggle.btn-primary { /* Bootstrap Primary wird per JS gesetzt */
    background-color: var(--bs-primary);
    color: var(--bs-light); /* Oder spezifische Kontrastfarbe für Primary */
    border-color: var(--bs-primary);
}

/* Toast-Benachrichtigungen */
/* Standard Bootstrap Toasts sind meist ok, hier nur falls spezifische Overrides nötig */


/* ==========================================================================
   6. Globale Farbmarkierungs-Klassen (.bg-*-custom) - Hell-Modus
   ========================================================================== */
============================================================
--- Globale Farbdefinitionen für Markierungen (Hell-Modus) ---
============================================================
*/
/* Diese Klassen gelten jetzt allgemein, nicht nur für .verse */

.bg-warning { /* Wichtig (Gelb) - Bootstrap Standard, hier ggf. leicht angepasst für Konsistenz */
    background-color: #ffe082 !important; 
    color: #000 !important;
}
.bg-green-custom { /* Verheißung (Grün) */
    background-color: #a5d6a7 !important; 
    color: #000 !important;
}
.bg-blue-custom { /* Gebot (Blau) */
    background-color: #90caf9 !important; 
    color: #000 !important;
}
.bg-red-custom { /* Sünde/Warnung (Rot) */
    background-color: #ef9a9a !important; 
    color: #000 !important;
}
.bg-orange-custom { /* Prophetie (Orange) */
    background-color: #ffcc80 !important; 
    color: #000 !important;
}
.bg-brown-custom { /* Geschichte (Braun) */
    background-color: #d2b48c !important; 
    color: #000 !important;
}
.bg-gray-custom { /* Unklar (Grau) */
    background-color: #d6d8db !important; 
    color: #000 !important;
}
.bg-parable-custom { /* Gleichnis (Türkis/Mint) */
    background-color: #a0e6d7 !important;
    color: #000 !important;
}
.bg-rebuke-custom { /* Zurechtweisung (Lavendel) */
    background-color: #d1c4e9 !important;
    color: #000 !important;
}
.bg-name-custom { /* Namen (Olivgrün) */
    background-color: #e6ee9c !important; 
    color: #000 !important;
}
.bg-sanctification-custom { /* Heiligung (Rosé) */
    background-color: #f8bbd0 !important;
    color: #000 !important;
}
.bg-miracle-custom { /* Wunder (Goldgelb) */
    background-color: #fff59d !important; 
    color: #000 !important;
}
.bg-gods-work-custom { /* Gottes Wirken (Himmelblau) */
    background-color: #81d4fa !important;
    color: #000 !important;
}
.bg-law-custom { /* Gesetz (Schiefergrau) */
    background-color: #b0bec5 !important;
    color: #000 !important;
}
.bg-wisdom-custom { /* Weisheit/Lehre (Flieder) */
    background-color: #c5cae9 !important;
    color: #000 !important;
}
.bg-worship-custom { /* Anbetung/Lobpreis (Pfirsich) */
    background-color: #ffccbc !important;
    color: #000 !important;
}
.bg-covenant-custom { /* Bund (Weinrot-Hell) */
    background-color: #ef9a9a !important; /* Ggf. anpassen, falls zu ähnlich zu Rot */
    color: #000 !important;
}

/*
=====================================================================================
--- Globale Farbdefinitionen für Markierungen (Dunkelmodus) ---
=====================================================================================
*/
body.dark-mode .bg-warning { 
    background-color: #856404 !important; 
    color: #e0e0e0 !important;      
}
body.dark-mode .bg-green-custom { 
    background-color: #155724 !important; 
    color: #e0e0e0 !important;      
}
body.dark-mode .bg-blue-custom { 
    background-color: #004085 !important; 
    color: #e0e0e0 !important;      
}
body.dark-mode .bg-red-custom { 
    background-color: #721c24 !important; 
    color: #e0e0e0 !important;      
}
body.dark-mode .bg-orange-custom { 
    background-color: #b95000 !important; 
    color: #e0e0e0 !important;      
}
body.dark-mode .bg-brown-custom { 
    background-color: #8b4513 !important; 
    color: #e0e0e0 !important;      
}
body.dark-mode .bg-gray-custom { 
    background-color: #495057 !important; 
    color: #e0e0e0 !important;      
}
body.dark-mode .bg-parable-custom { 
    background-color: #00796b !important;
    color: #e0e0e0 !important;
}
body.dark-mode .bg-rebuke-custom { 
    background-color: #5e35b1 !important; 
    color: #e0e0e0 !important;
}
body.dark-mode .bg-name-custom { 
    background-color: #556b2f !important; 
    color: #e0e0e0 !important;
}
body.dark-mode .bg-sanctification-custom { 
    background-color: #c2185b !important;
    color: #e0e0e0 !important;
}
body.dark-mode .bg-miracle-custom { 
    background-color: #bba000 !important; 
    color: #e0e0e0 !important;
}
body.dark-mode .bg-gods-work-custom { 
    background-color: #0277bd !important;
    color: #e0e0e0 !important;
}
body.dark-mode .bg-law-custom { 
    background-color: #37474f !important;
    color: #e0e0e0 !important;
}
body.dark-mode .bg-wisdom-custom { 
    background-color: #4527a0 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .bg-worship-custom { 
    background-color: #d84315 !important;
    color: #e0e0e0 !important;
}
body.dark-mode .bg-covenant-custom { 
    background-color: #880e4f !important;
    color: #e0e0e0 !important;
}




/* ==========================================================================
   7. Dark Mode
   ========================================================================== */
body.dark-mode {
    background-color: #212529; /* Dunklerer Haupt-Hintergrund */
    color: #dee2e6;        /* Hellere Standard-Schrift */
}

body.dark-mode .card,
body.dark-mode .bg-light { /* .bg-light ist oft ein Standard für helle Boxen */
    background-color: #2c3034 !important; /* Dunklerer Kartenhintergrund */
    border-color: #454d55;
    color: #dee2e6;
}

body.dark-mode .list-group-item {
    background-color: #2c3034;
    border-color: #454d55;
    color: #dee2e6;
}

body.dark-mode a {
    color: #8ab4f8; /* Helleres Blau für Links */
}
body.dark-mode a:hover {
    color: #a9c7f5;
}

body.dark-mode .navbar.bg-dark { /* Ihre Navbar ist navbar-dark bg-dark */
    background-color: #1a1a1a !important; /* Sehr dunkel für die Navbar */
    border-bottom: 1px solid #333;
}
body.dark-mode .navbar-brand,
body.dark-mode .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
}
body.dark-mode .navbar-nav .nav-link:hover,
body.dark-mode .navbar-nav .nav-link.active {
    color: #fff;
}
body.dark-mode .navbar-nav.ms-auto .rank-info {
    color: #adb5bd;
}
body.dark-mode .navbar-nav.ms-auto .rank-info .next-rank-sm {
    color: #868e96;
}
body.dark-mode .navbar-nav.ms-auto .rank-info .progress {
    background-color: #444;
}

body.dark-mode .progress-container-wrapper {
    background-color: #212529;
    color: #dee2e6;
    border-bottom: 1px solid #373b3e;
}
body.dark-mode .progress-container-wrapper .rank-progress-info strong {
    color: #f8f9fa;
}
body.dark-mode .progress-container-wrapper .next-rank-display {
    color: var(--bs-gray-600); /* Bootstrap Variable für dunkles Grau */
}

body.dark-mode .verse-num {
    color: #999; /* Helleres Grau für Versnummern */
}
body.dark-mode .verse:hover {
    background-color: #303030; /* Dunklerer Hover für Verse */
}
body.dark-mode .user-important-star {
    color: #f0ad4e;
}

body.dark-mode .modal-content {
    background-color: #2c3034; /* Konsistenter dunkler Hintergrund für Modals */
    color: #dee2e6;
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: #454d55;
}
body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(150%); /* Hellerer Schließen-Button */
}

/* Farbauswahl im Modal - Dark Mode */
body.dark-mode .popover-color-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .popover-color-item .popover-color-name {
    color: #e0e0e0;
}
body.dark-mode .popover-color-item .remove-color-swatch {
    background-color: #495057;
}

/* Highscore Tabelle - Dark Mode */
body.dark-mode .highscore-table {
    --bs-table-color: #dee2e6;
    --bs-table-border-color: #373b3e;
    --bs-table-striped-bg: #2c3034;
    --bs-table-bg: #272b2f;
    --bs-table-hover-bg: #343a40;
    --bs-table-hover-color: #ffffff;
}
body.dark-mode .highscore-table thead th {
    background-color: #212529 !important;
    color: #f0f0f0 !important;
    border-color: #373b3e !important;
}
body.dark-mode .highscore-table td,
body.dark-mode .highscore-table th {
    color: #dee2e6 !important; /* Stellt sicher, dass aller Text hell ist */
}
body.dark-mode .highscore-table tr.current-user-highlight {
    background-color: #033c73 !important;
}
body.dark-mode .highscore-table tr.current-user-highlight td,
body.dark-mode .highscore-table tr.current-user-highlight th {
    color: #afeeff !important;
}
body.dark-mode .highscore-table .bi-person-circle { color: #adb5bd !important; }
body.dark-mode .highscore-table .bi-trophy-fill.text-warning { color: #ffc107 !important; }
body.dark-mode .highscore-table .bi-trophy-fill.text-secondary { color: #b0b0b0 !important; }
body.dark-mode .highscore-table .bi-trophy-fill.text-danger-emphasis { color: #d98f54 !important; }

body.dark-mode .highscore-table .badge.bg-light {
    background-color: #495057 !important;
    color: #f8f9fa !important;
}
body.dark-mode .highscore-table .badge.bg-secondary { /* Bootstrap .bg-secondary ist im Dark Mode oft schon gut */
    background-color: #5a6268 !important; /* Beispiel, falls nötig */
    color: #fff !important;
}
/* Weitere .bg-* Badge Anpassungen für Dark Mode hier, falls Ihre globalen Regeln nicht ausreichen */


/* Status Seite Kacheln - Dark Mode */
body.dark-mode .book-status-compact-item {
    background-color: #2c3034;
    color: #dee2e6;
    border-color: #454d55 !important;
}
body.dark-mode .book-status-compact-item:hover {
    background-color: #343a40;
}
body.dark-mode .book-status-compact-item .book-name {
    color: #f8f9fa;
}
body.dark-mode .book-status-compact-item .book-stats {
    color: #adb5bd;
}
body.dark-mode .book-status-compact-item .book-status-tiny-progress {
    background-color: #212529;
}

/* Pinsel-Modus Button - Dark Mode */
body.dark-mode #brush-mode-toggle {
    background-color: #495057;
    color: #f8f9fa;
    border-color: #343a40;
}
body.dark-mode #brush-mode-toggle.btn-primary { /* Aktiver Zustand */
    background-color: var(--bs-primary); /* Nutzt Bootstrap's Primary */
    color: #fff;
    border-color: var(--bs-primary);
}

/* Toast - Dark Mode */
body.dark-mode .toast {
    background-color: #2c3034; /* Toast Hintergrund */
    color: #dee2e6;          /* Toast Text */
    border-color: #454d55;
}
body.dark-mode .toast-header {
    background-color: #343a40; /* Header des Toasts */
    color: #f8f9fa;
    border-bottom-color: #454d55;
}
body.dark-mode .toast-header .btn-close { /* Schließen-Button im Toast */
    filter: invert(1) grayscale(100%) brightness(150%);
}
body.dark-mode .toast-body {
    /* Textfarbe wird von .toast geerbt, Hintergrund auch, außer bei spezifischem Styling */
}

/* Globale Farbmarkierungs-Klassen (.bg-*-custom) - Dark Mode */
/* Ihre .bg-*-custom Dark Mode Definitionen von oben hier einfügen, z.B.: */
body.dark-mode .bg-warning { background-color: #856404 !important; color: #e0e0e0 !important; }
body.dark-mode .bg-green-custom { background-color: #155724 !important; color: #e0e0e0 !important; }
/* ... ALLE ANDEREN FARBEN ... */
body.dark-mode .bg-covenant-custom { background-color: #880e4f !important; color: #e0e0e0 !important; }


/* ==========================================================================
   8. Media Queries (spezifisch für mobile Navbar, falls noch nicht global abgedeckt)
   ========================================================================== */
@media (max-width: 991.98px) { /* Bootstrap lg breakpoint für eingeklappte Navbar */
    .navbar-collapse ul.navbar-nav.me-auto {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        padding-top: 0.5rem;
    }
    .navbar-collapse ul.navbar-nav.me-auto .nav-item {
        margin: 5px;
    }
    .navbar-collapse ul.navbar-nav.me-auto .nav-link {
        padding: 0.3rem 0.4rem;
    }
    .navbar-collapse ul.navbar-nav.me-auto .nav-link .bi {
        font-size: 1.3rem;
        margin-bottom: 1px;
    }
    .navbar-collapse ul.navbar-nav.me-auto .nav-link .nav-link-text {
        font-size: 0.55rem;
        line-height: 1;
    }

    /* Rechte Elemente in der mobilen Navbar (Theme, User) untereinander zentrieren */
    .navbar-collapse ul.navbar-nav.ms-auto {
        width: 100%;
        align-items: center; /* Zentriert die Listenelemente selbst */
    }
    .navbar-collapse ul.navbar-nav.ms-auto .nav-item {
        width: auto; /* Erlaubt den Elementen, ihre natürliche Breite einzunehmen */
        margin-top: 0.5rem;
    }
    .navbar-collapse ul.navbar-nav.ms-auto .dropdown-menu {
        /* Stellt sicher, dass das Dropdown im mobilen Menü korrekt positioniert ist */
        position: static !important; /* Verhindert absolute Positionierung */
        float: none !important;
        width: auto !important;
        margin-top: 0 !important;
        background-color: transparent !important; /* Hintergrund der Navbar nutzen */
        border: 0 !important;
        box-shadow: none !important;
    }
    .navbar-collapse ul.navbar-nav.ms-auto .dropdown-menu .dropdown-item {
        padding-left: 1rem; /* Einrücken für bessere Lesbarkeit */
        color: rgba(255, 255, 255, 0.85); /* Farbe anpassen */
    }
    body.dark-mode .navbar-collapse ul.navbar-nav.ms-auto .dropdown-menu .dropdown-item {
        color: rgba(255, 255, 255, 0.85);
    }
    body.dark-mode .navbar-collapse ul.navbar-nav.ms-auto .dropdown-menu .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

}

/* Hilfsklasse für Text, der nur für Screenreader sichtbar sein soll */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* styles.css */
body.dark-mode .text-muted {
    color: #8ab4f8 !important; /* Sanftes Hellblau für gedämpften Text */
}