/*
 * r505 – compacte desktoptaakbalk voor profiel/groepen en een werkbare
 * mobiele navigatie voor alle paginalay-outs.
 */

#toggle.mobile-site-nav,
.mobile-panel-backdrop {
    display: none;
}

/* Profiel- en groepspagina's houden op desktop een vaste, smalle navigatiekolom.
   De taakbalk zelf opent boven de inhoud, zodat de pagina niet verspringt. */
@media (min-width: 1025px) {
    #profile {
        width: calc(100% - 40px) !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        grid-template-columns: 76px minmax(0, 1fr) !important;
    }

    #container.groups-profile {
        grid-template-columns: 76px minmax(0, 1fr) !important;
    }

    #profile > #taskbar.profile-taskbar-collapsible,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible {
        width: 76px !important;
        padding: 12px 8px !important;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
        overscroll-behavior: contain;
        z-index: 920;
        transition: width .24s ease, padding .24s ease, box-shadow .24s ease;
    }

    #profile > #taskbar.profile-taskbar-collapsible::-webkit-scrollbar,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    #profile > #taskbar.profile-taskbar-collapsible:hover,
    #profile > #taskbar.profile-taskbar-collapsible:focus-within,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:hover,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:focus-within {
        width: 220px !important;
        padding: 20px !important;
        box-shadow: 0 16px 34px rgba(27, 53, 90, .26);
    }

    #profile > #taskbar.profile-taskbar-collapsible #logo,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #logo {
        width: 52px;
        height: 72px;
        min-height: 72px;
        margin: 0 auto 4px;
        overflow: hidden;
        transition: width .24s ease, height .24s ease, min-height .24s ease;
    }

    #profile > #taskbar.profile-taskbar-collapsible #logo-smileys,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #logo-smileys {
        width: 52px;
        height: auto;
        top: 11px;
        left: 0;
        transform: none;
        object-fit: contain;
        transition: width .24s ease, top .24s ease, left .24s ease, transform .24s ease;
    }

    #profile > #taskbar.profile-taskbar-collapsible #logo-wrapper,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #logo-wrapper {
        width: 52px;
        height: auto;
        left: 0;
        transform: none;
        opacity: 0;
        transition: width .24s ease, left .24s ease, transform .24s ease, opacity .16s ease;
    }

    #profile > #taskbar.profile-taskbar-collapsible:hover #logo,
    #profile > #taskbar.profile-taskbar-collapsible:focus-within #logo,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:hover #logo,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:focus-within #logo {
        width: 180px;
        height: 140px;
        min-height: 140px;
    }

    #profile > #taskbar.profile-taskbar-collapsible:hover #logo-smileys,
    #profile > #taskbar.profile-taskbar-collapsible:focus-within #logo-smileys,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:hover #logo-smileys,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:focus-within #logo-smileys {
        width: 160px;
        top: 19px;
        left: 50%;
        transform: translateX(-50%);
    }

    #profile > #taskbar.profile-taskbar-collapsible:hover #logo-wrapper,
    #profile > #taskbar.profile-taskbar-collapsible:focus-within #logo-wrapper,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:hover #logo-wrapper,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:focus-within #logo-wrapper {
        width: 160px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 1;
    }

    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav {
        width: 100%;
        min-width: 0;
    }

    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a {
        position: relative;
        width: 52px;
        min-height: 44px;
        margin: 8px auto 0 !important;
        padding: 10px 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        box-sizing: border-box;
        color: #fff !important;
        white-space: nowrap;
        transform: none !important;
        transition: width .24s ease, padding .24s ease, gap .24s ease, background-color .18s ease;
    }

    #profile > #taskbar.profile-taskbar-collapsible:hover #taskbar-nav a,
    #profile > #taskbar.profile-taskbar-collapsible:focus-within #taskbar-nav a,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:hover #taskbar-nav a,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:focus-within #taskbar-nav a {
        width: 100%;
        padding: 8px 10px !important;
        justify-content: flex-start;
        gap: 10px;
    }

    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a:hover,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a:hover {
        width: calc(100% - 4px);
        color: #fff !important;
        background: transparent;
        transform: translateX(4px) !important;
    }

    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a.active:hover,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a.active:hover {
        background: #0B4793;
    }

    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav .taskbar-icon-wrap,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav .taskbar-icon-wrap {
        width: 24px;
        min-width: 24px;
        margin: 0;
        float: none;
    }

    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav .taskbar-icon,
    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav .taskbar-icon svg,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav .taskbar-icon,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav .taskbar-icon svg {
        width: 24px;
        height: 24px;
    }

    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a > span:not(.taskbar-icon-wrap),
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a > span:not(.taskbar-icon-wrap) {
        max-width: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-6px);
        transition: max-width .24s ease, opacity .15s ease, transform .24s ease, visibility .24s ease;
    }

    #profile > #taskbar.profile-taskbar-collapsible:hover #taskbar-nav a > span:not(.taskbar-icon-wrap),
    #profile > #taskbar.profile-taskbar-collapsible:focus-within #taskbar-nav a > span:not(.taskbar-icon-wrap),
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:hover #taskbar-nav a > span:not(.taskbar-icon-wrap),
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:focus-within #taskbar-nav a > span:not(.taskbar-icon-wrap) {
        max-width: 145px;
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}

/* Mobiel en tablet: compacte bovenbalk met afzonderlijke, toegankelijke panelen. */
@media (max-width: 1024px) {
    :root {
        --mobile-site-nav-height: 74px;
    }

    html {
        scroll-padding-top: calc(var(--mobile-site-nav-height) + 12px);
    }

    body {
        padding-top: calc(var(--mobile-site-nav-height) + 10px) !important;
    }

    body.mobile-panel-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.mobile-panel-open #snoeten-conversation-dock {
        visibility: hidden;
        pointer-events: none;
    }

    #toggle.mobile-site-nav {
        width: 100%;
        height: var(--mobile-site-nav-height);
        padding: 7px max(10px, env(safe-area-inset-right)) 7px max(10px, env(safe-area-inset-left));
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1100;
        box-sizing: border-box;
        background: rgba(255, 255, 255, .97);
        border: 0;
        border-bottom: 1px solid rgba(45, 63, 37, .12);
        box-shadow: 0 6px 20px rgba(31, 45, 25, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .mobile-site-nav-home {
        min-width: 0;
        min-height: 54px;
        padding: 5px 8px 5px 5px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 1 auto;
        color: #32482A;
        text-decoration: none;
        border-radius: 12px;
    }

    .mobile-site-nav-home:focus-visible,
    #toggle .mobile-site-nav-button:focus-visible {
        outline: 3px solid rgba(85, 122, 62, .28);
        outline-offset: 1px;
    }

    .mobile-site-nav-mark {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 38px;
        color: #FFFFFF;
        background: linear-gradient(145deg, #6B9453, #4E733A);
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(72, 107, 53, .22);
    }

    .mobile-site-nav-mark svg {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-site-nav-name {
        overflow: hidden;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -.02em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .mobile-site-nav-actions {
        display: grid;
        grid-template-columns: repeat(var(--mobile-nav-actions, 3), minmax(58px, 72px));
        justify-content: end;
        gap: 4px;
        flex: 0 0 auto;
    }

    #toggle .mobile-site-nav-button {
        width: 100%;
        min-width: 0;
        height: 58px;
        margin: 0;
        padding: 5px 4px 4px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        box-sizing: border-box;
        color: #566052;
        background: transparent;
        border: 0;
        border-radius: 12px;
        box-shadow: none;
        float: none;
        font: inherit;
        font-size: 11px;
        font-weight: 750;
        line-height: 1;
        text-shadow: none;
        cursor: pointer;
        transition: color .18s ease, background-color .18s ease, transform .18s ease;
    }

    #toggle .mobile-site-nav-button[hidden] {
        display: none !important;
    }

    #toggle .mobile-site-nav-button:hover,
    #toggle .mobile-site-nav-button:active,
    #toggle .mobile-site-nav-button.is-active {
        color: #456B33;
        background: #EEF5EA;
        border: 0;
        box-shadow: none;
    }

    #toggle .mobile-site-nav-button:active {
        transform: translateY(1px);
    }

    #toggle .mobile-site-nav-button svg {
        width: 23px;
        height: 23px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
    }

    #toggle .mobile-site-nav-button span {
        display: block;
        pointer-events: none;
    }

    .mobile-panel-backdrop {
        position: fixed;
        top: var(--mobile-site-nav-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 950;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        display: block;
        background: rgba(27, 34, 25, .42);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .mobile-panel-backdrop[hidden] {
        display: none !important;
    }

    #taskbar[data-mobile-panel],
    #header[data-mobile-panel],
    #sidebar[data-mobile-panel] {
        position: fixed !important;
        top: var(--mobile-site-nav-height) !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        border-radius: 0 !important;
        z-index: 1000 !important;
        transition: transform .25s ease, opacity .2s ease, visibility .25s ease !important;
    }

    #taskbar[data-mobile-panel] {
        right: auto !important;
        left: 0 !important;
        width: min(90vw, 390px) !important;
        padding: 20px 18px 32px !important;
        transform: translateX(-104%);
    }

    #header[data-mobile-panel],
    #sidebar[data-mobile-panel] {
        right: 0 !important;
        left: auto !important;
        width: min(90vw, 430px) !important;
        transform: translateX(104%);
    }

    #header[data-mobile-panel] {
        padding: 22px 18px 32px !important;
        background: var(--color-surface-header, #F19620);
    }

    #sidebar[data-mobile-panel] {
        padding: 22px 18px 32px !important;
        background: var(--color-surface-sidebar, #FFFFFF);
    }

    #taskbar[data-mobile-panel].open,
    #header[data-mobile-panel].open,
    #sidebar[data-mobile-panel].open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #taskbar[data-mobile-panel] #logo {
        width: 180px;
        height: 130px;
        margin: 0 auto 4px;
        display: block;
    }

    #taskbar[data-mobile-panel] #taskbar-nav {
        width: 100%;
        display: grid;
        gap: 7px;
    }

    #taskbar[data-mobile-panel] #taskbar-nav a {
        min-height: 48px;
        margin: 0;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 11px;
        box-sizing: border-box;
        color: #FFFFFF;
        border-radius: 9px;
        transform: none;
    }

    #taskbar[data-mobile-panel] #taskbar-nav a:hover,
    #taskbar[data-mobile-panel] #taskbar-nav a:focus-visible {
        background: rgba(255, 255, 255, .14);
        transform: none;
    }

    #taskbar[data-mobile-panel] #taskbar-nav a.active {
        background: #0B4793;
    }

    #taskbar[data-mobile-panel] #taskbar-nav .taskbar-icon-wrap {
        width: 24px;
        min-width: 24px;
        margin: 0;
        float: none;
    }

    #taskbar[data-mobile-panel] #taskbar-nav .taskbar-icon,
    #taskbar[data-mobile-panel] #taskbar-nav .taskbar-icon svg {
        width: 24px;
        height: 24px;
    }

    #taskbar[data-mobile-panel] #taskbar-nav .spread {
        height: 4px;
    }

    #header[data-mobile-panel] #tabs {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        margin: 0 !important;
        display: grid !important;
        gap: 9px;
        font-size: 16px !important;
    }

    #header[data-mobile-panel] #tabs a {
        width: 100%;
        min-height: 52px;
        height: auto !important;
        margin: 0 !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        color: #442804;
        background: rgba(255, 255, 255, .18);
        border: 1px solid rgba(92, 51, 7, .08);
        border-radius: 10px;
        line-height: 1.25 !important;
        text-align: left !important;
        transform: none !important;
    }

    #header[data-mobile-panel] #tabs a:hover,
    #header[data-mobile-panel] #tabs a:focus-visible {
        top: auto;
        color: #442804;
        background: rgba(255, 255, 255, .28);
        transform: none !important;
    }

    #header[data-mobile-panel] #tabs a.active,
    #header[data-mobile-panel] #tabs a.active:hover,
    #header[data-mobile-panel] #tabs a.active:focus-visible {
        top: auto;
        color: #FFFFFF;
        background: linear-gradient(180deg, #D98213 0%, #B96008 52%, #914603 100%);
        border-color: rgba(102, 46, 0, .46);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 5px rgba(91,43,2,.16);
        text-shadow: 0 1px 1px rgba(71, 32, 0, .56);
        transform: none !important;
    }

    #header[data-mobile-panel] #tabs .tab-count {
        position: static !important;
        min-width: 24px !important;
        height: 24px !important;
        margin-left: auto;
        padding: 0 7px !important;
        border: 2px solid rgba(255,255,255,.95);
        border-radius: 999px;
        line-height: 20px !important;
        transform: none;
    }

    #sidebar[data-mobile-panel] > :first-child {
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .mobile-site-nav-name {
        display: none;
    }

    .mobile-site-nav-home {
        padding-right: 3px;
    }

    .mobile-site-nav-actions {
        grid-template-columns: repeat(var(--mobile-nav-actions, 3), minmax(55px, 63px));
    }

    #toggle .mobile-site-nav-button {
        font-size: 10.5px;
    }

    #taskbar[data-mobile-panel],
    #header[data-mobile-panel],
    #sidebar[data-mobile-panel] {
        width: min(94vw, 430px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #taskbar.profile-taskbar-collapsible,
    #taskbar.profile-taskbar-collapsible *,
    #taskbar[data-mobile-panel],
    #header[data-mobile-panel],
    #sidebar[data-mobile-panel] {
        transition-duration: .01ms !important;
    }
}

/* R516: compacte en mobiele taakbalk volgen de nieuwe blauwe afwerking. */
@media (min-width: 1025px) {
    #profile > #taskbar.profile-taskbar-collapsible,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible {
        background:
            radial-gradient(circle at 50% 48px, rgba(181, 215, 255, .24), rgba(59, 112, 184, .08) 38%, transparent 67%),
            linear-gradient(180deg, #3974C7 0%, #2C65B8 46%, #22549F 100%);
        border: 1px solid rgba(17, 61, 126, .56);
        border-radius: 12px;
        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);
    }

    #profile > #taskbar.profile-taskbar-collapsible:hover,
    #profile > #taskbar.profile-taskbar-collapsible:focus-within,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:hover,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:focus-within {
        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 16px 34px rgba(18,48,94,.28);
    }

    #profile > #taskbar.profile-taskbar-collapsible #logo,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #logo {
        overflow: visible;
    }

    #profile > #taskbar.profile-taskbar-collapsible #logo::before,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #logo::before {
        width: 64px;
        height: 64px;
        top: 43%;
    }

    #profile > #taskbar.profile-taskbar-collapsible #logo::after,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #logo::after {
        width: 55px;
        height: 55px;
        top: 43%;
    }

    #profile > #taskbar.profile-taskbar-collapsible:hover #logo::before,
    #profile > #taskbar.profile-taskbar-collapsible:focus-within #logo::before,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:hover #logo::before,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:focus-within #logo::before {
        width: 166px;
        height: 166px;
        top: 49%;
    }

    #profile > #taskbar.profile-taskbar-collapsible:hover #logo::after,
    #profile > #taskbar.profile-taskbar-collapsible:focus-within #logo::after,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:hover #logo::after,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:focus-within #logo::after {
        width: 142px;
        height: 142px;
        top: 49%;
    }

    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a:hover,
    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a:focus-visible,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a:hover,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a:focus-visible {
        width: calc(100% - 4px);
        color: #FFFFFF !important;
        background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.08));
        border-color: rgba(211,231,255,.18);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
        transform: translateX(2px) !important;
    }

    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a.active,
    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a.active:hover,
    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a.active:focus-visible,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a.active,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a.active:hover,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a.active:focus-visible {
        width: 52px;
        background: linear-gradient(180deg, #1F5EAD 0%, #144E98 52%, #0B4085 100%);
        border-color: rgba(5,46,105,.76);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 8px rgba(8,41,91,.24);
        transform: none !important;
    }

    #profile > #taskbar.profile-taskbar-collapsible:hover #taskbar-nav a.active,
    #profile > #taskbar.profile-taskbar-collapsible:focus-within #taskbar-nav a.active,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:hover #taskbar-nav a.active,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:focus-within #taskbar-nav a.active {
        width: 100%;
    }

    #profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a .tab-count,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible #taskbar-nav a .tab-count {
        top: 2px;
        right: -3px;
        transform: none;
    }

    #profile > #taskbar.profile-taskbar-collapsible:hover #taskbar-nav a .tab-count,
    #profile > #taskbar.profile-taskbar-collapsible:focus-within #taskbar-nav a .tab-count,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:hover #taskbar-nav a .tab-count,
    #container.groups-profile > #taskbar.profile-taskbar-collapsible:focus-within #taskbar-nav a .tab-count {
        top: 50%;
        right: 7px;
        transform: translateY(-50%);
    }
}

@media (max-width: 1024px) {
    #taskbar[data-mobile-panel] {
        background:
            radial-gradient(circle at 50% 74px, rgba(184,216,255,.26) 0, rgba(82,137,208,.12) 34%, transparent 61%),
            linear-gradient(180deg, #3974C7 0%, #2C65B8 46%, #22549F 100%) !important;
        scrollbar-width: thin;
        scrollbar-color: #C8CDD4 rgba(15, 53, 108, .28);
        box-shadow: inset -1px 0 0 rgba(8,44,99,.25), 12px 0 32px rgba(15,39,77,.24);
    }

    #taskbar[data-mobile-panel]::-webkit-scrollbar {
        width: 10px;
    }

    #taskbar[data-mobile-panel]::-webkit-scrollbar-track {
        background: rgba(15, 53, 108, .28);
    }

    #taskbar[data-mobile-panel]::-webkit-scrollbar-thumb {
        background: #C8CDD4;
        border: 3px solid transparent;
        border-radius: 999px;
        background-clip: padding-box;
    }

    #taskbar[data-mobile-panel] #logo::before {
        width: 164px;
        height: 164px;
    }

    #taskbar[data-mobile-panel] #logo::after {
        width: 140px;
        height: 140px;
    }

    #taskbar[data-mobile-panel] #taskbar-nav a {
        border: 1px solid transparent;
        border-radius: 10px;
        font-weight: 700;
        text-shadow: 0 1px 1px rgba(5,37,84,.44);
    }

    #taskbar[data-mobile-panel] #taskbar-nav a:hover,
    #taskbar[data-mobile-panel] #taskbar-nav a:focus-visible {
        background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.08));
        border-color: rgba(211,231,255,.18);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    }

    #taskbar[data-mobile-panel] #taskbar-nav a.active,
    #taskbar[data-mobile-panel] #taskbar-nav a.active:hover,
    #taskbar[data-mobile-panel] #taskbar-nav a.active:focus-visible {
        background: linear-gradient(180deg, #1F5EAD 0%, #144E98 52%, #0B4085 100%);
        border-color: rgba(5,46,105,.76);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 8px rgba(8,41,91,.24);
    }

    #taskbar[data-mobile-panel] #taskbar-nav a .tab-count {
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }
}


/* ========================================================================
   r1124 — Snoeten mobiele/tablet layout
   Inspiratie: compacte community-app opbouw, maar volledig in Snoeten-stijl.
   Desktop (>1024px) blijft ongewijzigd.
   ======================================================================== */

@media (max-width: 1024px) {
    :root {
        --snoeten-mobile-masthead: 70px;
        --snoeten-mobile-tabs: 56px;
        --snoeten-mobile-top: calc(var(--snoeten-mobile-masthead) + var(--snoeten-mobile-tabs));
        --snoeten-mobile-bottom: 76px;
        --snoeten-mobile-blue: #285EBC;
        --snoeten-mobile-blue-dark: #1F4FAE;
        --snoeten-mobile-orange: #F79A16;
        --snoeten-mobile-ink: #253044;
        --snoeten-mobile-soft: #F4F7FB;
        --snoeten-mobile-border: rgba(75,114,170,.18);
    }

    html {
        scroll-padding-top: calc(var(--snoeten-mobile-top) + 14px) !important;
    }

    body {
        padding-top: calc(var(--snoeten-mobile-top) + 12px) !important;
        padding-bottom: calc(var(--snoeten-mobile-bottom) + 24px) !important;
        background-color: #F5F6F8 !important;
    }

    /* --------------------------- bovenste appbalk ---------------------- */
    #toggle.mobile-site-nav {
        width: 100% !important;
        height: var(--snoeten-mobile-top) !important;
        min-height: var(--snoeten-mobile-top) !important;
        padding: 0 !important;
        display: block !important;
        position: fixed !important;
        inset: 0 0 auto 0 !important;
        z-index: 1200 !important;
        overflow: visible !important;
        background: #fff !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(34,66,112,.16) !important;
        border-radius: 0 !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.96),
            0 5px 18px rgba(31,79,174,.13) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .mobile-snoeten-masthead {
        height: var(--snoeten-mobile-masthead);
        padding: 9px max(12px, env(safe-area-inset-right)) 9px max(12px, env(safe-area-inset-left));
        display: grid;
        grid-template-columns: minmax(112px, auto) minmax(120px, 1fr) auto;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        background:
            linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,255,.98));
    }

    .mobile-snoeten-brand {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #1F4FAE !important;
        text-decoration: none !important;
    }

    .mobile-snoeten-brand img {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        object-fit: contain;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,.10));
    }

    .mobile-snoeten-brand span {
        overflow: hidden;
        color: #F19620;
        font-size: 19px;
        font-weight: 800;
        letter-spacing: -.04em;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-shadow: 0 1px 0 #fff;
    }

    .mobile-snoeten-search {
        min-width: 0;
        height: 44px;
        margin: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        overflow: hidden;
        border: 1px solid rgba(75,114,170,.28);
        border-radius: 14px;
        background: #fff;
        box-shadow:
            inset 0 1px 2px rgba(31,79,174,.05),
            0 3px 9px rgba(31,79,174,.08);
    }

    .mobile-snoeten-search input {
        min-width: 0;
        width: 100%;
        height: 42px;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0;
        background: transparent !important;
        box-shadow: none !important;
        color: #38465A;
        font: inherit;
        font-size: 15px;
    }

    .mobile-snoeten-search input::placeholder {
        color: #939CAB;
    }

    .mobile-snoeten-search button {
        width: 44px;
        height: 44px;
        margin: -1px -1px -1px 0 !important;
        padding: 0 !important;
        display: grid;
        place-items: center;
        border: 0 !important;
        border-radius: 0 14px 14px 0 !important;
        background: linear-gradient(180deg, #F9A62B 0%, #F79A16 55%, #ED9010 100%) !important;
        color: #fff !important;
        box-shadow: inset 0 1px rgba(255,255,255,.35) !important;
        cursor: pointer;
    }

    .mobile-snoeten-search svg,
    .mobile-snoeten-account svg,
    .mobile-snoeten-tabs svg,
    .mobile-bottom-nav svg {
        width: 23px;
        height: 23px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-snoeten-account {
        min-width: 50px;
        height: 46px;
        margin: 0 !important;
        padding: 4px 7px !important;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 0 !important;
        border-radius: 11px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #285EBC !important;
        font: inherit;
        font-size: 10px;
        font-weight: 700;
        cursor: pointer;
    }

    .mobile-snoeten-account:hover,
    .mobile-snoeten-account.is-active {
        background: #EEF4FF !important;
        color: #1F4FAE !important;
    }

    /* Tweede regel zoals de brede categorie-navigatie uit het voorbeeld. */
    .mobile-snoeten-tabs {
        height: var(--snoeten-mobile-tabs);
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        background: linear-gradient(180deg, #2F68CC 0%, #285EBC 45%, #1F4FAE 100%);
        border-top: 1px solid rgba(255,255,255,.18);
        box-shadow: inset 0 1px rgba(255,255,255,.20);
    }

    .mobile-snoeten-tabs a,
    .mobile-snoeten-tabs button {
        min-width: 0;
        height: 56px;
        margin: 0 !important;
        padding: 0 8px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0 !important;
        border-right: 1px solid rgba(255,255,255,.14) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #fff !important;
        font: inherit;
        font-size: 14px;
        font-weight: 800;
        text-decoration: none !important;
        text-shadow: 0 1px 1px rgba(13,48,108,.38);
        cursor: pointer;
    }

    .mobile-snoeten-tabs > :last-child {
        border-right: 0 !important;
    }

    .mobile-snoeten-tabs a:hover,
    .mobile-snoeten-tabs button:hover,
    .mobile-snoeten-tabs a:focus-visible,
    .mobile-snoeten-tabs button:focus-visible,
    .mobile-snoeten-tabs .is-active {
        background: rgba(255,255,255,.10) !important;
    }

    /* --------------------------- hoofdinhoud --------------------------- */
    #container,
    #profile,
    #container.groups-profile,
    #container.site-shell-r420,
    #profile.site-shell-r420 {
        width: calc(100% - 24px) !important;
        max-width: 960px !important;
        min-width: 0 !important;
        margin: 0 auto 22px !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "main"
            "sidebar"
            "footer" !important;
        gap: 16px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #main {
        grid-area: main !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #main > #content,
    #content,
    #content-inner,
    .content-inner {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* De rechterkolom wordt op mobiel onderdeel van de normale stroom,
       zoals de blokken onder elkaar in het voorbeeld. */
    #sidebar:not([data-mobile-panel]),
    #content-sidebar,
    .directory-sidebar,
    .welcome-community-column-side {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* De sitebrede platen krijgen app-achtige kaarten. */
    #main article,
    #main .welcome-panel,
    #main .directory-panel,
    #main .directory-sidebar-panel,
    #main .messages-panel,
    #main .messages-side-panel,
    #main .notifications-panel,
    #main .statistics-panel,
    #main .statistics-card,
    #main .games-panel,
    #main .site-page-panel,
    #content-sidebar > section,
    #sidebar:not([data-mobile-panel]) > section {
        border-color: var(--snoeten-mobile-border) !important;
        border-radius: 13px !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.96),
            0 1px 2px rgba(47,104,204,.06),
            0 8px 22px rgba(47,104,204,.09) !important;
    }

    /* Meer lucht en iets grotere touch targets. */
    #main a,
    #main button,
    #sidebar a,
    #sidebar button {
        -webkit-tap-highlight-color: transparent;
    }

    #main input,
    #main select,
    #main textarea,
    #sidebar input,
    #sidebar select,
    #sidebar textarea {
        min-height: 42px;
        font-size: 16px !important; /* voorkomt browserzoom op iOS */
    }

    /* Welkom: op telefoon alle communitykolommen onder elkaar. */
    .welcome-community-columns,
    .welcome-page-layout,
    .search-page-layout,
    .directory-page-layout,
    .messages-layout,
    .notifications-layout,
    .statistics-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    /* --------------------------- schuifpanelen ------------------------- */
    .mobile-panel-backdrop {
        top: var(--snoeten-mobile-top) !important;
        bottom: var(--snoeten-mobile-bottom) !important;
        background: rgba(18,31,54,.45) !important;
    }

    #taskbar[data-mobile-panel],
    #header[data-mobile-panel] {
        top: var(--snoeten-mobile-top) !important;
        bottom: var(--snoeten-mobile-bottom) !important;
        max-height: none !important;
        border-radius: 0 !important;
    }

    #taskbar[data-mobile-panel] {
        width: min(86vw, 360px) !important;
        padding: 18px 16px 28px !important;
        background: linear-gradient(180deg, #2F68CC 0%, #285EBC 45%, #1F4FAE 100%) !important;
        box-shadow: 10px 0 28px rgba(23,54,112,.25) !important;
    }

    #header[data-mobile-panel] {
        width: min(88vw, 390px) !important;
        padding: 18px 14px 28px !important;
        background: linear-gradient(180deg, #F9A62B 0%, #F79A16 55%, #ED9010 100%) !important;
        box-shadow: -10px 0 28px rgba(112,58,4,.22) !important;
    }

    /* Sidebar is geen schuifpaneel meer: hij hoort gewoon onder de content. */
    #sidebar[data-mobile-panel] {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        background: transparent !important;
        z-index: auto !important;
    }

    /* --------------------------- vaste onderbalk ----------------------- */
    .mobile-bottom-nav {
        height: calc(var(--snoeten-mobile-bottom) + env(safe-area-inset-bottom));
        padding: 6px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1180;
        box-sizing: border-box;
        background: linear-gradient(180deg, #2F68CC 0%, #285EBC 45%, #1F4FAE 100%);
        border-top: 1px solid rgba(255,255,255,.24);
        box-shadow:
            inset 0 1px rgba(255,255,255,.20),
            0 -6px 20px rgba(31,79,174,.18);
    }

    .mobile-bottom-nav a {
        min-width: 0;
        padding: 5px 2px 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        position: relative;
        color: rgba(255,255,255,.84) !important;
        border-radius: 10px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none !important;
    }

    .mobile-bottom-nav a::before {
        content: "";
        width: 26px;
        height: 3px;
        position: absolute;
        top: -6px;
        left: 50%;
        border-radius: 0 0 5px 5px;
        background: transparent;
        transform: translateX(-50%);
    }

    .mobile-bottom-nav a.is-active,
    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav a:focus-visible {
        color: #fff !important;
        background: rgba(255,255,255,.10);
    }

    .mobile-bottom-nav a.is-active::before {
        background: #F9A62B;
        box-shadow: 0 1px 4px rgba(249,166,43,.45);
    }

    .mobile-bottom-nav a.is-active svg {
        color: #FFD28A;
    }

    /* Chatdock niet achter de onderbalk laten verdwijnen. */
    #snoeten-conversation-dock {
        bottom: calc(var(--snoeten-mobile-bottom) + env(safe-area-inset-bottom)) !important;
        right: 8px !important;
        width: min(380px, calc(100vw - 16px)) !important;
    }

    /* Footer genoeg ruimte boven de vaste navigatie. */
    #footer,
    footer {
        margin-bottom: 8px;
    }
}

/* Phones: compacter dan tablet, maar dezelfde interface. */
@media (max-width: 600px) {
    :root {
        --snoeten-mobile-masthead: 66px;
        --snoeten-mobile-tabs: 54px;
        --snoeten-mobile-bottom: 72px;
    }

    body {
        padding-top: calc(var(--snoeten-mobile-top) + 10px) !important;
    }

    .mobile-snoeten-masthead {
        padding-left: 8px;
        padding-right: 8px;
        grid-template-columns: auto minmax(110px, 1fr) 46px;
        gap: 6px;
    }

    .mobile-snoeten-brand img {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .mobile-snoeten-brand span {
        display: none;
    }

    .mobile-snoeten-search {
        height: 42px;
        border-radius: 13px;
    }

    .mobile-snoeten-search input {
        height: 40px;
        padding-left: 10px !important;
        font-size: 15px !important;
    }

    .mobile-snoeten-search button {
        width: 42px;
        height: 42px;
    }

    .mobile-snoeten-tabs a,
    .mobile-snoeten-tabs button {
        height: 54px;
        gap: 6px;
        font-size: 13px;
    }

    .mobile-snoeten-tabs svg {
        width: 21px;
        height: 21px;
    }

    #container,
    #profile,
    #container.groups-profile,
    #container.site-shell-r420,
    #profile.site-shell-r420 {
        width: calc(100% - 16px) !important;
        gap: 12px !important;
    }

    .mobile-bottom-nav {
        padding-left: 3px;
        padding-right: 3px;
    }

    .mobile-bottom-nav a {
        font-size: 10px;
    }

    .mobile-bottom-nav svg {
        width: 22px;
        height: 22px;
    }
}

/* Tablet: meer ruimte en inhoud kan bestaande 2-koloms sublayouts behouden. */
@media (min-width: 701px) and (max-width: 1024px) {
    .mobile-snoeten-masthead,
    .mobile-snoeten-tabs {
        padding-left: max(18px, calc((100vw - 960px) / 2));
        padding-right: max(18px, calc((100vw - 960px) / 2));
    }

    .mobile-snoeten-tabs {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    .mobile-bottom-nav {
        padding-left: max(42px, calc((100vw - 760px) / 2));
        padding-right: max(42px, calc((100vw - 760px) / 2));
    }
}

/* Desktop: mobiele navigatie absoluut niet tonen. */
@media (min-width: 1025px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}


/* ========================================================================
   r1125 — navigatie logisch omgewisseld
   BOVEN: links uit de blauwe taakbalk
   ONDER: links uit de oranje header
   ======================================================================== */

@media (max-width:1024px) {
    .mobile-snoeten-tabs {
        display:flex !important;
        grid-template-columns:none !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        scrollbar-width:none !important;
        overscroll-behavior-x:contain !important;
        scroll-snap-type:x proximity !important;
        -webkit-overflow-scrolling:touch !important;
        background:linear-gradient(180deg,#2F68CC 0%,#285EBC 45%,#1F4FAE 100%) !important;
    }

    .mobile-snoeten-tabs::-webkit-scrollbar {
        display:none !important;
    }

    .mobile-snoeten-tabs > a {
        flex:1 0 126px !important;
        min-width:126px !important;
        max-width:180px !important;
        scroll-snap-align:start !important;
    }

    .mobile-snoeten-tabs .taskbar-icon {
        width:23px !important;
        height:23px !important;
        display:inline-grid !important;
        place-items:center !important;
        flex:0 0 23px !important;
    }

    .mobile-snoeten-tabs .taskbar-icon svg {
        width:23px !important;
        height:23px !important;
    }

    .mobile-snoeten-tabs > a.is-active {
        background:rgba(255,255,255,.13) !important;
        box-shadow:inset 0 -3px 0 #F9A62B !important;
    }

    .mobile-bottom-nav {
        grid-template-columns:none !important;
        grid-auto-flow:column !important;
        grid-auto-columns:minmax(0,1fr) !important;
        background:linear-gradient(180deg,#F9A62B 0%,#F79A16 55%,#ED9010 100%) !important;
        border-top:1px solid rgba(164,85,5,.30) !important;
        box-shadow:
            inset 0 1px rgba(255,255,255,.38),
            0 -6px 20px rgba(134,72,6,.18) !important;
    }

    .mobile-bottom-nav a {
        color:rgba(255,255,255,.94) !important;
        text-shadow:0 1px 1px rgba(120,62,0,.34) !important;
    }

    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav a:focus-visible,
    .mobile-bottom-nav a.is-active {
        color:#fff !important;
        background:rgba(255,255,255,.14) !important;
    }

    .mobile-bottom-nav a::before {
        background:transparent !important;
    }

    .mobile-bottom-nav a.is-active::before {
        background:#285EBC !important;
        box-shadow:0 1px 4px rgba(31,79,174,.38) !important;
    }

    .mobile-bottom-nav a.is-active svg {
        color:#fff !important;
    }

    .mobile-nav-badge {
        min-width:16px;
        height:16px;
        padding:0 4px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        position:absolute;
        top:4px;
        left:calc(50% + 8px);
        box-sizing:border-box;
        border:1px solid rgba(255,255,255,.75);
        border-radius:999px;
        background:#E33434;
        color:#fff;
        font:700 9px/14px Arial,sans-serif;
        text-shadow:none;
        box-shadow:0 1px 3px rgba(90,25,20,.25);
    }

    .mobile-nav-badge[hidden] {
        display:none !important;
    }
}

@media (max-width:600px) {
    .mobile-snoeten-tabs > a {
        flex-basis:112px !important;
        min-width:112px !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .mobile-snoeten-tabs > a span:last-child {
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}

@media (min-width:701px) and (max-width:1024px) {
    .mobile-snoeten-tabs {
        padding-left:max(18px,calc((100vw - 960px)/2)) !important;
        padding-right:max(18px,calc((100vw - 960px)/2)) !important;
    }

    .mobile-snoeten-tabs > a {
        flex-basis:142px !important;
        min-width:142px !important;
    }
}


/* ========================================================================
   r1126 — blauwe mobiele taakbalk met overflow-dropdown
   Niet-passende items gaan in "Meer".
   ======================================================================== */
@media (max-width:1024px) {
    .mobile-snoeten-tabs {
        position: relative !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        scrollbar-width: auto !important;
        scroll-snap-type: none !important;
    }

    .mobile-snoeten-tabs-main {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        overflow: hidden;
    }

    .mobile-snoeten-tabs-main > a {
        flex: 1 1 126px !important;
        min-width: 0 !important;
        max-width: 180px !important;
    }

    .mobile-snoeten-tabs-main > a.is-active {
        background: rgba(255,255,255,.13) !important;
        box-shadow: inset 0 -3px 0 #F9A62B !important;
    }

    .mobile-snoeten-tabs-more {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        border: 0 !important;
        border-left: 1px solid rgba(255,255,255,.14) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #fff !important;
        cursor: pointer;
    }

    .mobile-snoeten-tabs-more:hover,
    .mobile-snoeten-tabs-more:focus-visible,
    .mobile-snoeten-tabs-more[aria-expanded="true"] {
        background: rgba(255,255,255,.10) !important;
    }

    .mobile-snoeten-tabs-more svg {
        width: 22px;
        height: 22px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-snoeten-tabs-dropdown {
        min-width: 208px;
        max-width: min(86vw, 320px);
        padding: 6px;
        position: absolute;
        top: calc(100% + 8px);
        right: 8px;
        z-index: 30;
        display: grid;
        gap: 4px;
        border: 1px solid rgba(75,114,170,.20);
        border-radius: 14px;
        background: #fff;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.96),
            0 8px 24px rgba(31,79,174,.16);
    }

    .mobile-snoeten-tabs-dropdown[hidden] {
        display: none !important;
    }

    .mobile-snoeten-tabs-dropdown > a {
        min-height: 44px;
        padding: 10px 12px;
        display: grid;
        grid-template-columns: 22px minmax(0,1fr);
        align-items: center;
        gap: 10px;
        border-radius: 10px;
        background: transparent;
        color: #285EBC !important;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none !important;
    }

    .mobile-snoeten-tabs-dropdown > a:hover,
    .mobile-snoeten-tabs-dropdown > a:focus-visible,
    .mobile-snoeten-tabs-dropdown > a.is-active {
        background: #EEF4FF;
        color: #1F4FAE !important;
    }

    .mobile-snoeten-tabs-dropdown .taskbar-icon {
        width: 22px !important;
        height: 22px !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: none !important;
    }

    .mobile-snoeten-tabs-dropdown .taskbar-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width:600px) {
    .mobile-snoeten-tabs-main > a {
        flex-basis: 112px !important;
        max-width: 154px !important;
    }

    .mobile-snoeten-tabs-more {
        flex-basis: 52px;
        width: 52px;
    }

    .mobile-snoeten-tabs-dropdown {
        right: 6px;
        min-width: 184px;
    }
}

@media (min-width:701px) and (max-width:1024px) {
    .mobile-snoeten-tabs-main > a {
        flex-basis: 142px !important;
        max-width: 196px !important;
    }
}


/* ========================================================================
   r1127 — mobiele blauwe taakbalk rustiger/netter
   - links worden niet meer samengeperst
   - vaste, nette afstand tussen icoon en tekst
   - iconen in een subtiel vakje
   - gevulde Snoeten-iconen worden correct weergegeven
   ======================================================================== */

@media (max-width:1024px) {
    .mobile-snoeten-tabs {
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .mobile-snoeten-tabs-main {
        gap:0 !important;
        padding:0 !important;
    }

    /* Niet meer laten krimpen; wat niet past verhuist naar 'Meer'. */
    .mobile-snoeten-tabs-main > a {
        flex:0 0 auto !important;
        width:auto !important;
        min-width:max-content !important;
        max-width:none !important;
        height:56px !important;
        padding:0 16px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:9px !important;
        border-right:1px solid rgba(255,255,255,.12) !important;
        box-sizing:border-box !important;
        white-space:nowrap !important;
        overflow:visible !important;
        text-overflow:clip !important;
        font-size:14px !important;
        font-weight:700 !important;
        line-height:1 !important;
    }

    .mobile-snoeten-tabs-main > a > span:last-child {
        display:block !important;
        min-width:0 !important;
        overflow:visible !important;
        text-overflow:clip !important;
        white-space:nowrap !important;
    }

    /* Eén consistente iconenhouder. */
    .mobile-snoeten-tabs-main > a .taskbar-icon {
        width:30px !important;
        height:30px !important;
        min-width:30px !important;
        flex:0 0 30px !important;
        display:grid !important;
        place-items:center !important;
        margin:0 !important;
        padding:0 !important;
        border:1px solid rgba(255,255,255,.18) !important;
        border-radius:8px !important;
        background:rgba(255,255,255,.08) !important;
        box-shadow:inset 0 1px rgba(255,255,255,.08) !important;
        color:#fff !important;
        line-height:0 !important;
    }

    /*
     * De taakbalk-iconen zijn gevulde SVG's. Een oudere algemene mobiele
     * regel zette SVG's op fill:none, waardoor sommige iconen vreemd stonden.
     */
    .mobile-snoeten-tabs-main > a .taskbar-icon svg {
        width:18px !important;
        height:18px !important;
        display:block !important;
        fill:currentColor !important;
        stroke:none !important;
        transform:none !important;
    }

    .mobile-snoeten-tabs-main > a.is-active .taskbar-icon {
        background:rgba(255,255,255,.17) !important;
        border-color:rgba(255,255,255,.30) !important;
    }

    /* Meer-knop iets ruimer en in dezelfde stijl. */
    .mobile-snoeten-tabs-more {
        flex:0 0 62px !important;
        width:62px !important;
        min-width:62px !important;
        height:56px !important;
        border-left:1px solid rgba(255,255,255,.16) !important;
    }

    .mobile-snoeten-tabs-more svg {
        width:21px !important;
        height:21px !important;
    }

    /* Dropdown dezelfde visuele taal als de balk. */
    .mobile-snoeten-tabs-dropdown {
        min-width:230px !important;
        padding:8px !important;
        gap:3px !important;
    }

    .mobile-snoeten-tabs-dropdown > a {
        min-height:48px !important;
        padding:8px 12px !important;
        grid-template-columns:32px minmax(0,1fr) !important;
        gap:10px !important;
        border-radius:9px !important;
        font-size:14px !important;
    }

    .mobile-snoeten-tabs-dropdown > a .taskbar-icon {
        width:30px !important;
        height:30px !important;
        min-width:30px !important;
        display:grid !important;
        place-items:center !important;
        border-radius:8px !important;
        background:#EEF4FF !important;
        color:#285EBC !important;
        line-height:0 !important;
    }

    .mobile-snoeten-tabs-dropdown > a .taskbar-icon svg {
        width:18px !important;
        height:18px !important;
        display:block !important;
        fill:currentColor !important;
        stroke:none !important;
    }

    .mobile-snoeten-tabs-dropdown > a > span:last-child {
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }
}

@media (max-width:600px) {
    .mobile-snoeten-tabs-main > a {
        height:54px !important;
        padding:0 13px !important;
        gap:8px !important;
        font-size:13px !important;
    }

    .mobile-snoeten-tabs-main > a .taskbar-icon {
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
        flex-basis:28px !important;
    }

    .mobile-snoeten-tabs-main > a .taskbar-icon svg {
        width:17px !important;
        height:17px !important;
    }

    .mobile-snoeten-tabs-more {
        flex-basis:56px !important;
        width:56px !important;
        min-width:56px !important;
        height:54px !important;
    }

    .mobile-snoeten-tabs-dropdown {
        min-width:210px !important;
        right:6px !important;
    }
}


/* ========================================================================
   r1128 — iconen uit de blauwe mobiele balk verwijderen
   Dropdown behoudt de iconen.
   ======================================================================== */
@media (max-width:1024px) {
    .mobile-snoeten-tabs-main > a {
        gap: 0 !important;
        justify-content: center !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .mobile-snoeten-tabs-main > a .taskbar-icon {
        display: none !important;
    }

    .mobile-snoeten-tabs-main > a > span:last-child {
        display: block !important;
        text-align: center !important;
    }
}

@media (max-width:600px) {
    .mobile-snoeten-tabs-main > a {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
}


/* ========================================================================
   r1129 — mobiele layout simpeler
   - logo + zoekbalk + account-icoon uit de bovenbalk verwijderd
   - account-knop verhuisd naar de oranje onderbalk
   - "Meer"-knop blijft verborgen als er geen overflow-items zijn
   ======================================================================== */

@media (max-width:1024px) {
    :root {
        --snoeten-mobile-masthead: 0px !important;
        --snoeten-mobile-top: var(--snoeten-mobile-tabs) !important;
    }

    html {
        scroll-padding-top: calc(var(--snoeten-mobile-tabs) + 12px) !important;
    }

    body {
        padding-top: calc(var(--snoeten-mobile-tabs) + 10px) !important;
    }

    #toggle.mobile-site-nav {
        height: var(--snoeten-mobile-tabs) !important;
        min-height: var(--snoeten-mobile-tabs) !important;
    }

    .mobile-snoeten-masthead {
        display: none !important;
    }

    .mobile-panel-backdrop {
        top: var(--snoeten-mobile-tabs) !important;
    }

    #taskbar[data-mobile-panel],
    #header[data-mobile-panel] {
        top: var(--snoeten-mobile-tabs) !important;
    }

    .mobile-bottom-nav {
        grid-auto-columns: minmax(72px, 1fr) !important;
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button.mobile-bottom-account {
        min-width: 0;
        padding: 5px 2px 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        position: relative;
        border: 0 !important;
        border-radius: 10px;
        background: transparent !important;
        color: rgba(255,255,255,.94) !important;
        font: inherit;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none !important;
        text-shadow: 0 1px 1px rgba(120,62,0,.34) !important;
        box-shadow: none !important;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .mobile-bottom-nav button.mobile-bottom-account:hover,
    .mobile-bottom-nav button.mobile-bottom-account:focus-visible,
    .mobile-bottom-nav button.mobile-bottom-account[aria-expanded="true"] {
        color: #fff !important;
        background: rgba(255,255,255,.14) !important;
        outline: none;
    }

    .mobile-bottom-nav button.mobile-bottom-account::before {
        content: "";
        width: 26px;
        height: 3px;
        position: absolute;
        top: -6px;
        left: 50%;
        border-radius: 0 0 5px 5px;
        background: transparent;
        transform: translateX(-50%);
    }

    .mobile-bottom-nav button.mobile-bottom-account[aria-expanded="true"]::before {
        background: #285EBC !important;
        box-shadow: 0 1px 4px rgba(31,79,174,.38) !important;
    }

    .mobile-bottom-nav button.mobile-bottom-account svg {
        width: 22px;
        height: 22px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-label::after {
        content: "";
        width: 7px;
        height: 7px;
        margin-top: -2px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        opacity: .92;
    }

    .mobile-bottom-nav button.mobile-bottom-account[aria-expanded="true"] .mobile-account-label::after {
        margin-top: 2px;
        transform: rotate(-135deg);
    }
}

@media (max-width:600px) {
    body {
        padding-top: calc(var(--snoeten-mobile-tabs) + 8px) !important;
    }

    #toggle.mobile-site-nav {
        height: 54px !important;
        min-height: 54px !important;
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button.mobile-bottom-account {
        font-size: 10px !important;
    }
}


/* ========================================================================
   r1130 — mobiele balken verfijnd
   - Account in de oranje onderbalk duidelijker
   - geen pijltje meer; wel een tweede account-icoon
   - tekst iets groter
   - 'Meer'-knop in de blauwe balk blijft echt verborgen als niet nodig
   ======================================================================== */

@media (max-width:1024px) {
    /* Veilig: verborgen overflowknop ook echt weg. */
    .mobile-snoeten-tabs-more[hidden] {
        display: none !important;
    }

    /* Account-knop in de oranje onderbalk krachtiger weergeven. */
    .mobile-bottom-nav button.mobile-bottom-account {
        gap: 5px !important;
    }

    .mobile-bottom-nav button.mobile-bottom-account > svg {
        width: 23px !important;
        height: 23px !important;
    }

    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        letter-spacing: .01em !important;
        white-space: nowrap !important;
    }

    /* Oud pijltje weg. */
    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-label::after {
        display: none !important;
        content: none !important;
    }

    /* Tweede account-icoon naast de tekst. */
    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-meta-icon {
        width: 13px !important;
        height: 13px !important;
        display: inline-block !important;
        flex: 0 0 13px !important;
        color: currentColor !important;
    }

    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-meta-icon svg {
        width: 13px !important;
        height: 13px !important;
        display: block !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.9 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }
}

@media (max-width:600px) {
    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-label {
        font-size: 11px !important;
        gap: 5px !important;
    }

    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-meta-icon,
    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-meta-icon svg {
        width: 12px !important;
        height: 12px !important;
    }
}


/* ========================================================================
   r1131 — Account-knop in oranje balk weer gelijk aan de andere linkjes
   ======================================================================== */

@media (max-width:1024px) {
    .mobile-bottom-nav button.mobile-bottom-account {
        gap: 4px !important;
    }

    .mobile-bottom-nav button.mobile-bottom-account > svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-label {
        display: block !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        letter-spacing: normal !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-label::after {
        display: none !important;
        content: none !important;
    }

    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-meta-icon {
        display: none !important;
    }
}

@media (max-width:600px) {
    .mobile-bottom-nav button.mobile-bottom-account .mobile-account-label {
        font-size: inherit !important;
    }
}


/* ========================================================================
   r1132 — oranje mobiele balk echt gelijk trekken
   Account heeft nu exact dezelfde maat, typografie en icoonpositie als
   Prikbord / Berichten / Meldingen / Admin / Profiel.
   ======================================================================== */

@media (max-width:1024px) {
    .mobile-bottom-nav {
        display:flex !important;
        grid-template-columns:none !important;
        grid-auto-flow:initial !important;
        grid-auto-columns:initial !important;
        align-items:stretch !important;
        justify-content:stretch !important;
        overflow:hidden !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item {
        flex:1 1 0 !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        height:100% !important;
        margin:0 !important;
        padding:5px 1px 4px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:4px !important;
        overflow:hidden !important;

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

        color:rgba(255,255,255,.94) !important;
        font-family:var(--base-font, 'Comfortaa', sans-serif) !important;
        font-size:11px !important;
        font-weight:700 !important;
        line-height:1 !important;
        text-align:center !important;
        text-decoration:none !important;
        text-shadow:0 1px 1px rgba(120,62,0,.34) !important;

        appearance:none !important;
        -webkit-appearance:none !important;
        cursor:pointer !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item > svg {
        width:22px !important;
        height:22px !important;
        min-width:22px !important;
        min-height:22px !important;
        margin:0 !important;
        padding:0 !important;
        display:block !important;
        flex:0 0 22px !important;
        fill:none !important;
        stroke:currentColor !important;
        stroke-width:1.9 !important;
        stroke-linecap:round !important;
        stroke-linejoin:round !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item > span:not(.mobile-nav-badge) {
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
        display:block !important;
        overflow:hidden !important;
        color:inherit !important;
        font:inherit !important;
        line-height:1.1 !important;
        text-align:center !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item:hover,
    .mobile-bottom-nav > .mobile-bottom-nav-item:focus-visible,
    .mobile-bottom-nav > .mobile-bottom-nav-item.is-active,
    .mobile-bottom-nav > button.mobile-bottom-nav-item[aria-expanded="true"] {
        color:#fff !important;
        background:rgba(255,255,255,.14) !important;
        outline:0 !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item::before {
        content:"" !important;
        width:26px !important;
        height:3px !important;
        position:absolute !important;
        top:-6px !important;
        left:50% !important;
        border:0 !important;
        border-radius:0 0 5px 5px !important;
        background:transparent !important;
        transform:translateX(-50%) !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item.is-active::before,
    .mobile-bottom-nav > button.mobile-bottom-nav-item[aria-expanded="true"]::before {
        background:#285EBC !important;
        box-shadow:0 1px 4px rgba(31,79,174,.38) !important;
    }

    /* Account mag nergens meer een eigen afwijkende tekstgrootte krijgen. */
    .mobile-bottom-nav > button.mobile-bottom-account,
    .mobile-bottom-nav > button.mobile-bottom-account .mobile-account-label {
        font-size:11px !important;
        font-weight:700 !important;
        line-height:1.1 !important;
    }

    .mobile-bottom-nav > button.mobile-bottom-account .mobile-account-label::after,
    .mobile-bottom-nav > button.mobile-bottom-account .mobile-account-meta-icon {
        display:none !important;
        content:none !important;
    }
}

@media (max-width:600px) {
    .mobile-bottom-nav > .mobile-bottom-nav-item,
    .mobile-bottom-nav > button.mobile-bottom-account,
    .mobile-bottom-nav > button.mobile-bottom-account .mobile-account-label {
        font-size:9.5px !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item > svg {
        width:21px !important;
        height:21px !important;
        min-width:21px !important;
        min-height:21px !important;
        flex-basis:21px !important;
    }
}


/* ========================================================================
   r1133 — ORANJE ONDERBALK CANONIEK
   Grondige fix: ieder item heeft nu dezelfde DOM + dezelfde iconenhouder.
   Oude taskbar/icon-regels kunnen daardoor niet meer per item anders uitpakken.
   ======================================================================== */

@media (max-width:1024px) {
    .mobile-bottom-nav {
        height: calc(var(--snoeten-mobile-bottom) + env(safe-area-inset-bottom)) !important;
        padding: 6px max(4px, env(safe-area-inset-right))
                 env(safe-area-inset-bottom)
                 max(4px, env(safe-area-inset-left)) !important;
        display:flex !important;
        align-items:stretch !important;
        justify-content:stretch !important;
        gap:0 !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item {
        position:relative !important;
        flex:1 1 0 !important;
        width:0 !important;
        min-width:0 !important;
        max-width:none !important;
        height:auto !important;
        min-height:0 !important;

        margin:0 !important;
        padding:5px 2px 4px !important;

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

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

        color:rgba(255,255,255,.94) !important;
        font-family:var(--base-font, 'Comfortaa', sans-serif) !important;
        font-size:11px !important;
        font-weight:700 !important;
        line-height:1 !important;
        text-align:center !important;
        text-decoration:none !important;
        text-shadow:0 1px 1px rgba(120,62,0,.34) !important;

        appearance:none !important;
        -webkit-appearance:none !important;
        cursor:pointer !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    /* Eén vaste iconenhouder voor Prikbord/Berichten/Meldingen/Admin/Profiel/Account. */
    .mobile-bottom-nav > .mobile-bottom-nav-item > .mobile-bottom-icon {
        width:24px !important;
        height:24px !important;
        min-width:24px !important;
        min-height:24px !important;
        flex:0 0 24px !important;

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

        display:grid !important;
        place-items:center !important;

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

        color:inherit !important;
        line-height:0 !important;
        overflow:visible !important;
        position:relative !important;
        transform:none !important;
    }

    /* Neutraliseer alle oude .taskbar-icon eigenschappen binnen de oranje balk. */
    .mobile-bottom-nav .mobile-bottom-icon > .taskbar-icon {
        position:static !important;
        inset:auto !important;
        float:none !important;

        width:22px !important;
        height:22px !important;
        min-width:22px !important;
        min-height:22px !important;

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

        display:grid !important;
        place-items:center !important;

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

        color:inherit !important;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        line-height:0 !important;
    }

    .mobile-bottom-nav .mobile-bottom-icon > .taskbar-icon > svg {
        position:static !important;
        width:22px !important;
        height:22px !important;
        min-width:22px !important;
        min-height:22px !important;

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

        display:block !important;

        fill:currentColor !important;
        stroke:none !important;
        color:inherit !important;

        opacity:1 !important;
        transform:none !important;
        overflow:visible !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item > .mobile-bottom-label {
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

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

        display:block !important;

        color:inherit !important;
        font:inherit !important;
        font-size:inherit !important;
        font-weight:inherit !important;
        line-height:1.1 !important;
        letter-spacing:normal !important;

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

    /* Oude account-specifieke afwijkingen definitief uitschakelen. */
    .mobile-bottom-nav .mobile-account-label,
    .mobile-bottom-nav .mobile-account-meta-icon,
    .mobile-bottom-nav button.mobile-bottom-account > svg {
        display:none !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item:hover,
    .mobile-bottom-nav > .mobile-bottom-nav-item:focus-visible,
    .mobile-bottom-nav > .mobile-bottom-nav-item.is-active,
    .mobile-bottom-nav > button.mobile-bottom-nav-item[aria-expanded="true"] {
        color:#fff !important;
        background:rgba(255,255,255,.14) !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item::before {
        content:"" !important;
        width:26px !important;
        height:3px !important;
        position:absolute !important;
        top:-6px !important;
        left:50% !important;
        margin:0 !important;
        border:0 !important;
        border-radius:0 0 5px 5px !important;
        background:transparent !important;
        transform:translateX(-50%) !important;
        box-shadow:none !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item.is-active::before,
    .mobile-bottom-nav > button.mobile-bottom-nav-item[aria-expanded="true"]::before {
        background:#285EBC !important;
        box-shadow:0 1px 4px rgba(31,79,174,.38) !important;
    }

    /* Teller altijd relatief aan het item, los van de icoonpositie. */
    .mobile-bottom-nav > .mobile-bottom-nav-item > .mobile-nav-badge {
        top:3px !important;
        left:calc(50% + 7px) !important;
        right:auto !important;
        z-index:3 !important;
    }
}

@media (max-width:600px) {
    .mobile-bottom-nav {
        padding-left:2px !important;
        padding-right:2px !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item {
        padding-left:1px !important;
        padding-right:1px !important;
        gap:3px !important;
        font-size:9.5px !important;
    }

    .mobile-bottom-nav > .mobile-bottom-nav-item > .mobile-bottom-icon {
        width:22px !important;
        height:22px !important;
        min-width:22px !important;
        min-height:22px !important;
        flex-basis:22px !important;
    }

    .mobile-bottom-nav .mobile-bottom-icon > .taskbar-icon,
    .mobile-bottom-nav .mobile-bottom-icon > .taskbar-icon > svg {
        width:20px !important;
        height:20px !important;
        min-width:20px !important;
        min-height:20px !important;
    }
}


/* ========================================================================
   r1134 — mobiele oranje balk:
   Prikbord / Berichten / Meldingen / Menu
   Menu opent het bestaande oranje header-hoofdmenu.
   Admin en Profiel staan daardoor in dat hoofdmenu in plaats van in de balk.
   ======================================================================== */

@media (max-width:1024px) {
    .mobile-bottom-nav > button.mobile-bottom-menu {
        position:relative !important;
        flex:1 1 0 !important;
        width:0 !important;
        min-width:0 !important;
        max-width:none !important;
        height:auto !important;
        min-height:0 !important;

        margin:0 !important;
        padding:5px 2px 4px !important;

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

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

        color:rgba(255,255,255,.94) !important;
        font-family:var(--base-font, 'Comfortaa', sans-serif) !important;
        font-size:11px !important;
        font-weight:700 !important;
        line-height:1 !important;
        text-align:center !important;
        text-shadow:0 1px 1px rgba(120,62,0,.34) !important;

        appearance:none !important;
        -webkit-appearance:none !important;
        cursor:pointer !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .mobile-bottom-nav > button.mobile-bottom-menu:hover,
    .mobile-bottom-nav > button.mobile-bottom-menu:focus-visible,
    .mobile-bottom-nav > button.mobile-bottom-menu[aria-expanded="true"] {
        color:#fff !important;
        background:rgba(255,255,255,.14) !important;
    }

    .mobile-bottom-nav > button.mobile-bottom-menu[aria-expanded="true"]::before {
        background:#285EBC !important;
        box-shadow:0 1px 4px rgba(31,79,174,.38) !important;
    }

    /* Het mobiele headerpaneel is nu het hoofdmenu.
       Admin blijft daar zichtbaar wanneer de ingelogde gebruiker admin is. */
    #header[data-mobile-panel] #tabs a[href="/admin.html"],
    #header[data-mobile-panel] #tabs .header-profile-tab-wrap {
        display:flex !important;
    }
}

@media (max-width:600px) {
    .mobile-bottom-nav > button.mobile-bottom-menu {
        padding-left:1px !important;
        padding-right:1px !important;
        gap:3px !important;
        font-size:9.5px !important;
    }
}


/* ========================================================================
   r1135 — "Menu" opent op mobiel/tablet direct het profiel-startscherm
   (Profiel / Gastenboek / Vrienden / Instellingen / Uitloggen + bezoekers).
   ======================================================================== */

@media (max-width:1024px) {
    :root {
        /* header-profile-start gebruikt nog deze oudere variabele */
        --mobile-site-nav-height: var(--snoeten-mobile-tabs, 56px) !important;
    }

    /* Admin hoort op mobiel/tablet in het hoofdmenu van dit scherm. */
    #header #tabs .header-profile-start-links > a.header-profile-start-mobile-admin {
        display:flex !important;
    }

    /*
     * Wanneer het profiel-startscherm openstaat, dient het mobiele
     * headerpaneel alleen nog als drager voor dit scherm.
     * Het profiel-startpaneel zelf blijft volledig interactief.
     */
    body.profile-start-menu-open #header[data-mobile-panel].is-mobile-panel-open {
        background:transparent !important;
        box-shadow:none !important;
    }

    body.profile-start-menu-open #header[data-mobile-panel].is-mobile-panel-open > #user,
    body.profile-start-menu-open #header[data-mobile-panel].is-mobile-panel-open > #navigation {
        visibility:hidden !important;
        pointer-events:none !important;
    }

    body.profile-start-menu-open #header[data-mobile-panel] #tabs .header-profile-start-panel {
        top:calc(var(--snoeten-mobile-tabs, 56px) + 8px) !important;
        right:10px !important;
        max-height:calc(100vh - var(--snoeten-mobile-tabs, 56px) - var(--snoeten-mobile-bottom, 76px) - 20px) !important;
    }
}

@media (min-width:1025px) {
    #header #tabs .header-profile-start-links > a.header-profile-start-mobile-admin {
        display:none !important;
    }
}


/* ========================================================================
   r1136 — Menu opent rechtstreeks het ECHTE profiel-startscherm.
   Het normale mobiele headerpaneel schuift hierbij NIET meer in beeld.
   ======================================================================== */

@media (max-width:1024px) {
    /*
     * Het profiel-startscherm zit technisch binnen #header.
     * Normaal staat #header mobiel buiten beeld. Wanneer alleen het startmenu
     * open is, maken we #header daarom een onzichtbare "drager" met 0x0 maat.
     * Alleen het fixed startmenu-paneel blijft zichtbaar en klikbaar.
     */
    body.profile-start-menu-open #header[data-mobile-panel] {
        display:block !important;
        position:fixed !important;
        inset:0 auto auto 0 !important;
        top:0 !important;
        right:auto !important;
        bottom:auto !important;
        left:0 !important;

        width:0 !important;
        min-width:0 !important;
        max-width:0 !important;
        height:0 !important;
        min-height:0 !important;
        max-height:0 !important;

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

        overflow:visible !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:none !important;
        transform:none !important;

        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        z-index:2147482000 !important;
    }

    body.profile-start-menu-open #header[data-mobile-panel] #tabs {
        display:block !important;
        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;
        pointer-events:none !important;
    }

    body.profile-start-menu-open #header[data-mobile-panel] #tabs > a,
    body.profile-start-menu-open #header[data-mobile-panel] #tabs > .header-profile-tab-wrap > .header-profile-link {
        display:none !important;
    }

    body.profile-start-menu-open #header[data-mobile-panel] #tabs > .header-profile-tab-wrap {
        display:block !important;
        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;
        pointer-events:none !important;
    }

    body.profile-start-menu-open #header[data-mobile-panel] #tabs .header-profile-start {
        display:block !important;
        position:static !important;
        width:0 !important;
        height:0 !important;
        margin:0 !important;
        padding:0 !important;
        overflow:visible !important;
        pointer-events:none !important;
    }

    /* Het kleine desktoppijltje zelf is mobiel niet nodig. */
    body.profile-start-menu-open #header[data-mobile-panel] #tabs .header-profile-start > .header-profile-start-toggle {
        display:none !important;
    }

    body.profile-start-menu-open #header[data-mobile-panel] #tabs .header-profile-start-panel {
        display:grid !important;
        position:fixed !important;
        top:calc(var(--snoeten-mobile-tabs, 56px) + 8px) !important;
        right:10px !important;
        bottom:auto !important;
        left:auto !important;

        width:min(700px, calc(100vw - 20px)) !important;
        min-width:0 !important;
        max-width:700px !important;

        grid-template-columns:minmax(200px, 250px) minmax(0, 450px) !important;

        max-height:calc(
            100vh
            - var(--snoeten-mobile-tabs, 56px)
            - var(--snoeten-mobile-bottom, 76px)
            - 20px
        ) !important;

        overflow:auto !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:none !important;
        z-index:2147483600 !important;
    }

    /*
     * Op mobiel/tablet staat Admin in dit hoofdmenu.
     * Desktop houdt de bestaande Admin-tab in de header.
     */
    body.profile-start-menu-open
    #header[data-mobile-panel]
    .header-profile-start-links
    > .header-profile-start-mobile-admin {
        display:flex !important;
    }
}

@media (max-width:620px) {
    body.profile-start-menu-open #header[data-mobile-panel] #tabs .header-profile-start-panel {
        top:calc(var(--snoeten-mobile-tabs, 54px) + 6px) !important;
        right:6px !important;
        width:calc(100vw - 12px) !important;
        grid-template-columns:155px minmax(0,1fr) !important;
        max-height:calc(
            100vh
            - var(--snoeten-mobile-tabs, 54px)
            - var(--snoeten-mobile-bottom, 72px)
            - 14px
        ) !important;
    }
}


/* ========================================================================
   r1137 — profiel/startscherm onderaan openen, net boven de oranje balk
   ======================================================================== */

@media (max-width:1024px) {
    body.profile-start-menu-open #header[data-mobile-panel] #tabs .header-profile-start-panel {
        top: auto !important;
        bottom: calc(var(--snoeten-mobile-bottom, 76px) + env(safe-area-inset-bottom) + 8px) !important;
        right: 10px !important;
        left: auto !important;
        max-height: calc(
            100vh
            - var(--snoeten-mobile-tabs, 56px)
            - var(--snoeten-mobile-bottom, 76px)
            - env(safe-area-inset-bottom)
            - 22px
        ) !important;
    }
}

@media (max-width:620px) {
    body.profile-start-menu-open #header[data-mobile-panel] #tabs .header-profile-start-panel {
        top: auto !important;
        bottom: calc(var(--snoeten-mobile-bottom, 72px) + env(safe-area-inset-bottom) + 6px) !important;
        right: 6px !important;
        left: auto !important;
        max-height: calc(
            100vh
            - var(--snoeten-mobile-tabs, 54px)
            - var(--snoeten-mobile-bottom, 72px)
            - env(safe-area-inset-bottom)
            - 16px
        ) !important;
    }
}


/* ========================================================================
   r1138 — laatste randje profiel/startscherm
   Verwijdert de lichte/glanzende strook bovenaan het mobiele startmenu.
   ======================================================================== */

@media (max-width:1024px) {
    body.profile-start-menu-open
    #header[data-mobile-panel]
    #tabs
    .header-profile-start-panel::before {
        display:none !important;
        content:none !important;
    }

    body.profile-start-menu-open
    #header[data-mobile-panel]
    #tabs
    .header-profile-start-panel {
        background:
            linear-gradient(
                90deg,
                #F19620 0,
                #F19620 250px,
                #e8eaed 250px,
                #e8eaed 100%
            ) !important;
        box-shadow:
            0 18px 46px rgba(28,40,58,.34),
            0 5px 14px rgba(28,40,58,.18) !important;
    }

    body.profile-start-menu-open
    #header[data-mobile-panel]
    #tabs
    .header-profile-start-links {
        border-radius:9px 0 0 9px !important;
        box-shadow:
            inset 1px 0 0 rgba(255,255,255,.18),
            inset -1px 0 0 rgba(125,67,4,.28) !important;
    }
}

@media (max-width:620px) {
    body.profile-start-menu-open
    #header[data-mobile-panel]
    #tabs
    .header-profile-start-panel {
        background:
            linear-gradient(
                90deg,
                #F19620 0,
                #F19620 155px,
                #e8eaed 155px,
                #e8eaed 100%
            ) !important;
    }
}