/* Artee Drive — huisstijl
   Layout: zwarte ondergrond, gecentreerde secties met ruime marges, gouden sectielabels,
   omlijnde pil als enige knopvorm, stappen in omlijnde gouden cirkels. Bewust één donker thema. */
:root{
  --zwart:#000000;      /* achtergrond */
  --vlak:#0d0d0d;       /* licht verhoogde vlakken */
  --lijn:#2b2722;       /* scheidingslijnen, warm getint */
  --creme:#f4f4f4;      /* primaire tekst */
  --grijs:#8a8074;      /* subtekst */
  --grijs2:#968a7c;     /* labels in voettekst */
  --goud:#e6a058;       /* accent op donker */
  --goud-diep:#c98e42;  /* hover, lijnen */
  --tekst2:#d9d6d1;     /* lopende tekst, iets zachter */
  --fout:#f09a86;
  --pil-hover:#e6a05814;
  --f-kop:"Poppins","Segoe UI",Helvetica,Arial,sans-serif;
  --f-accent:"Lora",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--zwart);color:var(--creme);font-family:var(--f-kop);font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--zwart)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(2rem,6.4vw,3.4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.55rem,3.6vw,2.2rem)}
h3{font-size:1.05rem;font-weight:500}
.accent{font-family:var(--f-accent);font-style:italic;font-weight:400;color:var(--goud)}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.smal{max-width:720px;margin-inline:auto}
.label{font-weight:500;font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--goud)}
.sub{color:var(--grijs);font-size:1.05rem;max-width:58ch;margin-inline:auto}
.centraal{text-align:center}

/* Knop: altijd een omlijnde pil, nooit gevuld */
.pil{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:12px 30px;border:3px solid var(--goud);border-radius:999px;background:transparent;color:var(--creme);font:500 .86rem var(--f-kop);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.pil:hover{background:var(--pil-hover);border-color:var(--goud);color:var(--creme)}
.pil svg{width:20px;height:20px;flex:none;color:var(--goud)}
.pil-klein{min-height:40px;padding:6px 18px;border-width:2px;font-size:.72rem;letter-spacing:.18em}
.tekstlink{color:var(--goud);text-decoration:none;font-weight:500;border-bottom:1px solid var(--goud-diep);padding-bottom:1px}
.tekstlink:hover{color:var(--goud-diep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--goud);outline-offset:3px}

/* Kop */
.kop{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#000000eb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.kop .logo img{height:42px;width:auto}
.kop nav{display:flex;align-items:center;gap:26px}
.kop nav a{font-weight:500;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--grijs);transition:color .2s}
.kop nav a:hover,.kop nav a[aria-current="page"]{color:var(--creme)}
.kop nav a[aria-current="page"]{color:var(--goud)}
@media (max-width:640px){.kop .logo img{height:34px}.kop nav{gap:16px}.kop nav a{font-size:.66rem;letter-spacing:.14em}.kop nav .verberg-mobiel{display:none}}

/* Hero: werkt boven de vouw op een telefoon */
.hero{padding-block:56px 72px;text-align:center}
.hero .wrap{display:grid;justify-items:center;gap:22px}
.hero .lijn{width:min(380px,82%);opacity:.95}
.hero .sub{margin-top:-4px}
.status{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--lijn);border-radius:999px;padding:6px 16px;font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--creme)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--goud);box-shadow:0 0 0 4px #e6a05826}
.status.live i{background:#7bc58a;box-shadow:0 0 0 4px #7bc58a26}
.hero-noot{font-size:.86rem;color:var(--grijs)}
@media (max-width:640px){.hero{padding-block:30px 52px}.hero .wrap{gap:18px}.hero .lijn{width:70%}}

/* Secties */
.sectie{padding-block:88px;border-top:1px solid var(--lijn)}
.sectie-kop{display:grid;gap:14px;text-align:center;margin-bottom:46px}
@media (max-width:640px){.sectie{padding-block:62px}.sectie-kop{margin-bottom:34px}}

/* Zekerheden */
.zeker{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.zeker div{background:var(--zwart);padding:30px 26px;display:grid;gap:10px;align-content:start;text-align:center}
.zeker p{color:var(--grijs);font-size:.96rem}
.btw{margin-top:18px;text-align:center;color:var(--grijs);font-size:.84rem}
@media (max-width:760px){.zeker{grid-template-columns:1fr}.zeker div{padding:24px 20px}}

/* Bestemmingen */
.doelen{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.doel{display:grid;gap:12px;align-content:start;text-align:center;justify-items:center}
.doel svg{width:34px;height:34px;stroke:var(--goud);fill:none;stroke-width:1.4}
.doel p{color:var(--grijs);font-size:.96rem}
.tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.tags span{font-size:.78rem;font-weight:500;border:1px solid var(--lijn);border-radius:999px;padding:4px 12px}
.werkgebied{margin-top:44px;border:1px solid var(--lijn);padding:18px 22px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;font-size:.92rem;color:var(--grijs)}
.werkgebied svg{width:22px;height:22px;stroke:var(--goud);fill:none;stroke-width:1.6;margin-top:2px}
.werkgebied b{color:var(--creme);font-weight:500}
@media (max-width:760px){.doelen{grid-template-columns:1fr;gap:38px}}

/* Vito */
.vito{display:grid;justify-items:center;gap:36px}
.vito .lijn{width:min(560px,100%)}
.kenmerken{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn);width:100%}
.kenmerken div{background:var(--zwart);padding:22px 16px;text-align:center;display:grid;gap:4px;align-content:center}
.kenmerken b{font-weight:500;font-size:.98rem}
.kenmerken small{color:var(--grijs);font-size:.8rem}
@media (max-width:760px){.kenmerken{grid-template-columns:repeat(2,1fr)}}

/* Stappen in omlijnde gouden cirkels */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;list-style:none;margin:0;padding:0;counter-reset:stap}
.stappen li{display:grid;justify-items:center;text-align:center;gap:14px;counter-increment:stap}
.stappen li::before{content:counter(stap);width:38px;height:38px;border:2px solid var(--goud);border-radius:50%;display:grid;place-items:center;font-weight:500;font-size:.95rem;color:var(--goud);font-variant-numeric:tabular-nums}
.stappen p{max-width:28ch}
@media (max-width:760px){.stappen{grid-template-columns:1fr;gap:28px}}

/* Aanvraagformulier */
.aanvraag{max-width:720px;margin:0 auto;display:grid;gap:18px;border:1px solid var(--lijn);padding:32px;background:var(--vlak)}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rij>*{min-width:0}
.veld{display:grid;gap:7px}
.veld label{font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs2)}
.veld label em{font-style:normal;color:var(--goud)}
.veld input,.veld select,.veld textarea{width:100%;background:var(--zwart);border:1px solid var(--lijn);border-radius:0;color:var(--creme);font:300 1rem var(--f-kop);padding:12px 14px}
.veld textarea{min-height:88px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--goud);outline:none}
.verzend{display:grid;justify-items:center;gap:12px;margin-top:6px;text-align:center}
.melding{font-size:.86rem;color:var(--grijs);max-width:52ch}
.melding.fout{color:var(--fout)}
.privacy-noot{font-size:.78rem;color:var(--grijs);text-align:center}
@media (max-width:560px){.rij{grid-template-columns:1fr}.aanvraag{padding:22px 18px}}

/* Stille verwijzing naar de andere dienst */
.ook{padding-block:40px;border-top:1px solid var(--lijn);text-align:center;color:var(--grijs);font-size:.95rem}

/* Juridische pagina's */
.juridisch{padding-block:56px 80px}
.juridisch .wrap{max-width:760px}
.juridisch h1{font-size:clamp(1.8rem,5vw,2.6rem);margin:12px 0 10px}
.juridisch h2{font-size:1.15rem;font-weight:500;margin:38px 0 10px;color:var(--goud)}
.juridisch p,.juridisch li{color:var(--tekst2)}
.juridisch p+p{margin-top:12px}
.juridisch ul{padding-left:20px;margin:10px 0 0;display:grid;gap:6px}
.juridisch .datum{color:var(--grijs);font-size:.88rem}
.invullen{background:#e6a05829;color:var(--goud);padding:0 4px}

/* Voettekst */
.voet{border-top:1px solid var(--lijn);padding-block:46px 40px;text-align:center;color:var(--grijs);font-size:.86rem}
.voet .wrap{display:grid;justify-items:center;gap:18px}
.voet .logo img{height:50px;width:auto}
.voet .slogan{font-weight:500;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grijs2)}
.nap{font-style:normal;display:grid;gap:2px}
.nap a{text-decoration:none}
.nap a:hover{color:var(--goud)}
.wettelijk{font-size:.76rem;letter-spacing:.06em;line-height:1.7;color:var(--grijs);max-width:70ch}
.voet-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.voet-links a{text-decoration:none;color:var(--grijs2)}
.voet-links a:hover{color:var(--goud)}

/* Tarieven */
.tarieven{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;align-items:start}
.tarieven>*{min-width:0}
.tarief{border:1px solid var(--lijn);background:var(--vlak);display:grid}
.tarief.breed{grid-column:1 / -1}
.tarief-kop{padding:20px 22px 16px;border-bottom:1px solid var(--lijn);display:grid;gap:4px}
.tarief-kop .label{font-size:.7rem}
.tarief-kop small{color:var(--grijs);font-size:.82rem}
.tabel-wrap{overflow-x:auto}
.tarief table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tarief th,.tarief td{padding:12px 22px;text-align:left;border-bottom:1px solid var(--lijn);font-weight:300;font-size:.95rem;vertical-align:top}
.tarief thead th{font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs2);padding-block:10px}
.tarief td.prijs,.tarief th.prijs{text-align:right;white-space:nowrap}
.tarief td.prijs{font-weight:500;color:var(--creme)}
.tarief tr:last-child td{border-bottom:0}
.tarief td small{display:block;color:var(--grijs);font-size:.8rem}
.tarief-voet{padding:14px 22px 18px;border-top:1px solid var(--lijn);color:var(--grijs);font-size:.86rem;display:grid;gap:4px}
.tarief-voet b{color:var(--goud);font-weight:500}
.geldig{font-size:.86rem;color:var(--grijs)}
.goed-te-weten{margin-top:28px;border:1px solid var(--lijn);padding:22px;display:grid;gap:8px}
.goed-te-weten ul{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--tekst2)}
@media (max-width:820px){.tarieven{grid-template-columns:1fr}}
@media (max-width:440px){.tarief th,.tarief td{padding-inline:14px;font-size:.9rem}.tarief-kop,.tarief-voet{padding-inline:14px}}
.sociaal{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;font-size:.86rem;letter-spacing:.06em;color:var(--creme);border:1px solid var(--lijn);border-radius:999px;padding:8px 18px;transition:border-color .2s,color .2s}
.sociaal:hover{border-color:var(--goud);color:var(--goud)}
.sociaal svg{width:18px;height:18px;fill:none;stroke:var(--goud);stroke-width:1.6}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* Taalkeuze */
.taal{display:flex;gap:2px;border:1px solid var(--lijn);border-radius:999px;padding:3px}
.taal a{font-weight:500;font-size:.66rem;letter-spacing:.12em;text-decoration:none;color:var(--grijs);padding:4px 9px;border-radius:999px}
.taal a:hover{color:var(--creme)}
.taal a[aria-current="true"]{background:var(--goud);color:var(--zwart)}
@media (max-width:640px){
  .kop .wrap{flex-wrap:wrap;row-gap:8px}
  .kop nav{order:3;width:100%;justify-content:center;border-top:1px solid var(--lijn);padding-top:8px}
}

/* Fotogalerij */
.galerij{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.foto{margin:0;position:relative;overflow:hidden;background:var(--vlak);aspect-ratio:4/3;max-width:100%}
.foto.groot{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.foto img{width:100%;height:100%;object-fit:cover}
.foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;background:linear-gradient(transparent,#000000cc);font-weight:500;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#f4f4f4}
.foto.leeg{border:1px dashed var(--goud-diep);display:grid;place-items:center;min-height:150px}
.foto.leeg img{display:none}
.foto.leeg figcaption{position:static;background:none;padding:12px;text-align:center;color:var(--goud)}
.foto.leeg::before{content:"Foto";position:absolute;top:10px;left:12px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs)}
@media (max-width:760px){.galerij{grid-template-columns:1fr 1fr}.foto.groot{grid-column:1 / -1;grid-row:auto;aspect-ratio:16/10}}

/* Je chauffeur */
.chauffeur{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.chauffeur:has(.chauffeur-foto[hidden]){grid-template-columns:1fr;max-width:720px;text-align:center}
.chauffeur-tekst{display:grid;gap:16px;min-width:0}
.chauffeur-tekst p:not(.label):not(.accent){color:var(--tekst2)}
.chauffeur-tekst .accent{font-size:1.2rem}
.chauffeur-foto .foto{aspect-ratio:4/5}
@media (max-width:760px){.chauffeur{grid-template-columns:1fr;gap:28px}.chauffeur-foto .foto{aspect-ratio:4/3}}

/* Veelgestelde vragen */
.faq{max-width:760px;margin:0 auto;border-top:1px solid var(--lijn)}
.faq details{border-bottom:1px solid var(--lijn)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-weight:500;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--goud);border-bottom:2px solid var(--goud);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--goud)}
.faq details p{padding:0 0 22px;color:var(--tekst2);max-width:64ch}

/* Vergelijkingstabel */
.vergelijk table td,.vergelijk table th{text-align:left;white-space:normal}
.vergelijk tbody td:first-child{color:var(--grijs2);font-weight:500;font-size:.8rem;letter-spacing:.06em}
.vergelijk tbody td:nth-child(2){color:var(--creme);font-weight:500}
.vergelijk table{min-width:560px}

/* ===== Meer ritme op de startpagina ===== */
.sectie-kop.links{text-align:left;justify-items:start;margin-inline:0}
.sectie-kop.links .sub{margin-inline:0}
.kleine-noot{color:var(--grijs);font-size:.84rem}

/* Hero in twee kolommen */
.hero-split{text-align:left;padding-block:64px 80px}
.hero-split .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;justify-items:start}
.hero-tekst{display:grid;gap:22px;justify-items:start;min-width:0}
.hero-tekst .sub{margin-inline:0}
.hero-beeld{width:100%;min-width:0;display:grid;place-items:center}
.hero-beeld .lijn{width:100%;max-width:560px}
.hero-beeld:has(.hero-foto:not([hidden])) .lijn{display:none}
.hero-foto{width:100%}
.hero-foto .foto{aspect-ratio:4/3}
.hero-feiten{list-style:none;margin:10px 0 0;padding:18px 0 0;border-top:1px solid var(--lijn);display:flex;flex-wrap:wrap;gap:16px 34px}
.hero-feiten li{display:grid;gap:2px}
.hero-feiten b{font-size:1.5rem;font-weight:500;color:var(--goud);font-variant-numeric:tabular-nums;line-height:1.1}
.hero-feiten span{font-size:.78rem;color:var(--grijs)}
@media (max-width:860px){
  .hero-split{padding-block:32px 52px}
  .hero-split .wrap{grid-template-columns:1fr;gap:30px}
  .hero-beeld .lijn{max-width:420px}
}

/* Kop met link rechts */
.kop-rij{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:34px}
.kop-rij .sectie-kop{margin-bottom:0}

/* Routekaarten */
.routes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.route{display:grid;gap:8px;align-content:start;padding:22px 20px;border:1px solid var(--lijn);text-decoration:none;transition:border-color .2s,background .2s}
.route:hover{border-color:var(--goud-diep);background:#e6a0580a}
.route small{font-weight:500;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grijs2)}
.route b{font-weight:500;font-size:1.08rem;line-height:1.3}
.route-prijs{font-weight:700;font-size:1.7rem;color:var(--goud);font-variant-numeric:tabular-nums;margin-top:6px}
.route-prijs em{font-style:normal;font-weight:300;font-size:.8rem;color:var(--grijs);margin-right:4px}
.route-noot{font-size:.8rem;color:var(--grijs)}
@media (max-width:900px){.routes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.routes{grid-template-columns:1fr}}
.routes + .werkgebied{margin-top:28px}

/* Twee kolommen: kop links, inhoud rechts */
.twee{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.twee .sectie-kop{margin-bottom:0}
@media (min-width:861px){.twee .sectie-kop{position:sticky;top:120px}}
@media (max-width:860px){.twee{grid-template-columns:1fr;gap:34px}}

/* Beloftes */
.beloftes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:30px 32px}
.beloftes li{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--goud-diep);align-content:start}
.beloftes p{color:var(--grijs);font-size:.95rem}
@media (max-width:560px){.beloftes{grid-template-columns:1fr;gap:24px}}

/* Wagen: kop links */
.vito{justify-items:stretch}
.vito .galerij{margin-top:4px}

/* FAQ naast de kop */
.faq-blok .faq{max-width:none;margin:0}
.faq-kop .pil{margin-top:6px}


/* ===== Kleurvlakken: zwart, antraciet, crème en goud =====
   Elke sectie herdefinieert de kleurtokens; alle onderdelen volgen vanzelf. */
.band{--zwart:#16130f;--vlak:#1f1b16;--lijn:#36302780;background:var(--zwart)}
.licht{
  --zwart:#f4f4f4;      /* crème ondergrond */
  --vlak:#ffffff;       /* kaarten en velden */
  --lijn:#d9d2c7;
  --creme:#0d0d0d;      /* inkt */
  --tekst2:#2f2a24;
  --grijs:#5e564c;
  --grijs2:#6b6156;
  --goud:#93622a;       /* dieper goud voor tekst op licht */
  --goud-diep:#c98e42;  /* huisstijl-goud voor lijnen op licht */
  --fout:#b3412b;
  --pil-hover:#c98e421f;
  background:var(--zwart);color:var(--creme);color-scheme:light;
}
.goudband{
  --zwart:#e6a058;--vlak:#eaa963;--lijn:#0d0d0d33;
  --creme:#0d0d0d;--tekst2:#1c1610;--grijs:#3b2a15;--grijs2:#3b2a15;
  --goud:#0d0d0d;--goud-diep:#0d0d0d;--pil-hover:#0d0d0d14;
  background:var(--zwart);color:var(--creme);border-top:0!important;
}
.licht,.goudband,.band{border-top-color:transparent}
.sectie.licht + .sectie,.sectie.goudband + .sectie{border-top-color:transparent}
.licht .route{background:var(--vlak)}
.licht .route:hover{background:#fffaf2}
.licht .foto{background:#e9e4dc}
.licht .werkgebied{background:var(--vlak)}
.licht .tarief,.licht .goed-te-weten{background:var(--vlak)}
.licht .invullen{background:#c98e4233}
.goudband .stappen li::before{border-color:#0d0d0d;color:#0d0d0d}
.juridisch.licht{min-height:60vh}

/* ===== Rust: donkere opening, één lichte toon voor de rest, donkere voet ===== */
.sectie,.ook{
  --zwart:#f6f5f2;--vlak:#ffffff;--lijn:#e2ddd5;
  --creme:#141210;--tekst2:#3a352f;--grijs:#6b645b;--grijs2:#7a7166;
  --goud:#93622a;--goud-diep:#c98e42;--fout:#b3412b;--pil-hover:#c98e421a;
  background:var(--zwart);color:var(--creme);color-scheme:light;
}
.sectie{padding-block:112px;border-top:1px solid var(--lijn)}
.hero + .sectie{border-top:0}
@media (max-width:700px){.sectie{padding-block:72px}}
.ook{border-top:1px solid var(--lijn)}

/* Rustiger typografie: kleiner, het Lora-accent enkel nog bovenaan */
h1{font-size:clamp(2rem,5vw,3.1rem)}
h2{font-size:clamp(1.45rem,2.8vw,1.95rem);font-weight:700;letter-spacing:-.005em}
.sectie h2 .accent{font-family:inherit;font-style:normal;color:inherit}
.label{letter-spacing:.26em}
.sectie-kop{gap:12px}

/* Hero: status als stille regel */
.hero .status{border:0;padding:0;font-size:.7rem;color:var(--grijs)}
.hero-split{padding-block:88px 104px}
.hero-tekst{gap:24px}
@media (max-width:860px){.hero-split{padding-block:40px 60px}}

/* Prijslijst */
.prijslijst{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--creme)}
.prijslijst li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label prijs" "naam prijs";gap:2px 20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--lijn)}
.pl-label{grid-area:label;font-weight:500;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grijs2)}
.pl-naam{grid-area:naam;font-weight:500;font-size:1.08rem;min-width:0}
.pl-prijs{grid-area:prijs;font-weight:500;font-size:1.3rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-prijs em{font-style:normal;font-weight:300;font-size:.78rem;color:var(--grijs);margin-right:4px}
.sectie-kop .tekstlink{justify-self:start;margin-top:6px}

/* Beloftes onder elkaar */
.beloftes{grid-template-columns:1fr;gap:0}
.beloftes li{border-top:0;border-bottom:1px solid var(--lijn);padding:22px 0;gap:6px}
.beloftes li:first-child{border-top:1px solid var(--creme)}
.beloftes h3{font-size:1.02rem}
.beloftes p{color:var(--tekst2)}

/* Wagen: kenmerken als rustige lijst */
.vito{display:grid;gap:48px}
.vito .kenmerken{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;background:none;border:0;border-top:1px solid var(--creme)}
.vito .kenmerken div{background:none;padding:16px 0;border-bottom:1px solid var(--lijn);text-align:left;display:grid;gap:2px}
.vito .kenmerken b{font-size:.95rem}
@media (max-width:520px){.vito .kenmerken{grid-template-columns:1fr}}

/* Chauffeur */
.chauffeur-tekst{gap:18px}
.chauffeur-tekst p:not(.label){color:var(--tekst2)}
.review-regel{margin-top:10px;padding-top:18px;border-top:1px solid var(--lijn);font-size:.92rem}

/* FAQ */
.faq{border-top:1px solid var(--creme)}
.faq details p{color:var(--tekst2)}

/* Stappen klein, boven het formulier */
.stappen.klein{max-width:720px;margin:0 auto 34px;gap:20px}
.stappen.klein li{gap:10px}
.stappen.klein p{font-size:.9rem;color:var(--tekst2)}
.aanvraag{border-color:var(--lijn)}


/* ===== Lichte variant: ook opening, kop en voet licht ===== */
:root{
  --zwart:#ffffff;--vlak:#ffffff;--lijn:#e2ddd5;
  --creme:#141210;--tekst2:#3a352f;--grijs:#6b645b;--grijs2:#7a7166;
  --goud:#93622a;--goud-diep:#c98e42;--fout:#b3412b;--pil-hover:#c98e421a;
  color-scheme:light;
}
body{background:#ffffff;color:var(--creme)}
body::before{background:#ffffff}
.kop{background:#ffffffeb;border-bottom-color:var(--lijn)}
.hero{background:#ffffff;color:var(--creme)}
.hero-beeld .lijn{max-width:520px}
.voet{background:#f6f5f2;border-top:1px solid var(--lijn);color:var(--grijs)}
.taal a[aria-current="true"]{background:var(--creme);color:#fff}


/* ===== Opbouw-variant: opening met grote foto en aanvraagkaart ===== */
.ob-hero{position:relative;min-height:560px;display:grid;align-items:center;background:#141210;color:#f4f4f4;overflow:hidden;padding-block:72px}
.ob-hero-beeld{position:absolute;inset:0}
.ob-hero-beeld .foto{position:absolute;inset:0;aspect-ratio:auto;margin:0;background:#1d1a16}
.ob-hero-beeld .foto img{width:100%;height:100%;object-fit:cover}
.ob-hero-beeld .foto.leeg{border:0;border-bottom:1px dashed #c98e42}
.ob-hero-beeld .foto.leeg figcaption{color:#e6a058}
.ob-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000000b3 0%,#00000059 55%,#00000014 100%);pointer-events:none}
.ob-hero-inhoud{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px;align-items:center;width:100%}
.ob-hero-tekst{display:grid;gap:20px;justify-items:start;--creme:#f4f4f4;--grijs:#cfc8bd}
.ob-hero-tekst h1{color:#fff}
.ob-hero-tekst .accent{color:#e6a058}
.ob-hero-tekst .sub{margin:0;color:#e4ded4}
.ob-hero .status{border:0;padding:0;color:#cfc8bd;font-size:.7rem}
.ob-boek{background:#ffffff;color:#141210;padding:26px;display:grid;gap:14px;box-shadow:0 24px 60px #00000040;
  --zwart:#f6f5f2;--creme:#141210;--lijn:#e2ddd5;--grijs:#6b645b;--grijs2:#7a7166;--goud:#93622a}
.ob-boek-kop{font-weight:700;font-size:1.15rem}
.ob-boek .veld input,.ob-boek .veld select{background:#f6f5f2;border-color:#e2ddd5;color:#141210}
.ob-knop{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border:0;background:#141210;color:#fff;font:500 .82rem var(--f-kop);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;margin-top:4px}
.ob-knop:hover{background:#2a2621}
.ob-knop svg{width:18px;height:18px;color:#e6a058}
.ob-boek .melding{font-size:.78rem;color:#6b645b;max-width:none}
@media (max-width:900px){.ob-hero{min-height:0;padding-block:40px}.ob-hero-inhoud{grid-template-columns:1fr;gap:28px}}

/* Kaarten met foto */
.ob-raster{display:grid;gap:28px}
.ob-raster.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.ob-raster.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.ob-raster.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.ob-raster.drie{grid-template-columns:1fr}}
@media (max-width:520px){.ob-raster.vier{grid-template-columns:1fr}}
.ob-kaart{display:grid;gap:10px;align-content:start;min-width:0}
.ob-foto{margin-bottom:8px}
.ob-foto .foto{aspect-ratio:4/3}
.ob-kaart h3{font-size:1.05rem;font-weight:500}
.ob-kaart p{color:var(--tekst2);font-size:.94rem}
.ob-prijs{font-weight:500;color:var(--creme)!important;font-variant-numeric:tabular-nums}
.ob-link{color:var(--creme);text-decoration:none;font-weight:500;font-size:.88rem;border-bottom:1px solid var(--creme);justify-self:start;padding-bottom:1px}
.ob-link:hover{color:var(--goud);border-color:var(--goud)}

/* Beloftes op één rij */
.ob-beloftes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;border-top:1px solid var(--creme);padding-top:26px}
.ob-beloftes li{display:grid;gap:8px;align-content:start}
.ob-beloftes h3{font-size:1rem}
.ob-beloftes p{color:var(--tekst2);font-size:.92rem}
@media (max-width:900px){.ob-beloftes{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ob-beloftes{grid-template-columns:1fr}}
.ob-hero-beeld .foto.leeg{display:block}
.ob-hero-beeld .foto.leeg figcaption{position:absolute;left:auto;right:18px;bottom:14px;padding:0}

/* Foto's van bestemmingen */
.ob-hero-beeld.vast .foto img{opacity:1}
.ob-hero-beeld.vast .foto{background:#2a2621}
.ob-hero::after{background:linear-gradient(90deg,#000000c7 0%,#00000080 50%,#00000026 100%)}
.ob-bestemming{text-decoration:none;color:inherit}
.ob-bestemming .foto{aspect-ratio:4/3;margin:0 0 8px;background:#e9e4dc}
.ob-bestemming .foto img{transition:transform .5s ease}
.ob-bestemming:hover .foto img{transform:scale(1.03)}
.ob-bestemming:hover h3{color:var(--goud)}
.ob-bestemming .ob-prijs{font-size:1.25rem}
.ob-bestemming .ob-prijs em{font-style:normal;font-weight:300;font-size:.78rem;color:var(--grijs);margin-right:4px}
.ob-ook{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--creme);padding-top:22px}
.ob-ook li{display:grid;gap:3px;align-content:start}
.ob-ook b{font-weight:500;font-size:.95rem}
.ob-ook span{font-variant-numeric:tabular-nums}
.ob-ook small{color:var(--grijs);font-size:.78rem}
@media (max-width:900px){.ob-ook{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ob-ook{grid-template-columns:1fr}}
.fotocredits{font-size:.7rem;line-height:1.7;color:var(--grijs);max-width:80ch}
.fotocredits a{color:inherit}
.ob-bestemming{grid-template-columns:1fr}
.ob-bestemming > *{grid-area:auto;grid-column:1}
.ob-bestemming .foto{width:100%}
.ob-bestemming h3{margin-top:-4px}
.ob-bestemming .ob-prijs{margin-top:2px}

/* ===== Kop zoals bij de grote spelers: transparant over de foto, één heldere merknaam ===== */
.ob-kop{position:sticky;background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .3s,border-color .3s}
.ob-kop .wrap{padding-block:18px}
.ob-kop + main .ob-hero{margin-top:-78px;padding-top:150px}
.merk{display:flex;align-items:center;gap:14px;text-decoration:none}
.merk img{display:block;height:auto}
.merk-bus img{width:74px}
.merk-woord img{width:214px}
.merk .op-licht{display:none}
.ob-kop nav a{color:#ffffffcc}
.ob-kop nav a:hover,.ob-kop nav a[aria-current="page"]{color:#fff}
.ob-kop nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 #e6a058;padding-bottom:4px}
.ob-kop .taal{border-color:#ffffff59}
.ob-kop .taal a{color:#ffffffcc}
.ob-kop .taal a[aria-current="true"]{background:#fff;color:#141210}
@media (max-width:640px){
  .merk-bus{display:none}
  .merk-woord img{width:170px}
  .ob-kop .wrap{padding-block:12px}
  .ob-kop nav{border-top-color:#ffffff33}
  .ob-kop.vast nav{border-top-color:var(--lijn)}
  .ob-kop + main .ob-hero{margin-top:-104px;padding-top:140px}
}
/* correctie: kop vast bovenaan over de foto, logo op de juiste maat */
.kop.ob-kop{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0}
.ob-kop + main .ob-hero{margin-top:0;padding-top:150px}
.kop.ob-kop .merk img{height:auto}
.kop.ob-kop .merk-bus img{width:64px}
.kop.ob-kop .merk-woord img{width:200px}
@media (max-width:640px){
  .kop.ob-kop .merk-woord img{width:160px}
  .ob-kop + main .ob-hero{margin-top:0;padding-top:128px}
}
/* na het scrollen: zwarte balk met het originele logo */
.ob-kop.vast{background:#000000f0;border-bottom-color:#ffffff1a}
.ob-kop.vast .op-foto{display:block}
.ob-kop.vast .op-licht{display:none}
.ob-kop.vast nav a{color:#ffffffcc}
.ob-kop.vast nav a:hover,.ob-kop.vast nav a[aria-current="page"]{color:#fff}
.ob-kop.vast .taal{border-color:#ffffff40}
.ob-kop.vast .taal a{color:#ffffffcc}
.ob-kop.vast .taal a[aria-current="true"]{background:#fff;color:#141210}
@media (max-width:640px){.ob-kop.vast nav{border-top-color:#ffffff26}}

/* Kleinere fotokop voor tarieven en pakketten */
.ob-hero-klein{min-height:420px;text-align:center}
.ob-hero-midden{position:relative;z-index:1;display:grid;justify-items:center;gap:20px;
  --creme:#ffffff;--grijs:#d8d2c8;--goud:#e6a058;--goud-diep:#c98e42;--pil-hover:#ffffff14;--lijn:#ffffff33}
.ob-hero-midden h1{color:#fff}
.ob-hero-midden .accent{color:#e6a058}
.ob-hero-midden .sub,.ob-hero-midden .geldig{color:#e4ded4;margin-inline:auto}
.ob-hero-midden .label{color:#e6a058}
.ob-hero-midden .lijn{display:none}
.ob-hero-midden .status{border:0;padding:0;color:#d8d2c8}
.ob-hero-klein .ob-hero-beeld .foto.leeg figcaption{color:#e6a058}
.ob-hero-klein::after{background:linear-gradient(180deg,#00000099 0%,#00000073 60%,#000000a6 100%)}
/* Juridische pagina's: ruimte onder de vaste kop */
.ob-juridisch{padding-top:150px}
@media (max-width:640px){.ob-juridisch{padding-top:150px}.ob-hero-klein{min-height:0;padding-top:150px}}

/* Contact */
.ob-contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.ob-contact .sectie-kop{margin-bottom:0}
.ob-contact-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--creme)}
.ob-contact-lijst li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--lijn);align-items:baseline}
.ob-contact-lijst small{font-weight:500;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grijs2)}
.ob-contact-lijst a{text-decoration:none;font-size:1.05rem}
.ob-contact-lijst a:hover{color:var(--goud)}
.ob-contact .pil{margin-top:8px;justify-self:start}
@media (max-width:760px){.ob-contact{grid-template-columns:1fr;gap:30px}.ob-contact-lijst li{grid-template-columns:1fr;gap:4px}}

/* Bestemmingen per groep */
.ob-groep{font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--grijs2);margin:48px 0 18px;padding-top:18px;border-top:1px solid var(--creme)}
#bestemmingen .sectie-kop{margin-bottom:8px}
#bestemmingen .ob-bestemming h3{font-size:1rem}
#bestemmingen .ob-prijs{font-size:1.05rem}

/* Weetje onder elke bestemming */
.ob-weetje{font-size:.84rem;line-height:1.55;color:var(--grijs)!important;padding-top:10px;border-top:1px solid var(--lijn);margin-top:2px}
.ob-weetje:empty{display:none}

/* Thuisbasis Hemiksem */
.ob-thuis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.ob-thuis:has(.ob-thuis-foto[hidden]){grid-template-columns:1fr;max-width:760px}
.ob-thuis-foto .foto{aspect-ratio:4/3}
.ob-thuis-tekst{display:grid;gap:16px;min-width:0}
.ob-thuis-tekst > p:not(.label):not(.ob-weetje):not(.ob-buren-kop){color:var(--tekst2)}
.ob-buren-kop{font-weight:500;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grijs2);margin-top:8px}
.ob-buren{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ob-buren li{border:1px solid var(--lijn);border-radius:999px;padding:5px 14px;font-size:.86rem;background:var(--vlak)}
.ob-buren li:first-child{border-color:var(--goud-diep);color:var(--goud)}
@media (max-width:760px){.ob-thuis{grid-template-columns:1fr;gap:28px}}
/* ===== Voettekst: originele logo in een zwarte band ===== */
.voet{padding-top:0}
.voet-merk{background:#000;width:100%;padding:34px 16px 30px;margin-bottom:40px;display:flex;justify-content:center}
.voet-merk img{display:block;width:280px;max-width:100%;height:auto}
@media (max-width:520px){.voet-merk img{width:220px}}
/* Ankers niet onder de vaste kop laten verdwijnen */
section[id],article[id]{scroll-margin-top:90px}
@media (max-width:640px){section[id],article[id]{scroll-margin-top:110px}}
.ob-pakket h3{margin-top:4px}
.ob-ook figure.foto{margin:0 0 12px;aspect-ratio:3/2;overflow:hidden;background:var(--creme)}
.ob-ook figure.foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Kop: taalmenu en knop donker/licht ===== */
.ob-tools{display:flex;align-items:center;gap:10px}
.ob-taal{position:relative}
.ob-taal summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;color:#fff;font:500 .78rem var(--f-kop);letter-spacing:.12em;padding:8px 6px;border-radius:8px}
.ob-taal summary::-webkit-details-marker{display:none}
.ob-taal summary:hover{color:#e6a058}
.ob-taal svg,.ob-thema svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ob-globe{width:17px;height:17px}
.ob-pijl{width:14px;height:14px;transition:transform .2s}
.ob-taal[open] .ob-pijl{transform:rotate(180deg)}
.ob-taal-lijst{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;background:#141210;border:1px solid #ffffff1f;border-radius:10px;padding:8px;display:grid;box-shadow:0 18px 40px #00000059;z-index:30}
.ob-taal-lijst a{color:#ffffffd9;text-decoration:none;font:500 .76rem var(--f-kop);letter-spacing:.14em;text-transform:uppercase;padding:10px 12px;border-radius:6px}
.ob-taal-lijst a:hover{background:#ffffff12;color:#fff}
.ob-taal-lijst a[aria-current="true"]{color:#ffffff73}
.ob-thema{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff4d;border-radius:10px;background:transparent;color:#fff;cursor:pointer}
.ob-thema:hover{border-color:#e6a058;color:#e6a058}
.ob-thema svg{width:18px;height:18px}
.ob-zon{display:none}
html[data-thema="donker"] .ob-maan{display:none}
html[data-thema="donker"] .ob-zon{display:block}

/* ===== Donkere weergave ===== */
html[data-thema="donker"],
html[data-thema="donker"] :is(.sectie,.ook,.licht,.voet,.ob-boek,.juridisch){
  --zwart:#0f0e0d;--vlak:#191715;--lijn:#2e2a25;
  --creme:#f1ede7;--tekst2:#d6d0c7;--grijs:#a69d91;--grijs2:#9a8f82;
  --goud:#e6a058;--goud-diep:#c98e42;--fout:#f09a86;--pil-hover:#e6a05814;
  color-scheme:dark}
html[data-thema="donker"] body,html[data-thema="donker"] body::before{background:#0f0e0d;color:var(--creme)}
html[data-thema="donker"] :is(.sectie,.ook,.licht,.juridisch){background:var(--zwart);color:var(--creme)}
html[data-thema="donker"] .voet{background:#0f0e0d;border-top-color:var(--lijn)}
html[data-thema="donker"] .ob-boek{background:#191715;color:var(--creme);box-shadow:0 24px 60px #00000080}
html[data-thema="donker"] .ob-boek .veld input,html[data-thema="donker"] .ob-boek .veld select{background:#0f0e0d;border-color:#2e2a25;color:var(--creme)}
html[data-thema="donker"] .ob-boek .melding{color:var(--grijs)}
html[data-thema="donker"] .ob-knop{background:#e6a058;color:#141210}
html[data-thema="donker"] .ob-knop svg{color:#141210}
html[data-thema="donker"] .ob-knop:hover{background:#f0b06c}
html[data-thema="donker"] :is(.foto,.licht .foto,.ob-bestemming .foto){background:#24211d}
html[data-thema="donker"] .licht .route:hover{background:#1f1c19}
.ob-richtprijs{background:#f6efe4;border-left:3px solid #c98e42;padding:10px 14px;font-size:.88rem;font-weight:500;color:#141210}
html[data-thema="donker"] .ob-richtprijs{background:#2a2219;color:#f1ede7}
.ob-boek .rij{gap:12px}
[hidden]{display:none!important}

/* ===== Gsm: bestemmingen en diensten als rij om opzij te vegen ===== */
@media (max-width:600px){
  .ob-raster.vier,.ob-ook{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px;padding-bottom:6px}
  .ob-raster.vier::-webkit-scrollbar,.ob-ook::-webkit-scrollbar{display:none}
  .ob-raster.vier>*,.ob-ook>li{scroll-snap-align:start}
  .ob-ook{border-top:0;padding-top:0}
}
.ob-credits{margin:22px 0 0;padding-left:20px;display:grid;gap:8px;color:var(--tekst2)}
.ob-credits a{color:inherit}
/* Logo linksboven: ARTEEDRIVE als één woord, zonder silhouet */
.kop.ob-kop .merk-woord img{width:230px}
@media (max-width:640px){.kop.ob-kop .merk-woord img{width:172px}}
/* Gsm: ook Contact in het menu; past het niet, dan kan het menu opzij schuiven */
@media (max-width:640px){
  .kop.ob-kop nav .verberg-mobiel{display:inline-block}
  .kop.ob-kop nav{gap:14px;justify-content:center;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .kop.ob-kop nav::-webkit-scrollbar{display:none}
  .kop.ob-kop nav a{letter-spacing:.1em;flex-shrink:0}
}
@media (max-width:380px){.kop.ob-kop nav{gap:11px}.kop.ob-kop nav a{letter-spacing:.06em}}
@media (max-width:640px){.kop.ob-kop nav{justify-content:safe center}}
input[type="date"],input[type="time"]{cursor:pointer}
/* Bredere opbouw op grote schermen: logo en tekst dichter bij de rand, zoals Blacklane en Uber */
@media (min-width:1100px){.wrap{max-width:1280px;padding-left:40px;padding-right:40px}}
@media (min-width:1500px){.wrap{max-width:1400px;padding-left:56px;padding-right:56px}}
.juridisch .wrap{max-width:760px}
/* Kop en grote foto: logo en titel dicht bij de linkerrand, zoals Transfeero (± 7% van de breedte) */
@media (min-width:1100px){
  .kop.ob-kop .wrap,.ob-hero .wrap{max-width:none;padding-left:clamp(40px,7vw,140px);padding-right:clamp(40px,7vw,140px)}
}

/* ===== Boekingskaart in de stijl van Transfeero en Blacklane ===== */
.ob-boek{border-radius:16px;padding:18px;gap:12px;align-self:center}
.ob-paneel{display:grid;gap:10px}
.ob-paneel[hidden]{display:none}
.ob-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#f1eee9;border-radius:999px;padding:4px}
.ob-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:transparent;color:#4a443d;font:500 .92rem var(--f-kop);padding:11px 10px;cursor:pointer;min-height:44px}
.ob-tabs button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ob-tabs button[aria-selected="true"]{background:#141210;color:#fff}
.ob-veld{display:flex;align-items:center;gap:12px;border:1px solid #e2ddd5;border-radius:12px;background:#fff;padding:9px 14px;min-height:58px;position:relative}
.ob-veld:focus-within{border-color:#c98e42;box-shadow:0 0 0 3px #c98e4226}
.ob-ico{width:20px;height:20px;flex-shrink:0;fill:none;stroke:#93622a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ob-veld-in{display:grid;gap:1px;flex:1;min-width:0;cursor:text}
.ob-veld-label{font-size:.74rem;font-weight:500;color:#6b645b;letter-spacing:.01em}
.ob-veld-label em{font-style:normal;color:#c98e42}
.ob-veld input,.ob-veld select{width:100%;border:0;background:transparent;padding:0;font:400 1rem var(--f-kop);color:#141210;outline:none;min-width:0}
.ob-veld input::placeholder{color:#9a9188}
.ob-veld select{cursor:pointer;-webkit-appearance:none;appearance:none}
.ob-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-duo[hidden],.ob-veld-wrap[hidden]{display:none}
.ob-teller{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 14px}
.ob-teller-knoppen{display:flex;align-items:center;gap:12px}
.ob-teller-knoppen button{width:34px;height:34px;border-radius:50%;border:1px solid #cfc8bd;background:#fff;color:#141210;font:400 1.2rem/1 var(--f-kop);cursor:pointer;display:grid;place-items:center}
.ob-teller-knoppen button:hover{border-color:#c98e42;color:#93622a}
.ob-teller-knoppen input{width:2.2ch;text-align:center;font-weight:500;font-size:1.05rem;-moz-appearance:textfield}
.ob-teller-knoppen input::-webkit-outer-spin-button,.ob-teller-knoppen input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ob-retour{border:1px dashed #cfc8bd;border-radius:12px;background:transparent;color:#141210;font:500 .95rem var(--f-kop);text-align:left;padding:16px 16px;cursor:pointer;min-height:52px}
.ob-retour:hover{border-color:#c98e42}
.ob-retour .ob-retour-uit,.ob-retour[aria-pressed="true"] .ob-retour-aan{display:none}
.ob-retour[aria-pressed="true"] .ob-retour-uit{display:inline}
.ob-knop{background:#e6a058;color:#141210;border-radius:12px;min-height:56px;font-weight:600}
.ob-knop svg{color:#141210}
.ob-knop:hover{background:#f0b06c}
.ob-vertrouwen{text-align:center;font-size:.8rem;color:#4a443d;margin:2px 0 0}
.ob-boek .melding{text-align:center}
.ob-richtprijs{border-radius:10px}
.ob-hero-tekst .sub{display:none}
@media (max-width:480px){
  .ob-duo .ob-ico{display:none}
  .ob-duo .ob-veld{padding:9px 12px}
  .ob-boek{padding:14px;border-radius:14px}
}
/* donker */
html[data-thema="donker"] .ob-tabs{background:#0f0e0d}
html[data-thema="donker"] .ob-tabs button{color:#cfc8bd}
html[data-thema="donker"] .ob-tabs button[aria-selected="true"]{background:#e6a058;color:#141210}
html[data-thema="donker"] .ob-veld{background:#0f0e0d;border-color:#2e2a25}
html[data-thema="donker"] .ob-veld input,html[data-thema="donker"] .ob-veld select{color:#f1ede7}
html[data-thema="donker"] .ob-veld-label{color:#a69d91}
html[data-thema="donker"] .ob-veld select option{background:#191715;color:#f1ede7}
html[data-thema="donker"] .ob-teller-knoppen button{background:#191715;border-color:#3a352f;color:#f1ede7}
html[data-thema="donker"] .ob-retour{color:#f1ede7;border-color:#3a352f}
html[data-thema="donker"] .ob-vertrouwen{color:#cfc8bd}
html[data-thema="donker"] .ob-veld input[type="date"],html[data-thema="donker"] .ob-veld input[type="time"]{color-scheme:dark}

/* ===== Gsm: kop met logo en menuknop, menu klapt open ===== */
.ob-menuknop{display:none}
@media (max-width:760px){
  .kop.ob-kop .wrap{flex-wrap:wrap;row-gap:0}
  .ob-menuknop{display:grid;place-content:center;gap:5px;width:44px;height:44px;margin-left:auto;border:1px solid #ffffff4d;border-radius:10px;background:transparent;cursor:pointer;order:2}
  .ob-menuknop span{display:block;width:18px;height:1.6px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
  .menu-open .ob-menuknop span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .menu-open .ob-menuknop span:nth-child(2){opacity:0}
  .menu-open .ob-menuknop span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
  .kop.ob-kop .merk{order:1}
  .kop.ob-kop nav,.kop.ob-kop .ob-tools{display:none;order:3;width:100%}
  .kop.ob-kop.menu-open{background:#000000f5}
  .kop.ob-kop.menu-open nav{display:flex;flex-direction:column;align-items:stretch;gap:0;overflow:visible;white-space:normal;padding:10px 0 4px;border-top:1px solid #ffffff26;margin-top:10px}
  .kop.ob-kop.menu-open nav a{font-size:.95rem;letter-spacing:.14em;padding:14px 2px;border-bottom:1px solid #ffffff14;box-shadow:none}
  .kop.ob-kop.menu-open nav a[aria-current="page"]{color:#e6a058}
  .kop.ob-kop.menu-open .ob-tools{display:flex;order:4;justify-content:space-between;padding:12px 0 16px}
  .kop.ob-kop.menu-open .ob-taal-lijst{left:0;right:auto}
}
.ob-tijd input{font-size:.98rem}
.kop.ob-kop.menu-open{background:#000}
@media (min-width:761px){.ob-hero-inhoud{grid-template-columns:minmax(0,1fr) minmax(0,430px)}}
@media (max-width:480px){.ob-tijd input{font-size:.9rem}}
/* Pakketformulier als kaart */
.ob-kaartform{max-width:760px;margin:0 auto;background:#fff;color:#141210;border:1px solid #e2ddd5;border-radius:16px;padding:22px;display:grid;gap:10px;box-shadow:0 18px 50px #0000000f}
.ob-kaartform .verzend{display:grid;gap:8px}
.ob-kaartform .ob-knop{width:100%}
.ob-kaartform .melding{text-align:center;font-size:.8rem;color:#6b645b}
.ob-kaartform .privacy-noot{text-align:center;font-size:.8rem}
.ob-veld textarea{width:100%;border:0;background:transparent;padding:0;font:400 1rem var(--f-kop);color:#141210;outline:none;min-height:64px;resize:vertical}
.ob-veld-groot{align-items:flex-start}
.ob-veld-groot .ob-ico{margin-top:4px}
@media (max-width:560px){.ob-kaartform{padding:14px}.ob-kaartform .ob-duo{grid-template-columns:1fr}}
html[data-thema="donker"] .ob-kaartform{background:#191715;border-color:#2e2a25;color:var(--creme)}
html[data-thema="donker"] .ob-veld textarea{color:#f1ede7}
html[data-thema="donker"] .ob-kaartform .melding{color:var(--grijs)}
@media (max-width:480px){.ob-kaartform .ob-duo .ob-ico{display:block}}

/* ===== Overzicht vóór WhatsApp ===== */
.ob-overzicht{border:0;padding:0;border-radius:18px;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:#fff;color:#141210;box-shadow:0 30px 80px #00000059;overflow:auto}
.ob-overzicht::backdrop{background:#000000a6}
.ov-kop{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 12px;position:sticky;top:0;background:inherit;z-index:2}
.ov-kop h2{font-size:1.3rem;margin:0}
.ov-sluit{width:40px;height:40px;border-radius:50%;border:1px solid #e2ddd5;background:transparent;font-size:1.4rem;line-height:1;cursor:pointer;color:inherit}
.ov-kaart{margin:0 22px;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#dfe7ec}
.ov-kaart svg{display:block;width:100%;height:100%}
.ov-kaart .zee{fill:#dfe7ec}
.ov-kaart .land{fill:#f4f1ec;stroke:#d6ccbe;stroke-width:1;vector-effect:non-scaling-stroke}
.ov-kaart .land.be{fill:#fbf8f3}
.ov-kaart .stad{fill:#7a7166;font-family:var(--f-kop);font-weight:500}
.ov-kaart .stad-punt{fill:#a69d91}
.ov-kaart .route{fill:none;stroke:#c98e42;stroke-width:3;stroke-linecap:round}
.ov-kaart .punt-start{fill:#141210;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.ov-kaart .punt-eind{fill:#e6a058;stroke:#141210;stroke-width:2;vector-effect:non-scaling-stroke}
.ov-schets{margin:6px 22px 0;font-size:.72rem;color:#7a7166}
.ov-blok{padding:14px 22px 0}
.ov-blok h3{font-size:.95rem;margin:0 0 8px}
.ov-rit{padding:6px 0}
.ov-rit-kop{font-weight:500;font-size:.85rem;color:#6b645b;margin:0 0 6px;text-transform:capitalize}
.ov-stops{list-style:none;margin:0;padding:0 0 0 16px;border-left:2px solid #e6a058;display:grid;gap:6px}
.ov-stops li{display:grid;grid-template-columns:52px 1fr;gap:8px;font-size:.95rem}
.ov-tijd{font-weight:600;font-variant-numeric:tabular-nums}
.ov-info{display:block!important;font-size:.8rem;color:#7a7166}
.ov-wagen{margin:12px 22px 0;padding:10px 14px;background:#f6f1e9;border-radius:10px;font-size:.88rem}
.ov-incl{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.9rem}
.ov-incl li{padding-left:24px;position:relative}
.ov-incl li::before{content:"";position:absolute;left:2px;top:.35em;width:10px;height:6px;border-left:2px solid #93622a;border-bottom:2px solid #93622a;transform:rotate(-45deg)}
.ov-prijsrij{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #eee8df;font-size:.93rem;font-variant-numeric:tabular-nums}
.ov-totaal{font-weight:700;font-size:1.05rem;border-bottom:0}
.ov-aanvraag{font-size:.9rem;margin:0}
.ov-noot{margin:14px 22px 0;font-size:.78rem;color:#6b645b;text-align:center}
.ov-knoppen{display:grid;grid-template-columns:1fr 2fr;gap:10px;padding:14px 22px 22px;position:sticky;bottom:0;background:inherit}
.ov-terug{border:1px solid #cfc8bd;border-radius:12px;background:transparent;font:500 .95rem var(--f-kop);color:inherit;cursor:pointer;min-height:52px}
.ov-knoppen .ob-knop{margin:0;min-height:52px}
@media (max-width:480px){.ov-kop,.ov-blok,.ov-knoppen{padding-left:16px;padding-right:16px}.ov-kaart,.ov-schets,.ov-wagen,.ov-noot{margin-left:16px;margin-right:16px}.ov-knoppen{grid-template-columns:1fr}}
html[data-thema="donker"] .ob-overzicht{background:#191715;color:#f1ede7}
html[data-thema="donker"] .ov-kaart .zee{fill:#1c2328}
html[data-thema="donker"] .ov-kaart .land{fill:#2a2622;stroke:#3a352f}
html[data-thema="donker"] .ov-kaart .land.be{fill:#312c27}
html[data-thema="donker"] .ov-kaart .stad{fill:#a69d91}
html[data-thema="donker"] .ov-kaart .punt-start{fill:#f1ede7;stroke:#141210}
html[data-thema="donker"] .ov-wagen{background:#24201b}
html[data-thema="donker"] .ov-prijsrij{border-color:#2e2a25}
html[data-thema="donker"] .ov-sluit,html[data-thema="donker"] .ov-terug{border-color:#3a352f}
html[data-thema="donker"] .ov-rit-kop,html[data-thema="donker"] .ov-info,html[data-thema="donker"] .ov-schets,html[data-thema="donker"] .ov-noot{color:#a69d91}
.ov-kaart .punt-naam{fill:#141210;font-family:var(--f-kop);font-weight:600;paint-order:stroke;stroke:#fbf8f3;stroke-width:3px;stroke-linejoin:round}
html[data-thema="donker"] .ov-kaart .punt-naam{fill:#f1ede7;stroke:#2a2622}
.ob-meer-vak{display:grid;gap:10px}
.ob-meer-vak[hidden]{display:none}
.ob-vinkje{display:flex;align-items:center;gap:10px;font-size:.92rem;cursor:pointer;padding:4px 2px}
.ob-vinkje input{width:20px;height:20px;accent-color:#c98e42}
.ob-betalen{text-align:center;font-size:.76rem;color:#6b645b;margin:-4px 0 0}
.ov-extra{margin:10px 22px 0;padding:0;list-style:none;font-size:.88rem;display:grid;gap:4px}
@media (max-width:480px){.ov-extra{margin-left:16px;margin-right:16px}}
html[data-thema="donker"] .ob-betalen{color:#a69d91}


/* Prijstabellen op gsm: alles binnen het kader, zonder opzij te schuiven */
@media (max-width:560px){
  .tarief th,.tarief td{padding-inline:10px;font-size:.88rem}
  .tarief th:first-child,.tarief td:first-child{padding-left:14px}
  .tarief th:last-child,.tarief td:last-child{padding-right:14px}
  .tarief td.prijs,.tarief th.prijs{white-space:normal}
  .tarief thead th{letter-spacing:.06em;font-size:.6rem}
  .tarief td.prijs{min-width:3.2em}
}
@media (max-width:360px){
  .tarief th,.tarief td{padding-inline:7px;font-size:.84rem}
  .tarief td.prijs{min-width:0}
}
/* Vergelijkingstabel op gsm: per onderwerp een blokje, met de drie opties onder elkaar */
@media (max-width:560px){
  .vergelijk table{min-width:0}
  .vergelijk thead{display:none}
  .vergelijk tbody tr{display:block;border-bottom:1px solid var(--lijn);padding:12px 14px}
  .vergelijk tbody tr:last-child{border-bottom:0}
  .vergelijk tbody td{display:grid;grid-template-columns:7.5em 1fr;gap:10px;border:0;padding:3px 0 !important}
  .vergelijk tbody td::before{content:attr(data-kop);color:var(--grijs);font-size:.78rem;font-weight:400}
  .vergelijk tbody td:first-child{display:block;margin-bottom:4px;color:var(--goud);text-transform:uppercase;font-size:.7rem;letter-spacing:.12em}
  .vergelijk tbody td:first-child::before{content:none}
}
@media (max-width:400px){
  .tarief thead th{text-transform:none;letter-spacing:0;font-size:.7rem}
  .tarief td:first-child{hyphens:auto;overflow-wrap:anywhere}
}
@media (max-width:340px){.tarief th,.tarief td{padding-inline:5px}.tarief th:first-child,.tarief td:first-child{padding-left:12px}.tarief th:last-child,.tarief td:last-child{padding-right:12px}}

/* Vijf zekerheden, hoog op de startpagina */
.ob-zeker{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.ob-zeker-ico{width:30px;height:30px;fill:none;stroke:var(--goud);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1100px){.ob-zeker{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.ob-zeker{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.ob-zeker{grid-template-columns:1fr;gap:20px}.ob-zeker li{grid-template-columns:34px 1fr;column-gap:12px}.ob-zeker li .ob-zeker-ico{grid-row:span 2}}

/* Startmelding bovenaan de boekingskaart (verdwijnt vanzelf op de startdatum) */
.ob-start{margin:0 0 14px;padding:9px 14px;border-left:3px solid var(--goud);background:rgba(201,142,66,.08);font-size:.86rem;line-height:1.4;color:#3b352e}
html[data-thema="donker"] .ob-start{color:#e8dfd2;background:rgba(230,160,88,.10)}

/* Kaart zonder eigen foto (nog): rustig vlak met icoon, zelfde hoogte als de andere kaarten */
.ob-geen-foto{display:grid;place-items:center;background:#151310}
.ob-geen-foto svg{width:56px;height:56px;fill:none;stroke:#e6a058;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round;opacity:.9}

/* Groepstitels bij de bestemmingen (België, Buurlanden, Cruise…) en kaartlabels: duidelijker leesbaar */
.ob-groep{color:var(--creme);font-size:.8rem;font-weight:600;letter-spacing:.2em}
.ob-bestemming .pl-label{color:var(--goud);font-weight:600;font-size:.68rem;letter-spacing:.18em}

/* Geen knipperend tekstcursortje bij een tik op menu, titel of tekst; in invulvelden blijft het gewoon */
body{caret-color:transparent}
input,textarea,select,[contenteditable="true"]{caret-color:auto}
.ob-kop a,.ob-kop button,.ob-kop summary,.ob-tabs button,.ob-knop{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

/* Eigen suggestielijst onder adresvelden (vervangt de browserlijst, werkt ook op gsm) */
.veld{position:relative}
.ob-sugg{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);z-index:40;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #e2ddd5;border-radius:12px;box-shadow:0 14px 34px #0000001f;max-height:min(320px,50vh);overflow-y:auto;-webkit-overflow-scrolling:touch}
.ob-sugg[hidden]{display:none}
.ob-sugg li{padding:11px 12px;border-radius:8px;font:400 .95rem var(--f-kop);color:#141210;cursor:pointer;line-height:1.35;-webkit-tap-highlight-color:transparent}
.ob-sugg li:hover,.ob-sugg li.actief{background:#c98e421f}
html[data-thema="donker"] .ob-sugg{background:#191715;border-color:#2e2a25;box-shadow:0 14px 34px #00000080}
html[data-thema="donker"] .ob-sugg li{color:#f1ede7}
html[data-thema="donker"] .ob-sugg li:hover,html[data-thema="donker"] .ob-sugg li.actief{background:#e6a05824}

/* Zo werkt het, Jouw wagen, routepagina's en bedrijven */
.ob-stappen{margin-top:8px}
.ob-stappen li{justify-items:start;text-align:left;align-content:start}
.ob-stappen h3{font-size:1.05rem;font-weight:500}
.ob-stappen p{color:var(--tekst2);font-size:.94rem;max-width:34ch}
.ob-wagen{margin-top:56px;border-top:1px solid var(--creme);padding-top:26px;display:grid;gap:22px}
.ob-wagen-kop{display:grid;gap:6px}
.ob-wagen-kop h3{font-size:1.25rem;font-weight:500}
.ob-specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px}
.ob-specs li{display:grid;gap:2px;align-content:start;padding-left:14px;border-left:2px solid var(--goud-diep)}
.ob-specs b{font-weight:500;font-size:1.35rem;color:var(--goud);font-variant-numeric:tabular-nums;line-height:1.2}
.ob-specs span{color:var(--tekst2);font-size:.92rem}
.ob-wagen-noot{color:var(--grijs);font-size:.9rem}
@media (max-width:760px){.ob-specs{grid-template-columns:1fr 1fr}}
.ob-bedrijven-link{margin-top:26px}
.ob-of{margin-top:14px;color:var(--grijs);font-size:.92rem}
.ob-incl{border-top:0}
.ob-incl ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--tekst2);font-size:.95rem}
.ob-let{margin-top:28px}
.ob-let p:not(.label){color:var(--tekst2)}
.voet-ritten{margin-bottom:12px}

/* Ook mogelijk: diensten als tekstregels */
.ob-diensten-kop{margin:44px 0 0;font-weight:500;font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--goud)}
.ob-diensten{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;border-top:1px solid var(--creme)}
.ob-diensten a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"naam prijs" "info pijl";gap:2px 16px;align-items:baseline;padding:16px 28px 16px 0;border-bottom:1px solid var(--lijn);text-decoration:none;color:inherit;position:relative}
.ob-diensten a::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;border-top:1.5px solid var(--goud);border-right:1.5px solid var(--goud);transform:translateY(-50%) rotate(45deg);transition:right .2s}
.ob-diensten a:hover::after{right:0}
.ob-diensten b{grid-area:naam;font-weight:500;font-size:1rem}
.ob-diensten span{grid-area:prijs;font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-diensten small{grid-area:info;color:var(--grijs);font-size:.8rem}
.ob-diensten a:hover b{color:var(--goud)}
@media (max-width:760px){.ob-diensten{grid-template-columns:1fr}}

/* Van deur tot deur: foto die bij het scrollen het hele scherm vult */
.ob-zoom{position:relative;height:230vh;--p:1;background:var(--zwart)}
.ob-zoom-plak{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-items:center}
.ob-zoom-beeld{position:absolute;inset:0;margin:0;background:#141210;
  clip-path:inset(calc((1 - var(--p)) * 14%) calc((1 - var(--p)) * 9%) round calc((1 - var(--p)) * 18px))}
.ob-zoom-beeld img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(calc(1.18 - var(--p) * .18))}
.ob-zoom-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000000d9 0%,#0000009e 55%,#00000040 100%);opacity:var(--t,1)}
.ob-zoom-inhoud{position:relative;z-index:1;color:#f4f1ec;display:grid;gap:16px;width:100%;box-sizing:border-box;max-width:1200px;justify-self:center;opacity:var(--t,1);transform:translateY(calc((1 - var(--t,1)) * 30px));
  --creme:#f4f1ec;--tekst2:#e4ded4;--grijs:#cfc7bb;--goud:#e6a058;--goud-diep:#c98e42;--pil-hover:#ffffff1f;--lijn:#ffffff33}
.ob-zoom-inhoud > *{max-width:560px}
.ob-zoom h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.6rem)}
.ob-zoom h2 .accent{font-family:var(--f-accent);font-style:italic;font-weight:400;color:#e6a058}
.ob-zoom .sub{color:#e4ded4;margin:0}
.ob-zoom .label{color:#e6a058}
.ob-deur-actie{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:8px}
.ob-deur-actie span{color:#cfc7bb;font-size:.86rem}
@media (max-width:640px){
  .ob-zoom-plak{align-items:end;padding-bottom:28px}
  .ob-zoom-beeld::after{background:linear-gradient(180deg,#00000040 0%,#000000b3 38%,#000000e6 100%)}
  .ob-zoom .sub{font-size:.95rem}
}
@media (max-height:700px) and (max-width:640px){.ob-zoom .sub{display:none}}
@media (prefers-reduced-motion:reduce){.ob-zoom{height:auto}.ob-zoom-plak{position:relative;height:auto;min-height:100svh}}

/* Van deur tot deur, optie A "venster": de foto staat stil, de pagina schuift erover */
.ob-zoom.venster{height:auto;clip-path:inset(0);--p:1;--t:1}
.ob-zoom.venster .ob-zoom-plak{position:relative;height:auto;min-height:120vh;min-height:120svh;padding-block:18vh}
.ob-zoom.venster .ob-zoom-beeld{position:fixed;inset:0;clip-path:none}
.ob-zoom.venster .ob-zoom-beeld img{transform:none}
.ob-zoom.venster .ob-zoom-inhoud{opacity:1;transform:none}
@media (max-width:640px){.ob-zoom.venster .ob-zoom-plak{padding-block:30vh 40px}}

/* Vertrekbord in Van deur tot deur (startpagina) */
.ob-bord{margin-top:6px;background:#ffffff1c;border:1px solid #ffffff38;border-radius:8px;padding:4px 18px 6px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ob-bord-kop{display:grid;grid-template-columns:1fr auto;padding:10px 0 8px;border-bottom:1px solid #e6a05899;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:#f0b877}
.ob-bord-rij{display:grid;grid-template-columns:1fr auto;align-items:center;padding:11px 0;border-bottom:1px solid #ffffff26}
.ob-bord-rij:last-child{border-bottom:0}
.ob-bord-rij b{font-weight:500;font-size:1.1rem;color:#fff}
.ob-bord-rij span{font-variant-numeric:tabular-nums;color:#ffdcb0}
@media (max-width:640px){.ob-bord-rij{padding:9px 0}.ob-bord-rij b{font-size:1rem}}

/* Jouw wagen met foto */
.ob-wagen{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:48px;align-items:start}
.ob-wagen > *{grid-column:2}
.ob-wagen > .ob-wagen-foto{grid-column:1;grid-row:1 / span 3;margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:#d4d4d4}
.ob-wagen-foto img,.ob-wagenfoto img,.ob-wagenplan img{width:100%;height:100%;object-fit:cover;display:block}
.ob-wagen .ob-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.ob-wagen{grid-template-columns:1fr}.ob-wagen > *,.ob-wagen > .ob-wagen-foto{grid-column:1;grid-row:auto}}

/* Van deur tot deur-pagina: fotokaarten, tegels, wagen */
.ob-deurkaart{position:relative}
.ob-feit{font-weight:500;font-variant-numeric:tabular-nums;color:var(--goud)!important;font-size:.95rem}
.ob-kaart-knop{justify-self:start;margin-top:6px;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:2px solid var(--goud);border-radius:999px;text-decoration:none;color:var(--creme);font-weight:500;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;transition:background .2s}
.ob-kaart-knop:hover{background:var(--pil-hover)}
.ob-deurkaarten{row-gap:44px}
.ob-geen-foto{display:grid;place-items:center;aspect-ratio:4/3;background:var(--vlak);border:1px solid var(--lijn)}
.ob-geen-foto svg{width:46px;height:46px;fill:none;stroke:var(--goud);stroke-width:1.4}
.ob-tegels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 28px}
.ob-tegels li{display:grid;gap:6px;align-content:start}
.ob-tegels svg{width:30px;height:30px;fill:none;stroke:var(--goud);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.ob-tegels h3{font-size:1rem;font-weight:500}
.ob-tegels p{color:var(--tekst2);font-size:.92rem}
@media (max-width:760px){.ob-tegels{grid-template-columns:1fr 1fr}}
.ob-wagenblok{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.ob-wagenfoto{margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:#d4d4d4}
.ob-wagentekst{display:grid;gap:14px}
.ob-wagenplan{margin:6px 0 0;aspect-ratio:980/506;overflow:hidden;border-radius:2px;background:#ececec}
@media (max-width:860px){.ob-wagenblok{grid-template-columns:1fr;gap:28px}}

#boeken{scroll-margin-top:96px}
@media (max-width:640px){#boeken{scroll-margin-top:84px}}

/* Kopbalk na het scrollen: licht in de lichte weergave (donker blijft donker) */
html:not([data-thema="donker"]) .kop.ob-kop.vast{background:#f7f5f1fa;border-bottom-color:#e2ddd5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html:not([data-thema="donker"]) .kop.ob-kop.vast .op-foto{display:none}
html:not([data-thema="donker"]) .kop.ob-kop.vast .op-licht{display:block}
html:not([data-thema="donker"]) .kop.ob-kop.vast nav a{color:#3d3832}
html:not([data-thema="donker"]) .kop.ob-kop.vast nav a:hover,html:not([data-thema="donker"]) .kop.ob-kop.vast nav a[aria-current="page"]{color:#141210}
html:not([data-thema="donker"]) .kop.ob-kop.vast nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 #c98e42}
html:not([data-thema="donker"]) .kop.ob-kop.vast .ob-taal summary{color:#141210}
html:not([data-thema="donker"]) .kop.ob-kop.vast .ob-thema{border-color:#14121033;color:#141210}
html:not([data-thema="donker"]) .kop.ob-kop.vast .ob-menuknop{border-color:#14121033}
html:not([data-thema="donker"]) .kop.ob-kop.vast .ob-menuknop span{background:#141210}
html:not([data-thema="donker"]) .kop.ob-kop.vast.menu-open{background:#f7f5f1}
html:not([data-thema="donker"]) .kop.ob-kop.vast.menu-open nav{border-top-color:#1412101a}
html:not([data-thema="donker"]) .kop.ob-kop.vast.menu-open nav a{border-bottom-color:#1412101a}
html:not([data-thema="donker"]) .kop.ob-kop.vast.menu-open nav a[aria-current="page"]{color:#93622a}

/* Zekerheid: iconen in een zachte gouden cirkel (stijl A) */
.ob-zeker-ico{width:52px;height:52px;padding:13px;box-sizing:border-box;border-radius:50%;background:#e6a05829;stroke:#93622a;stroke-width:1.7}
html[data-thema="donker"] .ob-zeker-ico{background:#e6a0581f;stroke:#e6a058}
@media (max-width:420px){.ob-zeker li{grid-template-columns:52px 1fr;column-gap:16px;align-items:start}}

/* Evenementen: stappen in een prijskaart onder elkaar */
.ob-stappen-kort{grid-template-columns:1fr;gap:18px;margin:0}
.ob-stappen-kort li{grid-template-columns:38px 1fr;column-gap:14px;align-items:start}
.ob-stappen-kort li::before{grid-row:span 2}
.ob-stappen-kort p{max-width:none}

/* Evenementen: gelegenheden als tegels met knop */
.ob-gelegenheden{gap:34px 28px}
.ob-gelegenheden li{padding:22px 20px 20px;border:1px solid var(--lijn);border-radius:4px;background:var(--vlak);align-content:start;gap:8px}
.ob-gelegenheden .ob-kaart-knop{margin-top:10px}
@media (max-width:560px){.ob-gelegenheden{grid-template-columns:1fr}}
/* Je chauffeur: liggende foto zodat ook de Vito in beeld is; leesbaar onderschrift in Lora */
.chauffeur-foto .foto{aspect-ratio:4/3}
.chauffeur-foto .foto figcaption{font-family:Lora,Georgia,serif;font-style:italic;font-weight:400;font-size:1.05rem;letter-spacing:.01em;text-transform:none;padding:48px 18px 14px;background:linear-gradient(transparent,#000000d9)}
@media (max-width:760px){.chauffeur-foto .foto{aspect-ratio:4/3}.chauffeur-foto .foto figcaption{font-size:1rem}}

/* === Leesbaarheid (Hallmark-controle, 11 nov 2026) ===
   1. randen van invulvakken en knoppen in het boekingsformulier: minstens 3:1 tegen de achtergrond
   2. kleine labels minstens 12px
   4. bijschrift bij de chauffeursfoto op een donkere ondergrond */
.ob-veld,.ob-boek .veld input,.ob-boek .veld select,.ob-teller-knoppen button,.ob-retour{border-color:#978e81}
html[data-thema="donker"] .ob-veld,html[data-thema="donker"] .ob-boek .veld input,html[data-thema="donker"] .ob-boek .veld select,html[data-thema="donker"] .ob-teller-knoppen button,html[data-thema="donker"] .ob-retour{border-color:#736a5f}
.ob-veld:focus-within,html[data-thema="donker"] .ob-veld:focus-within,.ob-teller-knoppen button:hover,html[data-thema="donker"] .ob-teller-knoppen button:hover,.ob-retour:hover,html[data-thema="donker"] .ob-retour:hover{border-color:#c98e42}
.pl-label,.ob-bestemming .pl-label{font-size:.75rem}
.chauffeur-foto .foto figcaption{background:linear-gradient(transparent,#000000b3 45%,#000000e6);text-shadow:0 1px 8px #00000099}
.foto figcaption,.ob-bord-kop,.ob-contact-lijst small,.ob-buren-kop,.voet-links,.route small,.tarief thead th,.veld label,.tarief-kop .label,.fotocredits{font-size:.75rem}
@media (max-width:760px){.vergelijk tbody td:first-child,.tarief thead th{font-size:.75rem}}
.ob-buren-kop{color:var(--grijs)}
.chauffeur-foto .foto figcaption{font-size:1.05rem}
@media (max-width:760px){.chauffeur-foto .foto figcaption{font-size:1rem}}

/* === Hallmark-ronde 2 (11 nov 2026) === */
/* onzichtbare tussentitel voor Google en voorleessoftware */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* reactie bij tikken: knoppen en kaarten zakken heel even in */
button,.ob-knop,.pil,.sociaal,.ob-kaart,.knop,a.route{-webkit-tap-highlight-color:transparent}
button:active,.ob-knop:active,.pil:active,.sociaal:active,.knop:active,a.ob-kaart:active,a.route:active{transform:scale(.97);transition:transform .08s}
.ob-tabs button:active,.ob-teller-knoppen button:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){button:active,.ob-knop:active,.pil:active,.sociaal:active,.knop:active,a.ob-kaart:active,a.route:active,.ob-tabs button:active,.ob-teller-knoppen button:active{transform:none;opacity:.75}}
/* laptops met een lager scherm: de hele boekingskaart past in beeld */
@media (min-width:901px) and (max-height:900px){
  .ob-kop + main .ob-hero{padding-top:96px;padding-bottom:24px}
  .ob-boek{gap:8px;padding-block:14px}
  .ob-veld{min-height:48px;padding-block:4px}
  .ob-retour{min-height:44px;padding-block:10px}
}

/* === Bewegend logo onderaan (11 nov 2026) ===
   Standaard: het stilstaande logo (eindbeeld). site.js zet "wacht" en, zodra de band in beeld komt, "speel".
   Met "minder beweging" aan of zonder JavaScript blijft het stilstaande logo staan. */
.voet-merk .vl{display:block;width:300px;max-width:100%;height:auto;overflow:visible}
.vl-o{fill:#E89A4F}.vl-w{fill:#fff}
.vl-titel text,.vl-sub,.vl-rule,.vl-tag,.vl-glow,.vl-shine{transform-box:fill-box}
.vl-glow{opacity:.8;transform-origin:center;transform:scale(1.08)}
.vl-shine{opacity:0;mix-blend-mode:overlay;pointer-events:none}
.vl-ruleL{transform-origin:right center}.vl-ruleR{transform-origin:left center}
.vl-sub{transform-origin:center}
.vl-lijn{stroke-dasharray:1 1}
/* wachten tot de band in beeld komt */
.vl.wacht .vl-lijn{stroke-dashoffset:1}
.vl.wacht .vl-titel text,.vl.wacht .vl-sub,.vl.wacht .vl-glow{opacity:0}
.vl.wacht .vl-rule{transform:scaleX(0)}
.vl.wacht .vl-tag{transform:translateY(53px)}
/* afspelen: dezelfde tijdlijn als de originele animatie */
.vl.speel *{animation-fill-mode:both}
.vl.speel .vl-glow{animation:vl-glow 1.6s ease-in-out 0s both,vl-adem 2.5s ease-in-out 5.4s both}
.vl.speel .vl-body{animation:vl-teken 2.2s cubic-bezier(.45,0,.55,1) .3s both}
.vl.speel .vl-side{animation:vl-teken 1.6s cubic-bezier(.45,0,.55,1) 1s both}
.vl.speel .vl-mirror{animation:vl-teken .5s cubic-bezier(.215,.61,.355,1) 1.6s both}
.vl.speel .vl-lamp{animation:vl-teken .6s cubic-bezier(.33,1,.68,1) 1.9s both}
.vl.speel .vl-spark{animation:vl-spark 2.4s linear .3s both}
.vl.speel .vl-lampglow{animation:vl-flits 1.02s ease-out 2.5s both}
.vl.speel .vl-titel text{animation:vl-letter 1.1s cubic-bezier(.215,.61,.355,1) calc(2.6s + var(--i) * .06s) both}
.vl.speel .vl-rule{animation:vl-lijnstuk .9s cubic-bezier(.45,0,.55,1) 3.5s both}
.vl.speel .vl-sub{animation:vl-sub 1.3s cubic-bezier(.16,1,.3,1) 3.5s both}
.vl.speel .vl-t1{animation:vl-tag .9s cubic-bezier(.215,.61,.355,1) 4.2s both}
.vl.speel .vl-t2{animation:vl-tag .9s cubic-bezier(.215,.61,.355,1) 4.6s both}
.vl.speel .vl-shine{animation:vl-glans 1.6s cubic-bezier(.45,0,.55,1) 5.4s both}
@keyframes vl-teken{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes vl-glow{from{opacity:0;transform:scale(1)}to{opacity:1;transform:scale(1)}}
@keyframes vl-adem{0%{opacity:1;transform:scale(1)}100%{opacity:.8;transform:scale(1.08)}}
@keyframes vl-spark{0%{opacity:0}8%{opacity:1}83%{opacity:1}100%{opacity:0}}
@keyframes vl-flits{0%{opacity:0}12%{opacity:.9}100%{opacity:0}}
@keyframes vl-letter{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes vl-lijnstuk{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vl-sub{from{opacity:0;transform:scaleX(1.4)}to{opacity:1;transform:none}}
@keyframes vl-tag{from{transform:translateY(53px)}to{transform:none}}
@keyframes vl-glans{0%{opacity:1;transform:translateX(-100%)}100%{opacity:1;transform:translateX(100%)}}
@media (max-width:640px){.voet-merk .vl{width:240px}}


/* ===== Intro: de wagen tekent zichzelf, naam verschijnt, daarna opent de site ===== */
#intro{--it:3s;position:fixed;inset:0;z-index:2147483000;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3.2vw,22px);cursor:pointer;-webkit-tap-highlight-color:transparent;animation:intro-weg calc(var(--it)*.15) ease-in calc(var(--it)*.85) forwards}
.intro-gezien #intro{display:none}
#intro.weg{animation:intro-weg .2s ease-out forwards}
#intro::before{content:"";position:absolute;left:50%;top:50%;width:min(150vw,820px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(232,154,79,.17) 0%,rgba(232,154,79,.05) 35%,rgba(0,0,0,0) 65%);opacity:0;animation:intro-gloed calc(var(--it)*.5) ease-in-out forwards}
#intro svg{position:relative;width:min(74vw,400px);height:auto;overflow:visible;animation:intro-uit calc(var(--it)*.08) ease-out calc(var(--it)*.82) forwards}
#intro path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:intro-teken var(--d) var(--e,cubic-bezier(.65,0,.35,1)) var(--w) forwards}
#intro .i-body{--w:calc(var(--it)*.04);--d:calc(var(--it)*.5)}
#intro .i-side{--w:calc(var(--it)*.22);--d:calc(var(--it)*.36)}
#intro .i-mirror{--w:calc(var(--it)*.36);--d:calc(var(--it)*.14)}
#intro .i-lamp{--w:calc(var(--it)*.42);--d:calc(var(--it)*.16);--e:cubic-bezier(.2,.7,.3,1)}
#intro .i-vonk{opacity:0}
#intro img{position:relative;width:min(54vw,292px);height:auto;opacity:0;animation:intro-woord calc(var(--it)*.3) cubic-bezier(.2,.7,.2,1) calc(var(--it)*.4) forwards,intro-uit calc(var(--it)*.08) ease-out calc(var(--it)*.82) forwards}
@keyframes intro-uit{to{opacity:0}}
@keyframes intro-teken{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes intro-woord{from{opacity:0;transform:translateY(12px);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes intro-gloed{to{opacity:1}}
@keyframes intro-weg{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){#intro{display:none}}