/* =========================================================================
   BobDirect, huisstijl "Nachtroute", VARIANT B ("Eurobob-vorm")
   Stylesheet voor de voorpagina (index.html) in deze variant.
   Opbouw: vaste kopbalk, hoge foto-opening, rekenblok met lichte
   formulierkaart direct daarna, "Zo werkt het" als route over de breedte,
   chauffeur, wanneer en waar (tijden en telefoon), footer in kolommen.
   Alles in de gewone flow en CSS grid, geen absolute opmaak.
   ========================================================================= */

:root{
  /* Avond (donker) */
  --bos:#0F1714;
  --bos-2:#19231F;
  --bos-3:#212D28;
  --bos-4:#2A3832;
  --bos-lijn:#3A4A43;       /* lijnen op donker */
  --rand:#74837B;
  --champagne:#D9C29A;
  --champagne-hover:#E6D3B0;
  --wit:#F2F4F1;
  --wit-zacht:#CBD3CF;
  --mist:#A0ACA6;

  /* Licht (formulierkaart) */
  --papier:#FFFFFF;
  --tekst:#1F2A25;          /* 14,8:1 op wit */
  --leisteen:#4E5A54;       /* 7,2:1 op wit */
  --bosgroen:#285443;       /* 8,6:1 op wit, focus op licht */
  --brons:#7A5C2A;
  --lijn-licht:#C9D4CE;
  --lijn-zacht:#E3E8E5;
  --vlak-licht:#F3F6F4;
  --placeholder-licht:#66726C; /* 5,0:1 op wit */

  /* Status */
  --status-live:#4ADE80;
  --status-maybe:#F5C451;
  --status-limited:#A0ACA6;

  /* WhatsApp: alleen hier groen, altijd donkere tekst */
  --wa-green:#25D366;
  --wa-green-dark:#1FBF5B;
  --wa-text:#0B1F14;

  --radius-card:16px;
  --radius-ctrl:10px;
  --kop-h:64px;
  --balk-h:80px;            /* vaste balk onderin, inclusief rand */
  --font-display:'Archivo',sans-serif;          /* koppen 100%/700, normale letters; 125% en hoofdletters alleen in het logo */
  --font-body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
/* scroll-padding: een veld met focus of een anker valt nooit onder de vaste
   kopbalk of de vaste balk onderin */
html{background:var(--bos);-webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:calc(var(--kop-h) + 16px);
  scroll-padding-bottom:calc(var(--balk-h) + 20px + env(safe-area-inset-bottom));}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
body{background:var(--bos);color:var(--wit);font-family:var(--font-body);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;padding-bottom:calc(var(--balk-h) + env(safe-area-inset-bottom));}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
img{max-width:100%;}
:focus-visible{outline:3px solid var(--champagne);outline-offset:3px;}

.container{width:100%;max-width:1240px;margin:0 auto;padding-left:20px;padding-right:20px;}

/* Koppen: Archivo 100%, 700, normale letters (breed en hoofdletters alleen in het logo) */
/* word-spacing: Archivo heeft een smalle spatie, zo staan de woorden wat ruimer */
h1,h2,h3{font-family:var(--font-display);font-stretch:100%;font-weight:700;text-transform:none;letter-spacing:-0.01em;word-spacing:0.06em;}
.label,.eyebrow{display:block;font-size:0.8125rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--champagne);}
/* tweede regel van een kop, in champagne zoals de openingskop */
.h-line{display:block;color:var(--champagne);}

/* Naar het formulier springen met het toetsenbord */
.skip-link{position:absolute;left:12px;top:-80px;z-index:100;background:var(--champagne);color:var(--bos);font-weight:700;padding:12px 16px;border-radius:var(--radius-ctrl);}
.skip-link:focus{top:12px;}

/* ---------- Knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:var(--radius-ctrl);font-family:var(--font-body);font-weight:700;font-size:1.0625rem;line-height:1.2;text-align:center;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;}
.btn-solid{background:var(--champagne);color:var(--bos);border:0;}
.btn-solid:hover{background:var(--champagne-hover);}
.btn-ghost{background:rgba(15,23,20,0.45);color:var(--wit);border:1.5px solid rgba(242,244,241,0.6);}
.btn-ghost:hover{background:rgba(15,23,20,0.7);border-color:var(--wit);}

/* =========================================================================
   1. Vaste kopbalk
   ========================================================================= */
.topbar{position:sticky;top:0;z-index:40;background:var(--bos);border-bottom:1px solid var(--bos-4);}
.topbar-inner{display:flex;align-items:center;gap:14px;min-height:var(--kop-h);}

.brand{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;padding:6px 0;font-family:var(--font-display);font-stretch:125%;font-weight:800;font-size:0.95rem;letter-spacing:0.01em;text-transform:uppercase;color:var(--wit);}
.brand .brand-logo{width:30px;height:30px;flex-shrink:0;display:block;}
.brand .accent{font-weight:500;color:var(--champagne);}

.topnav{display:none;}

/* Status: rustige regel met gekleurde stip */
.status-pill{margin-left:auto;min-width:0;display:flex;align-items:center;gap:8px;font-size:0.875rem;font-weight:700;line-height:1.3;color:var(--wit);white-space:nowrap;}
.status-dot{width:10px;height:10px;border-radius:50%;background:var(--status-limited);flex-shrink:0;}
.status-pill.live .status-dot{background:var(--status-live);}
.status-pill.maybe .status-dot{background:var(--status-maybe);}
.status-pill.limited .status-dot{background:var(--status-limited);}
@media (max-width:479px){
  /* Hooguit 2 regels (Prosper, 2026-11-03): afbreken alleen op de vaste plek (.nw = stukje dat
     heel blijft, zie applyStatus), en .smal maakt het blok zo breed als de langste regel */
  .status-pill{white-space:normal;align-items:flex-start;font-size:0.8125rem;}
  .status-pill .nw{white-space:nowrap;}
  #statusText.smal{display:block;width:min-content;}
  .status-pill .status-dot{margin-top:4px;}
}
@media (max-width:374px){
  .topbar-inner{gap:10px;}
  .status-pill{font-size:0.75rem;gap:6px;}
  .status-pill .status-dot{width:8px;height:8px;}
}
@media (max-width:339px){
  .status-pill .nw{white-space:normal;}
  #statusText.smal{width:auto;}
}
@media (max-width:359px){
  .brand{font-size:0.85rem;gap:7px;}
  .brand .brand-logo{width:26px;height:26px;}
  .topbar-inner{gap:10px;}
}

/* =========================================================================
   2. Opening met foto
   ========================================================================= */
/* Telefoon: de kopregel staat op 96px van de bovenkant, zodat de witte
   kaart al in het eerste scherm begint. De strook daarboven laat de stad
   zien; vlak voor de kopregel wordt de foto donker, zodat de champagne
   tekst genoeg contrast heeft. */
.opening{position:relative;display:flex;align-items:flex-end;
  background-color:var(--bos);
  background-image:
    linear-gradient(180deg,rgba(15,23,20,0.30) 0,rgba(15,23,20,0.22) 30px,rgba(15,23,20,0.86) 88px,rgba(15,23,20,0.90) 40%,rgba(15,23,20,0.96) 74%,var(--bos) 100%),
    url('/hero-photo.jpg');
  background-size:cover;background-position:50% 14%;background-repeat:no-repeat;}
.opening-inner{padding-top:96px;padding-bottom:28px;}

.opening h1{font-size:clamp(2rem,10.3vw,2.75rem);line-height:1.05;color:var(--wit);}
.opening h1 .accent-photo{display:block;color:var(--champagne);}
.opening-intro{margin-top:14px;font-size:1.0625rem;line-height:1.5;color:#E4E9E5;max-width:36ch;}

.opening-actions{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
.opening-actions .btn{width:100%;}
/* Telefoon en tablet: alleen de hoofdknop, het formulier staat er direct onder */
@media (max-width:899px){ .opening-actions .btn-ghost{display:none;} }

/* Drie korte punten als een route: ring, kleine ring, stip */
.trust-route{list-style:none;position:relative;display:flex;flex-direction:column;gap:10px;margin-top:22px;}
.trust-route::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;border-left:2px solid rgba(242,244,241,0.38);}
.trust-route li{position:relative;display:flex;align-items:center;gap:14px;font-weight:700;font-size:1rem;line-height:1.35;color:var(--wit);}
.route-mark{position:relative;display:block;flex-shrink:0;width:16px;height:16px;border-radius:50%;background:var(--bos);}
.mark-pickup{border:3.5px solid var(--champagne);}
.mark-stop{width:12px;height:12px;margin:0 2px;border:2.5px solid var(--wit);}
.mark-home{background:var(--champagne);}

/* =========================================================================
   3. Rit berekenen: kop, lichte formulierkaart, praktische info
   Telefoon: korte kop, kaart, dan de uitleg en het telefoonnummer (de
   kaart staat zo hoog mogelijk). Laptop: kop, uitleg en info links, kaart
   rechts.
   ========================================================================= */
/* zelfde achtergrond als de opening en de chauffeur: geen harde overgangen */
.ride{background:var(--bos);padding:24px 0 56px;}
.ride-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "card" "how";}
/* de uitleg staat in de stappen, het nummer in Wanneer en waar en de footer */
.ride-text{display:none;}
.ride-head{grid-area:head;margin-bottom:14px;}
.ride-head h2{font-size:clamp(1.75rem,6.4vw,2.75rem);line-height:1.1;color:var(--wit);margin-top:6px;}
/* "Bereken uw rit" op één regel, "uw rit" in champagne */
.ride-head h2 .h-line{display:inline;}
.ride-text{grid-area:text;margin-top:24px;font-size:1.0625rem;line-height:1.6;color:var(--wit-zacht);max-width:46ch;}

.ride-info{grid-area:info;margin-top:16px;padding-top:16px;border-top:1px solid var(--bos-lijn);}
.ride-call{font-size:1rem;color:var(--mist);}
.ride-call a{display:inline-block;padding:4px 0;font-weight:700;color:var(--champagne);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.ride-call a:hover{color:var(--champagne-hover);}

/* De witte kaart. min-width:0 zodat een tussenstop de kolom niet oprekt. */
.calc{grid-area:card;min-width:0;position:relative;z-index:1;background:var(--papier);color:var(--tekst);border-radius:var(--radius-card);border-top:4px solid var(--champagne);padding:18px 18px 22px;color-scheme:light;}
.calc :focus-visible{outline:3px solid var(--bosgroen);outline-offset:2px;}
.calc-legend{display:flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--leisteen);padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--lijn-zacht);}
.calc-legend > span:not(.lg-dash){display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.calc-legend .lg-dash{flex:1;min-width:8px;height:0;border-top:2px solid var(--lijn-licht);}
/* telefoon: geen uitleg van de punten, zodat het eerste veld hoger staat */
@media (max-width:719px){ .calc-legend{display:none;} }
.calc-legend .lg{display:block;width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.calc-legend .lg-pickup{border:3px solid var(--bosgroen);}
.calc-legend .lg-stop{width:10px;height:10px;border:2.5px solid var(--rand);}
.calc-legend .lg-home{background:var(--bosgroen);}

/* Het formulier */
.form-card{position:relative;min-width:0;color:var(--tekst);}
.field{position:relative;margin-bottom:16px;}
.field label{display:block;font-size:0.9375rem;font-weight:700;color:var(--tekst);margin-bottom:8px;}
.field-row{display:flex;align-items:center;min-width:0;background:var(--papier);border:1px solid var(--rand);border-radius:var(--radius-ctrl);padding:0 14px;transition:border-color .15s, box-shadow .15s;}
.field-row:focus-within{border-color:var(--bosgroen);box-shadow:0 0 0 2px var(--bosgroen);}

/* Routepunten in de velden: ring = ophalen, kleine ring = tussenstop, stip = thuis */
.field-row .dot-icon{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-right:12px;}
.field-row.from .dot-icon{background:transparent;border:3px solid var(--bosgroen);}
.field-row.stop .dot-icon{width:10px;height:10px;background:transparent;border:2.5px solid var(--rand);}
.field-row.to .dot-icon{background:var(--bosgroen);}
.field-row.kenteken .dot-icon{display:none;}
.field-row.kenteken input{font-family:var(--font-display);font-stretch:100%;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}

.field-row input{flex:1;min-width:0;width:100%;background:transparent;border:0;color:var(--tekst);font-size:1.0625rem;padding:14px 0;font-family:var(--font-body);}
.field-row input::placeholder{color:var(--placeholder-licht);opacity:1;letter-spacing:normal;}
.field-row.kenteken input::placeholder{font-family:var(--font-body);font-weight:400;font-stretch:100%;text-transform:none;}
.field-row input:focus{outline:none;}

.field textarea{display:block;width:100%;min-height:72px;resize:vertical;background:var(--papier);border:1px solid var(--rand);border-radius:var(--radius-ctrl);color:var(--tekst);font-size:1.0625rem;line-height:1.45;font-family:var(--font-body);padding:12px 14px;transition:border-color .15s, box-shadow .15s;}
.field textarea::placeholder{color:var(--placeholder-licht);opacity:1;}
.field textarea:focus{outline:none;border-color:var(--bosgroen);box-shadow:0 0 0 2px var(--bosgroen);}

/* Adres-suggesties */
.suggestions{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--papier);border:1px solid var(--rand);border-radius:var(--radius-ctrl);overflow:hidden;z-index:10;display:none;box-shadow:0 14px 30px rgba(15,23,20,0.22);}
.suggestions.open{display:block;}
.suggestions button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--tekst);font-size:0.9375rem;line-height:1.35;padding:13px 14px;cursor:pointer;border-bottom:1px solid var(--lijn-zacht);}
.suggestions button:last-child{border-bottom:0;}
.suggestions button:hover,.suggestions button:focus-visible{background:var(--vlak-licht);}
.suggestions button:focus-visible{outline-offset:-3px;}
.suggestions .empty{padding:12px 14px;font-size:0.9rem;line-height:1.45;color:var(--leisteen);}
.suggestions .adres-hulp a{color:var(--tekst);font-weight:600;text-decoration:underline;}

/* Vraag of opmerking: ingeklapt, een regel zoals "+ Tussenstop toevoegen" */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.opmerkingen > summary{display:inline-flex;align-items:center;min-height:44px;list-style:none;color:var(--bosgroen);font-size:0.9375rem;font-weight:700;cursor:pointer;}
.opmerkingen > summary::-webkit-details-marker{display:none;}
.opmerkingen > summary:hover{text-decoration:underline;text-underline-offset:3px;}
.opmerkingen[open] > summary{margin-bottom:6px;}

/* Tussenstops */
.stops{margin-bottom:2px;}
.stop-row{position:relative;display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:12px;}
.stop-row .field-row{flex:1;min-width:0;margin-bottom:0;}
.stop-remove{flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-ctrl);border:1px solid var(--rand);background:var(--papier);color:var(--tekst);font-size:1.25rem;line-height:1;cursor:pointer;}
.stop-remove:hover{background:var(--vlak-licht);}
.drag-handle{flex-shrink:0;width:30px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--leisteen);cursor:grab;touch-action:none;border-radius:8px;}
.drag-handle:hover{background:var(--vlak-licht);color:var(--tekst);}
.drag-handle:active{cursor:grabbing;}
.stop-row.dragging .field-row,.stop-row.dragging .stop-remove{opacity:0.35;}
.stop-row-placeholder{border:1.5px dashed var(--rand);border-radius:var(--radius-ctrl);margin-bottom:12px;}
.stop-row-floating{position:absolute;z-index:50;pointer-events:none;box-shadow:0 14px 30px rgba(15,23,20,0.25);border-radius:var(--radius-ctrl);background:var(--papier);}
.add-stop{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--bosgroen);font-size:0.9375rem;font-weight:700;padding:4px 0;margin:0 0 16px;cursor:pointer;}
.add-stop:hover{text-decoration:underline;text-underline-offset:3px;}

/* Hoofdknop van het formulier */
.btn-primary{display:block;width:100%;min-height:56px;text-align:center;background:var(--champagne);color:var(--bos);font-family:var(--font-body);font-weight:700;font-size:1.0625rem;padding:15px;border:1px solid #8F7440;border-radius:var(--radius-ctrl);cursor:pointer;transition:background-color .15s;}
.btn-primary:hover{background:#E3CEA9;}
.btn-primary:disabled{opacity:0.55;cursor:not-allowed;}

/* Meldingen */
.form-error{margin-top:10px;font-size:0.9rem;line-height:1.45;padding:10px 12px;border-radius:var(--radius-ctrl);color:#8A2E22;background:#FBEDEA;border:1px solid #E3B5AD;display:none;}
.form-error.show{display:block;}
.form-error a{color:inherit;font-weight:700;text-decoration:underline;white-space:nowrap;}
.kenteken-hint{margin-top:8px;font-size:0.875rem;line-height:1.45;padding:10px 12px;border-radius:var(--radius-ctrl);border:1px solid var(--lijn-licht);background:var(--vlak-licht);color:var(--leisteen);display:none;}
.kenteken-hint.show{display:block;}
.kenteken-hint.found{color:#1D5A3A;background:#E8F3EC;border-color:#9CC7AE;}
.kenteken-hint.notfound{color:#8A2E22;background:#FBEDEA;border-color:#E3B5AD;}

/* Nu / later */
.plan-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;background:transparent;border:1.5px solid var(--bosgroen);color:var(--bosgroen);font-family:var(--font-body);font-size:0.9375rem;font-weight:700;padding:12px;border-radius:var(--radius-ctrl);cursor:pointer;margin:0 0 16px;}
.plan-toggle:hover{background:var(--vlak-licht);}
.plan-toggle svg{width:16px;height:16px;flex-shrink:0;}
.plan-toggle.actief{border-style:solid;border-color:var(--rand);color:var(--leisteen);}
.when-field{display:none;}
.when-field.show{display:block;}
/* datum breder dan tijd: de datum met kalendericoon heeft meer ruimte nodig */
.when-later{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:8px;}
.when-later .field-row{padding:0 12px;}
.when-later input,.when-later select{flex:1;min-width:0;width:100%;background:transparent;border:0;color:var(--tekst);font-size:1.0625rem;padding:13px 0;font-family:var(--font-body);color-scheme:light;}
.when-later select option{background:var(--papier);color:var(--tekst);}
.when-later input:focus,.when-later select:focus{outline:none;}

/* ---------- Datum- en tijdkiezer in huisstijl (2026-10-28) ----------
   De opengeklapte kalender en tijdlijst van de browser waren grijs en
   blauw. Datum: het script onderin index.html verbergt het echte
   datumveld (dat blijft de bron voor de berekening) en zet er een knop
   met een eigen kalender voor in de plaats. Tijd: in Chrome en Edge
   (vanaf 135, ook op Android) krijgt de lijst de huisstijl via
   appearance:base-select. Safari, Firefox en de iPhone houden hun eigen
   keuzelijst (op de iPhone het vertrouwde draaiwiel). */
.when-later{position:relative;}
.when-later input.dk-bron{display:none;}
/* De knop vult het hele veld, net als het oude datumveld */
.dk-knop{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -12px;padding:13px 12px;min-height:48px;background:transparent;border:0;border-radius:var(--radius-ctrl);color:var(--tekst);font-family:var(--font-body);font-size:1.0625rem;line-height:1.3;font-variant-numeric:tabular-nums;text-align:left;cursor:pointer;}
.dk-knop:focus{outline:none;}
.dk-knop .dk-tekst{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dk-knop.leeg .dk-tekst{color:var(--placeholder-licht);}
.dk-knop svg{width:20px;height:20px;flex-shrink:0;color:var(--tekst);}
/* zolang de kalender open is, blijft het datumveld groen omrand */
.field-row.dk-open{border-color:var(--bosgroen);box-shadow:0 0 0 2px var(--bosgroen);}

/* De kalender: zweeft onder het datumveld, binnen de breedte van de kaart */
.dk-kalender{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:100%;max-width:22rem;background:var(--papier);color:var(--tekst);border:1px solid var(--lijn-licht);border-radius:var(--radius-ctrl);box-shadow:0 14px 30px rgba(15,23,20,0.22);padding:10px 10px 12px;}
.dk-kalender[hidden]{display:none;}
.dk-kop{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px;}
.dk-maand{font-family:var(--font-display);font-stretch:100%;font-weight:700;font-size:1.0625rem;line-height:1.2;letter-spacing:-0.01em;color:var(--tekst);text-align:center;}
.dk-nav{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:var(--radius-ctrl);color:var(--bosgroen);cursor:pointer;}
.dk-nav svg{width:20px;height:20px;}
.dk-nav:hover:not(:disabled){background:#E3EEE8;}
.dk-nav:disabled{color:var(--lijn-licht);cursor:default;}
.dk-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;}
.dk-week + .dk-week{margin-top:2px;}
.dk-weekdag{display:block;padding:6px 0;font-size:0.75rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;text-align:center;color:var(--placeholder-licht);}
.dk-dag{position:relative;display:flex;align-items:center;justify-content:center;height:40px;min-width:0;padding:0;background:transparent;border:0;border-radius:8px;color:var(--tekst);font-family:var(--font-body);font-size:1rem;font-variant-numeric:tabular-nums;cursor:pointer;}
.dk-dag:hover:not(:disabled):not([aria-selected="true"]){background:#E3EEE8;}
/* Vandaag: vet met een stip eronder */
.dk-dag.dk-vandaag{font-weight:700;}
.dk-dag.dk-vandaag::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--brons);}
.dk-dag[aria-selected="true"]{background:var(--bosgroen);color:#FFFFFF;font-weight:700;}
.dk-dag[aria-selected="true"]::after{background:#FFFFFF;}
/* Buiten de planperiode: zichtbaar zwakker en niet te kiezen */
.dk-dag:disabled{color:#A9B3AE;cursor:default;}
.dk-dag:disabled::after{background:#C9B48F;}
.calc .dk-dag:focus-visible,.calc .dk-nav:focus-visible{outline:2px solid var(--bosgroen);outline-offset:1px;}
.dk-leeg{display:block;height:40px;}
@media (max-width:379px){
  .dk-kalender{padding:8px 6px 10px;}
  .dk-week{gap:1px;}
}
/* Liggende telefoon: de kalender past tussen de kopbalk en de onderkant;
   zolang hij open is, wijkt de vaste balk */
@media (max-height:500px){
  body:has(.dk-kalender:not([hidden])) .sticky-bar{display:none;}
  html:has(.dk-kalender:not([hidden])){scroll-padding-bottom:8px;}
  .dk-kalender{max-height:calc(100dvh - var(--kop-h) - 24px);overflow-y:auto;overscroll-behavior:contain;}
}

/* Tijd: de opengeklapte lijst in huisstijl; het dichte veld blijft gelijk */
@supports (appearance:base-select){
  .when-later select,.when-later select::picker(select){appearance:base-select;}
  /* het veld vult de hele rand, zodat de lijst precies onder het veld valt */
  .when-later select{display:flex;align-items:center;gap:8px;margin:0 -12px;padding:13px 12px;border:0;border-radius:var(--radius-ctrl);background:transparent;line-height:1.3;font-variant-numeric:tabular-nums;cursor:pointer;}
  /* open lijst: de focus zit dan op een tijd, het veld blijft groen omrand */
  .when-later .field-row:has(select:open){border-color:var(--bosgroen);box-shadow:0 0 0 2px var(--bosgroen);}
  /* pijltje zoals de gewone keuzelijst */
  .when-later select::picker-icon{content:"";width:7px;height:7px;margin:0 3px 4px auto;border-right:2px solid var(--tekst);border-bottom:2px solid var(--tekst);transform:rotate(45deg);transition:transform .15s;}
  .when-later select:open::picker-icon{transform:translateY(4px) rotate(225deg);}
  /* hooguit 300 px, en op een liggende telefoon niet hoger dan er ruimte is */
  .when-later select::picker(select){margin-block:6px;padding:4px;max-block-size:stretch;block-size:calc-size(max-content, min(size, 300px));overflow-y:auto;background:var(--papier);color:var(--tekst);border:1px solid var(--lijn-licht);border-radius:var(--radius-ctrl);box-shadow:0 14px 30px rgba(15,23,20,0.22);}
  .when-later select option{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:6px;font-family:var(--font-body);font-size:1rem;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;}
  .when-later select option::checkmark{display:none;}
  .when-later select option:hover{background:#E3EEE8;}
  .when-later select option:checked{background:var(--bosgroen);color:#FFFFFF;font-weight:700;}
  .when-later select option:focus-visible{outline:2px solid var(--bosgroen);outline-offset:-2px;}
  .when-later select option:checked:focus-visible{outline-color:#FFFFFF;outline-offset:-4px;}
}

/* Wissen */
.form-clear{display:none;width:100%;min-height:48px;text-align:center;background:transparent;border:1px solid var(--rand);color:var(--leisteen);font-family:var(--font-body);font-weight:700;font-size:0.9375rem;padding:12px;border-radius:var(--radius-ctrl);cursor:pointer;margin:2px 0 10px;}
.form-clear.show{display:block;}
.form-clear:hover{background:var(--vlak-licht);color:var(--tekst);}

/* Prijsindicatie (de vaste balken regelt scroll-padding op html) */
.price-result{margin-top:22px;padding-top:20px;border-top:1px solid var(--lijn-licht);display:none;}
.price-result.show{display:block;}
.price-label{font-size:0.8125rem;font-weight:700;color:var(--leisteen);text-transform:uppercase;letter-spacing:0.14em;}
.price-range{font-family:var(--font-display);font-stretch:100%;font-weight:700;font-size:2.25rem;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--bosgroen);margin:6px 0 10px;}
.price-badge{display:none;font-size:0.8125rem;font-weight:700;color:var(--brons);background:#F4EEE2;border-radius:6px;padding:6px 10px;margin-bottom:12px;}
.price-sub{font-size:0.9375rem;color:var(--leisteen);margin-bottom:16px;line-height:1.55;}
.price-notice,.status-notice{display:none;font-size:0.9rem;color:#5A4410;background:#FBF3DC;border:0;border-left:3px solid #D9A520;border-radius:6px;padding:11px 13px;line-height:1.5;}
.price-notice{margin:-6px 0 16px;}
.status-notice{margin-bottom:18px;}
.price-notice.show,.status-notice.show{display:block;}
/* uitnodiging om alvast te plannen: rustig groen, geen waarschuwing */
.status-notice.info{color:#1F2A25;background:#E3EEE8;border-left-color:#285443;}

/* Akkoord + WhatsApp */
.akkoord{display:flex;align-items:flex-start;gap:12px;margin:16px 0 14px;font-size:0.9rem;line-height:1.55;color:var(--leisteen);cursor:pointer;}
.akkoord input{margin-top:2px;width:22px;height:22px;flex-shrink:0;cursor:pointer;accent-color:var(--bosgroen);}
.akkoord a{color:var(--bosgroen);font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:2px;}
.btn-row{display:flex;gap:10px;}
.btn-whatsapp{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;background:var(--wa-green);color:var(--wa-text);font-family:var(--font-body);font-weight:700;font-size:1.0625rem;padding:15px;border-radius:var(--radius-ctrl);text-align:center;}
.btn-whatsapp svg{fill:var(--wa-text);flex-shrink:0;}
.btn-whatsapp:hover{background:var(--wa-green-dark);}
/* Nog niet aangevinkt: rustig grijs, niet klikbaar */
.btn-whatsapp.disabled{background:var(--lijn-zacht);color:var(--leisteen);pointer-events:none;}
.btn-whatsapp.disabled svg{fill:var(--leisteen);}

/* =========================================================================
   4. Zo werkt het: vier haltes op een route
   Telefoon: onder elkaar langs een lijn. Laptop: over de breedte.
   ========================================================================= */
.how{grid-area:how;margin-top:40px;}
.section-head{margin:0 0 18px;}
.section-head h2{font-size:1.375rem;line-height:1.15;color:var(--wit);margin-top:4px;}

/* nummer en titel op één regel, uitleg eronder */
.route-steps{list-style:none;display:grid;max-width:480px;}
.route-step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline;padding:0 0 16px 38px;}
.route-step:last-child{padding-bottom:0;}
/* lijn naar de volgende halte */
.route-step::before{content:"";position:absolute;left:10px;top:28px;bottom:0;border-left:2px solid var(--rand);}
.route-step:last-child::before{display:none;}
.step-dot{position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--bos);box-sizing:border-box;}
.step-pickup .step-dot{border:4px solid var(--champagne);}
.step-stop .step-dot{width:14px;height:14px;left:4px;top:7px;border:3px solid var(--wit);}
.step-home .step-dot{background:var(--champagne);}
.step-no{display:block;font-family:var(--font-display);font-stretch:100%;font-weight:700;font-size:1rem;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--champagne);}
.route-step h3{font-size:1.0625rem;line-height:1.3;color:var(--wit);margin-bottom:2px;}
.route-step p{grid-column:1 / -1;font-size:0.9375rem;line-height:1.5;color:var(--wit-zacht);}

/* =========================================================================
   5. Chauffeur
   ========================================================================= */
.driver{padding:0 0 64px;}
.driver-card{display:grid;background:var(--bos-2);border:1px solid var(--bos-4);border-radius:var(--radius-card);overflow:hidden;}
.driver-card img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 16%;}
.driver-text{padding:24px 20px 26px;}
.driver-text .eyebrow{margin-bottom:10px;}
.driver-text h2{font-size:1.75rem;line-height:1.1;color:var(--wit);}
.driver-role{font-size:0.9375rem;font-weight:700;color:var(--mist);margin:6px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--bos-lijn);}
.driver-text > p:not(.driver-role){font-size:1.0625rem;line-height:1.6;color:#DDE3DF;margin-bottom:12px;}
.driver-text a.more{display:inline-block;margin-top:4px;padding:6px 0;font-weight:700;color:var(--champagne);text-decoration:underline;text-underline-offset:3px;}
.driver-text a.more:hover{color:var(--champagne-hover);}

/* App: kleine knop onderin bij het logo (Prosper, 2026-10-29: los blok
   onder "Wanneer en waar" voelde los). Op de pc alleen de link "App
   installeren" in de footer. */
.footer-app{display:inline-flex;align-items:center;gap:10px;margin-top:20px;min-height:44px;padding:8px 14px 8px 8px;background:var(--bos-2);border:1px solid var(--bos-4);border-radius:10px;font-weight:700;font-size:0.9375rem;color:var(--wit);}
.footer-app img{flex-shrink:0;width:28px;height:28px;display:block;border-radius:7px;}
.footer-app span{color:var(--champagne);}
.footer-app:hover{border-color:var(--rand);}
.footer-app-link{display:none;}

/* =========================================================================
   Veelgestelde vragen: uitklapbare regels met een lijn ertussen
   ========================================================================= */
.faq{padding:8px 0 64px;}
.faq-list{max-width:760px;border-top:1px solid var(--bos-lijn);}
.faq details{border-bottom:1px solid var(--bos-lijn);}
.faq summary{position:relative;display:block;list-style:none;padding:18px 40px 18px 0;font-weight:700;font-size:1.0625rem;line-height:1.4;color:var(--wit);cursor:pointer;}
.faq summary::-webkit-details-marker{display:none;}
/* plus wordt min als de vraag open staat; getekend met twee streepjes,
   niet met een teken (het minteken zit niet in het lettertype) */
.faq summary::before,.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:2px;margin-top:-1px;border-radius:1px;background:var(--champagne);transition:transform .2s;}
.faq summary::after{transform:rotate(90deg);}
.faq details[open] summary::after{transform:rotate(0deg);}
.faq summary:hover{color:var(--champagne-hover);}
.faq details p{padding:0 0 20px;font-size:1rem;line-height:1.6;color:var(--wit-zacht);max-width:62ch;}
.faq details a{color:var(--champagne);text-decoration:underline;text-underline-offset:3px;}
/* Vraag er niet bij: WhatsApp (pc: onder de kop, telefoon: onder de vragen) */
.faq-more{margin-top:28px;}
.faq-more p{font-size:1rem;color:var(--wit-zacht);margin-bottom:12px;}
.btn-wa{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--radius-ctrl);background:var(--wa-green);color:var(--wa-text);font-weight:700;font-size:1rem;}
.btn-wa:hover{background:var(--wa-green-dark);}
.btn-wa svg{width:20px;height:20px;fill:var(--wa-text);flex-shrink:0;}
@media (min-width:900px){
  .faq{padding:0 0 104px;}
  /* kop links, vragen rechts: geen lege rechterhelft */
  .faq .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:auto 1fr;column-gap:64px;align-items:start;}
  .faq .section-head{grid-column:1;grid-row:1;}
  .faq-list{grid-column:2;grid-row:1 / span 2;}
  .faq-more{grid-column:1;grid-row:2;margin-top:8px;}
  .faq-list{max-width:none;}
  .faq summary{font-size:1.125rem;padding:22px 48px 22px 0;}
  .faq details p{font-size:1.0625rem;}
}

/* =========================================================================
   6. Wanneer en waar: tijden voor de stadsfoto, met knop en telefoon
   Telefoon: onder elkaar. Laptop: tekst links, knop en telefoon rechts.
   ========================================================================= */
.closing{background-color:var(--bos);
  background-image:linear-gradient(180deg,var(--bos) 0%,rgba(15,23,20,0.84) 30%,rgba(15,23,20,0.84) 60%,var(--bos) 100%),url('/hero-photo.jpg');
  background-size:cover;background-position:50% 70%;padding:56px 0 60px;}
.closing-inner{display:grid;gap:28px;}
.closing-route{display:flex;align-items:center;}
.closing-route i{display:block;border-radius:50%;flex-shrink:0;}
.closing-route i:nth-child(1){width:18px;height:18px;border:4px solid var(--champagne);}
.closing-route i:nth-child(2){width:12px;height:12px;border:3px solid var(--wit);}
.closing-route i:nth-child(3){width:18px;height:18px;background:var(--champagne);}
.closing-route i + i{margin-left:56px;position:relative;}
.closing-route i + i::before{content:"";position:absolute;right:calc(100% + 6px);top:50%;width:44px;border-top:2px solid var(--rand);transform:translateY(-1px);}
.closing h2{font-size:clamp(1.75rem,6.4vw,2.75rem);line-height:1.1;color:var(--wit);margin-top:22px;}
.closing .ride-hours{margin-top:16px;font-size:1.125rem;line-height:1.55;color:var(--wit);max-width:40ch;}
.closing .ride-hours strong{font-weight:700;color:var(--champagne);white-space:nowrap;}
.closing .ride-note{margin-top:14px;font-size:0.9375rem;line-height:1.6;color:var(--wit-zacht);max-width:46ch;}
.closing-actions{display:flex;flex-direction:column;align-items:stretch;gap:24px;}
.closing-contact{padding-top:20px;border-top:1px solid rgba(242,244,241,0.28);}
.contact-label{display:block;font-size:0.8125rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--champagne);}
.contact-number{display:inline-flex;align-items:center;min-height:48px;font-family:var(--font-display);font-stretch:100%;font-weight:700;font-size:1.5rem;letter-spacing:0;color:var(--wit);text-decoration:underline;text-decoration-color:var(--champagne);text-decoration-thickness:2px;text-underline-offset:7px;white-space:nowrap;}
.contact-number:hover{color:var(--champagne-hover);}

/* =========================================================================
   7. Footer
   ========================================================================= */
.page-footer{background:var(--bos);border-top:1px solid var(--bos-4);padding:44px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 20px;}
.footer-brand{grid-column:1 / -1;}
@media (max-width:359px){ .footer-grid{grid-template-columns:1fr;} }
.brand-mark{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;font-size:1.05rem;color:var(--wit);}
.brand-mark .brand-logo{width:34px;height:34px;display:block;flex-shrink:0;}
.brand-mark .accent{font-weight:500;color:var(--champagne);}
.footer-slogan{margin-top:12px;font-size:1rem;color:var(--mist);}
.footer-head{font-size:0.8125rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--champagne);margin-bottom:12px;}
.footer-col ul{list-style:none;display:grid;gap:6px;}
.footer-col li{font-size:0.9375rem;line-height:1.6;color:var(--mist);}
.footer-col a{display:inline-block;padding:4px 0;color:var(--wit-zacht);text-decoration:underline;text-underline-offset:3px;}
.footer-col a:hover{color:var(--wit);}

/* =========================================================================
   Vaste balk onderin (WhatsApp-icoon en Bereken uw rit), alleen onder 900 px
   ========================================================================= */
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--bos);border-top:1px solid var(--bos-4);padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));}
.sticky-bar-inner{max-width:560px;margin:0 auto;display:flex;gap:10px;}
.sticky-call{flex-shrink:0;width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-ctrl);background:var(--bos-3);border:1px solid var(--rand);}
.sticky-call svg{width:21px;height:21px;stroke:var(--wit);}
.sticky-call:hover{background:var(--bos-4);}
/* WhatsApp als klein vierkant links, rekenknop groot (Prosper, 2026-10-28) */
.sticky-wa{background:var(--wa-green);border-color:var(--wa-green);}
.sticky-wa:hover{background:var(--wa-green-dark);}
.sticky-wa svg{width:24px;height:24px;fill:var(--wa-text);stroke:none;}
.sticky-ride{flex:1;display:flex;align-items:center;justify-content:center;min-height:54px;background:var(--champagne);color:var(--bos);font-weight:700;font-size:1.0625rem;border-radius:var(--radius-ctrl);}
.sticky-ride:hover{background:var(--champagne-hover);}

/* =========================================================================
   Telefoon en tablet staand (onder 900 px): rustiger begin (Prosper,
   2026-10-28). Het formulier staat direct onder de kop, niets staat dubbel
   in beeld, de stadsfoto krijgt een eigen strook. Laptop blijft gelijk.
   ========================================================================= */
@media (max-width:899px){
  /* Opening: alleen kopregel en intro; knoppen en de drie punten weg
     ("Direct een prijsindicatie" staat ook in stap 2) */
  .opening-actions,.trust-route{display:none;}
  /* Stad boven de kop. --strook is de hoogte van de strook boven de
     kopregel (lage schermen smaller, zodat het adresveld in beeld blijft).
     De fade is zacht en zakt door achter de kopregel en de intro, zodat het
     gebouw zichtbaar blijft (Prosper, 2026-10-28: fade lager en minder
     sterk, strook niet hoger). */
  .opening{--strook:clamp(128px,calc(17svh + 32px),182px);background-image:
      linear-gradient(180deg,rgba(15,23,20,0.05) 0,rgba(15,23,20,0.10) calc(var(--strook) - 30px),rgba(15,23,20,0.62) calc(var(--strook) + 30px),rgba(15,23,20,0.86) calc(var(--strook) + 120px),rgba(15,23,20,0.95) 85%,var(--bos) 100%),
      url('/hero-photo.jpg');}
  /* tekst omlaag tot vlak boven de lijn bij Ritprijs; het formulier blijft
     even hoog (Prosper, 2026-10-28) */
  .opening-inner{padding-top:var(--strook);padding-bottom:0;}
  .ride{padding-top:20px;}
  /* Rekenblok: alleen kop en kaart. De uitleg staat in "Zo werkt het",
     het telefoonnummer in "Wanneer en waar", de footer en de vaste balk. */
  .ride-info{display:none;}
  .ride{padding-bottom:8px;}
  /* dunne lijn tussen de intro en "Ritprijs" (Prosper, 2026-10-28) */
  .ride-head{padding-top:24px;border-top:1px solid var(--bos-lijn);}
  /* Chauffeur: kleinere foto, eerste blok na de stappen */
  .driver{padding-top:48px;}
  .driver-card img{aspect-ratio:4/3;object-position:50% 22%;}
  /* Wanneer en waar: de stad bovenaan in een eigen lichte strook, de tekst
     eronder op donker; de zin over "al onderweg" staat ook bij het formulier */
  .closing{padding-top:190px;background-position:50% 60%;
    background-image:linear-gradient(180deg,var(--bos) 0,rgba(15,23,20,0.20) 70px,rgba(15,23,20,0.25) 115px,rgba(15,23,20,0.90) 200px,rgba(15,23,20,0.95) 85%,var(--bos) 100%),url('/hero-photo.jpg');}
  .closing .ride-note{display:none;}
  .closing-route{display:none;}
  .closing h2{margin-top:0;}
}
/* Telefoon: het nummer op één rustige regel vlak onder de ritprijs-knop,
   zodat ze bij elkaar horen (Prosper, 2026-10-29: "voelt los"). */
@media (max-width:899px){
  .closing-actions{gap:14px;}
  .closing-contact{padding-top:0;border-top:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;}
  .contact-label{display:inline;font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--wit-zacht);}
  .contact-number{min-height:44px;font-family:inherit;font-size:1.125rem;text-decoration:none;color:var(--champagne);}
}
@media (max-width:479px){ .closing-contact{justify-content:center;} }

/* Pc: geen balk onderin (knoppen te klein en los); de knoppen staan in de
   opening en het menu (Prosper, 2026-10-28) */
@media (min-width:900px){
  .sticky-bar{display:none;}
  body{padding-bottom:0;}
  html{scroll-padding-bottom:20px;}
}

/* =========================================================================
   Grotere telefoons en tablets
   ========================================================================= */
@media (max-width:379px){
  .calc{padding:16px 14px 20px;}
  .calc-legend{font-size:0.6875rem;letter-spacing:0.02em;gap:6px;}
  /* "Aanvragen via WhatsApp" blijft op één regel */
  .btn-whatsapp{padding:15px 10px;font-size:1rem;}
}
/* Heel smal: datum en tijd onder elkaar, zodat de datum leesbaar blijft */
@media (max-width:359px){
  .when-later{grid-template-columns:minmax(0,1fr);}
}
@media (min-width:480px){
  .opening-actions{flex-direction:row;flex-wrap:wrap;}
  .opening-actions .btn{width:auto;}
  .closing-actions .btn{align-self:flex-start;}
}
@media (min-width:720px){
  .container{padding-left:32px;padding-right:32px;}
  /* Tablet: de opening is hoger dan de tekst, de kopregel staat lager */
  .opening{min-height:70vh;min-height:70svh;
    background-image:
      linear-gradient(180deg,rgba(15,23,20,0.30) 0%,rgba(15,23,20,0.22) 12%,rgba(15,23,20,0.82) 28%,rgba(15,23,20,0.90) 46%,rgba(15,23,20,0.96) 76%,var(--bos) 100%),
      url('/hero-photo.jpg');}
  .opening-inner{padding-top:200px;padding-bottom:44px;}
  .opening h1{font-size:clamp(2.75rem,6.4vw,3.5rem);}
  .opening-intro{font-size:1.25rem;line-height:1.55;margin-top:18px;}
  .opening-actions{margin-top:26px;}
  .trust-route{gap:14px;margin-top:30px;}
  .ride{padding:64px 0 72px;}
  .ride-head{margin-bottom:24px;}
  .ride-head h2{margin-top:12px;}
  .driver-card{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
  .driver-card img{height:100%;min-height:380px;aspect-ratio:auto;contain:size;}
  .driver-text{padding:40px 40px;align-self:center;}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;}
  .footer-brand{grid-column:auto;}
}

/* =========================================================================
   Tablet liggend en laptop
   ========================================================================= */
@media (min-width:900px){
  .topnav{display:flex;align-items:center;gap:22px;margin-left:28px;}
  .topnav a{font-weight:700;font-size:0.9375rem;color:var(--wit-zacht);padding:8px 0;border-bottom:2px solid transparent;}
  .topnav a:hover{color:var(--wit);border-bottom-color:var(--champagne);}

  /* Rekenblok: kop en info links, kaart rechts */
  .ride{padding:24px 0 96px;}
  .ride-grid{grid-template-columns:minmax(0,1fr) minmax(0,540px);grid-template-areas:"head card" "how card" "info card";grid-template-rows:auto auto 1fr;column-gap:64px;align-items:start;}
  .ride-head{padding-top:24px;margin-bottom:14px;container-type:inline-size;}
  /* de kop groeit mee met de linkerkolom, zodat hij altijd op één regel past */
  .ride-head h2{font-size:clamp(1.75rem,14cqi,2.75rem);}
  .ride-text{margin-top:0;font-size:1.1875rem;}
  /* blijft in beeld naast een lange kaart (bijvoorbeeld met de prijs erin) */
  .ride-info{max-width:480px;position:sticky;top:calc(var(--kop-h) + 32px);margin-top:28px;padding-top:20px;}
  .calc{padding:26px 32px 32px;}

  /* Route over de breedte: punt, lijn naar de volgende halte */
  .how{margin-top:16px;}
  .route-step{padding-bottom:20px;}
  .route-step h3{font-size:1.1875rem;}
  .route-step p{font-size:1.0625rem;}

  .driver{padding-bottom:104px;}
  .driver-text{padding:56px 64px;}
  .driver-text h2{font-size:2.25rem;}
  .driver-text > p:not(.driver-role){font-size:1.125rem;max-width:56ch;}

  /* Wanneer en waar: tekst links, knop en telefoon rechts achter een lijn */
  .closing{padding:104px 0 108px;}
  .closing-inner{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:64px;}
  .closing .ride-hours{margin-top:20px;font-size:1.3125rem;max-width:44ch;}
  .closing .ride-note{font-size:1rem;}
  .closing-actions{min-width:300px;padding:4px 0 4px 40px;border-left:1px solid rgba(242,244,241,0.28);}
  .closing-actions .btn{align-self:stretch;min-height:60px;font-size:1.125rem;}
  .closing-contact{padding-top:0;border-top:0;}
  .contact-number{font-size:1.75rem;}
}

@media (min-width:1100px){
  :root{--kop-h:76px;}
  .container{padding-left:48px;padding-right:48px;}
  .brand{font-size:1.125rem;gap:11px;}
  .brand .brand-logo{width:38px;height:38px;}
  .topnav{gap:26px;margin-left:40px;}
  .status-pill{font-size:0.9375rem;}

  /* niet schermvullend: de kop van het rekenblok piept eronder uit (Prosper, 2026-10-28: groot gat) */
  .opening{align-items:center;min-height:clamp(500px, calc(100vh - var(--kop-h) - 280px), 700px);
    background-image:
      linear-gradient(90deg,rgba(15,23,20,0.94) 0%,rgba(15,23,20,0.86) 34%,rgba(15,23,20,0.58) 60%,rgba(15,23,20,0.30) 100%),
      linear-gradient(180deg,rgba(15,23,20,0.30) 0%,rgba(15,23,20,0) 30%,rgba(15,23,20,0) 72%,var(--bos) 100%),
      url('/hero-photo.jpg');
    background-position:0 0, 0 0, 0% 40%;}
  .opening-inner{padding-top:56px;padding-bottom:40px;}
  .opening h1{font-size:clamp(3.5rem,4.6vw,4.5rem);}
  .opening-intro{font-size:1.3125rem;max-width:44ch;margin-top:24px;}
  .opening-actions{margin-top:34px;gap:14px;}
  .opening-actions .btn{min-height:60px;padding:0 32px;font-size:1.125rem;}

  /* Punten naast elkaar, verbonden door een lijn */
  .trust-route{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;margin-top:48px;}
  .trust-route::before{display:none;}
  .trust-route li + li::before{content:"";display:block;width:40px;margin:0 18px;border-top:2px solid rgba(242,244,241,0.38);}
  .trust-route li{gap:12px;}

  .footer-app{display:none;}
  .footer-app-link{display:list-item;}

  .page-footer{padding:64px 0 40px;}

  /* Vaste balk: volle breedte, knoppen rechts in lijn met de inhoud */
  .sticky-bar-inner{max-width:1240px;padding:0 34px;justify-content:flex-end;}
  .sticky-ride{flex:0 0 auto;padding:0 28px;}
}

@media (min-width:1600px){
  .container{max-width:1360px;}
  .sticky-bar-inner{max-width:1360px;}
  .ride-grid{grid-template-columns:minmax(0,1fr) minmax(0,580px);column-gap:96px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;scroll-behavior:auto !important;}
}

/* =========================================================================
   Concept Meer golven (testbranch concept-golven-meer, 2026-11-06, niet live)
   Tussen bijna elke sectie een gevulde golf-overgang: de ene sectiekleur
   golft in de volgende over. Britsgroen #0F1714 wisselt af met twee groene
   banen (#1B3A2F): "Zo werkt het" en de vragen. De foto van "Wanneer en
   waar" blijft britsgroen (een groene waas over de foto oogt als gloed). Geen lijnen, geen
   gloed, geen verloop. Golven: achtergrond-golven-meer.svg (vensters).
   Contrast op de groene baan: wit-zacht 8,1:1, mist 5,3:1.
   ========================================================================= */
:root{--golf-h:56px;--baan:#1B3A2F;--golf-uit:20px;}
main{overflow-x:clip;}
.opening::after,.how::before,.how::after,.driver::after,.faq::after,.closing::after{
  content:"";position:absolute;left:0;right:0;height:var(--golf-h);pointer-events:none;
  background:no-repeat 0 0/100% 100%;}
.opening-inner,.closing-inner,.driver .container,.faq .container{position:relative;z-index:1;}

/* geen lijn bij Ritprijs (de golf onderaan de opening is in ronde 2 van concept-glas-beweging vervallen) */
.ride-head{border-top:0;}

/* Zo werkt het: groene baan over de volle breedte (border-image naar buiten,
   geen extra blok; boven en onder 8px doorzichtig, daar ligt de golf al) */
.how{position:relative;margin-top:24px;padding:calc(var(--golf-h) + 20px) 0 calc(var(--golf-h) + 28px);
  border-image:linear-gradient(transparent 0 8px,var(--baan) 8px calc(100% - 8px),transparent 0) fill 0 / 0 / 0 100vmax;}
.how::before,.how::after{left:calc(-1 * var(--golf-uit));right:auto;width:100vw;}
.how::before{top:0;background-image:url('/achtergrond-golven-meer.svg#in-groen');}
.how::after{bottom:0;background-image:url('/achtergrond-golven-meer.svg#uit-groen');}
.how .step-dot{background:var(--baan);}
.how .step-home .step-dot{background:var(--champagne);}

/* chauffeur naar de vragen (tweede groene baan), vragen naar Wanneer en waar
   (foto blijft zoals nu, britsgroen), Wanneer en waar naar de footer */
.driver,.faq{position:relative;}
.driver::after{bottom:-1px;background-image:url('/achtergrond-golven-meer.svg#naar-groen');}
.faq{background:var(--baan);}
.faq::after{bottom:-1px;background-image:url('/achtergrond-golven-meer.svg#groen-uit');}
.closing{position:relative;}
/* .closing::after: de stad onderaan, zie ronde 2 van concept-glas-beweging */
.page-footer{border-top:0;}

@media (max-width:899px){
  .ride{padding-bottom:0;}
  .closing{padding-bottom:calc(var(--golf-h) + 28px);
    /* foto komt iets later in beeld, zodat de golf erboven rustig overloopt */
    background-image:linear-gradient(180deg,var(--bos) 0,var(--bos) 16px,rgba(15,23,20,0.30) 84px,rgba(15,23,20,0.25) 120px,rgba(15,23,20,0.90) 200px,rgba(15,23,20,0.95) 85%,var(--bos) 100%),url('/hero-photo.jpg');}
  .driver{padding-bottom:calc(var(--golf-h) + 12px);}
  .faq{padding-top:24px;padding-bottom:calc(var(--golf-h) + 40px);}
}
@media (min-width:720px){ :root{--golf-uit:32px;} }
@media (min-width:900px){
  :root{--golf-h:110px;}
  .how{margin-top:28px;padding-bottom:calc(var(--golf-h) + 12px);}
  .driver{padding-bottom:calc(var(--golf-h) + 24px);}
  .faq{padding-top:72px;}
  .closing{padding-bottom:calc(var(--golf-h) + 72px);}
}
@media (min-width:1100px){
  :root{--golf-uit:calc(max(0px,(100vw - 1240px) / 2) + 48px);}
}
@media (min-width:1600px){ :root{--golf-uit:calc((100vw - 1360px) / 2 + 48px);} }

/* =========================================================================
   Concept Glas en beweging (testbranch concept-glas-beweging, 2026-11-06,
   niet live). Bovenop concept-golven-meer.
   1. Het rekenblok krijgt een rand van matglas: kop "Bereken uw rit" en de
      witte kaart liggen samen op een glazen vlak (backdrop-filter), waar de
      foto wazig doorheen schemert. Het glas is een ::before van .ride-grid
      (een grid-item), zo past het altijd precies om kop en kaart.
   2. Pc (900 px en breder): het rekenblok staat rechts in de opening, naast
      kop en intro. .ride schuift met een negatieve marge omhoog over de
      opening; links begint "Zo werkt het" pas onder de opening. De twee
      knoppen die alleen naar beneden scrollen zijn weg.
   3. Telefoon: het glas begint net over de onderkant van de opening.
   4. Beweging: logo tekent zich, blokken komen zacht in beeld
      (js/beweging.js), golven schuiven licht mee bij scrollen, kleine
      hover-reacties. Alles uit bij prefers-reduced-motion.
   ========================================================================= */
:root{
  --glas:linear-gradient(180deg,rgba(242,244,241,0.07) 0,rgba(242,244,241,0.04) 100%),rgba(15,23,20,0.62);
  --glas-rand:rgba(242,244,241,0.20);
  --glas-blur:blur(22px) saturate(135%);
  --glas-vast:rgba(25,35,31,0.97);   /* zonder backdrop-filter: bijna effen #19231F */
  --glas-rim:6px;                    /* glazen rand om de witte kaart */
}
.opening-actions{display:none;}

.ride-grid::before{content:"";grid-area:head-start / 1 / card-end / 2;align-self:stretch;
  border-radius:20px;background:var(--glas-vast);border:1px solid var(--glas-rand);
  box-shadow:0 24px 60px rgba(5,9,7,0.45);position:relative;z-index:1;pointer-events:none;}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ride-grid::before{background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);}
}
.ride-head{position:relative;z-index:2;margin:0;padding:20px 18px 14px;}
.calc{z-index:2;margin:0 var(--glas-rim) var(--glas-rim);border-top:0;border-radius:14px;}

/* Telefoon: het glas begint direct onder de intro en ligt over de golf
   onderaan de opening (die schemert er wazig doorheen) */
@media (max-width:899px){
  .ride{padding-top:16px;}
  .ride-head{padding:18px 16px 12px;}
  .ride-head h2{margin-top:4px;}
}
@media (min-width:720px) and (max-width:899px){
  :root{--glas-rim:10px;}
  .ride-head{padding:26px 24px 18px;}
}

/* Pc: rekenblok rechts in de opening */
@media (min-width:900px){
  :root{--glas-rim:12px;--pad:32px;--kaart-b:clamp(420px,42vw,540px);--kolom-gap:44px;
    --open-h:clamp(520px,calc(100vh - var(--kop-h) - 210px),640px);--glas-top:36px;}
  .opening{align-items:center;min-height:var(--open-h);
    background-image:
      linear-gradient(90deg,rgba(15,23,20,0.94) 0%,rgba(15,23,20,0.86) 34%,rgba(15,23,20,0.58) 60%,rgba(15,23,20,0.30) 100%),
      linear-gradient(180deg,rgba(15,23,20,0.30) 0%,rgba(15,23,20,0) 30%,rgba(15,23,20,0) 72%,var(--bos) 100%),
      url('/hero-photo.jpg');
    background-position:0 0, 0 0, 0% 40%;}
  .opening-inner{padding-top:48px;padding-bottom:48px;padding-right:calc(var(--pad) + var(--kaart-b) + var(--kolom-gap));}
  .opening-intro{max-width:40ch;}
  /* de drie punten onder elkaar langs een lijn, zoals op de telefoon */
  .trust-route{flex-direction:column;align-items:flex-start;gap:12px;margin-top:34px;}
  .trust-route li{flex-direction:row;gap:14px;}
  .trust-route::before{display:block;}
  .trust-route li + li::before{display:none;}
  /* rekenblok omhoog: de bovenkant van het glas ligt --glas-top onder de kopbalk */
  .ride{margin-top:calc(var(--glas-top) - var(--open-h));padding-top:0;}
  .ride-grid{grid-template-columns:minmax(0,1fr) var(--kaart-b);
    grid-template-areas:"how head" "how card" "how ." "info .";
    grid-template-rows:auto auto 1fr auto;column-gap:var(--kolom-gap);}
  .ride-grid::before{grid-area:head-start / 2 / card-end / 3;}
  .ride-head{padding:26px 28px 18px;margin:0;}
  .ride-head h2{margin-top:8px;}
  .calc{padding:24px 26px 28px;}
  /* links: "Zo werkt het" begint pas onder de opening */
  .how{margin-top:calc(var(--open-h) - var(--glas-top) + 28px);}
  .ride-info{margin-top:0;}
}
@media (min-width:1100px){
  :root{--pad:48px;--kolom-gap:64px;--glas-top:40px;}
  .opening-inner{padding-top:56px;padding-bottom:56px;}
  .opening-intro{max-width:44ch;}
}
@media (min-width:1600px){
  :root{--kaart-b:580px;--kolom-gap:96px;}
  .ride-grid{grid-template-columns:minmax(0,1fr) var(--kaart-b);column-gap:var(--kolom-gap);}
}

/* ---------- Beweging ---------- */
/* Logo: het beeldmerk tekent zich als een route (ring, de twee bogen van
   de B groeien vanaf de stam: streepje van 0 naar 152, iets meer dan de
   langste boog, tussenstop, stip). Sinds ronde 3 alleen nog in de
   logo-intro (onderaan); het kleine logo in de kopbalk staat stil. */
@keyframes logo-pop{from{transform:scale(0);opacity:0;}70%{transform:scale(1.12);opacity:1;}to{transform:scale(1);opacity:1;}}
@keyframes logo-lijn{from{stroke-dasharray:0 152;}to{stroke-dasharray:152 0;}}
@keyframes logo-fade{from{opacity:0;}to{opacity:1;}}
@keyframes golf-links{from{transform:translateX(1.5%) scaleX(1.04);}to{transform:translateX(-1.5%) scaleX(1.04);}}
@keyframes golf-rechts{from{transform:translateX(-1.5%) scaleX(1.04);}to{transform:translateX(1.5%) scaleX(1.04);}}

@media (prefers-reduced-motion:no-preference){
  /* Blokken onder het eerste scherm: js/beweging.js zet .bw-uit en haalt
     het weg zodra het blok in beeld komt. Zonder script blijft alles staan. */
  .bw-el{transition:opacity .5s ease-out,transform .5s ease-out;}
  .bw-el.bw-uit{opacity:0;transform:translateY(12px);}

  /* Golven schuiven heel licht mee bij scrollen (alleen waar de browser
     scroll-animaties kent; anders staan ze stil) */
  @supports (animation-timeline:view()){
    .opening::after,.how::before,.how::after,.driver::after,.faq::after,.closing::after{
      animation:golf-links linear both;animation-timeline:view();}
    .how::after,.faq::after,.opening::after{animation-name:golf-rechts;}
  }

  /* Hover alleen met een muis: knoppen 2 px omhoog en iets lichter, kaarten
     een lichtere rand */
  @media (hover:hover){
    .btn,.btn-primary,.btn-whatsapp,.btn-wa,.sticky-ride,.footer-app,.contact-number{transition:background-color .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;}
    .btn:hover,.btn-primary:hover:not(:disabled),.btn-whatsapp:not(.disabled):hover,.btn-wa:hover,.footer-app:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(5,9,7,0.28);}
    .driver-card{transition:border-color .15s,transform .15s;}
    .driver-card:hover{transform:translateY(-2px);border-color:var(--rand);}
    .route-step .step-dot{transition:transform .15s;}
    .route-step:hover .step-dot{transform:scale(1.12);}
  }
}
@media print{ .bw-el.bw-uit{opacity:1;transform:none;} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;}
}

/* =========================================================================
   Concept Glas en beweging, ronde 2 en 3 (Prosper, 2026-11-06)
   1. Banen achter "Zo werkt het" en de vragen in #1C3028 (1,30:1 op
      britsgroen; ronde 1 was #1B3A2F, "dat lichte groen vind ik niet
      mooi"). Contrast op de baan: mist 5,95:1, wit-zacht 9,15:1, wit 12,6:1.
      Ronde 3: de banen zijn weer zo hoog als in ronde 1 (de afstand van
      golf tot tekst is gelijk aan 88507a8), vraagrijen weer 18/22 px.
   2. Golven verschillen van vorm (zoals donker-golven): boven een baan een
      brede, hoge dubbele golf (#1E3E31 en #22463A), onder een baan een
      smalle, rustige golf. Elk met een eigen fase en hoogte.
      De brede golf boven "Zo werkt het" sluit op de pc direct aan op de
      opening. Op de telefoon geen golf onder de opening: daar ligt het
      glas, de golf zou half achter het glas verdwijnen.
   3. Onderaan "Wanneer en waar": de stad met torens, nu groot en midden
      (twee rijen: achter #1F4135 1,62:1, voor #26503F 2,0:1), op een
      heuvel #1B392E (1,45:1) met een rechte weg #274F41 (1,98:1). De
      gebouwen rekken niet uit (achtergrond-stad.svg), heuvel en weg wel
      (sprite), de champagne strepen hebben een vaste lengte (eigen
      herhalende laag). Geen ramen of lichtjes.
   4. Logo-intro: zie het einde van dit bestand en het script bovenin
      <body> van index.html.
   ========================================================================= */
:root{--baan:#1C3028;--golf-breed:84px;--golf-smal:44px;--stad-h:196px;
  --streep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='4'%3E%3Crect x='56' y='0.25' width='18' height='3.5' rx='1.75' fill='%23D9C29A'/%3E%3C/svg%3E");}
.opening::after{display:none;}
.how::before,.driver::after{height:var(--golf-breed);}
.how::after,.faq::after{height:var(--golf-smal);}

/* stad onderaan; tekst staat erboven op effen britsgroen */
.closing{background-image:none;}
.closing::after{bottom:0;height:var(--stad-h);animation:none;
  background:
    var(--streep) 50% calc(100% - 16.5px)/130px 4px repeat-x,
    url('/achtergrond-golven-meer.svg#stad-voor-m') 0 100%/100% 80px no-repeat,
    url('/achtergrond-stad.svg') 50% calc(100% - 26px)/auto 150px no-repeat;}

@media (max-width:899px){
  .how{padding:calc(var(--golf-breed) + 20px) 0 calc(var(--golf-smal) + 28px);}
  .driver{padding-bottom:calc(var(--golf-breed) + 12px);}
  .faq{padding-top:24px;padding-bottom:calc(var(--golf-smal) + 40px);}
  .closing{padding-top:40px;padding-bottom:calc(var(--stad-h) + 8px);background-image:none;}
}
@media (min-width:720px){
  :root{--golf-breed:110px;--golf-smal:56px;--stad-h:250px;
    --streep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='6'%3E%3Crect x='93' y='0.5' width='34' height='5' rx='2.5' fill='%23D9C29A'/%3E%3C/svg%3E");}
  .closing::after{
    background:
      var(--streep) 50% calc(100% - 24.5px)/220px 6px repeat-x,
      url('/achtergrond-golven-meer.svg#stad-voor') 0 100%/100% 120px no-repeat,
      url('/achtergrond-stad.svg') 50% calc(100% - 40px)/auto 210px no-repeat;}
}
@media (min-width:900px){
  :root{--golf-breed:170px;--golf-smal:80px;--stad-h:300px;}
  .closing::after{background-size:220px 6px,100% 120px,auto 260px;}
  /* de brede golf boven "Zo werkt het" sluit direct aan op de opening */
  .how{margin-top:calc(var(--open-h) - var(--glas-top));padding:calc(var(--golf-breed) + 20px) 0 calc(var(--golf-smal) + 12px);}
  .driver{padding-bottom:calc(var(--golf-breed) + 24px);}
  .faq{padding-top:72px;padding-bottom:calc(var(--golf-smal) + 24px);}
  .closing{padding:72px 0 calc(var(--stad-h) + 16px);}
}

/* ---------- Logo-intro (ronde 3) ----------
   Overlay bestaat alleen als het script in <body> hem maakt (eerste bezoek
   per sessie, geen "minder beweging"). Tijdlijn: 0-0,7 s tekenen in het
   midden, 0,74-1,16 s vliegen naar het kopbalklogo terwijl het vlak
   wegvaagt, dan weg. Het kopbalklogo is zolang onzichtbaar (visibility,
   dus geen verspringing) en neemt het over op precies dezelfde plek. */
.intro-loopt .topbar .brand-logo{visibility:hidden;}
.intro{position:fixed;inset:0;z-index:1000;pointer-events:auto;cursor:pointer;
  --s:clamp(112px,32vmin,190px);}
.intro-vlak{position:absolute;inset:0;background:var(--bos);transition:opacity .4s cubic-bezier(.4,0,.2,1) .06s;}
.intro-merk{position:absolute;width:var(--s);height:var(--s);
  left:calc(50% - var(--s) / 2);top:calc(50% - var(--s) / 2 - 26px);
  transform-origin:0 0;transition:transform .42s cubic-bezier(.6,0,.15,1);will-change:transform;}
.intro-merk svg{display:block;width:100%;height:100%;overflow:visible;}
.intro-merk circle{transform-box:fill-box;transform-origin:center;}
.intro-merk circle:nth-of-type(1){animation:logo-pop .24s ease-out both;}
.intro-merk path:nth-of-type(2){animation:intro-lijn .46s cubic-bezier(.45,0,.25,1) .1s backwards;}
.intro-merk path:nth-of-type(1){animation:logo-fade .32s ease-out .16s both;}
.intro-merk circle:nth-of-type(2){animation:logo-pop .18s ease-out .2s both;}
.intro-merk circle:nth-of-type(3){animation:logo-pop .2s ease-out .5s both;}
.intro-woord{position:absolute;left:0;right:0;top:calc(50% + var(--s) / 2 - 2px);text-align:center;
  font-family:var(--font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;
  font-size:calc(var(--s) * .21);letter-spacing:.16em;color:var(--wit);
  animation:intro-woord .36s ease-out .3s backwards;transition:opacity .16s ease-out;}
.intro-woord span{font-weight:500;color:var(--champagne);}
/* zonder opacity zou een streepje van lengte 0 met ronde kap als stip zichtbaar zijn */
@keyframes intro-lijn{from{stroke-dasharray:0 152;opacity:0;}12%{opacity:1;}to{stroke-dasharray:152 0;opacity:1;}}
@keyframes intro-woord{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.intro-vlucht .intro-vlak{opacity:0;}
.intro-vlucht .intro-woord{opacity:0;}
.intro-snel{transition:opacity .16s ease-out;opacity:0;}
@media (prefers-reduced-motion:reduce){ .intro{display:none;} .intro-loopt .topbar .brand-logo{visibility:visible;} }
@media print{ .intro{display:none;} }

/* ---------- Logo-intro versie B (Prosper, 2026-11-06) ----------
   Het verhaal van de rit, als één route om te volgen: eerst de stippellijn
   van onder naar boven (de chauffeur reist naar de klant), dan de open ring
   (ophalen), dan de dikke lijn in één vloeiende beweging: bovenste boog tot
   de tussenstop (die verschijnt als de lijn erdoor gaat), meteen door met de
   onderste boog naar huis, en als laatste de stip (thuis). Daarna staan logo
   en woord nog 0,4 s stil (Prosper), vliegen op 1,96 s, klaar ca. 2,6 s. De stippellijn gaat snel en lineair: langzaam
   kwam hij streepje voor streepje in beeld en dat oogde haperig.
   De bogen zijn twee losse paden (pathLength 100). Het streeppatroon is
   "x 200" en niet "x 100-x": anders tekent de browser aan het eind van het
   pad een rond puntje (een streep van lengte 0) en knippert de stip. */
.intro-merk{transition-duration:.6s;animation:intro-zicht .01s linear .05s both;}
.intro-vlak{transition-duration:.55s;}
.intro-merk path:nth-of-type(1){animation:intro-stam .22s linear .05s both;}
.intro-merk circle:nth-of-type(1){animation:logo-pop .25s ease-out .24s both;}
.intro-merk path:nth-of-type(2){animation:intro-boog .38s cubic-bezier(.45,0,.8,.8) .46s both;}
.intro-merk circle:nth-of-type(2){animation:logo-pop .2s ease-out .81s both;}
.intro-merk path:nth-of-type(3){animation:intro-boog .38s cubic-bezier(.2,.2,.55,1) .84s both;}
.intro-merk circle:nth-of-type(3){animation:logo-pop .26s ease-out 1.19s both;}
.intro-woord{animation-duration:.45s;animation-delay:1.11s;}
@keyframes intro-zicht{from{visibility:hidden;}to{visibility:visible;}}
@keyframes intro-stam{from{clip-path:inset(100% 0 0 0);}to{clip-path:inset(0 0 0 0);}}
@keyframes intro-boog{from{stroke-dasharray:0 200;opacity:0;}4%{opacity:1;}to{stroke-dasharray:100 200;opacity:1;}}

/* ---------- Pc-opening (Prosper, 2026-11-06) ----------
   "Het formulier staat op de pc te hoog, je mist de foto, en er is een gat
   onder." De kop staat nu bovenaan de opening (niet meer verticaal
   gecentreerd), het glas begint iets onder de bovenkant van de kop (Prosper: "nog iets
   naar beneden"), en de opening
   is zo hoog als de tekst plus een kleine marge: de golf komt direct onder
   de drie punten. Eerste veld blijft in het eerste scherm (ook 1280x720). */
@media (min-width:900px){
  :root{--open-h:520px;--glas-top:120px;}
  .opening{align-items:flex-start;}
  .opening-inner{padding-top:88px;padding-bottom:0;}
}
@media (min-width:1100px){
  :root{--open-h:540px;--glas-top:136px;}
  .opening-inner{padding-top:104px;padding-bottom:0;}
}
@media (min-width:1600px){
  :root{--open-h:550px;}
}

/* ---------- Telefoon: groene golf van de bovenkant tot een derde van het rekenblok (Prosper, 2026-11-06) ----------
   Variant "golf boven": Prosper bedoelde "van 0/3 tot 1/3", koos deze en daarna
   "van boven en dan tot de helft van het formulier". De golf komt net
   boven het rekenblok uit, het groen loopt achter de kop en de bovenste
   helft van de kaart door en golft daar terug naar britsgroen. "Zo werkt het"
   houdt zijn eigen golf. Het rekenblok zakt 20 px (eerste veld blijft in
   beeld). */
@media (max-width:899px){
  :root{--golf-einde:430px;}
  .ride{padding-top:36px;padding-bottom:0;
    background:
      url('/achtergrond-golven-meer.svg#in-groen') 0 0/100% 110px no-repeat,
      url('/achtergrond-golven-meer.svg#groen-uit') 0 calc(var(--golf-einde) - 64px)/100% 64px no-repeat,
      linear-gradient(var(--baan),var(--baan)) 0 70px/100% calc(var(--golf-einde) - 70px) no-repeat,
      var(--bos);}
}
@media (min-width:720px) and (max-width:899px){ :root{--golf-einde:455px;} }

/* ---------- Pc: onderkant van het rekenblok gelijk met punt 4 (Prosper, 2026-11-06) ----------
   "Formulier nog lager, dat hij op de lijn zit van punt 4" (Samen naar huis).
   Gemeten: 87 px (900-1099) en 80 tot 91 px (vanaf 1100) te hoog. "Zo werkt
   het" hangt niet af van --glas-top, dus alleen het rekenblok zakt. Eerste veld
   blijft in het eerste scherm (1280x720: 636 px). */
@media (min-width:900px){ :root{--glas-top:207px;} }
@media (min-width:1100px){ :root{--glas-top:226px;} }
@media (min-width:1440px) and (max-width:1599px){ :root{--glas-top:216px;} }

/* ---------- Balk onderin weg zolang het rekenblok in beeld is (Prosper, 2026-11-06) ---------- */
.sticky-bar{transition:transform .25s ease,visibility 0s linear 0s;}
.kaart-in-beeld .sticky-bar{transform:translateY(calc(100% + 2px));visibility:hidden;
  transition:transform .25s ease,visibility 0s linear .25s;}
@media (prefers-reduced-motion:reduce){ .sticky-bar,.kaart-in-beeld .sticky-bar{transition:none;} }

/* =========================================================================
   Review uiterlijk (Prosper, 2026-11-06: "alles er goed, doen!"), niet live
   9.  Alle hoofdknoppen één maat: 56 px hoog, 17 px vet, hoek 10 px, op elke
       pagina (champagne en groen), ook in de balk onderin en bij Wanneer en
       waar op de laptop (was 60 px en 18 px). Eén hovertint voor champagne
       (#E6D3B0; de formulierknop had #E3CEA9).
   10. "Zo werkt het" en "Veelgestelde vragen" even groot als "Prosper Kiel":
       28 px op telefoon en tablet, 36 px vanaf 900 px (was 22 px).
   12. "Liever eerst bellen?" ook op de pc weg (het nummer staat in Wanneer en
       waar en in de footer).
   13. Tablet (720-899 px): de opening als op de telefoon, kop bovenaan en zo
       hoog als de tekst. Op 768x1024 stond het eerste veld op 1098 px.
   14. Status "Beschikbaar vanaf 18:00" en "Morgen vanaf 18:00": open groene
       ring (class "later", zie applyStatus in index.html). Grijs blijft voor
       "Vanavond niet beschikbaar".
   ========================================================================= */
/* 9 */
.btn,.opening-actions .btn,.closing-actions .btn{min-height:56px;font-size:1.0625rem;}
.btn-primary:hover{background:var(--champagne-hover);}
.btn-wa{min-height:56px;font-size:1.0625rem;}
.sticky-call{width:56px;height:56px;}
.sticky-ride{min-height:56px;}
/* Smal: "Aanvragen via WhatsApp" blijft op 17 px op één regel (op 320 px brak
   hij al af, ook op 16 px: 80 px hoog). Tekst 209 px + icoon + ruimte = 232 px. */
@media (max-width:379px){ .btn-whatsapp{font-size:1.0625rem;padding:15px 8px;gap:7px;} }
@media (max-width:339px){ .calc{padding-left:10px;padding-right:10px;} .btn-whatsapp{padding:15px 4px;gap:6px;} }

/* 10 */
.section-head h2{font-size:1.75rem;line-height:1.1;}
@media (min-width:900px){ .section-head h2{font-size:2.25rem;} }
/* De grotere kop duwt "Zo werkt het" op de pc 14-15 px omlaag. Het rekenblok
   zakt even ver mee, zodat de onderkant gelijk blijft met punt 4 (was 207/226/216). */
@media (min-width:900px){ :root{--glas-top:221px;} }
@media (min-width:1100px){ :root{--glas-top:241px;} }
@media (min-width:1440px) and (max-width:1599px){ :root{--glas-top:231px;} }

/* 12 */
.ride-info{display:none;}

/* 13 */
@media (min-width:720px) and (max-width:899px){
  .opening{min-height:0;
    background-image:
      linear-gradient(180deg,rgba(15,23,20,0.05) 0,rgba(15,23,20,0.10) calc(var(--strook) - 30px),rgba(15,23,20,0.62) calc(var(--strook) + 30px),rgba(15,23,20,0.86) calc(var(--strook) + 120px),rgba(15,23,20,0.95) 85%,var(--bos) 100%),
      url('/hero-photo.jpg');}
  .opening-inner{padding-top:var(--strook);padding-bottom:0;}
}

/* 14 */
.status-pill.later .status-dot{background:transparent;border:2px solid var(--status-live);}

/* ---------- Telefoon: groen loopt door tot "Zo werkt het" (variant, 2026-11-06) ----------
   Advies Bob: net als op de pc één doorlopende beweging. De golf komt boven het
   rekenblok uit en het groen loopt achter de kaart door tot in de baan van
   "Zo werkt het" (geen terugkeer naar britsgroen halverwege, geen tweede golf). */
@media (max-width:899px){
  .ride{background:
      url('/achtergrond-golven-meer.svg#in-groen') 0 0/100% 110px no-repeat,
      linear-gradient(var(--baan),var(--baan)) 0 70px/100% 100% no-repeat,
      var(--bos);}
  .how::before{display:none;}
  .how{margin-top:0;padding-top:44px;border-image:none;background:var(--baan);}
}

/* ---------- Variant "alleen groene randen" (golf-var-randen, 2026-11-06, niet live) ----------
   Prosper: "nu staat het grote vlak live, kunnen we het minder massaal maken".
   De effen groene banen achter "Zo werkt het" en de vragen zijn weg: het
   midden is weer britsgroen. Groen staat alleen nog als lint (gevulde golfband
   in #1C3028, #1E3E31 en #22463A, boven en onder britsgroen) aan de boven- en
   onderkant van die twee blokken. Elk lint heeft een eigen vorm
   (achtergrond-golven-randen.svg). Telefoon: boven het rekenblok komt een lint
   uit en golft terug, en onder de kaart komt er een uit als bovenrand van
   "Zo werkt het"; het groen loopt niet meer als vlak achter de kaart door.
   Elk lint is twee gevulde golven die elkaar kruisen: een brede in #1C3028
   en een smallere in #1E3E31 met een kam in #22463A. Waar ze uit elkaar
   lopen, zit britsgroen tussen (de "gaten").
   Tekst staat nooit op een lint (de ruimte boven en onder de tekst is hoger
   dan het lint). Het rekenblok en de teksten veranderen niet. */
:root{--rand-smal:90px;}
.how{border-image:none;background:none;}
.how::before{background-image:url('/achtergrond-golven-randen.svg#rand-breed');}
.how::after{height:var(--rand-smal);background-image:url('/achtergrond-golven-randen.svg#rand-smal');}
.driver::after{background-image:url('/achtergrond-golven-randen.svg#rand-breed-b');}
.faq{background:none;}
.faq::after{height:var(--rand-smal);background-image:url('/achtergrond-golven-randen.svg#rand-smal-b');}
.how .step-dot{background:var(--bos);}
.how .step-home .step-dot{background:var(--champagne);}
@media (max-width:899px){
  /* lint boven de vragen iets hoger dan de oude golf (84 px): anders wordt het smal als een streep */
  :root{--golf-breed:110px;}
  .ride{background:url('/achtergrond-golven-randen.svg#rand-rit') 0 0/100% 120px no-repeat,var(--bos);}
  /* lint dat onder de kaart uitkomt: begint achter de kaart, eindigt 20 px boven de kop */
  .how::before{display:block;top:-50px;height:100px;background-image:url('/achtergrond-golven-randen.svg#rand-rit-onder');}
  .how{padding-bottom:calc(var(--rand-smal) + 28px);}
  .faq{padding-bottom:calc(var(--rand-smal) + 40px);}
}
@media (min-width:720px){ :root{--rand-smal:100px;} }
@media (min-width:900px){
  :root{--rand-smal:120px;}
  .how{padding-bottom:calc(var(--rand-smal) + 24px);}
  /* geen vlak meer achter de vragen: de kop dichter op het lint, zoals bij "Zo werkt het" */
  .faq{padding-top:28px;padding-bottom:calc(var(--rand-smal) + 24px);}
}

/* ---------- Randen uitgedund (Prosper, 2026-11-06: "voelen te veel achter elkaar") ----------
   Nog maar twee linten met veel ruimte ertussen: bovenaan (telefoon boven het
   rekenblok, pc onder de opening) en boven de vragen. De linten onder "Zo werkt
   het" en onder de vragen, en op de telefoon het tweede lint onder de kaart,
   vervallen. Onderaan blijft de stad. */
.how::after,.faq::after{display:none;}
.how{padding-bottom:56px;}
.faq{padding-bottom:64px;}
@media (max-width:899px){
  .how::before{display:none;}
  .how{padding-top:36px;padding-bottom:48px;}
  .faq{padding-bottom:56px;}
}

/* ---------- Drie linten (Prosper, 2026-11-06: "een bovenaan, eentje boven het profiel en
   ten slotte eentje boven Wanneer en waar") ----------
   De drie delen van de pagina: rekenen en aanvragen, de chauffeur, de praktische
   informatie. Lint 2 is de onderrand van "Zo werkt het" (.how::after), lint 3 de
   onderrand van de vragen (.faq::after); het lint boven de vragen vervalt. */
.how::after,.faq::after{display:block;}
.driver::after{display:none;}
.driver{padding-bottom:56px;}
.how{padding-bottom:calc(var(--rand-smal) + 28px);}
.faq{padding-top:8px;padding-bottom:calc(var(--rand-smal) + 32px);}
@media (max-width:899px){
  .how{padding-bottom:calc(var(--rand-smal) + 24px);}
  .faq{padding-top:8px;padding-bottom:calc(var(--rand-smal) + 32px);}
  .driver{padding-bottom:48px;}
}
@media (min-width:900px){
  .faq{padding-top:56px;}
}

/* ---------- Footer opnieuw ingedeeld (Prosper, 2026-11-06: "kunnen we de footer links en
   teksten goed indelen? Op telefoon ook, met lijnen") ----------
   Pc: logo en slogan links, Informatie en Contact samen rechts tot de rand, onder een
   dunne lijn de slotregel met © en KvK. Telefoon: alles onder elkaar met dunne lijnen
   ertussen. Contact: klein grijs kopje boven elke link. */
footer.page-footer .footer-grid{grid-template-columns:1fr;gap:0;}
footer.page-footer .footer-brand{grid-column:auto;padding-bottom:22px;}
footer.page-footer .footer-col{border-top:1px solid var(--bos-4);padding:20px 0 18px;}
footer.page-footer .footer-col ul{gap:4px;}
footer.page-footer .footer-label{display:block;font-size:0.8125rem;line-height:1.4;color:var(--mist);margin-top:6px;}
footer.page-footer .footer-col li:first-child .footer-label{margin-top:0;}
footer.page-footer .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;
  border-top:1px solid var(--bos-4);margin-top:0;padding-top:18px;font-size:0.875rem;color:var(--mist);}
@media (min-width:720px){
  footer.page-footer .footer-grid{grid-template-columns:minmax(0,1fr) auto auto;column-gap:clamp(56px,8vw,128px);align-items:start;}
  footer.page-footer .footer-brand{padding-bottom:0;}
  footer.page-footer .footer-col{border-top:0;padding:0;}
  footer.page-footer .footer-bottom{margin-top:40px;padding-top:20px;}
}
/* App installeren als knop onder de slogan, ook op de pc; geen dubbele link in Informatie (Prosper, 2026-11-06) */
footer.page-footer .footer-app{display:inline-flex;}
footer.page-footer .footer-app-link{display:none;}

/* ---------- Balk voor Prosper (alleen ingelogd in het beheer, 2026-11-07) ---------- */
.beheer-balk{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 20px;padding-top:max(8px, env(safe-area-inset-top));background:var(--champagne);color:var(--bos);font-size:.875rem;font-weight:600;}
.beheer-balk a{color:var(--bos);white-space:nowrap;}
@media print{ .beheer-balk{display:none;} }