/* Bovenbalk (merkdoc p.9): logo links, korte navigatie, rechts altijd de groene startknop. */

.vr-topbalk {
    background: var(--vr-wit);
    border-bottom: 1px solid var(--vr-lijn);
}
.vr-topbalk__binnen {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 64px;
}
.vr-topbalk__nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-left: auto;
}
.vr-topbalk__link {
    font-size: var(--vr-fs-klein);
    font-weight: 500;
    color: var(--vr-ink);
    text-decoration: none;
    padding: 0.4rem 0.2rem;
}
.vr-topbalk__link:hover { color: var(--vr-groen-donker); }
.vr-topbalk__cta { padding: 0.55rem 1.25rem; font-size: var(--vr-fs-klein); }

@media (max-width: 640px) {
    .vr-topbalk__link { display: none; }  /* mobiel: logo + startknop volstaan voorlopig */
}

/* App-schil: uitlogknop in de topbalk (beheerdomein). */
.vr-topbalk__uitloggen { display: inline; }
.vr-topbalk__uitloggen .vr-knop { padding: 0.45rem 1.1rem; font-size: var(--vr-fs-klein); }

/* Console-topbalk: eigen admin-context, geen marketing-navigatie. */
.vr-topbalk--console { position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 rgba(23, 37, 31, 0.04); }
.vr-topbalk--console .vr-logo { display: inline-flex; align-items: center; gap: 0.5rem; }
.vr-console-badge {
    font-family: var(--vr-font-kop); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--vr-ink); background: var(--vr-perzik);
    padding: 0.18rem 0.5rem; border-radius: 999px;
}
.vr-topbalk__link--stil { color: var(--vr-tekst-zacht); }
.vr-topbalk__link--stil:hover { color: var(--vr-tekst-zacht); }
@media (max-width: 640px) {
    .vr-topbalk__link--stil { display: none; }
    .vr-topbalk--console .vr-topbalk__link { display: inline; }  /* "naar portaal" blijft bereikbaar */
}