/* =====================================================================
   VSI — site styling (BEM-ish, CSS custom properties for theming)
   Brand look van de oude vsiwebsite.com: navy #181b31, accent #ff4500,
   Roboto 400. Fonts zijn SELF-HOSTED (wwwroot/fonts) zodat er geen extern
   font-request plaatsvindt vóór consent (privacy-regel).
   ===================================================================== */

/* Roboto = het font van de oude vsiwebsite.com. ZELF-GEHOST (variabel font,
   Apache-2.0) zodat er geen extern font-request plaatsvindt vóór consent (privacy-regel). */
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/roboto-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/roboto-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/montserrat-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Glacial Indifference = het koppenfont van de oude vsiwebsite.com
   (vsi-framework). Vrij font (SIL OFL), zelf-gehost — geen extern request. */
@font-face {
    font-display: swap;
    font-family: "Glacial Indifference";
    src: url("../fonts/glacial-indifference-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-display: swap;
    font-family: "Glacial Indifference";
    src: url("../fonts/glacial-indifference-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

:root {
    /* VSI-palet, 1-op-1 uit de oude site (vsi-framework theme.min.css :root
       + de pastelvlakken van de homepage): grijze bodytekst #808291, navy #181b31
       voor koppen/hover, koraal als accent (logo-script/hashtagkleur), en pastel-
       steunkleuren. De --pb-*-variabelenamen blijven zodat alle componentklassen
       ongewijzigd blijven werken. */
    --pb-pink: #e0563c;
    --pb-pink-dark: #c74328;
    --pb-pink-soft: #fdeee9;
    --pb-ink: #181b31;
    --pb-ink-soft: #808291;
    --pb-bg: #ffffff;
    --pb-bg-tint: #f4f7fd;
    --pb-radius: 6px;
    /* Pastel-steunkleuren van de oude homepage-vlakken. */
    --pb-pastel-rose: #cba3a2;
    --pb-pastel-ochre: #d9a441;
    --pb-pastel-teal: #7ab5aa;
    --pb-pastel-blue: #aebccd;
    /* Roboto 400 = bodyfont van de oude site; Glacial Indifference = koppenfont. */
    --pb-font: "Roboto", "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --pb-font-heading: "Glacial Indifference", "Roboto", "Segoe UI", system-ui, sans-serif;
    /* Omlijning van aanvinkvakjes en schakelaars. Zowel het Kendo-thema (zwart op 8%) als
       Bootstrap (zwart op 25%) tekent die zo licht dat op wit nauwelijks te zien is waar het
       vakje zit; deze donkere lijn geeft het contrast dat nodig is. */
    --pb-check-border: #222222;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--pb-font);
    color: var(--pb-ink);
    background: var(--pb-bg);
    line-height: 1.65;
}

/* ---------- Focus / caret ----------
   Body copy is not editable: with caret browsing (F7) or a stray focus, browsers drew a blinking
   cursor and a focus box around headings and paragraphs. Hide the caret everywhere except in real
   input fields, and only paint a focus ring on genuinely interactive elements (accessibility). */
body {
    caret-color: transparent;
}

input,
textarea,
select,
[contenteditable="true"] {
    caret-color: auto;
}

:focus {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible,
/* tabindex="-1" = programmatically focusable only (script focus targets) — never a focus ring. */
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--pb-pink);
    outline-offset: 2px;
}

/* Public site typography: Roboto 400 als basisgewicht, precies zoals de oude
   vsiwebsite.com (Roboto:400). The admin (EmptyLayout/Telerik) keeps its own defaults. */
.pb-site {
    font-weight: 400;
}

.pb-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--pb-pink);
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 100;
}

.pb-skip-link:focus {
    left: 0;
}

/* ---------- Header / navigation ---------- */
.pb-header {
    background: var(--pb-bg);
    border-bottom: 3px solid var(--pb-pink);
    position: sticky;
    top: 0;
    z-index: 50;
}

.pb-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.pb-header__brand {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.pb-header__logo-img {
    height: 60px;
    width: auto;
    display: block;
}

/* Desktop: a bigger logo, so the "woningbeheer · makelaardij · interieur" line under the wordmark
   is actually readable again (still smaller than on the old site). */
@media (min-width: 992px) {
    .pb-header__logo-img {
        height: 76px;
    }
}

@media (min-width: 1200px) {
    .pb-header__logo-img {
        height: 88px;
    }
}

.pb-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.pb-nav__link {
    display: inline-block;
    padding: 0.7rem 0.85rem; /* ~48px touch target */
    text-decoration: none;
    color: var(--pb-ink);
    font-weight: 600;
    border-radius: 8px;
}

.pb-nav__link:hover,
.pb-nav__link--active {
    color: var(--pb-pink);
    background: var(--pb-pink-soft);
}

.pb-nav__link--lang {
    border: 2px solid var(--pb-pink);
    color: var(--pb-pink);
    padding: 0.35rem 0.7rem;
}

/* Dropdown groups (pure CSS: hover + :focus-within, no JavaScript) */
.pb-nav__item--dropdown {
    position: relative;
}

.pb-nav__link--group {
    cursor: default;
}

.pb-nav__caret {
    font-size: 0.7em;
    margin-left: 0.15rem;
}

.pb-nav__submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid #eee;
    border-top: 3px solid var(--pb-pink);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    z-index: 60;
}

.pb-nav__item--dropdown:hover .pb-nav__submenu,
.pb-nav__item--dropdown:focus-within .pb-nav__submenu {
    display: block;
}

.pb-nav__sublink {
    display: block;
    padding: 0.6rem 1.1rem;
    text-decoration: none;
    color: var(--pb-ink);
    font-weight: 600;
    white-space: nowrap;
}

.pb-nav__sublink:hover,
.pb-nav__sublink--active {
    color: var(--pb-pink);
    background: var(--pb-pink-soft);
}

.pb-nav__toggle,
.pb-nav__toggle-checkbox {
    display: none;
}

@media (max-width: 991px) {
    .pb-nav__toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 12px;
    }

    .pb-nav__toggle span {
        width: 26px;
        height: 3px;
        background: var(--pb-pink);
        border-radius: 2px;
    }

    .pb-nav {
        flex-basis: 100%;
        display: none;
    }

    .pb-nav__toggle-checkbox:checked ~ .pb-nav {
        display: block;
    }

    .pb-nav__list {
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 0.75rem;
    }

    /* On mobile the submenu is always expanded inline under its group label. */
    .pb-nav__submenu {
        display: block;
        position: static;
        border: none;
        box-shadow: none;
        padding-left: 1rem;
    }
}

/* ---------- Hero ---------- */
/* Straatbeeld van VSI als homepage-hero (foto is content: uploads/media, niet in git).
   Lichte donkere wash zodat de kleurrijke gevels helder blijven; leesbaarheid komt van de
   text-shadow. */
.pb-hero {
    background:
        linear-gradient(rgba(24, 27, 49, 0.35), rgba(24, 27, 49, 0.25)),
        url("../uploads/media/hero-vsi.jpg") center / cover no-repeat, var(--pb-ink);
    color: #fff;
    padding: 5.5rem 0 5rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}

.pb-hero__kicker {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pb-pink);
    /* Dark halo (not white): the hero photo is light, so pink only pops against a dark shadow. */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45);
    margin-bottom: 0.5rem;
}

.pb-hero__title {
    /* Schaal van de oude site: h1 = 52px op desktop. */
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    max-width: 46rem;
    margin-bottom: 1rem;
}

.pb-hero__subtitle {
    font-size: 1.15rem;
    max-width: 40rem;
    font-weight: 600;
}

.pb-hero__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.pb-page-hero {
    background: linear-gradient(135deg, var(--pb-pink-soft) 0%, #fff 100%);
    border-bottom: 1px solid #f2d9e7;
    padding: 2.5rem 0 2rem;
}

.pb-page-hero__title {
    /* Schaal van de oude site: h1 = 52px op desktop. */
    font-size: clamp(1.8rem, 4vw, 3.25rem);
    font-weight: 700;
    color: var(--pb-ink);
    max-width: 52rem;
}

.pb-breadcrumb {
    font-size: 0.9rem;
    color: var(--pb-ink-soft);
    margin-bottom: 0.5rem;
}

.pb-breadcrumb a {
    color: var(--pb-pink);
    text-decoration: none;
}

.pb-breadcrumb span {
    margin: 0 0.3rem;
}

/* ---------- Buttons ---------- */
/* Old-site button look: square-ish pink blocks, bold Montserrat, subtle uppercase. */
.pb-btn {
    display: inline-block;
    padding: 0.75rem 1.6rem;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.9rem;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    /* Buttons must not inherit the text-shadow of the hero/quote strip — that blurs the label. */
    text-shadow: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.pb-btn:hover {
    transform: translateY(-1px);
}

.pb-btn--primary {
    background: var(--pb-pink);
    color: #fff !important;
    border-color: var(--pb-pink);
}

.pb-btn--primary:hover {
    background: var(--pb-pink-dark);
}

.pb-btn--ghost {
    background: transparent;
    color: var(--pb-pink) !important;
    border-color: var(--pb-pink);
}

/* Secondary/inverted button (hero next to the pink primary, and on the pink CTA strip).
   The shadow keeps the white block separated from a light photo behind it. */
.pb-btn--light {
    background: #fff;
    color: var(--pb-pink) !important;
    border-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.pb-btn--light:hover {
    background: var(--pb-pink-soft);
    border-color: var(--pb-pink-soft);
}

/* ---------- Sections & content ---------- */
.pb-section {
    /* Only vertical padding — a shorthand ("3rem 0") would zero the horizontal padding and so
       wipe out the Bootstrap .container gutter on the pages that are BOTH .pb-section AND
       .container (Home/Contact/CmsPage/…), pushing their text to the screen edge on mobile. */
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.pb-section--tinted {
    background: var(--pb-bg-tint);
}

.pb-section__title {
    /* Schaal van de oude site: h2 = 40px op desktop. */
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.pb-content {
    max-width: 50rem;
}

/* Sluit zwevende foto's (shortcode-uitlijning links/rechts) netjes af onder de tekst. */
.pb-content::after {
    content: "";
    display: block;
    clear: both;
}

.pb-content h2 {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: var(--pb-ink);
}

.pb-content a {
    color: var(--pb-pink);
    font-weight: 600;
}

.pb-content ul,
.pb-content ol {
    padding-left: 1.3rem;
}

.pb-content li {
    margin-bottom: 0.4rem;
}

.pb-lead {
    font-size: 1.18rem;
    color: var(--pb-ink-soft);
}

.pb-muted {
    color: var(--pb-ink-soft);
}

/* ---------- Cards ---------- */
.pb-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--pb-radius);
    padding: 1.5rem;
    height: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.pb-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pb-pink);
    margin-bottom: 0.5rem;
}

.pb-card__text {
    flex-grow: 1;
    color: var(--pb-ink-soft);
}

.pb-card__link {
    color: var(--pb-pink);
    font-weight: 700;
    text-decoration: none;
}

.pb-card__photo {
    width: calc(100% + 3rem);
    margin: -1.5rem -1.5rem 1rem;
    border-radius: var(--pb-radius) var(--pb-radius) 0 0;
    object-fit: cover;
    aspect-ratio: 3 / 2;
    display: block;
}

.pb-card--team .pb-card__photo {
    width: 100%;
    margin: 0 0 0.75rem;
    border-radius: var(--pb-radius);
    aspect-ratio: 4 / 3;
}

/* ---------- Quote strip ---------- */
.pb-quote-strip {
    /* Tweede sfeerfoto van de wijk (foto is content: uploads/media, niet in git). */
    background:
        linear-gradient(rgba(24, 27, 49, 0.45), rgba(255, 69, 0, 0.22)),
        url("../uploads/media/strip-vsi.jpg") center / cover no-repeat, var(--pb-ink);
    color: #fff;
    text-align: center;
    padding: 4rem 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}

.pb-quote-strip__text {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
}

.pb-quote-strip__sub {
    font-weight: 500;
    font-size: 1.15rem;
    opacity: 0.95;
    margin: 0;
}

/* Photos got a touch flat/dark compared to the old site; a mild brightness + saturation lift gives
   them back their 'sparkle' without looking edited. */
.pb-card__photo,
.pb-banner__img,
.pb-moodboard__img {
    filter: brightness(1.05) saturate(1.08);
}

/* ---------- Wide page banner (header photo chosen per page in /beheer) ---------- */
/* The maximum height is set per page via --pb-banner-max (default 340 px). */
.pb-banner__img {
    width: 100%;
    height: clamp(180px, 26vw, var(--pb-banner-max, 340px));
    object-fit: cover;
    display: block;
}

/* ---------- Inline photos placed in page text via [[foto:...]] shortcodes ---------- */
.pb-inline-foto {
    margin: 1.5rem 0;
}

.pb-inline-foto__img {
    max-width: 100%;
    border-radius: var(--pb-radius);
    display: block;
    filter: brightness(1.05) saturate(1.08);
}

.pb-inline-foto__caption {
    padding-top: 0.5rem;
    font-weight: 600;
    color: var(--pb-ink-soft);
    font-size: 0.95rem;
}

/* Uitlijning via shortcode-opties: [[foto:pad|Bijschrift|links;breedte=320]] enz. */
.pb-inline-foto--links {
    float: left;
    max-width: min(45%, 420px);
    margin: 0.35rem 1.5rem 1rem 0;
}

.pb-inline-foto--rechts {
    float: right;
    max-width: min(45%, 420px);
    margin: 0.35rem 0 1rem 1.5rem;
}

.pb-inline-foto--midden {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.pb-inline-foto--midden .pb-inline-foto__img {
    margin-inline: auto;
}

.pb-inline-foto--breed .pb-inline-foto__img {
    width: 100%;
}

/* Smalle schermen: naast-de-tekst wordt gewoon boven elkaar, anders blijft er
   te weinig ruimte voor de lopende tekst over. */
@media (max-width: 575.98px) {
    .pb-inline-foto--links,
    .pb-inline-foto--rechts {
        float: none;
        max-width: 100%;
        margin: 1.5rem 0;
    }
}

/* Placeholder shown when a referenced media file no longer exists on disk. */
.pb-media-missing__box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1rem;
    background: repeating-linear-gradient(45deg, #f6f2f4, #f6f2f4 12px, #efe8ec 12px, #efe8ec 24px);
    border: 1px dashed #c9b7c1;
    border-radius: var(--pb-radius);
    color: var(--pb-ink-soft);
    font-weight: 600;
    text-align: center;
}

/* ---------- PDF download link placed via [[document:...]] shortcodes ---------- */
.pb-document-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--pb-pink);
    text-decoration: none;
    min-height: 48px;
}

.pb-document-link:hover {
    text-decoration: underline;
}

.pb-document-link__badge {
    background: var(--pb-pink);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    letter-spacing: 0.05em;
}

/* ---------- Lightbox (clickable photos, js/lightbox.js) ---------- */
.pb-lightbox-link {
    display: block;
    cursor: zoom-in;
}

.pb-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(20, 10, 16, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
}

.pb-lightbox-overlay img {
    max-width: min(1200px, 92vw);
    max-height: 84vh;
    border-radius: var(--pb-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.pb-lightbox-overlay figcaption {
    color: #fff;
    font-weight: 600;
    padding-top: 0.75rem;
}

.pb-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Moodboards (old interieur gallery) ---------- */
.pb-moodboards {
    margin-top: 2rem;
}

.pb-moodboard {
    margin: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--pb-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.pb-moodboard__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.pb-moodboard__caption {
    padding: 0.6rem 0.9rem;
    font-weight: 700;
    color: var(--pb-pink);
}

/* ---------- Quotes / testimonials ---------- */
.pb-quote {
    background: var(--pb-pink-soft);
    border-left: 4px solid var(--pb-pink);
    border-radius: 0 var(--pb-radius) var(--pb-radius) 0;
    padding: 1.25rem 1.5rem;
    height: 100%;
    margin: 0;
}

.pb-quote footer {
    font-weight: 700;
    color: var(--pb-pink-dark);
    margin-top: 0.5rem;
}

/* ---------- FAQ ---------- */
.pb-faq {
    max-width: 50rem;
    margin-top: 1.5rem;
}

.pb-faq__item {
    border: 1px solid #eee;
    border-radius: var(--pb-radius);
    margin-bottom: 0.75rem;
    background: #fff;
}

.pb-faq__question {
    padding: 1rem 1.25rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--pb-ink);
}

.pb-faq__item[open] .pb-faq__question {
    color: var(--pb-pink);
}

.pb-faq__answer {
    padding: 0 1.25rem 1rem;
    color: var(--pb-ink-soft);
}

/* ---------- CTA strip ---------- */
.pb-cta {
    /* Pastel-teal blok, zoals de gekleurde sectievlakken op de oude homepage. */
    background: var(--pb-pastel-teal);
    color: #fff;
    text-align: center;
    padding: 3.5rem 0;
}

.pb-cta__title {
    font-size: 1.7rem;
    font-weight: 700;
}

.pb-cta p {
    max-width: 34rem;
    margin: 0.75rem auto 1.5rem;
    opacity: 0.95;
}

/* ---------- Contact ---------- */
.pb-contact-info {
    background: var(--pb-bg-tint);
    border-radius: var(--pb-radius);
    padding: 1.5rem;
}

.pb-contact-info__list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.pb-contact-info__link {
    display: inline-block;
    padding: 0.5rem 0; /* touch friendly */
    color: var(--pb-ink);
    font-weight: 600;
    text-decoration: none;
}

.pb-contact-info__link:hover {
    color: var(--pb-pink);
}

.pb-contact-info__address {
    font-style: normal;
    margin-bottom: 1rem;
}

.pb-contact-info__icon {
    vertical-align: -6px;
    margin-right: 0.35rem;
}

.pb-form__honey {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* Cloudflare Turnstile: de captcha onder de publieke formulieren (TurnstileWidget.razor).
   Het vakje van Cloudflare is 300x65px en zit in een iframe; hier staat alleen de ruimte
   eromheen en de regel met de privacylink eronder. De minimumhoogte houdt de knop op zijn
   plek terwijl de widget nog laadt, zodat het formulier niet zichtbaar verspringt. */
.pb-captcha {
    margin-bottom: 1rem;
}

.pb-captcha__widget {
    min-height: 65px;
}

.pb-captcha__note {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: #6c757d;
}

.pb-whatsapp-btn {
    display: inline-block;
    background: #25d366;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.6rem 1.3rem;
    margin-top: 0.75rem;
}

/* ---------- Footer ---------- */
.pb-footer {
    /* Oude site: licht blauwgrijze footer met donkere tekst (geen navy blok). */
    background: var(--pb-pastel-blue);
    color: var(--pb-ink);
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}

.pb-footer__heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
}

.pb-footer__address {
    font-style: normal;
}

.pb-footer a {
    color: #f9c7e2;
    text-decoration: none;
}

.pb-footer a:hover {
    color: #fff;
}

.pb-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pb-footer__links li {
    margin-bottom: 0.35rem;
}

.pb-footer__registration,
.pb-footer__bottom {
    color: #b9b2b6;
    font-size: 0.9rem;
}

.pb-footer__bottom {
    border-top: 1px solid #45414a;
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
}

.pb-footer__slogan {
    font-style: italic;
    color: #f9c7e2;
}

/* ---------- 'Website verborgen'-badge (SiteNoIndex-instelling) ----------
   Bewust opvallend en rechtsboven vastgezet, zodat direct zichtbaar is wanneer de
   noindex-instelling per ongeluk op de live website aan zou staan. */
/* Links, niet rechts: rechtsboven staan de Login-link en de taalselector. */
.pb-hidden-badge {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: #b3261e;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    pointer-events: none; /* mag nooit een link of menu-item blokkeren */
}

.pb-hidden-badge__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #ffd400;
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .pb-hidden-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.55rem;
    }
}

/* ---------- Consent banner ---------- */
.pb-consent {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    max-width: 34rem;
    margin: 0 auto;
    background: #fff;
    border: 2px solid var(--pb-pink);
    border-radius: var(--pb-radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    padding: 1.1rem 1.3rem;
    z-index: 200;
}

.pb-consent__text {
    margin-bottom: 0.75rem;
}

.pb-consent__buttons {
    display: flex;
    gap: 0.6rem;
}

/* ---------- Phone layout ----------
   Bootstrap's default gutter leaves only 12px next to the text on a phone, which makes the copy
   stick to both screen edges. Widening --bs-gutter-x on the container also widens the negative
   margins of the .row/.col inside it, so photos, cards and text keep lining up on the same margin. */
@media (max-width: 575.98px) {
    .container {
        --bs-gutter-x: 2.5rem; /* = 20px left and right */
    }

    .pb-hero {
        padding: 3.5rem 0 3rem;
    }

    .pb-hero__kicker {
        letter-spacing: 0.1em;
    }

    .pb-section {
        /* Vertical-only (see the base rule): keep the .container horizontal gutter intact. */
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }

    .pb-quote-strip {
        padding: 2.75rem 0;
    }

    .pb-cta {
        padding: 2.5rem 0;
    }
}

/* ---------- Beheer (admin) ---------- */
.pb-admin {
    display: flex;
    min-height: 100vh;
    background: #f4f2f4;
}

.pb-admin__sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--pb-ink);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    /* Sidebar blijft in beeld bij lange pagina's, zodat "Website bekijken" en
       "Uitloggen" altijd zichtbaar zijn zonder te scrollen. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
}

.pb-admin__brand {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--pb-pink);
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.pb-admin__brand span {
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
}

.pb-admin__nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-grow: 1;
}

.pb-admin__link {
    color: #ded8dd;
    text-decoration: none;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-weight: 600;
}

.pb-admin__link:hover {
    background: rgba(229, 0, 125, 0.25);
    color: #fff;
}

.pb-admin__footer {
    margin-top: auto;
    padding-top: 1rem;
}

.pb-admin__logout {
    background: none;
    border: none;
    color: #f9c7e2;
    font-weight: 600;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
}

.pb-admin__version {
    margin: 0.35rem 0 0;
    padding: 0 0.7rem;
    color: #f2b8d8;
    font-size: 0.75rem;
    opacity: 0.85;
}

.pb-admin__main {
    flex-grow: 1;
    padding: 1.75rem 2rem;
    min-width: 0;
}

.pb-admin__titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.pb-admin__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
}

.pb-admin__manual {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 48px;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: #fff;
    color: var(--pb-pink);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}

.pb-admin__manual:hover {
    background: var(--pb-pink);
    color: #fff;
}

.pb-admin__subtitle {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.pb-admin-panel {
    background: #fff;
    border-radius: var(--pb-radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Uitlegpagina bij een geblokkeerd beheeronderdeel (HTTP 403 uit BeheerComponentMiddleware).
   Die pagina wordt vóór Blazor geserveerd en heeft dus geen beheer-zijbalk: een gecentreerde
   kaart is daar de hele opmaak. */
.pb-blocked {
    max-width: 44rem;
    margin: 0 auto;
    padding: 3rem 1rem;
}

.pb-admin-stat {
    background: #fff;
    border-radius: var(--pb-radius);
    padding: 1.25rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pb-admin-stat__value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--pb-pink);
}

.pb-admin-stat__label {
    color: var(--pb-ink-soft);
    font-weight: 600;
}

.pb-admin-fieldhint {
    font-size: 0.85rem;
    line-height: 1.35;
}

/* Narrow standalone admin form, e.g. the change-password page (/beheer/wachtwoord). */
.pb-admin-form--narrow {
    max-width: 520px;
}

.pb-admin-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin: 1rem 0;
    flex-wrap: wrap;
}

/* Ja/nee-schakelaar (PbToggle). In de bewerkschermen staat de uitleg naast de schakelaar;
   in de overzichten staat hij op ReadOnly zodat een klik gewoon de rij opent. Telerik maakt
   een uitgeschakelde switch doorzichtig en grijs — in een overzicht moet hij juist gewoon
   leesbaar blijven, vandaar het terugzetten van opacity/filter. */
.pb-toggle {
    /* AAN is groen, UIT is rood (zie de regels hieronder). */
    --pb-toggle-on: #157347;
    --pb-toggle-off: #c02a37;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.pb-toggle__label {
    line-height: 1.35;
}

/* AAN is groen, UIT is rood — een beheerder moet in één oogopslag zien of iets aan staat.
   Het Kendo-thema vult de 'aan'-stand met zijn eigen accentkleur (het rood-oranje #ff6358)
   en laat 'uit' lichtgrijs: precies andersom dan het hoort te lezen. Alleen binnen .pb-toggle
   overschrijven, zodat de rest van het Telerik-thema (knoppen, grid, tabbladen) ongemoeid blijft.
   De omlijning van de 'uit'-stand blijft bewust van de gedeelde #222222-regel hieronder. */
.pb-toggle .k-switch-on .k-switch-track {
    background-color: var(--pb-toggle-on);
    border-color: var(--pb-toggle-on);
    color: #ffffff;
}

.pb-toggle .k-switch-off .k-switch-track {
    background-color: var(--pb-toggle-off);
    color: #ffffff;
}

.pb-toggle .k-switch-on:focus .k-switch-track,
.pb-toggle .k-switch-on.k-focus .k-switch-track {
    outline: 2px solid color-mix(in srgb, var(--pb-toggle-on) 35%, transparent);
}

.pb-toggle .k-switch-off:focus .k-switch-track,
.pb-toggle .k-switch-off.k-focus .k-switch-track {
    outline: 2px solid color-mix(in srgb, var(--pb-toggle-off) 35%, transparent);
}

/* Aanvinkvakjes en schakelaars in de HELE app een goed zichtbare omlijning geven: het
   Kendo-thema (beheer) en Bootstrap (publieke formulieren) gebruiken hiervoor een bijna
   onzichtbaar lichtgrijs. Alleen de 'uit'-stand wordt overschreven — een aangevinkt vakje en
   een ingeschakelde switch zijn al gevuld met de accentkleur en vallen vanzelf op. De
   Kendo-regels staan op .k-switch-off .k-switch-track / .k-checkbox, dus deze selectors
   hebben minstens dezelfde specificiteit en app.css laadt ná het Telerik-thema. */
.k-checkbox,
.k-checkbox:indeterminate,
.k-checkbox.k-indeterminate,
.k-switch-off .k-switch-track,
.form-check-input {
    border-color: var(--pb-check-border);
}

.pb-toggle--readonly .k-disabled {
    /* Dezelfde variabelen die het Kendo-thema zelf gebruikt om 'disabled' terug te draaien. */
    --kendo-disabled-opacity: 1;
    --kendo-disabled-filter: grayscale(0);
    opacity: 1;
    filter: none;
}

/* Opslaan-balk die onderaan het scherm blijft plakken, zodat de knop bij lange
   formulieren altijd zichtbaar is zonder scrollen. */
.pb-admin-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid #e9e4e8;
    margin: 1rem -0.5rem 0;
    padding: 0.75rem 0.5rem;
    border-radius: 8px 8px 0 0;
}

.pb-admin__rowlink {
    color: var(--pb-pink);
    font-weight: 700;
    text-decoration: none;
}

.pb-admin-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.pb-admin-preview {
    max-width: 180px;
    max-height: 180px;
    object-fit: cover;
    border-radius: var(--pb-radius);
    border: 1px solid #e5e5e5;
}

.pb-admin-message {
    white-space: pre-wrap;
    background: var(--pb-bg-tint);
    border-radius: 8px;
    padding: 1rem;
}

/* ---------- Eventbeheer (/beheer/events): zoekbalk, fotominiatuur en statusbadges ---------- */
/* .pb-admin-filtercount is dezelfde teller boven een overzicht met snelfilters (o.a. /beheer/weekagenda). */
.pb-admin-eventcount,
.pb-admin-filtercount {
    margin-left: auto;
    font-size: 0.9rem;
}

.pb-event-thumb {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.pb-event-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pb-bg-tint);
    color: var(--pb-ink-soft);
    font-size: 1.2rem;
}

.pb-event-badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    margin: 0.1rem 0.25rem 0.1rem 0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.pb-event-badge--today {
    background: #dff3e4;
    color: #1c6b34;
}

.pb-event-badge--upcoming {
    background: #e3ecf8;
    color: #2b5b9b;
}

.pb-event-badge--past {
    background: #efeceb;
    color: #6f6a67;
}

.pb-event-badge--nodate,
.pb-event-badge--inactive {
    background: #f8e9e6;
    color: #a04b3c;
}

/* Bedrijvenkiezer in het gebruikersbeheer: bij veel bedrijven scrollen in plaats van eindeloos groeien. */
.pb-admin-businesspicker {
    max-height: 320px;
    overflow-y: auto;
}

/* SuperAdmin-schakelaar boven de rechten-tabbladen in /beheer/gebruikers: hij hoort bij álle
   tabbladen, dus staat hij er als apart blok boven. */
.pb-admin-superadmin {
    border: 1px solid #dcdfe4;
    border-radius: var(--pb-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--pb-bg-tint);
}

/* Keuzelijst (rollen, bedrijven) die niet aanpasbaar is omdat SuperAdmin al alles mag: zichtbaar
   uitgegrijsd, zodat direct duidelijk is dat deze rechten niet meer van toepassing zijn. */
.pb-choicelist--disabled {
    opacity: 0.55;
}

.pb-choicelist--disabled label {
    cursor: not-allowed;
}

/* ---------- Pagina-voorbeeld (dialog in /beheer/paginas, iframe met de publieke pagina) ---------- */
.pb-preview-note {
    margin-bottom: 0.5rem;
}

.pb-preview-frame {
    width: 100%;
    height: min(70vh, 900px);
    border: 1px solid #e5e5e5;
    border-radius: var(--pb-radius);
    background: #fff;
    display: block;
}

/* Melding IN het voorbeeld-iframe: toont "Geklikt: ..." wanneer op een link wordt geklikt. */
.pb-preview-clicknote {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%) translateY(0.5rem);
    max-width: 90%;
    padding: 0.6rem 1.1rem;
    background: var(--pb-ink, #222);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}

.pb-preview-clicknote.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Media library (/beheer/media) ---------- */
/* Twee kolommen: foto's links, details van de aangeklikte foto rechts op 1/3 breedte.
   De detailkolom is sticky zodat hij direct in beeld staat zonder te scrollen. */
.pb-media-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.pb-media-layout--detail {
    grid-template-columns: 2fr 1fr;
}

.pb-media-layout__list {
    min-width: 0;
}

.pb-media-layout__detail {
    min-width: 0;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.pb-media-detail {
    margin-top: 1rem;
}

@media (max-width: 991.98px) {
    .pb-media-layout--detail {
        grid-template-columns: 1fr;
    }

    .pb-media-layout__detail {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.pb-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.pb-media-tile {
    position: relative;
    background: #fff;
    border: 2px solid #eee;
    border-radius: var(--pb-radius);
    overflow: visible;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.pb-media-tile--selected {
    border-color: var(--pb-pink);
}

.pb-media-tile__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: calc(var(--pb-radius) - 2px) calc(var(--pb-radius) - 2px) 0 0;
}

.pb-media-tile__missing {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, #f6f2f4, #f6f2f4 12px, #efe8ec 12px, #efe8ec 24px);
    color: var(--pb-ink-soft);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.5rem;
}

.pb-media-tile__name {
    display: block;
    padding: 0.4rem 0.6rem 0.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    word-break: break-all;
}

.pb-media-tile__meta {
    display: block;
    padding: 0 0.6rem 0.4rem;
    font-size: 0.75rem;
    color: var(--pb-ink-soft);
}

/* Sorteren + pagineren van de mediabibliotheek (max. 50 tegels per pagina). */
.pb-media-range {
    margin-left: auto;
    font-size: 0.85rem;
}

.pb-media-pager {
    margin: 0.5rem 0 1.5rem;
}

.pb-media-tile__badge {
    display: inline-block;
    background: #b3261e;
    color: #fff;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    margin-left: 0.3rem;
}

/* Hover popup: where is this photo used on the website? */
.pb-media-tile__usage {
    display: none;
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: calc(100% + 0.25rem);
    z-index: 20;
    background: #2b2027;
    color: #fff;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.pb-media-tile:hover .pb-media-tile__usage,
.pb-media-tile:focus-within .pb-media-tile__usage {
    display: block;
}

.pb-media-tile__usage ul {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
}

.pb-media-usagelinks a {
    display: block;
    color: var(--pb-pink);
    font-weight: 600;
    text-decoration: none;
    padding: 0.15rem 0;
}

.pb-media-usagelinks a:hover {
    text-decoration: underline;
}

/* Photo picker grid inside dialogs (header photo / insert image). */
.pb-media-pick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    max-height: 55vh;
    overflow-y: auto;
    padding: 0.25rem;
}

.pb-media-pick__tile {
    border: 2px solid #eee;
    border-radius: 8px;
    background: #fff;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.pb-media-pick__tile:hover,
.pb-media-pick__tile--selected {
    border-color: var(--pb-pink);
}

.pb-media-pick__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 6px 6px 0 0;
}

.pb-media-pick__name {
    display: block;
    padding: 0.3rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    word-break: break-all;
}

/* Fotostrook onder een HTML-veld: laat zien welke afbeeldingen er in de tekst zitten. */
.pb-mediapreview {
    margin-top: 0.5rem;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fafafa;
    padding: 0.6rem 0.75rem;
}

.pb-mediapreview__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.pb-mediapreview__title {
    font-weight: 600;
    font-size: 0.9rem;
}

.pb-mediapreview__count {
    display: inline-block;
    min-width: 1.6rem;
    text-align: center;
    border-radius: 999px;
    background: var(--pb-pink);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.05rem 0.45rem;
}

.pb-mediapreview__strip {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
}

.pb-mediapreview__tile {
    flex: 0 0 auto;
    width: 150px;
    margin: 0;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.pb-mediapreview__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.pb-mediapreview__missing {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f3e6e4;
    color: #8a2c22;
    font-size: 0.7rem;
    padding: 0.35rem;
    word-break: break-word;
}

.pb-mediapreview__caption {
    display: block;
    padding: 0.3rem 0.45rem 0.4rem;
    font-size: 0.72rem;
    line-height: 1.35;
}

.pb-mediapreview__badge {
    display: inline-block;
    background: #eceff3;
    color: #4a4a59;
    border-radius: 4px;
    padding: 0 0.3rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.pb-mediapreview__name {
    display: block;
    font-weight: 600;
    word-break: break-all;
}

.pb-mediapreview__text {
    display: block;
    color: #6b6b76;
    font-style: italic;
    word-break: break-word;
}

/* ---------- Nieuwe-pagina wizard (/beheer/paginas/nieuw) ---------- */
.pb-wizard {
    max-width: 46rem;
}

.pb-wizard__steps {
    display: flex;
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    gap: 0.25rem;
}

.pb-wizard__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: var(--pb-ink-soft);
}

.pb-wizard__step--active {
    color: var(--pb-ink);
    font-weight: 700;
}

.pb-wizard__dot {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: #f1ecef;
    border: 2px solid #e2dbe0;
    color: var(--pb-ink-soft);
}

.pb-wizard__step--active .pb-wizard__dot {
    background: var(--pb-pink);
    border-color: var(--pb-pink);
    color: #fff;
}

.pb-wizard__step--done .pb-wizard__dot {
    background: #fff;
    border-color: var(--pb-pink);
    color: var(--pb-pink);
}

.pb-wizard__label {
    font-size: 0.78rem;
}

.pb-wizard__bar {
    height: 8px;
    border-radius: 999px;
    background: #f1ecef;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.pb-wizard__fill {
    height: 100%;
    background: var(--pb-pink);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Taalkeuze: twee grote klikbare kaarten (ruime touch targets). */
.pb-wizard__langs {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.pb-wizard__lang {
    flex: 1;
    min-width: 10rem;
    max-width: 14rem;
    border: 2px solid #eee;
    border-radius: var(--pb-radius);
    background: #fff;
    padding: 1.25rem 1rem;
    cursor: pointer;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
}

.pb-wizard__lang:hover,
.pb-wizard__lang--selected {
    border-color: var(--pb-pink);
}

.pb-wizard__lang--selected {
    background: var(--pb-bg-tint);
}

.pb-wizard__flag {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.35rem;
}

/* Laatste stap: overzicht van alle ingevoerde gegevens. */
.pb-wizard__summary {
    display: grid;
    grid-template-columns: 12rem 1fr;
    row-gap: 0.4rem;
    column-gap: 1rem;
    margin: 0;
}

.pb-wizard__summary dt {
    font-weight: 700;
    color: var(--pb-ink-soft);
}

.pb-wizard__summary dd {
    margin: 0;
    word-break: break-word;
}

/* Style guide dialog: samples rendered with the real public typography. */
.pb-styleguide-sample {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    background: #fff;
}

.pb-styleguide-sample > .pb-styleguide-sample__tag {
    display: inline-block;
    /* Het label hoort bij de beheeromgeving, niet bij de website: het staat binnen .vsi-site
       (dat Futura oplegt) en houdt daarom expliciet het admin-font. */
    font-family: var(--pb-font);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: var(--pb-ink-soft);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

@media (max-width: 767px) {
    .pb-admin {
        flex-direction: column;
    }

    .pb-admin__sidebar {
        width: 100%;
        flex-direction: column;
        /* Op mobiel staat de sidebar boven de inhoud; sticky/100vh zou daar de hele
           viewport innemen. */
        position: static;
        height: auto;
        align-self: stretch;
        overflow-y: visible;
    }
}

/* ---------- Handleiding (beheer) ---------- */
.pb-manual {
    min-height: 100vh;
    background: #f4f2f4;
}

.pb-manual__header {
    background: var(--pb-ink);
    color: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.pb-manual__brand {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pb-pink);
    white-space: nowrap;
}

.pb-manual__brand span {
    color: #fff;
    font-weight: 500;
}

.pb-manual__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.pb-manual__navlink {
    color: #ded8dd;
    text-decoration: none;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
}

.pb-manual__navlink:hover {
    background: rgba(229, 0, 125, 0.25);
    color: #fff;
}

.pb-manual__navlink--active {
    background: var(--pb-pink);
    color: #fff;
}

.pb-manual__content {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.pb-manual__content h1 {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.pb-manual__content h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.5rem 0 0.6rem;
}

.pb-manual__screenshot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--pb-radius);
    border: 1px solid #e5dfe4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin: 1rem 0 1.5rem;
}

/* ---------- Login ---------- */
.pb-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--pb-pink) 0%, var(--pb-pink-dark) 70%);
    padding: 1rem;
}

.pb-login__card {
    background: #fff;
    border-radius: var(--pb-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 2.25rem;
    width: 100%;
    max-width: 26rem;
}

.pb-login__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--pb-pink);
    text-align: center;
}

.pb-login__title span {
    color: var(--pb-ink);
    font-weight: 500;
    font-size: 1.2rem;
}

.pb-login__subtitle {
    text-align: center;
    color: var(--pb-ink-soft);
    margin-bottom: 1.25rem;
}

/* Password field with a show/hide eye button inside it. */
.pb-password {
    position: relative;
}

.pb-password__input {
    padding-right: 2.75rem;
}

.pb-password__toggle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem 0.45rem;
    line-height: 1;
    opacity: 0.55;
    border-radius: 6px;
}

.pb-password__toggle:hover,
.pb-password__toggle--on {
    opacity: 1;
    color: var(--pb-pink);
}

.pb-password__icon {
    font-size: 1.15rem;
}

.pb-login__back {
    text-align: center;
    margin-top: 1.25rem;
}

.pb-login__back a {
    color: var(--pb-ink-soft);
    text-decoration: none;
}

/* ---------- CSS-editor (/beheer/css) ----------
   Overlay-techniek: een transparante textarea boven een <pre><code> met dezelfde
   metriek die de tekst gekleurd toont. Beide lagen MOETEN identieke font/padding
   houden, anders lopen cursor en kleuren uit elkaar. */
.pb-cssedit {
    position: relative;
    border: 1px solid #d6d3d7;
    border-radius: 8px;
    background: #1e1f26;
    height: 62vh;
    min-height: 380px;
    overflow: hidden;
}

.pb-cssedit__highlight,
.pb-cssedit__input {
    box-sizing: border-box;
    margin: 0;
    border: 0;
    width: 100%;
    height: 100%;
    padding: 14px 16px;
    font-family: Consolas, "Cascadia Mono", Menlo, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre;
    word-wrap: normal;
    overflow: auto;
}

.pb-cssedit__highlight {
    position: absolute;
    inset: 0;
    color: #d5d8e0;
    pointer-events: none;
    /* Scrollt niet zelf; wordt via JS gelijkgezet met de textarea. */
    overflow: hidden;
}

.pb-cssedit__highlight code {
    font: inherit;
    color: inherit;
    background: none;
    padding: 0;
}

.pb-cssedit__input {
    position: relative;
    z-index: 1;
    background: transparent;
    color: transparent;
    caret-color: #ffffff;
    resize: none;
    outline: none;
}

.pb-cssedit__input::selection {
    background: rgba(120, 140, 255, 0.35);
    color: transparent;
}

.pb-cssedit--readonly {
    opacity: 0.85;
}

.pb-cssedit--readonly .pb-cssedit__input {
    cursor: default;
}

/* Tokenkleuren van de mini-highlighter (js/css-editor.js). */
.pb-css-cmt {
    color: #7a8194;
    font-style: italic;
}

.pb-css-str {
    color: #a5d18c;
}

.pb-css-at {
    color: #d18ce0;
}

.pb-css-hex {
    color: #e6c07b;
}

.pb-css-num {
    color: #e6a06b;
}

.pb-css-prop {
    color: #7fc7ff;
}

.pb-css-pun {
    color: #9aa0ae;
}

/* ---------- Versiehistorie: het verschil tussen twee versies (/beheer/paginas/{id}/historie) ----------
   Toegevoegde regels groen, verwijderde regels rood, met een + en een - ervoor: kleur alleen is
   voor een kleurenblinde beheerder geen verschil. De tekst wordt als tekst getoond (ook HTML),
   dus lange regels breken af in plaats van uit het paneel te lopen. */
.pb-diff {
    margin-top: 1rem;
}

.pb-diff__field {
    border-top: 1px solid #e6e6ea;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

.pb-diff__fieldname {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.pb-diff__line {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    padding: 0.15rem 0.5rem 0.15rem 1.6rem;
    position: relative;
}

.pb-diff__line::before {
    position: absolute;
    left: 0.5rem;
    font-weight: 700;
}

.pb-diff__line--added {
    background: #e7f7ec;
    color: #14532d;
}

.pb-diff__line--added::before {
    content: "+";
}

.pb-diff__line--removed {
    background: #fdecec;
    color: #7f1d1d;
}

.pb-diff__line--removed::before {
    content: "-";
}

.pb-diff__line--unchanged {
    color: #6c757d;
}

.pb-diff__line--skipped {
    color: #6c757d;
    font-style: italic;
    background: #f6f6f8;
}

/* ---------- Blazor error UI (template default, restyled) ---------- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ---------- District-directory (bedrijven, events, blog) ---------- */

.pb-card--directory {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}

    .pb-card--directory:hover,
    .pb-card--directory:focus-visible {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(24, 27, 49, .14);
        color: inherit;
    }

.pb-card__more {
    display: inline-block;
    margin-top: .35rem;
    color: var(--pb-pink);
    font-weight: 600;
}

.pb-biz-info__heading {
    font-size: 1.05rem;
    margin: 0 0 .6rem;
}

.pb-biz-info__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

    .pb-biz-info__list li {
        margin-bottom: .45rem;
        line-height: 1.45;
    }

.pb-biz-info__hours {
    margin: 0;
    line-height: 1.6;
}

.pb-back-link {
    margin-top: 2rem;
}

.pb-event-archive {
    margin-top: 2.5rem;
    border-top: 1px solid #e3e5ee;
    padding-top: 1.25rem;
}

    .pb-event-archive summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--pb-ink);
    }

.pb-event-archive__list {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
    line-height: 1.9;
}

.pb-section__morelink {
    margin-top: 1.5rem;
    font-weight: 600;
}

.pb-page-hero__meta {
    margin: .4rem 0 0;
    color: #d8dbe2;
}

/* ---------- Beheer: submenu Componenten ---------- */

.pb-admin__group-toggle {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pb-admin__caret {
    font-size: .75em;
    opacity: .7;
}

.pb-admin__submenu {
    display: flex;
    flex-direction: column;
}

.pb-admin__sublink {
    padding-left: 1.6rem;
    font-weight: 500;
}

/* ---------- Layout-parity met de oude vsiwebsite.com ---------- */

/* Oude theme: container 1170px (Bootstrap default is 1320px op xxl). */
.pb-site .container {
    max-width: 1170px;
}

/* Oude theme: body line-height 1.7. */
body {
    line-height: 1.7;
}

/* Oude theme koppenschaal in de lopende tekst: h2 40px, h3 32px (responsief geklemd). */
.pb-content h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.5rem);
}

.pb-content h3 {
    font-size: clamp(1.25rem, 2.2vw, 2rem);
}

/* Oude site: koppen in Glacial Indifference, vet, uppercase; bodytekst grijs #808291
   met navy koppen. De beheeromgeving (.pb-admin) houdt bewust de standaardfonts. */
.pb-site {
    color: var(--pb-ink-soft);
}

.pb-site h1,
.pb-site h2,
.pb-site h3,
.pb-site h4,
.pb-site .pb-card__title {
    font-family: var(--pb-font-heading);
    color: var(--pb-ink);
    letter-spacing: 0.02em;
}

.pb-hero__title,
.pb-hero__kicker,
.pb-page-hero__title,
.pb-section__title,
.pb-cta__title,
.pb-quote-strip__text {
    text-transform: uppercase;
}

/* Op de gekleurde vlakken en de hero blijven de koppen wit. */
.pb-hero__title,
.pb-cta__title,
.pb-quote-strip__text {
    color: #fff;
}

/* Navigatie in kleinkapitaal met tracking, zoals de oude header. */
.pb-nav__link,
.pb-nav__sublink {
    font-family: var(--pb-font-heading);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

/* Footer op het lichte blauwgrijze vlak: donkere links en koppen. */
.pb-footer__heading {
    font-family: var(--pb-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pb-footer a,
.pb-footer__links a {
    color: var(--pb-ink);
}

.pb-footer__bottom {
    color: var(--pb-ink);
    opacity: .75;
}

/* Listingkaarten zoals de oude site: horizontaal, foto links, adres boven de naam. */
.pb-card--listing {
    display: flex;
    flex-direction: row;
    padding: 0;
    overflow: hidden;
}

.pb-card--listing__photo {
    width: 42%;
    min-height: 200px;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    margin: 0;
    flex-shrink: 0;
}

.pb-card--listing__body {
    display: block;
    padding: 1.1rem 1.25rem;
}

.pb-card__meta {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pb-pastel-blue);
    color: #7d94b5;
    margin-bottom: .3rem;
}

@media (max-width: 575px) {
    .pb-card--listing {
        flex-direction: column;
    }

    .pb-card--listing__photo {
        width: 100%;
    }
}

/* =====================================================================
   VSI ORIGINEEL THEMA — 1-op-1 look van vsiwebsite.com (WordPress).
   Fonts als in het originele thema (liquid-css-9.css van vsi-framework), met één
   afwijking: h1/h2/h3 stonden in het display-font Idaho (45/80/36px) en staan sinds
   2026-07-29 op verzoek in Montserrat. h4/h5/h6 = Brandon Text Black (28/18/16px),
   lopende tekst + menu = Futura Medium 16px/1.8, tekstkleur #4a4a59.
   Kleuren uit het originele thema: warmgrijs #a7a9a2 (SoHo-intro, koppen),
   zand #d5bd96 (blok 'An exciting past'), zacht terracotta #c0a29c (Stay),
   mint #abcec4 + #d9e6e2 (district map), blogkaarten #EBF0F6 met titels
   #6F8DB7, footer #b0bed2, accentblauw #6F8DB7.
   Menu/links (gemeten op de live site, 2026-07-26): menu op binnenpagina's
   #a0605a met hover goud #bf9648, menu over de hero wit 79% met hover #fff,
   submenu #797b86 met hover #181b31 op #e7eaee, tekstlinks #bf492b met hover
   #605800 (liquid-css-9.css: --color-link / --color-link-hover).
   LET OP: #ae6661 hoort NIET bij VSI — dat is de kleur van het
   PinkBeheer-template waarop dit project ooit gestart is. Niet meer gebruiken.
   ===================================================================== */
@font-face {
    font-family: "brandon";
    src: url("../fonts/brandon-text-black.ttf") format("truetype");
    font-weight: 400 900;
    font-display: swap;
}

@font-face {
    font-family: "futura-medium";
    src: url("../fonts/futura-medium.ttf") format("truetype");
    font-display: swap;
}

/* Het display-font Idaho is 2026-07-29 op verzoek overal vervangen door Montserrat (zelf-gehost,
   zie de @font-face bovenaan dit bestand). Voeg hier dus geen "idaho" meer toe; de koppen van de
   site staan in Montserrat, net als --vsi-font-heading in vsi-site.css. */

.vsi-site {
    font-family: "futura-medium", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #4a4a59;
    font-size: 16px;
    line-height: 1.8;
}

/* h1/h2/h3 in Montserrat (was Idaho), h4/h5/h6 in Brandon. */
.vsi-site h1, .vsi-site h2, .vsi-site h3 {
    font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.05;
}

.vsi-site h4, .vsi-site h5, .vsi-site h6 {
    font-family: "brandon", "Arial Black", sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* Kleine functionele kopjes in de zij-/listingkolommen zijn op het origineel h4/h5:
   die blijven Brandon, ook al gebruikt onze markup daar een h3. */
.vsi-detail__side h3,
.vsi-detail__contact h3,
.vsi-detail__more h3,
.vsi-listing__map h3,
.vsi-blog__card h2 {
    font-family: "brandon", "Arial Black", sans-serif;
}

/* ---------- Header: menu links | logo midden | menu rechts, lijn er doorheen ---------- */
.vsi-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 10px 40px 0;
}

.vsi-header--colored {
    position: relative;
    background: #fff;
    padding-bottom: 8px;
}

.vsi-header__top {
    display: flex;
    justify-content: flex-end;
    gap: 22px;
    padding: 6px 10px 0;
}

.vsi-header__top a,
.vsi-header__lang-sep {
    font-family: "brandon", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: #fff;
    text-decoration: none;
}

.vsi-header--colored .vsi-header__top a,
.vsi-header--colored .vsi-header__lang-sep {
    color: #a0605a;
}

/* Taalselector: vierkante outline-knoppen met ronde hoeken ([EN] [NL]); de actieve taal is
   gevuld. Het origineel heeft geen taalkeuze, dus de knoppen volgen de menukleur (#a0605a). */
.vsi-header__lang {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vsi-header--overlay .vsi-header__lang-btn,
.vsi-header__lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-family: "brandon", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
    text-decoration: none;
    color: #fff;
}

.vsi-header--colored .vsi-header__lang-btn:not(.vsi-header__lang-btn--active) {
    color: #a0605a;
}

/* Let op de type-selector `a`: .vsi-header--colored .vsi-header__top a wint anders qua
   specificiteit en maakt de actieve knop rood-op-rood (onleesbaar). */
.vsi-header--overlay .vsi-header__lang a.vsi-header__lang-btn--active,
.vsi-header__lang a.vsi-header__lang-btn--active {
    background: #fff;
    color: #a0605a;
    border-color: #fff;
}

.vsi-header--colored .vsi-header__lang a.vsi-header__lang-btn--active {
    background: #a0605a;
    color: #fff;
    border-color: #a0605a;
}

.vsi-header__lang-btn:hover {
    opacity: 0.85;
}

.vsi-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 34px;
    max-width: 1420px;
    margin: 0 auto;
}

.vsi-header__brand {
    display: block;
    padding: 12px 0;
}

.vsi-header__logo {
    max-width: 201px;
    height: auto;
    display: block;
}

.vsi-nav__list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    gap: 44px;
    position: relative;
}

.vsi-nav--left .vsi-nav__list {
    justify-content: flex-end;
}

.vsi-nav--right .vsi-nav__list {
    justify-content: flex-start;
}

/* De dunne lijn dwars door beide menudelen (zoals het origineel). */
.vsi-nav .vsi-nav__list::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px solid rgb(255 255 255 / 60%);
    z-index: -1;
}

.vsi-nav--left .vsi-nav__list::after {
    bottom: -6px;
}

.vsi-nav--right .vsi-nav__list::after {
    top: -6px;
}

.vsi-header--colored .vsi-nav .vsi-nav__list::after {
    border-bottom-color: rgb(174 102 97 / 40%);
}

.vsi-nav__link {
    font-family: "brandon", Arial, sans-serif;
    font-size: 16px;
    white-space: nowrap;
    letter-spacing: normal;
    text-transform: uppercase;
    color: rgb(255 255 255 / 79%);
    text-decoration: none;
    padding: 4px 2px;
    display: inline-block;
    cursor: pointer;
    background: transparent;
}

.vsi-header--overlay .vsi-nav__link {
    text-shadow: 0 1px 6px rgb(0 0 0 / 35%);
}

.vsi-header--colored .vsi-nav__link {
    color: #a0605a;
    background: #fff;
    text-shadow: none;
}

.vsi-header--overlay .vsi-nav__link:hover {
    color: #fff;
}

/* Hovertkleur van het menu op binnenpagina's: goud #bf9648, exact als het origineel
   (.main-nav > li > a:hover in de themastijlen van vsiwebsite.com). */
.vsi-header--colored .vsi-nav__link:hover {
    color: #bf9648;
}

.vsi-nav__link:hover {
    opacity: 0.85;
}

.vsi-nav__caret {
    font-size: 10px;
}

.vsi-nav__item--dropdown {
    position: relative;
    list-style: none;
}

.vsi-nav__submenu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: -14px;
    min-width: 190px;
    background: #fff;
    box-shadow: 0 10px 24px rgb(24 27 49 / 14%);
    padding: 10px 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.18s ease;
    z-index: 60;
}

.vsi-nav__item--dropdown:hover .vsi-nav__submenu,
.vsi-nav__item--dropdown:focus-within .vsi-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.vsi-nav__submenu a {
    display: block;
    padding: 8px 18px;
    font-family: "futura-medium", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #797b86;
    text-decoration: none;
}

/* Submenu-hover als in het origineel: navy tekst op een lichtgrijze rij. */
.vsi-nav__submenu a:hover {
    color: #181b31;
    background: #e7eaee;
}

/* ---------- Hero-slider: twee foto's naast elkaar per slide ---------- */
.vsi-hero {
    position: relative;
    height: 100vh;
    min-height: 620px;
    overflow: hidden;
    background: #181b31;
}

.vsi-hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    transition: opacity 0.9s ease;
}

/* vsi-slide--active is de algemene 'actieve slide'-klasse van hero-slider.js, die ook de
   deelnemersgalerij op About & Join bedient. */
.vsi-hero__slide.vsi-slide--active {
    opacity: 1;
    z-index: 1;
}

.vsi-hero__img {
    width: 50%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vsi-hero .vsi-hero__title {
    position: absolute;
    left: max(40px, calc((100vw - 1420px) / 2));
    bottom: 9vh;
    margin: 0;
    color: #fff;
    font-size: clamp(44px, 5.6vw, 84px);
    line-height: 0.98;
    letter-spacing: 1px;
    text-shadow: 0 2px 18px rgb(0 0 0 / 25%);
    max-width: 620px;
}

.vsi-hero__arrows {
    position: absolute;
    left: max(12px, calc((100vw - 1560px) / 2));
    bottom: 40vh;
    z-index: 5;
    display: flex;
    gap: 10px;
}

.vsi-hero__arrow {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 10px;
    text-shadow: 0 1px 8px rgb(0 0 0 / 40%);
}

.vsi-hero__arrow:hover {
    opacity: 0.7;
}

/* Eventspaneel rechts (origineel .slider__events: 300px breed, top 220px,
   rgba(0,0,0,.2) met witte scheidingslijnen en de witte chip "See all EVENTS"). */
.vsi-hero__events {
    position: absolute;
    right: 0;
    top: 220px;
    width: 300px;
    z-index: 6;
    background: rgb(0 0 0 / 20%);
    max-height: 680px;
    overflow-y: auto;
}

.vsi-events__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #fff;
    padding-left: 24px;
}

.vsi-events__heading > h3 {
    color: #fff;
    margin: 0;
    font-size: 36px;
}

.vsi-events__heading > a {
    background: #fff;
    display: inline-block;
    padding: 5px 20px 5px 10px;
    color: #6F8DB7;
    font-size: 13px;
    text-decoration: none;
    font-family: "brandon", Arial, sans-serif;
}

.vsi-events__single {
    padding: 8px 12px 8px 24px;
    border-bottom: 1px solid #fff;
}

.vsi-events__single h5 {
    margin: 0;
    text-transform: uppercase;
    font-size: 22px;
    line-height: 1.15;
}

/* Weekagenda in het paneel (happy hours / live music), zoals de live site. */
.vsi-site .vsi-events__block h4 {
    color: #fff;
    text-transform: uppercase;
    font-size: 22px;
    margin: 14px 0 4px;
    padding-left: 24px;
}

.vsi-events__single--schedule {
    padding-top: 4px;
    padding-bottom: 6px;
}

.vsi-events__schedname {
    color: #fff;
    font-size: 13px;
    margin: 0;
    line-height: 1.3;
}

/* Locatielinks in het paneel zijn wit, zoals op de live site (geen blauwe standaardlink). */
.vsi-events__single p a {
    color: #fff;
    text-decoration: none;
}

.vsi-events__single p a:hover {
    text-decoration: underline;
}

.vsi-events__single h5 a {
    color: #fff;
    text-decoration: none;
}

.vsi-events__single p {
    color: #fff;
    font-size: 12px;
    margin: 2px 0 0;
    line-height: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

/* ---------- Kleine uppercase link met streep ervoor (LEARN MORE-stijl) ---------- */
.vsi-linkline {
    text-align: right;
    margin: 26px 0 0;
}

.vsi-linkline--center {
    text-align: center;
    margin-top: 44px;
}

.vsi-linkline {
    display: flex;
    align-items: center;
    gap: 26px;
}

.vsi-linkline::before {
    content: "";
    flex: 1;
    border-top: 1px solid currentColor;
    opacity: 0.7;
}

.vsi-linkline a {
    font-family: "brandon", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
}

.vsi-linkline a:hover {
    opacity: 0.75;
}

/* ---------- Sectie 1: SoHo-intro (origineel .home_second, #a7a9a2) ---------- */
.vsi-soho {
    background: #a7a9a2;
    color: #fff;
    padding: 100px 0 60px;
}

.vsi-soho h4 {
    font-size: 28px;
    line-height: 1.3;
    max-width: 860px;
    margin-bottom: 22px;
    color: #fff;
}

.vsi-soho p {
    max-width: 860px;
    font-size: 18px;
    line-height: 1.8;
    color: #fff;
}

/* ---------- Sectie 2: An exciting past (origineel .home__third: witte sectie,
   linkerkolom als zandkleurig blok #d5bd96, rechts de grote grijze slogan) ---------- */
.vsi-past {
    background: #fff;
    color: #4a4a59;
    padding: 60px 0 0;
}

.vsi-past__img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 36px;
}

.vsi-past__left {
    background: #d5bd96;
    color: #fff;
    padding: 0 0 60px;
}

.vsi-past__left-inner {
    padding: 0 20px;
}

@media (min-width: 992px) {
    .vsi-past__left-inner {
        padding-left: 10vw;
        padding-right: 20px;
    }
}

.vsi-past h3 {
    font-size: 36px;
    margin-bottom: 18px;
    color: #fff;
}

.vsi-past__left p {
    line-height: 1.8;
    color: #fff;
}

.vsi-past__right {
    padding-left: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.vsi-past__right h2 {
    font-size: clamp(42px, 5.4vw, 80px);
    line-height: 1;
    color: #a7a9a2;
    margin: 30px 0 60px;
}

/* ---------- Sectie 3: Stay ---------- */
.vsi-stay {
    background: #c0a29c;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.vsi-stay__photo {
    position: relative;
}

.vsi-stay__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 520px;
}

.vsi-stay__photo h2 {
    position: absolute;
    right: -8px;
    bottom: 24%;
    color: #fff;
    font-size: clamp(44px, 4.2vw, 66px);
    margin: 0;
    text-shadow: 0 2px 14px rgb(0 0 0 / 25%);
}

.vsi-stay__text {
    color: #fff;
    padding: clamp(40px, 8vw, 120px) clamp(28px, 6vw, 110px);
    align-self: center;
}

.vsi-stay__text h3 {
    font-size: 36px;
    margin-bottom: 22px;
    color: #fff;
}

.vsi-stay__text p {
    line-height: 1.8;
    color: #fff;
}

/* ---------- Sectie 4: Blog (gekleurde kaarten van het origineel) ---------- */
.vsi-blog {
    background: #fff;
    padding: 80px 0;
}

.vsi-site .vsi-blog__title {
    text-align: center;
    color: #a7a9a2;
    font-size: clamp(38px, 4vw, 58px);
    margin-bottom: 44px;
}

.vsi-blog__card {
    height: 100%;
    padding-bottom: 28px;
    background: #EBF0F6;
    color: #57607a;
}

.vsi-blog__card img {
    width: 100%;
    aspect-ratio: 740 / 460;
    object-fit: cover;
    display: block;
    margin-bottom: 20px;
}

.vsi-blog__card h2 {
    font-size: 24px;
    line-height: 1.3;
    padding: 0 34px;
    margin-bottom: 12px;
}

.vsi-blog__card h2 a {
    color: #6F8DB7;
    text-decoration: none;
}

.vsi-blog__card p {
    padding: 0 34px;
    font-size: 14px;
    line-height: 1.7;
}

.vsi-blog__more {
    display: inline-block;
    margin: 6px 34px 0;
    color: #6F8DB7;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-decoration: none;
    font-family: "futura-medium", Arial, sans-serif;
}

/* Het origineel kleurt de tweede en derde kaart (geverifieerd op de live site). */
.vsi-blog__card--1 {
    background: #cc9d45;
    color: #fff;
}

.vsi-blog__card--2 {
    background: #72bbb3;
    color: #fff;
}

.vsi-blog__card--1 h2 a, .vsi-blog__card--2 h2 a,
.vsi-blog__card--1 p, .vsi-blog__card--2 p,
.vsi-blog__card--1 .vsi-blog__more, .vsi-blog__card--2 .vsi-blog__more {
    color: #fff;
}

.vsi-blog .vsi-linkline--center a {
    color: #a7a9a2;
}

/* ---------- Sectie 5+6: District map (origineel: mintgroene band #abcec4 met de
   titel links en een lichter tekstblok #d9e6e2 rechts) ---------- */
.vsi-map-intro {
    background: #abcec4;
    color: #fff;
}

/* De titelhelft ligt op het origineel onder een zwarte 20%-overlay (#abcec4 → #88a49c). */
.vsi-map-intro__title {
    display: flex;
    align-items: flex-end;
    padding: 90px 20px 40px;
    background: rgb(0 0 0 / 20%);
}

.vsi-map-intro h3 {
    font-size: clamp(38px, 4vw, 58px);
    margin: 0;
    color: #fff;
}

.vsi-map-intro__text {
    background: #d9e6e2;
    padding: 40px 20px;
}

.vsi-map-intro p {
    line-height: 1.8;
    margin: 0;
    font-size: 16px;
    color: #72797b;
}

@media (min-width: 992px) {
    .vsi-map-intro__title {
        padding-left: 10vw;
    }

    .vsi-map-intro__text {
        padding: 120px 15vw 40px 6vw;
    }
}

.vsi-map {
    position: relative;
    background: #dfe9e5;
}

.vsi-map iframe {
    width: 100%;
    height: 560px;
    border: 0;
    display: block;
}

/* Interactieve kaart (Google Maps JS API, district-map.js): het canvas krijgt zijn hoogte
   inline mee (600px homepage/events, 500px overzichtspagina's — als het origineel). */
.vsi-map__canvas {
    width: 100%;
}

/* De kleine kaart op de detailpagina vult het locatieblok, net als de iframe-variant. */
.vsi-map__canvas--detail {
    height: 100%;
    min-height: 380px;
}

/* Marker-popup 1-op-1 het origineel: foto links (100px), rechts de naam in blauw kapitaal
   met daaronder het label (categorie of adres) in grijs; strakke hoeken zonder padding. */
.gm-style .gm-style-iw-c {
    padding: 0;
    border-radius: 0;
}

.gm-style .gm-style-iw-d {
    height: 100%;
    max-height: unset !important;
    padding-bottom: 0 !important;
}

.map_popup__details > a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.map_popup__details > a > img {
    width: 100px;
}

.map_popup__details > a > .map_popup__content {
    padding: 20px 20px;
}

.map_popup__details > a > .map_popup__content > p {
    font-family: "futura-medium", Arial, sans-serif;
    font-weight: 400;
    line-height: 14px;
    font-size: 14px;
    color: #5f5f5f;
    margin: 0;
}

.map_popup__details > a > .map_popup__content > p.map_popup__heading {
    color: #6f8db7;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 8px;
}

.vsi-map__note {
    text-align: center;
    margin: 0;
    padding: 14px 0;
    font-size: 13px;
}

.vsi-map__allow {
    border: 1px solid #6f8db7;
    background: #fff;
    color: #6f8db7;
    border-radius: 4px;
    padding: 3px 12px;
    margin-left: 10px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.vsi-map__allow:hover {
    background: #6f8db7;
    color: #fff;
}

/* ---------- Sectie 7: Connect with us ---------- */
.vsi-connect {
    background: #fff;
    padding: 80px 0 40px;
}

.vsi-connect h3 {
    color: #a7a9a2;
    font-size: clamp(38px, 4vw, 58px);
    margin-bottom: 8px;
}

.vsi-connect p {
    font-size: 22px;
    color: #a7a9a2;
    margin: 0;
}

.vsi-connect p a {
    color: #a7a9a2;
    text-decoration: none;
}

/* Zoals de originele Smash Balloon-feed: 5 kolommen, vierkante tegels, 4px tussenruimte. */
.vsi-connect__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-top: 34px;
}

.vsi-connect__grid a {
    position: relative;
    display: block;
}

.vsi-connect__grid a[hidden] {
    display: none;
}

.vsi-connect__grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

/* Hoekicoon voor video-/carrouselposts, zoals op de originele tegels. */
.vsi-connect__badge {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #fff;
    font-size: 16px;
    text-shadow: 0 1px 6px rgb(0 0 0 / 55%);
    pointer-events: none;
}

/* De knop "Load More..." van de originele feed (#333, wit, 13px, afgerond). */
.vsi-connect__load {
    text-align: center;
    margin-top: 5px;
}

.vsi-connect__more {
    background: #333;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 7px 14px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

.vsi-connect__more:hover {
    opacity: 0.85;
}

/* ---------- Footer ---------- */
/* Origineel: linkerhelft #a8b7ce (donkerder), rechterhelft #b0bed2 (lichter), witte tekst
   (koppen Brandon 28px, links Futura 16px op 60% wit), het witte scriptlogo op de naad
   (absoluut in de rechterkolom, 280px, top 36%) en daaronder een witte balk met grijze
   copyrighttekst (14px, #999999). */
.vsi-footer {
    color: #fff;
}

.vsi-footer__col {
    text-align: center;
    padding: 90px 15px 160px;
}

.vsi-footer__col--left {
    background: #a8b7ce;
}

.vsi-footer__col--right {
    background: #b0bed2;
    position: relative;
}

.vsi-footer__logo {
    position: absolute;
    top: 36%;
    left: -140px;
    width: 280px;
    height: auto;
}

/* .vsi-site-prefix: de oude .pb-site h4-regel wint anders qua specificiteit en maakt de
   koppen donker in plaats van wit. */
.vsi-site .vsi-footer__heading {
    font-family: "brandon", "Arial Black", sans-serif;
    font-size: 28px;
    letter-spacing: normal;
    text-transform: uppercase;
    margin: 18px 0 0;
    color: #fff;
}

.vsi-footer__heading a {
    color: inherit;
    text-decoration: none;
}

.vsi-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vsi-footer__links a {
    color: rgb(255 255 255 / 60%);
    text-decoration: none;
    font-family: "futura-medium", Arial, sans-serif;
    font-size: 16px;
}

.vsi-footer__links a:hover {
    color: #fff;
}

.vsi-footer__social {
    margin-top: 26px;
    display: flex;
    justify-content: center;
    gap: 18px;
}

.vsi-footer__social a {
    color: rgb(255 255 255 / 60%);
    font-size: 28px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.vsi-footer__social svg {
    width: 28px;
    height: 28px;
}

.vsi-footer__bottom {
    background: #fff;
    text-align: center;
    padding: 10px 12px;
    font-size: 14px;
    color: #999999;
}

.vsi-footer__bottom a {
    color: #999999;
}

/* Gestapelde kolommen (mobiel): logo niet meer op de naad maar gecentreerd erboven,
   zoals het origineel. */
@media (max-width: 767.98px) {
    .vsi-footer__logo {
        position: static;
        display: block;
        margin: 0 auto 60px;
        width: 180px;
    }

    .vsi-footer__col {
        padding-bottom: 90px;
    }
}

/* ---------- Mobiel ---------- */
@media (max-width: 991.98px) {
    .vsi-header {
        padding: 6px 16px 0;
        background: rgb(24 27 49 / 55%);
    }

    .vsi-header--colored {
        background: #fff;
    }

    .vsi-header__bar {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .vsi-nav {
        display: none;
        width: 100%;
    }

    .pb-nav__toggle-checkbox:checked ~ .vsi-header__bar .vsi-nav {
        display: block;
    }

    .vsi-nav__list {
        flex-direction: column;
        gap: 0;
        text-align: center;
    }

    .vsi-nav .vsi-nav__list::after {
        display: none;
    }

    .vsi-nav__link {
        padding: 10px 0;
        background: transparent;
    }

    .vsi-nav__submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
    }

    .vsi-header--overlay .vsi-nav__submenu a {
        color: #fff;
    }

    .vsi-hero__events {
        display: none;
    }

    .vsi-hero__title {
        left: 24px;
        right: 24px;
        font-size: clamp(34px, 9vw, 54px);
    }

    .vsi-hero__arrows {
        left: 4px;
    }

    .vsi-stay {
        grid-template-columns: 1fr;
    }

    .vsi-connect__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vsi-past__right {
        padding-left: 0;
    }
}

/* =====================================================================
   VSI BINNENPAGINA'S — 1-op-1 met het origineel (vsiwebsite.com).
   Titelband met foto (#000/30% overlay), lichtblauwe listing (#d1dbea) met
   kaarten van halve breedte, detailpagina met gekleurde zijkolom (#a8b7ce,
   winkels #a0605a), grijze paginatitel (#a7a9a2) en de afsluitende CTA-band.
   ===================================================================== */

/* ---------- Titel-fotoband (overzichtspagina's) ---------- */
.vsi-pagehero {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 280px 0 60px;
}

.vsi-pagehero--compact {
    padding: 200px 0 120px;
}

.vsi-pagehero__overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 30%);
}

.vsi-pagehero__inner {
    position: relative;
    text-align: center;
}

.vsi-pagehero__inner--left {
    text-align: left;
    max-width: 1420px;
}

.vsi-site .vsi-pagehero__title {
    color: #fff;
    /* Origineel: 60px op de fotoband (font is nu Montserrat, was Idaho). */
    font-size: clamp(38px, 4.2vw, 60px);
    line-height: 1.05;
    letter-spacing: normal;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 2px 16px rgb(0 0 0 / 25%);
}

.vsi-pagehero__intro {
    color: #fff;
    max-width: 700px;
    margin: 18px 0 0;
    line-height: 1.7;
    font-size: 15px;
}

/* ---------- Paginatitel op inhoudspagina's (o.a. /history) ---------- */
.vsi-pagetitle {
    background: #fff;
    padding: 70px 0 40px;
    text-align: center;
}

.vsi-pagetitle--article {
    padding-bottom: 20px;
}

.vsi-site .vsi-pagetitle__text {
    color: #a7a9a2;
    text-transform: uppercase;
    font-size: clamp(34px, 3.8vw, 54px);
    margin: 0;
    line-height: 1.05;
}

.vsi-pagetitle__meta {
    margin: 10px 0 0;
    font-size: 14px;
    color: #a7a9a2;
}

/* ---------- Leeskolom van inhouds-/artikelpagina's ---------- */
.vsi-article {
    padding: 20px 0 80px;
}

/* Artikelfoto: altijd de VOLLEDIGE foto in de originele verhouding (nooit croppen),
   gecentreerd op leeskolom-breedte — het origineel toont de blogfoto ook compleet. */
.vsi-article__banner {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 15px;
}

.vsi-article__banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Artikelfoto NAAST de tekst — 1-op-1 met de oude website (thema-onderdeel
   blog-single-image-left): de foto staat buiten de tekstkolom en titel, datum en artikeltekst
   lopen eromheen. De breedte komt per artikel uit /beheer/blog en staat als custom property
   --vsi-cover op de sectie (zelfde aanpak als --pb-banner-max bij de headerfoto); de tekstkolom
   krijgt links (of rechts) precies die ruimte als padding, zodat de regels naast én onder de
   foto even lang zijn. flow-root houdt de zwevende foto binnen dit blok, zodat "alle artikelen",
   vorig/volgend en "You may also like" er altijd onder blijven. */
.vsi-article__lead {
    display: flow-root;
}

.vsi-article__cover {
    margin: 0 0 26px;
    width: var(--vsi-cover, 470px);
    max-width: 100%;
}

.vsi-article__cover img {
    width: 100%;
    height: auto;
    display: block;
}

.vsi-article__cover--left {
    float: left;
    margin-right: 40px;
}

.vsi-article__cover--right {
    float: right;
    margin-left: 40px;
}

/* Naast een zwevende foto is de leeskolom wat breder dan de gewone 800px: anders blijft er
   naast de foto te weinig over voor een leesbare regel. Onder de foto loopt de tekst gewoon
   door over de volle kolombreedte — precies zoals op de oude website. */
.vsi-article__lead .vsi-article__title,
.vsi-article__lead .vsi-article__meta,
.vsi-article__lead .vsi-content > p,
.vsi-article__lead .vsi-content > h3,
.vsi-article__lead .vsi-content > h4,
.vsi-article__lead .vsi-content > h5,
.vsi-article__lead .vsi-content > ul,
.vsi-article__lead .vsi-content > ol {
    max-width: 880px;
}

/* Titel en datum naast de foto: dezelfde typografie als de titelband, maar links uitgelijnd
   en iets kleiner, zoals de oude website. */
.vsi-site .vsi-article__title {
    font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #a7a9a2;
    text-transform: uppercase;
    font-size: clamp(30px, 3.1vw, 46px);
    line-height: 1.05;
    margin: 0 0 10px;
}

.vsi-article__meta {
    margin: 0 0 26px;
    font-size: 14px;
    color: #a7a9a2;
}

/* Smal scherm: geen zwevende foto meer — die zou de tekst tot een paar woorden per regel
   knijpen. De foto komt dan gewoon boven de titel, over de volle breedte. */
@media (max-width: 767.98px) {
    .vsi-article__cover--left,
    .vsi-article__cover--right {
        float: none;
        width: 100%;
        margin: 0 0 24px;
    }
}

/* Vorig/volgend artikel onderaan de blogpagina. */
.vsi-article__nav {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid #d9dde5;
}

.vsi-article__nav-item {
    max-width: 46%;
}

.vsi-article__nav-item--next {
    margin-left: auto;
    text-align: right;
}

.vsi-article__nav-label {
    display: block;
    font-family: "futura-medium", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #a7a9a2;
    margin-bottom: 6px;
}

.vsi-article__nav a {
    font-family: "brandon", "Arial Black", sans-serif;
    font-size: 17px;
    line-height: 1.4;
    color: #6F8DB7;
    text-decoration: none;
}

.vsi-article__nav a:hover {
    opacity: 0.75;
}

/* "You may also like": twee andere artikelen onder het artikel. */
.vsi-article__related {
    margin-top: 64px;
}

.vsi-site .vsi-article__related-title {
    font-family: "brandon", "Arial Black", sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    margin-bottom: 36px;
}

.vsi-article__related-card img {
    width: 100%;
    aspect-ratio: 740 / 460;
    object-fit: cover;
    display: block;
    margin-bottom: 16px;
}

.vsi-site .vsi-article__related-card h3 {
    font-family: "brandon", "Arial Black", sans-serif;
    font-size: 20px;
    line-height: 1.4;
}

.vsi-article__related-card h3 a {
    color: #6F8DB7;
    text-decoration: none;
}

.vsi-article__related-card h3 a:hover {
    opacity: 0.75;
}

/* Artikeltekst als het originele thema (liquid-css-9): koppen h1/h2/h3 ZWART (h2 op
   inhoudspagina's 54px, h3 36px), h4/h5 in Brandon zwart, lopende tekst Futura #4a4a59.
   Het koppenfont was Idaho en is 2026-07-29 op verzoek Montserrat geworden. */
.vsi-content {
    color: #4a4a59;
    line-height: 1.8;
    /* De oude pb-leeskolom (max 800px) geldt hier niet: het origineel gebruikt de volledige
       containerbreedte (o.a. de tweekoloms rijen op /history). */
    max-width: none;
}

.vsi-site .vsi-content h2 {
    font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #000;
    font-size: clamp(38px, 3.8vw, 54px);
    line-height: 1;
    text-transform: uppercase;
    margin: 40px 0 22px;
}

.vsi-site .vsi-content h3 {
    font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #000;
    font-size: 36px;
    line-height: 1.34;
    margin: 30px 0 14px;
}

/* Kleinere sectiekop: in het origineel een h2 met font-size:36px + text-uppercase (o.a.
   "The building of large villas…" op /history). */
.vsi-site .vsi-content h2.vsi-h2--sub {
    font-size: 36px;
    line-height: 1.15;
}

/* In de tweekoloms rijen (o.a. /history) staat een kop bovenaan zijn kolom; het origineel
   zet daar margin-top:0 !important zodat kop en foto op gelijke hoogte uitlijnen. */
.vsi-site .vsi-content .row h2 {
    margin-top: 0;
}

.vsi-site .vsi-content h4 {
    font-family: "brandon", "Arial Black", sans-serif;
    color: #000;
    font-size: 28px;
    margin: 26px 0 12px;
}

.vsi-site .vsi-content h5 {
    font-family: "brandon", "Arial Black", sans-serif;
    color: #000;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 16px;
}

/* Links in lopende tekst: de linkkleuren van het originele thema
   (liquid-css-9.css: --color-link #bf492b, --color-link-hover #605800). */
.vsi-content a {
    color: #bf492b;
}

.vsi-content a:hover {
    color: #605800;
}

/* ---------- Lidmaatschapsformulier (About & Join), 1-op-1 met het originele CF7-formulier:
   velden met dunne rand #d5d6de en ruime padding, gouden Send-knop (#c19e2a). ---------- */
.vsi-memberform {
    max-width: 620px;
    margin-top: 10px;
}

.vsi-memberform p {
    margin: 0 0 18px;
}

.vsi-memberform label {
    display: block;
    font-family: "futura-medium", Arial, sans-serif;
    font-size: 16px;
    color: #4a4a59;
    margin-bottom: 6px;
}

/* Let op: Blazor's <InputText> rendert een <input> ZONDER type-attribuut, dus hier niet op
   [type=text] selecteren — anders blijven die velden op hun standaardbreedte staan. */
.vsi-memberform input:not([type="submit"]),
.vsi-memberform textarea {
    width: 100%;
    border: 1px solid #d5d6de;
    background: transparent;
    font-family: "futura-medium", Arial, sans-serif;
    font-size: 16px;
    color: #4a4a59;
    border-radius: 0;
    outline: none;
}

.vsi-memberform input:not([type="submit"]) {
    padding: 12px 32px;
}

.vsi-memberform textarea {
    padding: 16px 32px;
}

.vsi-memberform input:focus,
.vsi-memberform textarea:focus {
    border-color: #c19e2a;
}

.vsi-memberform__submit {
    background: #c19e2a;
    border: 1px solid #c19e2a;
    color: #fff;
    font-family: "futura-medium", Arial, sans-serif;
    font-size: 16px;
    border-radius: 0;
    padding: 12px 45px;
    cursor: pointer;
}

.vsi-memberform__submit:hover {
    opacity: 0.9;
}

.vsi-memberform__privacy {
    font-size: 13px;
    color: #808291;
}

.vsi-memberform .validation-message {
    display: block;
    color: #b3261e;
    font-size: 13px;
    margin-top: 4px;
}

.vsi-memberform__thanks {
    background: #eef4ec;
    border-left: 4px solid #c19e2a;
    padding: 16px 22px;
    font-size: 16px;
    color: #4a4a59;
    max-width: 620px;
}

.vsi-content img {
    max-width: 100%;
    height: auto;
}

/* Foto's in artikeltekst 1-op-1 met het origineel: strakke hoeken, geen filter en bovenaan
   de kolom uitgelijnd; gestapelde foto's in één kolom krijgen 30px tussenruimte. */
.vsi-content .pb-inline-foto {
    margin: 0 0 30px;
}

.vsi-content .pb-inline-foto__img {
    border-radius: 0;
    filter: none;
}

/* Fotobijschriften in artikeltekst: het origineel zet ze cursief in de lopende tekstkleur,
   niet vet en niet in een accentkleur. Geldt voor losse foto's én galerijen. */
.vsi-content .pb-inline-foto__caption,
.vsi-content .pb-moodboard__caption {
    padding: 10px 0 0;
    font-weight: 400;
    font-style: italic;
    font-size: 15px;
    line-height: 1.7;
    color: #4a4a59;
}

/* Fotogalerij in artikeltekst (de WordPress-galerijen van de blogartikelen): losse foto's
   naast elkaar op hun eigen verhouding — geen kaartje, geen kader en niet bijgesneden. */
.vsi-content .pb-moodboards {
    margin: 0 0 30px;
}

.vsi-content .pb-moodboard {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.vsi-content .pb-moodboard__img {
    aspect-ratio: auto;
    object-fit: initial;
    border-radius: 0;
    height: auto;
}

/* Foto's en galerijen lopen mee met de leeskolom van de tekst (zie de max-width hieronder). */
.vsi-content > .pb-inline-foto,
.vsi-content > .pb-moodboards {
    max-width: 800px;
}

/* Ruimte tussen de opeenvolgende tweekoloms rijen van /history (het origineel heeft daar
   25px-spacers plus de figure-marges van WordPress). */
.vsi-content > .row {
    margin-bottom: 24px;
}

/* Gewone tekstpagina's (about, privacy): het origineel gebruikt een smalle leeskolom.
   Alleen directe kinderen — de tweekoloms rijen en volle-breedte blokken van /history
   staan in eigen divs en blijven de volledige breedte houden. */
.vsi-content > p,
.vsi-content > h3,
.vsi-content > h4,
.vsi-content > h5,
.vsi-content > ul,
.vsi-content > ol {
    max-width: 800px;
}

/* ---------- Bouwstenen voor 1-op-1 inhoudspagina's (o.a. /history) ---------- */
/* Volle-breedte grijze band (zoals de SoHo-band): breekt uit de artikelcontainer. */
.vsi-content .vsi-band {
    margin: 70px calc(50% - 50vw) 0;
    background: #a7a9a2;
    padding: 100px max(22px, calc(50vw - 570px)) 60px;
}

.vsi-site .vsi-content .vsi-band h4 {
    color: #fff;
    margin-top: 0;
}

.vsi-content .vsi-band p {
    color: #fff;
    font-size: 18px;
    max-width: 860px;
}

/* Tweekoloms slot: zandkleurig blok links (witte tekst), grote grijze kop rechts. */
.vsi-content .vsi-split {
    margin: 0 calc(50% - 50vw);
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
}

.vsi-content .vsi-split__left {
    background: #d5bd96;
    padding: 60px 20px 60px max(20px, calc(50vw - 700px));
}

.vsi-site .vsi-content .vsi-split__left h3,
.vsi-content .vsi-split__left p {
    color: #fff;
}

.vsi-content .vsi-split__right {
    padding: 60px max(20px, calc(50vw - 700px)) 0 5vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.vsi-site .vsi-content .vsi-split__right h2 {
    color: #a7a9a2;
    font-size: clamp(42px, 5.4vw, 80px);
    line-height: 1;
    margin: 30px 0 60px;
}

@media (max-width: 991.98px) {
    .vsi-content .vsi-split {
        grid-template-columns: 1fr;
    }
}

/* ---------- Listing (hotels, apartments, bars & restaurants, shops, others) ---------- */
.vsi-listing {
    background: #d1dbea;
    padding: 60px 0;
}

/* Origineel: alleen de hotelspagina is lichtblauw; de andere overzichten zijn warmgrijs. */
.vsi-listing--grey {
    background: #a7a9a2;
}

.vsi-listing__intro {
    max-width: 1120px;
    margin: 0 auto 34px;
}

/* Tekst die de beheerder ONDER de vermeldingen zet (achter de [[bedrijven:…]]-shortcode). */
.vsi-listing__intro--after {
    margin: 10px auto 0;
}

.vsi-listing__row {
    display: flex;
    flex-wrap: wrap;
}

.vsi-listing__row > [class^="col-"] {
    margin-bottom: 30px;
}

.vsi-listing__block {
    position: relative;
    display: flex;
    background: #fff;
    height: 100%;
    /* Origineel: kaarthoogte volgt de tekstkolom, met ±224px als kleinste voorkomende hoogte. */
    min-height: 224px;
}

.vsi-listing__block--stacked {
    display: block;
}

.vsi-listing__featured {
    position: absolute;
    top: 0;
    right: 0;
    background: #eaad35;
    width: 40px;
    height: 40px;
    clip-path: polygon(0 0, 100% 99%, 100% 0);
    color: #fff;
    font-size: 13px;
    text-align: right;
    padding: 2px 5px 0 0;
    z-index: 2;
}

.vsi-listing__img {
    width: 50%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center center;
}

.vsi-listing__img img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 992px) {
    /* Op het origineel vult de foto de halve kaart als cover-achtergrond en is de <img>
       volledig uit de layout (display:none): de TEKSTkolom bepaalt de kaarthoogte en de
       foto wordt daarop gekropt. visibility:hidden was niet genoeg — dan rekte de
       onzichtbare foto de kaart alsnog op tot zijn eigen hoogte. */
    .vsi-listing__block:not(.vsi-listing__block--stacked) .vsi-listing__img img {
        display: none;
    }
}

.vsi-listing__block--stacked .vsi-listing__img {
    width: 100%;
    aspect-ratio: 319 / 238;
}

.vsi-listing__body {
    width: 50%;
    padding: 22px;
}

.vsi-listing__block--stacked .vsi-listing__body {
    width: 100%;
}

/* Kaartkoppen exact als het origineel: adresregel én naam in Brandon, zonder letterspatiëring. */
.vsi-site .vsi-listing__address {
    font-size: 15px;
    color: #B9CFED;
    margin-bottom: 0;
    font-family: "brandon", "Arial Black", sans-serif;
    letter-spacing: normal;
}

.vsi-site .vsi-listing__title {
    font-size: 20px;
    color: #6F8DB7;
    margin: 0;
    letter-spacing: normal;
}

.vsi-listing__title a {
    color: #6F8DB7;
    text-decoration: none;
}

.vsi-listing__body p {
    margin-top: 6px;
    line-height: 20px;
    font-size: 15px;
    color: #4a4a59;
}

.vsi-listing__more {
    font-family: "brandon", "Arial Black", sans-serif;
    color: #6F8DB7;
    font-size: 14px;
    display: block;
    text-align: right;
    text-decoration: none;
    margin-top: 10px;
}

.vsi-listing__more:hover {
    opacity: 0.75;
}


/* ---------- Detailpagina (bedrijf / event) ---------- */
.vsi-detail__row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.vsi-detail__row > [class^="col-"] {
    padding: 0;
}

.vsi-detail__side {
    background: #a8b7ce;
    padding-left: 9vw;
    height: 100%;
    color: #fff;
}

.vsi-detail__side--shop {
    background: #a0605a;
}

.vsi-detail__photo img {
    width: 100%;
    height: auto;
    display: block;
}

.vsi-detail__list {
    padding: 50px 80px 50px 0;
    color: #fff;
}

.vsi-site .vsi-detail__list h3 {
    text-transform: uppercase;
    margin: 0 0 0.5em;
    color: #fff;
    font-size: 24px;
}

.vsi-detail__list ul {
    padding: 0;
    list-style-position: inside;
    column-count: 2;
    column-gap: 22px;
    margin-bottom: 0;
}

.vsi-detail__list a {
    color: #fff;
}

/* Weekagenda en events van deze zaak in de zijkolom: één kolom, want zo'n regel bestaat uit
   meerdere delen (dag, naam, tijd) die in de tweekolomsopmaak van de lijstjes zouden breken. */
.vsi-detail__list--rows ul {
    column-count: 1;
    list-style: none;
}

.vsi-detail__list--rows li {
    margin-bottom: 14px;
    line-height: 20px;
}

.vsi-detail__days,
.vsi-detail__what,
.vsi-detail__when {
    display: block;
}

.vsi-detail__days {
    font-family: "brandon", "Arial Black", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
}

.vsi-detail__what {
    font-weight: 600;
}

.vsi-detail__block {
    font-style: normal;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    opacity: 0.85;
    margin-left: 6px;
}

.vsi-detail__when {
    font-size: 14px;
}

.vsi-detail__all {
    display: inline-block;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.vsi-detail__main {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vsi-detail__heading {
    padding: 3rem 9rem 3.8rem 5rem;
}

.vsi-site .vsi-detail__heading h1 {
    font-size: 48px;
    color: rgb(138, 159, 193);
    text-transform: uppercase;
    margin: 0 0 10px;
    line-height: 1.05;
}

.vsi-detail__description {
    margin-bottom: 2.6rem;
}

.vsi-linkline--dark a {
    color: #6F8DB7;
}

/* Locatie/contact-blok onder de detailpagina. */
.vsi-detail-location {
    background: #a8b7ce;
}

.vsi-detail__contact {
    padding: 70px 9vw;
    color: #fff;
}

.vsi-site .vsi-detail__contact h3 {
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1em;
    font-size: 24px;
}

.vsi-detail__contact p {
    margin-bottom: 6px;
    line-height: 1.6;
}

.vsi-detail__contact a {
    color: #fff;
    text-decoration: none;
}

.vsi-detail__map iframe {
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
    display: block;
}

.vsi-detail__map .vsi-map__note {
    color: #fff;
}

/* "More places to stay..." onder de detailpagina. */
.vsi-detail-other {
    padding: 40px 0;
}

.vsi-detail-other__inner {
    position: relative;
    padding: 70px 0;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
}

.vsi-site .vsi-detail-other__inner > h3 {
    color: #a7a9a2;
    text-transform: uppercase;
    font-size: 30px;
    margin-bottom: 30px;
}

/* ---------- Events-overzicht ---------- */
.vsi-events {
    padding: 70px 0;
    background: #fff;
}

/* Categoriechips exact als het origineel: witte pillen met #6f8db7-rand en plusje,
   actief = gevuld blauw; nummer 5 en 6 verschijnen pas na "More filters". */
.event__categories {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
}

.event__categories > li {
    display: inline-block;
    margin: 0 22px 10px 0;
}

.event__cat {
    background: #fff;
    border: 1px solid #6f8db7;
    border-radius: 5px;
    display: inline-block;
    padding: 4px 40px 4px 20px;
    position: relative;
    cursor: pointer;
    color: #4a4a59;
    text-decoration: none;
    font-family: "futura-medium", Arial, sans-serif;
    font-size: 16px;
}

.event__cat > i {
    font-style: normal;
    font-size: 22px;
    position: absolute;
    top: 2px;
    right: 10px;
    color: #6f8db7;
    font-weight: 700;
}

.event__cat--active {
    background: #6f8db7;
    color: #fff;
}

.event__cat--active > i {
    color: #fff;
}

.event__categories > li:nth-child(n+5):not(.event_cat__more) {
    display: none;
}

.event__categories--all > li:nth-child(n+5):not(.event_cat__more) {
    display: inline-block;
}

.event_cat__more .event__cat {
    padding: 4px 20px 4px 46px;
}

.event_cat__more .event__cat > i {
    left: 16px;
    right: auto;
    font-size: 16px;
    top: 5px;
}

/* Datum- en zoekbalk exact als het origineel. */
.event_datesearch__filter {
    margin-bottom: 32px;
}

.date__filter {
    border: 1px solid #d6d6d6;
    padding: 10px 30px;
    position: relative;
}

.date__filter summary {
    list-style: none;
    color: #337ab7;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 16px;
    cursor: pointer;
    font-family: "futura-medium", Arial, sans-serif;
}

.date__filter summary::-webkit-details-marker {
    display: none;
}

.dateselect_popup {
    position: absolute;
    top: 50px;
    left: 16px;
    z-index: 9;
    background: #fff;
    box-shadow: 0 0 10px 2px rgb(0 0 0 / 7%);
    min-width: 220px;
    padding-bottom: 10px;
}

.dateselect_popup > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dateselect_popup > ul > li > a {
    text-align: center;
    display: block;
    border-bottom: 1px solid #e4e4e4;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 8px 0;
    color: #337ab7;
    text-decoration: none;
}

.dateselect_popup > ul > li > a:hover {
    background: #23527c;
    color: #fff;
}

.daterange__picker {
    padding: 10px 12px 0;
    display: grid;
    gap: 6px;
    font-size: 13px;
}

.vsi-events__applyrange {
    border: 1px solid #6f8db7;
    background: #fff;
    color: #6f8db7;
    border-radius: 4px;
    padding: 3px 10px;
    cursor: pointer;
}

.events__search {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
}

.events__search input[type="text"] {
    width: 100%;
    border: 1px solid #d6d6d6;
    padding: 10px 30px 10px 14px;
    outline: none;
    font-family: "futura-medium", Arial, sans-serif;
}

.events__search button[type="submit"] {
    border: 0;
    background: none;
    position: absolute;
    top: 8px;
    right: 6px;
    font-size: 18px;
    color: #23527c;
    cursor: pointer;
}

/* Schakelaar "Show past events": zelfde blauwe filtertaal als de categoriechips,
   maar als vinkvakje zodat het als aan/uit leest en niet als extra categorie. */
.vsi-events__pasttoggle {
    margin: -18px 0 26px;
}

.vsi-events__pasttoggle-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #4a4a59;
    text-decoration: none;
    font-family: "futura-medium", Arial, sans-serif;
    font-size: 16px;
    cursor: pointer;
}

.vsi-events__pasttoggle-box {
    width: 20px;
    height: 20px;
    border: 1px solid #6f8db7;
    border-radius: 3px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: #fff;
}

.vsi-events__pasttoggle-link--on .vsi-events__pasttoggle-box {
    background: #6f8db7;
}

.vsi-events__none {
    font-size: 16px;
    color: #4a4a59;
}

.vsi-events__none-link {
    color: #337ab7;
    margin-left: 6px;
}

/* Gouden weekagenda-paneel (#CB9C4E), 1-op-1 met .slider__events.restaurnt__based. */
.vsi-goldpanel {
    background: #CB9C4E;
    padding: 20px;
    width: 100%;
    min-height: 400px;
}

.vsi-goldpanel__day {
    margin-bottom: 14px;
}

.vsi-goldpanel__day select {
    background: #CB9C4E;
    border: 1px solid #fff;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 10px;
    width: 100%;
    font-family: "futura-medium", Arial, sans-serif;
}

.vsi-goldpanel__block h5 {
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    margin: 14px 0 10px;
}

.vsi-goldpanel__block p {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 10px;
}

.vsi-goldpanel__block p a {
    color: #fff;
}

.vsi-goldpanel__name {
    display: block;
    font-weight: 600;
}

.vsi-goldpanel__block p > span:not(.vsi-goldpanel__name) {
    margin-right: 18px;
}

.vsi-events__intro {
    margin-bottom: 34px;
}

.vsi-events__item {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #e3e6ee;
    padding: 18px 0;
    align-items: center;
}

.vsi-events__photo {
    flex: 0 0 220px;
}

.vsi-events__photo img {
    width: 220px;
    height: 150px;
    object-fit: cover;
    display: block;
}

.vsi-site .vsi-events__name {
    font-size: 22px;
    text-transform: uppercase;
    margin: 0 0 6px;
}

.vsi-events__name a {
    color: #6F8DB7;
    text-decoration: none;
}

.vsi-events__meta {
    margin: 0;
    color: #808291;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}

.vsi-events__body {
    flex: 1;
}

.vsi-blog__intro {
    max-width: 900px;
    margin: 0 auto 34px;
    text-align: center;
}

/* ---------- Afsluitende CTA-band ---------- */
.vsi-cta {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #ad7e78;
    background-image: url("/uploads/media/page-cta.png");
    background-size: cover;
    background-position: center center;
    padding: 60px 20px;
}

.vsi-cta__container {
    width: 100%;
    max-width: 870px;
    position: relative;
    padding-top: 40px;
}

.vsi-cta__container::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
}

.vsi-site .vsi-cta__quote {
    color: #fff;
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 1.25;
    margin: 0 0 26px;
}

.vsi-cta__link a {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: "futura-medium", Arial, sans-serif;
    font-size: 13px;
    text-decoration: none;
}

/* ---------- Mobiel ---------- */
@media (max-width: 991.98px) {
    .vsi-pagehero {
        padding: 150px 0 40px;
    }

    .vsi-listing__block {
        display: block;
    }

    .vsi-listing__img {
        width: 100%;
        aspect-ratio: 319 / 238;
    }

    .vsi-listing__body {
        width: 100%;
    }

    .vsi-detail__side {
        padding-left: 0;
    }

    .vsi-detail__list {
        padding: 30px 20px;
    }

    .vsi-detail__list ul {
        column-count: 1;
    }

    .vsi-detail__heading {
        padding: 30px 24px;
    }

    .vsi-detail__contact {
        padding: 40px 24px;
    }

    .vsi-events__item {
        display: block;
    }

    .vsi-events__photo img {
        width: 100%;
        height: auto;
        margin-bottom: 12px;
    }
}

/* Fotogalerij binnen een detailpagina: vierkante foto's zonder bijschrift, zoals het
   galerijblok op de originele detailpagina's. */
.vsi-detail__description .pb-moodboard__img {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
}

.vsi-detail__description .pb-moodboard__caption {
    display: none;
}

/* ---------- 'Naar boven'-knop ----------
   Rustige, vlakke stijl in lijn met de rest van de site: een halfdoorzichtige cirkel in het
   accentblauw #6F8DB7 van het originele thema — dezelfde kleur als de blog-/listingtitels, de
   eventcategorieën en de knop "Cookies toestaan" bij de kaart — met een dun wit randje en een
   slanke witte pijl, net als de witte lijnen en pijltjes in de header/slider. Verschijnt pas na
   scrollen — js/back-to-top.js zet .vsi-totop--visible; het soepel scrollen doet
   `scroll-behavior: smooth` op <html>. */
.vsi-totop {
    position: fixed;
    right: clamp(16px, 3vw, 42px);
    bottom: clamp(16px, 3vw, 42px);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #fff;
    background: rgb(111 141 183 / 75%);
    border: 1px solid rgb(255 255 255 / 70%);
    box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
    backdrop-filter: blur(2px);
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.35s ease, visibility 0.35s;
}

.vsi-totop--visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.vsi-totop:hover,
.vsi-totop:focus-visible {
    color: #fff;
    background: rgb(111 141 183 / 95%);
    transform: translateY(-3px);
}

/* Dezelfde zachte schaduw als de witte pijltjes/lijnen in de header en de slider, zodat de pijl
   ook op een lichte sectie leesbaar blijft. */
.vsi-totop__icon {
    display: block;
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 25%));
}

/* Zolang de cookiebanner nog in beeld staat (die is op smalle schermen schermbreed), schuift de
   knop erboven zodat hij de knoppen van de banner niet afdekt. */
@media (max-width: 767.98px) {
    .vsi-totop {
        width: 48px;
        height: 48px;
    }

    #pb-consent:not([hidden]) ~ .vsi-totop {
        bottom: 210px;
    }
}

/* Bezoekers die bewegingsarme weergave hebben ingesteld: geen animatie en geen 'vliegende'
   pagina bij het klikken op de knop. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .vsi-totop {
        transition: none;
    }

    .vsi-totop:hover,
    .vsi-totop:focus-visible {
        transform: none;
    }
}

/* ---------- Deelnemersgalerij ([[deelnemers]] / [[members]], o.a. onderaan About & Join) ----------
   De betalende ("uitgelichte") deelnemers als schuivende galerij: vier tegels per slide, bediend
   door dezelfde hero-slider.js als de homepageslider. De band gebruikt het licht­blauw van de
   overzichtspagina's (#d1dbea), de tegels het gouden hoekje met sterretje van een betaald account
   en het accentblauw #6F8DB7 van het thema voor de pijltjes en bolletjes.
   Alle regels staan bewust onder .vsi-members: .vsi-content a en .vsi-content img zouden anders
   met hun hogere specificiteit de linkkleur en de fotohoogte van de tegels overnemen. */
.vsi-members {
    position: relative;
    margin: 44px 0 14px;
    padding: 32px 32px 26px;
    background: #d1dbea;
}

/* Alle slides in dezelfde grid-cel: de band houdt zo de hoogte van de hoogste slide en
   er is geen absolute positionering (en dus geen ingeklapte band) nodig. */
.vsi-members__viewport {
    display: grid;
}

.vsi-members .vsi-members__slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease;
}

/* Zonder JavaScript blijft de eerste slide staan: die krijgt de klasse al vanaf de server. */
.vsi-members .vsi-members__slide.vsi-slide--active {
    opacity: 1;
    visibility: visible;
}

.vsi-members .vsi-members__card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #181b31;
    text-decoration: none;
    box-shadow: 0 6px 18px rgb(24 27 49 / 18%);
}

.vsi-members .vsi-members__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.vsi-members .vsi-members__card:hover .vsi-members__img {
    transform: scale(1.07);
}

/* Vermelding zonder foto: een rustig vlak met de beginletter — in een galerij valt een
   "foto niet gevonden"-melding harder op dan de vermelding zelf. */
.vsi-members .vsi-members__img--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #a8b7ce;
    color: #fff;
    font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 54px;
    line-height: 1;
}

/* Hetzelfde gouden hoekje met sterretje als op de overzichtstegels van een betaald account. */
.vsi-members .vsi-members__star {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 40px;
    height: 40px;
    background: #eaad35;
    clip-path: polygon(0 0, 100% 99%, 100% 0);
    color: #fff;
    font-size: 13px;
    text-align: right;
    padding: 2px 5px 0 0;
}

.vsi-members .vsi-members__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 42px 14px 12px;
    background: linear-gradient(to top, rgb(24 27 49 / 92%), rgb(24 27 49 / 0%));
}

.vsi-members .vsi-members__cat {
    display: block;
    font-family: "brandon", "Arial Black", sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #eaad35;
}

.vsi-members .vsi-members__name {
    display: block;
    font-family: "brandon", "Arial Black", sans-serif;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    transition: color 0.2s ease;
}

.vsi-members .vsi-members__card:hover .vsi-members__name {
    color: #eaad35;
}

.vsi-members__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
}

.vsi-members__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgb(111 141 183 / 80%);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.vsi-members__arrow:hover {
    background: #6f8db7;
    transform: scale(1.08);
}

.vsi-members__dots {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Knop 26px (goed aan te tikken) met een bolletje van 10px erin. */
.vsi-members__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.vsi-members__dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border: 1px solid #6f8db7;
    border-radius: 50%;
    background: rgb(255 255 255 / 65%);
    transition: background 0.2s ease;
}

.vsi-members__dot.vsi-dot--active::before {
    background: #6f8db7;
}

@media (max-width: 991.98px) {
    .vsi-members {
        padding: 22px 16px 18px;
    }

    .vsi-members .vsi-members__slide {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 575.98px) {
    /* Op een tegel van ±170px zou het hoekje van 40px een kwart van de foto afdekken. */
    .vsi-members .vsi-members__star {
        width: 30px;
        height: 30px;
        font-size: 11px;
        padding: 1px 4px 0 0;
    }

    .vsi-members .vsi-members__caption {
        padding: 34px 10px 9px;
    }

    .vsi-members .vsi-members__name {
        font-size: 13px;
    }

    .vsi-members .vsi-members__cat {
        font-size: 10px;
        letter-spacing: 1px;
    }
}

/* Bewegingsarme weergave: wel wisselen, geen fade en geen inzoomende foto. */
@media (prefers-reduced-motion: reduce) {
    .vsi-members .vsi-members__slide,
    .vsi-members .vsi-members__img,
    .vsi-members .vsi-members__name,
    .vsi-members__arrow,
    .vsi-members__dot::before {
        transition: none;
    }

    .vsi-members .vsi-members__card:hover .vsi-members__img {
        transform: none;
    }
}

/* ---------- Stijlgids (/beheer/paginas): de voorbeelden staan in .vsi-site/.vsi-content en
   krijgen dus exact de typografie van de website. Alleen de blokmarges worden hier weggehaald:
   de ruime bovenmarge van de site (h2 40px) zou in een voorbeeldblokje enkel een gat onder het
   label geven. Deze regels staan bewust achteraan, ná de .vsi-site-typografie, zodat ze bij
   gelijke specificiteit winnen. ---------- */
.vsi-site .pb-styleguide-sample > h2,
.vsi-site .pb-styleguide-sample > h3,
.vsi-site .pb-styleguide-sample > h4,
.vsi-site .pb-styleguide-sample > h5,
.vsi-site .pb-styleguide-sample > p,
.vsi-site .pb-styleguide-sample > ul,
.vsi-site .pb-styleguide-sample > ol {
    margin-top: 0;
}

.vsi-site .pb-styleguide-sample > :last-child {
    margin-bottom: 0;
}

/* ---------- Beheer: mediapicker-veld en vertaal-spinner (blog/bedrijven/events/instellingen) ---------- */
.pb-mediafield {
    padding: 0.75rem 1rem;
}

/* Overlay met spinner terwijl ChatGPT vertaalt: blokkeert de hele beheerpagina zodat er
   niet tegelijk doorgewerkt kan worden in de tekst die zo overschreven wordt. */
.pb-admin-busy {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
}

.pb-admin-busy__box {
    background: #fff;
    border-radius: var(--pb-radius);
    border: 1px solid #e5e5e5;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    padding: 1.5rem 2.5rem;
    text-align: center;
}

/* ---------- Beheer: bewerkdialoog + actiekolom in de overzichten (2026-07-26) ---------- */

/* Het bewerkscherm stond onder de grid en viel bij een langere lijst buiten beeld. Het staat nu
   in deze modale laag. z-index 1200: ruim boven de pagina, maar ver onder de Telerik-popups
   (fotokiezer, keuzelijsten, voorbeeld) en onder de vertaal-spinner (20000), zodat die er
   bovenop blijven staan. */
.pb-editdialog {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2vh 1rem;
    background: rgba(35, 30, 35, 0.45);
    overflow-y: auto;
}

.pb-editdialog__panel {
    background: #fff;
    border-radius: var(--pb-radius);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.32);
    width: min(1180px, 100%);
    max-height: 96vh;
    display: flex;
    flex-direction: column;
}

.pb-editdialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #e9e4e8;
}

.pb-editdialog__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.pb-editdialog__close {
    border: 0;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    /* Ruim 48px: ook met een vinger goed te raken. */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
}

.pb-editdialog__close:hover {
    background: #f1edf1;
}

/* Het formulier zelf scrollt; de opslaan-balk (.pb-admin-savebar) blijft daarbinnen plakken. */
.pb-editdialog__body {
    padding: 1.25rem;
    overflow-y: auto;
}

/* De drie knoppen (bewerken / verwijderen / dupliceren) in de laatste kolom van elk overzicht. */
.pb-rowactions {
    display: inline-flex;
    gap: 0.25rem;
}

.pb-rowaction {
    /* Ook als <a> gebruikt (Pagina's): daarom expliciet inline-flex + centreren. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0d9df;
    background: #fff;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    line-height: 1;
    font-size: 0.95rem;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}

.pb-rowaction:hover {
    background: #f4eff3;
    border-color: #c9bdc6;
}

.pb-rowaction--delete:hover {
    background: #fdeaea;
    border-color: #e3b5b5;
}

/* Een rij in een overzicht is aanklikbaar (2026-08-02): elke grid in /beheer opent via
   OnRowClick het bewerkscherm van de aangeklikte rij, dus toont de muisaanwijzer dat ook.
   Een overzicht dat niets te bewerken heeft (het dashboard, de lijst met CSS-back-ups) krijgt
   Class="pb-grid-static" en houdt de gewone aanwijzer. */
.k-grid:not(.pb-grid-static) .k-master-row {
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Taalkeuze in /beheer (2026-07-27): overal één taal tegelijk in beeld, met
   vlagknoppen om te wisselen (BeheerTaalKeuze) en vlaggetjes per rij om naar de
   andere taalversie te springen (PbTaalVlaggen).
   --------------------------------------------------------------------------- */
.pb-vlag {
    width: 22px;
    height: 11px;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    flex: none;
}

.pb-taalkeuze {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pb-taalkeuze__label {
    font-weight: 600;
}

.pb-taalkeuze__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid #c9bdc6;
    background: #fff;
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    line-height: 1;
    font-size: 0.95rem;
    cursor: pointer;
}

.pb-taalkeuze--compact .pb-taalkeuze__btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.pb-taalkeuze__btn:hover:not(:disabled) {
    background: #f4eff3;
    border-color: #222222;
}

/* De gekozen taal is duidelijk gevuld: hij bepaalt wat je in het hele beheer ziet. */
.pb-taalkeuze__btn--selected {
    background: #222222;
    border-color: #222222;
    color: #fff;
    font-weight: 600;
}

.pb-taalkeuze__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Stipje achter de vlag: die taal bestaat nog niet / is nog leeg. */
.pb-taalkeuze__btn--empty .pb-taalkeuze__code {
    opacity: 0.7;
}

.pb-taalkeuze__mark {
    color: #c02a37;
    font-size: 1.1rem;
}

.pb-taalkeuze__hint {
    font-size: 0.9rem;
}

.pb-taalvlaggen {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
}

.pb-taalvlag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0d9df;
    background: #fff;
    border-radius: 6px;
    width: 32px;
    height: 26px;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}

.pb-taalvlag:hover {
    background: #f4eff3;
    border-color: #c9bdc6;
}

.pb-taalvlag--current {
    border-color: #222222;
    box-shadow: inset 0 0 0 1px #222222;
}

/* Nog leeg (wel te openen) versus helemaal niet aanwezig (niet aanklikbaar). */
.pb-taalvlag--empty .pb-vlag {
    opacity: 0.45;
}

.pb-taalvlag--missing {
    cursor: default;
    background: #f6f4f5;
}

.pb-taalvlag--missing .pb-vlag {
    opacity: 0.3;
}

/* Ontbrekende taalversie die met één klik aangemaakt kan worden: doffe vlag met een + ernaast. */
.pb-taalvlag--create {
    width: 44px;
    gap: 0.15rem;
    border-style: dashed;
}

.pb-taalvlag--create .pb-vlag {
    opacity: 0.45;
}

.pb-taalvlag__plus {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: #222222;
}

/* ------------------------------------------------------------------
   Bezoekersstatistieken (/beheer/statistieken)
   Bewust eigen, eenvoudige staafdiagrammen in CSS in plaats van een grafiekcomponent:
   het zijn tellingen naast elkaar, en zo blijft het scherm licht en zonder extra afhankelijkheid.
   ------------------------------------------------------------------ */

.pb-stats-live .pb-admin-stat__value {
    color: #157347;
}

.pb-stats-note {
    margin-top: 1.5rem;
}

.pb-stats__subhead {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #222222;
}

/* Staafdiagram: één kolom per uur/dag, de hoogste staaf is 100% (--pb-bar per staaf). */
.pb-stats-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    overflow-x: auto;
    padding-top: 0.5rem;
}

.pb-stats-bars__item {
    display: flex;
    flex: 1 1 0;
    min-width: 26px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
}

/* De hoogte komt als px mee uit de pagina (--pb-barheight): een percentage zou een vaste
   ouderhoogte vragen, en dan valt de staaf weg zodra de labels meer of minder ruimte nemen. */
.pb-stats-bars__bar {
    display: block;
    width: 100%;
    max-width: 34px;
    min-height: 2px;
    height: var(--pb-barheight, 2px);
    background: #6f8db7;
    border-radius: 3px 3px 0 0;
}

.pb-stats-bars__value {
    font-size: 0.75rem;
    color: #4a4a59;
}

.pb-stats-bars__label {
    font-size: 0.7rem;
    color: #797b86;
    white-space: nowrap;
}

/* Top-lijst met een balk achter elke regel; de balk is een achtergrond, geen apart element. */
.pb-stats-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pb-stats-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.2rem;
    background: linear-gradient(to right, #dce5f1 var(--pb-bar, 0%), transparent var(--pb-bar, 0%));
    border-radius: 3px;
}

.pb-stats-list__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-stats-list__count {
    flex: 0 0 auto;
    font-weight: 700;
}

/* Tijdlijn van één bezoek (bekeken pagina's en klikken). */
.pb-stats__timeline {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.pb-stats__timeline li {
    display: flex;
    gap: 0.75rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #eceff3;
}

.pb-stats__time {
    flex: 0 0 70px;
    font-variant-numeric: tabular-nums;
    color: #797b86;
}

.pb-stats__what {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}