:root {
    --dbxdocs-sidebar-width: 16.25rem;
    --dbxdocs-sidebar-collapsed: 4.4rem;
    --dbxdocs-navy: #061d3d;
    --dbxdocs-blue-950: #06152d;
    --dbxdocs-blue-900: #082f63;
    --dbxdocs-blue-800: #0b478c;
    --dbxdocs-blue-700: #0b63ce;
    --dbxdocs-blue-500: #2386f4;
    --dbxdocs-blue-100: #dceeff;
    --dbxdocs-red: #d9102c;
    --dbxdocs-border: rgba(117, 174, 230, .34);
    --dbxdocs-shadow: 0 18px 42px rgba(4, 31, 68, .2);
}

html,
body.dbx-docs {
    min-height: 100%;
}

body.dbx-docs {
    margin: 0;
    overflow: hidden;
    color: #10243d;
    background:
        radial-gradient(circle at 88% 12%, rgba(46, 139, 242, .12), transparent 26rem),
        linear-gradient(135deg, #edf7ff 0%, #f7fbff 48%, #e7f2fc 100%);
}

.dbxdocs-app-shell {
    display: grid;
    grid-template-columns: var(--dbxdocs-sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns .22s ease;
}

body.dbx-docs #dbxApp.dbxdocs-app-shell {
    display: grid;
    height: 100%;
    flex-direction: initial;
    grid-template-columns: var(--dbxdocs-sidebar-width) minmax(0, 1fr);
}

body.dbx-docs #dbxHeader.dbxdocs-sidebar {
    position: relative;
    z-index: 1020;
    display: flex;
    width: auto;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    border-right: 1px solid rgba(130, 186, 242, .46);
    background:
        linear-gradient(180deg, rgba(7, 40, 83, .98), rgba(5, 24, 53, .99)),
        url("../img/dbx-tech-circuit-v1.webp") center bottom / 44rem auto no-repeat;
    box-shadow: 9px 0 32px rgba(1, 24, 52, .19);
}

.dbxdocs-sidebar::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: .16;
    background: url("../img/dbx-tech-circuit-v1.webp") 60% 90% / 37rem auto no-repeat;
}

.dbxdocs-brand-wrap,
.dbxdocs-nav,
.dbxdocs-sidebar-foot {
    position: relative;
    z-index: 1;
}

.dbxdocs-brand-wrap {
    padding: 1.2rem 1rem 1.05rem;
    border-bottom: 3px solid var(--dbxdocs-red);
    background: linear-gradient(135deg, rgba(18, 91, 171, .42), rgba(5, 24, 53, .2));
}

.dbxdocs-brand {
    display: flex;
    align-items: center;
    gap: .78rem;
    color: #fff;
    text-decoration: none;
}

.dbxdocs-brand:hover,
.dbxdocs-brand:focus-visible {
    color: #fff;
}

.dbxdocs-brand-mark {
    display: inline-flex;
    min-width: 3.25rem;
    height: 3.25rem;
    align-items: center;
    justify-content: center;
    padding: 0 .38rem;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: -.08em;
    color: #0c2d58;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: .82rem;
    background: linear-gradient(145deg, #fff, #cfe8ff);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25), inset 0 1px 0 #fff;
}

.dbxdocs-brand-mark strong {
    margin: 0 .03rem;
    font-size: 1.65rem;
    line-height: 1;
    color: var(--dbxdocs-red);
}

.dbxdocs-brand-copy {
    display: grid;
    min-width: 0;
}

.dbxdocs-brand-copy strong {
    font-size: 1.08rem;
    letter-spacing: .01em;
}

.dbxdocs-brand-copy small {
    overflow: hidden;
    margin-top: .18rem;
    color: #bcdcff;
    font-size: .72rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dbxdocs-nav {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .95rem .72rem 1.4rem;
    scrollbar-color: rgba(137, 195, 250, .45) transparent;
    scrollbar-width: thin;
}

.dbxdocs-nav-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 .55rem .55rem;
    color: #90c8ff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.dbxdocs-mobile-nav-close {
    display: none;
}

.dbxdocs-sidebar .dbx-menu {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.dbxdocs-sidebar .dbx-menu > ul,
.dbxdocs-sidebar .dbx-menu li,
.dbxdocs-sidebar .dbx-menu li > ul {
    position: static;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    visibility: visible;
    opacity: 1;
    transform: none;
}

body.dbx-docs .dbxdocs-sidebar .dbx-menu > .dbx-menu-list,
body.dbx-docs .dbxdocs-sidebar .dbx-menu.dbx-menu-list {
    display: block;
    padding: 0;
}

body.dbx-docs .dbxdocs-sidebar .dbx-menu .dbx-menu-item {
    display: block;
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
}

body.dbx-docs .dbxdocs-sidebar .dbx-menu .dbx-menu-link {
    width: 100%;
    height: auto;
    min-width: 0;
    white-space: normal;
}

/* Die globalen Glasregeln werden für Systemkomponenten asynchron geladen.
   In der Dokumentations-Sidebar darf dadurch weder eine helle horizontale
   Menüfläche noch deren dunkle Schriftfarbe übernommen werden. */
body.dbx-docs #dbxHeader.dbxdocs-sidebar .dbx-menu-root {
    color: #fff;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.dbx-docs #dbxHeader.dbxdocs-sidebar .dbx-menu-root > .dbx-menu-list > .dbx-menu-item > .dbx-menu-link {
    color: #e7f4ff;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
}

body.dbx-docs #dbxHeader.dbxdocs-sidebar .dbx-menu-root > .dbx-menu-list > .dbx-menu-item.has-children > .dbx-menu-link {
    color: #e7f4ff !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.dbx-docs #dbxHeader.dbxdocs-sidebar .dbx-menu-root > .dbx-menu-list > .dbx-menu-item.has-children.is-open > .dbx-menu-link {
    color: #fff !important;
    border-color: rgba(143, 203, 255, .58) !important;
    background: #125ca9 !important;
}

body.dbx-docs #dbxHeader.dbxdocs-sidebar .dbx-menu-root > .dbx-menu-list > .dbx-menu-item.is-active > .dbx-menu-link {
    color: #fff;
    border-color: rgba(167, 216, 255, .76);
    background: linear-gradient(135deg, #1575dd, #0b4e9e);
    box-shadow: 0 7px 17px rgba(0, 0, 0, .22), inset 3px 0 0 #fff;
}

body.dbx-docs #dbxHeader.dbxdocs-sidebar .dbx-menu-root > .dbx-menu-list > .dbx-menu-item.is-active-path:not(.is-active) > .dbx-menu-link {
    color: #f2f8ff;
    border-color: rgba(138, 198, 249, .28);
    background: rgba(13, 72, 135, .42);
    box-shadow: inset 2px 0 0 rgba(150, 211, 255, .68);
}

body.dbx-docs .dbxdocs-sidebar .dbx-menu .dbx-menu-item > .dbx-menu-list {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: .18rem 0 .35rem .7rem;
    border: 0;
    border-left: 1px solid rgba(135, 195, 246, .2);
    border-radius: 0;
    background: rgba(2, 26, 62, .2);
    box-shadow: none;
    isolation: auto;
}

/*
 * Component styles are loaded after the design shell and may otherwise turn
 * nested menus into a light glass panel while their text remains light. Keep
 * every left-sidebar submenu on the documentation surface consistently dark.
 */
body.dbx-docs #dbxHeader.dbxdocs-sidebar .dbx-menu .dbx-menu-item > .dbx-menu-list {
    color: #e7f4ff;
    border: 0 !important;
    border-left: 1px solid rgba(135, 195, 246, .28) !important;
    background: #061d3d !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.dbx-docs #dbxHeader.dbxdocs-sidebar .dbx-menu .dbx-menu-list .dbx-menu-link {
    color: #e7f4ff;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
}

body.dbx-docs #dbxHeader.dbxdocs-sidebar .dbx-menu .dbx-menu-list .dbx-menu-link.is-active {
    color: #fff;
    border-color: rgba(167, 216, 255, .82);
    background: linear-gradient(135deg, #0b6fc7, #0752aa);
    box-shadow: inset 3px 0 0 #fff, 0 5px 13px rgba(0, 0, 0, .24);
}

body.dbx-docs #dbxHeader.dbxdocs-sidebar .dbx-menu .dbx-menu-list .dbx-menu-link:not(.is-active):hover,
body.dbx-docs #dbxHeader.dbxdocs-sidebar .dbx-menu .dbx-menu-list .dbx-menu-link:not(.is-active):focus-visible {
    color: #fff;
    border-color: rgba(143, 203, 255, .58);
    background: rgba(18, 92, 169, .72);
}

body.dbx-docs .dbxdocs-sidebar .dbx-menu .dbx-menu-item > .dbx-menu-list::before {
    display: none;
}

body.dbx-docs .dbxdocs-sidebar .dbx-menu .dbx-menu-item.is-open > .dbx-menu-list {
    display: block;
}

.dbxdocs-sidebar .dbx-menu li > a {
    display: flex;
    min-height: 2.55rem;
    align-items: center;
    gap: .68rem;
    margin: .16rem 0;
    padding: .57rem .7rem;
    color: #e7f4ff;
    border: 1px solid transparent;
    border-radius: .66rem;
    background: transparent;
    box-shadow: none;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.22;
    text-decoration: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}

.dbxdocs-sidebar .dbx-menu li > a:hover,
.dbxdocs-sidebar .dbx-menu li > a:focus-visible {
    color: #fff;
    border-color: rgba(143, 203, 255, .5);
    background: linear-gradient(135deg, rgba(25, 123, 222, .68), rgba(13, 74, 145, .62));
    transform: translateX(2px);
}

.dbxdocs-sidebar .dbx-menu li.active > a,
.dbxdocs-sidebar .dbx-menu li.is-active > a {
    color: #fff;
    border-color: rgba(167, 216, 255, .76);
    background: linear-gradient(135deg, #1575dd, #0b4e9e);
    box-shadow: 0 7px 17px rgba(0, 0, 0, .22), inset 3px 0 0 #fff;
}

.dbxdocs-sidebar .dbx-menu li.is-active-path:not(.is-active) > a {
    color: #f2f8ff;
    border-color: rgba(138, 198, 249, .28);
    background: rgba(13, 72, 135, .42);
    box-shadow: inset 2px 0 0 rgba(150, 211, 255, .68);
}

.dbxdocs-sidebar .dbx-menu li.is-active-path:not(.is-active) > a:hover,
.dbxdocs-sidebar .dbx-menu li.is-active-path:not(.is-active) > a:focus-visible {
    border-color: rgba(157, 215, 255, .58);
    background: rgba(18, 92, 169, .58);
}

.dbxdocs-sidebar .dbx-menu li > a > i,
.dbxdocs-sidebar .dbx-menu li > a .bi {
    width: 1.18rem;
    flex: 0 0 1.18rem;
    color: #8fceff;
    text-align: center;
}

.dbxdocs-sidebar .dbx-menu li > ul li > a {
    min-height: 2.2rem;
    padding-block: .42rem;
    font-size: .88rem;
}

.dbxdocs-sidebar .dbx-menu li > ul li > ul li > a {
    min-height: 2.05rem;
    padding-left: .62rem;
    font-size: .82rem;
}

.dbxdocs-sidebar .dbx-menu li.active > a > i,
.dbxdocs-sidebar .dbx-menu li > a:hover > i {
    color: #fff;
}

.dbxdocs-sidebar .dbx-menu-section-label {
    margin: .85rem .4rem .32rem;
    padding: .55rem .3rem .32rem;
    pointer-events: none;
    color: #78bdfd;
    border: 0;
    border-bottom: 1px solid rgba(124, 187, 247, .24);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.dbxdocs-sidebar .dbx-menu-section-label:first-child {
    margin-top: .15rem;
}

.dbxdocs-sidebar .dbx-menu-spacer {
    height: .65rem;
}

.dbxdocs-sidebar-foot {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1rem;
    color: #9fc8ef;
    border-top: 1px solid rgba(127, 188, 246, .25);
    background: rgba(0, 13, 32, .24);
    font-size: .7rem;
    text-decoration: none;
}

.dbxdocs-sidebar-foot:hover,
.dbxdocs-sidebar-foot:focus-visible {
    color: #fff;
    background: rgba(18, 105, 194, .42);
}

.dbxdocs-stage {
    display: grid;
    min-width: 0;
    min-height: 100vh;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.dbxdocs-stage-header {
    position: relative;
    z-index: 1010;
    max-width: 100%;
    min-width: 0;
    box-shadow: 0 8px 24px rgba(7, 46, 89, .1);
}

.dbxdocs-sectionbar {
    position: relative;
    z-index: 1005;
    min-width: 0;
    padding: .48rem .8rem;
    color: #123d6b;
    border-bottom: 1px solid rgba(92, 155, 216, .42);
    background: rgba(244, 250, 255, .96);
    box-shadow: 0 8px 20px rgba(8, 51, 96, .08);
    backdrop-filter: blur(12px);
    transition: padding-bottom .16s ease;
}

.dbxdocs-sectionbar--empty {
    height: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}

body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section > .dbx-menu-list,
body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section.dbx-menu-list {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: .38rem;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: .12rem .08rem .32rem;
    list-style: none;
    scrollbar-color: rgba(37, 112, 188, .45) transparent;
    scrollbar-width: thin;
}

body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section > .dbx-menu-list > .dbx-menu-item {
    position: static;
    display: block;
    width: auto;
    min-width: max-content;
    flex: 0 0 auto;
}

body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section .dbx-menu-link {
    display: inline-flex;
    width: auto;
    min-width: max-content;
    min-height: 2.28rem;
    align-items: center;
    gap: .42rem;
    padding: .45rem .72rem;
    color: #174b7c;
    border: 1px solid #b7d4ed;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15, 68, 119, .07);
    font-size: .79rem;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
}

body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section .dbx-menu-link:hover,
body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section .dbx-menu-link:focus-visible,
body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section .dbx-menu-item.is-active > .dbx-menu-link,
body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section .dbx-menu-item.is-active-path > .dbx-menu-link {
    color: #fff;
    border-color: #0864c5;
    outline: 0;
    background: linear-gradient(135deg, #147ddd, #0752aa);
    box-shadow: 0 5px 13px rgba(8, 83, 164, .22);
}

body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section > .dbx-menu-list > .dbx-menu-item > .dbx-menu-list {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: auto;
    left: 0;
    display: none;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: .34rem;
    overflow-x: auto;
    overflow-y: hidden;
    margin: .52rem 0 0;
    padding: .46rem .15rem .34rem;
    list-style: none;
    border: 0;
    border-top: 1px solid rgba(113, 168, 220, .32);
    background: rgba(238, 247, 255, .98);
    box-shadow: none;
    transform: none;
    scrollbar-width: thin;
}

body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section > .dbx-menu-list > .dbx-menu-item.is-open > .dbx-menu-list,
body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section > .dbx-menu-list > .dbx-menu-item.is-active-path > .dbx-menu-list {
    display: flex;
}

body.dbx-docs .dbxdocs-sectionbar:has(.dbx-menu-section > .dbx-menu-list > .dbx-menu-item.is-open > .dbx-menu-list),
body.dbx-docs .dbxdocs-sectionbar:has(.dbx-menu-section > .dbx-menu-list > .dbx-menu-item.is-active-path > .dbx-menu-list) {
    padding-bottom: 3.58rem;
}

body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section .dbx-menu-list .dbx-menu-list .dbx-menu-item {
    position: static;
    width: auto;
    min-width: max-content;
    flex: 0 0 auto;
}

body.dbx-docs .dbxdocs-sectionbar .dbx-menu-section .dbx-menu-list .dbx-menu-list .dbx-menu-link {
    min-height: 2rem;
    padding: .36rem .62rem;
    font-size: .74rem;
}

.dbxdocs-admin-strip {
    min-height: 2.2rem;
    border-bottom: 1px solid #236bb5;
    background: linear-gradient(180deg, #0b4b8c, #073669);
}

.dbxdocs-admin-strip .dbx-menu {
    min-height: 2.2rem;
}

.dbxdocs-admin-strip .dbx-menu > .dbx-menu-list {
    flex-wrap: wrap;
}

.dbxdocs-topbar {
    display: flex;
    min-height: 4.55rem;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1.3rem;
    border-bottom: 1px solid var(--dbxdocs-border);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
}

.dbxdocs-sidebar-toggle {
    display: inline-grid;
    width: 2.6rem;
    height: 2.6rem;
    flex: 0 0 2.6rem;
    place-items: center;
    color: #fff;
    border: 1px solid #0753a8;
    border-radius: .66rem;
    background: linear-gradient(145deg, #1680ea, #0751a8);
    box-shadow: 0 7px 16px rgba(8, 78, 153, .25), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.dbxdocs-page-title {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
}

.dbxdocs-page-title strong {
    overflow: hidden;
    color: #102b4e;
    font-size: 1.03rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dbxdocs-kicker {
    color: #0b64bd;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.dbxdocs-audience {
    display: flex;
    gap: .45rem;
}

.dbxdocs-audience a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .48rem .7rem;
    color: #174879;
    border: 1px solid #b9d6ef;
    border-radius: 999px;
    background: #f3f9ff;
    font-size: .74rem;
    font-weight: 700;
    text-decoration: none;
}

.dbxdocs-audience a:hover {
    color: #fff;
    border-color: #0b64bd;
    background: #0b64bd;
}

.dbxdocs-stage #dbxMain {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.dbxdocs-stage .dbx-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    overflow: auto;
    background:
        linear-gradient(rgba(242, 249, 255, .9), rgba(242, 249, 255, .9)),
        url("../img/dbx-tech-circuit-v1.webp") 95% 95% / 41rem auto no-repeat;
}

.dbxdocs-stage #dbxContent {
    width: min(100%, 104rem);
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 1.2rem 1.45rem 2.5rem !important;
}

/*
 * The editorial documentation stays width-limited for readable line lengths.
 * The generated source reference is an application surface of its own and
 * needs the complete stage width so its navigation and code tables do not
 * become unnecessarily cramped.
 */
.dbxdocs-stage #dbxContent:has(> .dbxdocs-reference) {
    width: 100%;
    max-width: none;
    padding-inline: .75rem !important;
}

body.dbx-docs #dbxFooter.dbxdocs-footer {
    position: relative;
    z-index: 1000;
    min-height: 2rem;
    color: #cce6ff;
    border-top: 1px solid #1f69b4;
    background: linear-gradient(180deg, #0a407a, #062b54);
}

.dbxdocs-footer-info {
    display: flex;
    min-height: 2rem;
    align-items: center;
    justify-content: flex-end;
    gap: .8rem;
    padding: .35rem .85rem;
    font-size: .68rem;
}

.dbxdocs-footer a {
    color: #d9edff;
}

.dbxdocs-back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 3.3rem;
    z-index: 1050;
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    visibility: hidden;
    color: #fff;
    border: 1px solid #a8d5ff;
    border-radius: .7rem;
    opacity: 0;
    background: linear-gradient(145deg, #1680ea, #0751a8);
    box-shadow: 0 9px 22px rgba(5, 54, 104, .3);
    transition: opacity .2s ease, visibility .2s ease;
}

.dbxdocs-back-to-top.show {
    visibility: visible;
    opacity: 1;
}

.dbxdocs-app-shell.is-sidebar-collapsed {
    grid-template-columns: var(--dbxdocs-sidebar-collapsed) minmax(0, 1fr);
}

body.dbx-docs #dbxApp.dbxdocs-app-shell.is-sidebar-collapsed {
    grid-template-columns: var(--dbxdocs-sidebar-collapsed) minmax(0, 1fr);
}

.dbxdocs-app-shell.is-sidebar-collapsed .dbxdocs-brand-copy,
.dbxdocs-app-shell.is-sidebar-collapsed .dbxdocs-nav-label span,
.dbxdocs-app-shell.is-sidebar-collapsed .dbxdocs-sidebar-foot span,
.dbxdocs-app-shell.is-sidebar-collapsed .dbxdocs-sidebar .dbx-menu a > span,
.dbxdocs-app-shell.is-sidebar-collapsed .dbxdocs-sidebar .dbx-menu-section-label {
    display: none;
}

.dbxdocs-app-shell.is-sidebar-collapsed .dbxdocs-brand-wrap {
    padding-inline: .55rem;
}

.dbxdocs-app-shell.is-sidebar-collapsed .dbxdocs-brand {
    justify-content: center;
}

.dbxdocs-app-shell.is-sidebar-collapsed .dbxdocs-brand-mark {
    min-width: 3.1rem;
}

.dbxdocs-app-shell.is-sidebar-collapsed .dbxdocs-nav {
    padding-inline: .45rem;
}

.dbxdocs-app-shell.is-sidebar-collapsed .dbxdocs-sidebar .dbx-menu li > a {
    justify-content: center;
    padding-inline: .45rem;
}

.dbxdocs-app-shell.is-sidebar-collapsed .dbxdocs-sidebar .dbx-menu .dbx-cms-menu-page {
    display: none;
}

.dbxdocs-reference-overview {
    --reference-surface: #fff;
    --reference-surface-soft: #f2f7fc;
    --reference-border: #ccdeef;
    --reference-text: #15334f;
    --reference-muted: #5b7186;
    display: grid;
    gap: 1.1rem;
    color: var(--reference-text);
}

.theme-dark .dbxdocs-reference-overview {
    --reference-surface: #122238;
    --reference-surface-soft: #0d1b2d;
    --reference-border: #294660;
    --reference-text: #e6f1fb;
    --reference-muted: #adc0d2;
}

.dbxdocs-reference-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem);
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.4rem, 3vw, 2.3rem);
    border: 1px solid #1b5fad;
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 88% 15%, rgba(51, 152, 255, .34), transparent 17rem),
        linear-gradient(130deg, #071d43, #0c55aa);
    box-shadow: 0 18px 38px rgba(7, 43, 83, .18);
    color: #fff;
}

.dbxdocs-reference-hero::after {
    content: "</>";
    position: absolute;
    right: 2.5%;
    bottom: -24%;
    color: rgba(255, 255, 255, .06);
    font: 900 clamp(7rem, 16vw, 13rem)/1 monospace;
    pointer-events: none;
}

.dbxdocs-reference-hero > * {
    position: relative;
    z-index: 1;
}

.dbxdocs-reference-hero h1 {
    margin: .45rem 0 .55rem;
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -.035em;
}

.dbxdocs-reference-hero p {
    max-width: 64rem;
    margin: 0;
    color: #dcecff;
    font-size: 1.02rem;
}

.dbxdocs-reference-version {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
}

.dbxdocs-reference-version span,
.dbxdocs-reference-version strong {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    padding: .38rem .65rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: .76rem;
}

.dbxdocs-reference-version strong {
    border-color: #ffd978;
    background: #ffe7a0;
    color: #5c3b00;
}

.dbxdocs-reference-index {
    display: grid;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: .9rem;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
}

.dbxdocs-reference-index strong {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1;
}

.dbxdocs-reference-index span {
    margin-top: .35rem;
    color: #dcecff;
    font-size: .82rem;
}

.dbxdocs-reference-search {
    padding: 1rem 1.1rem;
    border: 1px solid var(--reference-border);
    border-radius: .9rem;
    background: var(--reference-surface);
    box-shadow: 0 9px 24px rgba(12, 54, 94, .08);
}

.dbxdocs-reference-search label {
    display: block;
    margin-bottom: .45rem;
    color: var(--reference-text);
    font-size: .83rem;
    font-weight: 800;
}

.dbxdocs-reference-search > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
}

.dbxdocs-reference-search > div > i {
    color: #0b67c8;
    font-size: 1.15rem;
}

.dbxdocs-reference-search input {
    min-width: 0;
    padding: .68rem .8rem;
    border: 1px solid var(--reference-border);
    border-radius: .65rem;
    background: var(--reference-surface-soft);
    color: var(--reference-text);
}

.dbxdocs-reference-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.dbxdocs-reference-columns > section {
    padding: 1.15rem;
    border: 1px solid var(--reference-border);
    border-radius: 1rem;
    background: var(--reference-surface);
    box-shadow: 0 10px 27px rgba(12, 54, 94, .08);
}

.dbxdocs-reference-columns > section > header {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-bottom: .9rem;
}

.dbxdocs-reference-columns h2,
.dbxdocs-reference-path h2 {
    margin: 0 0 .3rem;
    color: var(--reference-text);
    font-size: 1.2rem;
}

.dbxdocs-reference-columns p,
.dbxdocs-reference-path p {
    margin: 0;
    color: var(--reference-muted);
    font-size: .89rem;
}

.dbxdocs-reference-column-icon,
.dbxdocs-reference-card-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    background: linear-gradient(145deg, #1787e7, #0755a4);
    color: #fff;
    box-shadow: 0 7px 16px rgba(11, 103, 200, .22);
}

.dbxdocs-reference-column-icon.is-code {
    background: linear-gradient(145deg, #0ba194, #07635d);
    box-shadow: 0 7px 16px rgba(7, 99, 93, .2);
}

.dbxdocs-reference-card-grid {
    display: grid;
    gap: .55rem;
}

.dbxdocs-reference-card {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    padding: .7rem;
    border: 1px solid var(--reference-border);
    border-radius: .8rem;
    background: var(--reference-surface-soft);
    color: var(--reference-text) !important;
    text-decoration: none !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dbxdocs-reference-card:hover,
.dbxdocs-reference-card:focus-visible {
    border-color: #2683df;
    box-shadow: 0 8px 18px rgba(9, 84, 156, .13);
    transform: translateY(-1px);
}

.dbxdocs-reference-card-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .65rem;
    box-shadow: none;
}

.dbxdocs-reference-card strong,
.dbxdocs-reference-card small {
    display: block;
}

.dbxdocs-reference-card small {
    margin-top: .12rem;
    color: var(--reference-muted);
    font-size: .76rem;
}

.dbxdocs-reference-card > i {
    color: #0b67c8;
}

.dbxdocs-reference-path {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(25rem, .9fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--reference-border);
    border-left: 5px solid #0b67c8;
    border-radius: .9rem;
    background: var(--reference-surface);
}

.dbxdocs-reference-path ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dbxdocs-reference-path li {
    position: relative;
    display: grid;
    gap: .3rem;
    justify-items: center;
    padding: .65rem .45rem;
    border-radius: .7rem;
    background: var(--reference-surface-soft);
    color: var(--reference-text);
    text-align: center;
    font-size: .8rem;
    font-weight: 750;
}

.dbxdocs-reference-path li:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: -.48rem;
    z-index: 1;
    color: #0b67c8;
    transform: translateY(-50%);
}

.dbxdocs-reference-path li i {
    color: #0b67c8;
    font-size: 1.15rem;
}

.dbxdocs-reference {
    overflow: hidden;
    min-height: calc(100vh - 10.5rem);
    border: 1px solid #cdddee;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 12px 30px rgba(14, 62, 111, .12);
}

.dbxdocs-reference-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #d5e2ef;
    background: linear-gradient(135deg, #f8fbff, #eaf4ff);
}

.dbxdocs-reference-header h1 {
    margin: .1rem 0;
    color: #0a376d;
    font-size: clamp(1.15rem, 2vw, 1.6rem);
}

.dbxdocs-reference-header p {
    margin: 0;
    color: #5c6f83;
}

.dbxdocs-reference-kicker {
    color: #0b67c8;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dbxdocs-reference-kicker a {
    color: inherit;
    text-decoration: none;
}

.dbxdocs-reference-kicker a:hover,
.dbxdocs-reference-kicker a:focus-visible {
    text-decoration: underline;
}

.dbxdocs-reference-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.dbxdocs-reference-frame {
    display: block;
    width: 100%;
    height: calc(100vh - 15.5rem);
    min-height: 42rem;
    border: 0;
    background: #fff;
}

.theme-dark .dbxdocs-reference {
    border-color: #294660;
    background: #111d2b;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

.theme-dark .dbxdocs-reference-header {
    border-bottom-color: #294660;
    background: linear-gradient(135deg, #17283d, #102035);
}

.theme-dark .dbxdocs-reference-header h1 {
    color: #ecf5ff;
}

.theme-dark .dbxdocs-reference-header p {
    color: #aec2d5;
}

.theme-dark .dbxdocs-reference-frame {
    background: #16191e;
}

.dbxdocs-reference--window {
    min-height: calc(100vh - 8.5rem);
}

.dbxdocs-reference--window .dbxdocs-reference-frame {
    height: calc(100vh - 13.5rem);
    min-height: 36rem;
}

@media (max-width: 767px) {
    .dbxdocs-reference-hero,
    .dbxdocs-reference-columns,
    .dbxdocs-reference-path {
        grid-template-columns: 1fr;
    }

    .dbxdocs-reference-search > div {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dbxdocs-reference-search button {
        grid-column: 1 / -1;
    }

    .dbxdocs-reference-path ol {
        grid-template-columns: 1fr;
    }

    .dbxdocs-reference-path li:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -.7rem;
        transform: translateX(50%) rotate(90deg);
    }

    .dbxdocs-reference-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dbxdocs-reference-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .dbxdocs-reference-frame {
        height: calc(100vh - 18rem);
        min-height: 34rem;
    }
}

@media (max-width: 991.98px) {
    body.dbx-docs {
        overflow: auto;
    }

    .dbxdocs-app-shell,
    .dbxdocs-app-shell.is-sidebar-collapsed {
        display: block;
        min-height: 100vh;
    }

    body.dbx-docs #dbxApp.dbxdocs-app-shell,
    body.dbx-docs #dbxApp.dbxdocs-app-shell.is-sidebar-collapsed {
        display: block;
        height: auto;
    }

    body.dbx-docs #dbxHeader.dbxdocs-sidebar {
        position: relative;
        width: 100%;
        max-height: none;
        overflow: visible;
        border-right: 0;
    }

    .dbxdocs-brand-wrap {
        padding: .72rem 1rem;
    }

    .dbxdocs-brand-mark {
        min-width: 2.6rem;
        height: 2.6rem;
    }

    .dbxdocs-nav {
        position: fixed;
        z-index: 1060;
        inset: 0 auto 0 0;
        display: block;
        width: min(22rem, 100%);
        max-height: none;
        padding: 4.9rem .85rem 1.2rem;
        visibility: hidden;
        opacity: 0;
        background:
            linear-gradient(180deg, rgba(7, 40, 83, .995), rgba(5, 24, 53, .995)),
            url("../img/dbx-tech-circuit-v1.webp") center bottom / 38rem auto no-repeat;
        box-shadow: 18px 0 46px rgba(0, 16, 38, .42);
        transform: translateX(-104%);
        transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
        overscroll-behavior: contain;
    }

    .dbxdocs-app-shell.is-mobile-nav-open .dbxdocs-nav {
        display: block;
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }

    .dbxdocs-app-shell::after {
        position: fixed;
        z-index: 1050;
        inset: 0 0 0 min(22rem, 100%);
        visibility: hidden;
        content: "";
        opacity: 0;
        background: rgba(2, 14, 31, .58);
        backdrop-filter: blur(2px);
        transition: opacity .2s ease, visibility .2s ease;
        pointer-events: none;
    }

    .dbxdocs-app-shell.is-mobile-nav-open::after {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    body.dbx-docs:has(.dbxdocs-app-shell.is-mobile-nav-open) {
        overflow: hidden;
    }

    .dbxdocs-app-shell.is-mobile-nav-open .dbxdocs-sidebar-toggle {
        position: fixed;
        z-index: 1070;
        top: .9rem;
        right: max(.9rem, calc(100% - 22rem + .9rem));
        border-color: rgba(255, 255, 255, .62);
        background: linear-gradient(145deg, #e33149, #a80722);
    }

    .dbxdocs-nav-label {
        margin-bottom: .8rem;
        color: #b8dcff;
        font-size: .72rem;
    }

    .dbxdocs-mobile-nav-close {
        position: absolute;
        top: .9rem;
        right: .9rem;
        z-index: 2;
        display: grid;
        width: 2.65rem;
        height: 2.65rem;
        place-items: center;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .64);
        border-radius: .7rem;
        background: linear-gradient(145deg, #e33149, #a80722);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
    }

    .dbxdocs-nav > .dbx-menu-mobile-bar {
        display: none !important;
    }

    body.dbx-docs #dbxHeader.dbxdocs-sidebar #dbx_main_menu {
        display: block !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .dbxdocs-sidebar .dbx-menu li > a {
        min-height: 2.8rem;
        margin-block: .22rem;
        font-size: .92rem;
    }

    .dbxdocs-sidebar .dbx-menu-section-label {
        margin-top: .72rem;
    }

    .dbxdocs-sidebar-foot {
        display: none;
    }

    .dbxdocs-stage {
        min-height: auto;
        grid-template-rows: auto auto auto auto;
    }

    .dbxdocs-sectionbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        padding-inline: .55rem;
    }

    .dbxdocs-topbar {
        min-height: 3.8rem;
        padding-inline: .8rem;
    }

    .dbxdocs-audience span {
        display: none;
    }

    .dbxdocs-stage #dbxMain {
        min-height: 70vh;
        overflow: visible;
    }

    .dbxdocs-stage .dbx-content {
        height: auto;
        overflow: visible;
    }
}

@media (max-width: 575.98px) {
    .dbxdocs-page-title strong {
        max-width: 12rem;
    }

    .dbxdocs-stage #dbxContent {
        padding-inline: .65rem !important;
    }

    .dbxdocs-stage #dbxContent:has(> .dbxdocs-reference) {
        padding-inline: .5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dbxdocs-app-shell,
    .dbxdocs-sidebar .dbx-menu li > a,
    .dbxdocs-back-to-top {
        transition: none;
    }
}

/* Dokumentations-Shell im Nachtmodus: durchgehend dunkel statt heller Inseln. */
body.dbx-docs.skin-dunkel {
    color: #dce8f5;
    background:
        radial-gradient(circle at 82% 8%, rgba(28, 107, 190, .2), transparent 31rem),
        linear-gradient(135deg, #040911 0%, #081321 52%, #07101c 100%);
}

body.dbx-docs.skin-dunkel .dbxdocs-stage {
    background: #07111e;
}

body.dbx-docs.skin-dunkel .dbxdocs-topbar {
    color: #e8f2fc;
    border-bottom-color: #284663;
    background: rgba(7, 18, 31, .96);
    box-shadow: 0 8px 24px rgba(0, 4, 10, .38);
}

body.dbx-docs.skin-dunkel .dbxdocs-page-title strong {
    color: #e9f3fd;
}

body.dbx-docs.skin-dunkel .dbxdocs-kicker {
    color: #6fb9ff;
}

body.dbx-docs.skin-dunkel .dbxdocs-audience a {
    color: #b9dbfb;
    border-color: #31597d;
    background: #0d2034;
}

body.dbx-docs.skin-dunkel .dbxdocs-audience a:hover,
body.dbx-docs.skin-dunkel .dbxdocs-audience a:focus-visible {
    color: #fff;
    border-color: #459cf0;
    background: #125da3;
}

body.dbx-docs.skin-dunkel .dbxdocs-sectionbar {
    color: #c9e2f8;
    border-bottom-color: #294967;
    background: rgba(8, 22, 37, .97);
    box-shadow: 0 8px 20px rgba(0, 4, 10, .3);
}

body.dbx-docs.skin-dunkel .dbxdocs-sectionbar .dbx-menu-section .dbx-menu-link {
    color: #b9dafa;
    border-color: #315675;
    background: #0d2033;
    box-shadow: 0 3px 10px rgba(0, 4, 10, .25);
}

body.dbx-docs.skin-dunkel .dbxdocs-sectionbar .dbx-menu-section > .dbx-menu-list > .dbx-menu-item > .dbx-menu-list {
    border-top-color: #294967;
    background: rgba(9, 25, 42, .98);
}

body.dbx-docs.skin-dunkel .dbxdocs-stage .dbx-content {
    background:
        linear-gradient(rgba(7, 17, 30, .94), rgba(7, 17, 30, .94)),
        url("../img/dbx-tech-circuit-v1.webp") 95% 95% / 41rem auto no-repeat;
}

body.dbx-docs.skin-dunkel .dbxdocs-stage #dbxContent {
    background: #0a1523 !important;
    color: #dce8f5 !important;
    border-color: #29435f !important;
}

body.dbx-docs.skin-dunkel #dbxFooter.dbxdocs-footer {
    color: #bcd8f1;
    border-top-color: #244b70;
    background: linear-gradient(180deg, #0a2340, #061425);
}
