/* Topline Automotive · site.css
   Ontwerpsysteem voor alle pagina's. Kleuren en letterschaal komen uit tokens.css; hier staat alleen opmaak.
   Motion-stack: Anime.js v4 (assets/js/site.js), easing "klik" (--ease-in-klik / --ease-uit-klik).
   Signatuur: de bovenlijn uit het logo (6 px), het vinkhaak-glyph (de ene boog r22) en de tijdbalk onder de kop.
   Hoekradius overal 0. Geel alleen in de kentekenplaat, het nu-blokje, de voet van het glyph en het monogram in de voet.
   Paginabouwers wijzigen dit bestand niet; zie COMPONENTEN.md. */

/* ───────────────────────── 0. Afgeleide maten (geen nieuwe kleuren) ───────────────────────── */
:root{
  --papier-lijn:rgba(244,244,241,.22);        /* lijn op inkt (papier op 22 %) */
  --papier-lijn-sterk:rgba(244,244,241,.4);   /* tijdbalk op inkt, onderrand hero */
  --gut:24px;
  --kol:calc((100% - 11 * var(--gut)) / 12);  /* één kolom van twaalf, alleen bruikbaar binnen .hfd-in */
  --kop-h:56px; --tb-h:16px; --boven:72px;    /* kop + tijdbalk op mobiel */
  --sectie-pad:72px;
  --bovenlijn:6px;
  --hang:40px;                                /* speling tussen bovenlijn en inhoud, zoals T en L in het logo */
}
@media (min-width:900px){
  :root{ --kop-h:64px; --tb-h:24px; --boven:88px; --sectie-pad:120px; }
}

/* ───────────────────────── 1. Reset ───────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:var(--boven); overflow-x:clip; }
body{
  margin:0; background:var(--papier); color:var(--inkt);
  font-family:var(--f); font-weight:400; font-size:var(--fs-tekst); line-height:var(--lh-tekst);
  font-variation-settings:"wdth" 100; -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1,h2,h3,h4,p,figure,dl,dd,ul,ol,table{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
[hidden]{ display:none !important; }
.vis-verborgen{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
::selection{ background:var(--geel); color:var(--inkt); }

/* ───────────────────────── 2. Typografie ───────────────────────── */
h1,h2,h3,.h-kop{ font-weight:600; font-variation-settings:"wdth" 108; letter-spacing:-.01em; line-height:var(--lh-kop); text-wrap:balance; }
h1,.h1{ font-size:var(--fs-h1); }
h2,.h2{ font-size:var(--fs-h2); }
h3,.h3{ font-size:var(--fs-h3); }
.cijfer{ font-weight:600; font-variation-settings:"wdth" 66; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.label,.tijdlabel,caption.label,thead th{
  font-size:var(--fs-label); font-weight:600; font-variation-settings:"wdth" 100; letter-spacing:.16em; text-transform:uppercase; line-height:1.3;
}
.label-klein{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.intro{ font-size:var(--fs-intro); line-height:1.45; max-width:44ch; }
.tekst{ max-width:52ch; }
.zacht{ color:var(--fg-zacht); }
.tekstlink{ display:inline-block; padding-block:12px; margin-block:-12px; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:text-decoration-thickness var(--dur-kort) var(--ease-in-klik); } /* tapdoel 44 px zonder layoutverschil */
.tekstlink:hover{ text-decoration-thickness:2px; }
.w{ display:inline-block; white-space:nowrap; }        /* gesplitst woord: breekt nooit middenin */
.l{ display:inline-block; }

/* Odometer (fx wijzer) en tikcursor (fx invullen) */
.od{ display:inline-block; position:relative; height:1em; line-height:1; overflow:clip; vertical-align:baseline; }
.od-maat{ visibility:hidden; }
.od-kol{ position:absolute; left:0; top:0; width:100%; }
.od-kol i{ display:block; height:1em; line-height:1; font-style:normal; text-align:center; }
.cursor{ position:absolute; left:0; top:0; width:2px; height:1em; background:currentColor; pointer-events:none; }

/* ───────────────────────── 3. Thema's (per hoofdstuk, kop en voet) ───────────────────────── */
.hfd,.kop,.tijdbalk,.voet,.thema-papier{
  --bg:var(--papier); --fg:var(--inkt); --fg-zacht:var(--inkt-zacht); --fg-zacht-2:var(--inkt-zacht-2);
  --lijn-k:var(--lijn); --lijn-s:var(--lijn-sterk); --vlak-2:var(--papier-2); --veld-bg:var(--wit);
  background:var(--bg); color:var(--fg);
}
.hfd[data-thema="inkt"],.voet,.thema-inkt,html[data-thema="inkt"] .kop,html[data-thema="inkt"] .tijdbalk{
  --bg:var(--inkt); --fg:var(--papier); --fg-zacht:var(--papier-zacht); --fg-zacht-2:var(--papier);
  --lijn-k:var(--papier-lijn); --lijn-s:var(--papier-lijn-sterk); --vlak-2:var(--inkt-2); --veld-bg:var(--inkt-2);
}
.hfd[data-thema="raster"],.thema-raster,html[data-thema="raster"] .kop,html[data-thema="raster"] .tijdbalk{
  --bg:var(--raster-licht); --fg-zacht:var(--inkt-zacht-2); --vlak-2:var(--papier); --veld-bg:var(--papier);
}
.kop,.tijdbalk{ transition:background-color var(--dur-kort) var(--ease-in-klik), color var(--dur-kort) var(--ease-in-klik); }

/* ───────────────────────── 4. Layout ───────────────────────── */
.kolom,.hfd-in{ width:var(--kolom); margin-inline:auto; }
.hfd{ position:relative; }
.hfd-in{ position:relative; padding-block:var(--sectie-pad); }
.hfd.hero .hfd-in{ padding-block:48px 24px; }
.raster12{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gut); }
@media (max-width:899.98px){ .raster12{ grid-template-columns:1fr; } }
.uitloop-rechts{ margin-right:calc(50% - 50vw); }       /* alleen op een element dat tot de schermrand mag lopen */
main{ padding-top:var(--boven); }
main:focus{ outline:none; }

/* ───────────────────────── 5. Bovenlijn en tijdlabel (signatuur A) ───────────────────────── */
.bovenlijn{ height:var(--bovenlijn); width:100%; background:var(--fg); transform-origin:left center; }
.js .bovenlijn[data-fx="lijn"]:not(.fx-klaar){ transform:scaleX(0); }
.bovenlijn + .tijdlabel,.bovenlijn + .onder-lijn{ padding-top:calc(var(--hang) - var(--bovenlijn)); }
.tijdlabel{ color:var(--fg); }
.tijdlabel + h1,.tijdlabel + h2,.tijdlabel + .werk-kop,.tijdlabel + .leeg-blok{ margin-top:32px; }
.tijdlabel + .hero-tekst{ margin-top:16px; }
.hfd-kop{ margin-bottom:48px; }

/* ───────────────────────── 6. Kop (header) ───────────────────────── */
.skip{ position:absolute; left:16px; top:-100px; z-index:60; padding:12px 16px; background:var(--inkt); color:var(--papier); font-weight:600; }
.skip:focus{ top:8px; }
.kop{ position:fixed; inset:0 0 auto 0; height:var(--kop-h); z-index:50; }
.kop-in{ width:var(--kolom); margin-inline:auto; height:100%; display:flex; align-items:center; gap:16px; }
.kop-logo{ display:flex; align-items:center; min-height:44px; flex:0 0 auto; }
.kop-logo img{ height:24px; width:auto; }
.kop-logo-wit{ display:none; }
html[data-thema="inkt"] .kop-logo-inkt{ display:none; }
html[data-thema="inkt"] .kop-logo-wit{ display:block; }
.kop-nav{ display:none; }
.kop-nav ul{ display:flex; gap:4px; }
.kop-nav a{ display:flex; align-items:center; height:44px; padding:0 10px; font-size:.875rem; text-decoration:none; position:relative; }
.kop-nav a::after{ content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--dur-kort) var(--ease-in-klik); }
.kop-nav a:hover::after,.kop-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.kop-rechts{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.kop-open{ display:none; font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; font-weight:600; white-space:nowrap; }
.kop-tel{ text-decoration:underline; text-underline-offset:3px; white-space:nowrap; display:flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 6px; font-size:.9375rem; }
.kop-tel-lang{ display:none; }
.kop-cta{ height:48px; }
.kop-cta-lang{ display:none; }
.kop-menu{ display:flex; align-items:center; height:48px; padding:0 12px; background:none; border:1px solid var(--lijn-s); font-weight:600; font-size:.875rem; }
.kop-menu[aria-expanded="true"] span::after{ content:" ×"; }
@media (max-width:639.98px){
  .kop-in{ gap:8px; } .kop-rechts{ gap:6px; } .kop-logo img{ height:20px; } .kop-tel{ padding:0 4px; } .kop-cta{ padding:0 14px; font-size:1rem; } .kop-menu{ padding:0 10px; }
}
@media (min-width:640px){
  .kop-tel-lang{ display:inline; } .kop-tel-kort{ display:none; }
  .kop-cta-lang{ display:inline; } .kop-cta-kort{ display:none; }
  .kop-logo img{ height:28px; }
}
@media (min-width:900px){
  .kop-nav{ display:block; } .kop-menu{ display:none; }
  .kop-logo img{ height:30px; }
}
@media (min-width:1200px){ .kop-open{ display:inline; } }
/* Mobiel menu: paneel onder kop + tijdbalk, telefoon en Afspraak blijven in de kop */
@media (max-width:899.98px){
  html[data-menu="open"] .kop-nav{ display:block; position:fixed; left:0; right:0; top:var(--boven); background:var(--bg); color:var(--fg); box-shadow:var(--schaduw); z-index:49; border-top:1px solid var(--lijn-k); }
  html[data-menu="open"] .kop-nav ul{ flex-direction:column; gap:0; width:var(--kolom); margin-inline:auto; padding-block:8px; }
  html[data-menu="open"] .kop-nav li + li{ border-top:1px solid var(--lijn-k); }
  html[data-menu="open"] .kop-nav a{ height:56px; padding:0; font-size:1.125rem; }
  html[data-menu="open"] .kop-nav a::after{ left:0; right:auto; width:24px; }
  html[data-menu="open"]{ overflow:hidden; }
}

/* ───────────────────────── 7. Tijdbalk (signatuur B) ───────────────────────── */
.tijdbalk{ position:fixed; left:0; right:0; top:var(--kop-h); height:var(--tb-h); z-index:48; }
.tijdbalk::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--lijn-s); }
.tb-in{ position:relative; width:var(--kolom); margin-inline:auto; height:100%; }
.tb-ticks{ position:absolute; inset:0; }
.tb-ticks i{ position:absolute; bottom:0; left:calc(var(--i) / 12 * 100%); width:1px; height:8px; background:var(--lijn-s); }
.tb-ticks i::after{ content:attr(data-uur); position:absolute; left:4px; top:-14px; font-size:.6875rem; font-weight:600; letter-spacing:.08em; color:var(--fg-zacht-2); display:none; font-style:normal; }
.tb-ticks i:last-child::after{ left:auto; right:4px; }
.tb-cursor{ position:absolute; top:50%; width:2px; height:18px; margin-top:-9px; background:var(--fg); left:0; transform:translateX(-50%); }
.tb-nu{ position:absolute; top:50%; height:18px; margin-top:-9px; width:6px; background:var(--geel); left:0; transform:translateX(-50%); }
.tb-nu-label{ position:absolute; left:8px; top:50%; transform:translateY(-50%); padding:0 4px; background:var(--bg); font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; color:var(--fg); display:none; }
.tb-nu[data-kant="links"] .tb-nu-label{ left:auto; right:8px; }
@media (max-width:899.98px){ .tb-cursor,.tb-nu{ height:12px; margin-top:-6px; } }
@media (min-width:900px){ .tb-ticks i::after,.tb-nu-label{ display:block; } }

/* ───────────────────────── 8. Knoppen ───────────────────────── */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px;
  background:var(--fg,var(--inkt)); color:var(--bg,var(--papier)); border:0; border-radius:0; text-decoration:none;
  font-weight:600; font-size:1.0625rem; line-height:1; white-space:nowrap; cursor:pointer;
  transition:background-color 160ms var(--ease-in-klik);
}
.knop:hover{ background:var(--knop-hover,var(--inkt-2)); }
.hfd[data-thema="inkt"] .knop,.voet .knop,.thema-inkt .knop,html[data-thema="inkt"] .kop .knop{ --knop-hover:var(--papier-2); }
.knop:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }
.knop-groot{ min-height:56px; }
.knop-blok{ width:100%; }
.knop[aria-disabled="true"],.knop:disabled{ opacity:.6; cursor:default; }
.pijl{ width:24px; height:24px; flex:0 0 24px; }

/* ───────────────────────── 9. Kentekenplaat ───────────────────────── */
.plaat-vorm{ margin-top:28px; }
.plaat-vorm .label{ display:block; color:var(--raster); margin-bottom:10px; }
.hfd[data-thema="papier"] .plaat-vorm .label,.hfd[data-thema="raster"] .plaat-vorm .label{ color:var(--inkt-zacht-2); }
.plaat-rij{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:630px; }
.plaat{ position:relative; display:flex; align-items:stretch; height:74px; width:100%; max-width:520px; background:var(--geel); color:var(--inkt); overflow:clip; }
.plaat-eu{ flex:0 0 28px; background:var(--eu); color:var(--wit); display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px; font-size:.6875rem; font-weight:600; letter-spacing:.06em; }
.plaat input{
  flex:1 1 auto; min-width:0; width:100%; border:0; background:transparent; color:var(--inkt); padding:0 16px;
  font-weight:600; font-variation-settings:"wdth" 66; letter-spacing:.02em; font-size:40px; text-transform:uppercase; outline:none; border-radius:0;
}
.plaat input::placeholder{ color:var(--inkt-zacht-2); opacity:1; }
.plaat:focus-within{ outline:2px solid var(--inkt); outline-offset:-2px; }
.plaat-knop{
  display:flex; align-items:center; justify-content:center; height:56px; padding:0 24px; border:0; border-radius:0;
  background:var(--fg,var(--inkt)); color:var(--bg,var(--papier)); font-weight:600; font-size:1.0625rem; transition:background-color 160ms var(--ease-in-klik);
}
.plaat-knop:hover{ background:var(--knop-hover,var(--inkt-2)); }
.hfd[data-thema="inkt"] .plaat-knop{ --knop-hover:var(--papier-2); }
.plaat-knop:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }
@media (min-width:900px){
  .plaat-rij{ flex-direction:row; gap:0; }
  .plaat{ height:110px; }
  .plaat-eu{ flex-basis:44px; font-size:.8125rem; padding-bottom:10px; }
  .plaat input{ font-size:64px; padding:0 24px; }
  .plaat-knop{ flex:0 0 110px; height:110px; padding:0; }
}
/* compacte plaat (formulier) */
.plaat-klein{ height:52px; max-width:240px; }
.plaat-klein .plaat-eu{ flex-basis:24px; font-size:.625rem; padding-bottom:4px; }
.plaat-klein input{ font-size:24px; padding:0 12px; }
@media (min-width:900px){ .plaat-klein{ height:52px; } .plaat-klein .plaat-eu{ flex-basis:24px; font-size:.625rem; padding-bottom:4px; } .plaat-klein input{ font-size:24px; padding:0 12px; } }

/* Resultaat van de kentekencheck */
[data-kenteken-uit]{ position:relative; margin-top:32px; padding-top:24px; display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:16px; row-gap:16px; max-width:630px; }
[data-kenteken-uit]::before{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:var(--fg); transform-origin:left; transform:scaleX(0); transition:transform 480ms var(--ease-in-klik); }
[data-kenteken-uit].kc-lijn-aan::before{ transform:scaleX(1); }
.kc-auto{ grid-column:1 / -1; display:grid; gap:8px; }
.kc-auto div{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; }
.kc-auto dt{ flex:0 0 100%; font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--fg-zacht-2); }
.kc-auto dd{ font-size:var(--fs-tekst); }
.kc-auto div:nth-child(2) dd{ font-weight:600; font-variation-settings:"wdth" 66; letter-spacing:.02em; font-size:var(--fs-cijfer); line-height:1.1; font-variant-numeric:tabular-nums; }
.kc-jaar,.kc-kleur{ color:var(--fg-zacht-2); }
[data-kenteken-uit] .vink{ grid-column:1; width:40px; height:45px; align-self:start; }
.kc-zin{ grid-column:2; max-width:48ch; }
.kc-knop{ grid-column:2; justify-self:start; display:inline-flex; align-items:center; min-height:56px; padding:0 24px; background:var(--fg); color:var(--bg); text-decoration:none; font-weight:600; transition:background-color 160ms var(--ease-in-klik); }
.kc-knop:hover{ background:var(--knop-hover,var(--inkt-2)); }
.hfd[data-thema="inkt"] .kc-knop{ --knop-hover:var(--papier-2); }
.kc-melding{ grid-column:1 / -1; padding-left:16px; border-left:1px solid var(--fg); max-width:48ch; }
[data-kenteken-uit][data-staat="bezig"] .kc-melding{ border-left-color:var(--lijn-s); color:var(--fg-zacht-2); }
@media (min-width:900px){ [data-kenteken-uit]{ grid-template-columns:64px minmax(0,1fr); column-gap:24px; } [data-kenteken-uit] .vink{ width:64px; height:72px; } }

/* ───────────────────────── 10. Vinkhaak-glyph (signatuur C) ───────────────────────── */
.vink{ width:64px; height:72px; color:inherit; }
.vink .vink-stam{ stroke:currentColor; }
.vink .vink-voet{ stroke:var(--geel); }
.vink path{ fill:none; stroke-width:8; stroke-linecap:butt; }
.vink-klein{ width:20px; height:22px; }
.vink-klein path{ stroke-width:8; }

/* ───────────────────────── 11. Tabellen ───────────────────────── */
.tabel{ width:100%; }
.tabel th,.tabel td{ text-align:left; vertical-align:top; padding:16px 0; border-bottom:1px solid var(--lijn-k); }
.tabel thead th{ color:var(--fg-zacht-2); padding-bottom:12px; border-bottom:1px solid var(--lijn-s); }
.tabel tbody th{ font-weight:600; }
.tabel .cijfer{ font-size:var(--fs-cijfer); line-height:1.1; }
/* Openingstijden-tabel */
.tijden{ width:100%; }
.tijden caption{ text-align:left; padding-bottom:12px; border-bottom:1px solid var(--lijn-s); color:var(--fg-zacht-2); }
.tijden th,.tijden td{ text-align:left; padding:14px 0; border-bottom:1px solid var(--lijn-k); vertical-align:baseline; }
.tijden th{ font-weight:400; padding-right:16px; }
.tijden td{ text-align:right; font-weight:600; font-variation-settings:"wdth" 66; letter-spacing:.02em; font-size:var(--fs-h3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tijden td.gesloten{ font-weight:400; font-variation-settings:"wdth" 100; letter-spacing:0; font-size:var(--fs-tekst); color:var(--fg-zacht-2); }
/* Werkorder */
.werkorder{ width:100%; }
.werkorder thead{ display:none; }
.werkorder tbody tr{ position:relative; display:block; padding:20px 0; border-top:1px solid var(--lijn-k); }
.werkorder tbody tr:first-child{ border-top-color:var(--lijn-s); }
.werkorder tbody tr:last-child{ border-bottom:1px solid var(--lijn-k); }
.werkorder th,.werkorder td{ display:block; text-align:left; padding:0; }
.werkorder td[data-kop]::before{ content:attr(data-kop); display:block; font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-zacht-2); margin:14px 0 4px; }
.werkorder tbody th{ font-size:var(--fs-h3); font-weight:600; font-variation-settings:"wdth" 108; letter-spacing:-.01em; line-height:1.1; padding-right:40px; }
.werkorder tbody th a{ text-decoration:none; }
.werkorder tbody th a::after{ content:""; position:absolute; inset:0; }
.werkorder .wo-klaar{ display:inline-block; font-weight:600; font-variation-settings:"wdth" 66; letter-spacing:.02em; font-size:var(--fs-cijfer); line-height:1.05; padding:2px 6px; margin-left:-6px; outline:1px solid transparent; }
.werkorder .wo-klaar.kader{ outline-color:var(--lijn-k); }
.werkorder .wo-afspraak{ display:flex; align-items:center; gap:10px; }
.werkorder .wo-afspraak .zacht{ color:var(--fg-zacht); }
.werkorder .wo-pijl{ position:absolute; right:0; top:20px; }
.werkorder .wo-pijl svg{ transition:transform var(--dur-kort) var(--ease-in-klik); }
.werkorder tbody tr:hover,.werkorder tbody tr:focus-within{ background:var(--vlak-2); box-shadow:0 0 0 12px var(--vlak-2); }
.werkorder tbody tr:hover .wo-pijl svg,.werkorder tbody tr:focus-within .wo-pijl svg{ transform:translateX(8px); }
.werkorder tbody th a:focus-visible{ outline:none; }
.werkorder tbody tr:focus-within{ outline:2px solid var(--fg); outline-offset:12px; }
@media (min-width:900px){
  .werkorder thead{ display:table-header-group; }
  .werkorder thead th{ text-align:left; padding:0 16px 12px 0; border-bottom:1px solid var(--lijn-s); color:var(--fg-zacht-2); font-weight:600; }
  .werkorder tbody tr{ display:table-row; padding:0; border:0; }
  .werkorder tbody tr:last-child{ border:0; }
  .werkorder th,.werkorder td{ display:table-cell; vertical-align:middle; height:88px; padding:12px 16px 12px 0; border-bottom:1px solid var(--lijn-k); }
  .werkorder tbody tr:first-child th,.werkorder tbody tr:first-child td{ border-top:0; }
  .werkorder tbody tr:last-child th,.werkorder tbody tr:last-child td{ border-bottom:0; }
  .werkorder td[data-kop]::before{ display:none; }
  .werkorder tbody th{ width:25%; padding-right:16px; }
  .werkorder .wo-wat{ width:41.67%; }
  .werkorder .wo-klaar-cel{ width:16.67%; }
  .werkorder .wo-afspraak-cel{ width:12%; }
  .werkorder .wo-pijl{ position:static; width:24px; padding-right:0; }
  .werkorder tbody tr:hover,.werkorder tbody tr:focus-within{ box-shadow:none; }
  .werkorder tbody tr:focus-within{ outline-offset:-2px; }
}

/* ───────────────────────── 12. Formulieren ───────────────────────── */
.formulier{ display:grid; gap:20px; }
.veld{ display:grid; gap:8px; }
.veld label,.veld .veld-label{ font-size:var(--fs-label); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-zacht-2); }
.veld input:not([type="checkbox"]),.veld select,.veld textarea{
  width:100%; min-height:56px; padding:0 16px; border:1px solid var(--lijn-s); border-radius:0; background:var(--veld-bg); color:var(--fg); font-size:var(--fs-tekst);
}
.hfd[data-thema="inkt"] .veld input,.hfd[data-thema="inkt"] .veld select,.hfd[data-thema="inkt"] .veld textarea,.voet input{ background:var(--inkt-2); color:var(--papier); }
.veld textarea{ min-height:140px; padding:14px 16px; resize:vertical; }
.veld select{ appearance:none; -webkit-appearance:none; padding-right:48px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111B2E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible{ outline:2px solid var(--fg); outline-offset:-2px; }
.veld [aria-invalid="true"]{ border-color:var(--fg); border-width:2px; }
.veld-fout{ font-size:.9375rem; padding-left:12px; border-left:2px solid var(--fg); line-height:1.4; }
.veld-fout:empty{ display:none; }
.veld .plaat{ max-width:240px; }
.veld .plaat:focus-within{ outline:2px solid var(--inkt); outline-offset:-2px; }
.formulier-melding{ padding:20px 24px; border:1px solid var(--lijn-s); max-width:52ch; }
.formulier-melding[data-soort="ok"]{ border-color:var(--fg); }
.formulier-melding:empty{ display:none; }
[data-hp]{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.formulier .knop{ justify-self:start; }
@media (min-width:640px){ .formulier-2k{ grid-template-columns:1fr 1fr; } .formulier-2k .veld-breed,.formulier-2k .knop,.formulier-2k .formulier-melding{ grid-column:1 / -1; } }
@media (max-width:639.98px){ .formulier .knop{ width:100%; } }

/* ───────────────────────── 13. Fotokaders ───────────────────────── */
.beeld{ position:relative; overflow:clip; background:var(--vlak-2); }
.beeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.beeld-4-5{ aspect-ratio:4 / 5; }
.beeld-1-1{ aspect-ratio:1 / 1; }
.beeld-16-10{ aspect-ratio:16 / 10; }
.beeld-18-7{ aspect-ratio:18 / 7; }
.beeld-staand{ aspect-ratio:3 / 4; }
.bijschrift{ margin-top:12px; font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--fg-zacht-2); }

/* ───────────────────────── 14. Hoofdstukken homepage ───────────────────────── */
/* 08:00 · hero */
.hero .hfd-in{ display:flex; flex-direction:column; min-height:calc(100svh - var(--boven)); }
.hero-tekst{ flex:1 0 auto; display:flex; flex-direction:column; justify-content:center; padding-block:16px; }
.hero-kop .r1,.hero-kop .r2{ display:block; }
.hero-kop .r1{ overflow-x:clip; overflow-y:visible; }
.hero-kop .r2{ color:var(--fg-zacht); }
.hero-kop .r2 .cijfer{ font-variation-settings:"wdth" 66; letter-spacing:.02em; }
.hero-kop + .intro{ margin-top:20px; line-height:1.38; }
.hero-beeld{ aspect-ratio:343 / 260; margin-top:32px; }
.hero-beeld img{ object-position:50% 40%; }
.hero-onder{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:32px; padding-top:16px; border-top:1px solid var(--lijn-s); }
.hero-onder .label{ color:var(--fg); }
.hero-onder .tekstlink{ font-size:var(--fs-label); font-weight:600; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
@media (min-width:900px){
  .hero .hfd-in{ min-height:clamp(632px, calc(100svh - var(--boven)), 872px); }
  .hero-tekst{ width:calc(7 * var(--kol) + 6 * var(--gut)); padding-block:16px; }
  .hero-beeld{ position:absolute; top:calc(48px + var(--bovenlijn)); bottom:96px; left:calc(7 * (var(--kol) + var(--gut))); right:calc(50% - 50vw); aspect-ratio:auto; margin:0; }
  .hero-onder{ margin-top:0; }
}

/* 09:30 · scene (gepind) */
.scene{ height:300vh; }
.scene-plak{ position:sticky; top:var(--boven); height:calc(100svh - var(--boven)); overflow:clip; }
.scene-plak .hfd-in{ height:100%; padding-block:32px 0; display:flex; flex-direction:column; }
.scene .bovenlijn{ flex:0 0 auto; }
.klok{ font-weight:600; font-variation-settings:"wdth" 66; letter-spacing:.02em; font-variant-numeric:tabular-nums; line-height:.9; font-size:clamp(72px, 24vw, 96px); margin-top:16px; white-space:nowrap; }
.scene-as{ position:relative; height:24px; margin-top:12px; border-bottom:1px solid var(--fg); display:flex; justify-content:space-between; font-size:.6875rem; font-weight:600; letter-spacing:.14em; }
.scene-as i{ position:absolute; bottom:-1px; left:0; width:2px; height:18px; background:var(--fg); transform:translateX(calc(var(--p, 0) * var(--as-b, 0px))); }
.scene-foto{ position:relative; margin-top:16px; flex:1 1 auto; min-height:0; overflow:clip; background:var(--vlak-2); }
.scene-foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.reis{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:16px 20px; background:var(--papier); color:var(--inkt);
  font-size:var(--fs-h3); font-weight:600; font-variation-settings:"wdth" 108; letter-spacing:-.01em; line-height:1.15; max-width:none;
}
.reis::before{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:var(--inkt); transform-origin:left; transform:scaleX(0); transition:transform 320ms var(--ease-in-klik); }
.reis.fx-klaar::before,html:not(.js) .reis::before{ transform:scaleX(1); }
.js .reis:not(.fx-klaar){ clip-path:inset(0% 0% 100% 0%); }
.reis-label{ display:none; }
@media (min-width:900px){
  .scene{ height:400vh; }
  .scene-plak .hfd-in{ display:block; padding-block:48px 0; }
  .scene-tekst{ width:calc(5 * var(--kol) + 4 * var(--gut)); position:relative; height:100%; display:flex; flex-direction:column; }
  .klok{ font-size:clamp(120px, 17vw, 240px); margin-top:auto; margin-bottom:0; }
  .scene-as{ margin:24px 0 64px; }
  .scene-foto{ position:absolute; top:0; bottom:0; left:calc(5 * (var(--kol) + var(--gut))); right:calc(50% - 50vw); margin:0; flex:none; }
  .reis{ left:auto; right:auto; bottom:auto; max-width:28ch; padding:20px 24px; }
  .reis[data-pos="linksonder"]{ left:40px; bottom:40px; }
  .reis[data-pos="rechtsboven"]{ right:40px; top:40px; }
  .reis[data-pos="linksmidden"]{ left:40px; top:50%; transform:translateY(-50%); }
  .reis[data-pos="rechtsonder"]{ right:40px; bottom:40px; }
  .reis[data-pos="linksboven"]{ left:40px; top:40px; }
}

/* 12:30 · werkorder */
.werk-kop{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 24px; margin-bottom:40px; }
.werk-kop .label{ color:var(--fg-zacht-2); }
.werk-na{ margin-top:24px; color:var(--fg-zacht-2); }

/* 15:00 · één regel op leegte */
.leeg .hfd-in{ min-height:min(70svh, 720px); display:flex; flex-direction:column; }
.leeg-blok{ position:relative; margin-top:auto; margin-bottom:auto; padding-top:32px; }
.slagboom{ display:block; width:80px; height:2px; background:var(--fg); transform-origin:left center; margin:88px 0 32px; }
.leeg-kop{ font-size:var(--fs-h1); max-width:20ch; position:relative; }
.leeg-sub{ font-size:var(--fs-h2); font-weight:600; font-variation-settings:"wdth" 108; letter-spacing:-.01em; line-height:var(--lh-kop); color:var(--fg-zacht); margin-top:24px; max-width:20ch; }
@media (min-width:900px){
  .leeg-blok{ padding-left:200px; padding-top:48px; }
  .slagboom{ position:absolute; left:0; top:calc(48px + 2.12 * var(--fs-h1)); width:160px; margin:0; }
}

/* 17:30 · asymmetrische split met dagbalk */
.dag-in{ padding-block:var(--sectie-pad) 0; }
.dag-tekst{ padding-bottom:var(--sectie-pad); }
.dag-kop{ font-size:var(--fs-h1); margin-top:32px; }
.dag-kop .cijfer{ font-variation-settings:"wdth" 66; letter-spacing:.02em; }
.dag-beeld{ aspect-ratio:343 / 220; }
.dag-beeld img{ object-position:50% 60%; }
.dag-tekst .tekst{ margin-top:40px; }
.dag-links{ display:flex; flex-wrap:wrap; gap:12px 32px; margin-top:24px; }
.dag-links .tekstlink{ font-weight:600; }
@media (min-width:900px){
  .dag-in{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gut); align-items:start; padding-block:0; }
  .dag-tekst{ grid-column:1 / 7; padding-block:var(--sectie-pad); min-height:calc(100vh - var(--boven)); display:flex; flex-direction:column; justify-content:center; }
  .dag-beeld{ grid-column:7 / 13; aspect-ratio:auto; height:calc(100vh - var(--boven)); position:sticky; top:var(--boven); margin-right:calc(-1 * (50vw - 100% - var(--gut) / 2)); align-self:start; }
}

/* Dagbalk en duurbalken (ook op onderhoud.html) */
.dagbalk{ margin-top:48px; --uren:12; }
.db-as{ position:relative; height:18px; margin-top:28px; }
.db-balk{ position:absolute; inset:0; background:var(--fg); transform-origin:left center; }
.db-tick{ position:absolute; top:-6px; bottom:-6px; width:1px; background:var(--fg); left:calc(var(--u) / var(--uren) * 100%); }
.db-tick span,.db-nu span{ position:absolute; top:-24px; font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:var(--fg-zacht-2); }
.db-tick span{ right:4px; }
.db-nu{ position:absolute; top:0; height:18px; width:6px; background:var(--geel); left:100%; transform:translateX(-100%); }
.db-nu span{ right:0; color:var(--fg); }
.db-ticks{ position:relative; height:8px; }
.db-ticks i{ position:absolute; top:0; width:1px; height:8px; background:var(--lijn-s); left:calc(var(--i) / var(--uren) * 100%); }
.db-ticks i:last-child{ transform:translateX(-1px); }
.db-labels{ display:flex; justify-content:space-between; margin-top:6px; font-size:.6875rem; font-weight:600; letter-spacing:.14em; color:var(--fg-zacht-2); }
.db-duur{ margin-top:16px; display:grid; gap:16px; }
.duur{ position:relative; height:10px; }
.duur-balk{ position:absolute; top:0; bottom:0; left:calc(var(--van) / var(--uren) * 100%); width:calc((var(--tot) - var(--van)) / var(--uren) * 100%); background:var(--fg); transform-origin:left center; }
.duur-balk.duur-open{ background:repeating-linear-gradient(45deg, var(--raster) 0 2px, transparent 2px 6px); }
.hfd[data-thema="inkt"] .duur-balk.duur-open{ background:repeating-linear-gradient(45deg, var(--papier-zacht) 0 2px, transparent 2px 6px); }
.duur-label{ position:absolute; top:50%; transform:translateY(-50%); right:calc((1 - var(--van) / var(--uren)) * 100% + 12px); font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; color:var(--fg-zacht-2); }
.duur-label.duur-label-na{ right:auto; left:calc(var(--tot) / var(--uren) * 100% + 12px); }
@media (max-width:639.98px){ .duur-label{ font-size:.625rem; letter-spacing:.08em; } .db-tick span{ font-size:.625rem; } }

/* 19:40 · tabel plus formulier (raster) */
.sleutel-raster{ display:grid; gap:48px; margin-top:32px; position:relative; }
.sleutel-tijden .adres{ margin-top:20px; font-weight:600; }
.sleutel-tijden [data-open-status]{ margin-top:8px; color:var(--fg-zacht-2); }
.sleutel-vorm h2{ margin-bottom:28px; }
.sleutel-onder{ margin-top:48px; padding-top:20px; border-top:1px solid var(--lijn-s); color:var(--fg); }
.splits-stam{ display:none; }
@media (min-width:900px){
  .sleutel-raster{ grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gut); margin-top:40px; }
  .sleutel-tijden{ grid-column:1 / 6; }
  .sleutel-vorm{ grid-column:7 / 13; }
  .splits-stam{ display:block; position:absolute; left:calc(50% - 3px); top:calc(var(--sectie-pad) + var(--bovenlijn)); width:6px; height:320px; background:var(--fg); transform-origin:top center; }
  .js .splits-stam[data-fx="splits"]:not(.fx-klaar){ transform:scaleY(0); }
}

/* 20:00 · deur dicht (scrub-sluiting) */
.dicht-tekst{ padding-bottom:0; }
.dicht-kop{ font-size:var(--fs-h2); margin-top:32px; }
.dicht-kop .r1,.dicht-kop .r2{ display:block; }
.dicht-kop .r2{ color:var(--fg-zacht); }
.afgevinkt{ display:flex; align-items:center; gap:20px; margin-top:40px; font-size:var(--fs-h3); font-weight:600; font-variation-settings:"wdth" 108; letter-spacing:-.01em; }
.afgevinkt .vink{ width:40px; height:45px; flex:0 0 40px; }
.dicht-tekst .tekstlink{ display:inline-block; margin-top:28px; }
.dicht-beeld{ aspect-ratio:343 / 220; margin-bottom:40px; }
@media (max-width:899.98px){ .dicht-in{ display:flex; flex-direction:column; } .dicht-beeld{ order:-1; } }
.dicht-beeld img{ object-position:50% 60%; }
.deur{
  position:absolute; inset:0; background-color:var(--inkt-2);
  background-image:linear-gradient(to bottom, var(--raster) 0 1px, transparent 1px 48px); background-size:100% 48px; background-repeat:repeat-y; background-position:0 47px;
  transform:translateY(-100%);
}
.deur::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--papier); }
@media (min-width:900px){
  .dicht{ height:160vh; }
  .dicht-plak{ position:sticky; top:var(--boven); height:60svh; min-height:480px; }
  .dicht-in{ height:100%; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gut); padding-block:48px 0; }
  .dicht-tekst{ grid-column:1 / 7; }
  .dicht-beeld{ grid-column:7 / 13; aspect-ratio:auto; margin:0; margin-right:calc(-1 * (50vw - 100% - var(--gut) / 2)); height:100%; }
  .afgevinkt .vink{ width:64px; height:72px; flex-basis:64px; }
}

/* ───────────────────────── 15. Subpagina-componenten ───────────────────────── */
/* Openingsblok: bovenlijn, één tijdlabel, H1 in twee tonen, intro */
.opening .hfd-in{ min-height:480px; }
.opening h1 .r1,.opening h1 .r2{ display:block; }
.opening h1 .r2{ color:var(--fg-zacht); }
.opening h1 + .intro{ margin-top:24px; }
.opening-raster{ display:grid; gap:40px; }
@media (min-width:900px){
  .opening-raster{ grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gut); }
  .opening-tekst{ grid-column:1 / 7; }
  .opening-beeld{ grid-column:8 / 13; }
}
/* Specificatietabel */
.spec{ display:grid; margin-top:40px; border-top:1px solid var(--lijn-s); border-bottom:1px solid var(--lijn-s); }
.spec > div{ padding:16px 0; border-top:1px solid var(--lijn-k); }
.spec > div:first-child{ border-top:0; }
.spec dt{ font-size:var(--fs-label); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-zacht-2); margin-bottom:6px; }
.spec dd{ font-size:var(--fs-tekst); }
.spec dd.cijfer{ font-size:var(--fs-cijfer); line-height:1.1; }
@media (min-width:640px){
  .spec{ grid-auto-flow:column; grid-auto-columns:1fr; }
  .spec > div{ border-top:0; border-left:1px solid var(--raster); padding:20px 24px; }
  .spec > div:first-child{ border-left:0; padding-left:0; }
}
/* Index met twee kolommen (reparatie) */
.index{ border-top:1px solid var(--lijn-s); }
.index li{ display:grid; gap:4px 24px; padding:18px 0; border-bottom:1px solid var(--lijn-k); }
.index li b{ font-weight:600; font-size:var(--fs-h3); font-variation-settings:"wdth" 108; letter-spacing:-.01em; }
.index li span{ color:var(--fg-zacht); }
@media (min-width:640px){ .index li{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); align-items:baseline; } }
/* Lijst met 1 px lijnen (keuringslijst, wat erin zit) */
.lijst{ border-top:1px solid var(--lijn-s); }
.lijst li{ padding:16px 0; border-bottom:1px solid var(--lijn-k); }
.lijst-2k{ display:grid; gap:0 var(--gut); }
@media (min-width:640px){ .lijst-2k{ grid-template-columns:1fr 1fr; } }
/* FAQ */
.faq details{ position:relative; }
.faq details + details{ margin-top:8px; }
.faq summary{ list-style:none; cursor:pointer; position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:20px 0 20px; font-size:var(--fs-h3); font-weight:600; font-variation-settings:"wdth" 108; letter-spacing:-.01em; line-height:1.2; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--fg); transform-origin:left; }
.faq summary .plus{ position:relative; flex:0 0 16px; width:16px; height:16px; margin-top:.35em; transition:transform var(--dur-kort) var(--ease-in-klik); }
.faq summary .plus::before,.faq summary .plus::after{ content:""; position:absolute; background:currentColor; }
.faq summary .plus::before{ left:0; right:0; top:7px; height:2px; }
.faq summary .plus::after{ top:0; bottom:0; left:7px; width:2px; }
.faq details[open] summary .plus{ transform:rotate(45deg); }
.faq details > p,.faq details > div{ padding:0 0 24px; max-width:60ch; }
.faq summary:focus-visible{ outline:2px solid var(--fg); outline-offset:4px; }
/* Maatlat (banden) */
.maatlat{ position:relative; height:18px; margin-top:48px; }
.maatlat-lijn{ position:absolute; left:0; top:8px; height:1px; width:0; background:var(--fg); }
.maatlat-streep{ position:absolute; top:-6px; bottom:-6px; width:2px; background:var(--geel); left:calc(var(--mm) / var(--max) * 100%); }
.maatlat-streep span{ position:absolute; top:-26px; left:8px; font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:var(--fg); }
.maatlat-ticks{ position:absolute; inset:0; }
.maatlat-ticks i{ position:absolute; top:4px; width:1px; height:8px; background:var(--lijn-s); left:calc(var(--i) / var(--max) * 100%); }
.maatlat-labels{ display:flex; justify-content:space-between; margin-top:28px; font-size:.6875rem; font-weight:600; letter-spacing:.14em; color:var(--fg-zacht-2); }
/* Naamswijziging op de lijn (over-ons) / splitsing (afspraak) */
.splitsing{ position:relative; display:grid; gap:32px; }
.splitsing-stam{ display:none; }
@media (min-width:900px){
  .splitsing{ grid-template-columns:1fr 1fr; gap:calc(var(--gut) * 3); }
  .splitsing-stam{ display:block; position:absolute; left:calc(50% - 3px); top:0; width:6px; height:100%; background:var(--fg); transform-origin:top center; }
  .js .splitsing-stam[data-fx="splits"]:not(.fx-klaar){ transform:scaleY(0); }
}
/* Kaartpaneel (contact) */
.kaart{ position:relative; background:var(--vlak-2); }
.kaart iframe{ display:block; width:100%; height:260px; border:0; filter:grayscale(1) contrast(.9); }
.bord{ position:absolute; left:16px; bottom:16px; width:min(420px, calc(100% - 32px)); background:var(--inkt); color:var(--papier); padding:20px 24px 20px; border-top:6px solid var(--raster); }
.bord[data-open="open"]{ border-top-color:var(--geel); }
.bord p{ margin:0; }
.bord .bord-adres{ font-weight:600; }
.bord [data-open-status]{ margin-top:6px; font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--papier-zacht); }
.bord a{ display:inline-block; margin-top:8px; text-decoration:underline; text-underline-offset:3px; }
@media (min-width:900px){ .kaart iframe{ height:480px; } .bord{ left:24px; bottom:24px; } }
.weekrail{ border-top:1px solid var(--lijn-s); }
.weekrail li{ display:grid; grid-template-columns:7.5rem 1fr; align-items:center; gap:16px; padding:10px 0; border-bottom:1px solid var(--lijn-k); }
.weekrail .rail{ position:relative; height:18px; }
.weekrail .rail i{ position:absolute; top:0; bottom:0; background:var(--inkt); left:calc(var(--van) / 12 * 100%); width:calc((var(--tot) - var(--van)) / 12 * 100%); }
.weekrail .rail-leeg{ color:var(--fg-zacht-2); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
/* Insluitvlak (Calendly) */
.insluit{ margin-top:48px; min-height:360px; border:1px solid var(--lijn-s); padding:32px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
@media (min-width:900px){ .insluit{ min-height:760px; } }
/* Slotregel voor de voet op subpagina's */
.slotregel .hfd-in{ padding-block:64px; }
.slotregel p{ font-size:var(--fs-h3); font-weight:600; font-variation-settings:"wdth" 108; letter-spacing:-.01em; max-width:32ch; }
/* Statement-rij (één regel op leegte op subpagina's) */
.regel .hfd-in{ min-height:min(60svh, 560px); display:flex; flex-direction:column; justify-content:center; }
.regel h2{ font-size:var(--fs-h1); max-width:20ch; }
.regel h2 + p{ font-size:var(--fs-intro); max-width:44ch; margin-top:24px; }
.deel{ display:inline-block; }

/* ───────────────────────── 16. Voet ───────────────────────── */
.voet{ border-top:1px solid var(--papier-lijn); }
.voet-in{ width:var(--kolom); margin-inline:auto; padding-block:64px 32px; display:grid; gap:40px; }
.voet-merk img{ width:min(100%, 260px); height:auto; }
.voet-oud{ margin-top:16px; color:var(--papier-zacht); font-size:var(--fs-tekst); }
.voet h2{ font-size:var(--fs-label); font-weight:600; font-variation-settings:"wdth" 100; letter-spacing:.16em; text-transform:uppercase; line-height:1.3; margin-bottom:16px; color:var(--papier); }
.voet address{ font-style:normal; line-height:1.6; }
.voet a{ display:inline-block; padding-block:12px; margin-block:-12px; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.voet a:hover{ text-decoration-thickness:2px; }
.voet-tijden li{ padding:6px 0; }
.voet-nav li{ padding:2px 0; }
.voet-nav a{ display:inline-flex; align-items:center; min-height:44px; padding-block:0; margin-block:0; }
.voet-open{ margin-top:12px; font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.voet-nieuwsbrief p{ margin-bottom:16px; max-width:40ch; }
.voet-nb-rij{ display:flex; flex-wrap:wrap; gap:8px; }
.voet-nb-rij input{ flex:1 1 220px; min-height:48px; padding:0 16px; border:1px solid var(--papier-lijn-sterk); border-radius:0; background:var(--inkt-2); color:var(--papier); }
.voet-nb-rij input::placeholder{ color:var(--papier-zacht); opacity:1; }
.voet-nb-rij input:focus-visible{ outline:2px solid var(--papier); outline-offset:-2px; }
.voet-nieuwsbrief .veld-fout,.voet-nieuwsbrief .formulier-melding{ margin-top:12px; border-color:var(--papier); }
.voet-onder{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-top:24px; border-top:1px solid var(--papier-lijn); font-size:.9375rem; color:var(--papier-zacht); }
.voet-onder a{ color:var(--papier); }
.voet-onder-links{ display:flex; gap:24px; }
@media (min-width:640px){ .voet-in{ grid-template-columns:1fr 1fr; } .voet-merk{ grid-column:1 / -1; } .voet-nieuwsbrief{ grid-column:1 / -1; } }
@media (min-width:900px){
  .voet-in{ grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gut); padding-block:96px 32px; }
  .voet-merk{ grid-column:1 / 5; }
  .voet-kolom:nth-of-type(1){ grid-column:5 / 8; }
  .voet-kolom:nth-of-type(2){ grid-column:8 / 11; }
  .voet-kolom:nth-of-type(3){ grid-column:11 / 13; }
  .voet-nieuwsbrief{ grid-column:1 / 7; margin-top:24px; }
}

/* ───────────────────────── 17. 404 ───────────────────────── */
.p-404 .hfd-in{ min-height:calc(100svh - var(--boven)); display:flex; flex-direction:column; justify-content:center; }

/* ───────────────────────── 18. Reduced motion: alles direct in eindstand ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition-duration:0s !important; animation-duration:0s !important; }
  .js .bovenlijn[data-fx="lijn"]:not(.fx-klaar),.js .splits-stam[data-fx="splits"]:not(.fx-klaar),.js .splitsing-stam[data-fx="splits"]:not(.fx-klaar){ transform:none; }
  .js .reis:not(.fx-klaar){ clip-path:none; }
  [data-kenteken-uit]::before{ transform:scaleX(1); }
  .scene{ height:auto; }
  .scene-plak{ position:static; height:auto; overflow:visible; }
  .scene-plak .hfd-in{ height:auto; display:block; padding-block:var(--sectie-pad); }
  .scene-tekst{ height:auto; width:100%; display:block; }
  .klok{ font-size:var(--fs-h1); margin-top:32px; }
  .klok::after{ content:" tot 20:00"; }
  .scene-as{ display:none; }
  .scene-foto{ position:static; margin:40px 0 0; display:grid; gap:0; }
  .scene-foto img{ aspect-ratio:16 / 10; height:auto; }
  .reis{ position:static; transform:none; max-width:none; padding:20px 0; border-bottom:1px solid var(--lijn-k); background:transparent; color:var(--fg); }
  .reis::before{ display:none; }
  .reis-label{ display:block; font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-zacht-2); margin-bottom:6px; font-variation-settings:"wdth" 100; }
  .dicht{ height:auto; }
  .dicht-plak{ position:static; height:auto; }
  .dicht-in{ height:auto; padding-block:var(--sectie-pad); }
  .dicht-beeld{ height:auto; aspect-ratio:4 / 5; }
  .deur{ transform:none; }
  .maatlat-lijn{ width:100%; }
}

/* ── aanvullingen subpagina's (7 okt) ─────────────────────────────────────── */
.bord:has([data-open="open"]){ border-top-color:var(--geel); }
.over-logo{ display:block; width:min(200px, 50%); height:auto; margin-top:32px; }
.p-404 main{ min-height:70vh; }
.credits th[scope="row"]{ font-weight:400; }