/* branchelaag (24-08-2026) — aanvulling op /assets/landing.css.
   Alleen wat landing.css nog niet had: kruimelpad, het voorbeeldblok met de
   mini-mockup, de FAQ en de linkrijen. De rest (hero, .punten, .stappen,
   .pakketten, .aanvraag) komt uit landing.css, zodat deze pagina's exact
   dezelfde vormentaal en hetzelfde mobielgedrag hebben als de dienstpagina's. */
/* WOORDAFBREKING IN KOPPEN (25-08-2026)
   Gemeten met tools/qa-branches.mjs op 375px: kinderopvang liep 396px breed, dakdekker
   399px en psycholoog 386px. Oorzaak is steeds één lange samenstelling in een kop of in
   <mark class="hl2"> — "kinderopvangondernemers" (23 tekens), "psychologenpraktijken",
   "dakdekkersbedrijven". Zulke woorden bestaan nu eenmaal in deze branches, dus ze mogen
   binnen het woord afbreken in plaats van de hele pagina breder te duwen. */
h1,.kop,.hl2,.hl,.sub,.antwoord-eerst{overflow-wrap:anywhere;hyphens:auto}

.kruimel{font-size:13px;opacity:.7;margin:18px 0 0}
.kruimel a{color:inherit}
.blok{margin:44px 0}
.blok p{max-width:74ch;line-height:1.65}
.blok h3{margin:26px 0 8px;font-size:1.05rem}
.antwoord-eerst{max-width:70ch}

/* voorbeeldblok: het werk direct onder de vouw */
.voorbeeld .voorbeeld-in{max-width:74ch}
.voorbeeldkaart{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,3vw,40px);align-items:center;margin-top:22px;background:#fff;border:1px solid rgba(10,59,35,.12);border-radius:22px;padding:clamp(18px,2.4vw,30px);box-shadow:0 26px 60px -46px rgba(10,59,35,.7)}
.voorbeeldtekst h3{margin:10px 0 6px;font-size:1.32rem}
.voorbeeldtekst ul{list-style:none;padding:0;margin:14px 0 20px;display:grid;gap:9px}
.voorbeeldtekst li{font-size:.94rem;line-height:1.5;padding-left:18px;position:relative}
.voorbeeldtekst li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--volt-deep,#12b95f)}
.voorbeeldtekst li b{font-weight:700}
.voorbeeldpil{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--groen,#0e6b3c);background:var(--mint,#f1f5ee);border-radius:999px;padding:6px 13px}
.voorbeeldnoot{font-size:.8rem;opacity:.6;margin-top:12px;max-width:46ch}

/* mini-mockup: gedraagt zich als een schermafdruk maar is gewoon opmaak,
   dus altijd scherp en altijd gelijk aan het echte voorbeeld */
.mockup{border-radius:16px;overflow:hidden;border:1px solid rgba(10,59,35,.14);box-shadow:0 20px 44px -34px rgba(10,59,35,.8);background:var(--m-papier)}
/* echte schermafdruk van de voorbeeldsite, in een browserlijst zodat het als een site
   leest en niet als een losse plaat. Zelfde vorm en schaduw als de oude nabouw, zodat
   pagina's met en zonder afdruk naast elkaar niet uit de toon vallen. */
.afdruk{margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(10,59,35,.14);box-shadow:0 20px 44px -34px rgba(10,59,35,.8);background:#fff}
.afdruk .a-balk{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#f1f2ef;border-bottom:1px solid rgba(10,59,35,.1)}
.afdruk .a-balk i{width:9px;height:9px;border-radius:50%;background:rgba(10,59,35,.2)}
.afdruk .a-url{margin-left:8px;font-size:11.5px;color:rgba(10,59,35,.55);background:#fff;border-radius:999px;padding:3px 12px;border:1px solid rgba(10,59,35,.1)}
.afdruk img{display:block;width:100%;height:auto}
.m-balk{display:flex;align-items:center;gap:6px;background:#e9ecef;padding:8px 12px}
.m-balk i{width:9px;height:9px;border-radius:50%;background:#c6ccd2;display:block}
.m-url{margin-left:10px;background:#fff;border-radius:999px;font-size:11px;color:#6b7480;padding:3px 12px}
.m-blad{padding:14px}
.m-kop{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--m-rand)}
.m-kop b{font-size:13px;color:var(--m-inkt)}
.m-nav{display:flex;gap:10px;margin-left:auto}
.m-nav i{font-style:normal;font-size:10px;color:var(--m-inkt);opacity:.6}
.m-kop em{font-style:normal;font-size:10px;font-weight:700;color:#fff;background:var(--m-accent);border-radius:999px;padding:4px 10px}
.m-hero{display:grid;grid-template-columns:1fr .9fr;gap:12px;align-items:center;padding:16px 0}
.m-hero strong{display:block;font-size:15px;line-height:1.25;color:var(--m-inkt)}
.m-hero span{display:block;font-size:11px;line-height:1.45;color:var(--m-inkt);opacity:.65;margin:7px 0 10px}
.m-hero em{font-style:normal;font-size:10px;font-weight:700;color:#fff;background:var(--m-accent);border-radius:999px;padding:5px 12px;display:inline-block}
.m-vlak{border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.m-vlak .vlak{width:100%;height:100%}
.m-rij{display:flex;gap:8px;border-top:1px solid var(--m-rand);padding-top:11px}
.m-rij span{flex:1 1 0;min-width:0;font-size:9.5px;line-height:1.3;color:var(--m-inkt);opacity:.72;background:var(--m-zacht);border-radius:7px;padding:7px 8px}

#vragen details{border-bottom:1px solid rgba(128,128,128,.25);padding:12px 0;max-width:74ch}
#vragen summary{cursor:pointer;font-weight:600}
#vragen details p{margin:8px 0 0}
.linkrij{line-height:2;max-width:none}
.linkrij a{white-space:nowrap}
.slot .cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

@media (max-width:900px){
  .voorbeeldkaart{grid-template-columns:1fr}
  .m-hero{grid-template-columns:1fr}
  .m-nav{display:none}
  .linkrij a{white-space:normal}
}

/* branche-index onder aan /website-laten-maken.html */
.branche-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:18px}
.branche-k{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid rgba(10,59,35,.12);border-radius:14px;padding:14px 16px;text-decoration:none;color:inherit;font-weight:600;font-size:.95rem;transition:transform .14s,box-shadow .2s}
.branche-k:hover{transform:translateY(-2px);box-shadow:0 18px 34px -26px rgba(10,59,35,.7)}
.branche-k svg{color:var(--groen,#0e6b3c);flex:0 0 auto}