/* =========================================================================
   Zonnestudio Leidschendam — styles.css
   Geen frameworks, geen build-stap, 0 dependencies. Fonts zelf gehost.

   Huisstijl: merkmagenta #ED008C · woordmerk-zwart #231F20 · grijs #818285
   Letters:   Outfit (koppen) + Karla (lezen)
   ====================================================================== */

/* ---------- Fonts (zelf gehost: geen Google-CDN = sneller + AVG-vriendelijk) */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/outfit-latin-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: 'Karla';
  src: url('fonts/karla-latin-var.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
  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;
}

/* ---------- Tokens */
:root {
  --magenta:    #ED008C;
  --magenta-lt: #FF57B0;   /* op donkere vlakken */
  --magenta-dp: #B80070;   /* hover */
  /* Toegankelijkheids-varianten. #ED008C haalt op wit 4,22:1 en zakt daarmee
     onder de WCAG AA-eis van 4,5:1. Het merk blijft #ED008C; kleine tekst en
     knopvlakken gebruiken een fractie donkerder tint.
       --magenta-tekst #C40073 : ruim boven 4,5:1 op wit en op de roze prijsband
       --magenta-knop  #E40086 : witte tekst erop 4,52:1 */
  --magenta-tekst: #C40073;
  --magenta-knop:  #E40086;

  --ink:        #231F20;
  --ink-deep:   #161314;
  --nacht:      #0B050A;   /* warme nacht — alle leesvlakken op de foto */

  --wit:        #FFFFFF;
  --grond:      #FFFFFF;
  --grond-2:    #F6F3F2;
  --lijn:       #DCDCDD;
  --lijn-2:     #EDEAE9;
  --grijs:      #818285;
  --tekst:      #231F20;
  --tekst-mut:  #5E5759;

  --wit-mut:    rgba(255,255,255,.80);
  --wit-dim:    rgba(255,255,255,.62);

  --shell: 1180px;
  --pad: clamp(1.15rem, 5vw, 3rem);
  --kop-h: 84px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  --f-display: 'Outfit', 'Segoe UI', Helvetica, sans-serif;
  --f-body: 'Karla', 'Segoe UI', Helvetica, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --schaduw: 0 22px 48px -28px rgba(35,31,32,.42);
}
@media (max-width: 899px) { :root { --kop-h: 74px; } }

/* ---------- Reset */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-h) + 16px); }
body {
  margin: 0; background: var(--grond); color: var(--tekst);
  font-family: var(--f-body);
  font-size: clamp(1.02rem, .32vw + .96rem, 1.11rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--f-display); font-weight: 800; line-height: 1.06;
  letter-spacing: -.03em; margin: 0; text-wrap: balance; overflow-wrap: break-word;
}
.waarom > *, .split > *, .prijs-layout > *, .vind > * { min-width: 0; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Hulpstukken */
.shell { width: min(100% - (var(--pad) * 2), var(--shell)); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 999;
  background: var(--magenta-dp); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 700; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: 0; }
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 4px;
}

/* Eyebrow — magenta ruitje vooraan */
.eyebrow {
  font-family: var(--f-display); font-weight: 700; font-size: .74rem;
  letter-spacing: .19em; text-transform: uppercase; color: var(--magenta-tekst);
  margin: 0 0 .85rem; display: flex; align-items: center; gap: .62rem;
}
.eyebrow::before {
  content: ''; flex: none; width: .55rem; height: .55rem; background: currentColor;
  transform: rotate(45deg);
}

/* ---------- Knoppen — recht, met neon-bloem */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.012em; text-decoration: none; cursor: pointer;
  padding: 1.02rem 1.75rem; border-radius: 10px; border: 1.5px solid transparent;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background: var(--magenta-knop); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 38px -14px rgba(237,0,140,.85);
}
.btn--primary:hover {
  background: var(--magenta-dp);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 22px 46px -14px rgba(237,0,140,.95);
}
.btn--ghost {
  border-color: rgba(255,255,255,.46); color: #fff; background: rgba(11,5,10,.62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn--ghost:hover { border-color: #fff; background: rgba(11,5,10,.78); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Open / gesloten-lampje */
.status {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-family: var(--f-display); font-weight: 700; font-size: .82rem;
}
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grijs); flex: none; }
.status--open  { color: #0E7A43; }
.status--dicht { color: #9C2A2A; }
.status--open  .status__dot { background: #1FA85E; box-shadow: 0 0 0 4px rgba(31,168,94,.16); }
.status--dicht .status__dot { background: #C34A4A; box-shadow: 0 0 0 4px rgba(195,74,74,.14); }
.op-donker .status--open, .hero .status--open, .uren .status--open,
.slot .status--open { color: #83EFB4; }
.op-donker .status--dicht, .hero .status--dicht, .uren .status--dicht,
.slot .status--dicht { color: #FFA7A7; }

/* =======================================================================
   KOPBALK - vaste, ondoorzichtige WITTE balk, op elke schermmaat gelijk.
   De balk valt NIET over de foto: de hero begint eronder.
   Onderrand = een magenta neonlijn van 1px. Die staat op ELKE maat, zodat
   telefoon, tablet en desktop dezelfde balk tonen en niet twee stijlen door
   elkaar lopen. De lijn is exact 1px en verandert dus niets aan de hoogte.
   ==================================================================== */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--wit);
  border-bottom: 1px solid var(--magenta);
  /* 0,34s met een symmetrische in-out-curve: leest als bewust en is klaar
     voordat je erop wacht. Trager voelt alsof je op je eigen menu wacht. */
  transform: translate3d(0, 0, 0);
  transition: transform .34s cubic-bezier(.65, 0, .35, 1), box-shadow .28s var(--ease);
}
.site-head.is-vast { box-shadow: 0 12px 32px -24px rgba(35,31,32,.6); }

/* Naar beneden scrollen = balk uit beeld, eerste beweging omhoog = balk terug
   (aansturing in script.js §4). De balk blijft sticky en houdt dus zijn plek in
   de stroom: er verspringt niets aan de pagina zelf. */
.site-head.is-weg { transform: translate3d(0, -100%, 0); }

/* Toetsenbord: krijgt een link in de balk focus, dan moet de balk zichtbaar
   zijn. Deze regel staat bewust NA .is-weg - gelijke specificiteit, laatste wint.
   Bewust :focus-visible en niet :focus-within: een MUISklik op een menulink zet
   daar ook focus op, en dan zou de balk daarna nooit meer wegschuiven.
   Browsers zonder :has() negeren deze regel; script.js doet hetzelfde werk. */
.site-head:has(:focus-visible) { transform: translate3d(0, 0, 0); }

/* Bewegingsvoorkeur: geen schuivende balk, hij blijft gewoon staan. */
@media (prefers-reduced-motion: reduce) {
  .site-head, .site-head.is-weg { transform: none; }
}
.site-head__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: var(--kop-h); padding-block: .55rem;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { width: clamp(148px, 24vw, 250px); height: auto; }

.head-nav { display: none; gap: clamp(.9rem, 1.8vw, 1.6rem); }
.head-nav a {
  font-family: var(--f-display); font-weight: 600; font-size: .89rem;
  text-decoration: none; color: var(--tekst-mut); position: relative;
  padding-block: .35rem; white-space: nowrap; transition: color .18s var(--ease);
}
.head-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--magenta); transition: right .28s var(--ease);
}
.head-nav a:hover { color: var(--ink); }
.head-nav a:hover::after { right: 0; }

.head-side { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.1rem); min-width: 0; }

/* De gesloten-tekst is ruim twee keer zo lang als de open-tekst. In de kopbalk
   mag hij daarom afbreken en meekrimpen. Zonder dit duwt hij de balk breder dan
   het scherm zodra de studio dicht is - gemeten: 43px zijwaartse overloop op
   768x1024. Elders op de pagina blijft .status wel op een regel staan. */
.head-status { display: none; margin: 0; min-width: 0; }
.head-status .status { white-space: normal; }
.head-call {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-display); font-weight: 700; font-size: .93rem;
  text-decoration: none; color: #fff; background: var(--magenta-knop);
  padding: .68rem 1.1rem; border-radius: 8px; white-space: nowrap;
  min-height: 44px; box-sizing: border-box;
  box-shadow: 0 12px 26px -15px rgba(237,0,140,.9);
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.head-call:hover { background: var(--magenta-dp); transform: translateY(-1px); }
.head-call svg { width: 16px; height: 16px; }
.head-call span { display: none; }

@media (min-width: 720px)  { .head-call span { display: inline; } }
@media (min-width: 720px)  { .head-status { display: inline-flex; } }
/* Tussen 720 en 1039px past het volle menu niet en is de mobiele belbalk al
   weg. Daar staat een compacte versie met de drie links die er toe doen. */
@media (min-width: 720px) {
  .head-nav { display: flex; gap: .9rem; }
  .head-nav a { font-size: .82rem; }
  .head-nav a[href="#zonnebanken"], .head-nav a[href="#verantwoord"] { display: none; }
}
/* Smalste band waar de balk het volle rijtje moet dragen (logo + compact menu
   + lampje + belknop). Daar krijgt het lampje een maatje kleiner, zodat de
   gesloten-tekst binnen twee regels blijft en de balkhoogte niet verspringt. */
@media (min-width: 720px) and (max-width: 899px) {
  .head-status .status { font-size: .74rem; gap: .38rem; }
}
@media (min-width: 1040px) {
  .head-nav { gap: clamp(.9rem, 1.8vw, 1.6rem); }
  .head-nav a { font-size: .89rem; }
  .head-nav a[href="#zonnebanken"], .head-nav a[href="#verantwoord"] { display: inline; }
}

/* -----------------------------------------------------------------------
   TELEFOON - dezelfde witte kopbalk als op tablet en desktop (onder 720px)

   De balk is hier eerder donker geweest (nacht-tint met een gloed). Dat is op
   verzoek teruggedraaid: de balk is nu op ELKE maat wit, met dezelfde magenta
   neonlijn als onderrand. Wat onder 720px anders blijft, is puur maatwerk voor
   de smalle balk - geen andere stijl:

   - het logo staat DIRECT op de witte balk. Het witte plaatje eronder was
     bedoeld om donkere lijnkunst op zwart leesbaar te houden; op een witte
     balk is dat dubbelop. De binnenruimte blijft wel staan, want die vormt
     het tikvlak van de logolink - dat mocht niet kleiner worden.
   - de belknop blijft een magenta pil MET het telefoonnummer erin. Die vult
     het gat in het midden (was 152px op 390 en 188px op 430) en maakt de knop
     zelfverklarend; een kaal icoon is de zwakste knopvorm.
   ------------------------------------------------------------------- */
@media (max-width: 719px) {
  .site-head__in { padding-block: .5rem; gap: .6rem; }

  /* Geen wit plaatje meer op een witte balk. De binnenruimte blijft staan:
     zonder die padding is de logolink nog maar ~26px hoog en krimpt het
     tikvlak. Het logo zelf is donkere lijnkunst en leest op wit prima -
     precies zoals de balk op desktop het al deed. */
  .brand { padding: .42rem .55rem; }
  .brand img { width: clamp(112px, 32vw, 138px); }

  .head-call {
    padding: .6rem .9rem; font-size: .86rem; border-radius: 999px;
    box-shadow: 0 12px 26px -12px rgba(237,0,140,1);
  }
  .head-call span { display: inline; }
  .head-call svg { width: 15px; height: 15px; }
}
/* Onder 360px past het nummer er niet meer naast: dan alleen het icoon, maar
   wel als volwaardige ronde knop van 44px. */
@media (max-width: 359px) {
  .head-call { padding: .6rem; min-width: 44px; }
  .head-call span { display: none; }
}

/* =======================================================================
   HERO - de foto vult het scherm ONDER de kopbalk.
   Alleen onder de tekst ligt een leesvlak; de bovenkant van de foto (open
   bank, Ergoline-neon, tijgerwand) blijft volledig in kleur.
   ==================================================================== */
.hero {
  /* Hoeveel foto er bovenin onaangeraakt blijft. Dit is tegelijk de afstand
     tussen de kopbalk en de eerste tekstregel. Een clamp() met een hard
     plafond, zodat het gat niet meegroeit met de schermhoogte. De open bank en
     het Ergoline-neon moeten hierboven in beeld blijven - dat is de vloer. */
  --foto-vrij: clamp(2.5rem, 11svh, 6.5rem);
  position: relative; isolation: isolate; overflow: hidden;
  /* -1px = de onderrand van de kopbalk; anders loopt de hero net voorbij de vouw */
  min-height: calc(100svh - var(--kop-h) - 1px);
  display: flex; flex-direction: column; justify-content: flex-start;
  color: #fff; background: var(--nacht);
}
@media (max-width: 899px) { .hero { --foto-vrij: clamp(1.75rem, 13svh, 7rem); } }
/* TELEFOON: iets meer fotostrook boven de tekst. Gemeten reden: op 430x932 stond
   het Ergoline-neon 7px onder de kopbalk geplakt en op 390x844 17px - het schrift
   raakte de witte balk zo ongeveer aan. Met 16svh (plafond 8,5rem) komt er ±25px
   bij en staat het neon met lucht erboven en eronder in de strook.
   Deze regel staat BEWUST vóór de korte-scherm-regels verderop: die zetten hun
   eigen, lagere --foto-vrij en moeten deze dus kunnen overschrijven.
   De dode strook ONDER de laatste tekstregel verandert hier niet van: die is de
   padding-bottom van .hero__in en staat los van --foto-vrij (gemeten 70,4px). */
@media (max-width: 719px) { .hero { --foto-vrij: clamp(2.25rem, 16svh, 8.5rem); } }
.hero__beeld { position: absolute; inset: 0; z-index: 0; }
.hero__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }

/* HET LEESVLAK - de donkere sluier achter de herotekst.
   Hij hangt aan de HERO (niet aan het tekstblok): hij begint op 0% op de
   bovenrand van de foto - daar grenst hij aan de witte kopbalk, dus daar KAN
   geen zichtbare rand zijn - en loopt door tot de onderrand. Een lange, trage
   helling in plaats van een korte, zodat de overgang nergens is aan te wijzen.
   Het masker knijpt het vlak naar rechts dicht (tijgerwand en rechterkant van
   de bank blijven in kleur) en loopt tot de schermrand uit. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(11,5,10,0) 0%,
      rgba(11,5,10,.07) 6%,
      rgba(11,5,10,.26) 11%,
      rgba(11,5,10,.52) 16%,
      rgba(11,5,10,.68) 22%,
      rgba(11,5,10,.76) 30%,
      rgba(11,5,10,.83) 46%,
      rgba(11,5,10,.88) 100%);
  -webkit-mask-image: linear-gradient(100deg, #000 0%,
      #000 30%,
      rgba(0,0,0,.80) 46%,
      rgba(0,0,0,.52) 60%,
      rgba(0,0,0,.24) 74%,
      rgba(0,0,0,.06) 88%,
      rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(100deg, #000 0%,
      #000 30%,
      rgba(0,0,0,.80) 46%,
      rgba(0,0,0,.52) 60%,
      rgba(0,0,0,.24) 74%,
      rgba(0,0,0,.06) 88%,
      rgba(0,0,0,0) 100%);
}
/* Dit breekpunt loopt gelijk met dat van de <picture>: onder 720px staat de
   staande foto, daarboven de brede. Ze hebben elk een eigen leesvlak. */
/* De uitsnede is uitgerekend, niet gegokt. Het neonschrift zit in de staande
   foto (1200x2419) op rij 165 t/m 300; `object-fit: cover` schaalt op breedte
   en schuift de rest met object-position, dus is precies te bepalen waar het
   schrift landt (rekenblad: controle/ronde7/hero-ergoline/uitsnede-rekenen.py).
   Bij 22% stond het schrift 7px (430) tot 17px (390) onder de kopbalk geplakt.
   Bij 12% staat het op 34-37px, met ±54px lucht tot de eerste tekstregel.
   Zelfde waarde als de korte-scherm-regel verderop, dus één uitsnede voor alle
   telefoons. */
@media (max-width: 719px) {
  .hero__beeld img { object-position: 50% 12%; }
  /* De sluier begint later en loopt daarna steiler op. Reden: hij hing het
     neonschrift op 0,37-0,43 dekking half uit, terwijl hij daar niets te
     beschermen heeft - de eerste tekst begint pas op ±21% van de hero.
     Vanaf 21% is de sluier gelijk aan of donkerder dan hiervoor, dus de
     leesbaarheid van de tekst kan er niet op achteruitgaan. */
  .hero::after {
    background: linear-gradient(to bottom,
        rgba(11,5,10,0) 0%,
        rgba(11,5,10,.04) 5%,
        rgba(11,5,10,.12) 10%,
        rgba(11,5,10,.30) 14%,
        rgba(11,5,10,.56) 17%,
        rgba(11,5,10,.82) 21%,
        rgba(11,5,10,.89) 32%,
        rgba(11,5,10,.93) 100%);
    -webkit-mask-image: none; mask-image: none;
  }
}

.hero__in {
  position: relative; z-index: 2;
  /* GEEN automarges hier. Die verdelen de overgebleven ruimte over boven en
     onder, bovenop --foto-vrij, waardoor het gat meegroeit met de schermhoogte.
     Het tekstblok staat vast tegen de bovenkant; het gat is exact --foto-vrij. */
  margin-top: 0; margin-bottom: 0;
  padding-top: var(--foto-vrij);
  padding-bottom: clamp(1.75rem, 4.2vh, 2.9rem);
}
@media (max-width: 719px) {
  .hero__in { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
}
.hero .eyebrow { color: #fff; }
.hero .eyebrow::before { background: var(--magenta-lt); }

/* Bovenregel: de Google-score doet dubbel werk (herkenning + sociaal bewijs) */
.eyebrow--score { letter-spacing: .12em; gap: .5rem; flex-wrap: wrap; }
.eyebrow--score::before { content: none; }
.eyebrow__sep { opacity: .6; }
/* Sociale bewijskracht is het enige harde cijfer over ons dat van buiten komt.
   Daarom geen los regeltje maar een pilletje met een groot cijfer: het valt op
   zonder dat er ook maar een woord bij komt. */
.score {
  display: inline-flex; align-items: center; gap: .42rem; color: #fff;
  text-decoration: none; padding: .3rem .72rem .32rem;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.34);
  background: rgba(11,5,10,.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.score:hover { border-color: rgba(255,255,255,.75); background: rgba(11,5,10,.6); }
.score__ster { color: #F5B942; font-size: 1.15em; line-height: 1; }
.score__cijfer {
  font-family: var(--f-display); font-weight: 800; font-size: 1.32em;
  letter-spacing: -.03em; line-height: 1; margin-right: .12em;
}

.hero h1 {
  font-size: clamp(2.05rem, 4.4vw, 3.35rem); letter-spacing: -.038em;
  margin-bottom: 1rem; max-width: 18ch;
  text-shadow: 0 2px 26px rgba(11,5,10,.55);
}
/* De bedrijfsnaam staat ook in het logo erboven. Daarom is deze regel met
   OPMAAK naar de achtergrond gebracht en niet geschrapt: de woorden blijven
   voluit in de <h1> staan. Bewust GEEN sr-only - verborgen tekst in een h1
   is een risico dat we hier niet nemen. */
.hero h1 .h1-kop {
  display: block; font-weight: 500; font-size: clamp(.7rem, .9vw, .82rem);
  text-transform: uppercase; letter-spacing: .19em; color: #D6CBD1;
  margin-bottom: .5rem; text-shadow: none;
}
.hero h1 em { font-style: normal; color: var(--magenta-lt); }

.hero__lead {
  font-size: clamp(1rem, .34vw + .94rem, 1.1rem); color: rgba(255,255,255,.94);
  max-width: 48ch; margin-bottom: 1.35rem; line-height: 1.58;
  text-shadow: 0 1px 18px rgba(11,5,10,.6);
}

/* De drie feiten staan VOOR de knoppen: eerst het argument, dan de vraag. */
.hero__feiten {
  display: flex; flex-wrap: wrap; margin: 0 0 1.4rem; padding-top: .95rem;
  border-top: 1px solid rgba(255,255,255,.28); max-width: 40rem;
}
.hero__feit { margin: 0; padding-right: clamp(.85rem, 2.6vw, 2rem); }
.hero__feit + .hero__feit {
  padding-left: clamp(.85rem, 2.6vw, 2rem); border-left: 1px solid rgba(255,255,255,.22);
}
.hero__feit dt {
  font-family: var(--f-display); font-weight: 600; font-size: .66rem;
  letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.74);
  margin-bottom: .16rem;
}
.hero__feit dd {
  margin: 0; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1rem, 2.2vw, 1.26rem); letter-spacing: -.035em; color: #fff;
}
.hero__feit dd small {
  display: block; font-family: var(--f-body); font-weight: 500; font-size: .74rem;
  letter-spacing: 0; color: rgba(255,255,255,.72); text-transform: none; margin-top: .1rem;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Microcopy onder de knoppenrij. Het lampje staat hier alleen onder 720px;
   daarboven staat hij in de kopbalk - zo nooit twee keer in beeld. */
.hero__micro {
  display: flex; flex-wrap: wrap; align-items: center;
  margin: .9rem 0 0; font-family: var(--f-display); font-weight: 600;
  font-size: .9rem; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 14px rgba(11,5,10,.7);
}
.micro-status { display: inline-flex; align-items: center; min-width: 0; }
.micro-status::after { content: '\00b7'; margin: 0 .5rem; opacity: .55; }
@media (min-width: 720px) { .hero__micro .micro-status, .slot__micro .micro-status { display: none; } }
/* De gesloten-tekst is ruim twee keer zo lang als de open-tekst. Op de smalste
   telefoon paste hij niet op een regel en werd hij afgeknipt aan de schermrand.
   Een maatje kleiner lost dat op zonder een extra regel onder de knop. */
@media (max-width: 379px) {
  .hero__micro .status, .slot__micro .status { font-size: .76rem; }
}

@media (max-width: 719px) {
  .hero h1 { font-size: clamp(1.88rem, 8vw, 2.25rem); margin-bottom: .75rem; }
  .hero__lead { font-size: .95rem; line-height: 1.52; margin-bottom: 1.05rem; }

  /* De bovenregel op een regel houden, anders blijft er een los punt hangen. */
  .eyebrow--score { font-size: .63rem; letter-spacing: .05em; gap: .38rem; margin-bottom: .7rem; }

  /* Drie feiten naast elkaar in plaats van omklappend: scheelt een halve
     regel foto en leest als een cijferbalk. */
  .hero__feiten {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    margin-bottom: 1.05rem; padding-top: .75rem; max-width: none;
  }
  .hero__feit { padding-right: .5rem; }
  .hero__feit + .hero__feit { padding-left: .55rem; }
  .hero__feit dt { font-size: .57rem; letter-spacing: .09em; }
  .hero__feit dd { font-size: .97rem; }
  .hero__feit dd small { font-size: .66rem; line-height: 1.3; }

  /* In de hero alleen de routeknop; bellen zit in de vaste belbalk. */
  .hero__cta .btn--ghost { display: none; }
  .hero__cta .btn { padding: .85rem 1.2rem; font-size: .95rem; flex: 1 1 100%; }
  .hero__micro { margin-top: .8rem; font-size: .86rem; }
}
@media (max-width: 359px) {
  .hero__feit dt { font-size: .54rem; letter-spacing: .06em; }
  .hero__feit dd { font-size: .92rem; }
  .hero__feit dd small { font-size: .63rem; }
}

/* Kleine telefoon met een kort scherm (bv. 320x720, 360x640): daar past de
   hero niet meer boven de vaste belbalk. Alles een maat kleiner, en de
   sublabels onder de drie feiten vervallen - die zinnetjes staan woordelijk
   al in de alinea erboven, dus er gaat geen informatie verloren. */
@media (max-width: 719px) and (max-height: 800px) {
  .hero { --foto-vrij: clamp(1rem, 11svh, 5rem); }
  .hero h1 { font-size: clamp(1.58rem, 6.9vw, 1.95rem); margin-bottom: .6rem; }
  .hero h1 .h1-kop { font-size: .68rem; margin-bottom: .35rem; }
  .hero__lead { font-size: .89rem; line-height: 1.45; margin-bottom: .8rem; }
  .hero__feiten { margin-bottom: .8rem; padding-top: .6rem; }
  .hero__feit dd small { display: none; }
  .hero__feit dd { font-size: .95rem; }
  .hero__cta .btn { padding: .78rem 1rem; }
  .hero__micro { margin-top: .65rem; font-size: .82rem; }
  .hero__in { padding-bottom: calc(4.1rem + env(safe-area-inset-bottom)); }
  .eyebrow--score { margin-bottom: .5rem; }
}
/* Nog korter scherm (bv. 360x640): iets minder fotostrook, dan staat de
   microcopy weer vrij van de belbalk. */
/* Tabletband (720-899px): brede foto, maar de tekstkolom loopt daar bijna van
   rand tot rand. Zelfde verloop als op desktop, alleen knijpt het masker pas
   veel later dicht - anders valt de rechterkant van het feitenblok buiten het
   leesvlak. De rechterrand van de foto blijft er wel mee in kleur. */
@media (min-width: 720px) and (max-width: 899px) {
  .hero::after {
    -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 66%,
      rgba(0,0,0,.62) 80%, rgba(0,0,0,.26) 92%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(100deg, #000 0%, #000 66%,
      rgba(0,0,0,.62) 80%, rgba(0,0,0,.26) 92%, rgba(0,0,0,0) 100%);
  }
}

/* Korte telefoonschermen: daar begint de tekst al op 5-10% van de foto en
   ligt de witte lampbalk van de bank meteen achter de kop. Het leesvlak moet
   daar dus sneller op sterkte zijn - er is boven de tekst toch nauwelijks
   fotostrook meer om te sparen. */
@media (max-width: 719px) and (max-height: 700px) {
  /* Zelfde ingreep als hierboven, maar krapper: op een kort scherm begint de
     tekst al op ±14% van de hero, dus er is minder ruimte om de sluier laat te
     laten beginnen. Gemeten op 360x640 stond het Ergoline-neon op 4,5%-12,6%
     en werd het daar tot 0,76 dekking weggedimd - zichtbaar, maar uitgewassen.
     Nu loopt de sluier daar tot 0,50 en vanaf 14% is hij gelijk aan of donkerder
     dan hiervoor (14%: 0,79 tegen 0,776), dus de tekst gaat er niet op achteruit. */
  .hero::after {
    background: linear-gradient(to bottom,
        rgba(11,5,10,0) 0%,
        rgba(11,5,10,.06) 4%,
        rgba(11,5,10,.20) 9%,
        rgba(11,5,10,.42) 12%,
        rgba(11,5,10,.79) 14%,
        rgba(11,5,10,.85) 18%,
        rgba(11,5,10,.90) 30%,
        rgba(11,5,10,.93) 100%);
  }
}
@media (max-width: 719px) and (max-height: 700px) {
  .hero { --foto-vrij: clamp(1rem, 11svh, 4.6rem); }
  /* Op zo'n kort scherm valt het Ergoline-neon net boven de bovenrand weg.
     De uitsnede een stukje omhoog schuiven zet het weer vrij boven de tekst;
     onderaan gaat alleen bedekt bed verloren. Op beeld nagelopen bij
     6/12/18/22 - 12% zet het neonschrift compleet boven de kop. */
  .hero__beeld img { object-position: 50% 12%; }
  .hero__lead { font-size: .86rem; margin-bottom: .7rem; }
}

/* Heel kort telefoonscherm (bv. iPhone SE 320x568, 360x600). Fotostrook bijna
   helemaal weg en de regelafstanden een tandje krapper; dan staat de hele hero
   inclusief knop en microcopy vrij boven de vaste belbalk. */
@media (max-width: 719px) and (max-height: 620px) {
  .hero { --foto-vrij: clamp(.5rem, 4svh, 2.5rem); }
  /* Nog krapper: de fotostrook is hier nog maar ~23px, dus het neon moet net
     iets lager in de uitsnede liggen om er compleet in te passen (op beeld
     nagelopen bij 6/12/18/22 op 320x568). */
  .hero__beeld img { object-position: 50% 18%; }
  .hero h1 { font-size: clamp(1.42rem, 6.4vw, 1.72rem); margin-bottom: .5rem; }
  .hero__lead { font-size: .82rem; line-height: 1.4; margin-bottom: .6rem; }
  .hero__feiten { margin-bottom: .6rem; padding-top: .5rem; }
  .hero__cta .btn { padding: .7rem 1rem; }
  .hero__micro { margin-top: .5rem; font-size: .8rem; }
  .hero__in { padding-bottom: calc(3.9rem + env(safe-area-inset-bottom)); }
}

/* Korte brede schermen (bv. laptop 1280x800, tablet liggend 1024x768): daar
   valt de microcopyregel onder de vouw. Iets minder onaangeraakte fotostrook,
   dan staat de hele hero weer binnen het eerste scherm. */
@media (min-width: 720px) and (max-height: 860px) {
  .hero { --foto-vrij: clamp(2rem, 10svh, 5.5rem); }
}

/* STAANDE SCHERMEN: de inhoud bepaalt de hoogte, niet het scherm.
   Op een liggend scherm is de hero net zo hoog als de tekst plus wat lucht.
   Op een staand scherm (telefoon, staande tablet) is het scherm veel hoger dan
   de tekst, en dwong `min-height: 100svh` een lange strook foto af waar niets
   in staat: gemeten 205px op 390x844, 284px op 430x932, 352px op 768x1024 en
   502px op 820x1180. Daar telt alleen de inhoud, en de volgende sectie piept
   meteen onder de vouw uit ("er is meer"-signaal).
   `min-height` blijft een MINIMUM: past de tekst niet, dan groeit de hero
   gewoon mee - op korte telefoons verandert er dus niets.
   De grens ligt op 13/10: 1024x768 (1,33) valt er net buiten en houdt zijn
   schermvullende hero, 820x1180 (0,69) en 430x932 (0,46) vallen eronder. */
@media (max-aspect-ratio: 13/10) {
  .hero { min-height: 0; }
}

/* =======================================================================
   SECTIE-BASIS — zware bovenlijn + magenta punt achter de kop
   ==================================================================== */
.sec { padding-block: clamp(3.2rem, 7.5vw, 6rem); position: relative; }
.sec--grijs { background: var(--grond-2); }
.sec--donker { background: var(--ink-deep); color: #fff; }
.sec--donker .eyebrow { color: var(--magenta-lt); }
.sec__head {
  max-width: 62ch; margin-bottom: clamp(1.9rem, 4vw, 2.9rem);
  border-top: 3px solid var(--ink); padding-top: 1.15rem;
}
.sec--donker .sec__head { border-top-color: rgba(255,255,255,.5); }
.sec__head h2 { font-size: clamp(1.75rem, 4.4vw, 2.85rem); margin-bottom: .85rem; }
.sec__head h2::after { content: '.'; color: var(--magenta); }
/* Koppen die al op een leesteken eindigen krijgen geen sierpunt erbij; anders
   staat er "Wat kost zonnen bij ons?." op het scherm. */
.sec__head h2[data-geen-punt]::after { content: none; }
.sec__head p { color: var(--tekst-mut); font-size: 1.05rem; }
/* kop binnen een kolom: zelfde behandeling, een maat kleiner */
.sec__head--kolom { max-width: none; margin-bottom: 1.3rem; }
.sec__head--kolom h2 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); margin-bottom: 0; }
.sec--donker .sec__head p { color: var(--wit-mut); }

/* =======================================================================
   WAAROM
   ==================================================================== */
.waarom { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start; }
@media (min-width: 940px) { .waarom { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); } }

/* Dezelfde 3px-bovenlijn als de kop ernaast; anders staan er twee lijnen van
   verschillende dikte op exact dezelfde hoogte. */
.punten { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.punten li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.05rem;
  padding-block: 1.25rem; border-top: 1px solid var(--lijn);
}
.punten li:first-child { border-top: 0; }
.punten li:last-child { border-bottom: 1px solid var(--lijn); }
.punten__nr {
  font-family: var(--f-display); font-weight: 800; font-size: .78rem;
  color: var(--magenta-tekst); padding-top: .4rem; font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.punten__txt strong {
  display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.13rem;
  letter-spacing: -.026em; color: var(--ink); margin-bottom: .15rem;
}
.punten__txt span { color: var(--tekst-mut); font-size: .97rem; line-height: 1.6; }

.uitgelicht {
  background: var(--ink-deep); color: #fff; border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3.6vw, 2.3rem); position: relative; overflow: hidden;
  margin-top: 1.9rem;
}
.uitgelicht::before {
  content: ''; position: absolute; right: -26%; top: -46%; width: 82%; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(237,0,140,.42), transparent 66%);
}
.uitgelicht > * { position: relative; }
.uitgelicht h3 { font-size: clamp(1.24rem, 2.8vw, 1.62rem); margin-bottom: .8rem; }
.uitgelicht p { color: var(--wit-mut); font-size: .99rem; }
.uitgelicht .btn { margin-top: 1.1rem; }

/* =======================================================================
   ZONNEBANKEN
   ==================================================================== */
.banken { display: grid; gap: clamp(1rem, 2.2vw, 1.4rem); }
@media (min-width: 620px) { .banken { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1020px) { .banken { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.bank {
  display: flex; flex-direction: column; background: var(--wit);
  border: 1px solid var(--lijn); border-radius: var(--r-md); overflow: hidden;
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.bank:hover { border-color: var(--magenta); transform: translateY(-3px); box-shadow: var(--schaduw); }
.bank__beeld { background: var(--grond-2); aspect-ratio: 3 / 2; overflow: hidden; }
.bank__beeld img { width: 100%; height: 100%; object-fit: cover; }
.bank__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; gap: .35rem; }
.bank__rang {
  font-family: var(--f-display); font-weight: 700; font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--magenta-tekst);
}
.bank__naam {
  font-family: var(--f-display); font-weight: 800; font-size: 1.12rem;
  letter-spacing: -.03em; color: var(--ink);
}
.bank__om { color: var(--tekst-mut); font-size: .93rem; line-height: 1.55; margin: 0; flex: 1; }
.bank__prijs {
  margin: .7rem 0 0; padding-top: .7rem; border-top: 1px solid var(--lijn-2);
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.bank__prijs b {
  font-family: var(--f-display); font-weight: 800; font-size: 1.42rem;
  letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.bank__prijs span { font-size: .76rem; color: var(--tekst-mut); }

.beeld-noot { margin-top: 1.4rem; font-size: .84rem; color: var(--tekst-mut); }
.banken-noot {
  margin-top: 1.7rem; font-size: .99rem; color: var(--tekst-mut);
  border-left: 3px solid var(--magenta); padding-left: 1.1rem;
}
.banken-noot strong { color: var(--ink); }

/* =======================================================================
   PRIJZEN — de instapkolom is het prijsanker
   ==================================================================== */
.prijs-layout { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); align-items: start; }
@media (min-width: 1000px) {
  .prijs-layout { grid-template-columns: minmax(0,1fr) 19.5rem; align-items: stretch; }
  /* De openingstijden-kaart begint bovenaan, op dezelfde lijn als de kop van de
     sectie - hij houdt zijn eigen hoogte en zakt niet mee naar het midden. */
  .prijs-layout .uren { align-self: start; }
  /* Wordt de kaart toch langer dan de linkerkolom, dan groeit de TABEL mee.
     De overgebleven ruimte gaat naar de TABELRIJEN (die worden ruimer), niet
     naar een gat tussen de tekst - dat verplaatst de leegte alleen. */
  .prijs-layout > div:first-child { display: flex; flex-direction: column; }
  .prijs-layout .tabel-scroll { flex: 1 1 auto; display: flex; min-height: 0; }
  .prijs-layout .tarieven { flex: 1 1 auto; }
  .prijs-layout .wetregel { margin-bottom: 0; }
}

.tarieven { width: 100%; border-collapse: collapse; }
/* De bankkolom leest als tekst en staat links; alle zes prijskolommen staan
   gecentreerd, kop en cel op dezelfde as. Gelijke kolombreedte houdt het
   raster recht: de bedragen staan zuiver onder hun eigen kop. */
.tarieven th, .tarieven td {
  text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums;
}
.tarieven thead th:not(:first-child) { width: 12.5%; }
.tarieven thead th {
  font-family: var(--f-display); font-weight: 600; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-mut);
  padding: 0 .5rem .8rem; border-bottom: 3px solid var(--ink); white-space: nowrap;
}
.tarieven thead th:first-child { text-align: left; width: auto; }
/* De kolom waar mensen op zoeken: t/m 15 minuten. */
.tarieven thead th:nth-child(2) {
  color: var(--magenta-tekst); background: rgba(237,0,140,.06);
  border-bottom-color: var(--magenta);
}
.tarieven tbody th {
  text-align: left; font-family: var(--f-display); font-weight: 800; font-size: 1.02rem;
  letter-spacing: -.028em; color: var(--ink); padding: 1.05rem .5rem; white-space: nowrap;
  width: auto;
}
.tarieven tbody td { padding: 1.05rem .5rem; color: var(--tekst-mut); font-size: .97rem; }
.tarieven tbody td:first-of-type {
  background: rgba(237,0,140,.06); color: var(--magenta-tekst);
  font-family: var(--f-display); font-weight: 800; font-size: 1.22rem;
  letter-spacing: -.035em;
}
/* De scheidingslijn als inset-schaduw en niet als rand: een samengevouwen rand
   wordt over twee rijen verdeeld en maakt de binnenste rijen een halve pixel
   hoger dan de buitenste. Zo zijn alle vier de rijen exact even hoog. */
@media (min-width: 820px) {
  .tarieven tbody tr + tr th, .tarieven tbody tr + tr td {
    box-shadow: inset 0 1px 0 var(--lijn);
  }
}
.tarieven tbody tr:hover th { background: rgba(237,0,140,.035); }
.tarieven tbody tr:hover td { background: rgba(237,0,140,.035); }
.tarieven tbody tr:hover td:first-of-type { background: rgba(237,0,140,.11); }

/* De smalste maat waarop tabel en openingstijden-kaart naast elkaar staan.
   Daar past de tabel alleen met krappere celruimte; zonder dit krijgt het
   tabelvlak een eigen schuifbalk. */
@media (min-width: 1000px) and (max-width: 1099px) {
  .tarieven thead th, .tarieven tbody th, .tarieven tbody td { padding-inline: .3rem; }
}

/* ---- PRIJZEN OP TELEFOON EN STAANDE TABLET: een kaart per bank -----------
   Alle zes bedragen van een bank staan op EEN rechterlijn. In de opzet die
   hier stond landden ze op twee lijnen op een telefoon (rechterranden 187px
   en 352px op 390 breed - 165px uit elkaar) en op drie op een tablet
   (376px en 711px op 768 breed - 335px uit elkaar, met 520px lucht tussen
   "t/m 15 min" en het bedrag). Dat las als een wolk cijfers.

   Nu: een kaart per bank, de t/m-15-minutenprijs als groot magenta anker
   bovenaan, daaronder vijf regels met dezelfde haarlijn-ritmiek als de
   openingstijden-kaart - label links, bedrag rechts, alles uitgelijnd. */
@media (max-width: 819px) {
  .tarieven, .tarieven tbody, .tarieven th { display: block; }
  .tarieven thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tarieven tbody tr {
    display: block;
    background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-md);
    padding: .9rem 1.05rem 1rem; margin-bottom: .75rem;
  }
  .tarieven tbody th {
    padding: 0 0 .55rem; font-size: 1.06rem; line-height: 1.2; letter-spacing: -.03em;
    border-bottom: 1px solid var(--lijn); margin-bottom: .5rem;
  }
  /* De vijf minutenregels */
  .tarieven tbody td {
    display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
    padding: .3rem 0; line-height: 1.32; border: 0;
    border-bottom: 1px solid var(--lijn-2) !important;
    background: none !important;
    font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--ink);
  }
  .tarieven tbody td::before {
    content: attr(data-min);
    font-family: var(--f-body); font-weight: 500; color: var(--tekst-mut);
    font-size: .89rem; white-space: nowrap;
  }
  .tarieven tbody td:last-of-type { border-bottom: 0 !important; padding-bottom: 0; }
  /* Het anker: de prijs waar iedereen op zoekt */
  .tarieven tbody td:first-of-type {
    align-items: center;
    font-size: 1.4rem; line-height: 1.1; letter-spacing: -.035em;
    padding: .5rem .75rem .55rem; margin-bottom: .45rem;
    color: var(--magenta-tekst); border: 0 !important;
    background: rgba(237,0,140,.08) !important; border-radius: 9px;
  }
  .tarieven tbody td:first-of-type::before {
    font-family: var(--f-display); font-weight: 700; font-size: .7rem;
    letter-spacing: .13em; text-transform: uppercase; color: var(--magenta-tekst);
  }
}
/* Staande tablet en brede telefoon liggend: twee kaarten naast elkaar, net als
   de bankkaartjes hierboven. Zo blijft de afstand tussen minuut en bedrag kort
   in plaats van een halve schermbreedte. */
@media (min-width: 600px) and (max-width: 819px) {
  .tarieven tbody {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .75rem; align-items: start;
  }
  .tarieven tbody tr { margin-bottom: 0; }
}

.tarieven-noot {
  margin: 1.05rem 0 0; padding-top: 1.05rem;
  border-top: 1px solid var(--lijn);
  font-size: .96rem; line-height: 1.6; color: var(--tekst-mut);
}
.tarieven-noot strong { color: var(--ink); font-weight: 700; }
@media (max-width: 819px) {
  .tarieven-noot { margin-top: .55rem; padding-top: 0; border-top: 0; }
}

/* Openingstijden-paneel */
.uren {
  background: var(--ink-deep); color: #fff; border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3.4vw, 1.9rem); position: relative; overflow: hidden;
}
.uren::before {
  content: ''; position: absolute; inset: auto -34% -62% -12%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(237,0,140,.36), transparent 66%);
}
.uren > * { position: relative; }
.uren h3 { font-size: 1.28rem; margin-bottom: 1rem; }
/* Tussenruimte als padding en niet als gap: anders knipt hij de onderstreping
   van elke dagregel doormidden. */
.uren dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .1rem 0; }
.uren dt, .uren dd {
  margin: 0; padding-block: .58rem; font-size: .96rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.uren dt { color: var(--wit-mut); padding-right: 1rem; }
.uren dd {
  text-align: right; font-family: var(--f-display); font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.uren dt.is-nu, .uren dd.is-nu { color: var(--magenta-lt); }
.uren__status { margin-top: 1.1rem; }
.uren__note { margin-top: .9rem; font-size: .87rem; color: var(--wit-dim); line-height: 1.55; }
.uren .btn { margin-top: 1.2rem; width: 100%; }

/* =======================================================================
   VERANTWOORD ZONNEN
   ==================================================================== */
.split { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); } }

.zorg { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
/* Het magenta streepje als inzet-schaduw i.p.v. als rand: een 3px rand knikt
   in de afgeronde hoek naar 1px en oogt daardoor vierkant naast een ronde kaart.
   Een inzet-schaduw volgt de afronding wel. */
.zorg li {
  background: var(--wit); border: 1px solid var(--lijn);
  box-shadow: inset 3px 0 0 var(--magenta);
  border-radius: var(--r-md); padding: 1.1rem 1.25rem;
}
.zorg strong {
  display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); margin-bottom: .2rem; letter-spacing: -.026em;
}
.zorg span { color: var(--tekst-mut); font-size: .95rem; line-height: 1.58; }
.sec--grijs .zorg li { background: var(--wit); }

.wetregel {
  margin-top: 1.4rem; padding: .9rem 1.1rem; border-radius: var(--r-sm);
  background: var(--grond-2); box-shadow: inset 3px 0 0 var(--ink);
  font-size: .93rem; color: var(--tekst-mut); max-width: 62ch;
}
.wetregel strong { color: var(--ink); }

/* Eerlijke verwachting bij "Eerste keer": geen waarschuwing, wel een accent.
   Zelfde ritme als .wetregel, maar in het merkmagenta - dit is een belofte die
   we juist WEL waarmaken. */
.eerlijk {
  margin-top: 1.4rem; padding: .9rem 1.1rem; border-radius: var(--r-sm);
  background: rgba(237,0,140,.05); box-shadow: inset 3px 0 0 var(--magenta);
  font-size: .93rem; color: var(--tekst-mut); max-width: 62ch;
}
.eerlijk strong { color: var(--ink); }

/* =======================================================================
   VIND ONS
   ==================================================================== */
.vind { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); align-items: stretch; }
@media (min-width: 940px) { .vind { grid-template-columns: 21rem minmax(0,1fr); } }

.nap { display: grid; gap: 1.25rem; align-content: start; }
.nap__blok { display: grid; gap: .15rem; }
.nap__label {
  font-family: var(--f-display); font-weight: 700; font-size: .67rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--magenta-tekst);
}
.nap__waarde { font-size: 1.04rem; color: var(--ink); line-height: 1.5; }
.nap__waarde a {
  display: inline-block; padding-block: .3rem;
  text-decoration: none; border-bottom: 1px solid var(--lijn);
  transition: border-color .18s var(--ease);
}
.nap__waarde a:hover { border-color: var(--magenta); }

.kaart { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 360px; background: var(--ink-deep); }
.kaart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kaart__facade {
  position: absolute; inset: 0; display: grid; place-content: center; gap: .95rem;
  justify-items: center; text-align: center; padding: 2rem; color: #fff; border: 0;
  width: 100%; font-family: var(--f-body); cursor: pointer;
  background:
    radial-gradient(72% 62% at 30% 24%, rgba(237,0,140,.26), transparent 64%),
    radial-gradient(60% 60% at 84% 88%, rgba(70,150,255,.14), transparent 66%),
    linear-gradient(160deg, #241E20, #161314 70%);
  background-color: var(--ink-deep);
}
.kaart__facade::before {
  content: ''; position: absolute; inset: 0; opacity: .45;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(75% 70% at 50% 50%, #000, transparent 82%);
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000, transparent 82%);
}
.kaart__facade > * { position: relative; }
.kaart__pin {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center;
  background: var(--magenta); box-shadow: 0 0 0 8px rgba(237,0,140,.18);
}
.kaart__pin svg { width: 22px; height: 22px; }
.kaart__facade strong { font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.03em; }
.kaart__facade span { color: var(--wit-dim); font-size: .87rem; max-width: 30ch; line-height: 1.55; }
.kaart__facade em {
  font-style: normal; font-family: var(--f-display); font-weight: 700; font-size: .9rem;
  color: #fff; border: 1.5px solid rgba(255,255,255,.42); border-radius: 8px;
  padding: .58rem 1.15rem; margin-top: .15rem;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.kaart__facade:hover em { border-color: #fff; background: rgba(255,255,255,.12); }

/* =======================================================================
   FAQ
   ==================================================================== */
.faq { max-width: 62ch; }   /* gelijk aan .sec__head, anders lopen de rechterranden 84px uiteen */
.faq details { border-top: 1px solid var(--lijn); }
.faq details:last-of-type { border-bottom: 1px solid var(--lijn); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.25rem 2.6rem 1.25rem 0; position: relative;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.15rem);
  letter-spacing: -.026em; color: var(--ink); transition: color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--magenta-tekst); }
.faq summary::before, .faq summary::after {
  content: ''; position: absolute; right: .5rem; top: 50%; background: var(--magenta);
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.faq summary::before { width: 15px; height: 2px; transform: translateY(-50%); }
.faq summary::after  { width: 2px; height: 15px; right: 1.15rem; transform: translateY(-50%); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq__body { padding: 0 1.5rem 1.35rem 0; color: var(--tekst-mut); }
.faq__body p { font-size: .99rem; }
.faq__body a { color: var(--magenta-tekst); }

/* =======================================================================
   SLOT-CTA
   ==================================================================== */
.slot { position: relative; overflow: hidden; background: var(--ink-deep); color: #fff; }
.slot::before {
  content: ''; position: absolute; left: 50%; top: -60%; width: 128%; aspect-ratio: 2/1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(237,0,140,.34), transparent 62%);
}
.slot__in { position: relative; text-align: center; display: grid; justify-items: center; gap: 1.1rem; }
.slot .eyebrow { color: var(--magenta-lt); justify-content: center; }
.slot h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); max-width: 22ch; }
.slot p { color: var(--wit-mut); max-width: 52ch; }
.slot__cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: .4rem; }

/* =======================================================================
   FOOTER - licht, net als de kopbalk.

   De voettekst was bijna-zwart (#100D0E). Hij is nu licht, op elke maat, met
   dezelfde 1px magenta lijn als scheiding die de kopbalk als onderrand heeft.
   Zo hebben de twee "balken" van de site een gelijke taal.

   Waarom --grond-2 (#F6F3F2) en niet spierwit: op /privacy grenst de voettekst
   aan een witte tekstpagina. Een tintje af zet hem daar apart zonder dat er een
   tweede lijn bij hoeft; op de startpagina en de 404 grenst hij aan een donkere
   slotsectie en is het verschil toch al maximaal.
   ==================================================================== */
.site-foot {
  background: var(--grond-2); color: var(--tekst-mut);
  border-top: 1px solid var(--magenta);
  padding-block: clamp(2.6rem, 5vw, 3.6rem) 2.6rem;
  font-size: .92rem;
}
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.site-foot h2 {
  font-size: .71rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); margin-bottom: .85rem; font-weight: 700;
}
/* Zelfde linkkleur als overal op een lichte achtergrond (.faq__body, .nb__klein,
   .tekstpagina): #C40073, de toegankelijke variant van het merkmagenta. */
.site-foot a { color: var(--magenta-tekst); text-decoration: none; transition: color .18s var(--ease); }
.site-foot a:hover { color: var(--magenta-dp); text-decoration: underline; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
/* Geen wit plaatje meer: op een lichte voettekst is dat dubbelop. Het logo is
   donkere lijnkunst en staat er nu direct op - zelfde ingreep als in de kopbalk. */
.foot-brand__logo { display: inline-block; margin-bottom: 1.1rem; }
.foot-brand__logo img { width: clamp(180px, 44vw, 232px); height: auto; }
.foot-brand p { max-width: 36ch; line-height: 1.62; }
.foot-soc { display: flex; gap: .55rem; margin-top: 1.1rem; }
.foot-soc a {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-content: center;
  color: var(--tekst-mut); border: 1px solid var(--lijn);
  transition: border-color .18s var(--ease), background-color .18s var(--ease),
              color .18s var(--ease);
}
.foot-soc a:hover { border-color: var(--magenta); background: rgba(237,0,140,.08); color: var(--magenta-tekst); }
.foot-soc svg { width: 18px; height: 18px; }
.foot-bot {
  margin-top: 2.3rem; padding-top: 1.35rem; border-top: 1px solid var(--lijn);
  display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; justify-content: space-between;
  font-size: .83rem; color: var(--tekst-mut);
}
/* Onder 720px ligt de vaste belbalk (56px = 3.5rem) over de onderkant van de
   pagina. Zonder extra bodemruimte valt de laatste footerregel - de wettelijke
   18+-melding - erachter. Op pagina's zonder belbalk is het extra witruimte. */
@media (max-width: 719px) {
  .site-foot { padding-bottom: calc(2.6rem + 3.5rem + env(safe-area-inset-bottom)); }
}

/* =======================================================================
   MOBIELE BELBALK
   ==================================================================== */
/* De balk zelf is ONDOORZICHTIG. Stond hij op de doorschijnende scheidingskleur
   (rgba(255,255,255,.14)), dan werd de veilige zone onder de knoppen op een
   iPhone met thuisbalk een lichte strook waar de pagina doorheen schijnt -
   gemeten 34px hoog op 390x844, 430x932 en 360x640. */
.belbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--nacht);
  box-shadow: 0 -1px 0 rgba(255,255,255,.12), 0 -20px 40px -26px rgba(0,0,0,.9);
}
/* De veilige zone hoort BINNEN de knop: dan loopt het gekleurde vlak door tot
   de schermrand en is het hele vlak aanraakbaar, in plaats van een dode strook
   onder een knop die op 56px blijft steken. */
.belbalk a {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem .6rem calc(.95rem + env(safe-area-inset-bottom));
  min-height: 3.5rem; text-decoration: none; touch-action: manipulation;
  font-family: var(--f-display); font-weight: 700; font-size: .96rem;
  letter-spacing: -.012em; background: var(--nacht); color: #fff;
}
.belbalk a:first-child {
  background: var(--magenta-knop); box-shadow: inset 0 1px 0 rgba(255,255,255,.26);
}
/* Scheidingslijn als inzet-schaduw: telt niet mee in de hoogte en blijft staan
   als de veilige zone meegroeit. */
.belbalk a + a { box-shadow: inset 1px 0 0 rgba(255,255,255,.18); }
.belbalk a:active { filter: brightness(.88); }
.belbalk svg { width: 18px; height: 18px; }
@media (min-width: 720px) { .belbalk { display: none; } }

/* =======================================================================
   ÉÉN GEREGISSEERDE PAGINA-REVEAL
   ==================================================================== */
.reveal { opacity: 0; transform: translateY(16px); }
.js-on .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-on .reveal.is-in { opacity: 1; transform: none; }
.js-on .hero .reveal { transition-delay: calc(var(--i, 0) * 90ms); }
html:not(.js-on) .reveal { opacity: 1; transform: none; }

/* =======================================================================
   404
   ==================================================================== */
body.pagina-vult { min-height: 100vh; display: flex; flex-direction: column; }
body.pagina-vult > main { flex: 1; }
.mini {
  position: relative;
  min-height: 60vh; display: grid; place-content: center; text-align: center;
  gap: 1.1rem; justify-items: center; padding-block: 4rem;
}
.mini h1 { font-size: clamp(1.9rem, 5.4vw, 3rem); }
.mini p { color: var(--wit-mut); max-width: 46ch; }
.mini .eyebrow { color: var(--magenta-lt); justify-content: center; }
/* Losse pagina's: de kopbalk staat meteen in zijn witte staat, dus is er ruimte
   nodig onder de vaste balk. */
body.kop-vast { padding-top: var(--kop-h); }

/* =======================================================================
   MICROCOPY ONDER KNOPPEN
   De regel onder een knop wordt eerder gelezen dan de bodytekst.
   ==================================================================== */
.knop-micro { margin: .7rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--tekst-mut); }
.knop-micro--donker { color: var(--wit-dim); }

/* =======================================================================
   SCANBAARHEID - vetgedrukte kernwoorden

   Een vetgedrukt woord in een gedempte alinea is het enige aanknopingspunt
   voor iemand die scant in plaats van leest. Zonder eigen kleur valt dat
   accent weg in het grijs van de alinea; daarom krijgt elke <strong> in
   lopende tekst de volle inktkleur.
   ==================================================================== */
.sec__head p strong, .winkel__tekst strong, .zorg span strong,
.punten__txt span strong, .stappen span strong, .banken-anker__sub strong,
.uren__note strong { color: var(--ink); font-weight: 700; }
.sec--donker .sec__head p strong, .uitgelicht strong, .slot p strong { color: #fff; }
.hero__lead strong { color: #fff; font-weight: 700; }

/* =======================================================================
   VERGELIJKING - "geen afspraak" als argument in plaats van als feit
   ==================================================================== */
.vergelijk {
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
  border-top: 3px solid var(--ink); padding-top: 1.3rem;
}
.vergelijk h3 {
  font-size: clamp(1.45rem, 3.4vw, 2.1rem); letter-spacing: -.035em;
  margin-bottom: 1.15rem; color: var(--ink);
}
.vergelijk__paar { display: grid; gap: .85rem; }
@media (min-width: 760px) { .vergelijk__paar { grid-template-columns: 1fr 1fr; } }
.vergelijk__kant {
  border: 1px solid var(--lijn); border-radius: var(--r-md); padding: 1.2rem 1.35rem;
}
.vergelijk__kant--anders { background: var(--grond-2); }
/* Contrast doet hier het werk: de twee kanten mogen niet even zwaar wegen.
   "Bij ons" krijgt een magenta waas en een echte schaduw, zodat het oog daar
   als eerste landt - dat is het argument dat we willen laten hangen. */
.vergelijk__kant--ons {
  background: linear-gradient(150deg, rgba(237,0,140,.09), rgba(237,0,140,.02) 62%), var(--wit);
  box-shadow: inset 3px 0 0 var(--magenta), 0 18px 40px -26px rgba(237,0,140,.85);
  border-color: rgba(237,0,140,.34);
}
.sec--grijs .vergelijk__kant--anders { background: var(--wit); }
.vergelijk__label {
  display: block; font-family: var(--f-display); font-weight: 700; font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: .55rem;
}
.vergelijk__kant--anders .vergelijk__label { color: var(--tekst-mut); }
.vergelijk__kant--ons .vergelijk__label { color: var(--magenta-tekst); }
.vergelijk__kant p { margin: 0; }
.vergelijk__kant--anders p { color: var(--tekst-mut); font-size: 1rem; line-height: 1.6; }
.vergelijk__kant--ons p {
  color: var(--ink); font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.06rem, 2.2vw, 1.3rem); letter-spacing: -.028em; line-height: 1.4;
}

/* =======================================================================
   PRIJSANKER BOVEN DE BANKEN - het verschil is maar 4 euro
   ==================================================================== */
.banken-anker {
  margin: 0 0 clamp(1.5rem, 3vw, 2.1rem);
  border-left: 3px solid var(--magenta); padding-left: 1.15rem; max-width: 62ch;
}
.banken-anker__kop {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.05rem, 2.3vw, 1.28rem); letter-spacing: -.028em;
  color: var(--ink); margin-bottom: .5rem; line-height: 1.38;
}
.banken-anker__sub { margin: 0; color: var(--tekst-mut); font-size: 1rem; }

/* =======================================================================
   PRIJSTABEL - eigen scrolvlak, zodat de pagina zelf nooit meebeweegt
   ==================================================================== */
.tabel-scroll { overflow-x: auto; }
@media (max-width: 819px) { .tabel-scroll { overflow-x: visible; } }

/* =======================================================================
   EERSTE KEER? ZO WERKT HET
   ==================================================================== */
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; gap: .85rem; }
@media (min-width: 900px) { .stappen { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.stappen li {
  counter-increment: stap; position: relative;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-md);
  padding: 1.15rem 1.3rem 1.2rem 3.7rem;
}
.stappen li::before {
  content: counter(stap); position: absolute; left: 1.15rem; top: 1.1rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-content: center;
  background: var(--ink); color: #fff;
  font-family: var(--f-display); font-weight: 800; font-size: .82rem;
}
.stappen strong {
  display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.026em; color: var(--ink); margin-bottom: .16rem;
}
.stappen span { color: var(--tekst-mut); font-size: .95rem; line-height: 1.58; }

/* =======================================================================
   IN DE WINKEL - zonnecosmetica en wasparfum
   ==================================================================== */
.winkel { display: grid; gap: clamp(1.1rem, 3vw, 2.8rem); align-items: start; }
@media (min-width: 900px) { .winkel { grid-template-columns: minmax(0,.6fr) minmax(0,1.4fr); } }
.winkel__tekst p { font-size: 1.03rem; color: var(--tekst-mut); }
.winkel__tekst strong { color: var(--ink); }

/* =======================================================================
   CONTACT - bellen, mailen, langskomen (bewust geen formulier)
   ==================================================================== */
.contact-opties { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.contact-opties .btn { flex: 1 1 auto; }

/* =======================================================================
   SLOT - de 4,5 pal boven de laatste knop
   ==================================================================== */
.slot__score {
  display: flex; gap: .5rem; align-items: baseline; justify-content: center;
  max-width: 48ch; margin: 0; color: var(--wit-mut); font-size: .95rem; line-height: 1.55;
}
.slot__score a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.slot__micro {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  margin-top: .2rem; font-family: var(--f-display); font-weight: 600; font-size: .9rem;
}

/* =======================================================================
   NIEUWSBRIEF - vast blok in de pagina + popup.
   Eigen formulier rechtstreeks naar Klaviyo: geen extern script, geen cookies,
   geen cookiebanner.
   ==================================================================== */
.nb-blok { display: grid; gap: clamp(1.3rem, 3vw, 2.8rem); align-items: start; }
@media (min-width: 900px) { .nb-blok { grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); } }
.nb-blok h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.35rem); letter-spacing: -.034em;
  color: var(--ink); margin-bottom: .8rem;
}
.nb-blok__tekst p { color: var(--tekst-mut); margin-bottom: 0; }
.nb-blok .nb__form {
  background: var(--grond-2); border: 1px solid var(--lijn);
  border-radius: var(--r-lg); padding: clamp(1.2rem, 3vw, 1.75rem);
}
.sec--grijs .nb-blok .nb__form { background: var(--wit); }

.nb-veil {
  position: fixed; inset: 0; background: rgba(22,19,20,.55); z-index: 80;
  opacity: 0; transition: opacity .25s ease;
}
.nb-veil.is-aan { opacity: 1; }

/* De popup is een ONDERBREKING, geen sectie. Daarom staat hij als enige blok
   op de nacht-tint met een magenta gloed: het contrast doet het werk dat de
   tekst niet mag doen (er is geen actie te beloven die er niet is). De kop
   staat in kapitalen - zelfde woorden, meer volume. */
.nb {
  position: fixed; z-index: 81; color: #fff;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(237,0,140,.42), transparent 62%),
    radial-gradient(90% 90% at 0% 100%, rgba(237,0,140,.16), transparent 66%),
    linear-gradient(165deg, #241E20, var(--nacht) 72%);
  background-color: var(--ink-deep);
  border-radius: var(--r-lg); box-shadow: 0 30px 70px rgba(0,0,0,.5);
  padding: 1.9rem 1.7rem 1.5rem; width: min(430px, calc(100vw - 2rem));
  left: 50%; top: 50%; transform: translate(-50%,-46%); opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.nb.is-aan { opacity: 1; transform: translate(-50%,-50%); }

.nb__x {
  position: absolute; top: .45rem; right: .5rem; width: 44px; height: 44px;
  border: 0; background: none; font-size: 1.75rem; line-height: 1; cursor: pointer;
  color: var(--wit-mut); border-radius: 8px;
}
.nb__x:hover { color: #fff; background: rgba(255,255,255,.12); }

.nb__oog {
  font-family: var(--f-display); font-weight: 700; font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--magenta-lt);
  margin: 0 0 .55rem; display: flex; align-items: center; gap: .45rem;
}
.nb__zon { font-size: 1.05rem; line-height: 1; letter-spacing: 0; }
.nb__kop {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.45rem, 6vw, 1.72rem); line-height: 1.06;
  letter-spacing: -.022em; text-transform: uppercase;
  margin: 0 0 .55rem; color: #fff;
}
.nb__uitleg { font-size: .97rem; line-height: 1.5; margin: 0 0 1.1rem; color: var(--wit-mut); }

.nb__label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .35rem; color: var(--ink); }
.nb__veld {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
  min-height: 48px; padding: .8rem .9rem; border: 1.5px solid var(--lijn);
  border-radius: 9px; background: var(--wit); color: var(--tekst);
}
.nb__veld:focus-visible {
  outline: 3px solid var(--magenta-knop); outline-offset: 1px; border-color: var(--magenta-knop);
}
.nb__veld[aria-invalid="true"] { border-color: #B3001B; }

.nb__knop {
  margin-top: .8rem; width: 100%; min-height: 52px; font: inherit;
  font-family: var(--f-display); font-weight: 700; font-size: 1rem; cursor: pointer;
  color: #fff; background: var(--magenta-knop); border: 0; border-radius: 9px;
  transition: background-color .18s var(--ease);
}
.nb__knop:hover { background: var(--magenta-dp); }
.nb__knop[disabled] { opacity: .6; cursor: progress; }
.nb__knop:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.nb__klein { font-size: .76rem; line-height: 1.55; color: var(--tekst-mut); margin: .85rem 0 0; }
.nb__klein a { color: var(--magenta-tekst); }

/* De popup staat op de nacht-tint; de kleine tekst en het invoerveld moeten
   daar mee omklappen. Alleen binnen .nb - het vaste blok in de pagina blijft
   licht. */
.nb .nb__label { color: #fff; }
.nb .nb__veld {
  background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.32); color: var(--tekst);
}
.nb .nb__veld::placeholder { color: #6C6467; }
.nb .nb__veld:focus-visible { outline-color: #fff; border-color: #fff; }
.nb .nb__klein { color: var(--wit-mut); }
.nb .nb__klein a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nb .nb__knop { box-shadow: 0 16px 34px -14px rgba(237,0,140,.95); }
.nb .nb__knop:focus-visible { outline-color: #fff; }
.nb .nb__melding { color: var(--wit-mut); }
.nb .nb__melding.is-goed { color: #fff; }
.nb .nb__melding.is-fout { color: #FFB3BD; }
/* Opmaak voor een los 18+-blokje. Wordt nu niet gebruikt: die zin staat in de
   kleine letters zelf ("Aanmelden kan vanaf 18 jaar"). */
.nb__melding { font-size: .88rem; line-height: 1.5; margin: .75rem 0 0; min-height: 1px; }
.nb__melding.is-fout { color: #B3001B; }
.nb__melding.is-goed { color: var(--ink); font-weight: 700; }

/* Verborgen veld: echt onzichtbaar, maar niet display:none */
.nb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Mobiel: paneel onderin, nooit hoger dan het scherm */
@media (max-width: 640px) {
  .nb {
    top: auto; bottom: 0; left: 0; transform: translateY(100%);
    width: 100%; max-height: 78svh; overflow-y: auto;
    border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 1.5rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
  }
  .nb.is-aan { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .nb, .nb-veil { transition: none; } }

/* =======================================================================
   LOSSE TEKSTPAGINA (privacyverklaring)
   ==================================================================== */
.tekstpagina { padding-block: clamp(2.4rem, 6vw, 4.5rem); }
.tekstpagina__in { max-width: 68ch; }
.tekstpagina h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); margin-bottom: .9rem; }
.tekstpagina h2 {
  font-size: clamp(1.25rem, 2.8vw, 1.6rem); letter-spacing: -.03em; color: var(--ink);
  margin: 2.3rem 0 .8rem; padding-top: 1.1rem; border-top: 3px solid var(--ink);
}
.tekstpagina h3 {
  font-size: 1.08rem; letter-spacing: -.024em; color: var(--ink); margin: 1.7rem 0 .5rem;
}
.tekstpagina p, .tekstpagina li { color: var(--tekst-mut); }
.tekstpagina strong { color: var(--ink); }
.tekstpagina a { color: var(--magenta-tekst); }
.tekstpagina ul { margin: 0 0 1.1em; padding-left: 1.15rem; display: grid; gap: .4rem; }
.tekstpagina__datum { font-size: .9rem; color: var(--tekst-mut); margin-bottom: 2rem; }
.tekstpagina__kort {
  background: var(--grond-2); border-left: 3px solid var(--magenta);
  border-radius: var(--r-sm); padding: 1.2rem 1.35rem; margin-bottom: 2rem;
}
.tekstpagina__kort p:last-child { margin-bottom: 0; }
.tabel-tekst { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; }
.tabel-tekst th, .tabel-tekst td {
  text-align: left; padding: .8rem .7rem; border-top: 1px solid var(--lijn);
  font-size: .95rem; line-height: 1.55; vertical-align: top;
}
.tabel-tekst thead th {
  border-top: 0; border-bottom: 2px solid var(--ink); color: var(--ink);
  font-family: var(--f-display); font-weight: 700; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.tabel-tekst tbody th { color: var(--ink); font-weight: 700; width: 38%; }
.tabel-tekst tbody td { color: var(--tekst-mut); }
/* Nog in te vullen gegevens - bewust opvallend, mag niet live blijven staan */
.invul {
  background: #FFF3B0; color: #6B4E00; font-weight: 700; padding: .1rem .35rem;
  border-radius: 4px; border: 1px dashed #B58900;
}

/* =======================================================================
   AANRAAKSCHERMEN - geen plakkende hover
   Op touch blijft een :hover-staat na een tik "hangen" tot je ergens anders
   tikt. Hieronder worden ALLE sier-hovers uitgezet zodra het apparaat niet
   echt kan hoveren. Focus-stijlen blijven bewust ongemoeid.
   ==================================================================== */
@media (hover: none) {
  .btn:hover { transform: none; }
  .btn--primary:hover { background: var(--magenta-knop); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 38px -14px rgba(237,0,140,.85); }
  .btn--ghost:hover { border-color: rgba(255,255,255,.46); background: rgba(11,5,10,.62); }
  .btn--outline:hover { background: transparent; color: var(--ink); }
  .head-call:hover { background: var(--magenta-knop); transform: none; }
  .head-nav a:hover { color: var(--tekst-mut); }
  .head-nav a:hover::after { right: 100%; }
  .bank:hover { border-color: var(--lijn); transform: none; box-shadow: none; }
  .tarieven tbody tr:hover th, .tarieven tbody tr:hover td { background: none; }
  .tarieven tbody tr:hover td:first-of-type { background: rgba(237,0,140,.06); }
  .faq summary:hover { color: var(--ink); }
  .nap__waarde a:hover { border-color: var(--lijn); }
  .kaart__facade:hover em { border-color: rgba(255,255,255,.42); background: none; }
  .site-foot a:hover { color: var(--magenta-tekst); text-decoration: none; }
  .foot-soc a:hover { border-color: var(--lijn); background: none; color: var(--tekst-mut); }
  .score:hover { border-color: rgba(255,255,255,.34); background: rgba(11,5,10,.42); }
  .nb__knop:hover { background: var(--magenta-knop); }
  .nb__x:hover { color: var(--wit-mut); background: none; }
  .belbalk a:hover { filter: none; }
}
@media (hover: none) and (max-width: 819px) {
  .tarieven tbody tr:hover td:first-of-type { background: rgba(237,0,140,.07) !important; }
}

/* De ghost-knop is ontworpen voor bovenop de foto. Op de bijna-zwarte slot- en
   404-secties valt hij weg; daar krijgt hij een echte rand en een lichte vulling
   zodat bellen net zo zichtbaar blijft als de routeknop. */
.slot__cta .btn--ghost, .mini .btn--ghost {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.58);
}
.slot__cta .btn--ghost:hover, .mini .btn--ghost:hover {
  background: rgba(255,255,255,.17); border-color: #fff;
}
@media (hover: none) {
  .slot__cta .btn--ghost:hover, .mini .btn--ghost:hover {
    background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.58);
  }
}