/* ==========================================================================
   Zuidstad Financiële Planning — website
   Bron: _ontwerp/homepage.html (goedgekeurd ontwerp). Gebruik altijd de tokens
   in :root, nooit losse kleurcodes. Zie CLAUDE.md voor het designsysteem.
   ========================================================================== */

/* Lettertypen lokaal gehost (geen verbinding met Google, AVG-vriendelijk) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --ink:#241633;
  --ink-soft:#4B3A5C;
  --purple-900:#33184A;
  --purple-800:#3F1F5C;
  --purple-700:#54297A;
  --purple-600:#652F92;
  --blauw-500:#22A4DD;
  --blauw-400:#57BAE5;
  --paper:#FFFFFF;
  --tint:#F6F3FA;
  --tint-dark:#EFE9F5;
  --line:#E3DCEC;
  --line-on-purple:rgba(255,255,255,0.22);
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:26px;
  --shadow-card: 0 1px 2px rgba(36,22,51,0.06), 0 12px 28px -14px rgba(36,22,51,0.18);
  --max: 1180px;
  --titel: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Lettertype en dikte zijn in te stellen bij Beheer → Instellingen → Huisstijl;
     wat daar afwijkt komt als :root in de head te staan. */
  --titel-gewicht: 600;
  --tekst-gewicht: 400;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:var(--tekst-gewicht, 400);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--titel);
  font-weight:var(--titel-gewicht, 600);
  line-height:1.12;
  margin:0;
  color:var(--ink);
  letter-spacing:-0.01em;
}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

:focus-visible{outline:3px solid var(--blauw-500);outline-offset:3px;border-radius:4px;}

.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;z-index:999;
}
.skip-link:focus{left:16px;top:16px;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 24px;
  border-radius:999px;
  font-weight:600;
  font-size:0.98rem;
  /* Vaste regelhoogte: anders neemt een knop die van zijn omgeving over en is
     hij in een tekstblok 57px en in een zijkaart 49px in plaats van 54px. */
  line-height:1.55;
  text-decoration:none;
  border:1.5px solid transparent;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--knop-bg, var(--blauw-500));color:var(--knop-tekst, var(--purple-900));}
.btn-primary:hover{background:var(--knop-bg-hover, var(--blauw-400));}
/* Paarse knop met witte tekst: in het dienstenblok op de homepage. */
.btn-paars{background:var(--purple-800);color:#fff;border-color:var(--purple-800);}
.btn-paars:hover{background:var(--purple-700);border-color:var(--purple-700);color:#fff;}
.btn-ghost-onlight{background:transparent;color:var(--purple-800);border-color:var(--line);}
.btn-ghost-onlight:hover{border-color:var(--purple-700);background:var(--tint);}
.btn-ghost-ondark{background:transparent;color:#fff;border-color:var(--line-on-purple);}
.btn-ghost-ondark:hover{border-color:#fff;background:rgba(255,255,255,0.08);}
.btn-quiet{background:none;border:none;padding:6px 0;font-weight:600;color:var(--purple-700);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line);}
.btn-quiet:hover{text-decoration-color:var(--purple-700);}

.eyebrow-none{margin:0;}

/* ---------- UTILITY BAR ---------- */
.util-bar{
  background:var(--purple-900);
  color:#EFE7F7;
  font-size:0.82rem;
}
.util-bar .wrap{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:9px;padding-bottom:9px;
  gap:16px;flex-wrap:wrap;
}
.util-left{display:flex;gap:22px;flex-wrap:wrap;}
.util-left a,.util-left span{display:inline-flex;align-items:center;gap:7px;}
.util-left svg{flex-shrink:0;opacity:0.65;}
.util-left a{text-decoration:none;color:#EFE7F7;opacity:0.92;}
.util-left a:hover{opacity:1;text-decoration:underline;}
.util-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.util-right a{text-decoration:none;color:#EFE7F7;opacity:0.92;}
.util-right a:hover{opacity:1;}
.lang-switch{display:flex;gap:2px;background:rgba(255,255,255,0.08);padding:3px;border-radius:999px;}
.lang-switch button{
  background:none;border:none;color:#EFE7F7;font-size:0.78rem;padding:4px 10px;border-radius:999px;font-weight:600;
}
.lang-switch button[aria-current="true"]{background:#fff;color:var(--purple-900);}

/* ---------- MAIN NAV ---------- */
.main-nav{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.main-nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;padding-bottom:14px;gap:20px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.brand img{height:40px;width:auto;}
.primary-links{display:flex;align-items:center;gap:30px;flex:1;justify-content:center;}
.primary-links a{
  text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:0.96rem;
  padding:6px 2px;border-bottom:2px solid transparent;
}
.primary-links a:hover{color:var(--purple-800);border-bottom-color:var(--blauw-500);}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.icon-btn{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);
  background:#fff;display:flex;align-items:center;justify-content:center;
  color:var(--purple-800);
}
.icon-btn:hover{border-color:var(--purple-700);background:var(--tint);}
.nav-cta{padding:11px 20px;font-size:0.92rem;background:var(--knop-bg, var(--blauw-500));color:var(--knop-tekst, var(--purple-900));}
.nav-cta:hover{background:var(--knop-bg-hover, var(--blauw-400));transform:translateY(-1px);}
.hamburger{display:none;}

/* ---------- MOBIEL MENU ---------- */
/* Vast aan de viewport: vult alles onder de header tot de onderkant van het scherm.
   --menu-top wordt bij het openen gezet op de onderkant van de header, zodat het
   klopt of de paarse balk nu wel of niet weggescrold is. */
.mobile-menu{
  /* right compenseert de schuifbalk die door het scrollslot wegvalt; anders loopt
     het vaste paneel 15px verder door dan de header eronder */
  position:fixed;left:0;right:var(--schuifbalk,0px);bottom:0;top:var(--menu-top,118px);
  z-index:60;background:#fff;
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mobile-menu[hidden]{display:none;}
/* Het menu staat binnen .main-nav, dus de flexrij van de header uitschakelen */
.mobile-menu .wrap{padding-top:0;padding-bottom:0;}

/* Smalle balk over de volle breedte, los van de menu-items */
.mobile-menu-util{
  display:none;background:var(--tint);border-bottom:1px solid var(--line);flex-shrink:0;
}
.mobile-menu.toon-util .mobile-menu-util{display:block;}
.mobile-menu-util .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:9px;padding-bottom:9px;
}
.mobile-menu-util a{
  font-size:0.84rem;font-weight:600;color:var(--purple-800);text-decoration:none;
}
.mobile-menu-util .lang-switch button{font-size:0.74rem;padding:3px 9px;}
.lang-switch--licht{background:#fff;border:1px solid var(--line);}
.lang-switch--licht button{color:var(--ink-soft);}
.lang-switch--licht button[aria-current="true"]{background:var(--purple-800);color:#fff;}

.mobile-menu-body{flex:1;display:flex;flex-direction:column;padding:10px 0 22px;}
.mobile-menu-body > .wrap{
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex:1;
  /* width nodig: de auto-marges van .wrap zetten anders stretch uit in deze
     flexkolom, waardoor de wrap naar de inhoud krimpt */
  width:100%;
}
/* Eén doorlopende lijst zonder gaten. De drie diensten zijn de "drie ingangen" uit
   de sectie verderop: die krijgen een pijl en de volle inktkleur, de rest blijft
   even groot maar rustiger. Zo ontstaat de hiërarchie zonder witruimte ertussen. */
.mobile-menu-links{display:flex;flex-direction:column;}
.mobile-menu-links a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);
  font-family:var(--titel);font-size:1.05rem;font-weight:600;
  color:var(--ink-soft);text-decoration:none;
}
.mobile-menu-links > a:last-child{border-bottom:none;}
.mobile-menu-links a.ingang{color:var(--purple-900);}
.mobile-menu-links .pijl{color:var(--blauw-500);font-size:1.05rem;line-height:1;flex-shrink:0;}
.mobile-menu-links a:hover,.mobile-menu-links a:focus-visible{color:var(--purple-600);}
.mobile-menu-links a:hover .pijl{color:var(--purple-600);}
.mobile-menu-cta{margin-top:16px;width:100%;justify-content:center;}
/* margin-top:auto zet het contactblok onderaan het scherm, zodat de volle hoogte klopt */
.mobile-menu-contact{
  margin-top:auto;padding-top:18px;
  display:flex;flex-direction:column;gap:9px;
}
.mobile-menu-contact a,.mobile-menu-contact span{
  display:flex;align-items:center;gap:9px;
  font-size:0.88rem;color:var(--ink-soft);text-decoration:none;
}
.mobile-menu-contact svg{flex-shrink:0;opacity:0.6;color:var(--purple-700);}
/* Achtergrond niet mee laten scrollen zolang het menu openstaat.
   Alleen op body: die overflow slaat door naar de viewport zolang html visible is,
   en body blijft dan zelf geen scrollcontainer, waardoor de sticky header blijft
   kleven. Het slot op html zetten of position:fixed gebruiken doet de header juist
   uit beeld springen. iOS wordt met touchmove afgevangen.
   Binnen het breakpoint gehouden, zodat een openstaand menu nooit een desktoppagina
   op slot kan laten staan als het resize-event niet aankomt. */
@media (max-width: 980px){
  body.menu-open{overflow:hidden;}
}

/* ---------- SEARCH OVERLAY ---------- */
.search-overlay{
  position:fixed;inset:0;background:rgba(36,22,51,0.55);
  display:none;align-items:flex-start;justify-content:center;
  padding:12vh 20px 20px;z-index:200;
}
.search-overlay.open{display:flex;}
.popup-overlay{
  position:fixed;inset:0;background:rgba(36,22,51,0.55);
  display:none;align-items:center;justify-content:center;
  padding:20px;z-index:210;
}
.popup-overlay.open{display:flex;}
.popup-panel{
  position:relative;background:#fff;border-radius:var(--radius-l);max-width:520px;width:100%;
  padding:32px 28px 28px;box-shadow:0 30px 60px rgba(36,22,51,0.35);
  max-height:80vh;overflow-y:auto;
}
.popup-panel h2{font-size:1.25rem;margin-bottom:12px;padding-right:24px;}
.popup-inhoud{color:var(--ink-soft);line-height:1.6;}
.popup-sluiten{
  position:absolute;top:14px;right:14px;background:none;border:none;
  color:var(--ink-soft);font-size:1.4rem;line-height:1;padding:4px;cursor:pointer;
}
.search-panel{
  background:#fff;border-radius:var(--radius-l);max-width:640px;width:100%;
  padding:28px;box-shadow:0 30px 60px rgba(36,22,51,0.35);
  max-height:76vh;overflow-y:auto;
}
.search-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.search-panel-head h2{font-size:1.2rem;}
.search-close{background:none;border:none;color:var(--ink-soft);font-size:1.4rem;line-height:1;padding:4px;}
.search-input-row{
  display:flex;align-items:center;gap:10px;
  border:1.5px solid var(--line);border-radius:999px;padding:10px 18px;
}
.search-input-row:focus-within{border-color:var(--blauw-500);}
.search-input-row input{
  border:none;outline:none;font-family:inherit;font-size:1rem;flex:1;min-width:0;background:transparent;color:var(--ink);
}
.search-suggest{margin-top:22px;display:flex;flex-direction:column;gap:20px;}
/* De dienstnamen in het zoekvenster staan in de donkere tekstkleur, zodat ze
   rustiger zijn dan de paarse accenten eromheen. */
.suggest-group h3{
  font-family:var(--sans);font-size:0.74rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--ink);margin-bottom:11px;display:flex;align-items:center;gap:12px;
}
.suggest-group h3::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, var(--line), rgba(227,220,236,0));
}
.suggest-row{display:flex;flex-wrap:wrap;gap:8px;}
.suggest-empty{font-size:0.93rem;color:var(--ink-soft);}
.suggest-empty a{color:var(--purple-700);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
/* "Bedoel je dit?" boven de lijst als er alleen bij benadering iets gevonden is */
.suggest-tip{font-size:0.93rem;color:var(--ink-soft);margin:0;}
/* De vaste pagina's staan onderaan, iets rustiger dan de onderwerpen */
.suggest-group--paginas{padding-top:16px;border-top:1px solid var(--line);}
.suggest-group--paginas h3{color:var(--ink-soft);}
.suggest-group--paginas button{font-weight:500;color:var(--ink);}
.search-suggest button{
  border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 15px;font-size:0.88rem;font-weight:600;color:var(--purple-800);
}
.search-suggest button:hover{border-color:var(--purple-700);background:var(--tint);}
.search-suggest button[hidden]{display:none;}

/* ---------- HERO ---------- */
.hero{
  background:radial-gradient(circle at 15% 15%, var(--purple-700), var(--purple-900) 62%);
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:72px 0 64px;
}

.hero h1{
  font-size:clamp(2.3rem, 4vw, 3.4rem);
  color:#fff;
  max-width:15ch;
}
.hero-sub{
  margin-top:22px;font-size:1.12rem;color:#E6DCF2;max-width:46ch;line-height:1.6;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}

.hero-search{
  margin-top:44px;padding-top:32px;border-top:1px solid var(--line-on-purple);
  max-width:560px;
}
.hero-search h2{
  font-family:var(--sans);font-size:1rem;font-weight:700;color:#fff;margin-bottom:14px;
}
.hero-search-input{
  display:flex;align-items:center;gap:10px;background:#fff;border-radius:999px;
  padding:6px 8px 6px 20px;box-shadow:var(--shadow-card);
}
.hero-search-input input{
  border:none;outline:none;flex:1;min-width:0;font-family:inherit;font-size:0.98rem;color:var(--ink);background:transparent;padding:10px 0;
}
.hero-search-input button{
  background:var(--purple-800);color:#fff;border:none;border-radius:999px;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.hero-search-input button:hover{background:var(--blauw-500);color:var(--purple-900);}
.hero-search-empty{margin-top:14px;font-size:0.86rem;color:#D9CDEB;}
/* De knop "alles te tonen" ziet eruit als een link; de ronde "+" die hier bij
   geen treffers naartoe verhuist houdt zijn eigen vorm (vandaar :not). */
.hero-search-empty button:not(.chip-more){background:none;border:none;padding:0;color:var(--blauw-400);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit;font-family:inherit;}
.hero-search-empty a{color:var(--blauw-400);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
/* Zonder treffers verhuist de "+" naar het einde van de melding (site.js) */
.hero-search-empty .chip-more{width:28px;height:28px;font-size:1rem;margin-left:8px;vertical-align:middle;}
.chip-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;}
.chip-row[hidden]{display:none;}
.chip{
  background:rgba(255,255,255,0.08);border:1px solid var(--line-on-purple);color:#F2ECFA;
  padding:9px 15px;border-radius:999px;font-size:0.86rem;font-weight:600;text-decoration:none;
  transition:background .18s ease, border-color .18s ease;
  opacity:0;animation:chip-in .5s ease forwards;
}
.chip:hover{background:var(--blauw-500);color:var(--purple-900);border-color:var(--blauw-500);}
.chip[hidden]{display:none;}
.chip-more{
  flex-shrink:0;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,0.16);border:1px solid var(--line-on-purple);color:#F2ECFA;
  width:34px;height:34px;border-radius:50%;font-size:1.15rem;font-weight:400;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.chip-more:hover{background:var(--blauw-500);color:var(--purple-900);border-color:var(--blauw-500);}
.chip-more:focus-visible{outline:2px solid var(--blauw-400);outline-offset:2px;}
@keyframes chip-in{to{opacity:1;}}


@media (prefers-reduced-motion: reduce){
  .chip{animation:none;opacity:1;}
  html{scroll-behavior:auto;}
}

/* ---------- TRUST STRIP ---------- */
.trust-strip{background:var(--tint);border-bottom:1px solid var(--line);}
.trust-strip .wrap{
  display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center;
  /* Alleen verticaal: horizontaal volgt .wrap, anders loopt deze balk niet in de pas */
  padding-top:22px;padding-bottom:22px;
}
.trust-item{display:flex;align-items:center;gap:12px;font-size:0.9rem;font-weight:600;color:var(--ink-soft);}
/* Sterrenrij: vijf sterren, gevuld tot het werkelijke cijfer. De gevulde laag
   ligt over de lege heen en wordt afgesneden op --vulling (4,9 = 98%). */
.sterrenrij{position:relative;display:inline-flex;flex-shrink:0;line-height:0;}
.sterrenrij-laag{display:inline-flex;gap:2px;}
.sterrenrij-leeg{color:var(--line);}
.sterrenrij-leeg svg{fill:none;}
.sterrenrij-vol{
  position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
  width:var(--vulling, 100%);color:var(--purple-700);
}
.sterrenrij-vol svg{fill:currentColor;}
.sterrenrij svg{stroke-width:1.4;}
.trust-item img{height:34px;width:auto;}
.trust-item .ic{color:var(--purple-700);flex-shrink:0;}

/* ---------- SECTION GENERIC ---------- */
section{padding:96px 0;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-kicker{
  font-size:0.92rem;font-weight:700;color:var(--purple-700);margin-bottom:10px;
}
.section-head h2{font-size:clamp(1.9rem, 3vw, 2.5rem);}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:1.05rem;max-width:56ch;}

.bg-tint{background:var(--tint);}

/* ---------- DIENSTEN ---------- */
/* De drie categorieën als knoppen; alleen op mobiel, waar de kaarten onder
   elkaar staan en je anders moet scrollen om te zien wat er is. */
.dienst-knoppen{display:none;}
.diensten-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;}
.dienst-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-card);
}
.dienst-photo{aspect-ratio:16/10;overflow:hidden;}
.dienst-photo img{width:100%;height:100%;object-fit:cover;}
.dienst-body{padding:32px;display:flex;flex-direction:column;gap:16px;flex:1;}
.dienst-body h3{font-size:1.5rem;}
/* Zonder begrenzing lopen deze regels op 980px (kaarten in één kolom) tot 104 tekens */
.dienst-body p{color:var(--ink-soft);font-size:1rem;max-width:58ch;}
/* margin-top:auto duwt de pillen naar beneden, zodat ze vlak boven de knop staan */
.dienst-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px;}
.dienst-list a{
  display:inline-block;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:4px 9px;font-size:0.77rem;font-weight:500;color:var(--ink-soft);
  line-height:1.5;text-decoration:none;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.dienst-list a:hover,.dienst-list a:focus-visible{
  border-color:var(--purple-700);color:var(--purple-800);background:var(--tint);
}
.dienst-body .btn{align-self:flex-start;}

/* ---------- USPs ---------- */
/* Met een achtergrondfoto (fotoplek home.usp): de foto vervaagt naar boven toe
   in de vlakke achtergrond, zodat kicker en kop rustig blijven en de skyline
   achter de kaarten doorloopt. Zonder foto blijft alles zoals het was. */
.usp-band{position:relative;overflow:hidden;}
.usp-band::before{
  content:"";position:absolute;left:0;right:0;bottom:0;top:auto;z-index:0;
  /* Een band onderin in plaats van de hele sectie: zo blijft de skyline op elk
     scherm herkenbaar in plaats van ver ingezoomd. */
  height:clamp(260px, 44%, 470px);
  background-image:var(--usp-foto);background-size:cover;background-repeat:no-repeat;
  background-position:var(--usp-foto-positie, center bottom);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.22) 34%, rgba(0,0,0,0.7) 64%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.22) 34%, rgba(0,0,0,0.7) 64%, #000 100%);
}
.usp-band > .wrap{position:relative;z-index:1;}
/* De kaarten lichten iets op van de foto af. */
.usp-band .usp-card{background:rgba(255,255,255,0.94);border-color:rgba(255,255,255,0.9);box-shadow:var(--shadow-card);}
@supports not ((-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000))){
  /* Oudere browsers: geen vervaging, dan wel een sluier zodat alles leesbaar blijft. */
  .usp-band::before{opacity:0.5;}
}
.usp-grid{position:relative;display:grid;grid-template-columns:repeat(var(--usp-kolommen, 3),minmax(0,1fr));gap:24px;}
.usp-card{
  border:1px solid var(--line);border-radius:var(--radius-m);padding:28px;background:#fff;
}
.usp-icon{
  width:46px;height:46px;border-radius:12px;background:var(--tint-dark);color:var(--purple-700);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.usp-card h3{font-size:1.1rem;margin-bottom:8px;}
.usp-card p{color:var(--ink-soft);font-size:0.94rem;}

/* ---------- KLANTVERHALEN ---------- */
.case-card{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:0;
  border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;background:#fff;
  box-shadow:var(--shadow-card);
}
.case-photo{position:relative;}
.case-photo img{width:100%;height:100%;object-fit:cover;min-height:340px;}
.case-photo-badge{
  position:absolute;left:20px;bottom:20px;background:rgba(36,22,51,0.82);color:#fff;
  padding:9px 15px;border-radius:999px;font-size:0.82rem;font-weight:600;
}
.case-body{padding:44px;display:flex;flex-direction:column;gap:18px;}
.case-kicker{font-size:0.85rem;font-weight:700;color:var(--purple-700);}
.case-body h3{font-size:1.6rem;}
.case-body p{color:var(--ink-soft);font-size:0.98rem;max-width:58ch;}
/* De eerste alinea (de samenvatting) leest als aanloop iets rustiger. */
.case-body p.case-lead{color:var(--ink);font-size:1.04rem;line-height:1.7;}
.case-titel-link{color:inherit;text-decoration:none;}
.case-titel-link:hover,.case-titel-link:focus-visible{text-decoration:underline;text-underline-offset:4px;}
/* Staat er onder de tekst als het verhaal is ingekort: de rest staat op de eigen pagina. */
.case-meer{
  align-self:flex-start;margin-top:2px;font-weight:600;font-size:0.95rem;color:var(--purple-700);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.case-meer span{transition:transform 0.15s ease;}
.case-meer:hover,.case-meer:focus-visible{text-decoration:underline;text-underline-offset:4px;}
.case-meer:hover span{transform:translateX(3px);}
.case-body .btn{align-self:flex-start;margin-top:6px;}

.review-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;}
.review-card{border:1px solid var(--line);border-radius:var(--radius-m);padding:24px;background:#fff;}
.review-stars{color:#E3A73B;font-size:0.95rem;letter-spacing:1px;margin-bottom:12px;}
/* max-width in ch begrenst de regellengte; zonder dit loopt de tekst op tablet
   tot 86 tekens per regel, ver boven de leesbare 45-75 */
.review-card p{font-size:0.96rem;color:var(--ink);max-width:68ch;}
.review-card .who{margin-top:14px;font-size:0.85rem;color:var(--ink-soft);font-weight:600;}
.review-source{margin-top:28px;text-align:left;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.review-source a{font-size:0.9rem;color:var(--purple-700);text-decoration:underline;text-underline-offset:3px;font-weight:600;}
.review-source-sep{width:4px;height:4px;border-radius:50%;background:var(--line);flex-shrink:0;}

/* ---------- OVER ---------- */
.over-personal{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
.over-figure{align-self:stretch;display:flex;flex-direction:column;box-shadow:var(--shadow-card);border-radius:var(--radius-l);margin:0;}
.over-photo{width:100%;height:100%;min-height:310px;object-fit:cover;object-position:46% center;border-radius:var(--radius-l) var(--radius-l) 0 0;}
.over-photo-caption{
  padding:18px 21px;background:#fff;border-radius:0 0 var(--radius-l) var(--radius-l);
  font-size:0.85rem;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:flex-start;gap:14px;margin:0;
}
.over-photo-caption strong{flex-shrink:0;}
.over-photo-caption strong{font-family:var(--titel);font-weight:500;font-size:1.55rem;color:var(--purple-700);}
/* Deze kop staat buiten .section-head en viel daardoor terug op de browserstandaard
   van 24px, terwijl elke andere sectiekop 40px is. Zelfde schaal aanhouden. */
.over-personal h2{font-size:clamp(1.9rem, 3vw, 2.5rem);margin-bottom:20px;}
.over-copy p{color:var(--ink-soft);font-size:1.03rem;line-height:1.75;margin-bottom:16px;max-width:66ch;}
.over-copy p:last-child{margin-bottom:0;}
.over-text-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:24px;min-height:24px;
  font-weight:600;font-size:0.95rem;color:var(--purple-700);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line);
}
.over-text-link:hover{text-decoration-color:var(--purple-700);}
.over-text-link .arrow{font-size:1.05rem;line-height:1;}

.over-team-row{
  margin-top:56px;padding-top:36px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.over-team-row h3{font-size:0.92rem;font-weight:700;color:var(--ink);flex-shrink:0;}
.over-team-kop{display:flex;flex-direction:column;gap:8px;flex-shrink:0;}
.over-team-kop .over-text-link{margin-top:0;font-size:0.9rem;}
/* Compacte teamrij: het aantal kolommen komt uit Medewerker::kolommen(), zodat
   zes mensen 3 + 3 worden in plaats van een rij die niet past. */
.team-rij{
  display:grid;grid-template-columns:repeat(var(--team-kolommen, 4), minmax(0, 1fr));
  gap:20px 24px;flex:1;
}
.avatar{
  width:52px;height:52px;border-radius:50%;background:var(--purple-700);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--titel);font-weight:600;
  flex-shrink:0;font-size:0.95rem;overflow:hidden;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line);
}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;}
.team-member{display:flex;align-items:center;gap:14px;min-width:0;}
.team-member span{font-weight:600;font-size:0.95rem;color:var(--ink);}
.team-member span:last-child{overflow-wrap:anywhere;}
@media (max-width: 980px){
  /* Nooit meer dan drie naast elkaar op een tablet */
  .team-rij{grid-template-columns:repeat(min(var(--team-kolommen, 4), 3), minmax(0, 1fr));}
}
@media (max-width: 620px){
  /* Twee naast elkaar: scheelt de helft aan scrollen */
  .team-rij{grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px 14px;}
  .team-member{gap:10px;}
  .team-member .avatar{width:44px;height:44px;}
  .team-member span:last-child{font-size:0.88rem;line-height:1.3;}
}

/* ---------- LOCATIE ---------- */
.locatie-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;}
.locatie-info{
  background:var(--purple-900);color:#fff;border-radius:var(--radius-l);padding:40px;
  display:flex;flex-direction:column;gap:22px;
}
.locatie-info h3{color:#fff;font-size:1.5rem;}
.locatie-info p{color:#E6DCF2;font-size:1rem;max-width:58ch;}
.locatie-detail{display:flex;gap:12px;align-items:flex-start;}
.locatie-detail svg{color:var(--blauw-400);flex-shrink:0;margin-top:2px;}
.locatie-detail div{font-size:0.95rem;color:#F2ECFA;}
.locatie-detail a{color:#F2ECFA;text-decoration:underline;text-underline-offset:3px;}
.locatie-media{display:flex;flex-direction:column;gap:32px;}
.locatie-photo{flex:1 1 0;min-height:210px;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-card);}
.locatie-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.locatie-map{flex:1 1 0;min-height:210px;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--line);}
.locatie-map iframe{width:100%;height:100%;border:0;display:block;}

/* ---------- CTA BAND ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--purple-800), var(--purple-600));
  color:#fff;border-radius:var(--radius-l);
  margin:0 28px;padding:52px 48px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
}
.cta-band-inner{max-width:var(--max);margin:0 auto;padding-bottom:96px;}
.cta-band h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.1rem);max-width:18ch;}
.cta-band-copy > p{color:#E6DCF2;margin-top:10px;max-width:44ch;}
.cta-band-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}

/* FAQ: <details> doet het open- en dichtklappen zelf, dus geen JS nodig */
.cta-faq{display:flex;flex-direction:column;}
.cta-faq details{border-bottom:1px solid var(--line-on-purple);}
.cta-faq details:first-child{border-top:1px solid var(--line-on-purple);}
.cta-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 0;cursor:pointer;list-style:none;
  font-weight:600;font-size:0.97rem;color:#fff;
}
.cta-faq summary::-webkit-details-marker{display:none;}
.cta-faq summary::marker{content:"";}
.cta-faq summary:hover{color:var(--blauw-400);}
.cta-faq .teken{
  flex-shrink:0;width:22px;height:22px;position:relative;
  transition:transform .22s ease;color:var(--blauw-400);
}
/* Twee streepjes die samen een + vormen; gedraaid wordt het een kruisje */
.cta-faq .teken::before,.cta-faq .teken::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;
}
.cta-faq .teken::before{width:14px;height:2px;transform:translate(-50%,-50%);}
.cta-faq .teken::after{width:2px;height:14px;transform:translate(-50%,-50%);}
.cta-faq details[open] .teken{transform:rotate(45deg);}
.cta-faq details p{
  color:#E0D5EE;font-size:0.93rem;line-height:1.65;
  margin:0;padding:0 38px 18px 0;max-width:52ch;
}
@media (prefers-reduced-motion: reduce){
  .cta-faq .teken{transition:none;}
}

/* ---------- ZWEVENDE ZOEKKNOP ---------- */
/* z-index 40: onder de navigatie (50), het mobiele menu (60) en het zoekpaneel (200),
   zodat die er altijd overheen komen */
.zoek-knop{
  position:fixed;right:24px;bottom:24px;z-index:40;
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--purple-700);color:#fff;text-decoration:none;
  box-shadow:0 6px 18px -4px rgba(36,22,51,0.45), 0 2px 6px rgba(36,22,51,0.2);
  transition:transform .18s ease, box-shadow .18s ease;
}
.zoek-knop:hover,.zoek-knop:focus-visible{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 12px 26px -6px rgba(36,22,51,0.5), 0 3px 8px rgba(36,22,51,0.24);
}
.zoek-knop svg{width:26px;height:26px;display:block;stroke-width:2.2;}
@media (prefers-reduced-motion: reduce){
  .zoek-knop{transition:none;}
  .zoek-knop:hover,.zoek-knop:focus-visible{transform:none;}
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--purple-900);color:#D9CDEB;margin-top:0;
  position:relative;overflow:hidden;
}
.footer-top,.footer-bottom{position:relative;z-index:1;}
/* Alleen verticale padding zetten: de horizontale komt van .wrap, anders loopt de
   footer 28px breder dan alle andere secties */
.footer-top{padding-top:64px;padding-bottom:48px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;}
.footer-brand-logo{display:inline-flex;background:#fff;padding:10px 16px;border-radius:12px;margin-bottom:18px;}
.footer-brand-logo img{height:28px;display:block;}
.footer-brand p{font-size:0.92rem;color:#C9BBDE;max-width:34ch;}
.footer-col h4{font-family:var(--sans);font-size:0.85rem;font-weight:700;color:#fff;margin-bottom:16px;}
/* gap omlaag en padding op de link zelf: het tikdoel groeit van 17 naar 27px
   terwijl de optische regelafstand gelijk blijft */
.footer-col ul{display:flex;flex-direction:column;gap:2px;}
.footer-contact li{display:flex;align-items:flex-start;gap:9px;font-size:0.9rem;color:#C9BBDE;}
.footer-contact svg{flex-shrink:0;margin-top:3px;opacity:0.6;}
.footer-contact span{line-height:1.55;}
.footer-col a{display:inline-block;padding:5px 0;font-size:0.9rem;color:#C9BBDE;text-decoration:none;}
.footer-col a:hover{color:#fff;text-decoration:underline;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12);padding-top:22px;padding-bottom:10px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
}
/* margin-left:auto duwt de links naar rechts, ook als het copyright korter wordt */
.footer-bottom-links{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto;}
.footer-bottom-links a{display:inline-block;padding:4px 0;font-size:0.82rem;color:#C9BBDE;text-decoration:none;}
.footer-bottom-links a:hover{color:#fff;}
.footer-bottom small{font-size:0.82rem;color:#B7A6CE;}
/* De vergelijkingskaarten staan onder de andere links, in dezelfde regelopmaak
   als het copyright: punten ertussen, geen iconen. */
.footer-kaarten{
  position:relative;z-index:1;padding-top:0;padding-bottom:26px;
  text-align:center;font-size:0.82rem;line-height:1.7;color:#7D6A96;
}
.footer-kaarten a{color:#C9BBDE;text-decoration:none;}
.footer-kaarten a:hover{color:#fff;text-decoration:underline;}
/* Het keurmerk hoort bij het merk, niet bij de kleine lettertjes onderaan */
.footer-keurmerk{
  display:flex;align-items:center;gap:12px;margin-top:22px;
}
.footer-keurmerk img{height:54px;width:auto;opacity:0.9;}
.footer-keurmerk span{font-size:0.82rem;color:#B7A6CE;line-height:1.45;max-width:16ch;}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) and (min-width: 981px){
  .diensten-grid{grid-template-columns:1fr 1fr;}
  .diensten-grid .dienst-card:first-child{grid-column:1 / -1;}
}
@media (max-width: 980px){
  .diensten-grid{grid-template-columns:1fr;}
  .usp-grid{grid-template-columns:repeat(min(var(--usp-kolommen, 3), 2),minmax(0,1fr));}
  /* minmax(0,1fr) laat de kolom kleiner worden dan zijn min-content; zonder dit
     duwt een lange knoptekst de kaart buiten het scherm */
  .case-card{grid-template-columns:minmax(0,1fr);}
  /* Onder elkaar: de foto krijgt een vaste verhouding in plaats van de hoogte
     van de tekstkolom, anders wordt het een smalle strook. */
  .case-photo img{height:auto;min-height:0;aspect-ratio:2/1;max-height:420px;}
  .review-row{grid-template-columns:1fr;}
  .over-personal{grid-template-columns:1fr;gap:36px;}
  .over-figure{order:2;}
  /* Op een dienstpagina staat de foto juist boven de tekst en de knoppen */
  .dienst-intro .over-figure{order:-1;}
  .over-photo{height:auto;min-height:0;aspect-ratio:3/2;}
  .over-team-row{flex-direction:column;align-items:flex-start;gap:20px;}
  /* Op mobiel eerst de foto, dan het adresblok, dan de kaart. display:contents haalt
     de media-wikkel uit de weg, zodat foto en kaart losse grid-items worden en met
     order om het adresblok heen geplaatst kunnen worden. */
  /* Onder 980px past de band niet meer naast elkaar: foto boven, tekst eronder */
  .cta-band{grid-template-columns:1fr;gap:34px;padding:40px 34px;}
  .locatie-grid{grid-template-columns:1fr;gap:24px;}
  .locatie-media{display:contents;}
  .locatie-photo{order:1;}
  .locatie-info{order:2;}
  .locatie-map{order:3;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .primary-links{display:none;}
  .hamburger{display:flex;}
}
@media (min-width: 981px){
  .mobile-menu{display:none;}
}
@media (max-width: 620px){
  .wrap{padding:0 20px;}
  /* Over Zuidstad: AFM, Kifid en KvK houden hun eigen vak, maar dan onder
     elkaar over de volle breedte */
  .erkenning-lijst{flex-direction:column;gap:12px;}
  .erkenning-lijst > div{min-width:0;width:100%;}
  .dienst-knoppen{display:flex;flex-direction:column;gap:10px;margin:-22px 0 30px;}
  .dienst-knoppen .btn{width:100%;justify-content:center;}
  /* .wrap hierboven is een shorthand en zou de verticale ruimte van de footer
     wegvagen (hij staat later in dit bestand dan .footer-top). Daarom hier
     opnieuw: ruimte boven en onder in de footer, en tussen de blokken. */
  .footer-top{padding-top:48px;padding-bottom:34px;}
  .footer-bottom{padding-top:20px;padding-bottom:12px;}
  .footer-kaarten{padding-bottom:28px;}
  /* Alles links uitlijnen en netjes doorlopen op een volgende regel */
  .footer-bottom{text-align:left;}
  .footer-bottom-links{margin-left:0;justify-content:flex-start;gap:6px 18px;}
  .footer-kaarten{text-align:left;}
  .case-photo img{aspect-ratio:16/10;}
  .case-body{padding:28px 22px;gap:14px;}
  .case-body h3{font-size:1.35rem;}
  .case-photo-badge{left:14px;bottom:14px;}
  .zoek-knop{right:16px;bottom:16px;width:54px;height:54px;}
  .zoek-knop svg{width:28px;height:28px;}
  section{padding:64px 0;}
  /* Op mobiel bovenaan alleen Klantportaal links en de talen rechts */
  .util-bar .util-left{display:none;}
  .util-bar .util-extra{display:none;}
  .util-bar .util-right{flex:1;justify-content:space-between;gap:12px;}
  /* Tikdoel van 20px naar 32px; onder de 24px is te klein om te raken */
  .util-bar .util-right > a{padding:6px 0;}
  .util-bar .lang-switch button{padding:6px 11px;}
  .nav-cta{display:none;}
  .usp-grid{grid-template-columns:1fr;}
  .usp-band::before{height:230px;}
  .footer-grid{grid-template-columns:1fr;}
  /* Zelfde inspringing als .wrap, zodat de band met de rest meeloopt */
  .cta-band{margin:0 20px;padding:32px 24px;gap:28px;}
  /* Lange knoplabels moeten kunnen afbreken, anders steken ze buiten hun kaart.
     Maar niet krimpen: knoppen naast elkaar springen dan naar een eigen regel in
     plaats van allebei smal en twee regels hoog te worden (78px i.p.v. 54px). */
  .btn{white-space:normal;text-align:center;flex-shrink:0;max-width:100%;padding-left:18px;padding-right:18px;}
  .zij-kaart .btn{align-self:stretch;justify-content:center;}
  .cta-band-photo{height:190px;}
  .cta-band-copy{padding:30px 24px;}
  .hero{padding:52px 0 44px;}
}

/* ==========================================================================
   Aanvullingen op het ontwerp (dynamische site). Zelfde tokens en maten.
   ========================================================================== */

/* Taalkeuze als links (in het ontwerp knoppen): zelfde uiterlijk */
.lang-switch a{
  display:inline-block;color:#EFE7F7;font-size:0.78rem;padding:4px 10px;border-radius:999px;font-weight:600;text-decoration:none;line-height:normal;
}
.lang-switch a[aria-current="true"]{background:#fff;color:var(--purple-900);}
.mobile-menu-util .lang-switch a{font-size:0.74rem;padding:3px 9px;}
.lang-switch--licht a{color:var(--ink-soft);}
.lang-switch--licht a[aria-current="true"]{background:var(--purple-800);color:#fff;}
@media (max-width: 620px){
  .util-bar .lang-switch a{padding:6px 11px;}
}

/* Footerkoppen zijn h2 (juiste kopvolgorde), met de maat van het ontwerp */
.footer-col h2{font-family:var(--sans);font-size:0.85rem;font-weight:700;color:#fff;margin-bottom:16px;letter-spacing:0;line-height:1.12;}
.footer-bottom-links button{
  background:none;border:none;padding:4px 0;font-size:0.82rem;color:#C9BBDE;font-family:inherit;cursor:pointer;
}
.footer-bottom-links button:hover{color:#fff;}

/* ---------- KAART: pas laden na toestemming ---------- */
.locatie-map{position:relative;}
.map-consent{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:24px;text-align:center;background:var(--tint);color:var(--ink-soft);font-size:0.9rem;
}
.map-consent svg{color:var(--purple-700);}
.map-consent p{max-width:40ch;}
.map-consent .btn{padding:10px 18px;font-size:0.9rem;}
.map-consent a{color:var(--purple-700);font-weight:600;}

/* ---------- TAALSUGGESTIE ----------
   Géén vast/zwevend element: staat gewoon in de doorloop direct onder de
   header, dus zonder z-index-gedoe met WhatsApp/navigatie/zoekpaneel. */
.taal-balk{background:var(--tint);border-bottom:1px solid var(--line);}
.taal-balk-inner{
  padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.taal-balk p{margin:0;font-size:0.92rem;color:var(--ink-soft);}
.taal-balk-acties{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0;}
.taal-balk .btn{padding:9px 18px;font-size:0.88rem;}
@media (max-width: 620px){
  .taal-balk-inner{padding:12px 20px;flex-direction:column;align-items:flex-start;gap:12px;}
  .taal-balk-acties{width:100%;}
  .taal-balk-acties .btn{flex:1;justify-content:center;}
}

/* ---------- COOKIEMELDING ---------- */
/* z-index 150: boven WhatsApp (40), navigatie (50) en mobiel menu (60),
   onder het zoekpaneel (200) */
.cookie-bar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:150;
  display:flex;justify-content:center;pointer-events:none;
}
.cookie-bar[hidden]{display:none;}
.cookie-box{
  pointer-events:auto;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--radius-l);box-shadow:0 30px 60px -12px rgba(36,22,51,0.38);
  width:100%;max-width:var(--max);padding:24px 28px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
}
.cookie-box h2{font-size:1.2rem;margin-bottom:6px;}
.cookie-box p{font-size:0.92rem;color:var(--ink-soft);max-width:75ch;}
.cookie-box p a{color:var(--purple-700);font-weight:600;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.cookie-actions .btn{padding:12px 20px;font-size:0.92rem;}
/* Weigeren en accepteren even zichtbaar (AVG/EDPB): beide volwaardige knoppen */
.btn-purple{background:var(--purple-800);color:#fff;}
.btn-purple:hover{background:var(--purple-700);}

.cookie-modal{
  position:fixed;inset:0;z-index:210;background:rgba(36,22,51,0.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.cookie-modal[hidden]{display:none;}
.cookie-modal-panel{
  background:#fff;border-radius:var(--radius-l);max-width:620px;width:100%;
  max-height:88vh;overflow-y:auto;padding:28px;box-shadow:0 30px 60px rgba(36,22,51,0.35);
}
.cookie-modal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px;}
.cookie-modal-head h2{font-size:1.35rem;}
.cookie-modal-panel > p{font-size:0.93rem;color:var(--ink-soft);}
.cookie-cat{border:1px solid var(--line);border-radius:var(--radius-m);padding:16px 18px;margin-top:14px;}
.cookie-cat-head{display:flex;justify-content:space-between;align-items:center;gap:16px;}
.cookie-cat-head h3{font-family:var(--sans);font-size:0.98rem;font-weight:700;}
.cookie-cat p{font-size:0.88rem;color:var(--ink-soft);margin-top:6px;}
.cookie-altijd{font-size:0.8rem;font-weight:600;color:var(--purple-700);white-space:nowrap;}
/* Schakelaar */
.schakel{position:relative;display:inline-flex;flex-shrink:0;}
.schakel input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.schakel span{
  width:46px;height:26px;border-radius:999px;background:var(--line);position:relative;transition:background .18s ease;
}
.schakel span::after{
  content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(36,22,51,0.3);transition:transform .18s ease;
}
.schakel input:checked + span{background:var(--purple-700);}
.schakel input:checked + span::after{transform:translateX(20px);}
.schakel input:focus-visible + span{outline:3px solid var(--blauw-500);outline-offset:3px;}
.cookie-modal-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:22px;}
.cookie-modal-actions .btn{padding:12px 20px;font-size:0.92rem;}
@media (prefers-reduced-motion: reduce){
  .schakel span,.schakel span::after{transition:none;}
}
@media (max-width: 980px){
  .cookie-box{grid-template-columns:minmax(0,1fr);gap:18px;}
  .cookie-actions{justify-content:flex-start;}
}
@media (max-width: 620px){
  .cookie-bar{left:10px;right:10px;bottom:10px;}
  .cookie-box{padding:20px;}
  .cookie-actions .btn{flex:1 1 100%;justify-content:center;}
  .cookie-modal-panel{padding:22px 20px;}
  .cookie-modal-actions .btn{flex:1 1 100%;justify-content:center;}
}

/* ---------- SUBPAGINA'S (juridisch, 404) ---------- */
.page-hero{
  background:radial-gradient(circle at 15% 15%, var(--purple-700), var(--purple-900) 62%);
  color:#fff;position:relative;overflow:hidden;padding:64px 0 56px;
}
.page-hero .wrap{position:relative;z-index:1;}
.page-hero h1{color:#fff;font-size:clamp(2.1rem, 3.6vw, 3rem);max-width:22ch;}
.page-hero p{margin-top:16px;color:#E6DCF2;font-size:1.08rem;max-width:58ch;}

/* Beeld onder de intro dat deels over de paarse kop heen valt (onderwerppagina's) */
/* Precies de helft van het beeld ligt op het paars, de andere helft op het wit.
   De overlap is dus de halve beeldhoogte; die rekenen we uit de breedte van de
   .wrap (max 1180 min 2x28 padding) en de verhouding 16:6.5. */
:root{--beeld-overlap:min(228px, calc(20.3125vw - 11.375px));}
.hero-beeld{margin:32px 0 calc(-1 * var(--beeld-overlap));border-radius:var(--radius-l);overflow:hidden;box-shadow:0 24px 50px -28px rgba(36,22,51,0.75);position:relative;z-index:2;}
.hero-beeld img{display:block;width:100%;aspect-ratio:16/6.5;object-fit:cover;object-position:center;}
/* Met een beeld mag de kop niet afsnijden: de onderste helft hoort op het wit te liggen.
   flow-root houdt de negatieve marge binnen de kop (die krimpt dus mee) zonder te knippen. */
.page-hero--beeld{padding-bottom:0;overflow:visible;display:flow-root;}
.page-hero--beeld + section{padding-top:calc(96px + var(--beeld-overlap))!important;}
.kruimelpad{font-size:0.85rem;color:#D9CDEB;margin-bottom:16px;}
.kruimelpad ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.kruimelpad li + li::before{content:"/";margin-right:8px;opacity:0.6;}
.kruimelpad a{color:#F2ECFA;}

/* .tekstpagina is een gewone band: dezelfde ruimte als op de homepage. */
.tekst{max-width:62ch;color:var(--ink-soft);font-size:1.03rem;line-height:1.75;}
.tekst h2{font-size:clamp(1.4rem, 2.2vw, 1.75rem);margin:40px 0 12px;color:var(--ink);}
.tekst h3{font-size:1.15rem;margin:26px 0 8px;color:var(--ink);}
.tekst p{margin:0 0 14px;}
/* De laatste regel geen ondermarge: anders is het wit onder een tekst 14px groter dan elders. */
.tekst > :last-child{margin-bottom:0;}
.tekst ul{list-style:disc;padding-left:22px;margin:0 0 14px;}
.tekst li{margin-bottom:6px;}
.tekst ol{list-style:decimal;padding-left:22px;margin:0 0 14px;}
.tekst li::marker{color:var(--purple-700);}
.tekst ol li::marker{font-weight:700;}
.tekst strong{color:var(--ink);font-weight:700;}
/* Opgemaakte tekst uit het beheer: kop bovenaan zonder extra wit, H3 direct onder een H2 dichterbij. */
.tekst > h2:first-child,.tekst > h3:first-child{margin-top:0;}
.tekst h2 + h3{margin-top:14px;}
.tekst h2 + ul,.tekst h3 + ul,.tekst h2 + ol,.tekst h3 + ol{margin-top:4px;}
.tekst a{color:var(--purple-700);font-weight:600;text-underline-offset:3px;}
.tekst table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:0.92rem;}
.tekst th,.tekst td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.tekst th{color:var(--ink);font-weight:700;background:var(--tint);}
.tekst .bijgewerkt{font-size:0.9rem;color:var(--ink-soft);margin-bottom:26px;}
.tabel-scroll{overflow-x:auto;}

.fout-acties{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
@media (max-width: 620px){
  .page-hero{padding:48px 0 40px;}
  .page-hero--beeld{padding-bottom:0;}
  /* Op mobiel is de .wrap 100vw min 2x20 en het beeld 16:9, dus de helft is 28,125% */
  :root{--beeld-overlap:calc(28.125vw - 11.25px);}
  .hero-beeld{margin:24px 0 calc(-1 * var(--beeld-overlap));}
  .hero-beeld img{aspect-ratio:16/9;}
  .page-hero--beeld + section{padding-top:calc(64px + var(--beeld-overlap))!important;}
}

/* ---------- VASTE KNOP ONDERIN (tablet en mobiel) ---------- */
/* Op kleine schermen staat de belangrijkste actie altijd binnen bereik: een
   rustige, volledig blauwe balk over de hele breedte, met de WhatsApp-knop
   er rechtsboven. */
.mobiele-cta{display:none;}
@media (max-width: 980px){
  /* Zwevende knop midden onderin, op dezelfde hoogte als de zoekknop rechts.
     site.js zet .toon na 40 seconden; daarvoor is hij onzichtbaar en door
     visibility:hidden ook niet aan te tikken of te focussen. */
  .mobiele-cta{
    display:block;position:fixed;z-index:45;
    /* left/right 0 met auto-marges centreert zonder de breedte te knijpen;
       met left:50% zou de knop maar de halve schermbreedte mogen zijn. */
    left:0;right:0;margin:0 auto;width:fit-content;
    bottom:calc(16px + env(safe-area-inset-bottom));
    max-width:calc(100vw - 164px);
    opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease;
  }
  .mobiele-cta.toon{opacity:1;visibility:visible;transform:translateY(0);}
  .mobiele-cta .btn{
    display:flex;border:0;border-radius:999px;padding:15px 24px;
    font-size:0.95rem;font-weight:700;justify-content:center;text-align:center;white-space:normal;
    background:var(--knop-bg, var(--blauw-500));color:var(--knop-tekst, var(--purple-900));
    box-shadow:0 12px 28px -10px rgba(20,10,30,0.7);
  }
  .mobiele-cta .btn:hover{transform:none;background:var(--knop-bg-hover, var(--blauw-400));}
  /* Ruimte onder de pagina, zodat de zwevende knoppen niets afdekken */
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom));}
  .zoek-knop{
    width:56px;height:56px;right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .zoek-knop svg{width:26px;height:26px;}
  .cookie-bar{bottom:calc(86px + env(safe-area-inset-bottom));}
  /* Het tekstje bij de zoekknop is alleen voor desktop (hover) */
  .zoek-knop-tip{display:none;}
}
@media (max-width: 620px){
  /* Wint van de kleinere waarden uit het ontwerp eerder in dit bestand */
  .zoek-knop{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:54px;height:54px;}
  .zoek-knop svg{width:25px;height:25px;}
  .cookie-bar{bottom:calc(82px + env(safe-area-inset-bottom));}
}

/* ---------- GOOGLE-REVIEWS SLIDER ---------- */
.reviews-kop{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:36px;
}
.google-pill{
  display:inline-flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:12px 22px;box-shadow:var(--shadow-card);font-size:0.86rem;color:var(--ink-soft);
}
.google-pill strong{font-family:var(--titel);font-size:1.15rem;color:var(--ink);margin-right:6px;}
.google-pill .review-stars{margin-bottom:0;font-size:0.8rem;}
.google-pill a{color:var(--purple-700);font-weight:600;text-decoration:underline;text-underline-offset:3px;}

.reviews-slider{position:relative;}
/* Eén rij kaarten die horizontaal scrolt en netjes inklikt; werkt met vegen,
   met de pijlen en met het toetsenbord. */
.reviews-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 3);gap:24px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 4px 6px;margin:-4px -4px -6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.reviews-track::-webkit-scrollbar{display:none;}
.reviews-track > *{scroll-snap-align:start;}
.reviews-track:focus-visible{outline:3px solid var(--blauw-500);outline-offset:2px;border-radius:var(--radius-m);}
.reviews-track .review-card{display:flex;flex-direction:column;gap:12px;height:100%;margin:0;}
.review-top{display:flex;align-items:center;gap:12px;}
.review-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--tint-dark);color:var(--purple-700);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--titel);font-weight:600;font-size:1.05rem;
}
.review-naam{display:block;font-weight:600;font-size:0.93rem;color:var(--ink);}
.review-datum{display:block;font-size:0.8rem;color:var(--ink-soft);}
/* Naam, datum en bron staan onder elkaar naast de profielfoto; daaronder
   iets meer lucht voordat de sterren komen. */
.review-top + .review-stars{margin-top:6px;}
/* Naam, datum en bron staan onder elkaar naast de profielfoto. */
.review-wie{min-width:0;}
.review-bron{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:0.78rem;color:var(--ink-soft);}
.review-bron svg{flex-shrink:0;}
.reviews-track .review-stars{margin-bottom:0;}
.reviews-track .review-card p{font-size:0.96rem;color:var(--ink);max-width:none;}

.slider-knoppen{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;}
.slider-knop{
  width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  color:var(--purple-800);display:flex;align-items:center;justify-content:center;
  transition:border-color .16s ease, background .16s ease;
}
.slider-knop:hover:not([disabled]){border-color:var(--purple-700);background:var(--tint);}
.slider-knop[disabled]{opacity:0.35;cursor:default;}
.slider-knoppen[hidden]{display:none;}

@media (prefers-reduced-motion: reduce){
  .reviews-track{scroll-behavior:auto;}
}
@media (max-width: 980px){
  .reviews-track{grid-auto-columns:calc((100% - 24px) / 2);}
  .reviews-kop{margin-bottom:28px;}
}
@media (max-width: 620px){
  .reviews-track{grid-auto-columns:86%;gap:16px;}
  .google-pill{width:100%;justify-content:flex-start;}
}

/* Twee secties met dezelfde achtergrond onder elkaar: één keer ruimte in plaats
   van twee (anders leest het als een groot wit gat tussen Diensten en de
   beoordelingen). */
#beoordelingen{padding-top:0;}

/* ---------- SUGGESTIES (onderwerpen onder een dienst) ---------- */
.suggestie-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.suggestie-kaart{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-card);
  transition:border-color .16s ease, transform .16s ease;
}
.suggestie-kaart:hover{border-color:var(--purple-700);transform:translateY(-2px);}
.suggestie-foto{aspect-ratio:16/10;overflow:hidden;background:var(--tint-dark);}
.suggestie-foto img{width:100%;height:100%;object-fit:cover;}
.suggestie-body{padding:26px 28px 28px;display:flex;flex-direction:column;gap:12px;flex:1;}
.suggestie-body h3{font-size:1.25rem;}
.suggestie-body p{color:var(--ink-soft);font-size:0.97rem;max-width:58ch;}
/* De hele kaart is klikbaar; de link zelf houdt het tikdoel en de focusrand */
.kaart-link{text-decoration:none;}
.kaart-link::after{content:"";position:absolute;inset:0;}
.suggestie-kaart{position:relative;}
.suggestie-meer{
  margin-top:auto;padding-top:6px;font-weight:600;font-size:0.93rem;color:var(--purple-700);
  display:inline-flex;align-items:center;gap:7px;
}
.suggestie-kaart:hover .suggestie-meer .pijl{transform:translateX(3px);}
.suggestie-meer .pijl{transition:transform .16s ease;}

.onderwerpen-lijst{margin-top:44px;padding-top:32px;border-top:1px solid var(--line);}
/* Zelfde kleine kop als "Het team van Zuidstad" op de homepage: titelfont, 0.92rem. */
.onderwerpen-lijst h3{font-size:0.92rem;font-weight:700;color:var(--ink);margin-bottom:14px;}
.onderwerpen-lijst .dienst-list{margin-top:0;padding-top:0;gap:8px;}
.onderwerpen-lijst .dienst-list a{font-size:0.88rem;padding:7px 14px;}

/* ---------- INHOUDSPAGINA MET ZIJKOLOM ---------- */
.inhoud-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:56px;align-items:start;}
.zijkolom{display:flex;flex-direction:column;gap:24px;}
.zij-foto{margin:0;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-card);}
.zij-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.zij-kaart{
  background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-l);padding:28px;
  display:flex;flex-direction:column;gap:12px;
}
.zij-kaart h2{font-size:1.2rem;}
.zij-kaart p{color:var(--ink-soft);font-size:0.95rem;}
.zij-kaart .btn{align-self:flex-start;margin-top:4px;}
.zij-contact{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line);}
.zij-contact li{display:flex;align-items:center;gap:9px;font-size:0.92rem;color:var(--ink-soft);}
.zij-contact svg{color:var(--purple-700);flex-shrink:0;}
.zij-contact a{color:var(--ink-soft);text-decoration:none;}
.zij-contact a:hover{color:var(--purple-800);text-decoration:underline;}
.terug-link{margin-top:32px;}
.terug-link a{color:var(--purple-700);font-weight:600;text-decoration:none;display:inline-block;padding:3px 0;}
.terug-link a:hover{text-decoration:underline;text-underline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  .suggestie-kaart,.suggestie-meer .pijl{transition:none;}
  .suggestie-kaart:hover{transform:none;}
}
@media (max-width: 1180px) and (min-width: 981px){
  .suggestie-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 980px){
  .suggestie-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  .inhoud-grid{grid-template-columns:minmax(0,1fr);gap:36px;}
}
@media (max-width: 620px){
  .suggestie-grid{grid-template-columns:minmax(0,1fr);}
  .suggestie-body{padding:22px;}
}

/* ---------- TEAM (Over Zuidstad) ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.team-kaart{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  padding:22px;text-align:center;box-shadow:var(--shadow-card);
}
.team-foto{
  width:120px;height:120px;border-radius:50%;overflow:hidden;margin:0 auto 18px;
  background:var(--tint-dark);box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--line);
}
.team-foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%;}
.team-kaart h3{font-size:1.1rem;}
.team-kaart p{margin-top:6px;color:var(--ink-soft);font-size:0.9rem;}

/* ---------- ERKENNINGEN ---------- */
.erkenning-blok{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:center;}
.erkenning-tekst{margin-top:16px;color:var(--ink-soft);font-size:1.03rem;max-width:58ch;}
.erkenning-lijst{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 0;}
.erkenning-lijst > div{
  background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-m);padding:16px 20px;min-width:180px;
}
.erkenning-lijst dt{font-size:0.82rem;font-weight:600;color:var(--ink-soft);}
.erkenning-lijst dd{margin:4px 0 0;font-family:var(--titel);font-size:1.25rem;color:var(--ink);}
.keurmerk-kaart{
  background:var(--purple-900);color:#E6DCF2;border-radius:var(--radius-l);padding:32px;text-align:center;
}
.keurmerk-kaart img{height:90px;width:auto;margin:0 auto 18px;}
.keurmerk-kaart p{font-size:0.95rem;max-width:34ch;margin:0 auto;}

/* ---------- ALLE BEOORDELINGEN (Ervaringen) ---------- */
.review-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.review-raster .review-card{display:flex;flex-direction:column;gap:12px;}
.review-raster .review-stars{margin-bottom:0;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start;}
.contact-formulier h2{font-size:clamp(1.5rem,2.2vw,1.9rem);}
.formulier-intro{margin-top:12px;color:var(--ink-soft);max-width:58ch;}
.contact-formulier form{margin-top:26px;}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.veldblok{display:flex;flex-direction:column;gap:7px;margin:0 0 18px;}
.veldblok label{font-size:0.9rem;font-weight:600;color:var(--ink);}
.veldblok .verplicht{color:var(--purple-700);}
.veldblok input,.veldblok select,.veldblok textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--radius-s);padding:13px 15px;width:100%;
}
.veldblok textarea{min-height:150px;resize:vertical;line-height:1.55;}
.veldblok input:focus,.veldblok select:focus,.veldblok textarea:focus{
  outline:none;border-color:var(--blauw-500);box-shadow:0 0 0 3px rgba(34,164,221,0.18);
}
.veldhint{font-size:0.84rem;color:var(--ink-soft);}
.akkoord label{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:0.94rem;color:var(--ink-soft);}
.akkoord input{width:22px;height:22px;flex-shrink:0;margin-top:1px;accent-color:var(--purple-700);}
.akkoord a{color:var(--purple-700);font-weight:600;}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.formulier-fout{
  background:#FDEEEC;border:1px solid #F6C9C3;color:#B42318;border-radius:var(--radius-m);
  padding:14px 18px;margin-top:20px;font-size:0.95rem;
}
.bedankt{
  background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-l);padding:38px;
}
.bedankt-vink{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--blauw-500);color:var(--purple-900);margin-bottom:20px;
}
.bedankt h2{font-size:1.6rem;}
.bedankt p{margin-top:12px;color:var(--ink-soft);max-width:48ch;}
.contact-gegevens{display:flex;flex-direction:column;gap:24px;position:sticky;top:104px;}
.zij-knoppen{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.zij-knoppen .btn{justify-content:center;background:#fff;}
.kaart-breed{height:360px;}
.kaart-breed iframe{width:100%;height:100%;border:0;display:block;}

/* FAQ op een lichte achtergrond (contactpagina) */
.faq-licht{display:flex;flex-direction:column;max-width:820px;}
.faq-licht details{border-bottom:1px solid var(--line);}
.faq-licht details:first-child{border-top:1px solid var(--line);}
.faq-licht summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;cursor:pointer;list-style:none;font-weight:600;font-size:1rem;color:var(--ink);
}
.faq-licht summary::-webkit-details-marker{display:none;}
.faq-licht summary::marker{content:"";}
.faq-licht summary:hover{color:var(--purple-700);}
.faq-licht .teken{flex-shrink:0;width:22px;height:22px;position:relative;transition:transform .22s ease;color:var(--purple-700);}
.faq-licht .teken::before,.faq-licht .teken::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;}
.faq-licht .teken::before{width:14px;height:2px;transform:translate(-50%,-50%);}
.faq-licht .teken::after{width:2px;height:14px;transform:translate(-50%,-50%);}
.faq-licht details[open] .teken{transform:rotate(45deg);}
.faq-licht details p{color:var(--ink-soft);font-size:0.97rem;line-height:1.65;margin:0;padding:0 38px 20px 0;max-width:68ch;}
@media (prefers-reduced-motion: reduce){ .faq-licht .teken{transition:none;} }

@media (max-width: 980px){
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .erkenning-blok{grid-template-columns:minmax(0,1fr);gap:32px;}
  .review-raster{grid-template-columns:repeat(2,minmax(0,1fr));}
  .contact-grid{grid-template-columns:minmax(0,1fr);gap:36px;}
  .contact-gegevens{position:static;}
  .kaart-breed{height:300px;}
}
@media (max-width: 620px){
  .team-grid{grid-template-columns:minmax(0,1fr);}
  .review-raster{grid-template-columns:minmax(0,1fr);}
  .veldrij{grid-template-columns:minmax(0,1fr);gap:0;}
  .bedankt{padding:26px 22px;}
  .kaart-breed{height:260px;}
}

/* ---------- TIKDOELEN (WCAG 2.5.8: minimaal 24×24 px) ---------- */
/* Losse links in lopende tekst vallen hier bewust buiten: daar geldt de
   uitzondering, en extra padding zou de regelafstand verstoren. */
.util-left a,.util-left span,.util-right a{padding:3px 0;}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;min-height:24px;min-width:34px;padding:4px 10px;}
.locatie-detail a,.zij-contact a,.review-source a{display:inline-block;padding:3px 0;}
.mobile-menu-contact a{padding:3px 0;}
.google-pill a{display:inline-block;padding:4px 0;}
.kruimelpad a{display:inline-block;padding:4px 0;}
.kruimelpad li{display:flex;align-items:center;}
.akkoord input{width:24px;height:24px;}

/* Spamval: buiten beeld én buiten de voorleesvolgorde, zonder de pagina te verbreden */
.honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;left:auto;}

/* Op de dienst- en over-pagina's is de tekstkolom breder dan op de homepage;
   extra begrenzing houdt de regels onder ~75 tekens (leesbaarheidsregel). */
.tekstpagina .over-copy p{max-width:58ch;}

/* ============================================================
   VACATURES
   ============================================================ */
.vacature-telling{color:var(--ink-soft);font-size:0.93rem;letter-spacing:.01em;margin-bottom:18px;}
.tekst .vacature-lijst,.vacature-lijst{display:flex;flex-direction:column;gap:24px;list-style:none;padding:0;margin:0;}
.tekst .vacature-lijst > li{margin:0;}
.vacature-kaart{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-card);
  transition:border-color .16s ease, transform .16s ease;
}
.vacature-kaart:hover{border-color:var(--purple-700);transform:translateY(-2px);}
.vacature-kaart h2,.vacature-kaart h3{font-size:1.3rem;margin:0;}
.vacature-kaart h2 a,.vacature-kaart h3 a{color:var(--purple-900);text-decoration:none;}
.vacature-kaart h2 a::after,.vacature-kaart h3 a::after{content:"";position:absolute;inset:0;}
.vacature-kaart:hover h2 a,.vacature-kaart:hover h3 a{color:var(--purple-700);}
.vacature-intro{color:var(--ink-soft);font-size:0.97rem;max-width:58ch;margin:0;}
.tekst .vacature-feiten,.vacature-feiten{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:0;}
.tekst .vacature-feiten li{margin:0;}
.vacature-feiten li{display:flex;align-items:center;gap:9px;font-size:0.92rem;color:var(--ink-soft);}
.vacature-feiten svg{color:var(--purple-700);flex-shrink:0;}
.vacature-feiten .feit-label{color:var(--purple-900);font-weight:600;}
.vacature-feiten--groot{
  gap:12px 26px;background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-m);
  padding:18px 22px;margin-bottom:28px;
}
.vacature-actie{margin:6px 0 0;}
.vacature-actie .btn{position:relative;z-index:1;}
.vacature-lijst--kort .vacature-kaart{gap:10px;}
.vacature-datum{color:var(--ink-soft);font-size:0.88rem;margin-top:22px;}
.vacature-open{
  margin-top:24px;background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:28px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.vacature-open h2{font-size:1.2rem;margin:0;}
.vacature-open p{color:var(--ink-soft);font-size:0.95rem;margin:0;max-width:56ch;}
.contactpersoon{color:var(--ink)!important;font-size:1rem!important;line-height:1.4;}
.contactpersoon-functie{color:var(--ink-soft);font-size:0.92rem;}

/* Delen: socials en link kopiëren */
.deelblok{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
}
.deel-titel{font-weight:600;color:var(--purple-900);font-size:0.95rem;}
.deel-knoppen{display:flex;flex-wrap:wrap;gap:10px;}
.deel-knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:42px;min-height:42px;padding:0 13px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--purple-800);font:inherit;font-size:0.9rem;font-weight:600;
  text-decoration:none;cursor:pointer;transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.deel-knop:hover{border-color:var(--purple-700);background:var(--tint);color:var(--purple-900);}
.deel-knop svg{flex-shrink:0;}
.deel-knop.is-gekopieerd{border-color:var(--blauw-500);color:var(--blauw-500);}

/* Sollicitatieformulier onder de vacature */
.sollicitatie{
  margin-top:38px;background:var(--tint);border:1px solid var(--line);
  border-radius:var(--radius-l);padding:28px;scroll-margin-top:96px;
}
.sollicitatie h2{font-size:1.4rem;margin:0 0 6px;}
.sollicitatie .bedankt{margin:0;}
.sollicitatie input[type="file"]{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-s);
  background:#fff;font:inherit;font-size:0.95rem;color:var(--ink-soft);
}
.sollicitatie input[type="file"]::file-selector-button{
  margin-right:12px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--tint);color:var(--purple-800);font:inherit;font-size:0.88rem;font-weight:600;cursor:pointer;
}

/* Downloadknop op de juridische pagina's */
.document-download{margin-bottom:26px;}
.document-download .btn{display:inline-flex;align-items:center;gap:9px;}

@media (max-width:720px){
  .vacature-feiten{gap:8px 16px;}
  .vacature-feiten--groot{padding:16px 18px;}
  .deelblok{gap:10px 14px;}
}

/* ============================================================
   RITME SUBPAGINA'S — gelijk aan de homepage
   ============================================================ */
.page-hero ~ section{padding-top:96px;padding-bottom:96px;}
.page-hero ~ section:not(.bg-tint) + section:not(.bg-tint),
.page-hero ~ section.bg-tint + section.bg-tint{padding-top:0;}
.bg-tint + .cta-band-inner{padding-top:96px;}
@media (max-width: 620px){
  .page-hero ~ section{padding-top:64px;padding-bottom:64px;}
  .page-hero ~ section:not(.bg-tint) + section:not(.bg-tint),
  .page-hero ~ section.bg-tint + section.bg-tint{padding-top:0;}
  .bg-tint + .cta-band-inner{padding-top:64px;}
}
/* Beoordelingen staan normaal direct onder een witte band (padding-top 0).
   Komt er een lichtpaarse band voor, dan hoort er gewoon de volle ruimte bij. */
.bg-tint + #beoordelingen{padding-top:96px;}
@media (max-width: 620px){ .bg-tint + #beoordelingen{padding-top:64px;} }
/* Zelf lichtpaars onder een witte band (blok op een onderwerppagina): ook volle ruimte. */
section:not(.bg-tint) + #beoordelingen.bg-tint{padding-top:96px;}
@media (max-width: 620px){ section:not(.bg-tint) + #beoordelingen.bg-tint{padding-top:64px;} }

/* Zijkaart op mobiel 24px binnenruimte (zoals de reviewkaarten op de homepage):
   anders past "Plan een gratis adviesgesprek" op een telefoon van 360px net niet
   op één regel. Staat bewust achteraan, na de gewone .zij-kaart-regel. */
@media (max-width: 620px){ .zij-kaart{padding:24px;} }

/* Feitenblok boven een vacature: binnenruimte terug. De regel die opsommingen
   in .tekst niet laat inspringen (padding:0) was sterker en haalde die weg. */
.tekst .vacature-feiten--groot{padding:20px 28px;}
@media (max-width: 620px){ .tekst .vacature-feiten--groot{padding:18px 24px;} }

/* Contactformulier als lichtpaarse kaart, net als de kaart ernaast. */
.contact-formulier{
  background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-l);padding:28px;
}
@media (max-width: 620px){ .contact-formulier{padding:24px;} }

/* Onderste regel van de footer gecentreerd op desktop en tablet. */
@media (min-width: 621px){
  .footer-bottom{flex-direction:column;justify-content:center;text-align:center;gap:10px;}
  .footer-bottom-links{margin-left:0;justify-content:center;}
}

/* ============================================================
   MEDEWERKERS
   ============================================================ */
/* Teamkaart: de naam is de link over de hele kaart, de knoppen eronder liggen
   daarboven zodat ze hun eigen bestemming houden. */
.team-kaart{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:28px;
  transition:border-color .16s ease, transform .16s ease;
}
.team-kaart .team-foto{margin-bottom:0;}
.team-kaart h3,.team-kaart p{margin:0;}
.team-kaart h3 a{color:var(--purple-900);text-decoration:none;}
.team-kaart h3 a::after{content:"";position:absolute;inset:0;}
.team-kaart:hover{border-color:var(--purple-700);transform:translateY(-2px);}
.team-kaart:hover h3 a{color:var(--purple-700);}
.team-meer{
  margin-top:auto;padding-top:10px;font-weight:600;font-size:0.88rem;color:var(--purple-700);
}
.medewerker-talen{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;}
.vlaggen{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;justify-content:center;}
.vlaggen li{display:flex;}
.vlag{display:block;border-radius:50%;}
.talen-tekst{font-size:0.88rem;color:var(--ink-soft);margin:0;}
.medewerker-links{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0;justify-content:center;
}
.medewerker-links a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:38px;min-height:38px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--purple-800);font-size:0.88rem;font-weight:600;text-decoration:none;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.medewerker-links a:hover{border-color:var(--purple-700);background:var(--tint);color:var(--purple-900);}
.medewerker-links--klein a{padding:0;width:38px;}
/* In de zijkaart staan ze onder elkaar en links uitgelijnd */
.zij-kaart .medewerker-talen{align-items:flex-start;}
.zij-kaart .vlaggen,
.zij-kaart .medewerker-links{justify-content:flex-start;}
.zij-kaart .medewerker-links{margin-top:4px;}
.zij-kaart .medewerker-links a{background:#fff;}

.zij-foto--vierkant img{aspect-ratio:1/1;object-fit:cover;}
/* Pagina van een medewerker en van een klantverhaal: de terug-link (en bij een
   verhaal ook de quote) zijn eigen blokken in het raster. Op desktop staan ze
   in de linkerkolom, op mobiel kunnen ze daardoor een eigen plek krijgen. */
.medewerker-terug,
.verhaal-terug{grid-column:1;margin-top:0;}
.verhaal-quote--blok{grid-column:1;margin-top:0;}
.medewerker-extra{margin:28px 0 0;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-card);}
.medewerker-extra img{width:100%;height:auto;display:block;}
.medewerker-video{
  margin-top:28px;border-radius:var(--radius-l);overflow:hidden;
  background:var(--purple-900);border:1px solid var(--line);box-shadow:var(--shadow-card);
}
.medewerker-video video{width:100%;height:auto;max-height:70vh;display:block;}

/* Teamrij op de homepage is nu klikbaar */
a.team-member{text-decoration:none;color:inherit;border-radius:999px;}
a.team-member:hover span:last-child{color:var(--purple-700);text-decoration:underline;text-underline-offset:3px;}
a.team-member .avatar{display:block;}
/* Onder 980px staat alles onder elkaar. Op de pagina van een medewerker is de
   volgorde dan: foto, tekst (met video), contactblok en als laatste de
   terug-link. display:contents haalt de zijkolom als blok uit de weg, zodat de
   foto en het contactblok losse items worden die we kunnen verplaatsen. */
@media (max-width: 980px){
  .medewerker-grid .zijkolom{display:contents;}
  .medewerker-grid .zij-foto{order:1;}
  .medewerker-grid .tekst{order:2;}
  .medewerker-grid .zij-kaart{order:3;}
  .medewerker-grid .medewerker-terug{order:4;grid-column:auto;}
  /* Op mobiel staat de vierkante foto over de volle breedte */
  .medewerker-grid .zij-foto--vierkant{max-width:none;}

  /* Klantverhaal: foto, quote, In het kort, tekst, contactblok, terug-link */
  .verhaal-grid .zijkolom{display:contents;}
  .verhaal-grid .zij-foto{order:1;}
  .verhaal-grid .verhaal-quote--blok{order:2;grid-column:auto;}
  .verhaal-grid .verhaal-feiten{order:3;}
  .verhaal-grid .tekst{order:4;}
  .verhaal-grid .zij-kaart{order:5;}
  .verhaal-grid .verhaal-terug{order:6;grid-column:auto;}
}

/* Reviews: lange teksten ingekort tot 6 regels (alleen als JavaScript werkt) */
.review-card.is-kort .review-tekst{
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
}
.review-meer{
  align-self:flex-start;background:none;border:0;padding:4px 0;margin-top:-4px;
  font:inherit;font-size:0.9rem;font-weight:600;color:var(--purple-700);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);min-height:24px;
}
.review-meer:hover{text-decoration-color:var(--purple-700);}
/* CTA-band zonder vragen: alleen de oproep, over de volle breedte */
.cta-band--zonder-faq{grid-template-columns:1fr;}
.cta-band--zonder-faq h2{max-width:none;}
/* Eigen veelgestelde vragen onder de tekst van een onderwerp */
.tekst .onderwerp-faq{margin-top:8px;}
.tekst .onderwerp-faq h2{margin-bottom:14px;}
.tekst .onderwerp-faq + .terug-link{margin-top:28px;}

/* ---------- HOMEPAGE-HEADER MET VIDEO (variant 6) ----------
   De video vult de hele breedte en de rest van het scherm onder de witte
   menubalk. --kop-hoogte wordt door site.js op de werkelijke hoogte van de
   balken gezet; 118px is de terugval als JS uitstaat. */
.hero--film{
  min-height:calc(100svh - var(--kop-hoogte, 118px));
  display:flex;align-items:flex-end;
  padding:96px 0 72px;
  background:var(--purple-900);
  isolation:isolate;
}
.hero-film-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:-2;
}
/* Twee verlopen over elkaar: van boven naar onder steeds donkerder, en de
   linkerkant (waar de tekst staat) extra donker. Zo blijft alles leesbaar,
   welk beeld er ook achter staat.

   --waas-sterkte schaalt alle doorzichtigheden tegelijk; die zet het beheer in
   de head (Instellingen → Huisstijl, schuifbalk "Laag over de video"). 1 is zo
   donker als het ontwerp, lager laat meer van de video zien. */
.hero-film-waas{
  position:absolute;inset:0;z-index:-1;
  --waas:var(--waas-sterkte, 1);
  background:
    linear-gradient(90deg,
      rgba(27,12,41,calc(0.74 * var(--waas))) 0%,
      rgba(27,12,41,calc(0.40 * var(--waas))) 52%,
      rgba(27,12,41,calc(0.10 * var(--waas))) 100%),
    linear-gradient(180deg,
      rgba(20,9,30,calc(0.30 * var(--waas))) 0%,
      rgba(36,17,53,calc(0.58 * var(--waas))) 45%,
      rgba(27,12,41,calc(0.93 * var(--waas))) 100%);
}
/* De hero is een flex-container; zonder width:100% krimpt .wrap naar de
   inhoud en staat de tekst verder naar binnen dan op de rest van de site. */
.hero--film .wrap{position:relative;z-index:1;width:100%;}
.hero-film-grid{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px;width:100%;
}
.hero-film-inhoud{max-width:700px;}
/* Kicker met streepje, in dezelfde maat als de kickers elders op de site. */
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  font-size:0.8rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--blauw-400);
}
/* Rondje voor de tekst, zoals in de oude header. */
.hero-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blauw-400);flex-shrink:0;}
.hero--film h1{max-width:16ch;text-shadow:0 2px 24px rgba(20,9,30,0.45);}
.hero--film .hero-sub{max-width:54ch;color:rgba(255,255,255,0.86);}
.hero--film .hero-search{
  margin-top:34px;padding-top:0;border-top:0;max-width:620px;
}
.hero--film .hero-search-input{box-shadow:0 20px 60px rgba(20,10,30,0.3);}
/* Klein bewijsblokje rechts, zoals in het voorbeeld. */
.hero-bewijs{
  min-width:280px;max-width:330px;padding:18px 22px;
  border-left:2px solid var(--knop-bg, var(--blauw-500));
  background:rgba(28,12,41,0.3);backdrop-filter:blur(6px);
}
.hero-bewijs strong{
  display:block;margin-bottom:5px;font-family:var(--titel);font-size:1.15rem;line-height:1.25;color:#fff;
}
.hero-bewijs span{display:block;color:rgba(255,255,255,0.72);font-size:0.85rem;line-height:1.55;}

@media (max-width: 980px){
  .hero-film-grid{grid-template-columns:minmax(0,1fr);gap:32px;}
  .hero-bewijs{display:none;}
  /* De tekst loopt hier over de volle breedte, dus overal even donker. */
  .hero-film-waas{
    background:linear-gradient(180deg,
      rgba(20,9,30,calc(0.45 * var(--waas))) 0%,
      rgba(36,17,53,calc(0.66 * var(--waas))) 45%,
      rgba(27,12,41,calc(0.94 * var(--waas))) 100%);
  }
}
@media (max-width: 620px){
  .hero--film{padding:72px 0 56px;min-height:calc(100svh - var(--kop-hoogte, 118px));}
  .hero--film h1{max-width:none;}
  .hero--film .hero-search{margin-top:28px;}
}
/* Bij minder beweging blijft de video staan op het posterbeeld (site.js pauzeert hem). */

/* ---------- KLANTVERHALEN ----------
   De korte lijst en de uitgelichte uitspraak; ze staan op de eigen pagina van
   een verhaal (links de tekst, rechts de zijkolom). Het blok op de homepage
   gebruikt .case-card hierboven. */
.verhaal-feiten{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--tint);padding:18px 20px;}
.verhaal-feiten-kop{
  display:block;margin-bottom:12px;font-size:0.72rem;font-weight:700;letter-spacing:0.09em;
  text-transform:uppercase;color:var(--purple-700);
}
.verhaal-feiten dl{margin:0;display:flex;flex-direction:column;gap:12px;}
.verhaal-feiten dt{font-size:0.78rem;font-weight:700;color:var(--ink);}
.verhaal-feiten dd{margin:2px 0 0;font-size:0.9rem;line-height:1.5;color:var(--ink-soft);}
.verhaal-quote{
  margin:26px 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--blauw-500);max-width:58ch;
}
.verhaal-quote p{
  margin:0;font-family:var(--titel);font-size:1.22rem;line-height:1.45;color:var(--ink);
}
.verhaal-quote cite{display:block;margin-top:10px;font-style:normal;font-size:0.86rem;color:var(--ink-soft);}

@media (max-width: 620px){
  .verhaal-quote p{font-size:1.1rem;}
}

/* ---------- KLANTVERHALEN: overzicht in kaarten ----------
   Elk verhaal is een kaart die naar zijn eigen pagina leidt. Het raster groeit
   mee: bij acht verhalen blijft het overzichtelijk. */
/* Twee verhalen naast elkaar; onder 780px onder elkaar. */
/* Op Ervaringen: het overzicht onder het grote blok met één verhaal. */
.verhalen-andere{margin-top:72px;}
.verhalen-andere > h2{font-size:1.5rem;margin-bottom:24px;}
@media (max-width: 620px){ .verhalen-andere{margin-top:48px;} }
.verhaal-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:28px;}
@media (max-width: 980px){ .verhaal-raster{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));} }
.verhaal-kaart{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.verhaal-kaart:hover{transform:translateY(-2px);border-color:var(--purple-700);}
.verhaal-kaart-foto img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
.verhaal-kaart-body{display:flex;flex-direction:column;gap:10px;padding:26px 28px 28px;flex:1;}
.verhaal-kaart-body h3{font-size:1.3rem;line-height:1.25;}
.verhaal-kaart-namen{margin:0;font-size:0.88rem;font-weight:600;color:var(--purple-700);}
.verhaal-kaart-intro{margin:0;color:var(--ink-soft);font-size:0.96rem;line-height:1.65;}
.verhaal-kaart-feiten{
  margin:6px 0 0;padding:16px 18px;border-radius:var(--radius-m);background:var(--tint);
  display:flex;flex-direction:column;gap:10px;
}
.verhaal-kaart-feiten dt{font-size:0.74rem;font-weight:700;letter-spacing:0.02em;color:var(--purple-700);}
.verhaal-kaart-feiten dd{margin:2px 0 0;font-size:0.88rem;line-height:1.5;color:var(--ink-soft);}
.verhaal-kaart-meer{
  margin-top:auto;padding-top:14px;font-weight:700;font-size:0.92rem;color:var(--purple-700);
}
.verhaal-kaart:hover .verhaal-kaart-meer{color:var(--purple-800);}

/* De hele kaart klikbaar, met de titel als echte link (goed voor toetsenbord en Google). */
.verhaal-kaart-body h3 .kaart-link::after{content:"";position:absolute;inset:0;}
.verhaal-kaart{position:relative;}

/* Naam onder de foto in de zijkolom van een verhaalpagina */
.zij-foto{position:relative;}
.zij-foto-naam{
  position:absolute;left:14px;bottom:14px;padding:7px 13px;border-radius:999px;
  background:rgba(36,22,51,0.78);color:#fff;font-size:0.82rem;font-weight:600;backdrop-filter:blur(6px);
}
.verhaal-wie{
  margin:0 0 18px;font-size:0.92rem;font-weight:600;color:var(--purple-700);
}
.zijkolom .verhaal-feiten{background:#fff;}

@media (max-width: 620px){
  .verhaal-raster{grid-template-columns:minmax(0,1fr);gap:22px;}
  .verhaal-kaart-body{padding:22px;}
}

/* ---------- Zwevende zoekknop: tekstje ernaast ---------- */
.zoek-knop{position:fixed;}
.zoek-knop-tip{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  white-space:nowrap;padding:9px 16px;border-radius:999px;
  background:var(--purple-900);color:#fff;font-size:0.88rem;font-weight:600;
  box-shadow:0 10px 30px -12px rgba(20,10,30,0.7);
  opacity:0;visibility:hidden;transition:opacity .2s ease, visibility .2s ease;
}
.zoek-knop:hover .zoek-knop-tip,
.zoek-knop:focus-visible .zoek-knop-tip{opacity:1;visibility:visible;}

@media (prefers-reduced-motion: reduce){ .zoek-knop-tip{transition:none;} }

/* ---------- "Dit onderwerp hoort ook bij" ----------
   Een onderwerp kan bij meerdere diensten horen. De kruimels blijven vast op de
   hoofddienst; hier staan de andere diensten als knoppen. */
.hoort-ook-bij{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
}
.hoort-ook-bij > span{font-size:0.88rem;font-weight:600;color:var(--ink-soft);}
.hoort-ook-bij a{
  display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--tint);font-size:0.86rem;font-weight:600;color:var(--purple-800);text-decoration:none;
}
.hoort-ook-bij a:hover,.hoort-ook-bij a:focus-visible{border-color:var(--purple-700);background:#fff;color:var(--purple-700);}

/* ---------- Zoekveld bij "Andere onderwerpen" ---------- */
.zoek-veld-knop{
  display:inline-flex;align-items:center;gap:14px;flex-shrink:0;cursor:pointer;
  padding:8px 8px 8px 22px;border:1.5px solid var(--line);border-radius:999px;background:#fff;
  color:var(--ink-soft);font-family:inherit;font-size:0.98rem;font-weight:600;
  box-shadow:var(--shadow-card);transition:border-color .18s ease, transform .18s ease;
}
.zoek-veld-knop:hover{border-color:var(--purple-700);transform:translateY(-1px);}
.zoek-veld-knop-icoon{
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  background:var(--purple-800);color:#fff;flex-shrink:0;
}
.zoek-veld-knop:hover .zoek-veld-knop-icoon{background:var(--blauw-500);color:var(--purple-900);}
@media (max-width: 620px){
  .zoek-veld-knop{width:100%;justify-content:space-between;padding-left:18px;font-size:0.94rem;}
}

/* ---------- Socialmedia-iconen (footer en contactpagina) ----------
   Welke iconen er staan hangt af van wat er bij Instellingen is ingevuld. */
.social-rij{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.social-rij a{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,0.22);color:#fff;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.social-rij a:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.45);transform:translateY(-1px);}
.social-rij--licht a{border-color:var(--line);color:var(--purple-700);background:#fff;}
.social-rij--licht a:hover{background:var(--tint);border-color:var(--purple-700);}
.zij-kaart .social-rij{margin-top:16px;}

/* ---------- Samenwerkingen: rij met logo's ---------- */
/* Tot en met vijf logo's staan ze stil in het midden; zijn er meer, dan
   schuift de rij langzaam door (twee identieke sporen achter elkaar, zodat de
   overgang niet opvalt). Hover of toetsenbordfocus zet hem stil, en wie
   beweging heeft uitgezet in het systeem ziet een gewone rij. */
.logo-rij{display:flex;justify-content:center;gap:48px;align-items:center;flex-wrap:wrap;}
/* Het tweede spoor (de kopie) telt alleen mee zodra de rij doorschuift. */
.logo-rij > .logo-spoor[aria-hidden]{display:none;}
.logo-rij--schuift > .logo-spoor[aria-hidden]{display:flex;}
.logo-spoor{display:flex;align-items:center;gap:48px;list-style:none;margin:0;padding:0;}
.logo-spoor li{display:flex;align-items:center;justify-content:center;}
.logo-spoor img{display:block;max-width:150px;max-height:62px;width:auto;height:auto;object-fit:contain;}
.logo-rij--schuift{flex-wrap:nowrap;overflow:hidden;justify-content:flex-start;gap:48px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.logo-rij--schuift .logo-spoor{flex:0 0 auto;animation:logo-schuif 42s linear infinite;}
.logo-rij--schuift:hover .logo-spoor,
.logo-rij--schuift:focus-within .logo-spoor{animation-play-state:paused;}
@keyframes logo-schuif{from{transform:translateX(0);}to{transform:translateX(calc(-100% - 48px));}}
@media (prefers-reduced-motion: reduce){
  .logo-rij--schuift .logo-spoor{animation:none;}
  .logo-rij--schuift{overflow-x:auto;}
}
.samenwerking-raster{margin-top:44px;}
.zij-website{margin:14px 0 0;font-size:0.92rem;font-weight:600;}
@media (max-width: 620px){
  .logo-rij,.logo-spoor{gap:30px;}
  .logo-spoor img{max-width:120px;max-height:50px;}
  .samenwerking-raster{margin-top:30px;}
}