@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root{--grond:#16161A;--vlak:#22222A;--wit:#FFFFFF;--zacht:#B9B9C2;--dof:#7E7E8A;
  --rood:#ef4148;--roodvlak:#ec1c24;--lijn:rgba(255,255,255,.14);--lijn2:rgba(255,255,255,.26);
  --r:12px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--grond);color:var(--wit);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
.wrap{max-width:1272px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--rood);outline-offset:3px}
[hidden]{display:none!important}
.alleen-voorlezer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Tikdoel ≥ 24×24 px (WCAG 2.5.8). Een tekstlink is van zichzelf ~19 px hoog;
   deze regel geeft elke losse link in een lijst of tabel genoeg vlees. */
footer a,.menu .mvoet a,.kruimel a,table a,.tabelnoot a,.voetstreep a,
.lees-lang p a,.form .voet a{display:inline-flex;align-items:center;min-height:24px}
.overslaan{position:absolute;left:-9999px;top:0;z-index:60;background:var(--roodvlak);
  color:#000;padding:12px 20px;border-radius:0 0 var(--r) 0;font-weight:700}
.overslaan:focus{left:0}

/* ── claimbalk: het eerste wat je leest ───────────────────────────────
   De referentie heeft dit niet; de bestaande LED-site wel, en dat was
   precies wat hier ontbrak. Vier dingen die waar zijn en die je anders
   pas drie schermen lager tegenkomt. */
.balk{background:var(--vlak);border-bottom:1px solid var(--lijn);position:relative;z-index:25}
.balk .in{display:flex;gap:22px;align-items:center;justify-content:center;
  padding:10px 24px;flex-wrap:wrap}
.balk i{display:flex;align-items:center;gap:7px;font-style:normal;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#C8C8D2;white-space:nowrap}
.balk i s{width:6px;height:6px;border-radius:50%;background:var(--roodvlak);
  text-decoration:none;flex:0 0 6px}
.balk i b{font-weight:700;color:var(--wit)}

/* ── kop: woordmerk gecentreerd (uit de referentie), met daaronder een
      smalle menurij. De hamburger blijft voor het volledige menu. ───── */
.top{position:absolute;top:0;left:0;right:0;z-index:20;padding:22px 30px 0}
/* Een donker verloop achter de hele kopbalk. Zonder dit staat het wit van de
   belknop, het woordmerk en het menu rechtstreeks op de hero-foto, en die
   verschilt per pagina: gemeten haalde /contact/ op desktop 3,51 en /verhuur/
   op mobiel 4,26, waar 4,5 de norm is. Een schaduw op de letter helpt het oog
   maar telt niet mee in die norm, dus de ondergrond zelf moet donkerder.
   Alleen op de foto-koppen, niet op de vastgeplakte balk (die heeft al een
   eigen grond). */
.top:not(.vast)::before{content:"";position:absolute;inset:-22px 0 auto 0;height:190px;
  pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,rgba(8,8,10,.62) 0%,rgba(8,8,10,.40) 46%,rgba(8,8,10,0) 100%)}
.top.vast{position:sticky;background:var(--grond);border-bottom:1px solid var(--lijn)}
.toprij{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.topacties{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.navrij{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;
  margin-top:16px;padding-bottom:14px}
.navrij a{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#D6D6DE;padding:6px 0;min-height:24px;display:inline-flex;align-items:center;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.navrij a:hover,.navrij a[aria-current="page"]{color:var(--wit);border-bottom-color:var(--roodvlak)}
.knopmini{display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:9px 18px;border-radius:999px;background:var(--roodvlak);color:#000;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  transition:background-color .2s,transform .2s}
.knopmini:hover{background:#ff2f36}
.knopmini:active{transform:scale(.96)}

/* ── zwevende aanvraagknop (desktop) ─────────────────────────────────── */
.zweef{position:fixed;right:24px;bottom:24px;z-index:30;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,visibility .3s,transform .3s,background-color .2s;
  display:inline-flex;align-items:center;gap:10px;min-height:52px;
  padding:14px 24px;border-radius:999px;background:var(--roodvlak);color:#000;
  font-size:15px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:background-color .2s,transform .2s}
.zweef.aan{opacity:1;visibility:visible;transform:none}
.zweef.aan:hover{background:#ff2f36;transform:translateY(-2px)}

/* ── WhatsApp, zwevend ────────────────────────────────────────────────
   De zustersite heeft zes ingangen op de startpagina, wij hadden er één.
   Rond icoon, dus hij vecht niet met de offerteknop om aandacht: dit is
   een tweede weg naar hetzelfde gesprek, geen tweede aanbod.
   Anders dan .zweef staat hij er meteen — iemand die met een vraag op de
   pagina komt hoeft niet eerst langs de hero te scrollen. */
.wapp{position:fixed;right:24px;bottom:88px;z-index:30;
  width:54px;height:54px;border-radius:50%;background:#25D366;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s}
.wapp svg{width:29px;height:29px;fill:#08281a}
.wapp:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 12px 28px rgba(0,0,0,.5)}
.wapp:focus-visible{outline:3px solid var(--wit);outline-offset:3px}
/* In de voet staan de contactgegevens zelf; daar hoeft geen knop overheen. */
.wapp.weg{opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s,visibility .3s,transform .3s}

/* ── vaste balk onderaan (telefoon): bellen én aanvragen ─────────────── */
.mbalk{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;
  grid-template-columns:1fr 1fr;border-top:1px solid var(--lijn2);
  background:rgba(22,22,26,.97)}
.mbalk a{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;font-size:15px;font-weight:700}
.mbalk a:first-child{color:var(--wit);border-right:1px solid var(--lijn)}
.mbalk a:last-child{background:var(--roodvlak);color:#000}
.mbalk svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.merk{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:7px}
.merk .merkteken{display:block;width:158px;height:auto}
.merk span{font-size:20px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
/* Op een telefoon valt het nummer weg en blijft alleen het pictogram staan;
   het tikdoel moet dan zelf 44 px blijven (WCAG 2.5.8 vraagt 24, Apple 44). */
/* De belknop is een gewone regel in de kop, geen tweede knop. Hij stond als
   lichte pil mét rand, een kloppende ring en een schuddend hoorntje tegenover
   de rode knop rechts: twee dingen die tegelijk om aandacht vroegen, en het
   enige lichte vlak in een verder vlakke, donkere kop. Nu dezelfde toon als
   het menu eronder, zodat de rode knop rechts het enige accent blijft.
   (20-09, Lenny: "die belknop linksboven".) */
.top .bel{grid-column:1;justify-self:start;display:inline-flex;align-items:center;
  gap:9px;font-size:14px;font-weight:600;letter-spacing:.01em;
  min-height:44px;min-width:44px;color:var(--wit);
  padding:9px 4px;border-radius:8px;background:none;border:0;
  /* Zonder pil hangt de leesbaarheid af van de hero-foto eronder, en die
     verschilt per pagina. Op mobiel mat ik 4,39 waar 4,5 de norm is. Een
     zachte schaduw tilt hem overal boven de norm zonder dat er weer een
     vlak omheen komt te staan. */
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  transition:color .2s,opacity .2s}
.bel:hover{color:var(--roodvlak)}
.bel:hover svg{stroke:var(--roodvlak)}
.bel:focus-visible{outline:2px solid var(--roodvlak);outline-offset:3px}
.bel:active{opacity:.7}
.top .bel svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
/* 01-10 (feedback Gabriel, punt 3): logo linksboven, de menurij op de plek waar het logo stond,
   het telefoonnummer uit de kop. Eén rij in plaats van twee. */
.toprij{grid-template-columns:auto 1fr auto;gap:30px}
.toprij .merk{grid-column:1;align-items:flex-start}
.toprij .navrij{grid-column:2;margin-top:0;padding-bottom:0;flex-wrap:nowrap;gap:26px;white-space:nowrap}
.top{padding-bottom:16px}
@media(max-width:1240px){.toprij .navrij{display:none}}
/* 01-10 · uitklaplijsten in de kopbalk (alleen desktop: onder 1240 px staat de menurij uit) */
.nd{position:relative;display:inline-flex}
.nd>a{gap:7px}
.ndpijl{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.ndp{position:absolute;top:100%;left:-18px;min-width:230px;padding:10px;margin-top:6px;
  background:#1c1c22;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);
  display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-4px);transform-origin:top left;
  transition:opacity .16s ease-out,transform .16s cubic-bezier(.23,1,.32,1),visibility .16s}
.ndp::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.toprij .navrij .ndp a{font-size:14.5px;font-weight:500;letter-spacing:0;text-transform:none;color:#E4E4EA;
  padding:10px 12px;min-height:40px;border:0;border-radius:8px;white-space:nowrap;display:flex}
.toprij .navrij .ndp a:hover,.toprij .navrij .ndp a:focus-visible{background:rgba(255,255,255,.08);color:#fff;border:0}
.nd:hover .ndp,.nd:focus-within .ndp{opacity:1;visibility:visible;transform:none}
.nd:hover .ndpijl,.nd:focus-within .ndpijl{transform:translateY(1px) rotate(225deg)}
/* 01-10 · groot menu, versie C met kopjes */
.menu .mtop{grid-template-columns:auto 1fr auto}
.menu .mtop .merk{grid-column:1;align-items:flex-start}
.menu .mraster{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:48px;border-top:1px solid var(--lijn);padding-top:38px}
.menu .mraster .mgroep{border:0;padding:0}
.menu .mraster .mgroep a{display:block;font-size:clamp(20px,2vw,27px);font-weight:600;letter-spacing:-.02em;padding:8px 0;min-height:44px}
.menu .mraster .mgroep a:hover{color:var(--rood)}
.mfoto{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;align-self:start}
.mfoto img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.mfoto span{position:absolute;left:0;right:0;bottom:0;padding:64px 24px 20px;font-size:21px;font-weight:600;
  background:linear-gradient(to top,rgba(12,12,16,.92),rgba(12,12,16,0))}
.mfoto span i{font-style:normal;color:var(--rood)}
.mfoto span b{display:block;font-size:14.5px;font-weight:500;color:#D6D6DE;margin-top:2px}
@media(hover:hover) and (pointer:fine){.mfoto:hover img{transform:scale(1.035)}}
.menu .mvoet{align-items:center;margin-top:40px;border-top:1px solid var(--lijn);padding-top:28px;font-size:16px}
@media(max-width:900px){.menu .mraster{grid-template-columns:1fr 1fr;gap:30px 24px}.mfoto{grid-column:1/-1;aspect-ratio:16/9}
  .menu .mraster .mgroep a{font-size:19px;padding:6px 0}}
/* 01-10 · pakketkaart met scenariofoto (voorstel 1) */
.pk{background:#1c1c22}
.pk-foto{aspect-ratio:4/3;background:#000}
.pk h3{font-size:28px;font-weight:700}
.pk .bedrag{font-variant-numeric:tabular-nums}
.ham{grid-column:3;justify-self:end;display:grid;gap:5px;padding:12px;
  background:none;border:0;cursor:pointer;min-height:44px}
.ham i{display:block;width:30px;height:2px;background:var(--wit);transition:transform .3s,opacity .2s}
.ham[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham[aria-expanded="true"] i:nth-child(2){opacity:0}
.ham[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── overlaymenu ──────────────────────────────────────────────────── */
.menu{position:fixed;inset:0;z-index:40;background:var(--grond);
  display:grid;grid-template-rows:auto 1fr;opacity:0;visibility:hidden;
  transition:opacity .34s cubic-bezier(.22,.61,.36,1),visibility .34s}
.menu.open{opacity:1;visibility:visible}
.menu .mtop{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:26px 30px}
.menu .mlijst{overflow-y:auto;padding:10px 0 60px}
.menu .mgroep{border-top:1px solid var(--lijn);padding:26px 0}
.menu .mgroep:last-child{border-bottom:1px solid var(--lijn)}
.menu .mlabel{display:block;color:var(--rood);font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.menu .mrij{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 26px}
.menu .mrij a{font-size:clamp(20px,2.6vw,29px);font-weight:600;letter-spacing:-.02em;
  padding:6px 0;display:flex;align-items:center;gap:12px;min-height:44px}
.menu .mrij a em{font-style:normal;color:var(--dof);font-size:14px;font-weight:400}
.menu .mrij a:hover{color:var(--rood)}
.menu .mvoet{display:flex;gap:26px;flex-wrap:wrap;padding:26px 0 0;color:var(--zacht);font-size:15px}
.menu .mvoet a:hover{color:var(--rood)}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{position:relative;height:min(calc(100svh - 40px),940px);overflow:hidden;background:#000}
.hero>.bz{position:absolute;inset:0;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .sluier{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,12,.86) 0%,rgba(10,10,12,.28) 44%,rgba(10,10,12,.44) 100%)}
.hero .onder{position:absolute;left:0;right:0;bottom:0;padding:0 30px 54px}
.hero h1{font-size:clamp(46px,9.4vw,136px);line-height:.94;letter-spacing:-.035em;
  text-transform:uppercase;font-weight:700;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--rood)}
/* 28-09: de homepagekop is een belofte in plaats van twee woorden, dus kleiner */
.hero h1.lang{font-size:clamp(34px,5.2vw,78px);line-height:1;max-width:14ch}
.herolead{color:rgba(255,255,255,.86);font-size:clamp(16px,1.5vw,19px);max-width:52ch;margin-top:18px}
/* toestemmingsbalk voor meten: alleen als GA4_ID gevuld is. Accepteren en weigeren even groot. */
.toestemming{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:720px;margin:0 auto;
  background:var(--vlak);border:1px solid var(--lijn2);border-radius:var(--r);padding:18px 20px;
  display:flex;gap:18px;align-items:center;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.toestemming p{font-size:14.5px;color:var(--zacht);flex:1}
.toestemming a{color:#fff;text-decoration:underline}
.toestemming .tk{display:flex;gap:10px;flex:0 0 auto}
.toestemming button{min-height:44px;padding:0 18px;border-radius:999px;font:inherit;font-weight:600;
  cursor:pointer;background:transparent;color:#fff;border:1px solid var(--lijn2)}
@media(max-width:560px){.toestemming{flex-direction:column;align-items:stretch;bottom:70px}
  .toestemming .tk button{flex:1}}
@media(min-width:761px){.artikelen.twee{grid-template-columns:repeat(2,1fr)}}
.grootbeeld{margin:0}
.grootbeeld img{width:100%;height:auto;border-radius:var(--r);display:block}
.grootbeeld figcaption{color:var(--dof);font-size:13.5px;margin-top:10px;text-align:center}
/* 28-09: kop links van het scherm in de hero houden (30 m²-pagina) */
@media(min-width:900px){.subhero h1.smal{max-width:11ch}}
/* pakket 5 · Mainstage: maatwerk tot 100 m² met een schuif (28-09) */
.mainstage{grid-column:1/-1;background:var(--vlak);border-radius:var(--r);overflow:hidden;
  display:grid;grid-template-columns:1.15fr 1fr;--rood:#f0545a}
.mainstage .bz{min-height:320px;position:relative}
.mainstage .bz img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mainstage .ms-in{padding:30px 32px 32px;display:flex;flex-direction:column;gap:10px;position:relative}
.mainstage .tip{align-self:flex-start;background:var(--roodvlak);color:#000;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:999px}
.mainstage h3{font-size:clamp(28px,3vw,38px);letter-spacing:-.02em}
.mainstage .maat{color:#fff;font-weight:600}
.mainstage .ms-uitleg{color:var(--zacht);font-size:15.5px}
.mainstage .ms-label{margin-top:8px;font-size:14px;color:var(--zacht)}
.mainstage .ms-label b{color:#fff;font-size:20px;margin-left:4px}
.ms-uit{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:6px 0 10px}
.ms-uit dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rood);font-weight:700}
.ms-uit dd{color:#fff;font-size:15.5px;margin:4px 0 0}
.mainstage .pil{align-self:flex-start}
@media(max-width:860px){.mainstage{grid-template-columns:1fr}.mainstage .bz{min-height:220px}
  .ms-uit{grid-template-columns:1fr}.mainstage .pil{align-self:stretch;justify-content:center}}
.grootrij{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.grootrij figure{margin:0}.grootrij img{width:100%;height:auto;border-radius:var(--r);display:block}
.grootrij figcaption{color:var(--dof);font-size:13.5px;margin-top:8px;text-align:center}
@media(max-width:640px){.grootrij{grid-template-columns:1fr}}
.ms-beelden .ms-dia{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s ease}
.ms-beelden .ms-dia.aan{opacity:1}
.ms-beelden .ms-dia figcaption{position:absolute;left:14px;bottom:14px;background:rgba(10,10,12,.72);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
@media(prefers-reduced-motion:reduce){.ms-beelden .ms-dia{transition:none}}
/* kort antwoord boven een artikel, en de overgang naar de aanvraag eronder */
.kort{--rood:#f0545a;background:var(--vlak);border-left:3px solid var(--rood);border-radius:var(--r);
  padding:22px 26px;margin:0 0 34px}
.kort .mrk{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rood);margin-bottom:8px}
.lees-lang .kort p{color:var(--wit);margin:0}
.lees-lang .tabelvak{margin:8px 0 26px}
.lees-lang .tabelvak a,.lees-lang .doorvraag a{color:var(--rood)}
.lees-lang .doorvraag{margin-top:40px;padding-top:24px;border-top:1px solid var(--lijn)}
.vlag{display:inline-block;background:var(--roodvlak);color:#000;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;margin-bottom:20px}

/* ── subhero: dezelfde taal, lager, met kruimelpad ────────────────── */
.subhero{position:relative;overflow:hidden;background:#000;
  min-height:min(64svh,560px);display:flex;align-items:flex-end}
.subhero>.bz{position:absolute;inset:0;overflow:hidden}
.subhero img{width:100%;height:100%;object-fit:cover}
.subhero .sluier{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,12,.5) 0%,rgba(10,10,12,.18) 55%,rgba(10,10,12,0) 78%),
    linear-gradient(to top,rgba(10,10,12,.9) 0%,rgba(10,10,12,.42) 52%,rgba(10,10,12,.5) 100%)}
/* 01-10: kruimelpad en lead vallen bij foto's met een brandend scherm op het lichtste punt. */
.subhero .kruimel,.subhero .lead{text-shadow:0 1px 14px rgba(0,0,0,.7),0 0 2px rgba(0,0,0,.6)}
@media(max-width:700px){.subhero .sluier{background:linear-gradient(to top,rgba(10,10,12,.92) 0%,rgba(10,10,12,.66) 55%,rgba(10,10,12,.55) 100%)}}
.subhero .onder{position:relative;width:100%;padding:190px 0 52px}
.subhero h1{font-size:clamp(34px,6.4vw,84px);line-height:.98;letter-spacing:-.035em;
  text-transform:uppercase;font-weight:700;max-width:17ch}
.subhero h1 em{font-style:normal;color:var(--rood)}
.subhero .lead{color:var(--zacht);font-size:17.5px;max-width:58ch;margin-top:20px}
.kruimel{display:flex;gap:10px;flex-wrap:wrap;color:var(--zacht);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:18px}
.kruimel a:hover{color:var(--rood)}
.kruimel s{text-decoration:none;color:var(--dof)}

/* ── gecentreerde uitspraak ───────────────────────────────────────── */
.uitspraak{padding:110px 0}
.uitspraak p{font-size:clamp(21px,2.6vw,37px);line-height:1.28;font-weight:600;
  letter-spacing:-.018em;text-align:center;max-width:22ch;margin:0 auto}
.uitspraak p em{font-style:normal;color:var(--rood)}

/* ── ingezette beeldband met kapitalenkop eroverheen ──────────────── */
.band{padding:0 0 110px}
.band .in{position:relative;max-width:1272px;margin:0 auto;padding:0 28px}
.band .bz{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:16/9;background:#000}
.band img{width:100%;height:100%;object-fit:cover}
.band .over{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:24px;
  background:linear-gradient(to bottom,rgba(10,10,12,.34),rgba(10,10,12,.66))}
.bandlead{max-width:56ch;text-align:center;color:var(--wit);font-size:clamp(15px,1.5vw,18.5px);
  line-height:1.5;text-shadow:0 1px 14px rgba(10,10,12,.85)}
.band h2{font-size:clamp(24px,4.6vw,66px);text-transform:uppercase;text-align:center;
  letter-spacing:-.025em;line-height:1.02;font-weight:700}

/* ── sectiekop ────────────────────────────────────────────────────── */
.sec{padding:0 0 110px}
.sec.top0{padding-top:96px}
.sechead{text-align:center;max-width:56ch;margin:0 auto 46px}
.sechead.links{text-align:left;margin-left:0}
.sechead h2{font-size:clamp(26px,3.3vw,37px);letter-spacing:-.02em}
.sechead p{color:var(--zacht);font-size:17px;margin-top:14px}
.label{display:block;color:var(--rood);font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}

/* ── kaartenrij: middelste groot, flanken klein ───────────────────── */
/* Doorlopende voorbeeldenrij. De kaarten staan twee keer in het spoor, dus
   op het moment dat de eerste set precies is weggeschoven staat de tweede op
   dezelfde plek en begint de lus opnieuw, zonder sprong. Alleen transform:
   de rij herberekent geen layout. Stilstaan bij aanwijzen of focus, en helemaal
   uit als de bezoeker beweging heeft uitgezet. */
.rail{overflow:hidden;padding:30px 0 34px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.railspoor{display:flex;gap:22px;width:max-content;
  animation:railloop calc(var(--aantal,7) * 7s) linear infinite}
.rail:hover .railspoor,.rail:focus-within .railspoor{animation-play-state:paused}
@keyframes railloop{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 11px))}}
.kaart{position:relative;flex:0 0 460px;max-width:78vw;
  border-radius:var(--r);overflow:hidden;background:var(--vlak);
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.rail:hover .kaart:hover{transform:translateY(-6px)}
.kaart .bz{aspect-ratio:16/9;overflow:hidden}
.kaart img{width:100%;height:100%;object-fit:cover}
.kaart figcaption{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  background:rgba(22,22,26,.82);color:var(--wit);padding:10px 18px;border-radius:999px;
  font-size:14.5px;font-weight:500;white-space:nowrap}
.railvoet{display:flex;justify-content:center;align-items:center;gap:14px}
/* 01-10: de bezoeker schuift zelf. Zodra het script draait (klasse rail-zelf) staat de
   CSS-lus uit en is de rij een gewone schuifbare strook: slepen, vegen, pijlen, toetsen.
   Het script schuift hem rustig door zolang niemand eraan zit. */
.rail.rail-zelf{overflow-x:auto;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.rail.rail-zelf::-webkit-scrollbar{display:none}
.rail.rail-zelf .railspoor{animation:none}
.rail.rail-zelf.sleept{cursor:grabbing}
.rail.rail-zelf.sleept img{pointer-events:none}
.railpijl{width:48px;height:48px;border-radius:50%;border:1px solid var(--lijn-d,rgba(255,255,255,.28));
  background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer;
  transition:background-color .2s,transform .15s}
.railpijl:hover{background:rgba(255,255,255,.1)}
.railpijl:active{transform:scale(.94)}

/* ── omlijnde pilknop ─────────────────────────────────────────────── */
.pil{display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:13px 30px;border-radius:999px;font-size:16px;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--rood);color:var(--rood);cursor:pointer;
  background:none;border:0;font-family:inherit;
  transition:transform .2s cubic-bezier(.22,.61,.36,1),background-color .25s ease,color .25s ease}
.pil:hover{background:var(--roodvlak);color:#000;box-shadow:inset 0 0 0 1px var(--roodvlak)}
.pil:active{transform:scale(.96)}
.pil.vol{background:var(--roodvlak);color:#000;box-shadow:none}
.pil.vol:hover{background:#ff2f36}
.pil.stil{box-shadow:inset 0 0 0 1px var(--lijn2);color:var(--wit)}
.pil.stil:hover{background:rgba(255,255,255,.08);color:var(--wit);box-shadow:inset 0 0 0 1px var(--lijn2)}
.knoppen{display:flex;gap:12px;flex-wrap:wrap}
.knoppen.mid{justify-content:center}

/* ── kolommen: wat erbij zit ──────────────────────────────────────── */

/* ── kaarten ──────────────────────────────────────────────────────────────
   Eén vorm voor de hele site. Het vlak is lichter dan de grond eronder,
   anders is het geen kaart maar een stuk tekst met ruimte eromheen. */
.kgrid{display:grid;grid-template-columns:repeat(var(--kk-kol,4),1fr);gap:16px;margin-top:18px}
@media(max-width:1100px){.kgrid{grid-template-columns:repeat(min(var(--kk-kol,4),3),1fr)}}
@media(max-width:820px){.kgrid{grid-template-columns:repeat(min(var(--kk-kol,4),2),1fr)}}
@media(max-width:520px){.kgrid{grid-template-columns:1fr}}
.kgrid.breed{grid-template-columns:repeat(min(var(--kk-kol,3),3),1fr)}
.kk{position:relative;display:block;background:var(--vlak);border:1px solid var(--lijn);
  border-radius:var(--r);padding:22px 20px 24px;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),border-color .25s,background-color .25s}
.kk:hover{transform:translateY(-4px);border-color:var(--lijn2)}
.kk svg{width:20px;height:20px;fill:none;stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;display:block;margin-bottom:13px}
.kk.in svg{stroke:var(--roodvlak)}
.kk.meer svg,.kk.los svg{stroke:var(--zacht)}
.kk b{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.kk p{color:var(--zacht);font-size:15px;margin-top:7px;line-height:1.5}
.kk.klik{color:var(--wit)}
.kk.klik .pijl{display:inline-block;margin-top:14px;color:var(--rood);transition:transform .2s}
.kk.klik:hover{background:#292933}
.kk.klik:hover .pijl{transform:translateX(5px)}
.kmerk{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin:34px 0 0;color:var(--zacht)}
.kmerk s{width:12px;height:12px;border-radius:3px;text-decoration:none;flex:0 0 12px;
  background:var(--roodvlak)}
.kmerk.meer s{background:none;box-shadow:inset 0 0 0 2px var(--dof)}
/* de grens die uit de kolommen is gehaald, staat er nu onder als kleine regel */
.grensregel{color:var(--dof);font-size:14.5px;margin-top:22px;max-width:80ch}
.grensregel b{color:var(--zacht);font-weight:600}

/* knoppen in de hero — de referentie heeft ze niet, een verhuursite wel */
.heroknoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ── schermvullende uitspraak op textuur ──────────────────────────── */
.breed{position:relative;overflow:hidden;min-height:min(72svh,620px);
  display:grid;place-items:center;background:#000;margin-bottom:110px}
.breed .bz{position:absolute;inset:0;overflow:hidden}
.breed img{width:100%;height:100%;object-fit:cover;opacity:.34}
.breed .bz::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 50%,rgba(10,10,12,.62),rgba(10,10,12,.20) 70%)}
.breed .in{position:relative;text-align:center;padding:60px 30px;max-width:860px}
.breed h2{font-size:clamp(26px,4.4vw,62px);line-height:1.06;letter-spacing:-.03em;
  text-transform:uppercase;font-weight:700}
.breed p{color:var(--zacht);margin-top:20px;font-size:17px;max-width:50ch;
  margin-left:auto;margin-right:auto}

/* ── genummerde stappen: alleen waar er écht een volgorde is ──────── */
.stappen{counter-reset:st;display:grid;gap:0;border-top:1px solid var(--lijn)}
.stap{display:grid;grid-template-columns:84px 1fr 1.1fr;gap:26px;padding:28px 0;
  border-bottom:1px solid var(--lijn);align-items:baseline}
.stap::before{counter-increment:st;content:counter(st,decimal-leading-zero);
  font-size:30px;font-weight:700;color:var(--rood);line-height:1;letter-spacing:-.02em}
.stap h3{font-size:clamp(19px,2vw,25px)}
.stap p{color:var(--zacht);font-size:16px}

/* ── haarlijnrijen zonder nummer (geen volgorde) ──────────────────── */

/* ── prijskaarten ─────────────────────────────────────────────────── */
.prijzen{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.prijzen{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.pk.pk-opmaat .bedrag{font-size:26px;padding-top:6px}
.prijzen .pk .pil{white-space:nowrap;font-size:15px;padding-left:14px;padding-right:14px}
#opmaat{scroll-margin-top:110px}
.pk{background:var(--vlak);border-radius:var(--r);padding:28px 26px 30px;
  --rood:#f0545a;--dof:#8E8E9A;position:relative;display:flex;flex-direction:column;height:100%}
.pk.aanrader{box-shadow:inset 0 0 0 1px var(--roodvlak)}
.pk .tip{position:absolute;top:-11px;left:26px;background:var(--roodvlak);color:#000;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px}
.pk h3{font-size:25px;letter-spacing:-.02em}
.pk .maat{color:var(--zacht);font-size:15px;margin-top:2px}
.pk .bedrag{font-size:33px;font-weight:700;letter-spacing:-.03em;margin:16px 0 2px}
.pk .bedrag s{text-decoration:none;font-size:15px;font-weight:600;color:var(--zacht)}
.pk .excl{color:var(--dof);font-size:13px}
.pk ul{list-style:none;margin:20px 0 22px;padding:16px 0 0;display:grid;gap:10px;
  border-top:1px solid var(--lijn)}
.pk li{font-size:15px;color:var(--zacht);display:flex;gap:10px;align-items:flex-start}
.pk li s{text-decoration:none;color:var(--rood);flex:0 0 auto;font-weight:700}
.pk .pil{margin-top:auto;justify-content:center}
/* 30-09 Najaarsactie + pakketfoto (keuze Lenny: weergave 3, kortingsstrook) */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
s.was{text-decoration:line-through;text-decoration-color:var(--rood);color:var(--dof);font-weight:500}
.pk.pk-met-foto{padding-top:0}
.pk-foto{margin:0 -26px 20px;aspect-ratio:1/1;overflow:hidden;background:#0e0e11}
.pk-met-foto>.pk-foto:first-child{border-radius:var(--r) var(--r) 0 0}
.pk-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pk:hover .pk-foto img{transform:scale(1.04)}
.pk .tip{z-index:3}
.pk-was{margin:14px 0 -12px;font-size:15px;color:var(--dof);text-decoration:line-through;text-decoration-color:var(--rood)}
.pk-strook{position:relative;z-index:2;margin:0 -26px;padding:10px 26px;display:flex;justify-content:space-between;gap:10px;align-items:center;
  background:var(--roodvlak);color:#000;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.pk-strook b{font-size:15px;white-space:nowrap}.pk-strook span{font-size:12.5px;font-weight:600;white-space:nowrap}
.pk-strook::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-100%);animation:pkGlans 3.2s ease-in-out infinite}
@keyframes pkGlans{60%,100%{transform:translateX(100%)}}
.calcprijs s.was{font-size:17px}
@media(max-width:700px){.pk-foto{aspect-ratio:16/11}}
@media(prefers-reduced-motion:reduce){.pk-strook::after{animation:none}}
.opmaat{grid-column:1/-1;background:var(--vlak);border-radius:var(--r);padding:30px 30px 32px;
  --rood:#f0545a;--dof:#8E8E9A;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.opmaat h3{font-size:25px}
.opmaat p{color:var(--zacht);font-size:16px;margin-top:8px;max-width:70ch}

/* ── tabel ────────────────────────────────────────────────────────── */
.tabelvak{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
th,td{text-align:left;padding:16px 18px 16px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
th{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rood);
  font-weight:700;border-bottom-color:var(--lijn2)}
td strong{font-weight:600}
td em{font-style:normal;color:var(--zacht)}
.tabelnoot{color:var(--dof);font-size:14px;margin-top:16px}

/* ── accordeon ────────────────────────────────────────────────────── */
.vragen{border-top:1px solid var(--lijn);max-width:900px;margin:0 auto}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:18.5px;font-weight:600;letter-spacing:-.01em;min-height:44px}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";position:absolute;right:6px;top:32px;width:13px;height:13px;
  border-right:2px solid var(--rood);border-bottom:2px solid var(--rood);
  transform:rotate(45deg) translateY(-4px);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.vraag[open] summary::after{transform:rotate(225deg) translateY(-4px)}
.vraag .antw{color:var(--zacht);font-size:16.5px;padding:0 60px 24px 0;max-width:80ch}

/* ── review-vlak: er is er nog geen ───────────────────────────────── */
.review{border:1px dashed var(--lijn2);border-radius:var(--r);padding:30px 32px;
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.review .pl{border-radius:999px;box-shadow:inset 0 0 0 1px var(--lijn2);padding:8px 16px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.review p{color:var(--zacht);font-size:15.5px}

.rvs-kop{font-size:clamp(20px,2.2vw,26px);margin:0 0 22px}
.rvs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.rv{display:flex;flex-direction:column;min-width:0;margin:0;padding:28px 30px 26px;
  background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r)}
.rv-st{color:#f5b942;letter-spacing:.14em;font-size:18px;line-height:1;margin-bottom:16px}
.rv blockquote{margin:0 0 22px;font-size:16.5px;line-height:1.6;color:var(--wit)}
.rv figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px;
  border-top:1px solid var(--lijn)}
.rv-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--rood);color:var(--wit);font-weight:600;font-size:16px}
.rv-wie{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.rv-wie strong{font-weight:600;font-size:15px}
.rv-soort{color:var(--zacht);font-size:13.5px}
.rv figcaption a{color:inherit;text-decoration:underline}
@media (max-width:760px){
  .rvs{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -28px;padding:0 28px 8px;scroll-padding:0 28px;scrollbar-width:none}
  .rvs::-webkit-scrollbar{display:none}
  .rv{flex:0 0 86%;scroll-snap-align:start;padding:24px 22px 22px}
}

/* ── stedenraster ─────────────────────────────────────────────────── */
.steden{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.steden a{background:var(--vlak);border-radius:var(--r);padding:16px 18px;font-size:16px;
  font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:10px;
  min-height:44px;transition:background-color .22s}
.steden a:hover{background:#2A2A33}
.steden a s{text-decoration:none;color:var(--rood)}

/* ── artikelen ────────────────────────────────────────────────────── */
.artikelen{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.art{background:var(--vlak);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  --rood:#f0545a;--dof:#8E8E9A;transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.art:hover{transform:translateY(-3px)}
/* het scherm staat midden in de foto, precies waar de kop valt: foto omhoog, tekst omlaag */
.breed.breed-laag .bz img{object-position:50% 100%}
.breed.breed-laag .in{padding-top:230px}
@media(max-width:820px){.breed.breed-laag .in{padding-top:150px}}
.spoedbel{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;
  background:var(--vlak);border-radius:var(--r);padding:26px 30px;margin:0;
  box-shadow:inset 3px 0 0 var(--roodvlak)}
.spoedbel p{margin:0;font-size:18px;color:var(--zacht)}
.spoedbel p strong{color:var(--wit)}
.spoedbel .knoppen{margin:0}
/* ── blogoverzicht (01-10), naar de pin 'Untitled Blog' ─────────────── */
.subhero.bp-kop{background:var(--grond)}
.subhero.bp-kop .onder{padding:200px 0 34px}
.bp-kopin{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:end}
.subhero.bp-kop h1{font-size:clamp(38px,5.4vw,72px);margin:0}
.subhero.bp-kop .lead{margin:0 0 8px;text-shadow:none;color:var(--zacht);font-size:18px;max-width:44ch}
.bp-sec{padding-top:0}
.bp-tabs{display:flex;gap:26px;border-bottom:1px solid var(--lijn);margin:0 0 44px;overflow-x:auto;scrollbar-width:none}
.bp-tabs::-webkit-scrollbar{display:none}
.bp-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:14px 2px;min-height:48px;color:var(--zacht);font:inherit;font-size:15.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.bp-tab:hover{color:var(--wit)}
.bp-tab[aria-pressed="true"]{color:var(--wit);border-bottom-color:var(--rood)}
.bp-rooster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px}
.bp-kaart{display:flex;flex-direction:column;gap:12px;color:var(--wit);text-decoration:none}
.bp-kaart[hidden]{display:none}
.bp-beeld{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r);
  outline:1px solid rgba(255,255,255,.08);outline-offset:-1px;margin-bottom:10px}
.bp-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.bp-strook{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;
  gap:16px;padding:44px 20px 16px;font-size:13.5px;line-height:1.35;color:#fff;
  background:linear-gradient(to top,rgba(12,12,16,.86) 0%,rgba(12,12,16,.62) 55%,rgba(12,12,16,0) 100%)}
.bp-strook b{display:block;font-weight:600;font-size:14.5px}
.bp-soort{font-weight:600}
.bp-kaart h3{font-size:24px;line-height:1.22;margin:0;text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:5px;text-decoration-thickness:1.5px;transition:text-decoration-color .2s ease}
.bp-kaart p{color:var(--zacht);font-size:16px;margin:0;max-width:56ch}
.bp-lees{font-size:15px;font-weight:600;margin-top:4px;display:inline-flex;gap:8px;align-items:center}
.bp-lees span{color:var(--rood);transition:transform .2s cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){
  .bp-kaart:hover img{transform:scale(1.035)}
  .bp-kaart:hover h3{text-decoration-color:currentColor}
  .bp-kaart:hover .bp-lees span{transform:translate(2px,-2px)}
}
.bp-kaart:active .bp-beeld{transform:scale(.99)}
@media(max-width:820px){
  .bp-kopin{grid-template-columns:1fr;gap:16px}
  .subhero.bp-kop .onder{padding:150px 0 24px}
  .bp-rooster{grid-template-columns:1fr;gap:44px}
  .bp-kaart h3{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.bp-beeld img,.bp-lees span{transition:none}}
.art .bz{aspect-ratio:16/10;overflow:hidden}
.art img{width:100%;height:100%;object-fit:cover}
.art .in{padding:24px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.art .mrk{color:var(--rood);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.art h3{font-size:21px;line-height:1.2}
.art p{color:var(--zacht);font-size:15.5px}
.art .lees{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--wit)}

.lees-lang{max-width:74ch}
.lees-lang h2{font-size:clamp(23px,2.6vw,31px);margin:48px 0 16px}
.lees-lang h3{font-size:20px;margin:32px 0 10px}
.lees-lang p{color:var(--zacht);font-size:17.5px;margin-bottom:18px}
.lees-lang p strong{color:var(--wit);font-weight:600}
.lees-lang ul{color:var(--zacht);font-size:17.5px;padding-left:20px;margin:0 0 22px}
.lees-lang li{margin-bottom:9px}
.lees-lang .intro{color:var(--wit);font-size:20px}

/* ── formulier ────────────────────────────────────────────────────── */
.form{background:var(--vlak);border-radius:var(--r);padding:34px 34px 38px;
  --rood:#f0545a;--dof:#8E8E9A;max-width:760px}
.veld{display:grid;gap:8px;margin-bottom:22px}
.veld label{font-size:14px;font-weight:600;letter-spacing:.02em}
.veld label s{text-decoration:none;color:var(--rood)}
.veld .hint{color:var(--dof);font-size:13.5px}
.veld input,.veld select,.veld textarea{
  background:var(--grond);color:var(--wit);border:1px solid var(--lijn2);border-radius:8px;
  padding:13px 15px;font-size:16px;font-family:inherit;min-height:48px;width:100%}
.veld textarea{min-height:120px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--rood);outline:none;
  box-shadow:0 0 0 2px rgba(239,65,72,.3)}
.tweeveld{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .voet{border-top:1px solid var(--lijn);margin-top:6px;padding-top:24px;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.form .voet p{color:var(--dof);font-size:13.5px;max-width:40ch}
.melding{border-radius:8px;padding:14px 16px;font-size:15.5px;margin-bottom:22px}
.melding.goed{background:rgba(70,180,110,.14);box-shadow:inset 0 0 0 1px rgba(120,220,160,.5);color:#9BE7BC}
.melding.fout{background:rgba(236,28,36,.12);box-shadow:inset 0 0 0 1px rgba(240,84,90,.5);color:#F79A9E}
.honing{position:absolute;left:-9999px}
.honing input{min-height:24px}

/* ── contactkaarten ───────────────────────────────────────────────── */
.contactrij{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Adres en bereikbaarheid staan als gewone regel boven de contactkanalen, zoals
   op de zustersite. Een KvK-nummer in een kaart of een knop zetten suggereert
   dat je erop kunt klikken; het is een gegeven, geen actie. Het staat in de voet. */
.contactregel{color:var(--zacht);font-size:16.5px;max-width:64ch;margin:0 0 6px}
.contactregel + .contactrij{margin-top:22px}
.ck{background:var(--vlak);border-radius:var(--r);padding:26px 26px 28px;--rood:#f0545a;--dof:#8E8E9A}
.ck .mrk{color:var(--rood);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;display:block;margin-bottom:12px}
.ck b{font-size:21px;font-weight:600;letter-spacing:-.01em;display:block;word-break:break-word}
.ck p{color:var(--zacht);font-size:15px;margin-top:6px}

/* ── aanvraagblok onderaan elke pagina ────────────────────────────── */
.aanvraag{text-align:center;padding:0 0 110px}
.aanvraag h2{font-size:clamp(30px,6vw,88px);text-transform:uppercase;line-height:1;
  letter-spacing:-.035em;font-weight:700}
.aanvraag h2 em{font-style:normal;color:var(--rood)}
.aanvraag p{color:var(--zacht);max-width:44ch;margin:22px auto 32px;font-size:17px}

/* ── voet ─────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--lijn);padding:56px 0 46px}
.voetraster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.voetraster .voetkop{color:var(--rood);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:16px}
.voetraster ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.voetraster a{color:var(--zacht);font-size:15.5px}
.voetraster a:hover{color:var(--wit)}
.voetraster p{color:var(--zacht);font-size:15.5px}
.voetmerk{display:block;width:auto;height:66px;margin-bottom:16px}
.voetstreep{border-top:1px solid var(--lijn);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--dof);font-size:13.5px}
.voetstreep a:hover{color:var(--wit)}

/* ──── rekenmachine ────────────────────────────────────────────────────
   Staat direct onder de hero: wie "LED scherm huren" zoekt wil weten of het
   past en wat het kost, en dat stond tot 21-09 op 63% van de startpagina.
   Geen enkele concurrent in deze markt heeft dit, en wij zijn de enige die
   prijzen toont — dus dit is het enige blok dat zijn eigen onderscheid is. */
/* ⚠️ In een paneel op --vlak schuiven rood en grijs een tint op: #ef4148 haalt
   daar maar 4,15:1 en #7E7E8A 3,94:1. Zelfde herdefinitie als .kaart en .ck. */
.calc{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);
  --rood:#f0545a;--dof:#8E8E9A;
  padding:34px 34px 30px;display:grid;grid-template-columns:1fr 1fr;gap:34px 44px;align-items:start}
.calcvraag{grid-column:1;display:flex;flex-direction:column;gap:6px}
.calcvraag>label{font-size:17px;font-weight:600;color:var(--wit)}
.calcvraag .hulp{font-size:14.5px;color:var(--dof);margin:0 0 14px}
.calcgetal{font-size:clamp(34px,4.6vw,46px);font-weight:700;letter-spacing:-.02em;
  color:var(--wit);line-height:1.05;font-variant-numeric:tabular-nums}
.calcgetal small{display:block;font-size:14.5px;font-weight:500;letter-spacing:0;
  color:var(--zacht);margin-top:4px}
/* De schuif zelf. 44px hoog aanraakvlak, ook al oogt de baan dun. */
.calcschuif{-webkit-appearance:none;appearance:none;width:100%;height:44px;
  background:transparent;margin:10px 0 2px;cursor:pointer}
.calcschuif:focus-visible{outline:2px solid var(--rood);outline-offset:4px;border-radius:4px}
.calcschuif::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:linear-gradient(to right,var(--roodvlak) var(--vul,50%),rgba(255,255,255,.16) var(--vul,50%))}
.calcschuif::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.16)}
.calcschuif::-moz-range-progress{height:6px;border-radius:999px;background:var(--roodvlak)}
.calcschuif::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;background:var(--wit);
  border:5px solid var(--roodvlak);margin-top:-10px;
  transition:transform .18s cubic-bezier(.22,.61,.36,1)}
.calcschuif::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--wit);
  border:5px solid var(--roodvlak);box-sizing:border-box}
.calcschuif:hover::-webkit-slider-thumb,.calcschuif:active::-webkit-slider-thumb{transform:scale(1.12)}
.calcschaal{display:flex;justify-content:space-between;font-size:13px;color:var(--dof);
  font-variant-numeric:tabular-nums}
/* De uitslag. */
.calcuit{grid-column:2;grid-row:1/span 2;background:var(--grond);
  border:1px solid var(--lijn);border-radius:var(--r);padding:26px 26px 22px}
.calcmaat{font-size:clamp(26px,3.2vw,34px);font-weight:700;letter-spacing:-.02em;
  color:var(--wit);line-height:1.1;margin:0}
.calcmaat em{font-style:normal;color:var(--rood)}
.calcafm{font-size:15.5px;color:var(--zacht);margin:5px 0 18px}
.calcrijen{display:grid;gap:0;margin:0 0 20px;border-top:1px solid var(--lijn)}
.calcrijen div{display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--lijn);font-size:15px}
.calcrijen dt,.calcrijen span:first-child{color:var(--dof)}
.calcrijen span:last-child{color:var(--wit);text-align:right;font-variant-numeric:tabular-nums}
.calcprijs{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 20px}
.calcprijs b{font-size:clamp(30px,3.8vw,40px);font-weight:700;letter-spacing:-.02em;
  color:var(--wit);font-variant-numeric:tabular-nums}
.calcprijs span{font-size:14.5px;color:var(--dof)}
.calcacties{display:flex;gap:10px;flex-wrap:wrap}
.calcnoot{grid-column:1;font-size:13.5px;color:var(--dof);line-height:1.5;margin:0}
.calcnoot a{color:var(--rood)}

/* ──── bel mij terug ───────────────────────────────────────────────────
   Vier velden. Voor wie niet wil typen en niet wil bellen. */
.bmt{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);
  --rood:#f0545a;--dof:#8E8E9A;padding:30px 30px 26px}
.bmt h2{font-size:clamp(22px,2.6vw,28px);font-weight:700;letter-spacing:-.02em;
  color:var(--wit);margin:0 0 6px;line-height:1.15}
.bmt>p{font-size:15.5px;color:var(--zacht);margin:0 0 22px;max-width:52ch}
.bmtrij{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.bmtveld{display:flex;flex-direction:column;gap:6px}
.bmtveld label{font-size:13.5px;font-weight:600;color:var(--zacht)}
/* "(niet verplicht)" hoort minder nadruk te hebben dan het label zelf. De
   klasse .hulp bestond alleen binnen de rekenmachine en deed hier niets. */
.bmtveld label .hulp{font-weight:500;color:var(--dof)}
.bmtveld input,.bmtveld select{background:var(--grond);border:1px solid var(--lijn2);
  border-radius:8px;color:var(--wit);font:inherit;font-size:16px;padding:12px 13px;min-height:46px}
.bmtveld input::placeholder{color:var(--dof)}
.bmtveld input:focus-visible,.bmtveld select:focus-visible{outline:2px solid var(--rood);outline-offset:2px}
.bmtvoet{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.bmtvoet .pil{margin:0}
/* De twee links hier zijn een volwaardige uitweg (bellen, appen) en moeten dus
   ook op een aanraakscherm te raken zijn: WCAG 2.5.8 vraagt 24×24 px. */
.bmtnoot{font-size:13.5px;color:var(--dof);margin:0;display:flex;align-items:center;
  gap:6px;flex-wrap:wrap}
.bmtnoot a{color:var(--rood);display:inline-flex;align-items:center;min-height:24px;padding:2px 0}
.bmtmeld{margin-top:16px;border-radius:8px;padding:13px 15px;font-size:15px;line-height:1.5}
.bmtmeld.ok{background:rgba(96,200,140,.13);border:1px solid rgba(96,200,140,.4);color:#8fe0b4}
.bmtmeld.nok{background:rgba(236,28,36,.13);border:1px solid rgba(236,28,36,.45);color:#ff9b9f}

/* ──── actiebalk ───────────────────────────────────────────────────────
   Staat standaard UIT (ACTIE = None in inhoud.py). */
.actie{background:var(--roodvlak);color:#000;text-align:center;
  font-size:14.5px;font-weight:600;padding:9px 16px;position:relative;z-index:26}
.actie a{color:#000;text-decoration:underline;text-underline-offset:2px}
.actie b{font-weight:700}

/* ──── beweging ────────────────────────────────────────────────────────
   Alleen transform en opacity. Base Structures beweegt 2 van de 400
      elementen bij scrollen, dus geen parallax in deze richting. ──── */
[data-op]{opacity:0;transform:translateY(12px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
[data-op].op-in{opacity:1;transform:none}
.wrd{display:inline-block;opacity:0;transform:translateY(.34em);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--wd,0ms)}
.op-in .wrd,.wrd.op-in{opacity:1;transform:none}
.pijl{display:inline-block;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
a:hover .pijl{transform:translateX(5px)}

@media (prefers-reduced-motion:reduce){
 [data-op],.wrd{opacity:1!important;transform:none!important;transition:none!important}
   html{scroll-behavior:auto}
 .menu{transition:none}
 /* Beweging uit: de rij staat stil en wordt weer met de hand schuifbaar,
    anders is de helft van de voorbeelden onbereikbaar. */
 .railspoor{animation:none}
 .rail{overflow-x:auto;scrollbar-width:none}
}
@media(max-width:1100px){
 .artikelen{grid-template-columns:repeat(2,1fr)}
 .prijzen{grid-template-columns:repeat(2,1fr)}
 .steden{grid-template-columns:repeat(3,1fr)}
 .voetraster{grid-template-columns:1fr 1fr}
 .menu .mrij{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1000px){
  /* Op een telefoon neemt de hamburger het menu over en verhuizen de twee
    acties naar een vaste balk onderaan — daar staat je duim al. */
 .navrij{display:none}
 .top{padding:18px 20px 0}
 .top .knopmini span{display:none}
 .balk .in{gap:16px;padding:8px 20px;justify-content:flex-start;
   flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .balk .in::-webkit-scrollbar{display:none}
 .balk i em{display:none}
 .subhero .onder{padding-top:150px}
  .stap{grid-template-columns:60px 1fr;gap:18px}
 .stap p{grid-column:2}
  .uitspraak{padding:72px 0}
 .band,.sec,.aanvraag{padding-bottom:72px}
 .sec.top0{padding-top:64px}
 .breed{margin-bottom:72px}
 .kaart{flex:0 0 min(82vw,420px)}
 .contactrij{grid-template-columns:1fr}
 .artikelen{grid-template-columns:1fr}
 .opmaat{grid-template-columns:1fr}
 .top .bel span{display:inline}
 /* De rekenmachine wordt één kolom: eerst de vraag, dan de uitslag.
    De uitslag moet ONDER de schuif staan, anders schuif je aan iets
    wat je niet ziet veranderen. */
 .calc{grid-template-columns:1fr;gap:24px;padding:26px 22px 24px}
 .calcvraag,.calcuit,.calcnoot{grid-column:1}
 .calcuit{grid-row:auto}
 /* Op 390px past "Geschikt voor" naast zijn waarde alleen als de waarde niet
    zelf ook afbreekt. Label boven, waarde eronder leest rustiger dan twee
    kolommen die allebei over twee regels lopen. */
 .calcrijen div{flex-direction:column;gap:2px;padding:10px 0}
 .calcrijen span:last-child{text-align:left}
 /* De knoppen over de volle breedte: anders breekt "Vraag deze maat aan"
    om de pijl heen. Gemeten op 390px: de knop is 234px, de pil houdt daar
    30px zijpadding aan en dan blijft er 174px over voor tekst die er 176
    nodig heeft — twee pixels tekort, en dus een tweede regel. Minder
    padding plus de pijl eruit geeft 198px en dan past hij op één regel.
    De pijl is hier decoratie; het woord "aanvragen" zegt het al. */
 .calcacties{flex-direction:column;align-items:stretch}
 .calcacties .pil{justify-content:center;padding-left:18px;padding-right:18px}
 .calcacties .pil .pijl{display:none}
 .bmtrij{grid-template-columns:1fr}
}
/* De vaste balk onderaan pas op echte telefoonbreedte. Op een tablet blijft
   de zwevende knop staan: een balk over de volle breedte dekt daar de onderste
   regel van een tabel af, en dat meet je alleen als je ernaar zoekt. */
@media(max-width:640px){
 .zweef{display:none}
 .mbalk{display:grid}
 body{padding-bottom:56px}
 /* De aanvraagknop staat onderaan al vast; boven in de kop is hij dubbelop
    én duwt hij het woordmerk op twee regels. */
 .top .knopmini{display:none}
 /* De vaste balk is 56px hoog; de WhatsApp-knop schuift erboven zodat hij
    niets afdekt. Precies dezelfde rekensom als body{padding-bottom:56px}. */
 .wapp{bottom:70px;right:16px;width:50px;height:50px}
 .hero .onder{padding-bottom:86px}
 .subhero .onder{padding-bottom:78px}
}
@media(max-width:560px){
 .top{padding:18px 20px}
 .menu .mtop{padding:18px 20px}
 .merk span{font-size:15px}
 .merk .merkteken{width:118px}
 .review{grid-template-columns:1fr;gap:14px}
 .knoppen .pil{width:100%;justify-content:center}
 /* Op telefoonbreedte staat "Bel direct" al in de vaste balk onderaan.
    De knop in de kop wordt daar een rond icoon, anders duwt hij het
    woordmerk op twee regels. */
 .top .bel{justify-content:center;padding:9px 11px;gap:0}
 .top .bel span{display:none}
 .top .bel::before{left:50%;margin-left:-11px}
 .hero .onder{padding-bottom:86px}
 .prijzen,.steden,.voetraster,.tweeveld{grid-template-columns:1fr}
 .menu .mrij{grid-template-columns:1fr}
 .form{padding:26px 20px 30px}
 .vraag .antw{padding-right:8px}
 .subhero .onder{padding-top:124px}
}

/* ── 29-09 · leadkwaliteit: stopregel, extra velden, vinkje ─────────── */
.stopregel{background:var(--vlak);border-left:3px solid var(--roodvlak);border-radius:8px;
  padding:14px 18px;font-size:15px;color:var(--zacht);margin:0 0 26px;max-width:none}
.stopregel b{color:var(--wit)}
.stopwrap{padding-top:34px}
.form fieldset.extra{border:1px solid var(--lijn);border-radius:var(--r);padding:20px 22px 6px;margin:6px 0 22px}
.form fieldset.extra legend{padding:0 8px;font-weight:700;color:var(--wit);font-size:15.5px}
.form .hulp{font-weight:500;color:var(--dof)}
.vinkje{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--zacht);margin-top:8px;cursor:pointer}
.vinkje input{width:24px;height:24px;flex:0 0 24px;margin:0;accent-color:var(--roodvlak)}
.melding.klein{font-size:14px;padding:10px 12px;margin:8px 0 0;display:block}
.melding.klein[hidden]{display:none}
.form .tweeveld{align-items:start}

/* ── 29-09 · terugbelknop in de kopbalk + venster ───────────────────── */
.knopmini.licht{background:transparent;color:var(--wit);box-shadow:inset 0 0 0 1px var(--lijn2);
  border:0;font-family:inherit;cursor:pointer}
.knopmini.licht:hover{background:rgba(255,255,255,.08)}
.knopmini.licht svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1100px){.knopmini.licht span{display:none}.knopmini.licht{padding:9px 12px}}
.btdlg{border:0;padding:0;background:transparent;max-width:min(680px,calc(100vw - 32px));width:100%;color:var(--wit)}
.btdlg::backdrop{background:rgba(6,6,8,.72)}
.btdlg[open]{animation:btin .28s cubic-bezier(.2,.8,.2,1)}
@keyframes btin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.btdlg .bmt{position:relative;max-height:calc(100svh - 40px);overflow:auto}
.btsluit{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;
  background:rgba(255,255,255,.08);color:var(--wit);font-size:22px;line-height:1;cursor:pointer}
.btsluit:hover{background:rgba(255,255,255,.16)}
.btblok{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.btblok p{font-size:15.5px;color:var(--zacht);margin:0;max-width:52ch}
@media(max-width:600px){.btdlg .bmtrij{grid-template-columns:1fr}}

/* ── 29-09 · hero homepage als diavoorstelling ─────────────────────────
   Vier beelden, elk 6 s in beeld, zachte overgang en een langzame zoom (alleen transform/opacity). */
.hdia img{position:absolute;inset:0;opacity:0;animation:hdia 24s linear infinite;
  animation-delay:calc(var(--i) * 6s - 1s)}
.hdia img:first-child{opacity:1}
@keyframes hdia{0%{opacity:0;transform:scale(1.02)}4%{opacity:1}25%{opacity:1}
  29%{opacity:0}100%{opacity:0;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.hdia img{animation:none}.hdia img:not(:first-child){display:none}}

/* ── 29-09 · heroknoppen die bewegen ─────────────────────────────────── */
.heroknoppen .glans{position:relative;overflow:hidden;isolation:isolate}
.heroknoppen .glans::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);animation:glans 4.5s ease-in-out 1.2s infinite}
@keyframes glans{0%{transform:translateX(-120%)}30%,100%{transform:translateX(120%)}}
.heroknoppen .glans .pijl{display:inline-block;animation:pijltje 1.8s ease-in-out infinite}
@keyframes pijltje{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.heroknoppen .puls .stip{position:relative;width:9px;height:9px;border-radius:50%;
  background:#3ddc84;flex:0 0 auto}
.heroknoppen .puls .stip::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:#3ddc84;animation:stip 1.8s ease-out infinite}
@keyframes stip{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.heroknoppen .glans::after,.heroknoppen .glans .pijl,
  .heroknoppen .puls .stip::after{animation:none}}
/* ── contact · variant A "Direct" (01-10-2026, gekozen door Lenny uit _lab-contact) ── */
.cxa-hero{position:relative;background:#0c0c0f;color:var(--wit);overflow:hidden}
.cxa-hero .onder{position:relative;padding:64px 0 48px}
.cxa-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--zacht)}
.cxa-live{width:9px;height:9px;border-radius:50%;background:#35d07f;position:relative}
.cxa-live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #35d07f;
  animation:cxapuls 2.4s cubic-bezier(.23,1,.32,1) infinite}
@keyframes cxapuls{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.cxa h1{font-size:clamp(40px,6vw,86px);line-height:.95;letter-spacing:-.04em;max-width:13ch;margin:18px 0 18px;font-weight:700}
.cxa h1 em{font-style:normal;color:var(--rood)}
.cxa .lead{color:var(--zacht);font-size:18px;max-width:52ch;margin:0}
.cxa-num{font-variant-numeric:tabular-nums}
.cxa-kop{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:end}
.cxa-klok{border:1px solid var(--lijn);border-radius:18px;padding:22px 24px;background:rgba(255,255,255,.03)}
.cxa-klok b{display:block;font-size:44px;letter-spacing:-.03em;line-height:1;min-height:44px}
.cxa-klok p{margin:8px 0 0;color:var(--zacht);font-size:15px}
.cxa-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.cxa-t{position:relative;display:flex;flex-direction:column;gap:32px;min-height:184px;padding:22px;
  border-radius:18px;background:var(--vlak);color:var(--wit);border:0;text-align:left;cursor:pointer;
  font:inherit;transition:transform .2s cubic-bezier(.23,1,.32,1),background-color .2s ease}
.cxa-t:hover{transform:translateY(-4px);background:#2a2a33}
.cxa-t:active{transform:scale(.97)}
.cxa-t:focus-visible{outline:2px solid var(--rood);outline-offset:3px}
.cxa-t svg{width:30px;height:30px;fill:currentColor}
.cxa-t svg[fill="none"]{fill:none}
.cxa-hero+main{padding-top:96px}
.review p a{display:inline-block;padding:12px 0;margin:-12px 0;color:var(--rood)}
@media(max-width:560px){.cxa-hero+main{padding-top:56px}}
.cxa-t .w{margin-top:auto;min-width:0}
.cxa-t small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht);font-weight:700}
.cxa-t b{display:block;font-size:21px;margin-top:6px;letter-spacing:-.01em;overflow-wrap:anywhere}
.cxa-t .pijl{position:absolute;right:20px;top:20px;font-size:20px;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.cxa-t:hover .pijl{transform:translateX(4px)}
.cxa-t.hoofd{background:var(--roodvlak);color:#000}
.cxa-t.hoofd small{color:#000}
.cxa-t.hoofd:hover{background:#ff2f36}
.cxa-adres{display:flex;gap:10px;align-items:center;color:var(--zacht);font-size:14.5px;margin:22px 0 0}
.cxa-adres svg{width:18px;height:18px;flex:none}
@media(max-width:980px){.cxa-rij{grid-template-columns:1fr 1fr}.cxa-kop{grid-template-columns:1fr}}
@media(max-width:560px){.cxa-rij{grid-template-columns:1fr}
  .cxa-t{min-height:0;flex-direction:row;align-items:center;gap:16px;padding:18px 20px}
  .cxa-t .w{margin:0}.cxa-klok{display:none}.cxa-adres{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.cxa-live::after{animation:none}.cxa-t,.cxa-t .pijl{transition:none}}