/* ==================================================================
   Huisstijl Style Marketing, soa-sites
   Micro-website soa test Groningen, dochtersite van ikwilvanmijnsoaaf.nl
   Standaard palet: roze voorop, lichtblauw als accent
   ================================================================== */

:root{
  /* de twee merkkleuren */
  --sm-roze:#E6007E;
  --sm-roze-diep:#C0006A;
  --sm-blauw:#009FE3;
  --sm-blauw-diep:#036A9E;

  --sm-hoofd:var(--sm-roze);
  --sm-hoofd-diep:var(--sm-roze-diep);
  --sm-accent:var(--sm-blauw);
  /* Het lichtblauw haalt als kleine tekst op wit maar 2,97:1 en dat is te weinig.
     Voor tekst gebruiken we daarom het diepere blauw, dat komt op 5,9:1. Het
     lichtblauw blijft voor lijnen, randjes en vlakken, want daar geldt die eis niet. */
  --sm-accent-tekst:var(--sm-blauw-diep);

  /* tekst */
  --sm-tekst:#1A1A1A;
  --sm-tekst-grijs:#3D3D3D;
  --sm-tekst-zacht:#6B6B6B;

  /* vlakken */
  --sm-wit:#FFFFFF;
  --sm-roze-tint:#FCE9F1;
  --sm-roze-tint-licht:#FDEFF5;
  --sm-blauw-tint:#EAF7FD;
  --sm-donker:#141414;
  --sm-rand-roze:#F3D3E3;
  --sm-rand-blauw:#CFE3F4;

  /* vormen */
  --sm-rond-knop:50px;
  --sm-rond-kaart:20px;
  --sm-rond-klein:14px;

  /* schaduwen, altijd met een kleurzweem */
  --sm-schaduw-kaart:0 6px 22px rgba(150,0,80,.06);
  --sm-schaduw-kaart-hover:0 8px 30px rgba(150,0,80,.10);
  --sm-schaduw-knop:0 6px 20px rgba(230,0,126,.26);
  --sm-schaduw-knop-hover:0 10px 28px rgba(230,0,126,.36);

  /* beweging */
  --sm-uit:cubic-bezier(0.23, 1, 0.32, 1);

  /* letters */
  --sm-kop:'SmDisplay','Helvetica Neue',Arial,sans-serif;
  --sm-tekstfont:'Helvetica Neue',Arial,sans-serif;

  /* breedtes */
  --sm-breed:1440px;
  --sm-smal:1060px;
}

/* Manrope, extrabold en bold, versie 20 van het project zelf.
   De licentie (SIL Open Font License 1.1) staat als OFL.txt in dezelfde map en
   hoort daar te blijven. De latin-set dekt het Nederlands; de latin-ext-set
   wordt alleen opgehaald als er een teken op de pagina staat dat erin zit,
   bijvoorbeeld in een buitenlandse naam. */
@font-face{font-family:'SmDisplay';src:url('../fonts/manrope-extrabold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'SmDisplay';src:url('../fonts/manrope-extrabold-ext.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;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:'SmDisplay';src:url('../fonts/manrope-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'SmDisplay';src:url('../fonts/manrope-bold-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;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}

/* ---------------- basis ---------------- */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sm-tekstfont);color:var(--sm-tekst);line-height:1.6;background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-family:var(--sm-kop);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--sm-tekst);text-wrap:balance}
h1{font-size:clamp(29px,4.2vw,46px);line-height:1.12}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:clamp(19px,2vw,23px)}
h4{font-size:1.02rem}
h1 em,h2 em,h3 em{font-style:normal;color:var(--sm-hoofd)}

p{font-size:1.02rem;line-height:1.75;color:var(--sm-tekst-grijs)}
p + p{margin-top:1rem}
a{color:var(--sm-hoofd)}
strong{color:var(--sm-tekst);font-weight:700}
img{max-width:100%;height:auto;display:block}

h2 + p,h3 + p{margin-top:.8rem}
p + h2,ul + h2,ol + h2,div + h2,table + h2{margin-top:2.6rem}
p + h3,ul + h3,ol + h3,div + h3{margin-top:1.9rem}

.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;color:var(--sm-accent-tekst);text-transform:uppercase;letter-spacing:.09em;margin-bottom:.6rem}

/* ---------------- banden en breedtes ---------------- */

.band{padding:4.5rem 0}
.band-kort{padding:3rem 0}
.band-wit{background:var(--sm-wit)}
.band-roze{background:var(--sm-roze-tint-licht)}
.band-blauw{background:var(--sm-blauw-tint)}
.band-tint{background:linear-gradient(150deg,#FBDCEA 0%,#F2F8FD 55%,var(--sm-blauw-tint) 100%)}
.band-donker{background:var(--sm-donker);color:#cfcfcf}

.inner{width:100%;max-width:var(--sm-breed);margin:0 auto;padding:0 3rem}
.inner-sm{width:100%;max-width:var(--sm-smal);margin:0 auto;padding:0 3rem}
.smal{max-width:70ch}

/* ---------------- knoppen ---------------- */

.btn{display:inline-flex;align-items:center;gap:.55rem;background:var(--sm-hoofd);color:#fff !important;font-size:1rem;font-weight:700;padding:.9rem 1.9rem;border-radius:var(--sm-rond-knop);text-decoration:none;border:none;cursor:pointer;box-shadow:var(--sm-schaduw-knop);transition:transform .18s var(--sm-uit),box-shadow .18s var(--sm-uit),background .18s var(--sm-uit)}
.btn-klein{padding:.7rem 1.3rem;font-size:.94rem}
.btn-2{display:inline-flex;align-items:center;gap:.4rem;color:var(--sm-hoofd) !important;font-weight:700;font-size:15px;text-decoration:none;padding:14px 26px;border:2px solid var(--sm-hoofd);border-radius:var(--sm-rond-knop);background:rgba(255,255,255,.75);transition:background .22s var(--sm-uit),transform .18s var(--sm-uit)}
.knoppen{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--sm-hoofd-diep);transform:translateY(-2px);box-shadow:var(--sm-schaduw-knop-hover)}
  .btn-2:hover{background:#fff;transform:translateY(-2px)}
}
.btn:active,.btn-2:active{transform:translateY(0)}

/* ---------------- meldingsbalk ---------------- */

.melding{background:linear-gradient(90deg,var(--sm-roze),var(--sm-roze-diep));color:#fff;min-height:34px;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:12.5px;font-weight:700;letter-spacing:.02em;text-align:center}
.melding p{color:#fff;font-size:12.5px;font-weight:700;line-height:1.35;padding:.35rem 1.2rem;margin:0}
.melding-kort{display:none}
@media(max-width:700px){.melding-lang{display:none}.melding-kort{display:inline}}

/* ---------------- menubalk ---------------- */

.balk{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--sm-rand-roze);position:sticky;top:0;z-index:50}
.balk .inner{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding-top:.7rem;padding-bottom:.7rem}
.logo{display:block;flex-shrink:0;line-height:0;text-decoration:none}
.logo img{height:42px;width:auto;display:block}
/* De regel onder het logo. Op het logo zelf staat "powered by" te klein om te
   lezen, dus staat hij hier als echte tekst, net als in de huisstijl. */
.logo small{display:block;line-height:1.2;margin-top:5px;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;color:var(--sm-tekst-zacht)}
.logo small b{color:var(--sm-hoofd);font-weight:800}
@media (hover:hover) and (pointer:fine){.logo:hover small b{color:var(--sm-hoofd-diep)}}

.hoofdnav{display:flex;align-items:center;gap:.15rem;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hoofdnav::-webkit-scrollbar{display:none}
.hoofdnav a{color:var(--sm-tekst);text-decoration:none;font-size:.92rem;font-weight:600;padding:.5rem .8rem;border-radius:10px;white-space:nowrap;transition:background .18s var(--sm-uit),color .18s var(--sm-uit)}
.hoofdnav a[aria-current="page"]{background:var(--sm-hoofd);color:#fff;box-shadow:0 4px 14px rgba(230,0,126,.28)}
@media (hover:hover) and (pointer:fine){
  .hoofdnav a:hover{background:var(--sm-roze-tint);color:var(--sm-hoofd)}
  .hoofdnav a[aria-current="page"]:hover{background:var(--sm-hoofd);color:#fff}
}

/* ---------------- hero ---------------- */

.hero{background:linear-gradient(150deg,#FBDCEA 0%,#F2F8FD 55%,var(--sm-blauw-tint) 100%);padding:3.2rem 0 0;position:relative}
.hero-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2.5rem;align-items:center;padding-bottom:3.2rem}
.hero-kort .hero-top{grid-template-columns:1fr;padding-bottom:2.6rem;max-width:80ch}
.hero .eyebrow{color:#fff;background:linear-gradient(90deg,var(--sm-roze),var(--sm-roze-diep));padding:.5rem 1.1rem;border-radius:50px;box-shadow:0 6px 18px rgba(230,0,126,.30);letter-spacing:.09em;font-size:12.5px}
.hero p.lead{font-size:1.08rem;margin:1rem 0 1.6rem;max-width:62ch;color:var(--sm-tekst-grijs)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--sm-rand-roze);border-radius:50px;padding:.45rem 1rem;font-size:.86rem;font-weight:600;color:var(--sm-tekst)}
.chip svg{flex-shrink:0}

/* De foto's van de klant zijn vierkant aangeleverd. Ze worden dus niet in een
   4/3-kader geduwd, want dan gaat er boven en onder een stuk af. Het kader
   volgt de foto, en het roze-blauwe verloop zit er als randje omheen. */
.beeld{position:relative;border-radius:24px;padding:6px;
  background:linear-gradient(135deg,var(--sm-roze) 0%,#F02E86 45%,var(--sm-blauw) 100%);
  box-shadow:0 18px 44px rgba(150,0,80,.22);display:block;overflow:hidden}
.beeld img{width:100%;height:auto;display:block;border-radius:19px}

/* Brede beeldband: de foto's zijn als duo aangeleverd, dus zo staan ze er ook. */
.baan-beeld{position:relative;border-radius:24px;overflow:hidden;margin:2.4rem 0;
  box-shadow:0 18px 44px rgba(150,0,80,.16)}
.baan-beeld img{width:100%;height:auto;display:block;will-change:transform}
.baan-beeld figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.4rem .9rem;
  background:linear-gradient(to top,rgba(20,20,20,.62),rgba(20,20,20,0));
  color:#fff;font-size:.85rem;font-weight:600}

.golf{line-height:0}
.golf svg{display:block;width:100%;height:70px}

/* Leesbalk, wordt door site.js aangemaakt */
.leesbalk{position:fixed;left:0;right:0;top:0;height:3px;z-index:80;pointer-events:none}
.leesbalk span{display:block;height:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--sm-roze),var(--sm-blauw))}

/* ---------------- kruimelpad ---------------- */

.kruimels{font-size:.82rem;color:var(--sm-tekst-zacht);padding:.9rem 0 0}
.kruimels ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.kruimels a{color:var(--sm-tekst-zacht);text-decoration:none}
.kruimels li:not(:last-child)::after{content:'›';margin-left:.4rem;color:#b9b9b9}
.kruimels [aria-current="page"]{color:var(--sm-tekst);font-weight:600}
@media (hover:hover) and (pointer:fine){.kruimels a:hover{color:var(--sm-hoofd)}}

/* ---------------- kort antwoord ---------------- */

.kort{position:relative;background:#fff;border:1px solid var(--sm-rand-blauw);border-left:5px solid var(--sm-accent);border-radius:var(--sm-rond-klein);padding:1.3rem 1.5rem;box-shadow:var(--sm-schaduw-kaart);margin:0 0 2rem}
.kort h2,.kort h3{font-size:.78rem;font-weight:800;color:var(--sm-accent-tekst);text-transform:uppercase;letter-spacing:.09em;margin-bottom:.5rem}
.kort p{font-size:1.05rem;color:var(--sm-tekst);line-height:1.65}

/* ---------------- inhoudsopgave ---------------- */

.inhoud{background:var(--sm-roze-tint-licht);border:1px solid var(--sm-rand-roze);border-radius:var(--sm-rond-kaart);padding:1.4rem 1.6rem;margin:0 0 2.4rem}
.inhoud h2{font-size:.78rem;font-weight:800;color:var(--sm-hoofd);text-transform:uppercase;letter-spacing:.09em;margin-bottom:.7rem}
.inhoud ol{list-style:none;counter-reset:i;display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem 1.6rem}
.inhoud li{counter-increment:i;display:flex;gap:.6rem;align-items:baseline}
.inhoud li::before{content:counter(i);font-family:var(--sm-kop);font-weight:800;font-size:.78rem;color:var(--sm-hoofd);min-width:1.1rem}
.inhoud a{color:var(--sm-tekst);text-decoration:none;font-size:.95rem;font-weight:600;line-height:1.5}
@media (hover:hover) and (pointer:fine){.inhoud a:hover{color:var(--sm-hoofd);text-decoration:underline}}

/* ---------------- cijferkaarten ---------------- */

.cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.cijfer{position:relative;background:linear-gradient(160deg,var(--sm-blauw-tint) 0%,#FDF6FA 70%);border:1px solid var(--sm-rand-blauw);border-radius:18px;padding:1.7rem 1.3rem 1.5rem;text-align:center;box-shadow:0 8px 26px rgba(150,0,80,.10);overflow:hidden}
.cijfer::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--sm-roze),var(--sm-blauw))}
.cijfer b{display:block;font-family:var(--sm-kop);font-size:2.1rem;font-weight:800;color:var(--sm-hoofd);line-height:1}
.cijfer span{display:block;margin-top:.4rem;font-size:.9rem;color:var(--sm-tekst-grijs)}

/* ---------------- tekst met beeld ---------------- */

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center}
.split-omgekeerd .split-beeld{order:2}

.vink{list-style:none;margin-top:1.2rem;display:grid;gap:.7rem}
.vink li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;color:var(--sm-tekst-grijs);line-height:1.6}
.vink svg{flex-shrink:0;margin-top:.3rem}

/* Gewone opsommingen in de lopende tekst. Alleen lijsten zonder eigen class,
   zodat het stappenplan, de vinklijst en de inhoudsopgave hun eigen opmaak
   houden en hier niet door overschreven worden. */
.tekst > ul:not([class]){list-style:none;display:grid;gap:.6rem;margin:1.1rem 0}
.tekst > ul:not([class]) > li{position:relative;padding-left:1.5rem;font-size:1.02rem;line-height:1.7;color:var(--sm-tekst-grijs)}
.tekst > ul:not([class]) > li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--sm-hoofd)}
.tekst > ol:not([class]){margin:1.1rem 0 1.1rem 1.2rem;display:grid;gap:.6rem}
.tekst > ol:not([class]) > li{font-size:1.02rem;line-height:1.7;color:var(--sm-tekst-grijs);padding-left:.3rem}
.tekst > ol:not([class]) > li::marker{color:var(--sm-hoofd);font-weight:700}

/* ---------------- tabel ---------------- */

.tabelwrap{overflow-x:auto;margin:1.8rem 0;border-radius:var(--sm-rond-kaart);border:1px solid var(--sm-rand-roze);box-shadow:var(--sm-schaduw-kaart);background:#fff;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.94rem}
caption{text-align:left;font-size:.86rem;color:var(--sm-tekst-zacht);padding:.9rem 1.2rem 0}
thead th{background:linear-gradient(120deg,var(--sm-hoofd),var(--sm-hoofd-diep));color:#fff;font-family:var(--sm-kop);font-weight:800;font-size:.84rem;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:.95rem 1.2rem;white-space:nowrap}
tbody th{text-align:left;font-weight:700;color:var(--sm-tekst);padding:1rem 1.2rem;vertical-align:top}
tbody td{padding:1rem 1.2rem;color:var(--sm-tekst-grijs);vertical-align:top;line-height:1.55}
tbody tr + tr th,tbody tr + tr td{border-top:1px solid var(--sm-rand-roze)}
tbody tr:nth-child(even){background:#FDF7FA}

/* ---------------- stappenplan ---------------- */

.stappen{list-style:none;counter-reset:s;display:grid;gap:1rem;margin-top:2rem}
.stap{counter-increment:s;position:relative;background:#fff;border:1px solid var(--sm-rand-roze);border-radius:var(--sm-rond-kaart);padding:1.4rem 1.5rem 1.4rem 4.4rem;box-shadow:var(--sm-schaduw-kaart)}
.stap::before{content:counter(s);position:absolute;left:1.3rem;top:1.3rem;width:2.1rem;height:2.1rem;border-radius:50%;background:linear-gradient(140deg,var(--sm-roze),var(--sm-roze-diep));color:#fff;font-family:var(--sm-kop);font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(230,0,126,.28)}
.stap h3{font-size:1.05rem;margin-bottom:.3rem}
.stap p{font-size:.96rem;margin:0}

/* ---------------- kaartenraster ---------------- */

.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.kaart{background:#fff;border:1px solid var(--sm-rand-roze);border-radius:var(--sm-rond-kaart);padding:1.5rem;box-shadow:var(--sm-schaduw-kaart);text-decoration:none;display:block;transition:transform .22s var(--sm-uit),box-shadow .22s var(--sm-uit),border-color .22s var(--sm-uit)}
.kaart h3{font-size:1.04rem;color:var(--sm-tekst);margin-bottom:.35rem}
.kaart p{font-size:.9rem;margin:0;line-height:1.6}
.kaart-icoon{width:42px;height:42px;border-radius:12px;background:var(--sm-roze-tint);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem}
@media (hover:hover) and (pointer:fine){
  .kaart:hover{transform:translateY(-4px);box-shadow:var(--sm-schaduw-kaart-hover);border-color:var(--sm-hoofd)}
}

/* ---------------- fotostrook ---------------- */

.strook{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin:1.8rem 0}
.strook figure{margin:0}
.strook img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--sm-rond-kaart);box-shadow:var(--sm-schaduw-kaart)}
.strook figcaption{margin-top:.6rem;font-size:.86rem;color:var(--sm-tekst-zacht);line-height:1.5}

/* ---------------- let-op-blok en bronblok ---------------- */

.letop{background:var(--sm-blauw-tint);border:1px solid var(--sm-rand-blauw);border-radius:var(--sm-rond-klein);padding:1.2rem 1.4rem;margin:1.8rem 0;display:flex;gap:.9rem;align-items:flex-start}
.letop svg{flex-shrink:0;margin-top:.25rem}
.letop p{font-size:.97rem;margin:0;color:var(--sm-tekst)}
.letop p + p{margin-top:.6rem}

.bronnen{background:#fff;border:1px solid var(--sm-rand-roze);border-radius:var(--sm-rond-kaart);padding:1.4rem 1.6rem;margin-top:2.6rem}
.bronnen h2{font-size:.78rem;font-weight:800;color:var(--sm-hoofd);text-transform:uppercase;letter-spacing:.09em;margin-bottom:.6rem}
.bronnen ul{list-style:none;display:grid;gap:.45rem}
.bronnen li{font-size:.9rem;color:var(--sm-tekst-zacht);line-height:1.55}
.bronnen a{font-weight:600}
.bronnen .bijgewerkt{margin-top:.9rem;font-size:.82rem;color:var(--sm-tekst-zacht)}

/* ---------------- faq ---------------- */

.faq{display:grid;gap:.8rem;margin-top:1.8rem}
.faq-item{background:#fff;border:1px solid var(--sm-rand-roze);border-radius:var(--sm-rond-klein);overflow:hidden;transition:box-shadow .22s var(--sm-uit)}
.faq-item[open]{box-shadow:var(--sm-schaduw-kaart)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;padding:1.05rem 1.3rem;font-family:var(--sm-kop);font-size:1rem;font-weight:700;color:var(--sm-tekst);list-style:none;line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'';flex-shrink:0;width:11px;height:11px;border-right:2.4px solid var(--sm-hoofd);border-bottom:2.4px solid var(--sm-hoofd);transform:rotate(45deg) translateY(-2px);transition:transform .22s var(--sm-uit)}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-antwoord{padding:0 1.3rem 1.15rem}
.faq-antwoord p{font-size:.96rem}
@media (hover:hover) and (pointer:fine){.faq-item summary:hover{background:var(--sm-roze-tint-licht)}}

/* ---------------- cta ---------------- */

.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;background:linear-gradient(120deg,var(--sm-hoofd),var(--sm-hoofd-diep));border-radius:22px;padding:2rem 2.4rem;color:#fff}
.cta h2,.cta h3{color:#fff;font-size:1.35rem}
.cta p{color:rgba(255,255,255,.9);font-size:.96rem;margin-top:.35rem;max-width:52ch}
.cta .eyebrow{color:#fff;margin-bottom:.2rem}
.cta .btn{background:#fff;color:var(--sm-hoofd) !important;box-shadow:0 8px 22px rgba(0,0,0,.16)}
@media (hover:hover) and (pointer:fine){.cta .btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.22)}}

/* ---------------- medische strook ---------------- */

.medisch{background:var(--sm-roze-tint-licht);border-top:1px solid var(--sm-rand-roze);padding:1.6rem 0}
.medisch p{font-size:.85rem;color:var(--sm-tekst-zacht);max-width:90ch;line-height:1.65}

/* ---------------- voet ---------------- */

footer{background:var(--sm-donker);color:#cfcfcf;padding:3.2rem 0 2rem}
footer .kolommen{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
footer h2{font-family:var(--sm-kop);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:#fff;margin-bottom:.9rem}
footer a{color:#cfcfcf;text-decoration:none;font-size:.92rem;display:block;padding:.24rem 0;transition:color .18s var(--sm-uit)}
footer p{font-size:.88rem;color:#9a9a9a;line-height:1.7}
footer .merk{display:inline-block;background:#fff;border-radius:12px;padding:.6rem .9rem;margin-bottom:1rem;line-height:0}
footer .merk img{height:42px;width:auto;display:block}
@media (hover:hover) and (pointer:fine){footer a:hover{color:#fff}}
.slot{border-top:1px solid #333;margin-top:2.4rem;padding-top:1.2rem;font-size:.82rem;color:#8a8a8a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1rem}
.slot a{display:inline;padding:0}

/* ---------------- datumregel onder een vaste pagina ---------------- */

.datum{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--sm-rand-roze);font-size:.86rem;color:var(--sm-tekst-zacht)}

/* ---------------- toegankelijkheid ---------------- */

.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--sm-hoofd);color:#fff;padding:.8rem 1.4rem;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--sm-accent);outline-offset:3px;border-radius:10px}

/* ---------------- beweging ---------------- */

/* Zonder javascript blijft niets onzichtbaar: .op is pas verborgen zodra het
   script bevestigt dat het draait, door .js op de html te zetten. */
.js .op{opacity:0;transform:translateY(24px)}
.js .op.in{opacity:1;transform:none;transition:opacity .6s var(--sm-uit),transform .6s var(--sm-uit)}

/* ---------------- kleiner scherm ---------------- */

@media(max-width:1000px){
  footer .kolommen{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .inner,.inner-sm{padding:0 1.2rem}
  .hero-top,.split,.cijfers,.raster,.inhoud ol{grid-template-columns:1fr}
  .split-omgekeerd .split-beeld{order:0}
  .band{padding:3rem 0}
  .hero{padding-top:2.2rem}
  .hero-top{gap:2rem;padding-bottom:2.4rem}
  .beeld{aspect-ratio:16/10}
  .cta{padding:1.6rem 1.5rem}
  .balk .inner{gap:.8rem}
  .logo img{height:30px}
  .balk .btn{padding:.55rem 1rem;font-size:.86rem}
}
@media(max-width:560px){
  footer .kolommen{grid-template-columns:1fr}
  .strook{grid-template-columns:1fr}
  .balk .inner{gap:.5rem}
  .balk .btn{padding:.5rem .8rem;font-size:.8rem;white-space:nowrap}
  .hoofdnav a{padding:.5rem .6rem;font-size:.88rem}
  .stap{padding:1.2rem 1.2rem 1.2rem 3.9rem}
}

/* ---------------- minder beweging ---------------- */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
  .op{opacity:1;transform:none}
}

/* ---------------- afdrukken ---------------- */

@media print{
  .melding,.balk,.cta,.golf,footer,.inhoud{display:none}
  body{font-size:11pt}
  .band{padding:1rem 0}
}

/* ================= producten van de moedersite ================= */
/* De verpakkingen en prijzen komen van ikwilvanmijnsoaaf.nl. Ze staan hier
   omdat deze site zelf niets verkoopt: bestellen loopt altijd via de
   moedersite. Prijzen staan in producten.json, nooit met de hand getypt. */

.prod-buiten{position:relative;margin-top:2rem}
.prod-strook{display:flex;gap:1.2rem;overflow-x:auto;scroll-behavior:smooth;
  padding:.4rem .2rem 1.2rem;scrollbar-width:none;scroll-snap-type:x mandatory}
.prod-strook::-webkit-scrollbar{display:none}

.prod{flex:0 0 250px;scroll-snap-align:start;background:#fff;border:1px solid var(--sm-rand-roze);
  border-radius:var(--sm-rond-kaart);overflow:hidden;display:flex;flex-direction:column;
  position:relative;text-decoration:none;box-shadow:var(--sm-schaduw-kaart);
  transition:transform .24s var(--sm-uit),box-shadow .24s var(--sm-uit)}
@media (hover:hover) and (pointer:fine){
  .prod:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(150,0,80,.18)}
  .prod:hover .prod-foto img{transform:scale(1.06)}
}
.prod-vlag{position:absolute;top:12px;left:12px;z-index:2;background:var(--sm-hoofd);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:.28rem .7rem;border-radius:50px}
.prod-foto{background:var(--sm-roze-tint);overflow:hidden;aspect-ratio:1}
.prod-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--sm-uit)}
.prod-body{padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column;flex:1;gap:.45rem}
.prod-body h3{font-size:1.02rem;color:var(--sm-tekst);margin:0}
.prod-body p{font-size:.86rem;margin:0;flex:1}
.prod-prijs{font-family:var(--sm-kop);font-size:1.35rem;font-weight:800;color:var(--sm-hoofd);line-height:1}
.prod-prijs small{font-size:.72rem;font-weight:700;color:var(--sm-tekst-zacht);margin-left:.3rem}
.prod .knopje{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:var(--sm-hoofd);color:#fff;font-size:.9rem;font-weight:700;
  padding:.6rem 1rem;border-radius:50px;margin-top:.2rem}

.prod-pijlen{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:.4rem}
.prod-pijl{width:42px;height:42px;border-radius:50%;border:2px solid var(--sm-hoofd);
  background:#fff;color:var(--sm-hoofd);cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .18s var(--sm-uit),color .18s var(--sm-uit),transform .18s var(--sm-uit)}
@media (hover:hover) and (pointer:fine){
  .prod-pijl:hover{background:var(--sm-hoofd);color:#fff;transform:scale(1.08)}
}
.prod-pijl:active{transform:scale(.94)}
.prod-pijl[disabled]{opacity:.35;cursor:default}

/* uitgelicht product */
.spot{display:grid;grid-template-columns:.95fr 1.05fr;gap:2.6rem;align-items:center;
  background:#fff;border:1px solid var(--sm-rand-roze);border-radius:28px;
  padding:2.2rem 2.6rem;box-shadow:0 24px 60px rgba(150,0,80,.13)}
.spot-beeld{border-radius:22px;overflow:hidden;background:var(--sm-roze-tint)}
.spot-beeld img{width:100%;height:auto;display:block}
.spot h2{margin-bottom:.4rem}
.spot-prijs{display:flex;align-items:baseline;gap:.6rem;margin:.8rem 0 1.1rem}
.spot-prijs b{font-family:var(--sm-kop);font-size:2.6rem;font-weight:800;color:var(--sm-hoofd);line-height:1}
.spot-prijs span{font-size:.88rem;color:var(--sm-tekst-zacht)}
.spec{list-style:none;margin:1rem 0 0;padding:0}
.spec li{display:flex;gap:.8rem;align-items:flex-start;padding:.65rem 0;
  border-bottom:1px solid var(--sm-rand-roze);font-size:.95rem;color:var(--sm-tekst-grijs)}
.spec li:last-child{border-bottom:none}
.spec b{color:var(--sm-tekst);min-width:118px;flex:none}

/* de verpakking die meedrijft op de cta-balk */
.cta-pak{width:88px;flex:none;align-self:center;filter:drop-shadow(0 12px 22px rgba(0,0,0,.28));
  border-radius:14px;overflow:hidden}
.cta-pak img{width:100%;height:auto;display:block}

@media(max-width:900px){
  .spot{grid-template-columns:1fr;padding:1.6rem 1.3rem;gap:1.5rem}
  .spec b{min-width:0;display:block}
  .spec li{flex-direction:column;gap:.15rem}
  .cta-pak{display:none}
  .prod-pijlen{display:none}
}