/* Topline Automotive · vak.css
   Laag over site.css, opgebouwd naar het voorbeeld vakgarage.nl (klantwens 7 okt 2026), blok voor blok:
   USP-balk met iconen · witte kop met badge en twee pillen · menurij met uitklapmenu's · fotoslider met
   rondingen en pijlen · zwevende kaart met kentekenplaat · vinkjesrij · donker blok met vier kaarten ·
   tekstblok · kaart over de volle breedte met zwevend paneel · donkere voet met sterren, kolommen en logorij.
   Kleuren blijven de merkkleuren: inkt in plaats van zwart, geel in plaats van rood. */

:root{
  --r:16px; --r-k:12px; --r-pil:999px;
  --wit:#FFFFFF; --grijs:#F3F3F1; --groen:#2E9E5B; --rood:#C8372D;
  --kop-h:112px; --tb-h:0px; --boven:112px;
  --sectie-pad:64px;
  --sch-kaart:0 1px 2px rgba(17,27,46,.06), 0 12px 32px rgba(17,27,46,.12);
  --geel-hover:#E0B300;
}
@media (min-width:900px){ :root{ --kop-h:124px; --tb-h:0px; --boven:124px; --sectie-pad:88px; } }

html{ scroll-padding-top:calc(var(--boven) + 16px); }
body{ background:var(--wit); }
.bovenlijn{ height:0 !important; margin:0 !important; background:transparent !important; }
.tijdbalk{ display:none !important; }
.tijdlabel{ display:none; }

/* ───────── iconen (maskers) ───────── */
.ico{ display:inline-block; width:1em; height:1em; background:currentColor; flex:none; -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat; }
.ico-vink{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }
.ico-pijl{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
.ico-tel{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.ico-sleutel{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M14.5 6.5a4 4 0 0 0-5.3 5.3L3 18v3h3l6.2-6.2a4 4 0 0 0 5.3-5.3L15 12l-3-3z'/%3E%3C/svg%3E"); }
.ico-pin{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.ico-ster{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M12 3l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.4 6.3 20.5l1.2-6.4L2.8 9.7l6.4-.8z'/%3E%3C/svg%3E"); }
.ico-ster-vol{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.4 6.3 20.5l1.2-6.4L2.8 9.7l6.4-.8z'/%3E%3C/svg%3E"); }
.ico-klok{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
.ico-schild{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M12 3l8 3v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z'/%3E%3C/svg%3E"); }
.ico-chevron{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* ───────── 1. USP-balk ───────── */
.usp-balk{ background:var(--inkt); color:var(--papier); font-size:.8125rem; }
.usp-balk-in{ width:var(--kolom); margin-inline:auto; min-height:36px; display:flex; align-items:center; justify-content:center; gap:40px; padding-block:8px; }
.usp-balk ul{ display:flex; gap:40px; justify-content:center; flex-wrap:wrap; }
.usp-balk li{ display:flex; align-items:center; gap:8px; white-space:nowrap; font-weight:500; }
.usp-balk .ico{ font-size:15px; color:var(--geel); }
.usp-balk a{ color:inherit; text-decoration:none; }
.usp-balk a:hover{ text-decoration:underline; }
@media (max-width:899.98px){ .usp-balk li:nth-child(n+2){ display:none; } }

/* ───────── 2. Kop (wit, vast) + 3. menurij ───────── */
html .kop, html[data-thema] .kop{ position:sticky; top:0; inset:auto; height:auto; background:var(--wit); color:var(--inkt); box-shadow:0 1px 0 var(--lijn); z-index:60; }
html[data-gescrold] .kop{ box-shadow:0 1px 0 var(--lijn), 0 8px 24px rgba(17,27,46,.08); }
html .kop-logo-inkt{ display:block !important; } html .kop-logo-wit{ display:none !important; }
.kop-in{ height:auto; min-height:72px; flex-wrap:wrap; align-items:center; row-gap:0; }
.kop-logo img{ height:32px; }
.kop-rechts{ margin-left:auto; gap:10px; align-items:center; }
.kop-open{ display:none; }
.kop-badge{ display:none; align-items:center; gap:8px; font-weight:600; font-size:.9375rem; white-space:nowrap; text-decoration:none; color:var(--inkt); padding:0 6px; height:44px; }
.kop-badge .ico{ font-size:20px; color:var(--groen); }
.kop-badge[data-open="dicht"] .ico, .kop-badge[data-open="straks"] .ico{ color:var(--raster); }
.kop-tel{ height:44px; padding:0 18px; border-radius:var(--r-pil); background:var(--inkt); color:var(--papier); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.kop-tel:hover{ background:var(--inkt-2); }
.kop-tel .ico{ font-size:15px; }
html .kop .knop.kop-cta{ background:var(--geel); color:var(--inkt); --knop-hover:var(--geel-hover); height:44px; }
.kop-menu{ border-radius:var(--r-pil); border:1.5px solid var(--lijn-s); height:44px; }
.kop-nav{ display:none; }
@media (min-width:900px){
  .kop-logo{ order:1; } .kop-rechts{ order:2; } .kop-badge{ display:inline-flex; }
  .kop-nav{ order:3; display:block; flex:1 0 100%; margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%); background:var(--grijs); border-top:1px solid var(--lijn); }
  .kop-nav > ul{ gap:4px; margin-left:-12px; }
  .kop-nav > ul > li{ position:relative; }
  .kop-nav > ul > li > a{ height:50px; padding:0 12px; font-size:.9375rem; font-weight:600; gap:6px; }
  .kop-nav > ul > li > a::after{ display:none; }
  .kop-nav > ul > li > a .ico-chevron{ font-size:12px; transition:transform .2s; }
  .kop-nav > ul > li:hover > a .ico-chevron, .kop-nav > ul > li:focus-within > a .ico-chevron{ transform:rotate(180deg); }
  .kop-nav > ul > li > a[aria-current="page"]{ box-shadow:inset 0 -3px 0 var(--geel); }
  .kop-nav .sub{ display:none; position:absolute; left:0; top:100%; min-width:260px; background:var(--wit); border-radius:0 0 var(--r-k) var(--r-k); box-shadow:var(--sch-kaart); padding:8px; z-index:70; }
  .kop-nav li:hover > .sub, .kop-nav li:focus-within > .sub{ display:block; }
  .kop-nav .sub a{ display:flex; height:auto; min-height:44px; align-items:center; padding:10px 12px; border-radius:8px; font-size:.9375rem; font-weight:500; text-decoration:none; }
  .kop-nav .sub a:hover, .kop-nav .sub a:focus-visible{ background:var(--grijs); }
  .kop-nav .sub a::after{ display:none; }
  .kop-menu{ display:none; }
}
@media (max-width:899.98px){
  .kop-tel span{ display:none; } .kop-tel{ width:44px; padding:0; justify-content:center; }
  html[data-menu="open"] .kop-nav{ display:block; position:fixed; left:0; right:0; top:var(--kop-h); bottom:0; overflow:auto; background:var(--wit); color:var(--inkt); }
  html[data-menu="open"] .kop-nav > ul{ flex-direction:column; gap:0; width:var(--kolom); margin-inline:auto; padding-block:8px; }
  html[data-menu="open"] .kop-nav > ul > li + li{ border-top:1px solid var(--lijn); }
  html[data-menu="open"] .kop-nav > ul > li > a{ height:56px; padding:0; font-size:1.125rem; font-weight:600; }
  html[data-menu="open"] .kop-nav > ul > li > a::after{ display:none; }
  html[data-menu="open"] .kop-nav .ico-chevron{ display:none; }
  html[data-menu="open"] .kop-nav .sub{ display:block; padding:0 0 12px 16px; }
  html[data-menu="open"] .kop-nav .sub a{ height:44px; padding:0; font-size:1rem; text-decoration:none; color:var(--inkt-zacht-2); }
  html[data-menu="open"] .kop-nav .sub a::after{ display:none; }
  html[data-menu="open"]{ overflow:hidden; }
}

/* ───────── Knoppen: pillen ───────── */
.knop{ border-radius:var(--r-pil); padding-inline:22px; font-weight:600; gap:10px; }
.knop::after{ content:""; width:12px; height:12px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.knop.zonder-pijl::after, .plaat-knop::after{ display:none; }
.knop-geel, .hfd[data-thema="inkt"] .knop-geel, .voet .knop-geel, .vak-donker .knop-geel{ background:var(--geel); color:var(--inkt); --knop-hover:var(--geel-hover); }
.knop-wit{ background:var(--wit); color:var(--inkt); --knop-hover:var(--papier-2); }
.knop-rand, .hfd[data-thema="papier"] .knop-rand{ background:transparent; color:currentColor; box-shadow:inset 0 0 0 1.5px currentColor; --knop-hover:rgba(17,27,46,.06); }
.plaat-knop{ border-radius:var(--r-pil); margin-left:12px; padding-inline:22px; }
.plaat-knop::after{ display:inline-block; content:""; width:12px; height:12px; margin-left:10px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.plaat{ border-radius:8px; overflow:hidden; }
.plaat-klein{ border-radius:8px; }

/* ───────── Algemene afrondingen op bestaande componenten ───────── */
.hfd[data-thema="papier"]{ background:var(--wit); }
.hfd[data-thema="raster"]{ background:var(--grijs); }
.beeld{ border-radius:var(--r); }
.bijschrift{ font-weight:500; letter-spacing:.04em; text-transform:none; font-size:.8125rem; }
.spec{ border-radius:var(--r-k); overflow:hidden; }
.faq details{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r-k); padding:4px 20px; }
.faq summary::before{ display:none; }
.faq details + details{ margin-top:12px; }
.kaart, .kaart iframe{ border-radius:var(--r); }
.bord{ border-radius:var(--r-k); }
.insluit{ border-radius:var(--r); border-style:dashed; }
.formulier input, .formulier select, .formulier textarea{ border-radius:8px; }
.werkorder, .tijden, .tabel{ border-radius:var(--r-k); overflow:hidden; }
.leeg-blok .slagboom{ display:none; }
.opening .hfd-in{ padding-block:56px 48px; }
@media (min-width:900px){ .opening .hfd-in{ padding-block:72px 64px; } }
.slotregel .hfd-in{ padding-block:40px; }
.slotregel p{ background:var(--grijs); border-radius:var(--r); padding:24px 32px; }

/* ───────── 4. Hero-slider ───────── */
.vak-hero{ background:var(--wit); overflow:hidden; }
.vak-hero .hfd-in{ padding-block:32px 0; }
.slider{ position:relative; }
.slider-baan{ display:flex; gap:16px; transition:transform .6s cubic-bezier(.2,.7,.1,1); will-change:transform; }
@media (prefers-reduced-motion:reduce){ .slider-baan{ transition:none; } }
.slide{ flex:0 0 100%; position:relative; border-radius:var(--r); overflow:hidden; background:var(--inkt); color:var(--papier); aspect-ratio:16 / 7; min-height:360px; display:flex; align-items:end; isolation:isolate; }
.slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.slide::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(17,27,46,0) 35%, rgba(17,27,46,.82) 100%); }
.slide-tekst{ padding:28px 24px; max-width:40rem; }
.slide-tekst h1, .slide-tekst h2{ color:var(--wit); font-size:clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height:1.05; margin:0 0 8px; letter-spacing:-.01em; }
.slide-tekst p{ color:var(--papier); font-size:clamp(1rem, .9rem + .5vw, 1.25rem); margin:0; }
.slide[aria-hidden="true"]{ opacity:.6; }
.slider-knoppen{ position:absolute; right:24px; bottom:24px; display:flex; gap:8px; z-index:2; }
.slider-knop{ width:44px; height:44px; border-radius:50%; background:var(--wit); color:var(--inkt); border:0; display:grid; place-items:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.slider-knop:hover{ background:var(--papier); }
.slider-knop:focus-visible{ outline:3px solid var(--geel); outline-offset:2px; }
.slider-knop .ico{ font-size:16px; }
.slider-knop-vorige .ico{ transform:rotate(180deg); }
.slider-punten{ display:flex; justify-content:center; gap:6px; padding:12px 0 0; }
.slider-punten button{ width:18px; height:4px; border-radius:2px; background:var(--raster); border:0; cursor:pointer; padding:0; }
.slider-punten button[aria-current="true"]{ background:var(--inkt); width:28px; }
@media (min-width:900px){ .slide{ aspect-ratio:16 / 6.2; } .slide-tekst{ padding:48px 56px; } .slider-knoppen{ right:32px; bottom:32px; } }

/* ───────── 5. Zwevende kaart met kentekenplaat ───────── */
.vak-check .hfd-in{ padding-block:0; }
.vak-check-kaart{ position:relative; z-index:2; margin:20px auto 0; width:min(100%, 64rem); background:var(--wit); border-radius:var(--r-k); box-shadow:var(--sch-kaart); border-top:4px solid var(--geel); padding:20px 24px 24px; display:grid; gap:16px; align-items:center; }
.vak-check-kaart .embleem{ display:none; width:96px; height:96px; }
.vak-check-kaart h2{ font-size:1.5rem; line-height:1.15; margin:0; }
.vak-check-kaart h2 span{ display:block; font-weight:400; color:var(--inkt-zacht-2); }
.vak-check-kaart .plaat-vorm .label{ display:none; }
.vak-check-kaart .plaat-rij{ margin-top:0; }
.vak-check-kaart [data-kenteken-uit]{ grid-column:1 / -1; }
@media (min-width:900px){ .vak-check-kaart{ margin-top:-48px; grid-template-columns:96px 1fr auto; gap:24px; padding:24px 32px; } .vak-check-kaart .embleem{ display:block; } }

/* 6. Vinkjesrij */
.vak-vinkjes{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 32px; padding:28px 0 8px; font-size:.9375rem; font-weight:500; }
.vak-vinkjes li{ display:flex; align-items:center; gap:8px; }
.vak-vinkjes .ico{ font-size:16px; color:var(--inkt); }

/* ───────── 7. Donker blok met kaarten ───────── */
.vak-donker{ background:var(--inkt); color:var(--papier); }
.vak-donker .hfd-in{ padding-block:72px; }
.vak-kop{ margin-bottom:28px; }
.vak-kop h2{ margin:0 0 8px; color:var(--wit); }
.vak-kop h2 .licht{ font-weight:400; color:var(--raster); }
.vak-kop p{ margin:0; max-width:70ch; color:var(--papier-zacht); }
.hfd[data-thema="papier"] .vak-kop h2, .hfd[data-thema="raster"] .vak-kop h2{ color:var(--inkt); }
.hfd[data-thema="papier"] .vak-kop p, .hfd[data-thema="raster"] .vak-kop p{ color:var(--inkt-zacht-2); }
.vak-kaarten{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .vak-kaarten{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1100px){ .vak-kaarten{ grid-template-columns:repeat(4, 1fr); } }
.vak-kaart{ display:flex; flex-direction:column; background:var(--inkt-2); border-radius:var(--r); overflow:hidden; color:var(--papier); text-decoration:none; transition:transform .25s cubic-bezier(.2,.7,.1,1), box-shadow .25s; }
.vak-kaart:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.vak-kaart:focus-visible{ outline:3px solid var(--geel); outline-offset:3px; }
.vak-kaart img{ width:100%; aspect-ratio:3 / 2; object-fit:cover; display:block; }
.vak-kaart-tekst{ padding:20px 20px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.vak-kaart h3{ font-size:1.375rem; margin:0; color:var(--wit); line-height:1.15; }
.vak-kaart p{ color:var(--papier-zacht); font-size:.9375rem; margin:0; flex:1; }
.vak-kaart .knop{ align-self:flex-start; margin-top:12px; min-height:44px; }
.vak-kaart-geel{ background:var(--geel); color:var(--inkt); }
.vak-kaart-geel h3, .vak-kaart-geel p{ color:var(--inkt); }
.vak-kaart-geel .knop{ background:var(--inkt); color:var(--papier); --knop-hover:var(--inkt-2); }
.vak-kaart-geel .kaart-embleem{ aspect-ratio:3 / 2; display:grid; place-items:center; background:var(--geel-hover); }
.vak-kaart-geel .kaart-embleem img{ width:140px; aspect-ratio:1; object-fit:contain; }

/* ───────── 8. Tekstblok ───────── */
.vak-tekstblok .hfd-in{ padding-block:64px 56px; }
.vak-tekstblok h2{ margin:0 0 16px; }
.vak-tekstblok p{ color:var(--inkt-zacht-2); max-width:none; font-size:1.0625rem; line-height:1.65; }
.vak-tekstblok p + p{ margin-top:12px; }
.vak-tekstblok a{ color:var(--inkt); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--geel); text-decoration-thickness:2px; }
.vak-tekstblok .knoppen{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }

/* ───────── 9. Kaart met zwevend paneel ───────── */
.vak-kaartblok{ position:relative; background:var(--grijs); }
.vak-kaartblok iframe{ display:block; width:100%; height:420px; border:0; }
.vak-paneel{ position:relative; width:var(--kolom); margin:-80px auto 0; padding-bottom:32px; }
.vak-paneel-in{ background:var(--wit); border-radius:var(--r-k); box-shadow:var(--sch-kaart); padding:24px; max-width:26rem; }
.vak-paneel h2{ font-size:1.5rem; margin:0 0 4px; }
.vak-paneel .adres{ color:var(--inkt-zacht-2); margin:0 0 12px; }
.vak-paneel .status{ display:block; font-weight:600; font-size:.9375rem; margin:0 0 16px; color:var(--rood); }
.vak-paneel .status[data-open="open"]{ color:var(--groen); }
.vak-paneel .tijden{ margin:0 0 20px; border-radius:0; }
.vak-paneel .knoppen{ display:flex; gap:10px; flex-wrap:wrap; }
@media (min-width:900px){
  .vak-kaartblok iframe{ height:560px; }
  .vak-paneel{ position:absolute; inset:0; margin:0; padding:0; pointer-events:none; width:auto; }
  .vak-paneel-in{ pointer-events:auto; position:absolute; left:calc(50% - var(--kolom) / 2); top:48px; width:26rem; padding:28px; }
}

/* 10. Tips / nieuws */
.vak-tips{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:700px){ .vak-tips{ grid-template-columns:repeat(3, 1fr); } }
.vak-tip{ background:var(--wit); border-radius:var(--r); overflow:hidden; border:1px solid var(--lijn); display:flex; flex-direction:column; text-decoration:none; color:var(--inkt); transition:transform .25s cubic-bezier(.2,.7,.1,1), box-shadow .25s; }
.vak-tip:hover{ transform:translateY(-4px); box-shadow:var(--sch-kaart); }
.vak-tip img{ width:100%; aspect-ratio:16 / 9; object-fit:cover; display:block; }
.vak-tip-tekst{ padding:20px; display:flex; flex-direction:column; gap:8px; }
.vak-tip .label{ color:var(--inkt-zacht); }
.vak-tip h3{ font-size:1.25rem; margin:0; line-height:1.2; }
.vak-tip p{ color:var(--inkt-zacht-2); font-size:.9375rem; margin:0; }
.vak-tip .lees{ margin-top:8px; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.vak-tip .lees .ico{ font-size:12px; }

/* Afspraakblok */
.vak-cta{ background:var(--geel); color:var(--inkt); border-radius:var(--r); padding:32px 24px; display:grid; gap:20px; align-items:center; }
.vak-cta h2{ margin:0 0 6px; }
.vak-cta p{ margin:0; max-width:52ch; color:var(--inkt-zacht-2); }
.vak-cta-knoppen{ display:flex; gap:12px; flex-wrap:wrap; }
.vak-cta .knop{ background:var(--inkt); color:var(--papier); --knop-hover:var(--inkt-2); }
.vak-cta .knop-wit{ background:var(--wit); color:var(--inkt); --knop-hover:var(--papier-2); }
@media (min-width:900px){ .vak-cta{ grid-template-columns:1fr auto; padding:48px 56px; } }

/* ───────── Voet ───────── */
.voet{ background:var(--inkt); color:var(--papier); }
.voet-in{ padding-block:64px 32px; display:grid; gap:40px 32px; grid-template-columns:1fr; }
@media (min-width:700px){ .voet-in{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1000px){ .voet-in{ grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; } }
.voet-merk img{ height:36px; width:auto; }
.voet-oud{ color:var(--papier-zacht); margin-top:12px; }
.voet-sterren{ display:flex; gap:3px; color:var(--geel); margin-top:20px; }
.voet-sterren .ico{ font-size:18px; }
.voet-beoordeling{ margin-top:8px; font-weight:600; }
.voet-beoordeling a{ color:var(--papier); text-decoration:underline; text-underline-offset:3px; }
.voet-beoordeling-sub{ color:var(--papier-zacht); font-size:.875rem; margin-top:4px; }
.voet h2{ font-size:1.125rem; font-weight:600; letter-spacing:0; text-transform:none; margin-bottom:14px; color:var(--wit); }
.voet a{ color:var(--papier); }
.voet-nav li, .voet-tijden li{ padding:5px 0; color:var(--papier-zacht); }
.voet-nav a, .voet address a{ text-decoration:none; color:var(--papier-zacht); }
.voet-nav a:hover{ color:var(--wit); text-decoration:underline; }
.voet address{ font-style:normal; color:var(--papier-zacht); line-height:1.7; }
.voet-open{ margin-top:8px; font-weight:600; color:var(--papier); }
.voet-nieuwsbrief{ grid-column:1 / -1; border-top:1px solid var(--papier-lijn); padding-top:32px; display:grid; gap:12px; }
@media (min-width:900px){ .voet-nieuwsbrief{ grid-template-columns:1fr auto; align-items:center; } .voet-nieuwsbrief h2{ margin:0; } .voet-nieuwsbrief p{ grid-column:1; } .voet-nb-rij{ grid-column:2; grid-row:1 / 3; } }
.voet-nieuwsbrief p{ color:var(--papier-zacht); margin:0; }
.voet-nb-rij{ display:flex; gap:8px; flex-wrap:wrap; }
.voet-nieuwsbrief input{ border-radius:var(--r-pil); padding-inline:18px; min-width:260px; height:48px; }
.voet-nieuwsbrief .knop{ background:var(--geel); color:var(--inkt); --knop-hover:var(--geel-hover); }
.voet-logos{ grid-column:1 / -1; border-top:1px solid var(--papier-lijn); padding-top:28px; display:flex; flex-wrap:wrap; gap:12px 32px; align-items:center; color:var(--papier-zacht); font-size:.875rem; }
.voet-logos li{ display:flex; align-items:center; gap:8px; }
.voet-logos .ico{ font-size:16px; color:var(--geel); }
.voet-onder{ grid-column:1 / -1; border-top:1px solid var(--papier-lijn); padding-top:20px; display:flex; flex-wrap:wrap; gap:8px 24px; color:var(--papier-zacht); font-size:.875rem; }
.voet-onder a{ color:var(--papier-zacht); text-decoration:none; }
.voet-onder a:hover{ text-decoration:underline; }

/* ───────── correcties na eerste opname (7 okt) ───────── */
.kop-badge:has([data-open="dicht"]) .ico, .kop-badge:has([data-open="straks"]) .ico{ color:var(--raster); }
.voet-in > *{ grid-column:auto; }
.voet-nieuwsbrief, .voet-logos, .voet-onder{ grid-column:1 / -1; }
.voet-open{ font-size:.9375rem; letter-spacing:0; text-transform:none; font-weight:600; }
.voet-tijden li{ white-space:nowrap; }
@media (max-width:899.98px){ .slide-tekst{ padding-right:120px; } .slide{ min-height:300px; } }
@media (min-width:1000px){
  .voet-in{ grid-template-columns:1.4fr 1fr 1fr 1fr 1fr !important; grid-template-areas:none !important; }
  .voet-in > *{ grid-area:auto !important; grid-column:auto !important; grid-row:auto !important; }
  .voet-nieuwsbrief, .voet-logos, .voet-onder{ grid-column:1 / -1 !important; }
}

/* ───────── Onderste voetregel: copyright links, Powered by Webiro midden, juridisch rechts ───────── */
.voet-onder{ display:grid !important; grid-template-columns:1fr; gap:16px; align-items:center; justify-items:center; text-align:center; }
.voet-copy{ margin:0; }
.voet-legal{ display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center; }
.voet-legal a{ color:var(--papier-zacht); text-decoration:none; padding-block:12px; margin-block:-12px; }
.voet-legal a:hover{ text-decoration:underline; color:var(--papier); }
.wb-powered{ display:inline-flex; align-items:center; gap:.5rem; vertical-align:middle; color:rgba(244,244,241,.5); }
.wb-powered span{ font-size:10px; text-transform:uppercase; letter-spacing:.32em; line-height:1; }
.wb-powered a{ display:inline-flex; align-items:center; color:rgba(244,244,241,.55); transition:color .2s; padding:0; margin:0; }
.wb-powered a:hover{ color:rgba(244,244,241,.9); }
.wb-powered svg{ height:1rem; width:auto; display:block; }
@media (min-width:900px){
  .voet-onder{ grid-template-columns:1fr auto 1fr; text-align:left; justify-items:stretch; }
  .voet-copy{ grid-area:1 / 1; justify-self:start; }
  .wb-powered{ grid-area:1 / 2; justify-self:center; }
  .voet-legal{ grid-area:1 / 3; justify-self:end; justify-content:flex-end; }
}

/* kop staat in de flow (sticky), dus geen bovenmarge meer voor een vaste kop */
body{ padding-top:0 !important; }
main{ padding-top:0 !important; }
.vak-hero .hfd-in{ padding-top:24px !important; }

/* ───────── Kaart (MapLibre) ───────── */
.kaart-vlak{ width:100%; height:420px; background:var(--grijs); position:relative; }
@media (min-width:900px){ .vak-kaartblok .kaart-vlak{ height:560px; } }
.kaart .kaart-vlak{ height:260px; border-radius:var(--r); overflow:hidden; }
@media (min-width:900px){ .kaart .kaart-vlak{ height:480px; } }
.kaart-vlak .maplibregl-canvas{ outline:none; }
.kaart-marker{ width:48px; height:60px; filter:drop-shadow(0 6px 10px rgba(17,27,46,.3)); }
.kaart-vlak .maplibregl-ctrl-group{ border-radius:10px; box-shadow:var(--sch-kaart); border:0; overflow:hidden; }
.kaart-vlak .maplibregl-ctrl-group button{ width:40px; height:40px; }
.kaart-vlak .maplibregl-ctrl-group button + button{ border-top:1px solid var(--lijn); }
.kaart-vlak .maplibregl-ctrl-attrib{ border-radius:999px; font-family:var(--f); font-size:12px; color:var(--inkt-zacht-2); background:rgba(255,255,255,.92); }
.kaart-vlak .maplibregl-ctrl-attrib.maplibregl-compact{ min-height:28px; }
.kaart-vlak .maplibregl-ctrl-attrib a{ color:var(--inkt); }
.kaart-vlak .maplibregl-cooperative-gesture-screen{ font-family:var(--f); font-size:1rem; background:rgba(17,27,46,.55); color:var(--papier); border-radius:inherit; }
.kaart-vlak .maplibregl-ctrl-bottom-right{ right:8px; bottom:8px; }
.kaart-vlak .maplibregl-ctrl-top-right{ top:12px; right:12px; }
@media (min-width:900px){ .vak-kaartblok .kaart-vlak .maplibregl-ctrl-top-right{ top:24px; right:24px; } }

/* ───────── Hero met video over de volle breedte, kentekencheck als tegel in beeld ───────── */
.vak-video{ position:relative; background:var(--inkt); color:var(--papier); overflow:hidden; isolation:isolate; min-height:560px; display:flex; align-items:center; }
.vak-video-film{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; }
.vak-video-sluier{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(17,27,46,.86) 0%, rgba(17,27,46,.62) 48%, rgba(17,27,46,.28) 100%); }
.vak-video .hfd-in.vak-video-in{ padding-block:48px !important; display:grid; gap:32px; align-items:center; width:var(--kolom); }
.vak-kicker{ font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--geel); margin:0 0 14px; }
.vak-video-tekst h1{ color:var(--wit); font-size:clamp(2.25rem, 1.5rem + 3.2vw, 4rem); line-height:1.02; letter-spacing:-.015em; margin:0 0 16px; max-width:12ch; }
.vak-video-tekst .intro{ color:rgba(244,244,241,.9); max-width:42ch; margin:0 0 24px; font-size:clamp(1.0625rem, 1rem + .4vw, 1.25rem); }
.vak-video-knoppen{ display:flex; gap:12px; flex-wrap:wrap; }
.vak-video-vinkjes{ display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:28px; font-size:.9375rem; color:rgba(244,244,241,.85); }
.vak-video-vinkjes li{ display:flex; align-items:center; gap:8px; }
.vak-video-vinkjes .ico{ font-size:15px; color:var(--geel); }
.vak-tegel{ background:var(--wit); color:var(--inkt); border-radius:var(--r); box-shadow:0 24px 60px rgba(0,0,0,.35); padding:24px; width:100%; max-width:380px; justify-self:end; }
.vak-tegel-kop{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.vak-tegel-kop img{ width:44px; height:44px; flex:none; }
.vak-tegel h2{ font-size:1.25rem; margin:0; line-height:1.15; }
.vak-tegel > p{ color:var(--inkt-zacht); font-size:.9375rem; margin:0 0 16px; }
.vak-tegel .plaat-vorm .label{ display:none; }
.vak-tegel .plaat-rij{ margin:0 0 12px; }
.vak-tegel .plaat{ width:100%; border-radius:8px; }
.vak-tegel .plaat input{ font-size:clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.vak-tegel .knop-blok{ width:100%; justify-content:center; min-height:52px; }
.vak-tegel [data-kenteken-uit]{ margin-top:16px; }
.vak-tegel [data-kenteken-uit] .kc-knop{ width:100%; justify-content:center; }
.vak-tegel-voet{ margin:14px 0 0 !important; font-size:.8125rem !important; font-weight:600; color:var(--inkt-zacht-2) !important; }
.vak-tegel-voet[data-open="open"]{ color:#2E9E5B !important; }
@media (min-width:900px){
  .vak-video{ min-height:640px; }
  .vak-video .hfd-in.vak-video-in{ grid-template-columns:1.25fr .75fr; gap:48px; padding-block:72px !important; }
}
@media (max-width:899.98px){
  .vak-video-sluier{ background:linear-gradient(180deg, rgba(17,27,46,.55) 0%, rgba(17,27,46,.92) 70%); }
  .vak-tegel{ max-width:none; justify-self:stretch; }
}
@media (prefers-reduced-motion:reduce){ .vak-video-film{ display:none; } .vak-video{ background:var(--inkt) url("../video/hero-poster.jpg") center/cover no-repeat; } }
/* video iets meer zichtbaar laten */
.vak-video-sluier{ background:linear-gradient(90deg, rgba(17,27,46,.82) 0%, rgba(17,27,46,.5) 50%, rgba(17,27,46,.12) 100%); }
@media (max-width:899.98px){ .vak-video-sluier{ background:linear-gradient(180deg, rgba(17,27,46,.35) 0%, rgba(17,27,46,.88) 60%); } }

/* ───────── Kop verfijnd (7 okt): lichter, kleinere pillen, rustiger menurij ───────── */
.usp-balk{ font-size:.78rem; }
.usp-balk-in{ min-height:34px; gap:36px; }
.kop-in{ min-height:68px; gap:12px; }
.kop-logo img{ height:28px; }
.kop-rechts{ gap:8px; }
.kop-badge{ font-size:.8125rem; font-weight:500; color:var(--inkt-zacht-2); gap:8px; padding:0 10px 0 4px; height:40px; }
.kop-badge .ico{ display:none; }
.kop-badge::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--raster); flex:none; box-shadow:0 0 0 3px rgba(185,197,211,.25); }
.kop-badge:has([data-open="open"])::before{ background:#2E9E5B; box-shadow:0 0 0 3px rgba(46,158,91,.18); }
html .kop .knop.kop-cta{ height:40px; min-height:40px; padding:0 18px; font-size:.875rem; gap:8px; }
html .kop .knop.kop-cta::after{ width:10px; height:10px; }
.kop-tel{ height:40px; padding:0 16px; font-size:.875rem; background:transparent; color:var(--inkt); box-shadow:inset 0 0 0 1.5px var(--lijn-s); }
.kop-tel:hover{ background:var(--grijs); box-shadow:inset 0 0 0 1.5px var(--inkt); }
.kop-tel .ico{ font-size:14px; }
.kop-menu{ height:40px; font-size:.875rem; }
@media (min-width:900px){
  .kop-nav{ background:#F7F7F5; border-top:1px solid var(--lijn); }
  .kop-nav > ul{ gap:0; margin-left:-14px; }
  .kop-nav > ul > li > a{ height:46px; padding:0 14px; font-size:.875rem; font-weight:500; color:var(--inkt); gap:6px; transition:color .15s; }
  .kop-nav > ul > li > a:hover{ color:var(--inkt-2); }
  .kop-nav > ul > li > a .ico-chevron{ font-size:10px; opacity:.7; }
  .kop-nav > ul > li > a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--geel); font-weight:600; }
  .kop-nav .sub{ margin-top:0; border-top:2px solid var(--geel); border-radius:0 0 var(--r-k) var(--r-k); }
  .kop-nav .sub a{ font-size:.875rem; }
}

/* ───────── Kop exact in de maat van vakgarage.nl (klantscreenshot 7 okt) ───────── */
.kop-in{ min-height:100px; gap:16px; }
.kop-logo img{ height:44px; }
.kop-rechts{ gap:16px; }
.kop-badge{ height:48px; padding:0 4px; gap:10px; font-size:1rem; font-weight:700; color:var(--inkt); }
.kop-badge::before{ width:24px; height:24px; border-radius:50%; background:var(--raster); box-shadow:none; -webkit-mask:none; mask:none; position:relative; }
.kop-badge:has([data-open="open"])::before{ background:#2E9E5B; box-shadow:none; }
.kop-badge-vink{ display:none; }
.kop-badge .ico{ display:inline-block; position:absolute; width:14px; height:14px; color:#fff; margin-left:5px; pointer-events:none; }
.kop-badge{ position:relative; }
.kop-badge .ico.ico-vink{ left:4px; top:17px; }
html .kop .knop.kop-cta{ height:50px; min-height:50px; padding:0 28px; font-size:.9375rem; font-weight:700; gap:14px; border-radius:999px; }
html .kop .knop.kop-cta::after{ width:11px; height:11px; }
.kop-tel{ height:50px; padding:0 26px; font-size:.9375rem; font-weight:700; background:var(--inkt); color:var(--papier); box-shadow:none; gap:12px; }
.kop-tel:hover{ background:var(--inkt-2); box-shadow:none; }
.kop-tel .ico{ font-size:15px; }
.kop-tel::after{ content:""; width:11px; height:11px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.kop-route{ display:none; width:48px; height:48px; border-radius:50%; align-items:center; justify-content:center; color:var(--inkt); text-decoration:none; }
.kop-route:hover{ background:var(--grijs); }
.kop-route .ico{ font-size:26px; }
@media (min-width:900px){
  .kop-route{ display:inline-flex; }
  .kop-nav{ background:#F5F5F5; border-top:1px solid var(--lijn); }
  .kop-nav > ul{ gap:0; margin-left:-16px; }
  .kop-nav > ul > li > a{ height:70px; padding:0 20px; font-size:1.0625rem; font-weight:700; color:var(--inkt); gap:8px; }
  .kop-nav > ul > li > a .ico-chevron{ font-size:14px; opacity:1; }
  .kop-nav > ul > li > a[aria-current="page"]{ box-shadow:none; }
  .kop-nav > ul > li > a:hover, .kop-nav > ul > li:focus-within > a{ color:var(--inkt-2); background:rgba(17,27,46,.04); }
  .kop-nav .sub{ min-width:280px; padding:10px; }
  .kop-nav .sub a{ font-size:.9375rem; font-weight:500; }
  :root{ --kop-h:170px; --boven:170px; }
}
@media (max-width:899.98px){
  .kop-in{ min-height:72px; }
  .kop-logo img{ height:30px; }
  .kop-tel{ width:44px; height:44px; padding:0; } .kop-tel::after{ display:none; }
  html .kop .knop.kop-cta{ height:44px; min-height:44px; padding:0 18px; font-size:.875rem; }
}
/* eerste koprij vaste hoogte; het logo mag niet uit de rij lopen */
@media (min-width:900px){ .kop-logo, .kop-rechts{ height:100px; } .kop-logo img{ height:40px; width:auto; } }
.kop-badge .ico{ display:none !important; }

/* ───────── Kentekentegel compact (7 okt) ───────── */
.vak-tegel{ padding:18px 18px 16px; max-width:340px; }
.vak-tegel-kop{ gap:10px; margin-bottom:4px; }
.vak-tegel-kop img{ width:32px; height:32px; }
.vak-tegel h2{ font-size:1.0625rem; }
.vak-tegel > p{ font-size:.8125rem; margin:0 0 12px; line-height:1.4; }
.vak-tegel .plaat-rij{ display:flex; gap:8px; align-items:stretch; margin:0; }
.vak-tegel .plaat{ flex:1 1 auto; width:auto; height:48px; min-height:48px; border-radius:6px; }
.vak-tegel .plaat-eu{ width:26px; font-size:.5625rem; padding-bottom:4px; }
.vak-tegel .plaat input{ height:48px; font-size:1.375rem; letter-spacing:.04em; padding-inline:10px; }
.vak-tegel .knop-blok{ width:auto; flex:0 0 auto; min-height:48px; height:48px; padding:0 16px; font-size:.875rem; margin-top:0; }
.vak-tegel [data-kenteken-uit]{ margin-top:12px; font-size:.9375rem; }
.vak-tegel-voet{ margin:10px 0 0 !important; font-size:.75rem !important; }
.vak-tegel .plaat-vorm{ display:flex; flex-direction:column; }
.vak-tegel .plaat-vorm .plaat-rij + .knop-blok{ margin-top:8px; }

/* ───────── Tegels overal (7 okt): spec, index, lijst, splitsing, balken, insluitvlak ───────── */
.spec{ display:grid !important; gap:12px; grid-auto-flow:row !important; grid-template-columns:1fr; border:0 !important; margin-top:28px; }
@media (min-width:640px){ .spec{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); } }
.spec > div{ background:var(--wit); border:1px solid var(--lijn) !important; border-radius:var(--r-k); padding:16px 18px !important; }
.spec dt{ font-size:.75rem; letter-spacing:.1em; color:var(--inkt-zacht); margin-bottom:6px; }
.spec dd, .spec dd.cijfer{ font-size:1.0625rem; font-weight:600; font-stretch:100%; font-variation-settings:"wdth" 100; letter-spacing:0; line-height:1.3; }
.hfd[data-thema="inkt"] .spec > div{ background:var(--inkt-2); border-color:var(--papier-lijn) !important; }
.hfd[data-thema="inkt"] .spec dt{ color:var(--papier-zacht); }

.index{ display:grid; gap:12px; grid-template-columns:1fr; border:0 !important; margin-top:24px; }
@media (min-width:640px){ .index{ grid-template-columns:repeat(2, 1fr); } }
.index li{ display:flex !important; flex-direction:column; gap:4px; padding:16px 18px !important; border:1px solid var(--lijn) !important; border-radius:var(--r-k); background:var(--wit); }
.index li b{ font-size:1.0625rem; font-variation-settings:"wdth" 100; letter-spacing:0; }
.index li span{ font-size:.9375rem; color:var(--inkt-zacht-2); }
.hfd[data-thema="inkt"] .index li{ background:var(--inkt-2); border-color:var(--papier-lijn) !important; }
.hfd[data-thema="inkt"] .index li span{ color:var(--papier-zacht); }

.lijst{ display:grid; gap:10px; border:0 !important; margin-top:16px; }
.lijst li{ padding:14px 18px !important; border:1px solid var(--lijn) !important; border-radius:var(--r-k); background:var(--wit); }
.lijst li a{ text-decoration:none; font-weight:600; }
.lijst-2k{ gap:10px; }
.hfd[data-thema="inkt"] .lijst li{ background:var(--inkt-2); border-color:var(--papier-lijn) !important; }
h3 + .lijst{ margin-top:12px; margin-bottom:28px; }

.splitsing{ gap:16px !important; }
.splitsing > div{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r); padding:24px; }
.splitsing > div h3{ margin-bottom:8px; }
.hfd[data-thema="inkt"] .splitsing > div{ background:var(--inkt-2); border-color:var(--papier-lijn); }
.splitsing-stam{ display:none !important; }
@media (min-width:640px){ .splitsing{ grid-template-columns:1fr 1fr; } }

.dagbalk, .maatlat-tegel{ background:var(--inkt-2); border-radius:var(--r); padding:28px 28px 24px; margin-top:28px; }
.hfd[data-thema="papier"] .dagbalk, .hfd[data-thema="raster"] .dagbalk{ background:var(--wit); border:1px solid var(--lijn); }
.maatlat{ margin-top:36px; }
.insluit{ border:1px solid var(--lijn); border-style:solid; background:var(--grijs); min-height:280px; }
@media (min-width:900px){ .insluit{ min-height:420px; } }
.leeg-blok{ background:var(--inkt-2); border-radius:var(--r); padding:40px 32px; }
.regel .hfd-in > p, .regel .hfd-in > h2{ max-width:60ch; }

/* kentekentegel op tablet niet over de volle breedte */
@media (min-width:600px) and (max-width:899.98px){ .vak-tegel{ max-width:420px; justify-self:start; } }

.vak-tegel .plaat-rij{ flex-direction:row !important; }
.vak-tegel .plaat-rij .knop-blok{ white-space:nowrap; }

/* ───────── Kaartblok: kaart vult het hele blok, ook op smalle schermen; paneel erbovenop ───────── */
.vak-kaartblok{ position:relative; min-height:560px; background:var(--grijs); }
.vak-kaartblok .kaart-vlak{ position:absolute !important; inset:0; width:100%; height:100% !important; }
.vak-kaartblok .vak-paneel{ position:relative !important; inset:auto !important; width:var(--kolom) !important; margin:0 auto !important; padding:220px 0 32px !important; pointer-events:none; }
.vak-kaartblok .vak-paneel-in{ pointer-events:auto; position:relative !important; left:auto !important; top:auto !important; width:100%; max-width:26rem; }
@media (min-width:900px){
  .vak-kaartblok{ min-height:620px; }
  .vak-kaartblok .vak-paneel{ padding:48px 0 !important; }
}

/* vinkjesrij in de voet gecentreerd */
.voet-logos{ justify-content:center; text-align:center; }

/* ───────── APK-pagina: tekst links, compacte kentekentegel rechts ───────── */
.apk-check{ display:grid; gap:24px; align-items:center; }
.apk-check-tekst h2{ margin:0 0 12px; }
.apk-check-tekst .tekst{ max-width:52ch; color:var(--inkt-zacht-2); }
.apk-tegel{ justify-self:start; max-width:380px; box-shadow:var(--sch-kaart); }
.apk-tegel h3{ font-size:1.0625rem; margin:0; }
.apk-tegel .vak-tegel-kop{ margin-bottom:12px; }
@media (min-width:900px){ .apk-check{ grid-template-columns:1fr 380px; gap:56px; } .apk-tegel{ justify-self:end; width:100%; } }
/* vangnet: losse plaat-knop nooit als rondje op twee regels */
.plaat-knop{ white-space:nowrap; height:auto; min-height:48px; width:auto; }

/* ───────── Melding-kaart (Afgekeurd? We bellen eerst.) en slot-CTA op subpagina's ───────── */
.vak-melding-sectie .hfd-in{ padding-block:64px 0 !important; }
.vak-melding{ background:var(--inkt); color:var(--papier); border-radius:var(--r); padding:32px 28px; display:grid; gap:20px; align-items:center; }
.vak-melding-ico{ width:56px; height:56px; border-radius:50%; background:var(--geel); color:var(--inkt); display:grid; place-items:center; }
.vak-melding-ico .ico{ font-size:24px; }
.vak-melding h2{ color:var(--wit); font-size:clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); margin:0 0 8px; line-height:1.1; }
.vak-melding p{ color:rgba(244,244,241,.82); margin:0; max-width:58ch; font-size:1.0625rem; }
@media (min-width:700px){ .vak-melding{ grid-template-columns:auto 1fr; gap:28px; padding:40px 48px; } .vak-melding-ico{ width:72px; height:72px; } .vak-melding-ico .ico{ font-size:30px; } }
.slotregel .hfd-in{ padding-block:24px 72px !important; }
.slotregel .vak-cta h2{ font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.slotregel p{ background:none !important; padding:0 !important; border-radius:0 !important; }

/* ───────── Lijsttegels met kop + toelichting; nooit een losse tegel in een tweekoloms raster ───────── */
.lijst li{ display:flex; flex-direction:column; gap:2px; }
.lijst li b{ font-weight:600; font-size:1.0625rem; }
.lijst li span{ color:var(--inkt-zacht-2); font-size:.9375rem; }
@media (min-width:640px){
  .lijst-2k > li:last-child:nth-child(odd), .index > li:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* Nieuwsbrief in de voet: uitleg op één regel */
.voet-nieuwsbrief p{ max-width:none !important; margin-bottom:0; }
@media (min-width:900px){ .voet-nieuwsbrief p{ white-space:nowrap; } }

/* ───────── Slot-CTA verticaal gecentreerd, rustige tekst ───────── */
.slotregel .hfd-in{ padding-block:56px !important; }
.slotregel .vak-cta p, .vak-cta p{ font-size:1.0625rem !important; font-weight:400 !important; line-height:1.5 !important; letter-spacing:0 !important; }

/* ───────── Beeld naast tegels even hoog als de tegels ───────── */
@media (min-width:900px){
  .opening-raster.onder-lijn{ align-items:stretch; }
  .opening-raster.onder-lijn > .opening-beeld{ aspect-ratio:auto !important; height:100%; min-height:320px; margin:0; }
  .opening-raster.onder-lijn > .opening-beeld img{ height:100%; }
}
.opening-raster.onder-lijn > .opening-beeld .bijschrift{ display:none; }
.opening-raster.onder-lijn .tekst{ margin-top:20px; }
#vier-dingen .index{ margin-top:20px; }

/* ───────── Profielmeter ───────── */
.profiel-intro{ color:var(--papier-zacht) !important; margin:8px 0 24px; max-width:60ch; }
.profiel-tegel{ background:var(--inkt-2); border:1px solid var(--papier-lijn); border-radius:var(--r); padding:24px; max-width:760px; --kleur:var(--groen); }
.profiel-tegel[data-staat="te-laag"]{ --kleur:var(--rood); }
.profiel-kop{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:36px; }
.profiel-label{ font-weight:600; color:var(--papier); }
.profiel-waarde{ font-size:clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight:700; font-stretch:66%; font-variation-settings:"wdth" 66; letter-spacing:.02em; color:var(--kleur); line-height:1; }
.profiel-tegel[data-staat="te-laag"] .profiel-waarde{ color:#FF8A80; }
.profiel-tegel[data-staat="ok"] .profiel-waarde{ color:#6FD39A; }
.profiel-lat{ position:relative; height:32px; }
.profiel-baan{ position:absolute; left:0; right:0; top:10px; height:12px; border-radius:999px; background:rgba(244,244,241,.12); overflow:hidden; }
.profiel-vul{ height:100%; width:50%; background:var(--kleur); border-radius:999px; transition:background-color .2s; }
.profiel-min{ position:absolute; left:20%; top:2px; bottom:2px; width:2px; background:var(--papier); border-radius:1px; }
.profiel-min span{ position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:.75rem; font-weight:600; color:var(--papier-zacht); }
.profiel-lat input[type="range"]{ position:absolute; inset:0; width:100%; height:32px; margin:0; background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer; }
.profiel-lat input[type="range"]::-webkit-slider-runnable-track{ height:32px; background:transparent; }
.profiel-lat input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:30px; height:30px; margin-top:1px; border-radius:50%; background:var(--wit); border:5px solid var(--kleur); box-shadow:0 4px 12px rgba(0,0,0,.35); }
.profiel-lat input[type="range"]::-moz-range-track{ height:32px; background:transparent; }
.profiel-lat input[type="range"]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--wit); border:5px solid var(--kleur); }
.profiel-lat input[type="range"]:focus-visible{ outline:2px solid var(--geel); outline-offset:4px; border-radius:999px; }
.profiel-schaal{ display:flex; justify-content:space-between; margin-top:6px; font-size:.75rem; color:var(--papier-zacht); }
.profiel-oordeel{ margin:18px 0 0 !important; padding:12px 16px; border-radius:var(--r-k); font-weight:600; font-size:.9375rem; background:rgba(46,158,91,.16); color:#8FE0B1; }
.profiel-tegel[data-staat="te-laag"] .profiel-oordeel{ background:rgba(200,55,45,.2); color:#FFA79F; }
#profiel .profiel-tegel + .tekst{ margin-top:24px; }

/* ───────── Bandenmaat-configurator ───────── */
.banden-config{ display:grid; gap:20px; }
@media (min-width:960px){ .banden-config{ grid-template-columns:1.05fr .95fr; align-items:start; gap:28px; } .band-beeld{ position:sticky; top:calc(var(--boven) + 16px); } }
.band-beeld{ background:var(--grijs); border-radius:var(--r); padding:20px; }
.band-beeld-maat{ font-size:clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight:700; font-stretch:66%; font-variation-settings:"wdth" 66; letter-spacing:.03em; margin:0 0 4px; color:var(--inkt); }
.band-beeld svg{ width:100%; height:auto; display:block; }
.band-maten{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:8px; }
.band-maten div{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r-k); padding:10px 14px; }
.band-maten dt{ font-size:.75rem; color:var(--inkt-zacht); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.band-maten dd{ font-weight:700; font-size:1rem; }
.band-uitleg{ margin-top:14px; font-size:.875rem; color:var(--inkt-zacht-2); }
.band-vorm{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r); padding:24px; box-shadow:var(--sch-kaart); display:grid; gap:14px; }
.band-vorm .veld{ margin:0; }
.band-stap{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.0625rem; margin:10px 0 0; }
.band-stap:first-child{ margin-top:0; }
.band-stap span{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--geel); color:var(--inkt); font-size:.875rem; }
.maat-rij{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.maat-rij-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:420px){ .maat-rij-2{ grid-template-columns:1fr; } }
.band-vorm fieldset{ border:0; padding:0; margin:0; min-width:0; }
.band-vorm legend{ font-size:.875rem; font-weight:600; margin-bottom:8px; padding:0; }
.keuze-pillen{ display:flex; flex-wrap:wrap; gap:8px; }
.pil{ position:relative; cursor:pointer; }
.pil input{ position:absolute; opacity:0; width:1px; height:1px; }
.pil span{ display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:44px; padding:0 18px; border:1.5px solid var(--lijn-s); border-radius:999px; font-weight:600; font-size:.9375rem; transition:background-color .15s, color .15s, border-color .15s; }
.pil:hover span{ border-color:var(--inkt); }
.pil input:checked + span{ background:var(--inkt); color:var(--papier); border-color:var(--inkt); }
.pil input:focus-visible + span{ outline:2px solid var(--inkt); outline-offset:2px; }
.vinkje{ display:flex; align-items:center; gap:10px; font-weight:500; min-height:44px; cursor:pointer; }
.vinkje input{ width:20px; height:20px; accent-color:var(--inkt); }
.band-vorm .knop-blok{ margin-top:6px; justify-content:center; }
.band-vorm .plaat-klein{ max-width:240px; }
.band-vorm [aria-invalid="true"]{ border-color:var(--rood); }

/* ───────── Kentekenplaat overal gelijk: geel, dunne donkere rand, nette hoeken ───────── */
.plaat, .formulier .plaat, .plaat.plaat-klein{ background:var(--geel) !important; border:1.5px solid var(--inkt) !important; border-radius:8px !important; overflow:hidden; box-shadow:none !important; }
.plaat .plaat-eu{ border-radius:0 !important; }
.plaat input, .formulier .plaat input, .plaat-klein input{ background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0; height:100%; min-height:0; color:var(--inkt) !important; font-weight:600; font-stretch:66%; font-variation-settings:"wdth" 66; letter-spacing:.04em; text-transform:uppercase; }
.plaat input::placeholder{ color:rgba(17,27,46,.45) !important; }
.plaat:focus-within{ outline:2px solid var(--inkt) !important; outline-offset:2px; }
.plaat-klein{ height:48px !important; }
.plaat-klein input{ font-size:1.375rem; padding-inline:12px; }
.band-beeld-seizoen{ display:inline-flex; align-items:center; height:28px; padding:0 12px; margin-left:8px; vertical-align:middle; border-radius:999px; background:var(--inkt); color:var(--papier); font-size:.8125rem; font-weight:600; font-stretch:100%; font-variation-settings:"wdth" 100; letter-spacing:0; }

/* Formulieren in Vakgarage-stijl: labels gewoon geschreven, keuzepillen zonder kapitalen */
.formulier .veld > label, .formulier legend, .band-vorm label{ text-transform:none !important; letter-spacing:0 !important; font-size:.875rem !important; font-weight:600 !important; color:var(--inkt) !important; }
.pil span{ text-transform:none !important; letter-spacing:0 !important; font-size:.9375rem !important; }
.vinkje span{ text-transform:none; letter-spacing:0; font-size:.9375rem; }
.formulier input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), .formulier select, .formulier textarea{ border:1.5px solid var(--lijn-s); border-radius:10px; background:var(--wit); min-height:48px; }
.formulier input:focus-visible, .formulier select:focus-visible, .formulier textarea:focus-visible{ border-color:var(--inkt); outline:2px solid rgba(17,27,46,.15); outline-offset:0; }

.weekrail .rail i{ left:calc(var(--van) / 10 * 100%) !important; width:calc((var(--tot) - var(--van)) / 10 * 100%) !important; }

/* ───────── Contact: openingstijden- en routetegel ───────── */
.contact-tegels{ display:grid; gap:16px; margin-top:16px; }
@media (min-width:800px){ .contact-tegels{ grid-template-columns:1fr 1fr; } }
.tijden-tegel, .route-tegel{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r); padding:24px; }
.tegel-kop{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.tijden-tegel h3, .route-tegel h3{ font-size:1.25rem; margin:0; }
.status-pil{ display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:999px; background:rgba(200,55,45,.1); color:var(--rood); font-size:.8125rem !important; font-weight:600; letter-spacing:0 !important; text-transform:none !important; }
.status-pil::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.status-pil[data-open="open"]{ background:rgba(46,158,91,.12); color:var(--groen); }
.dagen li{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; font-size:.9375rem; }
.dagen li + li{ margin-top:2px; }
.dagen .uren{ font-weight:600; font-variant-numeric:tabular-nums; }
.dagen li.dag-dicht{ color:var(--inkt-zacht); }
.dagen li.dag-dicht .uren{ font-weight:500; }
.dagen li.vandaag{ background:var(--grijs); }
.dagen li.vandaag .dag{ font-weight:700; display:inline-flex; align-items:center; gap:8px; }
.dagen li.vandaag .dag::after{ content:"Vandaag"; font-size:.6875rem; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--geel); color:var(--inkt); }
.route-tegel .adres{ color:var(--inkt-zacht-2); margin:8px 0 16px; line-height:1.6; }
.route-lijst, .bericht-lijst{ display:grid; gap:10px; margin-bottom:20px; }
.route-lijst li, .bericht-lijst li{ display:flex; align-items:center; gap:12px; font-weight:500; }
.route-lijst a, .bericht-lijst a{ font-weight:700; text-decoration:none; }
.ico-rond{ width:36px; height:36px; border-radius:50%; background:var(--geel); color:var(--inkt); display:inline-grid; place-items:center; flex:none; }
.ico-rond .ico{ font-size:16px; }
.route-knoppen{ display:flex; gap:10px; flex-wrap:wrap; }

/* ───────── Contact: berichtkaart ───────── */
.bericht-raster{ display:grid; gap:16px; align-items:stretch; }
@media (min-width:900px){ .bericht-raster{ grid-template-columns:.85fr 1.15fr; gap:24px; } }
.bericht-info{ background:var(--inkt); color:var(--papier); border-radius:var(--r); padding:32px; display:flex; flex-direction:column; }
.bericht-info h2{ color:var(--wit); margin:0 0 10px; }
.bericht-info > p{ color:rgba(244,244,241,.8); margin:0 0 24px; }
.bericht-info .bericht-lijst{ margin-bottom:28px; }
.bericht-info .bericht-lijst a{ color:var(--wit); }
.bericht-info .knop{ align-self:flex-start; margin-top:auto; }
.bericht-vorm, .hfd .formulier.formulier-2k{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r); padding:28px; box-shadow:var(--sch-kaart); }
.bericht-vorm{ display:grid; gap:14px; }
.bericht-vorm .veld{ margin:0; }
.bericht-vorm .knop-blok{ justify-content:center; }

/* ───────── Gele afspraakkaart: schuine strepen + monogram op de achtergrond ───────── */
.vak-cta{ position:relative; overflow:hidden; isolation:isolate; }
.vak-cta::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:repeating-linear-gradient(-45deg, rgba(17,27,46,.075) 0 14px, transparent 14px 30px);
  -webkit-mask-image:linear-gradient(90deg, transparent 25%, #000 75%);
          mask-image:linear-gradient(90deg, transparent 25%, #000 75%);
}
.vak-cta::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  right:-48px; top:50%; width:min(42vw, 360px); aspect-ratio:1; transform:translateY(-50%) rotate(-8deg);
  background:url("../logo/topline-monogram-inkt.svg") center/contain no-repeat; opacity:.09;
}
.vak-cta > div:first-child{ position:relative; }
.vak-cta > div:first-child::before{ content:""; display:block; width:48px; height:6px; border-radius:3px; background:var(--inkt); margin-bottom:16px; }
@media (max-width:899.98px){ .vak-cta::before{ -webkit-mask-image:linear-gradient(180deg, transparent 35%, #000 100%); mask-image:linear-gradient(180deg, transparent 35%, #000 100%); } .vak-cta::after{ top:auto; bottom:-60px; transform:rotate(-8deg); width:240px; } }

/* Logo in de kop iets kleiner (klant, 7 okt) */
.kop-logo img{ height:26px !important; width:auto; }
@media (min-width:900px){ .kop-logo img{ height:32px !important; } }

/* ───────── Kop compacter (klant, 7 okt): rij 72 px, pillen 42 px, menurij 52 px ───────── */
@media (min-width:900px){
  :root{ --kop-h:124px; --boven:124px; }
  .kop-in{ min-height:72px !important; gap:12px; }
  .kop-logo, .kop-rechts{ height:72px !important; }
  .kop-logo img{ height:28px !important; }
  .kop-rechts{ gap:10px !important; }
  .kop-badge{ height:40px !important; font-size:.875rem !important; gap:8px !important; }
  .kop-badge::before{ width:14px !important; height:14px !important; }
  html .kop .knop.kop-cta{ height:42px !important; min-height:42px !important; padding:0 20px !important; font-size:.875rem !important; gap:10px !important; }
  .kop-tel{ height:42px !important; padding:0 18px !important; font-size:.875rem !important; gap:8px !important; }
  .kop-tel::after{ width:9px; height:9px; }
  .kop-route{ width:40px !important; height:40px !important; }
  .kop-route .ico{ font-size:22px !important; }
  .kop-nav > ul > li > a{ height:52px !important; padding:0 16px !important; font-size:.9375rem !important; }
  .kop-nav > ul > li > a .ico-chevron{ font-size:11px !important; }
  .kop-nav > ul{ margin-left:-16px !important; }
}
.usp-balk-in{ min-height:32px !important; padding-block:6px !important; }

/* USP-balk altijd op één regel */
.usp-balk ul{ flex-wrap:nowrap; }
@media (max-width:1199.98px){ .usp-balk li:nth-child(3){ display:none; } }

/* Menurij gecentreerd (klant, 7 okt) */
@media (min-width:900px){ .kop-nav > ul{ justify-content:center !important; margin-left:0 !important; } }

/* ───────── Bovenste koprij nog compacter (klant, 7 okt): 60 px, pillen 36 px ───────── */
@media (min-width:900px){
  :root{ --kop-h:112px; --boven:112px; }
  .kop-in{ min-height:60px !important; }
  .kop-logo, .kop-rechts{ height:60px !important; }
  .kop-logo img{ height:24px !important; }
  .kop-rechts{ gap:8px !important; }
  .kop-badge{ height:36px !important; font-size:.8125rem !important; font-weight:600 !important; gap:6px !important; padding:0 6px !important; }
  .kop-badge::before{ width:10px !important; height:10px !important; }
  html .kop .knop.kop-cta{ height:36px !important; min-height:36px !important; padding:0 16px !important; font-size:.8125rem !important; gap:8px !important; }
  html .kop .knop.kop-cta::after{ width:9px !important; height:9px !important; }
  .kop-tel{ height:36px !important; padding:0 14px !important; font-size:.8125rem !important; gap:6px !important; }
  .kop-tel .ico{ font-size:13px !important; }
  .kop-tel::after{ width:8px !important; height:8px !important; }
  .kop-route{ width:36px !important; height:36px !important; }
  .kop-route .ico{ font-size:19px !important; }
}

/* ───────── Correctie (klant, 7 okt): strepen in het vlak ACHTER de gele tegel, de tegel zelf weer effen ───────── */
.vak-cta::before, .vak-cta::after, .vak-cta > div:first-child::before{ content:none !important; display:none !important; }
.vak-cta{ box-shadow:0 18px 40px rgba(17,27,46,.18); }

.hfd:has(> .hfd-in > .vak-cta){ position:relative; overflow:hidden; isolation:isolate; background:var(--inkt) !important; }
.hfd:has(> .hfd-in > .vak-cta)::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(-45deg, rgba(244,195,0,.16) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(244,244,241,.05) 0 1px, transparent 1px 13px);
  -webkit-mask-image:radial-gradient(120% 140% at 50% 50%, #000 30%, transparent 85%);
          mask-image:radial-gradient(120% 140% at 50% 50%, #000 30%, transparent 85%);
}
.hfd:has(> .hfd-in > .vak-cta)::after{
  content:""; position:absolute; z-index:-1; pointer-events:none; left:-80px; bottom:-120px; width:420px; aspect-ratio:1;
  background:url("../logo/topline-monogram-geel.svg") center/contain no-repeat; opacity:.07; transform:rotate(-12deg);
}
.hfd:has(> .hfd-in > .vak-cta) > .hfd-in{ padding-block:72px !important; }
@media (max-width:899.98px){ .hfd:has(> .hfd-in > .vak-cta) > .hfd-in{ padding-block:48px !important; } .hfd:has(> .hfd-in > .vak-cta)::after{ width:260px; bottom:-80px; } }
/* scheiding met de donkere voet eronder */
.hfd:has(> .hfd-in > .vak-cta) + * , main > .hfd:last-child:has(> .hfd-in > .vak-cta){ border-bottom:1px solid var(--papier-lijn); }

/* Gegevenstegels: drie naast elkaar, nooit 2 + 1 */
@media (min-width:640px){ .spec:has(> div:nth-child(3):last-child){ grid-template-columns:repeat(3, 1fr) !important; } .spec:has(> div:nth-child(2):last-child), .spec:has(> div:nth-child(4):last-child){ grid-template-columns:repeat(2, 1fr) !important; } }

/* ───────── Afkeur-blok (APK) met drie stappen ───────── */
.vak-melding-sectie .hfd-in{ padding-block:64px !important; }
.vak-melding{ display:block !important; background:var(--inkt); border-radius:var(--r); padding:32px 24px; position:relative; overflow:hidden; box-shadow:0 18px 40px rgba(17,27,46,.18); }
.vak-melding::before{ content:""; position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(244,195,0,.16), transparent 65%); pointer-events:none; }
.vak-melding-kop{ display:flex; align-items:center; gap:20px; position:relative; }
.vak-melding-ico{ position:relative; flex:none; width:64px !important; height:64px !important; border-radius:50%; background:var(--geel); color:var(--inkt); display:grid; place-items:center; }
.vak-melding-ico .ico{ font-size:26px !important; }
.vak-melding-ico::before, .vak-melding-ico::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--geel); opacity:0; animation:bel-ring 2.4s cubic-bezier(.2,.7,.1,1) infinite; }
.vak-melding-ico::after{ animation-delay:1.2s; }
@keyframes bel-ring{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.7); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .vak-melding-ico::before, .vak-melding-ico::after{ animation:none; } }
.vak-melding h2{ color:var(--wit) !important; font-size:clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem) !important; margin:0 0 6px !important; }
.vak-melding-tekst p{ color:rgba(244,244,241,.78) !important; margin:0 !important; font-size:1.0625rem; }
.melding-stappen{ display:grid; gap:12px; margin-top:28px; position:relative; counter-reset:none; }
@media (min-width:760px){ .melding-stappen{ grid-template-columns:repeat(3, 1fr); } }
.melding-stappen li{ position:relative; background:var(--inkt-2); border:1px solid var(--papier-lijn); border-radius:var(--r-k); padding:18px 18px 20px; display:flex; flex-direction:column; gap:4px; }
.melding-stappen li b{ color:var(--wit); font-size:1.0625rem; }
.melding-stappen li small{ color:rgba(244,244,241,.7); font-size:.9375rem; line-height:1.45; }
.melding-nr{ width:30px; height:30px; border-radius:50%; background:rgba(244,195,0,.14); color:var(--geel); border:1.5px solid var(--geel); display:grid; place-items:center; font-weight:700; font-size:.875rem; margin-bottom:8px; }
.melding-stappen li:nth-child(2){ border-color:rgba(244,195,0,.55); }
.melding-stappen li:nth-child(2) .melding-nr{ background:var(--geel); color:var(--inkt); }
@media (min-width:760px){
  .melding-stappen li:not(:last-child)::after{ content:""; position:absolute; right:-10px; top:33px; width:8px; height:8px; border-top:2px solid var(--geel); border-right:2px solid var(--geel); transform:rotate(45deg); z-index:1; }
  .vak-melding{ padding:40px 44px; }
}

/* Vlak achter de afkeur-tegel: rasterblauw uit het merkboek met schuine strepen (klant: "blauwe achtergrond") */
.hfd.vak-melding-sectie{ position:relative; overflow:hidden; isolation:isolate; background:var(--raster) !important; }
.hfd.vak-melding-sectie::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(-45deg, rgba(17,27,46,.10) 0 2px, transparent 2px 26px), repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 1px, transparent 1px 13px);
  -webkit-mask-image:radial-gradient(120% 140% at 50% 50%, #000 30%, transparent 90%); mask-image:radial-gradient(120% 140% at 50% 50%, #000 30%, transparent 90%);
}
.hfd.vak-melding-sectie::after{ content:""; position:absolute; z-index:-1; pointer-events:none; right:-60px; bottom:-110px; width:400px; aspect-ratio:1; background:url("../logo/topline-monogram-inkt.svg") center/contain no-repeat; opacity:.08; transform:rotate(-12deg); }

/* ───────── Afspraaktegel als onderdeel van de voet (op elke pagina), compact, strepen lopen over in de voet ───────── */
.voet{ position:relative; isolation:isolate; border-top:0 !important; }
.voet-cta-zone{ position:relative; width:var(--kolom); margin-inline:auto; padding-top:48px; }
.voet-cta-zone::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:calc(50% - 50vw); right:calc(50% - 50vw); top:0; height:calc(100% + 120px);
  background:
    radial-gradient(60% 90% at 50% 40%, rgba(244,195,0,.10), transparent 70%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 140px, #000 55%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 140px, #000 55%, transparent 100%);
}
.voet-cta{ background:var(--geel); color:var(--inkt); border-radius:var(--r); padding:22px 24px; display:grid; gap:16px; align-items:center; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.voet-cta h2{ color:var(--inkt) !important; font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem) !important; font-weight:700 !important; letter-spacing:-.01em !important; text-transform:none !important; margin:0 0 4px !important; line-height:1.15; }
.voet-cta p{ margin:0; color:rgba(17,27,46,.75); font-size:.9375rem; }
.voet-cta-knoppen{ display:flex; gap:10px; flex-wrap:wrap; }
.voet-cta .knop{ min-height:44px; height:44px; padding:0 20px; font-size:.9375rem; }
.voet .voet-cta .knop-inkt{ background:var(--inkt); color:var(--papier); --knop-hover:var(--inkt-2); }
.voet .voet-cta .knop-wit{ background:var(--wit); color:var(--inkt); --knop-hover:var(--papier-2); gap:8px; }
.voet .voet-cta .knop-wit .ico{ font-size:14px; }
.voet-cta a{ text-decoration:none !important; padding-block:0 !important; margin-block:0 !important; }
@media (min-width:900px){ .voet-cta{ grid-template-columns:1fr auto; padding:24px 32px; gap:24px; } .voet-cta-zone{ padding-top:56px; } }
.voet-cta-zone + .voet-in{ padding-top:56px !important; }

.voet .voet-cta .knop{ display:inline-flex !important; align-items:center !important; justify-content:center; gap:10px; line-height:1; white-space:nowrap; }

/* Afkeur-blok: effen rasterblauwe achtergrond, zonder strepen en monogram (klant, 8 okt) */
.hfd.vak-melding-sectie::before, .hfd.vak-melding-sectie::after{ content:none !important; display:none !important; }

/* Powered by in dezelfde letter als de rest van de voetregel (klant, 8 okt) */
.voet-onder .wb-powered span{ font-family:var(--f) !important; font-size:.875rem !important; letter-spacing:0 !important; text-transform:none !important; line-height:1.5 !important; color:var(--papier-zacht) !important; font-weight:400 !important; }
.voet-onder .wb-powered{ gap:8px; }
.voet-onder .wb-powered svg{ height:.95rem; }

/* Bandentekening blijft in het midden van het scherm staan zolang je door het bestelformulier scrolt;
   bandenmaat.js meet de hoogte (--bb-h). Past de kaart niet in beeld, dan blijft ze onder de kop hangen. (klant, 9 okt) */
@media (min-width:960px){
  .banden-config{ align-items:start !important; }
  .band-beeld{ position:sticky !important; align-self:start !important; top:max(min(calc(var(--boven) + 16px), calc(100vh - var(--bb-h, 720px) - 16px)), calc(50vh - var(--bb-h, 720px) / 2)) !important; }
}

/* EU-sterren boven NL op elke kentekenplaat (klant, 8 okt) */
.plaat .plaat-eu{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:space-between !important; padding:6px 0 5px !important; }
.plaat .plaat-eu::before{ content:""; display:block; width:min(80%, 22px); aspect-ratio:1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F4C300' d='M12.00,2.05L12.42,3.22L13.66,3.26L12.68,4.02L13.03,5.22L12.00,4.52L10.97,5.22L11.32,4.02L10.34,3.26L11.58,3.22ZM16.10,3.15L16.52,4.32L17.76,4.36L16.78,5.12L17.13,6.31L16.10,5.62L15.07,6.31L15.42,5.12L14.44,4.36L15.68,4.32ZM19.10,6.15L19.52,7.32L20.77,7.36L19.79,8.12L20.13,9.32L19.10,8.62L18.07,9.32L18.42,8.12L17.44,7.36L18.68,7.32ZM20.20,10.25L20.62,11.42L21.86,11.46L20.88,12.22L21.23,13.42L20.20,12.72L19.17,13.42L19.52,12.22L18.54,11.46L19.78,11.42ZM19.10,14.35L19.52,15.52L20.77,15.56L19.79,16.32L20.13,17.52L19.10,16.82L18.07,17.52L18.42,16.32L17.44,15.56L18.68,15.52ZM16.10,17.35L16.52,18.52L17.76,18.56L16.78,19.32L17.13,20.52L16.10,19.82L15.07,20.52L15.42,19.32L14.44,18.56L15.68,18.52ZM12.00,18.45L12.42,19.62L13.66,19.66L12.68,20.42L13.03,21.62L12.00,20.92L10.97,21.62L11.32,20.42L10.34,19.66L11.58,19.62ZM7.90,17.35L8.32,18.52L9.56,18.56L8.58,19.32L8.93,20.52L7.90,19.82L6.87,20.52L7.22,19.32L6.24,18.56L7.48,18.52ZM4.90,14.35L5.32,15.52L6.56,15.56L5.58,16.32L5.93,17.52L4.90,16.82L3.87,17.52L4.21,16.32L3.23,15.56L4.48,15.52ZM3.80,10.25L4.22,11.42L5.46,11.46L4.48,12.22L4.83,13.42L3.80,12.72L2.77,13.42L3.12,12.22L2.14,11.46L3.38,11.42ZM4.90,6.15L5.32,7.32L6.56,7.36L5.58,8.12L5.93,9.32L4.90,8.62L3.87,9.32L4.21,8.12L3.23,7.36L4.48,7.32ZM7.90,3.15L8.32,4.32L9.56,4.36L8.58,5.12L8.93,6.31L7.90,5.62L6.87,6.31L7.22,5.12L6.24,4.36L7.48,4.32Z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ───────── Reparatie: productbeeld verschijnt bij hover over de tegel (klant, 9 okt) ───────── */
.index li.product-tegel, .lijst li.product-tegel{ position:relative; overflow:visible; padding-right:112px !important; min-height:92px; transition:border-color .2s, box-shadow .2s, transform .2s; }
.product-beeld{ position:absolute; right:14px; top:50%; width:88px; height:88px; object-fit:contain; transform:translateY(-50%) scale(.85) rotate(-4deg); opacity:.55; transition:transform .35s cubic-bezier(.2,.7,.1,1), opacity .25s; pointer-events:none; filter:drop-shadow(0 8px 14px rgba(17,27,46,.22)); }
@media (hover:hover) and (min-width:900px){
  .index li.product-tegel, .lijst li.product-tegel{ padding-right:132px !important; }
  .product-beeld{ width:110px; height:110px; right:12px; opacity:.35; transform:translateY(-50%) scale(.72) rotate(-6deg); }
  .index li.product-tegel:hover, .lijst li.product-tegel:hover{ border-color:var(--inkt) !important; box-shadow:0 14px 32px rgba(17,27,46,.14); transform:translateY(-2px); z-index:2; }
  .index li.product-tegel:hover .product-beeld, .lijst li.product-tegel:hover .product-beeld{ opacity:1; transform:translateY(-50%) scale(1.45) rotate(0deg); right:-6px; filter:drop-shadow(0 16px 24px rgba(17,27,46,.28)); }
}
.product-beeld[data-kapot]{ display:none; }
@media (prefers-reduced-motion:reduce){ .product-beeld{ transition:none; } }

/* Donkere laatste sectie loopt naadloos over in de voet: geen harde streepjesrand (klant, 9 okt) */
main > .hfd[data-thema="inkt"]:last-child{ padding-bottom:24px !important; }

/* Voet: levend garage-behang (assets/js/garage-doodles.js). Elk icoon beweegt los op een eigen moment;
   canvas ligt achter de inhoud, vangt geen klikken (de voet luistert naar de muis). (klant, 9 okt) */
.voet{ overflow:hidden; }
.voet-doodle{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:block;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 40%, #000 55%, rgba(0,0,0,.55) 100%);
          mask-image:radial-gradient(130% 100% at 50% 40%, #000 55%, rgba(0,0,0,.55) 100%); }

/* Profielsectie: lichtgrijs, alles gecentreerd, donkere meterkaart (klant, 10 okt) */
#profiel.hfd{ background:var(--grijs) !important; }
#profiel .onder-lijn{ display:flex; flex-direction:column; align-items:center; text-align:center; }
#profiel h2{ color:var(--inkt) !important; }
#profiel .profiel-intro{ color:rgba(17,27,46,.72) !important; max-width:60ch; margin-inline:auto; }
#profiel .profiel-tegel{ width:100%; max-width:760px; margin-inline:auto; text-align:left; background:var(--inkt) !important; border-color:transparent !important; box-shadow:0 30px 70px -24px rgba(17,27,46,.45); }
#profiel .profiel-tegel + .tekst{ color:rgba(17,27,46,.78) !important; max-width:60ch; margin-inline:auto; }

/* mailicoon, zelfde lijnstijl als ico-tel */
.ico-mail{ --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='M3 6h18v12H3zM3 7l9 6 9-6'/%3E%3C/svg%3E"); }

/* ───────── Mobiele kop: één rustige rij (logo · bel · menu), USP-regel past op het scherm (klant, 10 okt) ───────── */
@media (max-width:899.98px){
  .usp-balk-in{ min-height:30px !important; padding-block:5px !important; }
  .usp-balk ul{ max-width:100%; }
  .usp-balk li{ min-width:0; font-size:.75rem; }
  .usp-balk li:first-child{ overflow:hidden; text-overflow:ellipsis; }
  .kop-in{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; min-height:60px !important; height:60px !important; padding-block:0 !important; grid-template-columns:none !important; grid-template-rows:none !important; }
  .kop-logo{ flex:0 1 auto; min-width:0; display:flex; align-items:center; }
  .kop-logo img{ height:22px !important; width:auto !important; }
  .kop-rechts{ flex:0 0 auto; display:flex !important; align-items:center !important; gap:8px !important; margin:0 !important; width:auto !important; grid-column:auto !important; grid-row:auto !important; }
  .kop-rechts .kop-badge, .kop-rechts .kop-route{ display:none !important; }
  .kop-cta{ height:40px !important; min-height:40px !important; padding:0 16px !important; font-size:.875rem !important; }
  .kop-cta::after, .kop-cta .ico{ display:none !important; }
  .kop-tel{ width:40px !important; height:40px !important; min-width:40px !important; padding:0 !important; border-radius:50% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
  .kop-tel span{ display:none !important; }
  .kop-menu{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px; height:40px !important; padding:0 14px !important; border-radius:999px !important; border:1.5px solid rgba(17,27,46,.2) !important; background:var(--wit) !important; color:var(--inkt) !important; font-size:.875rem !important; font-weight:600; white-space:nowrap; }
  .kop-menu::before{ content:""; width:16px; height:10px; flex:0 0 auto; background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat, linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat, linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat; }
}
@media (max-width:479.98px){
  .kop-cta{ display:none !important; }
  .kop-menu span{ display:none; }
  .kop-menu{ width:40px; padding:0 !important; }
}
@media (max-width:899.98px){
  :root{ --kop-h:60px; --boven:60px; }
  /* open menu hangt direct onder de kop, ook als de USP-balk nog in beeld is */
  html[data-menu="open"] .kop-nav{ position:absolute !important; top:100% !important; left:0 !important; right:0 !important; bottom:auto !important; height:calc(100dvh - 60px) !important; margin:0 !important; padding-inline:0 !important; border-top:1px solid var(--lijn) !important; }
  html[data-menu="open"] .kop-nav > ul{ padding-bottom:48px !important; }
}

/* Witte kentekentegel in de donkere hero: eigen donkere tekstkleuren, anders erven label/bouwjaar/kleur het lichte thema (klant, 10 okt) */
.vak-tegel{ --fg:var(--inkt); --fg-zacht:rgba(17,27,46,.78); --fg-zacht-2:rgba(17,27,46,.62); color:var(--inkt); }
.vak-tegel .kc-auto dt{ color:rgba(17,27,46,.62) !important; }
.vak-tegel .kc-jaar, .vak-tegel .kc-kleur{ color:rgba(17,27,46,.66) !important; }

/* Stappen afkeur: pijl als rond badge precies midden in de tussenruimte, verticaal gecentreerd (klant, 10 okt) */
@media (min-width:760px){
  .melding-stappen{ gap:56px !important; }
  .melding-stappen li:not(:last-child)::after{
    content:"" !important; position:absolute !important; top:50% !important; right:-43px !important; width:30px !important; height:30px !important;
    transform:translateY(-50%) !important; border:1.5px solid rgba(244,195,0,.6) !important; border-radius:50% !important; background:var(--inkt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23F4C300' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M10 7l5 5-5 5'/%3E%3C/svg%3E") center/16px no-repeat !important; z-index:2 !important;
  }
}

/* "Kleine klus" (laatste sectie reparatie): eigen blauw i.p.v. voetkleur, strakke kaart met chips (klant, 10 okt) */
#kleine-klus.hfd{ background:var(--grijs) !important; }
#kleine-klus .leeg-blok{ background:var(--inkt) !important; border-color:transparent !important; box-shadow:0 30px 70px -24px rgba(17,27,46,.45); }
#kleine-klus .leeg-blok{ background:var(--inkt) !important; border:1px solid transparent; padding:40px !important; margin:0 !important; }
#kleine-klus .leeg-kop{ font-size:clamp(2rem, 1.4rem + 2.4vw, 3.25rem) !important; max-width:none !important; margin:0 !important; padding:0 !important; }
#kleine-klus .leeg-sub{ font-size:1.125rem !important; font-weight:400 !important; font-variation-settings:normal !important; line-height:1.6 !important; letter-spacing:0 !important; color:rgba(244,244,241,.8) !important; max-width:56ch !important; margin-top:14px !important; }
.klus-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.klus-chips li{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:999px; background:rgba(244,195,0,.12); border:1px solid rgba(244,195,0,.45); color:var(--geel); font-weight:600; font-size:.9375rem; }
.klus-tijd{ display:flex; align-items:center; gap:10px; margin-top:20px; color:rgba(244,244,241,.75); font-size:.9375rem; }
.klus-tijd .ico{ color:var(--geel); font-size:16px; }
@media (max-width:640px){ #kleine-klus .leeg-blok{ padding:28px 22px !important; } .klus-tijd{ align-items:flex-start; } }
#kleine-klus.hfd, #kleine-klus .hfd-in{ min-height:0 !important; }
#kleine-klus .hfd-in{ padding-bottom:64px !important; }
#kleine-klus .leeg-blok{ margin-top:0 !important; margin-bottom:0 !important; }

/* Producttegels in donkere secties: blauwe tegel met lichtvlek achter het product, beeld lichter (klant, 10 okt) */
.hfd[data-thema="inkt"] .index li.product-tegel, .hfd[data-thema="inkt"] .lijst li.product-tegel{
  background:var(--inkt-2) !important; border:1px solid rgba(185,197,211,.22) !important; overflow:hidden !important; }
.hfd[data-thema="inkt"] li.product-tegel::before{ content:""; position:absolute; right:-30px; top:50%; width:200px; height:200px; transform:translateY(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(214,224,236,.42) 0%, rgba(185,197,211,.16) 38%, transparent 68%); transition:opacity .3s; }
.hfd[data-thema="inkt"] li.product-tegel > b, .hfd[data-thema="inkt"] li.product-tegel > span{ position:relative; }
.hfd[data-thema="inkt"] li.product-tegel b{ color:var(--wit) !important; }
.hfd[data-thema="inkt"] li.product-tegel span{ color:rgba(244,244,241,.78) !important; }
.hfd[data-thema="inkt"] .product-beeld{ opacity:1 !important; filter:brightness(1.18) contrast(1.05) drop-shadow(0 8px 14px rgba(0,0,0,.35)) !important; }
@media (hover:hover) and (min-width:900px){
  .hfd[data-thema="inkt"] .index li.product-tegel:hover, .hfd[data-thema="inkt"] .lijst li.product-tegel:hover{ border-color:var(--geel) !important; overflow:visible !important; }
  .hfd[data-thema="inkt"] li.product-tegel:hover::before{ opacity:.6; }
}

/* Afgekeurd-sectie: gewoon wit, net als de rest (klant, 10 okt) */
.hfd.vak-melding-sectie{ background:var(--grijs) !important; }
.hfd.vak-melding-sectie::before{ display:none !important; }
.hfd.vak-melding-sectie .vak-melding{ box-shadow:0 30px 70px -24px rgba(17,27,46,.4) !important; }

/* APK "Wanneer verloopt jouw APK?": merkblauw zoals profiel en kleine klus (klant, 10 okt) */
#wanneer.hfd{ background:var(--inkt) !important; }
#wanneer .vak-tegel, #wanneer .apk-tegel{ box-shadow:0 24px 60px -20px rgba(0,0,0,.45) !important; }
#wanneer .apk-check-tekst .tekst{ color:rgba(244,244,241,.82) !important; }

/* Contact · kaart: witte infokaart linksboven op de kaart met logo, status, route en bellen (klant, 10 okt) */
#kaart .kaart{ border-radius:var(--r); overflow:hidden; box-shadow:0 30px 70px -28px rgba(17,27,46,.35); margin-top:24px; }
#kaart .kaart .kaart-vlak{ border-radius:0; }
.bord.bord-v2{ top:24px; bottom:auto !important; left:24px; width:min(380px, calc(100% - 48px)); background:var(--wit) !important; color:var(--inkt) !important; border:0 !important; border-top:0 !important; border-radius:var(--r-k); padding:20px !important; box-shadow:0 18px 44px -12px rgba(17,27,46,.35); display:grid; gap:14px; }
.bord-v2::before, .bord-v2::after{ display:none !important; }
.bord-v2 .bord-kop{ display:flex; align-items:center; gap:14px; }
.bord-v2 .bord-logo{ width:44px; height:44px; padding:9px; border-radius:12px; background:var(--inkt); object-fit:contain; flex:0 0 auto; }
.bord-v2 .bord-naam{ font-weight:700; font-size:1.0625rem; margin:0; color:var(--inkt); }
.bord-v2 .bord-adres{ font-weight:500 !important; color:rgba(17,27,46,.7); margin:2px 0 0 !important; font-size:.9375rem; }
.bord-v2 .status-pil{ justify-self:start; margin:0 !important; letter-spacing:0 !important; text-transform:none !important; font-size:.875rem !important; }
.bord-v2 .bord-knoppen{ display:flex; gap:8px; flex-wrap:wrap; }
.bord-v2 .bord-knoppen .knop{ height:42px; min-height:42px; padding:0 16px; font-size:.9rem; gap:8px; display:inline-flex !important; align-items:center; margin:0 !important; text-decoration:none !important; }
.bord-v2 .bord-knoppen .knop-rand{ color:var(--inkt); }
.bord-v2 .bord-knoppen .ico{ font-size:15px; }
@media (max-width:640px){
  #kaart .kaart{ display:flex; flex-direction:column; background:var(--wit); }
  .bord.bord-v2{ position:static !important; width:auto; margin:0; border-radius:0; box-shadow:none; }
  .bord-v2 .bord-knoppen .knop{ flex:1 1 0; justify-content:center; }
}
.bord-v2 .status-pil{ color:var(--rood) !important; font-weight:600 !important; }
.bord-v2 .status-pil[data-open="open"]{ color:var(--groen) !important; }
.bord.bord-v2{ width:min(420px, calc(100% - 48px)); }
.bord-v2 .bord-knoppen{ flex-wrap:nowrap; }
.bord-v2 .bord-knoppen .knop{ white-space:nowrap; }
@media (max-width:640px){ .bord.bord-v2{ width:auto; } .bord-v2 .bord-knoppen{ flex-wrap:wrap; } }
#kaart h2{ text-align:center; font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem) !important; max-width:none; margin-inline:auto; }

/* Knop in het kentekenresultaat: altijd leesbaar, gele pil zoals de andere hoofdknoppen (klant, 10 okt) */
.vak-tegel .kc-knop{ background:var(--geel) !important; color:var(--inkt) !important; border-radius:999px !important; min-height:52px !important; font-weight:700 !important; gap:10px; transition:background .2s, transform .2s; }
.vak-tegel .kc-knop::after{ content:""; width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); margin-left:2px; }
.vak-tegel .kc-knop:hover, .vak-tegel .kc-knop:focus-visible{ background:var(--inkt) !important; color:var(--wit) !important; }

/* Homepage · Google-reviewband (score 4,5 · 50 reviews, 11 okt) */
#reviews .hfd-in{ padding-block:40px 8px; }
.review-band{ display:grid; gap:28px; align-items:center; background:var(--inkt); color:var(--papier); border-radius:var(--r); padding:32px; box-shadow:0 30px 70px -28px rgba(17,27,46,.45); }
@media (min-width:860px){ .review-band{ grid-template-columns:260px 1fr; padding:40px 48px; gap:48px; } }
.review-score{ display:grid; justify-items:start; gap:6px; }
.review-score b{ font-size:4.5rem; line-height:1; font-weight:700; color:var(--geel); font-variant-numeric:tabular-nums; }
.review-score small{ color:rgba(244,244,241,.72); font-size:.9375rem; }
.review-sterren{ position:relative; display:inline-block; width:140px; height:24px; background:linear-gradient(90deg, rgba(244,244,241,.22), rgba(244,244,241,.22)); -webkit-mask:var(--ster-rij) 0 0/28px 24px repeat-x; mask:var(--ster-rij) 0 0/28px 24px repeat-x;
  --ster-rij:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.1.8-5.3 4.9 1.5 7-6.4-3.6-6.4 3.6 1.5-7L1.8 8.9l7.1-.8z'/%3E%3C/svg%3E"); }
.review-sterren i{ position:absolute; inset:0 auto 0 0; width:var(--vul); background:var(--geel); }
.review-tekst h2{ color:var(--wit) !important; margin:0 0 10px; font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); }
.review-tekst p{ color:rgba(244,244,241,.8); margin:0 0 20px; max-width:52ch; }
.review-knoppen{ display:flex; gap:10px; flex-wrap:wrap; }
.review-knoppen .knop{ display:inline-flex !important; align-items:center; height:48px; padding:0 22px; text-decoration:none; }
.review-knoppen .knop-rand{ color:var(--wit) !important; }

/* Autowidget onder de hero: zelfde voetblauw als de dienstensectie eronder, balk schuift over de hero (12 okt) */
.auto-widget-plek{ background:var(--inkt); position:relative; z-index:5; padding-bottom:0; display:flow-root; }
.auto-widget-plek auto-widget{ display:block; width:var(--kolom); max-width:1240px; margin-inline:auto; }
@media (max-width:899.98px){ #welkom.hfd{ padding-bottom:calc(var(--sectie-pad, 56px) + 80px) !important; } }
#kenteken-check .vak-tegel-kop{ align-items:center; }
#kenteken-check .vak-tegel-kop h2{ font-size:1.0625rem !important; margin:0 !important; line-height:1.2; }
#kenteken-check .vak-tegel-kop p{ font-size:.8125rem; margin:2px 0 0; color:rgba(17,27,46,.62); line-height:1.35; }
/* vinkjes onder de widgetbalk, gecentreerd (12 okt) */
.widget-vinkjes{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 36px; list-style:none; margin:0; padding:22px 16px 6px; color:rgba(244,244,241,.85); font-size:.9375rem; }
.widget-vinkjes li{ display:inline-flex; align-items:center; gap:8px; }
.widget-vinkjes .ico{ color:var(--geel); font-size:15px; }
@media (max-width:899.98px){ #welkom.hfd{ padding-bottom:calc(var(--sectie-pad, 56px) + 40px) !important; } }

/* Kentekenplaten op de site: tekst en placeholder gecentreerd, net als in de widget (klant, 12 okt) */
.plaat input{ text-align:center !important; padding-inline:12px !important; }
.plaat input::placeholder{ text-align:center; }