/*
 * Optionaler Kontrastmodus. Die Trainingsinhalte und Medien bleiben unverändert;
 * nur dekorative Hintergrundgrafiken und die Darstellung der Bedienelemente
 * werden für bessere Lesbarkeit übersteuert.
 */
html[data-user-contrast="high"] {
  color-scheme: dark;
}

.ha-accessibility-controls {
  position: fixed;
  top: 0.55rem;
  right: 1.5rem;
  /* Die Umschalter müssen auch über React-Spieloberflächen und Modals
   * erreichbar bleiben. */
  z-index: 2147483647;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  pointer-events: auto;
}

.ha-accessibility-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px dashed currentColor;
  border-radius: 0;
  background: rgba(33, 37, 41, 0.92);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}

.ha-accessibility-control > i {
  font-size: 1rem;
}

/* Öffentliche Seiten erhalten Bootstrap, die eigenständige Chat-View jedoch
 * nicht. Die Beschriftungen bleiben deshalb lokal und frameworkunabhängig
 * für Screenreader verfügbar, ohne das Chat-Layout zu verbreitern. */
.ha-accessibility-control .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Das generische Chat-Bundle reserviert oben rechts einen 52-px-Button für
 * seine Einstellungen. Die drei produktweiten Umschalter stehen deshalb in
 * dieser View links davon, ohne die bestehende Bedienung zu überlagern. */
.ha-chat-page .ha-accessibility-controls {
  right: 5rem;
}

.ha-accessibility-control:hover,
.ha-accessibility-control:focus-visible {
  background: #005a8f;
  color: #fff;
}

.ha-accessibility-control:focus-visible {
  outline: 2px solid #005a8f;
  outline-offset: 0.15rem;
}

@media (max-width: 991.98px) {
  .ha-accessibility-controls {
    right: 4.5rem;
  }
}

/* Die Seite benennt über die Produkt-Policy, ob ihr dekorativer
 * Seitenhintergrund unterdrückt wird. Zentrale Szenengrafiken sind davon
 * bewusst nicht betroffen und bleiben standardmäßig erhalten. */
html[data-user-contrast="high"][data-a11y-page-background="suppress"] body {
  color: #fff !important;
  background: #000 !important;
  background-image: none !important;
}

/* Eine zentrale Szenengrafik wird ausschließlich nach einer expliziten
 * produktseitigen Markierung ausgeblendet. Ohne data-a11y-primary-scene
 * bleiben Lern- und Spielgrafiken immer erhalten. */
html[data-user-contrast="high"][data-a11y-primary-scene-visual="suppress"] [data-a11y-primary-scene] {
  display: none !important;
}

html[data-user-contrast="high"] .container,
html[data-user-contrast="high"] .container-fluid,
html[data-user-contrast="high"] header,
html[data-user-contrast="high"] footer,
html[data-user-contrast="high"] nav,
html[data-user-contrast="high"] .navbar,
html[data-user-contrast="high"] .main-header,
html[data-user-contrast="high"] .main-footer,
html[data-user-contrast="high"] .card,
html[data-user-contrast="high"] .modal-content,
html[data-user-contrast="high"] .toast,
html[data-user-contrast="high"] .notice-item,
html[data-user-contrast="high"] .profile-data,
html[data-user-contrast="high"] .chat-message-item,
html[data-user-contrast="high"] .bg-white,
html[data-user-contrast="high"] .lesson,
html[data-user-contrast="high"] .lesson .modal-body,
html[data-user-contrast="high"] .lesson .modal-header {
  color: #fff !important;
  background-color: #000 !important;
  border-color: #fff !important;
}

html[data-user-contrast="high"] :is(table, th, td, thead, tbody, tr, .table) {
  color: #fff !important;
  background-color: #000 !important;
  border-color: #fff !important;
}

/*
 * Keine pauschale Regel für m-*, i-* oder o-* verwenden: Diese Klassen
 * kennzeichnen nicht nur Szenen, sondern auch die eigentlichen Lern- und
 * Rätselgrafiken. Der Seitenhintergrund wird bereits über body oben auf
 * Schwarz gesetzt; zentrale Bildinhalte bleiben deshalb absichtlich intakt.
 */

html[data-user-contrast="high"] :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, span, small, strong, em, blockquote, pre) {
  color: inherit;
}

/*
 * Die Lern- und Debriefing-Templates setzen ihre Schriftfarbe im
 * Produkt-Theme gezielt mit !important. Ohne diese Gegenregel bleibt der
 * dunkelblaue Text auf dem schwarzen Kontrasthintergrund praktisch
 * unsichtbar. Die Regel betrifft nur Text und Dekoration der Lesson-Boxen;
 * eingebundene Lernmedien bleiben unverändert.
 */
html[data-user-contrast="high"] .lesson,
html[data-user-contrast="high"] .lesson :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, span, strong, em),
html[data-user-contrast="high"] .manual,
html[data-user-contrast="high"] .manual :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, span, strong, em) {
  color: #fff !important;
}

html[data-user-contrast="high"] .lesson :is(p.title, span.title)::before,
html[data-user-contrast="high"] .manual span.title::before,
html[data-user-contrast="high"] .lesson .ha-check-bullet li::before {
  color: #00ffff !important;
}

/* Die Lesson-Illustrationen sind teilweise transparente PNG-/SVG-Motive.
 * Auf der schwarzen Kontrastfläche würde deren ursprünglich heller
 * Kartenhintergrund verloren gehen. Nur die Bildkachel wird deshalb wieder
 * hell hinterlegt; die eigentliche Grafik und die umgebenden Lernttexte
 * bleiben unverändert. */
html[data-user-contrast="high"] .lesson .bg-image {
  background-color: #fff !important;
}

/* Die Überschrift der Passwort-/Projekttresor-Szene liegt innerhalb einer
 * bewusst erhaltenen hellen Szenengrafik. Die globale helle Kontrastschrift
 * wäre darauf nahezu unsichtbar; hier braucht sie daher explizit Schwarz. */
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] div.code h6 {
  color: #000 !important;
  text-shadow: 0 0 1px #fff;
}

/* Der handgezeichnete Standardrahmen besitzt absichtlich asymmetrische
 * Rundungen. Im Kontrastmodus kann die stark ausgeprägte obere rechte
 * Rundung jedoch wie ein angeschnittener Modalrand wirken. Kontrast-Modals
 * erhalten deshalb einen klaren, symmetrischen Rahmen; Inhalte bleiben
 * innerhalb des Rahmens sauber abgeschnitten. */
html[data-user-contrast="high"] .modal-content.ha-border-sketchy {
  box-sizing: border-box;
  border: 2px solid #fff !important;
  border-radius: 1rem !important;
  overflow: hidden;
}

/*
 * Die Memory-Rückseite ist im normalen Theme eine großformatige, leuchtende
 * Bilddatei. Auf schwarzem Kontrasthintergrund wirkt ihr Schatten größer als
 * die eigentliche Karte. Die originale Rückseiten-Grafik bleibt daher
 * sichtbar; ein neutraler Rahmen grenzt die echte Kartenfläche klar ab.
 * Vorderseiten und damit die eigentlichen Lerninhalte bleiben unverändert.
 */
html[data-user-contrast="high"][data-a11y-interactive-surface="memory"] .memory-card:is(.backside, .frontside) {
  box-sizing: border-box;
  border: 2px solid #fff !important;
  border-radius: 0.25rem;
  /* Nicht die Hintergrund-Kurzschreibweise verwenden: Sie würde die
   * Rückseiten-Grafik der Karte löschen. */
  background-color: #000 !important;
  overflow: hidden;
}

/*
 * Dialogszenen: Die Sprecherblasen verwenden im Standardtheme Cyan bzw.
 * Türkis mit einer dunkelblauen Handschrift. Auf schwarzem Hintergrund ist
 * das nicht ausreichend lesbar. Die Szenengrafik und die Avatare bleiben
 * unverändert; ausschließlich die beiden dynamisch erzeugten Chatblasen
 * erhalten eine eindeutige Schwarz-Weiß-Darstellung.
 */
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] div#dialog :is(.msg, .msg-rta) {
  color: #fff !important;
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] div#dialog :is(.msg, .msg-rta) :is(.text, .text-l, .text-r, .pen_text, p) {
  color: #fff !important;
  text-shadow: none !important;
}

/* Die Sprechblasen-Spitzen übernehmen die Kontrastfarbe der jeweiligen
 * Blase. Sie bleiben als Orientierung erhalten, statt ausgeblendet zu
 * werden. */
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] div#dialog .msg::before,
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] div#dialog .msg-rta::after {
  border-color: transparent #000 transparent transparent !important;
}

html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] div#dialog .msg-rta::after {
  border-color: #000 transparent transparent transparent !important;
}

html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] div#dialog img.circle {
  border: 2px solid #fff !important;
}

/* Die eigenständige Chat-Oberfläche ist ein generisches React-Bundle. Ihre
 * Farben werden produktseitig nur über die semantische Chat-Policy angepasst;
 * Nachrichten, Eingaben, Tabs und Fokus bleiben funktional unverändert. */
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] :is(.head-bar, .left-col, .drawer-header, .chat-input-container, .tab-item.active, .tab-item-content, .chat-message-item, .room-list-content) {
  color: #fff !important;
  background: #000 !important;
  border-color: #fff !important;
}

/* Kopfzeile, Raumliste und Chatfläche erhalten eigene sichtbare Bereiche.
 * Innere Schatten statt Rahmen bewahren dabei die berechneten Flex-Maße der
 * Chat-Oberfläche und vermeiden horizontale Überläufe bei großen Textstufen. */
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] .head-bar,
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] .drawer-header {
  box-shadow: inset 0 -1px #fff !important;
}

html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] .left-col {
  box-shadow: inset -3px 0 #fff !important;
}

/* Die Bedienflächen enden bündig an der 1-px-Kopfzeilen-Trennlinie, statt
 * darunter hervorzuragen. Das gilt ebenso für die mobilen Menü-Controls. */
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] :is(.tab-item, .settings-icon-container, .toggle-button-container, .drawer-close-button-container) {
  height: calc(52px - 1px) !important;
}

/* Material-UI berechnet IconButtons aus Icon, Padding und Rahmen. Eine
 * explizite Größe verhindert, dass ihr 2-px-Kontrastrahmen über die
 * Kopfzeilen-Trennlinie hinausragt. */
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] :is(.settings-icon-container, .toggle-button-container, .drawer-close-button-container) > button {
  width: calc(52px - 1px) !important;
  min-width: calc(52px - 1px) !important;
  height: calc(52px - 1px) !important;
  padding: 0 !important;
}

html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] :is(.content-container, .right-col, .chat-container) {
  min-width: 0 !important;
}

html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] :is(.chat-message-item, .chat-input-container, .tab-item, .chat-room-list > li, .chat-user-list > li, .text-headline, .text-content, .text-small, .chat-message-time) {
  color: #fff !important;
}

html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] :is(textarea, input, select, button):not(.emoji-picker-react button) {
  box-sizing: border-box !important;
  color: #fff !important;
  background: #000 !important;
  border: 2px solid #fff !important;
}

html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] :is(button:not(.emoji-picker-react button), .tab-item):hover,
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] :is(button:not(.emoji-picker-react button), .tab-item):focus-visible {
  color: #000 !important;
  background: #ffff00 !important;
  border-color: #ffff00 !important;
}

html[data-user-contrast="high"] a,
html[data-user-contrast="high"] .link-primary {
  color: #00ffff !important;
  text-decoration: underline !important;
}

html[data-user-contrast="high"] :is(button:not(.emoji-picker-react button), .btn, input, select, textarea, .form-control, .form-select) {
  color: #fff !important;
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Der Picker ist selbst eine klar abgegrenzte Kontrastfläche. Seine
 * Kategorien und Emoji-Zellen nutzen jedoch ein festes, sehr dichtes Raster
 * sowie eigene Icon-Hintergründe. Der allgemeine 2-px-Buttonrahmen würde
 * diese Steuerelemente vergrößern und die Kategorie-Symbole übermalen.
 * Deshalb ist ausschließlich der äußere Picker kontrastiert; die innere
 * Komponente behält ihre vorgesehenen Maße und Grafiken. */
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] aside.emoji-picker-react {
  color: #fff !important;
  background: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

/* Die Kategorie-Symbole der Bibliothek sind eingebettete dunkle SVGs. Auf
 * der schwarzen Pickerfläche bleiben ihre Bilder erhalten, werden aber für
 * den Kontrastmodus lokal zu Weiß invertiert. */
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] aside.emoji-picker-react .emoji-categories button {
  width: 26px;
  background-size: 26px;
  background-color: transparent !important;
  border: 0 !important;
  filter: invert(1) grayscale(1) brightness(2) drop-shadow(0 0 0.65px #fff);
}

html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] aside.emoji-picker-react .emoji-categories button:hover,
html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] aside.emoji-picker-react .emoji-categories button:focus-visible {
  background-color: transparent !important;
  filter: invert(1) grayscale(1) brightness(2) drop-shadow(0 0 0.65px #fff) !important;
  opacity: 1 !important;
}

html[data-user-contrast="high"][data-a11y-interactive-surface="chat"] aside.emoji-picker-react button:focus-visible {
  outline: 2px solid #ffff00 !important;
  outline-offset: -2px;
}

/*
 * m-02-01-02: Die Logindaten werden über einer bewusst erhaltenen
 * Szenengrafik eingegeben. Der allgemeine Kontrast-Selektor würde jedes
 * Input über seine gezeichnete Fläche hinaus vergrößern. Deshalb bleibt die
 * Illustration selbst unverändert; nur der nutzbare Innenbereich wird als
 * kontrastreiches Eingabefeld gezeichnet. Die erklärende Kopie liegt auf der
 * hellgrauen Fensterfläche und erhält explizit dunkle Schrift.
 */
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 div.login,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 div.login :is(p, h6) {
  color: #000 !important;
  text-shadow: 0 0 1px #fff;
}

html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 div.login p {
  padding-left: 1.5rem !important;
}

html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 div.login h6 {
  padding-left: 2.5rem !important;
}

/* Der äußere Spielcontainer und der React-Spielcontainer bleiben transparent.
 * Der allgemeine Kontrastmodus behandelt React-Wrapper bewusst nicht mehr
 * pauschal als schwarze Flächen. Diese Regel sichert zusätzlich die bewusst
 * erhaltene Szenengrafik von m-02-01-02 ab. Schwarz gehört hier ausschließlich
 * in die tatsächlich editierbaren Felder. */
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] main:has(.m-02-01-02) > .container,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 #root > .app-container.bs,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 #root > .app-container.bs > .content-container,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 #root > .app-container.bs > .content-container > .game-container,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 #root,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 #root .single-input-container,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 #root .single-input-container > div {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 :is(div.inputs-container, #root div.inputs-container) {
  box-sizing: border-box;
  padding-top: calc(0.4rem - 2px);
}

html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 :is(div.inputs-container, #root div.inputs-container) input[type="text"] {
  box-sizing: border-box;
  display: block;
  width: calc(100% - 1.65rem);
  height: calc(100% - 0.35rem);
  min-height: 0;
  margin: 0;
  padding: 0 0.35rem;
  color: #fff !important;
  background-color: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Der modulbezogene Prüf-Button besitzt eine eigene gezeichnete Fläche.
 * Die allgemeine Kontrastregel ersetzt sonst diese Grafik durch einen breiten
 * schwarzen Balken. Die Grafik bleibt daher erhalten; sie ist kein
 * Texteingabefeld und wird nicht als schwarze Formularfläche behandelt. */
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] .m-02-01-02 button#check-solution-btn.button-link {
  width: var(--ha-check-button-size-width) !important;
  height: var(--ha-check-button-size-height) !important;
  padding: 0.5rem !important;
  color: var(--ha-secondaryTextColor) !important;
  background-image: var(--ha-input-field-bg-image-m-02-01-02-03) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: var(--ha-check-button-size-width) var(--ha-check-button-size-height) !important;
  border: 0 !important;
}

/* Diese vier Passwort-/React-Szenen liegen auf bewusst erhaltenen hellen
 * Bildschirmgrafiken. Ihre Originaltypografie bleibt im Kontrastmodus
 * unverändert; nur echte Eingabefelder erhalten die kontrastreiche Darstellung.
 * Die Wrapper werden explizit transparent gehalten, damit keine dunkle Fläche
 * über die Szenengrafik gelegt wird. */
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] main:has(:is(.m-04-01-02, .m-04-01-06, .m-04-02-04, .m-06-02-01)) > .container,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] :is(.m-04-01-02, .m-04-01-06, .m-04-02-04, .m-06-02-01) #root .app-container.bs,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] :is(.m-04-01-02, .m-04-01-06, .m-04-02-04, .m-06-02-01) #root .content-container,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] :is(.m-04-01-02, .m-04-01-06, .m-04-02-04, .m-06-02-01) #root .game-container {
  background: transparent !important;
  background-color: transparent !important;
}

/* Dialoge und Hinweise behalten ihren einheitlichen schwarzen Untergrund.
 * Der Hintergrund der aktuellen Szene bleibt durch einen halbtransparenten
 * Backdrop sichtbar; Hinweise und Lösungsrückmeldungen werden nicht mehr als
 * helle Bootstrap-Alerts dargestellt. */
html[data-user-contrast="high"] :is(.modal-content, .toast) :is(.modal-header, .modal-body, .modal-footer, .toast-header, .toast-body, .remaining-trials-message, .finished-message-message, .messages, .notice) {
  color: #fff !important;
  background-color: transparent !important;
  border-color: #fff !important;
}

html[data-user-contrast="high"] .modal-backdrop.show {
  opacity: 0.55 !important;
}

html[data-user-contrast="high"] .highscore-notice,
html[data-user-contrast="high"] .highscore-notice * {
  color: #fff !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
}

/* Bootstrap zeichnet das × des btn-close normalerweise als Hintergrundbild.
 * Das wird im Kontrastmodus bewusst entfernt; deshalb wird ein echtes,
 * kontrastreiches Zeichen ergänzt. */
html[data-user-contrast="high"] .btn-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0 !important;
  opacity: 1 !important;
  color: #fff !important;
  background-color: #000 !important;
  background-image: none !important;
  border: 2px solid #fff !important;
}

html[data-user-contrast="high"] .btn-close::before {
  content: "×";
  display: block;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

/* Die Header-Navigation bleibt auch im Kontrastmodus eine Navigation und
 * keine Reihe generischer Rahmen-Buttons. Der sichtbare Fokus bleibt als
 * barrierefreie Ausnahme erhalten. */
html[data-user-contrast="high"] :is(header, .main-header) button.ha-nav-link,
html[data-user-contrast="high"] :is(header, .main-header) button.ha-nav-link:hover,
html[data-user-contrast="high"] :is(header, .main-header) button.ha-nav-link:active {
  padding: 0 !important;
  color: var(--ha-primaryTextColor) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

html[data-user-contrast="high"] :is(header, .main-header) button.ha-nav-link > i {
  color: var(--ha-primaryDarkColor) !important;
}

html[data-user-contrast="high"] :is(header, .main-header) button.ha-nav-link:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}

html[data-user-contrast="high"] :is(button, .btn):not(.emoji-picker-react button):not(:disabled):hover,
html[data-user-contrast="high"] :is(button, .btn):not(.emoji-picker-react button):not(:disabled):focus-visible {
  color: #000 !important;
  background: #ffff00 !important;
  border-color: #ffff00 !important;
}

html[data-user-contrast="high"] :is(input, select, textarea)::placeholder {
  color: #d7d7d7 !important;
  opacity: 1;
}

html[data-user-contrast="high"] :focus-visible {
  outline: 3px solid #ffff00 !important;
  outline-offset: 3px !important;
}

html[data-user-contrast="high"] :disabled,
html[data-user-contrast="high"] .disabled {
  color: #a8a8a8 !important;
  border-color: #a8a8a8 !important;
  opacity: 1 !important;
}

html[data-user-contrast="high"] .alert-success,
html[data-user-contrast="high"] .text-success {
  color: #7dff9b !important;
}

html[data-user-contrast="high"] .alert-danger,
html[data-user-contrast="high"] .text-danger,
html[data-user-contrast="high"] .invalid-feedback {
  color: #ff8d8d !important;
}

html[data-user-contrast="high"] .ha-accessibility-control {
  color: #fff !important;
  background: #000 !important;
  border-color: #fff !important;
}

html[data-user-contrast="high"] .ha-accessibility-control[aria-pressed="true"] {
  color: #000 !important;
  background: #ffff00 !important;
}

@media (forced-colors: active) {
  .ha-accessibility-control {
    forced-color-adjust: auto;
  }
}

@media (prefers-contrast: more) {
  html:not([data-user-contrast="default"]) :focus-visible {
    outline-width: 3px;
  }
}

/*
 * Szenen mit eingebetteten React-Spielen
 *
 * Diese vier Szenen zeichnen ihre Bedienoberfläche selbst auf einer hellen
 * Bildschirmgrafik. Die generischen Kontrastregeln für .container und die
 * React-Wrapper dürfen diese Grafik weder mit einer schwarzen Fläche
 * überdecken noch ihre vorgesehene Textfarbe ersetzen. Nur echte Formular-
 * eingaben bleiben als schwarze, kontrastreiche Eingabefelder erhalten.
 */
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] main:has(:is(.m-04-01-02, .m-04-01-06, .m-04-02-04, .m-06-02-01)) > .container,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] :is(.m-04-01-02, .m-04-01-06, .m-04-02-04, .m-06-02-01),
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] :is(.m-04-01-02, .m-04-01-06, .m-04-02-04, .m-06-02-01) #root,
html[data-user-contrast="high"][data-a11y-text-surface="light-media"] :is(.m-04-01-02, .m-04-01-06, .m-04-02-04, .m-06-02-01) :is(.app-container, .app-container.bs, .content-container, .game-container, .single-input-container, .single-input-container > div) {
  color: #000 !important;
  background-color: transparent !important;
}

html[data-user-contrast="high"][data-a11y-text-surface="light-media"] :is(.m-04-01-02, .m-04-01-06, .m-04-02-04, .m-06-02-01) :is(input, select, textarea) {
  color: #fff !important;
  background-color: #000 !important;
  border-color: #fff !important;
}

/* m-04-02-02 deklariert diese Ausnahme zentral als mediaSurface. Das Icon
 * bleibt unverändert; nur sein transparenter Hintergrund wird lesbar. */
html[data-user-contrast="high"][data-a11y-media-surface="light-icon"] .m-04-02-02 .card-body :is(img, .bg-image) {
  background-color: #fff !important;
}

/* Alle Hinweise, Lösungsrückmeldungen und Bootstrap-Dialoge verwenden dieselbe
 * kontrastreiche Dialogfläche. Der Backdrop bleibt halbtransparent, damit die
 * bearbeitete Szene im Hintergrund weiterhin erkennbar ist. */
html[data-user-contrast="high"] :is(.modal-content, .toast.ha-toast, .toast-container .toast) {
  color: #fff !important;
  background-color: #000 !important;
  border-color: #fff !important;
}

html[data-user-contrast="high"] :is(.modal-content, .toast.ha-toast, .toast-container .toast) :is(.modal-header, .modal-body, .modal-footer, .toast-header, .toast-body, .remaining-trials-message, .finished-message-message, .messages, .notice, p, span, strong, em, small, h1, h2, h3, h4, h5, h6) {
  color: #fff !important;
  background-color: transparent !important;
  border-color: #fff !important;
}

html[data-user-contrast="high"] .modal-backdrop.show {
  opacity: 0.55 !important;
}

/* Der Highscore-Hinweis darf nicht auf die Bootstrap-Standardfläche
 * zurückfallen. Bei vergrößerter Schrift erhält die Statistikspalte zudem
 * ausreichend Platz für die vollständige Sternebewertung. */
html[data-user-contrast="high"] :is(.highscore-notice, .highscore-notice.alert, .highscore-notice.alert-light),
html[data-user-contrast="high"] :is(.highscore-notice, .highscore-notice.alert, .highscore-notice.alert-light) * {
  color: #fff !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
}

/*
 * Header-Navigation
 *
 * Der Kontrastmodus darf am Hauptmenü ausschließlich Farben verändern.
 * Maße, Schriftgrad und Abstände entsprechen daher bewusst den Regeln aus
 * theme.css. Insbesondere darf die globale Kontrastregel für Links weder die
 * Beschriftung unterdrücken noch die Bootstrap-Navigation auseinanderziehen.
 */
html[data-user-contrast="high"] .main-header .navbar-nav > .nav-item {
  margin-left: 0.875rem !important;
  font-size: 1rem !important;
  color: #fff !important;
}

html[data-user-contrast="high"] .main-header .navbar-nav > .nav-item > form {
  margin: 0 auto !important;
}

html[data-user-contrast="high"] .main-header .navbar-nav :is(a, button).ha-nav-link,
html[data-user-contrast="high"] .main-header .navbar-nav :is(a, button).ha-nav-link:hover,
html[data-user-contrast="high"] .main-header .navbar-nav :is(a, button).ha-nav-link:active,
html[data-user-contrast="high"] .main-header .navbar-nav :is(a, button).ha-nav-link:focus {
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: #fff !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 0.875rem !important;
  text-align: center !important;
  text-decoration: none !important;
}

html[data-user-contrast="high"] .main-header .navbar-nav :is(a, button).ha-nav-link > i {
  color: var(--ha-primaryDarkColor) !important;
  font-size: 1.4rem !important;
}

html[data-user-contrast="high"] .main-header .navbar-nav :is(a, button).ha-nav-link > span {
  color: #fff !important;
}

html[data-user-contrast="high"] .main-header .navbar-nav :is(a, button).ha-nav-link:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}

/*
 * m-06-02-01 – RAS-Codewalzen
 *
 * Die Walzen sind eine echte Bedienkomponente innerhalb einer ansonsten
 * bewusst unveränderten Bildschirmgrafik. Ihre bisher grauen Pfeilflächen
 * und blau-grauen Zeichen bieten im Kontrastmodus keinen verlässlichen
 * Kontrast. Deshalb werden ausschließlich Walze und Pfeilflächen auf die
 * kontrastreiche Schwarz-Weiß-Darstellung umgestellt.
 */
html[data-user-contrast="high"] .m-06-02-01 #root .codereel {
  background-color: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

html[data-user-contrast="high"] .m-06-02-01 #root :is(.codereel-item, .codereel-item.center-item) {
  color: #fff !important;
  text-shadow: none !important;
}

html[data-user-contrast="high"] .m-06-02-01 #root .codereel-button {
  color: #fff !important;
  background-color: #000 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html[data-user-contrast="high"] .m-06-02-01 #root .codereel-button :is(svg, path) {
  fill: currentColor !important;
}

html[data-user-contrast="high"] .m-06-02-01 #root .codereel-button:hover,
html[data-user-contrast="high"] .m-06-02-01 #root .codereel-button:focus-visible {
  color: #000 !important;
  background-color: #ffff00 !important;
  border-color: #ffff00 !important;
  outline: 3px solid #ffff00 !important;
  outline-offset: 2px !important;
}

html[data-user-contrast="high"] .m-06-02-01 #root .codereel-button.disabled {
  color: #fff !important;
  background-color: #000 !important;
  border-color: #fff !important;
  opacity: 0.7 !important;
}

/*
 * Info-Modal
 *
 * Die Bootstrap-Listengruppen behalten sonst ihre helle Standardfläche. Das
 * überdeckt im Kontrastmodus die ebenfalls helle Schrift und macht die
 * Inhalte der Info-Ansicht unlesbar. Die Ausnahme ist bewusst auf dieses
 * Modal begrenzt; andere Listen behalten ihre jeweils eigene Darstellung.
 */
html[data-user-contrast="high"] #aboutUsModal :is(.list-group, .list-group-item) {
  color: #fff !important;
  background-color: #000 !important;
  border-color: #fff !important;
}

html[data-user-contrast="high"] #aboutUsModal .list-group-item :is(div, span, small, strong, p) {
  color: #fff !important;
  background-color: transparent !important;
}

html[data-user-contrast="high"] #aboutUsModal .text-muted {
  color: #fff !important;
  opacity: 1 !important;
}

html[data-user-contrast="high"] #aboutUsModal a {
  color: #00ffff !important;
}

/*
 * Wissensdatenbank
 *
 * Die Inhaltslinks sind Textnavigation, keine Aktionsschaltflächen. Im
 * Kontrastmodus bleiben sie als unterstrichene Links sichtbar, ihr
 * Tastaturfokus wird weiterhin deutlich markiert.
 */
html[data-user-contrast="high"] .ha-knowledge-link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-decoration: underline !important;
}

html[data-user-contrast="high"] .ha-knowledge-link:focus-visible {
  outline: 3px solid #ffff00 !important;
  outline-offset: 3px !important;
  text-decoration-thickness: 2px;
}