/* ============================================================
   HI voorstel 2 — "digitaal magazine"
   Wit en lichtgrijs, diep erfgoedgroen als vlakkleur, helder
   teal als signaalkleur, Archivo-typografie, zachte kaarten.
   ============================================================ */
:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --soft:#F1F4F2;
  --ink:#17211E;
  --muted:#5A6A63;
  --line:#E0E5E1;
  --tekst:#26332C;      /* lopende teksten (lichter dan --ink) */
  --tekst-2:#3B4A43;    /* iets zachtere lange teksten (standfirst, meldingen) */
  --veld:#FFFFFF;       /* achtergrond van invoervelden */
  --topbar-tekst:#17211E;   /* tekst op de teal-balk */
  --huid-tekst:#FFFFFF;     /* tekst op de actieve navigatie/paginering */
  --knop-tekst:#FFFFFF;     /* tekst op de teal/groene knoppen */
  --demo-bg:#FBEED0;        /* demomodus-banner */
  --demo-tekst:#6B5B1E;
  --voet-achter:#17211E;    /* achtergrond van de voettekst (blijft donker) */
  --green:#0B3D33;
  --green-2:#10564A;
  --teal:#0EA79B;
  --teal-bright:#46D6CA;
  --teal-deep:#0B6E67;
  --sans:"Archivo",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r:12px;
}
/* rubriekkleuren (deel vóór de slash in 'cat') */
.c-tech{--tab:#3E6186} .c-gezondheid{--tab:#B0473C}
.c-economie{--tab:#6B559B} .c-milieu{--tab:#4E7D42}
.c-cultuur{--tab:#9B4F86} .c-wonen{--tab:#9A6B38}
.c-fauna{--tab:#1F7A6B} .c-overheid{--tab:#5E6B74}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--teal-deep)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
/* statische pagina's (contact, privacy, disclaimer): smallere kolom,
   horizontaal gecentreerd */
.wrap.nauw{max-width:760px}
.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:12px;top:12px;background:var(--green);color:#FFF;
  padding:8px 14px;z-index:200;text-decoration:none;border-radius:6px}

/* ---------- utiliteitsbalk ---------- */
.topbar{background:var(--teal);color:var(--topbar-tekst);font-size:13.5px;font-weight:700}
.topbar .wrap{display:flex;gap:4px;justify-content:flex-end;
  padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar a{color:var(--topbar-tekst);text-decoration:none;padding:3px 12px;border-radius:999px}
.topbar a:hover{background:rgba(255,255,255,.35)}

/* kleurkeuze (licht / donker / auto), links in de balk */
.schermkeuze{display:flex;gap:2px;align-items:center;margin-right:auto}
.schermkeuze .scherm-label{font-weight:700;margin-right:6px;opacity:.75}
.schermkeuze button{font:inherit;font-weight:700;color:inherit;cursor:pointer;
  background:none;border:1px solid transparent;padding:3px 11px;border-radius:999px}
.schermkeuze button:hover{background:rgba(255,255,255,.25)}
.schermkeuze button[aria-pressed="true"]{background:rgba(255,255,255,.45)}

/* demomodus-banner (verdwijnt zodra de db is aangesloten) */
.demo-banner{background:var(--demo-bg);color:var(--demo-tekst);font-size:13px;font-weight:600;
  padding:8px 22px;text-align:center}
.demo-banner code{font-weight:700}

/* ---------- header ---------- */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50}
.header-inner{max-width:1200px;margin:0 auto;padding:16px 22px;
  display:flex;align-items:center;gap:18px 30px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-mark{width:42px;height:42px;background:var(--green);color:#FFF;border-radius:10px;
  font:800 20px var(--sans);display:flex;align-items:center;justify-content:center;flex:none}
.brand-mark em{color:var(--teal-bright);font-style:normal}
.brand-name{font:800 23px var(--sans);letter-spacing:-.02em;line-height:1.05;white-space:nowrap}
.brand-name span{color:var(--teal-deep)}
.main-nav{display:flex;flex-wrap:wrap;gap:2px;margin-left:auto}
.main-nav a{padding:8px 13px;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:15px;border-radius:999px}
.main-nav a:hover{background:var(--soft)}
.main-nav a[aria-current="page"]{background:var(--ink);color:var(--huid-tekst)}
/* extra links (Alle bijdragen, Contact) onderin het hamburgerpaneel;
   op het brede scherm staan ze in de topbalk en worden ze hier verborgen */
.main-nav .nav-meer{display:none}
.search{display:flex;flex:none}
.search input{font:400 15px var(--sans);padding:9px 16px;width:190px;
  border:2px solid var(--line);border-right:none;border-radius:999px 0 0 999px;
  background:var(--bg);color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.search button{font:700 15px var(--sans);padding:9px 18px;cursor:pointer;
  border:2px solid var(--teal-deep);background:var(--teal-deep);color:var(--knop-tekst);
  border-radius:0 999px 999px 0}
.search button:hover{background:var(--green-2);border-color:var(--green-2)}

/* hamburger-knop: alleen zichtbaar op kleine schermen (zie responsive);
   de kleuren volgen de variabelen zodat ook de donkere modus klopt */
.menu-knop{display:none}

/* ---------- knoppen en chips ---------- */
.knop{display:inline-block;font:700 16px var(--sans);padding:12px 26px;cursor:pointer;
  border-radius:999px;text-decoration:none;border:2px solid transparent}
.knop-wit{background:#FFF;color:var(--green)}
.knop-wit:hover{background:var(--teal-bright);color:var(--ink)}
.knop-lijn{border-color:var(--teal-deep);color:var(--teal-deep);background:transparent}
.knop-lijn:hover{background:var(--teal-deep);color:#FFF}
.chip{display:inline-block;background:var(--tab,var(--teal));color:#FFF;
  font:700 13px/1 var(--sans);padding:6px 14px;border-radius:999px;text-decoration:none}
.meta{font-size:13px;color:var(--muted);font-weight:600}

/* ---------- homepage: cover ---------- */
.cover{margin-top:26px}
.cover-inner{display:grid;grid-template-columns:1.05fr 1fr;background:var(--green);
  border-radius:16px;overflow:hidden}
.cover-tekst{padding:42px 44px;color:#FFF;display:flex;flex-direction:column;
  align-items:flex-start}
.cover-tekst .chip{background:var(--teal)}
.cover-tekst h1{font:800 34px/1.15 var(--sans);letter-spacing:-.02em;margin:20px 0 14px}
.cover-tekst h1 a{color:#FFF;text-decoration:none}
.cover-tekst h1 a:hover{color:var(--teal-bright)}
.cover-tekst p{margin:0 0 26px;font-size:16.5px;color:#C4D6CF;max-width:52ch}
.cover-beeld{background:var(--green-2);min-height:320px}
.cover-beeld img{width:100%;height:100%;object-fit:cover;display:block}
.cover-meta{margin-top:auto;padding-top:22px;font-size:13.5px;color:#8FB3A8;font-weight:600}

/* ---------- sectietitels ---------- */
.sectie-titel{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:48px 0 22px}
.sectie-titel h2{font:800 25px var(--sans);letter-spacing:-.02em;margin:0;
  display:flex;align-items:center;gap:12px}
.sectie-titel h2::before{content:"";width:12px;height:28px;background:var(--teal);
  border-radius:3px;flex:none}
.sectie-titel a{font-size:14.5px;font-weight:700;color:var(--teal-deep);text-decoration:none}
.sectie-titel a:hover{text-decoration:underline}

/* ---------- artikelraster ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s ease}
.card:hover{border-color:var(--teal)}
.card .beeld{overflow:hidden;background:var(--soft)}
.card .beeld img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .35s ease}
.card:hover .beeld img{transform:scale(1.04)}
.beeld-lege{aspect-ratio:16/10}
.card-body{padding:18px 20px 18px;display:flex;flex-direction:column;flex:1}
.card-body h3{font:700 18.5px/1.3 var(--sans);letter-spacing:-.01em;margin:13px 0 8px}
.card-body h3 a{color:var(--ink);text-decoration:none}
.card-body h3 a:hover{color:var(--teal-deep)}
.card-body p{margin:0 0 16px;font-size:14.5px;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-body .meta{margin-top:auto}
.meer-knop{text-align:center;margin:36px 0 0}

/* ---------- rubriektegels (homepage) ---------- */
.tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tegel{display:block;background:var(--soft);border-radius:var(--r);padding:20px 20px 17px;
  text-decoration:none;border:2px solid transparent;transition:border-color .2s ease}
.tegel:hover{border-color:var(--tab,var(--teal))}
.tegel h3{font:800 19px var(--sans);margin:0;color:var(--ink);display:flex;
  align-items:center;gap:10px}
.tegel h3::before{content:"";width:11px;height:11px;background:var(--tab,var(--teal));
  border-radius:3px;flex:none}
.tegel span{display:block;margin-top:7px;font-size:13.5px;color:var(--muted);font-weight:600}

/* ---------- rubriekpagina ---------- */
.kruimelpad{padding-top:28px;font-size:13.5px;color:var(--muted);font-weight:600}
.kruimelpad a{color:var(--muted);text-decoration:none}
.kruimelpad a:hover{color:var(--teal-deep)}
.rubriek-kop{margin-top:16px;background:var(--green);border-radius:16px;
  padding:36px 40px 30px;color:#FFF;position:relative;overflow:hidden}
.rubriek-kop::after{content:"";position:absolute;right:-70px;top:-70px;
  width:260px;height:260px;background:var(--tab,var(--teal));border-radius:50%;opacity:.28}
.rubriek-kop h1{font:800 36px var(--sans);letter-spacing:-.02em;margin:0 0 12px;position:relative}
.rubriek-kop p{font-size:16.5px;color:#C4D6CF;max-width:60ch;margin:0 0 22px;position:relative}
.rubriek-kop p a{color:var(--teal-bright);font-weight:700}
.rubriek-kop p a:hover{text-decoration:underline}
.subrubrieken{display:flex;flex-wrap:wrap;gap:8px;position:relative}
.subrubrieken a{font:700 13.5px var(--sans);text-decoration:none;color:#FFF;
  border:1.5px solid rgba(255,255,255,.4);padding:7px 16px;border-radius:999px}
.subrubrieken a:hover{border-color:#FFF}
.subrubrieken a[aria-current="page"]{background:#FFF;color:var(--green);border-color:#FFF}

/* artikeltegels in de rubrieklijst */
.lijst{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.tegel-artikel{display:grid;grid-template-columns:190px 1fr;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .2s ease}
.tegel-artikel:hover{border-color:var(--tab,var(--teal))}
.tegel-artikel .beeld{background:var(--soft);aspect-ratio:190/140}
.tegel-artikel .beeld img{width:100%;height:100%;object-fit:cover;display:block}
.tegel-body{padding:16px 18px;display:flex;flex-direction:column}
.tegel-body h2{font:700 16.5px/1.35 var(--sans);letter-spacing:-.01em;margin:10px 0 7px}
.tegel-body h2 a{color:var(--ink);text-decoration:none}
.tegel-body h2 a:hover{color:var(--teal-deep)}
.tegel-body p{margin:0 0 12px;font-size:13.5px;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tegel-body .chip{padding:5px 12px;font-size:12px}
.paginatie{display:flex;gap:8px;justify-content:center;margin:40px 0 0}
.paginatie a,.paginatie span{display:inline-block;min-width:40px;text-align:center;
  padding:9px 14px;font:700 15px var(--sans);text-decoration:none;color:var(--ink);
  border:2px solid var(--line);background:var(--bg);border-radius:999px}
.paginatie a:hover{border-color:var(--ink)}
.paginatie .actief{background:var(--ink);color:var(--huid-tekst);border-color:var(--ink)}
.paginatie .puntjes{border:none;background:none;color:var(--muted);min-width:auto}

/* ---------- artikelpagina ---------- */
.artikel-kop{max-width:780px;margin:16px auto 0}
.artikel-kop h1{font:800 40px/1.12 var(--sans);letter-spacing:-.025em;margin:16px 0 16px}
.standfirst{font:400 20px/1.5 var(--sans);color:var(--tekst-2);margin:0 0 20px}
.artikel-meta{display:flex;gap:18px;align-items:center;font-size:13.5px;font-weight:600;
  color:var(--muted);padding:13px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.artikel-beeld{margin:28px auto 0}
.artikel-beeld img{width:100%;aspect-ratio:16/7;max-height:470px;object-fit:cover;
  display:block;border-radius:14px}
.artikel-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;
  margin-top:36px}
.artikel-tekst{max-width:66ch}
.artikel-tekst p{font:400 17.5px/1.75 var(--sans);margin:0 0 1.4em;color:var(--tekst)}
.artikel-tekst p.aanhef{font-size:20px;font-weight:600;color:var(--ink)}
.artikel-tekst h2{font:800 25px var(--sans);letter-spacing:-.02em;margin:1.7em 0 .6em}
.artikel-tekst h3{font:800 20px var(--sans);letter-spacing:-.02em;margin:1.4em 0 .5em}
.artikel-tekst a{color:var(--teal-deep);text-decoration-thickness:2px;text-underline-offset:3px}
.zijkolom{min-width:0}
.zijkolom aside{margin-bottom:30px}
.zijkolom h3{font:800 17px var(--sans);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.zijkolom h3::before{content:"";width:10px;height:22px;background:var(--tab,var(--teal));
  border-radius:3px;flex:none}
.meer-lijst{list-style:none;margin:0;padding:0}
.meer-lijst li{margin:0 0 15px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.meer-lijst li:last-child{border-bottom:none;padding-bottom:0}
.meer-lijst a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:700;
  line-height:1.4;display:block}
.meer-lijst a:hover{color:var(--teal-deep)}
.meer-lijst .meta{margin-top:4px}
.nuttig-kader{background:var(--soft);border-radius:14px;padding:20px 22px}
.nuttig-kader ul{list-style:none;margin:0;padding:0}
.nuttig-kader li{margin:10px 0;font-size:14.5px}
.nuttig-kader a{color:var(--ink);font-weight:700;text-decoration:none}
.nuttig-kader a::after{content:"\2197";font-weight:400;color:var(--teal-deep);
  margin-left:5px;font-size:.85em}
.nuttig-kader a:hover{color:var(--teal-deep)}

/* ---------- zoeken / meldingen ---------- */
.bericht{background:var(--soft);border-radius:14px;padding:28px 30px;margin-top:26px}
.bericht p{margin:0;font-size:16px;color:var(--tekst-2)}

/* 404: rubriekkeuze na het bericht, plus de aanmoediging om dode links te melden */
.rubrieken-nog{margin-top:24px}
.rubrieken-nog ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rubrieken-nog a{display:inline-block;font:700 14px var(--sans);color:var(--teal-deep);
  text-decoration:none;border:1.5px solid var(--line);padding:8px 18px;border-radius:999px}
.rubrieken-nog a:hover{border-color:var(--teal-deep)}
.berichteinde{margin-top:26px;font-size:14px;color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{background:var(--voet-achter);color:#C6D1C8;margin-top:64px;
  border-top:3px solid var(--teal)}
.site-footer .band-loos{margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;
  padding-top:46px;padding-bottom:38px}
.site-footer h4{font:800 16px var(--sans);color:var(--teal-bright);margin:0 0 12px}
.site-footer p{font-size:14px;margin:0;max-width:40ch}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:7px 0}
.site-footer a{color:#C6D1C8;text-decoration:none;font-size:14.5px}
.site-footer a:hover{color:var(--teal-bright)}
.footer-basis{border-top:1px solid #33413B;padding:16px 0 22px;
  font-size:12.5px;color:#8FA398}
.footer-basis a{color:#8FA398;text-decoration:underline}

/* ---------- contactpagina ---------- */
.contact-details{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.contact-item{display:flex;align-items:center;gap:10px;background:var(--soft);
  border-radius:999px;padding:10px 20px;font-weight:600;font-size:15px;
  color:var(--ink);text-decoration:none}
.contact-item:hover{background:var(--line)}
.statform{max-width:640px;background:var(--soft);border-radius:var(--r);
  padding:28px 30px;margin-top:26px}
.statform label{display:block;font:700 14px var(--sans);margin:16px 0 6px}
.statform label:first-child{margin-top:0}
.statform label .verplicht{color:var(--teal-deep);font-weight:400}
.statform input,.statform textarea,.statform select{
  font:400 16px var(--sans);width:100%;padding:11px 14px;color:var(--ink);
  background:var(--veld);border:2px solid var(--line);border-radius:10px}
.statform input:focus,.statform textarea:focus,.statform select:focus{
  border-color:var(--teal-deep);outline:none}
.statform textarea{min-height:150px;resize:vertical}
.statform .aantal{float:right;font:600 12.5px var(--sans);color:var(--muted)}
.statform button{margin-top:20px;font:700 16px var(--sans);padding:12px 28px;
  cursor:pointer;border:2px solid var(--teal-deep);background:var(--teal-deep);
  color:var(--knop-tekst);border-radius:999px}
.statform button:hover{background:var(--green-2);border-color:var(--green-2)}
.veldfout{border-color:#B0473C!important}
.formfout{background:#F9E4E1;border-radius:10px;padding:14px 18px;margin-bottom:8px}
.formfout p{margin:4px 0;font-size:15px;color:#7A2E26}
.formok{background:#E3F3EE;border:1px solid #BEE0D6;border-radius:14px;
  padding:28px 30px;margin-top:26px}
.formok h2{margin:0 0 6px;font-size:19px;color:var(--green)}
.formok p{margin:0;color:var(--tekst-2)}
.hi-verstopt{position:absolute!important;left:-9999px!important;
  width:1px;height:1px;overflow:hidden}   /* honeypot: alleen robots vullen dit */

/* tekstpagina's met instelbare tekst (privacy, disclaimer); de kolombreedte
   komt van .wrap.nauw, zodat kop, tekst en links dezelfde rand volgen */
.privacy-tekst,.disclaimer-tekst{margin-top:30px}
.privacy-tekst h2,.disclaimer-tekst h2{font:800 21px var(--sans);letter-spacing:-.01em;margin:30px 0 8px}
.privacy-tekst p,.disclaimer-tekst p{margin:0 0 14px}
.privacy-tekst ul,.disclaimer-tekst ul{margin:0 0 14px;padding-left:22px}
.privacy-tekst li,.disclaimer-tekst li{margin:4px 0}

/* ---------- delen (onder een bijdrage; geen externe widgets/trackers) ---------- */
.deel-balk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:2.2em;padding-top:16px;border-top:1px solid var(--line)}
.deel-balk .deel-label{font:600 13.5px var(--sans);color:var(--muted)}
.deel-balk a,.deel-balk button{font:700 13.5px var(--sans);cursor:pointer;
  text-decoration:none;border:1.5px solid var(--line);background:var(--bg);
  color:var(--ink);padding:8px 16px;border-radius:999px}
.deel-balk a:hover,.deel-balk button:hover{border-color:var(--teal-deep);color:var(--teal-deep)}

/* ---------- terug naar boven (artikelpagina's) ---------- */
.naar-boven{position:fixed;right:20px;bottom:20px;z-index:80;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--green);color:#FFF;text-decoration:none;
  font-size:19px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.naar-boven:hover{background:var(--green-2)}

/* ---------- responsive ----------
   NA alle basiselementen geplaatst: media-queryregels winnen op gelijke
   specificiteit enkel als ze ná hun basisstijl in dit bestand staan. */
@media (max-width:1000px){
  .grid{grid-template-columns:1fr 1fr}
  .cover-inner{grid-template-columns:1fr}
  .cover-beeld{min-height:250px;order:-1}
  /* hero-tekst loopt vanaf de éénkoloms-cover over de ganse breedte */
  .cover-tekst p{max-width:none}
  .tegels{grid-template-columns:1fr 1fr}
  .lijst{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  /* bijdragepagina: de zijkolom verdwijnt en de leeskolom (66ch) wordt
     gecentreerd zodat de tekst op kleinere schermen de volle breedte heeft */
  .artikel-layout{grid-template-columns:minmax(0,1fr)}
  .zijkolom{display:none}
  .artikel-tekst{margin:0 auto}
}
@media (max-width:850px){
  /* zodra de hamburgermenu actief is, staan Alle bijdragen en Contact
     onderin het paneel en verdwijnen ze uit de topbalk (zonder JavaScript
     tóch zichtbaar: de noscript-variant zet ze in de wrappende nav-rij) */
  .topbar a{display:none}
  .header-inner{gap:12px 16px}
  /* hamburger-knop rechtsboven */
  .menu-knop{display:flex;order:4;flex:none;flex-direction:column;
    justify-content:center;gap:5px;width:44px;height:40px;padding:0 11px;
    margin:0;cursor:pointer;background:var(--bg);
    border:2px solid var(--line);border-radius:10px}
  .menu-knop:hover{border-color:var(--teal-deep)}
  .menu-knop .menu-balk{display:block;width:100%;height:2.5px;
    background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .18s ease}
  /* het icoon schuift uit elkaar tot een kruisteken terwijl het menu open is */
  .site-header.menu-open .menu-knop .menu-balk:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .site-header.menu-open .menu-knop .menu-balk:nth-child(2){opacity:0}
  .site-header.menu-open .menu-knop .menu-balk:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  /* de navigatie verdwijnt uit de koprij en wordt een uitklappaneel
     onder de sticky header (absolute binnen de gepositioneerde header) */
  .main-nav{display:none}
  .site-header.menu-open .main-nav{display:flex;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;flex-wrap:nowrap;gap:2px;margin-left:0;overflow:visible;
    padding:10px 22px 16px;background:var(--bg);
    border-bottom:2px solid var(--teal);box-shadow:0 14px 28px rgba(23,33,30,.14)}
  .main-nav a{padding:12px 16px;border-radius:10px;font-size:16px}
  .main-nav a[aria-current="page"]{background:var(--green);color:var(--huid-tekst)}
  /* de topbalk-links staan onderin het paneel, na een scheidingslijntje */
  .site-header.menu-open .main-nav .nav-meer{display:block;margin-top:10px;
    padding-top:12px;border-top:1px solid var(--line)}
  .search{flex:1}
  .search input{width:100%}
  .brand-name{font-size:20px}
}
@media (max-width:680px){
  .grid,.tegels,.footer-grid{grid-template-columns:1fr}
  .cover-tekst{padding:26px 22px}
  .cover-tekst h1{font-size:27px}
  .rubriek-kop{padding:26px 22px}
  .rubriek-kop h1{font-size:29px}
  .tegel-artikel{grid-template-columns:120px 1fr}
  .artikel-kop h1{font-size:30px}
  .artikel-tekst p{font-size:16.5px}
  .artikel-layout{gap:40px}
}

/* ---------- donkere modus ----------
   Standaard is de site LICHT. De bezoeker kiest bovenaan: Licht, Donker
   of Auto (volgt de systeeminstelling). De keuze staat onthouden zonder
   cookies (lokaal in de browser). De donkere waarden staan hier twee keer:
   één keer voor de expliciete keuze "donker", één keer binnen de media-
   query voor "auto" met een donker ingesteld systeem.
   De groene vlakken (cover, rubriek-kop, voet) en de meeste knoppen blijven
   onveranderd: donkergroen werkt op een donkere achtergrond net zo goed. */
:root[data-uitscherm="donker"]{
  color-scheme:dark;
  --bg:#101B18;
  --soft:#182723;
  --ink:#E7EEE9;
  --muted:#93A69E;
  --line:#25332E;
  --tekst:#CBD6D0;
  --tekst-2:#B4C2BA;
  --veld:#16221E;
  --topbar-tekst:#07241F;
  --huid-tekst:#101B18;
  --knop-tekst:#07241F;
  --demo-bg:#3A3113;
  --demo-tekst:#E4D28A;
  --voet-achter:#0D1714;
  --teal:#12B5A8;
  --teal-deep:#54C8BC;
}
@media (prefers-color-scheme:dark){
  :root[data-uitscherm="auto"]{
    color-scheme:dark;
    --bg:#101B18;
    --soft:#182723;
    --ink:#E7EEE9;
    --muted:#93A69E;
    --line:#25332E;
    --tekst:#CBD6D0;
    --tekst-2:#B4C2BA;
    --veld:#16221E;
    --topbar-tekst:#07241F;
    --huid-tekst:#101B18;
    --knop-tekst:#07241F;
    --demo-bg:#3A3113;
    --demo-tekst:#E4D28A;
    --voet-achter:#0D1714;
    --teal:#12B5A8;
    --teal-deep:#54C8BC;
  }
}