/* ==========================================================================
   verkoopgemak.be — stylesheet
   Handgeschreven. Geen framework, geen build-stap.
   Volgorde: lettertypes · tokens · reset · typografie · bouwstenen · secties · footer
   ========================================================================== */

/* ---------------------------------------------------------- lettertypes --
   Zelf gehost (geen Google Fonts-verzoeken), SIL Open Font License 1.1.
   Variabele bestanden: één bestand per familie en subset, alle gewichten.
   Zie fonts/LICENSE-note.md. */
@font-face{
  font-family:"Red Hat Display";font-style:normal;font-weight:700 900;font-display:swap;
  src:url("fonts/red-hat-display-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Red Hat Display";font-style:normal;font-weight:700 900;font-display:swap;
  src:url("fonts/red-hat-display-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Red Hat Text";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/red-hat-text-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Red Hat Text";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/red-hat-text-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* kleur */
  --sand:        #F4ECE3;
  --sand-deep:   #EADFD2;
  --sand-line:   #DCCDB9;
  --paper:       #FFFFFF;
  --ink:         #23304A;
  --ink-deep:    #1A2437;
  --muted:       #46526B;
  --faint:       #6E7890;
  --coral:       #D9442F;
  --coral-hover: #B8351F;
  --coral-ink:   #A83221;   /* koraal als tekstkleur op zand/wit */
  --blue:        #2B63C0;
  --blue-deep:   #24539F;
  --teal:        #16806E;
  --line:        #DFE3EA;   /* lijn op wit */
  --line-sand:   #DCCDB9;   /* lijn op zand */
  --numeral:     #8E7B63;   /* stapnummers */
  --tint:        #FBF9F7;   /* kaart op een witte ondergrond */

  /* Twee waarden die per sectie omslaan, zodat kaarten en lijnen leesbaar
     blijven op zowel zand als wit. Zie .sec--sand / .sec--paper. */
  --card: var(--paper);
  --rule: var(--line);

  /* typografie */
  --font-display: "Red Hat Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Red Hat Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --t-xs:   0.8125rem;   /* 13 */
  --t-sm:   0.90625rem;  /* 14.5 */
  --t-base: 1.0625rem;   /* 17 */
  --t-md:   1.1875rem;   /* 19 */
  --t-lg:   clamp(1.25rem, 1.6vw, 1.4375rem);
  --t-h3:   clamp(1.3125rem, 1.9vw, 1.5625rem);
  --t-h2:   clamp(1.75rem, 3.3vw, 2.625rem);
  --t-h1:   clamp(2rem, 4.4vw, 3.5rem);   /* min zo gekozen dat de eerste zin op 360px op één regel past */
  --t-num:  clamp(4.75rem, 11vw, 9.5rem);

  /* ruimte */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;
  --s9: 6rem;     --s10: 8rem;

  --gutter: clamp(1rem, 4.5vw, 3rem);
  --wrap: 72rem;              /* 1152px */
  --sec-pad: clamp(3.5rem, 7.5vw, 7rem);
  --bar-h: 3.875rem;          /* hoogte sticky balk */

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 1rem)}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:var(--t-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0}
p{margin:0}
button{font:inherit;color:inherit}

a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.navtoggle:focus-visible + .navtoggle__label{
  outline:3px solid var(--ink);
  outline-offset:2px;
  border-radius:2px;
}
.band a:focus-visible,.footer a:focus-visible,.btn--coral:focus-visible{
  outline-color:var(--paper);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--sand);
  padding:var(--s3) var(--s5);font-weight:700;text-decoration:none;
}
.skip:focus{left:0}

/* ---------------------------------------------------------- typografie -- */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.035em;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-0.025em}

.lede{font-size:var(--t-lg);line-height:1.5;color:var(--muted);max-width:34ch}

.eyebrow{
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:var(--s3);
}

.smallprint{font-size:var(--t-sm);color:var(--muted);max-width:62ch}

.num{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- layout --- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.sec{padding-block:var(--sec-pad)}
.sec--sand{background:var(--sand); --card:var(--paper); --rule:var(--sand-line)}
.sec--paper{background:var(--paper); --card:var(--tint); --rule:var(--line)}

.sec__head{margin-bottom:var(--s7);max-width:30ch}
.sec__head h2{max-width:20ch}
.sec__intro{font-size:var(--t-md);color:var(--muted);max-width:52ch;margin-bottom:var(--s6)}

@media (min-width:64rem){
  .sec--split{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:var(--s8);align-items:start}
  .sec--split .sec__head{margin-bottom:0;position:sticky;top:calc(var(--bar-h) + 2.5rem)}
  /* in de smalle kolom een maat kleiner, anders valt de kop uiteen in losse woorden */
  .sec--split .sec__head h2{font-size:clamp(1.625rem,2.6vw,2.125rem)}
}

/* --------------------------------------------------------------- merk --- */
.brand{
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.3125rem;
  letter-spacing:-0.045em;
  text-transform:lowercase;
  text-decoration:none;
  white-space:nowrap;
}
.brand span::after{
  content:"";display:inline-block;
  width:0.4375rem;height:0.4375rem;border-radius:50%;
  background:var(--coral);margin-left:0.1875rem;vertical-align:0.05em;
}

/* ------------------------------------------------------------ knoppen --- */
.btn{
  display:inline-flex;align-items:center;gap:0.4em;
  font-family:var(--font-text);
  font-weight:700;
  font-size:1rem;
  line-height:1.2;
  padding:0.8125rem 1.375rem;
  border:0;border-radius:var(--r-pill);
  text-decoration:none;
  cursor:pointer;
  text-align:center;
}
.btn--coral{background:var(--coral);color:#fff}
.btn--coral:hover{background:var(--coral-hover)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--sand)}
.btn--sand{background:var(--sand);color:var(--ink)}
.btn--sand:hover{background:#fff}
.btn--sm{font-size:0.9375rem;padding:0.5625rem 1rem}
.btn--lg{font-size:1.0625rem;padding:0.9375rem 1.75rem}
.btn__meta{font-weight:500;opacity:.85}
@media (prefers-reduced-motion: no-preference){
  .btn{transition:background-color .15s ease, color .15s ease}
}

/* ------------------------------------------------------- sticky balk ---- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--sand);
  border-bottom:1px solid var(--sand-line);
}
.topbar__inner{
  display:flex;align-items:center;gap:var(--s3);
  min-height:var(--bar-h);
  flex-wrap:wrap;
}
.topbar .brand{margin-right:auto;order:0}
.navtoggle__label{order:1}
.topbar__cta{order:2}
.topbar__nav{order:3}   /* klapt onder de balk open, de knop blijft bovenaan staan */

.topbar__nav{display:none;gap:var(--s5);font-size:var(--t-sm);font-weight:500}
.topbar__nav a{text-decoration:none;padding-block:0.375rem}
.topbar__nav a:hover{text-decoration:underline;text-underline-offset:3px}
/* geen telefoonnummer in de testfase: de link opent het venster op stap 4 */
.topbar__plan{font-weight:700;color:var(--coral-ink)}

.navtoggle{position:absolute;opacity:0;width:1px;height:1px}
.navtoggle__label{
  display:inline-flex;align-items:center;gap:0.4375rem;
  font-size:var(--t-sm);font-weight:700;cursor:pointer;
  padding:0.375rem 0.5rem;
}
.navtoggle__bars{
  display:block;width:1.0625rem;height:2px;background:var(--ink);
  position:relative;
}
.navtoggle__bars::before,.navtoggle__bars::after{
  content:"";position:absolute;left:0;width:1.0625rem;height:2px;background:var(--ink);
}
.navtoggle__bars::before{top:-5px}
.navtoggle__bars::after{top:5px}
.navtoggle:checked ~ .topbar__nav{
  display:flex;flex-direction:column;gap:0;
  flex-basis:100%;
  border-top:1px solid var(--sand-line);
  padding-block:var(--s2) var(--s4);
}
.navtoggle:checked ~ .topbar__nav a{padding-block:0.625rem}

@media (min-width:56rem){
  .navtoggle,.navtoggle__label{display:none}
  .topbar__nav{display:flex;align-items:center;order:1}
  .topbar__cta{order:2}
}
/* op een smalle telefoon moeten merk, menu en knop op één regel passen */
@media (max-width:27rem){
  .topbar__inner{gap:0.5rem}
  .topbar .brand{font-size:1.125rem}
  .navtoggle__label{padding:0.375rem 0.25rem;gap:0.375rem}
  .topbar__cta{padding:0.5rem 0.875rem;font-size:0.875rem}
}
@media (max-width:24rem){
  .topbar .brand{font-size:1.0625rem}
  .topbar__cta{padding:0.5rem 0.75rem;font-size:0.8125rem}
}

/* --------------------------------------------------------------- hero --- */
.hero{
  background:var(--sand);
  padding-block:clamp(2.5rem,5.5vw,4.75rem) clamp(3rem,6vw,5.5rem);
  border-bottom:1px solid var(--sand-line);
}
.hero__grid{display:grid;gap:clamp(2.25rem,4.5vw,4rem);align-items:start}
@media (min-width:62rem){
  /* de kolom met de check blijft smal genoeg zodat
     "Verkoop je woning zelf." op elke schermbreedte op één regel past —
     anders blijft "zelf." alleen staan */
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,23rem)}
  .hero__copy{padding-top:var(--s5)}
}
@media (min-width:78rem){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,26rem)}
}
.hero h1{margin-bottom:var(--s5)}

/* de compacte checkkaart, bovenaan gelijk met de tekst */
.hero__visual{position:relative;min-width:0}
@media (min-width:62rem){
  .hero__visual .checkcard{box-shadow:0 12px 32px rgba(26,36,55,0.14)}
}

/* Mobiel: kop → knop → checkkaart → strip. De tekstkolom laat haar kinderen
   los in hetzelfde raster, zodat de volgorde klopt zonder dubbele opmaak. */
@media (max-width:61.9375rem){
  .hero__grid{gap:var(--s5)}
  .hero__copy{display:contents}
  .hero h1{order:1;margin-bottom:0}
  .hero .lede{order:2}
  .hero__cta{order:3;margin-top:0}
  .hero__visual{order:4}
  .hero__alt{order:5;margin-top:0}
  .hero__facts{order:6;margin-top:0}
}
.hero__cta{margin-top:var(--s6)}
.hero__alt{margin-top:var(--s4);font-size:var(--t-sm);color:var(--muted)}
.hero__alt a{color:var(--coral-ink);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.hero__facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin-top:var(--s7);padding-top:var(--s4);
  border-top:1px solid var(--sand-line);
  font-size:var(--t-sm);font-weight:700;
}
.hero__facts li{display:flex;align-items:center;gap:0.5rem}
.hero__facts li::before{
  content:"";width:0.375rem;height:0.375rem;border-radius:50%;background:var(--coral);flex:none;
}

/* ---------------------------------------------------- de gratis check --- */
.checkcard{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.25rem,3vw,1.75rem);
  scroll-margin-top:calc(var(--bar-h) + 1.5rem);
}
.checkcard__head{
  padding-bottom:var(--s4);margin-bottom:var(--s5);
  border-bottom:1px solid var(--line);
}
.checkcard__title{font-size:var(--t-lg);letter-spacing:-0.03em}
.checkcard__step{
  margin-top:0.5rem;font-size:var(--t-xs);font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);
}
.checkcard__noscript{margin-top:var(--s4);font-size:var(--t-sm);color:var(--muted)}

/* In de herokaart blijft de plaats voor een foutmelding altijd gereserveerd:
   zo verandert de kaart nooit van hoogte, ook niet als er een melding komt. */
#check .field__err,
#check .field__err[hidden]{display:block !important;min-height:1.3rem}

/* ------------------------------------------- de check in een venster ---- */
.check-open{overflow:hidden}

.checkdlg{
  /* vaste bovenrand: het venster groeit enkel naar onder, de pagina erachter beweegt nooit */
  width:min(40rem,92vw);
  height:fit-content;
  max-width:none;max-height:min(44rem,88vh);
  margin:6vh auto auto;
  padding:0;border:0;border-radius:var(--r-lg);
  background:var(--paper);color:var(--ink);
  box-shadow:0 24px 64px rgba(26,36,55,0.3);
  overflow:hidden;
}
.checkdlg::backdrop{background:rgba(26,36,55,0.55)}
.checkdlg__inner{display:flex;flex-direction:column;max-height:min(44rem,88vh);min-height:0}
.checkdlg__head{
  display:flex;align-items:flex-start;gap:var(--s4);
  padding:clamp(1.25rem,3vw,1.75rem);
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.checkdlg__heading{min-width:0}
.checkdlg__body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:clamp(1.25rem,3vw,1.75rem);
  -webkit-overflow-scrolling:touch;
}
.checkdlg__close{
  flex:none;margin-left:auto;
  width:2.5rem;height:2.5rem;padding:0;
  background:transparent;border:1.5px solid var(--line);border-radius:50%;
  cursor:pointer;position:relative;
}
.checkdlg__close:hover{background:var(--tint)}
.checkdlg__close span,
.checkdlg__close span::after{
  position:absolute;left:50%;top:50%;
  width:0.875rem;height:2px;background:var(--ink);
  content:"";
}
.checkdlg__close span{transform:translate(-50%,-50%) rotate(45deg)}
.checkdlg__close span::after{left:0;top:0;transform:rotate(90deg)}

@media (max-width:39.9375rem){
  .checkdlg{
    width:100vw;max-width:100vw;
    height:100vh;height:100dvh;max-height:none;
    margin:0;border-radius:0;
  }
  .checkdlg__inner{height:100%;max-height:none}
  .checkdlg__head{position:sticky;top:0;z-index:1}
}

[hidden]{display:none !important}
.step{display:flex;flex-direction:column;gap:var(--s4)}
.step__intro{font-size:var(--t-sm);color:var(--muted)}
.step__nav{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
.step__nav .btn{flex:1 1 auto;justify-content:center}
.step__nav .btn--ghost{flex:0 1 auto}

.field{display:flex;flex-direction:column;gap:0.375rem;min-width:0}
.field-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,9rem);gap:var(--s4)}
@media (max-width:26rem){ .field-row{grid-template-columns:minmax(0,1fr)} }

label{font-size:var(--t-sm);font-weight:700}
.field__opt{font-weight:400;color:var(--faint)}
.field__hint{font-size:var(--t-xs);color:var(--faint)}
.field__err{font-size:var(--t-xs);font-weight:700;color:var(--coral-ink)}

input[type=text],input[type=email],input[type=tel],input[type=number],select{
  font-family:var(--font-text);font-size:var(--t-base);
  width:100%;padding:0.625rem 0.75rem;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);
}
input::placeholder{color:#9AA2B4}
select{
  appearance:none;-webkit-appearance:none;
  padding-right:2rem;
  /* pijltje als inline-svg: zelfde vorm als het chevron bij de vragen */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.25 1.5 6 6.25 10.75 1.5' fill='none' stroke='%2323304A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:calc(100% - 12px) center;
  background-size:12px 8px;
  background-repeat:no-repeat;
}
input[aria-invalid="true"]{border-color:var(--coral)}

.field__money{display:flex;align-items:center;gap:0.5rem}
.field__money > span{font-weight:700;color:var(--muted)}

/* min-width:0 — een fieldset is standaard minstens zo breed als zijn inhoud;
   zonder dit duwt de strook met momenten het venster breder dan het scherm */
.fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:0.625rem;min-width:0;min-inline-size:0}
.fieldset legend{
  font-size:var(--t-sm);font-weight:700;padding:0;margin-bottom:0.625rem;
}
.check-opt{
  display:flex;align-items:flex-start;gap:0.625rem;
  font-weight:400;font-size:var(--t-base);cursor:pointer;
}
.check-opt input{
  width:1.25rem;height:1.25rem;margin:0.125rem 0 0;flex:none;
  accent-color:var(--coral);
}
.check-opt--consent{font-size:var(--t-sm);color:var(--muted);margin-top:var(--s2)}
.check-opt--consent a{color:var(--coral-ink);text-underline-offset:3px}

/* resultaat */
#result:focus-visible,#done:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.res__lead{font-size:var(--t-sm);color:var(--muted)}
.res__title{font-size:var(--t-md);font-family:var(--font-display);font-weight:700;letter-spacing:-0.025em;margin-bottom:0.5rem}
.res__list{list-style:none;display:flex;flex-direction:column}
.res__list li{
  display:flex;align-items:flex-start;gap:0.625rem;
  padding-block:0.5625rem;border-top:1px solid var(--line);
  font-size:var(--t-sm);
}
.res__list li:first-child{border-top:0}
.res__name{flex:1 1 auto;font-weight:500}
.res__price{font-family:var(--font-display);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.res__price--have{color:var(--teal);font-family:var(--font-text);font-weight:500;font-size:var(--t-xs)}
.res__price--na{color:var(--faint);font-family:var(--font-text);font-weight:500;font-size:var(--t-xs)}
.res__sub{display:block;font-size:var(--t-xs);color:var(--faint);font-weight:400}

.res__total{
  background:var(--sand);border-radius:var(--r-md);
  padding:var(--s4);margin-top:var(--s2);
}
.res__total dl{margin:0;display:flex;flex-direction:column;gap:0.375rem}
.res__totalrow{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.res__totalrow dt{font-size:var(--t-sm);min-width:0}
.res__totalrow dd{
  margin:0;font-family:var(--font-display);font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.res__totalrow--big dd{font-size:var(--t-md)}
.res__save{
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--sand-line);
  font-size:var(--t-sm);
}
.res__save strong{color:var(--teal);font-family:var(--font-display);font-size:var(--t-md);white-space:nowrap}
.res__disclaimer{font-size:var(--t-xs);color:var(--faint)}

.done__title{font-family:var(--font-display);font-weight:700;font-size:var(--t-lg);letter-spacing:-0.03em;margin-bottom:0.5rem}
.done__when{font-family:var(--font-display);font-weight:700;font-size:var(--t-md);line-height:1.35;letter-spacing:-0.02em;margin-bottom:0.5rem;max-width:34ch}
.done__text{color:var(--muted);font-size:var(--t-sm)}

.nowrap{white-space:nowrap}

/* alleen voor schermlezers */
.vh{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------------ stap 4: kanaal en moment ---- */
/* twee grote keuzetegels: onder elkaar op een telefoon, naast elkaar daarboven */
.tiles{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr)}
@media (min-width:40rem){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tile{
  display:flex;align-items:flex-start;gap:0.75rem;
  padding:0.875rem var(--s4);
  border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);cursor:pointer;font-weight:400;
}
.tile:hover{border-color:var(--faint)}
.tile input{width:1.25rem;height:1.25rem;margin:0.1875rem 0 0;flex:none;accent-color:var(--ink)}
.tile__text{display:flex;flex-direction:column;gap:0.125rem;min-width:0}
.tile__title{font-weight:700;font-size:var(--t-base);line-height:1.3}
.tile__hint{font-size:var(--t-xs);color:var(--muted);line-height:1.4}
.tile:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--tint)}

/* momenten: één rij per dag — de dag links, de uren rechts. Op een telefoon
   staan de uren in twee rijen van drie (voormiddag · avond), vanaf 48rem op
   één rij van zes. Niets schuift opzij: geen horizontale scroll. */
.slots__days{display:flex;flex-direction:column;gap:var(--s2)}
.slots__tz{font-size:var(--t-xs);color:var(--faint);margin-top:-0.25rem}
.slotday{
  display:grid;grid-template-columns:4.25rem minmax(0,1fr);align-items:start;gap:0.5rem;
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:0.5rem;background:var(--paper);
}
.slotday__label{
  font-size:var(--t-sm);font-weight:700;line-height:1.25;
  padding-top:0.5rem;
}
.slotday__label span{display:block;font-weight:400;color:var(--muted)}
.slotday__pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.375rem}
@media (min-width:48rem){
  .slotday{grid-template-columns:5.25rem minmax(0,1fr);align-items:center}
  .slotday__label{padding-top:0}
  .slotday__pills{grid-template-columns:repeat(6,minmax(0,1fr))}
}
.pill{position:relative;display:block;cursor:pointer;font-weight:400}
.pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pill__text{
  display:block;text-align:center;
  padding:0.5625rem 0.125rem;
  border:1.5px solid var(--line);border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:700;font-size:var(--t-base);
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.pill:hover .pill__text{border-color:var(--ink)}
.pill input:checked + .pill__text{background:var(--ink);border-color:var(--ink);color:#fff}
.pill input:focus-visible + .pill__text{outline:3px solid var(--ink);outline-offset:2px}
.slots__days.is-off{opacity:0.45}
.slots__days.is-off .pill,.slots__days.is-off .pill input{cursor:not-allowed}
.slots__days.is-off .pill:hover .pill__text{border-color:var(--line)}
.slots .field__err{margin-top:0.25rem}
.check-opt--escape{font-size:var(--t-sm);color:var(--muted);margin-top:calc(var(--s2) * -1)}
.done__rule{margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--faint)}

/* ------------------------------------------------------- het verschil --- */
.versus{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s7) var(--s8);align-items:start;
}
.versus__col h3{font-size:var(--t-md);letter-spacing:-0.02em;margin:var(--s3) 0 var(--s2)}
.numeral{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--t-num);line-height:0.82;letter-spacing:-0.055em;
}
.numeral--teal{color:var(--teal)}
.numeral--blue{color:var(--blue)}
.plain{list-style:none;color:var(--muted);font-size:var(--t-sm);display:flex;flex-direction:column;gap:0.375rem}
.plain li{padding-left:0}
/* de brug tussen de cijfers en de rekenmodule */
.pullquote{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.35rem,2.6vw,1.85rem);
  line-height:1.16;letter-spacing:-0.03em;
  color:var(--ink);max-width:34ch;
  margin-block:var(--s7);
}
@media (max-width:42rem){
  .versus{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .versus__col + .versus__col{padding-top:var(--s5);border-top:1px solid var(--rule)}
  .pullquote{margin-block:var(--s7)}
}

/* ------------------------------------------------------- rekenmodule ---- */
.calc{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.25rem,3vw,2rem);
  display:grid;gap:var(--s6);
}
@media (min-width:52rem){
  .calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start}
  .calc__head{grid-column:1 / -1}
}
.calc__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s4);
  border-bottom:1px solid var(--line);padding-bottom:var(--s4)}
.calc__head h3{font-size:var(--t-lg)}
.calc__label{
  font-size:var(--t-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);
}
.calc__input label{display:block;margin-bottom:0.5rem}
.field__money--calc input{font-family:var(--font-display);font-weight:700;font-size:var(--t-md)}
.calc__minmax{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--faint);margin-top:0.25rem}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;margin:var(--s5) 0 0;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--line);border-radius:2px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:1.625rem;height:1.625rem;margin-top:-0.6875rem;
  border:0;border-radius:50%;background:var(--coral);
}
input[type=range]::-moz-range-track{height:4px;background:var(--line);border-radius:2px}
input[type=range]::-moz-range-thumb{width:1.625rem;height:1.625rem;border:0;border-radius:50%;background:var(--coral)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink)}

.calc__row{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding-block:0.6875rem;border-top:1px solid var(--line);
}
.calc__row:first-child{border-top:0;padding-top:0}
.calc__key{font-size:var(--t-sm);color:var(--muted)}
.calc__val{font-family:var(--font-display);font-weight:700;font-size:var(--t-md);font-variant-numeric:tabular-nums;white-space:nowrap}
.calc__val--blue{color:var(--blue-deep)}
.calc__val--teal{color:var(--teal)}
.calc__row--total{border-top:2px solid var(--ink)}
.calc__row--total .calc__key{color:var(--ink);font-weight:700}
.calc__row--total .calc__val{font-size:clamp(1.375rem,2.4vw,1.75rem)}
.calc__disclaimer{font-size:var(--t-xs);color:var(--faint);margin-top:var(--s3)}

/* -------------------------------------------------------- wie doet wat -- */
.split2{display:grid;gap:var(--s7)}
@media (min-width:44rem){ .split2{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s8)} }
.task__who{
  font-size:var(--t-md);letter-spacing:-0.02em;
  padding-bottom:var(--s3);margin-bottom:var(--s4);
  border-bottom:2px solid var(--ink);
}
.ticks{list-style:none;display:flex;flex-direction:column;gap:var(--s4)}
.ticks li{position:relative;padding-left:1.75rem;color:var(--muted);font-size:var(--t-sm)}
.ticks li::before{
  content:"";position:absolute;left:0;top:0.5rem;
  width:0.5rem;height:0.5rem;border-radius:50%;
}
.ticks--ink li::before{background:var(--ink)}
.ticks--coral li::before{background:var(--coral)}

/* foto bij "Wie doet wat" — tijdelijk beeld, zie img/CREDITS.md */
.photoband{margin:var(--s8) 0 0}
.photoband img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-lg);background:var(--sand-deep);
}
.photoband figcaption{margin-top:var(--s3);font-size:var(--t-sm);color:var(--muted);max-width:48ch}

/* ------------------------------------------------------- zo werkt het --- */
.steps{list-style:none;counter-reset:none}
.stepitem{
  display:grid;gap:var(--s4) var(--s6);
  grid-template-columns:auto minmax(0,1fr);
  padding-block:var(--s6);
  border-top:1px solid var(--rule);
}
.stepitem:last-child{border-bottom:1px solid var(--rule)}
.stepitem__n{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.5rem,5.5vw,4rem);line-height:0.85;
  letter-spacing:-0.05em;color:var(--numeral);
  min-width:2ch;
}
.stepitem__body h3{margin-bottom:var(--s3)}
.stepitem__body p{color:var(--muted);font-size:var(--t-sm);max-width:46ch}
.stepitem__ui{min-width:0;max-width:22rem}  /* fragment blijft op een tablet op ware grootte */
.stepitem__ui:empty{display:none}
@media (min-width:62rem){
  .stepitem{grid-template-columns:5rem minmax(0,1fr) minmax(0,21rem);align-items:start}
  .stepitem__ui{justify-self:end;width:100%}
}
@media (max-width:61.9375rem){
  .stepitem{gap:var(--s4)}
  .stepitem__ui{grid-column:2}
}

/* UI-fragmenten — alle vijf even breed, met hetzelfde ritme in hoogte */
.frag{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s4);
  min-height:13.5rem;
  display:flex;flex-direction:column;
}
.frag__title{
  font-size:var(--t-xs);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--faint);padding-bottom:0.625rem;margin-bottom:0.25rem;border-bottom:1px solid var(--line);
}
.doclist{list-style:none;display:flex;flex-direction:column}
.doclist li{
  display:flex;align-items:center;gap:0.625rem;
  padding-block:0.5625rem;font-size:var(--t-sm);font-weight:500;
  border-top:1px solid var(--line);
}
.doclist li:first-child{border-top:0}
.doclist em{margin-left:auto;font-style:normal;font-size:var(--t-xs);color:var(--faint);font-weight:400;text-align:right}

.mark{
  width:1.0625rem;height:1.0625rem;border-radius:50%;flex:none;position:relative;display:block;
}
.mark--have{background:var(--teal)}
.mark--have::after{
  content:"";position:absolute;left:0.3125rem;top:0.1875rem;
  width:0.3125rem;height:0.5625rem;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.mark--todo{box-shadow:inset 0 0 0 2px var(--coral)}
.mark--todo::after{content:"";position:absolute;inset:0.3125rem;border-radius:50%;background:var(--coral)}
.mark--na{box-shadow:inset 0 0 0 2px var(--line)}
.mark--na::after{
  content:"";position:absolute;left:0.25rem;right:0.25rem;top:calc(50% - 1px);height:2px;background:var(--line);
}

/* afspraaktegel bij stap 2 */
.booking__when{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--t-lg);letter-spacing:-0.03em;
  margin-top:var(--s3);
}
.booking__with{font-size:var(--t-sm);color:var(--muted);margin-top:0.25rem}
/* WhatsApp en Google Meet als tekst: hun merkregels laten geen herkleurde logo's toe */
.booking__how{
  margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line);
  font-size:var(--t-sm);color:var(--muted);
}
.booking__chan{font-weight:700;color:var(--ink);white-space:nowrap}

/* voortgangslijst bij stap 3 — bewust anders dan de checklist bij stap 1 */
.timeline{list-style:none;margin-top:var(--s2)}
.timeline li{
  position:relative;padding:0.5rem 0 0.75rem 1.5rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 0.5rem;
}
.timeline li::before{
  content:"";position:absolute;left:0.1875rem;top:0.9375rem;
  width:0.5rem;height:0.5rem;border-radius:50%;
  background:var(--paper);box-shadow:inset 0 0 0 2px var(--coral);z-index:1;
}
.timeline li.is-done::before{background:var(--teal);box-shadow:none}
.timeline li::after{
  content:"";position:absolute;left:0.40625rem;top:1.5rem;bottom:-0.25rem;
  width:2px;background:var(--line);
}
.timeline li:last-child::after{display:none}
.timeline__name{font-size:var(--t-sm);font-weight:700;flex:1 1 auto}
.timeline__when{font-size:var(--t-xs);color:var(--faint)}

/* bevestigingstegel bij stap 5 */
.confirm__amount{
  display:flex;align-items:center;gap:0.625rem;
  margin-top:var(--s3);
  font-family:var(--font-display);font-weight:900;
  font-size:var(--t-lg);letter-spacing:-0.035em;
}
.confirm__list{
  list-style:none;margin-top:auto;padding-top:var(--s4);
  font-size:var(--t-sm);color:var(--muted);
  display:flex;flex-direction:column;gap:0.25rem;
}

/* zoekertje */
.listing{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.listing__photo{
  display:block;width:100%;height:auto;
  aspect-ratio:16 / 9;object-fit:cover;
  background:var(--sand-deep);
  border-bottom:1px solid var(--line);
}
.listing__body{padding:var(--s4)}
.listing__price{font-family:var(--font-display);font-weight:900;font-size:var(--t-lg);letter-spacing:-0.035em}
.listing__addr{font-size:var(--t-sm);font-weight:500;margin-top:0.125rem}
.listing__specs{font-size:var(--t-xs);color:var(--muted);margin-top:0.25rem}
.listing__foot{
  font-size:var(--t-xs);color:var(--faint);
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line);
}

/* --------------------------------------------------------------- team --- */
.person{display:grid;gap:var(--s6)}
.person__text{font-size:var(--t-md);color:var(--muted);max-width:48ch}
.team__card{margin:0;border-radius:var(--r-lg);overflow:hidden;max-width:40rem}
.team__photo{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;background:var(--sand-deep)}

/* ------------------------------------------------------------- banden --- */
.band{padding-block:clamp(2.75rem,6vw,5rem);color:#fff}
.band--blue{background:var(--blue)}
.band__grid{display:grid;gap:var(--s5)}
@media (min-width:56rem){
  .band__grid{grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:var(--s8)}
}
.band__title{font-size:clamp(1.625rem,3vw,2.375rem)}
.band__body p{font-size:var(--t-md);line-height:1.5;max-width:54ch}
/* Woordmerken in plaats van logo's: die zijn beschermd en we hebben nog geen
   partnerbadge. Zie TODO.md. */
.portals{
  list-style:none;display:flex;flex-wrap:wrap;
  gap:var(--s4) clamp(1.5rem,4vw,3.5rem);
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,0.35);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,3.2vw,1.5rem);letter-spacing:-0.035em;line-height:1.1;
}

.band--close{text-align:left}
.close__title{max-width:18ch;font-size:clamp(1.75rem,3.6vw,2.75rem);letter-spacing:-0.035em;font-family:var(--font-display);font-weight:700;line-height:1.06}
.close__cta{margin-top:var(--s6)}
.close__small{margin-top:var(--s4);font-size:var(--t-sm);color:rgba(255,255,255,0.88)}

/* ---------------------------------------------------------- biedingen --- */
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
.bids{width:100%;border-collapse:collapse;min-width:31rem;font-size:var(--t-sm)}
.bids caption{
  text-align:left;font-size:var(--t-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--faint);padding:var(--s4) var(--s4) var(--s3);
}
.bids th,.bids td{text-align:left;padding:0.8125rem var(--s4);vertical-align:top}
.bids thead th{
  font-size:var(--t-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);border-top:1px solid var(--line);
  white-space:nowrap;
}
.bids tbody th{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;white-space:nowrap}
.bids tbody tr + tr th,.bids tbody tr + tr td{border-top:1px solid var(--line)}
.bids .num{font-size:var(--t-base);white-space:nowrap}
.tablewrap + .smallprint{margin-top:var(--s5)}
/* op een telefoon een maat kleiner, zodat de vier kolommen leesbaar blijven
   en een bedrag nooit middenin afbreekt */
@media (max-width:34rem){
  .bids{font-size:var(--t-xs);min-width:28rem}
  .bids th,.bids td{padding:0.625rem 0.75rem}
  .bids .num{font-size:var(--t-sm)}
  .bids caption{padding:var(--s3) var(--s3) var(--s2)}
}

/* --------------------------------------------------------- papierwerk --- */
/* negen kaartjes: 1 kolom op een telefoon, 2 op een tablet, 3 vanaf ~700px —
   zo vullen ze altijd volledige rijen */
.papers{
  list-style:none;display:grid;gap:var(--s3);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:30rem){ .papers{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:43.75rem){ .papers{grid-template-columns:repeat(3,minmax(0,1fr))} }
.paper{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.125rem 0.625rem;
  align-content:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0.8125rem var(--s4);min-width:0;
}
.paper .mark{margin-top:0.1875rem}
.paper__name{grid-column:2;font-size:var(--t-sm);font-weight:700;line-height:1.3;min-width:0;overflow-wrap:anywhere;hyphens:manual}
.paper__status{grid-column:2;font-style:normal;font-size:var(--t-xs);color:var(--faint)}
.papers__note{margin-top:var(--s6);color:var(--muted);font-size:var(--t-sm);max-width:62ch}

/* --------------------------------------------------------------- prijs -- */
.price{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.25rem,3vw,2rem);
}
.price__amount{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.5rem,5.5vw,4rem);line-height:1;letter-spacing:-0.05em;
}
.price__amount span{font-size:var(--t-md);font-weight:700;letter-spacing:-0.02em;color:var(--muted)}
.price__what{margin-top:var(--s2);color:var(--muted);font-size:var(--t-sm)}
.price__extra{
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:var(--t-sm);color:var(--muted);max-width:54ch;
}
.price__extra strong{color:var(--ink)}

.pay{list-style:none;display:grid;gap:var(--s5);margin-top:var(--s7)}
.pay__step{position:relative;padding-left:1.5rem}
.pay__step::before{
  content:"";position:absolute;left:0;top:0.375rem;
  width:0.75rem;height:0.75rem;border-radius:50%;background:var(--coral);z-index:1;
}
.pay__step::after{
  content:"";position:absolute;left:0.3125rem;top:1.125rem;width:2px;height:calc(100% + var(--s5) - 1.125rem);
  background:var(--line);
}
.pay__step:last-child::after{display:none}
.pay__amount{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--t-md);letter-spacing:-0.025em}
.pay__when{display:block;font-size:var(--t-sm);color:var(--muted)}
@media (min-width:40rem){
  .pay{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
  .pay__step{padding-left:0;padding-top:1.75rem;padding-right:var(--s4)}
  .pay__step::before{top:0}
  .pay__step::after{left:0.75rem;top:0.3125rem;width:auto;right:0;height:2px}
}

.options{margin-top:var(--s6)}
.options__title{
  font-size:var(--t-xs);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:var(--s3);font-family:var(--font-text);
}
.options__list{list-style:none;display:grid;gap:0;max-width:34rem}
.options__list li{
  display:flex;justify-content:space-between;gap:var(--s4);
  padding-block:0.625rem;border-top:1px solid var(--rule);font-size:var(--t-sm);
}
.options__list .num{font-size:var(--t-sm);color:var(--muted);white-space:nowrap}

/* ---------------------------------------------------------- voorwaarden - */
.terms{margin:0;display:grid;gap:0}
.terms__row{
  display:grid;gap:var(--s2);
  padding-block:var(--s5);border-top:1px solid var(--rule);
}
.terms__row:last-child{border-bottom:1px solid var(--rule)}
@media (min-width:44rem){
  .terms__row{grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:var(--s6)}
}
.terms dt{font-family:var(--font-display);font-weight:700;font-size:var(--t-md);letter-spacing:-0.025em}
.terms dd{margin:0;color:var(--muted);font-size:var(--t-sm)}

/* ----------------------------------------------------------------- faq -- */
.faq{display:grid}
.qa{border-top:1px solid var(--rule)}
.qa:last-of-type{border-bottom:1px solid var(--rule)}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:var(--s4);
  padding-block:var(--s5);
  font-family:var(--font-display);font-weight:700;font-size:var(--t-md);letter-spacing:-0.025em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;margin-left:auto;margin-top:0.4375rem;
  width:0.75rem;height:0.75rem;
  border-right:2px solid var(--coral);border-bottom:2px solid var(--coral);
  transform:rotate(45deg);
}
.qa[open] summary::after{transform:rotate(225deg);margin-top:0.6875rem}
@media (prefers-reduced-motion: no-preference){
  .qa summary::after{transition:transform .18s ease}
}
.qa__a{padding-bottom:var(--s5);max-width:56ch}
.qa__a p{color:var(--muted);font-size:var(--t-sm)}

/* ------------------------------------------------ landingspagina's ------
   verkopen-zonder-makelaar.html en attesten-bij-verkoop.html: dezelfde
   bouwstenen als de homepage, plus een compacte stappenlijst en een tabel. */

/* "Zo werkt het" compact: enkel nummer + tekst, geen fragmenten */
.steps--compact .stepitem{grid-template-columns:2.75rem minmax(0,1fr);gap:var(--s2) var(--s4);padding-block:var(--s5)}
.steps--compact .stepitem__n{font-size:clamp(1.75rem,3.2vw,2.25rem);min-width:0}
.steps--compact .stepitem__body h3{font-size:var(--t-md);letter-spacing:-0.02em;margin-bottom:var(--s1)}
@media (min-width:62rem){
  .steps--compact .stepitem{grid-template-columns:3.5rem minmax(0,1fr)}
}

/* "Wanneer heb je wat nodig?": een echte tabel; op een telefoon wordt
   elke rij een blokje onder elkaar, zodat niets opzij schuift */
.when{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.when caption{
  text-align:left;font-size:var(--t-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--faint);padding:var(--s4) var(--s4) var(--s3);
}
.when th,.when td{text-align:left;padding:0.875rem var(--s4);vertical-align:top}
.when thead th{
  font-size:var(--t-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap;
}
.when tbody th{font-family:var(--font-display);font-weight:700;font-size:var(--t-base);letter-spacing:-0.02em;line-height:1.3}
.when tbody th span{display:block;font-family:var(--font-text);font-weight:400;font-size:var(--t-xs);letter-spacing:0;color:var(--faint)}
.when tbody tr + tr > *{border-top:1px solid var(--line)}
.when__moment{font-weight:700;color:var(--ink)}
.when__note{color:var(--muted)}
@media (max-width:39.9375rem){
  .when thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .when tbody,.when tr,.when th,.when td{display:block}
  .when tr{padding:var(--s4)}
  .when tbody tr + tr > *{border-top:0}
  .when tbody tr + tr{border-top:1px solid var(--line)}
  .when tbody tr:first-child{border-top:1px solid var(--line)}
  .when th,.when td{padding:0}
  .when td{margin-top:0.25rem}
}

/* -------------------------------------------------------------- footer -- */
.footer{background:var(--ink-deep);color:#C9D0DE;padding-block:clamp(2.5rem,5vw,4rem);font-size:var(--t-sm)}
.footer__grid{display:grid;gap:var(--s6)}
@media (min-width:56rem){
  .footer__grid{grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:var(--s8)}
}
.brand--footer{color:#fff;display:inline-block}
.footer__mail{margin-top:var(--s4);font-weight:700;color:#fff}
.footer__mail a{text-decoration:none}
.footer__mail a:hover{text-decoration:underline;text-underline-offset:3px}
.footer__legal p + p{margin-top:0.625rem}
.footer__legal{line-height:1.55;max-width:66ch}
.footer__links{
  list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid rgba(255,255,255,0.18);
  font-weight:700;
}
.footer__links a{color:#fff;text-underline-offset:3px}

/* ---------------------------------------------------- losse pagina's ---- */
.page{background:var(--paper);padding-block:clamp(3rem,7vw,6rem);min-height:52vh}
.page__inner{max-width:38rem}
.page h1{font-size:clamp(1.875rem,4vw,3rem);margin-bottom:var(--s5)}
.page p{color:var(--muted);margin-bottom:var(--s4)}
.page__note{
  border-left:3px solid var(--coral);padding:var(--s4) 0 var(--s4) var(--s4);
  background:var(--sand);color:var(--ink);font-weight:500;
}
.page__back{display:inline-block;margin-top:var(--s5);font-weight:700;color:var(--coral-ink);text-underline-offset:3px}

/* juridische teksten: leesbaar op een telefoon, koppen links, geen kaarten */
.page__meta{font-size:var(--t-sm);color:var(--faint)}
.page .lede{margin-bottom:var(--s6);max-width:none}
.page__toc{
  margin:0 0 var(--s7);padding:var(--s4) var(--s5);
  background:var(--sand);border-radius:var(--r-md);
}
.page__toc p{margin:0 0 var(--s2);font-size:var(--t-xs);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--faint)}
.page__toc ol{padding-left:1.25rem;font-size:var(--t-sm);display:grid;gap:0.25rem}
.page__toc a{color:var(--ink);text-underline-offset:3px}
.prose h2{
  font-size:clamp(1.3125rem,2.4vw,1.625rem);letter-spacing:-0.025em;
  margin:var(--s7) 0 var(--s3);padding-top:var(--s5);border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--bar-h) + 1rem);
}
.prose h3{font-size:var(--t-md);letter-spacing:-0.02em;margin:var(--s5) 0 var(--s2)}
.prose p,.prose li{color:var(--muted);overflow-wrap:break-word}
.prose ul,.prose ol{padding-left:1.25rem;margin:0 0 var(--s4);display:grid;gap:0.375rem}
.prose li::marker{color:var(--coral)}
.prose strong{color:var(--ink)}
.prose a{color:var(--coral-ink);text-underline-offset:3px;overflow-wrap:anywhere}
.prose address{font-style:normal;color:var(--ink);margin-bottom:var(--s4);line-height:1.55}
.prose dl{margin:0 0 var(--s4);display:grid;gap:0}
.prose dl > div{padding-block:var(--s3);border-top:1px solid var(--line)}
.prose dl > div:last-child{border-bottom:1px solid var(--line)}
.prose dt{font-weight:700;color:var(--ink);font-size:var(--t-sm)}
.prose dd{margin:0.125rem 0 0;color:var(--muted);font-size:var(--t-sm)}
.modelform{
  background:var(--tint);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s4) var(--s5);margin-bottom:var(--s4);
}
.modelform p{margin-bottom:var(--s3);font-size:var(--t-sm)}
.modelform p:last-child{margin-bottom:0}

/* 404 */
.notfound{background:var(--sand);padding-block:clamp(3.5rem,9vw,7rem);min-height:60vh}
.notfound .notfound__code{font-family:var(--font-display);font-weight:900;font-size:var(--t-num);line-height:0.82;letter-spacing:-0.055em;color:var(--coral);margin-bottom:var(--s5)}
.notfound h1{margin-bottom:var(--s4)}
.notfound p{color:var(--muted);max-width:44ch}
.notfound__links{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* versturen mislukt: blijft in beeld boven de knoppen van stap 4 */
.form__err{
  border-left:3px solid var(--coral);background:#FCEFEC;color:var(--ink);
  padding:var(--s3) var(--s4);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--t-sm);font-weight:500;
}
.form__err p + p{margin-top:0.375rem}
.form__err a{color:var(--coral-ink);text-underline-offset:3px}
button[aria-busy="true"]{opacity:.7;cursor:progress}
/* honingpot tegen spam: buiten beeld, niet bereikbaar met toetsenbord of schermlezer */
.hp{position:absolute !important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}