@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
:root{
  --accent:#4b3fa6; --accent-licht:#786fbc; --accent-donker:#3a3181;
  --kop-bg:#3f358b; --kop-tekst:#ffffff; --kop-zacht:#aeaace;
  --sluier:#171434; --held-tekst:#ffffff; --held-tag:#cccccf;
  --ink:#12171d; --ink-soft:#5b6672; --line:#e3e7ec;
  --paper:#ffffff; --paper-tint:#f6f8fa; --knop-tekst:#ffffff;
  --knop-bg:#4b3fa6; --knop-hover:#423792;
  --radius:0; --radius-lg:0; --knop-radius:2px;
  --kopfont:"Manrope","Segoe UI",system-ui,sans-serif; --leesfont:"Manrope","Segoe UI",system-ui,sans-serif;
  --kopgewicht:800; --kopspatie:-.025em; --labelspatie:.09em;
  --kaart-bg:var(--paper); --kaart-bg-tint:var(--paper); --kaart-rand:1px solid var(--line); --kaart-schaduw:none;
  --opening-schaal:0.78;
  --shadow:0 1px 2px rgba(15,23,32,.04),0 10px 30px rgba(15,23,32,.07);
  --maxw:1180px; --meet:68ch; --sec-pad:clamp(56px,7vw,96px);
  --kop-lijn:color-mix(in srgb,var(--kop-tekst) 14%,transparent);
  --monogram:color-mix(in srgb,var(--accent) 22%,var(--paper-tint));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--leesfont);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--kopfont);letter-spacing:var(--kopspatie);font-weight:var(--kopgewicht);text-wrap:balance}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.ph{background:var(--paper-tint);position:relative;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.eyebrow{display:block;margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:var(--labelspatie);text-transform:uppercase;color:var(--accent-donker)}
.eyebrow::before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--accent);margin:0 0 12px}
.btn{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:12px 24px;border-radius:var(--knop-radius);background:var(--knop-bg);color:var(--knop-tekst);font-weight:700;font-size:15px;line-height:1.2;transition:background .16s ease,transform .16s ease}
.btn:hover{background:var(--knop-hover);transform:translateY(-1px)}
.acties{margin:28px 0 0}

/* EEN kopbalk: merk links, de bedrijfspagina's rechts. De lijst WRAPT en schuift niet: als
   flexbuur van het merk kon zij niet krimpen (min-width:auto) en duwde een menu van elf
   pagina's de hele pagina 665px opzij. Op mobiel valt het menu onder het merk. */
.top{background:var(--kop-bg);color:var(--kop-tekst);border-bottom:1px solid var(--kop-lijn)}
.top__bar{display:flex;align-items:center;justify-content:space-between;gap:10px 28px;padding-block:12px;min-height:70px}
.merk{display:inline-flex;align-items:center;gap:11px;min-width:0;flex:none;max-width:100%}
.merk__teken{display:none;width:38px;height:38px;flex:none;border-radius:var(--radius);background:var(--knop-bg);color:var(--knop-tekst);place-items:center;font-family:var(--kopfont);font-weight:800;font-size:17px}
.merk__naam{font-family:var(--kopfont);font-size:clamp(18px,1.6vw,22px);font-weight:var(--kopgewicht);letter-spacing:var(--kopspatie);line-height:1.15;overflow-wrap:anywhere}
.merk__naam::first-letter,.held h1::first-letter{text-transform:uppercase}
.merk__punt{display:block;width:9px;height:9px;flex:none;background:var(--accent);border-radius:2px;transform:skewX(-12deg);margin-top:4px}
.nav{min-width:0}
.nav__list{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 4px;list-style:none;margin:0;padding:0}
/* de grens staat op de li: een route als paginatitel ("2018/10/02/...") maakt anders een
   menu-item van 400px en een gat in de regel ernaast */
.nav__list li{max-width:30ch;min-width:0}
.nav__list a{display:block;max-width:100%;padding:12px 13px;line-height:20px;border-radius:var(--radius);font-size:14.5px;font-weight:600;color:var(--kop-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .14s ease,color .14s ease}
.nav__list a::first-letter{text-transform:uppercase}
.nav__list a:hover{color:var(--kop-tekst);background:var(--kop-lijn)}
.nav__list a[aria-current="page"]{color:var(--kop-tekst);box-shadow:inset 0 -3px 0 var(--accent)}
@media(min-width:900px){.top{position:sticky;top:0;z-index:20}}

/* opening: de eigen foto van de site onder een sluier in de kopkleur, met een verloop erover;
   zonder foto een gecomponeerd vlak met een accentgloed en de initiaal als watermerk */
.held{position:relative;isolation:isolate;overflow:hidden;background:var(--sluier);color:var(--held-tekst);display:grid;align-items:end;min-height:min(calc(62vh * var(--opening-schaal)),calc(560px * var(--opening-schaal)))}
.held__beeld{position:absolute;inset:0;z-index:0;background:var(--sluier)}
.held__beeld img{width:100%;height:100%;object-fit:cover}
/* De dekking uit de variant geldt onverkort waar de tekst staat (de onderste 380px, meer
   dan het hoogste tekstblok); daarboven laat de sluier de helft door, zodat de eigen foto
   van de site zichtbaar blijft. Het contrast is op de volle dekking gemeten. */
.held__beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--sluier) 0,var(--sluier) 380px,color-mix(in srgb,var(--sluier) 50%,transparent) 100%);opacity:0.8}
.held::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0.22),rgba(0,0,0,0.42) 55%,rgba(0,0,0,0.68));pointer-events:none}
.held__letter{display:none}
.held:has(> .held__beeld:empty){min-height:calc(420px * var(--opening-schaal))}
.held:has(> .held__beeld:empty) .held__beeld{background:radial-gradient(70% 90% at 88% 0%,color-mix(in srgb,var(--accent) 36%,var(--sluier)),transparent 72%),var(--sluier)}
.held:has(> .held__beeld:empty) .held__beeld::after{display:none}
.held:has(> .held__beeld:empty) .held__letter{display:block;position:absolute;right:-.04em;bottom:-.3em;z-index:1;font-family:var(--kopfont);font-weight:var(--kopgewicht);font-size:min(44vw,520px);line-height:1;color:var(--held-tekst);opacity:.07;pointer-events:none;user-select:none}
/* width:100% is hier geen sierregel: als rasteritem met margin:0 auto (uit .wrap) rekt de
   kolom NIET mee, en stond de titel op zijn max-content-breedte -- 244px naast de kop. */
.held__in{position:relative;z-index:2;width:100%;padding:calc(88px * var(--opening-schaal)) 20px calc(66px * var(--opening-schaal))}
.held__tekst{text-align:left;max-width:min(100%,780px);margin-left:0;margin-right:0}
.held__streep{display:block;width:56px;height:5px;border-radius:3px;background:var(--accent);margin:0 0 24px}
.held__merk{display:none;width:54px;height:54px;border-radius:var(--radius);background:var(--knop-bg);color:var(--knop-tekst);place-items:center;font-family:var(--kopfont);font-weight:800;font-size:23px;margin:0 0 24px}
.held h1{margin:0 0 14px;font-size:clamp(36px,6vw,68px);line-height:1;max-width:16ch;margin-left:0;margin-right:0}
.held__tag{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:56ch;color:var(--held-tag);margin-left:0;margin-right:0;text-wrap:pretty}
.held__tag:empty{display:none}

/* secties met ritme: papier en tint wisselen volgens de variant, een haarlijn ertussen */
.sec{padding:var(--sec-pad) 0;position:relative}
.sec--tint{background:var(--paper-tint)}
.sec + .sec{border-top:1px solid var(--line)}
.sec__kop{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 32px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.sec__titel{min-width:0}
.sec__kop h1,.sec__kop h2{margin:0;font-size:clamp(26px,3.2vw,40px);line-height:1.08}
.sec__intro{color:var(--ink-soft);margin:12px 0 0;max-width:var(--meet);font-size:17px}
.sec__intro:empty{display:none}
/* een sectie zonder inhoud hoort niet als lege kop te blijven staan */
.sec:has(> .wrap > .raster:empty),.sec:has(> .wrap > .strook:empty),.sec:has(> .wrap > .voorpagina:empty){display:none}

/* kaarten als systeem: beeld op 3:2, zelfde randen, hover- en focustoestand; bedrijfspagina's
   genummerd met een leeslink, blogkaarten met rubriek en datum als meta */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:clamp(18px,2vw,26px)}
.raster--vast{grid-template-columns:repeat(auto-fill,minmax(216px,1fr));counter-reset:k}
.kaart{display:flex;flex-direction:column;position:relative;min-width:0;background:var(--kaart-bg);border:var(--kaart-rand);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--kaart-schaduw);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.sec--tint .kaart{background:var(--kaart-bg-tint)}
.kaart:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 40px -18px rgba(15,23,32,.3)}
.kaart__img{display:block;aspect-ratio:3/2;background:var(--paper-tint);position:relative;overflow:hidden}
.kaart__img img{transition:transform .5s ease}
.kaart:hover .kaart__img img{transform:scale(1.04)}
/* een leeg beeldvlak toont het palet met het monogram van de site, geen gat */
.kaart__img:empty{display:grid;place-items:center;background:linear-gradient(135deg,var(--paper-tint),var(--monogram))}
/* heeft GEEN kaart in het raster een beeld, dan zijn het tekstkaarten: een rij identieke
   monogramtegels (6milliardsdautres.be, 2026-09-20) is een placeholder, geen ontwerp */
.raster:not(:has(.kaart__img img)) .kaart__img{display:none}
.raster:not(:has(.kaart__img img)) .kaart{border-top:4px solid var(--accent)}
.kaart__img:empty::after{content:"3";font-family:var(--kopfont);font-weight:var(--kopgewicht);font-size:56px;line-height:1;color:color-mix(in srgb,var(--accent-donker) 42%,transparent)}
.kaart__body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px;min-width:0;flex:1}
.kaart__kop{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.kaart__kop:not(:has(> :not(:empty))){display:none}
.kaart__meta{font-size:11.5px;font-weight:800;letter-spacing:var(--labelspatie);text-transform:uppercase;color:var(--accent-donker)}
.kaart__datum{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.kaart__meta:empty,.kaart__datum:empty,.kaart__sam:empty{display:none}
.kaart__titel{display:block;font-family:var(--kopfont);font-size:clamp(18px,1.4vw,21px);font-weight:var(--kopgewicht);line-height:1.25;letter-spacing:var(--kopspatie);overflow-wrap:anywhere;text-wrap:pretty}
.kaart__titel::first-letter{text-transform:uppercase}
.kaart__sam{font-size:15px;line-height:1.55;color:var(--ink-soft);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kaart__lees{display:none;margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:700;color:var(--accent-donker)}
.kaart__lees::after{content:" \2192"}
.raster--vast .kaart{counter-increment:k}
.raster--vast .kaart__kop{display:none}
.raster--vast .kaart__body::before{content:counter(k,decimal-leading-zero);font-size:12px;font-weight:800;letter-spacing:var(--labelspatie);color:var(--accent-donker);font-variant-numeric:tabular-nums}
.raster--vast .kaart__lees{display:block}
/* kolommen op telling: auto-fill laat bij vier bedrijfspagina's in een driekolomsraster een
   wees staan (3+1, atthevilla.be en aiptlf2016.be, 2026-09-20) -- en vier is het gangbare aantal.
   Een raster van vier, zeven of acht krijgt vier kolommen, van zes of negen drie, van vijf of
   tien vijf smalle. Andere aantallen volgen de variant. */
@media(min-width:1000px){
  .raster--vast:has(> :nth-child(4):last-child),.raster--vast:has(> :nth-child(7):last-child),.raster--vast:has(> :nth-child(8):last-child){grid-template-columns:repeat(4,1fr)}
  .raster--vast:has(> :nth-child(6):last-child),.raster--vast:has(> :nth-child(9):last-child){grid-template-columns:repeat(3,1fr)}
  .raster--uitgelicht:has(> :nth-child(3):last-child){grid-template-columns:repeat(2,1fr)}
  .raster--uitgelicht:has(> :nth-child(5):last-child),.raster--uitgelicht:has(> :nth-child(9):last-child){grid-template-columns:repeat(4,1fr)}
  .raster--uitgelicht:has(> :nth-child(7):last-child),.raster--uitgelicht:has(> :nth-child(10):last-child){grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1200px){
  .raster--vast:has(> :nth-child(5):last-child),.raster--vast:has(> :nth-child(10):last-child){grid-template-columns:repeat(5,1fr)}
  .raster--vast:has(> :nth-child(5):last-child) .kaart__body,.raster--vast:has(> :nth-child(10):last-child) .kaart__body{padding:16px 16px 18px}
}
/* uitgelicht: het eerste van drie of meer berichten groter; een enkel bericht vult de rij */
@media(min-width:760px){
  .raster--uitgelicht > .kaart:first-child:nth-last-child(n+3),.raster--blog > .kaart:only-child{grid-column:1/-1;flex-direction:row;align-items:stretch}
  .raster--uitgelicht > .kaart:first-child:nth-last-child(n+3) .kaart__img,.raster--blog > .kaart:only-child .kaart__img{flex:0 0 52%;aspect-ratio:auto;min-height:340px}
  /* de tekstkolom bepaalt de hoogte: een staande foto rekte de kaart anders tot 900px (6milliardsdautres.be) */
  .raster--uitgelicht > .kaart:first-child:nth-last-child(n+3) .kaart__img img,.raster--blog > .kaart:only-child .kaart__img img{position:absolute;inset:0;width:100%;height:100%}
  .raster--uitgelicht > .kaart:first-child:nth-last-child(n+3) .kaart__body,.raster--blog > .kaart:only-child .kaart__body{justify-content:center;padding:34px 38px;gap:12px}
  .raster--uitgelicht > .kaart:first-child:nth-last-child(n+3) .kaart__titel,.raster--blog > .kaart:only-child .kaart__titel{font-size:clamp(24px,2.4vw,34px);line-height:1.12}
  .raster--uitgelicht > .kaart:first-child:nth-last-child(n+3) .kaart__sam,.raster--blog > .kaart:only-child .kaart__sam{font-size:16px;-webkit-line-clamp:4}
  .raster--blog:has(> .kaart:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
  /* een uitgelicht bericht zonder beeld: een smal monogramvlak, geen halve lege kaart */
  .raster--uitgelicht > .kaart:first-child:nth-last-child(n+3) .kaart__img:empty,.raster--blog > .kaart:only-child .kaart__img:empty{flex-basis:30%;min-height:240px}
}

/* rubrieken als chips in de sectiekop van het blog */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;max-width:100%}
.chips:empty{display:none}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:10px 15px;border:1px solid var(--line);border-radius:var(--knop-radius);background:var(--paper);font-size:13.5px;font-weight:650;line-height:1.3;color:var(--ink-soft);transition:border-color .14s ease,color .14s ease}
.chips a:hover{border-color:var(--accent);color:var(--accent-donker)}
.chips a[aria-current="page"]{border-color:var(--accent);color:var(--accent-donker)}

/* fotostrook uit de eigen media van de site, met een licht verspringend ritme */
.strook{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(10px,1.4vw,16px);align-items:start}
.strook img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg);background:var(--paper-tint)}
.strook img:nth-child(even){margin-top:24px}
/* zoveel kolommen als foto's: zes foto's in vijf kolommen lieten een wees staan
   (6milliardsdautres.be, 2026-09-20). De rastervariant begrenst het aantal (vijf of zes). */
.strook > :not(:nth-child(-n+6)){display:none}
.strook:has(> :nth-child(-n+3):last-child) img{aspect-ratio:3/2}
.strook:has(> :only-child) img{aspect-ratio:21/9;margin-top:0}

/* lopende tekst: de statische voorpagina en de artikelbody */
.tekst{font-family:var(--leesfont);font-size:17.5px;line-height:1.8}
.tekst > :first-child{margin-top:0}
.tekst h2,.tekst h3,.tekst h4{line-height:1.2}
.tekst h2{font-size:clamp(24px,2.4vw,30px);margin:40px 0 12px}
.tekst h3{font-size:clamp(20px,1.8vw,23px);margin:30px 0 8px}
.tekst h4,.tekst h5,.tekst h6{font-family:var(--kopfont);font-size:18px;margin:24px 0 6px}
.tekst p{margin:0 0 20px}
.tekst ul,.tekst ol{margin:0 0 20px;padding-left:26px}
.tekst li{margin-bottom:8px}
.tekst li::marker{color:var(--accent-donker)}
.tekst a{color:var(--accent-donker);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.tekst a:hover{text-decoration-thickness:2.5px}
.tekst img{border-radius:var(--radius-lg)}
.tekst figure{margin:30px 0}
.tekst figure img{width:100%;max-height:560px;object-fit:cover}
.tekst figcaption{font-size:14px;color:var(--ink-soft);margin-top:10px}
.tekst blockquote{margin:28px 0;padding:6px 0 6px 24px;border-left:4px solid var(--accent);font-size:1.1em}
.tekst table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px}
.tekst th,.tekst td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tekst th{font-weight:700;background:var(--paper-tint)}
.tekst hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.tekst pre,.tekst code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
/* de tekst van een statische voorpagina; leeg bij een blogvoorpagina en dan onzichtbaar */
.voorpagina{max-width:var(--meet);margin:0 auto}
.voorpagina:empty{display:none}
/* Leadalinea: bescheiden (1.1em), want CSS meet geen tekstlengte -- op 30jaarmusichall.be stond een
   eerste alinea van 700 tekens in 22px als een muur (r3, 2026-09-20). */
.voorpagina > p:first-of-type{font-size:1.1em;line-height:1.7;text-wrap:pretty}

/* artikel en pagina: getinte kopband met meta en titel, het beeld erover geschoven, leesbreedte */
.stuk__kop{background:var(--paper-tint);border-bottom:1px solid var(--line);padding:clamp(44px,6vw,80px) 0 clamp(40px,5vw,64px)}
.stuk__kop > .wrap,.stuk__in{max-width:860px}
.stuk__datum{margin:0 0 14px;font-size:12.5px;font-weight:700;letter-spacing:var(--labelspatie);text-transform:uppercase;color:var(--accent-donker)}
.stuk__datum:empty{display:none}
.stuk__titel{margin:0;font-size:clamp(30px,4.6vw,52px);line-height:1.05}
.stuk__in{padding-top:clamp(28px,4vw,48px);padding-bottom:var(--sec-pad)}
.stuk__beeld{margin:0 0 clamp(28px,4vw,44px);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow)}
.stuk__beeld:empty{display:none}
.stuk:has(.stuk__beeld:not(:empty)) .stuk__kop{padding-bottom:calc(clamp(40px,5vw,64px) + 140px)}
.stuk:has(.stuk__beeld:not(:empty)) .stuk__in{padding-top:0}
.stuk:has(.stuk__beeld:not(:empty)) .stuk__beeld{margin-top:-140px}
.stuk__body{max-width:var(--meet)}
.stuk__terug{margin:44px 0 0;padding-top:24px;border-top:1px solid var(--line);max-width:var(--meet)}
.terug{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--accent-donker)}
.terug::before{content:"\2190";margin-right:8px}
.terug:hover{text-decoration:underline;text-underline-offset:3px}

.paginering{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:40px 20px 0;font-weight:650}
.paginering a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:var(--knop-radius);background:var(--paper);color:var(--accent-donker)}
.paginering a:hover{border-color:var(--accent)}
.paginering__stand{color:var(--ink-soft);font-variant-numeric:tabular-nums}

.nietgevonden{min-height:52vh;display:grid;align-items:center;text-align:center}
.nietgevonden .eyebrow::before{margin-left:auto;margin-right:auto}
.nietgevonden .sec__intro{margin:14px auto 0}

/* de regio `regel` is verplicht in het contract; de voorpagina gebruikt hem niet (zie boven) */
.regel{display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:center;padding:11px 14px;border-radius:var(--radius)}
.regel:hover{background:var(--paper-tint)}
.regel__duim{width:84px;height:56px;border-radius:var(--radius)}
.regel__duim:empty{background:none}
.regel__titel{font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.regel__datum{margin-left:auto;font-size:12.5px;color:var(--ink-soft);white-space:nowrap}

/* voet: dezelfde kleur als de kop, twee menu's naast het merk, smalle onderregel */
.voet{background:var(--kop-bg);color:var(--kop-zacht);padding:clamp(48px,6vw,72px) 0 28px}
.voet__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;align-items:start}
.voet__kolom:has(> ul:empty){display:none}
.voet h3{margin:0 0 14px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:var(--labelspatie);color:var(--kop-tekst)}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px;overflow-wrap:anywhere}
.voet ul:has(> li:nth-child(9)){grid-template-columns:1fr 1fr;gap:9px 18px}
.voet li a{display:inline-block;padding:2px 0}
.voet li a::first-letter{text-transform:uppercase}
.voet a:hover,.voet a[aria-current="page"]{color:var(--kop-tekst)}
.voet .merk__naam{color:var(--kop-tekst)}
.voet__slot{margin-top:44px;padding-top:20px;border-top:1px solid var(--kop-lijn);font-size:13.5px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.voet__slot a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.voet__slot a::after{content:"\2191";margin-left:7px}
.voet__slot a:hover{color:var(--kop-tekst)}

@media(max-width:1000px){
  .strook{grid-template-columns:repeat(4,1fr)}
  .strook > :nth-child(n+5){display:none}
  .voet__grid{grid-template-columns:1fr 1fr}
  .voet__merk{grid-column:1/-1}
}
@media(max-width:760px){
  .top__bar{flex-direction:column;align-items:flex-start;gap:4px;padding-block:12px 8px}
  .nav__list{justify-content:flex-start;margin-left:-13px}
  .held__in{padding:calc(60px * var(--opening-schaal)) 20px 44px}
  .held h1{font-size:clamp(32px,9.5vw,44px)}
  .sec__kop{align-items:flex-start}
  .stuk:has(.stuk__beeld:not(:empty)) .stuk__kop{padding-bottom:calc(clamp(40px,5vw,64px) + 70px)}
  .stuk:has(.stuk__beeld:not(:empty)) .stuk__beeld{margin-top:-70px}
}
@media(max-width:520px){
  .raster,.raster--vast,.raster--blog{grid-template-columns:1fr}
  .strook{grid-template-columns:repeat(2,1fr)}
  .held{min-height:min(calc(62vh * var(--opening-schaal)),calc(460px * var(--opening-schaal)))}
  .voet__grid{grid-template-columns:1fr;gap:28px}
  .voet__merk{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}