@charset "utf-8";
/* De beste ideeën van Friesland — stijlblad
   Alle kleuren, letters, maten en beeldverhoudingen staan als variabele op
   :root. Wie de huisstijl wil bijstellen hoeft alleen dat blok aan te raken. */

:root {
  /* ---- kleur ---------------------------------------------------------- */
  --kleur-diepblauw:        #12335f;
  --kleur-diepblauw-donker: #0d2646;
  --kleur-nacht:            #0e2a4a;
  --kleur-nacht-diep:       #071c33;
  --kleur-oranje:           #e2731f;
  --kleur-oranje-donker:    #c25c11;
  --kleur-blauw:            #1a5cc4;
  --kleur-blauw-donker:     #14479a;
  --kleur-groen:            #2c7a52;
  --kleur-papier:           #fcfaf7;
  --kleur-wit:              #ffffff;
  --kleur-zacht:            #f1ece4;
  --kleur-lichtblauw:       #d9e7f3;
  --kleur-lichtblauw-diep:  #c3d8ec;
  --kleur-tekst:            #24303c;
  --kleur-tekst-zacht:      #57636f;
  --kleur-lijn:             #e4ded4;
  --kleur-lijn-licht:       #efe9e0;
  --kleur-lijn-donker:      rgba(255,255,255,.16);

  /* ---- letters -------------------------------------------------------- */
  --font-kop:  "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;

  --maat-mini:   .75rem;    /* labels, kruimelpad */
  --maat-klein:  .875rem;   /* meta, voet */
  --maat-basis:  1.0625rem;
  --maat-lead:   1.1875rem;
  --maat-h3:     1.375rem;
  --maat-h2:     1.75rem;
  --maat-h1:     clamp(2.25rem, 1.3rem + 3.6vw, 4rem);
  --maat-hero:   clamp(2.5rem, 1.1rem + 5.2vw, 4.75rem);

  --regelhoogte:      1.65;
  --regelhoogte-kop:  1.12;
  --letterspatie-label: .14em;

  /* ---- ritme ---------------------------------------------------------- */
  --omhulsel:   1200px;
  --omhulsel-smal: 780px;
  --goot:       clamp(1rem, .4rem + 2.2vw, 2.5rem);
  --blok:       clamp(2.75rem, 1.5rem + 4vw, 5.5rem);
  --radius:     .5rem;
  --radius-groot: .75rem;
  --radius-pil: 999px;

  /* ---- beeldverhoudingen (uit de ontwerpen) --------------------------- */
  --verhouding-hero:    2.5 / 1;
  --verhouding-breed:   2 / 1;
  --verhouding-kaart:   16 / 10;
  --verhouding-vierkant: 1 / 1;
}

/* ---- basis ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--kleur-papier);
  color: var(--kleur-tekst);
  font-family: var(--font-ui);
  font-size: var(--maat-basis);
  line-height: var(--regelhoogte);
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--kleur-blauw); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--kleur-oranje);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  color: var(--kleur-diepblauw);
  line-height: var(--regelhoogte-kop);
  font-weight: 600;
  margin: 0 0 .5em;
  letter-spacing: -.005em;
}

.omhulsel { width: min(100% - 2 * var(--goot), var(--omhulsel)); margin-inline: auto; }
.omhulsel--smal { width: min(100% - 2 * var(--goot), var(--omhulsel-smal)); margin-inline: auto; }

.overslaan {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--kleur-diepblauw); color: #fff; padding: .75rem 1.25rem;
  font-size: var(--maat-klein);
}
.overslaan:focus { left: .5rem; top: .5rem; }

.verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- labels en handschrift -------------------------------------------- */
.label {
  font-family: var(--font-ui);
  font-size: var(--maat-mini);
  font-weight: 600;
  letter-spacing: var(--letterspatie-label);
  text-transform: uppercase;
  margin: 0 0 .5rem;
  display: block;
}
.label--oranje    { color: var(--kleur-oranje); }
.label--blauw     { color: var(--kleur-blauw); }
.label--groen     { color: var(--kleur-groen); }
.label--diepblauw { color: var(--kleur-diepblauw); }
a.label { text-decoration: none; }
a.label:hover { text-decoration: underline; }

.label--streep { display: flex; align-items: center; gap: .75rem; }
.label--streep::after { content: ""; width: 2.5rem; height: 2px; background: var(--kleur-oranje); }

.hand {
  font-family: var(--font-hand);
  color: var(--kleur-diepblauw);
  font-size: clamp(1.4rem, .9rem + 1.4vw, 2.1rem);
  line-height: 1.15;
  transform: rotate(-4deg);
}
.hand span { display: block; }
.hand span + span { margin-left: 1.2em; }

/* ---- knoppen ---------------------------------------------------------- */
.knop {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); font-size: var(--maat-klein); font-weight: 600;
  padding: .8rem 1.4rem; border-radius: var(--radius); border: 0;
  text-decoration: none; cursor: pointer; line-height: 1.2;
}
.knop--oranje { background: var(--kleur-oranje); color: #fff; }
.knop--oranje:hover { background: var(--kleur-oranje-donker); }
.knop--pil { border-radius: var(--radius-pil); padding: .7rem 1.5rem; }
.knop--blauw { background: var(--kleur-blauw); color: #fff; }
.knop--blauw:hover { background: var(--kleur-blauw-donker); }
.knop--leeg { background: var(--kleur-zacht); color: var(--kleur-diepblauw); }
.knop--leeg:hover { background: var(--kleur-lichtblauw); }

.tekstlink {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-ui); font-size: var(--maat-klein); font-weight: 500;
  color: var(--kleur-diepblauw); text-decoration: none;
  border-bottom: 1px solid var(--kleur-lijn); padding-bottom: .2rem;
}
.tekstlink:hover { color: var(--kleur-oranje); border-color: var(--kleur-oranje); }

/* ---- plaatshouderbeeld ------------------------------------------------ */
/* Er is nog geen fotomateriaal. Elke afbeelding is een plaatshouder met de
   juiste verhouding en een discreet hoekje, zodat niemand hem voor een foto
   aanziet. Eén regel (display:none op .beeld::after) haalt het hoekje weg. */
.beeld { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--kleur-lichtblauw); }
.beeld img { width: 100%; height: 100%; object-fit: cover; }
.beeld::after {
  content: "plaatshouder";
  position: absolute; right: .5rem; bottom: .5rem;
  background: rgba(18,51,95,.72); color: #fff;
  font-family: var(--font-ui); font-size: .625rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: .2rem;
}
.beeld--hero    { aspect-ratio: var(--verhouding-hero); border-radius: 0; }
.beeld--breed   { aspect-ratio: var(--verhouding-breed); }
.beeld--kaart   { aspect-ratio: var(--verhouding-kaart); }
.beeld--vierkant { aspect-ratio: var(--verhouding-vierkant); }
figure { margin: 0; }
figcaption {
  font-family: var(--font-ui); font-size: var(--maat-klein);
  color: var(--kleur-tekst-zacht); margin-top: .6rem;
}

/* ---- kop -------------------------------------------------------------- */
.kop {
  background: var(--kleur-wit);
  border-bottom: 1px solid var(--kleur-lijn);
  position: relative; z-index: 20;
}
.kop__binnen { display: flex; align-items: center; gap: 1.5rem; padding: 1rem 0; }

.logo { text-decoration: none; display: block; flex: none; }
.logo__r1, .logo__r2 {
  display: block; font-family: var(--font-kop); color: var(--kleur-diepblauw);
  font-weight: 600; line-height: 1.05; font-size: 1.3rem;
}
.logo__r2 { font-style: italic; }
.logo__golf { width: 3.2rem; height: .55rem; margin-top: .15rem; color: var(--kleur-blauw); }

.hoofdmenu { margin-left: auto; }
.hoofdmenu ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.hoofdmenu a {
  font-family: var(--font-ui); font-size: var(--maat-klein); font-weight: 500;
  color: var(--kleur-tekst); text-decoration: none; padding: .35rem 0;
  border-bottom: 2px solid transparent; display: block;
}
.hoofdmenu a:hover { color: var(--kleur-diepblauw); }
.hoofdmenu a[aria-current] { color: var(--kleur-diepblauw); border-bottom-color: var(--kleur-oranje); }

.kop__acties { display: flex; align-items: center; gap: 1.2rem; flex: none; }
.zoeklink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-ui); font-size: var(--maat-klein); font-weight: 500;
  color: var(--kleur-tekst); text-decoration: none;
}
.zoeklink:hover { color: var(--kleur-oranje); }
.zoeklink svg { width: 1.05rem; height: 1.05rem; }

.menuknop {
  display: none; margin-left: auto; background: none; border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius); padding: .5rem .8rem; font-family: var(--font-ui);
  font-size: var(--maat-klein); font-weight: 600; color: var(--kleur-diepblauw); cursor: pointer;
}

/* ---- hero (home) ------------------------------------------------------ */
.hero { position: relative; background: var(--kleur-lichtblauw); }
.hero__beeld { position: absolute; inset: 0; }
.hero__beeld img { width: 100%; height: 100%; object-fit: cover; }
.hero__beeld::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(252,250,247,.94) 0%, rgba(252,250,247,.78) 34%, rgba(252,250,247,.12) 62%, rgba(252,250,247,0) 78%); }
.hero__binnen { position: relative; padding: clamp(3rem, 1.5rem + 6vw, 7rem) 0 clamp(3.5rem, 2rem + 6vw, 8rem); }
.hero__inhoud { max-width: 34rem; }
.hero h1 { font-size: var(--maat-hero); margin-bottom: .6rem; }
.hero__lead { font-size: var(--maat-lead); color: var(--kleur-tekst); max-width: 26rem; margin: 0 0 1.75rem; }
.hero__hand { position: absolute; right: var(--goot); top: clamp(2rem, 1rem + 4vw, 5rem); text-align: left; }
.hero__hand::after { content: ""; display: block; width: 5rem; height: 2px; background: var(--kleur-blauw); margin: .4rem 0 0 2.5rem; }
.hero__plaats {
  position: absolute; right: var(--goot); bottom: 1rem;
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(13,38,70,.55); color: #fff; backdrop-filter: blur(2px);
  font-family: var(--font-ui); font-size: var(--maat-mini); padding: .35rem .7rem; border-radius: var(--radius-pil);
}
.hero__plaats svg { width: .8rem; height: .8rem; }
.hero .beeld::after { right: auto; left: .5rem; bottom: .5rem; }

/* ---- uitgelicht (home) ------------------------------------------------ */
.uitgelicht { padding: var(--blok) 0 0; }
.uitgelicht__raster { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(1.5rem,1rem + 2.5vw,3.5rem); align-items: start; }
.uitgelicht h2 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem); margin: .5rem 0 1rem; }
.uitgelicht p { color: var(--kleur-tekst-zacht); margin: 0 0 1.5rem; }
.uitgelicht__beeld { position: relative; }
.portretcitaat {
  position: absolute; right: 1.25rem; bottom: 1.25rem; left: auto;
  max-width: 15rem; color: #fff; text-shadow: 0 1px 12px rgba(7,28,51,.85);
}
.portretcitaat blockquote { margin: 0; font-family: var(--font-kop); font-size: 1.3rem; line-height: 1.25; }
.portretcitaat hr { border: 0; border-top: 2px solid var(--kleur-oranje); width: 2.5rem; margin: .7rem 0 .55rem; }
.portretcitaat cite { font-style: normal; font-family: var(--font-ui); font-size: var(--maat-klein); display: block; }
.portretcitaat cite b { display: block; font-weight: 600; }

/* ---- rasters en kaarten ----------------------------------------------- */
.sectiekop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.sectiekop h2 { margin: 0; font-size: var(--maat-h2); display: flex; align-items: center; gap: .9rem; }
.sectiekop h2::after { content: ""; width: 2.5rem; height: 2px; background: var(--kleur-oranje); }

.raster { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.25rem,.8rem + 1.6vw,2.25rem); list-style: none; margin: 0; padding: 0; }
.raster--twee { grid-template-columns: repeat(2, minmax(0,1fr)); }

.kaart { display: flex; flex-direction: column; }
.kaart .beeld { margin-bottom: 1rem; }
.kaart h3 { font-size: var(--maat-h3); margin: 0 0 .6rem; }
.kaart h3 a { color: inherit; text-decoration: none; }
.kaart h3 a:hover { color: var(--kleur-oranje); }
.kaart p { margin: 0 0 1rem; color: var(--kleur-tekst-zacht); font-size: var(--maat-klein); }
.kaart .meta { margin-top: auto; }

.meta {
  font-family: var(--font-ui); font-size: var(--maat-klein);
  color: var(--kleur-tekst-zacht); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.meta span[aria-hidden] { color: var(--kleur-lijn); }

.verhalen { padding: var(--blok) 0; }

/* ---- nieuwsbriefblok --------------------------------------------------- */
.nieuwsbrief {
  background: var(--kleur-lichtblauw); border-radius: var(--radius-groot);
  padding: clamp(1.75rem,1rem + 2.5vw,2.75rem);
  display: grid; grid-template-columns: 5.5rem minmax(0,1fr) minmax(0,.9fr);
  gap: clamp(1.25rem,1rem + 1.5vw,2.5rem); align-items: center;
}
.nieuwsbrief__vogel { color: var(--kleur-diepblauw); width: 100%; }
.nieuwsbrief h2 { font-size: clamp(1.4rem,1rem + 1.4vw,2rem); margin: 0 0 .5rem; }
.nieuwsbrief p { margin: 0; font-size: var(--maat-klein); color: var(--kleur-tekst); }
.nieuwsbrief .label { color: var(--kleur-diepblauw); opacity: .75; }

.aanmeldveld { display: flex; gap: .6rem; flex-wrap: wrap; }
.aanmeldveld input[type="email"] {
  flex: 1 1 11rem; min-width: 0; border: 1px solid var(--kleur-lijn-licht); border-radius: var(--radius);
  padding: .8rem 1rem; font-family: var(--font-ui); font-size: var(--maat-klein); background: #fff; color: var(--kleur-tekst);
}
.akkoord { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; font-size: var(--maat-klein); color: var(--kleur-tekst); }
.formuliermelding {
  margin-top: .8rem; font-size: var(--maat-klein); color: var(--kleur-diepblauw);
  background: rgba(255,255,255,.75); border-left: 3px solid var(--kleur-oranje);
  padding: .6rem .8rem; border-radius: .25rem;
}
.formuliermelding[hidden] { display: none; }

/* ---- themapagina ------------------------------------------------------ */
.themakop { padding: clamp(2rem,1rem + 3vw,3.5rem) 0 1.5rem; position: relative; }
.themakop h1 { font-size: var(--maat-h1); margin: 0 0 .5rem; }
.themakop p { font-size: var(--maat-lead); color: var(--kleur-tekst); margin: 0; max-width: 40rem; }
.themakop__hand { position: absolute; right: 0; top: clamp(2.5rem,1.5rem + 3vw,4rem); }
.themakop__hand::after { content: ""; display: block; width: 4rem; height: 2px; background: var(--kleur-blauw); margin: .3rem 0 0 auto; }

.filterbalk {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  border-top: 1px solid var(--kleur-lijn); border-bottom: 1px solid var(--kleur-lijn);
  padding: 1rem 0; margin: 1.75rem 0 var(--blok);
}
.filterbalk__tel { margin-left: auto; font-size: var(--maat-klein); color: var(--kleur-tekst-zacht); }
.filter {
  display: inline-block; padding: .55rem 1.2rem; border-radius: var(--radius-pil);
  background: var(--kleur-zacht); color: var(--kleur-diepblauw); text-decoration: none;
  font-family: var(--font-ui); font-size: var(--maat-klein); font-weight: 500; white-space: nowrap;
}
.filter:hover { background: var(--kleur-lichtblauw); }
.filter[aria-current] { background: var(--kleur-blauw); color: #fff; }

.uitgelicht-thema { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(1.5rem,1rem + 2.5vw,3rem); align-items: center; padding-bottom: var(--blok); border-bottom: 1px solid var(--kleur-lijn); margin-bottom: var(--blok); }
.uitgelicht-thema h2 { font-size: clamp(1.7rem,1.1rem + 2vw,2.5rem); margin: 0 0 .9rem; }
.uitgelicht-thema h2 a { color: inherit; text-decoration: none; }
.uitgelicht-thema h2 a:hover { color: var(--kleur-oranje); }
.uitgelicht-thema p { color: var(--kleur-tekst-zacht); margin: 0 0 1.1rem; }
.leesknop { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--kleur-diepblauw); font-family: var(--font-ui); font-size: var(--maat-klein); font-weight: 500; margin-top: 1rem; }
.leesknop__rond { width: 2.4rem; height: 2.4rem; border: 1px solid var(--kleur-lijn); border-radius: 50%; display: grid; place-items: center; color: var(--kleur-diepblauw); flex: none; }
.leesknop:hover .leesknop__rond { border-color: var(--kleur-oranje); color: var(--kleur-oranje); }

.paginering { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: var(--blok) 0; flex-wrap: wrap; }
.paginering a, .paginering span {
  min-width: 2.35rem; height: 2.35rem; padding: 0 .5rem; border-radius: 50%;
  display: inline-grid; place-items: center; text-decoration: none;
  font-family: var(--font-ui); font-size: var(--maat-klein); color: var(--kleur-diepblauw);
}
.paginering a:hover { background: var(--kleur-zacht); }
.paginering [aria-current] { background: var(--kleur-blauw); color: #fff; }
.paginering .pijl { border: 1px solid var(--kleur-lijn); }
.paginering .leeg { color: var(--kleur-tekst-zacht); }

/* ---- artikelpagina ---------------------------------------------------- */
.kruimelpad { font-family: var(--font-ui); font-size: var(--maat-mini); color: var(--kleur-tekst-zacht); padding: 1.25rem 0; border-bottom: 1px solid var(--kleur-lijn-licht); }
.kruimelpad ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.kruimelpad li + li::before { content: "/"; margin-right: .5rem; color: var(--kleur-lijn); }
.kruimelpad a { color: var(--kleur-tekst-zacht); text-decoration: none; }
.kruimelpad a:hover { color: var(--kleur-oranje); }

.artikel { display: grid; grid-template-columns: minmax(0,1fr) 19rem; gap: clamp(2rem,1.5rem + 3vw,4.5rem); padding: clamp(1.75rem,1rem + 2vw,3rem) 0 var(--blok); align-items: start; }
.artikel__kop h1 { font-size: var(--maat-h1); margin: 0 0 .75rem; }
.artikel__lead { font-family: var(--font-kop); font-size: clamp(1.15rem,1rem + .5vw,1.45rem); color: var(--kleur-tekst); margin: 0 0 1.5rem; max-width: 36rem; }
.auteur { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.75rem; }
.auteur .beeld { width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none; }
.auteur .beeld::after { display: none; }
.auteur__tekst { font-family: var(--font-ui); font-size: var(--maat-klein); color: var(--kleur-tekst-zacht); line-height: 1.4; }
.auteur__tekst b { color: var(--kleur-tekst); font-weight: 600; }

.artikel__body { font-family: var(--font-kop); font-size: 1.125rem; line-height: 1.72; }
.artikel__body p { margin: 0 0 1.25rem; }
.artikel__body h2 { font-size: var(--maat-h2); margin: 2.5rem 0 1rem; }
.artikel__body figure.zijbeeld { float: right; width: 42%; margin: .35rem 0 1.25rem 1.75rem; }
.artikel__body figure.zijbeeld figcaption { font-size: var(--maat-mini); }
.artikel__body::after { content: ""; display: block; clear: both; }

.pullquote { margin: 2rem 0; padding: .25rem 0 .25rem 1.5rem; border-left: 3px solid var(--kleur-blauw); }
.pullquote p { font-family: var(--font-kop); font-style: italic; font-size: clamp(1.25rem,1rem + .9vw,1.6rem); color: var(--kleur-diepblauw); line-height: 1.35; margin: 0 0 .6rem; }
.pullquote cite { font-style: normal; font-family: var(--font-ui); font-size: var(--maat-klein); color: var(--kleur-tekst-zacht); }

/* zijbalk */
.zijbalk { position: sticky; top: 1.5rem; display: grid; gap: 2rem; font-family: var(--font-ui); }
.zijbalk h2 { font-size: 1.2rem; margin: 0 0 .9rem; }
.zijbalk__blok { border-bottom: 1px solid var(--kleur-lijn); padding-bottom: 1.75rem; }
.zijbalk__blok:last-child { border-bottom: 0; padding-bottom: 0; }

.deelknoppen { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.deelknoppen a { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--kleur-zacht); color: var(--kleur-diepblauw); display: grid; place-items: center; }
.deelknoppen a:hover { background: var(--kleur-lichtblauw); }
.deelknoppen svg { width: 1.05rem; height: 1.05rem; }

.inhoudsopgave { list-style: none; margin: 0; padding: 0; counter-reset: io; }
.inhoudsopgave li { counter-increment: io; border-bottom: 1px solid var(--kleur-lijn-licht); }
.inhoudsopgave li:last-child { border-bottom: 0; }
.inhoudsopgave a { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: baseline; padding: .7rem 0; text-decoration: none; color: var(--kleur-tekst); font-size: var(--maat-klein); }
.inhoudsopgave a::before { content: counter(io); color: var(--kleur-oranje); font-weight: 600; }
.inhoudsopgave a:hover { color: var(--kleur-oranje); }

.zijnieuwsbrief { background: var(--kleur-lichtblauw); border-radius: var(--radius); padding: 1.5rem; position: relative; overflow: hidden; }
.zijnieuwsbrief h2 { font-size: 1.35rem; line-height: 1.2; margin-bottom: .75rem; }
.zijnieuwsbrief h2::after { content: ""; display: block; width: 2.25rem; height: 2px; background: var(--kleur-oranje); margin-top: .75rem; }
.zijnieuwsbrief p { font-size: var(--maat-klein); margin: 0 0 1rem; }
.zijnieuwsbrief input[type="email"] { width: 100%; }
.zijnieuwsbrief .knop { margin-top: .6rem; }
.zijnieuwsbrief__riet { position: absolute; right: -.5rem; bottom: 0; width: 5rem; color: var(--kleur-diepblauw); opacity: .28; pointer-events: none; }

.meerlijst { list-style: none; margin: 0; padding: 0; }
.meerlijst li { border-bottom: 1px solid var(--kleur-lijn-licht); }
.meerlijst a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; text-decoration: none; color: var(--kleur-tekst); font-size: var(--maat-klein); }
.meerlijst a:hover { color: var(--kleur-oranje); }
.meerlijst svg { width: .8rem; height: .8rem; color: var(--kleur-tekst-zacht); flex: none; }

.gerelateerd { border-top: 1px solid var(--kleur-lijn); padding: var(--blok) 0; }

/* ---- eenvoudige tekstpagina's ----------------------------------------- */
.tekstpagina { padding: clamp(2rem,1rem + 3vw,3.5rem) 0 var(--blok); }
.tekstpagina h1 { font-size: var(--maat-h1); }
.tekstpagina h2 { font-size: var(--maat-h2); margin-top: 2.5rem; }
.tekstpagina .lead { font-family: var(--font-kop); font-size: var(--maat-lead); color: var(--kleur-tekst); }
.tekstpagina p, .tekstpagina li { max-width: 40rem; }
.tekstpagina ul { padding-left: 1.2rem; }
.invulveld { background: #fdf1e3; border-bottom: 2px dotted var(--kleur-oranje); padding: 0 .25rem; font-family: var(--font-ui); font-size: .95em; }

.waardenraster { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1.25rem,1rem + 1.5vw,2.25rem); list-style: none; margin: 2rem 0 0; padding: 0; }
.waardenraster h3 { font-size: var(--maat-h3); }
.waardenraster p { font-size: var(--maat-klein); color: var(--kleur-tekst-zacht); margin: 0; }

.redactie { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5rem; list-style: none; margin: 2rem 0 0; padding: 0; }
.redactie .beeld { border-radius: 50%; width: 5.5rem; margin-bottom: .8rem; }
.redactie h3 { font-size: 1.05rem; margin: 0 0 .15rem; }
.redactie p { font-size: var(--maat-klein); color: var(--kleur-tekst-zacht); margin: 0; }

/* ---- zoeken ------------------------------------------------------------ */
.zoekformulier { display: flex; gap: .6rem; margin: 1.5rem 0 2rem; max-width: 34rem; }
.zoekformulier input[type="search"] {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--kleur-lijn); border-radius: var(--radius);
  padding: .9rem 1rem; font-family: var(--font-ui); font-size: var(--maat-basis); background: #fff; color: var(--kleur-tekst);
}
.zoekresultaten { list-style: none; margin: 0; padding: 0; }
.zoekresultaten li { border-bottom: 1px solid var(--kleur-lijn-licht); padding: 1.25rem 0; }
.zoekresultaten h3 { font-size: var(--maat-h3); margin: .35rem 0 .4rem; }
.zoekresultaten h3 a { color: inherit; text-decoration: none; }
.zoekresultaten h3 a:hover { color: var(--kleur-oranje); }
.zoekresultaten p { margin: 0 0 .5rem; color: var(--kleur-tekst-zacht); font-size: var(--maat-klein); }
.zoekstatus { font-size: var(--maat-klein); color: var(--kleur-tekst-zacht); }

/* ---- voet -------------------------------------------------------------- */
.voet { background: var(--kleur-nacht); color: rgba(255,255,255,.86); position: relative; margin-top: var(--blok); overflow: hidden; }
.voet::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--kleur-nacht) 0%, var(--kleur-nacht-diep) 100%); }
.voet__silhouet { position: absolute; left: 0; right: 0; bottom: 3.25rem; color: rgba(255,255,255,.14); pointer-events: none; }
.voet__silhouet svg { width: 100%; height: auto; }
.voet__binnen { position: relative; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.7fr) minmax(0,1fr) minmax(0,.8fr); gap: clamp(1.5rem,1rem + 2vw,3rem); padding: clamp(2.5rem,1.5rem + 3vw,4rem) 0 clamp(2.5rem,1.5rem + 3vw,4rem); }
.voet a { color: rgba(255,255,255,.86); }
.voet .logo__r1, .voet .logo__r2 { color: #fff; }
.voet .logo__golf { color: rgba(255,255,255,.8); }
.voet__citaat { font-family: var(--font-kop); font-style: italic; color: rgba(255,255,255,.8); font-size: var(--maat-klein); margin: 1.25rem 0 0; max-width: 18rem; }
.voet__citaat::after { content: ""; display: block; width: 2.5rem; height: 2px; background: var(--kleur-oranje); margin-top: .8rem; }
.voet h2 { color: #fff; font-family: var(--font-ui); font-size: var(--maat-klein); font-weight: 600; margin: 0 0 .9rem; }
.voet__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.voet__menu a { text-decoration: none; font-size: var(--maat-klein); }
.voet__menu a:hover { color: var(--kleur-oranje); }
.voet__nieuws p { font-size: var(--maat-klein); color: rgba(255,255,255,.74); margin: 0 0 .9rem; }
.voet__nieuws input[type="email"] { background: rgba(255,255,255,.95); border-color: transparent; }
.voet__nieuws .aanmeldveld { flex-wrap: nowrap; }
.voet__nieuws .knop { padding: .8rem; border-radius: 50%; width: 2.6rem; height: 2.6rem; justify-content: center; flex: none; }
.voet__nieuws .formuliermelding { background: rgba(255,255,255,.12); color: rgba(255,255,255,.92); }
.sociaal { display: flex; gap: .8rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.sociaal a { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .35rem; background: rgba(255,255,255,.12); }
.sociaal a:hover { background: rgba(255,255,255,.24); }
.sociaal svg { width: 1rem; height: 1rem; }
.voet__sfeer { text-align: right; }
.voet__sfeer .hand { color: rgba(255,255,255,.92); }
.voet__kaart { color: rgba(255,255,255,.4); width: 9rem; margin-left: auto; margin-bottom: .5rem; }
.voet__onder { position: relative; border-top: 1px solid var(--kleur-lijn-donker); }
.voet__onder .omhulsel { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; padding: 1.1rem 0; font-size: var(--maat-mini); color: rgba(255,255,255,.62); }
.voet__onder nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.voet__onder a { text-decoration: none; }
.voet__onder a:hover { color: var(--kleur-oranje); }
.voet__slogan { margin-left: auto; text-transform: uppercase; letter-spacing: .1em; }

/* ---- 404 --------------------------------------------------------------- */
.nietgevonden { text-align: center; padding: clamp(3rem,2rem + 4vw,6rem) 0; }
.nietgevonden h1 { font-size: var(--maat-h1); }
.nietgevonden p { max-width: 32rem; margin-inline: auto; color: var(--kleur-tekst-zacht); }

/* ---- smallere schermen -------------------------------------------------- */
@media (max-width: 68rem) {
  .artikel { grid-template-columns: minmax(0,1fr); }
  .zijbalk { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zijbalk__blok { border-bottom: 0; padding-bottom: 0; }
  .voet__binnen { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .voet__sfeer { text-align: left; }
  .voet__kaart { margin-left: 0; }
  .redactie { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 56rem) {
  .menuknop { display: block; order: 2; }
  .kop__binnen { flex-wrap: wrap; row-gap: .75rem; }
  .hoofdmenu { order: 4; flex-basis: 100%; margin-left: 0; }
  .hoofdmenu[hidden] { display: none; }
  .hoofdmenu ul { flex-direction: column; gap: 0; }
  .hoofdmenu li { border-top: 1px solid var(--kleur-lijn-licht); }
  .hoofdmenu a { padding: .8rem 0; border-bottom: 0; }
  .hoofdmenu a[aria-current] { border-left: 3px solid var(--kleur-oranje); padding-left: .7rem; }
  .kop__acties { order: 3; flex-basis: 100%; justify-content: space-between; }

  .uitgelicht__raster,
  .uitgelicht-thema { grid-template-columns: minmax(0,1fr); }
  .raster, .raster--twee { grid-template-columns: minmax(0,1fr); }
  .waardenraster { grid-template-columns: minmax(0,1fr); }
  .nieuwsbrief { grid-template-columns: minmax(0,1fr); }
  .nieuwsbrief__vogel { width: 4rem; }

  .hero__hand, .themakop__hand { position: static; margin: 0 0 1.25rem; transform: rotate(-3deg); }
  .hero__beeld::after { background: linear-gradient(180deg, rgba(252,250,247,.92) 0%, rgba(252,250,247,.8) 55%, rgba(252,250,247,.55) 100%); }
  .beeld--hero { aspect-ratio: 3 / 2; }
  .hero__plaats { right: var(--goot); bottom: .75rem; }

  .artikel__body figure.zijbeeld { float: none; width: 100%; margin: 1.5rem 0; }
  .filterbalk { overflow-x: auto; flex-wrap: nowrap; }
  .filterbalk__tel { margin-left: 1rem; white-space: nowrap; }
}

@media (max-width: 40rem) {
  .zijbalk { grid-template-columns: minmax(0,1fr); }
  .voet__binnen { grid-template-columns: minmax(0,1fr); }
  .redactie { grid-template-columns: minmax(0,1fr); }
  .portretcitaat { position: static; max-width: none; color: var(--kleur-tekst); text-shadow: none; margin-top: 1rem; }
  .portretcitaat blockquote { color: var(--kleur-diepblauw); }
  .voet__onder .omhulsel { flex-direction: column; align-items: flex-start; }
  .voet__slogan { margin-left: 0; }
}

@media print {
  .kop__acties, .menuknop, .zijbalk, .voet__silhouet, .paginering, .filterbalk { display: none; }
  body { background: #fff; }
}

/* Social-iconen zonder bekende profiel-URL: zichtbaar, maar geen dode link. */
.sociaal__leeg {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  border-radius: .35rem; background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.5); cursor: default;
}

/* ---- iconen ------------------------------------------------------------ */
/* Een inline-SVG zonder maat vult alle beschikbare ruimte. Elk icoon krijgt
   daarom hier zijn eigen maat, met de verhouding van zijn viewBox. */
.icoon { flex: none; display: block; }
.icoon--pijl     { width: 1.25rem; height: .75rem; }
.icoon--chevron  { width: .5rem;  height: .75rem; }
.icoon--vierkant { width: 1.05rem; height: 1.05rem; }
.deelknoppen .icoon--vierkant,
.sociaal .icoon--vierkant { width: 1.1rem; height: 1.1rem; }
.hero__plaats .icoon--vierkant { width: .8rem; height: .8rem; }
.leesknop__rond .icoon--pijl { width: 1rem; height: .65rem; }
.knop, .tekstlink, .leesknop, .zoeklink { white-space: nowrap; }
.tekstlink, .leesknop { white-space: normal; }
.tekstlink .icoon, .leesknop .icoon { flex: none; }

/* ---- hero: het beeld vult het hele vlak -------------------------------- */
/* De verhouding uit het ontwerp staat op .beeld--hero en beschrijft welke foto
   nodig is; in de hero moet dat vlak daarnaast de volledige sectie vullen. */
.hero__beeld .beeld { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.hero__inhoud { max-width: 42rem; }
.uitgelicht h2 a { color: inherit; text-decoration: none; }
.uitgelicht h2 a:hover { color: var(--kleur-oranje); }

/* ---- laatste correcties na de eerste afdrukken -------------------------- */
/* Het bijschrift onder het heldbeeld plakte tegen de eerste alinea. */
.artikel__hoofd > figure { margin-bottom: 2rem; }
/* De rietillustratie lag over het invoerveld heen in plaats van erachter. */
.zijnieuwsbrief > *:not(.zijnieuwsbrief__riet) { position: relative; z-index: 1; }
.zijnieuwsbrief__riet { z-index: 0; }
/* De handgeschreven regel staat in het ontwerp op twee regels, niet op één. */
.themakop__hand { max-width: 13rem; text-align: right; }
.hero__hand { max-width: 21rem; }

/* Nederlandse samenstellingen ("verwerkingsverantwoordelijke") zijn breder dan
   een telefoonscherm. Zonder afbreken duwen ze de hele pagina opzij. */
h1, h2, h3, h4, p, li, figcaption, cite, blockquote { overflow-wrap: break-word; }
h1, h2, h3 { hyphens: auto; }
@media (max-width: 56rem) {
  /* Het streepje naast een sectiekop belandt na het afbreken los rechts. */
  .sectiekop h2::after { display: none; }
}

/* Portretplaatshouder: een neutraal silhouet, geen landschap in een rondje.
   Geen hoekje "plaatshouder": het silhouet is zelf al onmiskenbaar geen foto. */
.beeld--portret { aspect-ratio: var(--verhouding-vierkant); border-radius: 50%; }
.beeld--portret::after { display: none; }
/* Zodra er een echte foto staat, hoort het hoekje 'plaatshouder' weg. */
.beeld--foto::after { display: none; }

/* De handgeschreven regel in de hero ligt in het ontwerp op een lichte lucht.
   Op de werkelijke foto valt hij deels over de bomen; een lichte gloed houdt
   hem leesbaar zonder de kleur uit het ontwerp op te geven. */
.hero__hand {
  text-shadow: 0 0 10px rgba(252,250,247,.95), 0 0 26px rgba(252,250,247,.85),
               0 1px 2px rgba(252,250,247,.9);
}
.hero__hand::after { box-shadow: 0 0 10px 3px rgba(252,250,247,.85); }

/* Getekende illustraties: geen hoekje 'plaatshouder', en een eigen ondergrond
   zodat ze als tweede register naast de foto's staan in plaats van ertussen. */
.beeld--tekening::after { display: none; }
.beeld--tekening { background: var(--kleur-zacht); }