/* VindJeFietsenmaker: gedeelde stijl voor alle publieke pagina's.
 *
 * Gebruikt door seoLayout() in server.js en door public/index.html en
 * public/reparateurs.html. Tot 26-09-2026 stond deze stijl inline in elke
 * pagina, in drie net verschillende kopieën (drie groenen, twee donkertinten,
 * koele en warme grijzen door elkaar).
 *
 * Opbouw: 1 tokens, 2 basis, 3 typografie, 4 knoppen, 5 chips en status,
 * 6 kaarten, 7 formulieren, 8 kop en navigatie, 9 kruimelpad, 10 voet,
 * 11 cookiemelding, 12 FAQ, 13 paginaonderdelen (stad, dienst, blog, ...),
 * 14 winkelpagina, 15 responsief.
 *
 * Na een wijziging: node scripts/asset-versies.js (zet de ?v= goed;
 * lib/assets.test.js faalt anders).
 */

/* ── 0. Lettertype ─────────────────────────────────────────────────────── */
/* Inter 5.3.0 (variabel, 100 tot 900), zelf gehost: public/fonts/inter-5.3.0/,
   het latin-deel uit @fontsource-variable/inter (48 kB, met het euroteken).
   Tot 27-09-2026 stond hier system-ui: SF op een Mac, Segoe UI op Windows en
   Roboto op Android, elk met net andere gewichten. De unicode-range komt uit
   de fontsource-CSS. "Inter Fallback" is Arial met de maten van Inter, zodat
   de tekst niet verspringt als het lettertype binnenkomt (font-display:swap). */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-5.3.0/inter-latin-wght-normal.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}
/* Terugval tot Inter binnen is: Arial, per gewicht even breed als Inter (gemeten
   op een zin van 170 tekens), met dezelfde regelhoogte. Was een vlak voor alle
   gewichten: vet werd nagebootste vette Arial, 2,4% smaller dan Inter 700, en
   koppen braken bij de wissel anders af (CLS 0,13 op /over-ons, review 27-09). */
@font-face{font-family:"Inter Fallback";font-weight:1 450;src:local("Arial"),local("ArialMT");size-adjust:106.5%;ascent-override:90.96%;descent-override:22.67%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:451 550;src:local("Arial"),local("ArialMT");size-adjust:107.7%;ascent-override:89.95%;descent-override:22.41%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:551 650;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:101.4%;ascent-override:95.54%;descent-override:23.81%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";font-weight:651 1000;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:102.5%;ascent-override:94.51%;descent-override:23.55%;line-gap-override:0%}

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
/* Ronde 7 (27-09-2026, "een tandje professioneler"): rustiger en strakker.
   Lopende tekst in --text-2 (11,3:1), --muted alleen voor meta (6,9:1),
   randen iets steviger, radii 4/6/8/12/16 in plaats van 10 tot 24 en pillen,
   kaarten zonder schaduw.
   Sinds de avond van 27-09-2026 staan de pillen, iconen, tinten en de lift
   van opmaak C weer op deze tokens (Tom: "er lijken wat dingen weg te zijn en
   pills etc"). Het lettertype, de tokens en de typografie van ronde 7 blijven. */
:root{
  --font:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --green:#1a8254;--green-d:#146b45;--green-dd:#0f4f33;--green-l:#e8f3ec;--green-xl:#f4faf6;
  --lime:#8dc63f;
  /* --muted haalt 4,5:1 ook op --g200 en --green-l (was #66706b: 4,50 en 4,51).
     --soft is voor iconen, scheidingstekens en placeholders, niet voor tekst. */
  --text:#1a2520;--text-2:#333d38;--muted:#525c57;--soft:#8a938e;
  --border:#e2e0d9;--border-strong:#cfccc4;--hairline:rgba(26,37,32,.09);
  --bg:#fafaf7;--card:#fff;--vlak:#f1f0ec;--vlak-hover:#f6f6f3;
  --amber:#f5a623;--amber-l:#fff6e5;--amber-b:#f6dfae;--amber-d:#8a5a00;--amber-rand:#b87708;
  /* --ok: 5,3:1 op --ok-l en 5,9:1 op wit (was #15803d: 4,50 op --ok-l) */
  --ok:#13733a;--ok-l:#e8f6ec;--bad:#b42318;--bad-l:#fdeceb;
  /* Dicht is geen probleem: overal dezelfde grijze stip (ronde 6). Rood is
     alleen voor echte fouten. */
  --stip-dicht:var(--soft);
  /* 4 labels, 6 kleine vlakken, 8 knoppen en velden, 12 kaarten, 16 grote
     blokken. --r-pill alleen nog voor stippen, avatars en de schakelaar. */
  --r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:999px;
  /* Kaarten hebben geen schaduw meer, alleen een rand: --shadow-xs is leeg.
     --shadow-sm is de hover, --shadow-md voor wat echt zweeft (menu, cookie). */
  --shadow-xs:0 0 #0000;
  --shadow-sm:0 1px 2px rgba(16,24,20,.06),0 2px 8px -2px rgba(16,24,20,.08);
  --shadow-md:0 2px 4px rgba(16,24,20,.04),0 12px 28px -10px rgba(16,24,20,.16);
  --ring:0 0 0 3px rgba(26,130,84,.25);
  --ease:cubic-bezier(.2,.7,.3,1);
  --top-h:34px;--nav-h:68px;
  /* Ritme (ronde 5): één afstand tussen secties op elke pagina, en twee
     leesbreedtes (lopende tekst en brede tekstpagina's). */
  --sectie-y:clamp(48px,6vw,80px);--lees:720px;--breed:960px;
  /* Oude namen, nog in gebruik in oudere routes en in de winkelpagina */
  --dark:var(--text);--radius:var(--r-lg);--radius-pill:var(--r-pill);
  --g700:var(--text-2);--g500:var(--muted);--g400:var(--soft);--g300:var(--border);--g200:var(--vlak);--g100:var(--bg);--white:#fff;
  --shadow:var(--shadow-xs)
}

/* ── 2. Basis ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Ankers landen net onder de vaste kop. Alleen scroll-padding, geen
   scroll-margin op [id]: de browser telt die twee bij elkaar op (was 176 px
   onder de rand bij een kop van 68 px). */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)}
html,body{overflow-x:clip;max-width:100vw}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
[hidden]{display:none!important}
button{font-family:inherit}
::selection{background:var(--green-l);color:var(--green-dd)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;box-shadow:var(--ring)}
/* Links in lopende tekst: alleen een lijn (de ring is voor knoppen en velden) */
p a:focus-visible,li a:focus-visible,.crumb a:focus-visible,.faq summary:focus-visible,td a:focus-visible{box-shadow:none;outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
.num,.tabnum{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* "Naar de inhoud": eerste tabstop, alleen zichtbaar bij focus (lib/chrome.js) */
.skiplink{position:absolute;left:16px;top:-100px;z-index:1000;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--green-dd);color:#fff;font-weight:600;font-size:14.5px;box-shadow:var(--shadow-md)}
.skiplink:focus,.skiplink:focus-visible{top:12px;outline:2px solid #fff;outline-offset:-4px}
main:focus{outline:none}
.container{max-width:1200px;margin:0 auto;padding:0 32px}
.icoon{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ── 3. Typografie ─────────────────────────────────────────────────────── */
/* Vier gewichten: 400 tekst, 500 navigatie en labels, 600 knoppen, kaarttitels
   en cijfers, 700 koppen (was acht, waaronder 19x 800). Schaal (ronde 7):
   display 52, h1 40, h2 28, h3 18, kaarttitel 16, lead 18, tekst 16, UI 15,
   meta 14, klein 13, overline 12. */
.t-display{font-size:clamp(34px,4.2vw,52px);line-height:1.08;font-weight:700;letter-spacing:-.025em}
.t-h1{font-size:clamp(30px,3.4vw,40px);line-height:1.15;font-weight:700;letter-spacing:-.02em}
/* Eén sectiekop op elke pagina (.sectie-kop, .section-title, .vf-kop h2, .dnst-sec h2) */
.sectie-kop{font-size:clamp(22px,2.2vw,28px);line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--text);margin-bottom:16px;text-wrap:balance}
/* De winkelpagina (ronde 4) houdt zijn eigen, kleinere kopjes */
.t-h2{font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-.015em;color:var(--text);margin-bottom:16px;text-wrap:balance}
h2,h3{text-wrap:balance}
.t-h3{font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
.t-body{font-size:16px;line-height:1.6;color:var(--text-2)}
.t-meta{font-size:14px;line-height:1.45;font-weight:400;color:var(--muted)}
/* Hoogstens één per sectie, en grijs: de kop eronder is het belangrijkste */
.t-overline{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sectie-sub{font-size:16px;line-height:1.6;color:var(--text-2);max-width:680px;margin:-4px 0 20px;text-wrap:pretty}
.sectie{margin-top:var(--sectie-y)}
.sectie-lijn{margin-top:var(--sectie-y);padding-top:calc(var(--sectie-y) - 8px);border-top:1px solid var(--hairline)}

/* ── 4. Knoppen ────────────────────────────────────────────────────────── */
/* Pillen met een groene hover, zoals in opmaak C. Primair (groen) hoogstens
   één per scherm of kaart; secundair wit met een rand; tertiair een tekstlink. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r-pill);font-weight:600;font-size:15px;line-height:1;border:1px solid transparent;cursor:pointer;white-space:nowrap;font-family:inherit;text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.btn .icoon{width:16px;height:16px}
.btn-sm{height:36px;padding:0 16px;font-size:14px}
.btn-lg{height:52px;padding:0 26px;font-size:16px}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 1px 2px rgba(15,79,51,.25),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-primary:hover{background:var(--green-d);color:#fff}
.btn-primary:active{transform:translateY(1px)}
.btn-secondary,.btn-ghost{background:#fff;color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover,.btn-ghost:hover{border-color:var(--green);background:var(--green-xl);color:var(--green-d)}
.btn-blok{width:100%}
.btn:active{transform:translateY(1px)}
/* Oude naam: overal waar hij nog staat, een secundaire knop */
.btn-donker{background:#fff;color:var(--text);border-color:var(--border-strong)}
.btn-donker:hover{border-color:#b9b6ad;background:var(--vlak-hover);color:var(--text)}
.btn-wit{background:#fff;color:var(--green-dd)}
.btn-wit:hover{background:var(--green-l);color:var(--green-dd)}
.btn-omlijnd-wit{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-omlijnd-wit:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.tekstlink{display:inline-flex;align-items:center;gap:6px;color:var(--green-d);font-weight:600;text-decoration:none}
.tekstlink .icoon{width:15px;height:15px;transition:transform .18s var(--ease)}
.tekstlink:hover{color:var(--green)}
.tekstlink:hover .icoon{transform:translateX(2px)}

/* ── 5. Chips en status ────────────────────────────────────────────────── */
/* Chips zoals in opmaak C: pillen, met een icoon als dat erin staat. Merken
   groen getint, specialisaties amber, "+n" wit. */
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;background:#fff;color:var(--text-2);border:1px solid var(--border);text-decoration:none;transition:border-color .15s,background .15s,color .15s}
.chip .icoon{width:14px;height:14px}
a.chip:hover,button.chip:hover{border-color:var(--green);color:var(--green-d);background:var(--green-xl)}
.chip-sm{height:24px;padding:0 10px;font-size:12px}
.chip-merk,.brand-tag,.service-tag{background:var(--green-xl);border-color:var(--green-l);color:var(--green-dd)}
.chip-spec,.specialty-badge{background:var(--amber-l);border-color:var(--amber-b);color:var(--amber-d);font-weight:600}
.chip-meer{background:#fff;color:var(--muted);border-color:var(--border);font-weight:600}
.brand-tag,.specialty-badge,.service-tag{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--r-pill);font-size:12.5px;border-width:1px;border-style:solid;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-toggle{cursor:pointer;height:44px;padding:0 16px;font-size:14px;font-weight:600;color:var(--text-2);border-color:var(--border-strong)}
.chip-toggle .dot{width:8px;height:8px;border-radius:50%;background:var(--border-strong);transition:background .15s}
.chip-toggle[aria-pressed="true"]{background:var(--ok-l);border-color:color-mix(in srgb,var(--ok) 35%,var(--border));color:var(--ok)}
.chip-toggle[aria-pressed="true"] .dot{background:var(--ok)}

/* Open of dicht: wordt in de browser ingevuld (public/js/site.js), in
   Nederlandse tijd. Leeg zolang het script niet gedraaid heeft. */
.status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap;line-height:1}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.status.is-open{background:var(--ok-l);color:var(--ok)}
/* Dicht is geen alarm: overal dezelfde neutrale pil met een grijze stip
   (ronde 6). Open is de enige groene pil. */
.status.is-dicht{background:var(--g200);color:var(--text-2)}
.status.is-dicht::before{background:var(--stip-dicht)}
.status.is-onbekend{background:var(--g200);color:var(--muted)}
.status.is-onbekend::before{background:var(--soft)}
/* Korte zin (winkelpagina, kaarten en lijsten): "Nu open · tot 16:00",
   "Gesloten · opent di 09:00". Als lopende tekst en niet als flexrij: in een
   flexrij viel de spatie voor de punt weg ("Gesloten  ·opent"). */
.status[data-status="zin"],.status[data-status="kaart"],.status[data-status="lijst"]{display:inline-block;height:auto;line-height:24px;font-variant-numeric:tabular-nums}
.status[data-status="zin"]::before,.status[data-status="kaart"]::before,.status[data-status="lijst"]::before{display:inline-block;margin-right:7px;vertical-align:1px}
.status[data-status="zin"]:empty{display:none}
/* Op een lijstkaart: open groen, sluit binnen het uur amber, dicht neutraal. */
.status.is-sluit{background:var(--amber-l);color:var(--amber-d)}
.status.is-sluit::before{background:var(--amber)}
.status.is-leeg,.status:empty{display:none}
/* Geen opacity: "tot 16:00" kwam daarmee op 3,5:1. Het gewicht is genoeg verschil. */
.status .status-sub{font-weight:500}
/* De lange vorm ("Gesloten, opent morgen om 09:00") als lopende tekst, zodat
   de komma niet los van het woord ervoor komt te staan. */
.status[data-status="lang"]{display:inline-block;height:auto;line-height:24px}
.status[data-status="lang"]::before{display:inline-block;margin-right:7px;vertical-align:1px}
.status[data-status="lang"]:empty{display:none}

/* Beoordeling als omlijnde pil: ster, 4,9 en (473) */
.rating-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--border);font-size:12.5px;color:var(--muted);white-space:nowrap;line-height:1;font-variant-numeric:tabular-nums}
.rating-chip svg{width:12px;height:12px;fill:var(--amber);stroke:none}
.rating-chip b{font-weight:650;color:var(--text)}

.sterren{position:relative;display:inline-block;line-height:0;vertical-align:-2px;white-space:nowrap}
.sterren svg{width:14px;height:14px;margin-right:1px}
.sterren-leeg svg{fill:#e3e1da}
.sterren-vol{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap}
.sterren-vol svg{fill:var(--amber)}
.sterren.groot svg{width:18px;height:18px}

/* Label als volle pil met een icoon: Uitgelicht in amber (donkere tekst,
   7,8:1; wit was 2,0:1), Geverifieerd in groen. */
.tier-pill-featured,.tier-pill-verified{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px 0 8px;border-radius:var(--r-pill);font-size:12px;font-weight:700;line-height:1;color:#fff;letter-spacing:.005em;white-space:nowrap}
.tier-pill-featured{background:var(--amber);color:var(--text)}
.tier-pill-verified{background:var(--green)}
.tier-pill-featured svg,.tier-pill-verified svg{flex-shrink:0}

/* ── 6. Kaarten ────────────────────────────────────────────────────────── */
.kaart,.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs)}
.kaart{padding:24px}
/* Hover: een groenere rand, een schaduw en 2 px omhoog (opmaak C) */
.kaart-klik{transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.kaart-klik:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--border));box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card{overflow:hidden;margin-bottom:20px}
.card-head{padding:14px 20px;border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between}
.card-head-title{font-size:14px;font-weight:600;color:var(--text)}
.card-body{padding:18px 20px}
.kaart-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.kaart-raster .kaart h3{font-size:16px;font-weight:600;margin-bottom:6px}
.kaart-raster .kaart p{font-size:15px;color:var(--text-2);line-height:1.55;margin-bottom:14px}
/* Icoonvlak: lichtgroen, het icoon in donkergroen */
.icoonvlak{width:40px;height:40px;border-radius:var(--r-sm);background:var(--green-l);color:var(--green-d);display:grid;place-items:center;flex-shrink:0}
.icoonvlak .icoon{width:20px;height:20px}

/* Winkelkaart in een lijst (stad, dienst): foto links, gegevens rechts.
   Ronde 5: de kaart is een <div>; de naam is de link en maakt via ::after de
   hele kaart klikbaar. Het telefoonnummer (en op een telefoon de knop Bel)
   ligt daarboven en belt. Volgorde: naam, dan de twee kernfeiten
   (beoordeling en open/dicht), dan adres, omschrijving, chips en de voet. */
.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:8px 0 0}
.wkaart{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:1fr auto;align-items:start;gap:0 14px;padding:16px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);color:inherit;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.wkaart:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--border));box-shadow:var(--shadow-md);transform:translateY(-2px)}
.wkaart:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
.wkaart.tier-featured{border-color:var(--amber-b)}
.wkaart-link{color:inherit;text-decoration:none;min-width:0;flex:1}
.wkaart-link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0}
/* De ring om de hele kaart vraagt :has(); zonder :has() (Firefox onder 121,
   Safari onder 15.4) blijft de gewone focusring op de naam staan */
@supports selector(:has(a)){
  .wkaart-link:focus-visible{outline:none;box-shadow:none}
  .wkaart:has(.wkaart-link:focus-visible){border-color:var(--green);box-shadow:0 0 0 2px var(--green),var(--ring)}
}
.wkaart-foto{position:relative;width:72px;height:72px;border-radius:var(--r-md);overflow:hidden;background:var(--green-xl);display:grid;place-items:center;color:var(--green)}
/* Haarlijn over de foto: een lichte gevel loopt niet over in de witte kaart */
.wkaart-foto::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(16,24,20,.06);pointer-events:none;z-index:1}
.wkaart-foto .icoon{position:relative;width:28px;height:28px;opacity:.55;stroke-width:1.5}
.wkaart-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.wkaart-foto.is-logo{background:#fff}
.wkaart-foto.is-logo img{object-fit:contain;padding:8px}
/* Monogram: de beginletters op een zachte groene verloop, per naam een van
   drie tinten. Verdwijnt onder een foto die laadt (:has), komt terug als die
   foto niet laadt (site.js haalt hem dan weg). */
.monogram{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--green-d);background:linear-gradient(145deg,var(--green-xl),var(--green-l))}
.tint-2 .monogram{color:var(--green-dd);background:linear-gradient(145deg,#eef6e4,#dcedc8)}
.tint-3 .monogram{color:#1d5f4a;background:linear-gradient(145deg,#eaf4f1,#d3e9e1)}
.heeft-monogram:has(img) .monogram{visibility:hidden}
.wkaart-body{min-width:0;display:flex;flex-direction:column;gap:6px;align-self:stretch}
.wkaart-kop{display:flex;align-items:flex-start;gap:8px}
.wkaart-naam{font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wkaart:hover .wkaart-naam{color:var(--green-dd)}
/* Kernfeiten: beoordeling en open of dicht, allebei als pil */
.wkaart-feiten{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wkaart-adres{font-size:13px;line-height:1.4;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkaart-adres b{font-weight:600;color:var(--text-2)}
/* Kaarten met een omschrijving of prijzen: de voet onderaan, zodat de
   telefoonnummers in een rij op dezelfde hoogte staan */
.wkaart .chips{flex-wrap:wrap;min-width:0}
.wkaart .chip{display:inline-block;line-height:22px;flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wkaart-desc{font-size:14px;line-height:1.5;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.wkaart-voet{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:2px}
.wkaart-prijzen{border-top:1px solid var(--hairline);padding-top:6px}
.price-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0;color:var(--text-2)}
.price-val{font-weight:650;color:var(--green-dd);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Het telefoonnummer: één link, in een eigen rij onderaan, zodat de nummers
   in een rij kaarten op dezelfde hoogte staan. Op een telefoon wordt het de
   knop "Bel" onder de foto (zie 15. Responsief). */
.wkaart-tel{grid-column:2;grid-row:2;justify-self:stretch;margin-top:12px;padding-top:10px;border-top:1px solid var(--hairline);position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;transition:color .15s,background .15s,border-color .15s}
.wkaart-tel .icoon{width:14px;height:14px;color:var(--green)}
.wkaart-tel:hover{color:var(--green-d);text-decoration:underline;text-underline-offset:3px}
.wkaart-tel-bel{display:none}
.wkaart .tier-pill-featured,.wkaart .tier-pill-verified{position:relative;z-index:1;height:20px;font-size:11px;padding:0 8px 0 6px;flex-shrink:0;margin-top:1px}
.empty{text-align:center;padding:60px 20px;color:var(--muted);grid-column:1/-1}
.shop-grid.is-ingeklapt>.wkaart:nth-child(n+13){display:none}
.toon-meer{display:flex;justify-content:center;margin-top:20px}
.toon-meer[hidden]{display:none}
/* Lege toestand onder de zoekbalk (public/js/site.js) */
.lijst-leeg{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px;padding:24px;background:#fff;border:1px dashed var(--border-strong);border-radius:var(--r-lg)}
.lijst-leeg[hidden]{display:none}
.lijst-leeg-tekst{flex:1 1 280px;min-width:0}
.lijst-leeg-titel{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere}
.lijst-leeg-uitleg{font-size:15px;color:var(--text-2);margin-top:4px;line-height:1.5}

/* Fotokaart: beeld boven, gegevens eronder (top 3, uitgelicht). */
.fotokaart{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);overflow:hidden;color:inherit;text-decoration:none;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.fotokaart:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--border));box-shadow:var(--shadow-md);transform:translateY(-2px)}
.fotokaart:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
.fotokaart-beeld{position:relative;aspect-ratio:16/9;background:var(--green-xl);display:grid;place-items:center;color:var(--green);overflow:hidden}
/* Haarlijn binnen het beeld: een witte productfoto loopt niet meer over in de witte kaart */
.fotokaart-beeld::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -1px 0 var(--hairline);pointer-events:none;z-index:1}
.fotokaart-beeld::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(26,130,84,.10) 1px,transparent 0);background-size:14px 14px}
.fotokaart-beeld .icoon{position:relative;width:40px;height:40px;opacity:.5;stroke-width:1.4}
.fotokaart-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.fotokaart:hover .fotokaart-beeld img{transform:scale(1.03)}
.fotokaart-beeld.is-logo{background:#fff}
.fotokaart-beeld.is-logo::before{display:none}
.fotokaart-beeld.is-logo img{object-fit:contain;padding:24px}
/* Straatbeeld op een kaart: onderrand met het Google-logo blijft staan. In
   een 16:9-vak valt alleen lucht weg; in het hogere 4:3-vak (vergelijkbaar)
   past het beeld helemaal, op een vervaagde kopie van zichzelf. */
.fotokaart-beeld.is-straat img{object-position:center bottom}
.fotokaart:hover .fotokaart-beeld.is-straat img{transform:none}
.beeld-waas{display:none}
.vergelijkbaar .fotokaart-beeld.is-straat img:not(.beeld-waas){object-fit:contain}
.vergelijkbaar .fotokaart-beeld.is-straat .beeld-waas{display:block;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(16px) saturate(1.1) brightness(.92);pointer-events:none}
.fotokaart-rang{position:absolute;top:12px;left:12px;z-index:2;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
/* Nummer 1 in het lime uit het logo, met donkere tekst (9:1) */
.fotokaart-rang.is-eerste{background:var(--lime);color:var(--text)}
.fotokaart-label{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 20px);font-size:11.5px;font-weight:500;color:#fff;background:rgba(16,24,20,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fotokaart-label .icoon{width:12px;height:12px}
/* Bij een straatbeeld rechtsboven: links- en rechtsonder staan de logo's van Google */
.fotokaart-beeld.is-straat .fotokaart-label{top:10px;right:10px;bottom:auto;left:auto}
.fotokaart-beeld .monogram{font-size:44px;letter-spacing:-.03em}
.heeft-monogram .fotokaart-label{background:rgba(255,255,255,.9);color:var(--text-2);box-shadow:var(--shadow-xs)}
.heeft-monogram .fotokaart-label .icoon{color:var(--green)}
.fotokaart-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:6px}
.fotokaart-naam{font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.fotokaart-score{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.fotokaart-score b{font-size:16px;font-weight:600;color:var(--text);letter-spacing:-.01em}
/* "4,9 ★★★★★ · 365 reviews", zonder haakjes */
.fotokaart-aantal::before{content:"·";margin-right:8px;color:var(--soft)}
.fotokaart-sub{font-size:14px;color:var(--muted)}

/* ── 7. Formulieren ────────────────────────────────────────────────────── */
.veld,.zoekveld input,.selectveld select{height:44px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:#fff;font:inherit;font-size:15px;color:var(--text);padding:0 14px;transition:border-color .15s,box-shadow .15s;width:100%}
.veld:focus,.zoekveld input:focus,.selectveld select:focus{outline:none;border-color:var(--green);box-shadow:var(--ring)}
.veld::placeholder,.zoekveld input::placeholder{color:var(--soft)}
.zoekveld{position:relative;display:block;flex:1;min-width:200px}
.zoekveld .icoon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--soft);pointer-events:none}
.zoekveld input{padding-left:42px}
/* Wisknop in de huisstijl (was het blauwe kruisje van Chrome): een grijs
   kruisje, groen bij hover */
.zoekveld input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0 -2px 0 8px;cursor:pointer;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E") center/14px 14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E") center/14px 14px no-repeat;transition:background-color .15s}
.zoekveld input::-webkit-search-cancel-button:hover{background:var(--green)}
.selectveld{position:relative;display:block;flex:0 0 auto}
.selectveld select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;min-width:190px}
.selectveld::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-5px;border-right:1.75px solid var(--muted);border-bottom:1.75px solid var(--muted);transform:rotate(45deg);pointer-events:none}

/* ── 8. Kop en navigatie ───────────────────────────────────────────────── */
.topbar{background:#fff;border-bottom:1px solid var(--hairline);font-size:12.5px;color:var(--muted)}
.topbar-inner{max-width:1200px;margin:0 auto;padding:0 32px;height:calc(var(--top-h) - 1px);display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar-left{display:inline-flex;align-items:center;gap:6px}
.topbar-left .icoon{width:13px;height:13px;color:var(--green)}
.topbar-right{display:flex;align-items:center}
.topbar a{display:inline-flex;align-items:center;padding:0 12px;color:var(--muted);transition:color .15s}
.topbar a:hover{color:var(--green-d)}
.topbar a + a{border-left:1px solid var(--border)}

.site-nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--hairline);transition:box-shadow .2s var(--ease)}
.site-nav.is-gescrold{box-shadow:var(--shadow-sm)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;height:calc(var(--nav-h) - 1px);display:flex;align-items:center;justify-content:space-between;gap:24px}
/* App-pagina (/reparateurs): kop over de volle breedte, gelijk met de zoekbalk en de lijst */
.app-pagina .nav-inner,.app-pagina .topbar-inner{max-width:none;padding:0 24px}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{height:36px;width:auto;display:block}
/* Het actieve menu-item als lichtgroene pil, met het lime uit het logo
   spaarzaam als streepje eronder (opmaak C) */
.nav-right{display:flex;gap:2px;align-items:center}
.nav-link{padding:8px 14px;border-radius:var(--r-pill);font-weight:500;font-size:14.5px;white-space:nowrap;color:var(--text-2);transition:background .15s,color .15s}
.nav-link:hover{background:var(--green-xl);color:var(--green-d)}
.nav-link[aria-current="page"]{position:relative;background:var(--green-l);color:var(--green-d);font-weight:600}
.nav-link[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:3px;width:16px;height:2px;margin-left:-8px;border-radius:2px;background:var(--lime)}
.nav-cta-wrap{display:flex;gap:10px;align-items:center}
.nav-knop{display:none;width:40px;height:40px;border-radius:var(--r-md);border:0;background:transparent;color:var(--text);align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s}
.nav-knop:hover{background:var(--green-xl)}
.nav-knop .icoon{width:20px;height:20px}
.nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:none;border:none;border-radius:var(--r-md);cursor:pointer;padding:0}
.nav-hamburger:hover{background:var(--green-xl)}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .2s var(--ease),opacity .2s}
.nav-hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.active span:nth-child(2){opacity:0}
.nav-hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.vf-mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--hairline);box-shadow:var(--shadow-md);flex-direction:column;padding:4px 12px calc(20px + env(safe-area-inset-bottom));max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
/* Twee groepen met een scheidingslijn (27-09: zonder label; "Over ons" stond
   er dubbel als label en als link). "Voor fietsenmakers" en "Inloggen" alleen
   als knoppen onderaan */
.menu-groep{display:flex;flex-direction:column;gap:2px;padding:8px 0}
.menu-groep+.menu-groep{border-top:1px solid var(--hairline)}
.vf-mobile-menu.open{display:flex;animation:menuIn .18s var(--ease)}
.vf-mobile-menu a:not(.btn){position:relative;display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 14px;border-radius:var(--r-md);font-size:16px;font-weight:500;color:var(--text);transition:background .15s,color .15s}
.vf-mobile-menu a:not(.btn)::after{content:"";width:7px;height:7px;border-right:1.75px solid var(--soft);border-top:1.75px solid var(--soft);transform:rotate(45deg);margin-right:4px}
.vf-mobile-menu a:not(.btn):hover{background:var(--green-xl);color:var(--green-d)}
.vf-mobile-menu a[aria-current="page"]{background:var(--green-l);color:var(--green-dd);font-weight:600}
.vf-mobile-menu a[aria-current="page"]::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--lime)}
.vf-mobile-menu a[aria-current="page"]::after{border-color:var(--green)}
.vf-mobile-menu-knoppen{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding:16px 2px 0;border-top:1px solid var(--hairline)}
.vf-mobile-menu-rij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vf-mobile-menu-rij .btn{padding:0 12px}
.vf-backdrop{position:fixed;inset:0;z-index:150;background:rgba(16,24,20,.35);animation:fadeIn .18s var(--ease)}
.vf-backdrop[hidden]{display:none}
html.menu-open{overflow:hidden}
body.menu-open .site-nav{background:#fff}
body.menu-open .mob-actiebalk{display:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── 9. Kruimelpad ─────────────────────────────────────────────────────── */
.crumb{display:flex;align-items:center;min-width:0;font-size:14px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;margin-bottom:16px}
.crumb a{color:var(--muted);transition:color .15s;flex-shrink:0}
.crumb a:hover{color:var(--green-d);text-decoration:underline;text-underline-offset:3px}
/* .crumb knipt af (overflow:hidden): de focusring daarom binnen de link */
.crumb a:focus-visible{outline-offset:-2px;box-shadow:none;border-radius:4px}
.crumb-sep{flex-shrink:0;width:12px;height:12px;margin:0 6px;color:var(--soft);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.crumb-hier{color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crumb-terug{display:none;align-items:center;gap:4px;font-weight:500}
.crumb-terug .crumb-sep{margin:0}
.crumb-balk{background:#fff;border-bottom:1px solid var(--hairline);padding:12px 0}
.crumb-balk .crumb{margin:0}

/* ── 10. Voet ──────────────────────────────────────────────────────────── */
.site-footer{background:#fff;border-top:1px solid var(--hairline);padding:64px 0 32px}
/* Kolommen zo breed als hun inhoud, met de ruimte ertussen verdeeld: zo
   breekt "Voor fietsenmakers" en "Wat kost een fietsenmaker?" niet meer af */
.footer-inner{display:grid;grid-template-columns:minmax(200px,280px) repeat(5,max-content);justify-content:space-between;gap:32px}
.footer-logo{display:inline-flex;align-items:center}
.footer-logo img{height:34px;width:auto;display:block}
.footer-brand{font-size:14px;color:var(--text-2);line-height:1.6;max-width:300px;margin-top:16px}
/* Ronde 7: kolomkoppen 13/600 in gewone schrijfwijze (was hoofdletters) */
.site-footer h4,.voet-kop{font-size:13px;font-weight:600;color:var(--text);margin-bottom:14px;white-space:nowrap}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.site-footer li a{font-size:14px;line-height:1.4;color:var(--text-2);transition:color .15s}
.site-footer li a:hover{color:var(--green-d);text-decoration:underline;text-underline-offset:3px}
.footer-bot{margin-top:48px;padding-top:24px;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;font-size:13px;color:var(--muted);flex-wrap:wrap;gap:12px}
.footer-bot strong{color:var(--text-2);font-weight:600}
.footer-bot a{text-decoration:underline;text-underline-offset:3px}
.footer-bot a:hover{color:var(--green-d)}

/* ── 11. Cookiemelding ─────────────────────────────────────────────────── */
.cookie-banner{position:fixed;bottom:24px;left:24px;right:24px;max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md),0 24px 48px -16px rgba(16,24,20,.18);padding:16px 18px 16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;z-index:500;animation:cookieIn .35s var(--ease)}
.cookie-banner.hidden{display:none}
.cookie-icon{width:40px;height:40px;border-radius:var(--r-sm);background:var(--green-l);color:var(--green-d);display:grid;place-items:center;flex-shrink:0}
.cookie-icon .icoon{width:20px;height:20px}
.cookie-text{flex:1;min-width:220px;font-size:13.5px;color:var(--text-2);line-height:1.5}
.cookie-text a{color:var(--green-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cookie-actions{display:flex;gap:8px;flex-shrink:0}
.cookie-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:var(--r-pill);font-size:14px;font-weight:600;border:1px solid var(--border-strong);background:#fff;color:var(--text);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s}
.cookie-btn:hover{border-color:var(--green);background:var(--green-xl);color:var(--green-d)}
.cookie-btn.primary{background:var(--green);color:#fff;border-color:var(--green)}
.cookie-btn.primary:hover{background:var(--green-d);border-color:var(--green-d);color:#fff}
@keyframes cookieIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── 12. FAQ ───────────────────────────────────────────────────────────── */
.faq{display:flex;flex-direction:column;gap:10px;max-width:760px}
.faq details{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);transition:border-color .15s}
.faq details:hover{border-color:var(--border-strong)}
.faq summary{transition:background .15s var(--ease)}
.faq summary:hover{background:var(--vlak-hover)}
.faq summary:hover::after{border-color:var(--text-2)}
.faq details[open]{border-color:var(--border-strong)}
.faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:600;font-size:16px;line-height:1.4;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:16px;border-radius:var(--r-lg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:8px;height:8px;flex-shrink:0;border-right:1.75px solid var(--muted);border-bottom:1.75px solid var(--muted);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq details>p,.faq details>div{padding:0 20px 18px;font-size:15px;line-height:1.65;color:var(--text-2);text-wrap:pretty}
.faq details[open]>summary{border-radius:var(--r-lg) var(--r-lg) 0 0}
.faq details[open]>p,.faq details[open]>div{padding-top:4px}
.faq a{color:var(--green-d);font-weight:600}

/* ── 13. Paginaonderdelen ──────────────────────────────────────────────── */
/* Lichte kop met kruimelpad en h1 (stad, dienst, contact, ...) */
.hero-sm{padding:40px 0 40px;background:#fff;border-bottom:1px solid var(--hairline)}
.hero-sm .container{padding:0 32px}
/* Bovenregel als groene pil met een lime stip */
.hero-sm-eyebrow{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:var(--r-pill);background:var(--green-l);color:var(--green-d);font-size:13px;font-weight:600;margin-bottom:18px}
.hero-sm-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(141,198,63,.22)}
/* Tekstpagina's: kop en tekst op dezelfde linkerlijn (was vijf verschillende) */
.hero-sm--lees .container{max-width:calc(var(--lees) + 64px)}
.hero-sm--breed .container{max-width:calc(var(--breed) + 64px)}
.leeskolom{max-width:calc(var(--lees) + 64px)}
.pagina--breed{max-width:calc(var(--breed) + 64px)}
.pil-datum{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--g200);color:var(--text-2);font-size:13px;font-weight:500}
.hero-sm h1{font-size:clamp(30px,3.4vw,40px);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--text);margin-bottom:12px;text-wrap:balance;max-width:900px}
.hero-sm h1 em{font-style:normal;color:var(--green)}
.hero-sm p{color:var(--text-2);font-size:17px;max-width:720px;line-height:1.6;text-wrap:pretty}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;font-size:15px;color:var(--muted);margin-top:4px}
.hero-meta-item{display:inline-flex;align-items:center;gap:6px}
.hero-meta-item .icoon{width:16px;height:16px;color:var(--green)}
.hero-meta-item b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.hero-meta-item .ster{width:15px;height:15px;fill:var(--amber);stroke:none}
.hero-sm .hero-sub{margin-top:10px;font-size:15px}

.pagina{padding-top:36px;padding-bottom:72px}
.intro{max-width:760px}
.intro p{font-size:16px;line-height:1.65;color:var(--text-2);margin-bottom:14px;max-width:68ch}
.intro p.klein{font-size:16px;color:var(--text-2)}
.intro strong{color:var(--text);font-weight:600}
.chips-rij{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
/* Ingeklapte inleiding (public/js/site.js): hoogte begrensd, zachte overloop */
[data-inklap]{transition:max-height .25s var(--ease)}
[data-inklap].is-ingeklapt{overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 72px),transparent);mask-image:linear-gradient(#000 calc(100% - 72px),transparent)}
.inklap-knop{margin-top:6px}
/* Stadspagina (20-10-2026): de inleiding is op een telefoon vanaf de eerste
   weergave ingeklapt, met de knop uit de HTML. Was: site.js klapte hem na het
   laden in en zette dan pas de knop eronder, en de pagina versprong (CLS). */
.inklap-knop--ssr{display:none}
@media(max-width:640px){
  [data-inklap-ssr]:not(.is-open){max-height:185px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 72px),transparent);mask-image:linear-gradient(#000 calc(100% - 72px),transparent)}
  .inklap-knop--ssr{display:inline-flex}
}

/* Fietsenmakers in de buurt (winkelpagina, kleine plaatsen, merk-combo's;
   20-10-2026): een lijst met naam, afstand, score, open/dicht en twee knoppen */
.buurt-intro{font-size:15px;line-height:1.6;color:var(--text-2);margin:-6px 0 14px}
.buurt-lijst{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.buurt-rij{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;padding:14px 16px;border-bottom:1px solid var(--hairline)}
.buurt-rij:last-child{border-bottom:0}
.buurt-tekst{display:flex;flex-direction:column;gap:3px;min-width:0}
.buurt-naam{font-weight:600;color:var(--text);text-decoration:none;overflow-wrap:anywhere}
.buurt-naam:hover{color:var(--green-d);text-decoration:underline;text-underline-offset:3px}
.buurt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-size:13.5px;color:var(--muted)}
.buurt-afstand{font-weight:600;color:var(--text-2)}
.buurt-score{display:inline-flex;align-items:center;gap:3px}
.buurt-score svg{width:12px;height:12px}
.buurt-score b{color:var(--text-2);font-weight:600}
.buurt-tekst .status{align-self:flex-start}
.buurt-knoppen{display:flex;gap:8px;flex-shrink:0}
.buurt-knoppen .btn .icoon{width:16px;height:16px}
.buurt-blok--boven{margin-top:4px;padding:0 0 32px;border-bottom:0}
@media(max-width:640px){
  .buurt-rij{flex-direction:column;align-items:stretch}
  .buurt-knoppen .btn{flex:1;justify-content:center}
}
/* "Is dit jouw zaak?" onder de contactgegevens, klein en rustig */
.dcr-eigenaar{margin:0;padding:0 20px 18px;font-size:13px;color:var(--muted);text-align:center}
.dcr-eigenaar a{color:var(--green-d);font-weight:600}
/* Bel-knop met het nummer erin (winkel zonder website) */
.winkel-bel--nummer{font-variant-numeric:tabular-nums}
/* Combo-pagina: één regel naar alle fietsenmakers van de plaats */
.combo-alle{margin:14px 0 0;font-size:15px;color:var(--text-2)}
.combo-alle a{color:var(--green-d);font-weight:600}
.chip-aantal{color:var(--muted);font-weight:500}
/* Per postcodegebied (stadspagina) */
.pc-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.pc-gebied{border:1px solid var(--border);border-radius:var(--r-md);background:#fff}
.pc-gebied summary{display:flex;justify-content:space-between;gap:8px;padding:10px 14px;cursor:pointer;font-size:14.5px;color:var(--text-2)}
.pc-gebied summary b{color:var(--text)}
.pc-gebied ul{list-style:none;margin:0;padding:0 14px 12px;display:grid;gap:6px;font-size:14px}
.pc-gebied li{display:flex;flex-direction:column}
.pc-gebied a{color:var(--green-d);font-weight:600}
.pc-adres{color:var(--muted);font-size:13px}

/* "In cijfers": drie tegels, het icoon links en het getal met het label
   rechts (op een telefoon een lijst met haarlijnen, zie 15. Responsief) */
.feiten{margin-top:var(--sectie-y)}
.feiten-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.feit{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);padding:18px 20px;min-height:84px}
.feit-icoon{width:40px;height:40px;border-radius:var(--r-sm);background:var(--green-l);color:var(--green-d);display:grid;place-items:center;flex-shrink:0}
.feit-icoon .icoon{width:20px;height:20px}
.feit-tekst{display:flex;flex-direction:column;min-width:0}
.feit-getal{display:block;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--text);font-variant-numeric:tabular-nums}
.feit-label{display:block;font-size:14px;color:var(--muted);margin-top:4px;line-height:1.45}
.feit-label a{color:var(--green-d);font-weight:600}
.feiten-merken{font-size:13px;color:var(--muted);margin-top:12px}
.feiten-merken strong{color:var(--text-2);font-weight:600}

.top3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}

.kaart-stad{height:380px;border-radius:var(--r-lg);border:1px solid var(--border);background:#eef1f0;z-index:0;overflow:hidden}

.filterbalk{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}
.filterbalk-telling{font-size:14px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}

/* Tegels met plaatsen (nabij, stedenoverzicht) */
/* Vijf kolommen op 1136 px (was zes van 180 px: zo'n 20 plaatsnamen braken
   af en een telling stak buiten de tegel) */
.stad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding:0}
.stad-link{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;padding:8px 12px 8px 16px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);font-weight:600;font-size:15px;line-height:1.3;color:var(--text);box-shadow:var(--shadow-xs);transition:border-color .15s,box-shadow .15s,color .15s,transform .15s var(--ease)}
.stad-link:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--border));box-shadow:var(--shadow-sm);color:var(--green-d)}
.stad-link:active{transform:translateY(1px);box-shadow:none}
.stad-naam{min-width:0;hyphens:manual;overflow-wrap:anywhere}
.stad-count{display:inline-grid;place-items:center;flex-shrink:0;min-width:28px;height:22px;padding:0 7px;font-size:12px;font-weight:650;background:var(--green-l);border-radius:var(--r-pill);color:var(--green-d);font-variant-numeric:tabular-nums}
.stad-count.is-klein{background:var(--g200);color:var(--muted)}
.stad-link[hidden]{display:none}
.stedenbalk{margin-bottom:20px}
.stedenbalk .zoekveld{max-width:420px}
.steden-leeg{grid-column:1/-1;padding:28px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--border-strong);border-radius:var(--r-lg)}

/* Lege staat en foutpagina's (server.js: legeStaat) */
.leeg-staat-pagina{padding-top:72px;padding-bottom:88px;max-width:960px}
.leeg-staat{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:560px;margin:0 auto}
.leeg-staat-icoon{width:56px;height:56px;border-radius:var(--r-lg);background:var(--green-l);color:var(--green-d);display:grid;place-items:center;margin-bottom:20px;box-shadow:0 0 0 6px var(--green-xl)}
.leeg-staat-icoon .icoon{width:26px;height:26px}
.leeg-staat h1{font-size:clamp(28px,3.4vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--text);text-wrap:balance}
.leeg-staat p{font-size:16px;line-height:1.6;color:var(--text-2);max-width:520px;margin-top:12px;text-wrap:pretty}
.leeg-staat-knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.leeg-staat-onder{margin-top:64px;padding-top:40px;border-top:1px solid var(--hairline)}
.leeg-staat-kop{font-size:16px;font-weight:600;color:var(--text);margin:0 0 14px}
.leeg-staat-onder .stad-grid+.leeg-staat-kop{margin-top:32px}

/* Blok met uitleg en een actie (aanmelden) */
.cta-blok{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;background:var(--green-xl);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:32px}
.cta-blok-tekst{flex:1 1 360px;min-width:0}
.cta-blok-titel{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin-bottom:6px;text-wrap:balance}
.cta-blok p{font-size:16px;color:var(--text-2);max-width:560px;line-height:1.55;text-wrap:pretty}
.cta-blok-knoppen{display:flex;gap:10px;flex-wrap:wrap}

/* Opvallende melding (prijsindicatie, tip) */
.callout{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 20px;font-size:15px;line-height:1.6;color:var(--text-2);max-width:900px}
.callout .icoonvlak{width:32px;height:32px}
.callout .icoonvlak .icoon{width:16px;height:16px}
.callout strong{color:var(--text)}
.callout a{color:var(--green-d);font-weight:600}
.callout-tip{background:var(--amber-l);border-color:var(--amber-b)}
.callout-tip .icoonvlak{background:#fff;color:var(--amber-d)}
.dienst-extra section{margin:32px 0 8px!important;max-width:760px!important}
.dienst-extra p{font-size:15px!important;line-height:1.6!important;color:var(--text-2)!important;text-wrap:pretty}
.dienst-extra section>p:first-child{font-size:16px!important;line-height:1.7!important}

/* Prijsindicatie: op de breedte van de lopende tekst, het bedrag los en groot */
.prijsblok{display:flex;align-items:flex-start;gap:14px;max-width:760px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 24px}
.prijsblok .icoonvlak{width:32px;height:32px;margin-top:2px}
.prijsblok .icoonvlak .icoon{width:16px;height:16px}
.prijsblok-tekst{min-width:0}
.prijsblok-label{display:block;font-size:13px;font-weight:600;color:var(--muted)}
.prijsblok-bedrag{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--text);font-variant-numeric:tabular-nums;margin:2px 0 6px}
.prijsblok p{font-size:15px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
/* Advertentieplek op dienst- en merkpagina's (sinds 29-09-2026, lib/advertenties.js).
   Altijd het label Advertentie; lichtgroen vlak zodat hij zich onderscheidt van
   de winkelkaarten eronder, zonder schreeuwerig te worden. */
.adv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 20px;align-items:center;margin-top:20px;padding:20px 24px;background:var(--green-xl);border:1px solid color-mix(in srgb,var(--green) 28%,var(--border));border-radius:var(--r-lg)}
.adv .icoonvlak{align-self:start}
.adv-tekst p{margin:0;font-size:15px;line-height:1.55;color:var(--text-2)}
.adv-tekst .adv-bron{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-bottom:6px;font-size:12.5px;color:var(--muted)}
.adv-label{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--r-xs);background:#fff;border:1px solid var(--border-strong);color:var(--text-2);font-size:11.5px;font-weight:600;letter-spacing:.02em}
.adv-tekst .adv-boven{font-size:13px;font-weight:600;color:var(--green-d);margin-bottom:2px}
.adv-tekst .adv-kop{font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--text);margin-bottom:6px}
.adv-feiten{display:flex;flex-wrap:wrap;gap:4px 20px;list-style:none;padding:0;margin:10px 0 0;font-size:14px;color:var(--text)}
.adv-feiten span{color:var(--muted);margin-right:6px}
.adv-actie{display:flex;flex-direction:column;align-items:flex-end}
/* Reparatie aanvragen op de winkelpagina (sinds 20-10-2026). Het lokveld staat
   buiten beeld voor mensen; een bot die het invult krijgt een nep-ok. */
.aanvraag-intro{font-size:15px;line-height:1.6;color:var(--text-2);margin:-4px 0 0}
.aanvraag-form .rv-velden + .rv-veld,.aanvraag-form .rv-veld + .rv-velden{margin-top:12px}
.aanvraag-lok{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aanvraag-proef-noot{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--text-2);background:var(--vlak);border-radius:var(--r-md);padding:10px 12px}
.snelkaart-aanvraag{display:block;margin-top:10px;font-size:14px;font-weight:600;color:var(--green-d);text-align:center}
.dcr-voet .btn + .btn{margin-top:8px}
.cijfers-vink{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--text-2);margin:14px 0 6px;cursor:pointer}
.cijfers-vink input{margin-top:3px}
.adv-leeg{margin:28px 0 0;font-size:13px;color:var(--muted);text-align:center}
.adv-leeg a{color:var(--muted)}
@media (max-width:720px){
  .adv{grid-template-columns:auto minmax(0,1fr);padding:16px}
  .adv-tekst .adv-kop{font-size:17px}
  .adv-actie{grid-column:1/-1;align-items:stretch}
}

/* Dienst + stad: de specialisten in een getint paneel, de rest zichtbaar
   ondergeschikt (was precies hetzelfde) */
.specialisten-paneel{background:var(--green-xl);border:1px solid var(--green-l);border-radius:var(--r-xl);padding:24px}
.specialisten-paneel .sectie-kop{display:flex;align-items:center;gap:10px}
.specialisten-paneel .sectie-kop .icoon{width:26px;height:26px;color:var(--green);stroke-width:1.75;flex-shrink:0}
.specialisten-paneel .wkaart{padding:18px;grid-template-columns:88px minmax(0,1fr)}
.specialisten-paneel .wkaart-foto{width:88px;height:88px}
.specialisten-paneel .monogram{font-size:26px}
.sectie-bijzaak .sectie-kop{font-size:20px;font-weight:700}
/* Label "Accuspecialist" (dienst + stad): groene pil met een vinkje */
.chip-specialist{background:var(--green-l);border-color:color-mix(in srgb,var(--green) 25%,var(--green-l));color:var(--green-dd);font-weight:600}
.wkaart .chip-specialist{display:inline-flex;align-items:center;gap:4px}
.chip-specialist .icoon{width:12px;height:12px;stroke-width:2.25}

/* Linkkaart over de volle breedte (dienst + stad: alle fietsenmakers) */
.linkkaart{display:flex;align-items:center;gap:16px;padding:20px 24px;background:var(--green-xl);border:1px solid var(--hairline);border-radius:var(--r-xl);color:var(--text);transition:background .18s var(--ease),border-color .18s var(--ease)}
.linkkaart:hover{background:var(--green-l);border-color:color-mix(in srgb,var(--green) 30%,var(--green-l))}
.linkkaart .icoonvlak{background:#fff}
.linkkaart-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.linkkaart-titel{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--text)}
.linkkaart-sub{font-size:15px;color:var(--text-2);line-height:1.5}
.linkkaart-pijl{color:var(--green-d);display:grid;place-items:center}
.linkkaart-pijl .icoon{width:20px;height:20px;transition:transform .18s var(--ease)}
.linkkaart:hover .linkkaart-pijl .icoon{transform:translateX(3px)}
.dienst-extra h2,.dienst-extra h3{font-size:19px!important;font-weight:700!important;letter-spacing:-.01em;color:var(--text)!important;margin:28px 0 10px!important}
.dienst-extra strong{color:var(--text)}
.dienst-extra ul{margin:0 0 14px 20px}
.dienst-extra li{color:var(--text-2);line-height:1.65;margin-bottom:6px}

/* Diensten-overzicht (/diensten) */
.dnst-sec{padding:calc(var(--sectie-y) - 24px) 0 4px}
.dnst-sec:first-child{padding-top:48px}
.dnst-sec h2{font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.015em;line-height:1.25;margin-bottom:8px}
.dnst-sec p.dnst-lead{font-size:16px;color:var(--text-2);line-height:1.6;max-width:640px;text-wrap:pretty}
/* Vaste kolommen (4, 3, 2, 1) zodat de vultegel de laatste rij kan afmaken */
.dnst-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:20px 0 8px}
.dnst-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);padding:22px;display:flex;flex-direction:column;gap:10px;color:inherit;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.dnst-card:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--border));box-shadow:var(--shadow-md);transform:translateY(-2px)}
.dnst-card:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
.dnst-top{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.dnst-emoji{width:40px;height:40px;flex-shrink:0;border-radius:var(--r-sm);background:var(--green-l);color:var(--green-d);display:grid;place-items:center;transition:background .18s var(--ease)}
.dnst-emoji .icoon{width:20px;height:20px}
.dnst-card:hover .dnst-emoji{background:color-mix(in srgb,var(--green) 16%,var(--green-l))}
.dnst-mono{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--green-d)}
.dnst-naam{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3;text-wrap:balance}
.dnst-desc{font-size:15px;color:var(--text-2);line-height:1.55;flex:1;text-wrap:pretty}
/* Voet: het aantal als pil links, de vanafprijs rechts */
.dnst-voet{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px;padding-top:12px;border-top:1px solid var(--hairline)}
.dnst-aantal{display:inline-flex;align-items:center;height:24px;font-size:12px;font-weight:650;background:var(--green-l);color:var(--green-d);padding:0 10px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}
.dnst-prijs{font-size:14px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;margin-left:auto}
.dnst-prijs span{color:var(--muted);font-weight:400}
.dnst-vul{grid-column:span var(--r4,1);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:22px;border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--green-xl)}
.dnst-vul-tekst{display:flex;flex-direction:column;gap:4px}
.dnst-vul-titel{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.dnst-vul-sub{font-size:15px;color:var(--text-2);line-height:1.5}
@media(max-width:1140px){.dnst-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dnst-vul{grid-column:span var(--r3,1)}}
@media(max-width:820px){.dnst-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dnst-vul{grid-column:span var(--r2,1)}}

/* Blog */
.blog-hero{padding:40px 0;background:#fff;border-bottom:1px solid var(--hairline)}
.blog-hero h1{font-size:clamp(30px,3.4vw,40px);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin-bottom:12px}
.blog-hero h1 em{font-style:normal;color:var(--green)}
.blog-hero p{font-size:17px;color:var(--text-2);max-width:600px;line-height:1.6}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:40px 0 72px}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);overflow:hidden;color:inherit;display:flex;flex-direction:column;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.blog-card:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--border));box-shadow:var(--shadow-md);transform:translateY(-2px)}
.blog-card:active{transform:translateY(0);box-shadow:var(--shadow-xs)}
.blog-card-img{width:100%;aspect-ratio:3/2;background:var(--green-xl);overflow:hidden;flex-shrink:0}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease)}
.blog-card:hover .blog-card-img img{transform:scale(1.03)}
/* Zonder cover: een bewust vlak (zachte radiale tint, stippenraster zoals bij
   een winkel zonder foto, icoon in een witte cirkel). De categorie staat er
   niet meer onder: die is het kopje van de kaart (ronde 6). */
.blog-card-img-placeholder{width:100%;height:100%;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(120% 90% at 30% 20%,var(--green-l),var(--green-xl) 70%);color:var(--green)}
.blog-card-img-placeholder::before{content:"";position:absolute;inset:0;opacity:.55;background-image:radial-gradient(circle at 1px 1px,rgba(26,130,84,.2) 1px,transparent 0);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,transparent 30%,#000 100%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,transparent 30%,#000 100%)}
.blog-card-img-placeholder>*{position:relative}
.blog-card-img-icoon{width:72px;height:72px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--green);transition:transform .2s var(--ease),color .2s var(--ease)}
.blog-card-img-icoon .icoon{width:28px;height:28px}
.blog-card:hover .blog-card-img-icoon{transform:translateY(-2px);color:var(--green-d)}
.blog-card-body{padding:20px;flex:1;display:flex;flex-direction:column}
.blog-card-tag{font-size:13px;font-weight:600;color:var(--green-d);margin-bottom:6px}
.blog-card-tag-icoon{display:none}
.blog-card-title{font-size:18px;font-weight:600;color:var(--text);line-height:1.35;margin-bottom:8px;letter-spacing:-.01em}
.blog-card-intro{font-size:15px;color:var(--text-2);line-height:1.55;flex:1;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.blog-card-meta{font-size:14px;color:var(--muted);display:flex;gap:10px;align-items:center;font-variant-numeric:tabular-nums}
.blog-card-meta span{display:inline-flex;align-items:center;gap:4px}
.blog-card-meta .punt{width:3px;height:3px;border-radius:50%;background:var(--soft)}

/* Artikel */
.article-hero{padding:40px 0;background:#fff;border-bottom:1px solid var(--hairline)}
/* Kop en tekst op één leeskolom van 680 px (ca. 68 tekens per regel) */
.article-hero .container{max-width:calc(680px + 64px)}
.article-hero-auteur{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-weight:500}
.article-auteur-avatar.is-klein{width:24px;height:24px;font-size:10px;font-weight:600}
.article-eyebrow{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.article-hero h1{font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--text);max-width:820px;margin-bottom:16px;text-wrap:balance}
.article-hero-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.article-hero-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--soft);display:inline-block}
.article-cover{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);margin:32px 0;display:block;box-shadow:var(--shadow-sm)}
.article-wrap{max-width:calc(680px + 64px);margin:0 auto;padding:40px 32px 0}
.article-body{font-size:17px;line-height:1.7;color:var(--text-2);padding-bottom:56px}
.article-body>p:first-child{font-size:19px;line-height:1.6;color:var(--text);text-wrap:pretty}
.article-body ol li::marker{color:var(--green-d);font-weight:700}
.article-body ul li::marker{color:var(--green)}
.article-body h2{font-size:clamp(22px,2.4vw,26px);font-weight:700;color:var(--text);margin:44px 0 14px;letter-spacing:-.015em;line-height:1.25}
.article-body h3{font-size:clamp(18px,2.2vw,20px);font-weight:600;color:var(--text);margin:30px 0 10px}
.article-body p{margin-bottom:20px}
.article-body ul,.article-body ol{margin:0 0 20px 24px;padding:0}
.article-body li{margin-bottom:8px;line-height:1.65}
.article-body a{color:var(--green-d);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--green) 45%,transparent);text-underline-offset:3px;transition:text-decoration-color .15s,color .15s}
.article-body a:hover{color:var(--green);text-decoration-color:currentColor}
.article-body strong{font-weight:600;color:var(--text)}
.article-body blockquote{border-left:3px solid var(--green);padding:14px 20px;margin:28px 0;background:var(--green-xl);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--text-2);font-size:16px}
/* Eén tabelstijl voor de hele site (blog en onderzoek): witte kaart, geen
   verticale lijnen, kopregel klein in hoofdletters, getallen rechts */
.article-body table,.tabel{width:100%;border-collapse:separate;border-spacing:0;margin:24px 0;font-size:15px;font-variant-numeric:tabular-nums;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.article-body th,.tabel th{padding:11px 16px;text-align:left;font-size:13px;font-weight:600;color:var(--text-2);background:var(--vlak);border-bottom:1px solid var(--border)}
.article-body td,.tabel td{padding:12px 16px;border-top:1px solid var(--hairline);color:var(--text-2)}
.article-body tr:first-child td,.tabel tbody tr:first-child td{border-top:0}
.article-body td:last-child,.article-body th:last-child{text-align:right}
.article-body td:last-child{font-weight:600;color:var(--text);white-space:nowrap}
.tabel a{color:var(--green-d);font-weight:600}
.tabel-wrap{overflow-x:auto;margin:16px 0}
.tabel-wrap .tabel{margin:0}
.tabel-nr{width:48px;color:var(--muted);font-weight:600}
.tabel .tabel-getal{text-align:right;font-weight:600;color:var(--text);white-space:nowrap}
.tabel th.tabel-getal{color:var(--text-2);font-weight:600}
/* Aandeel van de grootste (--aandeel op de cel): een dunne balk achter het getal */
.tabel-balk{display:inline-block;vertical-align:middle;width:120px;height:4px;margin-right:14px;border-radius:2px;background:linear-gradient(90deg,var(--green) var(--aandeel,0%),var(--green-l) var(--aandeel,0%))}
.article-auteur{display:flex;gap:16px;align-items:center;background:var(--green-xl);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:20px 24px;margin-bottom:32px;font-size:14px;line-height:1.55;color:var(--text-2)}
.article-auteur-avatar{width:44px;height:44px;border-radius:50%;background:var(--vlak);color:var(--text-2);display:grid;place-items:center;font-weight:600;font-size:15px;flex-shrink:0}
.article-auteur strong{color:var(--text)}
.article-auteur a{color:var(--green-d);font-weight:600}
.article-cta{background:var(--green-xl);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:32px;margin:40px 0 56px;text-align:center}
.article-cta h3{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px;color:var(--text)}
.article-cta p{color:var(--text-2);margin-bottom:20px;font-size:16px;line-height:1.6}
/* Blog (20-10-2026): zoekblok na de intro, blok onder de prijzentabel, en
   "Een fietsenmaker vinden" onderaan */
.article-cta--midden{margin:28px 0 32px;padding:24px}
.article-cta .article-cta-titel{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;color:var(--text)}
.article-body .article-cta p.article-cta-titel{margin-bottom:6px}
.tabel-cta{margin:-8px 0 28px;padding:16px 18px;border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--green-xl)}
.tabel-cta p{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--text-2)}
.tabel-cta .chips a{text-decoration:none}
.blog-verder{margin:0 0 48px}
.blog-verder h2{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px;color:var(--text)}
.blog-verder-sub{margin:14px 0 8px;font-size:14px;font-weight:600;color:var(--muted)}
.zoek-cta{display:flex;gap:8px;max-width:480px;margin:0 auto}
.zoek-cta .zoekveld{min-width:0}
.zoek-cta .zoekveld input{height:48px;border-radius:var(--r-pill);padding-left:44px}
.zoek-cta .btn{height:48px;flex-shrink:0}
.gerelateerd{border-top:1px solid var(--hairline);background:#fff}
.gerelateerd h3{font-size:19px;font-weight:700;margin:40px 0 16px;color:var(--text)}
.gerelateerd-lijst{display:flex;flex-direction:column;gap:10px;padding-bottom:56px}
.gerelateerd-lijst a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);font-weight:600;font-size:15px;transition:border-color .15s,box-shadow .15s}
.gerelateerd-lijst a:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);color:var(--green-d)}
.gerelateerd-lijst span.min{font-size:14px;color:var(--muted);font-weight:400;flex-shrink:0}
/* Blogopmaak (20-10-2026, lib/blog.js renderArtikel): minder lap tekst. Zelfde
   tokens, iconen en componenten (.callout, .icoonvlak, .linkkaart, .faq). */
.article-wrap--vervolg{padding-top:0}
.article-body h2{margin:48px 0 14px;padding-top:28px;border-top:1px solid var(--hairline)}
.article-body h2+h3{margin-top:18px}
.article-body h3{line-height:1.35}
/* Overzichtskaart bovenaan: In het kort + inhoudsopgave */
.blog-overzicht{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);margin:0 0 36px;overflow:hidden}
.blog-overzicht>*{padding:20px 24px}
.blog-overzicht--twee .blog-inhoud{border-top:1px solid var(--hairline)}
.blog-overzicht-kop{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:-.005em;color:var(--text);margin:0 0 14px}
.blog-overzicht-kop .icoonvlak{width:32px;height:32px}
.blog-overzicht-kop .icoonvlak .icoon{width:16px;height:16px}
.blog-kort{background:var(--green-xl)}
.blog-kort .icoonvlak{background:#fff}
.blog-kort-lijst{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.55;color:var(--text-2)}
.blog-kort-lijst li{display:flex;gap:10px;align-items:flex-start}
.blog-kort-lijst .icoon{width:18px;height:18px;margin-top:3px;color:var(--green-d);stroke-width:2.25}
.blog-kort-lijst strong{color:var(--text);font-weight:600}
.blog-kort-lijst a{color:var(--green-d);font-weight:500}
.blog-inhoud ol{list-style:none;counter-reset:inhoud;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px}
.blog-inhoud li{counter-increment:inhoud;display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4}
.blog-inhoud li::before{content:counter(inhoud);width:22px;height:22px;margin-top:4px;border-radius:50%;background:var(--vlak);color:var(--text-2);display:grid;place-items:center;flex-shrink:0;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.blog-inhoud a{display:inline-block;padding:4px 0;color:var(--text-2);font-weight:500;text-decoration:none}
.blog-inhoud a:hover{color:var(--green-d);text-decoration:underline;text-underline-offset:3px}
.blog-inhoud .inklap-knop{margin-top:10px}
/* .leesmeer (verderop) zet display:inline-flex; de knop hoort alleen op een telefoon */
.blog-inhoud .inklap-knop--ssr{display:none}
/* Kaders: tip (groen), let op (amber), goed om te weten (wit) */
.article-body .blog-callout{margin:28px 0;max-width:none;font-size:16px;line-height:1.6}
.blog-callout-tekst{min-width:0}
.article-body .blog-callout p{margin:0 0 8px}
.article-body .blog-callout p:last-child{margin-bottom:0}
.article-body .blog-callout .blog-callout-titel{margin:4px 0 4px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-dd)}
.blog-callout--tip{background:var(--green-xl);border-color:var(--green-l)}
.blog-callout--tip .icoonvlak{background:#fff;color:var(--green-d)}
.blog-callout--letop{background:var(--amber-l);border-color:var(--amber-b)}
.blog-callout--letop .icoonvlak{background:#fff;color:var(--amber-d)}
.article-body .blog-callout--letop .blog-callout-titel{color:var(--amber-d)}
.article-body .blog-callout--weten .blog-callout-titel{color:var(--text)}
/* Lijsten: groene stip, genummerd in een rondje, vinkjes, stappenplan */
.article-body ul:not([class]),.article-body ol:not([class]),.article-body .blog-check,.article-body .blog-stappen{list-style:none;margin-left:0}
.article-body ul:not([class])>li{position:relative;padding-left:22px}
.article-body ul:not([class])>li::before{content:"";position:absolute;left:5px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.article-body ol:not([class]),.article-body .blog-stappen{counter-reset:stap}
.article-body ol:not([class])>li,.article-body .blog-stappen>li{counter-increment:stap;position:relative;padding-left:42px;margin-bottom:14px}
.article-body ol:not([class])>li::before,.article-body .blog-stappen>li::before{content:counter(stap);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;background:var(--green-l);color:var(--green-dd);display:grid;place-items:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.article-body .blog-stappen{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 20px 6px}
.article-body .blog-stappen>li{padding-bottom:4px}
.article-body .blog-stappen>li:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:33px;bottom:-14px;width:1px;background:var(--border)}
.article-body .blog-check>li{display:flex;gap:10px;align-items:flex-start}
.article-body .blog-check .icoon{width:18px;height:18px;margin-top:4px;color:var(--green-d);stroke-width:2.25}
/* Tabellen: scrollvak, groene kopregel, zebra; lange tekst links en mag afbreken */
.blog-tabel{margin:24px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}
.article-body .blog-tabel table{margin:0}
.article-body .blog-tabel th{background:var(--green-xl);color:var(--green-dd);border-bottom-color:var(--green-l)}
.article-body .blog-tabel tbody tr:nth-child(even) td{background:var(--bg)}
.article-body .blog-tabel td:first-child{color:var(--text);font-weight:500}
.article-body .blog-tabel--tekst td:last-child,.article-body .blog-tabel--tekst th:last-child{text-align:left;white-space:normal}
.article-body .blog-tabel--tekst td:last-child{font-weight:400;color:var(--text-2)}
/* Veelgestelde vragen: .faq met de h3 in de summary */
.article-body .blog-faq{margin:8px 0 28px;max-width:none}
.article-body .blog-faq summary h3{flex:1;min-width:0;margin:0;text-wrap:pretty;font-size:16px;font-weight:600;line-height:1.4;color:var(--text)}
.article-body .blog-faq details>div p{margin:0 0 10px;font-size:15.5px}
.article-body .blog-faq details>div p:last-child{margin-bottom:0}
/* Eén verwijzing halverwege */
.article-body .blog-linkkaart{margin:36px 0;color:var(--text);font-weight:400;text-decoration:none}
.article-body .blog-linkkaart:hover{color:var(--text)}
/* Lees ook */
.gerelateerd-lijst .icoonvlak{width:36px;height:36px}
.gerelateerd-lijst .icoonvlak .icoon{width:18px;height:18px}
.gerelateerd-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gerelateerd-tag{font-size:12.5px;font-weight:600;color:var(--green-d)}
.gerelateerd-titel{line-height:1.4}
@media(max-width:640px){
  .blog-overzicht{margin-bottom:28px;border-radius:var(--r-lg)}
  .blog-overzicht>*{padding:16px 18px}
  .blog-kort-lijst{font-size:15px}
  .blog-inhoud ol{grid-template-columns:minmax(0,1fr)}
  .blog-inhoud .inklap-knop--ssr{display:inline-flex}
  .article-body h2{margin-top:40px;padding-top:24px}
  .article-body .blog-callout{font-size:15px}
  .article-body .blog-stappen{padding:16px 14px 4px}
  .article-body .blog-tabel th,.article-body .blog-tabel td{padding:10px 12px}
  /* Drie of meer kolommen: elke rij een kaartje met label en waarde */
  .blog-tabel--stapel{overflow:visible}
  .article-body .blog-tabel--stapel table,.article-body .blog-tabel--stapel tbody,.article-body .blog-tabel--stapel tr,.article-body .blog-tabel--stapel td{display:block;width:100%}
  .article-body .blog-tabel--stapel table{border:0;background:none;border-radius:0}
  .article-body .blog-tabel--stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .article-body .blog-tabel--stapel tr{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:10px;overflow:hidden}
  .article-body .blog-tabel--stapel tbody tr:nth-child(even) td{background:none}
  .article-body .blog-tabel--stapel td{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:baseline;gap:12px;text-align:left;white-space:normal;border-top:1px solid var(--hairline)}
  .article-body .blog-tabel--stapel td::before{content:attr(data-label);font-size:13px;font-weight:600;color:var(--muted)}
  .article-body .blog-tabel--stapel td:first-child,.article-body .blog-tabel--stapel td:last-child{text-align:left}
  .article-body .blog-tabel--stapel td:first-child{display:block;text-align:left;font-weight:600;background:var(--green-xl);border-top:0}
  .article-body .blog-tabel--stapel td:first-child::before{content:none}
}

/* Tekstpagina's (privacy, over ons) */
.tekstpagina{max-width:calc(var(--lees) + 64px);padding-top:36px;padding-bottom:72px}
.tekstpagina .kaart{padding:28px 32px;margin-bottom:16px}
.tekstpagina h2{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px;color:var(--text)}
.tekstpagina .kaart h2:not(:first-child){margin-top:24px}
.tekstpagina p,.tekstpagina li{font-size:16px;line-height:1.65;color:var(--text-2)}
.tekstpagina p{margin-bottom:12px}
.tekstpagina ul{padding-left:20px;margin-bottom:16px}
.tekstpagina li{margin-bottom:6px}
.tekstpagina a:not(.btn){color:var(--green-d);font-weight:600}
.tekstpagina .voetnoot{font-size:14px;color:var(--muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--hairline)}
.lijst-wel-niet{list-style:none;padding:0!important;display:grid;gap:12px}
.lijst-wel-niet li{margin:0;display:flex;align-items:flex-start;gap:12px}
.wel-niet-icoon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.wel-niet-icoon .icoon{width:13px;height:13px;stroke-width:2.5}
.is-wel .wel-niet-icoon{background:var(--ok-l);color:var(--ok)}
.is-niet .wel-niet-icoon{background:var(--amber-l);color:var(--amber-d)}
.auteur-in-kaart{margin:18px 0 0;padding:16px 18px}
/* Over ons (27-09-2026): het verhaal van het platform. Een missieregel met
   een groene lijn, genummerde stappen, de bronnen als lijst van kop en tekst,
   en onderaan twee knoppen (primair en secundair). */
.missie{margin:20px 0 4px;padding:16px 20px;background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--green);border-radius:var(--r-md)}
.missie-label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tekstpagina .missie p{margin:0;color:var(--text);font-weight:500}
.stappenlijst{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:14px;counter-reset:stap}
.stappenlijst li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-items:start;margin:0;counter-increment:stap}
.stappenlijst li::before{content:counter(stap);width:28px;height:28px;border-radius:50%;background:var(--vlak);color:var(--text);display:grid;place-items:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.stappenlijst b{font-weight:600;color:var(--text)}
.bronnen{display:grid;grid-template-columns:196px minmax(0,1fr);margin:4px 0 0}
.bronnen dt,.bronnen dd{padding:12px 0;border-top:1px solid var(--hairline);font-size:16px;line-height:1.6}
.bronnen dt{font-weight:600;color:var(--text);padding-right:20px}
.bronnen dd{margin:0;color:var(--text-2)}
.bronnen dt:first-child,.bronnen dt:first-child+dd{border-top:0;padding-top:0}
.tekstpagina .lijst-wel-niet{margin-bottom:16px}
.kaart-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.colofon{margin-top:16px;font-size:14px;color:var(--muted)}
@media(max-width:640px){
  .bronnen{grid-template-columns:minmax(0,1fr)}
  .bronnen dt{padding-bottom:2px}
  .bronnen dd{border-top:0;padding-top:0}
  .kaart-knoppen .btn{flex:1 1 100%}
}
/* Inhoudsopgave (privacy) en nummers in de koppen */
.inhoudsopgave{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 20px;margin-bottom:28px}
.inhoudsopgave-kop{font-size:14px!important;font-weight:600;color:var(--text)!important;margin-bottom:8px!important}
/* Genummerd zoals de koppen ("1. Wie is verantwoordelijk?"), en elke link
   minstens 24 px hoog (WCAG 2.5.8; was 17 px met 6 px ertussen) */
.inhoudsopgave ol{list-style:none;padding:0!important;margin:0!important;columns:2;column-gap:24px;counter-reset:inhoud}
.inhoudsopgave li{display:flex;align-items:baseline;gap:8px;font-size:14.5px!important;margin:0 0 2px!important;break-inside:avoid;counter-increment:inhoud}
.inhoudsopgave li::before{content:counter(inhoud) ".";flex-shrink:0;min-width:1.4em;color:var(--green-d);font-variant-numeric:tabular-nums}
.inhoudsopgave a{display:inline-block;padding:4px 0;font-weight:500!important}
.kop-nr{color:var(--green-d);font-variant-numeric:tabular-nums;margin-right:4px}
/* Cijfertegels (over ons, onderzoek) */
.stat-tegels{display:grid;gap:12px;margin:24px 0}
.stat-tegels--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat-tegels--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stat-tegel{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 18px 16px}
.kaart .stat-tegel{background:var(--bg);box-shadow:none;border-color:var(--border)}
.stat-tegel-icoon{color:var(--green)}
.stat-tegel-icoon .icoon{width:18px;height:18px}
.stat-tegel-getal{display:inline-flex;align-items:center;gap:6px;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-tegel-getal .ster{width:18px;height:18px;fill:var(--amber)}
.stat-tegel-label{font-size:14px;color:var(--muted);line-height:1.4}
.stat-tegels--5 .stat-tegel{padding:16px 14px 14px}
.stat-tegels--5 .stat-tegel-getal{font-size:23px}
.tabel-n{display:inline-block;min-width:3ch;text-align:right}
/* Onderzoek: lopende tekst in de leeskolom */
.rapport>p{font-size:16px;line-height:1.7;color:var(--text-2);margin-bottom:14px;text-wrap:pretty}
.rapport>h2{font-size:clamp(20px,3vw,26px);font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:48px 0 14px;color:var(--text)}
.rapport a{color:var(--green-d);font-weight:600}
.bronblok{background:var(--green-xl);border:1px solid var(--green-l);border-radius:var(--r-lg);padding:24px;margin:28px 0}
.bronblok h3{font-size:17px;font-weight:700;margin-bottom:8px}
.bronblok>p{font-size:15px;line-height:1.6;color:var(--text-2)}
.bronblok-citaat{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;margin:12px 0 14px}
.bronblok-citaat p{max-width:100%;font-size:14px;color:var(--text-2);line-height:1.6;overflow-wrap:anywhere}
.bronblok-citaat .btn.is-gekopieerd{border-color:var(--ok);color:var(--ok);background:var(--ok-l)}
/* Contact */
.zoekmelding{display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap;background:var(--amber-l);border:1px solid var(--amber-b);border-radius:var(--r-lg);padding:20px 24px;margin-bottom:24px}
.zoekmelding .icoonvlak{background:#fff;color:var(--amber-d)}
.zoekmelding-tekst{flex:1 1 360px;min-width:0}
.zoekmelding h2{font-size:17px;font-weight:600;color:var(--text);margin-bottom:4px}
.zoekmelding p{font-size:15px;line-height:1.55;color:var(--text-2)}
.contact-kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.contact-kaart{position:relative;display:flex;flex-direction:column;gap:14px}
.contact-kaart h3{font-size:16px;font-weight:600;margin-bottom:6px}
.contact-kaart p{font-size:15px;color:var(--text-2);line-height:1.55;margin-bottom:14px}
.contact-kaart-link{position:static}
.contact-kaart-link::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.contact-afzender{margin:24px 0 0;background:#fff;border-color:var(--border)}
@media(min-width:641px) and (max-width:900px){.contact-kaart{padding:18px}.contact-kaart-link{font-size:14px}}

/* Voor fietsenmakers (ronde 7): dezelfde lichte kop als de rest van de site,
   links uitgelijnd, met kruimelpad (was een donker verloop, gecentreerd). */
.vf-kopblok{padding-bottom:48px}
.vf-kopblok-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px 56px;align-items:end}
.vf-kopblok h1{max-width:720px}
.vf-kopblok p{max-width:620px}
.vf-kopblok-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
/* Zoek je zaak en claim hem (20-10-2026) */
.vf-zoek{display:flex;gap:8px;max-width:560px;margin-top:24px}
.vf-zoek .zoekveld{flex:1;min-width:0}
.vf-zoek .zoekveld input{height:48px;border-radius:var(--r-md);padding-left:44px;width:100%}
.vf-zoek .btn{flex-shrink:0}
.vf-niet-gevonden{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-2);max-width:560px}
.vf-niet-gevonden a{color:var(--green-d);font-weight:600}
@media(max-width:640px){
  .vf-zoek{flex-direction:column}
  .vf-zoek .btn{width:100%;justify-content:center}
}
.vf-beloftes{list-style:none;display:flex;flex-direction:column;gap:12px;padding:20px 22px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg)}
.vf-beloftes li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;color:var(--text-2)}
.vf-beloftes b{font-weight:600;color:var(--text)}
.vf-beloftes .icoon{width:16px;height:16px;margin-top:3px;color:var(--green-d);stroke-width:2.25}
/* Drie echte cijfers in één strook (was vier, waaronder "Gratis" en "42 merken herkend") */
.vf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:32px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.vf-stat{display:flex;flex-direction:column;gap:4px;padding:20px 24px}
.vf-stat+.vf-stat{border-left:1px solid var(--hairline)}
.vf-stat-getal{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--text);font-variant-numeric:tabular-nums}
.vf-stat-label{font-size:14px;color:var(--muted)}
.vf-band{padding:var(--sectie-y) 0}
.vf-band--wit{background:#fff;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.vf-kop{max-width:680px;margin:0 0 32px}
.vf-kop h2{font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--text);margin-bottom:8px;text-wrap:balance}
.vf-kop p{font-size:16px;color:var(--text-2);line-height:1.6}
.vf-kop--rij{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
/* Stappen: een genummerde lijst in drie kolommen, zonder kaarten en zonder verbindingslijn */
.vf-stappen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.vf-stap{padding-top:20px;border-top:1px solid var(--border)}
.vf-stap-nr{width:28px;height:28px;border-radius:50%;background:var(--vlak);color:var(--text);display:grid;place-items:center;font-size:14px;font-weight:600;margin-bottom:14px;font-variant-numeric:tabular-nums}
.vf-stap h3{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-bottom:6px}
.vf-stap p{font-size:15px;color:var(--text-2);line-height:1.6}
/* Wat je krijgt: een checklist per plan, twee kolommen, zonder kaarten */
.vf-functies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 56px}
.vf-functiegroep h3{font-size:16px;font-weight:600;color:var(--text);padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.vf-functiegroep ul{list-style:none}
.vf-functie{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--hairline)}
.vf-functie>.icoon{width:20px;height:20px;margin-top:1px;color:var(--green-d)}
.vf-functie h4{font-size:16px;font-weight:600;color:var(--text);line-height:1.4}
.vf-functie p{font-size:15px;color:var(--text-2);line-height:1.55;margin-top:2px}
.vf-functie-plan{display:inline-flex;align-items:center;height:20px;padding:0 6px;margin-left:6px;border-radius:var(--r-xs);background:var(--green-l);color:var(--green-dd);font-size:12px;font-weight:600;vertical-align:2px}
/* Tarieven */
.vf-tarief-balk{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.vf-intro-pil{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--amber-l);border:1px solid var(--amber-b);color:var(--amber-d);font-size:12.5px;font-weight:650}
.vf-plannen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
/* Sinds 29-09-2026 twee plannen: Gratis en Uitgelicht, samen op leesbreedte. */
.vf-plannen--twee{grid-template-columns:repeat(2,minmax(0,1fr));max-width:var(--breed);margin-inline:auto}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px}
/* Aanbevolen: een groene rand van 2 px en de zwevende groene pil van opmaak C
   boven de kaart. In de HTML staat hij naast de naam, maar absoluut
   geplaatst neemt hij geen regel in: prijs en knop blijven in alle drie de
   kaarten op gelijke hoogte staan. */
.plan--uitgelicht{border:2px solid var(--green);padding:23px}
.plan-naam-rij{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);height:24px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-pill);background:var(--green);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.plan-kop{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.plan-naam{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.plan-sub{font-size:14px;color:var(--muted);font-weight:400}
.plan-prijs{font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.plan-per{font-size:16px;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:2px}
.plan-periode{font-size:14px;color:var(--muted);margin:8px 0 20px}
.plan-lijst{list-style:none;display:flex;flex-direction:column;gap:10px;margin:20px 0 0;padding-top:20px;border-top:1px solid var(--hairline);font-size:15px;color:var(--text-2)}
.plan-lijst li{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.plan-lijst .icoon{width:16px;height:16px;color:var(--green-d);stroke-width:2.25;margin-top:2px}
.vf-eerlijk{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:16px 20px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
.vf-eerlijk .icoon{width:20px;height:20px;margin-top:1px;color:var(--green-d)}
.vf-eerlijk p{font-size:15px;line-height:1.55;color:var(--text-2);max-width:none}
.vf-eerlijk b{font-weight:600;color:var(--text)}
/* FAQ links op de leesbreedte, gelijk met de koppen erboven (was gecentreerd) */
.vf-faq .faq{max-width:var(--lees)}
.vf-slot{padding-top:var(--sectie-y);padding-bottom:var(--sectie-y)}
@media(max-width:1023px){
  .stat-tegels--5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .stat-tegels--5 .stat-tegel{grid-column:span 2}
  .stat-tegels--5 .stat-tegel:nth-child(4){grid-column:2/span 2}
  .stat-tegels--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vf-kopblok-raster{grid-template-columns:minmax(0,1fr);align-items:start}
  .vf-beloftes{max-width:560px}
  .vf-functies{grid-template-columns:minmax(0,1fr);gap:32px}
  .vf-plannen{grid-template-columns:minmax(0,1fr);max-width:560px;gap:24px}
  .vf-tarief-balk{align-items:flex-start}
}
/* Maand of jaar: een gesegmenteerde knop met 8 px; "tot -25%" als amber pil
   in de knop Jaarlijks, zoals in opmaak C */
.billing-toggle{display:inline-flex;align-items:center;gap:2px;background:var(--vlak);border:1px solid var(--border);border-radius:var(--r-md);padding:3px}
.billing-knop{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 16px;border-radius:var(--r-sm);border:0;cursor:pointer;font-size:14px;font-weight:500;background:transparent;color:var(--text-2);transition:background .15s,color .15s,box-shadow .15s}
.billing-knop:hover{color:var(--text)}
.billing-knop[aria-pressed="true"]{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(16,24,20,.1),0 0 0 1px var(--border)}
.billing-korting{background:var(--amber-l);color:var(--amber-d);font-size:11px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill)}

/* Kaartpin (Leaflet): de druppel uit het logo */
.map-pin{width:32px;height:32px;background:var(--green);border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2.5px solid #fff;box-shadow:0 2px 8px rgba(16,24,20,.22);display:grid;place-items:center}
.map-pin svg{transform:rotate(45deg);width:17px;height:17px;display:block}
.map-pin{transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.map-pin.is-actief{transform:rotate(-45deg) scale(1.15);box-shadow:0 0 0 4px rgba(141,198,63,.45),0 4px 14px rgba(16,24,20,.28)}
.kaart-cluster{width:100%;height:100%;border-radius:50%;background:var(--green);color:#fff;border:3px solid #fff;box-shadow:0 0 0 4px rgba(26,130,84,.18),0 2px 8px rgba(16,24,20,.2);display:grid;place-items:center;font:inherit;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.kaart-popup-naam{font-weight:600;color:var(--green-d);text-decoration:none}
.kaart-popup-sub{color:var(--muted);font-size:13px;margin-top:2px}
.map-pin.featured{background:linear-gradient(135deg,var(--amber),#e08a0a);width:40px;height:40px}
.map-pin.featured svg{width:21px;height:21px}
.leaflet-container{font-family:inherit}
.leaflet-bar{border:0!important;box-shadow:var(--shadow-sm)!important;border-radius:var(--r-sm)!important;overflow:hidden}
.leaflet-bar a{width:32px!important;height:32px!important;line-height:32px!important;color:var(--text)!important;border-bottom-color:var(--hairline)!important}
.leaflet-control-attribution{font-size:10px!important;background:rgba(255,255,255,.75)!important;border-radius:6px 0 0 0}
/* Bronvermelding in het groen van de site (Leaflet-blauw haalde 3,6:1), op
   elke kaart; twee klassen diep, want leaflet.css laadt na deze stylesheet */
.leaflet-container .leaflet-control-attribution{line-height:1.5;color:var(--muted);background:rgba(255,255,255,.88)!important;padding:1px 6px}
.leaflet-container .leaflet-control-attribution a{color:var(--green-d)}
.leaflet-popup-content-wrapper{border-radius:var(--r-md)!important;box-shadow:var(--shadow-md)!important}
.leaflet-popup-content{font-size:14px}

/* ── 14. Winkelpagina ──────────────────────────────────────────────────── */
/* Zelfde indeling als altijd: foto's linksboven, kaart en contact rechts, dan
   kenmerken, over, reviews en de eigenaar; daaronder vergelijkbaar en in de
   buurt. Gedrag in public/js/winkel.js. */
.winkel-top{background:#fff;border-bottom:1px solid var(--hairline)}
.gallery-info-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;padding:24px 0 40px;align-items:start}
.winkel-links{min-width:0}

/* Foto's: mozaïek van 1 tot 5 (op mobiel een carrousel) */
.galerij{position:relative;margin-bottom:24px}
.galerij-raster{display:grid;gap:6px;height:400px;border-radius:var(--r-lg);overflow:hidden;background:#e9e7e0}
.galerij--n1 .galerij-raster{grid-template-columns:minmax(0,1fr)}
/* Alleen een straatbeeld: lager dan een echte foto, het is maar een schets van de straat */
.galerij--straat.galerij--n1 .galerij-raster{height:320px}
/* Haarlijn langs de rand: witte foto's lopen niet meer over in de witte pagina */
.galerij[class*="galerij--n"]::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(26,37,32,.08);pointer-events:none;z-index:2}
.galerij--n2 .galerij-raster{grid-template-columns:3fr 2fr}
.galerij--n3 .galerij-raster{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.galerij--n4 .galerij-raster,.galerij--n5 .galerij-raster{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}
.galerij--n3 .galerij-tegel:first-child,.galerij--n4 .galerij-tegel:first-child,.galerij--n5 .galerij-tegel:first-child{grid-row:1/3}
.galerij--n4 .galerij-tegel:nth-child(2){grid-column:2/4}
.galerij-tegel{position:relative;margin:0;min-width:0;min-height:0;overflow:hidden;background:#e9e7e0}
.galerij-tegel:nth-child(n+6){display:none}
.galerij-knop{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;color:inherit}
/* Focus: donkergroene ring met wit erbinnen, zichtbaar op elke foto (limoen
   was 1,95:1 op een lichte lucht). De ring staat op ::after, boven de foto;
   de transparante outline blijft voor de modus met geforceerde kleuren. */
.galerij-knop:focus-visible{outline:3px solid transparent;outline-offset:-3px;box-shadow:none}
.galerij-knop:focus-visible::after{box-shadow:inset 0 0 0 3px var(--green-dd),inset 0 0 0 6px #fff}
.galerij-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease),filter .2s var(--ease)}
.galerij-knop:hover .galerij-img{transform:scale(1.03)}
.galerij-knop::after{content:"";position:absolute;inset:0;background:rgba(16,24,20,0);transition:background .2s var(--ease);pointer-events:none}
.galerij-knop:hover::after{background:rgba(16,24,20,.06)}
/* Past een foto slecht in zijn vak, dan helemaal tonen op een vervaagde kopie */
.galerij-waas{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(24px) saturate(1.15) brightness(.9);transform:scale(1.04);pointer-events:none}
.galerij-tegel.is-passend .galerij-img{object-fit:contain}
.galerij-tegel.is-passend .galerij-knop:hover .galerij-img,.galerij-tegel.is-straat .galerij-knop:hover .galerij-img{transform:none}
/* Straatbeeld: de onderrand blijft altijd in beeld, want daar staan het
   Google-logo (links) en de copyright (rechts). Google Maps Platform staat niet
   toe dat die worden weggesneden of afgedekt; "Straatbeeld via Google" vervangt
   het logo niet. Liever de lucht kwijt dan de onderrand. */
.galerij-tegel.is-straat .galerij-img,.galerij-straatlaag img{object-position:center bottom}
/* Is de laatste tegel een straatbeeld, dan staat "Alle foto's" links onderaan
   (op de grote eerste foto) en niet over de copyright van het straatbeeld. */
.galerij:has(.galerij-tegel.is-straat:last-child:nth-child(-n+5)) .galerij-alle{right:auto;left:14px}
.galerij-tegel:not(.is-passend) .galerij-waas{display:none}
.galerij-meer{position:absolute;inset:0;display:grid;place-items:center;background:rgba(16,24,20,.5);color:#fff;font-size:22px;font-weight:700;letter-spacing:-.01em}
.galerij-label{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:rgba(16,24,20,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:11.5px;font-weight:500;letter-spacing:.01em;pointer-events:none;white-space:nowrap}
.galerij-label .icoon{width:13px;height:13px}
.galerij-alle{position:absolute;right:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.95);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm);transition:background .15s,box-shadow .15s,transform .15s var(--ease)}
.galerij-alle .icoon{width:16px;height:16px}
.galerij-alle:hover{background:#fff;box-shadow:var(--shadow-md)}
.galerij-alle:active{transform:translateY(1px)}
.galerij-teller,.galerij-punten{display:none}
/* Geen foto: een rustig vak met de plaats, en een straatbeeld erover als dat er is */
.galerij-leeg{position:relative;height:176px;border-radius:var(--r-lg);background:var(--green-xl);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;gap:20px;padding:24px 32px;overflow:hidden}
.galerij-leeg::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(circle at 1px 1px,rgba(26,130,84,.22) 1px,transparent 0);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 65% 75% at 50% 50%,transparent 35%,#000 100%);mask-image:radial-gradient(ellipse 65% 75% at 50% 50%,transparent 35%,#000 100%)}
.galerij-leeg>*{position:relative}
/* Visitekaartje: de beginletters van de zaak in plaats van een fietsicoon */
.galerij-leeg-monogram{width:56px;height:56px;border-radius:50%;background:var(--green-l);box-shadow:0 0 0 4px #fff,var(--shadow-sm);display:grid;place-items:center;flex-shrink:0;color:var(--green-dd);font-size:22px;font-weight:750;letter-spacing:-.02em;line-height:1}
.galerij-leeg-tekst{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.galerij-leeg-titel{font-size:14px;font-weight:500;color:var(--muted)}
.galerij-leeg-adres{display:inline-flex;align-items:center;gap:5px;font-size:14px;color:var(--text-2)}
.galerij-leeg-adres .icoon{width:14px;height:14px;color:var(--green)}
.galerij-leeg-link{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:13px;font-weight:600;color:var(--green-d)}
.galerij-leeg-link .icoon{width:14px;height:14px;transition:transform .18s var(--ease)}
.galerij-leeg-link:hover{color:var(--green)}
.galerij-leeg-link:hover .icoon{transform:translateX(2px)}
.galerij-straatlaag{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;background:#e9e7e0;opacity:0;visibility:hidden;transition:opacity .35s var(--ease)}
.galerij-straatlaag.is-geladen{opacity:1;visibility:visible}
.galerij-straatlaag img{width:100%;height:100%;object-fit:cover}
.galerij--leeg.heeft-straat .galerij-leeg{height:320px}
/* Ligt het straatbeeld over het lege vak, dan staat de eigenaarslink hier. */
.galerij-straat-eigenaar{position:absolute;right:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.94);color:var(--green-dd);font-size:13px;font-weight:600;box-shadow:var(--shadow-sm);transition:background .15s,box-shadow .15s}
.galerij-straat-eigenaar .icoon{width:14px;height:14px}
.galerij-straat-eigenaar:hover{background:#fff;box-shadow:var(--shadow-md)}
/* Alleen een logo: rustig wit vlak, logo nooit bijgesneden */
.galerij-logo{position:relative;height:200px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-xs);display:flex;align-items:center;justify-content:center;padding:40px;overflow:hidden}
.galerij-logo::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(26,130,84,.10) 1px,transparent 0);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,transparent 40%,#000 100%);mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,transparent 40%,#000 100%)}
.galerij-logo img{position:relative;max-height:96px;max-width:min(70%,360px);width:auto;height:auto;object-fit:contain}

/* Naam, beoordeling, status, merken en knoppen */
.winkel-titel{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.detail-h1{font-size:clamp(28px,3vw,36px);font-weight:700;color:var(--text);margin:0;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.winkel-rating{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:12px;font-size:14px;color:var(--muted)}
.winkel-rating .sterren{vertical-align:0}
.winkel-rating-cijfer{font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.winkel-rating-sep{color:var(--soft)}
.winkel-rating-aantal{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;color:var(--muted);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
a.winkel-rating-aantal:hover{color:var(--text-2);text-decoration-color:currentColor}
.winkel-rating .tekstlink{font-size:14px;margin-left:4px}
/* Nog geen reviews: dezelfde plek en hoogte als de score, rustig grijs */
.winkel-rating--leeg a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.winkel-rating--leeg .icoon{width:16px;height:16px;color:var(--soft)}
.winkel-rating-eerste{color:var(--green-d);font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s}
.winkel-rating--leeg a:hover .winkel-rating-eerste{text-decoration-color:currentColor}
.g-icoon{width:14px;height:14px;flex-shrink:0;display:inline-block}
/* Eerst open of dicht, dan "Fietsenmaker in Nijmegen" als rustige tekstregel */
.winkel-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px}
.winkel-meta .status{height:28px;line-height:28px;padding:0 12px;font-size:13px}
.winkel-plek{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text-2);min-width:0}
.winkel-plek .icoon{width:14px;height:14px;color:var(--green)}
.winkel-plek a{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
.winkel-plek a:hover{color:var(--green-d);text-decoration-color:currentColor}
/* Merken en specialisaties: één regel, hoogstens vier plus "+n" */
.winkel-chips{margin-top:12px}
.winkel-chips .chip-sm{height:24px;font-size:12.5px}
.detail-actions{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-top:22px}
.winkel-meer{margin-left:6px;font-size:15px}
.winkel-vertrouwen{display:flex;align-items:center;gap:6px;margin-top:16px;font-size:13px;color:var(--muted)}
.winkel-vertrouwen .icoon{width:14px;height:14px;color:var(--green)}

/* Contactkaart met kaart rechts */
.detail-contact-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;position:sticky;top:calc(var(--nav-h) + 20px)}
.winkel-kaart{height:200px;background:#eef1f0;z-index:0;border-bottom:1px solid var(--hairline)}
/* Kaart in de huisstijl: losse witte knoppen met een zachte schaduw, een
   rustige bronvermelding zonder vlaggetje (setPrefix in public/js/winkel.js) */
.winkel-kaart .leaflet-bar{box-shadow:none!important;border-radius:0!important;overflow:visible;display:flex;flex-direction:column;gap:6px}
.winkel-kaart .leaflet-bar a,.winkel-kaart .leaflet-bar a:first-child,.winkel-kaart .leaflet-bar a:last-child{width:32px!important;height:32px!important;line-height:32px!important;border:0!important;border-radius:var(--r-md)!important;background:#fff;color:var(--text-2)!important;box-shadow:var(--shadow-sm);font-size:18px;font-weight:500;transition:background .15s,color .15s}
.winkel-kaart .leaflet-bar a:hover{background:var(--green-xl);color:var(--green-d)!important}
.winkel-kaart .leaflet-bar a:focus-visible{outline:2px solid var(--green);outline-offset:2px;box-shadow:var(--ring)}
.winkel-kaart .leaflet-control-attribution{font-size:10px!important;line-height:1.5;color:var(--muted);background:rgba(255,255,255,.85)!important;border-radius:6px 0 0 0;padding:1px 6px}
.winkel-kaart .leaflet-control-attribution a{color:var(--green-d)}
/* Rijen: scheidingslijn tussen de rijen, zodat een rij bij hover als geheel
   oplicht (telefoon en website: de hele rij is de link) */
.dcr-lijst{padding:6px 10px}
.dcr{position:relative;display:flex;align-items:flex-start;gap:12px;padding:12px 10px;border-radius:var(--r-md);min-width:0;transition:background .15s var(--ease)}
.dcr+.dcr::before{content:"";position:absolute;left:10px;right:10px;top:0;border-top:1px solid var(--hairline);transition:opacity .15s}
.dcr.is-klikbaar:hover{background:var(--green-xl)}
.dcr.is-klikbaar:hover::before,.dcr.is-klikbaar:hover+.dcr::before{opacity:0}
.dcr.is-klikbaar .dcr-a::after{content:"";position:absolute;inset:0;border-radius:var(--r-md)}
.dcr.is-klikbaar:focus-within{background:var(--green-xl)}
.dcr.is-klikbaar .dcr-a:focus-visible{outline:none;box-shadow:none}
.dcr.is-klikbaar .dcr-a:focus-visible::after{outline:2px solid var(--green);outline-offset:0;box-shadow:var(--ring)}
.dcr-rechts{align-self:center;margin-left:auto;display:grid;place-items:center;color:var(--soft);transition:color .15s var(--ease),transform .15s var(--ease)}
.dcr-rechts .icoon{width:16px;height:16px}
.dcr.is-klikbaar:hover .dcr-rechts{color:var(--green);transform:translateX(2px)}
/* Groen rond icoon en een klein label in hoofdletters (opmaak C) */
.dcr-icoon{width:32px;height:32px;border-radius:50%;background:var(--green-l);color:var(--green-d);display:grid;place-items:center;flex-shrink:0}
.dcr-icoon .icoon{width:16px;height:16px}
.dcr-tekst{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.dcr-label{font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.dcr-waarde{font-size:15px;font-weight:500;color:var(--text);line-height:1.45;overflow-wrap:anywhere;max-width:100%}
.dcr-a{color:var(--green-d);font-weight:600;transition:color .15s}
.dcr-a:hover{color:var(--green-dd)}
.dcr-tel{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.005em}
.dcr-web{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.dcr-web span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Openingstijden: de statuszin als hoofdregel, vandaag klein eronder */
.status.dcr-status{display:block;height:auto;padding:0;background:none;font-size:15px;font-weight:600;line-height:1.45;white-space:normal}
.status.dcr-status::before{width:7px;height:7px;margin-right:9px;vertical-align:2px}
.status.dcr-status.is-open{color:var(--ok)}
.status.dcr-status.is-open::before{box-shadow:0 0 0 3px var(--ok-l)}
.status.dcr-status.is-dicht{color:var(--text)}
.status.dcr-status.is-dicht::before{box-shadow:0 0 0 3px var(--g200)}
.status.dcr-status.is-onbekend{color:var(--text-2)}
.status.dcr-status .status-sub{font-weight:500;color:var(--text-2)}
.status.dcr-status.is-open .status-sub{color:var(--ok)}
.dcr-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:14px;color:var(--muted)}
.dcr-vandaag{font-variant-numeric:tabular-nums}
.dcr-vandaag:empty{display:none}
.dcr-link{font-size:13px;font-weight:600;color:var(--green-d)}
.dcr-link:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.dcr-voet{padding:6px 20px 20px}

/* Kolommen onder de kop */
.profile-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;padding:48px 0 72px;align-items:start}
.winkel-main{min-width:0}
.winkel-zij{position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;gap:16px}
.winkel-zij:empty{display:none}
/* Snelkaart: blijft naast kenmerken en reviews staan, zodat bellen of de
   route nooit terugscrollen kost (het patroon van de boekkaart van Airbnb) */
.snelkaart{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:18px 20px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;transition:opacity .15s var(--ease),transform .15s var(--ease),visibility .15s}
/* Zolang de contactkaart bovenaan in beeld is, blijft de snelkaart weg (zelfde
   status, nummer en knoppen). Zijn plek blijft bewaard, zodat de eigenaarskaart
   eronder niet verspringt. public/js/winkel.js zet .snel-uit. */
.winkel-zij.snel-uit .snelkaart{opacity:0;visibility:hidden;transform:translateY(-4px)}
.snelkaart-naam{font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--text);line-height:1.3;max-width:100%;overflow-wrap:anywhere}
.snelkaart .status{display:block;height:auto;padding:0;background:none;font-size:14px;line-height:1.45;white-space:normal}
.snelkaart .status.is-dicht{color:var(--text-2)}
.snelkaart-tel{font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.005em}
.snelkaart-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:8px}
.snelkaart-knoppen .btn{height:40px;padding:0 12px;font-size:14.5px}
.snelkaart-knoppen .btn:only-child{grid-column:1/-1}
/* Eigenaar: opvallend, maar geen concurrent van Bellen */
.btn-zacht{background:var(--green-xl);color:var(--green-d);border-color:var(--green-l)}
.btn-zacht:hover{background:var(--green-l);color:var(--green-dd);border-color:color-mix(in srgb,var(--green) 30%,var(--green-l))}
.winkel-sectie{padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--hairline)}
.winkel-sectie:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

/* Kenmerken */
.kenmerken{display:flex;flex-direction:column}
.kenmerk{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--hairline)}
.kenmerk:first-child{border-top:0;padding-top:2px}
.kenmerk dt{display:flex;align-items:center;gap:12px;min-height:32px;align-self:start;font-size:15px;font-weight:500;color:var(--text-2)}
.kenmerk-icoon{width:32px;height:32px;border-radius:var(--r-sm);background:var(--green-l);color:var(--green-d);display:grid;place-items:center;flex-shrink:0}
.kenmerk-icoon .icoon{width:16px;height:16px}
.kenmerk dd{margin:0;min-width:0;min-height:32px;display:flex;align-items:center}
.kenmerk-waarde{font-size:15px;font-weight:500;color:var(--text);line-height:1.5}
/* Nog niets bekend: een rustige kaart met een uitnodiging aan de eigenaar */
.kenmerken-leeg{display:flex;align-items:flex-start;gap:16px;background:#fff;border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:20px 22px}
.kenmerken-leeg-tekst{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.kenmerken-leeg-tekst p{font-size:15px;line-height:1.55;color:var(--text-2);max-width:560px}
.kenmerken-leeg-tekst .kenmerken-leeg-titel{font-size:16px;font-weight:600;color:var(--text)}
.kenmerken-leeg-tekst .tekstlink{margin-top:4px;font-size:14px}

/* Openingstijden: de hele week, vandaag gemarkeerd (public/js/site.js) */
.uren{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;max-width:380px;padding-top:4px}
.uren-tabel{border-collapse:separate;border-spacing:0;font-size:14.5px;font-variant-numeric:tabular-nums;margin-left:-12px;width:calc(100% + 12px)}
.uren-tabel th,.uren-tabel td{padding:6px 12px;line-height:1.45}
.uren-tabel th{text-align:left;font-weight:500;color:var(--text-2)}
.uren-tabel td{text-align:right;color:var(--text);font-weight:500;white-space:nowrap}
.uren-tabel tr.is-dicht td{color:var(--muted);font-weight:400}
/* "Onbekend": niet meer cursief; het woord onderscheidt het van "Gesloten".
   --muted en niet --soft: dat haalt geen 4,5:1 als tekst. */
.uren-tabel tr.is-onbekend td{color:var(--muted);font-weight:400}
/* Vandaag: tint plus een groene balk links, de tijd vetter */
.uren-tabel tr.is-vandaag th,.uren-tabel tr.is-vandaag td{background:var(--green-l);color:var(--green-dd);font-weight:600}
.uren-tabel tr.is-vandaag th{box-shadow:inset 3px 0 0 var(--green)}
.uren-tabel tr.is-vandaag.is-dicht td,.uren-tabel tr.is-vandaag.is-onbekend td{color:var(--muted);font-weight:500}
.uren-tabel tr.is-vandaag th{border-radius:8px 0 0 8px}
.uren-tabel tr.is-vandaag td{border-radius:0 8px 8px 0}
.uren-noot{font-size:14px;color:var(--muted);line-height:1.5}
.uren-afspraak{font-size:15px;color:var(--text-2);line-height:1.5;margin:0}

/* Over */
.winkel-over{font-size:16px;line-height:1.65;color:var(--text-2);max-width:68ch}
/* Alleen bij meer dan acht regels (public/js/winkel.js): vijf regels met een
   zachte overloop in plaats van een harde ellips */
.winkel-over.is-ingekort:not(.is-open){max-height:calc(5 * 1.65em);overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.rv-text.is-open{-webkit-line-clamp:unset;line-clamp:unset;display:block}
.leesmeer{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--green-d);cursor:pointer;border-radius:4px}
.leesmeer .icoon{width:16px;height:16px;transition:transform .2s var(--ease)}
.leesmeer[aria-expanded="true"] .icoon{transform:rotate(180deg)}
.leesmeer:hover{color:var(--green)}
.leesmeer:hover [data-leesmeer-tekst]{text-decoration:underline;text-underline-offset:3px}

/* Diensten en prijzen (betaald) */
.svc-lijst{border-top:1px solid var(--hairline)}
/* Naam links, prijs altijd rechts op de eerste regel (ook als de naam afbreekt) */
.svc-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 12px;margin:0 -12px;border-radius:10px;transition:background .15s var(--ease)}
.svc-row+.svc-row::before{content:"";position:absolute;left:12px;right:12px;top:0;border-top:1px solid var(--hairline);transition:opacity .15s}
.svc-links{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.svc-name{font-size:15px;font-weight:500;color:var(--text)}
.svc-price{font-size:15px;font-weight:700;color:var(--green-dd);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(hover:hover){.svc-row:hover{background:var(--green-xl)}.svc-row:hover::before,.svc-row:hover+.svc-row::before{opacity:0}}

/* Reviews */
.rv-samenvatting{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;margin-bottom:16px}
.rv-cijfer{display:flex;align-items:center;gap:16px}
.rv-score{font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.rv-cijfer-rest{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.rv-bron{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.rv-acties{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.rv-acties .btn .icoon{width:15px;height:15px}
.rv-acties .tekstlink{font-size:14px}
.rv-acties .tekstlink .icoon{width:13px;height:13px}
/* Twee kolommen als metselwerk (ronde 6): een korte review laat geen gat meer
   naast een lange (was een raster met rijen van ongelijke hoogte). De
   schermlezer leest ze gewoon in volgorde. */
.rv-lijst{columns:2;column-gap:16px}
.rv-lijst>.rv-card{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:16px}
.rv-lijst.is-ingeklapt>.rv-card:nth-child(n+7){display:none}
.rv-lijst.heeft-uitgelicht.is-ingeklapt>.rv-card:nth-child(7){display:flex}
/* Oneven aantal reviews met tekst: de eerste over de volle breedte, groter,
   daaronder een nette 2x2 (server.js zet .rv-card--uitgelicht) */
.rv-card--uitgelicht{column-span:all;-webkit-column-span:all}
.rv-card--uitgelicht .rv-text{font-size:16px;line-height:1.6;-webkit-line-clamp:4;line-clamp:4;color:var(--text)}
.rv-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.rv-kop{display:flex;align-items:center;gap:12px;min-width:0;width:100%}
.rv-avatar{position:relative;width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:15px;font-weight:700}
.rv-avatar img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.rv-avatar.tint-1{background:var(--green-l);color:var(--green-dd)}
.rv-avatar.tint-2{background:var(--amber-l);color:var(--amber-d)}
.rv-avatar.tint-3{background:#e8eef7;color:#2b4c7e}
.rv-avatar.tint-4{background:#f3e8f7;color:#6b2f86}
.rv-avatar.tint-5{background:#eceae4;color:#4a4a42}
.rv-avatar-bron{position:absolute;right:-4px;bottom:-4px;z-index:1;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--hairline),var(--shadow-xs);display:grid;place-items:center}
.rv-avatar-bron .g-icoon{width:11px;height:11px}
.rv-kop-tekst{display:flex;flex-direction:column;gap:3px;min-width:0}
.rv-author{font-size:15px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-sub{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.rv-sub .sterren svg{width:13px;height:13px}
.rv-text{font-size:15px;line-height:1.6;color:var(--text-2);overflow-wrap:anywhere;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rv-card .leesmeer{margin-top:-6px}
/* Alleen sterren, geen tekst: een compacte kaart achteraan, steeds even hoog
   (naam, daaronder sterren en datum), in plaats van een grote lege kaart */
.rv-card--kort{padding:14px 20px;gap:0}
.rv-card--kort .rv-kop{gap:12px}
.rv-card--kort .rv-avatar{width:32px;height:32px;font-size:13px}
.rv-card--kort .rv-avatar-bron{width:16px;height:16px;right:-3px;bottom:-3px}
.rv-card--kort .rv-avatar-bron .g-icoon{width:9px;height:9px}
.rv-card--kort .rv-kop-tekst{gap:1px}
.rv-card--kort .rv-author{font-size:14.5px}
.rv-leeg{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.rv-leeg .icoonvlak{color:var(--amber-d);background:var(--amber-l)}
.rv-leeg b{display:block;font-size:15px;font-weight:600;color:var(--text)}
.rv-leeg p{font-size:14px;color:var(--muted);margin-top:2px}
.winkel-sectie .toon-meer{margin-top:16px}

/* Reviewformulier */
.rv-form{margin-top:24px;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:24px}
.rv-form-titel{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.rv-form-sub{font-size:15px;color:var(--text-2);margin-top:4px;line-height:1.5}
.rv-kies-label{display:block;margin-top:18px}
.rv-kies-rij{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
/* Wat je koos, in woorden (public/js/winkel.js) */
.rv-kies-woord{font-size:14px;font-weight:600;color:var(--amber-d);margin-bottom:10px}
.rv-kies-woord:empty{display:none}
/* Velden klappen open zodra er een ster gekozen is; tot dan niet in de tabvolgorde */
.rv-uitklap{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .2s var(--ease),visibility .2s}
.rv-uitklap-binnen{min-height:0;overflow:hidden}
.rv-form.is-gekozen .rv-uitklap,.rv-form:has(.rv-kies input:checked) .rv-uitklap{grid-template-rows:1fr;visibility:visible}
.rv-form.is-gekozen .rv-uitklap-binnen,.rv-form:has(.rv-kies input:checked) .rv-uitklap-binnen{overflow:visible}
.rv-uitklap .rv-velden{padding-top:6px}
.rv-plaats{display:none}
.rv-form.is-gekozen .rv-plaats,.rv-form:has(.rv-kies input:checked) .rv-plaats{display:inline-flex}
.rv-form-noot{font-size:13px;color:var(--muted);margin-top:10px}
/* Nog geen reviews: één kaart met een uitnodiging (was twee kaarten) */
.rv-form--eerste{margin-top:0}
.rv-form-kop{display:flex;align-items:flex-start;gap:14px}
.rv-form-kop .icoonvlak{width:40px;height:40px;color:var(--amber-d);background:var(--amber-l);flex-shrink:0}
.rv-form-kop .icoonvlak .icoon{width:20px;height:20px}
/* Sterren van 1 tot 5, links naar rechts, in die volgorde in de DOM: pijl
   rechts is een ster meer en de schermlezer leest 1, 2, 3, 4, 5. De kleur
   volgt de keuze via :has(). Een lege ster is een omlijnde ster (3,2:1 op wit). */
.rv-kies{display:inline-flex;gap:0;border:0;padding:0;margin:-1px 0 10px -8px}
.rv-kies label{--vul:var(--g200);--rand:var(--soft);display:block;padding:8px;border-radius:10px;cursor:pointer;transition:transform .12s var(--ease)}
.rv-kies svg{display:block;width:28px;height:28px;fill:var(--vul);stroke:var(--rand);stroke-width:1.5;stroke-linejoin:round;transition:fill .12s,stroke .12s}
.rv-kies:has(input:checked) label{--vul:var(--amber);--rand:var(--amber-rand)}
.rv-kies input:checked~input+label{--vul:var(--g200);--rand:var(--soft)}
fieldset.rv-kies:has(label:hover) label{--vul:var(--amber);--rand:var(--amber-rand)}
fieldset.rv-kies label:hover~input+label{--vul:var(--g200);--rand:var(--soft)}
.rv-kies label:hover{transform:scale(1.08)}
.rv-kies input:focus-visible+label{outline:2px solid var(--green);outline-offset:-2px;box-shadow:var(--ring)}
.rv-velden{display:grid;gap:14px}
.rv-veld{display:flex;flex-direction:column;gap:6px}
.rv-veld-label{font-size:13.5px;font-weight:600;color:var(--text)}
.rv-optioneel{font-weight:400;color:var(--muted)}
.rv-form textarea.veld{height:auto;min-height:112px;padding:11px 14px;line-height:1.5;resize:vertical}
.rv-form-voet{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:8px}
.rv-form.is-gekozen .rv-form-voet,.rv-form:has(.rv-kies input:checked) .rv-form-voet{margin-top:18px}
.rv-form-voet .tekstlink{font-size:14px}
.rv-melding{font-size:13.5px;line-height:1.5;margin-top:12px;color:var(--muted)}
.rv-melding:empty{display:none}
.rv-melding.is-fout{color:var(--bad)}
.rv-melding.is-goed{color:var(--ok)}

/* Zijkolom: eigenaar of upgrade */
.zijkaart{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px}
.zijkaart-kop{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.zijkaart .icoonvlak{width:36px;height:36px}
.zijkaart .icoonvlak .icoon{width:18px;height:18px}
.zijkaart-titel{font-size:16px;font-weight:600;color:var(--text);letter-spacing:-.005em}
.zijkaart p{font-size:14px;color:var(--text-2);line-height:1.55;margin-bottom:14px}
.zijkaart-upgrade{background:var(--amber-l);border-color:var(--amber-b)}
.zijkaart-upgrade .icoonvlak{background:#fff;color:var(--amber-d)}
.zijkaart-upgrade p{color:var(--amber-d)}
.zijkaart-voet{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zijkaart-prijs{font-size:14px;font-weight:700;color:var(--amber-d);font-variant-numeric:tabular-nums}
.zijkaart-prijs span{font-weight:400}

/* Vergelijkbaar en in de buurt */
.winkel-band{padding:64px 0;border-top:1px solid var(--hairline);background:var(--bg)}
.winkel-band--wit{background:#fff}
.band-kop{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:20px}
.band-kop .t-h2{margin:0}
.band-kop .tekstlink{font-size:15px}
.vergelijkbaar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.vergelijkbaar .fotokaart-beeld{aspect-ratio:4/3}
.vergelijkbaar .fotokaart-body{padding:14px 16px 16px;gap:6px}
/* Namen op twee regels (was één regel met "JasperFietsen fietsverhuur en ..."),
   altijd twee regels hoog, zodat score en status in elke kaart even hoog staan */
.vergelijkbaar .fotokaart-naam{font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.3em);overflow-wrap:anywhere}
.vergelijkbaar .fotokaart-kop{align-items:flex-start}
.vergelijkbaar .fotokaart-kop .tier-pill-featured,.vergelijkbaar .fotokaart-kop .tier-pill-verified{margin-top:1px}
/* Minder dan vier winkels: de rij loopt door naar de hele stad */
.vergelijk-alle{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:24px;border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);color:var(--text);text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease)}
.vergelijk-alle-icoon{width:48px;height:48px;border-radius:var(--r-md);background:var(--green-l);color:var(--green-d);display:grid;place-items:center}
.vergelijk-alle-icoon .icoon{width:24px;height:24px}
.vergelijk-alle-tekst{font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.005em}
.vergelijk-alle-pijl{color:var(--green-d)}
.vergelijk-alle-pijl .icoon{width:18px;height:18px;transition:transform .18s var(--ease)}
.vergelijk-alle:hover{background:var(--green-xl);border-color:var(--green)}
.vergelijk-alle:hover .vergelijk-alle-pijl .icoon{transform:translateX(3px)}
.vergelijkbaar .fotokaart-score b{font-size:15px;font-weight:600}
.vergelijkbaar .fotokaart-score .sterren svg{width:13px;height:13px}
.fotokaart-kop{display:flex;align-items:center;gap:8px;min-width:0}
.fotokaart-kop .fotokaart-naam{min-width:0}
.fotokaart .tier-pill-featured,.fotokaart .tier-pill-verified{height:20px;font-size:11px;padding:0 8px 0 6px;flex-shrink:0}
.fotokaart-meta{display:flex;align-items:center;gap:8px;min-width:0}
.top3 .fotokaart-meta{flex-wrap:wrap;gap:6px 10px}
.top3 .fotokaart-meta .fotokaart-sub{font-size:13px}
.fotokaart-meta .fotokaart-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}

/* Fotoviewer: raster met alle foto's en lichtbak (public/js/winkel.js) */
dialog.fotoviewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;color:var(--text);overflow:hidden}
dialog.fotoviewer::backdrop{background:rgba(16,24,20,.6)}
dialog.fotoviewer[open]{animation:fadeIn .18s var(--ease)}
html.fv-open{overflow:hidden}
.fv-balk{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 16px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--hairline)}
.fv-titel{font-size:15px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv-icoonknop{width:40px;height:40px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:inherit;flex-shrink:0;transition:background .15s}
.fv-icoonknop .icoon{width:20px;height:20px}
button.fv-icoonknop:hover{background:var(--vlak)}
.fv-raster-wrap{height:calc(100% - 64px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg)}
.fv-raster{max-width:920px;margin:0 auto;padding:24px 20px 64px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fv-tegel{position:relative;display:block;width:100%;aspect-ratio:4/3;border:0;padding:0;background:#e9e7e0;cursor:zoom-in;overflow:hidden;border-radius:var(--r-md)}
.fv-tegel:nth-child(3n+1){grid-column:1/-1;aspect-ratio:16/9}
.fv-tegel img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.fv-tegel:hover img{transform:scale(1.02)}
.fv-tegel:focus-visible{outline:3px solid var(--green-dd);outline-offset:2px;box-shadow:none}
.fv-licht{position:absolute;inset:0;z-index:10;background:#0e1411;color:#fff;display:none;flex-direction:column}
.fv-licht.is-open{display:flex;animation:fadeIn .18s var(--ease)}
.fv-licht .fv-balk{background:transparent;border-bottom:0;color:#fff}
.fv-licht button.fv-icoonknop:hover{background:rgba(255,255,255,.12)}
.fv-teller{font-size:14px;font-weight:500;color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
.fv-podium{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:0 20px 24px;touch-action:pan-y}
.fv-figuur{position:relative;flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:0}
/* Het vak is altijd even groot (contain), zodat de vervaagde voorlopige foto
   en de scherpe precies op elkaar liggen (public/js/winkel.js) */
.fv-figuur img{width:100%;flex:1 1 0;min-height:0;object-fit:contain;user-select:none;-webkit-user-drag:none;transition:filter .15s var(--ease)}
.fv-figuur img:not([src]){visibility:hidden}
.fv-figuur img.is-voorlopig{filter:blur(12px)}
.fv-figuur.met-spinner::after{content:"";position:absolute;left:50%;top:calc(50% - 16px);width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:rgba(255,255,255,.6);background:rgba(16,24,20,.18);animation:fvDraai .8s linear infinite;pointer-events:none}
@keyframes fvDraai{to{transform:rotate(360deg)}}
.fv-bijschrift{font-size:13.5px;color:rgba(255,255,255,.72);text-align:center;min-height:20px}
.fv-pijl{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background .15s,border-color .15s}
.fv-pijl .icoon{width:22px;height:22px}
.fv-pijl:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.7)}
.fv-pijl[hidden]{display:grid!important;visibility:hidden}
.fv-licht :focus-visible{outline-color:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.2)}

/* Vaste actiebalk op mobiel: Bellen, Website, Route; nooit over twee regels */
.mob-actiebalk{display:none}
@media(max-width:820px){
  .mob-actiebalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:400;gap:8px;padding:10px max(12px,calc((100% - 560px) / 2)) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--hairline);box-shadow:0 -8px 24px -12px rgba(16,24,20,.18)}
  .mob-actiebalk a{flex:1 1 0;min-width:0;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;border-radius:var(--r-pill);font-weight:650;font-size:14.5px;line-height:1;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
  .mob-actiebalk a span{overflow:hidden;text-overflow:ellipsis}
  .mob-actiebalk .icoon{width:18px;height:18px}
  .mob-actiebalk .bel{flex:1.4 1 0;background:var(--green);color:#fff;box-shadow:0 1px 2px rgba(15,79,51,.25),inset 0 1px 0 rgba(255,255,255,.12)}
  .mob-actiebalk .bel:active{background:var(--green-d)}
  .mob-actiebalk .tweede{background:#fff;color:var(--text);border:1px solid var(--border-strong)}
  .mob-actiebalk .tweede .icoon{color:var(--green-d)}
  body.heeft-actiebalk{padding-bottom:80px}
  /* Wat focus krijgt, schuift boven de balk en niet eronder (WCAG 2.4.11) */
  html:has(.mob-actiebalk){scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  body.heeft-actiebalk .cookie-banner{bottom:calc(84px + env(safe-area-inset-bottom))}
  /* De actiebalk belt al: de knop in de kop zou dubbel staan. */
  .winkel .winkel-bel,.detail-actions.heeft-balk .btn-secondary{display:none}
  .winkel-meer{margin-left:0}
}
@media(max-width:374px){
  .mob-actiebalk .tweede .icoon{display:none}
}

/* Winkelpagina: kleinere schermen */
@media(max-width:1024px){
  .profile-layout{grid-template-columns:minmax(0,1fr);gap:40px;padding:40px 0 56px}
  .winkel-zij{position:static;max-width:520px}
  /* Eén kolom: de contactkaart staat al bovenaan, op mobiel is er de actiebalk */
  .snelkaart{display:none}
  .vergelijkbaar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Tussen 861 en 1040 px is de fotokolom 425 tot 605 px breed: vier of vijf
   tegels worden daar smalle stroken met balken. Dan de indeling van drie, en
   de rest achter "Alle n foto's". */
@media(min-width:861px) and (max-width:1040px){
  .galerij--n4 .galerij-raster,.galerij--n5 .galerij-raster{grid-template-columns:2fr 1fr}
  .galerij--n4 .galerij-tegel:nth-child(2){grid-column:auto}
  .galerij--n4 .galerij-tegel:nth-child(n+4),.galerij--n5 .galerij-tegel:nth-child(n+4){display:none}
}
@media(max-width:860px){
  .gallery-info-grid{grid-template-columns:minmax(0,1fr);gap:24px;padding:16px 0 32px}
  .detail-contact-card{position:static}
  .galerij{margin-bottom:20px}
  .galerij-raster,.galerij--n1 .galerij-raster{display:flex;height:auto;aspect-ratio:16/10;max-height:440px;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .galerij-raster::-webkit-scrollbar{display:none}
  .galerij-tegel,.galerij-tegel:nth-child(n+6){display:block;flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always}
  .galerij-knop:hover .galerij-img{transform:none}
  .galerij-alle{display:none}
  /* Teller als knop naar alle foto's, met een rastericoon; stipjes in het midden */
  .galerij-teller{display:inline-flex;align-items:center;gap:6px;position:absolute;right:12px;bottom:12px;z-index:3;height:30px;padding:0 11px 0 9px;border:0;background:rgba(16,24,20,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:inherit;font-size:12.5px;font-weight:600;border-radius:var(--r-pill);font-variant-numeric:tabular-nums;cursor:pointer}
  .galerij-teller .icoon{width:14px;height:14px}
  .galerij-teller:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(16,24,20,.4)}
  /* Op een zacht donker pilletje, zodat ze ook op een witte productfoto te zien zijn */
  .galerij-punten{display:flex;gap:6px;position:absolute;left:50%;bottom:17px;z-index:3;transform:translateX(-50%);padding:5px 7px;border-radius:var(--r-pill);background:rgba(16,24,20,.24);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}
  .galerij-punten i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .2s}
  .galerij-punten i.is-actief{background:#fff}
  .galerij-teller[hidden],.galerij-punten[hidden]{display:none}
  .galerij-straat-eigenaar{height:30px;font-size:12.5px;right:10px;top:12px;padding:0 10px}
  .galerij-straat-eigenaar-pre{display:none}
  /* Op een straatbeeld staat de teller boven, weg van de copyright rechtsonder */
  .galerij.is-op-straat .galerij-teller{bottom:auto;top:12px}
  .galerij--straat.galerij--n1 .galerij-raster{height:auto}
  .galerij-leeg{height:150px}
  .galerij--leeg.heeft-straat .galerij-leeg{height:auto;aspect-ratio:16/10}
  .galerij-logo{height:160px;padding:28px}
  .galerij-logo img{max-height:80px}
}
/* Tablet: kaart links, rijen rechts, "Route plannen" over de volle breedte */
@media(min-width:600px) and (max-width:860px){
  .detail-contact-card:has(.winkel-kaart){display:grid;grid-template-columns:45% minmax(0,1fr);grid-template-areas:"kaart lijst" "voet voet"}
  .detail-contact-card .winkel-kaart{grid-area:kaart;height:auto;min-height:220px;border-bottom:0;border-right:1px solid var(--hairline)}
  .detail-contact-card .dcr-lijst{grid-area:lijst;padding:8px 12px}
  .detail-contact-card .dcr-voet{grid-area:voet;padding:14px 20px 18px;border-top:1px solid var(--hairline)}
}
@media(max-width:700px){
  .rv-lijst{columns:auto}
  .rv-lijst>.rv-card{margin-bottom:12px}
}
@media(max-width:640px){
  .gallery-info-grid{gap:20px;padding:12px 0 28px}
  /* Foto's van rand tot rand in 4:3; het lege vak en het logo blijven binnen de marge */
  .galerij[class*="galerij--n"]{margin-left:-16px;margin-right:-16px}
  .galerij[class*="galerij--n"]::after{border-radius:0;box-shadow:inset 0 1px 0 rgba(26,37,32,.06),inset 0 -1px 0 rgba(26,37,32,.06)}
  .galerij[class*="galerij--n"] .galerij-raster{border-radius:0;aspect-ratio:4/3;max-height:none}
  /* Alleen een straatbeeld: in zijn eigen maat (16:10), dan valt er links en
     rechts niets weg (4:3 sneed de "G" van het Google-logo half af) */
  .galerij.galerij--straat[class*="galerij--n"] .galerij-raster{aspect-ratio:16/10}
  .galerij-leeg{height:128px;padding:16px 20px;gap:14px;justify-content:flex-start}
  .galerij--leeg.heeft-straat .galerij-straatlaag{border-radius:10px}
  .galerij-leeg-monogram{width:48px;height:48px;font-size:19px}
  .galerij-leeg-adres{font-size:14px}
  .winkel-rating{margin-top:10px;gap:4px 8px}
  /* "536 reviews" is zelf de link naar de reviews; alles op één regel */
  .winkel-rating-cijfer{font-size:17px}
  .winkel-rating .winkel-rating-lees{display:none}
  a.winkel-rating-aantal{color:var(--text-2);text-decoration-color:var(--border-strong)}
  a.winkel-rating-aantal:hover,a.winkel-rating-aantal:active{color:var(--green-d);text-decoration-color:currentColor}
  .winkel-meta{margin-top:14px}
  .detail-actions{margin-top:18px}
  .winkel-kaart{height:180px}
  .dcr-lijst{padding:4px 16px}
  .dcr-voet{padding:4px 16px 16px}
  .profile-layout{padding:32px 0 48px;gap:32px}
  .winkel-sectie{padding-bottom:32px;margin-bottom:32px}
  .kenmerk{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0}
  .kenmerk dt{min-height:0;font-size:14px;gap:10px}
  .kenmerk-icoon{width:30px;height:30px}
  .kenmerk dd{min-height:0;padding-left:40px}
  .uren{max-width:none}
  .rv-samenvatting{padding:20px;margin-bottom:12px}
  .rv-score{font-size:36px}
  .rv-card{padding:16px}
  .rv-form{padding:20px}
  /* Categorie boven de naam, de prijs rechts op de eerste regel */
  .svc-row{align-items:start;gap:12px}
  .svc-links{flex-direction:column;align-items:flex-start;gap:4px}
  .svc-cat{height:20px;padding:0 6px;font-size:12px}
  .svc-name{font-size:14.5px;line-height:1.4}
  .winkel-band{padding:44px 0}
  .band-kop{margin-bottom:16px}
  .vergelijkbaar{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;gap:12px;margin:0 -16px;padding:2px 16px 12px;scrollbar-width:none}
  .vergelijkbaar::-webkit-scrollbar{display:none}
  .vergelijkbaar>*{flex:0 0 72vw;scroll-snap-align:start}
  .vergelijkbaar>*:hover{transform:none}
  /* Lichtbak: foto over de volle breedte, pijlen eronder */
  .fv-podium{position:relative;padding:0 0 88px}
  .fv-figuur img{border-radius:0}
  .fv-pijl{position:absolute;bottom:22px;width:44px;height:44px}
  .fv-pijl[data-fv-vorige]{left:16px}
  .fv-pijl[data-fv-volgende]{right:16px}
  .fv-raster{grid-template-columns:minmax(0,1fr);padding:12px 12px 48px}
  .fv-tegel,.fv-tegel:nth-child(3n+1){aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){
  .galerij-knop:hover .galerij-img,.fv-tegel:hover img,.rv-kies label:hover,.galerij-alle:active{transform:none}
}

/* ── 15. Responsief ────────────────────────────────────────────────────── */
@media(max-width:1180px){
  .footer-inner{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;gap:32px}
  .footer-inner>*:first-child{grid-column:1/-1}
}
@media(max-width:1024px){
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Onder 1040px passen logo, zes links en de knop niet meer op één regel. */
@media(max-width:1040px){
  .nav-right,.nav-cta-wrap{display:none}
  .nav-hamburger,.nav-knop{display:flex}
  .nav-inner{position:relative}
  .nav-logo{position:absolute;left:50%;transform:translateX(-50%)}
}
/* Tablet: de top 3 als rij die je opzij schuift; nummer 3 steekt zichtbaar
   uit (was verborgen, terwijl de FAQ hem noemt) */
@media(max-width:960px){
  .top3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:32px;gap:16px;margin:0 -32px;padding:2px 32px 10px;scrollbar-width:none}
  .top3::-webkit-scrollbar{display:none}
  .top3>*{flex:0 0 46%;scroll-snap-align:start}
  .top3>*:hover{transform:none}
}
@media(max-width:900px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  :root{--top-h:0px;--nav-h:60px}
  .topbar{display:none}
  /* padding-inline, niet padding: de shorthand wiste de verticale ruimte van
     elementen die ook .container zijn (.tekstpagina plakte tegen de kop). */
  .container,.hero-sm .container{padding-inline:16px}
  .nav-inner,.app-pagina .nav-inner{padding:0 10px}
  .nav-logo img{height:32px}
  .sectie-kop{font-size:22px;margin-bottom:14px}
  .t-h2{font-size:20px}
  .hero-sm{padding:24px 0 28px}
  .hero-sm h1{font-size:30px}
  .hero-sm p{font-size:16px}
  .hero-meta{font-size:14px}
  .crumb{margin-bottom:12px}
  .crumb>a:not(.crumb-terug),.crumb>.crumb-sep{display:none}
  .crumb-terug{display:inline-flex}
  .crumb-terug::after{content:"";width:1px;height:14px;background:var(--border-strong);margin:0 10px}
  .pagina{padding-top:24px;padding-bottom:56px}
  .intro p{font-size:16px}
  .shop-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  /* Cijfers als lijst met haarlijnen: getal links, label op één regel */
  .feiten-raster{grid-template-columns:minmax(0,1fr);gap:0;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);overflow:hidden}
  .feit{border:0;border-radius:0;box-shadow:none;padding:12px 16px;min-height:0;gap:12px}
  .feit-icoon{width:32px;height:32px}
  .feit-icoon .icoon{width:16px;height:16px}
  .feit+.feit{border-top:1px solid var(--hairline)}
  .feit-tekst{flex-direction:row;align-items:baseline;gap:10px}
  .feit-getal{font-size:22px;min-width:52px}
  .feit-label{font-size:14px;margin:0}
  /* Labels onder elkaar op één lijn, ook als een getal breder is ("32.048"):
     de rijen delen de kolommen van het raster (subgrid) */
  @supports (grid-template-columns:subgrid){
    .feiten-raster{grid-template-columns:auto auto minmax(0,1fr)}
    .feit{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline}
    .feit-icoon{align-self:center}
    .feit-tekst{display:contents}
    .feit-getal{min-width:0}
  }
  /* Telefoon: de knop Bel onder de foto, zodat hij geen breedte van de naam en
     de kernfeiten afpakt; het nummer zelf staat dan niet meer als tekst */
  .wkaart{grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto 1fr;padding:14px;gap:10px 12px}
  .wkaart-foto{width:64px;height:64px;grid-column:1;grid-row:1}
  .wkaart-body{grid-column:2;grid-row:1/3}
  .wkaart-tel{grid-column:1;grid-row:2;align-self:start;justify-self:start;justify-content:center;width:64px;height:40px;margin:0;padding:0;gap:4px;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:#fff;color:var(--text);font-size:13.5px;line-height:1}
  .wkaart-tel:hover{text-decoration:none;border-color:var(--green);background:var(--green-xl);color:var(--green-d)}
  .wkaart-tel:active{transform:translateY(1px)}
  .wkaart-tel-nr{display:none}
  .wkaart-tel-bel{display:inline}
  .monogram{font-size:20px}
  .top3{scroll-padding-inline:16px;gap:12px;margin:0 -16px;padding:2px 16px 8px}
  .top3>*{flex:0 0 78%}
  .kaart-stad{height:260px}
  .filterbalk .zoekveld{flex:1 1 100%}
  .selectveld{flex:1 1 auto}
  .selectveld select{min-width:0}
  .filterbalk-telling{flex-basis:100%;margin-left:0}
  .stad-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stad-link{font-size:14px;padding:8px 10px 8px 12px}
  .stedenbalk .zoekveld{max-width:none}
  .cta-blok{padding:24px 20px;border-radius:var(--r-lg)}
  .cta-blok-knoppen{flex-direction:column;width:100%}
  .leeg-staat-pagina{padding-top:40px;padding-bottom:56px}
  .vf-kopblok{padding-bottom:32px}
  .vf-kopblok-knoppen{flex-direction:column}
  .vf-kopblok-knoppen .btn{width:100%}
  .vf-beloftes{padding:16px 18px}
  .vf-stats{grid-template-columns:minmax(0,1fr);margin-top:24px}
  .vf-stat{flex-direction:row;align-items:baseline;gap:12px;padding:12px 16px}
  .vf-stat+.vf-stat{border-left:0;border-top:1px solid var(--hairline)}
  .vf-stat-getal{font-size:22px;min-width:88px}
  .vf-stappen{grid-template-columns:minmax(0,1fr);gap:20px}
  .vf-kop{margin-bottom:24px}
  .vf-kop h2{font-size:22px}
  .vf-tarief-balk{align-items:flex-start}
  .plan{padding:20px}
  .plan--uitgelicht{padding:19px}
  .stat-tegels--4,.stat-tegels--5{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat-tegels--5 .stat-tegel,.stat-tegels--5 .stat-tegel:nth-child(4){grid-column:auto}
  .stat-tegels--5 .stat-tegel:last-child:nth-child(odd){grid-column:1/-1}
  .stat-tegel{padding:14px 16px}
  .stat-tegel-getal{font-size:24px}
  .inhoudsopgave ol{columns:1}
  .zoekmelding{padding:18px}
  .zoekmelding .btn{width:100%}
  .contact-kaarten{grid-template-columns:minmax(0,1fr);gap:10px}
  .contact-kaart{flex-direction:row;align-items:flex-start;gap:14px;padding:16px 18px}
  .contact-kaart p{margin-bottom:8px}
  .zoek-cta{flex-direction:column}
  .zoek-cta .btn{width:100%}
  .tabel-balk{width:56px;margin-right:10px}
  .article-body>p:first-child{font-size:18px}
  /* Zonder cover geen leeg beeldvlak meer (de eerste 1.300 px van /blog waren
     alleen vlakken), maar een compacte kop: klein icoon naast de categorie */
  .blog-card--zonder-beeld .blog-card-img{display:none}
  .blog-card--zonder-beeld .blog-card-tag{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .blog-card--zonder-beeld .blog-card-tag-icoon{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:var(--r-md);background:var(--green-l);color:var(--green-d)}
  .blog-card-tag-icoon .icoon{width:20px;height:20px}
  .leeg-staat-knoppen{flex-direction:column;align-self:stretch}
  .leeg-staat-knoppen .btn{width:100%}
  .leeg-staat-onder{margin-top:44px;padding-top:32px}
  .cta-blok-knoppen .btn{width:100%}
  .callout{padding:14px 16px;font-size:14.5px}
  .prijsblok{padding:16px}
  .prijsblok-bedrag{font-size:22px}
  .specialisten-paneel{padding:16px;border-radius:var(--r-lg)}
  .specialisten-paneel .wkaart{padding:14px;grid-template-columns:64px minmax(0,1fr)}
  .specialisten-paneel .wkaart-foto{width:64px;height:64px}
  .linkkaart{padding:16px;border-radius:var(--r-lg);gap:12px}
  .kaart{padding:20px}
  .faq summary{padding:14px 16px;font-size:14.5px}
  .faq details>p,.faq details>div{padding:0 16px 16px;font-size:14px}
  .dnst-grid{grid-template-columns:1fr;gap:10px;padding:14px 0 4px}
  .dnst-card{padding:16px}
  .dnst-top{flex-direction:row;align-items:center;gap:12px}
  .dnst-vul{grid-column:auto;padding:18px}
  .dnst-sec h2{font-size:22px}
  .blog-grid{grid-template-columns:1fr;padding:24px 0 56px}
  .blog-hero,.article-hero{padding:24px 0 28px}
  .article-wrap{padding:24px 16px 0}
  .article-body{font-size:16px;line-height:1.7}
  .article-cover{margin:20px 0;border-radius:var(--r-md)}
  .article-cta{padding:24px 18px;border-radius:var(--r-lg)}
  .tekstpagina{padding-top:24px;padding-bottom:56px}
  .tekstpagina .kaart{padding:20px}
  .site-footer{padding:40px 0 24px}
  /* Kolommen als uitklaplijst (public/js/site.js klapt ze op een telefoon dicht) */
  .footer-inner{grid-template-columns:minmax(0,1fr);gap:0}
  .footer-inner>*:first-child{margin-bottom:24px}
  .voet-kolom{border-top:1px solid var(--hairline)}
  .voet-kolom:last-child{border-bottom:1px solid var(--hairline)}
  /* De kop als knop (public/js/site.js): hele rij klikbaar, pijltje rechts */
  .voet-kolom .voet-kop{margin:0}
  .voet-kop:not(:has(.voet-knop)){display:flex;align-items:center;min-height:52px}
  .voet-knop{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0;border:0;background:none;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left;border-radius:var(--r-sm)}
  .voet-knop::after{content:"";width:8px;height:8px;border-right:1.75px solid var(--muted);border-bottom:1.75px solid var(--muted);transform:rotate(-135deg);margin:4px 6px 0 0;transition:transform .2s var(--ease)}
  .voet-kolom.is-dicht .voet-knop::after{transform:rotate(45deg);margin-top:-4px}
  .voet-kolom.is-dicht ul{display:none}
  .voet-kolom ul{padding:2px 0 18px;gap:0}
  .voet-kolom li a{display:flex;align-items:center;min-height:40px}
  .footer-bot{margin-top:28px}
  .footer-bot{flex-direction:column;align-items:flex-start;gap:8px}
  /* Compact: samen met de actiebalk op de winkelpagina hoogstens een kwart van het scherm */
  .cookie-banner{bottom:12px;left:12px;right:12px;padding:12px 14px;gap:10px;border-radius:var(--r-lg)}
  .cookie-icon{display:none}
  .cookie-text{font-size:13px;line-height:1.45;min-width:0}
  .cookie-actions{width:100%}
  .cookie-banner .cookie-btn{flex:1;height:40px}
  .card{margin-bottom:14px}
  .card-head{padding:12px 16px}
  .card-body{padding:16px}
  input,textarea,select{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .kaart-klik:hover,.wkaart:hover,.fotokaart:hover,.dnst-card:hover,.blog-card:hover{transform:none}
}
/* Smalle telefoons: de lange statuspil ("Vandaag gesloten, opent donderdag om
   08:30") mag afbreken in plaats van over de schermrand te lopen. */
@media(max-width:400px){
  .status[data-status="lang"],.winkel-meta .status[data-status="lang"]{white-space:normal;height:auto;max-width:100%;line-height:20px;padding:4px 12px;border-radius:14px}
}
/* Aanraakscherm: kleine links en knoppen krijgen een raakvlak van 44 px, zonder
   dat de opmaak verschuift (onzichtbare rand via ::after of padding plus een
   even grote negatieve marge). */
@media(pointer:coarse){
  .tekstlink,.dcr-a,.dcr-link,.leesmeer,a.chip{position:relative}
  .tekstlink::after,.dcr-a::after,.dcr-link::after,.leesmeer::after,a.chip::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
  .crumb{padding-block:13px;margin-top:-13px;margin-bottom:3px}
  .crumb-balk .crumb{margin:-13px 0}
  .crumb-terug{padding-block:13px;margin-block:-13px}
  .btn-sm,.cookie-btn{height:44px}
  .nav-hamburger,.nav-knop{width:44px;height:44px}
  .leaflet-bar a,.winkel-kaart .leaflet-bar a,.winkel-kaart .leaflet-bar a:first-child,.winkel-kaart .leaflet-bar a:last-child{width:40px!important;height:40px!important;line-height:40px!important}
  .dcr.is-klikbaar .dcr-a{position:static}
  .dcr.is-klikbaar .dcr-a::after{left:0;right:0;top:0;height:auto;bottom:0;transform:none}
}
@media(pointer:coarse) and (max-width:640px){
  .crumb{margin-bottom:-1px}
  .crumb-balk .crumb{margin:-13px 0}
}