/* Lettertypes zelf gehost (SIL Open Font License). Geen verbinding met Google nodig. */
/* Bricolage Grotesque, latin-ext */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Bricolage Grotesque, latin */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Hanken Grotesk, latin-ext */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Hanken Grotesk, latin */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  /* Huisstijl */
  --bordeaux:#69011C;
  --oranjerood:#FC472C;   /* alleen grote tekst en accenten */
  --creme:#F8F2EC;
  /* Afgeleid */
  --wijn:#3B0612;         /* donkere sectie */
  --perzik:#FFE4D6;       /* zachte vlakken */
  --perzik-licht:#FFF4EC;
  --ink:#1E1416;
  --tekst:#4A3F42;
  --tekst-zacht:#6B5E61;
  --lijn:#E6DAD0;
  --wit:#FFFFFF;

  --display:'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --body:'Hanken Grotesk', system-ui, sans-serif;

  --sx:clamp(16px,4vw,40px);
  --sy:clamp(80px,10vw,136px);
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--creme);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--bordeaux)}
:focus-visible{outline:3px solid var(--oranjerood);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(44px,7vw,88px);line-height:.98;letter-spacing:-.035em}
h2{font-size:clamp(34px,4.6vw,56px);line-height:1.04;letter-spacing:-.03em}
h3{font-size:24px;line-height:1.2;letter-spacing:-.015em}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--sx);padding-right:var(--sx)}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--tekst);max-width:56ch}

/* Sectienaam met stip, zoals in het voorbeeld */
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--bordeaux)}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--oranjerood)}
.sec-kop{display:flex;flex-direction:column;gap:18px;max-width:760px}

/* Knoppen */
.btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:7px 7px 7px 22px;border-radius:12px;font:600 17px/1.2 var(--body);text-decoration:none;border:0;cursor:pointer;transition:background-color .2s}
.btn .pijl{width:38px;height:38px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform .2s}
.btn:hover .pijl{transform:translateX(3px)}
.btn-primair{background:var(--bordeaux);color:var(--wit)}
.btn-primair:hover{background:#52010F;color:var(--wit)}
.btn-primair .pijl{background:var(--oranjerood);color:var(--wit)}
.btn-licht{background:var(--wit);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--lijn)}
.btn-licht:hover{box-shadow:inset 0 0 0 1.5px var(--bordeaux);color:var(--ink)}
.btn-licht .pijl{background:var(--perzik);color:var(--bordeaux)}
.btn-wit{background:var(--wit);color:var(--bordeaux)}
.btn-wit:hover{background:var(--perzik-licht);color:var(--bordeaux)}
.btn-wit .pijl{background:var(--oranjerood);color:var(--wit)}
.btn-klein{min-height:46px;font-size:16px;padding:5px 5px 5px 18px}
.btn-klein .pijl{width:34px;height:34px}
.btn-tekst{background:none;border:0;padding:10px 0;min-height:44px;font:500 15px var(--body);color:var(--tekst-zacht);text-decoration:underline;cursor:pointer}

/* Header */
.kop{position:sticky;top:0;z-index:20;background:rgba(248,242,236,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.kop.gescrold{border-bottom-color:var(--lijn)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.merk{display:flex;flex-direction:column;gap:2px;text-decoration:none}
.merk img{height:34px;width:auto}
.merk span{font-size:12.5px;font-weight:600;color:var(--tekst-zacht);padding-left:44px;letter-spacing:.01em}
.menu{display:flex;align-items:center;gap:30px}
.menu a:not(.btn){color:var(--ink);text-decoration:none;font-weight:500;font-size:16px}
.menu a:not(.btn):hover{color:var(--bordeaux)}
.menu-knop{display:none}
@media (max-width:900px){
  .menu a:not(.btn){display:none}
  .menu-knop{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;border-radius:12px;border:1.5px solid var(--lijn);background:var(--wit);color:var(--ink);font:600 15px var(--body);cursor:pointer}
  .menu-knop svg{transition:transform .2s}
  .kop .wrap{position:relative}
  .kop.open .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--creme);border-bottom:1px solid var(--lijn);padding:8px var(--sx) 20px;box-shadow:0 16px 24px -16px rgba(59,6,18,.25)}
  .kop.open .menu a:not(.btn){display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--lijn);font-size:17px}
  .kop.open .menu .btn{margin-top:16px;align-self:flex-start}
  .kop.open .menu-knop svg{transform:rotate(90deg)}
  .kop:not(.open) .menu .btn{display:none}
}
@media (max-width:440px){.merk span{display:none}.merk img{height:28px}.menu .btn{font-size:15px;padding-left:14px;white-space:nowrap}}


/* Hero */
.hero{background:linear-gradient(180deg,var(--perzik) 0%,var(--perzik-licht) 55%,var(--creme) 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding-top:clamp(48px,7vw,96px);padding-bottom:clamp(48px,6vw,88px)}
.hero-tekst{display:flex;flex-direction:column;gap:28px}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:12px}

/* Diagram: glas in het midden, vier thema's eromheen */
.diagram{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;margin:0 auto}
.diagram .ring{position:absolute;inset:4%;border:2px solid var(--bordeaux);border-radius:50%}
.diagram .kern{position:absolute;inset:19%;background:#FFCDBA;border-radius:50%}
.diagram .lijnen{position:absolute;inset:0;width:100%;height:100%}
.diagram .hero-glas{position:absolute;left:50%;top:50%;width:34%;height:auto;transform:translate(-50%,-52%)}
.chip{position:absolute;background:#FFFBF7;color:var(--wijn);font:600 clamp(14px,1.4vw,17px)/1 var(--body);padding:11px 16px;border-radius:12px;box-shadow:0 6px 18px rgba(59,6,18,.12);white-space:nowrap}
.chip.c1{left:0;top:17%}.chip.c2{right:0;top:17%}.chip.c3{left:0;bottom:17%}.chip.c4{right:0;bottom:17%}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .diagram{max-width:360px}
}

/* Glas-animatie (hero + quickscan) */
.wijn-niveau{transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.golf{animation:golf 5s linear infinite}
@keyframes golf{from{transform:translateX(-100px)}to{transform:translateX(0)}}

/* Waar we in geloven */
.geloof{padding:0 0 clamp(48px,6vw,80px)}
.geloof .wrap > div{border-top:1px solid #DCCFC4;padding-top:32px;display:flex;flex-direction:column;gap:14px}
.geloof p.groot{font:500 clamp(26px,3vw,36px)/1.25 var(--display);letter-spacing:-.02em;max-width:30ch;text-wrap:balance}

/* Herkenning */
.herkenning{padding:var(--sy) 0;background:var(--wit)}
.herkenning .wrap{display:flex;flex-direction:column;gap:64px}
.cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.cijfer{border-top:2px solid var(--bordeaux);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.cijfer b{font:600 clamp(64px,8vw,104px)/.9 var(--display);letter-spacing:-.05em;color:var(--oranjerood)}
.cijfer span{color:var(--tekst);max-width:30ch}
.bron{font-size:14px;color:var(--tekst-zacht);margin-top:-40px}
.problemen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.probleem{background:var(--creme);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px}
.probleem .ico{width:46px;height:46px;border-radius:12px;background:var(--perzik);color:var(--bordeaux);display:flex;align-items:center;justify-content:center}
.probleem p{color:var(--tekst)}
@media (max-width:820px){.cijfers,.problemen{grid-template-columns:1fr}.bron{margin-top:-48px}}

/* Hoe het werkt: route met diensten (donker) */
.route{background:linear-gradient(170deg,var(--wijn) 0%,#55021A 60%,var(--bordeaux) 100%);color:var(--creme);padding:var(--sy) 0}
.route .wrap{display:flex;flex-direction:column;gap:64px}
.route h2{color:var(--wit)}
.route .kicker{color:#FFC2AE}
.route .lead{color:#EBD3D3}
.stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative}
.stappen::before{content:"";position:absolute;left:28px;right:calc((100% - 40px) / 3 - 28px);top:27px;height:2px;background:linear-gradient(90deg,rgba(252,71,44,.5),var(--oranjerood))}
.stap{position:relative;display:flex;flex-direction:column;gap:14px}
.stap-ico{width:56px;height:56px;border-radius:50%;background:var(--wijn);border:2px solid var(--oranjerood);color:#FFC2AE;display:flex;align-items:center;justify-content:center}
.stap.startpunt .stap-ico{background:var(--oranjerood);color:var(--wit)}
.stap-blok{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px;flex:1}
.stap.startpunt .stap-blok{background:rgba(252,71,44,.14);border-color:rgba(252,71,44,.55)}
.stap .label{font-size:15px;font-weight:600;color:#FFC2AE}
.stap h3{color:var(--wit);font-size:clamp(24px,2.4vw,30px)}
.stap p.uitleg{color:#EBD3D3;font-size:16px}
.stap .prijs{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font:600 20px/1.2 var(--display);color:#FFC2AE}
.plus{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:start}
.plus-links{display:flex;flex-direction:column;gap:12px}
.plus-links .label{font-size:15px;font-weight:600;color:#FFC2AE}
.plus-links h3{color:var(--wit);font-size:clamp(24px,2.4vw,30px)}
.plus-links p{color:#EBD3D3}
.plus-links .prijs{font:600 20px/1.2 var(--display);color:#FFC2AE;padding-top:4px}
.plus ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.plus li{display:flex;gap:12px;align-items:flex-start;color:#EBD3D3}
.plus li svg{flex:0 0 auto;margin-top:3px;color:var(--oranjerood)}
.plus li strong{color:var(--wit);font-weight:600}
.route-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.route-cta p{color:#EBD3D3}
@media (max-width:980px){
  .stappen{grid-template-columns:1fr;gap:16px}
  .stappen::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:linear-gradient(180deg,rgba(252,71,44,.5),var(--oranjerood))}
  .stap{flex-direction:row;align-items:flex-start;gap:18px}
  .stap-ico{flex:0 0 56px}
  .plus{grid-template-columns:1fr;gap:24px}
}

/* Quickscan */
.quickscan{padding:var(--sy) 0}
.qs-vlak{background:linear-gradient(160deg,var(--perzik) 0%,var(--perzik-licht) 100%);border-radius:28px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,64px);align-items:start}
.qs-intro{display:flex;flex-direction:column;gap:18px}
.qs-kaart{background:var(--wit);border-radius:20px;padding:clamp(22px,3.5vw,40px);box-shadow:0 24px 48px -24px rgba(59,6,18,.25);min-height:420px;display:flex;flex-direction:column;gap:22px}
.qs-voortgang{display:flex;flex-direction:column;gap:10px}
.qs-voortgang p{font-size:15px;font-weight:600;color:var(--tekst-zacht)}
.qs-balk{height:6px;border-radius:99px;background:#F1E6DD;overflow:hidden}
.qs-balk div{height:100%;background:var(--bordeaux);border-radius:99px;transition:width .3s}
.qs-vraag{font:600 clamp(22px,2.4vw,27px)/1.25 var(--display);letter-spacing:-.015em;margin:22px 0}
.qs-opties{display:flex;flex-direction:column;gap:10px}
.qs-opties button{text-align:left;font:500 17px/1.4 var(--body);color:var(--ink);background:var(--creme);border:1.5px solid var(--lijn);border-radius:12px;padding:15px 18px;min-height:54px;cursor:pointer;transition:border-color .15s,background-color .15s}
.qs-opties button:hover{border-color:var(--bordeaux);background:var(--perzik-licht)}
.qs-uitslag{display:flex;flex-direction:column;gap:18px}
.qs-score{display:flex;align-items:center;gap:20px}
.qs-score svg{width:96px;height:auto;flex:0 0 auto}
.qs-score b{font:600 64px/1 var(--display);letter-spacing:-.04em;color:var(--bordeaux)}
.qs-score span{color:var(--tekst-zacht)}
.qs-titel{font:600 26px/1.2 var(--display);letter-spacing:-.015em}
.qs-uitslag > p{color:var(--tekst)}
.qs-form{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--lijn)}
.qs-form label{font-weight:600}
.qs-rij{display:flex;flex-wrap:wrap;gap:10px}
.qs-rij input{flex:1 1 220px;min-width:0;font:17px var(--body);padding:12px 16px;min-height:52px;border:1.5px solid #D5C7BC;border-radius:12px;background:var(--wit);color:var(--ink)}
.qs-rij input:focus{outline:3px solid var(--oranjerood);outline-offset:1px;border-color:var(--bordeaux)}
.qs-klein{font-size:14px;color:var(--tekst-zacht)}
.qs-bedankt{padding:16px 20px;border-radius:12px;background:#EEF5F0;color:#1F4D36;font-weight:600}
.qs-acties{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
[hidden]{display:none!important}
@media (max-width:900px){.qs-vlak{grid-template-columns:1fr}}

/* Waar we voor staan */
.wie{padding:0 0 var(--sy)}
.wie .wrap{display:flex;flex-direction:column;gap:56px}
.principes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px 28px}
.principe{border-top:2px solid var(--bordeaux);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.principe h3{font-size:22px}
.principe p{color:var(--tekst);font-size:16px}
.personen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.persoon{background:var(--wit);border-radius:20px;padding:28px;display:flex;gap:24px;align-items:center}
.persoon .foto{width:104px;height:104px;border-radius:50%;background:var(--perzik);color:var(--bordeaux);font:600 13px/104px var(--body);text-align:center;flex:0 0 auto}
.persoon div{display:flex;flex-direction:column;gap:6px}
.persoon .rol{font-size:15px;font-weight:600;color:var(--bordeaux)}
.persoon p{color:var(--tekst)}
@media (max-width:820px){.personen{grid-template-columns:1fr}}
@media (max-width:480px){.persoon{flex-direction:column;align-items:flex-start}}

/* Kennisbank */
.kennis{padding:0 0 var(--sy)}
.kennis .wrap{display:flex;flex-direction:column;gap:48px}
.kennis-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.artikelen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.artikel{background:var(--wit);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.artikel:hover{transform:translateY(-3px);box-shadow:0 24px 40px -24px rgba(59,6,18,.3)}
.artikel-beeld{aspect-ratio:16/9;background:linear-gradient(150deg,var(--perzik) 0%,#FFCDB6 100%);display:flex;align-items:flex-end;padding:20px;position:relative;overflow:hidden}
.artikel-beeld img{position:absolute;right:-18px;bottom:-30px;width:46%;opacity:.9;transform:rotate(-8deg)}
.artikel:nth-child(2) .artikel-beeld{background:linear-gradient(150deg,#F4D9DD 0%,#E9B9C2 100%)}
.artikel:nth-child(3) .artikel-beeld{background:linear-gradient(150deg,#FFE9DD 0%,#FBC1AE 100%)}
.cat{position:relative;font-size:13px;font-weight:600;color:var(--bordeaux);background:var(--wit);border-radius:99px;padding:5px 12px}
.artikel-tekst{padding:24px;display:flex;flex-direction:column;gap:10px}
.artikel-tekst p{color:var(--tekst);font-size:16px}
.lees{font-weight:600;color:var(--bordeaux);font-size:15px;margin-top:4px}
@media (max-width:900px){.artikelen{grid-template-columns:1fr}}

/* Vragen */
.vragen{padding:0 0 var(--sy)}
.vragen .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:64px}
.vragen-lijst details{border-top:1px solid #DCCFC4}
.vragen-lijst details:last-child{border-bottom:1px solid #DCCFC4}
.vragen-lijst summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;min-height:44px;font:600 20px/1.35 var(--display);letter-spacing:-.01em}
.vragen-lijst summary::-webkit-details-marker{display:none}
.vragen-lijst summary::after{content:"";flex:0 0 32px;height:32px;border-radius:8px;background:var(--perzik) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369011C' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .2s}
.vragen-lijst details[open] summary::after{transform:rotate(45deg)}
.vragen-lijst details p{padding:0 48px 24px 0;color:var(--tekst);max-width:62ch}
@media (max-width:900px){.vragen .wrap{grid-template-columns:1fr;gap:32px}}

/* Contact */
.slot{padding:0 0 var(--sy)}
.slot-vlak{background:var(--bordeaux);color:var(--wit);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.slot-tekst{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;gap:20px}
.slot h2{color:var(--wit);font-size:clamp(38px,5vw,60px)}
.slot .lead{color:#F3DADF}
.slot .knipoog{font-weight:600;color:var(--wit)}
.slot-knoppen{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}
.btn-rand{background:transparent;color:var(--wit);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8);padding-right:22px}
.btn-rand:hover{background:rgba(255,255,255,.08);color:var(--wit)}
.slot-beeld{min-height:320px;background:url("fles.jpg") center/cover no-repeat}
@media (max-width:900px){.slot-vlak{grid-template-columns:1fr}.slot-beeld{min-height:260px;order:-1}}

/* Footer */
.voet{border-top:1px solid var(--lijn)}
.voet .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-top:32px;padding-bottom:40px;font-size:15px;color:var(--tekst-zacht)}
.voet-merk{display:flex;align-items:center;gap:14px}
.voet-merk img{height:26px;width:auto}
.voet nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.voet a{color:var(--tekst-zacht)}
.voet a:hover{color:var(--bordeaux)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .golf{animation:none}
  .wijn-niveau{transition:none}
}

/* Uitgelicht artikel (homepage en kennisbank) */
.uitgelicht{background:var(--wit);border-radius:24px;overflow:hidden;text-decoration:none;color:inherit;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);transition:transform .2s,box-shadow .2s}
.uitgelicht:hover{transform:translateY(-3px);box-shadow:0 24px 40px -24px rgba(59,6,18,.3)}
.uitgelicht .artikel-beeld{aspect-ratio:auto;min-height:280px}
.uitgelicht .artikel-beeld img{width:52%;right:-10px;bottom:-40px}
.uitgelicht .artikel-tekst{padding:clamp(24px,4vw,44px);gap:14px;justify-content:center}
.uitgelicht h3{font-size:clamp(24px,2.6vw,32px);line-height:1.15}
.artikel-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--tekst-zacht)}
@media (max-width:820px){.uitgelicht{grid-template-columns:1fr}.uitgelicht .artikel-beeld{min-height:200px}}

/* Subpagina's */
.pagina-kop{background:linear-gradient(180deg,var(--perzik) 0%,var(--perzik-licht) 60%,var(--creme) 100%)}
.pagina-kop .wrap{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:20px}
.terug{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--bordeaux);text-decoration:none;min-height:44px}
.terug:hover{text-decoration:underline}
.kb-lijst{padding:0 0 var(--sy)}
.kb-lijst .wrap{display:flex;flex-direction:column;gap:28px}
.kb-cat{font:600 15px var(--body);color:var(--tekst-zacht)}

/* Artikel */
.artikel-pagina .pagina-kop h1{font-size:clamp(36px,5.2vw,64px);line-height:1.04;max-width:20ch}
.artikel-pagina .lead{max-width:60ch}
.lees-tekst{max-width:720px;margin:0 auto;padding:clamp(24px,4vw,48px) var(--sx) var(--sy);font-size:18px;line-height:1.75;color:var(--ink)}
.lees-tekst > * + *{margin-top:1.1em}
.lees-tekst h2{font-size:clamp(26px,3vw,32px);line-height:1.15;margin-top:2.2em}
.lees-tekst h2 + p{margin-top:.7em}
.lees-tekst p{color:#2E2427}
.lees-tekst em{font-style:italic}
.oordeel{background:var(--wit);border-left:4px solid var(--oranjerood);border-radius:0 14px 14px 0;padding:18px 22px}
.oordeel b{display:block;font:600 14px var(--body);color:var(--bordeaux);margin-bottom:4px}
.oordeel p{margin:0}
.voorbeeld{display:grid;grid-template-columns:1fr;gap:12px;margin-top:1.4em}
.voorbeeld div{border-radius:14px;padding:18px 22px;font-size:17px;line-height:1.6}
.voorbeeld .niet{background:#F1E6DD;color:var(--tekst)}
.voorbeeld .wel{background:var(--perzik);color:var(--ink)}
.voorbeeld b{display:block;font:600 14px var(--body);margin-bottom:4px;color:var(--bordeaux)}
.artikel-cta{margin-top:3em!important;background:var(--bordeaux);color:var(--wit);border-radius:24px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:16px}
.artikel-cta h2{color:var(--wit);margin:0;font-size:clamp(24px,2.8vw,30px)}
.artikel-cta p{color:#F3DADF;margin:0}
.artikel-cta .btn{align-self:flex-start}
.bron-noot{font-size:14px!important;line-height:1.5;color:var(--tekst-zacht)!important;border-top:1px solid var(--lijn);padding-top:20px;margin-top:2.5em!important}
.artikel-pagina .pagina-kop .wrap{max-width:720px}
.artikel-figuur{margin:2em 0 0}
.artikel-figuur img{width:100%;height:auto;border-radius:16px}
.artikel-figuur figcaption{font-size:14px;color:var(--tekst-zacht);margin-top:10px;font-style:italic}
.artikel-beeld.met-foto{background:#F7F5F0}
.artikel-beeld.met-foto img{position:absolute;left:16px;right:16px;top:16px;bottom:60px;width:calc(100% - 32px);height:calc(100% - 76px);object-fit:contain;opacity:1;transform:none}
.artikel-figuur.staand{text-align:center}
.artikel-figuur.staand img{max-width:520px;margin:0 auto}
.voorwaarden{list-style:none;padding:0;counter-reset:v;display:flex;flex-direction:column;gap:14px}
.voorwaarden li{counter-increment:v;position:relative;padding-left:46px;color:#2E2427}
.voorwaarden li::before{content:counter(v);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--bordeaux);color:var(--wit);font:600 15px/30px var(--display);text-align:center}
.cta-knoppen{display:flex;flex-wrap:wrap;gap:12px}
.artikel-cta .cta-knoppen .btn{align-self:auto}
.artikelen.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
.artikelen .artikel-beeld.met-foto{aspect-ratio:16/10}
@media (max-width:820px){.artikelen.twee{grid-template-columns:1fr}}
.artikelen .artikel .artikel-beeld.met-foto{background:#F7F5F0}
.artikelen .artikel-tekst{flex:1}
.artikelen .artikel-meta{margin-top:auto;padding-top:6px}
.rekentabel{overflow-x:auto;margin-top:1.4em;background:var(--wit);border-radius:16px;padding:6px 20px}
.rekentabel table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5;min-width:520px}
.rekentabel th,.rekentabel td{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.rekentabel thead th{font-size:14px;font-weight:600;color:var(--tekst-zacht)}
.rekentabel tbody th{font-weight:600;white-space:nowrap}
.rekentabel td{color:var(--tekst)}
.rekentabel td:last-child,.rekentabel th:last-child{text-align:right;white-space:nowrap;padding-right:0;color:var(--ink);font-variant-numeric:tabular-nums}
.rekentabel tr.boven th,.rekentabel tr.boven td:last-child{color:var(--bordeaux)}
.rekentabel tfoot th,.rekentabel tfoot td{border-bottom:0;font:600 18px var(--display);color:var(--bordeaux)!important}
.bron-noot a{color:inherit}
.artikelen a{text-decoration:none}

/* Route in vier stappen (overschrijft de drie-koloms versie) */
.route .stappen{grid-template-columns:repeat(4,minmax(0,1fr))}
.route .stappen::before{right:calc((100% - 60px) / 4 - 28px)}
.stap-nr{width:56px;height:56px;border-radius:50%;background:var(--wijn);border:2px solid var(--oranjerood);color:var(--wit);font:600 22px/52px var(--display);text-align:center;flex:0 0 auto}
.stap.startpunt .stap-nr{background:var(--oranjerood)}
.stap .tag{align-self:flex-start;font-size:13px;font-weight:600;color:var(--wijn);background:#FFC2AE;border-radius:99px;padding:3px 10px}
.stap .tag-zacht{background:rgba(255,255,255,.14);color:#F3DADF}
.stap h3{font-size:clamp(22px,2vw,26px)}
.stap-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.stap-lijst li{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:1.45;color:#F3DADF}
.stap-lijst svg{flex:0 0 auto;margin-top:1px;color:var(--oranjerood)}
.stap-voet{margin-top:auto!important;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:2px}
.stap-voet span{font-size:14px;font-weight:600;color:#EBD3D3}
.stap-voet b{font:600 19px/1.25 var(--display);color:#FFC2AE}
@media (max-width:1100px) and (min-width:981px){.route .stappen{gap:14px}.stap-blok{padding:22px}}
@media (max-width:980px){.route .stappen{grid-template-columns:1fr}.route .stappen::before{right:auto}}
/* Voetjes van de vier stappen even hoog, zodat de lijnen gelijk liggen */
@media (min-width:981px){.stap-voet{min-height:88px;box-sizing:border-box}}