/* ===========================================================
   247ICT-template — basisopmaak (sjabloon "Zakelijk")
   Gebaseerd op de goedgekeurde huisstijl van onkruidvrije-bestrating.nl.
   Andere sjablonen (assets/css/thema-*.css) overschrijven alleen de tokens
   en een paar onderdelen. De instellingen uit Beheer » Opmaak & huisstijl
   komen daar nog bovenop (zie _lib/opmaak.php).
   =========================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Huiskleuren. Een sjabloon of de instellingen (Opmaak & huisstijl) zetten
     --accent / --donker; de rest van de CSS gebruikt de namen eronder. */
  --accent:          #1A9768;
  --accent-donker:   #15835A;
  --accent-licht:    #E8F3EC;
  --donker:          #0B3D24;
  --emerald:   var(--accent);         /* primair accent / CTA          */
  --emerald-600: var(--accent-donker); /* hover                         */
  --forest:    var(--donker);         /* koppen / paginakop / footer    */
  --forest-700: color-mix(in srgb, var(--donker) 78%, #000);
  --mint:      var(--accent-licht);   /* zachte sectie-achtergrond      */
  --paper:     #FAFBF9;   /* pagina-achtergrond             */
  --ink:       #16231C;   /* bodytekst                      */
  --muted:     #5A6B60;   /* secundaire tekst               */
  --line:      #E2E8E2;   /* randen                         */
  --amber:     #E8B53D;   /* sterren / review-accent        */
  --white:     #ffffff;

  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --shadow:    0 18px 44px -22px color-mix(in srgb, var(--donker) 35%, transparent);
  --shadow-sm: 0 6px 18px -10px color-mix(in srgb, var(--donker) 30%, transparent);

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 56px);

  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font: var(--font-body);
  --font-kop: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --h1: calc(clamp(2.3rem, 5vw, 4rem) * var(--kop-schaal, 1));
  --h2: calc(clamp(1.8rem, 3.4vw, 2.7rem) * var(--kop-schaal, 1));
  --h3: calc(clamp(1.2rem, 1.8vw, 1.5rem) * var(--kop-schaal, 1));

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: calc(100% * var(--body-schaal, 1)); }
body {
  font-family: var(--font);
  color: var(--body-kleur, var(--ink));
  background: var(--paper);
  line-height: var(--body-regelhoogte, 1.65);
  font-size: 1.0625rem;
  font-weight: var(--body-gewicht, 400);
  text-transform: var(--body-hoofdletters, none);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4 {
  font-family: var(--font-kop);
  color: var(--kop-kleur, var(--forest));
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: var(--kop-gewicht, 800);
  text-transform: var(--kop-hoofdletters, none);
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(28px, 4vw, 50px); }
.section--tight { padding-block: clamp(20px, 3vw, 34px); }
.bg-mint  { background: var(--mint); }
.bg-paper { background: var(--paper); }
.bg-forest{ background: var(--forest); color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; font-weight: 700; color: var(--emerald-600);
  margin-bottom: .7rem;
}
.eyebrow::before { content: none; }
.eyebrow--center { justify-content: center; }
.bg-forest .eyebrow { color: color-mix(in srgb, var(--accent) 50%, #fff); }

.section-head { max-width: 900px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--h2); }
.section-head p { color: var(--muted); margin-top: .65rem; font-size: 1.08rem; }
.bg-forest .section-head h2 { color: #fff; }
.bg-forest .section-head p { color: rgba(255,255,255,.82); }

.lead { font-size: 1.18rem; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.55em; border-radius: 10px;
  font-weight: 700; font-size: .98rem;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--emerald); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--emerald-600); transform: translateY(-2px); }
.btn--dark { background: var(--forest); color: #fff; }
.btn--dark:hover { background: var(--forest-700); transform: translateY(-2px); }
.btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.btn--ghost:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.btn--outline { border: 1.5px solid var(--line); color: var(--forest); background: #fff; }
.btn--outline:hover { border-color: var(--emerald); color: var(--emerald-600); transform: translateY(-2px); }

.link-arrow { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--emerald-600); }
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-ticker { overflow: hidden; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.site-ticker__track { display: flex; align-items: center; gap: 3.5rem; width: max-content; min-height: 32px; padding-inline: 1.75rem; animation: site-ticker-loop 34s linear infinite; }
.site-ticker__track span { display: inline-flex; align-items: center; }
@keyframes site-ticker-loop { to { transform: translateX(-50%); } }
.topbar { background: var(--forest-700); color: rgba(255,255,255,.85); font-size: .85rem; }
.topbar .container { display: flex; gap: 1.4rem; align-items: center; justify-content: flex-end; height: 38px; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: .4em; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; color: var(--emerald); }
.topbar__social { display: inline-flex; align-items: center; gap: .7rem; padding-left: .85rem; border-left: 1px solid rgba(255,255,255,.22); }
.topbar__social svg { width: 16px; height: 16px; }
.topbar__social a:hover svg { color: #fff; }

.site-top { position: sticky; top: 0; z-index: 60; }
.site-header { position: relative; z-index: 50; background: rgba(250,251,249,.9); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 2rem; height: 74px; }
.brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 1; min-width: 0; }
.brand img { height: 40px; width: auto; max-width: min(220px, 100%); object-fit: contain; object-position: left center; }
.brand b { font-weight: 800; color: var(--forest); font-size: 1.18rem; letter-spacing: -.02em; }
.brand b span { color: var(--emerald); }
.nav-links { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.nav-links a { font-weight: 600; font-size: .97rem; color: var(--ink); position: relative; padding-block: .4rem; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--emerald); transition: width .2s var(--ease); }
.nav-links a:hover::after, .nav-links a.is-active::after { width: 100%; }
.nav-links a.is-active { color: var(--forest); }
.nav-submenu { position: relative; }
.nav-submenu > summary { display: inline-flex; align-items: center; gap: .32rem; padding-block: .4rem; color: var(--ink); font-size: .97rem; font-weight: 600; cursor: pointer; list-style: none; }
.nav-submenu > summary::-webkit-details-marker { display: none; }
.nav-submenu > summary svg { width: 15px; height: 15px; transition: transform .18s var(--ease); }
.nav-submenu[open] > summary svg { transform: rotate(180deg); }
.nav-submenu[data-active="true"] > summary { color: var(--forest); }
.nav-submenu__panel { position: absolute; top: calc(100% + 16px); left: 50%; width: 310px; max-height: calc(100dvh - 170px); overflow-y: auto; padding: .7rem; transform: translateX(-50%); border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow); }
.nav-submenu:not([open]) .nav-submenu__panel { display: none; }
.nav-submenu__panel a { display: block; padding: .56rem .7rem; border-radius: 7px; font-size: .9rem; line-height: 1.25; }
.nav-submenu__panel a:hover { background: var(--mint); color: var(--forest); }
.nav-submenu__panel a::after { display: none !important; }
.nav-submenu__label { display: block; margin: .35rem .7rem .1rem; color: var(--emerald-600); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nav-submenu__nested { margin:.08rem 0; }
.nav-submenu__nested > summary { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.56rem .7rem; border-radius:7px; color:var(--ink); font-size:.9rem; font-weight:700; line-height:1.25; cursor:pointer; list-style:none; }
.nav-submenu__nested > summary::-webkit-details-marker { display:none; }
.nav-submenu__nested > summary:hover { background:var(--mint); color:var(--forest); }
.nav-submenu__nested > summary svg { width:14px; height:14px; flex:0 0 auto; transition:transform .18s var(--ease); }
.nav-submenu__nested[open] > summary svg { transform:rotate(180deg); }
.nav-submenu__nested-links { margin:.12rem .45rem .38rem; padding:.28rem 0 .28rem .55rem; border-left:2px solid #c7ddd0; }
.nav-submenu__nested-links a { padding:.46rem .62rem; color:var(--muted); font-size:.84rem; }
.nav-cta { display: flex; align-items: center; gap: .8rem; }
.nav-links > .btn { display: none; }
/* Extra pagina's in het hoofdmenu staan onder "Meer"; iets minder ruimte tussen de items houdt het logo op maat. */
/* Desktop: compacte ruimte tussen de menu-items, zodat het logo op volle grootte naast het menu past
   (ook met het extra "Meer"-menu voor pagina's uit Beheer » Extra pagina's). */
@media (min-width: 1101px) { .nav { gap: 1.2rem; } .nav-links { gap: .95rem; } }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; margin-left: auto; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 22px; height: 2px; background: var(--forest); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; min-height: clamp(510px, 44vw, 630px); display: flex; align-items: center; color: var(--forest); overflow: hidden; background:var(--mint); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(247,250,248,.98) 0%,
    rgba(247,250,248,.96) 31%,
    rgba(247,250,248,.8) 43%,
    rgba(247,250,248,.22) 59%,
    rgba(247,250,248,0) 72%); }
.hero .container { position: relative; z-index: 2; padding-top: clamp(38px, 5vw, 64px); padding-bottom: clamp(38px, 5vw, 64px); }
.hero__inner { width:min(48vw,560px); max-width:560px; }
.hero h1 { color: var(--hero-kop-kleur, var(--forest)); font-size: calc(clamp(2.75rem,4.4vw,4.35rem) * var(--kop-schaal, 1)); text-transform: var(--kop-hoofdletters, uppercase); max-width: 11ch; }
.hero p { font-size: clamp(1rem,1.35vw,1.12rem); line-height:1.52; color:color-mix(in srgb, var(--donker) 70%, #333); margin-top: .9rem; max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.25rem; }
.hero__cta .btn--ghost { border-color:color-mix(in srgb, var(--donker) 68%, transparent); background:rgba(255,255,255,.72); color:var(--forest); backdrop-filter:blur(3px); }
.hero__cta .btn--ghost:hover { background:rgba(255,255,255,.94); }
.hero__trust { display: flex; align-items: center; gap: .8rem; margin-top: 1.05rem; font-size: .9rem; color: var(--forest); flex-wrap: wrap; }
.hero__review-link:hover span:last-child { text-decoration: underline; text-underline-offset: .18em; }
.hero__review-link:focus-visible, .stars-link:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; border-radius: 4px; }
.hero-mobile-trust { display: none; }
.stars { display: inline-flex; gap: 2px; color: var(--amber); }
.stars svg { width: 17px; height: 17px; }
.stars-link { display: inline-flex; width: fit-content; }

/* ---------- USP strip ---------- */
.usp-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .2rem 0; color: var(--muted); font-weight: 600; font-size: 1.02rem; }
.usp-row li { display: inline-flex; align-items: center; gap: .5em; }
.usp-row li svg { width: 20px; height: 20px; color: var(--emerald); }
.usp-row li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--line); margin: 0 1.3rem; }
.usp-row li:last-child::after { display: none; }
@media (max-width: 760px){ .usp-row li::after{ display:none } .usp-row{ flex-direction:column; gap:.7rem; align-items:flex-start } }

/* ---------- Service cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1.8rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--mint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex-grow: 1; }
.card h3 { font-size: var(--h3); }
.card p { color: var(--muted); font-size: .98rem; margin-top: .55rem; flex-grow: 1; }
.card .link-arrow { margin-top: 1.1rem; }
.card--dienst { position: relative; }
.card--dienst .link-arrow::after { content: ""; position: absolute; inset: 0; }
body.inl-bewerkmodus-aan .card--dienst .link-arrow::after { display: none; }

/* ---------- Before/After ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 1.7rem; }
.ba { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.ba__viewer { position: relative; aspect-ratio: 4/3; overflow: hidden; user-select: none; }
.ba__viewer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__after { clip-path: inset(0 0 0 50%); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.ba__divider::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; color: var(--forest); font-weight: 800; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow-sm); letter-spacing: -1px; }
.ba__tag { position: absolute; top: 12px; padding: .25em .7em; border-radius: 6px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.ba__tag--before { left: 12px; background: color-mix(in srgb, var(--donker) 80%, transparent); }
.ba__tag--after { right: 12px; background: var(--emerald); }
/* Wrapper om elke voor/na-foto voor de inline fotokiezer (bewerkmodus). Normaal
   'display:contents' zodat hij onzichtbaar is voor de layout en de <img> er
   gewoon absoluut in .ba__viewer positioneert, precies zoals voorheen zonder
   wrapper. In bewerkmodus (zie beheer/inline-editor.css, .inl-veld-afb) krijgt
   de wrapper zelf expliciet dezelfde afmetingen als de foto — nodig omdat deze
   foto's zelf absoluut gepositioneerd zijn en anders niets om op te vullen
   hebben. */
.ba__foto-item { display: contents; }
.inl-veld-afb.ba__foto-item { display: block; position: absolute; inset: 0; }
/* Knopjes van 'voor' en 'na' niet op elkaar: 'voor' links, 'na' rechts (net als
   de Voor/Na-labels), en beide iets lager zodat ze die labels niet overlappen. */
.ba__foto-item .inl-foto-knop { top: 3.1rem; }
.ba__foto-item--voor .inl-foto-knop { left: .6rem; right: auto; }

/* ==========================================================================
   Lege tekstblokken laten vervallen
   ==========================================================================
   Een leeg bewerkbaar veld staat in de HTML als <tag data-veld="...">
   zonder inhoud ertussen — dat matcht :empty. Voor een gewone bezoeker
   verdwijnt zo'n blok dan volledig (geen kale marge/witregel). Zodra iemand
   is ingelogd, zet beheer/inline-editor.js er altijd een potloodje in (ook
   als het veld leeg is); daardoor is het element niet meer leeg en blijft
   het zichtbaar om alsnog tekst toe te voegen. Geldt voor ieder bewerkbaar
   tekstblokje op de site, nu en toekomstig, zonder dat de pagina's zelf
   hoeven te weten of een veld gevuld is. */
[data-veld]:empty { display: none; }

/* De liggende streep vóór de locatie in de voor/na-bijschriften (zie
   hierboven) hoort bij dat vervallen: zonder locatie geen kaal streepje. */
.ba__caption span:has(> [data-veld]:empty) { display: none; }
.ba__caption { padding: .8rem 1.1rem; font-weight: 600; color: var(--forest); display: flex; align-items: center; gap: .5em; }
.ba__caption span { color: var(--muted); font-weight: 500; font-size: .92rem; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 1.8rem; }
.reviews--masonry { align-items: start; }
.reviews--masonry.is-ready { grid-auto-flow: dense; grid-auto-rows: 4px; row-gap: 16px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; display: flex; flex-direction: column; }
.review--met-foto { padding: 0; overflow: hidden; }
.review__foto { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--mint); }
.review__foto-link { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.review__foto-link:focus-visible { outline: 3px solid var(--emerald); outline-offset: -3px; }
.review__inhoud { display: flex; flex-direction: column; flex: 1; }
.review--met-foto .review__inhoud { padding: 1.2rem 1.4rem 1.3rem; }
.review .stars { margin-bottom: .8rem; }
.review p { color: var(--ink); font-size: .98rem; flex-grow: 1; }
.review__by { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
.review__by b { color: var(--forest); display: block; }
.review__by span { color: var(--muted); }
.reviews-cta { text-align: center; margin-top: 1.5rem; }
.review--wide { grid-column: span 3; }
.review-form-wrap { max-width: 760px; margin: 2rem auto 0; padding: clamp(1.3rem, 3vw, 2rem); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.review-form-wrap .section-head { margin-bottom: 1.2rem; }
.review-form-wrap .section-head h2 { font-size: calc(clamp(1.55rem, 3vw, 2.15rem) * var(--kop-schaal, 1)); }
.review-form { display: grid; gap: .85rem; }
.review-form, .review-form > *, .review-form .field, .review-form .field--row { min-width: 0; }
.review-form .field { margin: 0; }
.review-form input, .review-form textarea { min-width: 0; max-width: 100%; }
.review-form input[type="file"] { width: 100%; padding: .7rem; background: var(--paper); }
.review-form .btn { justify-self: start; }
.review-consent { display: flex; align-items: flex-start; gap: .65rem; color: var(--muted); font-size: .92rem; cursor: pointer; }
.review-consent input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--emerald); flex: 0 0 auto; }

.ster-kiezer { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .1rem; margin-top: .3rem; }
.ster-kiezer input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ster-kiezer label { font-size: 1.9rem; line-height: 1; color: #d8ddd7; cursor: pointer; transition: color .1s; }
.ster-kiezer input:checked ~ label,
.ster-kiezer label:hover,
.ster-kiezer label:hover ~ label { color: var(--amber); }
.ster-kiezer input:focus-visible + label { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 3px; }
.review-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.rating-badge { display: inline-flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1.1rem .5rem .6rem; box-shadow: var(--shadow-sm); }
.rating-badge .num { background: var(--forest); color: #fff; font-weight: 800; border-radius: 999px; padding: .2em .7em; font-size: 1.05rem; }
.rating-badge .stars { margin: 0; }
.rating-badge small { color: var(--muted); }

/* ---------- Split / about ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; object-fit: cover; }
.over-foto-zoom { width: 100%; text-align: left; border-radius: var(--radius); cursor: zoom-in; }
.over-foto-zoom:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }
.split h2 { font-size: var(--h2); }
.split p { color: var(--muted); margin-top: .8rem; }
.bg-forest .split p { color: rgba(255,255,255,.82); }
.bg-forest .split h2 { color: #fff; }
.feats { margin-top: 1.1rem; display: grid; gap: .55rem; }
.feats li { display: flex; gap: .65rem; align-items: flex-start; }
.feats svg { width: 21px; height: 21px; color: var(--emerald); flex-shrink: 0; margin-top: .2em; }
.bg-forest .feats svg { color: color-mix(in srgb, var(--accent) 70%, #fff); }
.signature { margin-top: 1.2rem; font-weight: 800; color: var(--forest); }
.signature small { display: block; font-weight: 500; color: var(--muted); }
.bg-forest .signature { color:#fff } .bg-forest .signature small { color: rgba(255,255,255,.7); }

/* ---------- Stat row ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 1.6rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; text-align: center; }
.stat b { display: block; font-size: 2.1rem; color: var(--emerald-600); line-height: 1; }
.stat span { color: var(--muted); font-size: .94rem; margin-top: .3rem; display: block; }

/* ---------- Region / werkgebied ---------- */
.regions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.regions li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .45em 1em; font-size: .92rem; font-weight: 600; color: var(--forest); }
.bg-mint .regions li { background: #fff; }

/* ---------- CTA band ---------- */
.cta { background: var(--forest); color: #fff; border-radius: var(--radius-lg); padding: clamp(1.75rem,3.5vw,2.6rem); text-align: center; position: relative; overflow: hidden; }
.cta h2 { color: #fff; font-size: var(--h2); }
.cta p { margin: .9rem auto 0; max-width: 46em; color: rgba(255,255,255,.85); font-size: 1.1rem; }
.cta__row { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 1.4rem; }

/* ---------- Page hero ---------- */
.page-hero { background: var(--forest); color: #fff; }
.page-hero .container { padding-block: clamp(16px, 2.5vw, 28px); }
.page-hero h1 { color: #fff; font-size: calc(clamp(1.95rem, 3.8vw, 3.05rem) * var(--kop-schaal, 1)); max-width: 26ch; overflow-wrap: anywhere; }
.page-hero p { color: rgba(255,255,255,.82); margin-top: .45rem; max-width: 60ch; font-size: 1.03rem; }
.page-hero__phone-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .16em; }
.page-hero__phone-link:hover { color: color-mix(in srgb, var(--accent) 50%, #fff); }
.page-hero__phone-link:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 50%, #fff); outline-offset: 3px; border-radius: 2px; }
.breadcrumb { display: none; font-size: .82rem; color: rgba(255,255,255,.6); margin-bottom: .4rem; }
.breadcrumb a:hover { color: #fff; }

/* ---------- In de media ---------- */
.media-hero { position: relative; overflow: hidden; }
.media-hero::after { content: "MEDIA"; position: absolute; right: max(var(--gutter), calc((100vw - var(--maxw))/2 + var(--gutter))); bottom: -0.25em; color: rgba(255,255,255,.045); font-size: clamp(4.5rem,14vw,11rem); font-weight: 800; line-height: .75; letter-spacing: -.08em; pointer-events: none; }
.media-hero .container { position: relative; z-index: 1; padding-block: clamp(38px,6vw,72px); }
.media-hero__label { display: inline-flex; margin: .4rem 0 .75rem; padding: .38rem .75rem; border: 1px solid rgba(143,227,187,.42); border-radius: 999px; color: color-mix(in srgb, var(--accent) 50%, #fff); font-size: .73rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.media-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.72fr); align-items: center; gap: clamp(2rem,6vw,5.5rem); max-width: 1040px; margin-inline: auto; }
.media-feature--reverse { grid-template-columns: minmax(300px,.72fr) minmax(0,1fr); }
.media-feature--reverse .media-feature__tekst { order: 2; }
.media-label { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .85rem; color: var(--emerald-600); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.media-label::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.media-feature h2 { font-size: var(--h2); }
.media-feature .lead { margin-top: 1rem; color: var(--forest); font-size: 1.16rem; }
.media-feature__tekst > p:not(.lead) { margin-top: .85rem; color: var(--muted); }
.media-hint { display: flex; align-items: center; gap: .55rem; margin-top: 1.35rem; color: var(--emerald-600); font-size: .86rem; font-weight: 700; }
.media-hint svg { width: 20px; height: 20px; flex: 0 0 auto; }
.media-publicatie { position: relative; overflow: hidden; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; box-shadow: 0 24px 55px -28px color-mix(in srgb, var(--donker) 50%, transparent); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.media-publicatie::before { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(to top,rgba(7,44,25,.8),transparent 28%); opacity: 0; transition: opacity .22s var(--ease); pointer-events: none; }
.media-publicatie img { width: 100%; max-height: 620px; object-fit: cover; object-position: top; }
.media-publicatie > span { position: absolute; z-index: 3; right: 24px; bottom: 22px; left: 24px; color: #fff; font-size: .85rem; font-weight: 800; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .22s var(--ease), transform .22s var(--ease); }
.media-publicatie:hover { transform: translateY(-5px) rotate(.35deg); box-shadow: 0 30px 65px -28px color-mix(in srgb, var(--donker) 62%, transparent); }
.media-publicatie:hover::before, .media-publicatie:hover > span { opacity: 1; }
.media-publicatie:hover > span { transform: none; }
.media-publicatie:focus-visible, .media-foto:focus-visible { outline: 3px solid var(--emerald); outline-offset: 4px; }
.media-concours { overflow: hidden; }
.media-concours__kop { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.6rem; }
.media-concours__jaar { color: color-mix(in srgb, var(--donker) 8%, transparent); font-size: clamp(4rem,10vw,8rem); font-weight: 800; line-height: .8; letter-spacing: -.08em; }
.media-fotowand { display: grid; grid-template-columns: 1.35fr .8fr .8fr; grid-template-rows: 220px 220px; gap: .8rem; }
.media-foto { position: relative; overflow: hidden; min-width: 0; border-radius: var(--radius); background: var(--forest); box-shadow: var(--shadow-sm); }
.media-foto--groot { grid-row: 1 / 3; }
.media-foto--breed { grid-column: 2 / 4; }
.media-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease), opacity .3s var(--ease); }
.media-foto::after { content: "+"; position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--forest); font-size: 1.3rem; font-weight: 500; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease); }
.media-foto:hover img { transform: scale(1.045); opacity: .9; }
.media-foto:hover::after { transform: rotate(90deg); }

/* ---------- Resultaten per dienst ---------- */
.resultaat-tabs {
  --resultaat-tabs-top: 112px;
  position: sticky; top: var(--resultaat-tabs-top); z-index: 45;
  background: rgba(250,251,249,.96);
  backdrop-filter: blur(10px) saturate(150%);
  border-bottom: 1px solid color-mix(in srgb, var(--donker) 8%, transparent);
}
.resultaat-tabs::after {
  content: ""; position: absolute; z-index: 3; top: 100%; left: 0; right: 0; height: 18px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--donker) 20%, transparent), color-mix(in srgb, var(--donker) 6%, transparent) 48%, color-mix(in srgb, var(--donker) 0%, transparent));
  opacity: 0; pointer-events: none; transition: opacity .18s var(--ease);
}
.resultaat-tabs.is-vast::after { opacity: 1; }
.resultaat-tabs .container { padding-block: .72rem; }
.resultaat-tabs__list {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem;
  padding: .35rem; border: 1px solid #d8e3dc; border-radius: 18px;
  background: #edf2ee; box-shadow: inset 0 1px 1px color-mix(in srgb, var(--donker) 4%, transparent);
}
.resultaat-tabs button {
  position: relative; z-index: 1;
  min-width: 0; min-height: 50px; padding: .72rem .8rem; border: 0;
  border-radius: 13px; background: transparent; color: var(--muted);
  font-weight: 700; line-height: 1.2;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.resultaat-tabs button:hover { background: rgba(255,255,255,.72); color: var(--forest); }
.resultaat-tabs button[aria-selected="true"] {
  z-index: 2; background: var(--forest); color: #fff;
  box-shadow: 0 7px 18px -10px rgba(7,44,25,.85);
}
.resultaat-tabs button[aria-selected="true"]:hover { background: var(--forest-700); color: #fff; }
.resultaat-tabs button:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
.resultaat-tab__kort { display: none; }
.resultaat-paneel { background: #e4f0e8; }
.resultaat-paneel .bg-paper,
.resultaat-paneel .bg-mint { background: transparent; }
.resultaat-paneel[hidden] { display: none !important; }
.resultaat-leeg { text-align: center; color: var(--muted); }
.resultaat-paneel .section { padding-block: clamp(24px, 3vw, 38px); }
.resultaat-paneel .ba-grid,
.resultaat-paneel .cards { margin-top: 1.2rem; }
.materiaal-kiezer { padding-block: clamp(26px, 4vw, 46px); }
.materiaal-kaarten { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .8rem; margin-top: 1.5rem; }
.materiaal-kaart { overflow: hidden; padding: 0; text-align: left; border: 2px solid transparent; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); color: var(--ink); transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.materiaal-kaart:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.materiaal-kaart[aria-selected="true"] { border-color: var(--emerald); box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--donker) 55%, transparent); }
.materiaal-kaart img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.materiaal-kaart > span { display: grid; gap: .15rem; padding: .8rem .85rem .95rem; }
.materiaal-kaart b { color: var(--forest); line-height: 1.15; }
.materiaal-kaart small { color: var(--muted); font-size: .79rem; line-height: 1.35; }
.materiaal-kaart:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
.materiaal-verdieping { margin-top: 1.15rem; font-size: .94rem; font-weight: 700; color: var(--emerald-600); }
.materiaal-verdieping a { text-decoration: underline; text-underline-offset: .18em; }
.resultaat-materiaalgroep[hidden] { display: none !important; }
.materiaal-resultaatkop { padding-top: clamp(25px,4vw,44px); }
.materiaal-resultaatkop h2 { font-size: var(--h2); }
.materiaal-resultaatkop p { margin-top: .55rem; color: var(--muted); }
.gebakken-subrubrieken { padding-block: clamp(14px,2vw,22px) clamp(20px,3vw,32px); }
.subrubriek-kaarten { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.subrubriek-kaart { overflow: hidden; min-width: 0; padding: 0; border: 2px solid #cddfd3; border-radius: var(--radius); background: rgba(255,255,255,.78); text-align: left; color: var(--ink); transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); }
.subrubriek-kaart:hover { border-color: #8db9a0; transform: translateY(-2px); }
.subrubriek-kaart[aria-selected="true"] { border-color: var(--emerald); background: #fff; box-shadow: var(--shadow-sm); }
.subrubriek-kaart:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
.subrubriek-kaart__media { display: block; width: 100%; aspect-ratio: 4/3; background: #f4f7f4; }
.subrubriek-kaart__media > img { width: 100%; height: 100%; object-fit: cover; }
.subrubriek-kaart__tekst { display: grid; gap: .25rem; padding: .72rem .78rem .82rem; }
.subrubriek-kaart__tekst b { color: var(--forest); line-height: 1.18; }
.subrubriek-kaart__tekst small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.foto-placeholder { display: flex; width: 100%; height: 100%; min-height: 120px; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; border: 1px dashed #b9cbbf; background: linear-gradient(145deg,#f7f9f7,#e9f1eb); color: #718077; font-size: .8rem; font-weight: 700; }
.foto-placeholder svg { width: 32px; height: 32px; }
.resultaat-subtypegroep[hidden] { display: none !important; }
.subrubriek-resultaatkop { padding-top: clamp(22px,3vw,34px); }
.subrubriek-resultaatkop h2, .subrubriek-resultaatkop h3 { font-size: calc(clamp(1.45rem,2.8vw,2.05rem) * var(--kop-schaal, 1)); color: var(--kop-kleur, var(--forest)); }
.subrubriek-resultaatkop + .section { padding-top: 1rem; }
.resultaat-fotoplaats { display: grid; grid-template-columns: minmax(220px,360px) minmax(0,1fr); gap: clamp(1rem,3vw,2rem); align-items: center; max-width: 850px; margin-inline: auto; padding: 1rem; border: 1px solid #cadbd0; border-radius: var(--radius); background: rgba(255,255,255,.72); }
.resultaat-fotoplaats > .foto-placeholder { aspect-ratio: 4/3; border-radius: var(--radius-sm); }
.resultaat-fotoplaats b { color: var(--forest); font-size: 1.12rem; }
.resultaat-fotoplaats p { margin-top: .25rem; color: var(--muted); }
.resultaat-placeholderkaart { border: 1px solid rgba(139,172,150,.42); background: rgba(255,255,255,.86); box-shadow: none; }
.resultaat-placeholderkaart__media { display: grid; place-items: center; background: #fff; }
.resultaat-placeholderkaart__media svg { width: 38px; height: 38px; color: #bfd0c4; }
.resultaat-placeholderkaart .card__body { min-height: 58px; align-content: center; color: #89978e; font-size: .9rem; font-weight: 600; }

/* ---------- Service detail ---------- */
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.detail--zonder-media { grid-template-columns: 1fr; }
.detail:not(:last-child) { margin-bottom: clamp(2.2rem,4.5vw,4rem); }
.detail--reverse .detail__media { order: 2; }
.detail__media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.detail h2 { font-size: var(--h2); }
.detail p { color: var(--muted); margin-top: .8rem; }
.detail__resultaat-link { margin-top: 1.1rem; }
.detail__steensoorten-link { margin-top: .9rem; }
.detail__media--link { display: block; border-radius: var(--radius); }
.detail__media--link:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }
.pill { display: inline-block; background: var(--mint); color: var(--emerald-600); font-weight: 700; font-size: .82rem; padding: .35em .9em; border-radius: 999px; margin-top: 1.1rem; }

/* ---------- Steensoortenpagina ---------- */
.steen-snelkeuze { position: sticky; top: 144px; z-index: 35; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.steen-snelkeuze .container { display: flex; gap: .45rem; padding-block: .55rem; overflow-x: auto; scrollbar-width: thin; }
.steen-snelkeuze a { flex: 0 0 auto; padding: .48rem .8rem; border-radius: 999px; background: var(--mint); color: var(--forest); font-size: .82rem; font-weight: 700; }
.steen-snelkeuze a:hover { background: #d8eadf; }
.steen-intro { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.8fr); gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.steen-intro__cta { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--mint); }
.steen-intro__cta p { margin-bottom: 1rem; color: var(--muted); }
.steen-sectie { scroll-margin-top: 190px; }
/* Zelfde reden als hierboven, maar dan voor de #reinigen/#onkruidvrij/#impregneren/
   #tarieven-secties op de Diensten-pagina: zonder dit begint de sectie na een
   sprong-link (bv. vanaf de homepage) verstopt achter de vaste bovenbalk.
   112px = exact de hoogte van die bovenbalk (tickerbalk + contactbalk + menu),
   dezelfde waarde als --resultaat-tabs-top hierboven bij de Resultaten-tabs. */
.dienst-sectie { scroll-margin-top: 112px; }
.steen-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.steen-detail--reverse .steen-detail__media, .steen-detail--reverse .steen-fotogrid { order: 2; }
.steen-detail__media img, .steen-fotogrid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.steen-detail__tekst h2 { font-size: var(--h2); }
.steen-detail__tekst > p { margin-top: .8rem; color: var(--muted); }
.steen-detail__tekst > .btn { margin-top: 1.2rem; white-space: normal; text-align: center; }
.steen-fotogrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.steen-fotogrid > .steen-foto-item:only-child img, .steen-fotogrid img:first-child:last-child { grid-column: 1 / -1; }
.steen-foto-item { display: contents; }
.steen-foto-zoom { position: relative; display: block; width: 100%; border-radius: var(--radius); overflow: hidden; }
.steen-foto-zoom::after { content: "+"; position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--forest); font-size: 1.2rem; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease); }
.steen-foto-zoom img { transition: transform .45s var(--ease), opacity .25s var(--ease); }
.steen-foto-zoom:hover img { transform: scale(1.035); opacity: .94; }
.steen-foto-zoom:hover::after { transform: rotate(90deg); }
.steen-foto-zoom:focus-visible { outline: 3px solid var(--emerald); outline-offset: 4px; }
.steen-subtypes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; margin-top: 1.2rem; }
.steen-subtypes div { padding: .9rem; border: 1px solid #cfe1d5; border-radius: var(--radius-sm); background: rgba(255,255,255,.72); }
.steen-subtypes b, .steen-subtypes span { display: block; }
.steen-subtypes b { color: var(--forest); line-height: 1.2; }
.steen-subtypes span { margin-top: .3rem; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.steen-subrubriek-blok { margin-top: clamp(2rem,5vw,4rem); padding-top: clamp(1.4rem,3vw,2.2rem); border-top: 1px solid #cfe1d5; }
.steen-subrubriek-blok .section-head { max-width: 760px; }
.steen-subrubriek-blok .section-head h3 { font-size: calc(clamp(1.45rem,2.8vw,2rem) * var(--kop-schaal, 1)); }
.steen-subrubriek-kaarten { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 1.35rem; }
.steen-subrubriek-kaart { overflow: hidden; display: block; min-width: 0; border: 1px solid #cbded2; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.steen-subrubriek-kaart:hover { transform: translateY(-3px); border-color: var(--emerald); box-shadow: var(--shadow); }
.steen-subrubriek-kaart:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }
.steen-subrubriek-kaart__media { display: block; width: 100%; aspect-ratio: 4/3; background: #f3f7f4; }
.steen-subrubriek-kaart__media > img { width: 100%; height: 100%; object-fit: cover; }
.steen-subrubriek-kaart__tekst { display: grid; gap: .55rem; padding: 1rem; }
.steen-subrubriek-kaart__tekst h3 { color: var(--kop-kleur, var(--forest)); font-size: calc(1.08rem * var(--kop-schaal, 1)); line-height: 1.2; }
.steen-subrubriek-kaart__tekst p { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.steen-subrubriek-kaart__tekst b { color: var(--emerald-600); font-size: .9rem; }

/* ---------- Tarieven ---------- */
.rate-table { margin-top: 1.5rem; width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rate-table th, .rate-table td { text-align: left; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); }
.rate-table th { background: var(--mint); color: var(--forest); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.rate-table tr:last-child td { border-bottom: 0; }
.rate-table td:last-child { font-weight: 800; color: var(--forest); white-space: nowrap; }
.rate-note { color: var(--muted); font-size: .92rem; margin-top: 1rem; }

/* ---------- Contact ---------- */
.contact-section { padding-block: clamp(24px, 3.5vw, 42px); }
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.6rem,4vw,3rem); align-items: start; }
.contact-grid > *, .field--row > *, .aanvraagtype__optie { min-width: 0; }
.field { display: grid; gap: .32rem; margin-bottom: .78rem; }
.field label, .field > span { font-weight: 700; font-size: .92rem; color: var(--forest); }
.field input, .field textarea, .field select { font: inherit; padding: .8em 1em; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(26,151,104,.18); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.contact-info { display: grid; gap: .8rem; }
.contact-info .row { display: flex; gap: .9rem; align-items: flex-start; }
.contact-info .ico { width: 38px; height: 38px; border-radius: 9px; background: var(--mint); color: var(--emerald-600); display: grid; place-items: center; flex-shrink: 0; }
.contact-info .ico svg { width: 20px; height: 20px; }
.contact-info b { color: var(--forest); display: block; }
.contact-info a, .contact-info span { color: var(--muted); }
.contact-info a:hover, .tel-inline:hover { color: var(--emerald-600); text-decoration: underline; }
.contact-info .contact-person { display: inline-flex; align-items: center; min-height: 36px; color: var(--emerald-600); font-weight: 700; text-decoration: underline; text-underline-offset: .16em; }
.tel-inline { color: inherit; text-decoration: underline; text-underline-offset: .14em; }
.map-embed { position: relative; margin-top: 1rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--mint); }
.map-embed iframe { width: 100%; height: 215px; border: 0; display: block; pointer-events: none; background: var(--mint); }
.map-embed__link { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: .75rem; background: linear-gradient(to top, rgba(7,44,25,.32), transparent 45%); }
.map-embed__link span { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem; border-radius: 9px; background: var(--forest); color: #fff; font-size: .9rem; font-weight: 700; box-shadow: var(--shadow-sm); transition: background .18s var(--ease), transform .18s var(--ease); }
.map-embed__link svg { width: 18px; height: 18px; }
.map-embed__link:hover span { background: var(--emerald-600); transform: translateY(-2px); }
.map-embed__link:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }
.form-note { font-size: .85rem; color: var(--muted); margin-top: .5rem; }
.form-result { margin-top: 1.2rem; padding: 1rem 1.2rem; background: var(--mint); border-radius: 10px; color: var(--forest); font-weight: 700; }

/* Lopende tekst voor de privacypagina: smalle kolom leest een stuk prettiger
   dan de volle containerbreedte bij lange juridische tekst. */
.legal-text { max-width: 72ch; }
.legal-text h2 { font-size: calc(1.15rem * var(--kop-schaal, 1)); margin: 2.2rem 0 .8rem; color: var(--kop-kleur, var(--forest)); }
.legal-text h2:first-child { margin-top: 0; }
.legal-text p { margin: 0 0 .9rem; line-height: 1.7; color: var(--muted); }

/* Honeypot tegen spam: onzichtbaar voor bezoekers, wél invulbaar voor bots.
   Bewust GEEN display:none — slimmere bots slaan verborgen velden over, en dan
   vangt de val niets. Dit haalt het veld uit beeld zonder het te verbergen.
   tabindex="-1" in de HTML houdt het buiten de tab-volgorde, aria-hidden buiten
   de schermlezer. */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Melding onder het contactformulier (gevuld door main.js). */
.form-msg { margin-top: 1.2rem; padding: 1rem 1.2rem; border-radius: 10px; font-weight: 700; }
.form-msg.ok { background: var(--mint); color: var(--forest); }
.form-msg.err { background: #FDE8E8; color: #8A1F1F; }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest); color: rgba(255,255,255,.78); padding-block: clamp(36px,5vw,54px) 24px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.4rem; }
.footer-brand { display:flex; align-items:center; gap:.6rem; margin-bottom: 1rem; min-width: 0; }
.footer-brand img { height: 42px; width: auto; max-width: 100%; object-fit: contain; flex-shrink: 1; min-width: 0; }
.footer-brand b { color:#fff; font-weight: 800; font-size: 1.15rem; }
.footer-brand b span { color: color-mix(in srgb, var(--accent) 70%, #fff); }
.site-footer .about-text { font-size: .95rem; max-width: 32ch; }
.site-footer h4 { color: #fff; font-size: calc(.8rem * var(--kop-schaal, 1)); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.05rem; }
.site-footer a:hover { color: #fff; }
.footer-links { display: grid; gap: .55rem; font-size: .96rem; }
.footer-contact { display: grid; gap: .7rem; font-size: .96rem; }
.footer-contact .row { display: flex; gap: .6rem; align-items: center; }
.footer-contact svg { width: 16px; height: 16px; color: color-mix(in srgb, var(--accent) 70%, #fff); flex-shrink: 0; }
.footer-bottom { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: rgba(255,255,255,.55); }
.footer-bottom a:hover { color: #fff; }

/* ---------- Preview banner ---------- */
.preview-flag { background: var(--forest-700); color: #cdeedd; text-align: center; font-size: .8rem; padding: .5rem 1rem; }
.preview-flag b { color: #fff; }

/* ---------- FAQ (accordeon) ---------- */
.container--narrow { max-width: 820px; }
.faq { display: grid; gap: .8rem; margin-top: 1.7rem; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq__vraag { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem; cursor: pointer; font-weight: 700; font-size: 1.05rem; color: var(--forest); list-style: none; transition: color .18s var(--ease); }
.faq__vraag::-webkit-details-marker { display: none; }
.faq__vraag::marker { content: ""; }
.faq__vraag:hover { color: var(--emerald); }
.faq__vraag:focus-visible { outline: 3px solid var(--emerald); outline-offset: -3px; }
.faq__chevron { width: 22px; height: 22px; flex-shrink: 0; color: var(--emerald); transition: transform .25s var(--ease); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__antwoord { padding: 0 1.4rem 1.3rem; color: var(--muted); }
.faq__antwoord p { margin: 0; }

/* ---------- Facebook-blok ---------- */
.fb-direct { max-width: 720px; margin: 1.4rem auto 0; padding: 1.25rem 1.4rem; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(255,255,255,.08); display: flex; align-items: center; gap: 1rem; }
.fb-direct__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--emerald); flex: 0 0 auto; }
.fb-direct__icon svg { width: 25px; height: 25px; }
.fb-direct__tekst { flex: 1; min-width: 0; }
.fb-direct__tekst h3 { color: #fff; font-size: calc(1.12rem * var(--kop-schaal, 1)); }
.fb-direct__tekst p { color: rgba(255,255,255,.78); font-size: .94rem; margin-top: .2rem; }
.fb-direct .btn { flex: 0 0 auto; }

/* ---------- Tellerbalk ---------- */
.exp-stats { background: var(--forest); color: #fff; }
.exp-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: clamp(1rem, 2vw, 1.45rem); text-align: center; }
.exp-stat { display: grid; gap: .35rem; padding: .3rem 1rem; position: relative; }
.exp-stat + .exp-stat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 54%; background: rgba(255,255,255,.14); }
.exp-stat__num { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; }
.exp-stat__num--tekst { font-size: clamp(1.45rem, 2.6vw, 2.25rem); }
.exp-stat__mark { color: color-mix(in srgb, var(--accent) 70%, #fff); }
.exp-stat__star { color: var(--amber); font-size: .52em; margin-left: .16em; vertical-align: .23em; }
.exp-stat__label { color: rgba(255,255,255,.72); font-size: .95rem; font-weight: 600; }
@media (max-width: 980px) {
  .exp-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem 0; }
  .exp-stat:nth-child(odd)::before { display: none; }
}

/* ---------- Offerte: sleep-foto-upload ---------- */
.veld-optioneel { color: var(--muted); font-weight: 400; font-size: .85em; }
.dropzone { position: relative; border: 2px dashed var(--line); border-radius: var(--radius); background: #fff; transition: border-color .18s var(--ease), background .18s var(--ease); }
.dropzone.is-over { border-color: var(--emerald); background: var(--mint); }
.dropzone__leeg[hidden], .dropzone__preview[hidden] { display: none; }
.dropzone__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.dropzone__input:focus-visible + .dropzone__leeg { outline: 3px solid var(--emerald); outline-offset: 2px; border-radius: var(--radius); }
.dropzone__leeg { display: grid; justify-items: center; gap: .25rem; padding: 1.1rem 1rem; text-align: center; cursor: pointer; color: var(--muted); }
.dropzone__leeg svg { width: 30px; height: 30px; color: var(--emerald); margin-bottom: .35rem; }
.dropzone__hint { color: var(--ink); font-size: .98rem; }
.dropzone__sub { font-size: .82rem; }
.dropzone__preview { display: flex; align-items: center; gap: 1rem; padding: .9rem; }
.dropzone__img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--mint); }
.dropzone__meta { display: grid; gap: .3rem; min-width: 0; }
.dropzone__naam { font-weight: 600; color: var(--forest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__verwijder { justify-self: start; color: #a12a2a; font-weight: 600; font-size: .9rem; text-decoration: underline; }
.dropzone__verwijder:hover { color: #7d1f1f; }
.dropzone__fout { color: #a12a2a; font-size: .9rem; padding: 0 .9rem .8rem; margin: 0; }

/* ---------- Contactformulier: type-keuze (offerte / vraag) ---------- */
.aanvraagtype { display: flex; gap: .6rem; margin-bottom: 1.3rem; }
.aanvraagtype__optie { flex: 1; }
.aanvraagtype__optie input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: -1px; }
.aanvraagtype__optie span { display: block; text-align: center; padding: .75rem 1rem; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 700; color: var(--muted); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); }
.aanvraagtype__optie span:hover { border-color: var(--emerald); }
.aanvraagtype__optie input:checked + span { border-color: var(--emerald); background: var(--mint); color: var(--forest); }
.aanvraagtype__optie input:focus-visible + span { outline: 3px solid var(--emerald); outline-offset: 2px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .cards, .reviews { grid-template-columns: repeat(2, 1fr); }
  .ba-grid { grid-template-columns: 1fr; }
  .review--wide { grid-column: span 2; }
  .split, .detail, .detail--reverse { grid-template-columns: 1fr; }
  .split--reverse .split__media, .detail--reverse .detail__media { order: -1; }
  .stat-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .materiaal-kaarten { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .subrubriek-kaarten { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .steen-subrubriek-kaarten { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .steen-snelkeuze { top: 151px; }
  .media-feature, .media-feature--reverse { grid-template-columns: minmax(0,1fr) minmax(260px,.72fr); gap: 2rem; }
  .media-fotowand { grid-template-rows: 180px 180px; }
}
@media (max-width: 1100px) {
  .nav-cta { display: none; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 149px); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); padding: 1rem var(--gutter) 1.5rem; border-bottom: 1px solid var(--line); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); box-shadow: var(--shadow); display: none; }
  body.nav-open .nav-links { display: flex; transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: .9rem .25rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav-submenu { border-bottom: 1px solid var(--line); }
  .nav-submenu > summary { display: flex; justify-content: space-between; width: 100%; padding: .9rem .25rem; font-size: 1.05rem; }
  .nav-submenu__panel { position: static; width: auto; max-height: none; overflow: visible; padding: 0 0 .7rem .7rem; transform: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .nav-submenu__panel a { padding: .58rem .7rem; border: 0; font-size: .94rem; }
  .nav-links a::after { display: none; }
  .nav-links > .btn { display: inline-flex; margin-top: 1rem; }
  .nav-toggle { display: flex; }
}
@media (max-width: 720px) {
  .cards, .reviews { grid-template-columns: 1fr; }
  .reviews--masonry.is-ready { grid-auto-flow: row; grid-auto-rows: auto; row-gap: 1.3rem; }
  .reviews--masonry.is-ready .review { grid-row-end: auto !important; }
  .review--wide { grid-column: span 1; }
  .field--row { grid-template-columns: 1fr; }
  .aanvraagtype { align-items: stretch; }
  .aanvraagtype__optie { display: flex; }
  .aanvraagtype__optie span { display: grid; place-items: center; width: 100%; min-height: 64px; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .bg-forest .split { gap: 1.15rem; }
  .topbar { font-size: .78rem; }
  .site-ticker { font-size: .74rem; }
  .site-ticker__track { min-height: 29px; gap: 2.6rem; animation-duration: 28s; }
  .topbar .container { justify-content: center; gap: .55rem .85rem; height: auto; min-height: 46px; padding-top: .7rem; padding-bottom: .55rem; }
  .topbar a.topbar__email { display: none; }
  .topbar__social { display: inline-flex; gap: .55rem; padding-left: .65rem; }
  .resultaat-tabs .container { padding: .5rem 8px; }
  .resultaat-tabs__list { gap: 3px; padding: 4px; border-radius: 14px; }
  .resultaat-tabs button { min-height: 44px; padding: .65rem .18rem; border-radius: 10px; font-size: .84rem; }
  .resultaat-tab__volledig { display: none; }
  .resultaat-tab__kort { display: inline; }
  .materiaal-kiezer { padding-block: 24px 28px; }
  .materiaal-kaarten { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-top: 1.1rem; }
  .materiaal-kaart:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .materiaal-kaart:first-child img { height: 100%; aspect-ratio: 4/3; }
  .materiaal-kaart:first-child > span { align-content: center; gap: .55rem; padding: 1rem .8rem; }
  .materiaal-kaart > span { padding: .7rem; }
  .materiaal-kaart b { font-size: .9rem; }
  .materiaal-kaart small { font-size: .72rem; }
  .materiaal-resultaatkop { padding-top: 25px; }
  .subrubriek-kaarten { grid-template-columns: 1fr; gap: .6rem; }
  .subrubriek-kaart { display: grid; grid-template-columns: 112px minmax(0,1fr); }
  .subrubriek-kaart__media { height: 100%; min-height: 92px; aspect-ratio: auto; }
  .subrubriek-kaart__media .foto-placeholder { min-height: 92px; }
  .subrubriek-kaart__tekst { align-content: center; }
  .subrubriek-resultaatkop { padding-top: 22px; }
  .resultaat-fotoplaats { grid-template-columns: 1fr; padding: .8rem; }
  .resultaat-fotoplaats > .foto-placeholder { min-height: 170px; }
  .steen-snelkeuze { top: 149px; }
  .steen-intro, .steen-detail { grid-template-columns: 1fr; }
  .steen-detail--reverse .steen-detail__media, .steen-detail--reverse .steen-fotogrid { order: 0; }
  .steen-subtypes { grid-template-columns: 1fr; }
  .steen-subrubriek-kaarten { grid-template-columns: 1fr; gap: .7rem; }
  .steen-subrubriek-kaart { display: grid; grid-template-columns: 116px minmax(0,1fr); }
  .steen-subrubriek-kaart__media { height: 100%; min-height: 126px; aspect-ratio: auto; }
  .steen-subrubriek-kaart__media .foto-placeholder { min-height: 126px; }
  .steen-subrubriek-kaart__tekst { align-content: center; padding: .8rem; }
  .steen-sectie { scroll-margin-top: 198px; }
  .hero { min-height: clamp(640px, calc(100svh - 118px), 690px); align-items: flex-start; color: var(--forest); }
  .hero__media img { object-position: center center; transform: none; }
  .hero::after {
    background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,0) 72%);
  }
  .hero .container { padding-top: clamp(28px, 7vw, 38px); padding-bottom: 24px; }
  .hero__inner { width:min(100%,315px); max-width: 315px; }
  .hero h1 { color: var(--hero-kop-kleur, #fff); font-size: calc(clamp(2rem, 9.5vw, 2.55rem) * var(--kop-schaal, 1)); line-height: 1.03; max-width: 10ch; text-shadow: 0 2px 12px color-mix(in srgb, var(--donker) 28%, transparent); }
  .hero p { color: color-mix(in srgb, var(--donker) 80%, #222); font-size: .92rem; line-height: 1.47; max-width: 30ch; margin-top: .7rem; text-shadow: 0 1px 8px rgba(255,255,255,.5); }
  .hero__cta { width: min(100%, 315px); flex-direction: column; align-items: flex-start; gap: .45rem; margin-top: .9rem; }
  .hero__cta .btn { min-height: 44px; justify-content: center; padding: .65rem .85rem; font-size: .82rem; }
  .hero__cta .btn--primary { width: min(78vw, 286px); }
  .hero__cta .btn--ghost { width: min(55vw, 205px); align-self: flex-start; border-color: color-mix(in srgb, var(--donker) 72%, transparent); background: rgba(255,255,255,.56); color: var(--forest); backdrop-filter: blur(3px); }
  .hero__cta .btn--ghost:hover { background: rgba(255,255,255,.76); }
  .hero__trust--desktop { display: none; }
  .home-usp { padding-block: 14px 20px; }
  .hero-mobile-trust { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; padding: .15rem 0 .9rem; border-bottom: 1px solid var(--line); color: var(--forest); font-size: .8rem; font-weight: 650; line-height: 1.3; }
  .hero-mobile-trust .stars { flex-shrink: 0; }
  .card__media { height: clamp(175px, 56vw, 225px); aspect-ratio: auto; }
  .fb-direct { flex-direction: column; text-align: center; padding: 1.2rem; }
  .fb-direct .btn { width: 100%; }
  .cta__row { flex-direction: column; align-items: stretch; }
  .cta__row .btn { width: 100%; }
  /* Tarieftabel: sommige waarden zijn hele zinnen, geen korte prijs. Op smal
     scherm mag de prijskolom dus afbreken — anders duwt nowrap de tabel breder
     dan de telefoon en gaat de hele pagina horizontaal scrollen. */
  .rate-table th, .rate-table td { padding: .8rem 1rem; }
  .rate-table td:last-child { white-space: normal; }
  .faq__vraag { padding: 1rem 1.1rem; font-size: 1rem; }
  .faq__antwoord { padding: 0 1.1rem 1.1rem; }
  .media-hero::after { right: 18px; font-size: 7rem; }
  .media-hero .container { padding-block: 34px 40px; }
  .media-feature, .media-feature--reverse { grid-template-columns: 1fr; gap: 1.5rem; }
  .media-feature--reverse .media-feature__tekst { order: 0; }
  .media-feature__tekst { text-align: left; }
  .media-publicatie { max-width: 460px; margin-inline: auto; }
  .media-publicatie img { max-height: none; }
  .media-concours__kop { align-items: start; }
  .media-concours__jaar { display: none; }
  .media-fotowand { grid-template-columns: 1fr 1fr; grid-template-rows: 210px 140px 180px; gap: .55rem; }
  .media-foto--groot { grid-column: 1 / 3; grid-row: auto; }
  .media-foto--breed { grid-column: 1 / 3; }
  .media-foto { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .site-ticker__track { animation: none; } }
@media (min-width: 721px) and (max-width: 950px) and (max-height: 600px) {
  .hero { min-height: 520px; align-items: flex-start; color: var(--forest); }
  .hero__media img { object-position: center center; transform: none; }
  .hero::after {
    background: linear-gradient(100deg, rgba(255,255,255,.65), rgba(255,255,255,.16) 70%, transparent);
  }
  .hero .container { padding-top: 34px; }
  .hero h1 { color: var(--hero-kop-kleur, var(--forest)); }
  .hero p, .hero__trust { color: var(--forest); }
  .hero__cta .btn--ghost { border-color: var(--forest); background: rgba(255,255,255,.55); color: var(--forest); }
}

/* Zwevende WhatsApp-link en terug-naar-boven-knop */
.whatsapp-float {
  position: fixed; right: clamp(14px, 3vw, 30px); bottom: clamp(14px, 3vw, 30px); z-index: 65;
  width: 60px; height: 60px; display: grid; place-items: center;
  border: 3px solid #fff; border-radius: 50%;
  background: #25d366; color: #fff;
  box-shadow: 0 10px 28px rgba(10, 60, 35, .3);
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.whatsapp-float svg { width: 31px; height: 31px; }
.whatsapp-float:hover { background: #1fba59; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10, 60, 35, .36); }
.whatsapp-float:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }

.to-top {
  position: fixed; right: clamp(14px, 3vw, 30px); bottom: calc(clamp(14px, 3vw, 30px) + 72px); z-index: 60;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--forest); color: #fff; box-shadow: var(--shadow-sm);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease), background .2s var(--ease);
}
.to-top svg { width: 22px; height: 22px; }
.to-top:hover { background: var(--emerald); }
.to-top:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
body[data-inl-csrf] .whatsapp-float { bottom: calc(clamp(14px, 3vw, 30px) + 70px); }
body[data-inl-csrf] .to-top { bottom: calc(clamp(14px, 3vw, 30px) + 142px); }
@media (max-width: 600px) {
  .whatsapp-float { width: 56px; height: 56px; }
  .whatsapp-float svg { width: 29px; height: 29px; }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-float, .to-top { transition: none; } }

/* ==========================================================================
   Foto's groter bekijken (resultatenpagina)
   ========================================================================== */

/* Vergrootknop op een voor/na. Moet BOVEN .ba__range liggen: die ligt met
   inset:0 over de hele viewer en zou de knop anders opslokken. */
.ba__zoom {
  position: absolute; z-index: 2; right: 12px; bottom: 12px;
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--forest);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.ba__zoom svg { width: 17px; height: 17px; }
.ba__zoom:hover { background: #fff; transform: scale(1.08); }
.ba__zoom:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }

/* De projectkaarten zijn nu knoppen (waren <a> zonder href). Browserstijl eraf. */
.card--zoom {
  font: inherit; color: inherit; text-align: left; padding: 0;
  cursor: zoom-in; width: 100%;
}
.card--zoom:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }

/* De lightbox zelf. */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(7, 44, 25, .88);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.lightbox[hidden] { display: none; }
.lightbox__inhoud {
  position: relative;
  width:min(92vw,1400px); height:min(82vh,920px); max-width:100%; min-height:0;
}
.lightbox__media {
  display:grid; grid-template-rows:minmax(0,1fr) auto; gap:.75rem; justify-items:center;
  width:100%; height:100%; min-height:0;
}
.lightbox__viewport {
  position:relative; display:grid; place-items:center; overflow:hidden; width:100%; height:100%; min-height:0;
  border-radius:var(--radius); cursor:default; touch-action:none;
}
.lightbox__foto {
  display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  border-radius:var(--radius); box-shadow:var(--shadow); user-select:none; -webkit-user-drag:none;
  transform-origin:center center; will-change:transform;
}
/* Gewone foto's staan los van de gridberekening. Daardoor verwijst 100%
   altijd naar het zichtbare fotovak en kan een breed beeld niet op volledige
   breedte doorlopen achter de onderrand. Publicaties blijven in de normale
   documentflow staan, zodat hun eigen scroll- en zoomgedrag behouden blijft. */
.lightbox__foto:not(.lightbox__foto--document) {
  position:absolute; inset:0; margin:auto; cursor:zoom-in;
}
.lightbox__viewport.is-zoomed .lightbox__foto:not(.lightbox__foto--document){cursor:grab}
.lightbox__viewport.is-dragging .lightbox__foto:not(.lightbox__foto--document){cursor:grabbing}
/* Publicaties zijn lange pagina's, geen gewone foto's. Op 100% passen ze in
   de breedte en kan de bezoeker direct naar beneden scrollen. Inzoomen maakt
   het document werkelijk groter, zodat ook dan de eigen scrollbalk bruikbaar
   blijft in plaats van dat alleen een uitgesneden deel zichtbaar is. */
.lightbox--document { padding-block: .75rem; }
.lightbox--document .lightbox__inhoud { width: min(94vw, 1050px); height: 94vh; }
.lightbox__viewport--document {
  display: block; overflow: auto; padding: 4.5rem 1rem 1rem;
  background: rgba(7,44,25,.42); cursor: auto; touch-action: pan-x pan-y;
  overscroll-behavior: contain; scrollbar-gutter: stable both-edges;
}
.lightbox__foto--document {
  width: 100%; max-width: 100%; max-height: none; height: auto; margin-inline: auto;
  border-radius: 4px; transform-origin: top left;
}
.lightbox__viewport--document.is-zoomed,
.lightbox__viewport--document.is-dragging { cursor: auto; }
/* De afmetingen worden bij openen uit de echte fotoverhouding berekend. Zo
   blijven zowel liggende als staande voor/na-paren volledig binnen het scherm. */
.lightbox .ba__viewer {
  width: var(--ba-modal-width, min(92vw, 1100px));
  height: var(--ba-modal-height, min(76vh, 825px));
  aspect-ratio: auto;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.lightbox__bijschrift {
  margin: 0; color: #fff; font-weight: 600; text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.lightbox__sluit {
  position: absolute; z-index: 4; top: 1rem; right: 1rem;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff;
}
.lightbox__sluit svg { width: 22px; height: 22px; }
.lightbox__sluit:hover { background: rgba(255,255,255,.28); }
.lightbox__sluit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lightbox__zoomtools {
  position:absolute; z-index:3; top:1rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.3rem; padding:.32rem;
  border:1px solid rgba(255,255,255,.3); border-radius:999px;
  background:rgba(7,44,25,.76); color:#fff; box-shadow:var(--shadow-sm);
}
.lightbox__zoomknop {
  display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:50%;
  color:#fff; background:transparent;
}
.lightbox__zoomknop:hover{background:rgba(255,255,255,.18)}
.lightbox__zoomknop:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lightbox__zoomknop:disabled{opacity:.38;cursor:not-allowed}
.lightbox__zoomknop svg{width:20px;height:20px}
.lightbox__zoomwaarde{min-width:3.2rem;text-align:center;font-size:.78rem;font-weight:750}
.lightbox__nav {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--forest); box-shadow: var(--shadow-sm);
}
.lightbox__nav[hidden] { display: none; }
.lightbox__nav svg { width: 24px; height: 24px; }
.lightbox__nav:hover { background: #fff; }
.lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lightbox__vorige { left: clamp(.75rem, 3vw, 2rem); }
.lightbox__volgende { right: clamp(.75rem, 3vw, 2rem); }
.lightbox__teller {
  position: absolute; left: 50%; bottom: .65rem; transform: translateX(-50%);
  margin: 0; padding: .28rem .75rem; border-radius: 999px;
  background: rgba(7,44,25,.72); color: #fff; font-size: .82rem; font-weight: 700;
}
.lightbox__teller[hidden] { display: none; }

@media (max-width: 640px) {
  .lightbox { padding: .75rem; }
  .lightbox__inhoud{width:96vw;height:82vh}
  .lightbox__zoomtools{top:.7rem;left:.7rem;transform:none}
  .lightbox__zoomknop{width:36px;height:36px}
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__vorige { left: .45rem; }
  .lightbox__volgende { right: .45rem; }
  .lightbox--document { padding: .25rem; }
  .lightbox--document .lightbox__inhoud { width: 99vw; height: 96vh; }
  .lightbox__viewport--document { padding: 1rem .35rem .35rem; border-radius: 10px; }
}

@media (hover: none) and (pointer: coarse) {
  .lightbox__zoomtools { display: none; }
  .lightbox__viewport { cursor: default; }
  .lightbox__foto:not(.lightbox__foto--document),
  .lightbox__viewport.is-zoomed .lightbox__foto:not(.lightbox__foto--document),
  .lightbox__viewport.is-dragging .lightbox__foto:not(.lightbox__foto--document) { cursor: default; }
}

/* Vrije inhoud van extra pagina's (Beheer » Pagina's).
   Bewust exact dezelfde maatvoering als de tekstsecties en tekstrijen van de
   vaste pagina's: links uitgelijnd op de rand van de container (gelijk met de
   paginatitel erboven) en over de volle breedte van de container, net als de
   pluspuntenbalk en de header; dezelfde kopgroottes, tekstkleur en knoppen.
   Een bezoeker die vanuit Google op zo'n pagina binnenkomt, mag geen verschil
   zien met de rest van de site. */
.pagina-inhoud {
  max-width: none;
  color: var(--muted);
  font-size: 1.08rem;
  overflow-wrap: anywhere;
}
.pagina-inhoud > :first-child { margin-top: 0; }
.pagina-inhoud h1,
.pagina-inhoud h2 {
  margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
  font-size: var(--h2);
}
.pagina-inhoud h3 {
  margin-top: 1.9rem;
  font-size: calc(clamp(1.35rem, 2.6vw, 1.8rem) * var(--kop-schaal, 1));
}
.pagina-inhoud p { margin-top: .8rem; }
.pagina-inhoud h2 + p,
.pagina-inhoud h3 + p { margin-top: .65rem; }
.pagina-inhoud a { color: var(--emerald-600); text-decoration: underline; text-underline-offset: 2px; }
.pagina-inhoud strong, .pagina-inhoud b { color: var(--ink); }
/* Lijsten zoals elders op de site: groene vinkjes in plaats van bolletjes. */
.pagina-inhoud ul { margin-top: 1.1rem; display: grid; gap: .55rem; }
.pagina-inhoud ul > li { position: relative; padding-left: 2rem; }
.pagina-inhoud ul > li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 21px; height: 21px;
  background: var(--emerald);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Lange lijsten (bijv. werkgebied met plaatsnamen) in kolommen. */
.pagina-inhoud ul:has(> li:nth-child(9)) { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); column-gap: 1.5rem; }
.pagina-inhoud ol { margin-top: 1.1rem; padding-left: 1.4em; list-style: decimal; }
.pagina-inhoud ol > li + li { margin-top: .4rem; }
.pagina-inhoud blockquote { margin-top: 1.4rem; padding: 1.2rem 1.4rem; border-left: 4px solid var(--emerald); border-radius: 0 var(--radius) var(--radius) 0; background: var(--mint); color: var(--ink); }
.pagina-inhoud img {
  display: block;
  max-width: min(100%, 900px);
  height: auto;
  margin-top: 1.6rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Zonder opgegeven breedte vult een foto de kolom; met width="…" (bijv. uit
   WordPress) behoudt hij dat formaat, op een telefoon nooit breder dan het scherm. */
.pagina-inhoud img:not([width]) { width: 100%; }
.pagina-inhoud img[width] { height: auto; }
.pagina-inhoud figure { margin-top: 1.6rem; }
.pagina-inhoud figure img { margin-top: 0; }
.pagina-inhoud figcaption { margin-top: .5rem; font-size: .92rem; }
/* Knoppen in de tekst (bijv. "Bel" of "Contactformulier") = de groene sitebuttons. */
.pagina-inhoud .ps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  margin: 1.2rem .6rem 0 0;
  padding: .85em 1.55em; border-radius: 10px;
  background: var(--emerald); color: #fff; box-shadow: var(--shadow-sm);
  font-weight: 700; font-size: .98rem; line-height: 1.2; text-decoration: none;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.pagina-inhoud .ps-btn:hover { background: var(--emerald-600); transform: translateY(-2px); }
.pagina-inhoud .ps-btn:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }

/* Extra pagina met de opmaak "landingspagina": dezelfde header als de homepage.
   Paginatitels zijn langer dan de homepagekop, dus iets kleiner en breder. */
@media (min-width: 721px) {
  .hero--landing h1 { max-width: 17ch; font-size: calc(clamp(2.2rem, 3.6vw, 3.6rem) * var(--kop-schaal, 1)); }
  .hero--landing .hero__inner { width: min(56vw, 640px); max-width: 640px; }
}
@media (max-width: 720px) {
  .hero--landing h1 { max-width: 14ch; font-size: calc(clamp(1.75rem, 8vw, 2.2rem) * var(--kop-schaal, 1)); }
}
.hero__beheerlink { font-size: .88rem !important; }
.hero__beheerlink a { text-decoration: underline; }
#klantbeoordelingen { scroll-margin-top: 140px; }

/* Tekstrijen op extra pagina's lopen even breed door als de inhoud erboven. */
.pagina-hoofd .tekstrij-inhoud { max-width: none; }

/* =============================================================================
   247ICT-template — aanvullingen
   ============================================================================= */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 400; padding: .6rem 1rem; background: var(--forest); color: #fff; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
.pagina-uit-melding { position: relative; z-index: 300; background: #b3261e; color: #fff; text-align: center; padding: .6rem 1rem; font-size: .9rem; }
.pagina-uit-melding a { color: #fff; text-decoration: underline; font-weight: 600; margin-left: .3rem; }
.pagina-uit-melding--onderhoud { background: #7a5b00; }
.pagina-uit-melding code { background: rgba(255,255,255,.15); padding: .05em .35em; border-radius: 4px; }

/* Logo: hoogte instelbaar via Opmaak & huisstijl (--logo-hoogte). */
.brand img { height: var(--logo-hoogte, 40px); max-width: min(max(220px, calc(var(--logo-hoogte, 0px) * 10)), 100%); } /* brede logo's: met een ingestelde hoogte mag het logo breder worden */
@media (max-width: 640px) { .brand img { height: calc(var(--logo-hoogte, 40px) * .85); } }

/* Social-media-iconen (bovenbalk, footer, blog-zijbalk) */
.social-iconen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.social-iconen a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; transition: background .18s var(--ease), transform .18s var(--ease); }
.social-iconen a:hover, .social-iconen a:focus-visible { background: var(--accent); transform: translateY(-2px); }
.social-iconen svg { width: 17px; height: 17px; }
.widget .social-iconen a, .bg-paper .social-iconen a { background: var(--mint); color: var(--forest); }
.widget .social-iconen a:hover { background: var(--accent); color: #fff; }
.topbar__social svg { width: 15px; height: 15px; }
.footer-naam { color: #fff; font-weight: 800; font-size: 1.2rem; margin-bottom: .8rem; }
.footer-brand img { height: auto; max-height: var(--logo-hoogte, 42px); }

/* Homepage */
.home-intro__tekst { margin-top: .8rem; color: var(--ink); font-size: 1.06rem; }
.home-intro__tekst > * + * { margin-top: .8rem; }
.card__datum { font-size: .82rem; color: var(--muted); margin-bottom: .3rem; }
.card h3 a:hover { color: var(--emerald-600); }
.hero__beheerlink { margin-top: 1rem; font-size: .9rem; }
.hero__beheerlink a, .page-hero .hero__beheerlink a { text-decoration: underline; }
.page-hero .hero__beheerlink a { color: #fff; }
.resultaat-fotos { margin-top: 1.8rem; }
.resultaat-fotos .card__media { display: block; width: 100%; padding: 0; cursor: zoom-in; }
.legal-text h2 { margin-top: 1.8rem; }
.legal-text p { margin-top: .7rem; }
.legal-text a { color: var(--emerald-600); text-decoration: underline; }