/* ===========================================================================
 * PureHost | IT-Solutions — Kundenportal
 * Child-Theme von "nexus" (WHMCS 9, Bootstrap 4.5.3)
 *
 * Hier stehen NUR Abweichungen. Alles Übrige erbt von nexus und wird mit
 * jedem WHMCS-Update automatisch mitgepflegt.
 *
 * Farbherkunft: Inline-Styles von www.pure-host.de (Stand 15.08.2026)
 *   #5aace2  helles Blau      #7ebec5  Marken-Türkis
 *   #ffffff  Kopfbereich      #333333  Fließtext
 *
 * WICHTIG — Kontrast: Das helle Markenblau erreicht auf Weiß nur 2,49:1 und
 * ist damit als Textfarbe nach WCAG AA (4,5:1) unzulässig. Deshalb zwei
 * getrennte Rollen:
 *     --ph-blau        Flächen, Ränder, Akzente (kein Text)
 *     --ph-blau-text   Links, Schaltflächen, alles Lesbare (5,38:1)
 * Die Marke bleibt sichtbar, die Lesbarkeit stimmt.
 *
 * Angelegt 15.08.2026 beim Umstieg auf WHMCS 9.0.6, überarbeitet 15.08.2026.
 * =========================================================================== */

/* ===========================================================================
 * TEIL 1 — Design-Tokens von nexus (PFLICHT, nicht entfernen!)
 *
 * WHMCS lädt bei einem Child-Theme NUR templates/purehost/css/custom.css und
 * NICHT die des Eltern-Themes. Die Tokens unten stehen im Original aber genau
 * dort (templates/nexus/css/custom.css) — ohne sie laufen die 392 var()-
 * Verweise in theme.min.css ins Leere: Status-Abzeichen verlieren ihre
 * Hintergrundfarbe, Ränder und Textabstufungen fallen auf Browser-Standards
 * zurück. Deshalb sind sie hier 1:1 gespiegelt.
 *
 * Bei einem WHMCS-Update prüfen, ob nexus/css/custom.css neue Tokens bekommen
 * hat, und diese hier nachziehen.
 * =========================================================================== */

:root {
    --white: #fff;

    --neutral-50:  #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    --primary-50:  var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    --primary:          var(--neutral-900);
    --primary-lifted:   var(--neutral-800);
    --primary-accented: var(--neutral-700);

    --secondary:          var(--neutral-500);
    --secondary-lifted:   var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    --success:          #00a63e;
    --success-lifted:   #008236;
    --success-accented: #016630;

    --info:          #155dfc;
    --info-lifted:   #1447e6;
    --info-accented: #193cb8;

    --notice:          #7f22fe;
    --notice-lifted:   #7008e7;
    --notice-accented: #5d0ec0;

    --warning:          #f54a00;
    --warning-lifted:   #ca3500;
    --warning-accented: #9f2d00;

    --error:          #e7000b;
    --error-lifted:   #c10007;
    --error-accented: #9f0712;

    --grayscale:          var(--neutral-900);
    --grayscale-lifted:   var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    --neutral:          var(--neutral-500);
    --neutral-lifted:   var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    --text-inverted: var(--white);
    --text-muted:    var(--neutral-400);
    --text-lifted:   var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text:          var(--neutral-900);

    --border-muted:    var(--neutral-200);
    --border:          var(--neutral-300);
    --border-lifted:   var(--neutral-400);
    --border-accented: var(--neutral-600);

    --bg:          var(--white);
    --bg-muted:    var(--neutral-50);
    --bg-lifted:   var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    --yellow-200:  #fff085;
    --yellow-300:  #ffdf20;
    --teal-300:    #46edd5;
    --teal-400:    #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400:    #fb64b6;

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    --letter-spacing:   0em;
    --disabled-opacity: 25%;
}

/* ===========================================================================
 * TEIL 2 — PureHost-Markenfarben
 * =========================================================================== */

:root {
    /* Flächenfarben — nie für Text verwenden */
    --ph-blau:          #5aace2;   /* Markenblau, 2,49:1 auf Weiß */
    --ph-blau-hell:     #e8f3fb;
    --ph-blau-blass:    #f4f9fd;
    --ph-tuerkis:       #7ebec5;   /* Marken-Türkis, 2,09:1 — nur Linien/Flächen */

    /* Textfarben — WCAG AA geprüft */
    --ph-blau-text:     #26709f;   /* 5,38:1 auf Weiß  — Links, Schaltflächen */
    --ph-blau-text-dkl: #1a5f8f;   /* 6,82:1           — Hover, aktiv */
    --ph-text:          #333333;   /* 12,63:1          — Fließtext */
    --ph-text-leise:    #5f6b76;   /* 5,45:1           — Nebentext, Hinweise */

    /* Struktur */
    --ph-rand:          #e3e8ec;
    --ph-rand-kraeftig: #cbd5dd;
    --ph-grau:          #f5f7f9;
    --ph-weiss:         #ffffff;

    /* Rhythmus */
    --ph-radius:        4px;
    --ph-schatten:      0 1px 3px rgba(38, 112, 159, 0.07);
    --ph-schatten-hoch: 0 4px 12px rgba(38, 112, 159, 0.12);
    --ph-uebergang:     0.18s ease;
}

/* ------------------------------------------------------------------ Basis */

body,
.navbar,
.btn,
.card,
input, select, textarea,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Helvetica, Arial, sans-serif;
}

body {
    color: var(--ph-text);
    font-size: 15px;
    line-height: 1.65;          /* nexus liefert 1.5 — etwas luftiger liest sich besser */
    -webkit-font-smoothing: antialiased;
}

/* Überschriften: klare Stufung statt gleichförmiger Größen */
h1, .h1 { font-size: 2.0rem;  font-weight: 600; line-height: 1.25; }
h2, .h2 { font-size: 1.6rem;  font-weight: 600; line-height: 1.3;  }
h3, .h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
h4, .h4 { font-size: 1.05rem; font-weight: 600; }
h5, .h5,
h6, .h6 { font-weight: 600; }

h1, h2, h3, h4, h5, h6 {
    color: var(--ph-text);
    letter-spacing: -0.01em;
}

/* Abschnittsüberschriften der öffentlichen Seiten */
.text-center.m-4 h2,
.card-columns.home + h2 {
    color: var(--ph-blau-text-dkl);
}

p { margin-bottom: 1rem; }

small, .small, .text-muted {
    color: var(--ph-text-leise) !important;   /* nexus nimmt #6c757d = 4,68:1 – knapp */
}

/* ------------------------------------------------------------------ Links */

a {
    color: var(--ph-blau-text);
    transition: color var(--ph-uebergang);
}

a:hover,
a:focus {
    color: var(--ph-blau-text-dkl);
}

/* --------------------------------------------------- Tastaturbedienbarkeit

   Bootstrap 4 blendet den Fokusrahmen vielerorts aus. Wer mit der Tastatur
   navigiert, sieht dann nicht, wo er ist. :focus-visible zeigt ihn nur bei
   Tastaturbedienung, nicht beim Mausklick.                                  */

a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.list-group-item:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ph-blau-text);
    outline-offset: 2px;
    box-shadow: none;
}

/* Sprungmarke für Screenreader und Tastatur */
.skip-to-content:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 10px 16px;
    background: var(--ph-blau-text);
    color: #fff;
    border-radius: var(--ph-radius);
}

/* --------------------------------------------------------- Schaltflächen */

.btn {
    border-radius: var(--ph-radius);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background-color var(--ph-uebergang),
                border-color var(--ph-uebergang),
                box-shadow var(--ph-uebergang);
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--ph-blau-text);   /* 5,38:1 zu Weiß */
    border-color: var(--ph-blau-text);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ph-blau-text-dkl);
    border-color: var(--ph-blau-text-dkl);
    color: #ffffff;
    box-shadow: var(--ph-schatten);
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 112, 159, 0.3);
}

.btn-outline-primary {
    color: var(--ph-blau-text);
    border-color: var(--ph-blau-text);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ph-blau-text);
    border-color: var(--ph-blau-text);
    color: #ffffff;
}

/* Zweitaktion (z. B. "Übertragen") — abgedunkeltes Türkis, damit weiße
   Schrift darauf AA erreicht. Das Marken-Türkis #7ebec5 selbst liegt bei
   2,09:1 und taugt nur als Linie oder Fläche ohne Text. */
.btn-success {
    background-color: #37787f;               /* 5,05:1 zu Weiß */
    border-color: #37787f;
    color: #ffffff;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #2f686e;               /* 6,31:1 zu Weiß */
    border-color: #2f686e;
    color: #ffffff;
}

/* Deaktivierte Schaltflächen: erkennbar inaktiv, aber lesbar.
   Bootstraps opacity .65 macht weiße Schrift auf hellem Grund unleserlich —
   deshalb stattdessen grauer Grund mit dunkler Schrift (4,63:1). Das liest
   sich zugleich eindeutiger als "gesperrt" denn eine blasse Markenfarbe. */
.btn-primary:disabled,
.btn-primary.disabled,
.btn-success:disabled,
.btn-success.disabled,
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    background-color: #e9edf0;
    border-color: #dfe4e9;
    color: var(--ph-text-leise);
    opacity: 1;
    cursor: not-allowed;
}

/* ------------------------------------------------------------ Kopfbereich

   Weiß wie #main-header auf www.pure-host.de. nexus setzt navbar-light,
   die Schrift bleibt also dunkel — nur die Akzente kommen aus der Hausfarbe. */

#header,
#header .navbar,
.main-navbar-wrapper {
    background-color: var(--ph-weiss);
    border-bottom: 1px solid var(--ph-rand);
}

#header .navbar-nav > .nav-item > .nav-link {
    color: var(--ph-text);
    font-weight: 600;
    transition: color var(--ph-uebergang), box-shadow var(--ph-uebergang);
}

#header .navbar-nav > .nav-item > .nav-link:hover,
#header .navbar-nav > .nav-item > .nav-link:focus,
#header .navbar-nav > .nav-item.show > .nav-link {
    color: var(--ph-blau-text);
}

#header .navbar-nav > .nav-item.active > .nav-link {
    color: var(--ph-blau-text);
    box-shadow: inset 0 -3px 0 var(--ph-tuerkis);
}

#header .dropdown-menu {
    border-color: var(--ph-rand);
    box-shadow: var(--ph-schatten-hoch);
    border-radius: var(--ph-radius);
}

#header .dropdown-menu .dropdown-item:hover,
#header .dropdown-menu .dropdown-item:focus {
    background-color: var(--ph-blau-blass);
    color: var(--ph-blau-text);
}

/* --------------------------------------------------------- Karten/Panels */

.card {
    border-color: var(--ph-rand);
    border-radius: var(--ph-radius);
    box-shadow: var(--ph-schatten);
    transition: box-shadow var(--ph-uebergang);
}

.card-header,
.panel-heading {
    background-color: var(--ph-blau-blass);
    border-bottom: 1px solid rgba(90, 172, 226, 0.25);
    color: var(--ph-text);
    font-weight: 600;
}

.card-header .fas,
.card-header .far,
.card-header .fal,
.card-title .fas,
.card-title .far,
.card-title .fal {
    color: var(--ph-blau-text);
}

/* -------------------------------------------------------- Kundenbereich

   nexus mischt in den Kacheln blau/grün/gold. Auf eurer Website ist alles
   eine Blaufamilie — hier ebenso, zurückhaltend.                          */

.client-home-cards .card {
    background-color: var(--ph-blau-blass);
    border-color: rgba(90, 172, 226, 0.2);
}

.client-home-cards .card:hover {
    box-shadow: var(--ph-schatten-hoch);
}

.client-home-cards .card-body {
    color: var(--ph-blau-text-dkl);
}

.highlight.bg-color-blue,
.highlight.bg-color-green,
.highlight.bg-color-gold,
.highlight.bg-color-red {
    background-color: var(--ph-blau) !important;
}

.card-accent-blue,
.card-accent-green,
.card-accent-gold,
.card-accent-red {
    border-top: 3px solid var(--ph-blau) !important;
}

.client-home-cards .fas,
.client-home-cards .far,
.client-home-cards .fal {
    color: var(--ph-blau-text);
}

.sidebar .card-header,
.panel-sidebar .card-header {
    background-color: var(--ph-blau-hell);
}

.list-group-item.active {
    background-color: var(--ph-blau-text);
    border-color: var(--ph-blau-text);
    color: #ffffff;
}

.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--ph-blau-text-dkl);
    border-color: var(--ph-blau-text-dkl);
}

/* ----------------------------------------------------- Öffentliche Seiten

   nexus verteilt sechs Akzentfarben (asbestos, teal, pomegranate,
   sun-flower, midnight-blue, green) — zusammengeführt auf eine Familie.   */

.card-accent-asbestos,
.card-accent-teal,
.card-accent-pomegranate,
.card-accent-sun-flower,
.card-accent-midnight-blue,
.card-columns.home .card {
    border-top: 3px solid var(--ph-blau) !important;
}

.card-columns.home .card {
    border-color: var(--ph-rand);
}

.card-columns.home .card:hover {
    box-shadow: var(--ph-schatten-hoch);
}

.card-columns.home .card-title {
    color: var(--ph-blau-text-dkl);
}

/* Symbolreihen "Wie können wir heute helfen?" und "Ihr Konto" */
.action-icon-btns .ico-container,
.ico-container {
    background-color: var(--ph-blau-blass);
    border-radius: 50%;
    transition: background-color var(--ph-uebergang),
                transform var(--ph-uebergang);
}

.action-icon-btns .fal,
.action-icon-btns .far,
.action-icon-btns .fas,
.ico-container .fal,
.ico-container .far,
.ico-container .fas {
    color: var(--ph-blau-text);
    transition: color var(--ph-uebergang);
}

.action-icon-btns a:hover .ico-container,
.action-icon-btns a:focus .ico-container {
    background-color: var(--ph-blau-hell);
    transform: translateY(-2px);
}

.action-icon-btns a:hover .fal,
.action-icon-btns a:hover .far,
.action-icon-btns a:hover .fas {
    color: var(--ph-blau-text-dkl);
}

.action-icon-btns a {
    color: var(--ph-text);
    text-decoration: none;
}

.action-icon-btns a:hover,
.action-icon-btns a:focus {
    color: var(--ph-blau-text-dkl);
}

/* Domainsuche */
#domainSearch,
.domain-checker-bg,
.homepage-search {
    background-color: var(--ph-blau-blass);
    border-radius: var(--ph-radius);
}

/* Endungsleiste: für .de/.at/.eu liefert WHMCS keine Logos — Textrückfall */
.tld-logos .tld-name-fallback {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ph-blau-text);
    line-height: 1;
    vertical-align: middle;
    letter-spacing: -0.02em;
}

.tld-logos li {
    vertical-align: middle;
}

/* --------------------------------------------------------------- Tabellen

   nexus setzt je nach Seite .table-striped, .table-list oder DataTables mit
   eigenen odd/even-Klassen. Alle Varianten abgedeckt.                      */

.table-striped tbody tr:nth-of-type(odd),
.table-list tbody tr:nth-of-type(odd),
#tableDomainPricing tbody tr:nth-of-type(odd),
table.dataTable tbody tr.odd {
    background-color: rgba(90, 172, 226, 0.07);
}

.table-striped tbody tr:nth-of-type(even),
.table-list tbody tr:nth-of-type(even),
#tableDomainPricing tbody tr:nth-of-type(even),
table.dataTable tbody tr.even {
    background-color: var(--ph-weiss);
}

.table-hover tbody tr:hover,
.table-list tbody tr:hover,
#tableDomainPricing tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: rgba(90, 172, 226, 0.15);
}

.table thead th {
    background-color: var(--ph-grau);
    color: var(--ph-text);
    border-bottom: 2px solid var(--ph-tuerkis);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ------------------------------------------------------------- Formulare */

.form-control {
    border-color: var(--ph-rand-kraeftig);
    border-radius: var(--ph-radius);
    color: var(--ph-text);
    transition: border-color var(--ph-uebergang), box-shadow var(--ph-uebergang);
}

.form-control:focus {
    border-color: var(--ph-blau-text);
    box-shadow: 0 0 0 0.2rem rgba(38, 112, 159, 0.15);
}

.form-control::placeholder {
    color: var(--ph-text-leise);
    opacity: 1;                 /* Firefox setzt sonst zusätzlich Transparenz */
}

label {
    font-weight: 600;
    color: var(--ph-text);
}

/* ---------------------------------------------------------------- Hinweise

   Statusfarben bleiben unangetastet: grün/rot/gelb tragen im Kundenbereich
   Bedeutung (aktiv, überfällig, offen) und dürfen nicht vereinheitlicht
   werden. Nur der neutrale Info-Kasten kommt in die Hausfarbe.            */

.badge-primary,
.badge-info {
    background-color: var(--ph-blau-text);
}

.alert-info {
    background-color: rgba(126, 190, 197, 0.15);
    border-color: var(--ph-tuerkis);
    color: var(--ph-text);
}

.alert {
    border-radius: var(--ph-radius);
}

/* ------------------------------------------------------------------- Fuß */

footer,
#footer {
    background-color: var(--ph-grau);
    color: var(--ph-text);
    border-top: 3px solid var(--ph-tuerkis);
}

footer a,
#footer a {
    color: var(--ph-blau-text);
}

footer a:hover,
#footer a:hover {
    color: var(--ph-blau-text-dkl);
}

/* ------------------------------------------------------- Kleine Displays */

@media (max-width: 767.98px) {
    body { font-size: 14px; }
    h1, .h1 { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.35rem; }

    /* Tabellen dürfen seitlich scrollen statt die Seite zu sprengen */
    .table-container,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Symbolreihen: zwei statt fünf pro Zeile lesen sich besser */
    .action-icon-btns .ico-container {
        width: 56px;
        height: 56px;
    }
}

/* Bewegung reduzieren, wenn das System es verlangt */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Druckausgabe: Navigation und Fuß weg, Schrift schwarz */
@media print {
    #header, footer, #footer, .action-icon-btns { display: none !important; }
    body { color: #000; font-size: 11pt; }
    .card { box-shadow: none; border: 1px solid #999; }
}

/* ===========================================================================
 * TEIL 3 — Dunkles Erscheinungsbild (VORBEREITET, NICHT AKTIV)
 *
 * Stand 15.08.2026: Der Block ist bewusst an die Klasse .ph-dark auf dem
 * html-Element gebunden und NICHT an @media (prefers-color-scheme: dark).
 * Damit ändert sich für keinen Kunden etwas, solange die Klasse niemand
 * setzt. Zum Ausprobieren genügt in der Entwicklerkonsole des Browsers:
 *
 *     document.documentElement.classList.toggle('ph-dark')
 *
 * WARUM DAS ÜBERHAUPT GEHT: nexus arbeitet durchgängig mit semantischen
 * Tokens (--bg, --text, --border …), die in theme.min.css 392-mal per var()
 * benutzt werden. Es genügt deshalb, diese ~40 Tokens umzudefinieren — die
 * 1.235 einzelnen Farbdeklarationen bleiben unangetastet.
 *
 * WAS NOCH FEHLT, bevor das scharf geschaltet werden kann:
 *   - Logo: die dunkle Wortmarke verschwindet auf dunklem Grund; es braucht
 *     eine helle Variante, umgeschaltet per <picture> oder CSS-Filter.
 *   - Drittinhalte im iframe (Zahlungsanbieter) bleiben hell — das lässt
 *     sich nicht von hier aus beeinflussen.
 *   - Rechnungs-PDF und E-Mail-Vorlagen bleiben ohnehin hell (richtig so).
 *   - Ein sichtbarer Umschalter samt Speicherung der Wahl (Cookie oder
 *     Kundeneinstellung) ist noch nicht gebaut.
 *
 * Alle Werte unten sind auf WCAG AA gerechnet (Nachweis im Bericht).
 * =========================================================================== */

html.ph-dark {
    /* --- Flächen --- */
    --bg:          #12171f;
    --bg-muted:    #171d26;
    --bg-lifted:   #1c232d;
    --bg-accented: #232b36;
    --bg-inverted: #e8eaed;   /* invertiert: heller Grund für dunkle Schrift */

    /* --- Schrift (14,88:1 / 12,03:1 / 8,36:1 / 5,92:1) --- */
    --text:          #e6eaef;
    --text-accented: #cdd4dc;
    --text-lifted:   #a8b2bd;
    --text-muted:    #8b95a1;
    --text-inverted: #12171f;

    /* --- Ränder --- */
    --border-muted:    #232b36;
    --border:          #2d3742;
    --border-lifted:   #3d4854;
    --border-accented: #55616e;

    /* --- Statusfarben, aufgehellt für dunklen Grund --- */
    --success:          #3fd77b;   /*  9,60:1 */
    --success-lifted:   #2fc46a;
    --success-accented: #26a858;
    --info:             #5fa8ff;   /*  7,30:1 */
    --info-lifted:      #4a95f0;
    --info-accented:    #3a7fd8;
    --warning:          #ff9d5c;   /*  8,76:1 */
    --warning-lifted:   #f0863f;
    --warning-accented: #d86f2a;
    --error:            #ff6b73;   /*  6,51:1 */
    --error-lifted:     #f0525b;
    --error-accented:   #d83c46;
    --notice:           #b48cff;
    --notice-lifted:    #a173f5;
    --notice-accented:  #8d5ce0;

    --neutral:          #8b95a1;
    --neutral-lifted:   #6b7280;
    --neutral-accented: #55616e;

    --grayscale:          #e6eaef;
    --grayscale-lifted:   #cdd4dc;
    --grayscale-accented: #a8b2bd;

    /* --- PureHost-Marke: auf dunklem Grund trägt das echte Markenblau ---
       #5aace2 erreicht hier 7,22:1 und darf endlich Textfarbe sein. */
    --ph-blau-text:     #6fb7e8;   /*  8,23:1 */
    --ph-blau-text-dkl: #8ac9f0;   /* 10,01:1 — heller beim Überfahren */
    --ph-blau-hell:     #1b2b3a;
    --ph-blau-blass:    #161f2a;
    --ph-text:          #e6eaef;
    --ph-text-leise:    #a8b2bd;
    --ph-rand:          #2d3742;
    --ph-rand-kraeftig: #3d4854;
    --ph-grau:          #171d26;
    --ph-weiss:         #1c232d;
    --ph-schatten:      0 1px 3px rgba(0, 0, 0, 0.4);
    --ph-schatten-hoch: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Grundflächen, die in nexus fest auf Weiß stehen und deshalb nachgeführt
   werden müssen — ohne diese Regeln bliebe die Seite hell. */
html.ph-dark,
html.ph-dark body {
    background-color: var(--bg);
    color: var(--ph-text);
}

html.ph-dark .card,
html.ph-dark .panel,
html.ph-dark .list-group-item,
html.ph-dark .modal-content,
html.ph-dark .dropdown-menu {
    background-color: var(--ph-weiss);
    border-color: var(--ph-rand);
    color: var(--ph-text);
}

html.ph-dark .navbar,
html.ph-dark .navbar.navbar-light {
    background-color: var(--bg-muted) !important;
    border-bottom-color: var(--ph-rand);
}

/* Tabellen: Zebramuster im Dunkeln als leichte Aufhellung statt Blaustich */
html.ph-dark .table,
html.ph-dark .table-striped {
    color: var(--ph-text);
}

html.ph-dark .table-striped tbody tr:nth-of-type(odd),
html.ph-dark .table tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}

html.ph-dark .table thead th {
    background-color: var(--bg-accented);
    border-bottom-color: var(--ph-rand-kraeftig);
    color: var(--ph-text);
}

html.ph-dark .table td,
html.ph-dark .table th {
    border-color: var(--ph-rand);
}

/* Formularfelder */
html.ph-dark .form-control,
html.ph-dark .custom-select,
html.ph-dark input[type="text"],
html.ph-dark input[type="email"],
html.ph-dark input[type="password"],
html.ph-dark textarea,
html.ph-dark select {
    background-color: #0e131a;
    border-color: var(--ph-rand-kraeftig);
    color: var(--ph-text);
}

html.ph-dark .form-control::placeholder {
    color: var(--text-muted);
}

html.ph-dark .form-control:focus {
    background-color: #0e131a;
    border-color: var(--ph-blau-text);
    color: var(--ph-text);
}

/* Fußbereich */
html.ph-dark footer,
html.ph-dark .footer {
    background-color: var(--bg-muted);
    border-top-color: var(--ph-rand);
    color: var(--ph-text-leise);
}

/* Schaltflächen: Primärfarbe im Dunkeln kräftiger, Schrift dunkel */
html.ph-dark .btn-primary,
html.ph-dark .btn-primary:not(:disabled):not(.disabled) {
    background-color: #4a97cf;
    border-color: #4a97cf;
    color: #0e131a;                /* dunkle Schrift auf hellem Blau */
}

html.ph-dark .btn-primary:hover,
html.ph-dark .btn-primary:focus {
    background-color: #5aace2;
    border-color: #5aace2;
    color: #0e131a;
}

html.ph-dark .btn-outline-primary {
    border-color: var(--ph-blau-text);
    color: var(--ph-blau-text);
    background-color: transparent;
}

html.ph-dark .btn-primary:disabled,
html.ph-dark .btn-primary.disabled,
html.ph-dark .btn-success:disabled,
html.ph-dark .btn-success.disabled,
html.ph-dark .btn-outline-primary:disabled,
html.ph-dark .btn-outline-primary.disabled {
    background-color: #232b36;
    border-color: #2d3742;
    color: #8b95a1;
}

/* Hinweisboxen */
html.ph-dark .alert-info {
    background-color: #16283a;
    border-color: #24425f;
    color: #cde3f5;
}

html.ph-dark .alert-success {
    background-color: #16301f;
    border-color: #245234;
    color: #cdf0da;
}

html.ph-dark .alert-warning {
    background-color: #32240f;
    border-color: #573f1a;
    color: #f5e3cd;
}

html.ph-dark .alert-danger {
    background-color: #331618;
    border-color: #5a262a;
    color: #f5cdd0;
}

/* Sichtbarer Fokusring bleibt auch im Dunkeln Pflicht */
html.ph-dark a:focus-visible,
html.ph-dark button:focus-visible,
html.ph-dark .btn:focus-visible,
html.ph-dark input:focus-visible,
html.ph-dark select:focus-visible,
html.ph-dark textarea:focus-visible {
    outline: 2px solid var(--ph-blau-text-dkl);
    outline-offset: 2px;
}

/* Bilder und Logos leicht dämpfen, damit sie nicht herausstechen */
html.ph-dark img:not([src*=".svg"]) {
    filter: brightness(0.92);
}