/*
 * r1139 — site-indeling aanpassen via © 2026 Snoeten.nl.
 * De voorkeuren gelden op desktop; mobiel/tablet behouden hun eigen app-layout.
 */

:root {
    --site-layout-popup-orange: #F19620;
    --site-layout-popup-blue: #285EBC;
    --site-layout-popup-green: #557a3e;
}

/* Footer-link: gedraagt zich visueel exact als de bestaande footerlinks. */
#taskbar .taskbar-footer-links .taskbar-footer-layout-link {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 7px 9px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font: 400 var(--base-font-size,16px)/1.35 var(--base-font,Comfortaa,Arial,sans-serif) !important;
    text-align: left !important;
    cursor: pointer !important;
}
#taskbar .taskbar-footer-links .taskbar-footer-layout-link span {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
#taskbar .taskbar-footer-links .taskbar-footer-layout-link svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: .72 !important;
}
#taskbar .taskbar-footer-links .taskbar-footer-layout-link:hover,
#taskbar .taskbar-footer-links .taskbar-footer-layout-link:focus-visible {
    background: rgba(255,255,255,.13) !important;
    outline: none !important;
}

/* -----------------------------------------------------------------------
   Desktopindeling
   ----------------------------------------------------------------------- */
@media (min-width: 1025px) {
    /* Normale 2-koloms pagina's: taakbalk naar rechts. */
    html.site-layout-taskbar-right #container:not(.fullscreen):not(:has(> #sidebar)) {
        grid-template-areas:
            "header taskbar"
            "main taskbar"
            "footer taskbar" !important;
        grid-template-columns: minmax(0,1fr) 220px !important;
    }

    /* Pagina's met een echte rechter sidebar. */
    html.site-layout-taskbar-right #container:not(.fullscreen):has(> #sidebar) {
        grid-template-areas:
            "header header taskbar"
            "main sidebar taskbar"
            "footer footer taskbar" !important;
        grid-template-columns: minmax(0,1fr) 350px 220px !important;
    }

    /* Fullscreen container. */
    html.site-layout-taskbar-right #container.fullscreen {
        grid-template-areas:
            "header taskbar"
            "main taskbar"
            "footer taskbar" !important;
        grid-template-columns: minmax(0,1fr) 220px !important;
    }

    /* Profielpagina's: ingeklapte taakbalk blijft 76px en opent naar links. */
    html.site-layout-taskbar-right #profile {
        grid-template-areas:
            "header taskbar"
            "main taskbar"
            "footer taskbar" !important;
        grid-template-columns: minmax(0,1fr) 76px !important;
    }
    html.site-layout-taskbar-right #profile > #taskbar.profile-taskbar-collapsible,
    html.site-layout-taskbar-right #container.groups-profile > #taskbar.profile-taskbar-collapsible {
        justify-self: end !important;
    }

    /* Berichtenscherm met eigen 3-koloms grid. */
    html.site-layout-taskbar-right #messages {
        grid-template-areas:
            "header header header"
            "main sidebar taskbar"
            "footer footer taskbar" !important;
        grid-template-columns: minmax(0,1fr) 350px 100px !important;
    }

    /* Footer-popup van de taakbalk opent naar binnen als de balk rechts staat. */
    html.site-layout-taskbar-right #taskbar .taskbar-footer-content {
        left: auto !important;
        right: calc(100% + 10px) !important;
        transform: translateX(8px) !important;
    }
    html.site-layout-taskbar-right #taskbar .taskbar-footer-panel.is-open .taskbar-footer-content {
        transform: translateX(0) !important;
    }

    /*
     * "Oranje header onder taakbalk":
     * de header loopt over de volledige breedte door, met de blauwe taakbalk
     * erboven. Hierdoor ligt de header letterlijk onder de taakbalk.
     */
    html.site-layout-header-under-taskbar #container > #header,
    html.site-layout-header-under-taskbar #profile > #header {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        z-index: 1 !important;
    }
    html.site-layout-header-under-taskbar #container > #taskbar,
    html.site-layout-header-under-taskbar #profile > #taskbar {
        z-index: 4 !important;
    }

    /* Ook rechts blijft de taakbalk boven de doorlopende header liggen. */
    html.site-layout-taskbar-right.site-layout-header-under-taskbar #container > #header,
    html.site-layout-taskbar-right.site-layout-header-under-taskbar #profile > #header {
        grid-column: 1 / -1 !important;
    }
}

/* -----------------------------------------------------------------------
   Popup
   ----------------------------------------------------------------------- */
.site-layout-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483300;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(25,35,49,.48);
}
.site-layout-overlay[hidden] {
    display: none !important;
}

.site-layout-window {
    width: min(680px, calc(100vw - 28px));
    max-height: min(720px, calc(100vh - 28px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #686868;
    border-radius: 10px;
    background: #dedede;
    box-shadow: 0 22px 70px rgba(0,0,0,.38);
    font-family: var(--base-font, Comfortaa, Arial, sans-serif);
}

.site-layout-window-header {
    min-height: 48px;
    padding: 0 8px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background:
        radial-gradient(circle at 50% -22px, rgba(255,255,255,.28) 0, rgba(255,255,255,.12) 34%, rgba(255,255,255,0) 68%),
        linear-gradient(180deg,#949494 0%,#858585 48%,#777 100%);
    color: #fff;
    border-bottom: 1px solid #686868;
    box-shadow: inset 0 1px rgba(255,255,255,.38);
}
.site-layout-window-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0,0,0,.28);
}
.site-layout-window-title svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* r1221 — ook het Xje gebruikt ongewijzigd de gewone .button-stijl. */
.site-layout-window-close svg {
    width: 17px;
    height: 17px;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}


.site-layout-window-body {
    overflow: auto;
    padding: 18px;
    background: #fff;
}
.site-layout-window-intro {
    margin: 0 0 16px;
    color: #606872;
    line-height: 1.55;
}
.site-layout-options {
    display: grid;
    gap: 12px;
}
.site-layout-option {
    min-width: 0;
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid #d7dce4;
    border-radius: 8px;
    background: #f7f8fa;
}
.site-layout-option-copy {
    min-width: 0;
}
.site-layout-option-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #303947;
    font-size: 15px;
}
.site-layout-option-copy span {
    display: block;
    color: #727a85;
    font-size: 12px;
    line-height: 1.45;
}
.site-layout-switch {
    width: 48px;
    height: 27px;
    position: relative;
    display: inline-flex;
    flex: 0 0 48px;
}
.site-layout-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.site-layout-switch-track {
    width: 48px;
    height: 27px;
    position: relative;
    border-radius: 999px;
    background: #b7bec7;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
    transition: background .16s ease;
    cursor: pointer;
}
.site-layout-switch-track::after {
    content: "";
    width: 21px;
    height: 21px;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.24);
    transition: transform .16s ease;
}
.site-layout-switch input:checked + .site-layout-switch-track {
    background: #557a3e;
}
.site-layout-switch input:checked + .site-layout-switch-track::after {
    transform: translateX(21px);
}
.site-layout-switch input:focus-visible + .site-layout-switch-track {
    outline: 3px solid rgba(75,114,170,.22);
    outline-offset: 2px;
}

.site-layout-preview {
    margin-top: 16px;
    padding: 13px;
    border: 1px solid #d5dae2;
    border-radius: 8px;
    background: #eef1f5;
}
.site-layout-preview-title {
    margin: 0 0 9px;
    color: #596270;
    font-size: 12px;
    font-weight: 700;
}
.site-layout-mini {
    height: 126px;
    position: relative;
    overflow: hidden;
    border: 1px solid #cdd3dc;
    border-radius: 7px;
    background: #e7e9ec;
}
.site-layout-mini-taskbar {
    width: 48px;
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 9px;
    z-index: 3;
    border-radius: 5px;
    background: linear-gradient(180deg,#2F68CC,#1F4FAE);
    transition: left .16s ease, right .16s ease;
}
.site-layout-mini-header {
    height: 23px;
    position: absolute;
    top: 9px;
    right: 9px;
    left: 65px;
    z-index: 2;
    border-radius: 5px;
    background: linear-gradient(180deg,#F9A62B,#ED9010);
    transition: left .16s ease, right .16s ease;
}
.site-layout-mini-main {
    position: absolute;
    top: 39px;
    right: 9px;
    bottom: 9px;
    left: 65px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(47,104,204,.10);
    transition: left .16s ease, right .16s ease;
}
.site-layout-mini.is-taskbar-right .site-layout-mini-taskbar {
    left: auto;
    right: 9px;
}
.site-layout-mini.is-taskbar-right .site-layout-mini-header,
.site-layout-mini.is-taskbar-right .site-layout-mini-main {
    left: 9px;
    right: 65px;
}
.site-layout-mini.is-header-under .site-layout-mini-header {
    left: 9px;
    right: 9px;
}
.site-layout-mini.is-taskbar-right.is-header-under .site-layout-mini-header {
    left: 9px;
    right: 9px;
}

.site-layout-window-footer {
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #bfc4c9;
    background: #d7dade;
}
.site-layout-window-footer > div {
    display: flex;
    gap: 7px;
}

body.site-layout-dialog-open {
    overflow: hidden !important;
}

@media (max-width: 700px) {
    .site-layout-overlay {
        padding: 10px;
    }
    .site-layout-window {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }
    .site-layout-window-body {
        padding: 14px;
    }
    .site-layout-option {
        grid-template-columns: minmax(0,1fr) 48px;
        padding: 12px;
    }
}


/* ========================================================================
   r1140 — structurele desktopfix
   De blauwe taakbalk is position:fixed. Alleen grid-areas omwisselen was dus
   niet genoeg. Deze regels verplaatsen zowel de gereserveerde gridkolom als
   de daadwerkelijke vaste taakbalk.
   ======================================================================== */

@media (min-width:1025px) {

    /* ---------------------------------------------------------------
       TAAKBALK RECHTS — echte positie + gridkolom
       --------------------------------------------------------------- */

    html.site-layout-taskbar-right #container > #taskbar,
    html.site-layout-taskbar-right #profile > #taskbar {
        left:auto !important;
        right:var(--site-layout-taskbar-right-gap, 20px) !important;
    }

    /*
     * Standaard Snoetencontainer:
     * origineel = taskbar | main | sidebar
     * rechts    = main | sidebar | taskbar
     */
    html.site-layout-taskbar-right
    #container:not(.fullscreen):not(.groups-profile):has(> #sidebar) {
        grid-template-areas:
            "header header taskbar"
            "main sidebar taskbar"
            "footer footer taskbar" !important;
        grid-template-columns:minmax(0,1fr) 350px 220px !important;
    }

    /* Pagina zonder rechterzijbalk. */
    html.site-layout-taskbar-right
    #container:not(.fullscreen):not(.groups-profile):not(:has(> #sidebar)) {
        grid-template-areas:
            "header taskbar"
            "main taskbar"
            "footer taskbar" !important;
        grid-template-columns:minmax(0,1fr) 220px !important;
    }

    html.site-layout-taskbar-right #container.fullscreen {
        grid-template-areas:
            "header taskbar"
            "main taskbar"
            "footer taskbar" !important;
        grid-template-columns:minmax(0,1fr) 200px !important;
    }

    /*
     * Profiel en groepen gebruiken op desktop de compacte 76px taakbalk.
     * De balk kan nog steeds naar 220px uitklappen; doordat hij rechts is
     * verankerd groeit hij dan naar links en blijft hij binnen het scherm.
     */
    html.site-layout-taskbar-right #profile,
    html.site-layout-taskbar-right #container.groups-profile {
        grid-template-areas:
            "header taskbar"
            "main taskbar"
            "footer taskbar" !important;
        grid-template-columns:minmax(0,1fr) 76px !important;
    }

    html.site-layout-taskbar-right
    :is(#profile, #container.groups-profile)
    > #taskbar.profile-taskbar-collapsible {
        justify-self:end !important;
        left:auto !important;
        right:var(--site-layout-taskbar-right-gap,20px) !important;
        transform-origin:right center !important;
    }

    /* Het copyrightvenster moet naar de binnenkant openen. */
    html.site-layout-taskbar-right #taskbar .taskbar-footer-content {
        left:auto !important;
        right:calc(100% + 10px) !important;
        transform:translateX(8px) !important;
    }

    html.site-layout-taskbar-right
    #taskbar .taskbar-footer-panel.is-open
    .taskbar-footer-content {
        transform:translateX(0) !important;
    }

    /* ---------------------------------------------------------------
       ORANJE HEADER ONDER DE TAAKBALK
       --------------------------------------------------------------- */

    /*
     * De header krijgt dezelfde eerste gridrij maar loopt over ALLE kolommen.
     * De vaste blauwe taakbalk heeft de hogere z-index en ligt er daardoor
     * werkelijk bovenop. De main/sidebar-indeling eronder verandert niet.
     */
    html.site-layout-header-under-taskbar #container > #header,
    html.site-layout-header-under-taskbar #profile > #header {
        grid-column:1 / -1 !important;
        grid-row:1 !important;
        width:auto !important;
        max-width:none !important;
        z-index:1 !important;
    }

    html.site-layout-header-under-taskbar #container > #taskbar,
    html.site-layout-header-under-taskbar #profile > #taskbar {
        z-index:110 !important;
    }

    /*
     * Headerinhoud niet achter de balk laten verdwijnen.
     * Links: ruimte aan linkerzijde.
     * Rechts: ruimte aan rechterzijde.
     */
    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    #container > #header,
    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    #profile > #header {
        padding-left:var(--site-layout-header-taskbar-width,220px) !important;
        box-sizing:border-box !important;
    }

    html.site-layout-header-under-taskbar.site-layout-taskbar-right
    #container > #header,
    html.site-layout-header-under-taskbar.site-layout-taskbar-right
    #profile > #header {
        padding-right:var(--site-layout-header-taskbar-width,220px) !important;
        box-sizing:border-box !important;
    }

    /* Compacte profieltaakbalk reserveert slechts 76px zolang hij dicht is. */
    html.site-layout-header-under-taskbar
    :is(#profile, #container.groups-profile)
    > #header {
        --site-layout-header-taskbar-width:76px;
    }

    /* Geen extra headerpadding als optie uitstaat. */
    html:not(.site-layout-header-under-taskbar) #container > #header,
    html:not(.site-layout-header-under-taskbar) #profile > #header {
        padding-left:0 !important;
        padding-right:0 !important;
    }

    /*
     * Het grid mag de taakbalk niet op een onverwachte statische positie
     * laten meetellen; de expliciete rechterverankering is leidend.
     */
    html.site-layout-taskbar-right #taskbar {
        margin-left:0 !important;
        margin-right:0 !important;
    }
}


/* ========================================================================
   r1143 — STRUCTURELE "ONDER ELKAAR" INDELING

   Geen grid-truc meer met #taskbar en #header als losse elementen.
   JavaScript zet beide in één .site-layout-side-stack:

   LINKS:
   ┌──────────┬─────────────────────────────┐
   │ TAAKBALK │                             │
   │  blauw   │          INHOUD             │
   ├──────────┤                             │
   │  HEADER  │                             │
   │  oranje  │                             │
   └──────────┴─────────────────────────────┘

   RECHTS precies gespiegeld.
   ======================================================================== */

@media (min-width:1025px) {
    /* Shell met rechterzijbalk. */
    html.site-layout-header-under-taskbar
    #container.site-layout-side-stack-active:has(> #sidebar) {
        display:grid !important;
        gap:20px !important;
        grid-template-areas:
            "side main sidebar"
            "side footer footer" !important;
        grid-template-columns:220px minmax(0,1fr) 350px !important;
        grid-template-rows:auto auto !important;
        align-items:start !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    #container.site-layout-side-stack-active:has(> #sidebar) {
        grid-template-areas:
            "main sidebar side"
            "footer footer side" !important;
        grid-template-columns:minmax(0,1fr) 350px 220px !important;
    }

    /* Shell zonder rechterzijbalk / fullscreen. */
    html.site-layout-header-under-taskbar
    #container.site-layout-side-stack-active:not(:has(> #sidebar)),
    html.site-layout-header-under-taskbar
    #container.site-layout-side-stack-active.fullscreen {
        display:grid !important;
        gap:20px !important;
        grid-template-areas:
            "side main"
            "side footer" !important;
        grid-template-columns:220px minmax(0,1fr) !important;
        grid-template-rows:auto auto !important;
        align-items:start !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    #container.site-layout-side-stack-active:not(:has(> #sidebar)),
    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    #container.site-layout-side-stack-active.fullscreen {
        grid-template-areas:
            "main side"
            "footer side" !important;
        grid-template-columns:minmax(0,1fr) 220px !important;
    }

    /* Profiel / groepen: in deze stand bewust volle 220px kolom. */
    html.site-layout-header-under-taskbar
    #profile.site-layout-side-stack-active,
    html.site-layout-header-under-taskbar
    #container.groups-profile.site-layout-side-stack-active {
        display:grid !important;
        gap:20px !important;
        grid-template-areas:
            "side main"
            "side footer" !important;
        grid-template-columns:220px minmax(0,1fr) !important;
        grid-template-rows:auto auto !important;
        align-items:start !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    #profile.site-layout-side-stack-active,
    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    #container.groups-profile.site-layout-side-stack-active {
        grid-template-areas:
            "main side"
            "footer side" !important;
        grid-template-columns:minmax(0,1fr) 220px !important;
    }

    .site-layout-side-stack {
        grid-area:side !important;
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        flex-direction:column !important;
        align-self:start !important;
        gap:8px !important;
        position:relative !important;
        z-index:80 !important;
        box-sizing:border-box !important;
    }

    /*
     * De blauwe taakbalk blijft precies een verticale taakbalk.
     * Alleen position:fixed wordt uitgeschakeld zodat de oranje header er
     * daadwerkelijk direct onder kan staan.
     */
    .site-layout-side-stack > #taskbar {
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 !important;
        padding:20px !important;

        position:relative !important;
        inset:auto !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:block !important;
        overflow:visible !important;

        border-radius:6px !important;
        transform:none !important;
        transition:none !important;
        box-sizing:border-box !important;
        z-index:2 !important;
    }

    /*
     * Op profiel/groepen mag de compacte 76px-versie hier niet ingrijpen.
     * De hele side-stack heeft dezelfde vaste breedte van 220px.
     */
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible,
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:hover,
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:focus-within {
        width:220px !important;
        padding:20px !important;
        overflow:visible !important;
        box-shadow:var(--shadow-taskbar, 0 1px 2px rgba(0,0,0,.07)) !important;
    }

    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible #logo,
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:hover #logo,
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:focus-within #logo {
        width:180px !important;
        height:140px !important;
        min-height:140px !important;
        margin:0 auto 4px !important;
        overflow:hidden !important;
    }

    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible #logo-smileys,
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:hover #logo-smileys,
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:focus-within #logo-smileys {
        width:160px !important;
        height:auto !important;
        top:19px !important;
        left:50% !important;
        transform:translateX(-50%) !important;
    }

    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible #logo-wrapper,
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:hover #logo-wrapper,
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:focus-within #logo-wrapper {
        width:160px !important;
        height:auto !important;
        left:50% !important;
        transform:translateX(-50%) !important;
        opacity:1 !important;
    }

    .site-layout-side-stack > #taskbar #taskbar-nav {
        width:100% !important;
        margin-top:20px !important;
    }

    .site-layout-side-stack > #taskbar #taskbar-nav a,
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible #taskbar-nav a,
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:hover #taskbar-nav a,
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:focus-within #taskbar-nav a {
        width:100% !important;
        min-width:0 !important;
        min-height:40px !important;
        margin:6px 0 0 !important;
        padding:8px 10px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:10px !important;

        box-sizing:border-box !important;
        white-space:nowrap !important;
        transform:none !important;
    }

    .site-layout-side-stack > #taskbar #taskbar-nav a:hover {
        width:100% !important;
        transform:none !important;
        background:rgba(255,255,255,.10) !important;
    }

    .site-layout-side-stack
    > #taskbar.profile-taskbar-collapsible
    #taskbar-nav a > span:not(.taskbar-icon-wrap) {
        max-width:none !important;
        overflow:visible !important;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
    }

    .site-layout-side-stack > #taskbar #taskbar-nav .taskbar-icon-wrap {
        width:22px !important;
        min-width:22px !important;
        margin:0 !important;
        float:none !important;
    }

    .site-layout-side-stack > #taskbar #taskbar-nav .taskbar-icon,
    .site-layout-side-stack > #taskbar #taskbar-nav .taskbar-icon svg {
        width:22px !important;
        height:22px !important;
    }

    /*
     * Oranje header is een afzonderlijke plaat direct onder de blauwe.
     * De bestaande horizontale tabs worden verticaal gezet zodat ze binnen
     * exact dezelfde 220px breedte passen.
     */
    .site-layout-side-stack > #header {
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 !important;
        padding:10px !important;

        position:relative !important;
        inset:auto !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:block !important;
        overflow:visible !important;

        border-radius:6px !important;
        box-sizing:border-box !important;
        z-index:1 !important;
    }

    .site-layout-side-stack > #header #tabs {
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        margin:0 !important;
        padding:0 !important;

        position:relative !important;
        inset:auto !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:4px !important;

        font-size:14px !important;
    }

    .site-layout-side-stack > #header #tabs > a,
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap {
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        float:none !important;
        flex:none !important;
    }

    .site-layout-side-stack > #header #tabs > a,
    .site-layout-side-stack
    > #header #tabs
    > .header-profile-tab-wrap
    > .header-profile-link {
        width:100% !important;
        min-height:38px !important;
        height:auto !important;
        margin:0 !important;
        padding:8px 10px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;

        line-height:22px !important;
        text-align:left !important;
        box-sizing:border-box !important;

        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;

        border-radius:6px !important;
        transform:none !important;
    }

    .site-layout-side-stack > #header #tabs a:hover {
        top:auto !important;
        transform:none !important;
        background:rgba(255,255,255,.12) !important;
    }

    .site-layout-side-stack > #header #tabs .tab-count {
        position:static !important;
        margin-left:auto !important;
        transform:none !important;
    }

    /* Popupmenu's altijd naar de inhoudszijde openen. */
    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    .site-layout-side-stack #header .header-profile-start-panel {
        right:auto !important;
        left:calc(100% + 8px) !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    .site-layout-side-stack #header .header-profile-start-panel {
        right:calc(100% + 8px) !important;
        left:auto !important;
    }

    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    .site-layout-side-stack #taskbar .taskbar-footer-content {
        right:auto !important;
        left:calc(100% + 10px) !important;
        transform:translateX(-8px) !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    .site-layout-side-stack #taskbar .taskbar-footer-content {
        right:calc(100% + 10px) !important;
        left:auto !important;
        transform:translateX(8px) !important;
    }

    .site-layout-side-stack
    #taskbar .taskbar-footer-panel.is-open
    .taskbar-footer-content {
        transform:translateX(0) !important;
    }

    /* Directe kinderen krijgen hun normale hoofdgebieden terug. */
    #container.site-layout-side-stack-active > #main,
    #profile.site-layout-side-stack-active > #main {
        grid-area:main !important;
        min-width:0 !important;
    }

    #container.site-layout-side-stack-active > #sidebar {
        grid-area:sidebar !important;
        min-width:0 !important;
    }

    #container.site-layout-side-stack-active > #footer,
    #profile.site-layout-side-stack-active > #footer {
        grid-area:footer !important;
        min-width:0 !important;
    }

    /* r1140's fixed-right geometrie is in deze modus niet van toepassing. */
    html.site-layout-header-under-taskbar .site-layout-side-stack > #taskbar {
        right:auto !important;
        left:auto !important;
    }

    /*
     * Popupvoorbeeld: twee losse platen echt verticaal boven elkaar,
     * links of rechts afhankelijk van de eerste optie.
     */
    .site-layout-mini.is-header-under .site-layout-mini-taskbar {
        width:48px !important;
        height:64px !important;
        top:9px !important;
        bottom:auto !important;
        left:9px !important;
        right:auto !important;
    }

    .site-layout-mini.is-header-under .site-layout-mini-header {
        width:48px !important;
        height:39px !important;
        top:79px !important;
        left:9px !important;
        right:auto !important;
    }

    .site-layout-mini.is-header-under .site-layout-mini-main {
        top:9px !important;
        right:9px !important;
        bottom:9px !important;
        left:65px !important;
    }

    .site-layout-mini.is-taskbar-right.is-header-under .site-layout-mini-taskbar {
        left:auto !important;
        right:9px !important;
    }

    .site-layout-mini.is-taskbar-right.is-header-under .site-layout-mini-header {
        left:auto !important;
        right:9px !important;
    }

    .site-layout-mini.is-taskbar-right.is-header-under .site-layout-mini-main {
        left:9px !important;
        right:65px !important;
    }
}

/* Op mobiel/tablet wordt nooit gewrapt; huidige mobiele layout blijft intact. */
@media (max-width:1024px) {
    .site-layout-side-stack {
        display:contents !important;
    }
}


/* ========================================================================
   r1144 — harde regel:
   zodra "Oranje header onder taakbalk" actief is, is #taskbar NIET FIXED.
   Geen uitzonderingen voor profiel, groepen, berichten of andere desktop-
   pagina's. De taakbalk doet dan gewoon mee in de document/grid-flow.
   ======================================================================== */

@media (min-width:1025px) {
    html.site-layout-header-under-taskbar body #taskbar,
    html.site-layout-header-under-taskbar body #taskbar.profile-taskbar-collapsible,
    html.site-layout-header-under-taskbar body #taskbar.profile-taskbar-collapsible:hover,
    html.site-layout-header-under-taskbar body #taskbar.profile-taskbar-collapsible:focus-within {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;

        transform: none !important;
        translate: none !important;

        /* fixed-layout restanten neutraliseren */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        max-height: none !important;

        /* copyright/footer is absolute binnen #taskbar: ruimte reserveren */
        padding-bottom: 68px !important;
    }

    /*
     * In de side-stack staat de taakbalk bovenaan en de header er direct
     * onder. Geen sticky/fixed gedrag tijdens scrollen.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar {
        position: relative !important;
        align-self: stretch !important;
        width: 100% !important;
    }

    /*
     * Ook wanneer de wrapper tijdens de eerste render nog niet is aangemaakt,
     * mag de oude vaste taakbalk nooit kort zichtbaar worden.
     */
    html.site-layout-header-under-taskbar
    :is(#container,#profile,#messages)
    > #taskbar {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }
}


/* ========================================================================
   r1145 — DEFINITIEVE SIDE-STACK CORRECTIES

   [ BLAUW  : taakbalk ]
   [ ORANJE : header   ]
   [ GRIJS  : © footer ]

   - blauw én oranje zijn NIET fixed;
   - grijs is een aparte derde plaat;
   - standaard Snoeten font/size blijft behouden;
   - logo gebruikt weer de normale 180×140 / 160px afbeeldingsmaat;
   - geen kunstmatige onderruimte meer in de blauwe plaat.
   ======================================================================== */

@media (min-width:1025px) {

    /* De hele zijkolom doet gewoon mee in de documentflow. */
    html.site-layout-header-under-taskbar .site-layout-side-stack {
        position:relative !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        inset:auto !important;

        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:8px !important;

        transform:none !important;
        font-family:var(--base-font, 'Comfortaa', sans-serif) !important;
        font-size:var(--base-font-size,16px) !important;
    }

    /* ---------------------------------------------------------------
       BLAUWE TAAKBALK
       --------------------------------------------------------------- */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:hover,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:focus-within {
        position:relative !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        inset:auto !important;

        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 !important;
        padding:20px !important; /* ook onderaan gewoon standaard 20px */

        overflow:visible !important;
        align-self:stretch !important;

        transform:none !important;
        translate:none !important;
        transition:none !important;

        font-family:var(--base-font, 'Comfortaa', sans-serif) !important;
        font-size:var(--base-font-size,16px) !important;
        box-sizing:border-box !important;
    }

    /* r671 reserveert normaal 88px onder de fixed taakbalk; hier niet. */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar:has(> .taskbar-footer-panel),
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar {
        bottom:auto !important;
        padding-bottom:20px !important;
    }

    /*
     * Logo exact terug naar de normale desktopgeometrie.
     * Geen uitgerekte 160×140 voorgrond en geen extra marges.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar #logo,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible #logo,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:hover #logo,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:focus-within #logo {
        width:180px !important;
        height:140px !important;
        min-height:140px !important;
        max-height:140px !important;

        margin:0 auto !important;
        padding:0 !important;

        display:block !important;
        position:relative !important;
        overflow:visible !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar #logo-smileys,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible #logo-smileys,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:hover #logo-smileys,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:focus-within #logo-smileys {
        width:160px !important;
        height:65px !important;
        max-width:160px !important;
        max-height:65px !important;

        position:absolute !important;
        top:19px !important;
        left:50% !important;
        right:auto !important;

        margin:0 !important;
        transform:translateX(-50%) !important;
        object-fit:contain !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar #logo-wrapper,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible #logo-wrapper,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:hover #logo-wrapper,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:focus-within #logo-wrapper {
        width:160px !important;
        height:140px !important;
        max-width:160px !important;
        max-height:140px !important;

        position:absolute !important;
        top:0 !important;
        left:50% !important;
        right:auto !important;

        margin:0 !important;
        opacity:1 !important;
        transform:translateX(-50%) !important;
        object-fit:contain !important;
    }

    /* Custom site-logo volgt dezelfde standaardruimte. */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar #logo .site-logo-custom {
        inset:10px !important;
        width:calc(100% - 20px) !important;
        height:calc(100% - 20px) !important;
        max-width:160px !important;
        max-height:120px !important;
        object-fit:contain !important;
        object-position:center !important;
    }

    /* Navigatie: standaard Snoeten font en standaard taakbalkgrootte. */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar #taskbar-nav {
        margin-top:20px !important;
        font-family:var(--base-font, 'Comfortaa', sans-serif) !important;
        font-size:calc(var(--base-font-size,16px) + 2px) !important;
        line-height:normal !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar #taskbar-nav a {
        font-family:inherit !important;
        font-size:inherit !important;
    }

    /* ---------------------------------------------------------------
       ORANJE HEADER — echt statisch tussen blauw en grijs
       --------------------------------------------------------------- */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header,
    html.site-layout-header-under-taskbar
    body .site-layout-side-stack > #header {
        position:relative !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        inset:auto !important;

        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 !important;
        padding:10px !important;

        display:block !important;
        overflow:visible !important;
        align-self:stretch !important;

        transform:none !important;
        translate:none !important;

        font-family:var(--base-font, 'Comfortaa', sans-serif) !important;
        font-size:var(--base-font-size,16px) !important;
        box-sizing:border-box !important;
    }

    /*
     * Alleen de geometrie van #tabs veranderen; typografie blijft standaard.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs {
        position:relative !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        inset:auto !important;

        width:100% !important;
        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:4px !important;

        font-family:var(--base-font, 'Comfortaa', sans-serif) !important;
        font-size:var(--base-font-size,16px) !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > a,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap > .header-profile-link {
        height:40px !important;
        min-height:40px !important;
        line-height:40px !important;
        padding:0 20px !important;

        font-family:inherit !important;
        font-size:inherit !important;
        font-weight:inherit !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > a.active,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap > .header-profile-link.active {
        font-weight:bold !important;
    }

    /* ---------------------------------------------------------------
       GRIJZE COPYRIGHTPLAAT — derde losse plaat
       --------------------------------------------------------------- */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel {
        position:relative !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        inset:auto !important;

        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
        min-height:52px !important;

        margin:0 !important;

        color:#fff !important;
        background:
            radial-gradient(circle at 50% -22px, rgba(255,255,255,.28) 0, rgba(255,255,255,.12) 34%, rgba(255,255,255,0) 68%),
            linear-gradient(180deg,#949494 0%,#858585 48%,#777 100%) !important;
        border:1px solid rgba(92,92,92,.58) !important;
        border-radius:12px !important;
        box-shadow:
            inset 1px 0 0 rgba(255,255,255,.12),
            inset -1px 0 0 rgba(60,60,60,.12),
            inset 0 1px 0 rgba(255,255,255,.38),
            0 8px 20px rgba(0,0,0,.18) !important;

        font-family:var(--base-font, 'Comfortaa', sans-serif) !important;
        font-size:var(--base-font-size,16px) !important;

        overflow:visible !important;
        box-sizing:border-box !important;
        isolation:isolate !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel::before {
        content:"" !important;
        position:absolute !important;
        z-index:-1 !important;
        inset:1px !important;
        border-radius:10px !important;
        background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 44%) !important;
        pointer-events:none !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-toggle {
        width:100% !important;
        min-height:52px !important;
        margin:0 !important;
        padding:0 16px !important;

        display:flex !important;
        align-items:center !important;
        gap:9px !important;

        border:0 !important;
        border-radius:11px !important;
        background:transparent !important;
        box-shadow:none !important;

        color:#fff !important;
        font:600 var(--base-font-size,16px)/1.35 var(--base-font,Comfortaa,Arial,sans-serif) !important;
        text-align:left !important;
        cursor:pointer !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-label {
        display:block !important;
        min-width:0 !important;
        flex:1 1 auto !important;
        white-space:nowrap !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-chevron {
        width:18px !important;
        height:18px !important;
        flex:0 0 18px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-chevron svg {
        width:18px !important;
        height:18px !important;
        fill:none !important;
        stroke:currentColor !important;
        stroke-width:2.3 !important;
        stroke-linecap:round !important;
        stroke-linejoin:round !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel.is-open .taskbar-footer-chevron {
        transform:rotate(180deg) !important;
    }

    /*
     * Open copyrightmenu naar de INHOUD toe.
     * Links = rechts van de side-stack, rechts = links ervan.
     */
    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-content {
        position:absolute !important;
        left:calc(100% + 10px) !important;
        right:auto !important;
        bottom:0 !important;

        width:290px !important;
        max-width:calc(100vw - 280px) !important;
        max-height:min(430px,calc(100vh - 40px)) !important;

        padding:11px 12px 12px !important;
        overflow:auto !important;

        color:#fff !important;
        background:linear-gradient(180deg,#858585,#717171) !important;
        border:1px solid rgba(80,80,80,.55) !important;
        border-radius:12px !important;
        box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.20) !important;

        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transform:translateX(-8px) !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-content {
        position:absolute !important;
        right:calc(100% + 10px) !important;
        left:auto !important;
        bottom:0 !important;

        width:290px !important;
        max-width:calc(100vw - 280px) !important;
        max-height:min(430px,calc(100vh - 40px)) !important;

        padding:11px 12px 12px !important;
        overflow:auto !important;

        color:#fff !important;
        background:linear-gradient(180deg,#858585,#717171) !important;
        border:1px solid rgba(80,80,80,.55) !important;
        border-radius:12px !important;
        box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.20) !important;

        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transform:translateX(8px) !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel.is-open .taskbar-footer-content {
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:translateX(0) !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-links {
        display:flex !important;
        flex-direction:column !important;
        gap:2px !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-links a,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-layout-link {
        box-sizing:border-box !important;
        width:100% !important;
        min-height:38px !important;
        padding:7px 9px !important;

        display:flex !important;
        align-items:center !important;
        gap:7px !important;

        color:#fff !important;
        background:transparent !important;
        border:0 !important;
        border-radius:8px !important;
        box-shadow:none !important;

        font:400 var(--base-font-size,16px)/1.35 var(--base-font,Comfortaa,Arial,sans-serif) !important;
        text-align:left !important;
        text-decoration:none !important;
        cursor:pointer !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-links a:hover,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-layout-link:hover {
        background:rgba(255,255,255,.13) !important;
    }

    /* Eventuele compact-class uit de oude taakbalk mag label niet verbergen. */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel.is-compact .taskbar-footer-label {
        display:block !important;
    }
}


/* ========================================================================
   r1146 — AFWERKING SIDE-STACK
   - header en taakbalk krijgen hun eigen kleurplaat weer volledig terug;
   - rechts uitlijnen zonder verspringen;
   - profielstartvenster opent naast de balk, net als ©-venster;
   - pijltjes in ©-linklijst kleiner.
   ======================================================================== */

@media (min-width:1025px) {

    /* ---------------------------
       1) Eigen kleurplaat terug
       --------------------------- */

    html.site-layout-header-under-taskbar .site-layout-side-stack > #taskbar {
        color:#fff !important;
        background:
            radial-gradient(circle at 50% -22px, rgba(255,255,255,.28) 0, rgba(255,255,255,.12) 34%, rgba(255,255,255,0) 68%),
            linear-gradient(180deg,#5a82bb 0%, #4B72AA 52%, #3b6497 100%) !important;
        border:1px solid rgba(56,92,141,.58) !important;
        border-radius:12px !important;
        box-shadow:
            inset 1px 0 0 rgba(255,255,255,.12),
            inset -1px 0 0 rgba(30,55,95,.16),
            inset 0 1px 0 rgba(255,255,255,.35),
            0 8px 20px rgba(37,66,109,.18) !important;
        isolation:isolate !important;
    }

    html.site-layout-header-under-taskbar .site-layout-side-stack > #taskbar::before {
        content:"" !important;
        position:absolute !important;
        inset:1px !important;
        border-radius:10px !important;
        background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 44%) !important;
        pointer-events:none !important;
    }

    html.site-layout-header-under-taskbar .site-layout-side-stack > #header {
        color:#fff !important;
        background:
            radial-gradient(circle at 50% -22px, rgba(255,255,255,.30) 0, rgba(255,255,255,.14) 34%, rgba(255,255,255,0) 68%),
            linear-gradient(180deg,#f9a43b 0%, #F19620 52%, #e28712 100%) !important;
        border:1px solid rgba(184,110,18,.55) !important;
        border-radius:12px !important;
        box-shadow:
            inset 1px 0 0 rgba(255,255,255,.14),
            inset -1px 0 0 rgba(168,89,0,.14),
            inset 0 1px 0 rgba(255,255,255,.38),
            0 8px 20px rgba(117,70,0,.18) !important;
        isolation:isolate !important;
    }

    html.site-layout-header-under-taskbar .site-layout-side-stack > #header::before {
        content:"" !important;
        position:absolute !important;
        inset:1px !important;
        border-radius:10px !important;
        background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 44%) !important;
        pointer-events:none !important;
    }

    /* Tablinks op de oranje plaat */
    html.site-layout-header-under-taskbar .site-layout-side-stack > #header #tabs > a,
    html.site-layout-header-under-taskbar .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap > .header-profile-link {
        color:#fff !important;
        border-radius:8px !important;
    }

    html.site-layout-header-under-taskbar .site-layout-side-stack > #header #tabs > a:hover,
    html.site-layout-header-under-taskbar .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap > .header-profile-link:hover {
        background:rgba(255,255,255,.12) !important;
    }

    /* ---------------------------
       2) Rechts echt strak uitlijnen
       --------------------------- */

    html.site-layout-taskbar-right.site-layout-header-under-taskbar .site-layout-side-stack {
        justify-self:end !important;
        align-self:start !important;
        margin:0 0 0 auto !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    :is(#container.site-layout-side-stack-active, #profile.site-layout-side-stack-active, #container.groups-profile.site-layout-side-stack-active) {
        justify-items:stretch !important;
    }

    /* ---------------------------
       3) Profielvenster naast de balk
       --------------------------- */

    html.site-layout-header-under-taskbar .site-layout-side-stack > #header,
    html.site-layout-header-under-taskbar .site-layout-side-stack > #header #tabs,
    html.site-layout-header-under-taskbar .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap,
    html.site-layout-header-under-taskbar .site-layout-side-stack > #header #tabs .header-profile-start {
        overflow:visible !important;
    }

    html.site-layout-header-under-taskbar .site-layout-side-stack > #header #tabs .header-profile-start-panel {
        position:absolute !important;
        top:auto !important;
        bottom:0 !important;
        transform:none !important;
        margin:0 !important;
        z-index:2147483600 !important;
    }

    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    .site-layout-side-stack > #header #tabs .header-profile-start-panel {
        left:calc(100% + 10px) !important;
        right:auto !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs .header-profile-start-panel {
        right:calc(100% + 10px) !important;
        left:auto !important;
    }

    /* ---------------------------
       4) Kleinere pijltjes ©-linklijst
       --------------------------- */

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-links a svg,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel .taskbar-footer-layout-link svg {
        width:12px !important;
        height:12px !important;
        min-width:12px !important;
        min-height:12px !important;
        flex:0 0 12px !important;
        stroke-width:2.1 !important;
        margin-left:auto !important;
    }
}


/* ========================================================================
   r1147 — laatste visuele finetune side-stack
   ======================================================================== */

@media (min-width:1025px) {

    /* Platen iets dichter en exact op één verticale lijn. */
    html.site-layout-header-under-taskbar .site-layout-side-stack {
        gap:6px !important;
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
        box-sizing:border-box !important;
    }

    html.site-layout-header-under-taskbar .site-layout-side-stack > #taskbar,
    html.site-layout-header-under-taskbar .site-layout-side-stack > #header,
    html.site-layout-header-under-taskbar .site-layout-side-stack > .taskbar-footer-panel {
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
        margin-left:0 !important;
        margin-right:0 !important;
        transform:none !important;
        box-sizing:border-box !important;
    }

    /* Rechts: geen oude left/right-offsets of 10px-verspringing meer. */
    html.site-layout-taskbar-right.site-layout-header-under-taskbar .site-layout-side-stack {
        justify-self:end !important;
        margin-left:auto !important;
        margin-right:0 !important;
        left:auto !important;
        right:auto !important;
        translate:none !important;
        transform:none !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    .site-layout-side-stack > :is(#taskbar,#header,.taskbar-footer-panel) {
        justify-self:end !important;
        left:auto !important;
        right:auto !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    /* Exact dezelfde blauwe uitvoering als de standaard desktoptaakbalk. */
    html.site-layout-header-under-taskbar .site-layout-side-stack > #taskbar {
        background:
            radial-gradient(circle at 50% 76px,
                rgba(175,211,255,.22) 0,
                rgba(89,143,213,.12) 29%,
                rgba(30,76,145,0) 58%),
            linear-gradient(180deg,#3974C7 0%,#2C65B8 46%,#22549F 100%) !important;
        border:1px solid rgba(17,61,126,.56) !important;
        border-radius:12px !important;
        box-shadow:
            inset 1px 0 0 rgba(255,255,255,.14),
            inset -1px 0 0 rgba(8,44,99,.16),
            inset 0 1px 0 rgba(255,255,255,.24),
            0 10px 24px rgba(23,55,104,.20) !important;
    }

    html.site-layout-header-under-taskbar .site-layout-side-stack > #taskbar::before {
        display:none !important;
        content:none !important;
    }

    /* Exact het standaard oranje headerverloop. */
    html.site-layout-header-under-taskbar .site-layout-side-stack > #header {
        background:var(
            --color-surface-header,
            linear-gradient(180deg,#F9A62B 0%,#F79A16 55%,#ED9010 100%)
        ) !important;
        border:1px solid rgba(119,61,4,.18) !important;
        border-radius:12px !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.34),
            inset 0 -1px 0 rgba(126,61,2,.18),
            0 3px 9px rgba(87,47,7,.12) !important;
    }

    html.site-layout-header-under-taskbar .site-layout-side-stack > #header::before {
        display:none !important;
        content:none !important;
    }

    /*
     * Typografie niet opnieuw definiëren in deze alternatieve indeling:
     * alles volgt de gewone Snoeten font- en grootte-instellingen.
     */
    html.site-layout-header-under-taskbar .site-layout-side-stack,
    html.site-layout-header-under-taskbar .site-layout-side-stack > #taskbar,
    html.site-layout-header-under-taskbar .site-layout-side-stack > #header,
    html.site-layout-header-under-taskbar .site-layout-side-stack > #taskbar #taskbar-nav,
    html.site-layout-header-under-taskbar .site-layout-side-stack > #header #tabs {
        font-family:var(--base-font,Comfortaa,Arial,sans-serif) !important;
        font-size:var(--base-font-size,16px) !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar #taskbar-nav a,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > a,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap > .header-profile-link {
        font-family:inherit !important;
        font-size:inherit !important;
    }

    /*
     * Profielpijltje blijft rechts in de naamregel, maar het grote venster
     * positioneert nu t.o.v. de volledige profielregel i.p.v. het 31px pijltje.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap {
        position:relative !important;
        overflow:visible !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs .header-profile-start {
        position:static !important;
        width:0 !important;
        height:0 !important;
        overflow:visible !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs
    .header-profile-start > .header-profile-start-toggle {
        position:absolute !important;
        top:4px !important;
        right:5px !important;
        z-index:2 !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs .header-profile-start-panel {
        position:absolute !important;
        top:0 !important;
        bottom:auto !important;
        margin:0 !important;
        transform:none !important;
    }

    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    .site-layout-side-stack > #header #tabs .header-profile-start-panel {
        left:calc(100% + 10px) !important;
        right:auto !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs .header-profile-start-panel {
        right:calc(100% + 10px) !important;
        left:auto !important;
    }

    /* Kleine, rustige pijltjes in de lijst onder © Snoeten.nl. */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel
    .taskbar-footer-links :is(a,.taskbar-footer-layout-link) svg {
        width:10px !important;
        height:10px !important;
        min-width:10px !important;
        min-height:10px !important;
        flex:0 0 10px !important;
        margin-left:auto !important;
        stroke-width:1.9 !important;
    }
}


/* ========================================================================
   r1148 — side-stack afwerking
   - oranje profielvenster naast de header uitlijnen op onderkant oranje blok
     en omhoog laten openen;
   - pijltjes in grijs venster wit en iets groter;
   - witte rand bovenaan blauwe balk weghalen.
   ======================================================================== */

@media (min-width:1025px) {

    /*
     * Het oranje startvenster naast de header moet met de ONDERKANT gelijk
     * staan aan de onderkant van het oranje blok, en vervolgens omhoog lopen.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap {
        position: relative !important;
        overflow: visible !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs .header-profile-start-panel {
        top: auto !important;
        bottom: 0 !important;
        margin: 0 !important;
        transform: none !important;
        align-self: auto !important;
    }

    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    .site-layout-side-stack > #header #tabs .header-profile-start-panel {
        left: calc(100% + 10px) !important;
        right: auto !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs .header-profile-start-panel {
        right: calc(100% + 10px) !important;
        left: auto !important;
    }

    /*
     * Pijltjes in het grijze venster duidelijker: wit en iets groter.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel
    .taskbar-footer-links :is(a,.taskbar-footer-layout-link) svg {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
        flex: 0 0 12px !important;
        margin-left: auto !important;
        color: #fff !important;
        stroke: #fff !important;
        fill: none !important;
        stroke-width: 2.2 !important;
        opacity: 1 !important;
    }

    /*
     * Witte toprand op de blauwe taakbalk neutraliseren.
     */
    html.site-layout-header-under-taskbar .site-layout-side-stack > #taskbar {
        border-top-color: rgba(17,61,126,.56) !important;
        box-shadow:
            inset 1px 0 0 rgba(255,255,255,.10),
            inset -1px 0 0 rgba(8,44,99,.14),
            inset 0 0 0 rgba(255,255,255,0),
            0 10px 24px rgba(23,55,104,.20) !important;
        background:
            radial-gradient(circle at 50% 76px,
                rgba(175,211,255,.18) 0,
                rgba(89,143,213,.09) 29%,
                rgba(30,76,145,0) 58%),
            linear-gradient(180deg,#3974C7 0%,#2C65B8 46%,#22549F 100%) !important;
    }
}


/* ========================================================================
   r1149 — zichtbare fixes (ook tegen inline positionering)
   ======================================================================== */

@media (min-width:1025px) {

    /*
     * JS r1149 bepaalt nu de exacte viewportpositie. CSS zorgt alleen voor
     * het uiterlijk en voorkomt oude absolute-positionering.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel {
        top:auto !important;
        margin:0 !important;
        transform:none !important;
        overflow:auto !important;
    }

    /*
     * Copyright-links: SVG én path expliciet wit maken.
     * De footer staat in side-stack buiten #taskbar, dus oude #taskbar-selectors
     * mogen hier geen invloed meer hebben.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel
    .taskbar-footer-links a svg,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel
    .taskbar-footer-layout-link svg {
        display:block !important;
        width:14px !important;
        height:14px !important;
        min-width:14px !important;
        min-height:14px !important;
        flex:0 0 14px !important;
        margin-left:auto !important;

        color:#fff !important;
        fill:none !important;
        stroke:#fff !important;
        stroke-width:2.25 !important;
        opacity:1 !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel
    .taskbar-footer-links a svg path,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > .taskbar-footer-panel
    .taskbar-footer-layout-link svg path {
        fill:none !important;
        stroke:#fff !important;
        stroke-width:2.25 !important;
        opacity:1 !important;
    }

    /*
     * Blauwe plaat: helemaal geen witte inset/glanslijn langs de bovenzijde.
     * Alleen zijdiepte + normale slagschaduw blijven over.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:hover,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar.profile-taskbar-collapsible:focus-within {
        border-top:1px solid #285a9d !important;
        outline:0 !important;

        background:
            radial-gradient(circle at 50% 76px,
                rgba(134,181,237,.12) 0,
                rgba(65,121,190,.07) 31%,
                rgba(30,76,145,0) 60%),
            linear-gradient(180deg,#3974C7 0%,#2C65B8 46%,#22549F 100%) !important;
        background-clip:border-box !important;

        box-shadow:
            inset 1px 0 0 rgba(255,255,255,.08),
            inset -1px 0 0 rgba(8,44,99,.14),
            0 10px 24px rgba(23,55,104,.20) !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar::before,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar::after {
        display:none !important;
        content:none !important;
        box-shadow:none !important;
    }
}


/* ========================================================================
   r1150 — geen verspringing bij openen + 20px tussen de drie platen
   ======================================================================== */

@media (min-width:1025px) {

    /* Exact 20px tussen blauw, oranje en grijs. */
    html.site-layout-header-under-taskbar .site-layout-side-stack {
        gap:20px !important;
    }

    /*
     * header-profile-start.css maakt de header bij openen normaal sticky /
     * floating. In de alternatieve zij-indeling mag dat absoluut niet:
     * de oranje plaat blijft op exact dezelfde plek in de flow staan.
     */
    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack > #header,
    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack > #header.site-header-scroll-reveal,
    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack > #header.site-header-scroll-reveal.is-scroll-floating,
    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack > #header.site-header-scroll-reveal.is-scroll-hidden,
    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack > #header.site-header-scroll-reveal.is-scroll-visible {
        position:relative !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        inset:auto !important;

        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;

        margin:0 !important;
        transform:none !important;
        translate:none !important;
        transition:none !important;
        will-change:auto !important;

        align-self:stretch !important;
    }

    /*
     * Ook de inhoud van de oranje plaat mag bij open/dicht niet van maat,
     * padding of positie veranderen.
     */
    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack > #header #tabs,
    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap {
        position:relative !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        transform:none !important;
    }

    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap {
        height:40px !important;
        min-height:40px !important;
        max-height:40px !important;
    }

    /*
     * De popup zelf blijft fixed buiten de layout en mag daardoor nooit
     * extra grid/flexruimte veroorzaken.
     */
    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack
    .header-profile-start-panel {
        position:fixed !important;
        margin:0 !important;
        flex:none !important;
        contain:layout style !important;
    }
}


/* ========================================================================
   r1151 — profielvenster opent zoals © Snoeten.nl
   Absoluut naast de eigen oranje plaat, onderkant gelijk, uitschuiven naar
   de inhoud. Geen fixed viewport-positionering meer.
   ======================================================================== */

@media (min-width:1025px) {

    /*
     * #header is het positioneringsanker. Alle tussenliggende elementen
     * worden static zodat bottom:0 echt de ONDERKANT VAN HET ORANJE BLOK is.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header {
        position:relative !important;
        overflow:visible !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs .header-profile-start {
        position:static !important;
        overflow:visible !important;
    }

    /*
     * Pijltje zelf blijft gewoon in de naamregel staan.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    #tabs > .header-profile-tab-wrap {
        height:40px !important;
        min-height:40px !important;
        max-height:40px !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start > .header-profile-start-toggle {
        position:absolute !important;
        top:auto !important;
        right:5px !important;
        bottom:4px !important;
        left:auto !important;
    }

    /*
     * Zelfde mechaniek als .taskbar-footer-content:
     * absolute popup, 10px naast de plaat, onderkant exact gelijk.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel,
    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack > #header
    .header-profile-start-panel {
        position:absolute !important;
        top:auto !important;
        bottom:0 !important;

        margin:0 !important;
        max-height:min(520px, calc(100vh - 40px)) !important;
        overflow:auto !important;

        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;

        contain:none !important;
        will-change:transform, opacity !important;

        transition:
            opacity .16s ease,
            transform .18s ease,
            visibility 0s linear 0s !important;
    }

    /* Taakbalk links: venster opent rechts van oranje, net als grijze popup. */
    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    .site-layout-side-stack > #header
    .header-profile-start-panel {
        left:calc(100% + 10px) !important;
        right:auto !important;
        transform-origin:left bottom !important;
        animation:site-layout-profile-pop-left .18s ease both !important;
    }

    /* Taakbalk rechts: gespiegeld naar links. */
    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel {
        right:calc(100% + 10px) !important;
        left:auto !important;
        transform-origin:right bottom !important;
        animation:site-layout-profile-pop-right .18s ease both !important;
    }

    @keyframes site-layout-profile-pop-left {
        from {
            opacity:0;
            transform:translateX(-8px);
        }
        to {
            opacity:1;
            transform:translateX(0);
        }
    }

    @keyframes site-layout-profile-pop-right {
        from {
            opacity:0;
            transform:translateX(8px);
        }
        to {
            opacity:1;
            transform:translateX(0);
        }
    }

    /*
     * Bij openen mag niets in de side-stack zelf van positie of afmeting
     * veranderen. Alleen de popup wordt zichtbaar.
     */
    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack {
        gap:20px !important;
    }

    html.site-layout-header-under-taskbar
    body.profile-start-menu-open
    .site-layout-side-stack > :is(#taskbar,#header,.taskbar-footer-panel) {
        margin:0 !important;
        transform:none !important;
        translate:none !important;
    }
}


/* ========================================================================
   r1152 — profielvenster 1-op-1 openmechaniek van © Snoeten.nl
   ======================================================================== */

@media (min-width:1025px) {

    /*
     * De side-stack gebruikt géén normale profile-start-menu-open status meer.
     * Daardoor kunnen desktop-headerregels de oranje plaat niet laten springen.
     */
    html.site-layout-header-under-taskbar
    body.profile-start-side-open
    .site-layout-side-stack > #header {
        position:relative !important;
        inset:auto !important;
        margin:0 !important;
        transform:none !important;
        translate:none !important;
        transition:none !important;
        z-index:90 !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs .header-profile-start {
        overflow:visible !important;
    }

    /* Alleen #header is het positioneringsanker. */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs .header-profile-start {
        position:static !important;
    }

    /*
     * Basisstatus exact als taskbar-footer-content:
     * naast de plaat, bottom:0, verborgen en 8px richting plaat geschoven.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel {
        display:grid !important;
        position:absolute !important;
        top:auto !important;
        bottom:0 !important;

        margin:0 !important;
        max-height:min(520px,calc(100vh - 40px)) !important;
        overflow:auto !important;

        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;

        animation:none !important;
        transition:
            opacity .16s ease,
            transform .18s ease,
            visibility 0s linear .18s !important;
    }

    /* Links geplaatste sitekolom: naar rechts openen. */
    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    .site-layout-side-stack > #header
    .header-profile-start-panel {
        left:calc(100% + 10px) !important;
        right:auto !important;
        transform:translateX(-8px) !important;
    }

    /* Rechts geplaatste sitekolom: naar links openen. */
    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel {
        right:calc(100% + 10px) !important;
        left:auto !important;
        transform:translateX(8px) !important;
    }

    /* Openstatus exact zoals .taskbar-footer-panel.is-open. */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start[open] > .header-profile-start-panel {
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:translateX(0) !important;
        transition-delay:0s !important;
    }

    /*
     * De drie vaste platen blijven tijdens openen exact onaangeroerd.
     */
    html.site-layout-header-under-taskbar
    body.profile-start-side-open
    .site-layout-side-stack {
        gap:20px !important;
    }

    html.site-layout-header-under-taskbar
    body.profile-start-side-open
    .site-layout-side-stack > :is(#taskbar,#header,.taskbar-footer-panel) {
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
        margin:0 !important;
        inset:auto !important;
        transform:none !important;
        translate:none !important;
    }
}


/* ========================================================================
   r1153 — profielpijltje terug IN de naamregel
   Het pijltje en het popupvenster gebruiken dezelfde profielregel als anker.
   ======================================================================== */

@media (min-width:1025px) {

    /*
     * De profielregel is het anker. r1152 zette deze per ongeluk op static,
     * waardoor het absolute pijltje de volledige oranje plaat als referentie
     * gebruikte en bovenaan terecht kon komen.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    #tabs > .header-profile-tab-wrap {
        position:relative !important;
        height:40px !important;
        min-height:40px !important;
        max-height:40px !important;
        overflow:visible !important;
    }

    /*
     * <details> zelf neemt geen ruimte in. Daardoor verandert openen/sluiten
     * niets aan de hoogte of positie van de oranje plaat.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    #tabs > .header-profile-tab-wrap > .header-profile-start {
        position:static !important;
        width:0 !important;
        height:0 !important;
        min-width:0 !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 !important;
        overflow:visible !important;
    }

    /* Pijltje exact terug naast de profielnaam. */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    #tabs > .header-profile-tab-wrap
    > .header-profile-start
    > .header-profile-start-toggle {
        position:absolute !important;
        top:4px !important;
        right:5px !important;
        bottom:auto !important;
        left:auto !important;

        width:31px !important;
        height:32px !important;
        margin:0 !important;
        z-index:2147483500 !important;
    }

    /*
     * Popup blijft zoals het copyrightvenster:
     * - absoluut buiten de plaat;
     * - onderkant exact gelijk aan de onderkant van de ORANJE plaat;
     * - opent naar de inhoud.
     *
     * De profielregel zit 10px boven de onderrand door de header-padding,
     * daarom bottom:-10px.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    #tabs > .header-profile-tab-wrap
    .header-profile-start-panel {
        position:absolute !important;
        top:auto !important;
        bottom:-10px !important;
        margin:0 !important;
    }

    /* Header links: 10px header-padding + 10px gewenste tussenruimte. */
    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    .site-layout-side-stack > #header
    #tabs > .header-profile-tab-wrap
    .header-profile-start-panel {
        left:calc(100% + 20px) !important;
        right:auto !important;
        transform:translateX(-8px) !important;
    }

    html.site-layout-header-under-taskbar:not(.site-layout-taskbar-right)
    .site-layout-side-stack > #header
    #tabs > .header-profile-tab-wrap
    .header-profile-start[open] > .header-profile-start-panel {
        transform:translateX(0) !important;
    }

    /* Header rechts: gespiegeld. */
    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    #tabs > .header-profile-tab-wrap
    .header-profile-start-panel {
        right:calc(100% + 20px) !important;
        left:auto !important;
        transform:translateX(8px) !important;
    }

    html.site-layout-taskbar-right.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    #tabs > .header-profile-tab-wrap
    .header-profile-start[open] > .header-profile-start-panel {
        transform:translateX(0) !important;
    }
}


/* ========================================================================
   r1154 — popupafwerking + gelijke typografie blauw/oranje
   ======================================================================== */

@media (min-width:1025px) {

    /* Profielvenster mooi afgerond en zonder zichtbare scrollbar. */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel {
        border-radius:12px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel::-webkit-scrollbar {
        width:0 !important;
        height:0 !important;
        display:none !important;
    }

    /*
     * De linker oranje menulijst en de blauwe taakbalk gebruiken in deze
     * alternatieve indeling exact dezelfde basisfont, grootte en gewicht.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar #taskbar-nav,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs {
        font-family:var(--base-font,Comfortaa,Arial,sans-serif) !important;
        font-size:var(--base-font-size,16px) !important;
        line-height:1.2 !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #taskbar #taskbar-nav a,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > a,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap > .header-profile-link {
        font-family:var(--base-font,Comfortaa,Arial,sans-serif) !important;
        font-size:var(--base-font-size,16px) !important;
        font-weight:700 !important;
        line-height:1.2 !important;
    }

    /*
     * Ook de tekst in het profielpijltje-blok erft exact dezelfde typografie,
     * zodat de oranje plaat visueel niet kleiner/groter oogt dan de blauwe.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > .header-profile-tab-wrap {
        font-family:var(--base-font,Comfortaa,Arial,sans-serif) !important;
        font-size:var(--base-font-size,16px) !important;
        line-height:1.2 !important;
    }
}


/* ========================================================================
   r1155 — bovenhoeken oranje plaat + vaste popuphoogte
   ======================================================================== */

@media (min-width:1025px) {

    /*
     * De oranje plaat zelf heeft al radius, maar het eerste tab-item kon de
     * bovenhoeken visueel vierkant afdekken. Geef daarom ook het tabvlak en
     * eerste item dezelfde bovenradius, zonder overflow:hidden te gebruiken
     * (de profielpopup moet immers buiten de plaat kunnen openen).
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header {
        border-radius:12px !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs {
        border-radius:10px 10px 8px 8px !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > :first-child,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > :first-child > a {
        border-top-left-radius:9px !important;
        border-top-right-radius:9px !important;
    }

    /*
     * Profielvenster: vaste hoogte. Geen zichtbare of interne scrollbar;
     * alle panelen gebruiken dezelfde maat zodat wisselen niet verspringt.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel {
        height:300px !important;
        min-height:300px !important;
        max-height:300px !important;

        overflow:hidden !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
        border-radius:12px !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel::-webkit-scrollbar {
        display:none !important;
        width:0 !important;
        height:0 !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-links,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-submenus {
        height:300px !important;
        min-height:300px !important;
        max-height:300px !important;
        overflow:hidden !important;
    }
}


/* ========================================================================
   r1156 — echte afgeronde bovenhoeken + 3 rijen profielbezoekers zichtbaar
   ======================================================================== */

@media (min-width:1025px) {

    /*
     * De oranje plaat krijgt een eigen achtergrondlaag met echte ronde
     * bovenhoeken. We clippen #header zelf NIET, zodat het profielvenster
     * nog steeds buiten de plaat kan openen.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header {
        position:relative !important;
        overflow:visible !important;
        isolation:isolate !important;

        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;

        border-radius:12px !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header::before {
        content:"" !important;
        display:block !important;

        position:absolute !important;
        inset:0 !important;
        z-index:-1 !important;

        border:1px solid rgba(119,61,4,.18) !important;
        border-radius:12px !important;

        background:linear-gradient(
            180deg,
            #F9A62B 0%,
            #F79A16 55%,
            #ED9010 100%
        ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.34),
            inset 0 -1px 0 rgba(126,61,2,.18),
            0 3px 9px rgba(87,47,7,.12) !important;

        pointer-events:none !important;
    }

    /* Geen vierkante achtergrond van #tabs over de ronde bovenhoeken heen. */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs {
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
        border-radius:10px !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > :first-child,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > :first-child > a {
        border-top-left-radius:9px !important;
        border-top-right-radius:9px !important;
    }

    /*
     * 500px vaste hoogte: voldoende voor titel + 3×3 vierkante
     * profielbezoekers in het rechterdeel.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel {
        height:500px !important;
        min-height:500px !important;
        max-height:500px !important;

        overflow:hidden !important;
        border-radius:12px !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel::-webkit-scrollbar {
        display:none !important;
        width:0 !important;
        height:0 !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-links,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-submenus {
        height:500px !important;
        min-height:500px !important;
        max-height:500px !important;
        overflow:hidden !important;
    }
}


/* ========================================================================
   r1157 — bovenradius nu op de echte zichtbare lagen
   ======================================================================== */

@media (min-width:1025px) {

    /*
     * ORANJE PLAAT:
     * de achtergrondlaag staat nu BOVEN de transparante headerachtergrond
     * maar ONDER de tab-inhoud. Daardoor zijn de ronde bovenhoeken werkelijk
     * zichtbaar zonder dat de popup wordt afgeknipt.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header {
        position:relative !important;
        overflow:visible !important;
        isolation:isolate !important;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
        border-radius:12px !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header::before {
        content:"" !important;
        display:block !important;
        position:absolute !important;
        inset:0 !important;
        z-index:0 !important;

        box-sizing:border-box !important;
        border:1px solid rgba(119,61,4,.18) !important;
        border-radius:12px !important;

        background:linear-gradient(
            180deg,
            #F9A62B 0%,
            #F79A16 55%,
            #ED9010 100%
        ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.34),
            inset 0 -1px 0 rgba(126,61,2,.18),
            0 3px 9px rgba(87,47,7,.12) !important;

        pointer-events:none !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs {
        position:relative !important;
        z-index:1 !important;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
    }

    /*
     * Geen tabachtergrond mag de twee bovenste hoeken opnieuw vierkant
     * afdekken.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > :first-child,
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header #tabs > :first-child > a {
        border-top-left-radius:10px !important;
        border-top-right-radius:10px !important;
    }

    /*
     * PROFIELVENSTER:
     * ook de daadwerkelijke linker/rechter kleurkolommen krijgen expliciet
     * de buitenste bovenradius. De decoratieve glansstrook volgt die radius.
     */
    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel {
        border:1px solid #b86608 !important;
        border-radius:12px !important;
        overflow:hidden !important;
        background:#e8eaed !important;
        background-clip:padding-box !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-panel::before {
        border-radius:11px 11px 0 0 !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-links {
        border-top-left-radius:11px !important;
        border-bottom-left-radius:11px !important;
    }

    html.site-layout-header-under-taskbar
    .site-layout-side-stack > #header
    .header-profile-start-submenus {
        border-top-right-radius:11px !important;
        border-bottom-right-radius:11px !important;
    }
}

/* ========================================================================
   r1209 — extra indeling: blauwe taakbalk horizontaal boven oranje header
   ======================================================================== */
@media (min-width:1025px) {
    html.site-layout-taskbar-above-header #container,
    html.site-layout-taskbar-above-header #container.fullscreen,
    html.site-layout-taskbar-above-header #profile,
    html.site-layout-taskbar-above-header #container.groups-profile {
        gap:20px !important;
        align-items:start !important;
    }

    html.site-layout-taskbar-above-header #container:not(.fullscreen):has(> #sidebar) {
        grid-template-areas:
            "taskbar taskbar"
            "header header"
            "main sidebar"
            "footer footer" !important;
        grid-template-columns:minmax(0,1fr) 350px !important;
        grid-template-rows:auto auto 1fr auto !important;
    }

    html.site-layout-taskbar-above-header #container:not(.fullscreen):not(:has(> #sidebar)),
    html.site-layout-taskbar-above-header #container.fullscreen,
    html.site-layout-taskbar-above-header #profile,
    html.site-layout-taskbar-above-header #container.groups-profile {
        grid-template-areas:
            "taskbar"
            "header"
            "main"
            "footer" !important;
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-rows:auto auto 1fr auto !important;
    }

    html.site-layout-taskbar-above-header #container > #taskbar,
    html.site-layout-taskbar-above-header #profile > #taskbar,
    html.site-layout-taskbar-above-header #container.groups-profile > #taskbar {
        grid-area:taskbar !important;
        position:relative !important;
        inset:auto !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        width:100% !important;
        max-width:none !important;
        min-height:70px !important;
        height:auto !important;
        margin:0 !important;
        padding:9px 14px !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        gap:14px !important;
        box-sizing:border-box !important;
        overflow:visible !important;
        border-radius:8px !important;
        z-index:100 !important;
    }

    /* In de bovenstand is de inklapbare profieltaakbalk gewoon volledig zichtbaar. */
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:hover,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:focus-within {
        width:100% !important;
        padding:9px 14px !important;
        flex-direction:row !important;
        overflow:visible !important;
        transform:none !important;
    }

    html.site-layout-taskbar-above-header #taskbar #logo,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible #logo,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:hover #logo,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:focus-within #logo {
        order:1 !important;
        flex:0 0 118px !important;
        width:118px !important;
        min-width:118px !important;
        height:52px !important;
        min-height:52px !important;
        max-height:52px !important;
        margin:0 !important;
        overflow:hidden !important;
    }

    html.site-layout-taskbar-above-header #taskbar #logo-smileys,
    html.site-layout-taskbar-above-header #taskbar #logo-wrapper {
        max-width:112px !important;
        max-height:52px !important;
        width:112px !important;
        height:52px !important;
        top:0 !important;
        left:50% !important;
        transform:translateX(-50%) !important;
        object-fit:contain !important;
    }

    html.site-layout-taskbar-above-header #taskbar #logo .site-logo-custom {
        inset:2px !important;
        width:calc(100% - 4px) !important;
        height:calc(100% - 4px) !important;
        max-width:none !important;
        max-height:none !important;
        object-fit:contain !important;
    }

    html.site-layout-taskbar-above-header #taskbar > .site-logo-edit-button--taskbar {
        position:static !important;
        order:2 !important;
        flex:0 0 auto !important;
        margin:0 !important;
        transform:none !important;
    }

    html.site-layout-taskbar-above-header #taskbar #taskbar-nav,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible #taskbar-nav {
        order:3 !important;
        flex:1 1 auto !important;
        width:auto !important;
        min-width:0 !important;
        margin:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        flex-wrap:wrap !important;
        gap:5px !important;
        font-family:var(--base-font,Comfortaa,Arial,sans-serif) !important;
        font-size:var(--base-font-size,16px) !important;
        line-height:1.25 !important;
    }

    html.site-layout-taskbar-above-header #taskbar #taskbar-nav a,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible #taskbar-nav a {
        min-height:40px !important;
        width:auto !important;
        margin:0 !important;
        padding:7px 10px !important;
        display:inline-flex !important;
        align-items:center !important;
        gap:7px !important;
        white-space:nowrap !important;
        box-sizing:border-box !important;
        transform:none !important;
    }

    html.site-layout-taskbar-above-header #taskbar #taskbar-nav a:hover {
        transform:none !important;
    }

    html.site-layout-taskbar-above-header #taskbar #taskbar-nav .taskbar-icon-wrap,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible #taskbar-nav .taskbar-icon-wrap {
        width:21px !important;
        min-width:21px !important;
        margin:0 !important;
        float:none !important;
    }

    html.site-layout-taskbar-above-header #taskbar #taskbar-nav .taskbar-icon,
    html.site-layout-taskbar-above-header #taskbar #taskbar-nav .taskbar-icon svg {
        width:21px !important;
        height:21px !important;
    }

    html.site-layout-taskbar-above-header #taskbar > .taskbar-footer-panel {
        order:4 !important;
        flex:0 0 auto !important;
        width:auto !important;
        margin:0 !important;
        position:relative !important;
        overflow:visible !important;
        border-radius:6px !important;
        background:rgba(255,255,255,.10) !important;
        box-shadow:none !important;
    }

    html.site-layout-taskbar-above-header #taskbar > .taskbar-footer-panel .taskbar-footer-toggle {
        min-height:40px !important;
        padding:0 10px !important;
        gap:7px !important;
        color:#fff !important;
        font:inherit !important;
        text-shadow:none !important;
        border-radius:6px !important;
    }

    html.site-layout-taskbar-above-header #taskbar > .taskbar-footer-panel .taskbar-footer-label,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:not(:hover):not(:focus-within) .taskbar-footer-label {
        opacity:1 !important;
        width:auto !important;
        min-width:0 !important;
        flex-basis:auto !important;
        overflow:visible !important;
    }

    html.site-layout-taskbar-above-header #taskbar > .taskbar-footer-panel .taskbar-footer-chevron,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:not(:hover):not(:focus-within) .taskbar-footer-chevron {
        opacity:1 !important;
        width:18px !important;
        min-width:18px !important;
        flex-basis:18px !important;
        overflow:visible !important;
    }

    html.site-layout-taskbar-above-header #taskbar > .taskbar-footer-panel .taskbar-footer-content {
        position:absolute !important;
        z-index:500 !important;
        top:calc(100% + 8px) !important;
        right:0 !important;
        left:auto !important;
        width:240px !important;
        padding:8px 14px 12px !important;
        border-radius:7px !important;
        background:#3d5f91 !important;
        box-shadow:0 10px 26px rgba(0,0,0,.22) !important;
    }

    html.site-layout-taskbar-above-header #container > #header,
    html.site-layout-taskbar-above-header #profile > #header,
    html.site-layout-taskbar-above-header #container.groups-profile > #header {
        grid-area:header !important;
        grid-column:1 / -1 !important;
        grid-row:auto !important;
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        transform:none !important;
        z-index:5 !important;
    }

    /* Rechter/linker taakbalkstand is niet van toepassing zolang de balk boven staat. */
    html.site-layout-taskbar-above-header.site-layout-taskbar-right #container > #taskbar,
    html.site-layout-taskbar-above-header.site-layout-taskbar-right #profile > #taskbar {
        justify-self:stretch !important;
    }
}

/* Preview van de nieuwe bovenstand. */
.site-layout-mini.is-taskbar-above .site-layout-mini-taskbar {
    top:auto !important;
    bottom:10px !important;
    left:12px !important;
    right:12px !important;
    bottom:auto !important;
    width:auto !important;
    height:22px !important;
    border-radius:4px !important;
}
.site-layout-mini.is-taskbar-above .site-layout-mini-header {
    top:38px !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    height:18px !important;
}
.site-layout-mini.is-taskbar-above .site-layout-mini-main {
    top:63px !important;
    left:12px !important;
    right:12px !important;
    bottom:10px !important;
    width:auto !important;
}

.site-layout-option input:disabled + .site-layout-switch-track {
    opacity:.45;
    cursor:not-allowed;
}


/* =====================================================================
   r1210 — bovenstand als echte dubbele header:
   [ blauw logo ] [ blauwe navigatie ........ ] [ copyright ]
                  [ oranje header ......................... ]
   ===================================================================== */
@media (min-width:1025px) {
    /* De taakbalk zelf levert alleen zijn kinderen aan het hoofdgrid. */
    html.site-layout-taskbar-above-header #container > #taskbar,
    html.site-layout-taskbar-above-header #profile > #taskbar,
    html.site-layout-taskbar-above-header #container.groups-profile > #taskbar,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:hover,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:focus-within {
        display:contents !important;
        width:auto !important;
        min-height:0 !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
    }

    /* Met rechterkolom blijft de gewone 350px-zijbalkbreedte behouden. */
    html.site-layout-taskbar-above-header #container:not(.fullscreen):has(> #sidebar) {
        grid-template-columns:140px minmax(0,1fr) 350px !important;
        grid-template-rows:60px 60px auto auto !important;
        grid-template-areas:none !important;
        column-gap:0 !important;
        row-gap:0 !important;
    }

    /* Pagina's zonder rechterkolom. */
    html.site-layout-taskbar-above-header #container:not(.fullscreen):not(:has(> #sidebar)),
    html.site-layout-taskbar-above-header #container.fullscreen,
    html.site-layout-taskbar-above-header #profile,
    html.site-layout-taskbar-above-header #container.groups-profile {
        grid-template-columns:140px minmax(0,1fr) !important;
        grid-template-rows:60px 60px auto auto !important;
        grid-template-areas:none !important;
        column-gap:0 !important;
        row-gap:0 !important;
    }

    /* Los logovak links: één blauwe plaat over beide headerregels. */
    html.site-layout-taskbar-above-header #taskbar #logo,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible #logo,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:hover #logo,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:focus-within #logo {
        grid-column:1 !important;
        grid-row:1 / 3 !important;
        align-self:stretch !important;
        justify-self:stretch !important;
        position:relative !important;
        inset:auto !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        height:auto !important;
        min-height:120px !important;
        max-height:none !important;
        margin:0 !important;
        padding:8px 10px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        background:var(--color-surface-taskbar,#4B72AA) !important;
        border-radius:8px 0 0 8px !important;
        box-shadow:var(--shadow-taskbar) !important;
        z-index:104 !important;
    }

    html.site-layout-taskbar-above-header #taskbar #logo-smileys,
    html.site-layout-taskbar-above-header #taskbar #logo-wrapper,
    html.site-layout-taskbar-above-header #taskbar #logo .site-logo-orange-wrapper {
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        width:118px !important;
        max-width:118px !important;
        height:auto !important;
        max-height:104px !important;
        transform:translate(-50%,-50%) !important;
        object-fit:contain !important;
    }

    html.site-layout-taskbar-above-header #taskbar #logo .site-logo-custom {
        position:absolute !important;
        z-index:20 !important;
        left:10px !important;
        right:10px !important;
        top:10px !important;
        bottom:10px !important;
        width:calc(100% - 20px) !important;
        height:calc(100% - 20px) !important;
        max-width:none !important;
        max-height:none !important;
        object-fit:contain !important;
    }

    /* Beheerknop blijft rechtsonder in het losse logovak. */
    html.site-layout-taskbar-above-header #taskbar > .site-logo-edit-button--taskbar {
        grid-column:1 !important;
        grid-row:1 / 3 !important;
        align-self:end !important;
        justify-self:end !important;
        position:relative !important;
        z-index:120 !important;
        width:30px !important;
        height:30px !important;
        margin:0 7px 7px 0 !important;
        transform:none !important;
    }

    /* Blauwe navigatie: dezelfde horizontale verdeling als de oranje header. */
    html.site-layout-taskbar-above-header #taskbar #taskbar-nav,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible #taskbar-nav {
        grid-column:2 / -1 !important;
        grid-row:1 !important;
        align-self:stretch !important;
        justify-self:stretch !important;
        width:auto !important;
        min-width:0 !important;
        height:60px !important;
        margin:0 !important;
        padding:0 196px 0 8px !important;
        box-sizing:border-box !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:0 !important;
        flex-wrap:nowrap !important;
        overflow:hidden !important;
        background:var(--color-surface-taskbar,#4B72AA) !important;
        border-radius:0 8px 0 0 !important;
        box-shadow:var(--shadow-taskbar) !important;
        font-size:calc(var(--base-font-size,16px) + 1px) !important;
        line-height:1 !important;
        z-index:101 !important;
    }

    html.site-layout-taskbar-above-header #taskbar #taskbar-nav a,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible #taskbar-nav a {
        position:relative !important;
        flex:1 1 0 !important;
        min-width:0 !important;
        width:auto !important;
        height:60px !important;
        min-height:60px !important;
        margin:0 !important;
        padding:0 8px !important;
        box-sizing:border-box !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:0 !important;
        text-align:center !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        color:#fff !important;
        text-decoration:none !important;
        font-weight:bold !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        transition:transform .25s ease, background-color .18s ease, opacity .18s ease !important;
    }

    /* In de bovenstand zijn het tekstlinks zoals in de oranje header. */
    html.site-layout-taskbar-above-header #taskbar #taskbar-nav .taskbar-icon-wrap,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible #taskbar-nav .taskbar-icon-wrap {
        display:none !important;
    }

    html.site-layout-taskbar-above-header #taskbar #taskbar-nav a:hover,
    html.site-layout-taskbar-above-header #taskbar #taskbar-nav a:focus-visible {
        transform:translateY(-2px) !important;
        background:rgba(255,255,255,.07) !important;
        outline:0 !important;
    }

    html.site-layout-taskbar-above-header #taskbar #taskbar-nav a.active {
        color:#fff !important;
        background:rgba(11,71,147,.62) !important;
        box-shadow:none !important;
    }

    /* Copyright als eigen grijze plaat helemaal rechts van de blauwe balk. */
    html.site-layout-taskbar-above-header #taskbar > .taskbar-footer-panel {
        grid-column:2 / -1 !important;
        grid-row:1 !important;
        align-self:stretch !important;
        justify-self:end !important;
        position:relative !important;
        inset:auto !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        z-index:130 !important;
        width:188px !important;
        min-width:188px !important;
        max-width:188px !important;
        height:60px !important;
        min-height:60px !important;
        margin:0 !important;
        overflow:visible !important;
        color:#fff !important;
        background:#858585 !important;
        border-radius:0 8px 0 0 !important;
        box-shadow:0 3px 10px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.15) !important;
    }

    html.site-layout-taskbar-above-header #taskbar > .taskbar-footer-panel .taskbar-footer-toggle {
        width:100% !important;
        height:60px !important;
        min-height:60px !important;
        padding:0 14px !important;
        border-radius:0 8px 0 0 !important;
        background:transparent !important;
        color:#fff !important;
        font:600 var(--base-font-size,16px)/1.3 var(--base-font,Comfortaa,Arial,sans-serif) !important;
    }

    html.site-layout-taskbar-above-header #taskbar > .taskbar-footer-panel .taskbar-footer-content {
        position:absolute !important;
        z-index:500 !important;
        top:calc(100% + 8px) !important;
        right:0 !important;
        bottom:auto !important;
        left:auto !important;
        width:290px !important;
        max-width:min(290px,calc(100vw - 28px)) !important;
        padding:11px 12px 12px !important;
        border-radius:7px !important;
        background:#767676 !important;
        box-shadow:0 10px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    /* Oranje header begint pas ná het losse logovak. */
    html.site-layout-taskbar-above-header #container > #header,
    html.site-layout-taskbar-above-header #profile > #header,
    html.site-layout-taskbar-above-header #container.groups-profile > #header {
        grid-column:2 / -1 !important;
        grid-row:2 !important;
        align-self:stretch !important;
        justify-self:stretch !important;
        width:auto !important;
        height:60px !important;
        min-height:60px !important;
        margin:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        border-radius:0 0 8px 0 !important;
        z-index:102 !important;
    }

    /* De pagina-inhoud houdt de normale 20px afstand onder de dubbele kop. */
    html.site-layout-taskbar-above-header #container > #main,
    html.site-layout-taskbar-above-header #profile > #main,
    html.site-layout-taskbar-above-header #container.groups-profile > #main {
        grid-row:3 !important;
        margin-top:20px !important;
    }

    html.site-layout-taskbar-above-header #container:not(.fullscreen):has(> #sidebar) > #main {
        grid-column:1 / 3 !important;
    }
    html.site-layout-taskbar-above-header #container:not(.fullscreen):has(> #sidebar) > #sidebar {
        grid-column:3 !important;
        grid-row:3 !important;
        margin-top:20px !important;
    }
    html.site-layout-taskbar-above-header #container:not(.fullscreen):not(:has(> #sidebar)) > #main,
    html.site-layout-taskbar-above-header #container.fullscreen > #main,
    html.site-layout-taskbar-above-header #profile > #main,
    html.site-layout-taskbar-above-header #container.groups-profile > #main {
        grid-column:1 / -1 !important;
    }

    html.site-layout-taskbar-above-header #container > #footer,
    html.site-layout-taskbar-above-header #profile > #footer,
    html.site-layout-taskbar-above-header #container.groups-profile > #footer {
        grid-column:1 / -1 !important;
        grid-row:4 !important;
    }
}

/* Preview: links blauw logovlak, boven blauwe navigatie + grijs copyright,
   daaronder oranje header. */
.site-layout-mini.is-taskbar-above .site-layout-mini-taskbar {
    top:10px !important;
    left:48px !important;
    right:12px !important;
    width:auto !important;
    height:22px !important;
    border-radius:0 4px 0 0 !important;
}
.site-layout-mini.is-taskbar-above .site-layout-mini-taskbar::before {
    content:"" !important;
    position:absolute !important;
    left:-36px !important;
    top:0 !important;
    width:36px !important;
    height:44px !important;
    border-radius:4px 0 0 4px !important;
    background:var(--color-surface-taskbar,#4B72AA) !important;
}
.site-layout-mini.is-taskbar-above .site-layout-mini-taskbar::after {
    content:"©" !important;
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    width:42px !important;
    height:22px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:0 4px 0 0 !important;
    background:#858585 !important;
    color:#fff !important;
    font-size:8px !important;
    font-weight:700 !important;
}
.site-layout-mini.is-taskbar-above .site-layout-mini-header {
    top:32px !important;
    left:48px !important;
    right:12px !important;
    width:auto !important;
    height:22px !important;
    border-radius:0 0 4px 0 !important;
}
.site-layout-mini.is-taskbar-above .site-layout-mini-main {
    top:64px !important;
}


/* =====================================================================
   r1211 — lucht tussen de losse platen in de taakbalk-bovenstand.
   Logo, blauwe navigatie, copyright en oranje header raken elkaar niet.
   ===================================================================== */
@media (min-width:1025px) {
    html.site-layout-taskbar-above-header #container:not(.fullscreen):has(> #sidebar) {
        grid-template-rows:60px 10px 60px auto auto !important;
    }

    html.site-layout-taskbar-above-header #container:not(.fullscreen):not(:has(> #sidebar)),
    html.site-layout-taskbar-above-header #container.fullscreen,
    html.site-layout-taskbar-above-header #profile,
    html.site-layout-taskbar-above-header #container.groups-profile {
        grid-template-rows:60px 10px 60px auto auto !important;
    }

    /* Logo blijft één los blok over beide balkhoogtes, met 10px ruimte rechts. */
    html.site-layout-taskbar-above-header #taskbar #logo,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible #logo,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:hover #logo,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible:focus-within #logo {
        grid-row:1 / 4 !important;
        min-height:130px !important;
        margin:0 10px 0 0 !important;
        border-radius:8px !important;
    }

    html.site-layout-taskbar-above-header #taskbar > .site-logo-edit-button--taskbar {
        grid-row:1 / 4 !important;
        margin:0 17px 7px 0 !important;
    }

    /* Blauwe navigatie eindigt 10px vóór de grijze copyrightplaat. */
    html.site-layout-taskbar-above-header #taskbar #taskbar-nav,
    html.site-layout-taskbar-above-header #taskbar.profile-taskbar-collapsible #taskbar-nav {
        grid-row:1 !important;
        margin:0 198px 0 0 !important;
        padding:0 8px !important;
        border-radius:8px !important;
    }

    /* Copyright is echt een losse plaat, niet meer tegen de blauwe balk aan. */
    html.site-layout-taskbar-above-header #taskbar > .taskbar-footer-panel {
        grid-row:1 !important;
        margin:0 !important;
        border-radius:8px !important;
    }

    html.site-layout-taskbar-above-header #taskbar > .taskbar-footer-panel .taskbar-footer-toggle {
        border-radius:8px !important;
    }

    /* Oranje header krijgt een eigen regel met 10px ruimte erboven. */
    html.site-layout-taskbar-above-header #container > #header,
    html.site-layout-taskbar-above-header #profile > #header,
    html.site-layout-taskbar-above-header #container.groups-profile > #header {
        grid-row:3 !important;
        border-radius:8px !important;
    }

    html.site-layout-taskbar-above-header #container > #main,
    html.site-layout-taskbar-above-header #profile > #main,
    html.site-layout-taskbar-above-header #container.groups-profile > #main {
        grid-row:4 !important;
    }

    html.site-layout-taskbar-above-header #container:not(.fullscreen):has(> #sidebar) > #sidebar {
        grid-row:4 !important;
    }

    html.site-layout-taskbar-above-header #container > #footer,
    html.site-layout-taskbar-above-header #profile > #footer,
    html.site-layout-taskbar-above-header #container.groups-profile > #footer {
        grid-row:5 !important;
    }
}

/* Ook het mini-voorbeeld laat de tussenruimtes zien. */
.site-layout-mini.is-taskbar-above .site-layout-mini-taskbar {
    left:52px !important;
    right:62px !important;
    border-radius:4px !important;
}
.site-layout-mini.is-taskbar-above .site-layout-mini-taskbar::before {
    left:-40px !important;
    width:32px !important;
    height:50px !important;
    border-radius:4px !important;
}
.site-layout-mini.is-taskbar-above .site-layout-mini-taskbar::after {
    right:-50px !important;
    width:42px !important;
    border-radius:4px !important;
}
.site-layout-mini.is-taskbar-above .site-layout-mini-header {
    top:38px !important;
    left:52px !important;
    right:12px !important;
    border-radius:4px !important;
}
.site-layout-mini.is-taskbar-above .site-layout-mini-main {
    top:70px !important;
}


/* =====================================================================
   r1212 — één keuzelijst voor de complete desktopindeling.
   ===================================================================== */
.site-layout-mode-list {
    display:grid;
    gap:10px;
}
.site-layout-mode-choice {
    border:1px solid #d7dce4;
    border-radius:8px;
    background:#f7f8fa;
    overflow:hidden;
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.site-layout-mode-choice:has(> .site-layout-mode-main > input:checked) {
    border-color:#4B72AA;
    background:#f3f7fc;
    box-shadow:0 0 0 2px rgba(75,114,170,.11);
}
.site-layout-mode-main {
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    gap:11px;
    align-items:start;
    padding:13px 14px;
    cursor:pointer;
}
.site-layout-mode-main > input {
    width:18px;
    height:18px;
    margin:2px 0 0;
    accent-color:#4B72AA;
}
.site-layout-mode-copy strong {
    display:block;
    margin:0 0 3px;
    color:#303947;
    font-size:15px;
}
.site-layout-mode-copy span {
    display:block;
    color:#727a85;
    font-size:12px;
    line-height:1.45;
}
.site-layout-side-options {
    display:flex;
    align-items:center;
    gap:7px;
    margin:-2px 14px 13px 47px;
    transition:opacity .15s ease;
}
.site-layout-side-options.is-disabled { opacity:.45; }
.site-layout-side-option {
    position:relative;
    display:inline-flex;
    align-items:center;
    cursor:pointer;
}
.site-layout-side-option input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.site-layout-side-option span {
    min-width:70px;
    padding:7px 11px;
    box-sizing:border-box;
    border:1px solid #b9c0ca;
    border-radius:5px;
    background:linear-gradient(#fff,#e7ebf0);
    color:#3f4854;
    text-align:center;
    font-size:13px;
    line-height:1.2;
}
.site-layout-side-option input:checked + span {
    border-color:#4B72AA;
    background:#4B72AA;
    color:#fff;
    box-shadow:inset 0 1px rgba(255,255,255,.18);
}
.site-layout-side-option input:focus-visible + span {
    outline:3px solid rgba(75,114,170,.20);
    outline-offset:2px;
}

/* Vast: alleen desktop. Logo, navigatie en copyright als drie losse platen
   bovenaan fixed; de oranje header onderaan fixed. */
@media (min-width:1025px) {
    html.site-layout-fixed #container:not(.fullscreen):has(> #sidebar) {
        grid-template-areas:"main sidebar" "footer footer" !important;
        grid-template-columns:minmax(0,1fr) 350px !important;
        grid-template-rows:auto auto !important;
        padding-top:94px !important;
        padding-bottom:80px !important;
        box-sizing:border-box !important;
    }
    html.site-layout-fixed #container:not(.fullscreen):not(:has(> #sidebar)),
    html.site-layout-fixed #container.fullscreen,
    html.site-layout-fixed #profile,
    html.site-layout-fixed #container.groups-profile {
        grid-template-areas:"main" "footer" !important;
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-rows:auto auto !important;
        padding-top:94px !important;
        padding-bottom:80px !important;
        box-sizing:border-box !important;
    }
    html.site-layout-fixed #messages {
        top:100px !important;
        bottom:100px !important;
        grid-template-areas:"main sidebar" "footer footer" !important;
        grid-template-columns:minmax(0,1fr) 350px !important;
        grid-template-rows:auto 50px !important;
    }

    html.site-layout-fixed #container > #header,
    html.site-layout-fixed #profile > #header,
    html.site-layout-fixed #container.groups-profile > #header,
    html.site-layout-fixed #messages > #header {
        position:fixed !important;
        z-index:950 !important;
        top:auto !important;
        right:auto !important;
        bottom:20px !important;
        
        left:var(--site-layout-fixed-left,20px) !important;
        width:var(--site-layout-fixed-width,calc(100vw - 40px)) !important;
        height:60px !important;
        min-height:60px !important;
        margin:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        transform:none !important;
        opacity:1 !important;
        visibility:visible !important;
        border-radius:8px !important;
    }

    html.site-layout-fixed #container > #taskbar,
    html.site-layout-fixed #profile > #taskbar,
    html.site-layout-fixed #container.groups-profile > #taskbar,
    html.site-layout-fixed #messages > #taskbar,
    html.site-layout-fixed #taskbar.profile-taskbar-collapsible,
    html.site-layout-fixed #taskbar.profile-taskbar-collapsible:hover,
    html.site-layout-fixed #taskbar.profile-taskbar-collapsible:focus-within {
        position:fixed !important;
        z-index:960 !important;
        top:20px !important;
        right:auto !important;
        bottom:auto !important;
        
        left:var(--site-layout-fixed-left,20px) !important;
        width:var(--site-layout-fixed-width,calc(100vw - 40px)) !important;
        height:64px !important;
        min-height:64px !important;
        max-height:64px !important;
        margin:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        display:grid !important;
        grid-template-columns:140px minmax(0,1fr) 188px !important;
        grid-template-rows:64px !important;
        gap:10px !important;
        overflow:visible !important;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        transform:none !important;
        opacity:1 !important;
    }

    html.site-layout-fixed #taskbar #logo,
    html.site-layout-fixed #taskbar.profile-taskbar-collapsible #logo,
    html.site-layout-fixed #taskbar.profile-taskbar-collapsible:hover #logo,
    html.site-layout-fixed #taskbar.profile-taskbar-collapsible:focus-within #logo {
        grid-column:1 !important;
        grid-row:1 !important;
        position:relative !important;
        inset:auto !important;
        width:140px !important;
        min-width:140px !important;
        max-width:140px !important;
        height:64px !important;
        min-height:64px !important;
        max-height:64px !important;
        margin:0 !important;
        padding:6px 10px !important;
        box-sizing:border-box !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        background:var(--color-surface-taskbar,#4B72AA) !important;
        border-radius:8px !important;
        box-shadow:var(--shadow-taskbar) !important;
    }
    html.site-layout-fixed #taskbar #logo-smileys,
    html.site-layout-fixed #taskbar #logo-wrapper,
    html.site-layout-fixed #taskbar #logo .site-logo-orange-wrapper {
        position:absolute !important;
        left:50% !important;
        top:50% !important;
        width:112px !important;
        max-width:112px !important;
        max-height:54px !important;
        transform:translate(-50%,-50%) !important;
        object-fit:contain !important;
    }
    html.site-layout-fixed #taskbar #logo .site-logo-custom {
        position:absolute !important;
        inset:6px 10px !important;
        width:calc(100% - 20px) !important;
        height:calc(100% - 12px) !important;
        max-width:none !important;
        max-height:none !important;
        object-fit:contain !important;
    }
    html.site-layout-fixed #taskbar > .site-logo-edit-button--taskbar {
        position:absolute !important;
        z-index:975 !important;
        left:103px !important;
        right:auto !important;
        top:auto !important;
        bottom:5px !important;
        width:28px !important;
        height:28px !important;
        margin:0 !important;
        transform:none !important;
    }

    html.site-layout-fixed #taskbar #taskbar-nav,
    html.site-layout-fixed #taskbar.profile-taskbar-collapsible #taskbar-nav {
        grid-column:2 !important;
        grid-row:1 !important;
        width:auto !important;
        height:64px !important;
        margin:0 !important;
        padding:0 8px !important;
        box-sizing:border-box !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:0 !important;
        flex-wrap:nowrap !important;
        overflow:hidden !important;
        background:var(--color-surface-taskbar,#4B72AA) !important;
        border-radius:8px !important;
        box-shadow:var(--shadow-taskbar) !important;
    }
    html.site-layout-fixed #taskbar #taskbar-nav a,
    html.site-layout-fixed #taskbar.profile-taskbar-collapsible #taskbar-nav a {
        flex:1 1 0 !important;
        min-width:0 !important;
        width:auto !important;
        height:64px !important;
        min-height:64px !important;
        margin:0 !important;
        padding:0 7px !important;
        box-sizing:border-box !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:0 !important;
        overflow:hidden !important;
        color:#fff !important;
        text-align:center !important;
        text-decoration:none !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
        font-weight:700 !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
    }
    html.site-layout-fixed #taskbar #taskbar-nav .taskbar-icon-wrap { display:none !important; }
    html.site-layout-fixed #taskbar #taskbar-nav a:hover,
    html.site-layout-fixed #taskbar #taskbar-nav a:focus-visible {
        background:rgba(255,255,255,.08) !important;
        transform:translateY(-1px) !important;
        outline:0 !important;
    }
    html.site-layout-fixed #taskbar #taskbar-nav a.active {
        background:rgba(11,71,147,.62) !important;
        color:#fff !important;
    }

    html.site-layout-fixed #taskbar > .taskbar-footer-panel {
        grid-column:3 !important;
        grid-row:1 !important;
        position:relative !important;
        inset:auto !important;
        width:188px !important;
        min-width:188px !important;
        max-width:188px !important;
        height:64px !important;
        min-height:64px !important;
        margin:0 !important;
        overflow:visible !important;
        background:#858585 !important;
        color:#fff !important;
        border-radius:8px !important;
        box-shadow:0 3px 10px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.15) !important;
    }
    html.site-layout-fixed #taskbar > .taskbar-footer-panel .taskbar-footer-toggle {
        width:100% !important;
        height:64px !important;
        min-height:64px !important;
        padding:0 14px !important;
        border-radius:8px !important;
        background:transparent !important;
        color:#fff !important;
    }
    html.site-layout-fixed #taskbar > .taskbar-footer-panel .taskbar-footer-content {
        top:calc(100% + 8px) !important;
        right:0 !important;
        bottom:auto !important;
        left:auto !important;
        width:290px !important;
        max-width:min(290px,calc(100vw - 28px)) !important;
        transform:translateY(-8px) !important;
    }
    html.site-layout-fixed #taskbar > .taskbar-footer-panel.is-open .taskbar-footer-content {
        transform:translateY(0) !important;
    }
}

/* Miniatuur voor Vast: drie losse platen boven, oranje header onder. */
.site-layout-mini.is-layout-fixed .site-layout-mini-header {
    top:auto !important;
    bottom:10px !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    height:22px !important;
    border-radius:4px !important;
}
.site-layout-mini.is-layout-fixed .site-layout-mini-main {
    top:40px !important;
    bottom:40px !important;
    left:12px !important;
    right:12px !important;
}
.site-layout-mini.is-layout-fixed .site-layout-mini-taskbar {
    top:10px !important;
    bottom:auto !important;
    left:48px !important;
    right:62px !important;
    width:auto !important;
    height:22px !important;
    border-radius:4px !important;
}
.site-layout-mini.is-layout-fixed .site-layout-mini-taskbar::before {
    content:"" !important;
    position:absolute !important;
    left:-36px !important;
    top:0 !important;
    width:28px !important;
    height:22px !important;
    border-radius:4px !important;
    background:var(--color-surface-taskbar,#4B72AA) !important;
}
.site-layout-mini.is-layout-fixed .site-layout-mini-taskbar::after {
    content:"©" !important;
    position:absolute !important;
    top:0 !important;
    right:-50px !important;
    width:42px !important;
    height:22px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:4px !important;
    background:#858585 !important;
    color:#fff !important;
    font-size:8px !important;
    font-weight:700 !important;
}


/* ========================================================================
   r1215 — Vast: copyright naast de oranje header + profielmenu omhoog
   ======================================================================== */
@media (min-width:1025px) {
    /* Bovenaan staan alleen logo en blauwe navigatie. */
    html.site-layout-fixed #container > #taskbar,
    html.site-layout-fixed #profile > #taskbar,
    html.site-layout-fixed #container.groups-profile > #taskbar,
    html.site-layout-fixed #messages > #taskbar,
    html.site-layout-fixed #taskbar.profile-taskbar-collapsible,
    html.site-layout-fixed #taskbar.profile-taskbar-collapsible:hover,
    html.site-layout-fixed #taskbar.profile-taskbar-collapsible:focus-within {
        grid-template-columns:140px minmax(0,1fr) !important;
    }

    /* Oranje header laat rechts plaats vrij voor de losse copyrightplaat. */
    html.site-layout-fixed #container > #header,
    html.site-layout-fixed #profile > #header,
    html.site-layout-fixed #container.groups-profile > #header,
    html.site-layout-fixed #messages > #header {
        width:calc(var(--site-layout-fixed-width,calc(100vw - 40px)) - 198px) !important;
    }

    /* Copyright verhuist van de blauwe bovenrij naar rechts naast de header. */
    html.site-layout-fixed #taskbar > .taskbar-footer-panel {
        position:fixed !important;
        z-index:965 !important;
        top:auto !important;
        right:auto !important;
        bottom:20px !important;
        left:calc(var(--site-layout-fixed-left,20px) + var(--site-layout-fixed-width,calc(100vw - 40px)) - 188px) !important;
        width:188px !important;
        min-width:188px !important;
        max-width:188px !important;
        height:60px !important;
        min-height:60px !important;
        max-height:60px !important;
        margin:0 !important;
        display:block !important;
        overflow:visible !important;
        background:#858585 !important;
        color:#fff !important;
        border-radius:8px !important;
        box-shadow:0 3px 10px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.15) !important;
        transform:none !important;
    }
    html.site-layout-fixed #taskbar > .taskbar-footer-panel .taskbar-footer-toggle {
        width:100% !important;
        height:60px !important;
        min-height:60px !important;
        padding:0 14px !important;
        border-radius:8px !important;
    }

    /* Omdat copyright nu onderaan staat, opent ook dit venster naar boven. */
    html.site-layout-fixed #taskbar > .taskbar-footer-panel .taskbar-footer-content {
        top:auto !important;
        right:0 !important;
        bottom:calc(100% + 10px) !important;
        left:auto !important;
        width:290px !important;
        max-width:min(290px,calc(100vw - 28px)) !important;
        transform:translateY(8px) !important;
        transform-origin:right bottom !important;
    }
    html.site-layout-fixed #taskbar > .taskbar-footer-panel.is-open .taskbar-footer-content {
        transform:translateY(0) !important;
    }

    /* Profielmenu/profielbezoekers wordt door r1215-JS boven de onderste
       header gezet. Deze regels voorkomen dat oudere CSS top afdwingt. */
    html.site-layout-fixed #header #tabs .header-profile-start-panel {
        position:fixed !important;
        top:auto !important;
        transform-origin:right bottom !important;
    }
}

/* Miniatuur Vast: logo + taakbalk boven, header + copyright onder. */
.site-layout-mini.is-layout-fixed .site-layout-mini-header {
    right:58px !important;
}
.site-layout-mini.is-layout-fixed .site-layout-mini-taskbar {
    right:12px !important;
}
.site-layout-mini.is-layout-fixed .site-layout-mini-taskbar::after {
    top:auto !important;
    right:auto !important;
    left:auto !important;
    bottom:-32px !important;
    margin-left:0 !important;
    transform:none !important;
}
.site-layout-mini.is-layout-fixed::after {
    content:"©" !important;
    position:absolute !important;
    right:12px !important;
    bottom:10px !important;
    width:38px !important;
    height:22px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:4px !important;
    background:#858585 !important;
    color:#fff !important;
    font-size:8px !important;
    font-weight:700 !important;
}
.site-layout-mini.is-layout-fixed .site-layout-mini-taskbar::after {
    content:none !important;
    display:none !important;
}


/* ========================================================================
   r1216 — Vast: profielvenster exact gespiegeld t.o.v. normale bovenheader
   ======================================================================== */
@media (min-width:1025px) {
    /* De normale bovenheader gebruikt top:46px vanaf het profiel-detailsblok.
       Onderin gebruiken we exact dezelfde afstand gespiegeld: bottom:46px. */
    html.site-layout-fixed #header #tabs > .header-profile-tab-wrap {
        position:relative !important;
        overflow:visible !important;
    }

    html.site-layout-fixed #header #tabs .header-profile-start {
        position:absolute !important;
        top:4px !important;
        right:5px !important;
        bottom:auto !important;
        left:auto !important;
        overflow:visible !important;
    }

    html.site-layout-fixed #header #tabs .header-profile-start-panel {
        position:absolute !important;
        top:auto !important;
        right:0 !important;
        bottom:46px !important;
        left:auto !important;
        margin:0 !important;
        max-height:calc(100vh - 125px) !important;
        transform:none !important;
        transform-origin:right bottom !important;
    }

    /* De glans/radius ook verticaal spiegelen: het venster sluit visueel
       aan alsof de gewone header aan de bovenkant ondersteboven staat. */
    html.site-layout-fixed #header #tabs .header-profile-start-panel::before {
        inset:auto 0 0 0 !important;
        border-radius:0 0 9px 9px !important;
    }
}


/* ========================================================================
   r1217 — Vast profielvenster: boven rond, onder vlak + vaste 500px hoogte.
   Compact/Vast op profiel: geen inklapbare/verkleinende taakbalk meer.
   ======================================================================== */
@media (min-width:1025px) {
    /* In Vast opent het venster omhoog vanaf de onderste header. De zijde die
       tegen de header aansluit is daarom vlak; alleen de vrije bovenzijde is rond. */
    html.site-layout-fixed #header #tabs .header-profile-start-panel {
        height:500px !important;
        min-height:500px !important;
        max-height:500px !important;
        overflow:hidden !important;
        border-radius:12px 12px 0 0 !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
    }

    html.site-layout-fixed #header #tabs .header-profile-start-panel::-webkit-scrollbar {
        display:none !important;
        width:0 !important;
        height:0 !important;
    }

    html.site-layout-fixed #header #tabs .header-profile-start-links,
    html.site-layout-fixed #header #tabs .header-profile-start-submenus {
        height:500px !important;
        min-height:500px !important;
        max-height:500px !important;
        overflow:hidden !important;
    }

    html.site-layout-fixed #header #tabs .header-profile-start-links {
        border-radius:11px 0 0 0 !important;
    }

    html.site-layout-fixed #header #tabs .header-profile-start-submenus {
        border-radius:0 11px 0 0 !important;
    }

    /* De glansstrook hoort bij de afgeronde vrije bovenkant, niet bij de
       vlakke onderkant die tegen de oranje header aansluit. */
    html.site-layout-fixed #header #tabs .header-profile-start-panel::before {
        inset:0 0 auto 0 !important;
        border-radius:11px 11px 0 0 !important;
    }

    /* Zodra de profieltaakbalk door de layout-JS statisch is gemaakt, mogen
       oude collapse/hover-transities hem niet opnieuw verkleinen. */
    html.site-layout-taskbar-above-header #profile > #taskbar.site-layout-profile-taskbar-static,
    html.site-layout-fixed #profile > #taskbar.site-layout-profile-taskbar-static,
    html.site-layout-taskbar-above-header #profile > #taskbar.site-layout-profile-taskbar-static:hover,
    html.site-layout-taskbar-above-header #profile > #taskbar.site-layout-profile-taskbar-static:focus-within,
    html.site-layout-fixed #profile > #taskbar.site-layout-profile-taskbar-static:hover,
    html.site-layout-fixed #profile > #taskbar.site-layout-profile-taskbar-static:focus-within {
        transition:none !important;
        transform:none !important;
    }
}


/* r1223 — vensterknoppen volgen de bestaande sitecomponenten.
   Footer: pure .button. X: gedeelde rode popup-sluitknop uit popup-chrome. */
.site-layout-window .site-layout-window-close {
    width: 31px !important;
    height: 27px !important;
    min-width: 31px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}
.site-layout-window .site-layout-window-close svg {
    width: 17px !important;
    height: 17px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


/* ========================================================================
   r1224 — knoppen Indeling aanpassen 1:1 zoals Prikbordbericht plaatsen.
   Footer = originele .button; X = status-window-close uit prikbordpopup.
   ======================================================================== */

/* Footerknoppen: dezelfde originele algemene knopkleuren als in de footer
   van Prikbordbericht plaatsen. */
html body .site-layout-window .site-layout-window-footer .button.site-layout-native-button {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 3px 15px !important;
    color: #000 !important;
    background: linear-gradient(to bottom, #f2f2f2 0%, #ebebeb 42%, #dddddd 47%, #cfcfcf 100%) !important;
    border: 1px solid #707070 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-family: var(--base-font) !important;
    font-size: var(--base-font-size) !important;
    font-weight: normal !important;
    line-height: 1.6 !important;
    white-space: nowrap !important;
}
html body .site-layout-window .site-layout-window-footer .button.site-layout-native-button:hover,
html body .site-layout-window .site-layout-window-footer .button.site-layout-native-button:focus,
html body .site-layout-window .site-layout-window-footer .button.site-layout-native-button:focus-visible {
    color: #000 !important;
    background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%) !important;
    border-color: #3c7fb1 !important;
    box-shadow: 0 0 3px #a7d9f5 !important;
    outline: 0 !important;
}
html body .site-layout-window .site-layout-window-footer .button.site-layout-native-button:active {
    color: #000 !important;
    background: linear-gradient(to bottom, #eaf6fd 0%, #d9f0fc 42%, #bee6fd 47%, #bce5fc 58%, #a7d9f5 100%) !important;
    border-color: #3c7fb1 !important;
    box-shadow: inset 0 -1px 6px rgba(0,0,0,.2), inset 0 -.7em #bee6fd, 0 0 3px #a7d9f5 !important;
}

/* Sluitknop: exacte rode stijl van Prikbordbericht plaatsen. */
html body .site-layout-window > .site-layout-window-header > button.site-layout-window-close.status-window-control.status-window-close {
    display: grid !important;
    place-items: center !important;
    width: 35px !important;
    min-width: 35px !important;
    height: 28px !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    border: 1px solid #8f2f29 !important;
    border-radius: 2px !important;
    background-color: #c7473e !important;
    background-image: linear-gradient(180deg, #e16a61 0%, #c7473e 54%, #ad352f 100%) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.28), 0 0 0 1px rgba(104,25,21,.12) !important;
    outline: 0 !important;
    font: 400 16px/1 Tahoma, Arial, sans-serif !important;
    text-shadow: 0 1px rgba(65,12,9,.45) !important;
    cursor: pointer !important;
}
html body .site-layout-window > .site-layout-window-header > button.site-layout-window-close.status-window-control.status-window-close:hover,
html body .site-layout-window > .site-layout-window-header > button.site-layout-window-close.status-window-control.status-window-close:focus,
html body .site-layout-window > .site-layout-window-header > button.site-layout-window-close.status-window-control.status-window-close:focus-visible {
    color: #fff !important;
    border-color: #6f1f1b !important;
    background-color: #a92e28 !important;
    background-image: linear-gradient(180deg, #d85349 0%, #b73730 54%, #92241f 100%) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.22), 0 0 0 2px rgba(255,255,255,.22) !important;
    outline: 0 !important;
}