/* Scharnier Financieel Advies, voorbeeldsite van joepa (dit kantoor bestaat
   niet). Eigen stijl, los van de joepa-kleuren en van de andere
   voorbeeldsites.
   Ontwerp-lezing: een rustige, heldere site voor een klein onafhankelijk
   adviesbureau; vertrouwen komt uit vaste prijzen vooraf, uitleg per
   levensmoment in gewone taal en wettelijke gegevens die je zonder zoeken
   vindt. Lage variance.
   Letters: Schibsted Grotesk (koppen, menu, knoppen en cijfers; stevig en
   nuchter, variabel van 400 tot 800) en Source Serif 4 (lopende tekst,
   variabel van 400 tot 600; leest als een goed geschreven brief), zelf
   gehost onder de SIL Open Font License (zie fonts/). Andersom dan de
   andere voorbeeldsites: daar is de kopletter een schreef, hier de
   tekstletter. Niet Figtree of Gabarito: dat zijn de letters van joepa.nl.
   Kleuren: papier als grond, steen als tweede vlak, inkt voor tekst, petrol
   als enige accent, nacht voor het afsluitblok en de voet; messing (de pen
   van een scharnier) in het logo, in de scharnierpen langs de kopfoto en
   als markering op donker, nooit als tekstkleur op licht.
   Vormtaal: de naam gaat over de scharniermomenten in iemands leven (een
   huis, uit elkaar, pensioen, voor jezelf beginnen). Het logo is een
   scharnier: twee bladen met de pen ertussen, en die pen hangt vanaf 960
   breed langs de kopfoto, alsof de foto een deur is. Verder rijen met haarlijnen
   in plaats van kaartjes, bedragen rechts op één lijn en kleine rechte
   hoeken (4 px), ook op de knoppen. Het korte staafje van de pen komt terug
   als opsommingsteken.
   Contrast (WCAG AA): inkt #1b2528 op papier #f6f4ee 14,2:1, op steen
   #e8e4d9 12,3:1; inkt-zacht #525c5e op papier 6,3:1, op steen 5,4:1;
   petrol #1f5f62 op papier 6,7:1, op steen 5,8:1, op wit 7,3:1; wit op
   petrol 7,3:1, op petrol-diep #174a4d 9,9:1; papier op nacht #15232a
   14,6:1; nachtlicht #c6d3d2 op nacht 10,5:1; messing #cfa84a op nacht
   7,2:1 (op papier maar 2,0:1, dus daar alleen in het logo). */
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --papier: #f6f4ee;
  --steen: #e8e4d9;
  --wit: #ffffff;
  --inkt: #1b2528;
  --inkt-zacht: #525c5e;
  --petrol: #1f5f62;
  --petrol-diep: #174a4d;
  --nacht: #15232a;
  --nachtlicht: #c6d3d2;
  --messing: #cfa84a;
  --lijn: #d4cdbd;
  --lijn-licht: rgba(246, 244, 238, 0.18);
  --kop: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --tekst: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --maat: 1120px;
  --rand: 1.25rem;
  --rond: 4px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* overflow-wrap: een vangnet voor een lang samengesteld woord op een smalle
   telefoon; de teksten zelf vermijden zulke woorden in koppen. */
body { margin: 0; font-family: var(--tekst); font-size: 1.125rem; line-height: 1.6; color: var(--inkt); background: var(--papier); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--kop); font-weight: 700; line-height: 1.12; margin: 0 0 0.5em; text-wrap: balance; }
/* Schibsted is een brede letter: de h1 blijft kleiner dan een schreefkop, zodat
   de kop van de home op desktop op twee regels past. */
h1 { font-size: clamp(2rem, 1.45rem + 1.9vw, 2.5rem); line-height: 1.06; letter-spacing: -0.025em; font-weight: 750; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); letter-spacing: -0.02em; }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; font-weight: 650; }
p { margin: 0 0 1em; }
/* Geen los woord op de laatste regel van lopende tekst. */
p, li, dd, summary, td { text-wrap: pretty; }
a { color: var(--petrol); text-decoration-color: currentColor; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--petrol-diep); text-decoration-thickness: 2px; }
.accent { color: var(--petrol); }
/* Op een telefoon blijft "We rekenen hem" bij elkaar (anders stond "hem" los
   op de volgende regel); breder mag de kop vrij breken, dan blijft hij op
   desktop twee regels. */
@media (max-width: 599px) {
  .heel { white-space: nowrap; }
}
/* Vanaf 600 staat de vraag in de kop van de home op een eigen regel, zodat
   er geen los "We" aan het eind van de eerste regel blijft staan. */
@media (min-width: 600px) {
  .regel { display: block; }
}
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
.voorbeeldbalk :focus-visible, .site-voet :focus-visible, .blok--nacht :focus-visible { outline-color: var(--messing); }
/* De skiplink valt bij focus over de donkere voorbeeldbalk: daarom een licht
   vlak met een donkere ring binnen dat vlak. */
.skiplink { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--papier); color: var(--inkt); font-family: var(--kop); font-weight: 600; padding: 0.3rem 0.9rem; border-radius: var(--rond); }
.skiplink:focus { left: 1rem; top: 0.2rem; }
.skiplink:focus-visible { outline: 2px solid var(--inkt); outline-offset: -5px; }

/* De voorbeeldbalk staat op elke pagina bovenaan. */
.voorbeeldbalk { background: var(--nacht); color: var(--papier); font-family: var(--kop); font-size: 0.875rem; text-align: center; padding: 0.5rem 1rem; }
.voorbeeldbalk p { margin: 0; }
.voorbeeldbalk a { color: var(--papier); font-weight: 600; text-decoration-color: var(--messing); }
.voorbeeldbalk a:hover { color: var(--messing); }

/* Kop met logo, menu en de afspraakknop, plakt bovenaan. */
.site-kop { position: sticky; top: 0; z-index: 20; background: var(--papier); border-bottom: 1px solid var(--lijn); font-family: var(--kop); }
.site-kop__inner { max-width: calc(var(--maat) + 2 * var(--rand)); margin: 0 auto; padding: 0.7rem var(--rand); display: flex; align-items: center; gap: 1.75rem; }
.site-kop__logo { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--inkt); line-height: 1; }
.site-kop__logo:hover { color: var(--inkt); }
.logo__scharnier { width: 3rem; height: auto; flex: none; }
.site-kop__woord { display: flex; flex-direction: column; }
.site-kop__naam { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; }
.site-kop__sub { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: var(--inkt-zacht); margin-top: 0.2rem; }
.site-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.site-nav a { color: var(--inkt); text-decoration: none; font-weight: 500; padding: 0.3rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"], .site-nav a.is-actief { border-bottom-color: var(--petrol); color: var(--inkt); }
.site-kop__menu { display: none; }
.site-nav { align-items: center; }
/* Een groep in het menu (Hypotheken, Verzekeringen): een knop die een lijst
   uitklapt. Met een muis ook bij aanwijzen. */
.nav-groep { position: relative; }
.nav-groep__knop { font: inherit; font-weight: 500; color: var(--inkt); background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.3rem 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.nav-groep__knop::after { content: ""; width: 0.42rem; height: 0.42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease; }
.nav-groep__knop[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav-groep__knop:hover, .nav-groep.is-actief .nav-groep__knop { border-bottom-color: var(--petrol); }
.nav-groep__lijst { list-style: none; margin: 0; padding: 0; display: none; }
.nav-groep__knop[aria-expanded="true"] + .nav-groep__lijst { display: block; }
.site-nav__contact { display: none; }
/* Bovenbalk met bellen, mailen en contact, zoals op veel adviessites. */
.bovenbalk { display: none; background: var(--steen); border-bottom: 1px solid var(--lijn); font-family: var(--kop); font-size: 0.9rem; }
.bovenbalk__inner { max-width: calc(var(--maat) + 2 * var(--rand)); margin: 0 auto; padding: 0.4rem var(--rand); display: flex; justify-content: flex-end; gap: 1.5rem; }
.bovenbalk .tekstknop, .bovenbalk a { color: var(--inkt); text-decoration-color: var(--petrol); }
.bovenbalk a[aria-current="page"] { font-weight: 650; }
@media (min-width: 1100px) {
  .bovenbalk { display: block; }
  .nav-groep__lijst { position: absolute; top: calc(100% + 0.6rem); left: -1rem; z-index: 25; min-width: 16rem; padding: 0.5rem 0; background: var(--wit); border: 1px solid var(--lijn); border-top: 3px solid var(--petrol); border-radius: var(--rond); box-shadow: 0 14px 34px rgba(21, 35, 42, 0.14); }
  /* Een strookje boven de lijst, zodat de muis er vanaf de knop naartoe kan. */
  .nav-groep__lijst::before { content: ""; position: absolute; left: 0; right: 0; top: -0.9rem; height: 0.9rem; }
  .nav-groep__lijst a { display: block; padding: 0.5rem 1rem; border: 0; white-space: nowrap; }
  .nav-groep__lijst a:hover, .nav-groep__lijst a[aria-current="page"] { background: var(--papier); color: var(--petrol); }
  .nav-groep__lijst a[aria-current="page"] { font-weight: 650; }
}
@media (min-width: 1100px) and (hover: hover) {
  .nav-groep:hover .nav-groep__lijst { display: block; }
}
.site-kop__afspraak { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1279px) {
  .site-kop__inner { gap: 1rem; }
  .site-nav { gap: 1rem; }
  .site-nav > a, .nav-groep__knop { font-size: 0.95rem; }
}
/* Ruimte voor de plakkende kop bij ankers en bij focus met Tab (WCAG 2.4.11).
   Onder 1100 komt er ruimte voor de onderbalk bij, zie daar. */
html { scroll-padding-top: 6rem; }

/* Knoppen: vol is petrol met wit (7,3:1), lijn is inkt op de grond. Rechte
   hoeken van 4 px: nuchter, zoals de rest van de site. */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--kop); font-size: 1rem; font-weight: 600; padding: 0.8rem 1.3rem; border-radius: var(--rond); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease; }
.knop--vol { background: var(--petrol); color: var(--wit); border-color: var(--petrol); }
.knop--vol:hover { background: var(--petrol-diep); border-color: var(--petrol-diep); color: var(--wit); text-decoration: none; }
.knop--lijn { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop--lijn:hover { background: var(--steen); color: var(--inkt); text-decoration: none; }
.knop--licht-vol { background: var(--papier); color: var(--nacht); border-color: var(--papier); }
.knop--licht-vol:hover { background: var(--messing); border-color: var(--messing); color: var(--nacht); }
.knop--licht { background: transparent; color: var(--papier); border-color: var(--papier); }
.knop--licht:hover { background: rgba(246, 244, 238, 0.12); }
.knop:active { transform: translateY(1px); }
.tekstknop { font: inherit; background: none; border: 0; padding: 0; color: var(--petrol); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; text-align: left; }
.tekstknop:hover { color: var(--petrol-diep); text-decoration-thickness: 2px; }
.tekstlink { font-family: var(--kop); font-weight: 600; white-space: nowrap; }
.tekstlink::after { content: "\00a0\2192"; content: "\00a0\2192" / ""; }

/* Blokken */
.blok { padding: clamp(2.75rem, 6vw, 5rem) var(--rand); }
.blok__inner { max-width: var(--maat); margin: 0 auto; }
.blok--steen { background: var(--steen); }
.blok--nacht { background: var(--nacht); color: var(--papier); }
.blok p { max-width: 64ch; }
.blok__kop { margin-bottom: 1.75rem; max-width: 40rem; }
.blok__kop h2 { margin-bottom: 0.35rem; }
.blok__kop p { margin: 0; color: var(--inkt-zacht); }
.blok__meer { margin: 1.75rem 0 0; }

/* Lopende tekst in één kolom, op leesbreedte. */
.tekstblok { max-width: 44rem; margin-left: max(0px, calc((100% - var(--maat)) / 2)); }
.tekstblok p:last-child { margin-bottom: 0; }
/* Twee gelijke blokken naast elkaar, elk met een eigen kop. */
.naast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 6vw, 5rem); }
.naast > div { border-top: 2px solid var(--inkt); padding-top: 1.25rem; }
.naast h2 { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem); }
.naast p:last-child { margin-bottom: 0; }

/* Twee kolommen */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: start; }
.split--midden { align-items: center; }
.split img { border-radius: var(--rond); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (min-width: 760px) {
  .split--foto-rechts > picture { order: 2; }
}

/* Kop van de pagina: tekst links, foto rechts. */
.hero { padding: clamp(1.75rem, 4vw, 3.25rem) var(--rand) clamp(2.5rem, 5vw, 4rem); }
.hero__inner { max-width: var(--maat); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__tekst > p { max-width: 42ch; font-size: 1.2rem; color: var(--inkt-zacht); }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.hero__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }
/* Het kenmerk van de site: de kopfoto hangt als een deur aan een scharnier.
   Links langs de foto de pen, drie knokkels om en om in messing en inkt,
   zoals in het logo. Alleen waar tekst en foto naast elkaar staan. */
@media (min-width: 960px) {
  .hero__beeld { position: relative; display: block; }
  .hero__beeld::before { content: ""; position: absolute; left: -5px; top: 30%; bottom: 30%; width: 10px; border-radius: 3px; background: linear-gradient(to bottom, var(--messing) 0 31%, var(--papier) 31% 34.5%, var(--inkt) 34.5% 65.5%, var(--papier) 65.5% 69%, var(--messing) 69%); }
}

/* Waar sta je nu: vier rijen met een foto en een haarlijn, vanaf 1024 in twee
   kolommen (smaller werd de tekst naast de foto te smal). Geen kaartjes: de
   hele rij is de link. */
.momenten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); }
.momenten li { border-top: 1px solid var(--lijn); }
.momenten li:last-child { border-bottom: 1px solid var(--lijn); }
@media (min-width: 1024px) {
  .momenten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .momenten li:nth-last-child(2) { border-bottom: 1px solid var(--lijn); }
}
.momenten a { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding: 1.1rem 0; color: var(--inkt); text-decoration: none; }
.momenten a:focus-visible { outline-offset: 6px; }
.momenten__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }
.momenten h3 { margin: 0 0 0.2rem; font-size: 1.35rem; }
.momenten p { margin: 0; color: var(--inkt-zacht); }
.momenten__pijl { font-family: var(--kop); font-size: 1.4rem; color: var(--petrol); }
.momenten a:hover h3 { text-decoration: underline; text-decoration-color: var(--petrol); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* Zo gaat een adviestraject: vier stappen naast elkaar, elk met een groot
   cijfer en een haarlijn erboven. */
.stappen { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.stappen li { counter-increment: stap; border-top: 2px solid var(--inkt); padding-top: 1rem; }
.stappen li::before { content: counter(stap); display: block; font-family: var(--kop); font-size: 2.4rem; font-weight: 750; line-height: 1; color: var(--petrol); margin-bottom: 0.9rem; font-variant-numeric: tabular-nums; }
.stappen h3 { margin: 0 0 0.35rem; }
.stappen p { margin: 0; color: var(--inkt-zacht); font-size: 1.05rem; }

/* Actueel: datum en titel per rij. */
.artikelen { list-style: none; margin: 0; padding: 0; }
.artikelen > li { border-top: 1px solid var(--lijn); padding: 1.35rem 0; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.3rem 2rem; }
.artikelen > li:last-child { border-bottom: 1px solid var(--lijn); }
.artikelen time, .artikel__meta { font-family: var(--kop); font-size: 1rem; font-weight: 500; color: var(--inkt-zacht); padding-top: 0.2rem; font-variant-numeric: tabular-nums; }
.artikelen h3, .artikelen__titel { margin: 0 0 0.3rem; font-size: 1.3rem; letter-spacing: -0.01em; font-weight: 650; }
.artikelen h3 a, .artikelen__titel a { color: var(--inkt); text-decoration: none; }
.artikelen h3 a:hover, .artikelen__titel a:hover { color: var(--petrol); text-decoration: underline; text-decoration-thickness: 2px; }
.artikelen p { margin: 0; color: var(--inkt-zacht); }
/* Op de home: met een kleine foto voor de datum en de titel. Onder 1024 staat
   het blok onder de kop, anders werd de tekstkolom op een tablet te smal. */
@media (max-width: 1023px) {
  #actueel .split { grid-template-columns: minmax(0, 1fr); }
  #actueel .split > .blok__kop { margin-bottom: 0; }
}
.artikelen--klein > li { grid-template-columns: 8rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.artikelen--klein img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }
.artikelen--klein time { display: block; padding: 0; margin-bottom: 0.3rem; }
/* Op de pagina Actueel: met een foto per artikel. */
.artikelen--foto > li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0.5rem 2.25rem; padding: 1.75rem 0; align-items: start; }
.artikelen--foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond); }
.artikelen--foto time { display: block; padding: 0; margin-bottom: 0.4rem; }

/* Waar we je mee helpen: een lijst met een kort staafje, de pen van het
   scharnier, als opsommingsteken. */
.hulp { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.hulp li { break-inside: avoid; position: relative; padding: 0 0 1.1rem 1.9rem; }
.hulp li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 1.05rem; height: 0.5rem; border-radius: 999px; background: var(--petrol); }

/* Feiten (goed om te weten, gegevens): een term links, uitleg rechts. */
.feiten { margin: 0; }
.feiten > div { display: grid; grid-template-columns: minmax(10rem, 0.75fr) minmax(0, 2fr); gap: 0.35rem 2.5rem; padding: 1.3rem 0; border-top: 1px solid var(--lijn); align-items: baseline; }
.feiten > div:last-child { border-bottom: 1px solid var(--lijn); }
.feiten dt { font-family: var(--kop); font-weight: 650; font-size: 1.1rem; }
.feiten dd { margin: 0; }
.feiten dd p { margin: 0 0 0.35rem; }
.feiten dd p:last-child { margin: 0; }

/* De gegevens (AFM, Kifid, vergelijkingskaart, KvK): één wit paneel, als een
   officiële kaart, vanaf 760 twee bij twee. Hier is een kaart op zijn plaats:
   het zijn de verplichte gegevens, en het paneel breekt de reeks lijsten met
   haarlijnen op Over ons. */
.gegevens { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 3.5rem); background: var(--wit); border: 1px solid var(--lijn); border-top: 3px solid var(--petrol); border-radius: var(--rond); padding: 0.4rem clamp(1.25rem, 3vw, 2rem); }
.gegevens > div { padding: 1.2rem 0 1.3rem; }
.gegevens > div:nth-child(n + 3) { border-top: 1px solid var(--lijn); }
.gegevens dt { font-family: var(--kop); font-weight: 650; font-size: 1.15rem; margin-bottom: 0.3rem; }
.gegevens dd { margin: 0; }
.gegevens dd p { margin: 0 0 0.4rem; }
.gegevens dd p:last-child { margin: 0; }

/* Rijen (zo werkt het met de kosten, wat je mag verwachten): kop en tekst op
   één basislijn. */
.rijen { list-style: none; margin: 0; padding: 0; }
.rijen li { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); gap: 0.35rem 2.5rem; align-items: baseline; padding: 1.3rem 0; border-top: 1px solid var(--lijn); }
.rijen li:last-child { border-bottom: 1px solid var(--lijn); }
.rijen h3 { margin: 0; font-size: 1.1rem; }
.rijen p { margin: 0; }

/* Vakbekwaamheid: diploma's en registers als lijst met een vinkje. */
.diplomas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.diplomas li { position: relative; padding: 0.85rem 0 0.85rem 2rem; border-top: 1px solid var(--lijn); }
.diplomas li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--lijn); }
.diplomas li::before { content: ""; position: absolute; left: 0.2rem; top: 1.2rem; width: 0.9rem; height: 0.5rem; border-left: 2.5px solid var(--petrol); border-bottom: 2.5px solid var(--petrol); transform: rotate(-45deg); }
.diplomas strong { display: block; font-family: var(--kop); font-weight: 650; }
.diplomas span { color: var(--inkt-zacht); font-size: 1rem; }

/* Vragen */
.vragen details { border-top: 1px solid var(--lijn); }
.vragen details:last-child { border-bottom: 1px solid var(--lijn); }
.vragen summary { cursor: pointer; font-family: var(--kop); font-weight: 600; font-size: 1.12rem; padding: 1rem 2.25rem 1rem 0; position: relative; list-style: none; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary:hover { color: var(--petrol); }
.vragen summary::after { content: "+"; content: "+" / ""; position: absolute; right: 0.25rem; top: 0.75rem; font-size: 1.5rem; line-height: 1; color: var(--petrol); }
.vragen details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.vragen details p { margin: 0 0 1.1rem; max-width: 64ch; }

/* Een artikel */
.artikel { padding: clamp(1.75rem, 4vw, 3rem) var(--rand) clamp(2.5rem, 5vw, 4rem); }
.artikel__inner { max-width: 44rem; margin: 0 auto; }
.kruimels { font-family: var(--kop); font-size: 0.9rem; margin: 0 0 1.5rem; }
.kruimels ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.kruimels li + li::before { content: "/"; content: "/" / ""; margin-right: 0.35rem; color: var(--inkt-zacht); }
.kruimels a[aria-current="page"] { color: var(--inkt-zacht); text-decoration: none; }
.artikel h1 { font-size: clamp(1.95rem, 1.45rem + 2vw, 2.8rem); }
.artikel__intro { font-size: 1.25rem; color: var(--inkt-zacht); }
.artikel__beeld { margin: 1.75rem 0 2rem; }
.artikel__beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rond); }
.artikel h2 { font-size: 1.45rem; margin-top: 2rem; }
.artikel ul { padding-left: 1.2rem; }
.artikel li { margin-bottom: 0.5rem; }
.artikel__slot { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 2px solid var(--inkt); }

/* Afsluitend blok met knoppen */
.actie { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.actie h2 { margin-bottom: 0.25rem; }
.actie p { margin: 0; color: var(--nachtlicht); }
.actie__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Voet */
.site-voet { background: var(--nacht); color: var(--papier); padding: clamp(2.25rem, 5vw, 3.5rem) var(--rand); border-top: 1px solid var(--lijn-licht); font-family: var(--kop); font-size: 1rem; }
.site-voet__inner { max-width: var(--maat); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; align-items: start; }
:where(.site-voet) p { margin: 0 0 0.3rem; }
.site-voet__naam { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.site-voet a, .site-voet .tekstknop { color: var(--papier); text-decoration-color: var(--messing); }
.site-voet a:hover, .site-voet .tekstknop:hover { color: var(--messing); }
.site-voet ul { list-style: none; margin: 0; padding: 0; }
.site-voet li { margin-bottom: 0.3rem; }
.site-voet__klein { color: var(--nachtlicht); font-size: 0.92rem; }
.site-voet__joepa { grid-column: 1 / -1; margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--lijn-licht); font-size: 0.9rem; color: var(--nachtlicht); }

/* Een uitgeschreven pagina: tekst op leesbreedte met rechts een zijkolom,
   zoals op een echte adviessite. */
.lees { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.lees__tekst { max-width: 44rem; }
.lees__tekst > h2 { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.7rem); margin-top: 2.25rem; }
.lees__tekst > h2:first-child { margin-top: 0; }
.lees__intro { font-size: 1.2rem; color: var(--inkt-zacht); }
.bullets { list-style: none; margin: 0 0 1em; padding: 0; }
.bullets li { position: relative; padding: 0 0 0.75rem 1.9rem; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 1.05rem; height: 0.5rem; border-radius: 999px; background: var(--petrol); }
.stappenlijst { list-style: none; counter-reset: stap; margin: 0 0 1em; padding: 0; }
.stappenlijst li { counter-increment: stap; position: relative; padding: 0 0 0.9rem 2.6rem; }
.stappenlijst li::before { content: counter(stap); position: absolute; left: 0; top: -0.05rem; font-family: var(--kop); font-weight: 750; font-size: 1.35rem; color: var(--petrol); }
.feiten--compact { margin: 0.5rem 0 1.25rem; }
.feiten--compact > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding: 1rem 0; }
.zijkant { position: sticky; top: 7rem; display: grid; gap: 1rem; font-size: 1rem; }
.zijkant__blok { border: 1px solid var(--lijn); border-radius: var(--rond); padding: 1.25rem 1.35rem; background: var(--wit); }
.zijkant__blok p { margin: 0 0 0.75rem; }
.zijkant__blok p:last-child { margin: 0; }
.zijkant__blok ul { list-style: none; margin: 0; padding: 0; }
.zijkant__blok li { padding: 0.3rem 0; }
.zijkant__kop { font-size: 1.1rem; margin: 0 0 0.5rem; }
.zijkant__blok--vol { background: var(--nacht); border-color: var(--nacht); color: var(--papier); }
.zijkant__blok--vol .tekstknop { color: var(--papier); text-decoration-color: var(--messing); }
.zijkant__blok--vol .tekstknop:hover { color: var(--messing); }
.zijkant__blok--vol :focus-visible { outline-color: var(--messing); }

/* De fade: na het eerste stuk vervaagt de tekst. Wat eronder staat is echt,
   maar inert: niet te focussen en niet voorgelezen. */
.vervolg { position: relative; max-height: 14rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%); user-select: none; }
.vervolg > h2 { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.7rem); margin-top: 1.75rem; }
/* Het paneel van joepa: gestippelde rand en een streepjesvlak, zoals de
   plaatshouders in een voorproefje. */
.samen, .plek { position: relative; margin-top: 0.5rem; padding: clamp(1.4rem, 3vw, 2rem); border: 2px dashed var(--petrol); border-radius: 6px; background: repeating-linear-gradient(135deg, var(--papier) 0 14px, #eef0e8 14px 28px); }
.samen h2, .plek h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.7rem); margin: 0.6rem 0 0.5rem; }
.samen__label { display: inline-block; margin: 0; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--petrol); color: var(--wit); font-family: var(--kop); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; }
.samen__lijstkop { font-family: var(--kop); font-weight: 650; margin-bottom: 0.4rem; }
.samen ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.samen li { position: relative; padding: 0 0 0.45rem 1.7rem; }
.samen li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 1rem; height: 0.45rem; border-radius: 999px; background: var(--petrol); }
/* Het paneel valt over het einde van de vervagende tekst: die loopt er zo
   zichtbaar onder door, en leest niet als grijs gemaakte tekst. */
.vervolg + .samen { margin-top: -5rem; }
.samen .tekstlink { white-space: normal; }
.samen__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0; }
.plek__tekst { max-width: 48rem; margin: 0.8rem 0 1.4rem; }
.plek__reviews { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.plek__review { display: grid; gap: 0.6rem; padding: 1.2rem; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); }
.plek__sterren { display: flex; gap: 0.2rem; }
.plek__sterren svg { width: 1rem; height: 1rem; fill: var(--lijn); }
.plek__lijn { display: block; height: 0.55rem; border-radius: 999px; background: var(--steen); }
.plek__lijn--kort { width: 55%; }
/* Onder de levensmomenten: de andere onderwerpen als tekstlinks. */
.ook__kop { margin: 2rem 0 0.4rem; font-size: 1rem; color: var(--inkt-zacht); font-weight: 600; }
.ook { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); }
.ook li { border-bottom: 1px solid var(--lijn); }
.ook a { display: block; padding: 0.7rem 0; font-family: var(--kop); font-weight: 600; text-decoration: none; }
.ook a::after { content: "\00a0\2192"; content: "\00a0\2192" / ""; }
.ook a:hover { text-decoration: underline; }
.blok--smal { padding-block: clamp(2rem, 4vw, 3rem); }
/* Direct na de kop van een onderwerp: de kop heeft onderaan al ruimte. */
.blok--na-kop { padding-top: clamp(0.5rem, 2vw, 1.5rem); }

/* Openingstijden als tabel */
.tijden { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tijden th, .tijden td { text-align: left; padding: 0.7rem 0; border-top: 1px solid var(--lijn); font-weight: 400; vertical-align: top; }
.tijden tr:last-child th, .tijden tr:last-child td { border-bottom: 1px solid var(--lijn); }
.tijden th { font-family: var(--kop); font-weight: 600; width: 38%; }

/* De melding achter afspraak, bellen, mailen en de gegevens. */
.melding { border: 0; border-radius: 6px; padding: 1.75rem; max-width: 27rem; width: calc(100% - 2rem); color: var(--inkt); background: var(--papier); box-shadow: 0 20px 60px rgba(21, 35, 42, 0.3); border-top: 4px solid var(--petrol); }
.melding::backdrop { background: rgba(21, 35, 42, 0.55); }
.melding__kop { font-family: var(--kop); font-weight: 700; font-size: 1.35rem; margin-bottom: 0.5rem; }
.melding__sluit { margin-top: 0.5rem; }

/* Onder 960 past de kop naast de foto niet meer: alles onder elkaar. Menu en
   onderbalk slaan om op 1100, zie de regel daarvoor. */
.onderbalk { display: none; }
/* Onder 1100: het menu met zijn twee groepen past niet meer naast het logo en
   de afspraakknop. Het gaat achter een knop, en onderin staat altijd
   Afspraak en Bel. Bij de andere voorbeeldsites ligt die grens op 960; dit
   menu is breder. */
@media (max-width: 1099px) {
  /* Ruimte voor de onderbalk, die op een iPhone met thuisbalk hoger wordt. */
  body { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .onderbalk { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--papier); border-top: 1px solid var(--lijn); box-shadow: 0 -6px 18px rgba(21, 35, 42, 0.08); }
  .site-kop__afspraak { display: none; }
  .site-kop__menu { display: inline-block; margin-left: auto; font: inherit; font-weight: 600; color: var(--inkt); background: none; border: 1.5px solid var(--inkt); border-radius: var(--rond); padding: 0.45rem 1rem; cursor: pointer; }
  /* Hooguit tot boven de onderbalk, zodat ook de laatste link te raken is. */
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--papier); padding: 0.25rem var(--rand) 1rem; border-bottom: 1px solid var(--lijn); max-height: calc(100svh - 11rem - env(safe-area-inset-bottom)); overflow-y: auto; }
  .site-kop--open .site-nav { display: flex; }
  .site-nav > a, .nav-groep__knop { padding: 0.75rem 0; border-bottom: 1px solid var(--lijn); font-weight: 400; width: 100%; text-align: left; justify-content: space-between; }
  .nav-groep__lijst a { display: block; padding: 0.6rem 0 0.6rem 1rem; border-bottom: 1px solid var(--lijn); }
  .site-nav__contact { display: block; }
  /* De huidige pagina niet alleen in kleur, ook vet (WCAG 1.4.1). */
  .site-nav a[aria-current="page"], .site-nav a.is-actief, .nav-groep.is-actief .nav-groep__knop { border-bottom-color: var(--lijn); color: var(--petrol); font-weight: 650; }
}

@media (max-width: 959px) {
  .lees { grid-template-columns: minmax(0, 1fr); }
  .zijkant { position: static; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__beeld { grid-row: 1; margin: 0 calc(-1 * var(--rand)); }
  /* Hooguit 42 procent van het scherm, zodat kop en knop op een staande
     tablet boven de vouw blijven. */
  .hero__beeld img { border-radius: 0; aspect-ratio: 16 / 9; max-height: 42svh; }
  .hero { padding-top: 0; }
  .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.25rem; }
  .site-voet__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-voet__inner > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 759px) {
  .split, .naast, .rijen li, .feiten > div { grid-template-columns: minmax(0, 1fr); }
  /* Onder elkaar: de tussenruimte van het raster is genoeg, anders stond er
     onder de kop dubbele witruimte. */
  .split > .blok__kop { margin-bottom: 0; }
  .rijen li, .feiten > div { gap: 0.3rem; }
  .diplomas, .gegevens { grid-template-columns: minmax(0, 1fr); }
  .momenten a { grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 0.9rem; padding: 0.9rem 0; }
  .momenten h3 { font-size: 1.15rem; margin-bottom: 0.1rem; }
  .momenten p { font-size: 1rem; line-height: 1.5; }
  .diplomas li:nth-last-child(2) { border-bottom: 0; }
  .plek__reviews { grid-template-columns: minmax(0, 1fr); }
  .plek__review:nth-child(n + 2) { display: none; }
  .ook { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gegevens > div + div { border-top: 1px solid var(--lijn); }
  .hulp { columns: 1; }
  .artikelen > li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .artikelen--klein > li { grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; }
  .gegevens > div { padding: 0.9rem 0 1rem; }
  .artikelen--foto > li { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
}

/* Smalle telefoons: de stappen onder elkaar, en de
   andere onderwerpen onder de levensmomenten in één kolom (in twee braken de
   lange namen midden in het woord). */
@media (max-width: 559px) {
  .ook { grid-template-columns: minmax(0, 1fr); }
  .stappen { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .stappen li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 0.75rem; }
  .stappen li::before { grid-row: 1 / span 2; font-size: 2rem; margin: 0; }
  .site-voet__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Heel smalle telefoons: de foto bij een artikel boven de tekst, anders brak
   een lange titel midden in een woord. */
@media (max-width: 399px) {
  h1 { font-size: 1.85rem; }
}
@media (max-width: 379px) {
  .artikelen--klein > li { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .artikelen--klein img { width: 7rem; }
}

/* Heel smalle telefoons: logo en menuknop passen naast elkaar. */
@media (max-width: 359px) {
  .voorbeeldbalk { font-size: 0.8rem; padding-inline: 0.75rem; }
  .site-kop__inner { gap: 0.75rem; }
  .logo__scharnier { width: 2.3rem; }
  .site-kop__logo { gap: 0.45rem; }
  .site-kop__naam { font-size: 1.25rem; }
  .site-kop__menu { padding: 0.4rem 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}