/* =====================================================================
   PINK Beheer — site styling (BEM-ish, CSS custom properties for theming)
   Brand look of the old pinkbeheer.com: pink #ff3399, Montserrat 300/700,
   grey #737373. Montserrat is SELF-HOSTED (variable font, wwwroot/fonts) so
   no external font request happens before consent (privacy fix retained).
   ===================================================================== */

@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;
}

:root {
    --pb-pink: #ff3399;
    --pb-pink-dark: #e01f85;
    --pb-pink-soft: #ffe9f4;
    --pb-ink: #2b2b33;
    --pb-ink-soft: #737373;
    --pb-bg: #ffffff;
    --pb-bg-tint: #f7f7f7;
    /* Header and footer colours, adjustable in /beheer/colors (BrandColors overrules these). */
    --pb-header-bg: #ffffff;
    --pb-header-text: #2b2b33;
    --pb-header-accent: #ff3399;
    --pb-header-accent-soft: #ffe9f4;
    --pb-footer-bg: #2b2b33;
    --pb-footer-text: #e9e4e7;
    --pb-footer-heading: #ffffff;
    --pb-footer-link: #f9c7e2;
    --pb-footer-link-hover: #ffffff;
    --pb-footer-muted: #b9b2b6;
    /* Link and inline-code colours, adjustable in /beheer/colors. Bootstrap paints a bare <a>
       blue (#0d6efd) and inline <code> pink (#d63384); both are overruled below so no colour
       outside the house style can appear anywhere on the site. */
    --pb-link: #ff3399;
    --pb-link-hover: #e01f85;
    --pb-code: #e01f85;
    /* Colours of the /beheer shell (sidebar, language buttons, manual bar), adjustable on the tab
       "Beheeromgeving" of /beheer/colors. */
    --pb-admin-bg: #2b2b33;
    --pb-admin-text: #ded8dd;
    --pb-admin-hover: #5a2046;
    --pb-admin-accent: #ff3399;
    /* Colours of the yes/no switches in /beheer (PbToggle): green when on, red when off, so an
       administrator sees at a glance in an overview what is switched on. */
    --pb-toggle-on: #2e7d32;
    --pb-toggle-off: #c0392b;
    --pb-toggle-text: #ffffff;
    --pb-radius: 6px;
    --pb-font: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    /* Titelopmaak, instelbaar op het tabblad "Titels" van /beheer/colors (HeadingStyles overrulet
       deze waarden). H1 is de paginatitel in de kop van de pagina, H2/H3/H4 zijn de koppen in de
       paginatekst zelf. De kleur verwijst standaard naar de algemene tekstkleur: laat een beheerder
       het kleurveld leeg, dan volgt de titel gewoon die kleur, zoals vóór dit scherm ook het geval
       was. */
    --pb-h1-color: var(--pb-ink);
    --pb-h1-size: 2.3rem;
    --pb-h1-weight: 700;
    --pb-h1-spacing: 0em;
    --pb-h1-transform: none;
    --pb-h1-align: left;
    --pb-h2-color: var(--pb-ink);
    --pb-h2-size: 1.45rem;
    --pb-h2-weight: 700;
    --pb-h2-spacing: 0em;
    --pb-h2-transform: none;
    --pb-h2-align: left;
    --pb-h3-color: var(--pb-ink);
    --pb-h3-size: 1.2rem;
    --pb-h3-weight: 700;
    --pb-h3-spacing: 0em;
    --pb-h3-transform: none;
    --pb-h3-align: left;
    --pb-h4-color: var(--pb-ink);
    --pb-h4-size: 1.05rem;
    --pb-h4-weight: 700;
    --pb-h4-spacing: 0em;
    --pb-h4-transform: none;
    --pb-h4-align: left;
}

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;
}

/* A link or a piece of inline code without its own styling follows the house style, not the
   Bootstrap defaults (blue link, pink code). app.css is loaded after bootstrap.min.css, so these
   two rules win; /beheer/colors can change both colours without touching a stylesheet. */
a {
    color: var(--pb-link);
}

a:hover,
a:focus-visible {
    color: var(--pb-link-hover);
}

code {
    color: var(--pb-code);
}

/* Public site typography: ONE typeface (Montserrat) with a calm weight ladder 500/600/700.
   Montserrat 400 reads as a hairline next to the bold headings, which made the page look as if the
   typeface changed halfway down. The admin (EmptyLayout/Telerik) keeps its own defaults. */
.pb-site {
    font-weight: 500;
}

.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-header-bg);
    border-bottom: 3px solid var(--pb-header-accent);
    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-header-text);
    font-weight: 600;
    border-radius: 8px;
}

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

.pb-nav__link--lang {
    border: 2px solid var(--pb-header-accent);
    color: var(--pb-header-accent);
    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: var(--pb-header-bg);
    border: 1px solid #eee;
    border-top: 3px solid var(--pb-header-accent);
    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-header-text);
    font-weight: 600;
    white-space: nowrap;
}

.pb-nav__sublink:hover,
.pb-nav__sublink--active {
    color: var(--pb-header-accent);
    background: var(--pb-header-accent-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-header-accent);
        border-radius: 2px;
    }

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

    .pb-nav__toggle-checkbox:checked ~ .pb-nav {
        display: block;
        /* The header is sticky, so the open menu does not scroll with the page:
           cap it to the space below the header bar and scroll inside the menu,
           otherwise the last items (Contact, EN) are unreachable on a phone. */
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
    }

    .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 ---------- */
/* The ORIGINAL old-site frontpage photo: the pink beach with the swing (bg_blok_quote.jpg,
   same 1920x500 crop the old Revolution Slider used). The dark wash is kept as light as possible so
   the beach stays as bright and 'sparkling' as on the old site; legibility now comes from a stronger
   text-shadow instead of a darker photo. */
.pb-hero {
    /* De foto komt uit de instelling "Foto homepage" (Home.razor zet --pb-hero-image inline). Is er
       niets gekozen, dan blijft de foto van het ontwerp hieronder staan. */
    background:
        linear-gradient(rgba(25, 18, 22, 0.16), rgba(25, 18, 22, 0.10)),
        var(--pb-hero-image, url("../uploads/media/hero-think-pink.jpg")) center / cover no-repeat;
    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);
    /* De film ligt binnen deze strook en mag er niet buiten steken. */
    position: relative;
    overflow: hidden;
}

/* De film in de strook: hij vult de hele strook en ligt onder de tekst. Hij begint onzichtbaar en
   komt pas in beeld zodra hij echt speelt (hero-video.js zet is-playing), zodat een bezoeker nooit
   een zwart vlak ziet waar de foto hoorde te staan. De overgang duurt even lang als FADE_SECONDS
   in hero-video.js; blijven die twee niet gelijk, dan is de sprong naar het begin weer zichtbaar. */
.pb-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Welk stuk van de film te zien is als hij breder is dan de strook. Op een gewoon scherm is dat
       het midden; op een telefoon mag de beheerder hem opzij schuiven (zie de telefoonopmaak
       onderaan dit bestand en de instelling "Film opzij schuiven op mobiel"). */
    object-position: 50% center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    /* De donkere waas van de strook zit in de background van .pb-hero en ligt dus onder de film;
       daarom krijgt de film hem zelf, anders wordt de tekst op een licht beeld onleesbaar. Een film
       wisselt van beeld en is daarmee onvoorspelbaarder dan de vaste foto, dus hij mag iets verder
       omlaag dan de waas op de foto: het luchtbeeld met veel wit en fel groen liet de ondertitel
       anders wegvallen. */
    filter: brightness(0.8);
}

.pb-hero__video.is-playing {
    opacity: 1;
}

/* De laatste seconde: de film vervaagt naar de foto eronder en komt bij de herhaling weer op, zodat
   de sprong van het laatste beeld naar het eerste niet te zien is. */
.pb-hero__video.is-playing.is-ending {
    opacity: 0;
}

/* De tekst ligt boven de film. */
.pb-hero__content {
    position: relative;
    z-index: 1;
}

/* De kop en de samenvatting van de strook kunnen op een telefoon een kortere tekst krijgen (de
   instellingen "Kop homepage op mobiel" en "Samenvatting homepage op mobiel"). Beide versies staan
   in dezelfde h1 en dezelfde alinea, zodat de pagina precies één h1 houdt; hier wordt gekozen welke
   ervan te zien is. Is er geen korte versie ingevuld, dan draagt de gewone tekst de klasse
   --wide niet en blijft ze dus overal staan. */
.pb-hero__text--narrow {
    display: none;
}

/* Hier stond een @media (prefers-reduced-motion: reduce)-blok dat de film op display:none zette.
   Dat is er op 2 september 2026 uitgehaald, want die voorkeur zegt op Windows niet wat ze lijkt te
   zeggen: staan de animatie-effecten van Windows uit (de standaard op Windows Server, en gebruikelijk
   op een 'performance'-instelling en in een extern bureaublad), dan meldt Chrome
   prefers-reduced-motion: reduce voor een bezoeker die daar nooit om gevraagd heeft. Op deze machine
   gemeten: SPI_GETCLIENTAREAANIMATION staat op False, en daardoor bleef de strook leeg terwijl
   dezelfde pagina in een kale browser gewoon speelde. De film speelt nu voor iedereen op een breed
   scherm; databesparing en een echt trage verbinding blijven wel de foto tonen (hero-video.js). */

.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 {
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    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;
}

/* De paginatitel (H1). De clamp blijft staan zodat de titel op een telefoon meeschaalt; de
   ingestelde grootte is de bovengrens, dus die geldt op een gewoon scherm. */
.pb-page-hero__title {
    font-size: clamp(1.5rem, 3.4vw, var(--pb-h1-size));
    font-weight: var(--pb-h1-weight);
    letter-spacing: var(--pb-h1-spacing);
    text-transform: var(--pb-h1-transform);
    text-align: var(--pb-h1-align);
    color: var(--pb-h1-color);
    max-width: 52rem;
}

/* Het woordmerk PINK in een paginakop ([[pink]] in het kopveld van /beheer). De letters volgen de
   kleur van de kop eromheen, alleen de I krijgt het roze van het logo — precies zoals het logo zelf
   getekend is. Zo blijft de kop leesbaar op de lichte pagina én op de donkere herofoto. */
.pb-wordmark {
    letter-spacing: 0.02em;
}

.pb-wordmark__accent {
    color: var(--pb-pink);
}

/* Een regelafbreking die de beheerder zelf in de kop heeft gezet. Op een smal scherm is die
   afbreking meer kwaad dan goed (er blijft een halve regel over), dus daar laat de site de kop
   gewoon zelf teruglopen. */
.pb-heading-break {
    display: none;
}

@media (min-width: 768px) {
    .pb-heading-break {
        display: inline;
    }
}

.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/separator 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 {
    font-size: 1.7rem;
    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;
}

/* De koppen in een paginatekst. H3 en H4 hadden hier geen eigen regel, waardoor ze de maten van
   Bootstrap hielden en een H3 gróter was dan een H2; ze staan nu in dezelfde ladder en zijn net als
   de H2 instelbaar op het tabblad "Titels" van /beheer/colors. */
.pb-content h2 {
    font-size: var(--pb-h2-size);
    font-weight: var(--pb-h2-weight);
    letter-spacing: var(--pb-h2-spacing);
    text-transform: var(--pb-h2-transform);
    text-align: var(--pb-h2-align);
    margin: 2rem 0 0.75rem;
    color: var(--pb-h2-color);
}

.pb-content h3 {
    font-size: var(--pb-h3-size);
    font-weight: var(--pb-h3-weight);
    letter-spacing: var(--pb-h3-spacing);
    text-transform: var(--pb-h3-transform);
    text-align: var(--pb-h3-align);
    margin: 1.6rem 0 0.6rem;
    color: var(--pb-h3-color);
}

.pb-content h4 {
    font-size: var(--pb-h4-size);
    font-weight: var(--pb-h4-weight);
    letter-spacing: var(--pb-h4-spacing);
    text-transform: var(--pb-h4-transform);
    text-align: var(--pb-h4-align);
    margin: 1.3rem 0 0.5rem;
    color: var(--pb-h4-color);
}

.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;
}

/* De foto van een tegel zit in een link die als lijst dient: die link draagt nu de negatieve
   marges en de ronde bovenhoeken, zodat de foto er met overflow: hidden binnen blijft. Zonder dat
   kader zou de vergroting hieronder over de rand van de kaart heen steken. */
.pb-card__photo-link {
    display: block;
    width: calc(100% + 3rem);
    margin: -1.5rem -1.5rem 1rem;
    overflow: hidden;
    border-radius: var(--pb-radius) var(--pb-radius) 0 0;
}

.pb-card__photo-link .pb-card__photo {
    width: 100%;
    margin: 0;
    border-radius: 0;
    transition: transform 0.45s ease;
}

/* Alleen op een aanwijzer die echt kan zweven: op een touchscreen blijft een :hover na het tikken
   hangen en zou de tegel vergroot achterblijven. */
@media (hover: hover) {
    .pb-card:hover .pb-card__photo-link .pb-card__photo {
        transform: scale(1.06);
    }
}

/* ---------- Separator strip (old-site bg_blok_quote look) ----------
   De strook komt uit de shortcode [[scheiding:foto|kop|subkop|hoogte=NNN]] en stond tot 3 september
   2026 vast in Home.razor met één vaste foto. De foto komt nu per strook mee als
   --pb-separator-image (ShortcodeHelper zet die inline via HeroMedia, net als de hero en de footer),
   de hoogte als --pb-separator-height. Zonder hoogte bepaalt de padding hieronder de hoogte, precies
   zoals de oude vaste strook. */
.pb-separator {
    background:
        linear-gradient(rgba(20, 14, 18, 0.30), rgba(255, 51, 153, 0.24)),
        var(--pb-separator-image) center / cover no-repeat;
    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);
    /* Met een ingestelde hoogte blijft de tekst midden in de strook staan in plaats van bovenaan. */
    min-height: var(--pb-separator-height, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

.pb-separator__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). On a phone or a small
   tablet the photo follows the width of the screen, because a banner of several hundred pixels
   would swallow the whole viewport there. */
.pb-banner__img,
.pb-banner__fill {
    width: 100%;
    height: clamp(180px, 26vw, var(--pb-banner-max, 340px));
    object-fit: cover;
    display: block;
}

/* Een film in de header van een pagina, precies zoals de brede strook op de homepage. De film ligt
   over de headerfoto heen en die foto blijft de terugval: hij is wat de bezoeker ziet zolang de film
   nog niet speelt, zodat er nooit een zwart vlak staat. hero-video.js zet is-playing zodra er echt
   beeld is en is-ending in de laatste seconde, zodat de sprong van het einde naar het begin niet te
   zien is. De overgang duurt even lang als FADE_SECONDS in dat script. */
.pb-banner--video {
    position: relative;
    overflow: hidden;
}

/* Het lege vlak dat de band zijn hoogte geeft wanneer er wel een film maar geen headerfoto is. */
.pb-banner__fill {
    background: var(--pb-pink-soft);
}

.pb-banner__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.pb-banner__video.is-playing {
    opacity: 1;
}

.pb-banner__video.is-playing.is-ending {
    opacity: 0;
}

/* From tablet-landscape up the height set per page is used as it was entered, so raising the
   number in /beheer really makes the banner taller. Without this the 26vw above capped every
   banner at roughly a quarter of the window width and the setting had no visible effect at all.
   The 70vh guard keeps an extreme value from filling the whole screen. */
@media (min-width: 992px) {
    .pb-banner__img,
    .pb-banner__fill {
        height: min(var(--pb-banner-max, 340px), 70vh);
    }
}

/* ---------- 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 {
    background: linear-gradient(135deg, var(--pb-pink) 0%, var(--pb-pink-dark) 70%);
    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;
}

/* Het WhatsApp-logo (component WhatsAppIcon). Is er in de instellingen geen eigen logo gekozen, dan
   tekent het component het merkteken met fill="currentColor". Die kleur staat hier, zodat het de
   bekende WhatsApp-groene blijft en niet meekleurt met de link eromheen. */
.pb-whatsapp-icon {
    color: #25d366;
    flex-shrink: 0;
}

.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 {
    background: var(--pb-footer-bg);
    color: var(--pb-footer-text);
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}

/* De footer met een foto erachter. De foto komt uit de instelling "Foto achter de footer"
   (MainLayout zet --pb-footer-image inline); is er niets gekozen, dan staat de klasse er niet en
   blijft de effen footerkleur hierboven staan. Over de foto ligt altijd een waas in diezelfde
   footerkleur: de footer draagt de contactgegevens en de paginalinks, en die moeten leesbaar
   blijven op een lichte foto net zo goed als op een donkere. De waas is bewust afgeleid van
   --pb-footer-bg, zodat een beheerder die de footerkleur verandert de foto vanzelf in de nieuwe
   kleur ziet meebewegen. */
.pb-footer--photo {
    /* De sterkte van beide lagen is een instelling (Helpers/FooterOverlay): MainLayout zet dezelfde
       twee eigenschappen inline zodra er een foto gekozen is, en die inline waarden gaan hierover
       heen. De waarden hier zijn dus de fabriekswaarden waarmee de footer ontworpen is. */
    --pb-footer-veil: color-mix(in srgb, var(--pb-footer-bg) 68%, transparent);
    /* Een lichte foto (lucht, wit huis) zou de tekst laten wegvallen; deze donkere laag onder de
       kleurwaas trekt elk beeld naar hetzelfde contrast toe. */
    --pb-footer-shade: rgba(0, 0, 0, 0.28);
    background:
        linear-gradient(var(--pb-footer-veil), var(--pb-footer-veil)),
        linear-gradient(var(--pb-footer-shade), var(--pb-footer-shade)),
        var(--pb-footer-image) center / cover no-repeat;
    background-color: var(--pb-footer-bg);
    /* Een foto is nooit egaal; een zachte schaduw houdt de tekst ook boven een lichte plek los. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* De grijze regels (KVK/CRIB en het copyright) zijn bedacht voor een effen vlak; op een foto is dat
   grijs te licht. Met een foto erachter krijgen ze gewoon de tekstkleur van de footer. */
.pb-footer--photo .pb-footer__registration,
.pb-footer--photo .pb-footer__bottom {
    color: var(--pb-footer-text);
}

.pb-footer__heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pb-footer-heading);
    margin-bottom: 0.75rem;
}

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

.pb-footer a {
    color: var(--pb-footer-link);
    text-decoration: none;
}

.pb-footer a:hover {
    color: var(--pb-footer-link-hover);
}

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

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

/* The page links can be spread over columns, chosen per site with the FooterPageColumns setting
   (Helpers/FooterColumnLayout). A site with many pages in the footer otherwise gets one endless
   list and a footer taller than the page above it. CSS multi-column needs no extra markup and
   keeps the reading order top-to-bottom per column. Only from the medium breakpoint up: below it
   the three footer blocks are already stacked full width and one column reads best on a phone. */
.pb-footer__links--cols2,
.pb-footer__links--cols3,
.pb-footer__links--smart {
    column-gap: 1.5rem;
}

.pb-footer__links--cols2 li,
.pb-footer__links--cols3 li,
.pb-footer__links--smart li {
    /* A link must never be torn in half across two columns. */
    break-inside: avoid;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .pb-footer__links--cols2 {
        columns: 2;
    }

    .pb-footer__links--cols3 {
        columns: 3;
    }

    /* 'Smart': a column width instead of a number, so the browser fits as many columns as the
       available space allows. A wide monitor gets more of them than a small laptop, and a narrow
       block simply keeps one, without an admin having to pick a number per device. */
    .pb-footer__links--smart {
        columns: 9rem;
    }
}

/* On touch screens the stacked footer links get extra vertical tap room:
   a 19px-high link with 26px row pitch is too easy to mis-tap. */
@media (max-width: 991px) {
    .pb-footer__links a,
    .pb-footer__address a {
        display: inline-block;
        padding: 0.3rem 0;
    }

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

.pb-footer__registration,
.pb-footer__bottom {
    color: var(--pb-footer-muted);
    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: var(--pb-footer-link);
}

/* ---------- '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. */
.pb-hidden-badge {
    position: fixed;
    top: 0.5rem;
    right: 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;
    }

    /* De korte teksten van de strook nemen het hier over van de gewone. Alleen als er een korte
       versie is ingevuld staat er een --wide-klasse op de gewone tekst; anders gebeurt hier niets
       en blijft de gewone tekst gewoon staan. */
    .pb-hero__text--wide {
        display: none;
    }

    .pb-hero__text--narrow {
        display: inline;
    }

    /* Een liggende film wordt op een telefoon zo hard bijgesneden dat er alleen een strookje uit het
       midden overblijft. Home.razor zet --pb-hero-video-position uit de instelling; zonder instelling
       blijft het het midden. */
    .pb-hero__video {
        object-position: var(--pb-hero-video-position, 50%) center;
    }

    /* De twee knoppen passen naast elkaar in plaats van onder elkaar: dat scheelt een regel hoogte,
       en die hoogte is precies wat er extra van de film te zien is. Ze delen de breedte samen, dus
       ze blijven even groot. De verticale ruimte blijft staan zodat het aanraakvlak ~48px hoog
       blijft; alleen het lettertype en de ruimte links en rechts krimpen. */
    .pb-hero__actions {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .pb-hero__actions .pb-btn {
        flex: 1 1 0;
        text-align: center;
        padding: 0.85rem 0.5rem;
        font-size: 0.78rem;
        letter-spacing: 0.02em;
    }

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

    .pb-separator {
        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-admin-bg);
    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-admin-accent);
    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: var(--pb-admin-text);
    text-decoration: none;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-weight: 600;
}

.pb-admin__link:hover {
    background: var(--pb-admin-hover);
    color: #fff;
}

/* Submenu Componenten in de beheer-sidebar (details/summary, geen JS nodig). */
.pb-admin__group {
    margin: 0;
}

.pb-admin__grouptitle {
    color: var(--pb-admin-text);
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.pb-admin__grouptitle::-webkit-details-marker {
    display: none;
}

.pb-admin__grouptitle::after {
    content: "▸";
    float: right;
    transition: transform 0.15s ease;
}

.pb-admin__group[open] > .pb-admin__grouptitle::after {
    transform: rotate(90deg);
}

.pb-admin__grouptitle:hover {
    background: var(--pb-admin-hover);
    color: #fff;
}

.pb-admin__groupitems {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

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

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

.pb-admin__logout {
    background: none;
    border: none;
    color: var(--pb-admin-text);
    font-weight: 600;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
}

.pb-admin__version {
    margin: 0.35rem 0 0;
    padding: 0 0.7rem;
    color: var(--pb-admin-text);
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Taalwissel van het beheer (NL/EN): twee kleine knoppen, de actieve taal is ingevuld. */
.pb-admin__lang {
    display: flex;
    gap: 0.35rem;
    padding: 0 0.7rem 0.6rem;
}

.pb-admin__langbtn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    color: var(--pb-admin-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    /* Minimaal 44 px hoog/breed: ook op een touchscreen goed te raken. */
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
}

.pb-admin__langbtn--active {
    background: #fff;
    border-color: #fff;
    color: var(--pb-admin-accent);
    cursor: default;
}

/* Dezelfde taalwissel op de lichte inlogkaart: donkere tekst in plaats van roze op paars. */
.pb-login .pb-admin__lang {
    justify-content: center;
    padding: 0 0 1rem;
}

.pb-login .pb-admin__langbtn {
    border-color: var(--pb-admin-accent);
    color: var(--pb-admin-accent);
}

.pb-login .pb-admin__langbtn--active {
    background: var(--pb-admin-accent);
    border-color: var(--pb-admin-accent);
    color: #fff;
}

/* Een gekozen keuzerondje in het beheer krijgt de roze huisstijlkleur. Het Telerik-thema tekent
   hem in zijn eigen koraalrood, en rood leest als een waarschuwing terwijl het gewoon de gekozen
   optie is; dezelfde reden als bij de aan/uit-schakelaars. */
.pb-admin-panel .k-radio:checked {
    border-color: var(--pb-admin-accent);
    background-color: var(--pb-admin-accent);
}

.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-admin-accent);
    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-admin-accent);
    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);
}

/* Een paneel binnen een tabblad zit al in het witte vlak van de tabbladen (instellingen, kleuren);
   een tweede kader met schaduw eromheen maakt er een doos in een doos van. */
.k-tabstrip-content > .pb-admin-panel {
    padding: 0.5rem 0;
    box-shadow: none;
}

/* Tegelrij van het dashboard: één tegel per teller die deze beheerder mag zien. De hele tegel is
   een link naar het bijbehorende scherm, zodat er niet op een klein tekstje gemikt hoeft te worden
   (ook prettig op een touchscreen). */
.pb-admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 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);
}

a.pb-admin-stat {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.pb-admin-stat:hover,
a.pb-admin-stat:focus-visible {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

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

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

.pb-admin-stat__link {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pb-pink);
}

/* Aan/uit-schakelaar (PbToggle): overal in het beheer dezelfde vorm, in overzichten alleen-lezen. */
.pb-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pb-toggle__label {
    font-weight: 500;
}

/* Alleen tonen: geen handje en geen "uitgegrijsd" gevoel — de waarde moet leesbaar blijven. */
.pb-toggle--readonly .k-switch {
    cursor: default;
    opacity: 1;
}

/* Green when on, red when off. The Telerik theme fills an ON switch with its own accent colour
   (the coral red #ff6358) and leaves an OFF switch grey, which reads exactly the wrong way round:
   in an overview the state has to be visible without reading the label. The classes .k-switch-on /
   .k-switch-off and the part .k-switch-track come from the installed theme (kendo-theme-default,
   Telerik UI for Blazor 14.1.0); the AAN/UIT label inherits the colour of the track. No !important
   needed: app.css is loaded after the theme and these selectors are more specific. Deliberately
   scoped inside .pb-toggle, so the rest of the Telerik theme keeps its own colours. */
.pb-toggle .k-switch-on .k-switch-track {
    background-color: var(--pb-toggle-on);
    border-color: var(--pb-toggle-on);
    color: var(--pb-toggle-text);
}

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

.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);
}

/* Taalvlag (PbFlag) als inline SVG; dezelfde maat in de knoppen en in de grid-rijen. */
.pb-flag {
    width: 22px;
    height: 11px;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Taalkeuze bovenaan een beheerscherm (PbLanguageChoice). */
.pb-language-choice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}

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

.pb-language-choice__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* Minimaal 44px hoog: een echte aanraakmaat op tablet. */
    min-height: 44px;
    padding: 0.4rem 0.8rem;
    background: #fff;
    border: 1px solid #d9d2d7;
    border-radius: 999px;
    font-weight: 700;
    color: var(--pb-ink-soft);
    cursor: pointer;
}

.pb-language-choice__btn:hover:not(:disabled) {
    border-color: var(--pb-pink);
}

.pb-language-choice__btn--selected {
    border-color: var(--pb-pink);
    background: var(--pb-pink);
    color: #fff;
}

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

.pb-language-choice__mark {
    color: #d08c00;
    font-size: 1.2rem;
    line-height: 1;
}

.pb-language-choice__hint {
    font-size: 0.9rem;
}

.pb-language-choice--compact .pb-language-choice__btn {
    min-height: 36px;
    padding: 0.2rem 0.6rem;
}

/* Vlaggetjes per rij in een overzicht (PbLanguageFlags). */
.pb-language-flags {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

.pb-language-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40px blijft goed aan te tikken zonder de rijhoogte op te blazen. */
    min-width: 40px;
    min-height: 40px;
    padding: 0.35rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.pb-language-flag:hover {
    border-color: var(--pb-pink);
}

.pb-language-flag--current {
    border-color: var(--pb-pink);
    background: rgba(255, 51, 153, 0.1);
}

.pb-language-flag--empty .pb-flag {
    opacity: 0.55;
}

.pb-language-flag--missing {
    cursor: default;
}

.pb-language-flag--missing:hover {
    border-color: transparent;
}

.pb-language-flag--missing .pb-flag {
    opacity: 0.3;
    filter: grayscale(1);
}

/* Die taalversie bestaat nog niet, maar is met één klik aan te maken: bleke vlag met een + erbij,
   zodat het verschil met een dood (grijs) vlaggetje zichtbaar is. */
.pb-language-flag--create {
    position: relative;
    border-style: dashed;
    border-color: rgba(255, 51, 153, 0.5);
}

.pb-language-flag--create .pb-flag {
    opacity: 0.5;
}

.pb-language-flag--create:hover .pb-flag {
    opacity: 1;
}

.pb-language-flag__mark {
    position: absolute;
    top: -2px;
    right: 1px;
    color: var(--pb-pink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

/* Zelfde signaal in de taalkeuze bovenaan/in een bewerkscherm. */
.pb-language-choice__btn--create {
    border-style: dashed;
}

.pb-language-choice__btn--create .pb-flag {
    opacity: 0.6;
}

.pb-language-choice__btn--create:hover .pb-flag {
    opacity: 1;
}

.pb-language-choice__btn--create .pb-language-choice__mark {
    color: var(--pb-pink);
    font-weight: 700;
}

/* Wachtscherm tijdens het vertalen: de ChatGPT-aanroep duurt bij een lange tekst tientallen
   seconden, dus het scherm laat zien dat er iets gebeurt en blokkeert klikken zolang dat duurt. */
.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);
    padding: 1.5rem 2rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* Tekenteller onder een SEO-veld; oranje zodra de lengte Google in de weg zit. */
.pb-seo-hint {
    display: block;
    font-size: 0.85rem;
}

.pb-seo-hint--warn {
    color: #b26a00;
    font-weight: 600;
}

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

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

/* Kleurveld van /beheer (PbColorField): de kleurenkiezer met de hexcode ernaast als invulveld.
   De code stond er eerder als platte tekst, dus een kleur uit het klembord moest met het oog op het
   kleurvlak worden teruggezocht. */
.pb-colorfield {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Een hexcode leest als code: gelijke tekenbreedte voorkomt dat 0 en o of 1 en l op elkaar lijken.
   De klasse landt op de wikkel van de TelerikTextBox, dus het lettertype gaat naar het invulvlak
   daarbinnen. */
.pb-colorfield__hex .k-input-inner {
    font-family: Consolas, "Cascadia Mono", Menlo, Monaco, "Courier New", monospace;
}

.pb-colorfield__hint {
    white-space: nowrap;
}

/* Voorbeeld naast de velden van een titelniveau op het tabblad "Titels" van /beheer/colors. Een
   titel verandert van grootte, dikte, letterafstand, hoofdletters en uitlijning tegelijk; dat leest
   niemand uit zes losse getallen. */
.pb-heading-row {
    margin-bottom: 1.5rem;
}

.pb-heading-preview__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pb-ink-soft);
    margin-bottom: 0.35rem;
}

/* Het vlak achter het voorbeeld heeft de achtergrond van de site, niet het wit van het beheer:
   anders oogt een lichte titelkleur hier leesbaar terwijl hij dat op de site niet is. */
.pb-heading-preview__stage {
    background: var(--pb-bg);
    border: 1px solid #e5e5e5;
    border-radius: var(--pb-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.4rem;
    /* Een letterafstand of een lange titel mag het paneel niet uit elkaar duwen. */
    overflow-x: auto;
}

/* Het lettertype van de site (Montserrat), want een titel in een andere letter geeft een ander beeld
   van de dikte en de breedte. De kleur komt uit de stijl van het element zelf; is er geen eigen
   kleur ingesteld, dan erft de titel hier de algemene tekstkleur, precies zoals op de site. */
.pb-heading-preview__title {
    font-family: var(--pb-font);
    color: var(--pb-ink);
    line-height: 1.25;
    margin: 0;
}

.pb-heading-preview__body {
    font-family: var(--pb-font);
    color: var(--pb-ink);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0.6rem 0 0;
}

/* Uitklapbare uitleg achter een (i)-knopje (PbInfoPanel). De uitleg van een scherm werd maar één
   keer gelezen, maar duwde bij elk bezoek het echte werk (het uploadblok, de foto's) naar beneden. */
.pb-infopanel {
    margin-bottom: 1rem;
}

/* Terughoudende knop: het is uitleg, geen actie, dus hij mag niet met de knoppen van het scherm
   concurreren. */
.pb-infopanel__button {
    font-size: 0.9rem;
}

/* Het (i)-rondje voor de tekst; een getekend rondje in plaats van een emoji, zodat het op elk
   apparaat hetzelfde oogt. */
.pb-infopanel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: var(--pb-pink);
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}

.pb-infopanel__body {
    margin-top: 0.6rem;
    padding: 0.85rem 1rem;
    background: var(--pb-bg-tint);
    border-left: 3px solid var(--pb-pink);
    border-radius: var(--pb-radius);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Uploadblok van de mediabibliotheek: twee velden naast elkaar hebben de volle paneelhoogte niet
   nodig. */
.pb-admin-panel--tight {
    padding: 1rem 1.25rem;
}

/* Opslaan-balk die bovenaan het scherm blijft plakken, zodat de knop bij lange formulieren altijd
   zichtbaar is zonder scrollen. Hij stond eerder onderaan: dan moest de beheerder na het invullen
   eerst helemaal naar beneden voordat hij kon opslaan. */
.pb-admin-savebar {
    position: sticky;
    top: 0;
    z-index: 5;
    /* Dekkend wit: de balk schuift bij het scrollen over het formulier heen, en door een
       doorschijnende achtergrond schemerde de inhoud eronder er doorheen. */
    background: #fff;
    border-bottom: 1px solid #e9e4e8;
    margin: 0 -0.5rem 1rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0 0 8px 8px;
}

/* Bewerkdialoog van het beheer (Class="pb-edit-dialog" op een TelerikDialog). De dialoog krijgt
   een vaste breedte mee, maar mag nooit buiten het venster vallen: daarom een bovengrens in vw/vh.
   De inhoud van een Telerik-dialoog (.k-window-content) scrollt zelf, dus op een klein scherm
   scrollt het formulier binnen de dialoog in plaats van de hele pagina eronder. */
.pb-edit-dialog {
    max-width: 96vw;
    max-height: 92vh;
}

/* Ook in een dialoog staat de knoppenbalk bovenaan en plakt hij daar. Het scrollende vlak van een
   Telerik-dialoog is .k-window-content met 1rem binnenmarge; de negatieve marges trekken de balk
   daar overheen, zodat hij de volle breedte pakt en meteen tegen de titelbalk aan begint.
   De `top` is negatief omdat een plakkende balk niet buiten de binnenmarge van zijn scrollvlak mag
   komen: met `top: 0` bleef er een strook van 1rem boven de balk waar de tekst doorheen schoof. */
.pb-edit-dialog .k-window-content > .pb-admin-savebar {
    top: -1rem;
    margin: -1rem -1rem 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0;
}

/* De twee lijsten in de dialoog "Tegels invoegen": de gekozen tegels en de pagina's die nog
   toegevoegd kunnen worden. Een site met twintig pagina's maakt die tweede lijst langer dan het
   scherm, en dan vallen de knoppen Invoegen/Annuleren onder de onderrand weg. Beide lijsten scrollen
   daarom zelf; de dialoog zelf blijft even hoog. */
.pb-tiles-picker__list {
    max-height: 15rem;
    overflow-y: auto;
}

/* Een klik op een rij opent het bewerkscherm, dus laat de aanwijzer dat ook zien. De datarij
   van een Telerik Grid is .k-master-row; grids zonder rijklik krijgen Class="pb-grid-static". */
.k-grid:not(.pb-grid-static) .k-master-row {
    cursor: pointer;
}

/* De volgorde-knoppen per rij (PbReorderButtons). Even groot als de taalvlaggen, zodat ze op een
   aanraakscherm net zo goed te raken zijn (40px) zonder de rijhoogte op te blazen. */
.pb-reorder {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}

.pb-reorder__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0.35rem;
    color: var(--pb-ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.pb-reorder__button:hover:enabled {
    border-color: var(--pb-pink);
    color: var(--pb-pink);
}

.pb-reorder__button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* De sleepgreep van een rij (RowDraggable) is een grijp-aanwijzer, geen handje: slepen en klikken
   doen niet hetzelfde. */
.k-grid .k-drag-cell {
    cursor: grab;
}

.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;
}

/* ---------- Deelkaartje (tabblad Social media in het bewerkscherm van een pagina) ---------- */
/* Toont hoe WhatsApp, Facebook of LinkedIn een gedeelde link ongeveer weergeven: foto, adres,
   titel en de korte samenvatting. Alleen ter illustratie; elk platform tekent het net anders. */
.pb-share-preview {
    max-width: 420px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--pb-radius);
    overflow: hidden;
}

.pb-share-preview__img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.pb-share-preview__nophoto {
    margin: 0;
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    background: var(--pb-bg-tint);
}

.pb-share-preview__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid #ededed;
}

.pb-share-preview__url {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pb-ink-soft);
}

.pb-share-preview__title {
    font-weight: 600;
    line-height: 1.3;
}

.pb-share-preview__text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--pb-ink-soft);
}

.pb-share-preview__missing {
    font-style: italic;
}

/* ---------- 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;
}

/* Bijsnijden/spiegelen van een foto (PbImageCropper + js/image-crop.js). De dialoog is breed maar
   valt nooit buiten het venster; de foto schaalt mee zodat hij altijd helemaal te zien is. */
.pb-crop-dialog {
    max-width: 96vw;
    max-height: 92vh;
}

/* De voettekst van een Telerik-dialoog rekt zijn knoppen uit over de hele breedte
   (.k-actions-stretched). Met zeven knoppen (bijsnijden, twee keer spiegelen, twee keer draaien,
   wissen, sluiten) valt de rij om en werden de twee knoppen op de tweede regel loeibreed. Laat ze
   daarom hun eigen breedte houden. */
.pb-crop-dialog .k-actions .k-button {
    flex: 0 0 auto;
}

.pb-cropper {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    /* Een geblokte achtergrond laat zien waar een doorzichtige PNG ophoudt. */
    background: repeating-conic-gradient(#f3eff2 0% 25%, #fff 0% 50%) 50% / 20px 20px;
    /* De verduistering buiten de selectie is een enorme box-shadow; zonder deze regel zou die de
       hele dialoog donker maken in plaats van alleen de foto. */
    overflow: hidden;
    touch-action: none;
    cursor: crosshair;
    user-select: none;
}

.pb-cropper__img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    height: auto;
}

/* Zolang er niets geselecteerd is, blijft het selectievlak weg (JS zet display). */
.pb-cropper__sel {
    display: none;
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed var(--pb-pink);
    /* De schaduw buiten de selectie maakt de rest van de foto donkerder. */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    cursor: move;
}

.pb-cropper__handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid var(--pb-pink);
    border-radius: 50%;
}

.pb-cropper__handle[data-pb-corner="nw"] {
    top: -8px;
    left: -8px;
    cursor: nwse-resize;
}

.pb-cropper__handle[data-pb-corner="ne"] {
    top: -8px;
    right: -8px;
    cursor: nesw-resize;
}

.pb-cropper__handle[data-pb-corner="sw"] {
    bottom: -8px;
    left: -8px;
    cursor: nesw-resize;
}

.pb-cropper__handle[data-pb-corner="se"] {
    bottom: -8px;
    right: -8px;
    cursor: nwse-resize;
}

/* Het formaat van de selectie in echte fotopixels, linksonder over de foto heen. */
.pb-cropper__size {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    pointer-events: none;
}

@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);
}

.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). */
/* Uploading straight from a picker dialog (PbMediaUpload): a compact block above the tiles. */
.pb-media-upload .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.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;
}

/* ---------- 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;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    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-admin-bg);
    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-admin-accent);
    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: var(--pb-admin-text);
    text-decoration: none;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
}

.pb-manual__navlink:hover {
    background: var(--pb-admin-hover);
    color: #fff;
}

.pb-manual__navlink--active {
    background: var(--pb-admin-accent);
    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: var(--pb-ink-soft);
}

.pb-diff__line--skipped {
    color: var(--pb-ink-soft);
    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;
}