@media (forced-colors: active) {

   /* Hover: Buttons und Links */
   button:not(:disabled):hover, a:hover {
      forced-color-adjust: none;
      background-color: Highlight !important;
      color: HighlightText !important;
      border-color: Highlight !important;
   }

      button:not(:disabled):hover *, a:hover * {
         background-color: Highlight !important;
         color: HighlightText !important;
      }

      button:not(:disabled):hover * {
         border-color: HighlightText !important;
      }

   /* ButtonFace als background-color von Buttons */
   button, button * {
      forced-color-adjust: none; /* es müssen alle Farben überschrieben werden, da in Chrome die ButtonFace sonst nicht durchgängig gesetzt wird */
      background-color: ButtonFace !important;
      color: ButtonText !important;
      border-color: ButtonBorder !important;
   }

      button:disabled, button:disabled * {
         background-color: ButtonFace !important;
         color: GrayText !important;
         border-color: GrayText !important;
      }

   /*DxSplitter Styling --> DevExpress macht selbst gar nichts dafür*/
   .dxbl-splitter-separator {
      forced-color-adjust: none; /* es müssen alle Farben überschrieben werden, da in Chrome die ButtonFace sonst nicht durchgängig gesetzt wird */
      background-color: ButtonFace !important;
      --dxbl-splitter-button-color: ButtonText !important;
      --dxbl-splitter-color: ButtonText !important;
      --dxbl-splitter-resize-handle-color: ButtonText !important;
   }

      .dxbl-splitter-separator:hover, .dxbl-splitter-separator:active {
         background-color: Highlight !important;
         --dxbl-splitter-button-color: HighlightText !important;
         --dxbl-splitter-resize-handle-color: HighlightText !important;
         --dxbl-splitter-button-hover-color: HighlightText;
         --dxbl-splitter-resize-handle-hover-color: HighlightText;
      }

   /*Umrandung für DxAccordion Header entfernen*/
   .dxbl-accordion-item-text-container {
      border: none !important;
   }

   /* Umrandung der Label in FormLayouts entfernen (sowohl DxFormLayout als auch CxFormLayout) */
   .dxbl-fl-cpt.dxbl-text {
      border: none;
   }

   /* Umrandung der Caption von DxFormLayoutGroup entfernen */
   .dxbl-group-header > .dxbl-text {
      border: none;
   }

   /* Switch einer DxCheckbox im Switch-Mode sichtbar machen */
   .dxbl-checkbox-switch .dxbl-checkbox-check-element {
      --dxbl-checkbox-switch-element-bg: CanvasText;
      --dxbl-checkbox-switch-element-unchecked-bg: CanvasText;
   }

   /* Umrandungen um die gesamte DxCheckBox (auch im Switch-Mode) und DxRadio entfernen (Checkbox mit Text) */
   .dxbl-checkbox {
      border: none !important;
   }

      /* TreeView Check-All-Checkbox: Border-Bottom soll auch im Kontrastmodus sichtbar sein */
      .dxbl-checkbox.dxbl-treeview-checkbox-check-all {
         border-bottom: var(--dxbl-treeview-check-all-border-bottom-width) var(--dxbl-treeview-check-all-border-bottom-style) transparent !important;
      }

      /* Umrandung um die eigentliche Checkbox (auch im Switch-Mode) einfügen */
      .dxbl-checkbox:not(.dxbl-checkbox-radio) div.dxbl-checkbox-check-element {
         outline: 1px solid transparent !important;
      }

   /* DxCheckbox: die Border, die es ausschließlich im Unchecked-State gibt, entfernen (es gibt jetzt eine Umrandung für alle States) */
   .dxbl-checkbox-check-element {
      --dxbl-checkbox-check-element-unchecked-border-width: 0;
   }

   /* CxCheckbox */
   .cx-check-box.dxbl-checkbox-unchecked .dxbl-checkbox-check-element {
      opacity: 100% !important;
   }

   /* Indeterminate-State einer DxCheckBox sichtbar machen */
   .dxbl-checkbox-indeterminate .dxbl-checkbox-check-element::before {
      background-color: CanvasText !important;
   }

   /* States einer DxCheckbox in allen Kontrastdesigns sichtbar machen */
   .dxbl-checkbox .dxbl-checkbox-check-element .dxbl-image {
      color: CanvasText !important;
   }

   /* DxRadio: Checked-State sichtbar machen */
   .dxbl-checkbox-radio .dxbl-checkbox-check-element {
      --dxbl-checkbox-radio-check-bg: CanvasText;
      --dxbl-checkbox-radio-checked-hover-bg: CanvasText;
   }

   /* DxTreeView */
   /* Umrandung um Text entfernen */
   .dxbl-treeview-item-container .dxbl-treeview-item-text-container {
      border: none;
   }

   /* selected element markieren */
   .dxbl-treeview-item-container[aria-selected="true"] {
      forced-color-adjust: none;
      background-color: Highlight !important;
      color: HighlightText !important;
   }

      .dxbl-treeview-item-container[aria-selected="true"]:before {
         background-color: Highlight !important;
      }

   /* hover */
   .dxbl-treeview-item-container:hover {
      forced-color-adjust: none;
      background-color: Highlight !important;
      color: HighlightText !important;
   }

      .dxbl-treeview-item-container:hover:before {
         background-color: Highlight !important;
      }

   /* DxListbox: bei listboxen mit single-selection wird das selected element markiert */
   .dxbl-list-box[aria-multiselectable="false"] li[aria-selected="true"] {
      forced-color-adjust: none;
      background-color: Highlight !important;
      color: HighlightText !important;
   }

   .dxbl-list-box[aria-multiselectable="false"] li:not(.dxbl-list-box-empty-data-item):hover {
      forced-color-adjust: none;
      background-color: Highlight !important;
      color: HighlightText !important;
   }

   /* DxCombobox*/
   /* selected element markieren */
   .dxbl-dropdown-dialog li[aria-selected="true"] {
      forced-color-adjust: none;
      background-color: Highlight !important;
      color: HighlightText !important;
   }

      .dxbl-dropdown-dialog li[aria-selected="true"]:before {
         background-color: Highlight !important;
      }

   /* hover */
   .dxbl-edit-dropdown li:hover {
      forced-color-adjust: none;
      background-color: Highlight !important;
      color: HighlightText !important;
   }

      .dxbl-edit-dropdown li:hover:before {
         background-color: Highlight !important;
      }

   /* DxDateEdit: selected element markieren */
   .dxbl-calendar td[data-selected] {
      forced-color-adjust: none;
      background-color: Highlight !important;
      color: HighlightText !important;
   }

   /* DxWaitIndicator */
   div.dxbl-wait-indicator.dxbl-wait-indicator-spin > svg > g > circle {
      stroke: CanvasText;
   }

   div.dxbl-wait-indicator.dxbl-wait-indicator-spin > svg > g > g {
      stroke: CanvasText;
   }

   /* CxMenuItem: Umrandung (für den AppFrame) */
   .cx-menu-item:not(.main-menu-nav-item) a {
      outline: 1px solid transparent;
   }

   li.dxbl-menu-list-item.cx-menu-item button:not(.menu-item-container) {
      outline: 1px solid ButtonBorder;
   }

   li.dxbl-menu-list-item.cx-menu-item button:not(.menu-item-container):focus-visible {
      outline-color: Highlight !important;
   }

   /* CxMenuItemWithBadge */
   li.dxbl-menu-list-item.cx-menu-item.cx-menu-item-with-badge .dxbl-btn {
      outline: 1px solid ButtonBorder;
   }

   li.dxbl-menu-list-item.cx-menu-item.cx-menu-item-with-badge .dxbl-btn:focus-visible {
      outline-color: Highlight !important;
   }

      li.dxbl-menu-list-item.cx-menu-item.cx-menu-item-with-badge .dxbl-btn :is(span.dxbl-image, div.cx-menu-item__badge-wrapper, div.cx-menu-item__badge-wrapper span) {
         color: ButtonBorder !important;
      }

      li.dxbl-menu-list-item.cx-menu-item.cx-menu-item-with-badge .dxbl-btn:hover {
         background-color: Highlight !important;
         forced-color-adjust: none;
      }

      li.dxbl-menu-list-item.cx-menu-item.cx-menu-item-with-badge .dxbl-btn {
         background-color: ButtonFace !important;
         forced-color-adjust: none;
      }

         li.dxbl-menu-list-item.cx-menu-item.cx-menu-item-with-badge .dxbl-btn:hover :is(span.dxbl-image, div.cx-menu-item__badge-wrapper span) {
            color: HighlightText !important;
         }

         li.dxbl-menu-list-item.cx-menu-item.cx-menu-item-with-badge .dxbl-btn:hover div.cx-menu-item__badge-wrapper {
            outline: 1px solid HighlightText;
         }

         li.dxbl-menu-list-item.cx-menu-item.cx-menu-item-with-badge .dxbl-btn div.cx-menu-item__badge-wrapper {
            outline: 1px solid ButtonBorder;
         }

            li.dxbl-menu-list-item.cx-menu-item.cx-menu-item-with-badge .dxbl-btn:hover div.cx-menu-item__badge-wrapper span {
               background-color: Highlight !important;
            }

            li.dxbl-menu-list-item.cx-menu-item.cx-menu-item-with-badge .dxbl-btn div.cx-menu-item__badge-wrapper span {
               background-color: ButtonFace !important;
            }

   /* CxContextMenu: hover */
   .dxbl-context-menu-item:not(.dxbl-disabled):hover, .dxbl-context-menu-template:not(.dxbl-disabled):hover {
      forced-color-adjust: none;
      background-color: Highlight !important;
      color: HighlightText !important;
   }

      .dxbl-context-menu-item:not(.dxbl-disabled):hover:before {
         background-color: Highlight !important;
      }

   /* in Firefox werden die Standardfarben von Buttons und Links vom DevExpress Theme überschrieben*/
   button.dxbl-btn {
      color: ButtonText;
   }

   a.dxbl-btn {
      color: LinkText;
   }

   /* Scrollbar von DevExpress Komponenten sichtbar machen (betrifft mehrere Komponenten z.B. DxGrid, DxListBox, ...) */
   .dxbl-scroll-viewer-scroll-thumb {
      background-color: ButtonText !important;
      opacity: 1 !important;
   }

   /* DxFlyout (used in Scheduler) */
   .dxbl-flyout-dialog.dxbl-sc-tooltip.dxbl-sc-hint {
      border: 1px solid transparent !important;
   }

   /* CxDialog */
   .cx-dialog-content, .cx-dialog-footer {
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
   }

   .cx-dialog-footer {
      border-bottom: 1px solid transparent;
   }
}

@media (prefers-color-scheme: dark) and (forced-colors: active) {

   /* DxRichEdit */
   /* The textcursor is represented by an image (a dark line) that flashes by repeatedly appearing and disappearing.
     Since the color fo the image cannot be changed, the background color is adjusted instead - this color is visible when the cursor is hidden.
     This adjustment is only necessary with a dark theme, since the dark cursor is easily recognizable on its onw in a light theme. */
   .dxreInFocus .dxreSelCursor {
      background-color: CanvasText !important;
   }
}