/* Tandartspraktijk Stassen - voorstel moderne website
   Kleuren afgeleid van de oude site: het hemelsblauw van de kop (#18aee8) en het blauwgrijs (#badbda),
   in een rustiger, donkerder tint voor knoppen en tekst. Geen geel. */

@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
/* Reserve-lettertype met nagemeten maten, zodat de tekst niet verspringt als het lettertype binnenkomt */
@font-face { font-family: 'Inter-reserve'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; }

:root {
  --hoofd: #0b7fb0;        /* knoppen en accenten, blauw (contrast met wit 4,6:1) */
  --hoofd-donker: #086690; /* links, actief menu, accentwoord */
  --hoofd-licht: #e2f3fb;  /* lichtblauw: grote cirkel, actief menu, iconen */
  --kopkleur: #1c2f3a;     /* koppen, logonaam, groot telefoonnummer */
  --donker: #1c2f3a;       /* voet, spoedkaart (donker leisteenblauw) */
  --creme: #f3f8f9;
  --zand: #e8f0f1;
  --accent: #18aee8;       /* het blauw van de oude site, alleen decoratief */
  --inkt: #1e2a30;
  --grijs: #56656d;
  --rand: #d9e5e8;
  --wit: #fff;
  --tweede-licht: #d3e8e7; /* blauwgrijs van de oude site: tweede cirkel, markering, afwisselende iconen */
  --tweede-donker: #2f5856;
  --melding: #e2f3fb;
  --op-donker: #e4eef2;    /* tekst op de donkere vlakken */
  --op-donker-zacht: #c3d3da;
  --op-donker-stil: #93a8b2;
  --accent-op-donker: #7fd3f4;
  --accent-op-donker-vlak: rgba(127, 211, 244, .15);
  --schaduw-rgb: 28, 47, 58;
  --kop: 'Inter', 'Inter-reserve', Arial, sans-serif;
  --tekst: 'Inter', 'Inter-reserve', Arial, sans-serif;
  --rond: 16px;
  --rond-klein: 10px;
  --schaduw: 0 1px 2px rgba(var(--schaduw-rgb), .06), 0 8px 26px rgba(var(--schaduw-rgb), .08);
  --breed: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--wit); color: var(--inkt); font: 400 16.5px/1.65 var(--tekst); }
/* Voet onderaan het scherm bij korte pagina's; bij lange pagina's gewoon na de inhoud */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--hoofd-donker); text-underline-offset: 3px; }
a:hover { color: var(--inkt); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--kop); font-weight: 600; line-height: 1.25; margin: 0 0 .55em; color: var(--kopkleur); letter-spacing: -.015em; }
/* Koppen klein en rustig */
h1 { font-size: clamp(1.55rem, 1.3rem + 1vw, 1.95rem); }
h2 { font-size: clamp(1.25rem, 1.15rem + .5vw, 1.45rem); }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
strong { font-weight: 600; }
.overslaan { position: absolute; left: 16px; top: -60px; background: var(--inkt); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.overslaan:focus { top: 12px; color: #fff; }

.wrap { width: min(100% - 32px, var(--breed)); margin-inline: auto; }
.smal { max-width: 760px; }
.sectie { padding: clamp(28px, 4vw, 52px) 0; }
.sectie + .sectie { padding-top: 0; }
.sectie-creme { background: var(--creme); }
.sectie-creme + .sectie, .sectie + .sectie-creme { padding-top: clamp(28px, 4vw, 52px); }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px;
  font: 600 .95rem/1.2 var(--tekst); text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.knop svg { width: 18px; height: 18px; flex: none; }
.knop-hoofd { background: var(--hoofd); color: #fff; }
.knop-hoofd:hover { background: var(--hoofd-donker); color: #fff; }
.knop-licht { background: #fff; color: var(--inkt); border-color: var(--rand); }
.knop-licht:hover { border-color: var(--hoofd); color: var(--hoofd); }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.pijl-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.pijl-link::after { content: '→'; transition: transform .2s; }
.pijl-link:hover::after { transform: translateX(4px); }

/* Kop en menu */
.kop {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--rand); transition: box-shadow .2s;
}
.kop::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, var(--hoofd) 0 70%, var(--accent) 70% 100%); }
.kop.gescrold { box-shadow: 0 4px 18px rgba(var(--schaduw-rgb), .07); }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--kopkleur); }
.logo svg { width: 44px; height: 44px; flex: none; }
.logo-naam { font: 600 1.22rem/1.1 var(--kop); }
.logo-naam small { display: block; font: 400 .78rem/1.3 var(--tekst); color: var(--grijs); letter-spacing: .04em; margin-top: 2px; }
.logo:hover { color: var(--kopkleur); }
.hoofdmenu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.hoofdmenu a {
  display: block; padding: 9px 13px; border-radius: 999px; text-decoration: none; color: var(--inkt);
  font: 400 .95rem/1 var(--tekst); transition: background .2s, color .2s;
}
.hoofdmenu a:hover { background: var(--zand); color: var(--inkt); }
.hoofdmenu a[aria-current="page"] { background: var(--hoofd-licht); color: var(--hoofd-donker); font-weight: 600; }
.menu-knop {
  display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--rand); background: #fff; cursor: pointer;
  align-items: center; justify-content: center; color: var(--inkt);
}
.menu-knop svg { width: 22px; height: 22px; }
.menu-knop .sluit { display: none; }
.menu-knop[aria-expanded="true"] .open-icoon { display: none; }
.menu-knop[aria-expanded="true"] .sluit { display: block; }
@media (max-width: 900px) {
  .menu-knop { display: inline-flex; }
  .hoofdmenu {
    position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--rand);
    box-shadow: 0 18px 30px rgba(var(--schaduw-rgb), .08); display: none; padding: 8px 16px 18px;
  }
  .hoofdmenu.open { display: block; }
  .hoofdmenu ul { flex-direction: column; }
  .hoofdmenu a { padding: 13px 16px; border-radius: 12px; font-size: 1.02rem; }
}
@media (max-width: 380px) { .logo-naam small { display: none; } }

/* Homepage */
.boventitel {
  display: inline-block; font: 600 .78rem/1 var(--tekst); letter-spacing: .14em; text-transform: uppercase;
  color: var(--hoofd-donker); margin-bottom: 12px;
}
.welkom { background: linear-gradient(180deg, var(--creme) 0%, #fff 100%); padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 40px); overflow: hidden; }
.welkom .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
/* Kop valt op door het accent, niet door grootte */
.welkom h1 span { color: var(--hoofd-donker); background: linear-gradient(transparent 62%, var(--tweede-licht) 62% 92%, transparent 92%); padding: 0 2px; }
.welkom em { font-style: italic; }
.welkom .knoppen { margin-top: 22px; }
.feiten { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--grijs); font-size: .92rem; }
.feiten li { display: flex; align-items: center; gap: 8px; }
.feiten strong { color: var(--inkt); }
.boventitel-groot { font-size: .92rem; }
/* Gegevens in een blok: klein icoon, daarachter de link op één regel */
.contactrij { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .95rem; }
.contactrij li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.contactrij svg { width: 17px; height: 17px; flex: none; color: var(--hoofd-donker); }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.feiten svg { width: 18px; height: 18px; color: var(--hoofd-donker); flex: none; }
/* Foto met speelse vormen erachter */
.welkom-foto { position: relative; justify-self: center; width: 100%; max-width: 440px; }
.welkom-foto::before, .welkom-foto::after { content: ''; position: absolute; border-radius: 50%; z-index: 0; }
.welkom-foto::before { width: 72%; aspect-ratio: 1; right: -14%; top: -12%; background: var(--hoofd-licht); }
.welkom-foto::after { width: 30%; aspect-ratio: 1; left: -9%; bottom: -8%; background: var(--tweede-licht); }
.welkom-foto img { position: relative; z-index: 1; width: 100%; border-radius: 22px; box-shadow: var(--schaduw); aspect-ratio: 3 / 2; object-fit: cover; }
.groot-nummer { font: 600 1.35rem/1.2 var(--kop); color: var(--kopkleur); text-decoration: none; white-space: nowrap; }
a.groot-nummer:hover { color: var(--hoofd-donker); text-decoration: underline; }
.knop-rand { border-color: var(--hoofd); color: var(--hoofd); background: transparent; }
.knop-rand:hover { background: var(--hoofd); color: #fff; }
@media (max-width: 820px) {
  .welkom .wrap { grid-template-columns: 1fr; }
  .welkom-foto { order: -1; max-width: 360px; margin: 10px 0 8px; }
}

/* Kaarten met icoon */
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.kaart { background: #fff; border: 1px solid var(--rand); border-radius: var(--rond); padding: 24px; display: flex; flex-direction: column; gap: 4px; transition: box-shadow .2s, border-color .2s, transform .2s; }
.kaart:hover { box-shadow: var(--schaduw); border-color: transparent; transform: translateY(-2px); }
.kaart-icoon { width: 46px; height: 46px; border-radius: 50%; background: var(--hoofd-licht); color: var(--hoofd-donker); display: grid; place-items: center; margin-bottom: 10px; }
.kaart:nth-child(2n) .kaart-icoon { background: var(--tweede-licht); color: var(--tweede-donker); }
.kaart-icoon svg { width: 22px; height: 22px; }
.kaart h3 { margin-bottom: 4px; }
.kaart p { color: var(--grijs); font-size: .95rem; margin: 0 0 10px; }
.kaart .tijden { margin: 0; }
.kaart .pijl-link, .kaart .groot-nummer { margin-top: auto; }
/* Kaarten op de contactpagina: drie naast elkaar, koppen even groot als op de homepage */
.kaarten-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.kaart h2.kaart-kop { font-size: 1.08rem; margin-bottom: 4px; }
.kaart p.adres { color: var(--inkt); }
.kaart p.adres + .groot-nummer { margin-top: 0; }
.kaart .tijden { font-size: .92rem; margin-bottom: 8px; }
.kaart .tijden caption { font-size: .9rem; }
/* Route-knop vast onder het adres, niet naar beneden geduwd */
.kaart .route-knop { align-self: flex-start; margin-top: 16px; }
.kaart .groot-nummer + .route-knop { margin-top: 16px; }
.kaart-spoed { background: var(--donker); border-color: var(--donker); color: var(--op-donker); }
.kaart-spoed h3 { color: #fff; }
.kaart-spoed p { color: var(--op-donker-zacht); }
.kaart-spoed .kaart-icoon { background: var(--accent-op-donker-vlak); color: var(--accent-op-donker); }
.kaart-spoed .pijl-link { color: var(--accent-op-donker); }

/* Foto + tekst */
.duo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.duo .kleine-foto img { width: 200px; }
@media (max-width: 700px) { .duo { grid-template-columns: 1fr; } .duo .kleine-foto img { width: 160px; } }
/* Groot rond icoon met een kleiner cirkeltje ernaast, in plaats van een foto */
.duo-icoon {
  position: relative; width: 180px; aspect-ratio: 1; border-radius: 50%; background: var(--hoofd-licht);
  color: var(--hoofd); display: grid; place-items: center;
}
.duo-icoon::after { content: ''; position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--tweede-licht); right: -6%; bottom: 2%; z-index: 0; }
.duo-icoon svg { width: 46%; height: 46%; position: relative; z-index: 1; }
@media (max-width: 700px) { .duo-icoon { width: 110px; } }

/* Twee of drie blokken naast elkaar */
.rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.blok { background: var(--creme); border: 1px solid var(--rand); border-radius: var(--rond); padding: 24px; }
.blok h2, .blok h3 { margin-bottom: 10px; }
.blok p:last-child { margin-bottom: 0; }
.blok-donker { background: var(--donker); border-color: var(--donker); color: var(--op-donker); }
.blok-donker h2, .blok-donker h3 { color: #fff; }
.blok-donker a { color: #fff; }
.blok-donker .groot-nummer { color: var(--accent-op-donker); }
.blok-foto { padding: 0; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.blok-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blok-foto .blok-tekst { padding: 20px 24px 24px; }

/* Openingstijden */
.tijden { width: 100%; border-collapse: collapse; font-size: .95rem; margin-bottom: 12px; }
.tijden caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.tijden th, .tijden td { text-align: left; padding: 6px 0; border-bottom: 1px dashed var(--rand); vertical-align: top; font-weight: 400; }
.tijden th { color: var(--grijs); padding-right: 12px; }
.tijden td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tijden tr:last-child th, .tijden tr:last-child td { border-bottom: 0; }
.tijden .vandaag th, .tijden .vandaag td { color: var(--hoofd-donker); font-weight: 600; }

/* Keurmerken */
.keurmerken { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.keurmerken a {
  display: flex; align-items: center; gap: 18px; padding: 16px 20px; background: #fff; border: 1px solid var(--rand);
  border-radius: var(--rond); text-decoration: none; color: var(--inkt); transition: box-shadow .2s, border-color .2s;
}
.keurmerken a:hover { box-shadow: var(--schaduw); border-color: transparent; color: var(--inkt); }
.keurmerken img { width: 120px; height: 44px; object-fit: contain; object-position: left center; flex: none; }
/* BIG-register: de hele balk met tekst, anders is hij niet te lezen */
.keurmerken a.keurmerk-big { flex-direction: column; align-items: flex-start; gap: 10px; }
.keurmerken .keurmerk-big img { width: 100%; max-width: 360px; height: auto; border: 1px solid #c8c8c8; }
.keurmerken strong { display: block; font-size: .95rem; }
.keurmerken span { font-size: .87rem; color: var(--grijs); }

/* Paginakop (subpagina's) */
.paginakop {
  background: var(--creme); padding: clamp(28px, 4.5vw, 48px) 0 clamp(24px, 4vw, 40px); border-bottom: 1px solid var(--rand);
  position: relative; overflow: hidden;
}
/* Twee zachte cirkels rechts: groen groot, goud klein */
.paginakop::before, .paginakop::after { content: ''; position: absolute; border-radius: 50%; z-index: 0; }
.paginakop::before { right: -70px; top: -130px; width: 340px; height: 340px; background: var(--hoofd-licht); }
.paginakop::after { right: 230px; bottom: -70px; width: 130px; height: 130px; background: var(--tweede-licht); opacity: .8; }
.paginakop .wrap { position: relative; z-index: 1; }
.paginakop h1 { margin-bottom: .25em; }
.paginakop p { color: var(--grijs); margin: 0; max-width: 620px; }
@media (max-width: 700px) {
  .paginakop::before { right: -120px; top: -150px; width: 260px; height: 260px; }
  .paginakop::after { right: 60px; bottom: -80px; width: 100px; height: 100px; }
}

/* Inhoud met zijkolom */
.met-zijkant { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 5vw, 56px); align-items: start; }
.zijkant { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 900px) { .met-zijkant { grid-template-columns: 1fr; } }
.tekst h2 { margin-top: 1.5em; }
.tekst h2:first-child { margin-top: 0; }
.tekst ul { padding-left: 1.2em; }
.tekst li { margin-bottom: .3em; }
.tekst li::marker { color: var(--hoofd-donker); }
.melding { border-left: 4px solid var(--accent); background: var(--melding); padding: 14px 18px; border-radius: 0 var(--rond-klein) var(--rond-klein) 0; margin: 0 0 1.2em; }
.melding p:last-child { margin: 0; }

/* Team: elke persoon in een kader, met een rond letterteken in plaats van een foto */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-bottom: 1.6em; }
.persoon { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--rand); border-radius: var(--rond); padding: 22px; transition: box-shadow .2s, border-color .2s; }
.persoon:hover { box-shadow: var(--schaduw); border-color: transparent; }
.persoon-letter {
  flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--hoofd-licht); color: var(--hoofd);
  display: grid; place-items: center; font: 600 1.4rem/1 var(--kop);
}
.persoon:nth-child(2n) .persoon-letter { background: var(--tweede-licht); color: var(--tweede-donker); }
.persoon h3 { margin: 4px 0 0; }
.persoon .functie { color: var(--hoofd-donker); font-weight: 600; font-size: .92rem; margin: 0 0 8px; }
.persoon dl { margin: 0 0 10px; font-size: .92rem; color: var(--grijs); display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.persoon dt { font-weight: 600; color: var(--inkt); }
.persoon dd { margin: 0; }
.persoon p:not(.functie) { font-size: .95rem; color: var(--grijs); }
.persoon p:last-child { margin-bottom: 0; }

.team-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 8px; }
.team-4 .persoon { align-items: center; }
.team-4 .persoon .functie { margin: 0; }
.kaart .contactrij { margin-top: 10px; }

/* Foto's klein tonen */
.kleine-foto { margin: 0; }
.kleine-foto img { border-radius: var(--rond-klein); box-shadow: var(--schaduw); }
.kleine-foto figcaption { font-size: .88rem; color: var(--grijs); font-style: italic; margin-top: 10px; }

/* Logo's van organisaties */
.logo-link { display: inline-block; padding: 10px 12px; background: #fff; border: 1px solid var(--rand); border-radius: var(--rond-klein); margin-bottom: 12px; }
.logo-link:hover { border-color: var(--hoofd); }
.logo-link img { height: 64px; width: auto; }
.logo-link.plat img { height: 34px; }
.big-banner { display: inline-block; margin-top: 8px; }
.big-banner img { width: 340px; border: 1px solid #c8c8c8; }

/* Pdf in een venster over de pagina */
.pdf-venster {
  width: min(1000px, 94vw); height: 90vh; max-height: 90vh; padding: 0; border: 0; border-radius: var(--rond);
  overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.pdf-venster[open] { display: flex; flex-direction: column; }
.pdf-venster::backdrop { background: rgba(20, 26, 24, .7); }
.pdf-balk { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 22px; border-bottom: 1px solid var(--rand); background: var(--creme); }
.pdf-titel { font: 600 1rem var(--kop); flex: 1; }
.pdf-nieuw { font-size: .9rem; }
.pdf-sluit { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rand); background: #fff; cursor: pointer; font-size: 1rem; color: var(--inkt); }
.pdf-venster iframe { flex: 1; width: 100%; border: 0; background: #525659; }

/* Contact */
.gegevens { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.gegevens li { display: flex; gap: 12px; align-items: flex-start; }
.gegevens svg { width: 20px; height: 20px; color: var(--hoofd-donker); flex: none; margin-top: 3px; }
.gegevens a { text-decoration: none; }
.gegevens a:hover { text-decoration: underline; }
.route-knop { margin-top: 18px; }
.extern-wrap {
  position: relative; border-radius: var(--rond); overflow: hidden; background: var(--zand); min-height: 360px;
  display: grid; place-items: center; text-align: center;
}
.extern-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.extern-vraag { padding: 28px; max-width: 440px; }
.extern-vraag p { color: var(--grijs); font-size: .95rem; }

/* Voet */
.voet { background: var(--donker); color: var(--op-donker-zacht); font-size: .93rem; padding: 48px 0 0; }
.voet a { color: #fff; text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.voet h2 { color: #fff; font: 600 .82rem/1.2 var(--tekst); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.voet-grid { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr 1fr; gap: 32px; }
.voet .logo { color: #fff; margin-bottom: 14px; }
.voet .logo-naam small { color: var(--op-donker-stil); }
.voet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.voet .tijden th, .voet .tijden td { border-color: rgba(255, 255, 255, .14); color: var(--op-donker-zacht); padding: 4px 0; }
.voet .tijden .vandaag th, .voet .tijden .vandaag td { color: var(--accent-op-donker); }
.voet-onder {
  border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 40px; padding: 18px 0; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 12px; font-size: .85rem; color: var(--op-donker-stil); padding-right: 56px;
}
.voet-onder a { color: var(--op-donker-zacht); }
.voet-onder button { background: none; border: 0; color: var(--op-donker-zacht); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
@media (max-width: 900px) { .voet-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .voet-grid { grid-template-columns: 1fr; } }

/* Belknop onderaan op telefoon */
.belbalk { display: none; }
@media (max-width: 720px) {
  .belbalk { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; }
  .belbalk a { flex: 1; justify-content: center; box-shadow: 0 8px 24px rgba(var(--schaduw-rgb), .25); }
  body { padding-bottom: 72px; }
}

/* Cookiemelding */
.cookie-balk { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: none; justify-content: center; }
.cookie-balk.zichtbaar { display: flex; }
.cookie-inhoud {
  background: #fff; border-radius: var(--rond); box-shadow: 0 12px 40px rgba(0, 0, 0, .2); padding: 18px 22px;
  max-width: 760px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: .93rem;
}
.cookie-inhoud p { margin: 0; flex: 1 1 320px; }
.cookie-knoppen { display: flex; gap: 10px; }

/* Naar boven */
.naar-boven {
  position: fixed; right: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; z-index: 30;
  background: var(--donker); color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s;
  display: grid; place-items: center;
}
.naar-boven svg { width: 20px; height: 20px; }
.naar-boven.zichtbaar { opacity: .85; pointer-events: auto; }
.naar-boven:hover { opacity: 1; }
@media (max-width: 720px) { .naar-boven { bottom: 80px; } }

/* 404 */
.niet-gevonden { text-align: center; padding: clamp(40px, 8vw, 90px) 0; }
.niet-gevonden img { width: 140px; margin: 0 auto 20px; }
.niet-gevonden .knoppen { justify-content: center; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media print { .kop, .voet, .belbalk, .cookie-balk, .naar-boven { display: none !important; } }