/* ==========================================================================
   Carwash Beerse, stijllaag. Merkwaarden staan in tokens.css.
   Regels (uit docs/DESIGN_SYSTEM.md van het dakdekkersframework):
   hoekronding via --radius, geen schaduw op knoppen, accent alleen op de
   primaire CTA, tikdoelen minimaal 44px, geen scroll-animaties, geen emoji,
   mobile first, alleen lichte modus.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--font-body); padding-bottom: 76px; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.1; letter-spacing: -.01em; }
h1, h2 { font-family: var(--font-kop); font-weight: 700; color: var(--brand); }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); line-height: 1.02; }
h2 { font-size: clamp(1.625rem, 1.15rem + 1.8vw, 2.375rem); }
h3 { font-family: var(--font-kop); font-weight: 700; font-size: 1.375rem; color: var(--brand); }
h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
p { margin: 0 0 1em; max-width: 64ch; }
/* Alleen de secties die direct in main staan krijgen sectieruimte. Met de kale
   selector `section` kreeg ook een genest section die 68,8px boven en onder,
   wat in de vragensectie een gat van 101px onder de kop opleverde. */
main > section { padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 5.5rem); scroll-margin-top: 72px; }
.licht { background: var(--surface-2); }
.donker { background: var(--brand); color: rgba(255,255,255,.88); position: relative; overflow: hidden; }
.donker > .wrap { position: relative; z-index: 1; }
.bubbels::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.07) 0 150px, transparent 151px),
    radial-gradient(circle at 96% 62%, rgba(255,255,255,.06) 0 95px, transparent 96px),
    radial-gradient(circle at 78% 78%, rgba(238, 116, 10,.16) 0 42px, transparent 43px); }
@media (max-width: 899px) { .bubbels::before { background:
    radial-gradient(circle at 92% 8%, rgba(255,255,255,.07) 0 90px, transparent 91px),
    radial-gradient(circle at 104% 30%, rgba(255,255,255,.06) 0 60px, transparent 61px),
    radial-gradient(circle at 84% 42%, rgba(238, 116, 10,.16) 0 26px, transparent 27px); } }
.donker h1, .donker h2, .donker h3, .donker h4 { color: #fff; }
.donker p { color: rgba(255,255,255,.84); }
.wrap { width: min(1160px, 100% - 2 * clamp(1rem, 4vw, 2.5rem)); margin-inline: auto; }
.sectiekop { margin-bottom: 2rem; }
.eyebrow { display: flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 600; color: var(--muted); margin-bottom: .6rem; }
.eyebrow::before { content: ""; width: 26px; height: 16px; flex: 0 0 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Ccircle cx='7' cy='9' r='6' fill='%23222651'/%3E%3Ccircle cx='17' cy='6' r='4' fill='%23222651'/%3E%3Ccircle cx='23' cy='11' r='2.5' fill='%23EE740A'/%3E%3C/svg%3E") no-repeat center / contain; }
.donker .eyebrow { color: rgba(255,255,255,.75); }
.donker .eyebrow::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Ccircle cx='7' cy='9' r='6' fill='%23ffffff'/%3E%3Ccircle cx='17' cy='6' r='4' fill='%23ffffff'/%3E%3Ccircle cx='23' cy='11' r='2.5' fill='%23EE740A'/%3E%3C/svg%3E"); }
.lede { font-size: clamp(1.125rem, 1rem + .5vw, 1.3rem); color: var(--muted); }
.donker .lede { color: rgba(255,255,255,.9); }
.noot { font-size: .95rem; color: var(--muted); }
.raster { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .raster-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.25rem; border-radius: var(--radius); font: 600 1rem/1.2 var(--font-body); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.knop--primair { background: var(--accent-diep); color: var(--accent-tekst); }
.knop--primair:hover { background: var(--accent-donker); }
/* Op navy haalt het knopvlak zelf maar 2,9:1 tegen de achtergrond; een lichte
   rand maakt de knopvorm herkenbaar zonder een tweede knopkleur in te voeren. */
.hero .knop--primair, .donker .knop--primair { border-color: rgba(255, 255, 255, .5); }
.knop--primair svg { color: currentColor; }
.knop--secundair { background: transparent; color: var(--brand); border-color: var(--brand); }
.knop--secundair:hover { background: var(--surface-2); }
.donker .knop--secundair { color: #fff; border-color: rgba(255,255,255,.55); }
.donker .knop--secundair:hover { background: rgba(255,255,255,.08); }
.knop--wit { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.knop--wit:hover { background: rgba(255,255,255,.1); }
.knop--klein { min-height: 44px; padding: .55rem 1rem; font-size: .95rem; }
.knop:focus-visible, .bel:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.hero :focus-visible, .donker :focus-visible, footer :focus-visible { outline-color: #fff; }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
/* Elk knoplabel stond 1,2px te hoog. Flexbox centreert de regel, maar bij
   Gilroy ligt het midden van de regel hoger dan het midden van de kaphoogte:
   de letter heeft meer ruimte onder de basislijn dan de hoofdletters erboven
   vullen. Gemeten is dat voor elk label hetzelfde: 0,075em, ongeacht het woord.
   Het is dus een eigenschap van de letter, niet van de tekst.
   Alleen het label verschuift; het icoon ernaast staat al goed, want de inkt
   daarvan vult zijn eigen vierkant symmetrisch. */
.knoplabel { position: relative; top: .075em; }

.bel { display: inline-grid; place-items: center; width: 44px; min-height: 44px; border-radius: var(--radius); color: var(--brand); border: 1.5px solid var(--line); text-decoration: none; }

/* ---------- Kop ---------- */
.kop { position: sticky; top: 0; z-index: 20; /* draagt het uitklapmenu */ background: var(--surface); border-bottom: 1px solid var(--line); }
.kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.logo { display: block; text-decoration: none; color: var(--brand); line-height: 1.1; }
.logo__naam { display: block; font: 700 1.2rem/1.1 var(--font-kop); letter-spacing: -.01em; }
.logo__slogan { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: .15rem; }
.logo img { height: 36px; width: auto; }
@media (min-width: 900px) { .logo img { height: 42px; } }
/* Onder 900px is er geen ruimte voor het ankermenu in de balk. Daar zit het
   achter de menuknop en klapt het als paneel onder de kop uit. De knop zelf
   verdwijnt vanaf 900px, want dan staat het menu gewoon in de balk. */
.kop nav { display: none; gap: 1.4rem; }
.kop nav a { text-decoration: none; font-weight: 500; color: var(--ink); font-size: .95rem; }
/* Aanwijzen kleurt het merkoranje (verzoek 22-09-2026). Geldt ook voor de
   links in het uitklappaneel en voor toetsenbordfocus, zodat de drie manieren
   om een menu-item aan te wijzen hetzelfde doen. */
.kop nav a:hover, .kop nav a:focus-visible { color: var(--accent-diep); }

.menuknop { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border-radius: var(--radius); background: transparent; color: var(--brand); border: 1.5px solid var(--line); cursor: pointer; }
.menuknop svg { width: 24px; height: 24px; }
.menuknop__kruis { display: none; }
.menuknop[aria-expanded="true"] .menuknop__lijn { display: none; }
.menuknop[aria-expanded="true"] .menuknop__kruis { display: block; }
.menuknop:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.kop nav.is-open {
  display: grid; gap: 0;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 30px -22px rgba(20,24,55,.5);
  padding: .5rem max(1.5rem, calc((100% - 1240px) / 2 + 1.5rem)) 1rem;
}
.kop nav.is-open a { padding: .85rem .25rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 600; color: var(--brand); }
.kop nav.is-open a:hover, .kop nav.is-open a:focus-visible { color: var(--accent-diep); }
.kop nav.is-open a:last-child { border-bottom: 0; }

@media (min-width: 900px) { .menuknop { display: none; } }
.kop__acties { display: flex; align-items: center; gap: .5rem; }
/* Twee knoppen naast zes menu-items past niet op elke laptop. Ze breken niet
   meer af, het menu krimpt eerst, en onder 1180px verdwijnt de tweede knop uit
   de balk. Hij staat daar toch ook in de hero en in de abonnementssectie. */
.kop__acties .knop, .kop nav a { white-space: nowrap; }
.kop__acties .knop { display: none; }
/* De belknop stond hier ook, alleen onder 900px. Die is er op 23-09-2026 uit:
   rechtsboven op een telefoon is de slechtst bereikbare hoek, en dezelfde
   actie staat al in de vaste actiebalk onderaan, binnen duimbereik. De hero
   toont het nummer bovendien voluit. Daarmee houdt de kop rechts nog één
   bedieningselement over: het menu. */
@media (min-width: 900px) { .kop nav { display: flex; } .kop__acties .knop { display: inline-flex; } }
@media (min-width: 900px) and (max-width: 1180px) { .kop nav { gap: .9rem; } .kop nav a { font-size: .9rem; } }
@media (max-width: 960px) { .kop__acties .knop--secundair { display: none; } }

/* ---------- Hero ----------
   Navy vlak met de foto van de vestiging erin; een verloop van links houdt de
   tekst leesbaar en laat het gebouw rechts zien. De cijferkaart valt over de
   onderrand, zodat de hero en de eerste sectie in elkaar grijpen. */
/* De onderruimte was 10px omdat de cijferstrip als melkglaskaart over de foto
   lag en zelf de bodem vulde. Sinds de strip eronder staat (22-09-2026) is de
   hero weer symmetrisch. */
.hero { background: var(--brand); color: #fff; padding: clamp(2.5rem, 2rem + 3vw, 5.5rem) 0; position: relative; }
.hero--foto { background-image: linear-gradient(180deg, rgba(34,38,81,.94) 0%, rgba(34,38,81,.86) 55%, rgba(34,38,81,.96) 100%), var(--hero-foto); background-size: cover; background-position: center; }
@media (min-width: 900px) { .hero--foto { background-image: linear-gradient(90deg, rgba(34,38,81,.98) 0%, rgba(34,38,81,.94) 42%, rgba(34,38,81,.45) 75%, rgba(34,38,81,.25) 100%), var(--hero-foto); background-position: right center; } }
.hero > .wrap:first-child { display: grid; gap: 2rem; }
@media (min-width: 900px) { .hero > .wrap:first-child { grid-template-columns: minmax(0, 58ch) 1fr; } }
/* Met een herofoto is de tweede kolom leeg, en stond de kop toch in 58ch
   geperst: die had 699px nodig en kreeg er 621, dus hij brak. Hier krijgt de
   kop de volle breedte en houden de regels eronder hun leesmaat (verzoek
   23-09-2026, kop op een regel op desktop). */
@media (min-width: 900px) {
  .hero--foto > .wrap:first-child { grid-template-columns: 1fr; }
  .hero--foto .hero__tekst > :not(h1) { max-width: 58ch; }
  .hero--foto h1 span { max-width: 52ch; }
}
.hero h1 { color: #fff; }
.hero h1 span { display: block; color: rgba(255,255,255,.82); font: 600 .5em/1.25 var(--font-body); letter-spacing: 0; margin-top: .5rem; }
.hero .lede { color: rgba(255,255,255,.86); }
.hero .microcopy { color: rgba(255,255,255,.7); }
.hero .status { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; }
.hero .foto { display: none; }
.hero:not(.hero--foto) .foto { display: block; }
.status { display: inline-flex; margin-bottom: 1rem; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 600; color: var(--muted); padding: .35rem .75rem .35rem .6rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted-licht); }
.status--open::before { background: var(--open); }
.status--dicht::before { background: var(--dicht); }
/* De cijferkaart ligt volledig op de herofoto, met 10px lucht tot de onderrand
   van de sectie. Melkglas in plaats van vol wit: het gebouw schemert erdoor, en
   omdat de kaart niet meer over de sectiegrens valt loopt er geen kleurnaad
   doorheen. Bij 88% wit op navy houdt de grijze tekst 4,8:1. */
/* Cijferband: eigen strook onder de hero (22-09-2026). Stond eerder als
   melkglaskaart op de herofoto; op een egale achtergrond heeft melkglas niets
   om doorheen te laten zien, dus het is nu een gewone strook op de nevelkleur.
   Die scheidt de navy hero van de witte formulesectie.
   Opbouw sinds 23-09-2026, naar het referentiebeeld van Carlson: het cijfer
   zit in de kop en eronder staat een ondersteunende regel. De scheidingslijnen
   tussen de kolommen zijn daarbij vervallen, want het voorbeeld heeft ze niet.
   Vier kolommen pas vanaf 1200px: de koppen zijn langer geworden en hielden
   daaronder te weinig breedte over voor een regel. */
.cijferband { background: var(--surface-2); border-bottom: 1px solid var(--line); }
main > section.cijferband { padding-block: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
/* Ook op een telefoon twee bij twee (verzoek 23-09-2026). De koppen passen daar
   niet op een regel: "3 wasformules vanaf € 14" heeft ruim 200px nodig en er is
   zo'n 120px per kolom. Ze breken dus in tweeen, en dat is nog altijd korter dan
   vier blokken onder elkaar. Icoon en letter gaan een maatje kleiner zodat er
   genoeg tekstbreedte overblijft. */
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem .9rem; grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 620px) { .trust { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; } }
/* Vanaf 1200px niet vier gelijke kolommen maar vier blokken op hun eigen
   breedte, met de resterende ruimte gelijk verdeeld. Met 1fr-kolommen stonden
   de blokken wel op gelijke afstand, maar de tussenruimte niet: "9
   stofzuigplaatsen" is 196px breed tegen 248, 242 en 237 voor de rest, dus
   daarachter viel een gat van 102px tegen 50 en 56 elders. */
@media (min-width: 1200px) {
  .trust { display: flex; justify-content: space-between; gap: 1rem 2rem; }
}
.trust li { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.trust__bol { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: rgba(238, 116, 10, .16); }
.trust__bol svg { width: 20px; height: 20px; color: var(--accent-diep); }
.trust div { min-width: 0; }
.trust strong { display: block; font: 700 1.0625rem/1.3 var(--font-kop); color: var(--brand); overflow-wrap: break-word; }
.trust span:not(.trust__bol) { display: block; margin-top: .1rem; font-size: .95rem; color: var(--muted); }

/* Onder 620px staan de vier blokken twee bij twee. De koppen passen daar niet
   op een regel, maar "stofzuigplaatsen" moet wel als heel woord passen: dat is
   132px bij 17px letter en er is zo'n 120px. Bij 14,4px wordt het 112px en
   breekt het woord niet meer middenin. Dit blok staat bewust na de basisregels;
   eerder verloor het van de gewone .trust strong eronder. */
@media (max-width: 619px) {
  .trust { gap: 1.1rem .8rem; }
  .trust li { gap: .5rem; }
  .trust__bol { width: 30px; height: 30px; flex-basis: 30px; }
  .trust__bol svg { width: 16px; height: 16px; }
  .trust strong { font-size: .9rem; line-height: 1.25; }
  .trust span:not(.trust__bol) { font-size: .8rem; line-height: 1.3; }
}

/* ---------- Fotoplaatshouders ----------
   Tot de klant foto's levert: een vlak op de juiste verhouding met de shot in
   de figcaption. Bewuste aspect-ratio zodat er geen verschuiving is als de
   echte foto komt. */
.foto { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; background: linear-gradient(135deg, var(--plaatshouder-1), var(--plaatshouder-2)); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto figcaption { position: absolute; inset: auto 0 0 0; padding: .6rem .9rem; font-size: .8rem; color: var(--brand); background: rgba(255,255,255,.78); }

/* ---------- Stappen ---------- */
.stappen { counter-reset: stap; list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 720px) { .stappen { grid-template-columns: repeat(4, 1fr); } .stappen--3 { grid-template-columns: repeat(3, 1fr); } }
/* Inhoud verticaal gecentreerd: waar een kaart naast een langere buur staat en
   dus ruimte overhoudt, valt die ruimte nu gelijk boven en onder in plaats van
   alleen onderaan. Kaarten zonder speling veranderen niet. */
.stappen li { counter-increment: stap; display: flex; flex-direction: column; justify-content: center; padding: 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
/* place-items centreert het regelvak, niet het cijfer zelf. Cijfers hebben geen
   staart, dus de lege staartruimte onder de basislijn telt mee en het cijfer
   komt 0,8px te hoog te staan (gemeten in Gilroy: 1 en 4 op 0,82, 2 op 0,93,
   3 op 0,71). Padding bovenaan duwt het terug naar het optische midden. */
.stappen li::before { content: counter(stap); display: grid; place-items: center; width: 30px; height: 30px; padding-top: .105em; border-radius: 50%; background: var(--brand); color: #fff; font: 700 .95rem/1 var(--font-kop); margin-bottom: .7rem; }
.donker .stappen li { background: var(--brand-2); border-color: var(--line-deep); justify-content: flex-start; }
.donker .stappen li::before { background: #fff; color: var(--brand); }
/* Waar pictogrammen de stappen dragen verdwijnt het nummer: twee markeringen
   naast elkaar zou de kaart alleen maar voller maken. De volgorde zit in de
   leesrichting en in de tekst zelf. */
.stappen--icoon li::before { display: none; }
.stapicoon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--brand); margin-bottom: .85rem; }
.stapicoon svg { width: 20px; height: 20px; }
.stappen h3, .stappen h4 { margin-bottom: .3rem; font: 600 1.05rem/1.2 var(--font-body); color: var(--ink); }
.donker .stappen h3 { color: #fff; }
.stappen p { margin: 0; font-size: .95rem; }
.flow { margin-top: 3rem; }
.flow__kop { margin-bottom: 1.5rem; }

/* Stappenrij: open ring om het cijfer met een dunne lijn ernaast, geen kaartje
   (keuze 22-09-2026, voorbeeld op site/zowerkthet.html). De lijn achter de
   laatste stap loopt uit in niets, zodat de rij een einde heeft. */
.staprij { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
@media (min-width: 720px) { .staprij { grid-template-columns: repeat(4, 1fr); gap: 1.75rem 2rem; } }
.staprij__balk { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.staprij__ring { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; padding-top: .105em; border: 2px solid var(--accent-diep); border-radius: 50%; color: var(--accent-diep); font: 700 .95rem/1 var(--font-kop); }
.staprij__lijn { flex: 1 1 auto; height: 1px; background: var(--line); }
.staprij li:last-child .staprij__lijn { background: linear-gradient(to right, var(--line), transparent); }
.staprij h4 { font: 700 1.05rem/1.3 var(--font-kop); color: var(--brand); margin: 0 0 .45rem; }
.staprij p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Op een telefoon wordt de rij een tijdlijn: de ring links, de tekst rechts,
   en de lijn loopt verticaal door naar de volgende stap. Daarom staat de
   ruimte tussen de stappen als padding binnen de li en niet als gap ertussen;
   anders breekt de lijn in het gat. */
@media (max-width: 719px) {
  .staprij { gap: 0; }
  /* De rijen expliciet benoemen: zonder grid-template-rows loopt 1 / -1 maar
     tot het einde van het expliciete raster, en dat is hier rij 1. De balk
     bleef dan 42px en de lijn 0px hoog. */
  .staprij li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: .9rem; padding-bottom: 1.6rem; }
  .staprij li:last-child { padding-bottom: 0; }
  .staprij__balk { grid-column: 1; grid-row: 1 / -1; align-self: stretch; flex-direction: column; gap: .5rem; margin-bottom: 0; }
  .staprij__lijn { width: 1px; height: auto; flex: 1 1 auto; }
  .staprij li:last-child .staprij__lijn { background: linear-gradient(to bottom, var(--line), transparent); }
  .staprij h4, .staprij p { grid-column: 2; }
  .staprij h4 { margin-top: .3rem; }
}

/* ---------- CTA-regel: sluit een sectie af met één actie ---------- */
/* Sluit een sectie af met één actie. Het vlak is --surface-2: sinds de
   formulesectie wit werd, viel een witte balk met alleen een haarlijn weg tegen
   de pagina. De tekst mag hier voorbij de leesbreedte van 64 tekens groeien,
   anders stopt hij halverwege en blijft de knop met een gat ernaast staan. */
.cta-regel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1.75rem; padding: 1.15rem 1.35rem; background: var(--surface-2); border-radius: var(--radius); }
.cta-regel p { margin: 0; flex: 1 1 260px; max-width: none; font-weight: 600; color: var(--brand); }
.microcopy { margin: .75rem 0 0; font-size: .9rem; color: var(--muted); }

/* ---------- Formules ---------- */
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Drie formulekaarten, elk met alle tien de kenmerken (keuze 22-09-2026,
   variant 4 van site/formules.html). Middelste kaart donker en groter op
   desktop; op een telefoon stapelen ze en draagt elke kaart de hele lijst. */
.formules { display: grid; gap: 1rem; }
/* Drie kolommen pas vanaf 900px, gelijk met de rest van de pagina. Op 768px
   werden de kaarten 226px breed en brak elk van de dertig kenmerkregels in
   tweeen; gestapeld past elke regel wel op een regel. */
@media (min-width: 900px) {
  .formules { grid-template-columns: 1fr 1.12fr 1fr; align-items: center; gap: 0; }
  .formule--uitgelicht { padding: 2.1rem 1.7rem; z-index: 1; box-shadow: 0 24px 50px -26px rgba(20,24,55,.6); }
  .formules > :not(.formule--uitgelicht) { margin-block: 1.6rem; }
  .formules > :first-child { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
  .formules > :last-child { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
}
.formule { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.4rem; }
.formule h3 { font-size: 1.15rem; margin: 0 0 .1rem; }
.formule__prijs { font: 700 clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem)/1 var(--font-kop); color: var(--brand); margin: 0 0 .35rem; }
.formule__pos { margin: 0 0 1.1rem; color: var(--muted); font-size: .95rem; }
.formule__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
.formule__lijst li { display: flex; align-items: flex-start; gap: .55rem; }
.formule__lijst svg { width: 17px; height: 17px; flex: 0 0 17px; margin-top: .16rem; color: var(--accent-diep); }
.formule__uit { color: var(--muted); }
.formule__streep { width: 17px; flex: 0 0 17px; text-align: center; }
.formule__label { display: inline-block; margin: 0 0 .9rem; padding: .3rem .8rem; border-radius: 999px; background: var(--accent-diep); color: #fff; font: 700 .75rem/1.2 var(--font-body); }

.formule--uitgelicht { background: linear-gradient(155deg, var(--brand), var(--brand-2)); border-color: transparent; color: rgba(255,255,255,.85); }
.formule--uitgelicht h3, .formule--uitgelicht .formule__prijs { color: #fff; }
.formule--uitgelicht .formule__pos { color: rgba(255,255,255,.75); }
.formule--uitgelicht .formule__lijst svg { color: var(--accent); }
.formule--uitgelicht .formule__uit { color: rgba(255,255,255,.55); }



/* ---------- Abonnement ---------- */
/* De drie stapkaarten staan naast de tekst en worden daar verticaal in het
   midden tegen uitgelijnd (verzoek 23-09-2026). Het merklogo dat erboven stond
   is eruit. Onder 900px vallen de twee kolommen onder elkaar en telt alleen de
   volgorde: eerst de tekst met de knop, dan de stappen. */
.abonnement .wrap { display: grid; gap: 2rem; }
@media (min-width: 900px) { .abonnement .wrap { grid-template-columns: .9fr 1.1fr; align-items: center; } }

/* ---------- Tweekoloms sectie ---------- */
.twee .wrap { display: grid; gap: 2rem; }
/* twee--fotolinks laat de tekst als eerste in de HTML staan, zodat een
   schermlezer en een zoekmachine eerst het feit krijgen, en zet de foto met
   order naar voren. Sinds 22-09-2026 geldt dat op elke breedte: op een
   telefoon komt het beeld eerst en de tekst daaronder (verzoek Carlson).
   twee--omgekeerd heeft de foto al vooraan in de HTML en draait hem alleen
   op een breed scherm naar rechts. */
.twee--fotolinks .wrap > .foto { order: -1; }
@media (min-width: 900px) {
  .twee .wrap { grid-template-columns: 1fr 1fr; align-items: center; }
  .twee--omgekeerd .wrap > :first-child { order: 2; }
}
/* Het vinkje zit in een gevulde bol. Twee contrasten tellen hier: het vinkje
   tegen zijn bol, en de bol tegen de sectie. Een lichte tint zou het eerste
   halen maar het tweede niet, dan zie je de bol niet meer op wit. Navy met een
   wit vinkje haalt allebei 14,3:1 en sluit aan bij de cijferbollen elders. */
.feiten { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; }
.feiten li { display: flex; gap: .7rem; align-items: flex-start; }
.feiten li svg { flex: 0 0 24px; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--brand); color: #fff; margin-top: .05em; }
/* Betaalmerken in gelijke witte tegels. Uitlijnen gebeurt op hoogte, niet op
   breedte: een woordmerk als Visa is breed en laag, het teken van Mastercard
   bijna vierkant. Alleen bij gelijke hoogte ogen ze even groot. De cirkels van
   Mastercard ogen dan nog steeds zwaarder, vandaar --schaal per merk.
   Wit als ondergrond is geen smaak maar een eis van de merken zelf. */
.betaal { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.betaal__tegel { display: grid; place-items: center; height: 52px; min-width: 78px; padding: 0 .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.betaal__tegel img { height: calc(24px * var(--schaal, 1)); width: auto; max-width: 84px; }
.betaal__tegel span { font-size: .9rem; font-weight: 600; color: var(--brand); }
/* Cash heeft geen merk; een eigen pictogram naast de naam houdt de rij visueel
   gelijkwaardig aan de tegels met een echt merkteken. */
.betaal__tegel--icoon { grid-auto-flow: column; gap: .45rem; align-items: center; }
.betaal__tegel--icoon svg { width: 20px; height: 20px; color: var(--brand); }

/* ---------- Poster (cardetailing) ----------
   Volle breedte, egale navy laag over de foto, tekst gecentreerd. De laag is
   80% dekkend: genoeg om de tekst overal leesbaar te houden, ook waar de foto
   licht is, en net doorzichtig genoeg om te zien dat er een beeld onder zit.
   Wit op die laag haalt 11,3:1 tegen de donkerste plek van de foto. */
.poster { position: relative; isolation: isolate; overflow: hidden; background: var(--brand); display: grid; place-items: center; min-height: clamp(320px, 250px + 12vw, 440px); padding-block: clamp(3rem, 2rem + 3.5vw, 5rem); }
.poster__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.poster__laag { position: absolute; inset: 0; z-index: 1; background: rgba(34, 38, 81, .8); }
.poster > .wrap { position: relative; z-index: 2; }
.poster__tekst { max-width: 56ch; margin-inline: auto; text-align: center; display: grid; justify-items: center; gap: 1.15rem; }
.poster h2 { color: #fff; margin: 0; }
.poster p { margin: 0; color: rgba(255, 255, 255, .88); max-width: 52ch; }
.poster__label { display: inline-block; font: 600 .85rem var(--font-body); color: #fff; background: rgba(255, 255, 255, .18); border-radius: 100px; padding: .3rem .8rem; }
.poster .knop { margin-top: .25rem; }

/* ---------- Reviews ---------- */
.review { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.review footer { font-size: .9rem; color: var(--muted); }

/* ---------- FAQ ---------- */
/* Twee thema's naast elkaar. De kolom bepaalt de leesbreedte, dus de vaste
   780px van de oude enkele lijst kan eruit. */
.faq-groepen { display: grid; gap: 2rem; }
@media (min-width: 820px) { .faq-groepen { grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; } }
.faq-groep h3 { margin: 0 0 .6rem; font: 600 1.05rem var(--font-body); color: var(--accent-diep); }
.faq { max-width: 780px; }
.faq-groep .faq { max-width: none; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1rem 2.5rem 1rem 0; font-weight: 600; position: relative; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .8rem; font-size: 1.5rem; color: var(--brand); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1.1rem; color: var(--muted); }

/* ---------- Contact ---------- */
.contact .wrap { display: grid; gap: 2rem; }
/* Kaart links op desktop (keuze 22-09-2026, variant 5 van site/contact.html)
   en op een telefoon boven de gegevens (verzoek Carlson 22-09-2026). Dat
   draait een eerdere keuze terug waarin de gegevens op een telefoon eerst
   stonden zodat de routeknop hoger zat; beeld eerst geldt nu overal. */
.contact__gegevens { order: 2; }
.contact .kaartvlak { order: 1; }
@media (min-width: 900px) {
  .contact .wrap { grid-template-columns: 1fr 1fr; align-items: start; }
  /* De kaart is korter dan de gegevens ernaast; midden uitlijnen leest rustiger
     dan bovenaan blijven hangen met een gat eronder. */
  .contact .kaartvlak { align-self: center; }
}
.uren { width: 100%; border-collapse: collapse; margin: 1.75rem 0 1.25rem; font-size: .95rem; }
.uren th, .uren td { text-align: left; padding: .6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.uren th { font-weight: 600; width: 40%; }
.uren td { color: var(--muted); }
.kaartvlak { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); background: linear-gradient(135deg, var(--plaatshouder-1), var(--plaatshouder-2)); display: grid; place-content: center; justify-items: center; gap: .5rem; text-align: center; padding: 1.5rem; color: var(--brand); overflow: hidden; }
.kaartvlak p { margin: 0; }

/* Stilstaande kaart van eigen server: tegels van OpenStreetMap, uitgelijnd op
   het adres. Ligt achter de knop; de Google-kaart komt er pas overheen na een klik. */
/* Het hele kaartvlak is sinds 23-09-2026 een link naar de route, die in een
   nieuw tabblad opent. De knop "Kaart tonen" en de foutregel zijn daarmee
   vervallen, net als Leaflet: er wordt nu niets meer bijgeladen en er gaat
   geen enkel verzoek naar een derde partij. */
.kaartvlak--stat { padding: 0; display: block; }
a.kaartvlak { text-decoration: none; }
a.kaartvlak:hover .kaartvlak__raster { filter: brightness(1.04) saturate(1.05); }
a.kaartvlak:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.kaartvlak__stat { position: absolute; inset: 0; overflow: hidden; }
.kaartvlak__raster { position: absolute; left: 50%; top: 50%; display: grid; grid-template-columns: repeat(3, 256px); }
.kaartvlak__raster img { display: block; width: 256px; height: 256px; max-width: none; }
.kaartvlak__pin { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -30px 0 0 -15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a7.6 7.6 0 0 1 7.6 7.6C19.6 14.3 12 23 12 23S4.4 14.3 4.4 8.6A7.6 7.6 0 0 1 12 1z' fill='%23EE740A' stroke='%23fff' stroke-width='1.4'/%3E%3Ccircle cx='12' cy='8.6' r='2.7' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; filter: drop-shadow(0 3px 5px rgba(20,24,55,.45)); }
.kaartvlak__bron { position: absolute; right: 0; bottom: 0; padding: .1rem .4rem; background: rgba(255,255,255,.8); font-size: .7rem; color: #3C4160; }

/* ---------- Footer ---------- */
footer { background: var(--brand); color: rgba(255,255,255,.8); padding: 2.5rem 0 2rem; font-size: .9rem; position: relative; overflow: hidden; }
footer > .wrap { position: relative; z-index: 1; }
.footer__links { display: inline-flex; gap: 1rem; margin-left: .5rem; }
footer .wrap { display: grid; gap: 1.5rem; }

/* Vier kolommen (keuze 22-09-2026, variant 2 van site/footer.html): merk met de
   sociale iconen, de ankers van de pagina, de openingstijden en de gegevens. */
.voet__raster { display: grid; gap: 1.75rem; }
@media (min-width: 640px) { .voet__raster { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; } }
@media (min-width: 980px) { .voet__raster { grid-template-columns: 1.3fr .8fr 1fr 1fr; } }
.voet__kop { display: block; margin-bottom: .7rem; }
.voet__slogan { margin: .6rem 0 0; color: rgba(255,255,255,.7); }
.voet__menu, .voet__uren, .voet__regels { display: grid; gap: .55rem; }
/* Raakvlakken van minstens 24px hoog (WCAG 2.5.8). De linkjes in de voet
   waren 14 tot 23px. */
.voet__menu a, .footer__links a { display: inline-block; padding-block: .3rem; }
/* Geen streepje onder de voetlinks, ook niet bij aanwijzen; dan kleurt de
   tekst oranje, net als de menu-items in de kop. */
.voet__menu a, .voet__regels a, .footer__links a, .voet__sociaal a { text-decoration: none; }
.voet__menu a:hover, .voet__regels a:hover, .footer__links a:hover,
.voet__menu a:focus-visible, .voet__regels a:focus-visible, .footer__links a:focus-visible { color: var(--accent); }
.voet__uren strong { font-weight: 600; }
/* Icoon en tekst zitten samen in de link, zodat de ruimte die het raakvlak op
   24px brengt ze allebei verschuift. Stond de padding alleen op de link, dan
   zakte de tekst 4,8px onder zijn icoon. Het icoon hoort er bovendien bij:
   het is nu onderdeel van het klikvlak. */
.voet__regel { display: flex; align-items: flex-start; gap: .6rem; }
.voet__regel--link { padding-block: .3rem; }
.voet__ico { width: 17px; height: 17px; flex: 0 0 17px; margin-top: .18rem; color: var(--accent); }
.voet__sociaal { display: flex; gap: .6rem; margin-top: 1rem; }
.voet__sociaal a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); }
.voet__sociaal a:hover { background: rgba(255,255,255,.22); }
.voet__sociaal svg { width: 20px; height: 20px; }
footer strong { color: #fff; }
.footer__logo { height: 44px; width: auto; margin-bottom: .75rem; }
footer a { color: #fff; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
footer .klein { grid-column: 1 / -1; border-top: 1px solid var(--line-deep); padding-top: 1rem; color: rgba(255,255,255,.6); font-size: .8rem; }

/* ---------- Actiebalk mobiel ----------
   Permanent op mobiel: route (primair) plus bellen. Verdwijnt op desktop,
   waar de kop de knoppen draagt. */
.actiebalk { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: 1fr 56px; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.actiebalk .knop, .actiebalk .bel { min-height: 48px; width: auto; }
.actiebalk .bel { border-color: var(--brand); }
/* De balk herhaalt de twee knoppen die in de hero al staan, dus op het eerste
   scherm voegt hij niets toe en dekt hij wel een stuk van de foto af. Hij
   schuift pas op zodra de heroknoppen uit beeld zijn (verzoek 23-09-2026).
   De klasse js staat op <html> zodra er script draait; zonder script blijft de
   balk gewoon staan, want dan is er niets dat hem later tevoorschijn haalt. */
.js .actiebalk { transform: translateY(110%); opacity: 0; pointer-events: none; transition: transform .18s ease-out, opacity .18s ease-out; }
.js .actiebalk--zichtbaar { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .js .actiebalk { transition: none; } }
@media (min-width: 900px) { .actiebalk { display: none; } }

.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem 1rem; z-index: 40; }
.skip:focus { left: 1rem; top: 1rem; }