/* ===== Zwaagdijk-Oost — dorpsstijl ===== */

:root {
    --kleur-primair: #2f5233;
    --kleur-primair-donker: #1f3a24;
    --kleur-primair-licht: #e9f2ea;
    --kleur-accent: #d98e48;
    --kleur-accent-donker: #b96f2e;
    --kleur-achtergrond: #faf7f2;
    --kleur-oppervlak: #ffffff;
    /* Twee extra neutrale niveaus (geen dorp-instelling, puur structuur): -2 voor een licht
       afwijkend paneel binnen een kaart (bv. een toolbar), -verzonken voor een "ingedrukt"
       vlak (bv. een codevoorbeeld/leesvenster-achtergrond) — zelfde gelaagde-oppervlakken-
       aanpak als het Zonneburen-ontwerpsysteem. */
    --kleur-oppervlak-2: #fbf9f5;
    --kleur-verzonken: #f1ede4;
    --kleur-tekst: #2b2b28;
    --kleur-tekst-zacht: #6b6b63;
    --kleur-tekst-vaag: #96948a;
    --kleur-rand: #e6e1d8;
    /* Gelaagde dual-shadow (scherpe contactschaduw + zachte omgevingsschaduw) i.p.v. één platte
       schaduw — oogt zachter/premium, zelfde techniek als Zonneburen se --zb-schaduw*. */
    --schaduw: 0 1px 2px rgba(43, 43, 40, 0.04), 0 8px 20px -10px rgba(43, 43, 40, 0.12);
    --schaduw-groot: 0 2px 4px rgba(43, 43, 40, 0.05), 0 24px 48px -20px rgba(43, 43, 40, 0.2);
    --radius: 16px;
    --radius-klein: 10px;
    --radius-pil: 999px;
    --lettertype: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Alleen voor kopregels (zie "h1, h2, h3..." hieronder) — vult --lettertype aan, overschrijft
       het niet, want elk [data-lettertype=...]-preset zet nog altijd --lettertype zelf. */
    --lettertype-kop: "Plus Jakarta Sans", var(--lettertype);
}

/* ---- Donkere modus ----
   Specificiteit (0,2,0) van ":root[data-bs-theme]" wint bewust van de losse ":root"-regel
   hierboven én van het per-request <style>-blok in App.razor (dat zet alleen de
   merkkleuren, niet deze neutrale/oppervlak-kleuren) — dus deze override werkt
   betrouwbaar ongeacht brondocumentvolgorde. Het attribuut zelf wordt vóór de eerste
   render gezet door een inline script in App.razor (voorkomt flits van het verkeerde
   thema) op basis van prefers-color-scheme. De merkkleuren (primair/accent) blijven
   bewust hetzelfde — alleen het neutrale palet (achtergrond/oppervlak/tekst/randen)
   wisselt, zodat de huisstijl herkenbaar blijft.
*/
:root[data-bs-theme="dark"] {
    --kleur-achtergrond: #1b1d1a;
    --kleur-oppervlak: #24261f;
    --kleur-oppervlak-2: #202219;
    --kleur-verzonken: #16180f;
    --kleur-tekst: #ecebe6;
    --kleur-tekst-zacht: #a8a89f;
    --kleur-tekst-vaag: #76766c;
    --kleur-rand: #3a3d34;
    --schaduw: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px -10px rgba(0, 0, 0, 0.45);
    --schaduw-groot: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 48px -20px rgba(0, 0, 0, 0.6);
}

html, body {
    font-family: var(--lettertype);
    background-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
}

/* Voorkomt dat de pagina er achter meescrollt terwijl de mobiele drawer open staat (zie
   menu-drawer.js) — <body> wordt niet door een Blazor-component zelf gerenderd, dus deze regel
   hoort in het globale theme.css en niet in een scoped .razor.css (die zou hier nooit op
   matchen: Blazor se CSS-isolatie voegt het scope-attribuut alleen toe aan elementen die de
   component zelf rendert). */
body.menu-open {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lettertype-kop);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--kleur-primair-donker);
}

/* Vloeiende, wat zelfverzekerdere kopregel-schaal — onafhankelijk van de gekozen
   ontwerpstijl-preset, zodat de site sowieso wat verzorgder oogt dan platte Bootstrap-
   standaardgroottes. */
h1 {
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
}
h2 {
    font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.85rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

a {
    color: var(--kleur-primair);
}

a:hover {
    color: var(--kleur-accent-donker);
}

/* Bewust geen max-width meer op .content — elke pagina (publiek én beheer) gebruikt de volle
   breedte naast de 250px-sidebar. Let op: lopende tekst (nieuwsartikelen, pagina's) kan daardoor
   op brede schermen lange regels krijgen; individuele bloktypes mogen zelf een leesbare
   max-width instellen als dat ooit gewenst is (zie bv. .blok-editor-preview-content). */

/* ---- Knoppen ---- */
.btn-primary {
    background-color: var(--kleur-primair);
    border-color: var(--kleur-primair);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--kleur-primair-donker);
    border-color: var(--kleur-primair-donker);
}
.btn-outline-primary {
    color: var(--kleur-primair);
    border-color: var(--kleur-primair);
}
.btn-outline-primary:hover {
    background-color: var(--kleur-primair);
    border-color: var(--kleur-primair);
}

.knop {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border-radius: var(--radius-pil);
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.knop:hover {
    transform: translateY(-1px);
    box-shadow: var(--schaduw);
    text-decoration: none;
}
.knop-primair {
    background-color: var(--kleur-accent);
    color: #fff;
}
.knop-primair:hover {
    background-color: var(--kleur-accent-donker);
    color: #fff;
}
.knop-licht {
    background-color: #fff;
    color: var(--kleur-primair-donker);
}
.knop-outline {
    background-color: transparent;
    color: var(--kleur-primair);
    border: 1.5px solid var(--kleur-primair);
    padding: calc(0.65rem - 1.5px) calc(1.4rem - 1.5px);
}
.knop-outline:hover {
    background-color: var(--kleur-primair);
    color: #fff;
}
.knop-groot {
    padding: 0.9rem 2.1rem;
    font-size: 1.05rem;
}
.knop-tekst {
    padding: 0;
    border-radius: 0;
    color: var(--kleur-primair);
}
.knop-tekst:hover {
    color: var(--kleur-accent-donker);
}

/* ---- Kaarten (blokken + Bootstrap .card gelijkgetrokken) ---- */
.kaarten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.25rem;
}

.kaart, .card {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.kaart-klikbaar, a.kaart {
    display: block;
    color: inherit;
    text-decoration: none;
}
.kaart:hover, .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--schaduw-groot);
    border-color: var(--kleur-primair-licht);
}
.kaart-afbeelding, .card-img-top {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
/* Zonder foto liet een nieuwskaart voorheen gewoon niets zien op die plek — met weinig andere
   inhoud (geen samenvatting) oogde zo'n kaart als een half leeg vak, met .kaart-lees-meer
   (margin-top:auto, voor uitlijning in het grid) ver naar onder geduwd. Zelfde
   kleurverloop+stippenpatroon-taal als de uitgelichte nieuwskaart/hero, zodat dit als bewust
   vormgegeven merkvlak oogt i.p.v. een ontbrekende afbeelding. */
.kaart-afbeelding-placeholder {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    background: linear-gradient(135deg, var(--kleur-primair) 0%, var(--kleur-accent-donker) 150%);
    overflow: hidden;
}
.kaart-afbeelding-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 75% 65% at 30% 30%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 30% 30%, black 0%, transparent 70%);
    opacity: 0.5;
}
.kaart-inhoud, .card-body {
    padding: 1.25rem;
}
.kaart-inhoud h3 {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}
.kaart-meta {
    color: var(--kleur-tekst-zacht);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.contacten-omschrijving {
    white-space: pre-wrap;
}
.kaart-lees-meer {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--kleur-primair);
    font-weight: 600;
    font-size: 0.9rem;
}
.kaart-klikbaar:hover .kaart-lees-meer {
    color: var(--kleur-accent-donker);
}

/* ---- Nieuwskaarten: vaste hoogte + kiesbare kaartstijl (zie NieuwsKaart.razor,
   Vereniging.KaartLayoutStijl/KaartAfbeeldingPositie en SiteInstellingen.Kaart* — instelbaar via
   /beheer/instellingen tab "Kaartlayout" en de vereniging-tab "Kaartweergave"). De --kaart-*
   custom properties komen van KaartAfbeeldingHelper.GridStijl op de omliggende .kaarten-grid (of,
   in de beheer-voorbeelden, een eigen wrapper) — met de bestaande waarden als fallback, dus zonder
   die instelling ooit aan te passen blijft een dorp exact hetzelfde zien. ---- */
/* .kaart.nieuws-kaart (i.p.v. alleen .nieuws-kaart) i.s.m. specificiteit: de bestaande
   ".kaart-klikbaar, a.kaart { display: block; ... }" hierboven heeft als element+klasse-selector
   (a.kaart) een hogere specificiteit dan een kale klasse-selector, dus die display:block zou deze
   display:flex anders altijd winnen — ongeacht volgorde in dit bestand. Met een dubbele
   klasse-selector (.kaart.nieuws-kaart) winnen we dat gegarandeerd. */
.kaart.nieuws-kaart {
    height: var(--kaart-hoogte, auto);
    border-radius: var(--kaart-radius, var(--radius));
    box-shadow: var(--kaart-schaduw, var(--schaduw));
    display: flex;
    flex-direction: column;
    position: relative;
}
.nieuws-kaart:hover {
    box-shadow: var(--kaart-hover-schaduw, var(--schaduw-groot));
}
/* Foto-doorzichtigheid (Vereniging.KaartFotoOpaciteit) — geldt voor alle drie de kaartstijlen,
   vandaar hier gecombineerd i.p.v. per stijl herhaald. */
.nieuws-kaart .kaart-afbeelding,
.nieuws-kaart .kaart-achtergrond-afbeelding,
.nieuws-kaart .kaart-half-afbeelding {
    opacity: var(--kaart-foto-opaciteit, 100%);
}
.nieuws-kaart .kaart-afbeelding {
    aspect-ratio: unset;
    height: 45%;
    width: 100%;
    flex-shrink: 0;
}
.nieuws-kaart .kaart-inhoud {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.nieuws-kaart .kaart-inhoud h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nieuws-kaart .kaart-inhoud p:not(.kaart-meta) {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nieuws-kaart .kaart-lees-meer {
    margin-top: auto;
    padding-top: 0.35rem;
    flex-shrink: 0;
}

/* Hover-varianten (SiteInstellingen.KaartHoverEffect) — overschrijven de sitewide .kaart:hover
   hierboven (die geldt voor élk kaarttype op de site, niet alleen nieuwskaarten). */
.nieuws-kaart.kaart-hover-geen:hover,
.nieuws-kaart.kaart-hover-zoom:hover,
.nieuws-kaart.kaart-hover-gloed:hover {
    transform: none;
}
.nieuws-kaart.kaart-hover-zoom .kaart-afbeelding,
.nieuws-kaart.kaart-hover-zoom .kaart-achtergrond-afbeelding {
    transition: transform 0.35s ease;
}
.nieuws-kaart.kaart-hover-zoom:hover .kaart-afbeelding,
.nieuws-kaart.kaart-hover-zoom:hover .kaart-achtergrond-afbeelding {
    transform: scale(1.07);
}
.nieuws-kaart.kaart-hover-gloed:hover {
    box-shadow: var(--kaart-hover-schaduw, var(--schaduw-groot)), 0 0 0 3px var(--kleur-primair-licht);
}

/* Kaartstijl "Achtergrond" — foto vult de hele kaart, tekst als overlay onderaan. Kleur/sterkte
   zijn per vereniging instelbaar (zie VerenigingenBeheer.razor tab "Nieuws kaart" en
   KaartAfbeeldingHelper.OverlayStijl), met een automatisch leesbare tekstkleur (wit of donker,
   afhankelijk van de helderheid van de gekozen fade-kleur) — vandaar color-mix i.p.v. een vaste
   rgba: dat werkt met elke hex-kleur, niet alleen de standaard crème/zwart. */
.kaart-achtergrond-afbeelding {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.kaart-achtergrond-overlay {
    position: absolute;
    inset: 0;
    /* Een zuiver lineair verloop van boven (0%) naar onder (100%) haalt de ingestelde sterkte pas
       precies op de onderste pixel — de titel/tekst zit daar ruim boven, dus zag bij 100% nog
       altijd (bijna) de volle foto erdoorheen. Met een tussenstop op 55% bereikt het verloop de
       ingestelde sterkte al ruim vóór de tekst, en blijft de onderste helft (waar de tekst staat)
       constant op die volle sterkte i.p.v. verder te verdunnen richting de rand. */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--kaart-overlay-kleur, #faf8f4) 0%, transparent) 0%,
        color-mix(in srgb, var(--kaart-overlay-kleur, #faf8f4) var(--kaart-overlay, 78%), transparent) 55%,
        color-mix(in srgb, var(--kaart-overlay-kleur, #faf8f4) var(--kaart-overlay, 78%), transparent) 100%);
    z-index: 1;
}
.kaart-inhoud-overlay {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    color: var(--kaart-overlay-tekst, var(--kleur-tekst));
}
.kaart-inhoud-overlay .kaart-meta {
    color: var(--kaart-overlay-tekst, var(--kleur-tekst));
    opacity: 0.75;
}
/* De kaart-uitlijning-*-modifier staat op de kaart-root (zie NieuwsKaart.razor), vandaar
   afstammeling-selectors i.p.v. dezelfde klasse als .kaart-inhoud-overlay. */
.kaart-uitlijning-gecentreerd .kaart-inhoud-overlay {
    align-items: center;
    text-align: center;
}
.kaart-uitlijning-rechts .kaart-inhoud-overlay {
    align-items: flex-end;
    text-align: right;
}

/* Kaartstijl "HalfLinks"/"HalfRechts" — foto neemt de halve kaart in, tekst de andere helft.
   .kaart.nieuws-kaart.kaart-stijl-half-* (i.p.v. kaal .kaart-stijl-half-*) i.s.m. specificiteit:
   de basisregel hierboven (.kaart.nieuws-kaart, twee klassen) zet zelf ook al flex-direction
   (column) — met een kale klasse-selector zou die basisregel dat altijd winnen, ongeacht
   volgorde in dit bestand (precies de valkuil die eerder ".kaart-klikbaar, a.kaart" had met
   display). Drie klassen wint hier gegarandeerd. */
.kaart.nieuws-kaart.kaart-stijl-half-links,
.kaart.nieuws-kaart.kaart-stijl-half-rechts {
    flex-direction: row;
}
.kaart.nieuws-kaart.kaart-stijl-half-rechts {
    flex-direction: row-reverse;
}
.kaart-half-afbeelding {
    flex: 0 0 42%;
    height: 100%;
    width: 42%;
    object-fit: cover;
}
.kaart-inhoud-half {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.25rem;
}
/* Bewust géén terugval naar een gestapelde (kolom-)indeling op smalle schermen — "Half" moet
   ook op mobiel herkenbaar "Half" blijven i.p.v. onopvallend op de gewone Standaard-kaart te
   gaan lijken. Alleen de foto-breedte en de padding krimpen iets mee, zodat de tekst op een
   telefoon toch genoeg ruimte houdt. */
@media (max-width: 420.98px) {
    .kaart-half-afbeelding {
        flex-basis: 36%;
        width: 36%;
    }
    .kaart-inhoud-half {
        padding: 0.85rem;
    }
}

/* ---- Vereniging-badge op nieuwskaarten (logo indien aanwezig, anders een gekleurd
   tekstlabel) — zie VerenigingBadge.razor. ---- */
.kaart-vereniging {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.kaart-vereniging-logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: #fff;
    border: 1px solid var(--kleur-rand);
}
.kaart-vereniging-naam {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kleur-tekst-zacht);
}
/* ---- "Gevolgd"-badge (Home.razor, gepersonaliseerde homepage) — zichtbaar op nieuws-/
   agenda-kaarten van een vereniging die de bezoeker zelf volgt (zie pwa.js se
   synchroniseerVolgCookie), zodat de afwijkende sortering een zichtbare reden heeft i.p.v.
   onverklaard te zijn. ---- */
.gevolgd-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pil);
    font-size: 0.72rem;
    font-weight: 700;
    background-color: var(--kleur-primair-licht);
    color: var(--kleur-primair-donker);
    white-space: nowrap;
}
/* Op een donkere/foto-achtergrond (het uitgelichte nieuwsbericht) moet het label zelf ook
   goed leesbaar blijven i.p.v. de standaard gedempte tekstkleur. */
.nieuws-uitgelicht .kaart-vereniging-naam {
    color: #fff;
    opacity: 0.95;
}
.nieuws-uitgelicht .kaart-vereniging-logo {
    border-color: rgba(255, 255, 255, 0.6);
}

/* ---- "Kleurrijke tegels" (instelling KleurrijkeTegels, zie InstellingenBeheer.razor) — geeft
   nieuwskaarten een subtiele accentrand + tint in de kleur van de gekoppelde vereniging, i.p.v.
   alleen het kleine label. Standaard uit: zonder de instelling is --agenda-kleur niet gezet en
   valt alles terug op de bestaande, neutrale kleuren hieronder. Agendakaarten hebben dit
   mechanisme al langer (zie de .agenda-*-regels verderop). ---- */
.nieuws-kaart.kleurrijk {
    border-top: 4px solid var(--agenda-kleur, var(--kleur-rand));
    background: color-mix(in srgb, var(--agenda-kleur, var(--kleur-oppervlak)) 6%, var(--kleur-oppervlak));
}
.nieuws-uitgelicht.kleurrijk {
    background: linear-gradient(135deg, var(--agenda-kleur, var(--kleur-primair)) 0%, var(--kleur-primair-donker) 100%);
}

/* Agenda-tag met optioneel logo (VerenigingBadge Stijl="Tag") */
.agenda-tag-logo {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: -2px;
    margin-right: 3px;
    background-color: #fff;
}

/* ---- Verenigingen ---- */
.vereniging-kaart {
    display: flex;
    flex-direction: column;
}
.vereniging-logo {
    max-height: 120px;
    object-fit: contain;
    padding: 1.25rem 1.25rem 0;
}
.vereniging-knoppen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}
.vereniging-sponsoren-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.vereniging-sponsoren-strip img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    background-color: #fff;
}
@media (max-width: 575.98px) {
    .vereniging-knoppen {
        flex-direction: column;
    }
    .vereniging-knoppen .knop {
        text-align: center;
        width: 100%;
    }
}

/* ---- Standaard-homepage-hero (zie Home.razor se HeeftHeroBlok) — zelfde visuele taal
   (color-mix-radial-verlopen + stippenpatroon) als .platform-hero op de landingspagina, maar
   in de kleuren van dít dorp i.p.v. de platformkleuren, zodat elk dorp een eigen uitstraling
   houdt terwijl het geheel herkenbaar "Dorpshub" blijft. ---- */
.dorp-hero {
    position: relative;
    margin-bottom: 2.5rem;
    padding: clamp(2.75rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem) clamp(2.25rem, 5vw, 3.5rem);
    text-align: center;
    overflow: hidden;
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
}
.dorp-hero-achtergrond {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--kleur-primair) 20%, transparent), transparent 45%),
        radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--kleur-accent) 18%, transparent), transparent 42%),
        radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--kleur-primair) 12%, transparent), transparent 55%),
        var(--kleur-oppervlak-2, var(--kleur-achtergrond));
}
.dorp-hero-achtergrond::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--kleur-primair) 30%, transparent) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 70% 60% at center, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, black 0%, transparent 75%);
    opacity: 0.6;
}
.dorp-hero-inhoud {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}
.dorp-hero h1 {
    font-size: clamp(2.1rem, 2vw + 1.6rem, 3rem);
    margin: 0;
    color: var(--kleur-primair-donker);
}
.dorp-hero-tagline {
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--kleur-tekst-zacht);
    max-width: 48ch;
    margin: 0.85rem auto 0;
}
@media (max-width: 640.98px) {
    .dorp-hero {
        margin-bottom: 2rem;
    }
}

/* ---- Dorpssecties (Home) ---- */
.dorp-sectie {
    margin-top: 3rem;
}
.dorp-sectie-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

/* ---- Sectie-ritmiek "Afwisselend" (SiteInstellingen.HomepageSectieRitmiek, zie
   /beheer/instellingen → Homepage) — elke sectie een eigen subtiele achtergrondtint + iets
   grotere sectiekop, voor meer visueel ritme dan de standaard "Vlak"-weergave. Twee vaste tinten
   (nieuws/agenda) i.p.v. een generieke even/oneven-afwisseling, want er zijn hier altijd precies
   deze twee vaste secties. ---- */
.dorp-sectie-ritmiek {
    padding: 1.75rem 1.75rem 2rem;
    border-radius: var(--radius);
}
.dorp-sectie-ritmiek.dorp-sectie-nieuws {
    background-color: color-mix(in srgb, var(--kleur-primair) 5%, var(--kleur-achtergrond));
}
.dorp-sectie-ritmiek.dorp-sectie-agenda {
    background-color: color-mix(in srgb, var(--kleur-accent) 7%, var(--kleur-achtergrond));
}
.dorp-sectie-ritmiek .dorp-sectie-kop h2 {
    font-size: 1.85rem;
    font-weight: 800;
}
@media (max-width: 575.98px) {
    .dorp-sectie-ritmiek {
        padding: 1.25rem 1.25rem 1.5rem;
    }
}

/* ---- Homepage: "Uitgelicht"-weergave voor Dorpsnieuws (zie /beheer/instellingen) ---- */
.nieuws-uitgelicht-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 1.25rem;
}
@media (max-width: 767.98px) {
    .nieuws-uitgelicht-layout {
        grid-template-columns: 1fr;
    }
}
.nieuws-uitgelicht {
    display: block;
    position: relative;
    min-height: 340px;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(135deg, var(--kleur-primair) 0%, var(--kleur-primair-donker) 100%);
    background-size: cover;
    background-position: center;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--schaduw-groot);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.nieuws-uitgelicht:hover {
    transform: translateY(-3px);
    color: #fff;
}
.nieuws-uitgelicht-overlay {
    position: relative;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    background: linear-gradient(180deg, rgba(20, 20, 18, 0.05) 0%, rgba(20, 20, 18, 0.82) 100%);
}
/* Zonder foto is deze zware verdonkerende overlay (hierboven, bedoeld om wit tekst leesbaar te
   houden óver een foto) niet nodig — die drukt het merkverloop van .nieuws-uitgelicht hieronder
   plat tot bijna zwart, wat oogt als een lege/kapotte kaart i.p.v. een bewust vormgegeven
   kleurvlak. Lichtere overlay + een stippenpatroon geeft in dat geval juist textuur. */
.nieuws-uitgelicht-geen-foto {
    background: linear-gradient(135deg, var(--kleur-primair) 0%, var(--kleur-accent-donker) 150%);
}
.nieuws-uitgelicht-geen-foto .nieuws-uitgelicht-overlay {
    background: linear-gradient(180deg, rgba(20, 20, 18, 0) 0%, rgba(20, 20, 18, 0.45) 100%);
}
.nieuws-uitgelicht-geen-foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 75% 65% at 30% 30%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 30% 30%, black 0%, transparent 70%);
    opacity: 0.5;
}
.nieuws-uitgelicht h3 {
    color: #fff;
    font-size: 1.7rem;
    margin: 0.6rem 0 0.35rem;
}
.nieuws-uitgelicht-meta {
    opacity: 0.9;
    font-size: 0.9rem;
    margin: 0;
}
.nieuws-uitgelicht-samenvatting {
    opacity: 0.95;
    max-width: 640px;
    margin: 0.6rem 0 0;
}
.nieuws-uitgelicht .kaart-lees-meer {
    color: #fff;
    margin-top: 0.75rem;
}
.nieuws-uitgelicht:hover .kaart-lees-meer {
    color: var(--kleur-accent);
}
.nieuws-mini-lijst, .nieuws-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.nieuws-lijst {
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.nieuws-mini-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem;
    border-radius: var(--radius-klein);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.nieuws-mini-item:hover {
    background-color: var(--kleur-primair-licht);
}
/* De losstaande "Lijst"-weergave (primaire inhoud, geen hero ernaast) krijgt net iets meer
   nadruk per rij dan de compacte mini-lijst naast een uitgelicht bericht. */
.nieuws-lijst .nieuws-mini-item {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    padding: 0.75rem;
}
.nieuws-lijst .nieuws-mini-item:hover {
    border-color: var(--kleur-primair-licht);
    transform: translateY(-2px);
    box-shadow: var(--schaduw);
}
.nieuws-mini-thumb, .nieuws-mini-thumb-placeholder {
    width: 128px;
    height: 92px;
    border-radius: var(--radius-klein);
    flex-shrink: 0;
}
.nieuws-mini-thumb {
    object-fit: cover;
}
.nieuws-mini-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--kleur-primair-licht) 0%, color-mix(in srgb, var(--kleur-accent) 18%, var(--kleur-primair-licht)) 100%);
    font-size: 1.85rem;
}
.nieuws-mini-tekst {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.nieuws-mini-titel {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
}
.nieuws-mini-meta {
    font-size: 0.78rem;
    color: var(--kleur-tekst-zacht);
}
.nieuws-mini-meta-rij {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
/* VerenigingBadge in de compacte mini-lijst: geen eigen ondermarge (staat al naast de datum,
   niet boven een titel) en een kleiner logo/label dan op een volle kaart. */
.nieuws-mini-vereniging.kaart-vereniging {
    margin-bottom: 0;
    gap: 0.25rem;
}
.nieuws-mini-vereniging .kaart-vereniging-logo {
    width: 14px;
    height: 14px;
}
.nieuws-mini-vereniging .kaart-vereniging-naam {
    font-size: 0.78rem;
}
@media (max-width: 480px) {
    .nieuws-mini-thumb, .nieuws-mini-thumb-placeholder {
        width: 92px;
        height: 68px;
    }
}

/* ---- Kaarten-carrousel (Homepage-instelling "Carrousel", zie HomepageSectieStijl) — generiek
   voor zowel de Dorpsnieuws- als de Binnenkort-sectie: een horizontaal doorscrollbare rij van
   dezelfde .kaart-elementen als de Grid-weergave (dus elke per-vereniging kaartstijl en de
   sitewide kaartontwerp-instellingen werken hier automatisch ook al). Puur CSS scroll-snap; de
   knoppen zijn een progressive enhancement (zie pwa.js setupKaartenCarrousels) — zonder JS blijft
   slepen/vegen gewoon werken. ---- */
.kaarten-carrousel-wrap {
    position: relative;
    margin-top: 1.25rem;
}
.kaarten-carrousel {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 0.25rem;
    padding: 0.25rem 0.25rem 1rem;
    margin: -0.25rem -0.25rem -1rem;
}
.kaarten-carrousel .kaart {
    flex: 0 0 clamp(240px, 32vw, 320px);
    scroll-snap-align: start;
}
.kaarten-carrousel-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--kleur-rand);
    background-color: var(--kleur-oppervlak);
    box-shadow: var(--schaduw);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.kaarten-carrousel-nav:hover {
    background-color: var(--kleur-primair-licht);
    border-color: var(--kleur-primair-licht);
}
.kaarten-carrousel-nav-vorig {
    left: -1.25rem;
}
.kaarten-carrousel-nav-volgend {
    right: -1.25rem;
}
/* Alleen tonen zodra JS de knoppen daadwerkelijk heeft aangesloten (zie pwa.js) — anders staan
   er twee knoppen die niets doen. Ook alleen op schermen breed genoeg voor de negatieve
   marges hierboven; op mobiel blijft slepen/vegen de natuurlijke bediening. */
@media (min-width: 900px) {
    .kaarten-carrousel-wrap.carrousel-klaar .kaarten-carrousel-nav {
        display: block;
    }
}

/* ---- Blokken (Dorpshub.Blocks) ---- */
.blok {
    margin-top: 2.5rem;
    padding-top: var(--blok-padding-boven, 0px);
    padding-bottom: var(--blok-padding-onder, 0px);
}
.blok:first-child {
    margin-top: 0;
}
/* Een blok met een eigen achtergrondkleur (zie BlokEditor.razor) mag geen kier laten zien van de
   paginakleur erachter tussen twee van zulke blokken onder elkaar — dus geen bovenmarge, de eigen
   padding van het blok zorgt al voor genoeg lucht om de inhoud heen. */
.blok-met-achtergrond {
    margin-top: 0;
}

/* Optioneel decoratief patroon boven de achtergrondkleur/-verloop van een blok (zie
   AchtergrondPatroon/BlokEditor.razor) — zelfde stippenpatroon-idee als de vaste Hero-achtergrond
   op de landingspagina (.platform-hero-achtergrond::before), nu herbruikbaar op elk blok. Een
   pure ::before-laag i.p.v. een extra element, dus onafhankelijk van de inhoud van het blok; het
   blok zelf hoeft alleen position:relative te krijgen zodat de laag daarbinnen blijft, en de
   negatieve z-index houdt 'm achter de daadwerkelijke inhoud (die in normale flow staat, zonder
   eigen z-index nodig — zie stacking-context-regels voor position:relative + z-index:negatief). */
.blok-patroon-stippen,
.blok-patroon-lijnen {
    position: relative;
}
.blok-patroon-stippen::before,
.blok-patroon-lijnen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: radial-gradient(ellipse 70% 60% at center, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, black 0%, transparent 75%);
    pointer-events: none;
}
.blok-patroon-stippen::before {
    background-image: radial-gradient(color-mix(in srgb, var(--kleur-primair) 30%, transparent) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    opacity: 0.6;
}
.blok-patroon-lijnen::before {
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--kleur-primair) 18%, transparent) 0 2px, transparent 2px 18px);
    opacity: 0.7;
}

.blok-hero {
    background: linear-gradient(135deg, var(--kleur-primair) 0%, var(--kleur-primair-donker) 100%);
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    color: #fff;
    overflow: hidden;
}
.blok-hero-overlay {
    background: linear-gradient(180deg, rgba(31, 58, 36, 0.35) 0%, rgba(31, 58, 36, 0.75) 100%);
    padding: 4.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Hoogtevarianten (zie HeroHoogte) — alleen de padding/min-height wijzigt, de rest van
   .blok-hero-overlay blijft gelijk. */
.blok-hero-compact .blok-hero-overlay {
    padding: 2.25rem 2rem;
    min-height: 220px;
}
.blok-hero-groot .blok-hero-overlay {
    min-height: 520px;
}
.blok-hero-volledigscherm .blok-hero-overlay {
    min-height: 90vh;
}
.blok-hero-inhoud {
    max-width: 640px;
}
.blok-hero h1 {
    color: #fff;
    font-size: 2.5rem;
}
.blok-hero-ondertitel {
    font-size: 1.15rem;
    opacity: 0.92;
    margin-bottom: 1.5rem;
}

.blok-tekst-afbeelding {
    display: grid;
    gap: 2rem;
    align-items: center;
}
.blok-tekst-afbeelding-links,
.blok-tekst-afbeelding-rechts {
    grid-template-columns: 1fr 1fr;
}
.blok-tekst-afbeelding-links .blok-tekst-afbeelding-media { order: 1; }
.blok-tekst-afbeelding-links .blok-tekst-afbeelding-tekst { order: 2; }
.blok-tekst-afbeelding-rechts .blok-tekst-afbeelding-media { order: 2; }
.blok-tekst-afbeelding-rechts .blok-tekst-afbeelding-tekst { order: 1; }
.blok-tekst-afbeelding-media img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
}
.blok-tekst-alleen {
    max-width: 760px;
}

.blok-kaarten-grid h2 {
    margin-bottom: 0.25rem;
}

.blok-cta {
    background-color: var(--kleur-primair-licht);
    border-radius: var(--radius);
    padding: 2.5rem;
    text-align: center;
}
.blok-cta p {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--kleur-primair-donker);
    margin-bottom: 1.25rem;
}

/* ---- Fotogalerij ---- */
.galerij-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.galerij-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-klein);
    overflow: hidden;
    box-shadow: var(--schaduw);
    transition: transform 0.18s ease;
}
.galerij-thumb:hover {
    transform: scale(1.03);
}
.galerij-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.galerij-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.galerij-lightbox:target {
    display: flex;
}
.galerij-lightbox-achtergrond {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 18, 0.9);
}
.galerij-lightbox img {
    position: relative;
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-klein);
    box-shadow: var(--schaduw-groot);
}
.galerij-lightbox-sluiten {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    text-decoration: none;
    z-index: 1;
}

/* ---- Info-popup: JS-gestuurde overlay (zie pwa.js: setupInfoPopups) — bv. voor de
   volledige beschrijving van een agenda-item. Bewust géén CSS :target-truc (zoals de
   galerij-lightbox hieronder): een popup kan overal op de pagina staan, ook binnen een
   voorouder met een transform (bv. de .blok-reveal-animatie), en dan werkt position:fixed
   niet meer "heel scherm" — vandaar hier gewone knoppen + een class-toggle i.p.v. links. ---- */
.info-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow-y: auto;
    padding: 2rem 1.5rem;
}
.info-popup.info-popup-open {
    display: block;
}
.info-popup-achtergrond {
    position: fixed;
    inset: 0;
    border: none;
    padding: 0;
    background: rgba(20, 20, 18, 0.75);
}
.info-popup-kaart {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background-color: var(--kleur-oppervlak);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-groot);
    padding: 1.75rem;
    box-sizing: border-box;
}
.info-popup-sluiten {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    border: none;
    background: none;
    padding: 0;
    color: var(--kleur-tekst-zacht);
    font-size: 1.75rem;
    line-height: 1;
}
.info-popup-meer {
    border: none;
    background: none;
    /* Verticale padding + gelijke negatieve margin: vergroot het aanraakvlak tot ~44px zonder
       de tekst zelf te verschuiven in de kaartlayout erboven/onder. */
    padding: 0.55rem 0;
    margin: -0.55rem 0;
    display: inline-block;
    color: var(--kleur-primair);
    font-weight: 600;
    font-size: 0.85rem;
}
.info-popup-meer:hover {
    text-decoration: underline;
}
.beschrijving-kort {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.standaardtekst-voorbeeld {
    border-radius: var(--radius-klein);
    margin-top: 0.5rem;
}

/* ---- Video ---- */
.blok-video-omslag {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schaduw);
}
.blok-video-omslag iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ---- Accordion ---- */
.blok-accordion-item {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 0.9rem 1.1rem;
    margin-top: 0.75rem;
}
.blok-accordion-item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--kleur-primair-donker);
    list-style: none;
}
.blok-accordion-item summary::-webkit-details-marker {
    display: none;
}
.blok-accordion-item summary::after {
    content: "+";
    float: right;
    color: var(--kleur-tekst-zacht);
}
.blok-accordion-item[open] summary::after {
    content: "\2212";
}
.blok-accordion-antwoord {
    margin-top: 0.75rem;
    color: var(--kleur-tekst-zacht);
}

/* ---- Kolommen ---- */
.blok-kolommen {
    display: grid;
    gap: 2rem;
}
.blok-kolommen-2 {
    grid-template-columns: repeat(2, 1fr);
}
.blok-kolommen-3 {
    grid-template-columns: repeat(3, 1fr);
}
.blok-kolom h3 {
    font-size: 1.1rem;
}

/* ---- Citaat ---- */
.blok-citaat {
    border-left: 4px solid var(--kleur-accent);
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 0;
    max-width: 760px;
}
.blok-citaat p {
    font-size: 1.35rem;
    font-style: italic;
    color: var(--kleur-primair-donker);
    margin-bottom: 0.5rem;
}
.blok-citaat cite {
    color: var(--kleur-tekst-zacht);
    font-style: normal;
}

/* ---- Uitvouwbare tekst ("Lees meer") — teaserzin altijd zichtbaar, rest pas na uitklappen.
   Gebruikt de huisstijlkleuren van het dorp (--kleur-*) i.p.v. een vaste kleur, zodat elk dorp
   'm in de eigen stijl krijgt. ---- */
.blok-uitvouwbaar {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-left: 6px solid var(--kleur-primair);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    padding: 1.5rem 1.75rem;
}
.blok-uitvouwbaar summary {
    list-style: none;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    text-align: left;
}
.blok-uitvouwbaar summary::-webkit-details-marker {
    display: none;
}
.blok-uitvouwbaar-teaser {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--kleur-tekst);
    line-height: 1.7;
    /* De kaart zelf (.blok-uitvouwbaar) vult nu de volle blokbreedte zoals de andere blokken —
       alleen de tekst zelf blijft op leesbare regellengte begrensd. */
    max-width: 760px;
}
.blok-uitvouwbaar-toggle {
    color: var(--kleur-primair);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}
.blok-uitvouwbaar[open] .blok-uitvouwbaar-toggle::after {
    content: "Lees minder ▲";
}
.blok-uitvouwbaar:not([open]) .blok-uitvouwbaar-toggle::after {
    content: "Lees meer ▼";
}
.blok-uitvouwbaar-volledig {
    margin-top: 0.9rem;
    max-width: 760px;
    font-size: 1.05rem;
    color: var(--kleur-tekst-zacht);
    line-height: 1.7;
    text-align: left;
    animation: blokUitvouwbaarFadeIn 0.3s ease;
}
.blok-uitvouwbaar-volledig p:last-child {
    margin-bottom: 0;
}
@keyframes blokUitvouwbaarFadeIn {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---- Contactkaart ---- */
.blok-contactkaart-inhoud {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 1rem;
}
.blok-contactkaart-lijst {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.blok-contactkaart-map {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schaduw);
    aspect-ratio: 4 / 3;
}
.blok-contactkaart-map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ---- Knoppenrij ---- */
.blok-knoppenrij {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.blok-knoppenrij-gecentreerd {
    justify-content: center;
}
.blok-knoppenrij-rechts {
    justify-content: flex-end;
}

/* ---- HTML-blok (volledige breedte) ---- */
.blok-html-vol-breedte img,
.blok-html-vol-breedte iframe,
.blok-html-vol-breedte video {
    max-width: 100%;
}

/* ---- Snelkoppelingen-blok (icoon-tegels naar andere pagina's, zie SnelkoppelingenBlok.razor) ---- */
.blok-snelkoppelingen h2 {
    margin-bottom: 1rem;
}
.snelkoppelingen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}
.snelkoppeling-tegel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    text-decoration: none;
    color: var(--kleur-tekst);
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.snelkoppeling-tegel:hover {
    transform: translateY(-4px);
    box-shadow: var(--schaduw-groot);
    border-color: var(--kleur-primair-licht);
    color: var(--kleur-tekst);
}
.snelkoppeling-icoon {
    font-size: 2.25rem;
    line-height: 1;
}
.snelkoppeling-tekst {
    font-weight: 600;
    font-size: 0.92rem;
}

/* ---- Hoogtepunten-blok (live cijferbalk, zie HoogtepuntenBlok.razor) ---- */
.blok-hoogtepunten {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    padding: 1.5rem;
    background-color: var(--kleur-primair-licht);
    border-radius: var(--radius);
}
.hoogtepunt {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}
.hoogtepunt-icoon {
    font-size: 1.6rem;
    align-self: center;
}
.hoogtepunt-getal {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--kleur-primair-donker);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.hoogtepunt-label {
    font-size: 0.85rem;
    color: var(--kleur-tekst-zacht);
}
@media (max-width: 575.98px) {
    .blok-hoogtepunten {
        gap: 1.25rem 2rem;
    }
}

/* ---- Info-kaarten (bv. cookies-/disclaimerpagina) — generieke, herbruikbare kaartjes voor
   losse alinea's binnen een CMS-pagina, met dezelfde huisstijlkleuren als de rest van de site
   (incl. donkere modus) i.p.v. vaste kleuren. ---- */
.info-kaart {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0;
}
.info-kaart-primair {
    border-left: 4px solid var(--kleur-primair);
}
.info-kaart-accent {
    border-left: 4px solid var(--kleur-accent);
}
.info-kaart h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}
.info-kaart p {
    margin: 0 0 1rem 0;
}
.info-kaart p:last-child {
    margin-bottom: 0;
}
.info-kaart-lijst {
    margin: 0 0 1rem 0;
    padding-left: 1.4rem;
}
.info-kaart-lijst li {
    margin-bottom: 0.4rem;
}
.info-kaart-icoon-tekst {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.info-kaart-icoon-tekst .info-kaart-icoon {
    font-size: 1.2rem;
    line-height: 1.4;
}
.info-kaart-badge {
    color: var(--kleur-primair-donker);
    background-color: var(--kleur-primair-licht);
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-klein);
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 600;
}
.info-kaart-pad {
    color: var(--kleur-primair-donker);
    font-weight: 600;
    background-color: var(--kleur-primair-licht);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-klein);
    font-family: monospace;
    font-size: 0.9em;
    text-decoration: none;
}
.info-kaart-pad:hover {
    text-decoration: underline;
}

/* ---- Schakel-editie: visuele concept-canvas ---- */
.schakel-werkbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.schakel-concept-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background-color: var(--kleur-primair-licht);
    border: 1px solid var(--kleur-primair);
    border-radius: var(--radius-klein);
}
/* Canvas (bewerken) naast een live PDF-voorbeeld — zelfde grid-idee als .blok-editor-layout.
   minmax(440px, 38%) i.p.v. een vaste 620px: een vaste pixelbreedte "belast" de rest-breedte van
   de voorbeeldkolom (1fr) altijd met exact hetzelfde aantal pixels, ongeacht schermbreedte — bij
   een bredere beheerpagina bleef het voorbeeld daardoor onnodig smal. Met een percentage schaalt
   de canvas evenredig mee met de beschikbare ruimte (dus het voorbeeld profiteert ook mee op
   bredere schermen), met 440px als ondergrens zodat de kaarten nooit te smal worden. De
   kaart-inhoud zelf blijft ondanks een kleinere canvas dan de eerdere 620px netjes binnen de
   kaders dankzij de flex-wrap-opzet van .schakel-groep-acties/.schakel-item-acties hieronder —
   overtollige knoppen/vinkjes wrappen naar een nieuwe regel i.p.v. dat de kaart overloopt. */
.schakel-werk-layout {
    display: grid;
    grid-template-columns: minmax(440px, 38%) 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 991.98px) {
    .schakel-werk-layout {
        grid-template-columns: 1fr;
    }
}
.schakel-canvas {
    max-width: 680px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.schakel-voorbeeld-kolom {
    position: sticky;
    top: 1rem;
}
.schakel-voorbeeld-canvas {
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    background-color: var(--kleur-achtergrond);
    overflow: hidden;
    height: 80vh;
}
.schakel-voorbeeld-canvas iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.schakel-pagina-einde-kaart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border: 1px dashed var(--kleur-tekst-zacht);
    border-radius: var(--radius-klein);
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: var(--kleur-tekst-zacht);
}
.schakel-canvas-kaart {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    padding: 0.85rem;
    cursor: grab;
}
.schakel-groep-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--kleur-rand);
}
/* Vervangt de vroegere bare .d-flex.gap-2.ms-auto-wrapper om de groepskop-knoppen: die had geen
   flex-wrap, waardoor bij weinig ruimte de tekst ín losse knoppen ging afbreken (vierkant/
   icoon-boven-tekst) i.p.v. dat hele knoppen naar een nieuwe regel sprongen. */
.schakel-groep-acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}
.schakel-groep-acties .btn,
.schakel-groep-acties select {
    white-space: nowrap;
}
.schakel-groep-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.schakel-inklap-knop {
    border: none;
    background: none;
    padding: 0 0.15rem;
    color: var(--kleur-tekst-zacht);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
}
.schakel-inklap-knop:hover {
    color: var(--kleur-primair);
}
.schakel-stukje-kaart {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.4rem;
    margin: 0.2rem 0;
    border-radius: var(--radius-klein);
    cursor: grab;
}
.schakel-stukje-kaart:hover {
    background-color: var(--kleur-primair-licht);
}
.schakel-stukje-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--radius-klein);
    flex-shrink: 0;
}
.schakel-stukje-tekst {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
/* Titel op een eigen regel, i.p.v. los tussen de actieknoppen te staan zoals voorheen. */
.schakel-item-titel {
    font-weight: 500;
    overflow-wrap: break-word;
}
/* Alle actieknoppen/vinkjes van een artikel-item (Bewerken, Opfraaien, Tekst bewerken,
   Verwijderen, Titel tonen, Alleen tekst) samen in één regel die als geheel wrapt — voorkomt dat
   losse knoppen intern gaan afbreken zoals vóór deze fix. */
.schakel-item-acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
}
.schakel-item-acties .btn {
    white-space: nowrap;
}
/* Compacte vervanging van de eerdere .form-check.form-check-inline-vinkjes — als geheel
   (vinkje + label) niet los van elkaar te breken binnen .schakel-item-acties. */
.schakel-item-optie {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--kleur-tekst-zacht);
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
}
.schakel-item-optie input {
    margin: 0;
}
.schakel-verplaats-select {
    display: inline-block;
    width: auto;
    max-width: 240px;
    vertical-align: middle;
}
.schakel-decoratie-thumb {
    max-width: 60px;
    max-height: 40px;
    display: block;
    margin: 0.3rem 0;
}
.schakel-sectie-kaart {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.schakel-advertentie-kaart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.schakel-advertentie-kop {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.schakel-advertentie-titel {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}
.schakel-advertentie-thumb {
    max-width: 60px;
    max-height: 40px;
    border-radius: var(--radius-klein);
    flex-shrink: 0;
}
.decoratie-kiezer-opties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.4rem;
}
.decoratie-kiezer-groep {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.decoratie-kiezer-label {
    font-size: 0.8rem;
    color: var(--kleur-tekst-zacht);
    margin-right: 0.15rem;
}

/* ---- Schakel-artikel (ingezonden stukje, gepubliceerd als nieuwsbericht) ---- */
.schakel-artikel-meta {
    margin-bottom: 0.5rem;
}
.schakel-artikel-auteur {
    font-style: italic;
    color: var(--kleur-tekst-zacht);
    margin-bottom: 0.75rem;
}
.schakel-artikel-foto {
    max-width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    margin-bottom: 0.75rem;
    display: block;
}

/* ---- Nieuwsdetail: vorig/volgend bericht ---- */
.nieuws-navigatie {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--kleur-rand);
}
.nieuws-navigatie-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 46%;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.nieuws-navigatie-item:hover {
    border-color: var(--kleur-primair);
    background-color: var(--kleur-primair-licht);
}
.nieuws-navigatie-volgende {
    margin-left: auto;
    text-align: right;
}
.nieuws-navigatie-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kleur-primair);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.nieuws-navigatie-titel {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--kleur-tekst);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
@media (max-width: 640.98px) {
    .nieuws-navigatie {
        flex-direction: column;
    }
    .nieuws-navigatie-item, .nieuws-navigatie-volgende {
        max-width: 100%;
        margin-left: 0;
        text-align: left;
    }
}

/* ---- Scheidingslijn ---- */
.blok-scheidingslijn {
    margin: 1rem 0;
}
.blok-scheidingslijn-lijn {
    border-top: 1px solid var(--kleur-rand);
}
.blok-scheidingslijn-stippen {
    border-top: 3px dotted var(--kleur-rand);
}
.blok-scheidingslijn-ruimte {
    height: 1px;
}

@media (max-width: 767.98px) {
    .blok-hero-overlay {
        padding: 3rem 1.5rem;
    }
    .blok-hero h1 {
        font-size: 1.9rem;
    }
    .blok-tekst-afbeelding-links,
    .blok-tekst-afbeelding-rechts {
        grid-template-columns: 1fr;
    }
    .blok-tekst-afbeelding-links .blok-tekst-afbeelding-media,
    .blok-tekst-afbeelding-rechts .blok-tekst-afbeelding-media {
        order: 1;
    }
    .blok-tekst-afbeelding-links .blok-tekst-afbeelding-tekst,
    .blok-tekst-afbeelding-rechts .blok-tekst-afbeelding-tekst {
        order: 2;
    }
    .blok-kolommen-2,
    .blok-kolommen-3 {
        grid-template-columns: 1fr;
    }
    .blok-contactkaart-inhoud {
        grid-template-columns: 1fr;
    }
}

/* ---- Scroll-reveal animatie ---- */
.blok-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.blok-reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .blok-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Agenda ---- */
.agenda-kop {
    margin-bottom: 1.5rem;
}
.agenda-intro {
    color: var(--kleur-tekst-zacht);
    font-size: 1.05rem;
}

.filter-dropdown {
    margin-bottom: 2rem;
}
.filter-dropdown > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-pil);
    border: 1.5px solid var(--kleur-rand);
    color: var(--kleur-tekst);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.filter-dropdown > summary::-webkit-details-marker {
    display: none;
}
.filter-dropdown-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-pil);
    background-color: var(--kleur-primair);
    color: #fff;
    font-size: 0.75rem;
}
.filter-dropdown-panel {
    margin-top: 0.6rem;
    max-height: 320px;
    overflow-y: auto;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 0.75rem 1rem;
}
.filter-dropdown-categorie {
    display: block;
    margin-top: 0.5rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kleur-tekst-zacht);
}
.filter-dropdown-categorie:first-of-type {
    margin-top: 0;
}
.filter-dropdown-panel .form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
}
.filter-dropdown-panel .form-check-label {
    padding: 0.5rem 0;
}
.filter-dropdown-veld {
    margin-top: 0.75rem;
}
.filter-dropdown-veld label {
    display: block;
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}
.filter-dropdown-acties {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
/* .btn-sm is doorgaans ~31px hoog — prima voor compacte beheer-UI, maar op deze publieke
   filterpanelen (vaak het eerste wat je op mobiel aantikt) willen we het 44px-aanraakdoel. */
.filter-dropdown-acties .btn {
    min-height: 44px;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.filter-chip {
    display: inline-block;
    padding: 0.4rem 1.1rem;
    border-radius: var(--radius-pil);
    border: 1.5px solid var(--kleur-rand);
    color: var(--kleur-tekst);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease;
}
.filter-chip:hover {
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--kleur-tekst);
}
.filter-chip.actief {
    color: #fff !important;
}

.document-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.document-kaart {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    color: var(--kleur-tekst);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.document-kaart:hover {
    transform: translateY(-2px);
    box-shadow: var(--schaduw);
    color: var(--kleur-tekst);
    text-decoration: none;
}
.document-icoon {
    font-size: 1.75rem;
    flex-shrink: 0;
}
.document-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-grow: 1;
    min-width: 0;
}
.document-titel {
    font-weight: 700;
}
.document-categorie {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pil);
    background-color: var(--kleur-accent);
    color: #fff;
    margin-right: 0.4rem;
}
.document-download {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--kleur-primair);
    white-space: nowrap;
}

.agenda-leeg {
    text-align: center;
    padding: 3.5rem 1rem;
    color: var(--kleur-tekst-zacht);
}
.agenda-leeg-icoon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.agenda-uitgelicht {
    background: linear-gradient(135deg, var(--agenda-kleur, var(--kleur-primair)) 0%, var(--kleur-primair-donker) 120%);
    color: #fff;
    border-radius: var(--radius);
    padding: 2rem 2.25rem;
    margin-bottom: 2.5rem;
    box-shadow: var(--schaduw-groot);
}
.agenda-uitgelicht-label {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pil);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.agenda-uitgelicht h2 {
    color: #fff;
    margin-bottom: 0.5rem;
}
.agenda-uitgelicht-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.95rem;
    opacity: 0.95;
}
.agenda-uitgelicht-beschrijving {
    margin-top: 1rem;
    margin-bottom: 0;
    opacity: 0.95;
}

.agenda-maand-kop {
    position: sticky;
    top: 0;
    background-color: var(--kleur-achtergrond);
    padding: 0.5rem 0;
    z-index: 1;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kleur-tekst-zacht);
}

.agenda-tijdlijn {
    position: relative;
    margin-bottom: 1.5rem;
}
.agenda-tijdlijn::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background-color: var(--kleur-rand);
}
.agenda-item {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding: 1rem 0;
}
.agenda-datum-badge {
    position: relative;
    z-index: 1;
    flex: 0 0 68px;
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--kleur-oppervlak);
    border: 2px solid var(--agenda-kleur, var(--kleur-primair));
    border-radius: var(--radius-klein);
    box-shadow: var(--schaduw);
}
.agenda-datum-dag {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--agenda-kleur, var(--kleur-primair-donker));
}
.agenda-datum-maand {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--kleur-tekst-zacht);
}
.agenda-item-inhoud {
    flex: 1;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-left: 3px solid var(--agenda-kleur, var(--kleur-primair));
    border-radius: var(--radius-klein);
    padding: 0.9rem 1.1rem;
}
.agenda-item-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
.agenda-item-icoon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}
.agenda-uitgelicht h2 .agenda-item-icoon,
.agenda-uitgelicht h3 .agenda-item-icoon {
    width: 1.8rem;
    height: 1.8rem;
    vertical-align: -0.3rem;
    margin-right: 0.4rem;
}
.agenda-tag {
    display: inline-block;
    background-color: var(--kleur-tekst-zacht);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pil);
}
.agenda-item-meta {
    color: var(--kleur-tekst-zacht);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}
.agenda-item-beschrijving {
    margin: 0.5rem 0 0;
}

/* Grid-weergave van "Binnenkort" (Home.razor) — zelfde verenigingskleur-accent als de
   Uitgelicht-tijdlijn hierboven al had, was hier eerder abusievelijk neutraal. */
.agenda-kaart-kleur {
    border-left: 3px solid var(--agenda-kleur, var(--kleur-primair));
}

.agenda-abonneren {
    margin-top: 3rem;
    padding: 1.5rem 1.75rem;
    background-color: var(--kleur-primair-licht);
    border-radius: var(--radius);
}
.agenda-abonneren h3 {
    margin-bottom: 0.5rem;
}
.agenda-abonneren-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

@media (max-width: 767.98px) {
    .agenda-uitgelicht {
        padding: 1.5rem;
    }
    .agenda-tijdlijn::before {
        left: 26px;
    }
    .agenda-datum-badge {
        flex-basis: 52px;
        height: 52px;
    }
    .agenda-datum-dag {
        font-size: 1.05rem;
    }
    .agenda-item {
        gap: 0.85rem;
    }
}

/* ---- Contacten ---- */
.contacten-kop {
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
}
.contacten-kop:first-of-type {
    margin-top: 1.5rem;
}
.contacten-grid {
    margin-top: 0.5rem;
}
.contacten-kaart .kaart-inhoud {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.contacten-telefoon,
.contacten-email {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
}

/* ---- Ondernemersgids ---- */
.ondernemers-filters {
    margin-bottom: 2rem;
}
.ondernemer-kaart .kaart-inhoud {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ondernemer-logo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: var(--kleur-primair-licht);
    padding: 1rem;
}

/* ---- Ondernemersprofiel (verdienmodel — betaald kaart-profiel) ---- */
.ondernemer-cover {
    width: 100%;
    aspect-ratio: 3 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.25rem;
    box-shadow: var(--schaduw);
}
.ondernemer-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ondernemer-profiel-kop {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 0.75rem;
}
.ondernemer-profiel-logo {
    width: 84px;
    height: 84px;
    object-fit: contain;
    background-color: var(--kleur-oppervlak, #fff);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 0.5rem;
    flex-shrink: 0;
}
.ondernemer-profiel-beschrijving {
    font-size: 1.05rem;
    color: var(--kleur-tekst-zacht);
    max-width: 62ch;
}
.ondernemer-profiel-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}
.ondernemer-profiel-kaart {
    height: 320px;
    min-height: 240px;
    margin-bottom: 1rem;
}

/* ---- Sponsor-badges (OndernemerDetail.razor: "Sponsor van", VerenigingViewer.razor: "Onze
   sponsoren") — bewust een ander visueel motief dan .tarief-*/.dorp-keuzekaart-* zodat sponsoring
   herkenbaar als eigen concept oogt, los van pakketten/advertenties. ---- */
.ondernemer-sponsor-badges,
.vereniging-sponsoren-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.75rem 0 1.5rem;
}
.ondernemer-sponsor-badge,
.vereniging-sponsor-kaart {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border: 1.5px solid var(--kleur-rand);
    border-radius: var(--radius-pil);
    background-color: var(--kleur-oppervlak);
    text-decoration: none;
    color: var(--kleur-tekst);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ondernemer-sponsor-badge:hover,
.vereniging-sponsor-kaart:hover {
    transform: translateY(-1px);
    box-shadow: var(--schaduw);
    color: var(--kleur-tekst);
    text-decoration: none;
}
.ondernemer-sponsor-badge img,
.vereniging-sponsor-kaart img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    background-color: #fff;
}
.ondernemer-sponsor-tier,
.vereniging-sponsor-tier {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pil);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background-color: var(--kleur-primair-licht);
    color: var(--kleur-primair-donker);
}
.vereniging-sponsor-kaart-goud {
    border-color: #c9a227;
    box-shadow: 0 0 0 1px color-mix(in srgb, #c9a227 40%, transparent);
}
.vereniging-sponsor-kaart-goud img {
    width: 44px;
    height: 44px;
}

/* ---- Sponsoren-blok (blokken-CMS, SponsorenBlok.razor) — kop erboven, de kaartjes zelf
   hergebruiken .vereniging-sponsor-kaart hierboven. ---- */
.blok-sponsoren h2 {
    text-align: center;
    margin-bottom: 1rem;
}

/* ---- Advertentie-blok (blokken-CMS, AdvertentieBlok.razor) — sponsor-showcase voor zelf
   gekozen verenigingen, op elke pagina inzetbaar, met drie weergave-modi (Carrousel/Grid/
   Uitgelicht). Elke tegel krijgt zowel .kaart (voor het gedeelde .kaart,.card-basisuiterlijk én
   om automatisch mee te doen met de generieke .kaarten-carrousel-infra hierboven) als
   .advertentie-tegel (eigen flex-layout) — .kaart.advertentie-tegel i.p.v. alleen
   .advertentie-tegel om dezelfde specificiteits-valkuil als .kaart.nieuws-kaart hierboven te
   vermijden (a.kaart se display:block zou een kale .advertentie-tegel-regel anders altijd
   winnen). ---- */
.blok-advertentie h2 {
    text-align: center;
    margin-bottom: 1rem;
}
.advertentie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
}
.kaart.advertentie-tegel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 1rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.advertentie-tegel:hover {
    color: inherit;
    text-decoration: none;
}
.advertentie-tegel img {
    max-width: 100%;
    height: 64px;
    object-fit: contain;
}
.advertentie-label {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--kleur-tekst-zacht);
}
.advertentie-naam {
    font-weight: 600;
}
/* Uitgelicht: één grote roterende banner — de tegels liggen over elkaar (position:absolute) en
   faden in/uit via de .actief-klasse, die pwa.js se setupAdvertentieRotatie om de ingestelde
   RotatieSeconden doorschuift. */
.advertentie-uitgelicht {
    position: relative;
    min-height: 220px;
}
.advertentie-uitgelicht-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
.advertentie-uitgelicht-item.actief {
    opacity: 1;
    pointer-events: auto;
}
.advertentie-uitgelicht .advertentie-tegel {
    height: 100%;
    justify-content: center;
}
.advertentie-uitgelicht .advertentie-tegel img {
    height: 96px;
}

/* ---- Nieuwsberichten-blok (blokken-CMS, NieuwsberichtenBlok.razor) — hergebruikt de bestaande
   .kaarten-grid/.nieuws-uitgelicht-layout/.kaarten-carrousel-wrap/.nieuws-lijst-opmaak van
   Home.razor se Dorpsnieuws-sectie 1-op-1, dus verder geen eigen lay-outregels nodig. ---- */
.blok-nieuwsberichten h2 {
    margin-bottom: 1rem;
}

/* ---- Iframe-blok (blokken-CMS, IframeBlok.razor) — generieke embed, elke blok-pagina. ---- */
.blok-iframe iframe {
    width: 100%;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
}

/* ---- Prikbord ---- */
.prikbord-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.prikbord-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.75rem;
    margin-top: 1rem;
}
.prikbord-briefje {
    background-color: #fffbe8;
    border: 1px solid rgba(43, 43, 40, 0.08);
    border-radius: 4px;
    padding: 1.25rem 1.25rem 1.5rem;
    box-shadow: var(--schaduw);
    transform: rotate(var(--prikbord-hoek, -1deg));
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
.prikbord-briefje::before {
    content: "📌";
    position: absolute;
    top: -0.9rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4rem;
}
.prikbord-briefje:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: var(--schaduw-groot);
}
.prikbord-briefje:nth-child(3n+1) { --prikbord-hoek: -1.5deg; }
.prikbord-briefje:nth-child(3n+2) { --prikbord-hoek: 1deg; }
.prikbord-briefje:nth-child(3n) { --prikbord-hoek: -0.5deg; }
.prikbord-briefje-gearchiveerd {
    opacity: 0.6;
}
.prikbord-archief-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pil);
    background-color: var(--kleur-tekst-zacht);
    color: #fff;
    margin-bottom: 0.5rem;
    margin-left: 0.4rem;
}
.prikbord-categorie {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pil);
    background-color: var(--kleur-accent);
    color: #fff;
    margin-bottom: 0.5rem;
}
.prikbord-briefje h3 {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}
.prikbord-tekst {
    color: var(--kleur-tekst);
    white-space: pre-line;
}
.prikbord-tekst-ingeklapt {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prikbord-lees-meer {
    display: inline-block;
    margin-top: 0.4rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--kleur-primair);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}
.prikbord-lees-meer:hover {
    text-decoration: underline;
}
.prikbord-meta {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--kleur-tekst-zacht);
}
.prikbord-formulier {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 2rem;
    max-width: 640px;
}
.honeypot-veld {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Ideeënbus ---- */
.idee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.idee-kaart .kaart-inhoud {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}
.idee-kaart .badge {
    margin-bottom: 0.2rem;
}
.idee-omschrijving {
    white-space: pre-line;
    color: var(--kleur-tekst);
}
.idee-top {
    border-color: var(--kleur-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--kleur-accent) 35%, transparent), var(--schaduw-groot);
}
.idee-top-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kleur-accent-donker);
}
.idee-stem-knop {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pil);
    border: 1.5px solid var(--kleur-rand);
    background-color: var(--kleur-oppervlak);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.idee-stem-knop:hover {
    transform: translateY(-1px);
    border-color: var(--kleur-accent);
}
.idee-stem-knop:active {
    transform: translateY(0) scale(0.96);
}
.idee-stem-knop-actief {
    background-color: color-mix(in srgb, var(--kleur-accent) 16%, white);
    border-color: var(--kleur-accent);
    color: var(--kleur-accent-donker);
}

/* ---- Zoeken ---- */
.zoek-formulier {
    display: flex;
    gap: 0.75rem;
    max-width: 480px;
}
.zoek-formulier .form-control {
    flex: 1;
}
.sidebar-zoeken {
    flex: 1;
    min-width: 0;
}
.sidebar-zoeken form {
    display: flex;
    gap: 0.4rem;
}
.sidebar-zoeken input {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: var(--radius-pil);
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
}
.sidebar-zoeken button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: var(--radius-pil);
    padding: 0;
}
.sidebar-zoeken button:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ---- Meldingen instellen ---- */
.meldingen-status {
    background-color: var(--kleur-primair-licht);
    color: var(--kleur-primair-donker);
    border-radius: var(--radius-klein);
    padding: 0.75rem 1.1rem;
    margin-bottom: 1.25rem;
}
.meldingen-formulier {
    max-width: 640px;
}
.meldingen-verenigingen {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
}
.meldingen-verenigingen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}
.meldingen-vereniging-optie {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-klein);
    border-left: 3px solid var(--agenda-kleur, var(--kleur-primair));
    background-color: var(--kleur-achtergrond);
    cursor: pointer;
}
.meldingen-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.meldingen-extern-zoeker {
    max-width: 640px;
}

/* ---- Menu-beheer: sleepbare boomstructuur (menu-beheer.js) ---- */
.menu-sleep-hint {
    color: var(--kleur-tekst-zacht);
    font-size: 0.9rem;
}
.menu-sleep-boom {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 1.5rem;
}
.menu-sleep-rij {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    transition: margin-left 0.15s ease;
}
.menu-sleep-rij.menu-rij-sleept {
    opacity: 0.35;
}
/* Sub-items krijgen naast de inspringing (inline margin-left, per niveau) ook een eigen
   accentkleur en tint, zodat de hiërarchie in één oogopslag duidelijk is — puur op de
   inspringing vertrouwen bleek te subtiel om op te vallen tussen de sleep-herordeningen door. */
.menu-sleep-rij-sub {
    border-left: 3px solid var(--kleur-primair);
    background-color: var(--kleur-primair-licht);
}
.menu-sleep-tak {
    color: var(--kleur-primair);
    font-weight: 700;
    line-height: 1;
}
.menu-sleep-handvat {
    cursor: grab;
    color: var(--kleur-tekst-zacht);
    font-size: 1.1rem;
    line-height: 1;
    user-select: none;
    touch-action: none;
}
.menu-sleep-handvat:active {
    cursor: grabbing;
}
.menu-sleep-titel {
    font-weight: 500;
}
.menu-sleep-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    flex-wrap: wrap;
    color: var(--kleur-tekst-zacht);
    font-size: 0.85rem;
}
.menu-sleep-acties {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
.menu-sleep-indicator {
    height: 3px;
    background-color: var(--kleur-primair);
    border-radius: 2px;
    margin-block: 2px;
}
.meldingen-extern-zoeker summary {
    color: var(--kleur-tekst-zacht, var(--kleur-tekst));
    cursor: pointer;
    font-size: 0.9rem;
}
.meldingen-extern-inhoud {
    margin-top: 0.6rem;
    position: relative;
}
.meldingen-extern-resultaten {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 220px;
    overflow-y: auto;
}
.meldingen-extern-resultaat {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    font-size: 0.9rem;
    cursor: pointer;
}
.meldingen-extern-resultaat:hover {
    background-color: var(--kleur-achtergrond);
}
.meldingen-extern-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.meldingen-extern-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-pil);
    background-color: var(--kleur-primair-licht);
    color: var(--kleur-primair-donker);
    font-size: 0.85rem;
}
.meldingen-extern-chip-verwijderen {
    border: none;
    background: none;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
}

/* ---- Beheer: zoek-/filterbalk (herbruikt op alle /beheer/*-lijstpagina's) ---- */
.beheer-filterbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.beheer-filterbalk input[type="search"] {
    max-width: 280px;
}
.beheer-filterbalk select {
    max-width: 220px;
}

/* ---- Beheer: lege-staat-vlak (herbruikt op alle /beheer/*-lijstpagina's waar een lijst leeg kan
   zijn) — een gestippeld vlak i.p.v. een losse tekstregel oogt bewust leeg, niet kapot. ---- */
.beheer-leeg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 3rem 1rem;
    color: var(--kleur-tekst-zacht);
    text-align: center;
    background-color: var(--kleur-oppervlak);
    border: 1px dashed var(--kleur-rand);
    border-radius: var(--radius-klein);
}
.beheer-leeg-icoon {
    font-size: 2rem;
}

/* ---- Beheer: selectie-toolbar ("Alles selecteren" + bulkacties in één balk i.p.v. twee losse
   elementen) — herbruikt op de Mailbox-/"Te beoordelen"-/"Afgewezen"-tabs. ---- */
.beheer-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    background-color: var(--kleur-achtergrond);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.6rem;
}
.beheer-toolbar-acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* ---- Nieuwsbrief-postvak: sleep-en-loslaat-upload van Word/PDF-bestanden, zie
   nieuwsbrief-postvak.js ---- */
.postvak-sectie {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 1.25rem;
}
.postvak-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 2rem 1rem;
    border: 2px dashed var(--kleur-rand);
    border-radius: var(--radius-klein);
    background-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst-zacht);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.postvak-dropzone:hover {
    border-color: var(--kleur-primair);
}
.postvak-dropzone.dropzone-actief {
    border-color: var(--kleur-primair);
    background-color: var(--kleur-primair-licht);
    color: var(--kleur-primair-donker);
}
.postvak-dropzone-icoon {
    font-size: 1.75rem;
}
.postvak-input-verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}
.postvak-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.postvak-item {
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 0.85rem 1rem;
}
.postvak-item-gedempt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
.postvak-item-kop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.postvak-item-naam {
    font-weight: 600;
}
.postvak-item-meta {
    font-size: 0.8rem;
    color: var(--kleur-tekst-zacht);
}
.postvak-samenvatting {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}
.postvak-samenvatting::-webkit-details-marker,
.postvak-samenvatting::marker {
    display: none;
}
.postvak-samenvatting::after {
    content: "▸";
    margin-left: auto;
    color: var(--kleur-tekst-zacht);
    transition: transform 0.15s ease;
}
details[open] > .postvak-samenvatting::after {
    transform: rotate(90deg);
}
.postvak-inhoud {
    margin-top: 1rem;
}

/* ---- Beheer: korte uitleg-banner boven een werkstroom-pagina ---- */
.beheer-uitleg {
    background-color: var(--kleur-primair-licht);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 0.85rem 1.1rem;
    font-size: 0.92rem;
}

.beheer-overzicht {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.95rem;
    color: var(--kleur-tekst-zacht);
}
.beheer-overzicht strong {
    color: var(--kleur-tekst);
    font-size: 1.1rem;
}

/* ---- Nieuwsbrief-inzendingen: inklapbare beoordeel-kaarten met genummerde stappen ---- */
.inzending-kaart {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 1rem;
}
.inzending-kaart-samenvatting {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-right: 1.5rem;
    cursor: pointer;
    list-style: none;
}
.inzending-kaart-samenvatting::-webkit-details-marker,
.inzending-kaart-samenvatting::marker {
    display: none;
}
.inzending-kaart-samenvatting::after {
    content: "▸";
    position: absolute;
    top: 0;
    right: 0;
    color: var(--kleur-tekst-zacht);
    transition: transform 0.15s ease;
}
details[open] > .inzending-kaart-samenvatting::after {
    transform: rotate(90deg);
}
.inzending-kaart-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.75rem;
}
.inzending-kaart-titel {
    font-weight: 600;
    font-size: 1.05rem;
}
.inzending-kaart-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--kleur-tekst-zacht);
}
.inzending-kaart-preview {
    font-size: 0.85rem;
    color: var(--kleur-tekst-zacht);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inzending-kaart-inhoud {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.inzending-stap {
    display: flex;
    gap: 0.75rem;
}
.inzending-stap-nummer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--kleur-primair);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}
.inzending-stap-inhoud {
    flex: 1 1 auto;
    min-width: 0;
}
.inzending-origineel {
    white-space: pre-wrap;
    background-color: var(--kleur-achtergrond);
    border-radius: var(--radius-klein);
    padding: 0.75rem;
    margin: 0;
    font-size: 0.92rem;
}
.inzending-ai-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.inzending-acties {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

/* Compacte, klikbare rij in de "Te beoordelen"-lijst — opent het bewerk-scherm hieronder in een
   pop-up i.p.v. inline uit te klappen, zodat de lijst zelf overzichtelijk blijft. Hergebruikt
   .inzending-kaart-kop/-titel/-meta/-preview hierboven ongewijzigd. */
.inzending-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.inzending-rij {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.inzending-rij:hover {
    border-color: var(--kleur-primair-licht);
    box-shadow: var(--schaduw);
}

/* ---- Mailbox-tab (echte IMAP-postvak, Outlook-achtig) — zie PostvakEmailApi.cs +
   NieuwsbriefInzendingenBeheer.razor. Hergebruikt dezelfde rand-/hover-taal als .inzending-rij
   hierboven voor een consistente, compacte "mail-rij"-opmaak door de hele pagina heen. Nu 3
   kolommen: mappenboom · berichtenlijst · leesvenster (zie .leesvenster hieronder). ---- */
.mailbox-layout {
    display: grid;
    grid-template-columns: 200px minmax(260px, 360px) 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 991.98px) {
    .mailbox-layout {
        grid-template-columns: 1fr;
    }
}
.mailbox-berichten-kolom {
    min-width: 0;
}
.mailbox-mappen {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 0.5rem;
    background-color: var(--kleur-oppervlak);
}
.mailbox-map-knop {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius-klein);
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
    color: var(--kleur-tekst);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mailbox-map-knop:hover {
    background-color: var(--kleur-primair-licht);
}
.mailbox-map-actief {
    background-color: var(--kleur-primair-licht);
    font-weight: 600;
    color: var(--kleur-primair);
}
/* Sleep-en-loslaat-doel: dun stippellijntje op elke andere map zodra een bericht versleept wordt
   (zie MailboxSleepStart/MailboxMapNeerzetten), zodat meteen duidelijk is waar je kunt loslaten. */
.mailbox-map-dropdoel {
    outline: 1px dashed var(--kleur-primair);
    outline-offset: -1px;
}
.mailbox-map-dropdoel:hover {
    background-color: var(--kleur-primair-licht);
    color: var(--kleur-primair);
}

.mail-rij-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.mail-rij {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.mail-rij:hover {
    border-color: var(--kleur-primair-licht);
    box-shadow: var(--schaduw);
}
.mail-rij[draggable="true"] {
    cursor: grab;
}
/* Zichtbare "dit wordt nu versleept"-toestand (zie MailboxSleepStart) — halftransparant zodat
   duidelijk is dát er iets versleept wordt, ook als de rij zelf even niet in beeld is. */
.mail-rij-sleep {
    opacity: 0.5;
}
.mail-rij-vinkje {
    margin-top: 0.3rem;
    flex-shrink: 0;
}
.mail-rij-inhoud {
    min-width: 0;
    flex: 1;
}
.mail-rij-kop {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.mail-rij-van {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mail-rij-datum {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--kleur-tekst-zacht);
}
.mail-rij-onderwerp {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mail-rij-snippet {
    font-size: 0.82rem;
    color: var(--kleur-tekst-zacht);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mail-rij-ongelezen .mail-rij-van,
.mail-rij-ongelezen .mail-rij-onderwerp {
    font-weight: 700;
}
.mail-rij-klikbaar {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}
.mail-rij-actief {
    border-color: var(--kleur-primair);
    background-color: var(--kleur-primair-licht);
    box-shadow: var(--schaduw);
}

/* ---- Generieke lijst+leesvenster-layout (Outlook-achtig): links een compacte, klikbare lijst
   (hergebruikt .mail-rij-lijst/.mail-rij hierboven), rechts een leesvenster met de volledige
   inhoud van het geselecteerde item — gebruikt door "Te beoordelen"/"Archief"/"Afgewezen"
   hieronder in NieuwsbriefInzendingenBeheer.razor. ---- */
.leesvenster-layout {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 991.98px) {
    .leesvenster-layout {
        grid-template-columns: 1fr;
    }
}
.leesvenster-lijst-kolom {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 72vh;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.leesvenster {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 1.25rem;
    min-height: 320px;
    max-height: 78vh;
    overflow-y: auto;
    position: sticky;
    top: 1rem;
}
.leesvenster-leeg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 260px;
    color: var(--kleur-tekst-zacht);
    text-align: center;
}
.leesvenster-kop {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem 1rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--kleur-rand);
}
.leesvenster-titel {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.3rem;
}
.leesvenster-meta {
    font-size: 0.85rem;
    color: var(--kleur-tekst-zacht);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.leesvenster-acties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}
.leesvenster-body {
    white-space: pre-wrap;
    font-size: 0.95rem;
    line-height: 1.55;
}
.leesvenster-bijlagen {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--kleur-rand);
    font-size: 0.85rem;
    color: var(--kleur-tekst-zacht);
}
.bijlagen-lijst {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}
.bijlage-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    background-color: var(--kleur-achtergrond);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-pil);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--kleur-tekst);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.bijlage-chip:hover {
    border-color: var(--kleur-primair);
    background-color: var(--kleur-primair-licht);
    color: var(--kleur-primair);
}
.bijlage-chip-grootte {
    color: var(--kleur-tekst-zacht);
    font-size: 0.78rem;
}
.bijlage-chip:hover .bijlage-chip-grootte {
    color: inherit;
}

/* ---- Bijlage-preview (BijlagenLijst.razor) — hergebruikt .inzending-modal-* hierboven voor het
   overlay/dialoog-patroon. ---- */
.bijlage-preview-afbeelding {
    display: flex;
    justify-content: center;
    max-height: 70vh;
    overflow: auto;
}
.bijlage-preview-afbeelding img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-klein);
}
.bijlage-preview-pdf {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
}
.bijlage-preview-leeg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--kleur-tekst-zacht);
    text-align: center;
    background-color: var(--kleur-achtergrond);
    border-radius: var(--radius-klein);
}
.bijlage-preview-leeg-icoon {
    font-size: 2.5rem;
}
.bijlage-preview-acties {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Pop-up bewerkscherm voor één inzending — zelfde overlay/dialoog-patroon als
   MediaPickerModal.razor.css. */
.inzending-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(43, 43, 40, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3vh 1.5rem;
    z-index: 1050;
    overflow-y: auto;
}
.inzending-modal-dialog {
    background-color: var(--kleur-oppervlak);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-groot);
    padding: 1.25rem;
    width: min(760px, 100%);
    margin-bottom: 3vh;
}
.inzending-modal-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ---- Gebruikersbeheer ---- */
.gebruiker-verenigingen-lijst {
    max-height: 220px;
    overflow-y: auto;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 0.75rem 1rem;
}

/* ---- Laad-indicator ---- */
.laden-indicator {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--kleur-tekst-zacht);
    padding: 1rem 0;
}
.laden-spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--kleur-rand);
    border-top-color: var(--kleur-primair);
    border-radius: 50%;
    animation: laden-draaien 0.7s linear infinite;
}
@keyframes laden-draaien {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .laden-spinner {
        animation: none;
    }
}

/* ---- Linkermenu ---- */
.sidebar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    font-size: 1.3rem;
    color: #fff;
}
.sidebar .navbar-brand-logo {
    max-height: 2rem;
    border-radius: 4px;
}
@media (max-width: 640.98px) {
    .sidebar .top-row {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }
    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }
    .sidebar .navbar-brand-logo {
        max-height: 1.75rem;
    }
}
.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: var(--radius-klein);
    margin: 0.1rem 0.5rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sidebar .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}
.sidebar .nav-link.active {
    color: #fff;
    background-color: var(--kleur-accent);
}

/* ---- Linkermenu: in-/uitklapbare groepen ---- */
.nav-groep > summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-klein);
    margin: 0.1rem 0.5rem;
    min-height: 44px;
}
.nav-groep > summary::-webkit-details-marker {
    display: none;
}
.nav-groep > summary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.nav-groep > summary .nav-link {
    flex: 1;
    margin: 0;
}
.nav-groep > summary:hover .nav-link {
    background-color: transparent;
}
.nav-groep-pijl {
    flex-shrink: 0;
    padding-right: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}
.nav-groep[open] > summary .nav-groep-pijl {
    transform: rotate(180deg);
}
.nav-groep-label,
.nav-groep-label-statisch {
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55) !important;
}
.nav-groep-label-statisch {
    padding: 0.6rem 1rem 0.3rem;
}

/* ---- Instellingenpagina's: duidelijk afgebakend blok per onderdeel ---- */
.instellingen-blok {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.instellingen-blok > h2:first-child,
.instellingen-blok > h3:first-child {
    margin-top: 0;
}
.instellingen-blok h3 {
    margin-top: 1.5rem;
}
.instellingen-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.instellingen-preset {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid var(--kleur-rand);
    padding: 0;
    cursor: pointer;
}
.instellingen-preset-actief {
    border-color: var(--kleur-primair);
    box-shadow: 0 0 0 2px var(--kleur-primair-licht);
}
.instellingen-stijlkeuze {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.instellingen-stijlkaart {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 11rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    background-color: var(--kleur-oppervlak);
    text-align: left;
    cursor: pointer;
}
.instellingen-stijlkaart:hover {
    border-color: var(--kleur-primair);
}
.instellingen-stijlkaart-actief {
    border-color: var(--kleur-primair);
    background-color: var(--kleur-primair-licht);
}
.instellingen-stijlkaart-naam {
    font-weight: 600;
    font-size: 0.92rem;
}
.instellingen-stijlkaart-omschrijving {
    font-size: 0.78rem;
    color: var(--kleur-tekst-zacht);
}

/* ---- Blokken-editor (CMS) ---- */
.blok-editor-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 991.98px) {
    .blok-editor-layout {
        grid-template-columns: 1fr;
    }
}
.blok-editor-kaart {
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 1rem;
    margin-bottom: 1rem;
    cursor: grab;
}
.blok-editor-kaart-kop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
/* In-/uitklapknop (zie BlokEditor.razor se Ingeklapt) — een losse knop i.p.v. de hele kop-rij
   klikbaar maken, want die rij bevat al meerdere eigen interactieve besturingselementen
   (animatie-/achtergrondkleur-switches, kleurkiezers, verwijderknop). */
.blok-editor-inklap-knop {
    flex-shrink: 0;
    width: 1.9rem;
    padding: 0.2rem 0;
    line-height: 1;
}
.blok-editor-anker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--kleur-rand);
}
.blok-editor-anker input {
    max-width: 220px;
}
.blok-editor-anker .form-text {
    flex-basis: 100%;
    margin-top: 0.15rem;
}
.blok-editor-schuifbalk {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.blok-editor-schuifbalk .form-range {
    flex: 1;
}
.blok-editor-schuifbalk .input-group {
    width: auto;
    flex-shrink: 0;
}
.blok-editor-schuifbalk .input-group input {
    width: 5rem;
}
.blok-editor-sleepgreep {
    cursor: grab;
    color: var(--kleur-tekst-zacht);
    font-size: 1.1rem;
}
.blok-editor-kiezer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.blok-editor-subkaart {
    border: 1px dashed var(--kleur-rand);
    border-radius: var(--radius-klein);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}
.blok-editor-preview {
    position: sticky;
    top: 1rem;
}
.blok-editor-preview-canvas {
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    padding: 1.5rem;
    background-color: var(--kleur-achtergrond);
    max-height: 80vh;
    overflow-y: auto;
    transition: max-width 0.2s ease;
}
.blok-editor-preview-canvas .blok-reveal {
    opacity: 1;
    transform: none;
}
/* Blokken-CMS-inhoud die via een API-aanroep in een WASM-pagina wordt getoond (bv. de intro
   boven /stukje-insturen): scroll-reveal.js observeert alleen bij DOMContentLoaded/Blazor's
   enhancedload-event (server-gerenderde paginawissels) — geen gebeurtenis die afgaat wanneer
   de WASM-runtime de voorgerenderde DOM vervangt door de eigen render. Zonder deze regel blijft
   zo'n blok daardoor na de eerste (server-voorgerenderde) weergave permanent opacity:0, zelfde
   reden als de live-voorbeeldregel hierboven. */
.wasm-blokken-vast-zichtbaar .blok-reveal {
    opacity: 1;
    transform: none;
}
/* .content op de live site heeft geen eigen max-width (meer) — deze preview vult daarom
   gewoon de volledige preview-canvas, net als een blok dat straks ook edge-to-edge doet. */
.blok-editor-preview-content {
    margin: 0 auto;
}
.blok-editor-preview-toggle {
    display: inline-flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-pil);
    padding: 0.2rem;
}
.blok-editor-preview-toggle button {
    border: none;
    background: none;
    padding: 0.3rem 0.9rem;
    border-radius: var(--radius-pil);
    font-size: 0.85rem;
    color: var(--kleur-tekst-zacht);
    cursor: pointer;
}
.blok-editor-preview-toggle button.actief {
    background-color: var(--kleur-primair);
    color: #fff;
}
.blok-editor-preview-canvas.mobiel {
    max-width: 420px;
    margin: 0 auto;
}

/* ---- Ontwerpstijl-presets ----
   [data-stijl] staat op <html> op de echte site (App.razor) én op de preview-canvas in
   de instellingenbeheerder, zodat dezelfde regels voor allebei gelden. Komt na de kale
   :root-waarden hierboven in bronvolgorde, dus wint bij gelijke specificiteit. */
[data-stijl="modernstrak"] {
    --radius: 8px;
    --radius-klein: 6px;
    --schaduw: 0 1px 2px rgba(43, 43, 40, 0.06), 0 4px 14px -6px rgba(43, 43, 40, 0.14);
    --schaduw-groot: 0 2px 4px rgba(43, 43, 40, 0.06), 0 16px 32px -14px rgba(43, 43, 40, 0.22);
}
[data-stijl="modernstrak"] .sidebar {
    background-image: none;
    background-color: var(--kleur-primair-donker);
}
[data-stijl="modernstrak"] .kaart:hover,
[data-stijl="modernstrak"] .card:hover {
    transform: translateY(-1px);
}

[data-stijl="luxeelegant"] {
    --radius: 22px;
    --radius-klein: 14px;
    --schaduw: 0 2px 6px rgba(43, 43, 40, 0.08), 0 12px 32px -10px rgba(43, 43, 40, 0.16);
    --schaduw-groot: 0 4px 10px rgba(43, 43, 40, 0.08), 0 32px 64px -24px rgba(43, 43, 40, 0.28);
}
[data-stijl="luxeelegant"] .sidebar {
    background-image:
        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, var(--kleur-accent) 0%, transparent 40%),
        linear-gradient(180deg, var(--kleur-primair) 0%, var(--kleur-primair-donker) 100%);
}
[data-stijl="luxeelegant"] .top-row {
    background-color: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
:root[data-bs-theme="dark"][data-stijl="luxeelegant"] .top-row {
    background-color: rgba(36, 38, 31, 0.72);
}
[data-stijl="luxeelegant"] .blok-hero {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.14) 0%, transparent 40%),
        radial-gradient(circle at 90% 85%, var(--kleur-accent) 0%, transparent 45%);
}

[data-stijl="speels"] {
    --radius: 20px;
    --radius-klein: 14px;
    --schaduw: 0 2px 6px rgba(43, 43, 40, 0.07), 0 10px 24px -10px rgba(43, 43, 40, 0.15);
    --schaduw-groot: 0 3px 8px rgba(43, 43, 40, 0.08), 0 22px 44px -18px rgba(43, 43, 40, 0.24);
}
[data-stijl="speels"] .kaart:hover,
[data-stijl="speels"] .card:hover {
    transform: translateY(-5px) scale(1.015);
}
[data-stijl="speels"] .knop:hover {
    transform: translateY(-2px) scale(1.03);
}

/* ---- Lettertype-presets ---- */
[data-lettertype="klassiek"] {
    --lettertype: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
[data-lettertype="rond"] {
    --lettertype: "Century Gothic", "Avenir Next", Avenir, "Nunito Sans", Verdana, sans-serif;
}

/* ---- Dorpskaart (/kaart, /beheer/kaartlocaties) — Leaflet + OpenStreetMap, zie kaart.js/
   kaart-beheer.js. Leaflet's eigen CSS (lui geladen) verzorgt de kaart zelf; hier alleen de
   afmetingen en de eigen marker-/legenda-stijl. ---- */
.kaart-container {
    width: 100%;
    height: 65vh;
    min-height: 360px;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    margin-bottom: 1rem;
    background-color: var(--kleur-oppervlak);
}
.kaartlocatie-kiezer {
    width: 100%;
    height: 320px;
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
    background-color: var(--kleur-achtergrond);
}
.kaart-werkbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}
.kaart-werkbalk-status {
    font-size: 0.85rem;
    color: var(--kleur-tekst-zacht);
}
.kaart-meld-knop {
    display: block;
    margin-top: 0.5rem;
    border: none;
    background: none;
    padding: 0;
    color: var(--kleur-primair);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.kaart-meld-knop:hover {
    text-decoration: underline;
}
.kaart-marker-icoon {
    background: none;
    border: none;
}
.kaart-marker-icoon span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.05rem;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    border: 2px solid #fff;
}
.kaart-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0.85rem 1rem;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
}
.kaart-legenda-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.kaart-legenda-stip {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---- /tarieven — verdienmodel prijskaarten ---- */
.tarieven-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 1.5rem;
}
.tarief-kaart {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--kleur-oppervlak);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius);
    box-shadow: var(--schaduw);
    padding: 2rem 1.75rem 1.75rem;
}
.tarief-kaart h2 {
    font-size: 1.3rem;
    margin: 0 0 0.35rem;
}
.tarief-kaart-aanbevolen {
    border-color: var(--kleur-primair);
    box-shadow: var(--schaduw-groot);
    transform: translateY(-6px);
}
.tarief-badge {
    position: absolute;
    top: -0.75rem;
    left: 1.75rem;
    background-color: var(--kleur-primair);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pil);
}
.tarief-omschrijving {
    color: var(--kleur-tekst-zacht);
    font-size: 0.94rem;
    margin: 0 0 1rem;
}
.tarief-prijs {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--kleur-primair-donker);
    margin: 0 0 1.25rem;
}
.tarief-prijs span {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--kleur-tekst-zacht);
}
.tarief-kenmerken {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex-grow: 1;
}
.tarief-kenmerken li {
    font-size: 0.94rem;
    color: var(--kleur-tekst);
}
.tarief-cta {
    text-align: center;
    margin-top: auto;
}

/* ---- Platform-landingspagina (apex-domein, PlatformLanding.razor) — eigen, van elk dorp
   losstaande identiteit. Serif-koppen op de bestaande systeemlettertype-stack (zelfde stack als
   het "Klassiek"-lettertypepreset hierboven) i.p.v. een webfont: dit project laadt bewust nergens
   externe lettertypen. ---- */
.platform {
    --platform-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.platform-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem clamp(1.25rem, 4vw, 3rem);
    background-color: color-mix(in srgb, var(--kleur-achtergrond) 90%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--kleur-rand);
}
.platform-nav-merk {
    font-family: var(--platform-serif);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--kleur-primair-donker);
    text-decoration: none;
    flex-shrink: 0;
}
.platform-nav-links {
    display: flex;
    gap: 1.75rem;
}
.platform-nav-links a {
    color: var(--kleur-tekst);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
}
.platform-nav-links a:hover {
    color: var(--kleur-primair);
}
.platform-nav-cta {
    white-space: nowrap;
}

/* Alleen zichtbaar in het uitgeklapte mobiele menu (zie media-query onder) — op breder
   scherm neemt de vaste .platform-nav-cta in .platform-nav-rechts die rol al in. */
.platform-nav-cta-mobiel {
    display: none;
}

.platform-nav-rechts {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Checkbox-hack voor het mobiele menu — geen JS nodig, werkt dus ook op deze platform-
   pagina's die zonder interactieve @rendermode server-gerenderd worden. Visueel verborgen
   met opacity/formaat (niet display:none of visibility:hidden) zodat de checkbox met Tab
   bereikbaar en met Spatie/Enter bedienbaar blijft voor toetsenbordgebruikers — het label
   erna krijgt zichtbare focusstijl zodra de (onzichtbare) checkbox focus heeft. */
.platform-nav-toggle-invoer {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.platform-nav-toggle-knop {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    border-radius: 6px;
}
.platform-nav-toggle-knop span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    background-color: var(--kleur-tekst);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.platform-nav-toggle-invoer:focus-visible ~ .platform-nav-rechts .platform-nav-toggle-knop {
    outline: 2px solid var(--kleur-primair);
    outline-offset: 2px;
}

/* Verduisterend overlay achter het uitklapmenu — alleen zichtbaar/klikbaar zodra het menu
   openstaat (zie :checked-regel hieronder), en als <label for="platform-nav-toggle"> sluit
   een klik erop het menu weer, puur met CSS, geen JS nodig (zelfde checkbox-hack-principe). */
.platform-nav-overlay {
    display: none;
}

@media (max-width: 760px) {
    .platform-nav-toggle-knop {
        display: flex;
    }
    /* De vaste CTA-knop naast de hamburger duwde die knop op smalle schermen buiten beeld —
       op mobiel verdwijnt hij hier en staat de CTA i.p.v. daarvan onderaan het uitklapmenu
       (.platform-nav-cta-mobiel hieronder), zodat merknaam + hamburger altijd passen. */
    .platform-nav-rechts .platform-nav-cta {
        display: none;
    }
    .platform-nav-links a.platform-nav-cta-mobiel {
        display: inline-flex;
        justify-content: center;
        margin: 1rem clamp(1.25rem, 4vw, 3rem) 1.25rem;
        padding: 0.65rem 1.25rem;
        border-top: none;
    }
    .platform-nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background-color: var(--kleur-achtergrond);
        border-bottom: 1px solid var(--kleur-rand);
        box-shadow: 0 12px 20px -12px rgba(0, 0, 0, 0.25);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .platform-nav-links a {
        padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
        border-top: 1px solid var(--kleur-rand);
    }
    .platform-nav-toggle-invoer:checked ~ .platform-nav-links {
        max-height: 70vh;
        overflow-y: auto;
    }
    .platform-nav-toggle-invoer:checked ~ .platform-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 15;
        background-color: rgba(0, 0, 0, 0.45);
        cursor: default;
    }
    .platform-nav-toggle-invoer:checked ~ .platform-nav-rechts .platform-nav-toggle-knop span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .platform-nav-toggle-invoer:checked ~ .platform-nav-rechts .platform-nav-toggle-knop span:nth-child(2) {
        opacity: 0;
    }
    .platform-nav-toggle-invoer:checked ~ .platform-nav-rechts .platform-nav-toggle-knop span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
    .platform-nav-links {
        transition: none;
    }
}

.platform-hero {
    position: relative;
    padding: clamp(4rem, 10vw, 7rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 8vw, 5rem);
    text-align: center;
    overflow: hidden;
}
.platform-hero-achtergrond {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--kleur-primair) 16%, transparent), transparent 45%),
        radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--kleur-accent) 14%, transparent), transparent 40%),
        radial-gradient(circle at 50% 95%, color-mix(in srgb, var(--kleur-primair) 10%, transparent), transparent 50%);
}
.platform-hero-achtergrond::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--kleur-primair) 30%, transparent) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 65% 55% at center, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 65% 55% at center, black 0%, transparent 75%);
    opacity: 0.6;
}
.platform-hero-inhoud {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
}
.platform-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--kleur-primair-donker);
    background-color: var(--kleur-primair-licht);
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pil);
    margin-bottom: 1.25rem;
}
.platform-hero h1 {
    font-family: var(--platform-serif);
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.14;
    margin: 0 0 1.25rem;
    color: var(--kleur-tekst);
    text-wrap: balance;
}
.platform-hero-tekst {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--kleur-tekst-zacht);
    max-width: 60ch;
    margin: 0 auto 2rem;
}
.platform-hero-acties {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.platform-hero-stat {
    font-size: 0.95rem;
    color: var(--kleur-tekst-zacht);
    margin: 0;
}
.platform-hero-stat strong {
    color: var(--kleur-primair-donker);
    font-size: 1.15rem;
}

.platform-kaart {
    max-width: 1100px;
    margin: 0 auto;
    height: 460px;
}

/* ---- Vrije blokkenlijst onder de Hero ("ultieme bouwvrijheid" — zie PlatformLanding.razor/
   LandingspaginaBeheer.razor). Elk blok is zelf pagina-breed (zodat een eigen achtergrondkleur,
   zie BlokEditor.razor, van rand tot rand loopt — precies zoals de vroegere vaste, soms getinte
   secties dat ook deden), terwijl de daadwerkelijke inhoud via de directe-kind-selector
   hieronder een leesbare, gecentreerde breedte houdt — dit werkt voor elk bloktype, ongeacht
   welke wortel-tag dat bloktype zelf rendert. ---- */
.platform-blokken .blok {
    width: 100%;
    padding-top: var(--blok-padding-boven, clamp(2.5rem, 6vw, 4rem));
    padding-bottom: var(--blok-padding-onder, clamp(2.5rem, 6vw, 4rem));
    padding-left: clamp(1.25rem, 4vw, 3rem);
    padding-right: clamp(1.25rem, 4vw, 3rem);
}
.platform-blokken .blok > * {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.blok-dorpenkaart h2 {
    font-family: var(--platform-serif);
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    text-align: center;
    text-wrap: balance;
}
.blok-dorpenkaart p {
    max-width: 700px;
    margin: 0.5rem auto 2rem;
    text-align: center;
    color: var(--kleur-tekst-zacht);
    font-size: 1.05rem;
}

.platform-footer {
    text-align: center;
    padding: 2rem 1.25rem;
    color: var(--kleur-tekst-zacht);
    font-size: 0.85rem;
}

/* Kleine terugknop bovenaan een platformpagina zonder eigen Hero (bv. Over ons) — de Hero zelf
   blijft uniek voor de landingspagina. */
.platform-pagina-kop {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 0;
}
.platform-pagina-terug {
    color: var(--kleur-tekst-zacht);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}
.platform-pagina-terug:hover {
    color: var(--kleur-primair);
}
.platform-pagina-intro {
    max-width: 620px;
    color: var(--kleur-tekst-zacht);
}

.platform-sponsoren-grid {
    max-width: 1100px;
    margin: 1.5rem auto 0;
    padding: 0 clamp(1.25rem, 4vw, 3rem) 3rem;
}

@media (prefers-reduced-motion: reduce) {
    .platform-feature {
        transition: none;
    }
}

/* ---- Dorp aanmelden (DorpAanmelden.razor) — bereikbaar vanaf het apex-domein, waar
   MainLayout bewust geen dorps-chrome (sidebar/padding) omheen zet (zie MainLayout.razor);
   deze pagina bouwt daarom haar eigen volledige scherm, in dezelfde taal als de
   platform-landingspagina hierboven (zachte kleurwaas, gecentreerde kaart). Werkt ook prima
   als de pagina ooit vanuit een gewone dorpscontext bezocht wordt — de kleuren volgen dan
   gewoon de huisstijl van dat dorp. ---- */
.aanmeld-scherm {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.25rem 4rem;
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--kleur-primair) 12%, transparent) 0%, transparent 45%),
        radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--kleur-accent) 12%, transparent) 0%, transparent 45%),
        var(--kleur-achtergrond);
}
.aanmeld-terug {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--kleur-tekst-zacht);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
}
.aanmeld-terug:hover {
    color: var(--kleur-primair);
}
.aanmeld-kaart {
    width: 100%;
    max-width: 560px;
    background-color: var(--kleur-oppervlak);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-groot);
    padding: 2.5rem;
    animation: aanmeldKaartOp 0.35s ease;
}
.aanmeld-icoon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 0.85rem;
}
.aanmeld-kaart h1 {
    font-size: 1.55rem;
    margin-bottom: 0.6rem;
}
.aanmeld-intro {
    color: var(--kleur-tekst-zacht);
    line-height: 1.6;
    margin-bottom: 1.75rem;
}
.aanmeld-succes {
    text-align: center;
    padding: 0.5rem 0;
}
.aanmeld-succes-icoon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}
.aanmeld-succes .aanmeld-intro {
    margin-bottom: 1.75rem;
}
@keyframes aanmeldKaartOp {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 575.98px) {
    .aanmeld-kaart {
        padding: 1.75rem 1.5rem;
    }
}

/* ---- /beheer/landingspagina — stappen/features-lijsteditors ---- */
.landing-lijst-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem;
    margin-bottom: 0.75rem;
    background-color: var(--kleur-achtergrond, #f8f7f2);
    border: 1px solid var(--kleur-rand);
    border-radius: var(--radius-klein);
}
.landing-lijst-item-nummer {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--kleur-primair);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 0.2rem;
}
.landing-lijst-item-emoji {
    flex-shrink: 0;
    width: 64px;
    text-align: center;
    font-size: 1.2rem;
}
.landing-lijst-item-velden {
    flex-grow: 1;
    min-width: 0;
}
.landing-lijst-item-acties {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}