/* Huisstijl Pouw Vervoer, verfijnd.
   Witte kop met logo, navy menubalk, gele en groene knoppen in hoofdletters, Open Sans.
   Eén eigen detail: de gele wegmarkering onder de paginatitel. */
:root{
  --navy:#263680;--navy-diep:#1B2760;--navy-zacht:#E8EBF5;
  --geel:#EDAA00;--geel-logo:#FBB900;--geel-zacht:#FFF6DB;
  --groen:#0B8F2C;--groen-hover:#087524;
  --ink:#1D2333;--muted:#5A6072;--line:#DCE0EA;--ground:#F3F5F9;--card:#fff;
  --ok:#1F5A33;--okbg:#E5F4EA;--bad:#A12A1E;--badbg:#FBE9E6;--warn:#6B4A00;--warnbg:#FFF1C9;
  --font:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.6 var(--font)}
a{color:var(--navy);text-underline-offset:2px}a:hover{color:var(--navy-diep)}
h1,h2,h3{line-height:1.2;margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(28px,4vw,40px);font-weight:800;margin-bottom:8px}
h2{font-size:19px;font-weight:700;margin-bottom:4px}
h3{font-size:16px;font-weight:700}

/* Kop */
.top{background:#fff}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.logo{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.logo img{height:52px;width:auto;display:block}
.logo .sub{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-left:1px solid var(--line);padding-left:14px}
.top-cta{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;justify-content:flex-end}
.tel{color:var(--muted);font-weight:300;font-size:16px;text-decoration:none}
.tel b{color:var(--ink);font-weight:600;white-space:nowrap}
.tel:hover b{text-decoration:underline}
.menubalk{background:var(--navy)}
.menubalk .wrap{display:flex;align-items:center;gap:4px 28px;flex-wrap:wrap;min-height:48px}
.menubalk a,.menubalk button{color:#fff;text-decoration:none;font:700 15px var(--font);text-transform:uppercase;letter-spacing:.02em;padding:12px 0;background:none;border:0;cursor:pointer;border-bottom:3px solid transparent}
.menubalk a:hover,.menubalk button:hover,.menubalk a[aria-current=page]{border-bottom-color:var(--geel)}
.menubalk form{margin:0 0 0 auto}

/* Paginatitel met wegmarkering */
.band{background:var(--navy-diep);color:#fff;position:relative;padding-block:40px 52px}
.band::after{content:'';position:absolute;left:0;right:0;bottom:18px;height:5px;background:repeating-linear-gradient(90deg,var(--geel-logo) 0 46px,transparent 46px 78px)}
.band h1{color:#fff;margin-bottom:6px}
.band p{margin:0;color:#D6DBEC;font-size:18px;max-width:640px}

.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
main.wrap{padding-top:32px;padding-bottom:64px}
.cols{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.cols>.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px}
.cols>.side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:24px}
.card.key{border-color:var(--navy);box-shadow:inset 4px 0 0 var(--navy)}
.card.soft{background:var(--geel-zacht);border-color:#F2DC92}
.lead{color:var(--muted);margin:0 0 16px}
.stap{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.stap .nr{flex:none;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}
.stap h2{margin:4px 0 2px}.stap p{margin:0;color:var(--muted)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}.card{padding:18px}.menubalk .wrap{gap:0 18px}.band{padding-block:28px 44px}}

/* Formulieren */
label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.opt{font-weight:400;color:var(--muted)}
.hint{display:block;font-size:13px;color:var(--muted);margin-top:5px}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=time],input[type=number],input[type=password],select,textarea{width:100%;min-height:48px;border:1px solid #B7BDCC;border-radius:4px;padding:10px 12px;font:16px var(--font);color:var(--ink);background:#fff}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(38,54,128,.25);outline-offset:0;border-color:var(--navy)}
button:focus-visible,a:focus-visible{outline:3px solid var(--geel);outline-offset:2px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px}.check input{width:22px;height:22px;margin-top:1px;flex:none;accent-color:var(--navy)}
fieldset{border:0;padding:0;margin:0 0 18px}legend{font-size:14px;font-weight:700;margin-bottom:8px}
.pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.pills label{margin:0;font-weight:400;cursor:pointer}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills span{display:flex;flex-direction:column;justify-content:center;min-height:66px;padding:10px 14px;border:1px solid #B7BDCC;border-radius:4px;background:#fff;font-size:15px;font-weight:700}
.pills span small{font-weight:400;color:var(--muted);font-size:13px}
.pills span:hover{border-color:var(--navy)}
.pills input:checked+span{border-color:var(--navy);background:var(--navy-zacht);box-shadow:inset 0 0 0 1px var(--navy)}
.pills input:focus-visible+span{outline:3px solid var(--geel);outline-offset:2px}

/* Knoppen: hoofdletters, rechte hoeken, zoals op pouwvervoer.nl */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:3px;border:0;background:var(--groen);color:#fff;font:700 16px var(--font);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--groen-hover);color:#fff}
.btn::after{content:'';width:8px;height:8px;border:solid currentColor;border-width:2.5px 2.5px 0 0;transform:rotate(45deg);margin-left:2px}
.btn.geel{background:var(--geel);color:var(--ink)}.btn.geel:hover{background:#D99C00;color:var(--ink)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid #B7BDCC;text-transform:none;letter-spacing:0}.btn.ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn.ghost::after,.btn.small::after,.btn.danger::after{display:none}
.btn.small{min-height:40px;padding:0 14px;font-size:14px}
.btn.danger{background:var(--bad);color:#fff}.btn.danger:hover{background:#87231A}
.btn.wide{width:100%}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

.alert{padding:14px 16px;border-radius:4px;font-size:15px}
.alert.ok{background:var(--okbg);color:var(--ok)}.alert.bad{background:var(--badbg);color:var(--bad)}.alert.info{background:var(--navy-zacht);color:var(--ink)}
.alert ul{margin:6px 0 0;padding-left:20px}
dl.kv{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:15px}dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;overflow-wrap:anywhere}
table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
th{text-align:left;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:8px 8px 8px 0}
td{border-top:1px solid var(--line);padding:11px 8px 11px 0;vertical-align:top}
td.num,th.num{text-align:right;padding-right:0}
.pos{color:var(--ok);font-weight:700}.neg{color:var(--bad);font-weight:700}
.scroll{overflow-x:auto}
.badge{display:inline-block;padding:3px 10px;border-radius:3px;font-weight:700;font-size:12px;white-space:nowrap;text-decoration:none}
.k-A{background:var(--okbg);color:var(--ok)}.k-B{background:var(--navy-zacht);color:var(--navy)}.k-C{background:var(--warnbg);color:var(--warn)}.k-D{background:var(--badbg);color:var(--bad)}
.st{background:#E9ECF3;color:var(--ink)}
.score{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ring{width:120px;height:120px;border-radius:50%;border:10px solid var(--geel);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.ring b{font-size:36px;font-weight:800;line-height:1}.ring small{color:var(--muted);font-size:12px}
.ring.A{border-color:#2E8B4F}.ring.B{border-color:var(--navy)}.ring.C{border-color:var(--geel)}.ring.D{border-color:#C0392B}
.voortgang{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;color:var(--muted)}
.voortgang li{display:flex;align-items:center;gap:8px}
.voortgang li::before{content:attr(data-nr);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#DCE0EA;color:var(--ink);font-weight:700;font-size:12px;flex:none}
.voortgang li.nu{color:var(--ink);font-weight:700}.voortgang li.nu::before{background:var(--geel)}
.voortgang li.klaar::before{content:'✓';background:var(--navy);color:#fff}
.uitleg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.uitleg li{background:#fff;border-radius:4px;padding:14px;border:1px solid #F2DC92}
.uitleg b{display:block;font-size:15px;margin-bottom:2px}
.uitleg span{font-size:14px;color:var(--muted)}
.log{font-size:13px;white-space:pre-wrap;color:var(--muted);max-height:420px;overflow:auto}
.log div{border-top:1px solid var(--line);padding:8px 0}.log b{color:var(--ink)}
.demo{background:var(--ink);color:#fff;font-size:12px;padding:5px 12px;text-align:center;font-weight:600}
.price{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.between{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.narrow{max-width:580px;margin:0 auto}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}.inline-form>div{flex:1 1 160px}
.verborgen{display:none}

/* Voet */
footer{background:var(--navy-diep);color:#C4CAE0;font-size:14px;margin-top:24px}
footer .usps{background:var(--geel-logo);color:var(--ink)}
footer .usps ul{list-style:none;margin:0 auto;padding:14px 20px;max-width:1180px;display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;font-weight:700;font-size:15px}
footer .usps li{display:flex;align-items:center;gap:8px}
footer .usps li::before{content:'';width:18px;height:18px;flex:none;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
footer .info{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:flex-start;padding-top:28px;padding-bottom:32px;line-height:1.7}
footer .info strong{color:#fff}
footer .info a{color:#fff}
footer .certs{display:flex;flex-wrap:wrap;gap:6px}
footer .certs span{border:1px solid #4A5690;border-radius:3px;padding:2px 8px;font-size:12px;font-weight:700;color:#fff}
footer .versie{padding-bottom:14px;font-size:12px;color:#8A93B5}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.btn.zin{text-transform:none;letter-spacing:0}
/* Titelbalk met busfoto: tekst links op navy, de bus rechts */
.band.foto{overflow:hidden;padding-block:56px 72px}
.band.foto::before{content:'';position:absolute;top:0;bottom:0;right:0;left:38%;background:linear-gradient(90deg,var(--navy-diep) 0%,rgba(27,39,96,.6) 22%,rgba(27,39,96,.05) 55%),url(/bus.jpg) 55% 58%/cover no-repeat}
.band.foto .wrap{position:relative;z-index:1}
.band.foto p{max-width:520px}
.band.foto h1{max-width:560px}
@media (max-width:820px){.band.foto::before{left:0;background:linear-gradient(rgba(27,39,96,.78),rgba(27,39,96,.86)),url(/bus.jpg) 60% 58%/cover no-repeat}}

/* ===== Reis-stap (/reis): stappenbalk, keuzeknoppen, route met tussenstops, schakelaar ===== */
.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}
[hidden]{display:none!important}
main.wizard{max-width:820px;padding-top:28px}
.stappen{list-style:none;margin:0 0 22px;padding:0;display:flex}
.stappen li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:14px;color:var(--muted);text-align:center;padding:0 4px}
.stappen li::before,.stappen li::after{content:'';position:absolute;top:17px;height:4px;width:50%;background:#CCD2E0}
.stappen li::before{left:0}.stappen li::after{right:0}
.stappen li:first-child::before,.stappen li:last-child::after{display:none}
.stappen li.klaar::before,.stappen li.klaar::after,.stappen li.nu::before{background:var(--navy)}
.stappen .nr{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;background:#fff;border:3px solid #CCD2E0;color:var(--muted);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.stappen li.nu .nr{background:var(--navy);border-color:var(--navy);color:var(--geel-logo);box-shadow:0 0 0 4px var(--geel-zacht)}
.stappen li.nu .tekst{color:var(--ink);font-weight:700}
.stappen li.klaar .nr{background:var(--navy);border-color:var(--navy);color:#fff}

.card.reis{padding:32px 36px 36px}
.reis .kop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 20px;flex-wrap:wrap;margin-bottom:22px}
.reis .titel{font-size:27px;font-weight:800;margin-bottom:4px}
.reis .kop .lead{margin:0}
.reis .alert{margin-bottom:20px}
.reis .basis{margin-bottom:28px;align-items:start}
.leg{border-top:1px solid var(--line);padding-top:24px;margin-top:4px}
.leg+.leg{margin-top:26px}
.leg-kop{display:flex;align-items:center;gap:10px;font-size:18px;color:var(--navy);margin-bottom:16px}
.leg-kop svg{width:26px;height:26px;flex:none}
.spiegel{transform:scaleX(-1)}

/* Twee keuzes naast elkaar; de gekozen in navy met geel, zoals het logo */
.segment{border:0;padding:0;margin:0;min-width:0}
.segment legend{font-size:14px;font-weight:700;margin-bottom:6px;padding:0}
.segment .keuzes{display:flex;background:#fff;border:1px solid #B7BDCC;border-radius:4px;padding:4px;min-height:48px}
.segment label{flex:1;margin:0;position:relative;font-weight:400}
.segment input{position:absolute;opacity:0;pointer-events:none}
.segment span{display:flex;align-items:center;justify-content:center;height:100%;min-height:38px;border-radius:3px;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;padding:0 12px;white-space:nowrap}
.segment span:hover{background:var(--navy-zacht)}
.segment input:checked+span{background:var(--navy);color:var(--geel-logo)}
.segment input:focus-visible+span{outline:3px solid var(--geel);outline-offset:2px}

/* Route: een rail met punten voor Van, Via en Naar */
.route{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.punt{position:relative;padding-left:34px;--m:52px}
.punt .marker{position:absolute;left:1px;top:calc(var(--m) - 8px);width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--navy);z-index:1}
.punt.via .marker{width:12px;height:12px;left:3px;top:calc(var(--m) - 6px);background:var(--navy)}
.punt.eind .marker{border:0;background:none;width:20px;height:24px;left:-1px;top:calc(var(--m) - 13px);color:var(--navy)}
.punt.eind .marker svg{width:20px;height:24px;display:block}
.punt::before,.punt::after{content:'';position:absolute;left:8px;width:2px;background:#CCD2E0}
.punt::before{top:-14px;height:calc(var(--m) + 14px)}
.punt::after{top:var(--m);bottom:0}
.punt:first-child::before,.punt:last-child::after{display:none}
.punt .veld{min-width:0}
.punt .rij{display:flex;gap:12px 16px;flex-wrap:wrap;align-items:flex-start}
.punt .rij .invoer{flex:1 1 240px;min-width:0}
.punt .rij .wacht{flex:0 1 190px;min-width:150px}
.punt .inp{position:relative}
.punt .inp input{padding-right:48px}
.weg{position:absolute;right:0;top:0;height:48px;width:46px;border:0;background:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:0 4px 4px 0}
.weg svg{width:20px;height:20px}
.weg:hover{color:var(--bad);background:var(--badbg)}
.punt.toevoegen{--m:20px;padding-left:0}
.btn-stop{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;color:var(--navy);font:700 15px var(--font);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:40px}
.btn-stop svg{width:20px;height:20px;flex:none;margin-left:-1px;position:relative;z-index:1}
.btn-stop:hover{color:var(--navy-diep)}

/* Datum en tijd met icoontjes in de velden */
.wanneer{display:flex;flex-direction:column;gap:12px}
.wanneer>.label{font-size:14px;font-weight:700;margin:0}
.wanneer .segment{max-width:320px}
.wanneer .tijden{gap:12px}
.icoon input{padding-left:44px;background-repeat:no-repeat;background-position:13px center;background-size:20px 20px;position:relative}
.icoon input{cursor:pointer}
.icoon input::-webkit-calendar-picker-indicator{cursor:pointer}
.icoon.datum input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23263680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.icoon.tijd input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23263680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}

/* Schakelaar "Andere route terug" met uitleg */
.schakel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.switch{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:600;margin:0;cursor:pointer;position:relative}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .knop{width:52px;height:30px;border-radius:15px;background:#B7BDCC;position:relative;transition:background .15s;flex:none}
.switch .knop::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.switch input:checked+.knop{background:var(--groen)}
.switch input:checked+.knop::after{transform:translateX(22px)}
.switch input:focus-visible+.knop{outline:3px solid var(--geel);outline-offset:2px}
.info-knop{width:26px;height:26px;border-radius:50%;border:0;background:var(--navy-zacht);color:var(--navy);font:italic 700 14px/1 Georgia,serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.info-knop:hover,.info-knop[aria-expanded=true]{background:var(--navy);color:#fff}
.schakel .uitleg{flex-basis:100%;margin:0;background:var(--ground);border-radius:4px;padding:10px 12px;font-size:14px}

/* Foutmeldingen bij het veld */
.fout{display:block;color:var(--bad);font-size:13px;font-weight:600;margin:5px 0 0}
.fout:empty{display:none}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}

.reis .actie{margin-top:30px;display:flex;flex-direction:column;gap:10px;align-items:center}
.reis .actie .btn{min-height:56px;font-size:17px}
.reis .actie .hint{margin:0;text-align:center}
.bellen{text-align:center;color:var(--muted);margin:22px 0 0;font-size:15px}

@media (max-width:640px){
  main.wizard{padding-top:20px}
  .card.reis{padding:20px 16px 24px}
  .stappen .tekst{font-size:12px}
  .stappen .nr{width:32px;height:32px;font-size:13px}
  .stappen li::before,.stappen li::after{top:14px}
  .reis .titel{font-size:23px}
  .reis .basis{grid-template-columns:1fr}
  .wanneer .tijden{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .wanneer .segment{max-width:none}
  .punt.toevoegen{--m:24px;padding-left:34px}
  .btn-stop{width:100%;justify-content:center;min-height:48px;border:2px solid var(--navy);border-radius:4px;text-decoration:none}
  .btn-stop svg{margin:0}
}

/* ===== AI-assistent: intake in één zin op /reis, uitleg en concept-mails in de backoffice ===== */
.card.intake{border-color:#F2DC92;background:#FFFCF2;margin-bottom:18px;padding:22px 24px}
.intake-kop{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.intake-kop h2{font-size:19px;margin-bottom:2px}
.intake-kop .lead{margin:0;font-size:15px}
.intake-icoon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--geel-logo);color:var(--ink);display:flex;align-items:center;justify-content:center}
.intake-icoon svg{width:22px;height:22px}
.intake-rij{display:flex;gap:10px;align-items:stretch}
.intake-rij textarea{flex:1;min-height:64px;resize:vertical;font-size:16px}
.mic{flex:none;width:52px;border:1px solid #B7BDCC;border-radius:4px;background:#fff;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center}
.mic svg{width:24px;height:24px}
.mic:hover{border-color:var(--navy)}
.mic.aan{background:var(--bad);border-color:var(--bad);color:#fff;animation:puls 1.2s ease-in-out infinite}
@keyframes puls{50%{box-shadow:0 0 0 8px rgba(161,42,30,.18)}}
.intake-acties{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.intake-acties .hint{margin:0;font-size:14px}
.intake [data-intake-resultaat]{margin:12px 0 0}
.card.assistent h3{font-size:15px;margin:0 0 6px}
.card.assistent .uitleg-score{background:var(--navy-zacht);border-radius:4px;padding:12px 14px;margin:0 0 10px;font-size:15px}
@media (max-width:640px){.card.intake{padding:16px}.intake-kop{gap:10px}}

/* Voorwaarden: annuleringsstaffel en kernpunten */
table.annulering{font-size:14px}
table.annulering th,table.annulering td{padding:8px 8px 8px 0}
ul.kern{margin:0 0 14px;padding-left:20px;font-size:14px;display:flex;flex-direction:column;gap:6px}

/* Adressuggesties en kaart */
.punt .veld{position:relative}
.suggesties{position:absolute;left:0;right:0;top:100%;z-index:60;margin:2px 0 0;padding:4px;list-style:none;background:#fff;border:1px solid #B7BDCC;border-radius:4px;box-shadow:0 8px 24px rgba(29,35,51,.15);max-height:280px;overflow:auto}
.suggesties li{padding:8px 10px;border-radius:3px;cursor:pointer;font-size:15px;display:flex;gap:10px;align-items:baseline}
.suggesties li.actief,.suggesties li:hover{background:var(--navy-zacht)}
.suggesties .s-type{flex:none;width:54px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.kaart{height:300px;border:1px solid var(--line);border-radius:4px;margin:14px 0 4px;background:#E8EBF5;z-index:0}
.kaart-marker.van{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.kaart-marker.via{width:12px;height:12px;border-radius:50%;background:var(--navy);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.kaart-marker.naar svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.maplibregl-map{font:13px/1.4 var(--font)}
.maplibregl-ctrl-attrib a{color:var(--navy)}
@media (max-width:640px){.kaart{height:240px}}

/* Zoekindicator in adresvelden: een busje met rookwolkjes */
.bus-zoekt{position:absolute;right:12px;top:0;height:48px;width:48px;pointer-events:none;color:var(--navy)}
.bus-zoekt.naast-knop{right:54px}
.bus-zoekt svg{position:absolute;right:0;top:12px;width:28px;height:24px;animation:bus-hobbel .5s ease-in-out infinite}
.bus-zoekt .rook{position:absolute;left:4px;top:30px;width:7px;height:7px;border-radius:50%;background:#9AA3BF;opacity:0;animation:bus-rook 1.2s ease-out infinite}
.bus-zoekt .rook:nth-child(2){animation-delay:.4s}.bus-zoekt .rook:nth-child(3){animation-delay:.8s}
@keyframes bus-rook{0%{transform:translate(8px,0) scale(.5);opacity:.9}100%{transform:translate(-10px,-14px) scale(1.7);opacity:0}}
@keyframes bus-hobbel{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
input[aria-busy=true]{padding-right:64px}
@media (prefers-reduced-motion:reduce){.bus-zoekt svg,.bus-zoekt .rook{animation:none}.bus-zoekt .rook{opacity:.6}}

/* Kopjes Heenreis en Terugreis: een weggetje met een rijdend busje, rook, en een speld (bestemming) of huisje (thuis) */
.leg-kop .weg{--voortgang:0;flex:1 1 90px;position:relative;height:34px;margin-left:10px;min-width:90px}
.leg-kop .weg .rijbaan{position:absolute;left:0;right:30px;top:21px;height:7px;border-radius:4px;background:var(--navy)}
.leg-kop .weg .rijbaan::after{content:"";position:absolute;left:8px;right:8px;top:2.5px;height:2px;background:repeating-linear-gradient(90deg,var(--geel-logo) 0 9px,transparent 9px 18px)}
.leg-kop .weg .eind{position:absolute;right:0;top:4px;width:26px;height:26px;color:var(--navy)}
.leg-kop .weg .eind svg{width:26px;height:26px;display:block}
/* Voortgangsmeter: --voortgang (0 tot 1) komt uit reis.js en is het aandeel goed ingevulde velden van dat reisdeel. */
.leg-kop .weg .rijder{position:absolute;top:0;left:calc((100% - 66px) * var(--voortgang));width:30px;height:28px;color:var(--navy);transition:left 1s cubic-bezier(.45,0,.2,1)}
.leg-kop .weg .rijder>svg{position:absolute;left:0;top:0;width:30px;height:26px;animation:bus-hobbel .45s ease-in-out infinite}
.leg-kop .weg .rijder .rook{position:absolute;left:-2px;top:16px;width:6px;height:6px;border-radius:50%;background:#9AA3BF;opacity:0}
.leg-kop .weg.rijdt .rijder .rook{animation:bus-rook 1.2s ease-out infinite}
.leg-kop .weg .rijder .rook:nth-child(2){animation-delay:.4s}.leg-kop .weg .rijder .rook:nth-child(3){animation-delay:.8s}
/* Terugreis: het huisje staat links, het busje vertrekt rechts en komt bij 100% thuis aan. */
.leg-kop .weg.terug .rijbaan{left:30px;right:0}
.leg-kop .weg.terug .eind{left:0;right:auto}
.leg-kop .weg.terug .rijder{transform:scaleX(-1);left:calc(36px + (100% - 66px) * (1 - var(--voortgang)))}
.leg-kop .weg.klaar .rijder>svg{animation:none}
.leg-kop .weg.klaar .eind{color:var(--groen);animation:eind-pop .6s ease-out}
@keyframes eind-pop{50%{transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){.leg-kop .weg .rijder>svg,.leg-kop .weg .rijder .rook,.leg-kop .weg .eind{animation:none!important}}
@media (max-width:420px){.leg-kop .weg{min-width:70px}}

/* Chauffeursbriefing */
.briefing ol.stops{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:16px}
.briefing ol.stops li{position:relative;padding-left:26px}
.briefing ol.stops li::before{content:"";position:absolute;left:4px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--navy)}
.briefing ol.stops li.van::before{background:#fff;border:3px solid var(--navy);width:8px;height:8px;top:5px;left:3px}
.briefing ol.stops li.naar{font-weight:700}
.briefing ul.checklist{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.briefing ul.checklist li{position:relative;padding-left:30px}
.briefing ul.checklist li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border:2px solid var(--navy);border-radius:3px}
@media print{header.top,nav.menubalk,footer,.no-print,.demo{display:none!important}body{background:#fff}.card{border-color:#999;break-inside:avoid}main.wrap{padding-top:0}.cols{display:block}.cols>.side{margin-top:12px}}

/* Installeerknop in de voet */
footer .versie{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
footer .installeer{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;border:1px solid #4A5690;border-radius:3px;padding:4px 10px}
footer .installeer img{border-radius:5px;display:block}
footer .installeer:hover{border-color:#fff;color:#fff}

/* App op uw telefoon */
.app-tip{display:flex;align-items:center;gap:14px;max-width:820px;margin:18px auto 0;padding:12px 16px;background:#fff;border:1px solid #F2DC92;border-radius:6px;color:var(--ink);text-decoration:none}
.app-tip img{border-radius:9px;flex:none}
.app-tip:hover{border-color:var(--navy);color:var(--ink)}
.app-pagina{max-width:820px}
.app-hero{display:flex;gap:22px;align-items:flex-start}
.app-hero .app-icoon{border-radius:22px;flex:none;box-shadow:0 6px 18px rgba(29,35,51,.18)}
.instructies{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.instructies .card{opacity:.75}
.instructies .card.actief{opacity:1;border-color:var(--navy);box-shadow:inset 4px 0 0 var(--navy)}
.instructies ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.card.qr{display:flex;gap:22px;align-items:center;justify-content:space-between;margin-top:16px;flex-wrap:wrap}
.qr-code{flex:none;background:#fff;padding:6px;border:1px solid var(--line);border-radius:4px}
.qr-code svg{display:block;width:200px;height:200px}
@media (max-width:640px){.app-hero{flex-direction:column;gap:14px}.app-tip{margin-inline:0}}

/* Digitale chauffeursbriefing en ritrapport */
.briefing ul.checklist li.af::before{background:var(--navy);content:"✓";color:#fff;font-size:12px;line-height:18px;text-align:center}
.rit .checklist-form{display:flex;flex-direction:column;gap:2px}.rit .checklist-form label.check{padding:8px 0;border-bottom:1px solid var(--line,#D9DDE8)}
.rit input[type=file]{width:100%;padding:12px;border:1px dashed var(--navy);border-radius:4px;background:#fff;font-size:15px}
.rapport-lijst{display:flex;flex-direction:column;gap:12px}.rapport-lijst .item{border:1px solid var(--line,#D9DDE8);border-radius:4px;padding:10px 12px}
.fotos{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.fotos img{width:96px;height:96px;object-fit:cover;border-radius:4px;border:1px solid var(--line,#D9DDE8);display:block}
.badge.r-schade,.badge.r-rotzooi{background:var(--badbg,#FBE9E7);color:var(--bad,#A12A1E)}.badge.r-kosten{background:var(--geel-zacht);color:var(--ink)}
.badge.r-start,.badge.r-opmerking{background:var(--navy-zacht);color:var(--navy)}.badge.r-afwijking,.badge.r-incident{background:#FDE7C8;color:#8A4B00}
.qr-klein svg{width:160px;height:160px;display:block;border:1px solid var(--line,#D9DDE8);border-radius:4px;padding:4px;background:#fff}
.linkvak{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.linkvak input{flex:1 1 240px;min-width:0;font-family:Consolas,"Courier New",monospace;font-size:13px}
.btn.whatsapp{background:#25D366;color:#fff}.btn.whatsapp:hover{background:#1DA851;color:#fff}