:root {
    --wiki-max-height: calc(100vh - (4 * var(--behnke-basic)));
    /* Width of the left navigation column. Driving both the sidebar and the
       main column off one custom property lets the desktop collapse toggle
       animate them in lock-step by flipping this single value to 0. */
    --wiki-sidebar-w: 20vw;
}

body {
    margin: 0;
    padding: 0;
}

.wiki-header {
    height: calc(4 * var(--behnke-basic));
}

/* ── Top-right header cluster (Neuigkeiten · Firmware · Handbuch) ─────────────
   The header sits on the dark brand background, so the action links are styled
   as modern chips: firmware / manual as translucent "ghost" chips (matching
   the header search field), and Neuigkeiten as a solid light chip that reads
   as the primary call-to-action. Scoped to .wiki-header-downloads so the logo
   and brand label (also .header-element, but in .header-info) are untouched. */
.wiki-header .wiki-header-downloads {
    display: flex;
    align-items: center;
    gap: calc(0.55 * var(--behnke-basic));
}

.wiki-header .wiki-header-downloads .header-element {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: calc(0.32 * var(--behnke-basic)) calc(0.8 * var(--behnke-basic));
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.wiki-header .wiki-header-downloads .header-element:hover,
.wiki-header .wiki-header-downloads .header-element:focus-visible {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
}

/* ── Downloads dropdown (Firmware · Handbuch · IP-Video) ─────────────────── */
.wiki-header .wiki-dl {
    position: relative;
    display: inline-flex;
}

.wiki-header .wiki-dl-trigger {
    cursor: pointer;
    font-family: inherit;
}

.wiki-header .wiki-dl-caret {
    font-size: 0.7em;
    transition: transform 0.15s ease;
}

.wiki-header .wiki-dl[data-open] .wiki-dl-caret {
    transform: rotate(180deg);
}

/* Panel: a light card, matching the popups (white, brand accent, soft shadow). */
.wiki-header .wiki-dl-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: calc(0.4 * var(--behnke-basic));
    background: #fff;
    border-radius: 12px;
    border-top: 3px solid #2a3072;
    box-shadow: 0 12px 32px rgba(27, 42, 94, 0.28);
    z-index: 1300;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wiki-header .wiki-dl-panel[hidden] {
    display: none;
}

.wiki-header .wiki-dl-item {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: calc(0.5 * var(--behnke-basic)) calc(0.7 * var(--behnke-basic));
    border-radius: 8px;
    color: #1b2a5e;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s ease;
}

.wiki-header .wiki-dl-item:hover,
.wiki-header .wiki-dl-item:focus-visible {
    background: #eef1fb;
}

.wiki-header .wiki-dl-item__icon {
    color: #2a3072;
    font-size: 1.05em;
    line-height: 1;
}

.wiki-header .wiki-dl-item__label {
    flex: 1 1 auto;
}

.wiki-header .wiki-dl-item__ver {
    color: #6c757d;
    font-size: 0.78rem;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* "Neuigkeiten in vX.XX" — solid light chip, the eye-catcher of the cluster. */
.wiki-header .wiki-header-downloads .wiki-header-news {
    position: relative;
    background: #fff;
    border-color: #fff;
    color: #1b2a5e;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .20);
}

.wiki-header .wiki-header-downloads .wiki-header-news:hover,
.wiki-header .wiki-header-downloads .wiki-header-news:focus-visible {
    background: #eef1fb;
    border-color: #eef1fb;
    color: #1b2a5e;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .26);
}

.wiki-header .wiki-header-news__icon {
    font-size: 1.05em;
    line-height: 1;
}

/* Notification dot — a small warm accent that draws the eye without a heavy
   colour fill. */
.wiki-header .wiki-header-news::after {
    content: "";
    position: absolute;
    top: -2px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e8590c;
    box-shadow: 0 0 0 2px #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .wiki-header .wiki-header-news::after {
        animation: wiki-news-dot 2.2s ease-in-out infinite;
    }
    @keyframes wiki-news-dot {
        0%, 70%, 100% { transform: scale(1);   opacity: 1; }
        85%           { transform: scale(1.6); opacity: .5; }
    }
}

/* Embed mode (?embed=1): the top header is not rendered, so the toolbar
   needs to sit flush at the top and the wiki-main / sidebar height
   calculation has to reclaim the freed 4×basic of vertical space. */
body.wiki-embed {
    --wiki-max-height: 100vh;
}

body.wiki-embed .wiki-toolbar {
    top: 0;
}

/* Hide-toolbar mode (?hide_toolbar=1): the toolbar is not rendered at all,
   so nothing extra is needed for layout — this rule is a defensive fallback
   in case the markup is ever present but should stay hidden. */
body.wiki-hide-toolbar .wiki-toolbar {
    display: none;
}

/* Headless / single-page mode (?headless=1): header, toolbar and sidebar are
   all dropped — only the content remains.  Reclaim the full viewport so the
   page reads as bare embeddable content.  The two-class selector outranks the
   plain .wiki-main rules (including the responsive ones) regardless of order. */
body.wiki-headless {
    --wiki-max-height: 100vh;
}

body.wiki-headless .wiki-main {
    width: 100vw;
    max-width: 100vw;
    /* Centre the content in a readable column: symmetric inline padding that
       grows with the viewport but never drops below the base gutter, so the
       text sits centred on wide screens and stays comfortable on narrow ones. */
    padding-inline: max(var(--behnke-basic), calc((100vw - 60rem) / 2));
}

/* Floating-sidebar mode (?floating_sidebar=1): lift the sidebar off the
   viewport edge — extra room on the left, rounded corners, a soft shadow and
   an optional embedder background colour (?sidebar_color=, injected as the
   --wiki-floating-sidebar-bg custom property; falls back to the default
   gradient). Two-class selectors outrank the base .wiki-sidebar/.wiki-menu. */
body.wiki-floating-sidebar .wiki-sidebar {
    box-sizing: border-box;
    padding: var(--behnke-basic) 0 var(--behnke-basic) var(--behnke-basic);
}

body.wiki-floating-sidebar .wiki-menu {
    height: calc(var(--wiki-max-height) - (2 * var(--behnke-basic)));
    border-radius: calc(1.2 * var(--behnke-basic));
    overflow: hidden;
    background: var(--wiki-floating-sidebar-bg, var(--behnke-gradient-connect));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.20);
}

.wiki-wrapper {
    display: flex;
    box-sizing: border-box;
    max-width: 100vw;
    max-height: var(--wiki-max-height);
    margin: 0 auto;
}

.wiki-sidebar {
    width: var(--wiki-sidebar-w);
    max-width: var(--wiki-sidebar-w);
    overflow: hidden;
    transition: width 0.28s ease, max-width 0.28s ease;
}

.wiki-main {
    box-sizing: border-box;
    padding: var(--behnke-basic);
    width: calc(100vw - var(--wiki-sidebar-w));
    max-width: calc(100vw - var(--wiki-sidebar-w));
    height: var(--wiki-max-height);
    overflow-y: scroll;
    transition: width 0.28s ease, max-width 0.28s ease;
}

/* Desktop collapse: flip the width variable to 0 so both columns animate and
   the article reclaims the full reading width. The re-open handle
   (.wiki-sidebar-toggle) is position:fixed, so it stays reachable at width 0. */
body.wiki-sidebar-collapsed {
    --wiki-sidebar-w: 0px;
}

.wiki-main * {
    max-width: 100%;
}

/* -----------------------------
   TOOLBAR GUTTER

   The action rail (.wiki-toolbar) is position:fixed against the right viewport
   edge, and .wiki-main reaches that same edge — so without a gutter the article
   text scrolls underneath the rail. On screens wide enough to show the rail
   beside the content, reserve its width (plus one base gap) as right padding so
   the content ends *before* the toolbar starts instead of running behind it.

   Skipped when the toolbar isn't rendered: hide-toolbar mode, and headless mode
   (which sets its own symmetric padding-inline and is excluded here so it wins).
   ----------------------------- */
@media (min-width: 701px) {
    body:not(.wiki-hide-toolbar):not(.wiki-headless) .wiki-main {
        padding-right: calc(6rem + 3 * var(--behnke-basic));
    }
}

.wiki-menu {
    box-sizing: border-box;
    width: 100%;
    height: var(--wiki-max-height);
    background: var(--behnke-gradient-connect);
    color: var(--behnke-white);
    display: flex;
    flex-direction: column;
}

.wiki-menu-nav {
    flex: 1;
    min-height: 0;
    padding: var(--behnke-basic);
    overflow-y: auto;
}

/* -----------------------------
   SIDEBAR FOOTER
----------------------------- */

.wiki-menu-footer {
    flex-shrink: 0;
    padding: calc(0.6 * var(--behnke-basic)) var(--behnke-basic);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.4 * var(--behnke-basic));
}

/* Language switcher */

.wiki-lang-switcher {
    display: flex;
    gap: calc(0.4 * var(--behnke-basic));
    flex-wrap: wrap;
    justify-content: center;
}

.wiki-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(0.25 * var(--behnke-basic)) calc(0.4 * var(--behnke-basic));
    border-radius: calc(0.3 * var(--behnke-basic));
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.6;
    transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}

.wiki-lang-btn:hover {
    opacity: 0.85;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.wiki-lang-btn.wiki-lang-active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.15);
}

/* Support section */

.wiki-menu-support {
    flex-shrink: 0;
    padding: calc(0.75 * var(--behnke-basic)) var(--behnke-basic);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: calc(0.3 * var(--behnke-basic));
}

.wiki-menu-support-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: calc(0.15 * var(--behnke-basic));
}

.wiki-menu-support-item {
    display: flex;
    align-items: center;
    gap: calc(0.4 * var(--behnke-basic));
    font-size: var(--behnke-smaller-font-size, 0.8rem);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    border-radius: calc(0.3 * var(--behnke-basic));
    padding: calc(0.2 * var(--behnke-basic)) calc(0.3 * var(--behnke-basic));
    transition: color 0.15s, background 0.15s;
}

.wiki-menu-support-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.wiki-menu-support-icon {
    font-size: 1em;
    flex-shrink: 0;
    width: 1.2em;
    text-align: center;
}

.menu-node {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}

.menu-child-nodes {
    margin-left: var(--behnke-basic);
    padding-left: var(--behnke-basic);
    margin-top: calc(0.5 * var(--behnke-basic));
    border-left: 1px solid var(--behnke-gray);
}

/* The whole tree is in the DOM so the arrows can fold it without a round trip
   (see GitLabWikiMenuRenderer::renderMenuNode). Closed branches must therefore
   take no space at all — `display: none`, not the `visibility` it used to be:
   on a block child that only makes the branch invisible while it keeps its
   height, which would leave the sidebar full of gaps. */
.menu-node .menu-child-nodes {
    display: none;
}

.menu-node.menu-node-open > .menu-child-nodes {
    display: block;
    /* Plays both on load for the server-opened branch and every time the
       reader unfolds one. */
    animation: wiki-menu-reveal 0.28s ease both;
}

@keyframes wiki-menu-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .menu-node.menu-node-open > .menu-child-nodes { animation: none; }
}

.menu-node.menu-node-active > .menu-node-label,
.menu-node.menu-node-active > .menu-node-label p {
    color: var(--behnke-white);
    background-color: var(--behnke-design);
}

.menu-node.menu-node-active > .menu-node-label {
    border-left: 2px solid var(--behnke-white);
    padding: calc(0.5 * var(--behnke-basic));
}

.menu-node.menu-node-active > .menu-child-nodes {
    border-left-width: 2px;
    border-left-color: var(--behnke-white);
}

.wiki-menu a,
.menu-node-label {
    display: flex;
    align-items: center;
    /* Light-on-dark: the sidebar sits on the dark brand gradient, so inactive
       links use a high-opacity white (≈AA on the gradient) instead of the
       mid-gray design token, which read as too faint / low-contrast here. */
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    margin: 0;
    font-size: var(--behnke-normal-font-size);
    border-radius: calc(0.5 * var(--behnke-basic));
    padding: calc(0.25 * var(--behnke-basic));
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.wiki-menu a p,
.menu-node-label p {
    margin: 0;
    padding: 0;
}

/* Expand affordance: a caret on every entry that has sub-pages. It is an
   indicator only — the branch expands when its page is opened (server-rendered)
   — but it tells users up front which items lead deeper. Drawn as a rotated
   corner of two borders so it inherits the link colour. */
.menu-node-caret {
    flex-shrink: 0;
    margin-left: auto;
    width: 0.42em;
    height: 0.42em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);        /* points right when collapsed */
    opacity: 0.65;
    transition: transform 0.2s ease, opacity 0.15s ease;
}

.menu-node-label:hover .menu-node-caret {
    opacity: 1;
}

.menu-node.menu-node-open > .menu-node-label .menu-node-caret {
    transform: rotate(45deg);          /* points down when expanded */
}

/* The arrow is the fold control, so it needs a hit area bigger than the glyph —
   but the glyph IS this element's border-right/-bottom, so padding would push
   those outwards and simply draw a bigger arrow. The area is added as an
   invisible overlay instead, which leaves the drawn size untouched; clicks on a
   pseudo-element count as clicks on its host. */
.menu-node-label .menu-node-caret {
    position: relative;
    cursor: pointer;
}

.menu-node-label .menu-node-caret::before {
    content: "";
    position: absolute;
    inset: -0.6em;
}

.menu-node-label:hover,
.menu-node-label:hover p {
    background-color: var(--behnke-design);
    color: var(--behnke-white);
}

.menu-node-link { 
    display: none;
}

.menu-child-nodes .menu-node-label {
    font-weight: 400;
}

/* -----------------------------
TABLET
----------------------------- */

@media (max-width: 1000px) {

    :root {
        --wiki-sidebar-w: 260px;
    }

}

/* -----------------------------
MOBILE
----------------------------- */

@media (max-width: 700px) {

    .wiki-wrapper {
        flex-direction: column;
        max-height: none;
    }

    .wiki-sidebar {
        position: fixed;
        top: calc(4 * var(--behnke-basic));
        bottom: 0;                       /* iOS Safari: 100vh reaches behind
                                            the URL bar / bottom toolbar, so
                                            we anchor to the actual visible
                                            bottom edge instead. */
        left: 0;
        width: 280px;
        max-width: 80vw;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 1000;
        display: flex;                   /* let .wiki-menu fill via 100% */
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.28);
    }

    .wiki-sidebar > nav,
    .wiki-sidebar > nav > .wiki-menu {
        height: 100%;
        max-height: 100%;
        flex: 1;
        min-height: 0;
        overflow: hidden;                /* inner .wiki-menu-nav scrolls */
    }

    .wiki-main {
        width: 100vw;
        max-width: 100vw;
        height: auto;
        overflow-y: auto;
    }

    /* Smaller list-item type so long enumerations still fit nicely. */
    .wiki-main li,
    .wiki-main ul li,
    .wiki-main ol li {
        font-size: 0.9rem;
        line-height: 1.5;
    }

}

.wiki-burger-wrapper {
    display: none;
}

.wiki-burger {
    display: none;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    margin-right: 8px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.15s;
    flex-shrink: 0;
    background: transparent;
}

.wiki-burger:hover {
    background: rgba(255, 255, 255, 0.12);
}

.wiki-burger span {
    display: block;
    height: 2px;
    width: 18px;
    background: var(--behnke-white);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

@media (max-width: 700px) {

    .wiki-burger-wrapper {
        display: flex;
        height: calc(3 * var(--behnke-basic));
        align-items: center;
        margin-left: auto;
    }

    /* On phones the top bar keeps only logo · search · burger. The action
       chips (Neuigkeiten / Firmware / Handbuch) would overflow the row and
       push the burger off-screen, so they are hidden here — the burger menu
       is the entry point on mobile. */
    .wiki-header .wiki-header-downloads {
        display: none;
    }

    body.menu-open .wiki-sidebar {
        transform: translateX(0);
    }

    /* Embed mode has no header, so the off-canvas sidebar reclaims the top gap
       normally reserved for it and spans the full viewport height. */
    body.wiki-embed .wiki-sidebar {
        top: 0;
    }

    body.menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        z-index: 900;
        animation: wiki-backdrop-fade 0.28s ease both;
    }

    @keyframes wiki-backdrop-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .wiki-sidebar {
        z-index: 1000;
    }

    .wiki-burger {
        display: flex;
    }

}

body.menu-open .wiki-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.menu-open .wiki-burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

body.menu-open .wiki-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Floating burger (embed mode): the header isn't rendered, so this standalone
   toggle is the only way to open the off-canvas sidebar on mobile. It inherits
   the display:none → display:flex-on-mobile behaviour of .wiki-burger-wrapper,
   so it stays hidden on desktop. Fixed to the top-left corner, above the
   sidebar (1000) and backdrop (900) so it remains tappable to close the menu.
   Unlike the header burger (white border on a dark bar) it sits over article
   content, so it needs an opaque brand background for the white bars to show. */
.wiki-burger-wrapper--floating {
    position: fixed;
    top: calc(0.5 * var(--behnke-basic));
    left: calc(0.5 * var(--behnke-basic));
    z-index: 1100;
    margin: 0;
    height: auto;
}

.wiki-burger-wrapper--floating .wiki-burger {
    background: var(--behnke-gradient-connect, #1a6bb5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.wiki-burger-wrapper--floating .wiki-burger:hover {
    background: var(--behnke-gradient-connect, #1a6bb5);
    filter: brightness(1.1);
}
/* ── Legal links footer ──────────────────────────────────────────────── */

.wiki-menu-legal {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.3 * var(--behnke-basic)) calc(0.6 * var(--behnke-basic));
    padding: calc(0.6 * var(--behnke-basic)) var(--behnke-basic);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wiki-menu-legal-link {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}

.wiki-menu-legal-link:hover {
    color: rgba(255, 255, 255, 0.85);
}

/* ── Desktop sidebar collapse toggle ─────────────────────────────────────
   A slim handle pinned to the sidebar's right edge (tracks --wiki-sidebar-w,
   so it rides the collapse animation and lands at the viewport edge when the
   sidebar is at width 0). Hidden on phones — there the burger owns the menu —
   and in headless mode, which has no sidebar at all. */
.wiki-sidebar-toggle {
    display: none;
}

@media (min-width: 701px) {
    body:not(.wiki-headless) .wiki-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 50%;
        left: var(--wiki-sidebar-w);
        transform: translateY(-50%);
        width: 20px;
        height: 52px;
        padding: 0;
        z-index: 1200;
        cursor: pointer;
        color: #fff;
        background: var(--behnke-design, #1a6bb5);
        border: none;
        border-radius: 0 7px 7px 0;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.18);
        transition: left 0.28s ease, background 0.15s ease, filter 0.15s ease;
    }

    body:not(.wiki-headless) .wiki-sidebar-toggle:hover {
        filter: brightness(1.1);
    }

    body:not(.wiki-headless) .wiki-sidebar-toggle:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    .wiki-sidebar-toggle-icon {
        width: 0.5em;
        height: 0.5em;
        border-left: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);          /* points left → "collapse" */
        transition: transform 0.28s ease;
    }

    body.wiki-sidebar-collapsed .wiki-sidebar-toggle-icon {
        transform: rotate(-135deg);        /* points right → "expand" */
    }
}