/* Kleuren: olijf en amber */
:root {
  --bg: #f7f3ea; --surface: #fffdf8; --band: #ece6d6;
  --ink: #26281f; --muted: #55584a; --line: #ddd5c2;
  --accent: #4f5a2e; --accent-dark: #3a4321;   /* olijf, contrast met --bg ca. 6,7:1 */
  --warm: #8a5a1c;                              /* amber voor kleine tekst, ca. 5,3:1 */
  --deco: #c98d4a; --deco-2: #c9cba6;           /* alleen decoratief */
  --deep: #2f3420; --on-deep: #f4efe2; --on-deep-muted: #d6d0bd;
}
:root {
  --focus: #1f4e79;
  --on-accent: #ffffff;
  --veld-rand: #8a8670;
  --em-kleur: var(--accent);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Ontwerptokens */
  --kop-font: var(--serif); --kop-gewicht: normal; --kop-spatie: -.01em; --kop-stijl: normal;
  --em-stijl: italic; --logo-stijl: italic;
  --radius: 1rem; --knop-radius: 999px; --veld-radius: .6rem;
  --boog: 999px 999px var(--radius) var(--radius); --boog-binnen: 999px 999px .6rem .6rem;
  --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 30px -12px rgb(0 0 0 / .14);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; scroll-behavior: smooth; } /* 18px basis */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
.wrap-wide { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .wrap, .wrap-wide { padding: 0 1.5rem; } }

h1, h2, h3 { font-family: var(--kop-font); font-weight: var(--kop-gewicht); line-height: 1.15; letter-spacing: var(--kop-spatie); }
h1, h2 { font-style: var(--kop-stijl); }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.6rem); margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 3rem 0 1rem; }
h3 { font-size: 1.3rem; margin: 1.75rem 0 .5rem; }
h1 em, h2 em { color: var(--em-kleur); font-style: var(--em-stijl); }
p, ul, ol { margin: 0 0 1.1rem; }
li { margin-bottom: .45rem; }
a { color: var(--accent-dark); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lead { font-size: 1.22rem; color: var(--muted); line-height: 1.6; }
.eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; font-family: var(--sans); font-style: normal; line-height: 1.5; color: var(--warm); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; }

.skip { position: absolute; left: -999px; top: .5rem; background: var(--ink); color: var(--bg); padding: .6rem 1rem; z-index: 50; border-radius: 6px; }
.skip:focus { left: .5rem; }
.skip2:focus { left: 13rem; }

/* ---------- Knoppen ---------- */
.button { display: inline-flex; align-items: center; gap: .5rem; background: var(--accent); color: var(--on-accent); padding: .85rem 1.6rem; border-radius: var(--knop-radius); text-decoration: none; font: 600 1rem/1.3 var(--sans); border: 2px solid var(--accent); cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; }
.button:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.button.quiet { background: transparent; color: var(--accent-dark); }
.button.quiet:hover { background: var(--surface); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0; }
.link-arrow { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.link-arrow::after { content: " \2192"; display: inline-block; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Kop en menu ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-top: .8rem; padding-bottom: .8rem; }
.brand { font-family: var(--kop-font); font-style: var(--logo-stijl); font-size: clamp(2.2rem, 3.4vw, 2.75rem); line-height: 1; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand::after { content: ""; display: inline-block; width: .38rem; height: .38rem; border-radius: 50%; background: var(--deco); margin-left: .2rem; }
.site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; }
.site-header nav li { margin: 0; position: relative; }
.site-header nav a { display: inline-block; padding: .4rem 0; text-decoration: none; color: var(--ink); font-size: .95rem; background: linear-gradient(var(--deco), var(--deco)) no-repeat left bottom / 0 2px; transition: background-size .25s; }
.site-header nav a:hover { background-size: 100% 2px; }
.site-header nav a[aria-current="page"] { color: var(--accent); font-weight: 600; background-size: 100% 2px; }
.menu-knop { display: none; order: 3; font: 600 .95rem var(--sans); color: var(--ink); background: none; border: 1.5px solid var(--ink); border-radius: var(--knop-radius); padding: .4rem .95rem; cursor: pointer; }
#hoofdmenu { order: 1; }
@media (max-width: 55.99rem) {
  .js .menu-knop { display: inline-block; }
  #hoofdmenu { order: 4; width: 100%; }
  .js #hoofdmenu { display: none; }
  .js #hoofdmenu.open { display: block; padding: .5rem 0 .75rem; }
  #hoofdmenu ul { flex-direction: column; gap: 0; }
  #hoofdmenu a { padding: .65rem 0; font-size: 1.1rem; width: 100%; border-bottom: 1px solid var(--line); background: none; }
}
/* Taalkeuze NL / EN */
.taal { order: 2; display: flex; border: 1.5px solid var(--line); border-radius: var(--knop-radius); overflow: hidden; }
.taal a { padding: .3rem .65rem; font: 600 .8rem/1.2 var(--sans); letter-spacing: .06em; color: var(--muted); text-decoration: none; }
.taal a:hover { color: var(--ink); background: var(--band); }
.taal a[aria-current] { background: var(--accent); color: var(--on-accent); }
.taal a:focus-visible { outline-offset: -3px; }
/* Uitklapmenu met subpagina's */
.site-header nav .heeft-sub > a::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.25em) rotate(45deg); transition: transform .2s; }
.site-header nav .heeft-sub.actief > a { color: var(--accent); font-weight: 600; background-size: 100% 2px; }
.site-header nav ul.submenu { display: block; }
@media (min-width: 56rem) {
  .site-header nav .submenu { position: absolute; top: 100%; left: -.7rem; z-index: 30; width: max-content; margin-top: .55rem; padding: .3rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: .6rem; box-shadow: 0 12px 28px -16px rgb(0 0 0 / .3);
    opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .15s, transform .15s, visibility .15s; }
  .site-header nav li:nth-last-child(-n+3) > .submenu { left: auto; right: -.7rem; }
  .site-header nav .submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -.8rem; height: .8rem; }
  .site-header nav .submenu::after { content: ""; position: absolute; top: -5px; left: 1.3rem; width: 8px; height: 8px; background: var(--bg);
    border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
  .site-header nav li:nth-last-child(-n+3) > .submenu::after { left: auto; right: 1.3rem; }
  .site-header nav .heeft-sub:hover > .submenu, .site-header nav .heeft-sub:focus-within > .submenu { opacity: 1; visibility: visible; transform: none; }
  .site-header nav .heeft-sub:hover > a::after, .site-header nav .heeft-sub:focus-within > a::after { transform: translateY(0) rotate(225deg); }
  .site-header nav .heeft-sub[data-dicht] > .submenu { opacity: 0; visibility: hidden; }
  .site-header nav .submenu li { margin: 0; }
  .site-header nav .submenu a { display: block; padding: .32rem .65rem; font-size: .86rem; line-height: 1.4; white-space: nowrap; color: var(--ink); background: none; border-radius: .4rem; }
  .site-header nav .submenu a:hover { color: var(--accent); background: var(--band); }
  .site-header nav .submenu a[aria-current="page"] { color: var(--accent); font-weight: 600; }
}
@media (max-width: 55.99rem) {
  #hoofdmenu .submenu { padding-left: 1.1rem; margin: 0; }
  #hoofdmenu .submenu a { font-size: 1rem; }
  .site-header nav .heeft-sub > a::after { display: none; }
}

/* ---------- Secties ---------- */
main { position: relative; isolation: isolate; overflow-x: clip; }
main::before { content: ""; position: absolute; z-index: -1; top: -10rem; right: -12rem; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--deco-2) 70%, transparent), transparent 68%); pointer-events: none; }
.section { padding: 4.5rem 0; }

.split h2 { margin-top: 0; }
.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }

/* Binnenpagina's: kop met ruimte en sierlijn */
main > .wrap:first-child { padding-top: 3.5rem; }
main > .wrap:first-child > h1::after { content: ""; display: block; width: 3.5rem; height: 2px; background: var(--deco); margin-top: 1.1rem; }
main > .wrap:first-child > p:first-child { margin-bottom: 1.5rem; }
main > .wrap:first-child > p:first-child a { font-size: .9rem; font-weight: 600; text-decoration: none; }
main > .wrap:first-child > p:first-child a::before { content: "\2190  "; }

/* Opsommingen met sierpunt */
.wrap ul:not([class]) { list-style: none; padding: 0; }
.wrap ul:not([class]) > li { position: relative; padding-left: 1.6rem; }
.wrap ul:not([class]) > li::before { content: ""; position: absolute; left: .2rem; top: .7em; width: .45rem; height: .45rem; background: var(--deco); transform: rotate(45deg); }

/* ---------- Home: hero ---------- */

@keyframes opkomen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Boogvorm voor portret */
.arch { position: relative; aspect-ratio: 2 / 3; border-radius: var(--boog); overflow: hidden; background: linear-gradient(165deg, var(--deco-2), var(--deco) 75%, var(--warm)); box-shadow: var(--shadow); }
.arch::after { content: ""; position: absolute; inset: .85rem; border: 1px solid rgb(255 255 255 / .6); border-radius: var(--boog-binnen); pointer-events: none; }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch-label { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); background: var(--surface); color: var(--ink); font-size: .85rem; padding: .35rem .8rem; border-radius: 999px; white-space: nowrap; }

/* Carrousel op Over mij: bladeren met knoppen, swipen of pijltjestoetsen. Schuift nooit vanzelf. */
.carrousel { max-width: 22rem; margin: 1.5rem 0 2.5rem; }
.carrousel-baan { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: var(--boog); }
.carrousel-baan::-webkit-scrollbar { display: none; }
.carrousel-baan:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.dia { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 2 / 3; border-radius: var(--boog); overflow: hidden; background: var(--band); }
.dia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carrousel-knoppen { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1rem; }
.carrousel-knoppen button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--accent); background: transparent; color: var(--accent-dark); font-size: 1.1rem; cursor: pointer; transition: background .2s, color .2s; }
.carrousel-knoppen button:hover { background: var(--accent); color: var(--on-accent); }
.carrousel-knoppen button:disabled { opacity: .35; cursor: default; background: transparent; color: var(--accent-dark); }
.carrousel-teller { min-width: 4.5rem; text-align: center; color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .carrousel-baan { scroll-behavior: auto; } }

/* ---------- Kaarten ---------- */

/* ---------- Uitspraak ---------- */
.statement { font-family: var(--kop-font); font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.25; color: var(--on-deep) !important; margin: 0 0 1.25rem; }
.statement em { color: var(--deco); font-style: var(--em-stijl); }

/* ---------- Tijdlijn ---------- */

/* Stappen op binnenpagina */
.steps { counter-reset: s; list-style: none; padding: 0; }
.steps li { counter-increment: s; padding-left: 3.6rem; position: relative; margin-bottom: 1.5rem; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--deco); border-radius: 50%; display: grid; place-items: center; font-family: var(--kop-font); font-style: italic; color: var(--accent); background: var(--surface); }

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; }
caption { text-align: left; padding: 0 0 .75rem; color: var(--muted); font-size: .9rem; }
th, td { text-align: left; padding: .9rem .5rem; border-bottom: 1px dashed var(--line); vertical-align: top; }
thead th { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--warm); border-bottom: 1.5px solid var(--deco); }
tbody th { font-family: var(--kop-font); font-weight: normal; font-size: 1.08rem; }
td:last-child { text-align: right; font-weight: 600; color: var(--accent-dark); white-space: nowrap; }
thead th:last-child { text-align: right; }

@media (max-width: 36rem) {
  table { font-size: .92rem; } th, td { padding: .7rem .3rem; } tbody th { font-size: 1rem; hyphens: auto; }
  thead th, td:last-child { white-space: nowrap; }
  /* Regiotabel: op een telefoon als lijstje onder elkaar */
  .werkgebied thead { display: none; }
  .werkgebied caption { display: block; width: auto; }
  .werkgebied, .werkgebied tbody, .werkgebied tr, .werkgebied th, .werkgebied td { display: block; text-align: left; }
  .werkgebied tr { padding: .9rem 0; border-bottom: 1px dashed var(--line); }
  .werkgebied th, .werkgebied td { border: 0; padding: .1rem 0; white-space: normal; }
  .werkgebied td:last-child { margin-top: .35rem; }
  .werkgebied td:last-child::before { content: "Minimaal: "; font-weight: 400; color: var(--muted); }
  :lang(en) .werkgebied td:last-child::before { content: "Minimum: "; }
}

/* ---------- Notities, FAQ, formulier ---------- */
.note { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--deco); border-radius: .5rem var(--radius) var(--radius) .5rem; padding: 1.25rem 1.5rem; margin: 1.75rem 0; }

.note p:last-child { margin-bottom: 0; }

details { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; margin-bottom: .75rem; transition: border-color .2s; }
details[open] { border-color: var(--deco); }
summary { list-style: none; padding: 1rem 3.2rem 1rem 1.25rem; cursor: pointer; font-family: var(--kop-font); font-size: 1.15rem; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 1.3rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; color: var(--accent); transition: transform .35s var(--b-zacht, ease);
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
details[open] summary::after { transform: rotate(90deg); }
details p { padding: 0 1.25rem; }

form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin: 1.75rem 0; box-shadow: var(--shadow); }
label { display: block; font-weight: 600; margin-top: 1.25rem; }
.hint { color: var(--muted); font-weight: normal; display: block; font-size: .92rem; }
input, textarea { width: 100%; font: inherit; padding: .75rem .9rem; border: 1.5px solid var(--veld-rand); border-radius: var(--veld-radius); background: var(--surface); color: var(--ink); margin-top: .35rem; transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }
textarea { min-height: 8rem; }
form .button { margin-top: 1rem; }

/* Plaatshouders */
.portrait { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--band), var(--deco-2)); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--ink); margin: 2rem 0; }
.ph { background: color-mix(in srgb, var(--deco) 25%, transparent); padding: 0 .2em; border-radius: 3px; }
blockquote { margin: 1.25rem 0; padding: 1.25rem 1.5rem; background: var(--surface); border-radius: var(--radius); font-family: var(--kop-font); font-size: 1.15rem; }
blockquote footer { font-family: var(--sans); font-size: .9rem; color: var(--muted); margin-top: .5rem; }

/* ---------- App-blok met voorbeeldberichten ---------- */
.klein { font-size: .92rem; color: var(--muted); }

.chat { width: 100%; max-width: 28rem; justify-self: center; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + .5rem); box-shadow: var(--shadow); padding: 1.25rem; }
.chat-kop { display: flex; align-items: center; gap: .75rem; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.chat-avatar { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-family: var(--kop-font); font-size: 1.25rem; }
.chat-naam { margin: 0; font-weight: 600; line-height: 1.2; }
.chat-status { margin: 0; display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); }
.chat-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--deco); }
.chat-tip { margin: 0 0 .9rem; font-size: .85rem; color: var(--muted); }
.bubbels { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; justify-items: end; }
.bubbels li { margin: 0; max-width: 90%; }
.bubbel { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; font-family: inherit; padding: .6rem .9rem; background: var(--band); color: var(--ink); text-decoration: none; font-size: .95rem; line-height: 1.4; border-radius: 1.1rem 1.1rem .3rem 1.1rem; transition: transform .2s, background-color .2s; }
.bubbel:hover { color: var(--ink); background: color-mix(in srgb, var(--deco) 35%, var(--band)); transform: translateY(-1px); }
.bubbel.gekopieerd { background: color-mix(in srgb, var(--accent) 18%, var(--band)); }
.chat-melding { min-height: 1.4em; margin: -.4rem 0 .6rem; font-size: .85rem; color: var(--accent-dark); text-align: right; }
.chat-nummer { margin: 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.chat-nummer strong { color: var(--ink); white-space: nowrap; }
.contact-app { margin: 2rem 0 1rem; }
.contact-app .chat { max-width: none; }
.cta .actions { margin: 0; }

/* ---------- Oproep en voet ---------- */
.cta { background: var(--band); margin-top: 5rem; padding: 3.5rem 0; position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; right: -4rem; bottom: -6rem; width: 16rem; height: 20rem; border-radius: 999px 999px 0 0; border: 1.5px solid var(--deco); opacity: .7; }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; position: relative; z-index: 1; }
.cta h2 { margin: 0 0 .5rem; }
.cta p:not(.eyebrow) { margin: 0; color: var(--muted); }

.site-footer { background: var(--deep); color: var(--on-deep); padding: 3.5rem 0 2rem; }
main + .site-footer { margin-top: 5rem; }
.site-footer a { color: var(--on-deep); text-decoration-color: color-mix(in srgb, var(--on-deep) 40%, transparent); }
.site-footer a:hover { color: #fff; }
.site-footer :focus-visible { outline-color: var(--on-deep); }
.foot-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.foot-brand { font-family: var(--kop-font); font-style: italic; font-size: 2.2rem; margin: 0 0 .5rem; }
.foot-kop { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--deco); font-weight: 600; margin-bottom: .75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .35rem; }
.site-footer p { color: var(--on-deep-muted); }
.foot-small { border-top: 1px solid color-mix(in srgb, var(--on-deep) 18%, transparent); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}
@media print { .site-header, .site-footer, .skip, .cta { display: none; } body { background: #fff; } main::before { display: none; } }

/* Korte feitenlijst op Over mij */
.feiten { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.feiten li { background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; padding: .7rem 1rem; display: flex; flex-direction: column; }
.feiten strong { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--warm); }

/* ============ Homepage: start in twee helften, daarna twee secties van één scherm ============ */
@property --naad { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }

:root {
  --kop: 4.45rem;                     /* hoogte van de vaste sitekop; JS meet hem precies */
  --b-goud: color-mix(in srgb, var(--deco) 62%, var(--on-deep));   /* amber, leesbaar op donker */
  --b-haar: color-mix(in srgb, var(--on-deep) 16%, transparent);    /* haarlijn op donker */
  --b-zacht: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 55.99rem) { :root { --kop: 70px; } }

.b-symbolen { position: absolute; width: 0; height: 0; overflow: hidden; }
.b-symbolen, .b-tegel-ico, .sch-ico, .b-pijl svg {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Start: één scherm, in tweeën ---------- */
.b-start {
  --naad: 50%;
  --vraag-fs: clamp(3.2rem, min(7.5vw, 11svh), 5.6rem);
  --uit-r: 2.4; --uit-l: 1.05;   /* hoe ver "Ik zoek…" rechts en links van het midden reikt, in em (gemeten) */
  --boven-r: 8.9rem; --boven-l: 12rem;   /* idem voor de bovenregel, die een vaste grootte heeft */
  --binnen: clamp(1.25rem, 4.2vw, 4.5rem);   /* afstand van de naad tot de tekst */
  --buiten: clamp(1rem, 3vw, 3rem);
  position: relative; display: grid;
  grid-template-columns: 1fr; grid-template-rows: auto 1fr 1fr;
  min-height: min(calc(100vh - var(--kop)), 64rem);
  min-height: min(calc(100svh - var(--kop)), 64rem);   /* op heel hoge schermen niet eindeloos */
}
.b-start-kop { grid-column: 1; grid-row: 1; position: relative; z-index: 2; pointer-events: none;
  padding: clamp(1.1rem, 3.2svh, 2rem) 1rem 0; color: var(--on-deep); }
.b-h1.eyebrow { display: block; gap: 0; margin: 0 0 .4rem; font-size: .68rem; letter-spacing: .1em; color: var(--b-goud); }
.b-h1.eyebrow::before { content: none; }
.b-punt { color: var(--deco); }
.b-dots { color: var(--deco); font-family: var(--sans); font-size: .7em; letter-spacing: 0; }   /* iets kleiner: op groot formaat werden de punten zware ruitjes */
.b-vraag { margin: 0; font-size: clamp(3rem, 15vw, 4.2rem); line-height: 1; letter-spacing: -.02em; color: var(--on-deep); }
.b-vraag em { color: var(--b-goud); }

.b-vlak { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  text-decoration: none; -webkit-tap-highlight-color: transparent; }
.b-vlak:hover { text-decoration: none; }
.b-vlak-date { grid-column: 1; grid-row: 1 / 3; grid-template-rows: subgrid; background: var(--deep); color: var(--on-deep); }
.b-vlak-stap { grid-column: 1; grid-row: 3; grid-template-rows: 0 1fr; background: var(--band); color: var(--ink); }
.b-vlak-date:hover { color: var(--on-deep); }
.b-vlak-stap:hover { color: var(--ink); }
.b-vlak-inhoud { grid-row: 2; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .9rem;
  padding: .75rem 1rem 1.1rem; }
.b-keuze { font-family: var(--kop-font); font-size: clamp(1.45rem, 6.6vw, 1.9rem); line-height: 1.16; letter-spacing: -.005em; }
.b-keuze > span { display: block; text-wrap: balance; }

.b-pijl { flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 1.5px solid currentColor; transition: background-color .35s, color .35s, border-color .35s, transform .35s var(--b-zacht); }
.b-pijl svg { width: 1.2rem; height: 1.2rem; transition: transform .35s var(--b-zacht); }
.b-vlak-date .b-pijl { color: var(--b-goud); }
.b-vlak-stap .b-pijl { color: var(--accent); }

/* Hover en focus: ingetogen. De pijl kleurt in, het teken beweegt een beetje. */
.b-vlak:focus-visible { outline: 3px solid var(--focus); outline-offset: -9px; border-radius: 1rem; }
.b-vlak-date:focus-visible { outline-color: var(--on-deep); }
@media (hover: hover) {
  .b-vlak:hover .b-pijl svg { transform: translateY(3px); }
  .b-vlak-date:hover .b-pijl { background: var(--b-goud); border-color: var(--b-goud); color: var(--deep); }
  .b-vlak-stap:hover .b-pijl { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  
  
}
.b-vlak:focus-visible .b-pijl svg { transform: translateY(3px); }
.b-vlak-date:focus-visible .b-pijl { background: var(--b-goud); border-color: var(--b-goud); color: var(--deep); }
.b-vlak-stap:focus-visible .b-pijl { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Naast elkaar vanaf tablet: de naad loopt van boven tot onder, de kop hangt eroverheen */
@media (min-width: 44em) {
  .b-start { grid-template-columns: var(--naad) 1fr; grid-template-rows: auto 1fr; transition: --naad .7s var(--b-zacht); }
  .b-start-kop { grid-column: 1 / -1; padding: clamp(1.75rem, 8.5svh, 5.25rem) 0 0; }
  .b-h1.eyebrow, .b-vraag { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; position: relative; }
  .b-h1 .b-l, .b-vraag .b-l { grid-column: 1; text-align: right; }
  .b-h1 .b-r, .b-vraag .b-r { grid-column: 2; }
  .b-h1.eyebrow { margin-bottom: clamp(.6rem, 2svh, 1.25rem); font-size: .72rem; letter-spacing: .13em; }
  .b-dots { color: var(--warm); }
  .b-h1 .b-l { padding-right: .85rem; }
  .b-h1 .b-r { padding-left: .85rem; color: var(--warm); }
  .b-punt { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-family: var(--serif); font-size: 4.2em; line-height: 0; letter-spacing: 0; }
  .b-vraag { font-size: var(--vraag-fs); line-height: 1.02; }
  .b-vraag .b-l { padding-right: .14em; }
  .b-vraag .b-r { padding-left: .14em; color: var(--accent); }
  :lang(en) .b-start { --vraag-fs: clamp(2.8rem, min(5.4vw, 9svh), 4.6rem); --uit-r: 4.7; --uit-l: 1.5; --boven-r: 9.6rem; --boven-l: 10.2rem; }

  .b-vlak-date, .b-vlak-stap { grid-row: 1 / 3; grid-template-rows: subgrid; }
  .b-vlak-date { grid-column: 1; }
  .b-vlak-stap { grid-column: 2; }
  .b-vlak-inhoud { justify-content: flex-start; gap: 0;
    padding: clamp(2rem, 8svh, 5rem) 0 clamp(2rem, 8svh, 5rem); }
  .b-vlak-date .b-vlak-inhoud { align-items: flex-end; text-align: right; padding-right: var(--binnen); padding-left: var(--buiten); }
  .b-vlak-stap .b-vlak-inhoud { align-items: flex-start; text-align: left; padding-left: var(--binnen); padding-right: var(--buiten); }
  .b-keuze { font-size: clamp(1.6rem, 3vw, 2.85rem); line-height: 1.17; }
  .b-pijl { margin-top: clamp(1.25rem, 4svh, 2.25rem); width: 3.3rem; height: 3.3rem; }

  
  

  /* Staande tablet: veel hoogte, dus de keuze komt meer in het midden en de tekens worden groter */
  @media (orientation: portrait) {
    .b-vlak-inhoud { justify-content: center; padding-bottom: min(22svh, 14rem); }
    
    
  }

  /* De keuzetekst schuift mee met de middenlijn; "Ik zoek…" blijft staan en valt dan helemaal in de aangewezen helft. */
  .b-start :is(.b-l, .b-r) { transition: color .5s; }
  .b-start:has(.b-vlak-date:focus-visible) { --naad: min(84%, max(calc(50% + var(--uit-r) * var(--vraag-fs)), calc(50% + var(--boven-r))) + 1.75rem); }
  .b-start:has(.b-vlak-stap:focus-visible) { --naad: max(16%, min(calc(50% - var(--uit-l) * var(--vraag-fs)), calc(50% - var(--boven-l))) - 1.75rem); }
  .b-start:has(.b-vlak-date:focus-visible) .b-vraag .b-l { color: var(--on-deep); }
  .b-start:has(.b-vlak-date:focus-visible) .b-vraag .b-r, .b-start:has(.b-vlak-date:focus-visible) .b-dots { color: var(--b-goud); }
  .b-start:has(.b-vlak-date:focus-visible) .b-h1 :is(.b-l, .b-r) { color: var(--b-goud); }
  .b-start:has(.b-vlak-stap:focus-visible) .b-vraag .b-l { color: var(--ink); }
  .b-start:has(.b-vlak-stap:focus-visible) .b-vraag .b-r { color: var(--accent); }
  .b-start:has(.b-vlak-stap:focus-visible) .b-h1 :is(.b-l, .b-r) { color: var(--warm); }
}
@media (min-width: 44em) and (hover: hover) {
  .b-start:has(.b-vlak-date:hover) { --naad: min(84%, max(calc(50% + var(--uit-r) * var(--vraag-fs)), calc(50% + var(--boven-r))) + 1.75rem); }
  .b-start:has(.b-vlak-stap:hover) { --naad: max(16%, min(calc(50% - var(--uit-l) * var(--vraag-fs)), calc(50% - var(--boven-l))) - 1.75rem); }
  .b-start:has(.b-vlak-date:hover) .b-vraag .b-l { color: var(--on-deep); }
  .b-start:has(.b-vlak-date:hover) .b-vraag .b-r, .b-start:has(.b-vlak-date:hover) .b-dots { color: var(--b-goud); }
  .b-start:has(.b-vlak-date:hover) .b-h1 :is(.b-l, .b-r) { color: var(--b-goud); }
  .b-start:has(.b-vlak-stap:hover) .b-vraag .b-l { color: var(--ink); }
  .b-start:has(.b-vlak-stap:hover) .b-vraag .b-r { color: var(--accent); }
  .b-start:has(.b-vlak-stap:hover) .b-h1 :is(.b-l, .b-r) { color: var(--warm); }
}
/* Zonder subgrid: de kop krijgt zelf de twee kleuren, de vlakken beginnen eronder */
@supports not (grid-template-rows: subgrid) {
  .b-vlak-date { grid-row: 2; grid-template-rows: 0 1fr; }
  .b-vlak-stap { grid-row: 3; }
  .b-start-kop { background: var(--deep); }
  @media (min-width: 44em) {
    .b-vlak-date, .b-vlak-stap { grid-row: 2; }
    .b-start-kop { background: linear-gradient(90deg, var(--deep) var(--naad), var(--band) var(--naad)); }
  }
}
/* ---------- Secties: elk precies één scherm, de keuze bepaalt de sfeer ---------- */
.b-sectie { position: relative; overflow: hidden; scroll-margin-top: var(--kop); display: flex; align-items: center;
  min-height: calc(100vh - var(--kop)); min-height: calc(100svh - var(--kop)); padding: clamp(1rem, 3.5svh, 3rem) 0; }
.b-sectie > .wrap-wide { position: relative; width: 100%; }
.b-donker { background: var(--deep); color: var(--on-deep); }
.b-licht { background: var(--band); }

.b-kop { max-width: 40rem; margin: 0 auto clamp(.9rem, 3.5svh, 2.5rem); text-align: center; }
.b-kop::before { content: ""; display: none; width: 1px; height: clamp(1.5rem, 5svh, 3rem); margin: 0 auto 1rem; background: var(--deco); transform-origin: top; }
.b-kop .eyebrow { justify-content: center; margin-bottom: .5rem; }
.b-kop .eyebrow::after { content: ""; width: 2rem; height: 1px; background: currentColor; }
.b-kop h2 { margin: 0 0 .6rem; font-size: clamp(2rem, min(5vw, 7svh), 3.2rem); }

.b-donker .eyebrow { color: var(--b-goud); }
.b-donker h2 { color: var(--on-deep); }
.b-donker h2 em { color: var(--deco); }

.b-licht .b-kop::before { background: var(--accent); opacity: .55; }
@media (min-height: 46rem) and (min-width: 44em) { .b-kop::before { display: block; } }
@media (max-width: 30em) {
  .b-kop .eyebrow { letter-spacing: .12em; text-wrap: balance; }
  .b-kop .eyebrow::before, .b-kop .eyebrow::after { display: none; }
}

/* Tegels: de hele tegel is een link naar de juiste plek */
.b-tegels { list-style: none; padding: 0; margin: 0 auto; max-width: 66rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.b-tegel { position: relative; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: .8rem .85rem 1.9rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: transform .3s var(--b-zacht), box-shadow .3s, border-color .3s, background-color .3s; }
.b-tegel:last-child:nth-child(odd) { grid-column: 1 / -1; }
.b-donker .b-tegel { background: color-mix(in srgb, var(--on-deep) 5%, transparent); border-color: var(--b-haar); }
.b-tegel-ico { width: 1.9rem; height: 1.9rem; color: var(--warm); stroke-width: 1.4; }

.b-donker .b-tegel-ico { color: var(--deco); }
.b-tegel h3 { margin: 0; font-size: 1.08rem; line-height: 1.2; }
.b-tegel h3 a { color: inherit; text-decoration: none; }
.b-tegel h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.b-tegel h3 a:focus-visible { outline: none; }
.b-tegel:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.b-donker .b-tegel:has(a:focus-visible) { outline-color: var(--on-deep); }
.b-tegel p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.b-donker .b-tegel p { color: var(--on-deep-muted); }
.b-donker .b-tegel h3 a { color: var(--on-deep); }
.b-tegel::after { content: "\2192"; position: absolute; right: .85rem; bottom: .55rem; color: var(--accent); font-size: 1.05rem; transition: transform .3s var(--b-zacht); }
.b-donker .b-tegel::after { color: var(--b-goud); }
@media (hover: hover) {
  .b-tegel:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--deco); }
  .b-donker .b-tegel:hover { box-shadow: none; background: color-mix(in srgb, var(--on-deep) 9%, transparent); }
  .b-tegel:hover::after { transform: translateX(4px); }
}
/* Smalle telefoon: één kolom met compacte rijen, zodat de sectie op één scherm past */
@media (max-width: 30em) {
  .b-tegel-ico { display: none; }
  .b-tegels { grid-template-columns: 1fr; gap: .45rem; }
  .b-kop { margin-bottom: .7rem; }
  .b-kop h2 { font-size: 1.9rem; margin-bottom: .4rem; }
  
  .b-tegel { gap: .1rem; padding: .5rem 2.6rem .5rem .9rem; }
  .b-tegel h3 { font-size: 1.04rem; }
  .b-tegel p { font-size: .84rem; line-height: 1.4; }
  .b-tegel::after { top: 50%; bottom: auto; margin-top: -.7rem; }
}
/* Korte telefoon (bijvoorbeeld 360×740): nog iets compacter */
@media (max-width: 30em) and (max-height: 52rem) {
  .b-sectie { padding: .6rem 0; }
  .b-kop .eyebrow { display: none; }
  .b-kop h2 { font-size: 1.7rem; }
  .b-tegels { gap: .35rem; }
  .b-tegel { padding-block: .4rem; }
  .b-tegel p { font-size: .8rem; line-height: 1.33; }
}
@media (min-width: 44em) {
  .b-tegels { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .b-tegels-4 { grid-template-columns: repeat(4, 1fr); }
  
  
  
  .b-tegel:last-child:nth-child(odd) { grid-column: auto; }
  
  .b-tegel { gap: .45rem; padding: clamp(1rem, 2.6svh, 1.6rem) 1.4rem clamp(2rem, 4svh, 2.6rem); }
  .b-tegel-ico { width: 2.3rem; height: 2.3rem; }
  
  .b-tegel h3 { font-size: 1.3rem; }
  .b-tegel p { font-size: .96rem; line-height: 1.5; }
  .b-tegel::after { right: 1.1rem; bottom: .8rem; }
}

/* ---------- Aankomst: kort en gestaffeld, eindtoestand is altijd zichtbaar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .b-wacht .b-anim { opacity: 0; }
  .b-aankomst .b-anim, html:not(.js) .b-sectie:target .b-anim { animation: b-op .55s var(--b-zacht) both; animation-delay: calc(var(--i, 0) * 55ms); }
  .b-aankomst .b-kop::before, html:not(.js) .b-sectie:target .b-kop::before { animation: b-lijn .6s var(--b-zacht) both; }
}
@keyframes b-op { from { opacity: 0; transform: translateY(18px); } }
@keyframes b-lijn { from { transform: scaleY(0); } }

.link-rij { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin-top: 2.5rem; }

/* Homepage: de menubalk is er niet bij de keuze en komt pas tevoorschijn als je de start verlaat (zie main.js). Zonder JS blijft hij gewoon staan. */
html.b-home .site-header { position: fixed; top: 0; left: 0; right: 0; transition: transform .45s var(--b-zacht), visibility 0s; }
html.b-home.nav-weg .site-header { transform: translateY(-101%); transition: transform .45s var(--b-zacht); }
html.b-home.nav-weg .site-header:focus-within { transform: none; }
html.b-home .b-start { min-height: min(100vh, calc(64rem + var(--kop))); min-height: min(100svh, calc(64rem + var(--kop))); }
@media (prefers-reduced-motion: reduce) { html.b-home .site-header { transition: none; } }

/* Ankers (tegel op de homepage, menu-item): de vaste kop mag de kop van het stuk niet afdekken */
main [id] { scroll-margin-top: calc(var(--kop) + 1.25rem); }

/* ---------- Pagina's in schermvullende stukken (Date en intimiteit, Stap voor stap) ---------- */
html:has(.sch) { scroll-snap-type: y proximity; }
.sch { position: relative; display: flex; align-items: center; scroll-snap-align: start;
  min-height: calc(100vh - var(--kop)); min-height: calc(100svh - var(--kop)); padding: clamp(1.5rem, 6svh, 4.5rem) 0 clamp(3.5rem, 9svh, 5.5rem); }
main .sch[id] { scroll-margin-top: var(--kop); }
.sch-inhoud { width: 100%; max-width: 40rem; margin: 0 auto; padding: 0 1.25rem; }
.sch h1, .sch h2 { margin: 0 0 1rem; font-size: clamp(2.1rem, min(5.6vw, 8svh), 3.4rem); }
.sch h1 { font-size: clamp(2.4rem, min(7vw, 10svh), 4.2rem); }
.sch p { font-size: clamp(1rem, 2.5svh, 1.2rem); line-height: 1.6; }
.sch-lead { font-size: clamp(1.1rem, 3svh, 1.4rem) !important; }
.sch-ico { width: 2.6rem; height: 2.6rem; margin-bottom: .8rem; color: var(--warm); stroke-width: 1.3; }
.sch-stappen { margin: 1.2rem 0 1rem; padding-left: 1.4rem; }
.sch-stappen li { margin-bottom: .5rem; font-size: clamp(.95rem, 2.3svh, 1.08rem); line-height: 1.5; }
.sch-extra { font-size: clamp(.9rem, 2.1svh, 1rem) !important; color: var(--muted); }
.sch .actions { margin: 1.4rem 0 0; }
.sch-volgende { position: absolute; left: 50%; bottom: clamp(.7rem, 2.5svh, 1.5rem); translate: -50% 0; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 1.5px solid currentColor; border-radius: 50%; color: var(--accent); opacity: .8; transition: opacity .2s, transform .3s; }
.sch-volgende svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sch-volgende:hover { opacity: 1; transform: translateY(3px); }
.sch-donker { background: var(--deep); color: var(--on-deep); }
.sch-donker:nth-of-type(even) { background: color-mix(in srgb, var(--deep) 93%, var(--on-deep)); }
.sch-donker h1, .sch-donker h2 { color: var(--on-deep); }
.sch-donker p, .sch-donker .sch-stappen li { color: var(--on-deep-muted); }
.sch-donker .sch-ico, .sch-donker .sch-volgende { color: var(--b-goud); }
.sch-donker a:not(.button):not(.sch-volgende) { color: var(--on-deep); }
.sch-donker :focus-visible { outline-color: var(--on-deep); }
.sch-licht { background: var(--band); }
.sch-licht:nth-of-type(even) { background: var(--bg); }
.sch-licht .sch-stappen li { color: var(--ink); }
@media (max-width: 30em) and (max-height: 52rem) { .sch p, .sch-stappen li { line-height: 1.45; } .sch-ico { display: none; } }

/* ---------- Gewone pagina's: ruimer, met grotere titels (BDSM, Hoe het werkt, Tarieven, enz.) ---------- */
main > .wrap { max-width: 48rem; }
main > .wrap:first-child { padding-top: clamp(3rem, 9svh, 6rem); padding-bottom: 1.5rem; }
main > .wrap h1 { font-size: clamp(2.8rem, 7.2vw, 4.7rem); line-height: 1.04; letter-spacing: -.015em; margin-bottom: 1.6rem; }
main > .wrap > h1::after { width: 4.5rem; margin-top: 1.5rem; }
main > .wrap .lead { font-size: clamp(1.2rem, 2.6vw, 1.4rem); line-height: 1.55; max-width: 40rem; }
main > .wrap h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; margin: clamp(3.5rem, 8vw, 5rem) 0 1.2rem; }
main > .wrap h3 { font-size: 1.45rem; margin-top: 2.25rem; }
main > .wrap p, main > .wrap li { line-height: 1.75; }
main > .wrap ul:not([class]) > li, main > .wrap ol > li { margin-bottom: .7rem; }

/* ---------- Schermvullend: elk stuk begint bovenaan het scherm (de kop ligt eroverheen) en je klikt er vast op ---------- */
html:has(.b-start), html:has(.sch) { scroll-snap-type: y mandatory; }
.b-start, .b-sectie, .sch { scroll-snap-align: start; }
.cta, .site-footer { scroll-snap-align: end; }
main .b-sectie[id] { scroll-margin-top: 0; }
.b-sectie { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--kop) + clamp(1rem, 3.5svh, 3rem)); }
@media (max-width: 30em) and (max-height: 52rem) { .b-sectie { padding-top: calc(var(--kop) + .6rem); } }

/* Taalknop op de start van de homepage (de menubalk is daar verborgen) */
.b-taal { position: absolute; top: clamp(.75rem, 2.5svh, 1.5rem); right: clamp(.75rem, 2.5vw, 1.75rem); z-index: 3; }
.b-taal .taal { order: 0; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (max-width: 43.99em) { .b-taal .taal { border-color: var(--b-haar); background: transparent; } .b-taal .taal a { color: var(--on-deep-muted); } .b-taal .taal a[aria-current] { background: var(--b-goud); color: var(--deep); } }

/* Compactere schermvullende stukken op lage of smalle schermen, zodat elk stuk op één scherm past */
@media (max-height: 52rem), (max-width: 30em) {
  .sch { padding-top: .9rem; padding-bottom: 3.4rem; }
  .sch h1 { margin-bottom: .7rem; }
  .sch h2 { margin-bottom: .6rem; font-size: clamp(1.8rem, min(5vw, 7svh), 2.6rem); }
  .sch-ico { display: none; }
  .sch-stappen { margin: .7rem 0 .6rem; }
  .sch-stappen li { margin-bottom: .35rem; line-height: 1.42; }
  .sch p { margin-bottom: .7rem; }
  .sch .actions { margin-top: .9rem; gap: .5rem; }
}
@media (max-width: 30em) {
  .sch p, .sch-stappen li { font-size: .93rem; }
  .sch-extra { font-size: .85rem !important; }
  .sch .actions .button { padding: .6rem 1.1rem; font-size: .92rem; }
}
@media (max-height: 52rem) and (min-width: 44em) { .b-tegels { gap: .7rem; } .b-tegel { padding-top: .6rem; padding-bottom: 1.5rem; } .b-kop { margin-bottom: 1rem; } .b-sectie { padding-bottom: 1rem; } }
@media (max-height: 44rem) { .sch p, .sch-stappen li { font-size: .88rem; line-height: 1.38; } .sch h2 { font-size: 1.65rem; } .sch-extra { font-size: .8rem !important; } .sch-stappen { margin: .5rem 0; } .sch { padding-bottom: 3rem; } }

/* Telefoon: de taalknop staat bovenaan rechts, dus de bovenregel van de start begint eronder */
@media (max-width: 43.99em) { .b-start-kop { padding-top: 3.6rem; } }

/* Formulier: verborgen veld tegen spam-bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }