/* ==========================================================
   Site Atelier: stijlen
   ========================================================== */

/* ---------- 1. Designkleuren en maten (tokens) ----------
   Elke kleur en maat staat hier één keer. De rest van het bestand
   gebruikt alleen deze namen, bv. var(--kleur-geel).
   Wil je later een kleur aanpassen? Dan doe je dat hier, op één plek. */
:root {
  /* Basis */
  --kleur-achtergrond: #F3EEE3;
  --kleur-vlak:        #FFFFFF;
  --kleur-inkt:        #1A1B20;
  --kleur-gedempt:     #55565F;
  --kleur-lijn:        #DCD9D1;

  /* Accenten */
  --kleur-geel:        #F2C230; /* knoppen, prijzenband, markeringen (altijd met inkt-tekst) */
  --kleur-blauw:       #2547A0; /* stapnummers, pijlen, portretachtergrond */

  /* Tegelvullingen */
  --kleur-lichtblauw:  #BFCDEE;
  --kleur-zand:        #E7E4DC;
  --kleur-papiergeel:  #FBF1CF;
  --kleur-groen:       #2E9E5B; /* alleen voor een "klaar"-vinkje */

  /* Lettertype */
  --font: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Lettergroottes: clamp(min, groeit mee met schermbreedte, max) */
  --tekst-hero:  clamp(48px, 6.4vw, 84px);
  --tekst-h2:    clamp(32px, 4.2vw, 46px);
  --tekst-band:  clamp(38px, 5.2vw, 64px);
  --tekst-body:  17px;

  /* Indeling */
  --max-breedte:   1200px;
  --zijmarge:      24px;
  --sectie-ruimte: 120px;

  /* Afronding */
  --radius-knop:  6px;
  --radius-tegel: 8px;
}

/* ---------- 2. Basis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box; /* breedte = inclusief padding en rand: rekent makkelijker */
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--kleur-achtergrond);
  color: var(--kleur-inkt);
  font-family: var(--font);
  font-size: var(--tekst-body);
  line-height: 1.55;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
}

h1 {
  font-size: var(--tekst-hero);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-wrap: balance; /* verdeelt de woorden mooi over de regels */
}

h2 {
  font-size: var(--tekst-h2);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Koppen: de browser verdeelt de woorden evenwichtig over de regels */
h2,
h3 {
  text-wrap: balance;
}

p {
  margin: 0;
}

/* Gewone tekst: geen eenzaam woord op de laatste regel (oudere browsers negeren dit gewoon) */
p,
li {
  text-wrap: pretty;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* Geselecteerde tekst krijgt de gele accentkleur */
::selection {
  background: var(--kleur-geel);
  color: var(--kleur-inkt);
}

/* Zichtbare focus voor wie met het toetsenbord navigeert */
:focus-visible {
  outline: 3px solid var(--kleur-blauw);
  outline-offset: 3px;
}

/* Wie minder beweging wil (instelling in het besturingssysteem), krijgt alles stil */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 3. Indeling ---------- */
/* De container houdt de inhoud gecentreerd en nooit breder dan 1200px */
.container {
  width: 100%;
  max-width: var(--max-breedte);
  margin-inline: auto;
  /* max(): nooit minder dan 24px, en meer als een iPhone in liggende stand een inkeping opzij heeft */
  padding-left: max(var(--zijmarge), env(safe-area-inset-left));
  padding-right: max(var(--zijmarge), env(safe-area-inset-right));
}

/* ---------- 4. Knoppen ----------
   Eén basisklasse .knop, met varianten: --geel (hoofdknop) en --rand (omlijnd). */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* ruimte tussen icoon en tekst */
  min-height: 50px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-knop);
  font-weight: 700;
  text-decoration: none;
  /* transform = optillen bij muis erover, scale = indrukken bij klikken of tikken */
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), scale 0.12s ease-out;
}

/* Knop komt 2px omhoog bij muis erover. Alleen op toestellen met een echte muis:
   een gsm ziet een tik ook als "erover", en dan bleef de knop opgetild staan.
   Niet voor wie minder beweging wil. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .knop:hover {
    transform: translateY(-2px);
  }
}

/* Knop wordt heel even een tikje kleiner terwijl je erop drukt of tikt:
   zo voel je meteen dat de site je gehoord heeft (vooral op de gsm, waar geen "erover" bestaat). */
@media (prefers-reduced-motion: no-preference) {
  .knop:active {
    scale: 0.97;
  }
}

.knop--geel {
  background: var(--kleur-geel);
  color: var(--kleur-inkt);
}

.knop--rand {
  border-color: var(--kleur-inkt);
  font-weight: 600;
}

.knop--klein {
  min-height: 44px;
  padding: 0 16px;
}

/* Klein getekend icoon in een knop (WhatsApp-ballon, telefoon) */
.knop__icoon {
  flex: none;
  width: 19px;
  height: 19px;
}

.icoon-lijn {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* ---------- 5. Navigatie ---------- */
.site-header__rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
}

.woordmerk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-decoration: none;
}

/* Het logoteken (S met speld). Vaste maat, ook op de gsm. */
.woordmerk__teken {
  flex: none;
  width: 32px;
  height: 32px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  font-weight: 500;
}

.menu a:not(.knop) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.menu a:not(.knop):hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- 6. Hero ---------- */
/* Twee kolommen: tekst links (5 delen), tekening rechts (6 delen) */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: 40px 48px;
  padding-top: 56px;
  padding-bottom: 72px;
}

.hero__tekst {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero__sub {
  max-width: 26ch;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 500;
}

.hero__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Tekstlink naar de prijzen, onder de knoppen */
.hero__prijslink {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* groot genoeg om aan te tikken */
  margin-top: -6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-underline-offset: 4px;
}

/* Simon zelf: het grootste verschil met een bureau, dus duidelijk in beeld en in donkere tekst */
.hero__simon {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--kleur-lijn);
}

.hero__simon p {
  max-width: 30ch;
  font-size: 18px;
  line-height: 1.45;
}

.hero__simon strong {
  font-weight: 700;
}

/* Portret: foto als rechthoek met afgeronde hoeken, zoals de tegels en voorbeelden */
.portret {
  flex: none;
  width: 64px;
  height: 80px;
  border-radius: var(--radius-tegel);
  background: var(--kleur-blauw); /* zichtbaar zolang de foto nog laadt */
  object-fit: cover;
}

.portret--groot {
  width: 96px;
  height: 120px;
}

.portret--klein {
  width: 56px;
  height: 70px;
}

.hero__tekening svg {
  width: 100%;
  overflow: visible;
}

/* Potloodlijnen en blauwe streepjes in de tekening */
.hero__tekening .lijn {
  fill: none;
  stroke: var(--kleur-inkt);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__tekening .streepjes {
  fill: none;
  stroke: var(--kleur-blauw);
  stroke-width: 4;
  stroke-linecap: round;
}

/* ---------- 7. Hero-animatie ----------
   Speelt één keer bij het laden, ongeveer 3 seconden:
   potlood tekent → kleur loopt in → geel vel → gsm kantelt in → vinkje → label → streepjes.
   Werkt met @keyframes (de "filmpjes") en animation-delay (wanneer elk deel start).
   "backwards" = vóór de start al in de beginpositie staan; na afloop blijft de gewone,
   afgewerkte tekening staan. Zonder animatie (oude browser, rustige modus) zie je meteen het eindbeeld. */

/* Draai- en schaalpunt = midden van het onderdeel zelf */
.anim-vel,
.anim-gsm,
.anim-vinkje {
  transform-box: fill-box;
  transform-origin: center;
}

/* 1. Lijnen tekenen: een streep van lengte 1 die van "verschoven" (onzichtbaar) naar 0 schuift */
.anim-teken path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: teken 0.45s ease-out backwards;
}

@keyframes teken {
  from { stroke-dashoffset: 1; }
}

.lijn path:nth-child(1)  { animation-delay: 0.25s; }
.lijn path:nth-child(2)  { animation-delay: 0.4s; }
.lijn path:nth-child(3)  { animation-delay: 0.45s; }
.lijn path:nth-child(4)  { animation-delay: 0.55s; }
.lijn path:nth-child(5)  { animation-delay: 0.62s; }
.lijn path:nth-child(6)  { animation-delay: 0.7s; }
.lijn path:nth-child(7)  { animation-delay: 0.82s; }
.lijn path:nth-child(8)  { animation-delay: 0.92s; }
.lijn path:nth-child(9)  { animation-delay: 0.96s; }
.lijn path:nth-child(10) { animation-delay: 1.04s; }
.lijn path:nth-child(11) { animation-delay: 1.12s; }
.lijn path:nth-child(12) { animation-delay: 1.2s; }

/* Het potlood reist mee langs de lijnen en verdwijnt daarna */
.anim-potlood {
  animation: potlood 1.7s 0.2s cubic-bezier(0.45, 0, 0.3, 1) both;
}

@keyframes potlood {
  0%   { transform: translate(-190px, -150px); opacity: 0; }
  8%   { transform: translate(-190px, -150px); opacity: 1; }
  30%  { transform: translate(-10px, -150px); }
  50%  { transform: translate(-180px, -60px); }
  72%  { transform: translate(150px, -40px); }
  88%  { transform: translate(-20px, 10px); opacity: 1; }
  100% { transform: translate(90px, -90px); opacity: 0; }
}

/* 2. Kleur loopt in: elk vlak wordt van links naar rechts "onthuld" */
.anim-kleur > * {
  animation: kleur 0.5s cubic-bezier(0.5, 0, 0.2, 1) backwards;
}

@keyframes kleur {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.anim-kleur > :nth-child(1) { animation-delay: 1.35s; }
.anim-kleur > :nth-child(2) { animation-delay: 1.42s; }
.anim-kleur > :nth-child(3) { animation-delay: 1.5s; }
.anim-kleur > :nth-child(4) { animation-delay: 1.62s; }
.anim-kleur > :nth-child(5) { animation-delay: 1.74s; }

/* 3. Geel vel verschijnt */
.anim-vel {
  animation: vel 0.7s 1.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes vel {
  from { opacity: 0; transform: scale(0.9); }
}

/* 4. Gsm kantelt binnen */
.anim-gsm {
  animation: gsm 0.9s 1.95s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes gsm {
  from { opacity: 0; transform: rotate(-16deg) translateY(30px); }
}

/* 5. Groen vinkje ploft op (iets te groot, dan terug). Het begint op halve grootte en
   onzichtbaar, niet op 0: niets in het echt verschijnt uit het niets. */
.anim-vinkje {
  animation: vinkje 0.55s 2.35s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes vinkje {
  0%   { transform: scale(0.5); opacity: 0; }
  40%  { opacity: 1; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* 6. Label zwaait in aan zijn koordje; draaipunt = ophangpunt (94, 334) in de tekening */
.anim-label {
  transform-box: view-box;
  transform-origin: 94px 334px;
  animation: label 0.9s 2.5s cubic-bezier(0.3, 0, 0.3, 1) backwards;
}

@keyframes label {
  0%   { transform: rotate(-35deg); opacity: 0; }
  15%  { opacity: 1; }
  45%  { transform: rotate(12deg); }
  75%  { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}

/* 7. Blauwe streepjes als laatste */
.streepjes path {
  animation-duration: 0.4s;
  animation-delay: 2.65s;
}

/* Rustige versie: de algemene regel bovenaan zet alle animaties uit (eindbeeld blijft staan);
   het potlood hoort niet bij het eindbeeld, dus dat verbergen we. */
@media (prefers-reduced-motion: reduce) {
  .anim-potlood {
    display: none;
  }
}

/* ---------- 8. Diensten ----------
   Elke rij (.dienst) heeft drie kolommen: citaat | pijl | tegel. */
.diensten {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding-top: 48px; /* + 72px onderruimte van de hero = ongeveer 120px tussen de secties */
}

.diensten__kop {
  max-width: 22ch;
  text-wrap: balance;
}

.diensten__kop-blauw {
  color: var(--kleur-blauw);
}

.diensten__lijst {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.dienst {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1.15fr);
  align-items: center;
  gap: 14px 24px;
}

/* Het citaat van de klant, met gele markeerstift onder de kernwoorden */
.dienst__citaat {
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Markeerstift: alleen het onderste deel van de regel wordt geel (vlak, geen kleurverloop) */
.dienst__citaat mark {
  padding: 0 0.05em;
  background: linear-gradient(transparent 62%, var(--kleur-geel) 62%);
  color: inherit;
}

/* De blauwe, handgetekende pijl */
.dienst__pijl {
  width: 80px;
  height: 36px;
  overflow: visible;
}

.dienst__pijl path {
  fill: none;
  stroke: var(--kleur-blauw);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* De gekleurde tegel: tekening links, titel en zin rechts */
.dienst__tegel {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  border-radius: var(--radius-tegel);
  color: var(--kleur-inkt);
}

.dienst__tegel--geel       { background: var(--kleur-geel); }
.dienst__tegel--lichtblauw { background: var(--kleur-lichtblauw); }
.dienst__tegel--zand       { background: var(--kleur-zand); }
.dienst__tegel--inkt       { background: var(--kleur-inkt); color: var(--kleur-achtergrond); }

.dienst__tegel h3 {
  margin-bottom: 4px;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.dienst__tegel p {
  font-size: 16px;
}

.dienst__tegel--inkt p {
  opacity: 0.85; /* iets zachter dan de titel, contrast blijft ruim voldoende */
}

.dienst__tekening {
  flex: none;
  width: 120px;
  height: 90px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bij muis erover kantelt de tekening een beetje (alleen op toestellen met een muis,
   en niet voor wie minder beweging wil) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dienst:hover .dienst__tekening {
    transform: rotate(-5deg) scale(1.06);
  }
}

/* ---------- 8b. Diensten: scroll-animatie ----------
   Elke rij krijgt een "kijk-tijdlijn" (view-timeline): de animatie loopt niet op de klok,
   maar volgt hoe ver de rij al in beeld geschoven is. Scroll je terug, dan loopt ze terug.

   Truc tegen de gsm-bug: we animeren de aparte eigenschappen "translate" en "scale/rotate",
   niet "transform". Zo blijven de draaiing van de pijl (rotate: 90deg op de gsm)
   en het kantelen bij muis-erover (transform) altijd intact.

   @supports = "doe dit alleen als de browser het kent". Oudere browsers slaan dit blok over
   en tonen gewoon alles meteen afgewerkt. */
.dienst {
  --pijl-start: -16px 0; /* computer: pijl schuift van links in */
}

@supports (animation-timeline: view()) {
  .dienst {
    view-timeline-name: --dienst-rij;
  }

  .dienst__pijl {
    animation-name: pijl-schuif;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
    animation-timeline: --dienst-rij;
    animation-range: entry 0% entry 80%; /* van "rij komt net in beeld" tot "80% binnen" */
  }

  .dienst__tekening {
    animation-name: tekening-pop;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
    animation-timeline: --dienst-rij;
    animation-range: entry 20% entry 100%;
  }
}

@keyframes pijl-schuif {
  from { translate: var(--pijl-start); opacity: 0; }
}

@keyframes tekening-pop {
  0%   { scale: 0.4; rotate: -10deg; opacity: 0; }
  70%  { scale: 1.08; }
  100% { scale: 1; rotate: 0deg; opacity: 1; }
}

/* ---------- 9. Uitklaprijen (details/summary) ----------
   Herbruikbaar: de prijzen en de veelgestelde vragen gebruiken dit allebei.
   <details> = de hele rij, <summary> = het stuk waarop je klikt. */
.uitklap summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px; /* groot genoeg voor een duim */
  padding: 16px 0;
  cursor: pointer;
  list-style: none; /* verberg het standaard driehoekje van de browser... */
}

.uitklap summary::-webkit-details-marker {
  display: none; /* ...ook in Safari */
}

/* Focusrand in de tekstkleur: zwart op de gele band en zwart op de lichte achtergrond */
.uitklap summary:focus-visible {
  outline-color: currentColor;
}

/* Iets strakkere regelafstand dan lopende tekst: een naam die over twee regels gaat
   (op een smalle gsm) blijft zo één blok, ook met de extra regel eronder */
.uitklap__naam {
  font-weight: 600;
  line-height: 1.3;
}

/* Korte extra regel onder de naam (bv. "Eerste maand gratis"), altijd zichtbaar */
.uitklap__extra {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 500;
}

.uitklap__waarde {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap; /* "€39 / maand" nooit over twee regels */
}

/* Het getekende pijltje; draait 180° als de rij open staat */
.uitklap__pijltje {
  flex: none;
  width: 13px;
  height: 13px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.uitklap__pijltje path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uitklap[open] .uitklap__pijltje {
  transform: rotate(180deg);
}

.uitklap ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 18px;
  padding-left: 20px;
}

/* ---------- 10. Prijsband ---------- */
.prijzen {
  margin-top: var(--sectie-ruimte);
  background: var(--kleur-geel);
  color: var(--kleur-inkt);
}

/* Tekst links, prijzen rechts. Is er te weinig plaats, dan schuiven de prijzen onder de tekst. */
.prijzen__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px 48px;
  padding-block: 64px;
}

.prijzen__intro {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.prijzen__intro p {
  max-width: 52ch;
  font-size: 18px;
}

.prijzen__lijst {
  flex: 0 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.prijzen .uitklap {
  border-bottom: 1.5px solid var(--kleur-inkt);
}

.prijzen__kleine-letters {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.prijzen__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  font-weight: 700;
  text-underline-offset: 4px;
}

/* Op de gele band is een zwarte focusrand duidelijker dan een blauwe */
.prijzen :focus-visible {
  outline-color: var(--kleur-inkt);
}

/* Grote kop voor de volle-breedte-banden (prijzen en contact) */
.band-kop {
  font-size: var(--tekst-band);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* ---------- 11. Voorbeelden ---------- */
.werk {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: var(--sectie-ruimte);
}

/* Raster van twee kolommen; het brede voorbeeld neemt beide kolommen in */
.werk__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 28px;
}

.voorbeeld {
  position: relative; /* nodig voor de onzichtbare klikzone hieronder */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voorbeeld--breed {
  grid-column: 1 / -1;
}

/* De knop rond het beeld: geen knop-uiterlijk, alleen het beeld met afgeronde hoeken */
.voorbeeld__knop {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-tegel);
  overflow: hidden; /* het vergrote beeld blijft binnen de afgeronde hoeken */
  background: var(--kleur-zand); /* zichtbaar zolang het beeld nog laadt */
  cursor: zoom-in;
}

/* Onzichtbare laag over het hele voorbeeld: ook een klik op de titel of de zin opent het beeld */
.voorbeeld__knop::after {
  content: "";
  position: absolute;
  inset: 0;
}

.voorbeeld__knop:focus-visible {
  outline-offset: 4px;
}

.voorbeeld__knop img {
  width: 100%;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* 0,3s: volgt de muis zonder na te slepen */
}

/* Bij muis erover vergroot het beeld heel licht. Niet voor wie minder beweging wil. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .voorbeeld:hover .voorbeeld__knop img {
    transform: scale(1.03);
  }
}

.voorbeeld__kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.voorbeeld__kop h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}

.voorbeeld--breed .voorbeeld__kop h3 {
  font-size: 24px;
}

.voorbeeld__label,
.voorbeeld__zin,
.werk__noot {
  color: var(--kleur-gedempt);
}

.voorbeeld__label {
  font-size: 14px;
}

.voorbeeld__zin {
  margin-top: -6px;
  font-size: 15px;
}

.voorbeeld--breed .voorbeeld__zin {
  font-size: 16px;
}

.werk__noot {
  max-width: 60ch;
  margin-top: -12px;
  font-size: 15px;
}

/* Vergrootglas rechtsboven op elk beeld: toont dat je erop kunt tikken of klikken.
   Gepositioneerd tegenover .voorbeeld (de knop zelf heeft geen position, anders zou de
   onzichtbare klikzone alleen nog het beeld bedekken). Het beeld staat bovenaan, dus "top" klopt. */
.voorbeeld__vergroot {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-knop);
  background: var(--kleur-vlak);
  color: var(--kleur-inkt);
}

.voorbeeld__vergroot svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ---------- 12. Lichtbak (vergroot beeld) ----------
   <dialog> is een ingebouwd venster van de browser. We maken het zo groot als het scherm,
   doorzichtig, en zetten het beeld in het midden. Het donkere vlak erachter is ::backdrop. */
.lichtbak {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 72px 16px 16px; /* bovenaan plaats voor de sluitknop */
  border: 0;
  background: transparent;
  cursor: zoom-out; /* naast het beeld klikken = sluiten */
}

/* Alleen als hij open is: beeld in het midden. (Dicht laat de browser hem verborgen.) */
.lichtbak[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lichtbak::backdrop {
  background: rgb(26 27 32 / 0.92); /* inktkleur, bijna ondoorzichtig */
}

/* Het beeld past altijd volledig op het scherm, ook op een gsm */
.lichtbak__beeld {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-tegel);
  cursor: default;
}

.lichtbak__sluit {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-knop);
  background: var(--kleur-achtergrond);
  color: var(--kleur-inkt);
  cursor: pointer;
}

.lichtbak__sluit svg {
  width: 22px;
  height: 22px;
}

.lichtbak__sluit path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

/* Tip voor de gsm (zie sectie 17); op grotere schermen niet nodig */
.lichtbak__tip {
  display: none;
}

/* Op de donkere achtergrond is een lichte focusrand beter zichtbaar */
.lichtbak__sluit:focus-visible {
  outline-color: var(--kleur-geel);
}

/* Zolang de lichtbak open is, scrollt de pagina erachter niet mee */
html:has(.lichtbak[open]) {
  overflow: hidden;
}

/* ---------- 13. Werkwijze ---------- */
.werkwijze {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: var(--sectie-ruimte);
}

.werkwijze__kop {
  max-width: 20ch;
  text-wrap: balance;
}

/* Vier stappen naast elkaar op een breed scherm */
.stappen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 44px; /* iets bredere tussenruimte: daar staat de pijl naar de volgende stap */
  margin: 0;
  padding: 0;
  list-style: none; /* geen automatische nummers: we tonen onze eigen blauwe cijfers */
}

.stap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Witte kaart met de tekening */
.stap__beeld {
  position: relative; /* anker voor de pijl hieronder */
  padding: 14px 10px;
  border-radius: var(--radius-tegel);
  background: var(--kleur-vlak);
}

.stap__beeld svg {
  width: 100%;
}

.stap__kop {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.stap__nummer {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--kleur-blauw);
}

.stap__kop h3 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}

/* Zelfde tekstgrootte en inktkleur als de rest van de lopende tekst */
.stap p {
  font-size: 17px;
}

/* Dezelfde handgetekende blauwe pijl als bij Diensten, tussen de stappen (alleen als ze naast
   elkaar staan). De vorm komt uit een SVG als "masker"; de kleur is gewoon de achtergrondkleur,
   zo blijft het ons blauw uit de kleurvariabelen. Puur decoratie: voorleessoftware ziet het niet. */
.stap:not(:last-child) .stap__beeld::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 5px);
  width: 34px;
  height: 16px;
  translate: 0 -50%;
  background: var(--kleur-blauw);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 40'%3E%3Cpath d='M4 22q20-6 40-1t40-2M70 8l14 11l-14 12' fill='none' stroke='%23000' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 40'%3E%3Cpath d='M4 22q20-6 40-1t40-2M70 8l14 11l-14 12' fill='none' stroke='%23000' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Getekende lijnen in de tekeningen (golfjes, streepjes, vinkje) */
.stap__lijn {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 13b. Werkwijze: scroll-animatie ----------
   Zelfde idee als bij Diensten: elke witte kaart krijgt een kijk-tijdlijn, en de tekening
   komt tot leven terwijl de kaart in beeld schuift. Klaar zodra de kaart helemaal zichtbaar is.
   Zonder ondersteuning (of bij "minder beweging") zie je meteen de afgewerkte tekening. */

/* Elk bewegend deel draait en schaalt rond zijn eigen midden */
.stap__potlood,
.stap__blok,
.stap__gsm,
.stap__vinkje {
  transform-box: fill-box;
  transform-origin: center;
}

@supports (animation-timeline: view()) {
  .stap__beeld {
    view-timeline-name: --stap;
  }

  /* Gemeenschappelijk voor alle bewegende delen */
  .stap__lijn,
  .stap__potlood,
  .stap__blok,
  .stap__gsm,
  .stap__vinkje {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
    animation-timeline: --stap;
  }

  /* Lijnen tekenen zichzelf in de tweede helft, als de rest al staat */
  .stap__lijn {
    stroke-dasharray: 1;
    animation-name: stap-teken;
    animation-timing-function: linear;
    animation-range: entry 45% entry 100%;
  }

  /* 1. Potlood schuift naar zijn plek, alsof het schrijft */
  .stap__potlood {
    animation-name: stap-schrijf;
    animation-range: entry 0% entry 100%;
  }

  /* 2. Blokken vallen één voor één op hun plaats */
  .stap__blok {
    animation-name: stap-val;
  }
  .stap__blok:nth-of-type(1) { animation-range: entry 0% entry 55%; }
  .stap__blok:nth-of-type(2) { animation-range: entry 20% entry 75%; }
  .stap__blok:nth-of-type(3) { animation-range: entry 40% entry 100%; }

  /* 3. Gsm kantelt rechtop */
  .stap__gsm {
    animation-name: stap-kantel;
    animation-range: entry 0% entry 80%;
  }

  /* 4. Vinkje ploft op */
  .stap__vinkje {
    animation-name: stap-plof;
    animation-range: entry 30% entry 100%;
  }
}

@keyframes stap-teken {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes stap-schrijf {
  from { translate: -34px -56px; rotate: -6deg; }
}

@keyframes stap-val {
  from { translate: 0 -26px; opacity: 0; }
}

@keyframes stap-kantel {
  from { rotate: -14deg; translate: 0 10px; }
}

@keyframes stap-plof {
  0%   { scale: 0.5; opacity: 0; } /* halve grootte en onzichtbaar, niet uit het niets */
  40%  { opacity: 1; }
  70%  { scale: 1.12; }
  100% { scale: 1; }
}

/* ---------- 14. Vragen ----------
   De rijen zelf zijn .uitklap uit sectie 9 (pijltje, focusrand, hoogte).
   Hier staat alleen wat eigen is aan deze sectie: de indeling, de lijntjes en de kaart. */
.vragen {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
  padding-top: var(--sectie-ruimte);
}

/* Links: kop + kaart. Rechts: de vragen, ongeveer twee keer zo breed. */
.vragen__intro {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.vragen__lijst {
  flex: 2 1 560px;
  min-width: 0;
  border-bottom: 1px solid var(--kleur-lijn);
}

/* Eigen randstijl: dun grijs lijntje boven elke vraag (de prijzen hebben een dikke zwarte lijn) */
.vragen .uitklap {
  border-top: 1px solid var(--kleur-lijn);
}

.vragen .uitklap summary {
  font-size: 19px;
  line-height: 1.35;
}

.vragen .uitklap p {
  max-width: 60ch; /* niet te lange regels: leest makkelijker */
  margin-bottom: 22px;
  color: var(--kleur-gedempt);
}

/* Witte kaart onder de kop */
.vragen__kaart {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-tegel);
  background: var(--kleur-vlak);
}

.vragen__ballon {
  width: 48px;
  height: 40px;
}

.vragen__kaart p {
  font-size: 16px;
  color: var(--kleur-gedempt);
}

.vragen__kaart .vragen__kaart-titel {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--kleur-inkt);
}

.vragen__link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* groot genoeg om aan te tikken */
  font-weight: 700;
  text-underline-offset: 4px;
}

/* ---------- 15. Contact en footer ----------
   Donkere band: inkt als achtergrond, lichte tekst. Alles in deze band erft die lichte kleur,
   ook de randen van de omlijnde knop (currentColor = "de tekstkleur hier"). */
.contact,
.site-footer {
  background: var(--kleur-inkt);
  color: var(--kleur-achtergrond);
  --kleur-band-gedempt: rgb(247 246 242 / 0.78); /* iets zachtere lichte tekst, nog ruim leesbaar */
}

.contact {
  margin-top: var(--sectie-ruimte);
}

/* Op donker is de blauwe focusrand bijna onzichtbaar: daarom geel */
.contact :focus-visible,
.site-footer :focus-visible,
.gsm-balk :focus-visible {
  outline-color: var(--kleur-geel);
}

/* Tekst links, knoppen rechts; te smal = knoppen onder de tekst */
.contact__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-top: 88px;
  padding-bottom: 40px;
}

.contact__tekst {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact__simon {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact__simon p {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.contact__naam {
  font-size: 18px;
  font-weight: 700;
}

.contact__zaak {
  font-size: 15px;
  color: var(--kleur-band-gedempt);
}

/* De belofte valt op: volle lichte kleur en iets vetter; de uitleg eronder is zachter */
.contact__belofte {
  max-width: 46ch;
  font-size: 19px;
  font-weight: 600;
}

.contact__uitleg {
  max-width: 46ch;
  color: var(--kleur-band-gedempt);
}

.contact__acties {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.contact__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

/* Omlijnde knop op donker: lichte rand in plaats van een donkere */
.contact .knop--rand {
  border-color: currentColor;
}

.contact__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* groot genoeg om aan te tikken */
  font-size: 21px;
  font-weight: 600;
  text-underline-offset: 5px;
}

.site-footer__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-top: 8px;
  padding-bottom: 32px;
  border-top: 1px solid var(--kleur-gedempt);
  font-size: 14px;
  color: var(--kleur-band-gedempt);
}

/* Het volledige logo met de meetlat (alleen hier). Ruimte boven en onder, los van de grijze lijn. */
.site-footer__logo {
  flex: none;
  width: 160px;
  height: 48px;
  margin-block: 12px;
}

.site-footer__rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: 4px;
}

/* ---------- 16. Gsm-balk ----------
   Vaste balk onderaan het scherm, alleen op de gsm. Op de computer bestaat hij niet (display: none). */
.gsm-balk {
  display: none;
}

@media (max-width: 760px) {
  .gsm-balk {
    display: flex;
    gap: 10px;
    position: fixed; /* blijft op dezelfde plek op het scherm, ook als je scrollt */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10; /* boven de gewone pagina-inhoud */
    /* onderaan 10px + de "veilige zone" van de iPhone (de streep om naar huis te vegen) */
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--kleur-lijn);
    background: var(--kleur-achtergrond);
  }

  /* Twee even brede knoppen: allebei 1 deel van de breedte */
  .gsm-balk .knop {
    flex: 1 1 0;
    min-height: 48px;
    padding: 0 12px;
    font-size: 16px;
  }

  /* Ruimte onderaan de pagina, even hoog als de balk, zodat de footer nooit verstopt zit.
     10 + 48 + 10 = 68px, plus 1px rand, plus de veilige zone.
     :has(.gsm-balk) = alleen op pagina's die de balk hebben (de privacypagina niet). */
  body:has(.gsm-balk) {
    padding-bottom: calc(69px + env(safe-area-inset-bottom));
  }

  /* Wie met het toetsenbord door de pagina gaat: de browser schuift het element met de focus
     altijd boven de balk in beeld, zodat het nooit erachter verstopt zit */
  html:has(.gsm-balk) {
    scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  /* ---- Slimme balk (alleen als JavaScript werkt: dan staat class "js" op <html>) ----
     De balk staat standaard weggeschoven onder het scherm. main.js zet er de class
     .gsm-balk--zichtbaar op wanneer hij nuttig is: de hero-knoppen zijn uit beeld,
     je zit nog niet bij Contact, en je scrolt omhoog.
     Zonder JavaScript gebeurt niets van dit alles: dan blijft de balk gewoon altijd staan. */
  .js .gsm-balk {
    translate: 0 calc(100% + 2px); /* net onder de onderrand van het scherm */
    visibility: hidden; /* weggeschoven = ook niet bereikbaar met Tab of een schermlezer */
    /* Weggaan: snel (0,18s). Eerst wegschuiven, pas daarna onzichtbaar maken (visibility wacht 0,18s) */
    transition: translate 0.18s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0.18s;
  }

  .js .gsm-balk.gsm-balk--zichtbaar {
    translate: 0 0;
    visibility: visible;
    /* Binnenkomen: iets rustiger (0,24s), met de "lade"-curve van iOS: start meteen, landt zacht */
    transition: translate 0.24s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }

  /* De balk staat nooit over de footer (bij Contact gaat hij weg),
     dus de extra ruimte onderaan de pagina is dan niet meer nodig */
  .js body:has(.gsm-balk) {
    padding-bottom: 0;
  }

  /* Lichtbak open? Dan weg met de balk: niets mag door of boven het vergrote beeld komen */
  html:has(.lichtbak[open]) .gsm-balk {
    display: none;
  }
}

/* ---------- 17. Kleinere schermen ---------- */
/* Middelgroot scherm: werkwijze in 2×2 */
@media (max-width: 980px) {
  .stappen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
  /* In twee rijen klopt "naar rechts" niet meer: geen pijlen */
  .stap:not(:last-child) .stap__beeld::after {
    content: none;
  }
}

/* Tablet en kleiner: één kolom, tekening bovenaan */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__tekening {
    order: -1; /* zet de tekening vóór de tekst */
    max-width: 420px;
  }

  /* Voorbeelden onder elkaar, in dezelfde volgorde als in de HTML */
  .werk__raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Gsm: geen menu (de gsm-balk onderaan neemt het over), kleine tekening, alles dichter op elkaar */
@media (max-width: 760px) {
  .menu {
    display: none;
  }
  .woordmerk {
    font-size: 23px;
  }
  .hero {
    gap: 14px;
    padding-top: 20px;
  }
  .hero__tekening {
    max-width: min(210px, 54vw);
  }

  /* Gsm: Simon komt vóór de knoppen, zodat zijn gezicht in het eerste scherm staat.
     Alleen de volgorde op het scherm verandert; er zit niets aanklikbaars in, dus de Tab-volgorde blijft kloppen. */
  .hero__simon {
    order: -1;
    gap: 16px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
  .hero__tekst > h1,
  .hero__sub {
    order: -2;
  }
  .hero__simon p {
    font-size: 16px;
  }
  .portret--groot {
    width: 64px;
    height: 80px;
  }
  .hero__prijslink {
    font-size: 16px; /* past zo op één regel, ook op een smalle gsm (360px) */
  }
  /* Beide knoppen even breed (de volle breedte), zoals in het contactblok:
     anders lijkt de gele hoofdknop kleiner dan de tweede knop */
  .hero__knoppen .knop {
    width: 100%;
  }

  /* Diensten: alles onder elkaar, met een kleine pijl naar beneden.
     Klein en strak gehouden: de vroegere grote pijl kostte ~70px hoogte per rij. */
  .diensten {
    gap: 32px;
    padding-top: 24px;
  }
  .dienst {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    --pijl-start: 0 -8px; /* gsm: pijl schuift van boven in */
  }
  .dienst__pijl {
    width: 30px;
    height: 14px;
    rotate: 90deg; /* aparte eigenschap, dus de animatie kan dit niet overschrijven */
    margin: 8px 0 8px 2px; /* na het draaien is de pijl hoger dan breed: wat ruimte erboven en eronder */
  }
  .dienst__tegel {
    gap: 16px;
    padding: 18px;
  }
  .dienst__tekening {
    width: 84px;
    height: 63px;
  }

  /* Prijzen: iets minder ruimte rond de band */
  .prijzen {
    margin-top: 88px;
  }
  .prijzen__binnen {
    padding-block: 48px;
  }

  /* Voorbeelden: iets minder ruimte bovenaan */
  .werk {
    padding-top: 88px;
  }

  /* Lichtbak op de gsm: het beeld wordt ruim twee keer zo breed als het scherm, zodat je de
     tekst in de voorbeelden echt kunt lezen. Je veegt opzij om alles te zien.
     De sluitknop en de tip staan "fixed": ze blijven op hun plek terwijl je veegt. */
  .lichtbak[open] {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior: contain; /* vegen schuift niet de pagina erachter mee */
  }
  .lichtbak__beeld {
    flex: none;
    width: 220vw;
    max-width: none;
    max-height: none;
  }
  .lichtbak__sluit {
    position: fixed;
  }
  .lichtbak__tip {
    display: block;
    position: fixed;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 16px;
    right: 16px;
    font-size: 15px;
    text-align: center;
    color: var(--kleur-achtergrond);
  }

  /* Werkwijze: één kolom, compact. Per stap een kleine tekening links en de tekst rechts,
     zo is de sectie bijna half zo lang als met een grote tekening boven elke stap. */
  .werkwijze {
    gap: 32px;
    padding-top: 88px;
  }
  .stappen {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  /* Elke stap is een klein raster: kolom 1 = tekening (120px), kolom 2 = de rest.
     De tekening loopt over twee rijen: naast de titel én naast de zin. */
  .stap {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-areas:
      "beeld kop"
      "beeld tekst";
    column-gap: 16px;
    row-gap: 6px;
    align-items: start;
  }
  .stap__beeld {
    grid-area: beeld;
    padding: 8px 6px;
  }
  .stap__kop {
    grid-area: kop;
  }
  .stap p {
    grid-area: tekst;
    margin: 0;
    font-size: 16px; /* smalle kolom naast de tekening: zo blijft de sectie compact */
  }

  /* Vragen: geen kaart, de vragen over de volle breedte */
  .vragen {
    gap: 24px;
    padding-top: 88px;
  }
  .vragen__kaart {
    display: none;
  }
  .vragen .uitklap summary {
    font-size: 18px;
  }

  /* Contact: iets minder ruimte, knoppen over de volle breedte onder elkaar */
  .contact {
    margin-top: 88px;
  }
  .contact__binnen {
    padding-top: 64px;
  }
  .contact__acties {
    flex-basis: 100%;
  }
  .contact__knoppen {
    align-self: stretch;
    flex-direction: column;
  }
}

/* ---------- 18. Privacypagina ----------
   Gewone leestekst: één smalle kolom (ongeveer 70 tekens per regel leest het prettigst). */
.terug-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* groot genoeg om aan te tikken */
  font-size: 15px;
  font-weight: 600;
  text-underline-offset: 4px;
}

.privacy {
  padding-top: 72px;
  padding-bottom: var(--sectie-ruimte);
}

.privacy__tekst {
  max-width: 680px;
}

/* De titel hier is een h1, maar zo groot als een gewone sectietitel: de hero-maat is te fors voor een leespagina */
.privacy h1 {
  font-size: var(--tekst-h2);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.privacy__intro {
  margin-top: 16px;
  font-size: 19px;
  color: var(--kleur-gedempt);
}

.privacy__datum {
  margin-top: 8px;
  font-size: 14px;
  color: var(--kleur-gedempt);
}

.privacy h2 {
  margin-top: 48px;
  margin-bottom: 10px;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.privacy p + p,
.privacy ul + p,
.privacy p + ul {
  margin-top: 12px;
}

.privacy ul {
  margin-bottom: 0;
  padding-left: 1.2em;
}

.privacy li + li {
  margin-top: 4px;
}

.privacy__tekst a {
  text-underline-offset: 3px;
  overflow-wrap: anywhere; /* lange adressen breken netjes af op een smal scherm */
}

/* Footer zonder donker contactblok erboven: geen grijze lijn, wel wat ademruimte bovenaan */
.site-footer--los .site-footer__rij {
  padding-top: 24px;
  border-top: 0;
}

@media (max-width: 760px) {
  .privacy {
    padding-top: 40px;
    padding-bottom: 88px;
  }
  .privacy h2 {
    margin-top: 40px;
  }
}