@font-face{font-family:"Manrope"; font-style:normal; font-weight:300 700; font-display:swap; src:url("../fonts/manrope-latin.woff2") format("woff2")}

/* TaxiKinderzitje, huisstijl
   Wit #FFFFFF, Saliegroen #3E6B55 (actie), Mint #A9D4BC (accent),
   Antracietgrijs #2E3338 (tekst en donkere vlakken), Zwart #121416 (voet).
   Het mint rondje achter de koppen is een wiel uit het logo. */

:root{
  --antraciet:#2E3338;
  --zwart:#121416;
  --mint:#A9D4BC;
  --mint-zacht:#DCEDE3;
  --salie:#3E6B55;
  --salie-donker:#2F5241;
  --mist:#EAF3ED;
  --grijs-vlak:#F5F7F6;
  --zacht-2:#FAFCFB;
  --grijs:#5C646B;
  --lijn:#E4E9E6;
  --wit:#FFFFFF;
  --rond:18px;
  --rond-klein:12px;
  --schaduw:0 1px 2px rgba(46,51,56,.04), 0 12px 32px rgba(46,51,56,.07);
  --font:Manrope, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:100px; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--antraciet); background:var(--wit);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--font); font-weight:700; line-height:1.08; letter-spacing:-.035em; margin:0 0 .45em; color:var(--antraciet)}
h1{font-size:clamp(2.4rem, 5.6vw, 4.4rem)}
h2{font-size:clamp(1.9rem, 3.6vw, 3rem)}
h3{font-size:clamp(1.6rem, 2.6vw, 2.2rem)}
h1 em, h2 em{font-style:normal; color:var(--salie)}
p{margin:0 0 1em}
a{color:var(--salie)}

/* Het wieltje achter een kop */
.stip{
  display:inline-block; width:.2em; height:.2em; margin-left:.06em;
  border-radius:50%; background:var(--mint); vertical-align:baseline;
}

.omslag{width:min(1240px, calc(100% - 32px)); margin:0 auto}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:60; background:var(--wit); padding:12px 18px; border-radius:10px}
:focus-visible{outline:3px solid var(--salie); outline-offset:2px}

.intro{color:var(--grijs); max-width:60ch; font-size:1.06rem}
.intro.licht{color:rgba(255,255,255,.78)}
.klein{font-size:.84rem; color:var(--grijs); margin:.9em 0 0}

/* Labeltje boven een kop */
.label{
  display:inline-block; margin-bottom:18px; padding:6px 12px;
  font-size:.78rem; font-weight:700; letter-spacing:.02em; color:var(--salie);
  background:var(--wit); border-radius:8px; box-shadow:0 4px 14px rgba(46,51,56,.08);
}
.label-licht{background:rgba(255,255,255,.14); color:#fff; box-shadow:none; backdrop-filter:blur(6px)}

/* Knoppen, minimaal 48 pixels hoog voor duim-bediening */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:.7em 1.6em;
  font-family:var(--font); font-weight:700; font-size:.98rem;
  border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.knop:hover{transform:translateY(-1px)}
.knop .pijl{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; margin-right:-4px}
.knop .speel{width:16px; height:16px; fill:currentColor}
.knop-primair{background:var(--salie); color:#fff}
.knop-primair:hover{background:var(--salie-donker)}
.knop-glas{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); color:#fff; backdrop-filter:blur(8px)}
.knop-glas:hover{background:rgba(255,255,255,.24)}
.knop-omlijnd{background:var(--wit); border-color:var(--lijn); color:var(--antraciet)}
.knop-omlijnd:hover{border-color:var(--salie); color:var(--salie)}
.knop-zacht{background:var(--mint-zacht); color:var(--salie-donker)}
.knop-zacht:hover{background:var(--mint)}
.knop-groot{min-height:56px; padding:.85em 2em; font-size:1.02rem}
.knop-vol{width:100%}

/* Bovenbalk */
.topbalk{border-bottom:1px solid var(--lijn); font-size:.86rem; font-weight:600}
.topbalk-in{display:flex; align-items:center; gap:16px; min-height:44px}
.topbalk a{display:inline-flex; align-items:center; gap:8px; color:var(--antraciet); text-decoration:none; min-height:44px}
.topbalk a:hover{color:var(--salie)}
.topbalk svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round}
.topbalk-scheid{width:1px; height:18px; background:var(--lijn)}
.topbalk span{color:var(--grijs)}

/* Zwevende menubalk */
.kop{
  position:sticky; top:12px; z-index:50;
  width:min(1240px, calc(100% - 32px)); margin:14px auto 0;
  padding-top:env(safe-area-inset-top);
}
.kop-in{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:72px; padding:0 14px 0 24px; border-radius:var(--rond);
  background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7); box-shadow:0 10px 34px rgba(46,51,56,.12);
}
.merk{display:flex; align-items:center; gap:10px; text-decoration:none; min-height:44px}
.merk-teken{width:48px; height:31px; flex:0 0 auto; color:var(--antraciet)}
.merk-woord{font-family:var(--font); font-weight:500; font-size:1.24rem; color:var(--antraciet); letter-spacing:-.02em}
.merk-woord span{font-weight:700; color:var(--salie)}
.nav{display:flex; align-items:center; gap:6px}
.nav a{display:inline-flex; align-items:center; gap:7px; padding:10px 12px; border-radius:10px; color:var(--antraciet); text-decoration:none; font-size:.93rem; font-weight:600}
.nav a svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.8}
.nav a:hover{color:var(--salie); background:var(--mist)}
.nav .nav-knop{color:#fff; margin-left:8px; padding:.5em 1.4em}
.nav .nav-knop:hover{color:#fff; background:var(--salie-donker)}
.menu-knop{
  display:none; width:48px; height:48px; border:1px solid var(--lijn); border-radius:12px;
  background:var(--wit); cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.menu-knop span{display:block; width:18px; height:2px; background:var(--antraciet); border-radius:2px}

/* Hero: grote foto met ronde hoeken, de menubalk zweeft over de bovenrand */
.hero{margin-top:-44px}
.hero-beeld{
  position:relative; isolation:isolate; overflow:hidden;
  width:calc(100% - 32px); max-width:1640px; margin:0 auto; border-radius:22px;
  min-height:min(82vh, 760px); display:flex; align-items:flex-end;
  background:var(--antraciet);
}
.hero-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 50%; z-index:-2}
.hero-beeld::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(18,21,24,.82) 0%, rgba(18,21,24,.6) 38%, rgba(18,21,24,.1) 70%, rgba(18,21,24,0) 100%),
             linear-gradient(0deg, rgba(18,21,24,.55) 0%, rgba(18,21,24,0) 45%);
}
.hero-tekst{padding:120px clamp(24px, 5vw, 72px) clamp(40px, 6vw, 72px); max-width:760px}
.hero-tekst h1{color:#fff}
.hero-tekst h1 em{color:var(--mint)}
.hero-tekst .lead{font-size:1.12rem; color:rgba(255,255,255,.86); max-width:52ch; margin-bottom:30px}
.hero-knoppen{display:flex; flex-wrap:wrap; gap:12px}

/* Beloften onder de hero */
.beloften{padding:clamp(40px, 6vw, 64px) 0 clamp(36px, 5vw, 56px)}
.beloften-kop{text-align:center; color:var(--grijs); font-weight:600; font-size:1.02rem; max-width:48ch; margin:0 auto 28px}
.beloften-rij{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.beloften-rij li{display:flex; align-items:center; gap:14px; font-weight:700; font-size:.96rem; line-height:1.3}

/* Rond icoon in mint */
.rond-teken{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; background:var(--mint-zacht); color:var(--salie);
}
.rond-teken svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* Secties */
.vak{padding:clamp(64px, 9vw, 120px) 0; position:relative}
.vak-grijs{background:var(--grijs-vlak)}
.midden{text-align:center}
.midden .intro{margin-left:auto; margin-right:auto}
.midden > *:not(.label):not(h2):not(.intro){text-align:left}

/* Boeken met de zitjes ernaast */
.boek-raster{display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); gap:28px; align-items:start}
.boekkaart{
  position:sticky; top:104px;
  background:var(--wit); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:clamp(24px, 3.4vw, 44px); box-shadow:var(--schaduw);
}
.boekkaart h2{font-size:clamp(1.8rem, 3vw, 2.5rem)}
.boekkaart label,
.prijs-form label, .kiezer-form label{display:block; font-size:.84rem; font-weight:600; color:var(--grijs); margin-bottom:14px}
.boekkaart input, .boekkaart select,
.prijs-form input, .prijs-form select, .kiezer-form input{
  width:100%; margin-top:6px; min-height:50px; padding:.6em .95em;
  font:inherit; font-size:16px; font-weight:500; color:var(--antraciet);
  background:var(--zacht-2); border:1px solid var(--lijn); border-radius:var(--rond-klein);
}
.boekkaart input:focus, .boekkaart select:focus, .prijs-form input:focus, .prijs-form select:focus, .kiezer-form input:focus{
  outline:none; border-color:var(--salie); box-shadow:0 0 0 3px rgba(62,107,85,.2); background:var(--wit);
}
.rij{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.melding{
  margin:14px 0 0; padding:.8em 1em; border-radius:var(--rond-klein); font-size:.92rem;
  background:var(--grijs-vlak); color:var(--antraciet); border:1px solid var(--lijn);
}
.melding.fout{background:#FBF1EE; color:#8A3520; border-color:#F0CDC2}
.melding.aanbetaling{background:var(--mist); border-color:var(--salie); border-left:4px solid var(--salie)}
.melding.aanbetaling strong{display:block; margin-bottom:.25em}
.melding.gelukt{background:var(--mist); border-color:var(--salie); border-left:4px solid var(--salie); color:var(--antraciet); font-weight:600}
.melding[hidden]{display:none}
.boekkaart .klein a{color:var(--salie); font-weight:700; white-space:nowrap}

.zitje-stapel{display:grid; gap:28px}
.zitje-kaart{
  position:relative; overflow:hidden; display:grid; grid-template-columns:1fr 42%; gap:12px; align-items:center;
  background:var(--wit); border-radius:var(--rond); min-height:340px;
  padding:clamp(28px, 3.6vw, 44px) clamp(16px, 2vw, 28px) clamp(28px, 3.6vw, 44px) clamp(28px, 3.6vw, 44px);
}
/* multiply laat de bijna-witte fotoachtergrond wegvallen tegen de witte kaart */
.zitje-kaart img{display:block; width:100%; height:auto; mix-blend-mode:multiply}
.zitje-kaart p{color:var(--grijs); font-size:.98rem; max-width:34ch; margin-bottom:22px}
.leeftijd{display:inline-block; font-size:.8rem; font-weight:700; color:var(--salie); background:var(--mist); padding:5px 11px; border-radius:999px; margin-bottom:14px}

.tip{
  display:grid; grid-template-columns:auto 1fr; gap:6px 18px; align-items:center;
  padding:24px; border:2px dashed #D5DED9; border-radius:var(--rond); background:rgba(255,255,255,.55);
}
.tip strong{display:block; font-size:1.12rem; letter-spacing:-.01em}
.tip p{margin:2px 0 0; color:var(--grijs); font-size:.98rem}
.tip .knop{grid-column:1 / -1; margin-top:14px; width:100%}

/* Filmpje */
.film-raster{display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.film{border-radius:var(--rond); overflow:hidden; background:var(--antraciet); aspect-ratio:16/9; box-shadow:var(--schaduw)}
.film video{display:block; width:100%; height:100%; object-fit:cover}

/* Vinkjes */
.vinklijst{list-style:none; padding:0; margin:22px 0 30px; display:grid; gap:12px}
.vinklijst li{position:relative; padding-left:34px; font-weight:600; font-size:.98rem; line-height:1.45}
.vinklijst li::before{
  content:""; position:absolute; left:0; top:-.05em; width:22px; height:22px; border-radius:50%; background:var(--mint-zacht);
}
.vinklijst li::after{
  content:""; position:absolute; left:7px; top:.33em; width:8px; height:4px;
  border-left:2px solid var(--salie); border-bottom:2px solid var(--salie); transform:rotate(-45deg);
}
.vinklijst.licht li{color:rgba(255,255,255,.92)}
.vinklijst.licht li::before{background:rgba(169,212,188,.18)}
.vinklijst.licht li::after{border-color:var(--mint)}

/* Prijzen */
.kiezer{
  max-width:920px; margin:36px auto 0;
  background:var(--wit); border-radius:var(--rond); box-shadow:var(--schaduw);
  padding:clamp(22px, 3vw, 34px);
}
.prijs-form{display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end}
.prijs-form .breed{grid-column:1 / -1}
.prijs-form label, .kiezer-form label{margin-bottom:0}
.prijs-form button{min-height:50px}
.kiezer-uit[hidden]{display:none}
.kiezer-uit{
  display:block; margin-top:18px; padding:16px 18px; border-radius:var(--rond-klein);
  background:var(--mist); border-left:4px solid var(--salie);
}
.kiezer-uit strong{display:block; margin-bottom:.2em}
.kiezer-uit p{margin:0; color:var(--grijs); font-size:.95rem}
.zitjelijst{list-style:none; padding:0; margin:28px auto 0; max-width:920px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.zitjelijst li{background:var(--wit); border-radius:var(--rond-klein); padding:20px 22px}
.zitjelijst strong{display:block; font-size:1.02rem; margin-bottom:4px}
.zitjelijst span{color:var(--grijs); font-size:.93rem}

/* Foto naast tekst */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 5vw, 72px); align-items:center}
.duo-beeld{margin:0}
.duo-beeld img{display:block; width:100%; height:100%; max-height:520px; object-fit:cover; border-radius:var(--rond)}

/* Stappen */
.stappen{list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
.stappen li{background:var(--wit); border-radius:var(--rond); padding:34px 30px 32px; box-shadow:var(--schaduw)}
.stappen .nr{
  display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
  background:var(--mint-zacht); color:var(--salie); font-size:1.1rem; font-weight:700; margin-bottom:22px;
}
.stappen h3{font-size:1.3rem; letter-spacing:-.02em; margin-bottom:.45em}
.stappen p{color:var(--grijs); margin:0; font-size:.97rem}

/* Chauffeurs: donker blok met ronde hoeken */
.donker-blok{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px, 5vw, 64px); align-items:center;
  background:var(--antraciet); color:#fff; border-radius:22px; padding:clamp(28px, 5vw, 64px);
}
.donker-blok h2{color:#fff}
.donker-blok h2 em{color:var(--mint)}
.donker-blok .vinklijst{margin-bottom:0}

/* Vragen */
.vragen-raster{display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(32px, 5vw, 72px); align-items:start}
.vragen-kop{position:sticky; top:110px}
.faq{display:grid; gap:12px}
.faq details{background:var(--wit); border-radius:var(--rond-klein); padding:0 22px; box-shadow:0 1px 2px rgba(46,51,56,.04)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 36px 20px 0; position:relative;
  font-weight:700; font-size:1.02rem; min-height:48px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:4px; top:27px; width:9px; height:9px;
  border-right:2px solid var(--salie); border-bottom:2px solid var(--salie);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(225deg); top:31px}
.faq details p{padding:0 0 22px; margin:0; color:var(--grijs); font-size:.97rem}
.faq details a{color:var(--salie); font-weight:700; white-space:nowrap}

/* Contact */
.contact-kaarten{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; max-width:760px; margin:36px auto 0}
.contact-kaart{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  background:var(--wit); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:28px 26px; text-decoration:none; color:var(--antraciet);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.contact-kaart:hover{border-color:var(--salie); box-shadow:var(--schaduw); transform:translateY(-2px)}
.contact-kaart .rond-teken{margin-bottom:10px}
.contact-soort{font-size:.85rem; color:var(--grijs)}
.contact-waarde{font-weight:700; font-size:1.14rem; color:var(--salie); overflow-wrap:anywhere}
.contact-uitleg{font-size:.9rem; color:var(--grijs); margin-top:4px}

/* Slot */
.slot{padding:0 0 clamp(48px, 7vw, 88px)}
.slot-in{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--mist); border-radius:22px; padding:clamp(32px, 5vw, 56px);
}
.slot h2{margin:0; font-size:clamp(1.7rem, 3vw, 2.5rem)}

/* Voettekst */
.voet{background:var(--antraciet); color:rgba(255,255,255,.7); font-size:.94rem; padding:34px 0 calc(30px + env(safe-area-inset-bottom))}
.voet-in{display:flex; align-items:center; justify-content:space-between; gap:16px 32px; flex-wrap:wrap}
.voet-merk{color:#fff}
.voet .merk-teken{color:#fff}
.voet .merk-woord{color:#fff}
.voet .merk-woord span{color:var(--mint)}
.voet nav{display:flex; gap:20px; flex-wrap:wrap}
.voet a{color:rgba(255,255,255,.7); text-decoration:none}
.voet nav a{display:inline-flex; align-items:center; min-height:44px}
.voet a:hover{color:var(--mint)}
.voet p{margin:0}
.voet-bel{display:inline-flex; align-items:center; min-height:44px; color:#fff !important; font-weight:700; font-size:1.05rem}
.voet-wet{margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12)}
.voet-wet p{margin:0; font-size:.82rem; color:rgba(255,255,255,.5)}
.status-kaart[hidden]{display:none}

/* Adreskiezer met suggesties */
.adres-wikkel{position:relative}
.adres-lijst{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px);
  list-style:none; margin:0; padding:6px;
  background:var(--wit); border:1px solid var(--lijn); border-radius:var(--rond-klein);
  box-shadow:0 12px 28px rgba(46,51,56,.14); max-height:270px; overflow-y:auto;
}
.adres-lijst li{
  padding:13px 12px; min-height:46px; display:flex; align-items:center; border-radius:8px; cursor:pointer;
  font-size:.94rem; line-height:1.35; color:var(--antraciet);
}
.adres-lijst li:hover, .adres-lijst li.actief{background:var(--mist)}
.adres-lijst[hidden]{display:none}
input.adres-ok{
  border-color:var(--salie);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='%233E6B55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  padding-right:38px;
}

/* Kleinere schermen */
@media (max-width:1100px){
  .nav a svg{display:none}
  .nav a{padding:10px 9px}
}
@media (max-width:980px){
  .boek-raster, .film-raster, .vragen-raster, .duo, .donker-blok{grid-template-columns:1fr}
  .boekkaart, .vragen-kop{position:static}
  .beloften-rij{grid-template-columns:1fr 1fr; gap:20px}
  .stappen, .zitjelijst{grid-template-columns:1fr}
  .duo-beeld img{max-height:340px}
}
@media (max-width:860px){
  .menu-knop{display:flex}
  .nav{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 8px);
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--wit); border:1px solid var(--lijn); border-radius:var(--rond); padding:8px;
    box-shadow:0 16px 40px rgba(46,51,56,.16);
  }
  .nav.open{display:flex}
  .nav a{padding:14px 12px; min-height:48px}
  .nav a svg{display:inline-block}
  .nav .nav-knop{margin:6px 0 0; justify-content:center}
}
@media (max-width:760px){
  body{font-size:16px}
  .topbalk-scheid, .topbalk span{display:none}
  .kop{top:8px; margin-top:10px; width:calc(100% - 24px)}
  .kop-in{min-height:64px; padding:0 8px 0 16px}
  .hero-beeld{width:calc(100% - 16px); border-radius:18px; min-height:640px}
  .hero-beeld::after{background:linear-gradient(0deg, rgba(18,21,24,.9) 0%, rgba(18,21,24,.7) 50%, rgba(18,21,24,.15) 100%)}
  .hero-foto{object-position:72% 50%}
  .hero-tekst{padding:120px 20px 28px}
  .hero-knoppen .knop{width:100%}
  .zitje-kaart{grid-template-columns:1fr; padding:28px 24px 0; min-height:0}
  .zitje-kaart img{width:80%; margin:8px auto 0; justify-self:center}
  .prijs-form{grid-template-columns:1fr 1fr}
  .prijs-form button{grid-column:1 / -1; width:100%}
  .contact-kaarten{grid-template-columns:1fr}
  .slot-in{flex-direction:column; align-items:flex-start}
  .slot .knop{width:100%}
  .voet-in{flex-direction:column; align-items:flex-start}
}
@media (max-width:420px){
  .rij, .prijs-form, .beloften-rij{grid-template-columns:1fr}
  .merk-woord{font-size:1.08rem}
  .merk-teken{width:40px; height:26px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
  .knop:hover{transform:none}
}

/* Terugkeerpagina's na betalen (betaald.html, afgebroken.html) */
.omslag.smal{width:min(760px, calc(100% - 32px))}
.kop .omslag.kop-in{width:100%}
.knop-lijn{background:var(--wit); border-color:var(--lijn); color:var(--antraciet)}
.knop-lijn:hover{border-color:var(--salie); color:var(--salie)}
.dienstlijst{list-style:none; padding:0; margin:22px 0 26px; display:grid; gap:12px}
.dienstlijst li{position:relative; padding-left:34px; font-weight:600; font-size:.98rem; line-height:1.45}
.dienstlijst li::before{content:""; position:absolute; left:0; top:-.05em; width:22px; height:22px; border-radius:50%; background:var(--mint-zacht)}
.dienstlijst li::after{content:""; position:absolute; left:7px; top:.33em; width:8px; height:4px; border-left:2px solid var(--salie); border-bottom:2px solid var(--salie); transform:rotate(-45deg)}
.status-kaart{background:var(--wit); border:1px solid var(--lijn); border-radius:var(--rond); padding:clamp(24px, 4vw, 40px); box-shadow:var(--schaduw)}

/* Prijsknopje onder "Rit aanvragen" */
.boek-prijsknop{margin-top:10px}
#boekPrijsUit{margin-top:12px}

/* iPhone: datum- en tijdvakjes hebben in Safari een eigen minimumbreedte en lopen
   dan buiten het scherm. Die breedte uitzetten en de waarde links uitlijnen. */
.rij > label{min-width:0}
input[type="date"], input[type="time"]{
  -webkit-appearance:none; appearance:none; display:block;
  min-width:0; max-width:100%; min-height:50px; line-height:1.3;
}
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value{text-align:left; margin:0}
#afstandMelding{margin-bottom:16px}