/* =====================================================================
   DHTMLX Suite 5.2 – MATERIAL – WISO Dark Overrides
   Aktivierung über:
     document.documentElement.setAttribute("data-wiso-theme","dark")
   oder:
     data-wiso-theme="contrast-dark"
   ===================================================================== */

/* -----------------------------
   1) WISO Variablen
   ----------------------------- */
:root[data-wiso-theme="dark"],
:root[data-wiso-theme="contrast-dark"] {
    --wiso-bg: #2d3039; /* Haupt-Hintergrund */
    --wiso-surface: #3f4350; /* Flächen / Header / Tabs */
    --wiso-surface-2: #000000; /* sehr dunkel (sparsam) */
    --wiso-border-black: #000000; /* Linien / Ränder */
    --wiso-text: #cecece; /* Standard-Text */
    --wiso-text-dim: rgba(206, 206, 206, 0.5); /* gedimmt */
    --wiso-primary: #41A7E1; /* WISO Blau */
    --wiso-primary-2: #0b4f9e; /* dunkleres Blau */
    --wiso-warn: #F49519; /* Orange */
    --wiso-hoover-tree: #3f4350;
    --wiso-row-select: rgba(11, 79, 158,1);
}

/* Light bleibt “wie gehabt” -> keine Overrides nötig */
:root[data-wiso-theme="light"],
:root[data-wiso-theme="contrast-light"] {
    /* absichtlich leer */
}

/* ------------------------------------------------------------
   2) Global / Body / Viewports
      (Material nutzt trotzdem teils dhx_web Viewport-Klassen,
      z.B. dhxwins_vp_dhx_web – daher beide abdecken.)
   ---------------------------------------------------------- */

:root[data-wiso-theme="dark"] body,
:root[data-wiso-theme="contrast-dark"] body {
    background: var(--wiso-bg) !important;
    color: var(--wiso-bg) !important;
}
:root[data-wiso-theme="dark"] .objbox,
:root[data-wiso-theme="dark"] .xhdr {
    background: var(--wiso-bg) !important;
    border-color: var(--wiso-bg) !important;
}


/* DHTMLX Viewports (Window/Modal Layer) */
:root[data-wiso-theme="dark"] .dhxwins_vp_dhx_web,
:root[data-wiso-theme="contrast-dark"] .dhxwins_vp_dhx_web,
:root[data-wiso-theme="dark"] .dhxwins_vp_material,
:root[data-wiso-theme="contrast-dark"] .dhxwins_vp_material {
    background: var(--wiso-bg) !important;
    color: var(--wiso-bg) !important;
}

/* -----------------------------
3) LAYOUT (dhxlayout_base_material)
-> hier entstehen oft “weiße Ränder”
----------------------------- */
:root[data-wiso-theme="dark"] .dhxlayout_base_material div.dhx_cell_layout div.dhx_cell_hdr.dhx_cell_hdr_hidden,
:root[data-wiso-theme="contrast-dark"] .dhxlayout_base_material div.dhx_cell_layout div.dhx_cell_hdr.dhx_cell_hdr_hidden {
    border-top: 1px solid var(--wiso-surface-2);
}

:root[data-wiso-theme="dark"] .dhxtabbar_base_material div.dhxtabbar_tabs_top div.dhxtabbar_tabs,
:root[data-wiso-theme="contrast-dark"] .dhxtabbar_base_material div.dhxtabbar_tabs_top div.dhxtabbar_tabs {
    border: none;
}

:root[data-wiso-theme="dark"] .wiso_dataview-item,
:root[data-wiso-theme="contrast-dark"] .wiso_dataview-item {
    border: 1px solid #41A7E1 !important;
}
:root[data-wiso-theme="dark"] .dhxlayout_base_material,
:root[data-wiso-theme="contrast-dark"] .dhxlayout_base_material {
    background: var(--wiso-bg) !important;
}

:root[data-wiso-theme="dark"] .dhxlayout_cont,
:root[data-wiso-theme="contrast-dark"] .dhxlayout_cont {
    background: var(--wiso-bg) !important;
}
:root[data-wiso-theme="dark"] dhxlayout_base_material div.dhx_cell_layout div.dhx_cell_cont_layout,
:root[data-wiso-theme="contrast-dark"] dhxlayout_base_material div.dhx_cell_layout div.dhx_cell_cont_layout {
    position: absolute;
    border-color: red;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    z-index: 0;
}
/* Layout Cells / Container */
:root[data-wiso-theme="dark"] .dhxlayout_base_material .dhx_cell_layout,
:root[data-wiso-theme="contrast-dark"] .dhxlayout_base_material .dhx_cell_layout,
:root[data-wiso-theme="dark"] .dhxlayout_base_material .dhx_cell_cont_layout,
:root[data-wiso-theme="contrast-dark"] .dhxlayout_base_material .dhx_cell_cont_layout {
    background: var(--wiso-bg) !important;
    border-color: var( --wiso-bg) !important;
}

    /* Cell Header */
:root[data-wiso-theme="dark"] .dhxlayout_base_material .dhx_cell_hdr,
:root[data-wiso-theme="contrast-dark"] .dhxlayout_base_material .dhx_cell_hdr {
    background: var(--wiso-surface) !important;
    color: var(--wiso-surface-2) !important;
    border-color: var( --wiso-border-black) !important;
}

        /* Cell Header Text/Buttons */
        :root[data-wiso-theme="dark"] .dhxlayout_base_material .dhx_cell_hdr .dhx_cell_hdr_text,
        :root[data-wiso-theme="contrast-dark"] .dhxlayout_base_material .dhx_cell_hdr .dhx_cell_hdr_text {
            color: var(--wiso-text) !important;
        }

    /* Splitter / Resizer Lines */
    :root[data-wiso-theme="dark"] .dhxlayout_base_material .dhxlayout_sep,
    :root[data-wiso-theme="contrast-dark"] .dhxlayout_base_material .dhxlayout_sep,
    :root[data-wiso-theme="dark"] .dhxlayout_base_material .dhxlayout_sep .dhxlayout_sep_handle,
    :root[data-wiso-theme="contrast-dark"] .dhxlayout_base_material .dhxlayout_sep .dhxlayout_sep_handle {
        background: var(--wiso-surface) !important;
    }

/*------------------------------
4) TABBAR 
------------------------------*/

.dhxtabbar_base_material {
    background: var(--wiso-bg) !important;
}
    .dhxtabbar_base_material div.dhx_cell_tabbar div.dhx_cell_cont_tabbar {
        background: var(--wiso-surface) !important;
    }


.dhx_cell_tabbar {
    background: var(--wiso-surface) !important;
}

    :root[data-wiso-theme="dark"] .dhxtreeview_base_material .dhxtreeview_item,
    :root[data-wiso-theme="contrast-dark"] .dhxtreeview_base_material .dhxtreeview_item {
        color: var(--wiso-text) !important;
    }

/*Hintergrund komplett*/
.dhxtreeview_cont, div.dhxtreeview_cont {
    background: var(--wiso-bg) !important;
    border-color: var(--wiso-bg);
}
div.dhxtreeview_item_text.dhxtreeview_item_text_selected {
    background: var(--wiso-primary-2) !important;
}

:root[data-wiso-theme="contrast-dark"] .dhxtreeview_material div.dhxtreeview_cont div.dhxtreeview_area div.dhxtreeview_item div.dhxtreeview_item_text,
:root[data-wiso-theme="dark"] .dhxtreeview_material div.dhxtreeview_cont div.dhxtreeview_area div.dhxtreeview_item div.dhxtreeview_item_text {
    border-left: 3px solid var(--wiso-bg);
    color: var(--wiso-text);
    border-color: var(--wiso-bg);
    background: var(--wiso-bg);
}

.dhxtreeview_material div.dhxtreeview_cont div.dhxtreeview_area div.dhxtreeview_item div.dhxtreeview_item_text.dhxtreeview_item_text_selected div.dhxtreeview_item_label, .dhxtreeview_material div.dhxtreeview_cont div.dhxtreeview_area div.dhxtreeview_item div.dhxtreeview_item_text.dhxtreeview_item_text_selected:hover div.dhxtreeview_item_label {
    background-color: var(--wiso-primary-2);
}
div.dhxtreeview_item_text.dhxtreeview_item_text_selected div.dhxtreeview_item_label:hover {
    background-color: var(--wiso-primary-2) !important;
}

:root[data-wiso-theme="dark"] .dhxtreeview_material div.dhxtreeview_cont div.dhxtreeview_area div.dhxtreeview_item div.dhxtreeview_item_text:hover,
:root[data-wiso-theme="contrast-dark"] .dhxtreeview_material div.dhxtreeview_cont div.dhxtreeview_area div.dhxtreeview_item div.dhxtreeview_item_text:hover {
    background-color: var(--wiso-hoover-tree);
    border-color: var(--wiso-primary-2);
}

:root[data-wiso-theme="dark"] .dhxtreeview_material div.dhxtreeview_cont div.dhxtreeview_area div.dhxtreeview_item div.dhxtreeview_item_text:hover div.dhxtreeview_item_label,
:root[data-wiso-theme="contrast-dark"] .dhxtreeview_material div.dhxtreeview_cont div.dhxtreeview_area div.dhxtreeview_item div.dhxtreeview_item_text:hover div.dhxtreeview_item_label {
    background-color: var(--wiso-hoover-tree);
}

:root[data-wiso-theme="dark"] .dhxtreeview_base_material .dhxtreeview_item:hover,
:root[data-wiso-theme="contrast-dark"] .dhxtreeview_base_material .dhxtreeview_item:hover,
:root[data-wiso-theme="dark"] .dhxtreeview_material .dhxtreeview_item:hover,
:root[data-wiso-theme="contrast-dark"] .dhxtreeview_material .dhxtreeview_item:hover {
    background: var(--wiso-bg) !important;
}

:root[data-wiso-theme="dark"] .dhxtreeview_base_material .dhxtreeview_item--selected,
:root[data-wiso-theme="contrast-dark"] .dhxtreeview_base_material .dhxtreeview_item--selected,
:root[data-wiso-theme="dark"] .dhxtreeview_material .dhxtreeview_item--selected,
:root[data-wiso-theme="contrast-dark"] .dhxtreeview_material .dhxtreeview_item--selected {
    background: var(--wiso-bg) !important;
    color: var(--wiso-text) !important;
}

/* ---------------------------------------------------------------------
   5) TOOLBAR – Hintergrund + Buttons + Text
   (DHTMLX 5 hat je nach Komponente mehrere Toolbar-Klassen,
    deshalb bewusst breit gefasst.)
   --------------------------------------------------------------------- */
/* Toolbar Grundfläche + Border */
:root[data-wiso-theme="dark"] .dhx_toolbar_base_material, :root[data-wiso-theme="contrast-dark"] .dhx_toolbar_base_material, :root[data-wiso-theme="dark"] .dhx_toolbar_material, :root[data-wiso-theme="contrast-dark"] .dhx_toolbar_material {
    background: var(--wiso-surface-2) !important;
    color: var(--wiso-text) !important;
    border: 1px solid var( --wiso-border-black-strong) !important;
}

    /* DHTMLX5 Toolbar Buttons (div/a/spans je nach build)*/
:root[data-wiso-theme="dark"] .dhx_toolbar_base_material .dhx_toolbar_btn,
:root[data-wiso-theme="contrast-dark"] .dhx_toolbar_base_material .dhx_toolbar_btn,
:root[data-wiso-theme="dark"] .dhx_toolbar_material .dhx_toolbar_btn,
:root[data-wiso-theme="contrast-dark"] .dhx_toolbar_material .dhx_toolbar_btn {
    border: 1px solid var( --wiso-border-black-strong) !important;
    background: rgba(0,0,0,0.10) !important;
    color: var(--wiso-text) !important;
}
/* ==========================================================
   DHTMLX Toolbar Arrow – W6 Styled (2x Größe)
   Farbe: #0b4f9e
   ========================================================== */

/* Basis */
.dhx_toolbar_material div.dhx_toolbar_arw {
    display: flex;
    align-items: center; /* vertikal mittig */
    justify-content: center;
}

    /* Arrow */
    .dhx_toolbar_material div.dhx_toolbar_arw div.arwimg {
        width: 24px !important; /* doppelt so groß */
        height: 24px !important;
        position: relative;
        /* GIF deaktivieren */
        background-image: none !important;
        background-repeat: no-repeat !important;
        /* SVG Chevron */
        -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
<path fill='black' d='M3 6l5 5 5-5z'/>\
</svg>") center / 24px 24px no-repeat;
        mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\
<path fill='black' d='M3 6l5 5 5-5z'/>\
</svg>") center / 24px 24px no-repeat;
        background-color: #41A7E1 !important;
        transition: background-color 0.18s ease, transform 0.12s ease, opacity 0.12s ease;
        opacity: 0.95;
    }
    .dhx_toolbar_material div.dhx_toolbar_arw:hover div.arwimg {
        background-color: #1565c0 !important;
        transform: translateY(1px);
    }
    .dhx_toolbar_material div.dhx_toolbar_arw:active div.arwimg {
        background-color: #083c78 !important;
        transform: translateY(2px) scale(0.95);
    }

    /* ============================================================
   DHTMLX Toolbar Poly Menu (dhx_toolbar_poly_material)
   W6 Dark/Light Styling – passend zu deinem DOM
   ------------------------------------------------------------
   Ziel:
   - Dark/Contrast-Dark: dunkle Fläche, helle Schrift, klare Hover/Active
   - Light: sauber, modern, leicht abgesetzt
   - Icons: einheitliche Größe + Vertikalmitte
   ============================================================ */

/* ---------- Theme Tokens (Light default) ---------- */
:root{
  --w6menu-bg: #ffffff;
  --w6menu-bg2: #f4f6f9;
  --w6menu-text: rgba(15,23,42,0.92);
  --w6menu-muted: rgba(15,23,42,0.65);
  --w6menu-border: rgba(20,30,40,0.18);
  --w6menu-border2: rgba(20,30,40,0.12);
  --w6menu-shadow: 0 18px 55px rgba(0,0,0,0.22);
  --w6menu-accent: #0b4f9e; /* deine Farbe */
}

html[data-wiso-theme="dark"]{
  --w6menu-bg: #0b1220;
  --w6menu-bg2: #0f172a;
  --w6menu-text: rgba(235,242,255,0.92);
  --w6menu-muted: rgba(235,242,255,0.65);
  --w6menu-border: rgba(255,255,255,0.14);
  --w6menu-border2: rgba(255,255,255,0.10);
  --w6menu-shadow: 0 20px 70px rgba(0,0,0,0.62);
}

html[data-wiso-theme="contrast-dark"]{
  --w6menu-bg: #070c16;
  --w6menu-bg2: #0b1220;
  --w6menu-text: rgba(235,242,255,0.94);
  --w6menu-muted: rgba(235,242,255,0.70);
  --w6menu-border: rgba(255,255,255,0.20);
  --w6menu-border2: rgba(255,255,255,0.14);
  --w6menu-shadow: 0 22px 80px rgba(0,0,0,0.72);
}

/* ---------- Menu Container ---------- */
.dhx_toolbar_poly_material.dhx_toolbar_shadow{
  border-radius: 12px !important;
  overflow: hidden !important;

  background: var(--w6menu-bg) !important;
  border: 1px solid var(--w6menu-border) !important;
  box-shadow: var(--w6menu-shadow) !important;

  padding: 6px !important;
}

/* Table reset */
.dhx_toolbar_poly_material .buttons_cont{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

/* ---------- Menu Rows (Items) ---------- */
.dhx_toolbar_poly_material .tr_btn{
  height: 36px;
  cursor: pointer;
}

.dhx_toolbar_poly_material .td_btn_img,
.dhx_toolbar_poly_material .td_btn_txt{
  vertical-align: middle;
  padding: 0;
}

/* Inner layout: icon + text */
.dhx_toolbar_poly_material .td_btn_img{
  width: 38px;
  padding-left: 8px;
}

.dhx_toolbar_poly_material .td_btn_txt{
  padding: 0 12px 0 6px;
}

/* Icon */
.dhx_toolbar_poly_material img.btn_sel_img{
  width: 18px !important;
  height: 18px !important;
  display: inline-block;
  vertical-align: middle;
}

/* Text */
.dhx_toolbar_poly_material .btn_sel_text{
  font-size: 13px;
  font-weight: 600;
  color: var(--w6menu-text) !important;
  line-height: 36px; /* saubere Vertikalmitte */
  user-select: none;
  white-space: nowrap;
}

/* Divider line between rows (subtle) */
.dhx_toolbar_poly_material .tr_btn + .tr_btn td{
  border-top: 1px solid var(--w6menu-border2);
}

/* ---------- Hover / Active (Button feeling) ---------- */
.dhx_toolbar_poly_material .tr_btn:hover{
  background: color-mix(in srgb, var(--w6menu-accent) 10%, var(--w6menu-bg2)) !important;
}

.dhx_toolbar_poly_material .tr_btn:active{
  background: color-mix(in srgb, var(--w6menu-accent) 18%, var(--w6menu-bg2)) !important;
}

.dhx_toolbar_poly_material .tr_btn:hover .btn_sel_text{
  color: color-mix(in srgb, var(--w6menu-accent) 75%, var(--w6menu-text)) !important;
}

/* Fokus (Tastatur) */
.dhx_toolbar_poly_material .tr_btn:focus,
.dhx_toolbar_poly_material .tr_btn:focus-within{
  outline: 2px solid color-mix(in srgb, var(--w6menu-accent) 55%, transparent) !important;
  outline-offset: -2px;
}

/* Optional: scrollbars in dark */
html[data-wiso-theme="dark"] .dhx_toolbar_poly_material,
html[data-wiso-theme="contrast-dark"] .dhx_toolbar_poly_material{
  scrollbar-width: thin;
  scrollbar-color: rgba(42,55,80,0.75) rgba(11,18,32,0.35);
}
/* Falls Toolbar im Classic-Namespace kommt */
:root[data-wiso-theme="dark"] .dhxtoolbar_base_material,
:root[data-wiso-theme="contrast-dark"] .dhxtoolbar_base_material {
    border: 1px solid var( --wiso-border-black-strong) !important;
    background: var(--wiso-surface) !important;
}

/* Classic Toolbar Button (DHTMLX5) */
:root[data-wiso-theme="dark"] .dhxtoolbar_base_material .dhxtoolbar_btn,
:root[data-wiso-theme="contrast-dark"] .dhxtoolbar_base_material .dhxtoolbar_btn {
    border: 1px solid var( --wiso-border-black-strong) !important;
    background: rgba(0,0,0,0.10) !important;
}

/* Hover/Active */
:root[data-wiso-theme="dark"] .dhx_toolbar_base_material .dhx_toolbar_btn:hover,
:root[data-wiso-theme="contrast-dark"] .dhx_toolbar_base_material .dhx_toolbar_btn:hover,
:root[data-wiso-theme="dark"] .dhxtoolbar_base_material .dhxtoolbar_btn:hover,
:root[data-wiso-theme="contrast-dark"] .dhxtoolbar_base_material .dhxtoolbar_btn:hover {
    background: rgba(65,167,225,0.14) !important;
    border-color: var(--wiso-primary) !important;
}

:root[data-wiso-theme="dark"] .dhx_toolbar_base_material .dhx_toolbar_btn:active,
:root[data-wiso-theme="contrast-dark"] .dhx_toolbar_base_material .dhx_toolbar_btn:active,
:root[data-wiso-theme="dark"] .dhxtoolbar_base_material .dhxtoolbar_btn:active,
:root[data-wiso-theme="contrast-dark"] .dhxtoolbar_base_material .dhxtoolbar_btn:active {
    background: rgba(65,167,225,0.22) !important;
    border-color: var(--wiso-primary) !important;
}

:root[data-wiso-theme="dark"] .dhx_toolbar_base_material, 
:root[data-wiso-theme="contrast-dark"] .dhx_toolbar_base_material, :root[data-wiso-theme="dark"] .dhx_toolbar_material, :root[data-wiso-theme="contrast-dark"] .dhx_toolbar_material {
    background: var(--wiso-surface-2) !important;
    color: var(--wiso-text) !important;
    border-color: var(--wiso-surface-2) !important;
}

:root[data-wiso-theme="dark"] .dhx_toolbar_material div.dhx_toolbar_btn input.dhxtoolbar_input,
:root[data-wiso-theme="contrast-dark"] .dhx_toolbar_material div.dhx_toolbar_btn input.dhxtoolbar_input {
    position: relative;
    border: 1px solid var(--wiso-primary);
    background-color: var(--wiso-surface) !important;
}

:root[data-wiso-theme="dark"] .dhx_toolbar_btn dhxtoolbar_btn_def,
:root[data-wiso-theme="contrast-dark"] .dhx_toolbar_btn dhxtoolbar_btn_def {
    border-color: var( --wiso-border-black) !important;
}

:root[data-wiso-theme="dark"] .dhx_toolbar_base_material *,
:root[data-wiso-theme="contrast-dark"] .dhx_toolbar_base_material * {
    background: var(--wiso-surface-2) !important;
    color: var(--wiso-text) !important;
    border-color: var(--wiso-surface-2) !important;
}

/* Hover/Active (falls Buttons als div/a gerendert werden) 
:root[data-wiso-theme="dark"] .dhx_toolbar_base_material .dhx_toolbar_btn:hover,
:root[data-wiso-theme="contrast-dark"] .dhx_toolbar_base_material .dhx_toolbar_btn:hover,
:root[data-wiso-theme="dark"] .dhx_toolbar_material .dhx_toolbar_btn:hover,
:root[data-wiso-theme="contrast-dark"] .dhx_toolbar_material .dhx_toolbar_btn:hover {
    background: rgba(65,167,225,0.14) !important;
}
 */


/* ---------------------------------------------------------------------
6) WINDOWS – Header + Hintergrund + Border (Material)
--------------------------------------------------------------------- */
/* 
6.1) WINDOWS (Material)
-> Header/Content/Border
 */

:root[data-wiso-theme="dark"] .dhxwin_material,
:root[data-wiso-theme="contrast-dark"] .dhxwin_material {
    border-color: var( --wiso-border-black) !important;
    background: var(--wiso-bg) !important;
    color: var(--wiso-text) !important;
}

    :root[data-wiso-theme="dark"] .dhxwin_material .dhxwin_hdr,
    :root[data-wiso-theme="contrast-dark"] .dhxwin_material .dhxwin_hdr {
        background: var(--wiso-surface) !important;
        color: var(--wiso-text) !important;
        border-color: var( --wiso-border-black) !important;
    }

    :root[data-wiso-theme="dark"] .dhxwin_material .dhxwin_cont,
    :root[data-wiso-theme="contrast-dark"] .dhxwin_material .dhxwin_cont {
        background: var(--wiso-bg) !important;
        color: var(--wiso-text) !important;
    }


:root[data-wiso-theme="dark"] .dhxwins_vp_material div.dhxwin_hdr,
:root[data-wiso-theme="contrast-dark"] .dhxwins_vp_material div.dhxwin_hdr {
    background-color: var(--wiso-surface);
    color: var(--wiso-text);
}

:root[data-wiso-theme="dark"] .dhxwins_vp_material div.dhxwin_inactive div.dhxwin_hdr,
:root[data-wiso-theme="contrast-dark"] .dhxwins_vp_material div.dhxwin_inactive div.dhxwin_hdr {
    color: var(--wiso-text);
    background-color: var(--wiso-surface);
}

:root[data-wiso-theme="dark"] .dhxwins_vp_material div.dhxwins_mcover,
:root[data-wiso-theme="contrast-dark"] .dhxwins_vp_material div.dhxwins_mcover {
    background-color: var(--wiso-surface-2);
}

:root[data-wiso-theme="dark"] .dhxwin_material,
:root[data-wiso-theme="contrast-dark"] .dhxwin_material {
    background: var(--wiso-bg) !important;
    color: var(--wiso-text) !important;
    border-color: var( --wiso-border-black) !important;
}

:root[data-wiso-theme="dark"] .dhxwins_vp_material div.dhxwin_brd,
:root[data-wiso-theme="contrast-dark"] .dhxwins_vp_material div.dhxwin_brd {
    background: var(--wiso-bg);
}

:root[data-wiso-theme="dark"] .dhxwins_vp_material div.dhxwin_active,
:root[data-wiso-theme="dark"] .dhxwins_vp_material div.dhxwin_active {
    background-color: var(--wiso-bg);
}

:root[data-wiso-theme="dark"] .dhxwin_material .dhxwin_hdr,
:root[data-wiso-theme="contrast-dark"] .dhxwin_material .dhxwin_hdr {
    background: var(--wiso-surface) !important;
    color: var(--wiso-text) !important;
    border-bottom-color: var( --wiso-border-black) !important;
}

:root[data-wiso-theme="dark"] .dhxwin_material .dhxwin_cont,
:root[data-wiso-theme="contrast-dark"] .dhxwin_material .dhxwin_cont {
    background: var(--wiso-bg) !important;
    color: var(--wiso-text) !important;
}

/* Window title / buttons (falls separater Knoten) */
:root[data-wiso-theme="dark"] .dhxwin_material .dhxwin_hdr *,
:root[data-wiso-theme="contrast-dark"] .dhxwin_material .dhxwin_hdr * {
    color: var(--wiso-text) !important;
}


/* ---------------------------------------------------------------------
7) TABBAR – Tabs + Tabs-Hintergrund (Material)
(Leiste + einzelne Tabs + active/hover)
--------------------------------------------------------------------- */
/*Border Tab*/
:root[data-wiso-theme="dark"] .dhx_cell_cont_tabbar,
:root[data-wiso-theme="contrast-dark"] .dhx_cell_cont_tabbar {
    border-color: var(--wiso-surface) !important;
}

/*Tabs Hintergrund*/
    :root[data-wiso-theme="dark"] .dhxtabbar_tabs_cont_left,
    :root[data-wiso-theme="contrast-dark"] .dhxtabbar_tabs_cont_left {
        background: var(--wiso-surface) !important;
    }

:root[data-wiso-theme="dark"] .dhxtabbar_base_material div.dhxtabbar_tabs,
:root[data-wiso-theme="contrast-dark"] .dhxtabbar_base_material div.dhxtabbar_tabs {
    background-color: var(--wiso-bg);
}

    :root[data-wiso-theme="dark"] .dhxtabbar_base_material div.dhxtabbar_tabs div.dhxtabbar_tabs_base div.dhxtabbar_tab div.dhxtabbar_tab_text,
    :root[data-wiso-theme="contrast-dark"] .dhxtabbar_base_material div.dhxtabbar_tabs div.dhxtabbar_tabs_base div.dhxtabbar_tab div.dhxtabbar_tab_text {
        background-color: var(--wiso-surface);
    }
        /*Einzelne Tabs Hintergrund*/
    :root[data-wiso-theme="dark"] .dhxtabbar_base_material div.dhxtabbar_tabs div.dhxtabbar_tabs_base div.dhxtabbar_tab div.dhxtabbar_tab_text, :root[data-wiso-theme="dark"] .dhxtabbar_base_material div.dhxtabbar_tabs div.dhxtabbar_tabs_base div.dhxtabbar_tab div.dhxtabbar_tab_text,
    :root[data-wiso-theme="contrast-dark"] .dhxtabbar_base_material div.dhxtabbar_tabs div.dhxtabbar_tabs_base div.dhxtabbar_tab div.dhxtabbar_tab_text, :root[data-wiso-theme="dark"] .dhxtabbar_base_material div.dhxtabbar_tabs div.dhxtabbar_tabs_base div.dhxtabbar_tab div.dhxtabbar_tab_text {
        background-color: var(--wiso-bg);
    }

    /*Tabs inactiv*/
    :root[data-wiso-theme="dark"] .dhxtabbar_base_material div.dhxtabbar_tabs div.dhxtabbar_tabs_base div.dhxtabbar_tab,
    :root[data-wiso-theme="contrast-dark"] .dhxtabbar_base_material div.dhxtabbar_tabs div.dhxtabbar_tabs_base div.dhxtabbar_tab {
        background-color: var(--wiso-bg) !important;
        color: var(--wiso-text-dim);
    }

    /*Tabs activ*/
    :root[data-wiso-theme="dark"] .dhxtabbar_base_material div.dhxtabbar_tabs div.dhxtabbar_tabs_base div.dhxtabbar_tab.dhxtabbar_tab_actv,
    :root[data-wiso-theme="contrast-dark"] .dhxtabbar_base_material div.dhxtabbar_tabs div.dhxtabbar_tabs_base div.dhxtabbar_tab.dhxtabbar_tab_actv {
        color: var(--wiso-text);
        background-color: var(--wiso-primary) !important;
    }




    /* ---------------------------------------------------------------------
   8) GRID – Border innen + außen (weiß/grau -> dunkel)
   DHTMLX5 Grid kann je nach Version mehrere Klassen nutzen.
   Wir treffen beides: "material" + klassische .dhxgrid_obj.
   --------------------------------------------------------------------- */

/* -----------------------------
   8.1) GRID (gridbox_material)
   -> Header / Body / Borders / Selection
   ----------------------------- */
:root[data-wiso-theme="dark"] div.gridbox_material.gridbox,
:root[data-wiso-theme="contrast-dark"] div.gridbox_material.gridbox {
    background: var(--wiso-bg) !important;
    color: var(--wiso-text) !important;
    border-color: var( --wiso-border-black) !important;
}

    /* Grid header table cells */
    :root[data-wiso-theme="dark"] div.gridbox_material.gridbox table.hdr td,
    :root[data-wiso-theme="contrast-dark"] div.gridbox_material.gridbox table.hdr td {
        background: var(--wiso-surface) !important;
        color: var(--wiso-text) !important;
        border-color: var(--wiso-bg) !important;
    }

    /* Grid body table cells */
    :root[data-wiso-theme="dark"] div.gridbox_material.gridbox table.obj td,
    :root[data-wiso-theme="contrast-dark"] div.gridbox_material.gridbox table.obj td {
        background: var(--wiso-bg) !important;
        color: var(--wiso-text);
        border-color: var(--wiso-surface) !important;
    }
    /* Row hover */
    :root[data-wiso-theme="dark"] div.gridbox_material.gridbox table.obj tr:hover td,
    :root[data-wiso-theme="contrast-dark"] div.gridbox_material.gridbox table.obj tr:hover td {
        background: var(--wiso-row-select) !important;
    }

    /* Row selected (DHTMLX uses different classes depending on mode) */
    :root[data-wiso-theme="dark"] div.gridbox_material.gridbox table.obj tr.rowselected td,
    :root[data-wiso-theme="contrast-dark"] div.gridbox_material.gridbox table.obj tr.rowselected td,
    :root[data-wiso-theme="dark"] div.gridbox_material.gridbox table.obj tr.dhx_selected td,
    :root[data-wiso-theme="contrast-dark"] div.gridbox_material.gridbox table.obj tr.dhx_selected td {
        background: var(--wiso-row-select) !important;
        color: var(--wiso-text) !important;
        border-color: var(--wiso-surface) !important;
    }

/* Paging / footer lines (falls genutzt) */
:root[data-wiso-theme="dark"] .dhx_pager_info_material,
:root[data-wiso-theme="contrast-dark"] .dhx_pager_info_material {
    background: var(--wiso-bg) !important;
    color: var(--wiso-text) !important;
    border-color: var( --wiso-border-black) !important;
}



/*---------------------
9)FORM
----------------------- */

/* 
   9.1 SELECT / DROPDOWN / COMBO (Material Form)
   -> Hintergrund + Text + Popup-Liste

*/

:root[data-wiso-theme="dark"] .dhxform_obj_material fieldset.dhxform_fs,
:root[data-wiso-theme="contrast-dark"] .dhxform_obj_material fieldset.dhxform_fs {
    border: 1px solid var(--wiso-text) !important;
    margin: 0;
    padding: 5px 0 12px 0;
    clear: left;
    width: 100%;
}

    :root[data-wiso-theme="dark"] .dhxform_obj_material fieldset.dhxform_fs legend.fs_legend,
    :root[data-wiso-theme="contrast-dark"] .dhxform_obj_material fieldset.dhxform_fs legend.fs_legend {
        font-weight: normal;
        padding: 0 4px 1px 4px;
        margin-left: 5px;
        text-align: left;
        font-size: 14px;
        font-family: Roboto, Arial, Helvetica;
        color: var(--wiso-text);
    }

:root[data-wiso-theme="dark"] .dhxform_obj_material fieldset.fs_edit,
:root[data-wiso-theme="dark"] .dhxform_obj_material fieldset.fs_edit {
    border: 1px solid var(--wiso-primary) !important;
    margin: 0;
    padding: 5px 0 12px 0;
    clear: left;
    width: 100%;
}

/* SELECT*/
:root[data-wiso-theme="dark"] .dhxform_obj_material .dhxform_select,
:root[data-wiso-theme="contrast-dark"] .dhxform_obj_material .dhxform_select {
    border-color: var(--wiso-bg);
    background-color: var(--wiso-bg);
    color: var(--wiso-text);
}

    :root[data-wiso-theme="dark"] .dhxform_obj_material .dhxform_select:hover,
    :root[data-wiso-theme="contrast-dark"] .dhxform_obj_material .dhxform_select:hover {
        border-color: var(--wiso-primary);
        background-color: var(--wiso-bg);
    }
/* 
   9.2 LABELS / “zu dunkle Schrift”
   -> Form Labels, Toolbar Text, diverse Material Text-Klassen
 */
:root[data-wiso-theme="dark"] .dhxform_obj_material .dhxform_label,
:root[data-wiso-theme="contrast-dark"] .dhxform_obj_material .dhxform_label,
:root[data-wiso-theme="dark"] .dhxform_obj_material label,
:root[data-wiso-theme="contrast-dark"] .dhxform_obj_material label {
    color: var(--wiso-text) !important;
}

/* Placeholder/Hint eher gedimmt */
:root[data-wiso-theme="dark"] .dhxform_obj_material ::placeholder,
:root[data-wiso-theme="contrast-dark"] .dhxform_obj_material ::placeholder {
    color: var(--wiso-text-dim) !important;
}

/* Fokus-Farbe Material */
:root[data-wiso-theme="dark"] .dhxform_obj_material input:focus,
:root[data-wiso-theme="contrast-dark"] .dhxform_obj_material input:focus,
:root[data-wiso-theme="dark"] .dhxform_obj_material textarea:focus,
:root[data-wiso-theme="contrast-dark"] .dhxform_obj_material textarea:focus,
:root[data-wiso-theme="dark"] .dhxform_obj_material select:focus,
:root[data-wiso-theme="contrast-dark"] .dhxform_obj_material select:focus {
    border-color: var(--wiso-primary) !important;
    box-shadow: 0 0 0 2px rgba(65,167,225,0.18) !important;
}

:root[data-wiso-theme="dark"] .dhxform_obj_material,
:root[data-wiso-theme="contrast-dark"] .dhxform_obj_material {
    color: var(--wiso-text) !important;
    background-color: var(--wiso-bg);
}


    :root[data-wiso-theme="dark"] .dhxform_obj_material input,
    :root[data-wiso-theme="contrast-dark"] .dhxform_obj_material input,
    :root[data-wiso-theme="dark"] .dhxform_obj_material textarea,
    :root[data-wiso-theme="contrast-dark"] .dhxform_obj_material textarea {
        background: var(--wiso-bg);
        color: var(--wiso-text) !important;
        border-bottom-color: var( --wiso-border-black) !important;
    }

        /* Fokus-Farbe (Material) */
        :root[data-wiso-theme="dark"] .dhxform_obj_material input:focus,
        :root[data-wiso-theme="contrast-dark"] .dhxform_obj_material input:focus,
        :root[data-wiso-theme="dark"] .dhxform_obj_material textarea:focus,
        :root[data-wiso-theme="contrast-dark"] .dhxform_obj_material textarea:focus {
            border-bottom-color: var(--wiso-primary) !important;
        }

.dhxform_obj_material div.disabled input.dhxform_textarea.calendar {
    background-image: url(../imgs/dhxform_material/dhxform_image_calendar_dis.png);
    background-repeat: no-repeat !important;
    background-position: right 6px;
}

    /* Außenrahmen Grid */
    :root[data-wiso-theme="dark"] .dhxgrid_obj,
    :root[data-wiso-theme="contrast-dark"] .dhxgrid_obj,
    :root[data-wiso-theme="dark"] .dhxgrid_obj_material,
    :root[data-wiso-theme="contrast-dark"] .dhxgrid_obj_material {
        border: 1px solid var( --wiso-border-black-strong) !important;
        background: var(--wiso-bg) !important;
        color: var(--wiso-text) !important;
    }

        /* Header-Bereich Grid */
        :root[data-wiso-theme="dark"] .dhxgrid_obj .xhdr,
        :root[data-wiso-theme="contrast-dark"] .dhxgrid_obj .xhdr,
        :root[data-wiso-theme="dark"] .dhxgrid_obj_material .xhdr,
        :root[data-wiso-theme="contrast-dark"] .dhxgrid_obj_material .xhdr {
            background: var(--wiso-surface) !important;
            border-bottom: 1px solid var( --wiso-border-black-strong) !important;
        }

            /* Header-Zellen */
            :root[data-wiso-theme="dark"] .dhxgrid_obj .xhdr table,
            :root[data-wiso-theme="contrast-dark"] .dhxgrid_obj .xhdr table,
            :root[data-wiso-theme="dark"] .dhxgrid_obj_material .xhdr table,
            :root[data-wiso-theme="contrast-dark"] .dhxgrid_obj_material .xhdr table {
                color: var(--wiso-text) !important;
            }

            :root[data-wiso-theme="dark"] .dhxgrid_obj .xhdr td,
            :root[data-wiso-theme="contrast-dark"] .dhxgrid_obj .xhdr td,
            :root[data-wiso-theme="dark"] .dhxgrid_obj_material .xhdr td,
            :root[data-wiso-theme="contrast-dark"] .dhxgrid_obj_material .xhdr td {
                border-right: 1px solid var( --wiso-border-black-strong) !important;
                border-left: 1px solid var( --wiso-border-black-strong) !important;
                border-bottom: 1px solid var( --wiso-border-black-strong) !important;
            }

        /* Body/Cells Border */
        :root[data-wiso-theme="dark"] .dhxgrid_obj .objbox,
        :root[data-wiso-theme="contrast-dark"] .dhxgrid_obj .objbox,
        :root[data-wiso-theme="dark"] .dhxgrid_obj_material .objbox,
        :root[data-wiso-theme="contrast-dark"] .dhxgrid_obj_material .objbox {
            background: var(--wiso-bg) !important;
            border-top: 1px solid var( --wiso-border-black-strong) !important;
        }

:root[data-wiso-theme="dark"] .dhxgrid_obj .objbox table td,
:root[data-wiso-theme="contrast-dark"] .dhxgrid_obj .objbox table td,
:root[data-wiso-theme="dark"] .dhxgrid_obj_material .objbox table td,
:root[data-wiso-theme="contrast-dark"] .dhxgrid_obj_material .objbox table td {
    border-color: var( --wiso-border-black-strong) !important; /* das killt weiß/grau */
    color: var(--wiso-text) !important;
}

/* Grid Row Hover (optional modern) */
:root[data-wiso-theme="dark"] .dhxgrid_obj .objbox tr:hover td,
:root[data-wiso-theme="contrast-dark"] .dhxgrid_obj .objbox tr:hover td {
    background: rgba(0,0,0,0.20) !important;
}
/*-----------------------------------------
                    SIDEBAR
-------------------------------------------*/
:root[data-wiso-theme="dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side,
:root[data-wiso-theme="contrast-dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side {
    background-color: var(--wiso-bg);
}

:root[data-wiso-theme="dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item,
:root[data-wiso-theme="contrast-dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item {
    background-color: var(--wiso-surface);
    color: var(--wiso-text);
}

:root[data-wiso-theme="dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item:hover, div.dhxsidebar_bubble:hover,
:root[data-wiso-theme="contrast-dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item:hover, div.dhxsidebar_bubble:hover {
    background-color: var(--wiso-hoover-tree);
    color: var(--wiso-text);
}

:root[data-wiso-theme="dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item.dhxsidebar_item_selected,
:root[data-wiso-theme="contrast-dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item.dhxsidebar_item_selected {
    background-color: var(--wiso-primary-2);
}

:root[data-wiso-theme="dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side,
:root[data-wiso-theme="contrast-dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side {
    background-color: var(--wiso-bg);
    border-color: var( --wiso-border-black);
}

:root[data-wiso-theme="dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item div.dhxsidebar_bubble,
:root[data-wiso-theme="contrast-dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item div.dhxsidebar_bubble {
    background-color: var(--wiso-bg);
    border: 2px solid var(--wiso-warn);
    color: var(--wiso-warn);
}
:root[data-wiso-theme="dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item.dhxsidebar_item_selected div.dhxsidebar_bubble,
:root[data-wiso-theme="contrast-dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side div.dhxsidebar_side_items div.dhxsidebar_item.dhxsidebar_item_selected div.dhxsidebar_bubble {
    background-color: var(--wiso-bg);
}

:root[data-wiso-theme="dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhx_cell_sidebar div.dhx_cell_cont_sidebar,
:root[data-wiso-theme="contrast-dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhx_cell_sidebar div.dhx_cell_cont_sidebar {
    border-color: var(--wiso-bg);
}

:root[data-wiso-theme="dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side_cover,
:root[data-wiso-theme="contrast-dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_side_cover {
    background-color: var(--wiso-surface-2);
}

:root[data-wiso-theme="dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_arrows,
:root[data-wiso-theme="contrast-dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhxsidebar_arrows {
    border: 1px solid var(--wiso-bg);
}

:root[data-wiso-theme="dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhx_cell_sidebar,
:root[data-wiso-theme="contrast-dark"] .dhxsidebar_base_material div.dhxsidebar_cont div.dhx_cell_sidebar {
    background-color: var(--wiso-bg);
}


/* ============================================================
   W6 Design – DHTMLX v5 Toolbar (Material)
   Overwrite NUR: dark + contrast-dark
   Korrekturen:
   1) KEINE Toolbarhöhe ändern (keine height/padding am Container)
   2) Hover ohne Layout-Shifts (kein transform/size change)
   3) Press-Optik (ruhig, edel) per :active + optional class
   ============================================================ */

/* ------------------------------
   0) Tokens (nur in dark modes)
   ------------------------------ */

.dhxtabbar_base_material div.dhx_cell_tabbar div.dhx_cell_statusbar_def {
    background-color: #2d3039;
}



html[data-wiso-theme="dark"] .dhx_toolbar_material div.dhx_toolbar_arw.dhxtoolbar_btn_pres {
    border: none;
    background-color: #2d3039;
}

html[data-wiso-theme="dark"] .dhx_toolbar_material div.dhx_toolbar_arw.dhxtoolbar_btn_def {
    border: none !important;
}
html[data-wiso-theme="dark"] .dhx_toolbar_material div.dhx_toolbar_sep {
    border-color: #2d3039;
}
/* ============================================================
   W6 (Dark / Contrast-Dark) – DHX v5 Toolbar Hover (edel/ruhig)
   - keine Icon-/Button-Positionsänderung
   - nur sanfte Farb-/Shadow-/Border-Übergänge
   ============================================================ */

/* optional: gemeinsame Tokens (nur falls du willst) */
html[data-wiso-theme="dark"],
html[data-wiso-theme="contrast-dark"] {
    --w6tb-hover-bg: color-mix(in srgb, #0b4f9e 12%, #0f172a);
    --w6tb-hover-bd: color-mix(in srgb, #0b4f9e 35%, rgba(255,255,255,0.14));
    --w6tb-hover-glow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 18px rgba(0,0,0,0.30);
}


/* ✅ DEINE Hover-Klassen (dhxtoolbar_btn_over) – edel & stabil */
html[data-wiso-theme="contrast-dark"] .dhx_toolbar_material div.dhx_toolbar_btn.dhxtoolbar_btn_over,
html[data-wiso-theme="contrast-dark"] .dhx_toolbar_material div.dhx_toolbar_arw.dhxtoolbar_btn_over,
html[data-wiso-theme="dark"] .dhx_toolbar_material div.dhx_toolbar_btn.dhxtoolbar_btn_over,
html[data-wiso-theme="dark"] .dhx_toolbar_material div.dhx_toolbar_arw.dhxtoolbar_btn_over {
    background-color: var(--w6tb-hover-bg) !important;
    border-color: var(--w6tb-hover-bd) !important;
    box-shadow: var(--w6tb-hover-glow) !important;
        /* absolut ruhig: kein scaling, kein shift */
    transform: none !important;
}

html[data-wiso-theme="dark"] .dhx_toolbar_material div.dhx_toolbar_btn.dhxtoolbar_btn_over,
html[data-wiso-theme="dark"] .dhx_toolbar_material div.dhx_toolbar_arw.dhxtoolbar_btn_over {
    border: none;
}

html[data-wiso-theme="dark"] .dhx_toolbar_material div.dhx_toolbar_btn.dhxtoolbar_btn_over ,
html[data-wiso-theme="contrast-dark"] .dhx_toolbar_material div.dhx_toolbar_btn.dhxtoolbar_btn_over  {
    color: rgba(235,242,255,0.94) !important;
}

html[data-wiso-theme="dark"] .dhx_toolbar_material div.dhx_toolbar_btn input.dhxtoolbar_input,
html[data-wiso-theme="contrast-dark"] .dhx_toolbar_material div.dhx_toolbar_btn input.dhxtoolbar_input {
    color: white;
}

/* --------------------------------------------------
W6 Menübottom Hover mit runden Ecken (Dark)
-------------------------------------------------- */

/* Grund-Hover-Hintergrund */
html[data-wiso-theme="dark"]
div.dhx_toolbar_poly_material tr.tr_btn.tr_btn_over td,
html[data-wiso-theme="dark"]
div.dhx_toolbar_poly_material tr.tr_btn:hover td,
html[data-wiso-theme="contrast-dark"]
div.dhx_toolbar_poly_material tr.tr_btn.tr_btn_over td,
html[data-wiso-theme="contrast-dark"]
div.dhx_toolbar_poly_material tr.tr_btn:hover td {
    background-color: var(--w6tb-hover-bg) !important;
}

/* Linke Rundung */
div.dhx_toolbar_poly_material tr.tr_btn.tr_btn_over td:first-child,
div.dhx_toolbar_poly_material tr.tr_btn:hover td:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* Rechte Rundung */
div.dhx_toolbar_poly_material tr.tr_btn.tr_btn_over td:last-child,
div.dhx_toolbar_poly_material tr.tr_btn:hover td:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Basis */
.w6-tabbar-bg {
    position: relative;
    overflow: hidden;
}

    /* Background Layer */
    .w6-tabbar-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 1800px auto;
        opacity: 0.06;
        pointer-events: none;
        z-index: 0;
    }

    /* Content darüber */
    .w6-tabbar-bg > * {
        position: relative;
        z-index: 1;
    }

/* =========================
   LIGHT THEME
   ========================= */
html[data-wiso-theme="light"] .w6-tabbar-bg::before,
html[data-wiso-theme="contrast-light"] .w6-tabbar-bg::before {
    background-image: url("powered-by-wiso-light-theme-v2.svg");
    opacity: 0.1;
}

/* =========================
   DARK THEME (W6 Default)
   ========================= */
html[data-wiso-theme="dark"] .w6-tabbar-bg::before,
html[data-wiso-theme="contrast-dark"] .w6-tabbar-bg::before {
    background-image: url("powered-by-wiso-dark-theme-v2.svg");
    opacity: 0.1;
}