/* Lettertypes op de eigen server (sneller, en geen gegevens naar Google Fonts). Archivo 500/700/900, Source Serif 4 variabel. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/archivo-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/archivo-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/archivo-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/archivo-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/archivo-latin-ext-900-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/archivo-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/assets/fonts/source-serif-4-latin-ext-opsz-normal.woff2) format('woff2-variations'), url(/assets/fonts/source-serif-4-latin-ext-opsz-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/assets/fonts/source-serif-4-latin-opsz-normal.woff2) format('woff2-variations'), url(/assets/fonts/source-serif-4-latin-opsz-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Feitjes Amsterdam, stylesheet v1. Palet: zwart, rood, zand, grachtenblauw op wit. */

:root {
  --zwart: #1A1A1A;
  --rood: #E1001A;
  --rood-licht: #FF4D5E;
  --zand: #F3EADB;
  --zand-donker: #E8DFCF;
  --zand-licht: #FBF8F2;
  --blauw: #1F4E9C;
  --blauw-licht: #D6E2F7;
  --blauw-zacht: #B9C9E4;
  --wit: #FFFFFF;
  --grijs: #5A5A5A;
  --grijs-tekst: #3A3A3A;
  --kop: 'Archivo', system-ui, sans-serif;
  --tekst: 'Source Serif 4', Georgia, serif;
  --marge: clamp(16px, 3vw, 40px);
  --radius: 12px;
  --max: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--wit); color: var(--zwart); font-family: var(--tekst); font-size: 17px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rood); }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--kop); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; margin: 0; }
main { max-width: var(--max); margin: 0 auto; width: 100%; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--zwart); color: #fff; padding: 8px 12px; z-index: 100; }

/* ---------- Typografische bouwstenen ----------
   Vaste rollen, elk met een eigen vorm:
   1. Thema-label (.label-rood): rood kapitaal. Alleen het thema of soort van een item, direct boven de titel, of het label van een gekleurd vak.
   2. Sectiekop (.sectiekop): zwart, vet, gewone schrijfwijze, dikke lijn erboven. Koppen van kolommen en lijsten.
   3. Bovenkop en veldlabel (.kopje-grijs): grijs kapitaal. Waar je bent (boven een paginatitel) en labels bij velden.
   4. Meta (.meta, .meta-rij): grijs, zinsletters, onderdelen gescheiden door een punt. */
.label-rood, .label-zwart, .label-licht, .kopje-grijs, .klein-caps {
  font-family: var(--kop); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
}
.label-rood { color: var(--rood); }
.label-zwart { color: var(--zwart); }
.label-licht { color: var(--blauw-licht); }
.kopje-grijs { color: var(--grijs); display: block; }
.klein-caps { letter-spacing: 0.08em; }
.sectiekop { display: block; font-family: var(--kop); font-weight: 900; font-size: 19px; line-height: 1.1; letter-spacing: -0.02em; color: var(--zwart); text-transform: none; border-top: 3px solid var(--zwart); padding-top: 10px; margin: 0 0 14px; }
.meta { font-family: var(--kop); font-size: 13px; font-weight: 500; color: var(--grijs); }
.meta-licht { font-family: var(--kop); font-size: 13px; color: #BDBDBD; }
.meta-rij { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-family: var(--kop); font-size: 13px; font-weight: 500; color: var(--grijs); }
.meta-rij { gap: 4px 14px; overflow: hidden; padding: 2px 0; }
.meta-rij > * { position: relative; }
.meta-rij > *::before { content: "\00B7"; position: absolute; left: -14px; width: 14px; text-align: center; color: var(--grijs); font-weight: 700; }
.meta-rij a:not(.link-blauw) { color: var(--grijs); }
.meta-rij a:not(.link-blauw):hover { color: var(--zwart); text-decoration: underline; }
.link-rood { color: var(--rood); font-family: var(--kop); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.link-blauw { color: var(--blauw); font-family: var(--kop); font-weight: 700; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.link-blauw:hover, .link-rood:hover { text-decoration: underline; }
.kicker { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.scheiding { color: var(--zand-donker); }
.nummer { font-family: var(--kop); font-weight: 900; color: var(--rood); }

.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; font-family: var(--kop); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; white-space: nowrap; }
.knop-rood { background: var(--rood); color: #fff; }
.knop-rood:hover { background: #C50017; color: #fff; }
.knop-zwart { background: var(--zwart); color: #fff; }
.knop-zwart:hover { background: #000; color: #fff; }
.knop-wit { background: #fff; color: var(--zwart); }
.knop-zand { background: var(--zand); color: var(--zwart); }
.knop-zand:hover { background: var(--zand-donker); color: var(--zwart); }
.knop-klein { min-height: 30px; padding: 0 12px; border-radius: 4px; font-size: 11px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--zand); font-family: var(--kop); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.chip:hover { background: var(--zand-donker); color: var(--zwart); }
.chip-actief { background: var(--zwart); color: #fff; }
.chip-actief:hover { background: var(--zwart); color: #fff; }
.chip-omlijnd { background: #fff; border: 1px solid var(--zand-donker); }
.chip-omlijnd.chip-actief { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.chip-licht { background: rgba(255,255,255,0.16); color: #fff; }
.chip-licht:hover { background: rgba(255,255,255,0.28); color: #fff; }

/* Beeld: afbeelding of, zolang media ontbreken, een zandvlak */
.beeld { width: 100%; border-radius: var(--radius); object-fit: cover; background: var(--zand); }
.beeld-leeg { display: flex; align-items: flex-end; padding: 12px; font-family: var(--kop); font-size: 11px; color: var(--grijs); background: linear-gradient(135deg, #D9CDB8, #C9C0B0); }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-21-9 { aspect-ratio: 21 / 9; }
.ratio-1-1 { aspect-ratio: 1 / 1; }

/* ---------- Kop ---------- */
.site-kop { padding: 0 var(--marge); max-width: var(--max); margin: 0 auto; }
.kop-bovenbalk { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--zand-donker); font-family: var(--kop); font-size: 12px; font-weight: 500; color: var(--grijs); }
.kop-tagline { font-family: var(--tekst); font-style: italic; font-size: 13px; }
.kop-rechts { display: flex; gap: 14px; align-items: center; }
.taal { color: var(--zwart); font-weight: 700; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.taal.actief { border-color: var(--rood); }
.kop-masthead { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; padding: 22px 0 16px; border-bottom: 3px solid var(--zwart); }
.masthead { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 18px; }
.masthead:hover { color: var(--zwart); }
.masthead-naam { font-family: var(--kop); font-weight: 900; font-size: clamp(26px, 5vw, 64px); letter-spacing: -0.04em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.xxx { font-family: var(--kop); font-weight: 900; font-size: clamp(11px, 1.6vw, 22px); color: var(--rood); letter-spacing: -0.05em; }
.kop-menu-knop, .kop-zoek-knop { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--zwart); }
.kop-menu-knop { grid-column: 1; }
.kop-zoek-knop { grid-column: 3; }
.hoofdnav { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--zand-donker); font-family: var(--kop); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.nav-themas { display: flex; align-items: center; justify-content: safe center; gap: clamp(12px, 1.8vw, 28px); min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 6px 0; }
.hoofdnav .nav-specials-mobiel { display: none; }
@media (max-width: 1120px) and (min-width: 901px) { .nav-themas { gap: 14px; font-size: 10px; letter-spacing: 0.05em; } }
.nav-themas::-webkit-scrollbar { display: none; }
.nav-themas a { white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav-themas a:hover { color: var(--zwart); border-bottom-color: var(--rood); }
.nav-specials { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav-pil { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 999px; border: 1.5px solid var(--zand-donker); color: var(--zwart); font-family: var(--kop); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.nav-pil svg { width: 16px; height: 16px; fill: none; stroke: var(--rood); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-pil:hover { background: var(--zwart); border-color: var(--zwart); color: #fff; }
.nav-pil:hover svg { stroke: #fff; }
.nav-pil-vol { background: var(--rood); border-color: var(--rood); color: #fff; }
.nav-pil-vol svg { stroke: #fff; }
.nav-pil-vol:hover { background: #C50017; border-color: #C50017; }
.nav-mobiel-extra { display: none; }

@media (max-width: 900px) {
  .kop-tagline { display: none; }
  .kop-menu-knop { display: flex; }
  .hoofdnav { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .hoofdnav.open { display: flex; }
  .nav-themas { flex-direction: column; align-items: stretch; gap: 0; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .nav-themas a, .nav-mobiel-extra a { padding: 14px 0; border-bottom: 1px solid var(--zand-donker); }
  .nav-themas a:hover { border-bottom-color: var(--zand-donker); }
  .nav-specials-boven { display: none; }
  .hoofdnav .nav-specials-mobiel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--zand-donker); }
  .nav-pil { height: 40px; justify-content: center; }
  .nav-mobiel-extra { display: flex; flex-direction: column; }
  .kop-bovenbalk .knop { display: none; }
}
@media (min-width: 901px) { .kop-menu-knop { visibility: hidden; } }
@media (max-width: 600px) {
  .kop-masthead { grid-template-columns: 40px minmax(0, 1fr) 40px; padding: 16px 0 12px; }
  .kop-menu-knop, .kop-zoek-knop { width: 40px; }
  .masthead { gap: 6px; min-width: 0; }
  .masthead-naam { font-size: clamp(17px, 5.4vw, 28px); letter-spacing: -0.03em; }
  .xxx { font-size: 10px; }
}
.zoek-kop > div { min-width: 0; width: 100%; }
.zoek-form input { width: 100%; }
.route-kaart { grid-template-columns: 150px minmax(0, 1fr); }
@media (max-width: 600px) {
  .zoek-form input { font-size: 18px; padding: 12px 14px; }
  .zoek-form .knop { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 400px) {
  .route-kaart { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .route-kaart .routeschets { width: 84px; height: 84px; }
  .route-kaart-tekst strong { font-size: 18px; overflow-wrap: anywhere; }
}
/* Themamenu: actief thema in het hoofdmenu; de chipsrij alleen op mobiel (daar zit het hoofdmenu achter de knop) */
.nav-themas a.actief { color: var(--zwart); border-bottom-color: var(--rood); }
/* Vangnet: nooit horizontaal scrollen op de pagina zelf */
html, body { overflow-x: clip; }

/* ---------- Voorpagina ---------- */
.voorpagina { display: grid; grid-template-columns: 3fr 6fr 3fr; gap: 32px; padding: 32px var(--marge); }
.voorpagina-links { display: flex; flex-direction: column; gap: 20px; }
.fvd { background: var(--zand); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.fvd-getal { font-family: var(--kop); font-weight: 900; font-size: 72px; line-height: 0.9; letter-spacing: -0.04em; color: var(--rood); }
.fvd-tekst { margin: 0; font-size: 18px; line-height: 1.4; }
.fvd-knoppen { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fvd-knoppen .knop { border-radius: 8px; }
.meest-gelezen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.4; }
.meest-gelezen li { display: flex; gap: 12px; }
.meest-gelezen .nummer { width: 18px; flex-shrink: 0; }
.opening { display: flex; flex-direction: column; gap: 18px; }
.opening h1 { font-size: clamp(30px, 3.4vw, 46px); }
.opening-intro { margin: 0; font-size: 19px; line-height: 1.5; color: var(--grijs-tekst); }
.voorpagina-rechts { display: flex; flex-direction: column; border-left: 1px solid var(--zand-donker); padding-left: 32px; }
.voorpagina-rechts .sectiekop { margin-bottom: 18px; }
.art-regel { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--zand-donker); }
.art-regel:last-child { border-bottom: 0; margin-bottom: 0; }
.art-regel-titel { font-family: var(--kop); font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; }

@media (max-width: 1000px) {
  .voorpagina { grid-template-columns: 1fr 1fr; }
  .opening { grid-column: 1 / -1; order: -1; }
  .voorpagina-rechts { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .voorpagina { grid-template-columns: 1fr; gap: 24px; padding-top: 20px; }
}

/* ---------- Advertenties ---------- */
.advertentie { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 var(--marge) 32px; }
.advertentie-label { font-family: var(--kop); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--grijs); }
.advertentie-vlak { width: 100%; max-width: 970px; height: 250px; border: 1px dashed var(--zand-donker); border-radius: 8px; background: var(--zand-licht); display: flex; align-items: center; justify-content: center; font-family: var(--kop); font-size: 12px; color: var(--grijs); }
.advertentie-rechthoek { padding: 0; margin: 8px 0; }
.advertentie-rechthoek .advertentie-vlak { height: 280px; }
.advertentie-zijkolom { padding: 0; align-items: stretch; }
.advertentie-zijkolom .advertentie-vlak { height: 250px; }
@media (max-width: 640px) { .advertentie-vlak { height: 100px; } }

/* ---------- Kaartband ---------- */
.kaartband { margin: 0 var(--marge); background: var(--blauw); color: #fff; border-radius: 20px; padding: 48px; display: grid; grid-template-columns: 4fr 8fr; gap: 32px; align-items: center; }
.kaartband-tekst { display: flex; flex-direction: column; gap: 16px; }
.kaartband h2 { font-size: clamp(30px, 3.2vw, 42px); text-transform: uppercase; line-height: 0.98; }
.kaartband p { margin: 0; font-size: 17px; color: var(--blauw-licht); }
.kaartband .knop { align-self: flex-start; margin-top: 8px; }
.kaartband-kaart { display: block; }
.minikaart { width: 100%; aspect-ratio: 16 / 8; background: var(--zand); border-radius: var(--radius); position: relative; overflow: hidden; background-image: linear-gradient(var(--zand-donker) 1px, transparent 1px), linear-gradient(90deg, var(--zand-donker) 1px, transparent 1px); background-size: 36px 36px; }
.minikaart-vierkant { aspect-ratio: 1 / 1; }
.minikaart .marker { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--rood); border: 2px solid #fff; transform: translate(-50%, -50%); }
.minikaart .marker-zwart { background: var(--zwart); }
.minikaart .marker-groot { width: 18px; height: 18px; box-shadow: 0 0 0 8px rgba(225,0,26,0.18); }
.minikaart .gracht { position: absolute; border: 3px solid var(--blauw-zacht); border-radius: 50% 50% 46% 46%; }
.kaartband-kaart.klein .minikaart { aspect-ratio: 16 / 7; }
@media (max-width: 900px) { .kaartband { grid-template-columns: 1fr; padding: 28px 20px; border-radius: 16px; } }

/* ---------- Blokken en rasters ---------- */
.blok { padding: 40px var(--marge) 8px; }
.blok-kop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.blok h2, .blok-titel { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 20px; }
.blok-kop h2 { margin-bottom: 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid-4, .grid-2 { grid-template-columns: 1fr; } }
.art-kaart { display: flex; flex-direction: column; gap: 10px; }
.art-kaart h3 { font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.art-klein { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--zand-donker); }
.art-klein-beeld { width: 72px; height: 72px; border-radius: 8px; flex-shrink: 0; padding: 0; font-size: 0; }
.art-klein-tekst { display: flex; flex-direction: column; gap: 4px; }
.art-klein strong { font-family: var(--kop); font-size: 16px; line-height: 1.2; }
.thema-tegels { gap: 14px; }
.thema-tegel { background: var(--zand); border-radius: var(--radius); padding: 20px; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--kop); }
.thema-tegel:hover { background: var(--zand-donker); color: var(--zwart); }
.thema-tegel strong { font-size: 17px; font-weight: 900; }
.thema-tegel span { font-size: 12px; color: var(--rood); font-weight: 700; }

.drieluik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 48px; }
@media (max-width: 900px) { .drieluik { grid-template-columns: 1fr; } }
.paneel { border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.paneel-zand { background: var(--zand); }
.paneel-zwart { background: var(--zwart); color: #fff; }
.paneel-zwart h2 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.05; }
.paneel-wit { background: #fff; border: 1px solid var(--zand-donker); }
.paneel-kop { display: flex; justify-content: space-between; align-items: baseline; }
.paneel-regel { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--zand-donker); }
.paneel-regel:last-of-type { border-bottom: 0; }
.paneel-regel strong { font-family: var(--kop); font-size: 17px; line-height: 1.2; }
.quiz-opties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quiz-opties button { min-height: 44px; border: 0; border-radius: 8px; background: rgba(255,255,255,0.12); color: #fff; font-family: var(--kop); font-weight: 700; font-size: 15px; cursor: pointer; }
.quiz-opties button:hover { background: rgba(255,255,255,0.22); }
.quiz-opties button.goed { background: var(--blauw); }
.quiz-opties button.fout { background: var(--rood); }
.boek-regel { display: flex; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--zand-donker); }
.boek-regel:last-of-type { border-bottom: 0; }
.boek-regel strong { font-family: var(--kop); font-size: 15px; line-height: 1.2; display: block; }
.boek-omslag { width: 48px; height: 64px; background: var(--blauw-zacht); border-radius: 4px; flex-shrink: 0; overflow: hidden; }
.boek-omslag img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Artikel ---------- */
.kruimels { padding: 14px var(--marge); font-family: var(--kop); font-size: 12px; font-weight: 500; color: var(--grijs); display: flex; gap: 8px; flex-wrap: wrap; }
.kruimels span:last-child { color: var(--zwart); }
.artikel-kop { padding: clamp(24px, 4vw, 48px) var(--marge) 32px; display: flex; flex-direction: column; gap: 20px; max-width: calc(var(--max) * 0.83); margin: 0 auto; }
.artikel-kop h1 { font-size: clamp(32px, 5vw, 60px); line-height: 0.98; letter-spacing: -0.035em; }
.artikel-intro { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; max-width: 820px; color: var(--grijs-tekst); }
.artikel-beeld { margin: 0; padding: 0 var(--marge) 40px; display: flex; flex-direction: column; gap: 10px; }
.artikel-beeld figcaption { font-family: var(--kop); font-size: 12px; color: var(--grijs); }
.artikel-raster { display: grid; grid-template-columns: 1fr 7fr 3fr; gap: 32px; padding: 0 var(--marge) 48px; }
.artikel-tekst { grid-column: 2; display: flex; flex-direction: column; gap: 24px; font-size: 19px; line-height: 1.6; min-width: 0; }
.artikel-zijkolom { grid-column: 3; display: flex; flex-direction: column; gap: 28px; border-left: 1px solid var(--zand-donker); padding-left: 32px; min-width: 0; }
@media (max-width: 1100px) { .artikel-raster { grid-template-columns: 7fr 3fr; } .artikel-tekst { grid-column: 1; } .artikel-zijkolom { grid-column: 2; } }
@media (max-width: 800px) { .artikel-raster { grid-template-columns: 1fr; } .artikel-zijkolom { grid-column: 1; border-left: 0; padding-left: 0; border-top: 1px solid var(--zand-donker); padding-top: 28px; } .artikel-tekst { font-size: 17px; } }

.notendop { background: var(--zand); border-radius: var(--radius); padding: 24px 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.notendop-getal { font-family: var(--kop); font-weight: 900; font-size: clamp(48px, 6vw, 88px); line-height: 0.9; letter-spacing: -0.05em; color: var(--rood); }
.notendop p { margin: 4px 0 0; font-size: 20px; line-height: 1.35; font-weight: 600; }
@media (max-width: 520px) { .notendop { grid-template-columns: 1fr; gap: 10px; } }

.prose > * + * { margin-top: 1.2em; }
.prose p { margin: 0; }
/* Witruimte tussen alinea's (de regel hierboven zette die per ongeluk op nul) */
.prose > * + p, .prose > * + ul, .prose > * + ol { margin-top: 1em; }
.prose > h2 + p, .prose > h3 + p, .prose > h4 + p { margin-top: 0.45em; }
.prose h3 { font-size: clamp(19px, 1.8vw, 22px); letter-spacing: -0.01em; margin-top: 1.4em; }
.prose h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; margin-top: 1.6em; }
.prose h3 { font-size: 22px; font-weight: 700; margin-top: 1.4em; }
.prose a { color: var(--blauw); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--rood); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose figure { margin: 1.6em 0 0; display: flex; flex-direction: column; gap: 8px; }
.prose figure img { border-radius: var(--radius); width: 100%; }
.prose figcaption { font-family: var(--kop); font-size: 12px; color: var(--grijs); }
.prose img { border-radius: var(--radius); }
.prose blockquote { margin: 1.6em 0 0; padding: 20px 0 20px 28px; border-left: 6px solid var(--rood); font-family: var(--kop); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.prose blockquote p { margin: 0; }
.prose .weetje { background: var(--zand); border-radius: var(--radius); padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; font-size: 17px; }
.prose .weetje h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rood); margin: 0; }
.prose .video { }
.video-kader { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--zwart); }
.video-kader iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose strong { font-weight: 600; }

.snelle-feitjes { background: var(--zwart); color: #fff; border-radius: var(--radius); padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.snelle-feitjes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.45; }
.snelle-feitjes li { display: flex; gap: 14px; }
.snelle-feitjes a { color: var(--blauw-licht); text-decoration: underline; }

.bronnen { border-top: 1px solid var(--zand-donker); border-bottom: 1px solid var(--zand-donker); padding: 16px 0; font-size: 15px; }
.bronnen summary { font-family: var(--kop); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 28px; list-style: none; }
.bronnen summary::-webkit-details-marker { display: none; }
.bronnen summary span { font-size: 18px; color: var(--rood); }
.bronnen[open] summary span { transform: rotate(45deg); }
.bronnen ol { margin: 14px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--grijs-tekst); }
.bronnen a { color: var(--blauw); text-decoration: underline; }
.bronnen .meta { margin: 12px 0 0; }

.delen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.delen .label-zwart { margin-right: 8px; }

.shop-inline { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 22px; align-items: center; background: var(--zand); border-radius: var(--radius); padding: 20px 24px; margin: 8px 0 0; font-size: 15px; color: var(--zwart); text-decoration: none; transition: background 0.15s; }
.shop-inline:hover { background: var(--zand-donker); color: var(--zwart); }
.shop-inline .shop-inline-uitleg { font-family: var(--tekst); color: var(--grijs-tekst); line-height: 1.45; }
.shop-inline-knop { font-family: var(--kop); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rood); margin-top: 6px; }
.shop-inline:hover .shop-inline-knop { text-decoration: underline; }
.shop-inline .boek-omslag { width: 84px; height: 112px; }
.shop-inline-tekst { display: flex; flex-direction: column; gap: 3px; }
.shop-inline strong { font-family: var(--kop); font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.shop-zij { display: flex; gap: 14px; align-items: center; background: var(--zand); border-radius: var(--radius); padding: 14px; }
.shop-zij strong { font-family: var(--kop); font-size: 14px; line-height: 1.2; display: block; }

.zij-blok { display: flex; flex-direction: column; gap: 10px; }
.zij-blok .sectiekop { margin-bottom: 2px; }
.zij-regel { display: flex; flex-direction: column; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--zand-donker); }
.zij-regel strong { font-family: var(--kop); font-size: 15px; line-height: 1.25; }
.beeldkaart { aspect-ratio: 4 / 5; background: var(--rood); color: #fff; border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--kop); }
.beeldkaart-merk { font-weight: 900; font-size: 12px; letter-spacing: -0.04em; }
.beeldkaart-getal { font-weight: 900; font-size: 72px; line-height: 0.9; letter-spacing: -0.05em; }
.beeldkaart-tekst { font-family: var(--tekst); font-size: 15px; line-height: 1.3; }
.beeldkaart-url { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }

.vorige-volgende { margin: 0 var(--marge) 40px; background: var(--blauw); color: #fff; border-radius: 16px; padding: 32px 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.vorige-volgende a { display: flex; flex-direction: column; gap: 6px; color: #fff; }
.vorige-volgende a:hover { color: var(--blauw-licht); }
.vorige-volgende .rechts { text-align: right; }
.vorige-volgende strong { font-family: var(--kop); font-weight: 900; font-size: 22px; line-height: 1.05; letter-spacing: -0.02em; }
@media (max-width: 640px) { .vorige-volgende { grid-template-columns: 1fr; padding: 24px; } .vorige-volgende .rechts { text-align: left; } }

/* ---------- Overzichten (thema, buurt) ---------- */
.thema-balk { display: flex; gap: 8px; padding: 14px var(--marge); overflow-x: auto; border-bottom: 1px solid var(--zand-donker); scrollbar-width: none; }
.thema-balk::-webkit-scrollbar { display: none; }
.overzicht-kop { padding: 40px var(--marge) 24px; display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: end; }
.overzicht-kop h1 { font-size: clamp(40px, 5vw, 64px); line-height: 0.95; letter-spacing: -0.04em; margin-top: 12px; }
.overzicht-intro { margin: 12px 0 0; font-size: 20px; line-height: 1.5; color: var(--grijs-tekst); max-width: 620px; }
.serie-kaart { background: var(--zand); border-radius: var(--radius); padding: 24px; display: flex; gap: 20px; align-items: center; }
.serie-kaart > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.serie-kaart strong { font-family: var(--kop); font-size: 18px; line-height: 1.2; }
.serie-getal { font-family: var(--kop); font-weight: 900; font-size: 64px; line-height: 0.9; letter-spacing: -0.05em; color: var(--rood); }
@media (max-width: 800px) { .overzicht-kop { grid-template-columns: 1fr; } }
.filterbalk { margin: 0 var(--marge); padding-bottom: 20px; border-bottom: 1px solid var(--zand-donker); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.filterbalk .kopje-grijs { margin-right: 6px; display: inline; }
.filter-rechts { display: flex; gap: 16px; align-items: center; }
.overzicht-uitgelicht { padding: 32px var(--marge); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.uitgelicht { display: flex; flex-direction: column; gap: 14px; }
.uitgelicht h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.02; }
.uitgelicht p { margin: 0; color: var(--grijs-tekst); }
@media (max-width: 900px) { .overzicht-uitgelicht { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.niet-gevonden { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding-bottom: 80px; max-width: 640px; }
.niet-gevonden h1 { font-size: 40px; }

/* ---------- Voet ---------- */
.nieuwsbrief-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nieuwsbrief-form label { font-family: var(--kop); font-weight: 700; font-size: 13px; }
.nieuwsbrief-form input { border: 0; border-radius: 999px; padding: 0 16px; font-size: 14px; font-family: var(--kop); min-width: 0; flex: 1 1 220px; height: 44px; }

/* ---------- Cookiemelding ---------- */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 520px; margin: 0 auto; background: #fff; border: 1px solid var(--zand-donker); border-radius: var(--radius); padding: 16px 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-family: var(--kop); font-size: 13px; box-shadow: 0 12px 32px rgba(26,26,26,0.16); z-index: 50; }
.cookie p { margin: 0; flex: 1 1 200px; }

/* ---------- Vaste pagina's en formulieren ---------- */
.pagina-inhoud { max-width: 760px; font-size: 18px; line-height: 1.6; padding-bottom: 48px; }
.contact-form { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--kop); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grijs); }
.contact-form input, .contact-form textarea { font: inherit; font-family: var(--tekst); font-size: 16px; border: 1px solid var(--zand-donker); border-radius: 8px; padding: 10px 12px; background: #fff; }
.contact-form .knop { align-self: flex-start; }
.form-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-fout { color: var(--rood); font-family: var(--kop); font-weight: 700; margin: 0; }
@media (max-width: 600px) { .form-rij { grid-template-columns: 1fr; } }

/* ---------- Kaartpagina ---------- */
.kaart-kop { padding-bottom: 20px; }
.kaart-kop-acties { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kaart-filters { margin: 0 var(--marge); padding: 16px 0; border-top: 1px solid var(--zand-donker); border-bottom: 1px solid var(--zand-donker); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.kaart-filters .chip { border: 0; cursor: pointer; }
.kaart-buurtkeuze { display: flex; align-items: center; gap: 10px; }
.kaart-buurtkeuze .kopje-grijs { margin: 0; }
.kaart-buurtkeuze select { font: inherit; font-family: var(--kop); font-size: 13px; font-weight: 700; border: 1px solid var(--zand-donker); border-radius: 999px; padding: 7px 14px; background: #fff; }
.kaart-werkblad { margin: 0 var(--marge) 48px; display: grid; grid-template-columns: 8fr 4fr; gap: 0; border: 1px solid var(--zand-donker); border-radius: 20px; overflow: hidden; height: 640px; }
.kaart-canvas { height: 100%; background: var(--zand); }
.kaart-lijst { display: flex; flex-direction: column; min-height: 0; background: #fff; border-left: 1px solid var(--zand-donker); }
.kaart-lijst-kop { padding: 14px 18px; border-bottom: 1px solid var(--zand-donker); font-family: var(--kop); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.kaart-lijst-kop strong { font-size: 22px; color: var(--rood); margin-right: 4px; }
.kaart-lijst-items { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.kaart-lijst-items li button { all: unset; display: flex; flex-direction: column; gap: 3px; width: 100%; box-sizing: border-box; padding: 12px 18px; border-bottom: 1px solid var(--zand-licht); cursor: pointer; }
.kaart-lijst-items li button:hover, .kaart-lijst-items li.actief button { background: var(--zand-licht); }
.kaart-lijst-items li.actief button { box-shadow: inset 4px 0 0 var(--rood); }
.kaart-lijst-items li strong { font-family: var(--kop); font-size: 15px; line-height: 1.25; }
.kaart-lijst-items .label-rood em { font-style: normal; color: var(--blauw); margin-left: 6px; }
.fa-tegels { filter: saturate(0.35) sepia(0.15) brightness(1.03); }
.fa-marker span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--rood); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.fa-marker-actief span { background: var(--zwart); box-shadow: 0 0 0 8px rgba(225,0,26,0.25); }
.leaflet-popup-content-wrapper { border-radius: 12px; font-family: var(--tekst); }
.leaflet-popup-content { margin: 0; width: 260px !important; }
.fa-popup { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.fa-popup img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.fa-popup strong { font-family: var(--kop); font-size: 16px; line-height: 1.2; color: var(--zwart); }
.fa-popup p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--grijs-tekst); }
.fa-popup .knop { align-self: flex-start; }
.leaflet-container a.knop { color: #fff; }
@media (max-width: 900px) {
  .kaart-werkblad { grid-template-columns: 1fr; grid-template-rows: 420px 360px; height: auto; }
  .kaart-lijst { border-left: 0; border-top: 1px solid var(--zand-donker); }
}

/* ---------- Quiz ---------- */
.quiz-vandaag h2 { font-size: 20px; line-height: 1.25; margin: 6px 0 12px; }
.quizpagina .quiz-opties { display: flex; flex-direction: column; gap: 8px; }
.quizpagina .quiz-opties button { font: inherit; font-family: var(--kop); font-weight: 700; font-size: 14px; text-align: left; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--zand-donker); background: #fff; color: var(--zwart); cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 0; }
.quizpagina .quiz-opties button:hover:not(:disabled) { border-color: var(--zwart); background: #fff; }
.quizpagina .quiz-opties button.goed { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.quizpagina .quiz-opties button.fout { background: var(--rood); border-color: var(--rood); color: #fff; }
.quizpagina .quiz-opties button:disabled { cursor: default; }
.quiz-vandaag .meta-licht { color: var(--grijs-tekst); }
.quiz-letter { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--zand); color: var(--zwart); align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; }
.quiz-opties button.goed .quiz-letter, .quiz-opties button.fout .quiz-letter { background: rgba(255,255,255,0.25); color: #fff; }
.chip-aantal { background: rgba(0,0,0,0.08); border-radius: 999px; padding: 1px 7px; font-size: 10px; }
.chip-check { cursor: pointer; }
.chip-check input { margin: 0; accent-color: var(--rood); }

.quiz-modi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.quiz-modus { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 20px; text-decoration: none; position: relative; min-height: 260px; }
.quiz-modus h2 { font-size: 26px; line-height: 1; letter-spacing: -0.02em; margin: 0; }
.quiz-modus p { margin: 0; flex: 1; font-size: 16px; line-height: 1.5; }
.quiz-modus .knop { align-self: flex-start; }
.quiz-modus-nr { font-family: var(--kop); font-weight: 900; font-size: 54px; line-height: 0.8; letter-spacing: -0.05em; opacity: 0.35; }
.quiz-modus-rood { background: var(--rood); color: #fff; }
.quiz-modus-zand { background: var(--zand); color: var(--zwart); }
.quiz-modus-blauw { background: var(--blauw); color: #fff; }
.quiz-modus-blauw p, .quiz-modus-rood p { color: rgba(255,255,255,0.88); }
.knop-wit { background: #fff; color: var(--zwart); }
@media (max-width: 900px) { .quiz-modi { grid-template-columns: 1fr; } .quiz-modus { min-height: 0; } }

.quiz-speel { max-width: 760px; }
.quiz-speel-kop h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1; letter-spacing: -0.03em; margin: 8px 0 16px; }
.quiz-voortgang { height: 6px; background: var(--zand-donker); border-radius: 999px; overflow: hidden; }
.quiz-voortgang span { display: block; height: 100%; width: 0; background: var(--rood); transition: width 0.3s; }
.quiz-kaart { margin-top: 24px; padding: 28px; border: 1px solid var(--zand-donker); border-radius: 20px; background: #fff; }
.quiz-kaart h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; margin: 8px 0 20px; }
.quizpagina .quiz-opties-groot button { font-size: 16px; padding: 14px 16px; }
.quiz-uitleg { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--zand-donker); font-size: 17px; line-height: 1.5; }
.quiz-uitleg a { color: var(--rood); }
.quiz-uitleg div { margin-top: 16px; }
.quiz-eind { margin-top: 24px; padding: 32px; border-radius: 20px; background: var(--zand); display: flex; flex-direction: column; gap: 10px; }
.quiz-score { font-family: var(--kop); font-size: 20px; }
.quiz-score strong { font-size: 72px; line-height: 0.9; letter-spacing: -0.05em; color: var(--rood); }
.quiz-eind h2 { font-size: clamp(28px, 3.5vw, 40px); line-height: 1; letter-spacing: -0.03em; }
.quiz-eind-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 16px; }
.quiz-lees { display: flex; flex-direction: column; gap: 10px; }
.quiz-lees .art-regel { text-decoration: none; }

.pubquiz-form { display: flex; flex-direction: column; gap: 20px; }
.pubquiz-form-raster { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 16px; }
.pubquiz-form label { display: flex; flex-direction: column; gap: 6px; }
.pubquiz-form select, .pubquiz-form input[type=text], .pubquiz-form input:not([type]) { font: inherit; font-family: var(--kop); font-size: 14px; font-weight: 700; border: 1px solid var(--zand-donker); border-radius: 10px; padding: 10px 12px; background: #fff; }
.pubquiz-themas { display: flex; flex-direction: column; gap: 8px; }
.pubquiz-optie { flex-direction: row !important; align-items: center; gap: 10px !important; font-size: 15px; }
.pubquiz-optie input { accent-color: var(--rood); width: 18px; height: 18px; }
.pubquiz-form-knoppen { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 700px) { .pubquiz-form-raster { grid-template-columns: 1fr; } }
.pubquiz-lijst { max-width: 860px; }
.pubquiz-thema { font-size: 20px; margin: 32px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--zwart); }
.pubquiz-vraag { border-bottom: 1px solid var(--zand-donker); }
.pubquiz-vraag summary { cursor: pointer; padding: 12px 0; font-family: var(--kop); font-weight: 700; font-size: 17px; line-height: 1.3; display: flex; gap: 12px; list-style: none; }
.pubquiz-vraag summary::-webkit-details-marker { display: none; }
.pubquiz-vraag summary::after { content: '+'; margin-left: auto; color: var(--rood); font-size: 22px; line-height: 1; }
.pubquiz-vraag[open] summary::after { content: '\2013'; }
.pubquiz-nr { color: var(--rood); min-width: 28px; }
.pubquiz-antwoord { padding: 0 0 16px 40px; font-size: 16px; line-height: 1.5; }
.pubquiz-antwoord strong { font-family: var(--kop); display: block; margin-bottom: 4px; }
.pubquiz-antwoord p { margin: 0 0 6px; color: var(--grijs-tekst); }

/* Quizmaster */
.quizmaster-actief .site-kop, .quizmaster-actief .site-voet, .quizmaster-actief .cookie { display: none !important; }
.quizmaster { min-height: 100vh; background: var(--zwart); color: #fff; display: flex; flex-direction: column; }
.quizmaster:fullscreen { width: 100vw; height: 100vh; }
.qm-balk { display: flex; justify-content: space-between; align-items: center; padding: 18px 32px; font-family: var(--kop); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.qm-merk .xxx { color: var(--rood); margin-right: 8px; }
.qm-knop { all: unset; cursor: pointer; opacity: 0.7; } .qm-knop:hover { opacity: 1; }
.qm-vlak { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(24px, 6vw, 96px); gap: 28px; }
.qm-thema { font-family: var(--kop); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rood); font-size: clamp(14px, 1.4vw, 20px); }
.qm-vraag { font-size: clamp(30px, 4.6vw, 68px); line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; }
.qm-opties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.qm-optie { background: rgba(255,255,255,0.08); border-radius: 16px; padding: 22px 24px; font-family: var(--kop); font-weight: 700; font-size: clamp(18px, 2vw, 28px); line-height: 1.2; display: flex; gap: 14px; align-items: center; transition: opacity 0.3s, background 0.3s; }
.qm-optie .quiz-letter { width: 36px; height: 36px; font-size: 15px; background: rgba(255,255,255,0.15); color: #fff; }
.qm-optie.goed { background: var(--blauw); }
.qm-optie.dim { opacity: 0.35; }
.qm-uitleg { font-size: clamp(16px, 1.6vw, 22px); line-height: 1.5; color: rgba(255,255,255,0.8); max-width: 60ch; }
.qm-uitleg strong { color: #fff; font-family: var(--kop); display: block; margin-bottom: 4px; }
.qm-uitleg p { margin: 0; }
.qm-slot { color: rgba(255,255,255,0.7); font-size: 20px; }
.qm-onder { padding: 0 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.qm-timer { height: 8px; background: rgba(255,255,255,0.15); border-radius: 999px; overflow: hidden; }
.qm-timer span { display: block; height: 100%; width: 100%; background: var(--rood); transition: width 1s linear; }
.qm-knoppen { display: flex; align-items: center; gap: 14px; }
.qm-tijd { font-family: var(--kop); font-weight: 900; font-size: 40px; letter-spacing: -0.04em; min-width: 80px; }
.qm-tijd-rood { color: var(--rood); }
@media (max-width: 800px) { .qm-opties { grid-template-columns: 1fr; } }
.quiz-eind[hidden], .quiz-kaart[hidden], .quiz-uitleg[hidden], .qm-uitleg[hidden], [data-qm-antwoord][hidden] { display: none !important; }
.pubquiz-form .chip-check { flex-direction: row; align-items: center; gap: 8px; }

/* ---------- Shop ---------- */
.shop-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.shop-cat { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; background: var(--zand); border-radius: 14px; text-decoration: none; color: var(--zwart); }
.shop-cat strong { font-family: var(--kop); font-size: 18px; }
.shop-cat:hover { background: var(--zand-donker); }
@media (max-width: 800px) { .shop-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product-kaart { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--zwart); }
.product-beeld { display: block; aspect-ratio: 3 / 4; background: var(--zand); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.product-beeld img { width: 100%; height: 100%; object-fit: contain; padding: 10%; box-sizing: border-box; transition: transform 0.3s; }
.product-kaart:hover .product-beeld img { transform: scale(1.04); }
.product-beeld-leeg { font-family: var(--kop); font-weight: 900; font-size: 64px; color: var(--zand-donker); }
.product-kaart strong { font-family: var(--kop); font-size: 17px; line-height: 1.2; }
.product-tekst { font-size: 14px; line-height: 1.4; color: var(--grijs-tekst); }
.product-prijs { font-family: var(--kop); font-weight: 700; font-size: 13px; color: var(--rood); }
.product-aanrader { display: inline-block; background: var(--zwart); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.plank { margin-top: 40px; padding: 24px; background: var(--zand); border-radius: 16px; }
.plank-kop { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.plank-kop .sectiekop { margin-bottom: 4px; }
.plank-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plank-item { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--zwart); background: #fff; border-radius: 12px; padding: 12px; }
.plank-item .boek-omslag { width: 56px; height: 76px; }
.plank-tekst { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.35; color: var(--grijs-tekst); }
.plank-tekst strong { font-family: var(--kop); font-size: 15px; line-height: 1.2; color: var(--zwart); }
@media (max-width: 800px) { .plank-items { grid-template-columns: 1fr; } }
.gyg-widget { margin: 8px 0 24px; } .gyg-widget .meta { display: block; margin-top: 6px; }

/* ---------- Productpagina (PDP) ---------- */
.pdp { padding: 24px var(--marge) 8px; }
.pdp-kruimel { font-family: var(--kop); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grijs); margin-bottom: 20px; }
.pdp-raster { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.pdp-media { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 16px; }
.pdp-beeld { position: relative; background: var(--zand); border-radius: 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pdp-beeld-boek { aspect-ratio: 4 / 5; padding: 9%; }
.pdp-beeld-boek img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 24px 48px -16px rgba(26,26,26,0.45), 0 2px 6px rgba(26,26,26,0.15); border-radius: 3px; }
.pdp-beeld-breed { aspect-ratio: 4 / 3; }
.pdp-beeld-breed img { width: 100%; height: 100%; object-fit: cover; }
.pdp-beeld-vierkant { aspect-ratio: 1 / 1; padding: 8%; }
.pdp-beeld-vierkant img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp-beeld.leeg::after { content: ''; }
.pdp-sticker, .product-sticker { position: absolute; left: 14px; top: 14px; background: var(--zwart); color: #fff; font-family: var(--kop); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 6px 10px; border-radius: 999px; }
.pdp-redactie { margin: 0; padding: 22px 24px; border-left: 4px solid var(--rood); background: var(--zand-licht); border-radius: 0 16px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.pdp-redactie p { margin: 0; font-size: 18px; line-height: 1.5; }
.pdp-redactie cite { font-style: normal; font-family: var(--kop); font-size: 12px; color: var(--grijs); }
.pdp-info { display: flex; flex-direction: column; gap: 18px; }
.pdp-soort { font-size: 12px; }
.pdp-info h1 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1; letter-spacing: -0.03em; margin: -6px 0 0; }
.pdp-auteur { margin: -8px 0 0; font-family: var(--kop); font-size: 16px; color: var(--grijs-tekst); }
.pdp-sterren { display: flex; align-items: center; gap: 8px; margin: -6px 0 0; font-family: var(--kop); }
.sterren { position: relative; display: inline-block; font-size: 18px; line-height: 1; color: var(--zand-donker); letter-spacing: 1px; }
.sterren > span { position: absolute; left: 0; top: 0; width: var(--v); overflow: hidden; white-space: nowrap; color: #F5A623; }
.sterren::before { content: '\2605\2605\2605\2605\2605'; }
.pdp-lead { margin: 0; font-size: 20px; line-height: 1.5; }
.pdp-koop { background: var(--zand); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.pdp-prijsregel { display: flex; align-items: baseline; gap: 10px; }
.pdp-prijs { font-family: var(--kop); font-weight: 900; font-size: 40px; letter-spacing: -0.04em; line-height: 1; }
.pdp-prijs small { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--grijs-tekst); }
.pdp-prijs-onbekend { font-size: 22px; }
.pdp-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--rood); color: #fff !important; padding: 18px 22px; border-radius: 14px; font-family: var(--kop); font-weight: 700; font-size: 17px; text-decoration: none; transition: transform 0.15s, background 0.15s; }
.pdp-cta:hover { background: #C50017; color: #fff !important; transform: translateY(-1px); }
.pdp-cta span:last-child { font-size: 22px; }
.pdp-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.pdp-trust li { padding-left: 22px; position: relative; }
.pdp-trust li::before { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--blauw); box-shadow: inset 0 0 0 3px #fff; }
.pdp-anders { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--zand-donker); }
.pdp-anders-regel { display: flex; justify-content: space-between; padding: 8px 0; font-family: var(--kop); font-size: 14px; border-bottom: 1px solid var(--zand-donker); }
.pdp-anders-regel:hover { color: var(--rood); }
.pdp-populair { margin: 0; font-family: var(--kop); font-size: 13px; color: var(--rood); }
.pdp-disclaimer { margin: 0; font-size: 12px; }
.pdp-disclaimer a { color: var(--rood); }
.pdp-feiten { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pdp-feiten div { background: #fff; border: 1px solid var(--zand-donker); border-radius: 12px; padding: 12px 14px; }
.pdp-feiten dt { font-family: var(--kop); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grijs); }
.pdp-feiten dd { margin: 4px 0 0; font-family: var(--kop); font-weight: 700; font-size: 15px; line-height: 1.25; }
.pdp-omschrijving h2 { font-size: 20px; margin-bottom: 8px; }
.pdp-omschrijving p { margin: 0; font-size: 17px; line-height: 1.6; }
@media (max-width: 900px) { .pdp-raster { grid-template-columns: 1fr; gap: 24px; } .pdp-media { position: static; } .pdp-feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pdp-beeld-boek { max-width: 320px; margin: 0 auto; width: 100%; } }
.product-beeld { position: relative; }
.product-kaart-ticket .product-beeld, .product-kaart-tour .product-beeld { aspect-ratio: 4 / 3; }
.product-kaart-ticket .product-beeld img, .product-kaart-tour .product-beeld img { object-fit: cover; padding: 0; }
.product-kaart-spel .product-beeld, .product-kaart-cadeau .product-beeld { aspect-ratio: 1 / 1; }
.product-kaart-boek .product-beeld img { box-shadow: 0 10px 24px -10px rgba(26,26,26,0.5); border-radius: 2px; width: auto; height: auto; max-width: 80%; max-height: 82%; }
.product-sterren { font-family: var(--kop); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.product-sterren .sterren { font-size: 14px; }
.product-sticker { left: 10px; top: 10px; font-size: 10px; padding: 4px 8px; }

.pdp-amsterdams { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: var(--zwart); color: #fff !important; padding: 14px 18px; border-radius: 14px; text-decoration: none; }
.pdp-amsterdams:hover { background: #000; color: #fff !important; }
.pdp-amsterdams-xxx { font-family: var(--kop); font-weight: 900; color: var(--rood); font-size: 20px; letter-spacing: -0.05em; }
.pdp-amsterdams-tekst { display: flex; flex-direction: column; gap: 2px; }
.pdp-amsterdams-tekst strong { font-family: var(--kop); font-size: 15px; }
.pdp-amsterdams-tekst span { font-size: 12px; color: rgba(255,255,255,0.75); font-family: var(--kop); }

/* ---------- Wandelroutes ---------- */
.route-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.route-kaart { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 20px; border: 1px solid var(--zand-donker); border-radius: 20px; text-decoration: none; color: var(--zwart); align-items: center; transition: border-color 0.15s; }
.route-kaart:hover { border-color: var(--zwart); color: var(--zwart); }
.routeschets { width: 150px; height: 150px; background: var(--zand); border-radius: 14px; }
.route-kaart-tekst { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--grijs-tekst); }
.route-kaart-tekst strong { font-family: var(--kop); font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; color: var(--zwart); }
.route-feiten { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.route-feiten b { font-family: var(--kop); font-size: 12px; font-weight: 700; background: var(--zand); border-radius: 999px; padding: 4px 10px; color: var(--zwart); }
.route-feiten-groot { margin: 14px 0 18px; } .route-feiten-groot b { font-size: 13px; padding: 7px 14px; }
.route-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.route-start-eind { display: flex; flex-direction: column; gap: 12px; align-self: start; }
.route-start-eind strong { font-family: var(--kop); display: block; font-size: 16px; margin-top: 2px; }
.route-start-eind .meta { margin: 0; line-height: 1.5; }
.route-tip h2 { font-size: 22px; margin-bottom: 8px; } .route-tip p { margin: 0; font-size: 17px; line-height: 1.55; }
.paneel-blauw { background: var(--blauw); color: #fff; }
.route-werkblad { margin: 8px var(--marge) 40px; display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
.route-kaartvak { position: sticky; top: 12px; }
.route-canvas { height: 560px; border-radius: 20px; border: 1px solid var(--zand-donker); overflow: hidden; }
.route-volg { margin-top: 10px; padding: 14px 18px; background: var(--zwart); color: #fff; border-radius: 14px; display: flex; flex-direction: column; gap: 2px; }
.route-volg strong { font-family: var(--kop); font-size: 18px; } .route-volg .meta { color: rgba(255,255,255,0.7); }
.route-haltes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.route-halte { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 12px; border-bottom: 1px solid var(--zand-donker); cursor: pointer; border-radius: 12px; }
.route-halte:hover, .route-halte.actief { background: var(--zand-licht); }
.route-halte.actief .route-nr { background: var(--zwart); }
.route-nr { width: 32px; height: 32px; border-radius: 50%; background: var(--rood); color: #fff; font-family: var(--kop); font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.route-halte-tekst { display: flex; flex-direction: column; gap: 4px; }
.route-halte-tekst h2 { font-size: 19px; line-height: 1.2; margin: 0; }
.route-halte-tekst p { margin: 2px 0 4px; font-size: 16px; line-height: 1.5; }
.route-volgende { margin-top: 4px; }
.route-marker span { display: flex; width: 28px; height: 28px; border-radius: 50%; background: var(--rood); color: #fff; font-family: var(--kop); font-weight: 900; font-size: 12px; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
@media (max-width: 900px) { .route-raster { grid-template-columns: 1fr; } .route-werkblad { grid-template-columns: 1fr; } .route-kaartvak { position: static; } .route-canvas { height: 380px; } .route-kaart { grid-template-columns: 110px 1fr; } .routeschets { width: 110px; height: 110px; } }
@media print {
  .site-kop, .site-voet, .route-knoppen, .route-kaartvak, .cookie, .advertentie, .blok .grid-4, .blok-kop { display: none !important; }
  .route-werkblad { display: block; margin: 0; } .route-halte { break-inside: avoid; page-break-inside: avoid; cursor: default; }
  .overzicht-kop { padding: 0 0 12px; grid-template-columns: 1fr; } body { font-size: 12pt; }
}

.beeldkaart-png { display: flex; flex-direction: column; gap: 8px; }
.beeldkaart-png img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 10px 24px -12px rgba(26,26,26,0.4); transition: transform 0.15s; }
.beeldkaart-png:hover img { transform: translateY(-2px); }
.zoek-kop { grid-template-columns: 1fr; }
.zoek-form { display: flex; gap: 10px; margin: 14px 0 10px; max-width: 720px; }
.zoek-form input { flex: 1; font: inherit; font-family: var(--kop); font-size: 22px; font-weight: 700; padding: 14px 18px; border: 2px solid var(--zwart); border-radius: 14px; background: #fff; min-width: 0; }

/* Tijdlijn in artikelen */
.prose .tijdlijn ol { list-style: none; margin: 8px 0 0; padding: 0 0 0 18px; border-left: 3px solid var(--rood); display: flex; flex-direction: column; gap: 12px; }
.prose .tijdlijn li { position: relative; margin: 0; padding: 0; font-size: 16px; line-height: 1.5; }
.prose .tijdlijn li::before { content: ""; position: absolute; left: -26px; top: 7px; width: 13px; height: 13px; border-radius: 50%; background: var(--rood); border: 3px solid var(--zand); }
.prose .tijdlijn li strong { display: block; font-family: var(--kop); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; }
.prose blockquote cite { display: block; margin-top: 10px; font-style: normal; font-weight: 400; letter-spacing: 0; font-size: 14px; color: var(--grijs); }
.prose blockquote cite::before { content: "- "; }

/* Op desktop staat het themamenu al in de kop; de chipsrij alleen op mobiel */
@media (min-width: 901px) { .thema-balk { display: none; } }

/* Minikaartjes: echte kaart, niet bedienbaar (klik gaat naar de kaartpagina) */
.minikaart-vak { position: absolute; inset: 0; z-index: 0; background: var(--zand); }
.minikaart-vak.leaflet-container, .minikaart .leaflet-container { cursor: pointer; font-family: var(--kop); background: var(--zand); }
.minikaart .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,0.7); }
.minikaart .leaflet-control-attribution a { color: var(--grijs); }
.fa-marker-mini span { border-width: 1.5px; opacity: 0.55; box-shadow: none; }

/* ---------- Footer ---------- */
.site-voet { background: var(--zwart); color: #fff; margin-top: 64px; padding: 0 var(--marge); }
.site-voet a { color: #fff; }
.site-voet a:hover { color: var(--rood-licht); }
.voet-boven { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 56px 0 44px; border-bottom: 1px solid rgba(255,255,255,0.14); max-width: var(--max); margin: 0 auto; }
.voet-logo { font-family: var(--kop); font-weight: 900; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.04em; text-transform: uppercase; line-height: 1; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.voet-logo .xxx { font-size: clamp(11px, 1.1vw, 15px); }
.voet-merk p { margin: 18px 0 0; max-width: 440px; font-size: 17px; line-height: 1.5; color: #BDBDBD; }
.voet-nieuwsbrief { background: #262626; border-radius: 20px; padding: 28px 30px; display: flex; flex-direction: column; gap: 8px; }
.voet-nb-kop { font-family: var(--kop); font-weight: 900; font-size: 26px; letter-spacing: -0.03em; line-height: 1.05; }
.voet-nieuwsbrief p { margin: 0 0 10px; font-size: 16px; line-height: 1.45; color: #BDBDBD; }
.voet-nb-veld { display: flex; gap: 8px; background: #fff; border-radius: 999px; padding: 5px; }
.voet-nb-veld input[type=email] { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 16px; font: inherit; font-family: var(--kop); font-size: 15px; color: var(--zwart); outline: none; }
.voet-nb-veld .knop { flex-shrink: 0; }
.voet-nb-veld:focus-within { box-shadow: 0 0 0 3px var(--rood-licht); }
.voet-kolommen { display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); gap: 32px; padding: 40px 0; max-width: var(--max); margin: 0 auto; }
.voet-kolommen nav { display: flex; flex-direction: column; gap: 10px; font-family: var(--kop); font-size: 14px; font-weight: 500; }
.voet-kop { font-family: var(--kop); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #8A8A8A; margin-bottom: 4px; }
.voet-onder { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 20px 0 28px; border-top: 1px solid rgba(255,255,255,0.14); max-width: var(--max); margin: 0 auto; font-family: var(--kop); font-size: 12px; color: #8A8A8A; }
.voet-onder-links { display: flex; gap: 20px; flex-wrap: wrap; }
.voet-onder a { color: #BDBDBD; }
@media (max-width: 900px) {
  .voet-boven { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 44px; }
  .voet-kolommen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .voet-kolommen nav:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .voet-kolommen nav:first-child .voet-kop { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .voet-logo { font-size: 24px; gap: 8px; }
  .voet-nieuwsbrief { padding: 22px 18px; }
  .voet-nb-veld .knop { padding: 0 14px; }
}

/* ===== Mokums woordenboek ===== */
.wb-kop { padding: 40px var(--marge) 20px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; }
.wb-kop h1 { font-size: clamp(44px, 6.4vw, 92px); line-height: 0.92; letter-spacing: -0.045em; margin: 10px 0 0; }
.wb-kop-klein h1 { font-size: clamp(40px, 5vw, 68px); margin-bottom: 8px; }
.wb-kop .label-rood { display: inline-block; }
.wb-zoek { position: relative; display: flex; flex-direction: column; gap: 8px; }
.wb-zoek-veld { display: flex; gap: 8px; }
.wb-zoek-veld input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 2px solid var(--zwart); border-radius: 999px; font: 500 17px/1 var(--kop); background: #fff; color: var(--zwart); }
.wb-zoek-veld input:focus { outline: 3px solid var(--blauw-licht); outline-offset: 1px; }
.wb-zoek-veld .knop { min-height: 52px; }
.wb-live { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: #fff; border: 1px solid var(--zand-donker); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.14); z-index: 40; overflow: hidden; max-height: 70vh; overflow-y: auto; }
.wb-live a { display: flex; flex-direction: column; gap: 2px; padding: 11px 18px; border-bottom: 1px solid var(--zand); }
.wb-live a:hover, .wb-live a:focus { background: var(--zand-licht); color: var(--zwart); }
.wb-live strong { font-family: var(--kop); font-weight: 900; font-size: 17px; letter-spacing: -0.01em; }
.wb-live span { font-size: 14px; color: var(--grijs-tekst); line-height: 1.35; }
.wb-live em { font-style: normal; font-family: var(--kop); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rood); }
.wb-live-meer { display: block; width: 100%; padding: 12px 18px; border: 0; background: var(--zand); font: 700 12px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; text-align: left; }
.wb-live-leeg { margin: 0; padding: 14px 18px; font-size: 15px; color: var(--grijs); }

.wb-letters { display: grid; grid-template-columns: repeat(27, minmax(0, 1fr)) auto; gap: 4px; margin: 0 var(--marge); padding: 12px 0; border-top: 3px solid var(--zwart); border-bottom: 1px solid var(--zand-donker); }
.wb-letters a, .wb-letters span { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px; font: 900 17px/1 var(--kop); }
.wb-letters a:hover { background: var(--zand); color: var(--zwart); }
.wb-letters a.actief { background: var(--rood); color: #fff; }
.wb-letters span { color: #C9C2B6; }
.wb-letters .wb-letter-cijfers { font-size: 12px; }

.wb-boven { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; }
.wb-dag { background: var(--rood); color: #fff; border-radius: 16px; padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 14px; min-height: 340px; }
.wb-dag-label { font: 700 12px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.1em; color: #FFCDD2; }
.wb-dag h2 { font-size: clamp(48px, 7vw, 104px); line-height: 0.9; letter-spacing: -0.05em; overflow-wrap: anywhere; }
.wb-dag h2 a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 4px; }
.wb-dag-betekenissen { margin: 0; padding-left: 1.3em; font-size: 20px; line-height: 1.4; }
.wb-dag-betekenissen li::marker { font-family: var(--kop); font-weight: 900; }
.wb-dag-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }

.wb-quiz h2 { font-size: 28px; letter-spacing: -0.03em; }
.wb-quiz p { margin: 0; }
.wb-quiz-vraag { font-size: 21px; line-height: 1.3; }
.wb-quiz-vraag strong { font-family: var(--kop); font-weight: 900; letter-spacing: -0.02em; }
.wb-quiz-score { font: 900 44px/1 var(--kop); color: var(--rood); display: block; margin-bottom: 6px; letter-spacing: -0.03em; }
.wb-quiz-opties { display: flex; flex-direction: column; gap: 8px; }
.wb-quiz-optie { text-align: left; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--zand-donker); background: #fff; font: 400 16px/1.35 var(--tekst); cursor: pointer; color: var(--zwart); }
.wb-quiz-optie:hover:not(:disabled) { border-color: var(--zwart); }
.wb-quiz-optie.goed { background: #1E7B45; border-color: #1E7B45; color: #fff; }
.wb-quiz-optie.fout { background: var(--rood); border-color: var(--rood); color: #fff; }
.wb-quiz-optie:disabled { cursor: default; }
.wb-quiz-verder { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.wb-quiz-voet { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; }

.wb-themas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wb-thema { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 14px; background: var(--zand); min-height: 168px; }
.wb-thema:hover { background: var(--zwart); color: #fff; }
.wb-thema:hover .wb-thema-voorbeelden { color: #ddd; }
.wb-thema-n { font: 900 34px/1 var(--kop); color: var(--rood); letter-spacing: -0.03em; }
.wb-thema strong { font: 900 19px/1.1 var(--kop); letter-spacing: -0.02em; }
.wb-thema-voorbeelden { font-size: 14px; color: var(--grijs-tekst); font-style: italic; margin-top: auto; }

.wb-kaartjes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wb-kaartje { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--zand-donker); border-radius: 12px; background: #fff; }
.wb-kaartje:hover { border-color: var(--zwart); color: var(--zwart); }
.wb-kaartje strong { font: 900 20px/1.05 var(--kop); letter-spacing: -0.02em; }
.wb-kaartje span { font-size: 14px; color: var(--grijs-tekst); line-height: 1.35; }

.wb-over { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; padding-bottom: 40px; }
.wb-over p { margin: 0; }
.wb-over .paneel-zwart p { color: #ddd; }
.wb-over .paneel-zwart .knop { align-self: flex-start; }

.wb-lijst { columns: 2; column-gap: 48px; }
.wb-regel { break-inside: avoid; padding: 14px 0 16px; border-bottom: 1px solid var(--zand-donker); scroll-margin-top: 80px; }
.wb-regel h3 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-regel h3 a:hover { color: var(--rood); }
.wb-varianten { display: block; font: 500 13px/1.4 var(--kop); color: var(--grijs); margin-top: 3px; }
.wb-regel-betekenis { margin: 6px 0 0; font-size: 16px; line-height: 1.45; }
.wb-regel-betekenissen { margin: 6px 0 0; padding-left: 1.4em; font-size: 16px; line-height: 1.45; }
.wb-regel-betekenissen li::marker { font: 900 14px var(--kop); color: var(--rood); }
.wb-regel a:not(.link-blauw), .wb-betekenissen a, .wb-notitie a { text-decoration: underline; text-decoration-color: var(--rood); text-underline-offset: 3px; }
.wb-label { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 700 10px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.08em; }
.wb-label-grof { background: var(--zand); color: var(--grijs-tekst); }
.wb-label-kwetsend { background: var(--zwart); color: #fff; }

.wb-kruimel { padding: 28px var(--marge) 0; display: flex; gap: 10px; font: 700 12px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.08em; color: var(--grijs); }
.wb-kruimel a { color: var(--rood); }
.wb-woord { padding: 18px var(--marge) 24px; max-width: 940px; }
.wb-woord-kop h1 { font-size: clamp(52px, 9vw, 128px); line-height: 0.9; letter-spacing: -0.055em; overflow-wrap: anywhere; margin-bottom: 14px; }
.wb-woord-kop em { font-style: normal; color: var(--zwart); }
.wb-waarschuwing { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; padding: 14px 18px; border-left: 4px solid var(--zwart); background: var(--zand-licht); font-size: 15px; line-height: 1.45; }
.wb-waarschuwing strong { font: 700 11px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.1em; }
.wb-waarschuwing-kwetsend { border-color: var(--rood); }
.wb-betekenissen { list-style: none; counter-reset: bet; margin: 28px 0 0; padding: 0; border-top: 3px solid var(--zwart); }
.wb-betekenissen li { counter-increment: bet; position: relative; padding: 18px 0 18px 64px; border-bottom: 1px solid var(--zand-donker); }
.wb-betekenissen li::before { content: counter(bet); position: absolute; left: 0; top: 14px; font: 900 40px/1 var(--kop); color: var(--rood); letter-spacing: -0.04em; }
.wb-betekenissen-een li { padding-left: 0; }
.wb-betekenissen-een li::before { display: none; }
.wb-betekenissen p { margin: 0; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.35; }
.wb-notitie { display: block; margin-top: 6px; font-size: 16px; font-style: italic; color: var(--grijs-tekst); }
.wb-toelichting { margin-top: 28px; }
.wb-deel { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.wb-verhalen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wb-verhalen a { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 12px; background: var(--zand-licht); border: 1px solid var(--zand-donker); }
.wb-verhalen strong { font: 900 18px/1.15 var(--kop); letter-spacing: -0.02em; }
.wb-verhalen span { font-size: 15px; color: var(--grijs-tekst); line-height: 1.4; }
.wb-bladeren { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-bottom: 24px; }
.wb-bladeren > :first-child { justify-self: start; }
.wb-bladeren > :last-child { justify-self: end; }
.wb-bladeren .knop { white-space: normal; max-width: 100%; }
.woordenboek-woord .wb-letters { margin-bottom: 40px; }

@media (max-width: 1000px) {
  .wb-themas, .wb-kaartjes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-letters { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .wb-kop, .wb-boven, .wb-over { grid-template-columns: minmax(0, 1fr); }
  .wb-lijst { columns: 1; }
  .wb-verhalen { grid-template-columns: minmax(0, 1fr); }
  .wb-dag { min-height: 0; }
}
@media (max-width: 520px) {
  .wb-themas, .wb-kaartjes { grid-template-columns: minmax(0, 1fr); }
  .wb-thema { min-height: 0; }
  .wb-letters { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .wb-betekenissen li { padding-left: 46px; }
  .wb-betekenissen li::before { font-size: 30px; }
  .wb-zoek-veld .knop { padding: 0 14px; }
  .wb-bladeren { grid-template-columns: 1fr 1fr; }
  .wb-bladeren > .link-blauw { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
.wb-quiz [hidden], .wb-zoek [hidden] { display: none !important; }

/* ===== Profielen en reacties ===== */
.kop-account { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--kop); color: var(--zwart); }
.kop-account:hover { color: var(--rood); }
.account-naam { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--zand); color: var(--zwart); font: 900 15px/1 var(--kop); letter-spacing: -0.02em; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-mini { width: 26px; height: 26px; font-size: 10px; }
.avatar-groot { width: 96px; height: 96px; font-size: 30px; }
.avatar-redactie { background: var(--rood); color: #fff; }

.lid-vak { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; padding: 40px var(--marge) 56px; align-items: start; }
.lid-kaart { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3.5vw, 44px); border-radius: 16px; background: var(--zand-licht); border: 1px solid var(--zand-donker); }
.lid-kaart h1 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.04em; line-height: 0.95; }
.lid-intro { margin: 0; font-size: 19px; line-height: 1.5; color: var(--grijs-tekst); max-width: 560px; }
.lid-form { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.lid-form label { font: 700 12px/1.2 var(--kop); text-transform: uppercase; letter-spacing: 0.08em; color: var(--grijs); margin-top: 8px; }
.lid-form input:not([type=checkbox]):not([type=file]), .lid-form textarea { width: 100%; padding: 13px 16px; border: 2px solid var(--zand-donker); border-radius: 12px; font: 400 17px/1.4 var(--tekst); background: #fff; color: var(--zwart); }
.lid-form input:focus, .lid-form textarea:focus { outline: none; border-color: var(--zwart); }
.lid-form .knop { align-self: flex-start; margin-top: 10px; }
.lid-code-veld { font: 900 32px/1 var(--kop) !important; letter-spacing: 0.3em; max-width: 280px; }
.lid-fout { margin: 0; padding: 12px 16px; border-radius: 10px; background: #FDE3E6; color: #8A0010; font-size: 15px; }
.lid-ok { margin: 0; padding: 12px 16px; border-radius: 10px; background: #DDF1E4; color: #145230; font-size: 15px; }
.lid-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lid-foto-rij { display: flex; gap: 18px; align-items: center; }
.lid-foto-rij > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lid-foto-rij input[type=file] { font: 400 14px var(--kop); max-width: 100%; }
.lid-vinkje { display: flex !important; align-items: center; gap: 8px; text-transform: none !important; letter-spacing: 0 !important; font: 500 14px/1.3 var(--kop) !important; color: var(--zwart) !important; }
.lid-waarom ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.lid-reacties { list-style: none; margin: 0 0 24px; padding: 0; }
.lid-reacties li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--zand-donker); font-size: 15px; line-height: 1.45; }
.lid-reacties strong { font: 900 16px/1.2 var(--kop); }
.lid-uit { margin: 8px 0 16px; }
.lid-verwijder summary { cursor: pointer; font: 700 12px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.06em; color: var(--grijs); }
.lid-verwijder form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 15px; }
.lid-verwijder p { margin: 0; }
.lid-openbaar { flex-direction: row; align-items: flex-start; gap: 24px; }
.lid-openbaar > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lid-bio { margin: 0; font-size: 18px; line-height: 1.5; }

.reacties { max-width: 860px; }
.reacties-in-kolom { padding: 40px 0 0; }
.reacties-lijst { display: flex; flex-direction: column; }
.reacties-leeg { margin: 0 0 16px; color: var(--grijs-tekst); }
.reactie { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--zand-donker); scroll-margin-top: 90px; }
.reactie-antwoorden .reactie { padding: 14px 0 0; border-bottom: 0; }
.reactie-antwoorden .avatar { width: 34px; height: 34px; font-size: 12px; }
.reactie-licht { animation: reactieLicht 2.4s ease-out; }
@keyframes reactieLicht { 0% { background: #FFF3C4; } 100% { background: transparent; } }
.reactie-lijf { flex: 1; min-width: 0; }
.reactie-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.reactie-naam { font: 900 16px/1.2 var(--kop); letter-spacing: -0.01em; }
.reactie-badge { font: 700 10px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: var(--rood); padding: 4px 7px; border-radius: 999px; }
.reactie-tekst { font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
.reactie-tekst p { margin: 6px 0 0; }
.reactie-status { margin: 6px 0 0; font: 500 13px var(--kop); color: var(--rood); }
.reactie-wacht .reactie-tekst { opacity: 0.6; }
.reactie-acties { display: flex; gap: 14px; margin-top: 6px; }
.reactie-acties button { border: 0; background: none; padding: 4px 0; font: 700 12px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.06em; color: var(--grijs); cursor: pointer; }
.reactie-acties button:hover { color: var(--rood); }
.reactie-acties button:disabled { color: var(--grijs); cursor: default; text-transform: none; letter-spacing: 0; }
.reacties-schrijf { margin-top: 18px; }
.reactie-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.reactie-form-ik { display: flex; align-items: center; gap: 10px; }
.reactie-form-ik .avatar { width: 34px; height: 34px; font-size: 12px; }
.reactie-form textarea { width: 100%; padding: 14px 16px; border: 2px solid var(--zand-donker); border-radius: 12px; font: 400 17px/1.5 var(--tekst); resize: vertical; min-height: 96px; background: #fff; color: var(--zwart); }
.reactie-form textarea:focus { outline: none; border-color: var(--zwart); }
.reactie-form-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.reactie-form-knoppen { display: flex; gap: 8px; margin-left: auto; }
.reactie-form .lid-fout[hidden] { display: none; }
.reacties-inloggen { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border-radius: 14px; background: var(--zand); }
.reacties-inloggen p { margin: 0; flex: 1 1 260px; }

@media (max-width: 800px) {
  .lid-vak { grid-template-columns: minmax(0, 1fr); }
  .lid-openbaar { flex-direction: column; }
}
@media (max-width: 600px) {
  .kop-account .account-naam { display: none; }
  .reactie { gap: 10px; }
  .reactie .avatar { width: 36px; height: 36px; font-size: 13px; }
}
.wb-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "label label label" "woord tekst knop"; gap: 6px 28px; align-items: center; padding: 26px 32px; border-radius: 16px; background: var(--rood); color: #fff; }
.wb-band:hover { color: #fff; background: #C50017; }
.wb-band-label { grid-area: label; font: 700 12px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.1em; color: #FFCDD2; }
.wb-band strong { grid-area: woord; font: 900 clamp(36px, 4.5vw, 60px)/1 var(--kop); letter-spacing: -0.04em; }
.wb-band-tekst { grid-area: tekst; font-size: 20px; line-height: 1.35; }
.wb-band .knop { grid-area: knop; }
@media (max-width: 700px) { .wb-band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "woord" "tekst" "knop"; padding: 22px; } .wb-band .knop { justify-self: start; } }

/* Sectiekoppen met icoon: maken duidelijk welke onderdelen bij de site horen */
.icoon { display: block; flex: none; }
.sk-icoon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--rood); color: #fff; flex: none; }
.sk-icoon .icoon { width: 17px; height: 17px; }
.sk-icoon-wit { background: #fff; color: var(--rood); }
.sectiekop-icoon { display: flex; align-items: center; gap: 10px; font-size: 21px; padding-top: 12px; }
.blok-kop .sectiekop-icoon { flex: 1; margin-bottom: 0; }
.rubrieken .blok-kop, .themas .blok-kop { margin-bottom: 20px; }
.paneel-label { display: inline-flex; align-items: center; gap: 10px; font: 900 18px/1.1 var(--kop); letter-spacing: -0.02em; color: var(--zwart); }
.paneel-label-licht { color: #fff; }
.paneel-label .sk-icoon { width: 28px; height: 28px; }
.wb-band-label { display: inline-flex; align-items: center; gap: 10px; }
.wb-band-label .sk-icoon { width: 26px; height: 26px; }

/* Nieuw-lijst met kleine foto */
.art-regel-met-beeld { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 14px; align-items: start; }
.art-regel-tekst { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.art-regel-beeld { display: block; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: var(--zand); }
.art-regel-beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.art-regel-met-beeld:hover .art-regel-beeld img { transform: scale(1.05); }

/* Inloggen in de kop, gelijk uitgelijnd met NL en EN */
.kop-account { line-height: 1; padding: 2px 0 4px; border-bottom: 2px solid transparent; margin-right: 6px; }
.kop-account .avatar-mini { width: 24px; height: 24px; margin: -4px 0 -4px; }
.avatar-leeg { background: var(--zand); color: var(--zwart); }
.avatar-leeg .icoon { width: 14px; height: 14px; }
.kop-rechts .taal { line-height: 1; padding: 2px 0 4px; }

/* Woordpagina: kop rustiger */
.wb-woord-kop h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 0.98; letter-spacing: -0.04em; }
.wb-dag h2 { font-size: clamp(44px, 5.5vw, 76px); }
.rubrieken .blok-kop, .themas .blok-kop { border-top: 3px solid var(--zwart); padding-top: 12px; align-items: center; }
.rubrieken .blok-kop .sectiekop-icoon, .themas .blok-kop .sectiekop-icoon { border-top: 0; padding-top: 0; }

/* ===== Bruggengids ===== */
.bg-plaatje { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 32px; padding: 0 8px; border-radius: 6px; background: var(--blauw); color: #fff; font: 900 15px/1 var(--kop); letter-spacing: -0.01em; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85), 0 0 0 1px var(--blauw); }
.bg-plaatje-klein { min-width: 40px; height: 26px; font-size: 13px; border-radius: 5px; }
.bg-plaatje-groot { min-width: 120px; height: 84px; padding: 0 18px; border-radius: 12px; font-size: 44px; letter-spacing: -0.03em; box-shadow: inset 0 0 0 4px rgba(255,255,255,0.9), 0 0 0 2px var(--blauw); }
.bg-cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bg-cijfer { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 14px; background: var(--zand); }
.bg-cijfer strong { font: 900 clamp(34px, 4vw, 52px)/1 var(--kop); letter-spacing: -0.04em; color: var(--blauw); }
.bg-cijfer span { font-size: 16px; line-height: 1.35; color: var(--grijs-tekst); }
.bg-cijfer-link:hover { background: var(--blauw); color: #fff; }
.bg-cijfer-link:hover strong, .bg-cijfer-link:hover span { color: #fff; }
.bg-verhalen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bg-kaart { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; border: 1px solid var(--zand-donker); background: #fff; }
.bg-kaart:hover { border-color: var(--zwart); color: var(--zwart); }
.bg-kaart .bg-plaatje { align-self: flex-start; }
.bg-kaart strong { font: 900 19px/1.15 var(--kop); letter-spacing: -0.02em; }
.bg-kaart > span:last-child { font-size: 15px; line-height: 1.4; color: var(--grijs-tekst); }
.bg-twee { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; }
.bg-balken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bg-balken a { display: grid; grid-template-columns: 150px minmax(0, 1fr) 56px; gap: 12px; align-items: center; padding: 6px 0; font-family: var(--kop); font-size: 15px; font-weight: 700; }
.bg-balk { height: 14px; border-radius: 999px; background: var(--zand); overflow: hidden; }
.bg-balk span { display: block; height: 100%; border-radius: 999px; background: var(--blauw); }
.bg-balken a:hover .bg-balk span { background: var(--rood); }
.bg-balk-n { text-align: right; color: var(--grijs); font-weight: 500; }
.bg-wateren { margin: 0; padding: 0; list-style: none; counter-reset: w; }
.bg-wateren li { counter-increment: w; display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 10px 36px; border-bottom: 1px solid var(--zand-donker); position: relative; font-size: 17px; }
.bg-wateren li::before { content: counter(w); position: absolute; left: 0; top: 8px; font: 900 20px/1 var(--kop); color: var(--rood); }
.bg-wateren strong { font-family: var(--kop); font-weight: 700; }
.bg-wateren span { color: var(--grijs); font-family: var(--kop); font-size: 14px; }
.bg-stadsdelen { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px var(--marge) 0; }
.bg-tabel { width: 100%; border-collapse: collapse; font-size: 16px; }
.bg-tabel th { text-align: left; font: 700 11px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.08em; color: var(--grijs); padding: 0 12px 10px 0; border-bottom: 3px solid var(--zwart); }
.bg-tabel td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--zand-donker); vertical-align: middle; }
.bg-tabel td:first-child { width: 72px; }
.bg-tabel strong { font-family: var(--kop); font-weight: 700; }
.bg-tabel a:hover strong { color: var(--rood); }
.bg-verhaal-label { font: 700 10px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.08em; background: var(--rood); color: #fff; padding: 3px 6px; border-radius: 999px; vertical-align: 2px; }
.bg-brug { padding: 18px var(--marge) 24px; max-width: 940px; }
.bg-brug-kop { display: flex; gap: 24px; align-items: center; margin-bottom: 8px; }
.bg-brug-kop h1 { font-size: clamp(36px, 4.8vw, 60px); line-height: 1; letter-spacing: -0.04em; margin: 6px 0 8px; overflow-wrap: anywhere; }
.bg-ligging { margin: 0; font-size: 19px; color: var(--grijs-tekst); }
.bg-verhaal { margin-top: 28px; }
.bg-verhaal .prose { font-size: 20px; line-height: 1.6; }
.bg-verhaal .bronnen { margin-top: 18px; }
.bg-nog-geen { margin: 24px 0 0; }
.bg-feiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 28px 0 0; padding: 18px 20px; border-radius: 14px; background: var(--zand-licht); border: 1px solid var(--zand-donker); }
.bg-feiten div { display: flex; flex-direction: column; gap: 4px; }
.bg-feiten dt { font: 700 11px/1 var(--kop); text-transform: uppercase; letter-spacing: 0.08em; color: var(--grijs); }
.bg-feiten dd { margin: 0; font: 700 17px/1.25 var(--kop); }
.bg-feiten dd a { color: var(--blauw); }
.bg-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.bg-rij a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--zand-donker); font: 700 14px/1.2 var(--kop); background: #fff; }
.bg-rij a:hover { border-color: var(--zwart); color: var(--zwart); }
@media (max-width: 1000px) { .bg-cijfers, .bg-verhalen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .bg-twee { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .bg-verhalen { grid-template-columns: minmax(0, 1fr); }
  .bg-cijfers { gap: 10px; }
  .bg-cijfer { padding: 16px; }
  .bg-balken a { grid-template-columns: 110px minmax(0, 1fr) 44px; font-size: 14px; }
  .bg-brug-kop { flex-direction: column; align-items: flex-start; gap: 14px; }
  .bg-plaatje-groot { min-width: 92px; height: 64px; font-size: 32px; }
  .bg-tabel td:nth-child(3) { font-size: 14px; }
}
.bg-kop .wb-live strong { display: flex; align-items: center; gap: 8px; }
.wb-live .bg-plaatje { color: #fff; font-size: 12px; line-height: 1; }
.bruggen-in-verhaal { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 0; padding: 18px 20px; border-radius: 14px; background: var(--zand-licht); border: 1px solid var(--zand-donker); }
.bruggen-in-verhaal .link-blauw { align-self: flex-start; }
.zoekpagina .blok-kop { border-top: 3px solid var(--zwart); padding-top: 12px; align-items: center; }
.zoekpagina .blok-kop .sectiekop-icoon { border-top: 0; padding-top: 0; margin: 0; flex: 1; }

/* Advertenties: het advertentieblok moet de volle breedte krijgen. In een flexkolom met align-items: center
   kreeg het <ins>-element breedte 0, waardoor AdSense niets kon plaatsen (alleen de zijkolom werkte). */
.advertentie { align-items: stretch; text-align: center; }
.advertentie .adsbygoogle { display: block; width: 100%; max-width: 970px; margin: 0 auto; min-height: 90px; }
.advertentie-rechthoek .adsbygoogle, .advertentie-zijkolom .adsbygoogle { max-width: none; }
.prose .advertentie { margin: 1.4em 0; }

/* ===== Straatnamen ===== */
.st-bordje { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border-radius: 6px; background: #fff; color: var(--rood); font: 900 16px/1.1 var(--kop); letter-spacing: 0.01em; box-shadow: inset 0 0 0 2px var(--rood); text-transform: uppercase; }
.st-bordje-groot { padding: 16px 28px; border-radius: 10px; font-size: clamp(28px, 4.4vw, 54px); letter-spacing: -0.01em; box-shadow: inset 0 0 0 5px var(--rood), 0 6px 0 rgba(0,0,0,0.06); max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.st-wijken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-wijk { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 14px; background: var(--zand); }
.st-wijk strong { font: 900 26px/1.05 var(--kop); letter-spacing: -0.03em; }
.st-wijk:hover { background: var(--zwart); color: #fff; }
.st-wijk:hover .meta { color: #ccc; }
.st-balk { height: 8px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow: hidden; margin-top: 6px; }
.st-balk span { display: block; height: 100%; background: var(--rood); border-radius: 999px; }
.st-themas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st-thema { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 14px; border: 1px solid var(--zand-donker); background: #fff; }
.st-thema:hover { border-color: var(--zwart); color: var(--zwart); }
.st-thema-n { font: 900 28px/1 var(--kop); color: var(--rood); }
.st-thema strong { font: 900 18px/1.15 var(--kop); }
.st-thema span:last-child { font-size: 14px; color: var(--grijs-tekst); }
.st-themaverhaal { max-width: 860px; }
.st-themaverhaal .prose { font-size: 19px; }
.st-lijst { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.st-lijst li { break-inside: avoid; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid var(--zand-donker); }
.st-lijst strong { font: 700 17px/1.25 var(--kop); }
.st-lijst a:hover strong { color: var(--rood); }
.st-lijst li > span:not(.bg-verhaal-label) { font-size: 14px; color: var(--grijs-tekst); flex-basis: 100%; }
.st-lijst .st-zonder strong { font-weight: 500; color: var(--grijs-tekst); }
.st-straat { padding: 18px var(--marge) 24px; }
.st-straat-kop { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.st-kort { margin: 0; font-size: 21px; line-height: 1.4; color: var(--grijs-tekst); max-width: 760px; }
.st-straat-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 36px; align-items: start; }
.st-themablok { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; padding: 20px 22px; border-radius: 14px; background: var(--zand-licht); border: 1px solid var(--zand-donker); }
.st-themablok .prose { font-size: 18px; }
.st-themablok .link-blauw { align-self: flex-start; }
.st-kaart { position: sticky; top: 20px; }
@media (max-width: 1000px) { .st-themas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .st-wijken, .st-straat-grid { grid-template-columns: minmax(0, 1fr); } .st-lijst { columns: 1; } .st-kaart { position: static; } }

/* Straatnaambordje zoals in Amsterdam: donkerblauw emaille, lichte letters, stadsdeel rechtsonder */
.st-bordje { display: inline-flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 8px 14px 7px; border-radius: 7px; background: #15106B; color: #ECEBE6; box-shadow: none; font-family: var(--kop); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.05; max-width: 100%; }
.st-bordje-naam { font-size: 17px; overflow-wrap: anywhere; }
.st-bordje-stadsdeel { align-self: flex-end; font-size: 11px; letter-spacing: 0.06em; opacity: 0.95; }
.st-bordje-groot { padding: 18px 28px 14px; border-radius: 16px; box-shadow: 0 10px 24px rgba(21,16,107,0.18); text-align: left; }
.st-bordje-groot .st-bordje-naam { font-size: clamp(30px, 5vw, 60px); letter-spacing: 0.035em; line-height: 1; }
.st-bordje-groot .st-bordje-stadsdeel { font-size: clamp(16px, 2.2vw, 26px); margin-top: 6px; }
.bg-kaart .st-bordje { align-self: flex-start; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) { .st-bordje-groot { padding: 14px 18px 11px; border-radius: 12px; } }
.blok-kop:has(> .sectiekop-icoon) { border-top: 3px solid var(--zwart); padding-top: 12px; align-items: center; }
.blok-kop > .sectiekop-icoon { border-top: 0; padding-top: 0; margin: 0; flex: 1; }
/* Gidsen binnen het thema Straten en bruggen */
.gidsen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 8px var(--marge) 36px; }
.gids { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "beeld tekst" "beeld knop"; gap: 14px 24px; align-items: center; padding: 28px; border-radius: 16px; color: var(--zwart); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.gids:hover { color: var(--zwart); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
.gids-straten { background: var(--zand); }
.gids-bruggen { background: var(--blauw-licht); }
.gids .gids-bordje, .gids .gids-plaatje { grid-area: beeld; align-self: center; }
.gids .gids-bordje { padding: 14px 18px 10px; border-radius: 10px; }
.gids .gids-bordje .st-bordje-naam { font-size: 22px; }
.gids-tekst { grid-area: tekst; display: flex; flex-direction: column; gap: 6px; }
.gids-tekst strong { font: 900 clamp(26px, 2.6vw, 34px)/1.05 var(--kop); letter-spacing: -0.03em; }
.gids-tekst > span:not(.label-rood):not(.gids-cijfers) { font-size: 17px; line-height: 1.4; }
.gids-cijfers { font: 700 12px/1.3 var(--kop); text-transform: uppercase; letter-spacing: 0.06em; color: var(--grijs); }
.gids-knop { grid-area: knop; justify-self: start; }
@media (max-width: 860px) {
  .gidsen { grid-template-columns: minmax(0, 1fr); }
  .gids { grid-template-columns: minmax(0, 1fr); grid-template-areas: "beeld" "tekst" "knop"; padding: 22px; }
  .gids .gids-bordje, .gids .gids-plaatje { justify-self: start; }
}
/* Straten in dit verhaal */
.straten-in-verhaal { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 0; padding: 18px 20px; border-radius: 14px; background: var(--zand-licht); border: 1px solid var(--zand-donker); }
.straten-in-verhaal + .bruggen-in-verhaal { margin-top: 12px; }
.straten-in-verhaal .link-blauw { align-self: flex-start; }
.st-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.st-rij a { display: inline-flex; transition: transform .12s ease; }
.st-rij a:hover { transform: translateY(-1px); }
.st-bordje-klein { padding: 6px 11px 5px; border-radius: 5px; }
.st-bordje-klein .st-bordje-naam { font-size: 13px; letter-spacing: 0.05em; }
/* Gezegden */
.gz-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gz-kaart { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--zand-donker); color: var(--zwart); transition: border-color .12s ease, transform .12s ease; }
.gz-kaart[hidden] { display: none; }
.gz-kaart:hover { border-color: var(--zwart); color: var(--zwart); transform: translateY(-1px); }
.gz-kaart strong { font: 800 19px/1.2 var(--kop); letter-spacing: -0.01em; }
.gz-kaart span { font-size: 16px; line-height: 1.4; color: var(--grijs-tekst); }
.gz-kaart .wb-label { align-self: flex-start; }
.gz-band strong { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -0.03em; }
.wb-letters .wb-letter-gezegden { padding: 0 12px; background: var(--zand); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.gz-gezegde { max-width: 860px; margin: 0 auto; padding: 8px var(--marge) 0; display: flex; flex-direction: column; gap: 22px; }
.gz-gezegde-kop { display: flex; flex-direction: column; gap: 12px; }
.gz-gezegde h1 { font-size: clamp(34px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.gz-betekenis { padding: 22px 26px; border-radius: 16px; background: var(--rood); color: #fff; display: flex; flex-direction: column; gap: 8px; }
.gz-betekenis .kopje-grijs { color: #FFCDD2; }
.gz-betekenis p { font: 400 clamp(20px, 2.2vw, 26px)/1.35 var(--tekst); margin: 0; }
@media (max-width: 980px) { .gz-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gz-lijst { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 980px) { .wb-letters .wb-letter-gezegden { grid-column: span 3; } }