/* =========================================================
   dbxapp – GLASS & DEPTH
   ---------------------------------------------------------
   Premium-Effektschicht fuer das technische dbxapp-Design.
   Die Datei liegt bewusst nach base.css/theme.css und arbeitet
   nur mit den vorhandenen Skin-Tokens.
   ========================================================= */

body.dbx-app {
    --dbx-glass-surface: color-mix(in srgb, var(--dbx-bg-panel) 76%, transparent);
    --dbx-glass-surface-strong: color-mix(in srgb, var(--dbx-panel-inner-bg-top) 88%, transparent);
    --dbx-glass-surface-soft: color-mix(in srgb, var(--dbx-bg-main) 60%, transparent);
    --dbx-glass-border: color-mix(in srgb, var(--dbx-primary) 24%, rgba(255, 255, 255, 0.74));
    --dbx-glass-border-soft: color-mix(in srgb, var(--dbx-panel-border) 54%, rgba(255, 255, 255, 0.58));
    --dbx-glass-highlight: rgba(255, 255, 255, 0.76);
    --dbx-glass-highlight-soft: rgba(255, 255, 255, 0.34);
    --dbx-glass-depth: color-mix(in srgb, var(--dbx-primary) 25%, rgba(10, 24, 48, 0.30));
    --dbx-glass-shadow:
        0 1px 0 rgba(255, 255, 255, 0.86) inset,
        0 -1px 0 color-mix(in srgb, var(--dbx-primary) 15%, transparent) inset,
        0 7px 18px color-mix(in srgb, var(--dbx-primary) 10%, rgba(11, 25, 48, 0.09)),
        0 20px 46px rgba(11, 25, 48, 0.08);
    --dbx-glass-shadow-hover:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 -2px 0 color-mix(in srgb, var(--dbx-primary) 22%, transparent) inset,
        0 10px 24px color-mix(in srgb, var(--dbx-primary) 16%, rgba(11, 25, 48, 0.12)),
        0 24px 54px rgba(11, 25, 48, 0.12);
    --dbx-metal-shadow:
        0 1px 0 rgba(255, 255, 255, 0.82) inset,
        0 -2px 0 color-mix(in srgb, var(--dbx-primary) 22%, rgba(0, 0, 0, 0.16)) inset,
        0 5px 12px rgba(12, 30, 58, 0.15);
    background-color: var(--dbx-bg-main);
    background-image:
        radial-gradient(circle at 8% 14%, color-mix(in srgb, var(--dbx-primary) 17%, transparent) 0, transparent 30%),
        radial-gradient(circle at 92% 6%, rgba(111, 214, 255, 0.15) 0, transparent 27%),
        radial-gradient(circle at 74% 92%, color-mix(in srgb, var(--dbx-primary) 10%, transparent) 0, transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--dbx-bg-main) 88%, #ffffff), var(--dbx-bg-main));
}

body.dbx-app.theme-dark,
body.dbx-app.skin-dunkel {
    --dbx-glass-surface: color-mix(in srgb, var(--dbx-bg-panel) 76%, transparent);
    --dbx-glass-surface-strong: color-mix(in srgb, var(--dbx-panel-inner-bg-top) 82%, transparent);
    --dbx-glass-border: color-mix(in srgb, var(--dbx-primary) 44%, rgba(255, 255, 255, 0.20));
    --dbx-glass-border-soft: color-mix(in srgb, var(--dbx-panel-border) 72%, rgba(255, 255, 255, 0.12));
    --dbx-glass-highlight: rgba(255, 255, 255, 0.17);
    --dbx-glass-highlight-soft: rgba(255, 255, 255, 0.08);
    --dbx-glass-depth: color-mix(in srgb, var(--dbx-primary) 34%, rgba(0, 0, 0, 0.64));
    --dbx-glass-shadow:
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -1px 0 rgba(0, 0, 0, 0.82) inset,
        0 10px 26px rgba(0, 0, 0, 0.46),
        0 30px 72px rgba(0, 0, 0, 0.38);
    --dbx-glass-shadow-hover:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 -2px 0 rgba(0, 0, 0, 0.88) inset,
        0 14px 34px color-mix(in srgb, var(--dbx-primary) 20%, rgba(0, 0, 0, 0.58)),
        0 36px 82px rgba(0, 0, 0, 0.52);
    --dbx-metal-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 -2px 0 rgba(0, 0, 0, 0.88) inset,
        0 6px 14px rgba(0, 0, 0, 0.46);
    background-image:
        radial-gradient(circle at 9% 12%, color-mix(in srgb, var(--dbx-primary) 22%, transparent) 0, transparent 32%),
        radial-gradient(circle at 94% 8%, rgba(60, 166, 255, 0.12) 0, transparent 27%),
        radial-gradient(circle at 70% 100%, color-mix(in srgb, var(--dbx-primary) 15%, transparent) 0, transparent 38%),
        linear-gradient(135deg, #080c13, var(--dbx-bg-main));
}

/* --- Technical ambient canvas -------------------------------- */

body.dbx-app #dbxApp {
    isolation: isolate;
    position: relative;
}

body.dbx-app #dbxMain {
    background: transparent;
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

body.dbx-app #dbxMain::before,
body.dbx-app #dbxMain::after {
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

body.dbx-app #dbxMain::before {
    background-image:
        linear-gradient(color-mix(in srgb, var(--dbx-primary) 8%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--dbx-primary) 8%, transparent) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 88%);
    opacity: 0.55;
}

body.dbx-app #dbxMain::after {
    background-image:
        radial-gradient(circle at 18% 25%, color-mix(in srgb, var(--dbx-primary) 22%, transparent), transparent 27%),
        radial-gradient(circle at 82% 72%, rgba(91, 207, 255, 0.16), transparent 28%),
        url("../img/dbx-tech-circuit-v1.webp");
    background-position: center, center, center;
    background-repeat: no-repeat;
    /* Das Motiv muss die gesamte Arbeitsflaeche abdecken. Eine feste
       1200-px-Breite erzeugte auf grossen Viewports eine sichtbare Kante. */
    background-size: auto, auto, 100% 100%;
    mix-blend-mode: luminosity;
    opacity: var(--dbx-tech-canvas-opacity, 0.18);
}

/* Blauer dbxapp-Skin: helles Contentbild mit exaktem dbXapp-Wasserzeichen. */
body.dbx-app.skin-blau #dbxMain {
    background-color: #edf6ff;
    background-image: url("../img/dbx-content-blue-v1.svg?v=2");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

body.dbx-app.skin-blau #dbxMain::after {
    display: none;
}

body.dbx-app .dbx-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%);
    scrollbar-color: color-mix(in srgb, var(--dbx-primary) 48%, var(--dbx-border-dark)) transparent;
    scrollbar-width: thin;
}

body.dbx-app .dbx-content::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

body.dbx-app .dbx-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, color-mix(in srgb, var(--dbx-primary) 76%, #ffffff), var(--dbx-primary));
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

/* --- Header and navigation ----------------------------------- */

body.dbx-app #dbxHeader {
    background: color-mix(in srgb, var(--dbx-bg-header) 70%, transparent);
    border-bottom: 1px solid var(--dbx-glass-border);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 9px 28px color-mix(in srgb, var(--dbx-primary) 17%, rgba(8, 22, 45, 0.16));
    backdrop-filter: blur(22px) saturate(155%);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
}

body.dbx-app #dbxHeader::after {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dbx-primary) 70%, #ffffff), transparent);
    bottom: -1px;
    content: "";
    height: 1px;
    left: 12%;
    opacity: 0.75;
    pointer-events: none;
    position: absolute;
    right: 12%;
}

body.dbx-app #dbxHeader .dbx-menu-root {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 48%),
        linear-gradient(180deg, var(--dbx-bg-menu-main-top), var(--dbx-bg-menu-main-bottom));
    border-color: var(--dbx-glass-border-soft);
    box-shadow:
        0 1px 0 var(--dbx-glass-highlight) inset,
        0 -1px 0 color-mix(in srgb, var(--dbx-primary) 18%, rgba(0, 0, 0, 0.12)) inset,
        0 6px 18px rgba(9, 25, 52, 0.11);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}

body.dbx-app #dbx_admin_menu.dbx-menu-root {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 48%),
        linear-gradient(180deg, var(--dbx-bg-menu-admin-top), var(--dbx-bg-menu-admin-bottom));
}

/* Blauer Skin: beide Menueleisten als dunkle, zylindrische 3D-Rohre. */
body.dbx-app.skin-blau #dbxHeader #dbx_main_menu.dbx-menu-root,
body.dbx-app.skin-blau #dbxHeader #dbx_admin_menu.dbx-menu-root {
    border-bottom-color: rgba(0, 10, 28, 0.82);
    border-top-color: rgba(203, 232, 255, 0.62);
    box-shadow:
        0 2px 1px rgba(210, 238, 255, 0.34) inset,
        0 8px 12px rgba(255, 255, 255, 0.10) inset,
        0 -7px 10px rgba(0, 8, 24, 0.58) inset,
        0 4px 10px rgba(0, 20, 55, 0.38),
        0 9px 24px rgba(0, 20, 55, 0.18);
}

body.dbx-app.skin-blau #dbxHeader #dbx_main_menu.dbx-menu-root {
    background:
        linear-gradient(180deg,
            rgba(0, 7, 22, 0.16) 0,
            rgba(223, 244, 255, 0.34) 8%,
            rgba(255, 255, 255, 0.18) 22%,
            rgba(255, 255, 255, 0.04) 43%,
            rgba(0, 14, 44, 0.10) 62%,
            rgba(0, 7, 25, 0.30) 100%),
        linear-gradient(180deg, var(--dbx-bg-menu-main-top), var(--dbx-bg-menu-main-bottom));
    box-shadow:
        inset 0 1px 0 rgba(231, 247, 255, 0.54),
        inset 0 -1px 0 rgba(0, 11, 35, 0.66),
        0 2px 6px rgba(0, 20, 52, 0.22);
}

body.dbx-app.skin-blau #dbxHeader #dbx_admin_menu.dbx-menu-root {
    background:
        linear-gradient(180deg,
            rgba(0, 4, 16, 0.22) 0,
            rgba(207, 235, 255, 0.29) 8%,
            rgba(255, 255, 255, 0.14) 22%,
            rgba(255, 255, 255, 0.03) 43%,
            rgba(0, 10, 32, 0.14) 62%,
            rgba(0, 4, 17, 0.42) 100%),
        linear-gradient(180deg, var(--dbx-bg-menu-admin-top), var(--dbx-bg-menu-admin-bottom));
    box-shadow:
        inset 0 1px 0 rgba(222, 242, 255, 0.42),
        inset 0 -1px 0 rgba(0, 6, 24, 0.82),
        0 2px 7px rgba(0, 11, 34, 0.30);
}

body.dbx-app.skin-blau #dbxHeader .dbx-menu-root > .dbx-menu-list > .dbx-menu-item > .dbx-menu-link {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.74);
}

body.dbx-app #dbxHeader .dbx-menu-root > .dbx-menu-list > .dbx-menu-item > .dbx-menu-link {
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    border-right: 1px solid color-mix(in srgb, var(--dbx-primary) 16%, rgba(0, 0, 0, 0.08));
    position: relative;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: color 140ms ease;
}

body.dbx-app #dbxHeader #dbx_admin_menu.dbx-menu-root > .dbx-menu-list > .dbx-menu-item > .dbx-menu-link {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.52);
}

body.dbx-app #dbxHeader .dbx-menu-root .dbx-menu-list .dbx-menu-list {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.20), transparent 22%, rgba(0, 9, 28, 0.10)),
        linear-gradient(180deg, var(--dbx-submenu-bg-top), var(--dbx-submenu-bg-bottom));
    border: 1px solid var(--dbx-glass-border);
    border-radius: 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.58) inset,
        0 12px 28px rgba(10, 27, 54, 0.24),
        0 3px 8px color-mix(in srgb, var(--dbx-primary) 14%, transparent);
    backdrop-filter: blur(14px) saturate(118%);
    -webkit-backdrop-filter: blur(14px) saturate(118%);
}

body.dbx-app #dbxHeader #dbx_admin_menu.dbx-menu-root .dbx-menu-list .dbx-menu-list {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 22%, rgba(0, 6, 22, 0.16)),
        linear-gradient(180deg, var(--dbx-submenu-admin-bg-top), var(--dbx-submenu-admin-bg-bottom));
    border-color: color-mix(in srgb, var(--dbx-primary) 38%, rgba(255, 255, 255, 0.30));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 12px 28px rgba(3, 16, 36, 0.34),
        0 3px 8px color-mix(in srgb, var(--dbx-primary) 18%, transparent);
}

body.dbx-app.skin-blau #dbxHeader #dbx_main_menu.dbx-menu-root .dbx-menu-list .dbx-menu-list {
    background:
        linear-gradient(180deg, rgba(220, 241, 255, 0.20), transparent 18%, rgba(0, 12, 38, 0.34)),
        linear-gradient(180deg, var(--dbx-submenu-bg-top), var(--dbx-submenu-bg-bottom));
    border-color: rgba(111, 176, 235, 0.54);
}

body.dbx-app.skin-blau #dbxHeader #dbx_admin_menu.dbx-menu-root .dbx-menu-list .dbx-menu-list {
    background:
        linear-gradient(180deg, rgba(210, 237, 255, 0.17), transparent 18%, rgba(0, 8, 28, 0.42)),
        linear-gradient(180deg, var(--dbx-submenu-admin-bg-top), var(--dbx-submenu-admin-bg-bottom));
    border-color: rgba(91, 155, 216, 0.48);
}

body.dbx-app #dbxHeader .dbx-menu-root .dbx-menu-list .dbx-menu-list .dbx-menu-item:not(.is-active):not(.is-active-path) > .dbx-menu-link:hover {
    background: linear-gradient(90deg, var(--dbx-menu-sub-hover-bg), color-mix(in srgb, var(--dbx-menu-sub-hover-bg) 38%, transparent));
    box-shadow:
        0 1px 0 var(--dbx-submenu-line-light) inset,
        0 -1px 0 var(--dbx-submenu-line-dark) inset;
    text-decoration: none;
}

/* --- Main surfaces ------------------------------------------- */

body.dbx-app #dbxContent {
    padding-bottom: 2rem !important;
    padding-top: 1.35rem !important;
    position: relative;
    z-index: 1;
}

body.dbx-app .dbx-panel,
body.dbx-app .dbx-content-frame,
body.dbx-app .dbxForm_wrapper,
body.dbx-app .dbxReport {
    background:
        linear-gradient(135deg, var(--dbx-glass-highlight-soft), transparent 28%),
        linear-gradient(180deg, var(--dbx-glass-surface-strong), var(--dbx-glass-surface));
    border: 1px solid var(--dbx-glass-border);
    border-radius: 13px;
    box-shadow: var(--dbx-glass-shadow);
    backdrop-filter: blur(16px) saturate(122%);
    -webkit-backdrop-filter: blur(16px) saturate(122%);
}

body.dbx-app .dbx-content-frame:has(.c-cms) {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 30%),
        linear-gradient(180deg, var(--dbx-glass-surface-strong), var(--dbx-glass-surface));
    border: 1px solid var(--dbx-glass-border);
    border-radius: 14px;
    box-shadow: var(--dbx-glass-shadow);
}

body.dbx-app .dbx-content-frame > .dbx-content-frame-bar > .dbx-bar,
body.dbx-app .dbx-content-frame:has(.c-cms) > .dbx-content-frame-bar > .dbx-bar {
    border-radius: 13px 13px 0 0;
}

body.dbx-app .dbx-content-page {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 25%),
        color-mix(in srgb, var(--dbx-panel-inner-bg-top) 86%, transparent);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.78) inset,
        0 0 0 1px color-mix(in srgb, var(--dbx-primary) 7%, transparent) inset;
}

body.dbx-app .dbx-panel-inner,
body.dbx-app .dbx-form-group,
body.dbx-app .dbx-grid-body,
body.dbx-app .dbx-report-body {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.30), transparent 34%),
        linear-gradient(180deg, var(--dbx-panel-inner-bg-top), var(--dbx-panel-inner-bg-bottom));
    border-color: var(--dbx-glass-border-soft);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.72) inset,
        0 8px 20px color-mix(in srgb, var(--dbx-primary) 9%, rgba(12, 29, 55, 0.08));
}

/* --- Gloss bars ---------------------------------------------- */

body.dbx-app .dbx-bar,
body.dbx-app .dbx-module-bar,
body.dbx-app .dbx-grid-bar,
body.dbx-app .dbx-report-bar,
body.dbx-app .dbx-report-footer,
body.dbx-app .dbxForm_wrapper .dbx-form-bar,
body.dbx-app .dbx-grid-head,
body.dbx-app .dbx-grid-toolbar,
body.dbx-app .dbx-panel-head {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0, rgba(255, 255, 255, 0.13) 38%, rgba(255, 255, 255, 0.02) 58%, rgba(0, 0, 0, 0.04) 100%),
        linear-gradient(180deg, var(--dbx-panel-head-bg-top), var(--dbx-panel-head-bg-bottom));
    border-color: var(--dbx-glass-border);
    box-shadow: var(--dbx-metal-shadow);
    backdrop-filter: blur(14px) saturate(126%);
    -webkit-backdrop-filter: blur(14px) saturate(126%);
    position: relative;
}

body.dbx-app .dbx-bar::after,
body.dbx-app .dbx-module-bar::after,
body.dbx-app .dbx-form-bar::after,
body.dbx-app .dbx-grid-head::after,
body.dbx-app .dbx-panel-head::after {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dbx-primary) 38%, rgba(255, 255, 255, 0.72)), transparent);
    bottom: 0;
    content: "";
    height: 1px;
    left: 9%;
    opacity: 0.78;
    pointer-events: none;
    position: absolute;
    right: 9%;
}

body.dbx-app .dbx-bar-title > i,
body.dbx-app .dbx-admin-dashboard-card-title i,
body.dbx-app .dbx-module-bar-titleblock > i {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.12)),
        color-mix(in srgb, var(--dbx-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--dbx-primary) 28%, rgba(255, 255, 255, 0.58));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 4px 9px color-mix(in srgb, var(--dbx-primary) 25%, transparent);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* --- Cards and editorial elements ---------------------------- */

body.dbx-app .card,
body.dbx-app .dbx-admin-dashboard-card,
body.dbx-app .dbx-stat-card,
body.dbx-app .dbx-dashboard-card {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.52), transparent 34%),
        linear-gradient(180deg, var(--dbx-glass-surface-strong), var(--dbx-glass-surface));
    border: 1px solid var(--dbx-glass-border);
    border-radius: 11px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.90) inset,
        0 -2px 0 color-mix(in srgb, var(--dbx-primary) 13%, transparent) inset,
        0 6px 14px rgba(12, 29, 56, 0.10),
        0 16px 34px color-mix(in srgb, var(--dbx-primary) 8%, transparent);
    overflow: hidden;
    position: relative;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

/* Bootstrap .shadow-* nutzt !important; die Design-Tiefe bleibt trotzdem
   die fuehrende Darstellung der Karte. */
body.dbx-app .card.shadow-sm,
body.dbx-app .card.shadow,
body.dbx-app .card.shadow-lg {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.90) inset,
        0 -2px 0 color-mix(in srgb, var(--dbx-primary) 13%, transparent) inset,
        0 6px 14px rgba(12, 29, 56, 0.10),
        0 16px 34px color-mix(in srgb, var(--dbx-primary) 8%, transparent) !important;
}

body.dbx-app .card::before,
body.dbx-app .dbx-admin-dashboard-card::before,
body.dbx-app .dbx-stat-card::before,
body.dbx-app .dbx-dashboard-card::before {
    background: linear-gradient(115deg, transparent 0 34%, rgba(255, 255, 255, 0.34) 45%, transparent 56%);
    content: "";
    inset: 0;
    opacity: 0.16;
    pointer-events: none;
    position: absolute;
    transform: translateX(-52%);
    transition: opacity 240ms ease, transform 520ms ease;
    z-index: 0;
}

body.dbx-app .card > *,
body.dbx-app .dbx-admin-dashboard-card > *,
body.dbx-app .dbx-stat-card > *,
body.dbx-app .dbx-dashboard-card > * {
    position: relative;
    z-index: 1;
}

body.dbx-app .card:hover,
body.dbx-app .dbx-admin-dashboard-card:hover,
body.dbx-app .dbx-stat-card:hover,
body.dbx-app .dbx-dashboard-card:hover {
    border-color: color-mix(in srgb, var(--dbx-primary) 48%, rgba(255, 255, 255, 0.65));
    box-shadow: var(--dbx-glass-shadow-hover);
    transform: translateY(-2px);
}

body.dbx-app .card.shadow-sm:hover,
body.dbx-app .card.shadow:hover,
body.dbx-app .card.shadow-lg:hover {
    box-shadow: var(--dbx-glass-shadow-hover) !important;
}

body.dbx-app .card:hover::before,
body.dbx-app .dbx-admin-dashboard-card:hover::before,
body.dbx-app .dbx-stat-card:hover::before,
body.dbx-app .dbx-dashboard-card:hover::before {
    opacity: 0.32;
    transform: translateX(52%);
}

body.dbx-app .card .card-header,
body.dbx-app .card .card-footer {
    background: color-mix(in srgb, var(--dbx-panel-head-bg-top) 76%, transparent);
    border-color: var(--dbx-glass-border-soft);
    backdrop-filter: blur(14px);
}

body.dbx-app .cms-hero .dbx-media,
body.dbx-app .cms-hero .hero {
    border-radius: 16px;
    filter: saturate(1.05) contrast(1.03);
    overflow: hidden;
}

body.dbx-app .cms-hero .dbx-media {
    border: 1px solid color-mix(in srgb, var(--dbx-primary) 36%, rgba(255, 255, 255, 0.62));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.72) inset,
        0 12px 28px rgba(7, 23, 52, 0.20),
        0 28px 64px color-mix(in srgb, var(--dbx-primary) 13%, transparent);
}

body.dbx-app .cms-hero .hero-text,
body.dbx-app .dbx-hero .hero-text {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)),
        color-mix(in srgb, var(--dbx-bg-panel) 58%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 13px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 10px 30px rgba(7, 22, 48, 0.24);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

/* --- Buttons: polished controls ------------------------------ */

body.dbx-app .btn {
    border-radius: 8px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.68) inset,
        0 -2px 0 rgba(0, 0, 0, 0.12) inset,
        0 4px 9px rgba(9, 24, 49, 0.12);
    font-weight: 650;
    letter-spacing: 0.005em;
    position: relative;
    transition: box-shadow 150ms ease, filter 150ms ease, transform 150ms ease;
}

body.dbx-app .btn-primary,
body.dbx-app .btn-success,
body.dbx-app .btn-danger,
body.dbx-app .btn-info,
body.dbx-app .btn-warning,
body.dbx-app .btn-secondary {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 48%, rgba(0, 0, 0, 0.12));
}

body.dbx-app .btn-outline-primary,
body.dbx-app .btn-outline-secondary,
body.dbx-app .btn-light {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.18)),
        var(--dbx-glass-surface-soft);
    backdrop-filter: blur(12px);
}

body.dbx-app .btn:hover,
body.dbx-app .btn:focus-visible {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.82) inset,
        0 -2px 0 rgba(0, 0, 0, 0.15) inset,
        0 7px 16px color-mix(in srgb, var(--dbx-primary) 28%, rgba(8, 23, 48, 0.18));
    filter: brightness(1.04) saturate(1.08);
    transform: translateY(-1px);
    text-decoration: none;
}

/*
 * Outline-Buttons behalten auf Hover eine glashelle Flaeche. Bootstrap setzt
 * dabei sonst eine helle Iconfarbe, die auf dem Glas praktisch verschwindet.
 * Panel-Token liefern in hellen wie dunklen Skins den passenden Kontrast.
 */
body.dbx-app .btn-outline-primary:hover,
body.dbx-app .btn-outline-primary:focus-visible,
body.dbx-app .btn-outline-secondary:hover,
body.dbx-app .btn-outline-secondary:focus-visible {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--dbx-primary) 22%, var(--dbx-panel-inner-bg-top)),
            color-mix(in srgb, var(--dbx-primary) 10%, var(--dbx-panel-inner-bg-bottom))
        ) !important;
    border-color: color-mix(in srgb, var(--dbx-primary) 52%, var(--dbx-panel-border)) !important;
    color: var(--dbx-panel-head-text) !important;
}

body.dbx-app .btn-outline-primary:hover i,
body.dbx-app .btn-outline-primary:focus-visible i,
body.dbx-app .btn-outline-secondary:hover i,
body.dbx-app .btn-outline-secondary:focus-visible i {
    color: currentColor !important;
    opacity: 1;
}

body.dbx-app .btn:active {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.18) inset,
        0 1px 0 rgba(255, 255, 255, 0.32);
    transform: translateY(1px);
}

/* --- Forms: inset glass -------------------------------------- */

body.dbx-app input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
body.dbx-app textarea,
body.dbx-app select,
body.dbx-app .form-control,
body.dbx-app .form-select,
body.dbx-app .dbxForm_wrapper .form-control,
body.dbx-app .dbxForm_wrapper .form-select {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--dbx-input-bg) 88%, #ffffff), var(--dbx-input-bg));
    border: 1px solid color-mix(in srgb, var(--dbx-primary) 20%, var(--dbx-border-color));
    border-radius: 8px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.78),
        0 2px 5px rgba(10, 28, 53, 0.10) inset;
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

body.dbx-app input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):hover,
body.dbx-app textarea:hover,
body.dbx-app select:hover,
body.dbx-app .form-control:hover,
body.dbx-app .form-select:hover {
    border-color: color-mix(in srgb, var(--dbx-primary) 42%, var(--dbx-border-color));
}

body.dbx-app input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):focus,
body.dbx-app textarea:focus,
body.dbx-app select:focus,
body.dbx-app .form-control:focus,
body.dbx-app .form-select:focus {
    background: linear-gradient(180deg, color-mix(in srgb, var(--dbx-input-bg-focus) 88%, #ffffff), var(--dbx-input-bg-focus));
    border-color: var(--dbx-primary);
    box-shadow:
        0 0 0 3px var(--dbx-focus-ring),
        0 1px 0 rgba(255, 255, 255, 0.80),
        0 3px 7px rgba(8, 27, 54, 0.12) inset;
}

/* --- Reports and tables -------------------------------------- */

body.dbx-app .table,
body.dbx-app .dbxReport table,
body.dbx-app .dbx-report table {
    border-color: var(--dbx-glass-border-soft);
    box-shadow: 0 8px 22px rgba(9, 25, 51, 0.09);
}

body.dbx-app .table > thead > tr > th,
body.dbx-app .dbxReport table > thead > tr > th,
body.dbx-app .dbx-report table > thead > tr > th {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent 48%),
        linear-gradient(180deg, var(--dbx-panel-head-bg-top), var(--dbx-panel-head-bg-bottom));
    border-color: var(--dbx-glass-border-soft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.74) inset, 0 -1px 0 color-mix(in srgb, var(--dbx-primary) 18%, transparent) inset;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

body.dbx-app .table > tbody > tr,
body.dbx-app .dbxReport table > tbody > tr,
body.dbx-app .dbx-report table > tbody > tr {
    transition: filter 130ms ease, transform 130ms ease;
}

body.dbx-app .table > tbody > tr:hover,
body.dbx-app .dbxReport table > tbody > tr:hover,
body.dbx-app .dbx-report table > tbody > tr:hover {
    filter: saturate(1.06) brightness(1.015);
    transform: translateX(2px);
}

body.dbx-app .dbx-report-bar-stat,
body.dbx-app .badge:not(.bg-danger):not(.text-bg-danger) {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.16)),
        var(--dbx-glass-surface-soft);
    border: 1px solid var(--dbx-glass-border-soft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, 0 3px 8px rgba(8, 24, 48, 0.10);
    backdrop-filter: blur(10px);
}

/* --- Windows -------------------------------------------------- */

body.dbx-app .dbx-window {
    background: var(--dbx-glass-surface-strong);
    border: 1px solid color-mix(in srgb, var(--dbx-primary) 50%, rgba(255, 255, 255, 0.52));
    border-radius: 14px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.82) inset,
        0 0 0 1px color-mix(in srgb, var(--dbx-primary) 18%, transparent),
        0 18px 45px rgba(5, 18, 40, 0.28),
        0 46px 100px color-mix(in srgb, var(--dbx-primary) 18%, rgba(3, 13, 31, 0.26));
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
}

body.dbx-app .dbx-window:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.88) inset,
        0 0 0 1px color-mix(in srgb, var(--dbx-primary) 28%, transparent),
        0 20px 52px rgba(5, 18, 40, 0.32),
        0 52px 112px color-mix(in srgb, var(--dbx-primary) 22%, rgba(3, 13, 31, 0.30));
}

body.dbx-app .dbx-window-header {
    border-radius: 13px 13px 0 0;
    color: var(--dbx-window-header-color);
}

body.dbx-app .dbx-window-body {
    background:
        radial-gradient(circle at 10% 5%, color-mix(in srgb, var(--dbx-primary) 10%, transparent), transparent 28%),
        color-mix(in srgb, var(--dbx-window-body-bg) 90%, transparent);
}

body.dbx-app .dbx-window-controls span {
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 3px 8px rgba(0, 0, 0, 0.15);
}

body.dbx-app .dbx-window-controls span:hover {
    background: rgba(255, 255, 255, 0.24);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset, 0 5px 12px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

/* --- Footer and floating controls ---------------------------- */

body.dbx-app #dbxFooter.dbx-app-footer {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 54%),
        linear-gradient(180deg, var(--dbx-bg-menu-main-top), var(--dbx-bg-menu-main-bottom));
    border-top: 1px solid var(--dbx-glass-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) inset, 0 -9px 28px rgba(8, 23, 48, 0.10);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

body.dbx-app .dbx-footer-info-item,
body.dbx-app .dbx-footer-window-close-all {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.16)),
        var(--dbx-glass-surface-soft);
    border-color: var(--dbx-glass-border-soft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, 0 4px 10px rgba(8, 24, 49, 0.10);
}

body.dbx-app #dbxBackToTop {
    border: 1px solid color-mix(in srgb, var(--dbx-primary) 55%, rgba(255, 255, 255, 0.52));
    border-radius: 12px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 -2px 0 rgba(0, 0, 0, 0.16) inset,
        0 12px 28px color-mix(in srgb, var(--dbx-primary) 32%, rgba(7, 21, 44, 0.22));
}

/* --- Dark-surface readability -------------------------------- */

body.dbx-app.theme-dark .card,
body.dbx-app.skin-dunkel .card,
body.dbx-app.theme-dark .dbx-content-frame,
body.dbx-app.skin-dunkel .dbx-content-frame,
body.dbx-app.theme-dark .dbx-panel,
body.dbx-app.skin-dunkel .dbx-panel {
    box-shadow: var(--dbx-glass-shadow);
}

body.dbx-app.theme-dark .btn-outline-primary,
body.dbx-app.theme-dark .btn-outline-secondary,
body.dbx-app.skin-dunkel .btn-outline-primary,
body.dbx-app.skin-dunkel .btn-outline-secondary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)),
        var(--dbx-glass-surface-soft);
}

body.dbx-app.theme-dark .cms-hero .hero-text,
body.dbx-app.skin-dunkel .cms-hero .hero-text {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
        rgba(6, 13, 24, 0.68);
    border-color: rgba(255, 255, 255, 0.18);
    color: #f4f7fb;
}

/* --- Responsive and accessibility ---------------------------- */

@media (max-width: 767.98px) {
    body.dbx-app #dbxContent {
        padding-top: 0.55rem !important;
    }

    body.dbx-app .dbx-panel,
    body.dbx-app .dbx-content-frame,
    body.dbx-app .dbxForm_wrapper,
    body.dbx-app .dbxReport {
        border-radius: 11px;
    }

    body.dbx-app .card:hover,
    body.dbx-app .dbx-admin-dashboard-card:hover,
    body.dbx-app .dbx-stat-card:hover,
    body.dbx-app .dbx-dashboard-card:hover {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.dbx-app .card,
    body.dbx-app .btn,
    body.dbx-app .dbx-menu-link,
    body.dbx-app .table > tbody > tr,
    body.dbx-app .dbxReport table > tbody > tr {
        transition: none;
    }

    body.dbx-app .card:hover,
    body.dbx-app .btn:hover,
    body.dbx-app .dbx-menu-link:hover,
    body.dbx-app .table > tbody > tr:hover,
    body.dbx-app .dbxReport table > tbody > tr:hover {
        transform: none;
    }
}

@supports not (backdrop-filter: blur(1px)) {
    body.dbx-app .dbx-panel,
    body.dbx-app .dbx-content-frame,
    body.dbx-app .dbxForm_wrapper,
    body.dbx-app .dbxReport,
    body.dbx-app .dbx-window {
        background: var(--dbx-panel-bg-top);
    }
}