/* =============================================================================
   HOSTWORLD — Dunkelmodus-Farbschicht
   =============================================================================
   Eingebunden ueber resources/views/storefront/layouts/meta.twig, NACH
   style.css. Nur Dunkelmodus-Regeln: die hellen Farben kommen aus der
   Kern-Bootstrap-Datei des Verkaufskanals und aus style.css.
   ========================================================================== */

/* ── Dunkelmodus ─────────────────────────────────────────────────
   Farben der Website (new-hostworld-web/src/styles/tokens.css, Block
   :root[data-theme="dark"]). Seit dem Theme-Stand mit eigener schlanker
   style.css ist diese Schicht die EINZIGE Dunkelquelle: das gekaufte
   Theme-CSS (samt seines violetten _dark-mode) wird nicht mehr geladen,
   die Bootstrap-Merkmale kommen aus der Kern-Datei des Verkaufskanals.
   Ausgeloest wird der Modus ueber die Klasse dark-mode am Wurzelelement
   (Bruecke in layouts/meta.twig bzw. der Umschalter im eingebetteten
   Website-Kopf). Das !important an --bs-primary bleibt als Schutz, falls
   auf dem Server doch wieder ein Theme-CSS mit eigenem Dunkel laedt. */
.dark-mode{
  --bs-body-bg: #131C24;           /* Grundflaeche */
  --bs-body-bg-rgb: 19, 28, 36;
  --bs-body-color: #E6EAF0;        /* Schrift */
  --bs-border-color: rgba(255, 255, 255, 0.10);
  --bs-light: #1B2833;             /* Karten und Panels */
  --bs-mode: #0F161C;              /* abgesetzte Flaechen */
  --bs-gray-200: #1B2833;
  --bs-gray-300: #223140;
  --bs-gray-400: #87919E;
  --bs-gray-500: #A2ADBA;
  --bs-gray-600: #A2ADBA;
  --bs-gray-700: #E6EAF0;
  --bs-gray-800: #FFFFFF;
  --bs-gray-900: #FFFFFF;
  /* Handlungsfarbe bleibt auch im Dunkeln das Markengelb, nicht das
     Violett des Themes. !important, weil _dark-mode.scss --bs-primary
     selbst mit !important setzt. */
  --bs-primary: #FBDE37 !important;
  --bs-primary-rgb: 251, 222, 55;
  --bs-link-color: #FBDE37;
  --bs-link-hover-color: #FBA837;
  /* style.css haelt --bs-secondary hell auf Phantom (#1E1E24) - der Kern
     leitet daraus die Schrift von label, strong, small, span und .btn ab.
     Im Dunkeln bewusst das MERKMAL umgesetzt statt pauschaler
     strong/span-Regeln: auf gelben und farbigen Flaechen (eigene
     btn-Varianten, Badges) bleibt die dunkle Schrift dadurch erhalten.
     Das gelbe text-bg-secondary-Badge haengt an --bs-secondary-rgb aus
     dem Kanal-Branding und ist davon unberuehrt. */
  --bs-secondary: var(--fg);
  /* Status-Gruen: das Kanal-Gruen (#1F9D55) kommt auf dunklen Flaechen
     nur auf rund 4:1. Im Dunkeln deshalb das hellere --status-ok
     (#3FBF7F, 6,4:1) aus der Website-Stilvorlage. .text-success zieht
     ueber --bs-success-rgb - rgba(var(...)) braucht ein Zahlen-Triple,
     darum steht der Wert dort ausgeschrieben. */
  --bs-success: var(--status-ok);
  --bs-success-rgb: 63, 191, 127;
  /* Hier stehen NUR dokumentweite Merkmale (body, border, primary,
     secondary, link, Graustufen, success). Bauteil-Merkmale wie
     --bs-card-* oder --bs-btn-* deklariert Bootstrap AM BAUTEIL - eine
     Zuweisung an der Wurzel verliert dort den Lookup und gehoert an die
     Bauteilklasse (fuenfter Durchgang, am laufenden System gemessen). */
}
/* Body und Ueberschriften absichern: die Kern-Bootstrap-Datei des
   Verkaufskanals setzt teils feste helle Werte. */
.dark-mode body{color:#E6EAF0;background:#131C24}
.dark-mode h1,.dark-mode .h1,.dark-mode h2,.dark-mode .h2,.dark-mode h3,.dark-mode .h3,.dark-mode h4,.dark-mode .h4,.dark-mode h5,.dark-mode .h5,.dark-mode h6,.dark-mode .h6{color:#FFFFFF}
/* Gelbe Flaeche traegt dunkelblaue Schrift – dieselbe Falle wie auf der
   Website: mit den Bootstrap-Vorgaben stuende helle Schrift auf Gelb. */
/* Variantenlose Knoepfe: die .btn-Basis des Kanal-Bootstraps kompiliert
   --bs-btn-color fest auf #1e1e24. Steht VOR den Varianten-Bloecken
   darunter, damit deren Werte bei gleicher Spezifitaet gewinnen. */
.dark-mode .btn { --bs-btn-color: var(--fg); }
.dark-mode .btn-primary{
  --bs-btn-bg: var(--hw-brand-yellow);
  --bs-btn-border-color: var(--hw-brand-yellow);
  --bs-btn-color: var(--hw-navy-deep);
  --bs-btn-hover-bg: var(--hw-amber-gold);
  --bs-btn-hover-border-color: var(--hw-amber-gold);
  --bs-btn-hover-color: var(--hw-navy-deep);
  --bs-btn-active-bg: var(--hw-amber-gold);
  --bs-btn-active-border-color: var(--hw-amber-gold);
  --bs-btn-active-color: var(--hw-navy-deep);
  --bs-btn-disabled-bg: var(--hw-brand-yellow);
  --bs-btn-disabled-border-color: var(--hw-brand-yellow);
  --bs-btn-disabled-color: var(--hw-navy-deep);
}

/* ── Bootstrap-Familien geschlossen ──────────────────────────────
   Die var(--bg-*)/var(--fg-*)/var(--border*)-Merkmale kommen ueber das
   eingebettete Kopf-Fragment der Website mit (tokens.css, Block
   :root[data-theme="dark"]) und sind im Kundenmenue am laufenden System
   gemessen vorhanden - hier werden deshalb keine Werte wiederholt.
   Die --hw-*-Merkmale stehen im :root der Theme-style.css. */

/* Formularelemente. style.css und der Kanal-Bootstrap setzen helle
   Festwerte (#F5F7FA/#E9ECEF), die keine Merkmale befragen. */
.dark-mode .form-control,
.dark-mode .form-select {
  background-color: var(--bg-elevated);
  border-color: var(--border);
  color: var(--fg);
}
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
  background-color: var(--bg-elevated);
  border-color: var(--hw-brand-yellow);
  color: var(--fg);
  box-shadow: 0 0 0 .25rem rgba(251, 222, 55, .25);
}
.dark-mode .form-control::placeholder { color: var(--fg-muted); }
.dark-mode .form-control:disabled,
.dark-mode .form-select:disabled {
  background-color: var(--bg-muted);
  color: var(--fg-muted);
}
/* Abgesetztes Anhaengsel neben dem Feld */
.dark-mode .input-group-text {
  background-color: var(--bg-muted);
  border-color: var(--border);
  color: var(--fg-muted);
}
.dark-mode .form-check-input {
  background-color: var(--bg-elevated);
  border-color: var(--border-strong);
}
.dark-mode .form-check-input:checked {
  background-color: var(--hw-brand-yellow);
  border-color: var(--hw-brand-yellow);
}
/* Haekchen und Punkt dunkel auf Gelb - die Bootstrap-Vorgabe ist weiss
   und waere auf der gelben Flaeche kaum zu sehen. */
.dark-mode .form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%232B4358' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.dark-mode .form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%232B4358'/%3e%3c/svg%3e");
}

/* Flaechen */
.dark-mode .card,
.dark-mode .modal-content,
.dark-mode .dropdown-menu,
.dark-mode .offcanvas,
.dark-mode .list-group-item {
  background-color: var(--bg-elevated);
  border-color: var(--border);
  color: var(--fg);
}
/* Die Karten-Merkmale zusaetzlich AM BAUTEIL: .card-body zieht seine
   Schriftfarbe aus --bs-card-color neu, und Bootstrap deklariert das
   Merkmal an .card - naeher am Kind als jede Wurzel-Zuweisung. Ohne
   diese Regel blieben label/strong/small innerhalb von Karten dunkel. */
.dark-mode .card {
  --bs-card-color: var(--fg);
  --bs-card-bg: var(--bg-elevated);
}
.dark-mode .card-header,
.dark-mode .card-footer {
  background-color: var(--bg-muted);
  border-color: var(--border);
}
.dark-mode .modal-header,
.dark-mode .modal-footer { border-color: var(--border); }
/* Bootstraps Schliessen-Kreuz ist ein dunkles SVG - auf dunkler Flaeche
   unsichtbar. Dieselbe Umkehr, die .btn-close-white benutzt. */
.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.dark-mode .dropdown-item { color: var(--fg); }
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--fg-strong);
}
.dark-mode .dropdown-item.active {
  background-color: var(--hw-brand-yellow);
  color: var(--hw-navy-deep);
}
.dark-mode .dropdown-divider { border-color: var(--border); }
.dark-mode .list-group-item.active {
  background-color: var(--hw-brand-yellow);
  border-color: var(--hw-brand-yellow);
  color: var(--hw-navy-deep);
}

/* Tabellen - Bootstrap 5.2 haelt alle Farben in --bs-table-Merkmalen */
.dark-mode .table {
  --bs-table-bg: var(--bg-elevated);
  --bs-table-color: var(--fg);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--bg-muted);
  --bs-table-striped-color: var(--fg);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-table-hover-color: var(--fg-strong);
  color: var(--fg);
  border-color: var(--border);
}

/* Knopfarten. btn-outline-primary: Schrift und Rahmen im Dunkeln auf dem
   Markengelb, beim Ueberfahren gelbe Flaeche mit dunkelblauer Schrift
   (der Warenkorb oben rechts). Die Schriftregel der
   style.css (var(--hw-phantom)) wird durch die hoehere Spezifitaet
   ueberstimmt. */
.dark-mode .btn-outline-primary {
  color: var(--hw-brand-yellow);
  border-color: var(--hw-brand-yellow);
}
.dark-mode .btn-outline-primary:hover,
.dark-mode .btn-outline-primary:focus,
.dark-mode .btn-outline-primary:active,
.dark-mode .btn-outline-primary.active {
  color: var(--hw-navy-deep);
  background-color: var(--hw-brand-yellow);
  border-color: var(--hw-brand-yellow);
}
.dark-mode .btn-secondary {
  --bs-btn-bg: var(--bg-elevated);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-color: var(--fg);
  --bs-btn-hover-bg: var(--bs-gray-300);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--fg-strong);
  --bs-btn-active-bg: var(--bs-gray-300);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-active-color: var(--fg-strong);
}

/* Reiter des Kundenmenues (eigene Klasse, z.B. Rechnungsuebersicht):
   Schrift haengt in style.css an den hellen --hw-Tokens. Der gelbe
   Aktiv-Balken bleibt. */
.dark-mode .hw-tab { color: var(--fg-muted); }
.dark-mode .hw-tab:hover {
  color: var(--fg-strong);
  background: rgba(255, 255, 255, 0.06);
}
.dark-mode .hw-tab.is-active { color: var(--fg-strong); }

/* Plaketten auf gelber/bernsteinfarbener Flaeche: Schrift dunkel.
   !important, weil die text-bg-Utilities ihre Schriftfarbe selbst
   mit !important setzen. */
.dark-mode .badge.text-bg-secondary,
.dark-mode .badge.text-bg-warning { color: var(--hw-navy-deep) !important; }

/* Schutz fuer helle/gelbe Kern-Knopfvarianten: deren dunkle Schrift ist
   auf der farbigen Flaeche in beiden Darstellungen richtig und darf von
   der .btn-Basisregel oben nicht aufgehellt werden. */
.dark-mode .btn-warning,
.dark-mode .btn-light { --bs-btn-color: var(--hw-navy-deep); }

/* ── Dritter Durchgang (gemessen nach dem Ausrollen von 8a27c71) ── */

/* Zurueck-Knopf des Kundenmenues: der Kern setzt Weiss fest. */
.dark-mode .hw-back-btn,
.dark-mode a.hw-back-btn {
  background-color: var(--bg-elevated);
  color: var(--fg);
  border-color: var(--border);
}

/* Fortschrittsbalken: helle Laufflaeche vom Kern (#E9ECEF).
   Der gelbe Balken (.progress-bar) darin bleibt unberuehrt. */
.dark-mode .progress { background-color: var(--bg-muted); }

/* Schritt-Anzeige: Verbinder und Kreise stehen im Kern auf #DEE2E6.
   Bewusst mit :where() abgeschwaecht, damit die aktiven Schritte
   (spezifischere Kern-Regeln mit Zustandsklasse) gelb bleiben. */
.dark-mode :where(.hw-stepper-connector) { background-color: var(--border-strong); }
.dark-mode :where(.hw-stepper-step-circle) {
  background-color: var(--bg-elevated);
  border-color: var(--border);
}

/* ── Vierter Durchgang (gemessen nach dem Ausrollen von 2a7c479) ── */

/* Bezahlarten-Auswahl im Warenkorb: Bootstrap-4-Schreibweise des Kerns
   (custom-control/custom-radio/custom-control-label), vom
   form-*-Familienblock oben deshalb nicht erfasst. Die weisse Flaeche
   kommt aus .hw-radio-mega .form-check in storefront.min.css.
   NUR die Bezahlarten: die weissen Zustimmungskaesten desselben
   Formulars haengen an einem Admin-Feld-Style mit ID-Selektor und
   werden dort gepflegt, nicht hier. */
.dark-mode .hw-radio-mega .form-check,
.dark-mode .hw-radio-mega .hw-button {
  background-color: var(--bg-elevated);
  border-color: var(--border);
}
.dark-mode .custom-control-label { color: var(--fg); }
/* Der gewaehlte Eintrag bleibt erkennbar: gelber Rand am aktiven Block
   (der Radio-Indikator selbst haengt am Kern). */
.dark-mode .hw-radio-mega .form-check:has(.custom-control-input:checked) {
  border-color: var(--hw-brand-yellow);
}

/* ── Sechster Durchgang (nach KONTRAST gemessen, /product/pro-plan) ── */

/* .text-muted: der Kanal-Bootstrap (5.2.3) setzt die Utility FEST mit
   !important (#6c757d - 3,2:1 auf den dunklen Flaechen). Die
   5.3-Merkmale --bs-secondary-color/-tertiary-color gibt es in dieser
   Fassung noch nicht, es existiert also kein Merkmalsweg - deshalb
   ausnahmsweise eine direkte Regel mit !important. */
.dark-mode .text-muted { color: var(--fg-muted) !important; }

/* Bestelluebersicht (hw-cs-*) und Support-Kasten: feste Kern-Graustufen
   ohne Merkmal (#555/#666/#888). Beschriftungen auf fg-muted,
   Zwischenueberschriften auf fg. Die Gesamtsummen-Zeile
   (hw-cs-total-row--due) behaelt ihr color:inherit - deren Kern-Regel
   ist spezifischer als die Beschriftungs-Regel hier. */
.dark-mode .hw-cs-row > span:first-child { color: var(--fg-muted); }
.dark-mode .hw-cs-totals .hw-cs-total-label { color: var(--fg-muted); }
.dark-mode .hw-support-cta .hw-support-cta-body p { color: var(--fg-muted); }
.dark-mode .hw-cs-section .hw-cs-section-header { color: var(--fg); }

/* Lade-Schleier der Bestelluebersicht: der Kern legt beim asynchronen
   Nachladen rgba(255,255,255,.75) ueber die Karte - im Dunkeln ein
   weisser Blitz. Hier steht ausnahmsweise ein fester Wert statt
   var(--bg): der Schleier braucht eine Deckkraft, und das Merkmal
   traegt keine. Der feste Wert ist --bg (#131C24) mit .75; die
   color-mix-Zeile danach leitet dieselbe Farbe aus dem Merkmal ab,
   aeltere Browser bleiben auf dem festen Rueckfall davor. */
.dark-mode .hw-cs-spinner-row {
  background: rgba(19, 28, 36, 0.75);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
}

/* ── Siebter Durchgang (nach Kontrast gemessen, elf Kundenmenue-Seiten) ── */

/* Unterzeile der Seitenueberschrift: der Kern setzt #6c757d ueber einen
   vierstufigen Selektor - hier gespiegelt, damit die Regel sicher
   gewinnt. */
.dark-mode .hw-header-section .hw-page-header .hw-page-title .hw-subtitle { color: var(--fg-muted); }

/* Stepper-Beschriftungen: Kern-Basis #6c757d. :where() haelt die Regel
   auf Basis-Staerke, damit die active/completed-Regeln des Kerns
   (var(--bs-body-color), im Dunkeln hell) weiter gewinnen. */
.dark-mode :where(.hw-stepper-step-label) { color: var(--fg-muted); }

/* Blaetterleiste: Bootstrap 5.2.3 deklariert die Merkmale am Bauteil
   .pagination, deshalb stehen sie hier ebenfalls dort. Aktiver Eintrag
   im Markenmuster Gelb mit Navy-Schrift (wie btn-primary und aktive
   Stepper-Kreise) - das Kern-Navy #2b4358 waere auf dunkler Flaeche
   kaum erkennbar. */
.dark-mode .pagination {
  --bs-pagination-color: var(--fg);
  --bs-pagination-bg: var(--bg-elevated);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-color: var(--fg-strong);
  --bs-pagination-hover-bg: var(--bg-muted);
  --bs-pagination-hover-border-color: var(--border);
  --bs-pagination-focus-color: var(--fg-strong);
  --bs-pagination-focus-bg: var(--bg-muted);
  --bs-pagination-disabled-color: var(--fg-muted);
  --bs-pagination-disabled-bg: var(--bg-muted);
  --bs-pagination-disabled-border-color: var(--border);
  --bs-pagination-active-color: var(--hw-navy-deep);
  --bs-pagination-active-bg: var(--hw-brand-yellow);
  --bs-pagination-active-border-color: var(--hw-brand-yellow);
}

/* Status-Gruen mit festem #198754 im Kern (Bootstrap-Gruen, im Dunkeln
   3,7:1): Domainsuche und Rabattzeile der Bestelluebersicht. Dieselben
   Selektoren wie im Kern, mit .dark-mode davor. Die .text-success-
   Utility laeuft ueber --bs-success-rgb im Wurzelblock oben. */
.dark-mode .hw-domain-search-item.is--original.is--available h4 { color: var(--status-ok); }
.dark-mode .hw-domain-search-item.is--available { border-left-color: var(--status-ok); }
.dark-mode .hw-domain-search-item.is--available span:nth-child(2) { color: var(--status-ok); }
.dark-mode .hw-cs-row.hw-cs-row--discount { color: var(--status-ok); }

/* ── Achter Durchgang: Meldungsflaechen ── */

/* Bootstrap deklariert --bs-alert-color/-bg/-border-color AM Bauteil
   (helle Pastellwerte an .alert-danger und Geschwistern), die Zuordnung
   steht deshalb an den vier Auspraegungen selbst. Muster wie Bootstrap
   5.3 im Dunkeln: leicht eingefaerbter dunkler Grund (Signalfarbe 12%
   gegen --bg), kraeftiger Rand (60%), Schrift in der Signalfarbe.
   Die festen Werte sind Rueckfaelle. Anders als beim Lade-Schleier
   taugt bei Custom Properties keine Doppel-Deklaration als Rueckfall:
   die spaetere Deklaration gewinnt dort immer, ungueltig wird der Wert
   erst bei der Verwendung - dann kippt das ganze Merkmal. Die
   color-mix-Ableitung liegt deshalb im @supports-Block darunter. */
.dark-mode .alert-danger {
  --bs-alert-color: var(--status-error);
  --bs-alert-bg: #2E262D;
  --bs-alert-border-color: #98504F;
}
.dark-mode .alert-success {
  --bs-alert-color: var(--status-ok);
  --bs-alert-bg: #18302F;
  --bs-alert-border-color: #2D7E5B;
}
.dark-mode .alert-warning {
  --bs-alert-color: var(--hw-amber-gold);
  --bs-alert-bg: #2F2D26;
  --bs-alert-border-color: #9E702F;
}
/* Info: --status-info traegt im dunklen Block der Website-Stilvorlage
   das helle, kuehle Blau #6FB6E8 (hell bleibt es das Marken-Navy - dort
   greifen diese Regeln nicht). */
.dark-mode .alert-info {
  --bs-alert-color: var(--status-info);
  --bs-alert-bg: #1E2E3C;
  --bs-alert-border-color: #4A789A;
}
/* Die vier neutralen Auspraegungen, am 15.08.2026 nachgezogen. Sie fehlten
   seit Anlage dieses Blocks und trugen im Dunkeln weiter die hellen
   Pastellwerte des Kerns - gemessen 1,17 bis 1,24 Kontrast fuer den
   Fliesstext, also praktisch unsichtbar.
   Keine Signalfarbe: primary, light und dark sind im Kern neutrale Graustufen
   (nicht Blau), deshalb steht hier --fg statt einer Statusfarbe. secondary
   ist im Kern das gelbe Fach und bekommt das Markengelb. */
.dark-mode .alert-primary {
  --bs-alert-color: var(--fg);
  --bs-alert-bg: #242C34;
  --bs-alert-border-color: #727980;
}
.dark-mode .alert-secondary {
  --bs-alert-color: var(--hw-brand-yellow);
  --bs-alert-bg: #2F3326;
  --bs-alert-border-color: #9E902F;
}
.dark-mode .alert-light {
  --bs-alert-color: var(--fg);
  --bs-alert-bg: #2C353C;
  --bs-alert-border-color: #7D838A;
}
/* alert-light braucht eine zweite Regel: storefront.min.css setzt dort
   background-color als gewoehnliche Eigenschaft, nicht ueber das Merkmal -
   ein --bs-alert-bg allein bliebe wirkungslos. Zwei Klassen im Selektor
   schlagen die eine Klasse des Kerns. */
.dark-mode .alert.alert-light {
  background-color: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
}
.dark-mode .alert-dark {
  --bs-alert-color: var(--fg);
  --bs-alert-bg: #0C1217;
  --bs-alert-border-color: #676E76;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .dark-mode .alert-danger {
    --bs-alert-bg: color-mix(in srgb, var(--status-error) 12%, var(--bg));
    --bs-alert-border-color: color-mix(in srgb, var(--status-error) 60%, var(--bg));
  }
  .dark-mode .alert-success {
    --bs-alert-bg: color-mix(in srgb, var(--status-ok) 12%, var(--bg));
    --bs-alert-border-color: color-mix(in srgb, var(--status-ok) 60%, var(--bg));
  }
  .dark-mode .alert-warning {
    --bs-alert-bg: color-mix(in srgb, var(--hw-amber-gold) 12%, var(--bg));
    --bs-alert-border-color: color-mix(in srgb, var(--hw-amber-gold) 60%, var(--bg));
  }
  .dark-mode .alert-info {
    --bs-alert-bg: color-mix(in srgb, var(--status-info) 12%, var(--bg));
    --bs-alert-border-color: color-mix(in srgb, var(--status-info) 60%, var(--bg));
  }
  .dark-mode .alert-primary {
    --bs-alert-bg: color-mix(in srgb, var(--fg) 8%, var(--bg));
    --bs-alert-border-color: color-mix(in srgb, var(--fg) 45%, var(--bg));
  }
  .dark-mode .alert-secondary {
    --bs-alert-bg: color-mix(in srgb, var(--hw-brand-yellow) 12%, var(--bg));
    --bs-alert-border-color: color-mix(in srgb, var(--hw-brand-yellow) 60%, var(--bg));
  }
  .dark-mode .alert-light {
    --bs-alert-bg: color-mix(in srgb, var(--fg) 12%, var(--bg));
    --bs-alert-border-color: color-mix(in srgb, var(--fg) 50%, var(--bg));
  }
  .dark-mode .alert-dark {
    --bs-alert-bg: color-mix(in srgb, #000 35%, var(--bg));
    --bs-alert-border-color: color-mix(in srgb, var(--fg) 40%, var(--bg));
  }
}

/* Verweise in Meldungen: der Kern faerbt .alert-link je Auspraegung mit
   festen dunklen Toenen (z.B. #662121 bei danger) - auf den dunklen
   Gruenden rund 1,5:1. Vorsorglich die Signalfarbe der jeweiligen
   Meldung; die Unterstreichung des Kerns bleibt. */
.dark-mode .alert-danger .alert-link { color: var(--status-error); }
.dark-mode .alert-success .alert-link { color: var(--status-ok); }
.dark-mode .alert-warning .alert-link { color: var(--hw-amber-gold); }
.dark-mode .alert-info .alert-link { color: var(--status-info); }
.dark-mode .alert-primary .alert-link { color: var(--fg); }
.dark-mode .alert-secondary .alert-link { color: var(--hw-brand-yellow); }
.dark-mode .alert-light .alert-link { color: var(--fg); }
.dark-mode .alert-dark .alert-link { color: var(--fg); }

/* Die Stilvorlage der Website setzt global p { color: var(--fg) } und wird
   im Kundenmenue mitgeladen (Kopf- und Fussfragmente, siehe die Ausnahme
   partials|_astro|brand im Vhost). Eine zugewiesene Farbe schlaegt jede
   geerbte - der Absatz in einem Meldungskasten ignoriert deshalb dessen
   eigene Textfarbe. Ein <span> oder <div> an derselben Stelle erbt korrekt,
   nur <p> bricht aus. Hier wird die Vererbung zurueckgeholt.
   .text-muted traegt im Kern und in dieser Datei !important, deshalb hier
   ebenfalls; die Daempfung uebernimmt opacity. */
.alert p { color: inherit; }
.alert .text-muted { color: inherit !important; opacity: .72; }

/* ── Anmelden und Registrieren ───────────────────────────────────
   style.css gibt der Formularspalte eine feste helle Flaeche und die
   Schriftfarben des hellen Grundes (--hw-cloud-white, --hw-steel,
   --hw-phantom). Beides ist dort richtig und bleibt dort; hier steht
   das dunkle Gegenstueck. Die Navy-Flaeche links braucht nichts: sie
   ist im Dunkeln wie im Hellen navy, ihre Ueberschrift ist bereits
   --hw-cloud-white. Werte aus dem Variablenblock oben. */
.dark-mode .hw-auth-form { background: var(--bg); }

.dark-mode .hw-auth-form .hw-rail-lang-item { color: var(--fg-muted); }
.dark-mode .hw-auth-form .hw-rail-lang-item.is-current { color: var(--fg-strong); }
.dark-mode .hw-auth-form button.hw-rail-lang-item:hover {
    color: var(--fg-strong);
    background: rgba(255, 255, 255, .06);
}

.dark-mode .hw-auth-back { color: var(--fg-muted); }
.dark-mode .hw-auth-back:hover { color: var(--fg-strong); }

/* ── Leiste ──────────────────────────────────────────────────────────
   Im Hellmodus ist die Leiste das dunkle Beiwerk auf heller Seite. Mit
   dem Navy aus style.css waere sie im Dunkeln die HELLSTE Flaeche der
   Seite (#2B4358 gegen #131C24) und traete vor, statt zurueckzutreten.
   Deshalb hier die abgesetzte Flaeche #0F161C - dieselbe, die --bs-mode
   weiter oben fuer abgesetzte Flaechen fuehrt.

   Kontraste gegen die jeweilige Flaeche:
     Menuepunkt   #A2ADBA auf #0F161C   8.01:1
     aktiv        #FFFFFF auf #1B2833  15.02:1
     leise        #87919E auf #0F161C   5.71:1

   Nur die sieben Merkmale - die Regeln selbst stehen in style.css und
   gelten fuer beide Modi. */
.dark-mode .hw-rail {
    --rail-bg:        #0F161C;
    --rail-fg:        #A2ADBA;
    --rail-fg-stark:  #FFFFFF;
    --rail-fg-leise:  #87919E;
    --rail-hover:     rgba(255, 255, 255, .05);
    --rail-aktiv:     #1B2833;
    --rail-linie:     rgba(255, 255, 255, .10);
}