:root {
    --susy-primary: #ed1c29;
    --susy-primary-dark: #c81622;
    --susy-primary-light: #fdeaec;
}

a {
    color: var(--susy-primary-dark);
}

a:hover {
    color: #a01118;
}

/* Navigation: Markenrot, Schrift reinweiß ohne Deckkraft-Abstufung */
.susy-navbar {
    background-color: var(--susy-primary);
    border-bottom: 3px solid var(--susy-primary-dark);
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.4);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.susy-navbar .navbar-brand i {
    color: #fff;
}

/* Trennstrich zwischen dem Konfigurations-Zahnrad und dem Benutzermenü (Wunsch 2026-09-09) */
.susy-navbar .susy-nav-divider {
    display: inline-block;
    width: 1px;
    height: 1.4rem;
    margin: 0 0.6rem;
    background-color: rgba(255, 255, 255, 0.45);
}

.susy-navbar .text-secondary {
    color: #fff !important;
}

/* Bootstrap gibt .navbar-text nur Padding; als Inline-Element wirkt das nicht
   auf die vertikale Position – daher stand der Benutzername zu hoch */
.susy-navbar .navbar-text {
    display: inline-block;
}

/* Schaltflächen: immer nur eine Farbe (Primärfarbe) */
.btn-primary-brand {
    background-color: var(--susy-primary);
    border-color: var(--susy-primary);
    color: #fff;
}

.btn-primary-brand:hover,
.btn-primary-brand:focus,
.btn-primary-brand:active {
    background-color: var(--susy-primary-dark);
    border-color: var(--susy-primary-dark);
    color: #fff;
}

.card-header {
    background-color: #f8f9fa;
    font-weight: 600;
}

.card-header i {
    color: var(--susy-primary);
}

/* Icons IN Badges (Dashboard-Reihe Ubuntu/TYPO3/Docker: rotes Badge mit weißer Schrift) übernehmen die
   Badge-Textfarbe statt der Markenfarbe – sonst rotes Symbol auf rotem Grund (Nutzerhinweis 2026-09-08) */
.card-header .badge i {
    color: inherit;
}

/* Badges für Umgebungen */
.susy-env-prod {
    background-color: var(--susy-primary);
}

.susy-env-dev {
    background-color: #6c757d;
}

.susy-env-test {
    background-color: #495057;
}

.susy-env-kopie {
    background-color: #5c7cfa;
}

/* Tabellen-Werkzeuge: suchen, sortieren, filtern (.susy-datatable) */
.susy-table-search {
    max-width: 230px;
}

.susy-table-toolbar .susy-table-filter {
    width: auto;
    max-width: 230px;
}

.susy-table-colsearch th {
    background: transparent;
    border-top: 0;
}

.susy-table-colsearch input {
    min-width: 5.5rem;
    font-size: 0.8rem;
}

th.susy-table-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.susy-table-sortable::after {
    content: "⇅";
    opacity: 0.35;
    margin-left: 0.35rem;
    font-size: 0.75em;
}

th.susy-table-sortable.susy-sort-asc::after {
    content: "↑";
    opacity: 1;
}

th.susy-table-sortable.susy-sort-desc::after {
    content: "↓";
    opacity: 1;
}

.susy-env-alt {
    background-color: #795548;
}

/* Seite „Entwicklung“: Verlaufsdiagramm und Veränderungsspalten (dieselben SVGs wie im PDF) */
.susy-trend-chart svg {
    width: 100%;
    height: auto;
}

.susy-trend-spark svg {
    vertical-align: middle;
}

.delta-worse {
    color: #d03b3b;
}

.delta-better {
    color: #198754;
}

.delta-same {
    color: var(--bs-secondary-color);
}

/* Projektstatus (dieselben vier Werte wie im Amt-Projekttool) */
.susy-project-status {
    color: #fff;
}

.susy-project-geplant {
    background-color: #6c757d;
}

.susy-project-laufend {
    background-color: #198754;
}

.susy-project-pausiert {
    background-color: #b8860b;
}

.susy-project-abgeschlossen {
    background-color: #495057;
}

/* Dashboard-Kalender */
.susy-calendar {
    table-layout: fixed;
}

.susy-calendar td {
    height: 95px;
    width: 14.28%;
    vertical-align: top;
    padding: 4px;
}

.susy-cal-daynum {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 2px;
}

.susy-cal-out {
    background-color: #f8f9fa;
}

.susy-cal-out .susy-cal-daynum {
    color: #ced4da;
}

.susy-cal-today {
    box-shadow: inset 0 0 0 2px var(--susy-primary);
}

.susy-cal-today .susy-cal-daynum {
    color: var(--susy-primary);
}

.susy-cal-badge {
    display: block;
    background-color: var(--susy-primary-light);
    color: #a01118;
    border-left: 3px solid var(--susy-primary);
    border-radius: 2px;
    font-size: 0.72rem;
    line-height: 1.4;
    padding: 0 4px;
    margin-bottom: 2px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.susy-cal-badge:hover {
    background-color: var(--susy-primary);
    color: #fff;
}

/* Warnlisten auf dem Dashboard */
.susy-warn-list .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Einklappbare Dashboard-Boxen: Kopf klickbar, Chevron dreht beim Ausklappen */
.susy-collapse-toggle {
    cursor: pointer;
}

.susy-collapse-icon {
    transition: transform 0.2s;
    color: #6c757d;
}

.susy-collapse-toggle[aria-expanded="true"] .susy-collapse-icon {
    transform: rotate(180deg);
}

/* Drag-and-Drop-Zone im Logbuch */
.susy-dropzone {
    border: 2px dashed #ced4da;
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    color: #6c757d;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.susy-dropzone.dragover {
    border-color: var(--susy-primary);
    background-color: var(--susy-primary-light);
}

/* Scrollbare Checkbox-Liste (IP-Adressen am Server) */
.susy-scroll-box {
    max-height: 220px;
    overflow-y: auto;
}

/* Logbuch-Kommentare, Projektbeschreibungen (Klartext) */
.susy-doc {
    white-space: pre-wrap;
}

/* Entwicklerdokumentation / Handbuch / Logbuch (gerendertes Markdown) */
.susy-richtext img {
    max-width: 100%;
    height: auto;
}

.susy-richtext table {
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.susy-richtext table td,
.susy-richtext table th {
    border: 1px solid #dee2e6;
    padding: 4px 8px;
}

.susy-richtext blockquote {
    border-left: 4px solid #dee2e6;
    padding-left: 12px;
    color: #6c757d;
}

/* Logbuch */
.susy-log-entry .card-header {
    font-weight: normal;
    font-size: 0.85rem;
}

/* Anmeldeseite */
.susy-login-page {
    /* Hintergrundbild: am <body> des Login-Layouts gesetzt (Konfiguration -> Anmeldeseite,
       LoginImageService); die Farbe greift, solange das Bild nicht geladen ist */
    background-color: #0a0f18;
    background-size: cover;
    background-position: center 40%;   /* etwas nach oben: bei 16:9-Fenstern bleibt der Bildinhalt oben vollständig */
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.susy-login-card .card {
    /* auf dem dunklen Bild soll die Karte klar abgesetzt stehen */
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.55) !important;
}

.susy-login-page::after {
    /* Dunkler Schleier über dem Foto: außen kräftiger, in der Mitte zurückhaltend — die weiße
       Anmeldekarte steht kontrastreich darauf, das Motiv bleibt hell (2026-09-10 zurückgenommen,
       weil das gelieferte Bild ausdrücklich heller sein sollte; Karte trägt einen kräftigen Schatten) */
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(4, 8, 16, 0.20) 0%,
        rgba(4, 8, 16, 0.10) 42%,
        rgba(4, 8, 16, 0.42) 100%);
    pointer-events: none;
}

.susy-login-card {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1;
}

.susy-login-card .card-header {
    background-color: var(--susy-primary);
    color: #fff;
}

.susy-login-card .card-header i {
    color: #fff;
}

/* Vorschaubilder der Anmeldeseite (Konfiguration -> Anmeldeseite) */
.susy-login-thumb {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background-color: #0a0f18;
}

/* Zeitstrahl der Cron-Läufe (Webanwendung, Webprojekt) */
.susy-cron-timeline-wrap {
    overflow-x: auto;
}

.susy-cron-timeline {
    min-width: 640px;
}

.susy-cron-key {
    display: inline-block;
    width: 1.1rem;
    height: 0.7rem;
    border-radius: 2px;
    margin-right: 0.35rem;
    vertical-align: middle;
}

.susy-cron-key-normal { background-color: #3d7dc4; }
.susy-cron-key-long { background-color: #d03b3b; }
.susy-cron-key-open { background-color: #e0a800; }
.susy-cron-key-failed { background-color: #6f1d1d; }

/* Netzplan (Graph-Übersicht) */
#susy-graph {
    width: 100%;
    height: calc(100vh - 225px);
    min-height: 600px;
}

/* Webanwendungs-Boxen unter dem Suche-Diagramm — Optik wie die
   Canvas-Kästchen: farbige Kopfzeile, Rahmen in der Typfarbe */
.susy-app-box {
    display: inline-flex;
    flex-direction: column;
    border: 2px solid #ed1c29;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.susy-app-box:hover {
    box-shadow: 0 0 0 2px rgba(237, 28, 41, 0.25);
    color: inherit;
}
.susy-app-box-head {
    background-color: #ed1c29;
    color: #fff;
    font-size: 0.72rem;
    font-style: italic;
    padding: 1px 10px;
    text-align: center;
}

/* Skript-Kästchen unter dem Suche-Diagramm: gleiche Form wie die Webanwendungen, eigene Kopffarbe (Netzplan-Typfarbe) */
.susy-script-box .susy-app-box-head {
    background-color: #2a9d8f;
}

.susy-app-box-body {
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.susy-graph-detail {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 360px;
    max-width: calc(100% - 2rem);
    max-height: calc(100% - 2rem);
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.susy-graph-detail-th {
    width: 40%;
}

.susy-graph-conn {
    cursor: pointer;
}

.susy-graph-conn:hover {
    background-color: #f8f9fa;
}

.susy-graph-toggle {
    border: none;
    background: #f1f3f5;
    border-radius: 50rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.susy-graph-toggle:hover {
    background: #e9ecef;
}

.susy-graph-toggle-off {
    opacity: 0.45;
    text-decoration: line-through;
}

.susy-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Markdown: Quelltext-Ansicht und Editor */
.susy-md-pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.875rem;
    margin-bottom: 0;
}

.susy-md-field .toastui-editor-defaultUI {
    border-color: #ced4da;
}

[data-md-toggle].active {
    background-color: #6c757d;
    color: #fff;
}

/* Dunkle Darstellung (per Umschalter in der Navbar, gespeichert im Browser;
   bewusst NICHT an prefers-color-scheme des Betriebssystems gekoppelt) */
/* Helle Linkfarbe nur für Textlinks – Schaltflächen (auch <a class="btn">)
   behalten ihre eigene Schriftfarbe (Markenrot-Buttons: reinweiß) */
[data-bs-theme="dark"] main a:not(.btn) {
    color: #f0868d;
}

[data-bs-theme="dark"] main a:not(.btn):hover {
    color: #f5a9ae;
}

[data-bs-theme="dark"] main a.susy-app-box,
[data-bs-theme="dark"] main a.susy-app-box:hover {
    color: inherit;
}

[data-bs-theme="dark"] .btn-primary-brand {
    color: #fff;
}

/* Menüleiste bleibt auch im dunklen Modus reinweiß ohne Deckkraft-Abstufung */
[data-bs-theme="dark"] .susy-navbar .navbar-brand,
[data-bs-theme="dark"] .susy-navbar .navbar-nav .nav-link,
[data-bs-theme="dark"] .susy-navbar .navbar-text {
    color: #fff;
}

[data-bs-theme="dark"] .susy-navbar .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .card-header {
    background-color: #2b3035;
}

/* Graue Umriss-Buttons (Zeilen-Icons in den Listen, Abbrechen-Knöpfe)
   sind auf dunklem Grund kaum erkennbar – im Dunkelmodus weiß darstellen */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #dee2e6;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #dee2e6;
    --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #dee2e6;
    --bs-btn-active-border-color: #dee2e6;
    --bs-btn-disabled-color: #adb5bd;
    --bs-btn-disabled-border-color: #adb5bd;
}

.susy-theme-toggle {
    background: none;
    border: 0;
}

[data-bs-theme="dark"] .susy-cal-out {
    background-color: #2b3035;
}

[data-bs-theme="dark"] .susy-cal-out .susy-cal-daynum {
    color: #495057;
}

[data-bs-theme="dark"] .susy-cal-daynum {
    color: #adb5bd;
}

[data-bs-theme="dark"] .susy-cal-badge {
    background-color: #48191d;
    color: #f0868d;
}

[data-bs-theme="dark"] .susy-cal-badge:hover {
    background-color: var(--susy-primary);
    color: #fff;
}

[data-bs-theme="dark"] .susy-dropzone {
    border-color: #495057;
    color: #adb5bd;
}

[data-bs-theme="dark"] .susy-dropzone.dragover {
    border-color: var(--susy-primary);
    background-color: #48191d;
}

[data-bs-theme="dark"] .susy-richtext table td,
[data-bs-theme="dark"] .susy-richtext table th {
    border-color: #495057;
}

[data-bs-theme="dark"] .susy-richtext blockquote {
    border-left-color: #495057;
    color: #adb5bd;
}

[data-bs-theme="dark"] .susy-md-pre {
    background-color: #2b3035;
    border-color: #495057;
}

[data-bs-theme="dark"] .susy-graph-detail {
    background: #212529;
    border-color: rgba(255, 255, 255, 0.18);
}

[data-bs-theme="dark"] .susy-graph-conn:hover {
    background-color: #2b3035;
}

[data-bs-theme="dark"] .susy-graph-toggle {
    background: #343a40;
    color: #dee2e6;
}

[data-bs-theme="dark"] .susy-graph-toggle:hover {
    background: #3d444b;
}

[data-bs-theme="dark"] .susy-login-page {
    background-color: #1a1d20;
}

/* Suchbox in der Menüleiste */
/* Suchbox: schmal, damit „Suchen…“ gerade lesbar ist; beim Hineinklicken wird sie breit
   (Wunsch 2026-09-10) — die Klasse susy-search-open setzt app.js an die Menüleiste */
.susy-search-input {
    width: 7.5rem;
    transition: width 0.18s ease;
}

.susy-navbar.susy-search-open .susy-search-input {
    /* breit genug für einen langen Suchbegriff, aber schmal genug, dass die Menüzeile
       auch auf einem 1280er Bildschirm einzeilig bleibt (die Trefferliste ist ohnehin breiter) */
    width: 18rem;
}

/* Platz für die breite Suchbox: der Untertitel der Wortmarke weicht */
.susy-navbar.susy-search-open .susy-brand-subtitle {
    display: none !important;
}

.susy-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    width: 100%;
    min-width: 340px;
    max-height: 70vh;
    overflow-y: auto;
}

.susy-search-hit small {
    line-height: 1.2;
}

@media (max-width: 991.98px) {
    /* im eingeklappten Menü steht die Suchbox allein in einer Zeile */
    .susy-search-input,
    .susy-navbar.susy-search-open .susy-search-input {
        width: 100%;
    }
}

/* Bereichswechsler in der Navbar (System / TYPO3 / Ubuntu / Docker / Doku): je Bereich ein
   eigener, klar umrandeter Knopf mit Symbol UND Namen (Wunsch 2026-09-10/11, vorher eine
   Auswahlliste) */
.susy-area-switch .btn {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.75);
    --bs-btn-padding-x: 0.6rem;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.15);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.2);
    --bs-btn-active-border-color: #fff;
    --bs-btn-active-color: #fff;
    white-space: nowrap;
    line-height: 1.4;
}

/* Der aktive Bereich steht weiß gefüllt mit der Hausfarbe darin */
.susy-area-switch .susy-area-btn.active,
.susy-area-switch .susy-area-btn.active:hover,
.susy-area-switch .susy-area-btn.active:focus {
    background-color: #fff;
    border-color: #fff;
    color: var(--susy-primary);
    font-weight: 600;
}

/* Beschriftung: JEDER Bereichsknopf trägt seinen Namen (Wunsch 2026-09-11 — vorher klappte sie
   bei den nicht aktiven Bereichen erst beim Überfahren auf). Damit fünf Knöpfe nebeneinander
   passen, stehen „System allgemein“ und „Dokumentation“ dort gekürzt (AREAS.short); wird es
   doch einmal eng, bricht der Wechsler dank flex-wrap in eine zweite Zeile um. */
.susy-area-switch .susy-area-label {
    margin-left: 0.4rem;
    white-space: nowrap;
}

/* Rundgang durch die Anwendung (intro.js, Vendor/introjs/): an das Hausbild angepasst.
   Die Sprechblase bekommt den roten Kopfbalken der Karten, die Knöpfe die Hausfarbe. */
.introjs-tooltip.susy-tour {
    min-width: 22rem;
    max-width: 26rem;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}

.introjs-tooltip.susy-tour .introjs-tooltip-header {
    background-color: var(--susy-primary);
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.5rem 0.8rem;
}

.introjs-tooltip.susy-tour .introjs-tooltip-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.introjs-tooltip.susy-tour .introjs-skipbutton {
    color: #fff;
    opacity: 0.85;
    padding: 0 0.3rem;
}

.introjs-tooltip.susy-tour .introjs-tooltiptext {
    padding: 0.8rem;
    line-height: 1.45;
}

.introjs-tooltip.susy-tour .introjs-button {
    text-shadow: none;
    border-radius: 0.25rem;
}

.introjs-tooltip.susy-tour .introjs-nextbutton {
    background-color: var(--susy-primary);
    border-color: var(--susy-primary);
    color: #fff;
}

.introjs-tooltip.susy-tour .introjs-nextbutton:hover,
.introjs-tooltip.susy-tour .introjs-nextbutton:focus {
    background-color: var(--susy-primary-dark);
    border-color: var(--susy-primary-dark);
    color: #fff;
}

.introjs-tooltip.susy-tour .introjs-progressbar {
    background-color: var(--susy-primary);
}

/* Im dunklen Design bringt intro.js keine eigenen Farben mit */
[data-bs-theme="dark"] .introjs-tooltip.susy-tour {
    background-color: #2b3035;
    color: #dee2e6;
}

[data-bs-theme="dark"] .introjs-tooltip.susy-tour .introjs-arrow.top {
    border-bottom-color: #2b3035;
}

[data-bs-theme="dark"] .introjs-tooltip.susy-tour .introjs-arrow.bottom {
    border-top-color: #2b3035;
}

[data-bs-theme="dark"] .introjs-tooltip.susy-tour .introjs-button {
    background-color: #3d444b;
    border-color: #6c757d;
    color: #fff;
}

[data-bs-theme="dark"] .introjs-tooltip.susy-tour .introjs-nextbutton {
    background-color: var(--susy-primary);
    border-color: var(--susy-primary);
}

/* Schweregrad von Sicherheitshinweisen (Packagist Advisories) */
.susy-severity-critical { background-color: #7a0b14; color: #fff; }
.susy-severity-high { background-color: #dc3545; color: #fff; }
.susy-severity-medium { background-color: #fd7e14; color: #fff; }
.susy-severity-low { background-color: #ffc107; color: #212529; }
.susy-severity- { background-color: #6c757d; color: #fff; }

.susy-advisory-list li + li {
    margin-top: 0.25rem;
}

/* Farbige Tabellenzeilen (table-danger/-warning/-success/-info) im dunklen Theme:
   Bootstrap 5.3 hält diese Klassen fest hell (#f8d7da …), sodass helle Textlinks,
   text-muted und <code> darauf unlesbar werden (gemeldet 2026-09-04 in der
   Ubuntu-Übersicht). Hier die dunklen "subtle"-Töne des Themes mit heller Schrift;
   Hover/Striped/Active jeweils eine Nuance heller. */
[data-bs-theme="dark"] .table-danger {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-danger-bg-subtle);
    --bs-table-border-color: var(--bs-danger-border-subtle);
    --bs-table-striped-bg: #35111a;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: #4a1a20;
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: #3f151b;
    --bs-table-hover-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-warning {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-warning-bg-subtle);
    --bs-table-border-color: var(--bs-warning-border-subtle);
    --bs-table-striped-bg: #3d2f02;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: #443502;
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: #443502;
    --bs-table-hover-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-success {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-success-bg-subtle);
    --bs-table-border-color: var(--bs-success-border-subtle);
    --bs-table-striped-bg: #0a2618;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: #123a25;
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: #0e301e;
    --bs-table-hover-color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-info {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-info-bg-subtle);
    --bs-table-border-color: var(--bs-info-border-subtle);
    --bs-table-striped-bg: #06333d;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: #083d48;
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: #083d48;
    --bs-table-hover-color: var(--bs-body-color);
}

/* Versionshistorie der Dokumentation (zeilenweiser Vergleich) */
.susy-diff { font-size: 0.8rem; white-space: pre-wrap; }
.susy-diff-add { display: block; background-color: rgba(25, 135, 84, 0.15); }
.susy-diff-del { display: block; background-color: rgba(220, 53, 69, 0.15); text-decoration: line-through; }
.susy-diff-skip { display: block; color: #6c757d; font-style: italic; }
.susy-diff-same { display: block; }

/* Codeblöcke mit Kopiervorlagen (Crontab-Zeilen): in beiden Themes lesbar */
.susy-code-block {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    white-space: pre-wrap;
    word-break: break-all;
}

[data-bs-theme="dark"] .susy-code-block {
    background-color: #2b3035;
    color: #dee2e6;
    border-color: #495057;
}