/* Reiswijzer Europa — Material Design 3 */
/* LETTERTYPE: verander hier het lettertype van de hele site (zie README, "Lettertype"). */
:root{
  --md-font:"Twemoji Country Flags",Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --md-primary:#1f4f8f;--md-on-primary:#fff;--md-primary-container:#d6e3ff;--md-on-primary-container:#001b3e;
  --md-secondary:#545f70;--md-secondary-container:#d8e3f8;--md-on-secondary-container:#111c2b;
  --md-tertiary:#7a5900;--md-tertiary-container:#ffdea3;--md-on-tertiary-container:#261900;
  --md-error:#ba1a1a;--md-error-container:#ffdad6;--md-on-error-container:#410002;
  --md-surface:#f6f8fc;--md-surface-dim:#d8dae0;--md-scl0:#ffffff;--md-scl1:#f2f3fa;--md-scl2:#eceef4;--md-scl3:#e6e8ee;--md-scl4:#e1e2e8;
  --md-on-surface:#191c20;--md-on-surface-variant:#43474e;--md-outline:#73777f;--md-outline-variant:#c3c6cf;
  --md-inverse:#2e3035;--md-shadow:0 0 0 transparent;
  --e1:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);--e2:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);--e3:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);
  /* vervoermiddelen */
  --trein:#1f63c6;--hst:#6c3fc4;--nacht:#2b2f70;--bus:#11845a;--boot:#00788a;--vlieg:#c4441b;--lopen:#6f5b45;--regio:#3577b8;
  --acc:var(--vlieg);--acc2:var(--md-primary);--ink:var(--md-on-surface);--mut:var(--md-on-surface-variant);--line:var(--md-outline-variant);--card:var(--md-scl1);--bg:var(--md-surface);
  --gold:#f2b233;--gold-ink:#7a5900;--rail:#c9d3e3;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --md-primary:#a9c7ff;--md-on-primary:#002f64;--md-primary-container:#0d4584;--md-on-primary-container:#d6e3ff;
  --md-secondary:#bcc7db;--md-secondary-container:#3c4758;--md-on-secondary-container:#d8e3f8;
  --md-tertiary:#f5c04a;--md-tertiary-container:#5c4300;--md-on-tertiary-container:#ffdea3;
  --md-error:#ffb4ab;--md-error-container:#93000a;--md-on-error-container:#ffdad6;
  --md-surface:#10141b;--md-scl0:#0c0e13;--md-scl1:#191c20;--md-scl2:#1d2024;--md-scl3:#282a2f;--md-scl4:#33353a;
  --md-on-surface:#e1e2e8;--md-on-surface-variant:#c3c6cf;--md-outline:#8d9199;--md-outline-variant:#43474e;
  --trein:#7fb0ff;--hst:#c3a6ff;--nacht:#9ea6ff;--bus:#6fd6a6;--boot:#5fd3e6;--vlieg:#ffa27f;--lopen:#d6bfa3;--regio:#8cc0f0;
  --gold:#f5c04a;--gold-ink:#f5c04a;--rail:#3a4250;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--md-surface);color:var(--md-on-surface);font:400 15px/1.5 var(--md-font);-webkit-font-smoothing:antialiased}
a{color:var(--md-primary)}
button,input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--md-primary);outline-offset:2px}

/* ---------- top app bar ---------- */
header.appbar{background:var(--md-surface);position:relative;z-index:6}
.ab-in{max-width:1180px;margin:auto;padding:14px 18px 4px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.logo{width:40px;height:40px;border-radius:12px;background:var(--md-primary-container);color:var(--md-on-primary-container);display:grid;place-items:center;flex:none}
.logo svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h1{font:400 26px/1.2 var(--md-font);margin:0;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
h1 span{color:var(--md-primary);font-weight:500}
.tagline{max-width:1180px;margin:0 auto;padding:0 18px 10px 70px;color:var(--md-on-surface-variant);font-size:14px}
#lang{width:auto;height:40px;padding:0 34px 0 14px;border-radius:20px;border:1px solid var(--md-outline);background:transparent;color:var(--md-on-surface);font:500 14px var(--md-font)}

/* ---------- navigatie: tabs (breed) / navigation bar (mobiel) ---------- */
nav.tabs{position:sticky;top:0;z-index:5;background:var(--md-surface);border-bottom:1px solid var(--md-outline-variant)}
.tabs-in{max-width:1180px;margin:auto;padding:0 10px;display:flex;overflow-x:auto;scrollbar-width:none}
.tab{position:relative;display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--md-on-surface-variant);height:48px;padding:0 16px;font:500 14px var(--md-font);letter-spacing:.1px;cursor:pointer;white-space:nowrap;border-radius:0}
.tab .ni{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tab:hover{background:color-mix(in srgb,var(--md-on-surface) 8%,transparent)}
.tab[aria-selected=true]{color:var(--md-primary)}
.tab[aria-selected=true]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--md-primary)}
@media(max-width:699px){
  nav.tabs{position:fixed;top:auto;bottom:0;left:0;right:0;border:0;background:var(--md-scl2);box-shadow:var(--e2);padding-bottom:env(safe-area-inset-bottom)}
  .tabs-in{padding:0;justify-content:space-around;overflow:visible}
  .tab{flex-direction:column;justify-content:center;gap:4px;height:72px;padding:0 4px;flex:1;font:500 12px var(--md-font);color:var(--md-on-surface-variant);white-space:normal;text-align:center;line-height:1.15}
  .tab:hover{background:none}
  .tab .ni{width:64px;height:32px;padding:4px 20px;border-radius:16px;transition:background .2s}
  .tab[aria-selected=true]{color:var(--md-on-surface)}
  .tab[aria-selected=true] .ni{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
  .tab[aria-selected=true]::after{display:none}
  body{padding-bottom:84px}
  .tagline{padding-left:18px}
}

/* ---------- layout ---------- */
main{max-width:1180px;margin:auto;padding:14px 18px 60px}
.layout{display:grid;gap:20px}
@media(min-width:900px){.layout{grid-template-columns:minmax(0,1fr) 420px}.side{position:sticky;top:64px;align-self:start}}

/* ---------- formulier (outlined text fields) ---------- */
form.f{background:var(--md-scl1);border-radius:16px;padding:18px 16px 16px;display:grid;gap:18px 12px;grid-template-columns:1fr 1fr}
form.f label{position:relative;display:block;min-width:0;font:inherit;color:inherit;text-transform:none;letter-spacing:0}
form.f label>span:first-child{position:absolute;left:12px;top:-8px;padding:0 4px;background:var(--md-scl1);color:var(--md-on-surface-variant);font:400 12px/16px var(--md-font);z-index:1;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
form.f label:focus-within>span:first-child{color:var(--md-primary)}
form.f .full{grid-column:1/-1}
input,select{height:56px;width:100%;min-width:0;padding:0 16px;border:1px solid var(--md-outline);border-radius:4px;background:transparent;color:var(--md-on-surface);font:400 16px var(--md-font)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--md-on-surface-variant) 50%),linear-gradient(135deg,var(--md-on-surface-variant) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
input:hover,select:hover{border-color:var(--md-on-surface)}
input:focus,select:focus{outline:none;border:2px solid var(--md-primary);padding:0 15px}
select:focus{padding-right:35px}
input::placeholder{color:var(--md-on-surface-variant);opacity:.7}
.pair{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start}
.swap{width:48px;height:48px;margin-top:4px;border-radius:24px;border:0;background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-size:20px;cursor:pointer;display:grid;place-items:center}
.swap:hover{box-shadow:var(--e1)}
.fld{position:relative;min-width:0}
.pinfo{font:400 12px/16px var(--md-font);color:var(--md-on-surface-variant);margin:4px 16px 0;min-height:16px}
@media(max-width:560px){.pair{grid-template-columns:1fr;gap:6px}.swap{justify-self:end;margin:-6px 4px -6px 0;width:40px;height:40px;transform:rotate(90deg)}}

/* menu met suggesties */
.ac{position:absolute;left:0;right:0;top:58px;z-index:20;margin:0;padding:8px 0;list-style:none;background:var(--md-scl2);border-radius:12px;box-shadow:var(--e2);max-height:360px;overflow:auto;min-width:260px}
.ac li{display:flex;gap:12px;align-items:center;min-height:48px;padding:6px 16px;cursor:pointer;font-size:14px}
.ac li.on,.ac li:hover{background:color-mix(in srgb,var(--md-on-surface) 8%,transparent)}.ac li.dis{cursor:default;color:var(--md-on-surface-variant)}
.ac .an{flex:1;min-width:0}.ac small{display:block;color:var(--md-on-surface-variant);font-size:12px}.acc{font:500 11px var(--md-font);color:var(--md-on-surface-variant)}
.ak{display:inline-flex;align-items:center;gap:4px;font:500 11px var(--md-font);letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:8px;background:var(--md-scl4);color:var(--md-on-surface-variant);white-space:nowrap}
.ak.k-city{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}.ak.k-address,.ak.k-geo{background:var(--md-primary-container);color:var(--md-on-primary-container)}

/* filter chips voor vervoermiddelen */
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px 0 8px;border-radius:8px;border:1px solid var(--md-outline);background:transparent;color:var(--md-on-surface-variant);font:500 14px var(--md-font);letter-spacing:.1px;cursor:pointer;transition:background .15s,box-shadow .15s}
.chip .ic{width:18px;height:18px;margin:0}
.chip:hover{background:color-mix(in srgb,var(--md-on-surface) 8%,transparent)}
.chip[aria-pressed=true]{border-color:transparent;color:#fff}
.chip[aria-pressed=true]:hover{box-shadow:var(--e1)}
.chip.c-trein[aria-pressed=true]{background:#1f63c6}.chip.c-nacht[aria-pressed=true]{background:#2b2f70}.chip.c-bus[aria-pressed=true]{background:#11845a}
.chip.c-nachtbus[aria-pressed=true]{background:#0d5e40}.chip.c-vlieg[aria-pressed=true]{background:#c4441b}.chip.c-boot[aria-pressed=true]{background:#00788a}
.chip[aria-pressed=false] .ic{opacity:.7}

/* schakelaars */
.checks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.checks label{display:flex!important;align-items:center;gap:12px;font:400 14px var(--md-font)!important;color:var(--md-on-surface)!important}
.checks label>span:first-child{position:static!important;background:none!important;padding:0!important;font:400 14px var(--md-font)!important;color:var(--md-on-surface)!important}
.checks input[type=checkbox]{appearance:none;width:52px;height:32px;padding:0;border-radius:16px;border:2px solid var(--md-outline);background:var(--md-scl4);position:relative;cursor:pointer;flex:none;transition:background .2s,border-color .2s}
.checks input[type=checkbox]::before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--md-outline);top:6px;left:6px;transition:all .2s}
.checks input[type=checkbox]:checked{background:var(--md-primary);border-color:var(--md-primary)}
.checks input[type=checkbox]:checked::before{width:24px;height:24px;top:2px;left:22px;background:var(--md-on-primary)}
.checks input[type=checkbox]:focus{padding:0}
.checks .pl select{width:auto;height:40px;border-radius:8px;font-size:14px}

/* instellingen */
details.set{grid-column:1/-1;border-top:1px solid var(--md-outline-variant);padding-top:12px}
details.set summary{cursor:pointer;font:500 14px var(--md-font);color:var(--md-primary);list-style:none;display:flex;align-items:center;gap:8px}
details.set summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s;margin:0 4px}
details.set[open] summary::before{transform:rotate(45deg)}
.setgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;margin-top:18px}

/* knoppen */
button.go{grid-column:1/-1;height:48px;border:0;border-radius:24px;background:var(--md-primary);color:var(--md-on-primary);font:500 15px var(--md-font);letter-spacing:.1px;cursor:pointer;transition:box-shadow .15s}
button.go:hover{box-shadow:var(--e1)}button.go:active{box-shadow:none;filter:brightness(1.08)}
.pill{height:40px;padding:0 20px;border-radius:20px;border:1px solid var(--md-outline);background:transparent;color:var(--md-primary);font:500 14px var(--md-font);cursor:pointer}
.pill:hover{background:color-mix(in srgb,var(--md-primary) 8%,transparent)}
.lnk{background:none;border:0;color:var(--md-primary);font:500 14px var(--md-font);cursor:pointer;padding:6px 8px;border-radius:20px;text-decoration:none}
.lnk:hover{background:color-mix(in srgb,var(--md-primary) 8%,transparent)}
.links{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.links a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--md-outline-variant);color:var(--md-primary);font:500 13px var(--md-font);text-decoration:none;background:transparent}
.links a:hover{background:color-mix(in srgb,var(--md-primary) 8%,transparent)}
.links.big a{height:40px;padding:0 16px;font-size:14px;border-radius:20px}

/* gesegmenteerde knop */
.seg{display:inline-flex;margin-top:18px;border:1px solid var(--md-outline);border-radius:20px;overflow:hidden}
.seg button{height:40px;border:0;border-left:1px solid var(--md-outline);background:transparent;padding:0 16px;font:500 14px var(--md-font);color:var(--md-on-surface);cursor:pointer;display:flex;align-items:center;gap:6px}
.seg button:first-child{border-left:0}
.seg button[aria-pressed=true]{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.seg button[aria-pressed=true]::before{content:"";width:5px;height:10px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:-3px 4px 0 0}
@media(max-width:420px){.seg button{padding:0 11px;font-size:13px}}

/* ---------- resultaten ---------- */
.sum{margin:22px 0 10px}.sum h3{font:400 24px/32px var(--md-font);margin:0}.sum p{margin:4px 0;color:var(--md-on-surface-variant)}
.compare{margin-top:12px;display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:620px){.compare{grid-template-columns:repeat(3,1fr)}}
.compare>div{background:var(--md-scl2);border-radius:12px;padding:12px 14px}.compare b{display:block;font:500 14px var(--md-font)}.compare span{color:var(--md-on-surface-variant);font-size:13px}
.card{background:var(--md-scl1);border-radius:12px;padding:14px 16px;margin:10px 0;cursor:pointer;transition:box-shadow .2s,background .2s}
.card:hover{box-shadow:var(--e1)}
.card.open{background:var(--md-scl0);box-shadow:var(--e1)}
@media (prefers-color-scheme:dark){.card.open{background:var(--md-scl2)}}
.top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.times b{font:400 22px/28px var(--md-font);font-variant-numeric:tabular-nums}.dd{display:block;font:500 12px var(--md-font);letter-spacing:.5px;color:var(--md-on-surface-variant);text-transform:uppercase}
sup{font-size:11px;color:var(--md-error);font-weight:500;margin-left:2px}
.meta{color:var(--md-on-surface-variant);font-size:14px}
.row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}.ar{color:var(--md-outline)}
.mb{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:6px;color:#fff;font:500 11px var(--md-font);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.mb .ic{width:14px;height:14px;margin:0}
.m-trein{background:#1f63c6}.m-hst{background:#6c3fc4}.m-nacht{background:#2b2f70}.m-bus{background:#11845a}.m-boot{background:#00788a}.m-vlieg{background:#c4441b}.m-lopen{background:#6f5b45}.m-regio{background:#3577b8}.m-lokaal{background:#6f5b45}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font:500 12px var(--md-font);background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.tag.night{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.tag.warnt{background:var(--md-error-container);color:var(--md-on-error-container)}
.tag.pass{background:#c8f0d8;color:#00391f}
@media (prefers-color-scheme:dark){.tag.pass{background:#005230;color:#a6f4c5}}
.detail{display:none;margin-top:14px;border-top:1px solid var(--md-outline-variant);padding-top:12px;cursor:default}.card.open .detail{display:block}
.leg{display:grid;grid-template-columns:52px 4px 1fr;gap:12px;margin:8px 0}
.lt{font-size:14px;line-height:1.35;font-variant-numeric:tabular-nums}.lt b{font-weight:500}
.lbar{border-radius:2px}
.lbar.m-trein,.lbar.m-hst,.lbar.m-nacht,.lbar.m-bus,.lbar.m-boot,.lbar.m-vlieg,.lbar.m-regio,.lbar.m-lokaal{color:transparent}
.sn{font-weight:500}
.op{color:var(--md-on-surface-variant);font-size:13px;margin:4px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nt{font-size:12.5px;color:var(--md-on-surface-variant);margin:3px 0}
.meal{font-size:13px;color:var(--md-tertiary);margin:4px 0;display:flex;gap:6px;align-items:flex-start}
.meal::before{content:"";width:6px;height:6px;border-radius:3px;background:currentColor;margin-top:7px;flex:none}
.xfer{margin:4px 0 4px 68px;font-size:13px;color:var(--md-on-surface-variant);padding:6px 12px;border-radius:8px;background:var(--md-scl2)}
.mile{font-size:14px;margin:10px 0;padding:10px 14px;background:var(--md-scl2);border-radius:12px}
.mile.hotel{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.mile.sleep{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.stay{color:var(--md-primary);font-weight:500;font-size:14px}
.co2{font-size:13px;color:var(--md-on-surface-variant);margin:10px 0 0}
.note{font-size:12.5px;color:var(--md-on-surface-variant);margin-top:14px}
.warn{background:var(--md-error-container);color:var(--md-on-error-container);padding:14px 16px;border-radius:12px}
.sub{color:var(--md-on-surface-variant);font-size:13px}
.box{background:var(--md-scl1);border-radius:16px;padding:16px;margin:12px 0}
.box h4{margin:0 0 10px;font:500 16px/24px var(--md-font)}
.box.hl{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.passbox{border:1px solid #11845a55}
.grid2{display:grid;gap:12px}@media(min-width:620px){.grid2{grid-template-columns:1fr 1fr}.grid2 .box{margin:0}}
.big{font:400 28px var(--md-font);margin:10px 0 0}.big small{font:400 13px var(--md-font);color:var(--md-on-surface-variant)}
.plain{margin:0;padding-left:20px}.plain li{margin:6px 0}
.ops{margin:0;padding:0;list-style:none}.ops li{padding:10px 0;border-bottom:1px solid var(--md-outline-variant)}.ops li:last-child{border:0}.ops a{font-weight:500;text-decoration:none}
.opt{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--md-outline-variant)}.opt:last-child{border:0}.opt p{margin:0}
.opt .mb{height:28px;padding:0 10px}
.next{margin:18px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.next h3{width:100%;margin:0;font:500 16px var(--md-font)}
.facs{display:inline-flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.fc{font:500 11px var(--md-font);font-style:normal;background:var(--md-scl3);color:var(--md-on-surface-variant);padding:2px 8px;border-radius:6px}.fc.lg{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.via{list-style:none;margin:8px 0;padding:0 0 0 12px;border-left:2px dotted var(--md-outline-variant);font-size:13px}
.via li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;padding:3px 0}.vt{color:var(--md-on-surface-variant);min-width:44px;font-variant-numeric:tabular-nums}.via.none{border:0;padding:0;color:var(--md-on-surface-variant)}
.fx{font-size:13px;margin:6px 0}
.late{color:var(--md-error);font-weight:500;font-size:12px;margin-left:3px}
.card.live{border-left:4px solid #11845a}
code{background:var(--md-scl3);padding:1px 6px;border-radius:4px}

/* reisdagen */
.day{background:var(--md-scl1);border-radius:16px;padding:16px;margin:14px 0}
.day header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.day h4{margin:4px 0 0;font:400 22px/28px var(--md-font);flex-basis:100%}
.dn{background:var(--md-primary);color:var(--md-on-primary);font:500 12px var(--md-font);letter-spacing:.5px;padding:4px 10px;border-radius:8px;text-transform:uppercase}.dd2{color:var(--md-on-surface-variant);font-size:14px}
.tl{border-top:1px solid var(--md-outline-variant);margin-top:12px;padding-top:6px}
.alts summary{cursor:pointer;font:500 14px var(--md-font);color:var(--md-primary);margin-top:10px;padding:8px 0}
.alt{display:block;width:100%;text-align:left;border:0;background:var(--md-scl2);border-radius:12px;padding:10px 14px;margin:6px 0;cursor:pointer;font:14px var(--md-font);color:var(--md-on-surface)}
.alt:hover{background:var(--md-scl3)}
.alt.cur{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}
.alt .at{display:block}.alt .am{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px;font-size:13px;color:var(--md-on-surface-variant)}

/* iconen */
.ic{width:13px;height:13px;flex:none;vertical-align:-2px;margin-right:4px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ic .f{fill:currentColor;stroke:none}

/* ---------- kaart ---------- */
.mapbox{background:var(--md-scl1);border-radius:16px;padding:12px;position:relative}
#map-slot .mapbox{margin:12px 0}
.mh{display:flex;align-items:center;gap:8px;margin:0 2px 10px}.mh h4{margin:0;flex:1;font:500 16px var(--md-font)}
.nt2{display:flex!important;align-items:center;gap:6px;font:400 13px var(--md-font);color:var(--md-on-surface-variant)}.nt2 input{width:18px;height:18px;accent-color:var(--md-primary)}
.mz{display:flex;gap:4px}.mz button{width:40px;height:40px;border:0;background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-radius:20px;font:500 18px var(--md-font);cursor:pointer}
.mz button:hover{box-shadow:var(--e1)}
#kaart{width:100%;height:460px;border-radius:12px;touch-action:none;cursor:grab;background:#d6e4ee;display:block}
#kaart:active{cursor:grabbing}
@media(max-width:899px){#kaart{height:340px}}
#kaart .sea{fill:#d6e4ee}
#kaart .land path{fill:#fbfaf6;stroke:#c6c9cf;stroke-width:.7;vector-effect:non-scaling-stroke;stroke-linejoin:round}
@media (prefers-color-scheme:dark){#kaart,#kaart .sea{background:#0e1a24;fill:#0e1a24}#kaart .land path{fill:#232830;stroke:#3d434d}}
#kaart .net{stroke:#8d9199;stroke-width:.8;vector-effect:non-scaling-stroke;opacity:.5}#kaart .net.m-bus{stroke-dasharray:3 3}
#kaart .rt path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#kaart .rt .casing{stroke:#fff;stroke-width:7;opacity:.9}
@media (prefers-color-scheme:dark){#kaart .rt .casing{stroke:#0e1a24}}
#kaart .rt .route{stroke-width:4}#kaart .rt .dash{stroke-dasharray:7 6}
#kaart .route.m-trein{stroke:var(--trein)}#kaart .route.m-hst{stroke:var(--hst)}#kaart .route.m-nacht{stroke:var(--nacht)}#kaart .route.m-bus{stroke:var(--bus)}#kaart .route.m-boot{stroke:var(--boot)}#kaart .route.m-vlieg{stroke:var(--vlieg)}#kaart .route.m-regio{stroke:var(--regio)}#kaart .route.m-lokaal{stroke:var(--lopen);stroke-width:3}
#kaart .mk circle{stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
#kaart .mk-tr circle{fill:var(--md-on-surface)}#kaart .mk-A circle{fill:#11845a}#kaart .mk-B circle{fill:#c4441b}#kaart .mk-hotel circle{fill:var(--md-primary)}#kaart .mk-night circle{fill:#2b2f70}
#kaart .mk .sym{fill:#fff;font-family:var(--md-font);font-weight:700;text-anchor:middle}
#kaart .mk .lb{fill:var(--md-on-surface);font-family:var(--md-font);font-weight:500;paint-order:stroke;stroke:var(--md-surface);stroke-width:3px;stroke-linejoin:round}
.legend{display:flex;flex-wrap:wrap;gap:6px;padding:10px 2px 2px}.legend .mb .ic{width:12px;height:12px}
.mlic{font-size:11px;color:var(--md-on-surface-variant);margin:6px 2px 0}

/* ---------- vertrekbord (zoals op het perron) ---------- */
.boardbox:empty{display:none}
.board{background:#0f2a4f;color:#fff;border-radius:12px;margin:10px 0;padding:10px 10px 8px;font:500 12.5px var(--md-font);font-variant-numeric:tabular-nums;overflow-x:auto;box-shadow:var(--e1)}
.board .bh{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid #ffffff33;padding:2px 4px 8px}
.board .bt{font:700 17px var(--md-font);color:#ffd34d}.board .bt i,.board .brh i{display:block;font:400 10px var(--md-font);color:#b9c7dd;font-style:normal}
.board .bs{flex:1;font-weight:500}.board .bc{font:700 17px var(--md-font);color:#ffd34d}
.board .br{display:grid;grid-template-columns:44px minmax(110px,1.6fr) minmax(90px,1fr) 44px minmax(70px,1fr);gap:6px;padding:6px 4px;border-bottom:1px solid #ffffff14;align-items:start;min-width:430px}
.board .brh{color:#b9c7dd;font:500 10.5px var(--md-font);text-transform:uppercase;letter-spacing:.5px}
.board .bt2{color:#ffd34d;font-weight:700}.board .bd{font-weight:500}.board .bd small{display:block;color:#b9c7dd;font-weight:400}
.board .bn{display:flex;gap:3px;align-items:center;color:#dfe7f3}.board .bn .ic{width:13px;height:13px}
.board .bp{text-align:center;font-weight:700}.board .bl{color:#ffb38a}.board .bx{color:#ff8a8a}
.board .br.me{background:#ffd34d22;box-shadow:inset 3px 0 0 #ffd34d}.board .you{color:#ffd34d;font-weight:700;white-space:nowrap}
.board .bf{color:#b9c7dd;font-size:11px;padding:8px 4px 0}

footer{max-width:1180px;margin:auto;padding:0 18px 40px;color:var(--md-on-surface-variant);font-size:12.5px}
footer p{margin:4px 0}footer a{color:var(--md-on-surface-variant)}

@media(max-width:560px){h1{font-size:21px}.logo{width:34px;height:34px;border-radius:10px}.ab-in{padding:12px 14px 4px;gap:8px}#lang{height:36px;font-size:13px;padding:0 28px 0 10px;background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%}.tagline{font-size:13px;padding:0 14px 8px}main{padding:10px 12px 60px}}

/* =====================================================================
   Eigen stijl: Reiswijzer
   ===================================================================== */
/* app bar met logo */
.brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit}
.logo{width:44px;height:44px;flex:none;filter:drop-shadow(0 2px 4px rgba(22,57,107,.25))}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wordmark b{font:700 22px var(--md-font);letter-spacing:-.3px;color:var(--md-on-surface)}
.wordmark i{font:700 11px var(--md-font);font-style:normal;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-ink);margin-top:3px}
.live-badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;background:#d9f5e5;color:#0b5d3b;font:500 12px var(--md-font)}
.live-badge .dot{width:8px;height:8px;border-radius:4px;background:#11845a;box-shadow:0 0 0 0 #11845a88;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #11845a88}70%{box-shadow:0 0 0 6px #11845a00}100%{box-shadow:0 0 0 0 #11845a00}}
@media (prefers-color-scheme:dark){.live-badge{background:#0f3b28;color:#8ae2b6}}
.tagline{display:none}
@media(max-width:560px){.logo{width:38px;height:38px}.wordmark b{font-size:19px}.wordmark i{font-size:10px}}

/* planner-formulier */
form.planner{position:relative;overflow:visible;background:var(--md-scl0);box-shadow:var(--e1);border-radius:24px;padding:20px 18px 18px;grid-template-columns:1fr;gap:16px}
@media (prefers-color-scheme:dark){form.planner{background:var(--md-scl1)}}
form.planner label>span:first-child{background:var(--md-scl0)}
@media (prefers-color-scheme:dark){form.planner label>span:first-child{background:var(--md-scl1)}}
.trip-fields{display:grid;gap:4px;position:relative;padding-left:26px}
.trip-fields::before{content:"";position:absolute;left:8px;top:28px;bottom:42px;border-left:3px dotted var(--gold)}
.trip-fields>.fld::before,.via-row::before{content:"";position:absolute;left:-26px;top:22px;width:13px;height:13px;border-radius:50%;background:var(--md-scl0);border:3px solid var(--md-primary);box-sizing:border-box}
.trip-fields>.fld:last-child::before{background:var(--gold);border-color:var(--gold)}
.via-row{position:relative;display:grid;grid-template-columns:1fr 96px 40px;gap:8px;align-items:start;margin-top:12px}
.via-row::before{border-color:var(--gold)}
.via-row .icon-btn{margin-top:8px}
.via-bar{display:flex;align-items:center;justify-content:space-between;margin:2px 0 10px}
.swap{width:40px;height:40px;margin:0}
.swap .ic{width:20px;height:20px;margin:0;transform:rotate(90deg)}
.row3{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:12px}
@media(max-width:560px){.row3{grid-template-columns:1fr 1fr}.row3 label:last-child{grid-column:1/-1}}
.ret{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.inline-sel{display:flex!important;align-items:center;gap:10px}
.inline-sel>span:first-child{position:static!important;background:none!important;padding:0!important;font:400 14px var(--md-font)!important;color:var(--md-on-surface)!important}
.inline-sel select{width:auto;height:40px;border-radius:8px;font-size:14px}
.switch{display:flex!important;align-items:center;gap:12px;cursor:pointer}
.switch>span{position:static!important;background:none!important;padding:0!important;font:400 14px var(--md-font)!important;color:var(--md-on-surface)!important;white-space:normal!important}
.switch input[type=checkbox]{appearance:none;width:52px;height:32px;padding:0;border-radius:16px;border:2px solid var(--md-outline);background:var(--md-scl4);position:relative;cursor:pointer;flex:none;transition:background .2s,border-color .2s}
.switch input[type=checkbox]::before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--md-outline);top:6px;left:6px;transition:all .2s}
.switch input[type=checkbox]:checked{background:var(--md-primary);border-color:var(--md-primary)}
.switch input[type=checkbox]:checked::before{width:24px;height:24px;top:2px;left:22px;background:var(--md-on-primary)}
.switch input[type=checkbox]:focus{padding:0}
details.set summary small{color:var(--md-on-surface-variant);font-weight:400;margin-left:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.more-in{display:grid;gap:18px;margin-top:14px}
.grp h4{margin:0 0 10px;font:500 13px var(--md-font);letter-spacing:.4px;text-transform:uppercase;color:var(--md-on-surface-variant)}
.sw-grp{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.setgrid{margin-top:0}
button.go{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:26px;font-size:16px;background:linear-gradient(135deg,#2d6bb8,#1f4f8f)}
@media (prefers-color-scheme:dark){button.go{background:var(--md-primary)}}
button.go .ic{width:20px;height:20px;margin:0}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:20px;border:0;font:500 14px var(--md-font);cursor:pointer;color:var(--md-primary);background:transparent;text-decoration:none}
.btn .ic{width:18px;height:18px;margin:0}
.btn.text{padding:0 12px}.btn.text:hover{background:color-mix(in srgb,var(--md-primary) 8%,transparent)}
.btn.tonal{background:var(--md-secondary-container);color:var(--md-on-secondary-container)}.btn.tonal:hover{box-shadow:var(--e1)}
.btn.filled{background:var(--md-primary);color:var(--md-on-primary)}
.btn.danger{color:var(--md-error)}
.icon-btn{width:40px;height:40px;border-radius:20px;border:0;background:transparent;color:var(--md-on-surface-variant);display:grid;place-items:center;cursor:pointer;font:500 18px var(--md-font)}
.icon-btn:hover{background:color-mix(in srgb,var(--md-on-surface) 8%,transparent)}.icon-btn:disabled{opacity:.35;cursor:default}
.icon-btn .ic{width:20px;height:20px;margin:0}
.loading{display:flex;align-items:center;gap:12px;padding:30px 8px;color:var(--md-on-surface-variant)}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--md-primary-container);border-top-color:var(--md-primary);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* samenvatting van de reis */
.tripsum{margin:22px 0 14px;padding:20px;border-radius:24px;background:linear-gradient(140deg,#1f4f8f,#173c6e 70%);color:#fff;position:relative;overflow:hidden}
/* knipoog naar de Europese vlag: een kring van twaalf sterren, heel licht */
.tripsum::after{content:"";position:absolute;right:-34px;top:-34px;width:190px;height:190px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='%23f5c542' d='M83.00,44.00L84.35,48.15L88.71,48.15L85.18,50.71L86.53,54.85L83.00,52.29L79.47,54.85L80.82,50.71L77.29,48.15L81.65,48.15ZM78.58,60.50L79.93,64.65L84.29,64.65L80.76,67.21L82.11,71.35L78.58,68.79L75.05,71.35L76.40,67.21L72.87,64.65L77.23,64.65ZM66.50,72.58L67.85,76.72L72.21,76.72L68.68,79.29L70.03,83.43L66.50,80.87L62.97,83.43L64.32,79.29L60.79,76.72L65.15,76.72ZM50.00,77.00L51.35,81.15L55.71,81.15L52.18,83.71L53.53,87.85L50.00,85.29L46.47,87.85L47.82,83.71L44.29,81.15L48.65,81.15ZM33.50,72.58L34.85,76.72L39.21,76.72L35.68,79.29L37.03,83.43L33.50,80.87L29.97,83.43L31.32,79.29L27.79,76.72L32.15,76.72ZM21.42,60.50L22.77,64.65L27.13,64.65L23.60,67.21L24.95,71.35L21.42,68.79L17.89,71.35L19.24,67.21L15.71,64.65L20.07,64.65ZM17.00,44.00L18.35,48.15L22.71,48.15L19.18,50.71L20.53,54.85L17.00,52.29L13.47,54.85L14.82,50.71L11.29,48.15L15.65,48.15ZM21.42,27.50L22.77,31.65L27.13,31.65L23.60,34.21L24.95,38.35L21.42,35.79L17.89,38.35L19.24,34.21L15.71,31.65L20.07,31.65ZM33.50,15.42L34.85,19.57L39.21,19.57L35.68,22.13L37.03,26.28L33.50,23.71L29.97,26.28L31.32,22.13L27.79,19.57L32.15,19.57ZM50.00,11.00L51.35,15.15L55.71,15.15L52.18,17.71L53.53,21.85L50.00,19.29L46.47,21.85L47.82,17.71L44.29,15.15L48.65,15.15ZM66.50,15.42L67.85,19.57L72.21,19.57L68.68,22.13L70.03,26.28L66.50,23.71L62.97,26.28L64.32,22.13L60.79,19.57L65.15,19.57ZM78.58,27.50L79.93,31.65L84.29,31.65L80.76,34.21L82.11,38.35L78.58,35.79L75.05,38.35L76.40,34.21L72.87,31.65L77.23,31.65Z'/></svg>") center/contain no-repeat;opacity:.28;pointer-events:none}
.ts-route{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:500 20px/1.3 var(--md-font);position:relative;z-index:1}
.ts-arrow .ic{width:18px;height:18px;margin:0;color:var(--gold)}
.ts-dates{margin:8px 0 14px;color:#cfdcf3;font-size:14px;position:relative;z-index:1}
.ts-cost{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;z-index:1}
.ts-cost>div{background:rgba(255,255,255,.1);border-radius:14px;padding:10px 12px}
.ts-cost span{display:block;font-size:12px;color:#cfdcf3}.ts-cost b{font:500 20px var(--md-font)}
.ts-cost .tot{background:var(--gold);color:#261900}.ts-cost .tot span{color:#4a3500}
.ts-meta{font-size:12.5px;color:#cfdcf3;margin:12px 0 10px;position:relative;z-index:1}
.ts-actions{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
.ts-actions .btn.tonal{background:rgba(255,255,255,.14);color:#fff}.ts-actions .btn.tonal:hover{background:rgba(255,255,255,.22)}
@media(max-width:560px){.ts-cost{grid-template-columns:1fr 1fr}.ts-cost .tot{grid-column:1/-1}.ts-route{font-size:18px}.ts-actions .btn{padding:0 12px;font-size:13px}}

/* tijdlijn */
.timeline{position:relative;margin:8px 0 18px;padding-left:22px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;border-left:3px solid var(--rail);border-radius:2px}
.tl-day{position:relative;display:flex;align-items:baseline;gap:10px;margin:22px 0 8px}
.tl-day::before{content:"";position:absolute;left:-22px;top:3px;width:17px;height:17px;border-radius:50%;background:var(--md-primary);box-shadow:0 0 0 4px var(--md-surface)}
.tl-n{font:700 13px var(--md-font);letter-spacing:.5px;text-transform:uppercase;color:var(--md-primary)}
.tl-d{font:400 15px var(--md-font);color:var(--md-on-surface-variant);display:inline-block}.tl-d::first-letter{text-transform:uppercase}
.tl-card{background:var(--md-scl0);border-radius:18px;padding:14px 16px;margin:8px 0;box-shadow:var(--e1)}
@media (prefers-color-scheme:dark){.tl-card{background:var(--md-scl1)}}
.tl-card header .meta{margin:4px 0 0}
.tl-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tl-title h3{margin:0;font:500 18px/1.3 var(--md-font)}.tl-title .arr{color:var(--gold-ink)}
.tl-card .row{margin-top:10px}
details.legs{margin-top:10px;border-top:1px solid var(--md-outline-variant);padding-top:4px}
details.legs>summary,details.lm>summary,.alts>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font:500 14px var(--md-font);color:var(--md-primary);padding:8px 0}
details.legs>summary::-webkit-details-marker,details.lm>summary::-webkit-details-marker,.alts>summary::-webkit-details-marker{display:none}
details.legs>summary::after,details.lm>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:4px;margin-top:-3px;transition:transform .2s}
details[open].legs>summary::after,details[open].lm>summary::after{transform:rotate(225deg);margin-top:3px}
.alts>summary .ic,details.lm>summary .ic{width:18px;height:18px;margin:0}
.tl-note{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;margin:8px 0;padding:10px 12px;border-radius:12px;background:var(--md-scl2)}
.tl-note .ic{width:18px;height:18px;margin:1px 0 0;flex:none;color:var(--md-on-surface-variant)}
.tl-note.sleep{background:var(--md-primary-container);color:var(--md-on-primary-container)}.tl-note.sleep .ic{color:inherit}
/* overnachtingen */
.tl-card.stay{background:linear-gradient(0deg,var(--md-scl0),var(--md-scl0)) padding-box;border:1.5px solid color-mix(in srgb,var(--gold) 55%,transparent);box-shadow:none}
@media (prefers-color-scheme:dark){.tl-card.stay{background:var(--md-scl1)}}
.tl-card.stay.verblijf{background:color-mix(in srgb,var(--gold) 9%,var(--md-scl0))}
@media (prefers-color-scheme:dark){.tl-card.stay.verblijf{background:color-mix(in srgb,var(--gold) 8%,var(--md-scl1))}}
.bed{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.bed .ic{width:20px;height:20px;margin:0}
.tl-card.arrive .bed{background:#ffe1d6;color:#8a2a05}
@media (prefers-color-scheme:dark){.tl-card.arrive .bed{background:#5c1d05;color:#ffb59a}}
.stepper{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--md-outline-variant);border-radius:20px;padding:0 2px;margin-left:4px;vertical-align:middle}
.stepper .icon-btn{width:32px;height:32px}.stepper span{min-width:64px;text-align:center;font-weight:500;color:var(--md-on-surface)}
.nn{font-weight:500;color:var(--md-on-surface)}
.hotel{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--md-scl2)}
.hotel.generic{background:repeating-linear-gradient(135deg,var(--md-scl2),var(--md-scl2) 10px,var(--md-scl1) 10px,var(--md-scl1) 20px)}
.h-main{display:flex;flex-direction:column;gap:2px;min-width:0}.h-main b{font-weight:500}
.h-price{font:500 18px var(--md-font);text-align:right;white-space:nowrap}.h-price small{display:block;font:400 12px var(--md-font);color:var(--md-on-surface-variant)}
.h-actions{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:10px}
.h-actions a{font:500 13px var(--md-font);text-decoration:none;padding:6px 10px;border-radius:16px;border:1px solid var(--md-outline-variant)}
.h-search{font-size:13px;color:var(--md-on-surface-variant);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.check input{width:20px;height:20px;accent-color:var(--md-primary);padding:0}
.h-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-top:16px}
.h-form label{position:relative;display:block}.h-form label>span{position:absolute;left:12px;top:-8px;padding:0 4px;background:var(--md-scl0);font-size:12px;color:var(--md-on-surface-variant);z-index:1}
@media (prefers-color-scheme:dark){.h-form label>span{background:var(--md-scl1)}}
.h-form .full{grid-column:1/-1}.h-btns{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:560px){.h-form{grid-template-columns:1fr}}
details.lm{margin-top:8px}.lm-body{padding:2px 0 4px}
/* boekingslijst */
.booking{background:var(--md-scl0);border-radius:20px;padding:16px;margin:16px 0;box-shadow:var(--e1)}
@media (prefers-color-scheme:dark){.booking{background:var(--md-scl1)}}
.booking h2{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:500 18px var(--md-font)}.booking h2 .ic{width:22px;height:22px;margin:0;color:var(--md-primary)}
.booking ul{list-style:none;margin:0;padding:0}
.booking li{display:grid;grid-template-columns:28px auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--md-outline-variant)}
.booking li:last-child{border:0}
.booking li.done .bk-t b{text-decoration:line-through;color:var(--md-on-surface-variant)}
.bk-t{min-width:0}.bk-t b{display:block;font-weight:500;font-size:14px}.bk-t small{color:var(--md-on-surface-variant);font-size:12.5px}
.bk-l{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.bk-l a{font:500 13px var(--md-font);text-decoration:none;padding:6px 10px;border-radius:16px;border:1px solid var(--md-outline-variant);white-space:nowrap}
@media(max-width:560px){.booking li{grid-template-columns:28px 1fr}.bk-ic{display:none}.bk-l{grid-column:2;justify-content:flex-start}}
.m-hotel{background:#8a6200}
/* mijn reizen */
.ph{font:400 24px var(--md-font);margin:24px 0 6px}
.trips{list-style:none;padding:0;margin:14px 0}
.trips li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;margin:8px 0;border-radius:16px;background:var(--md-scl0);box-shadow:var(--e1)}
@media (prefers-color-scheme:dark){.trips li{background:var(--md-scl1)}}
.trips b{display:block;font-weight:500}.trips small{color:var(--md-on-surface-variant)}.tr-btns{display:flex;gap:4px;align-items:center}
.empty{text-align:center;padding:40px 16px;color:var(--md-on-surface-variant)}.empty .ic{width:48px;height:48px;margin:0 auto;color:var(--md-outline)}
.about p{margin:6px 0 10px;line-height:1.55}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;background:var(--md-inverse);color:#f0f0f5;padding:12px 18px;border-radius:8px;box-shadow:var(--e3);font-size:14px;max-width:92vw}
@media(max-width:699px){#toast{bottom:96px}}

/* tijdlijn-weergave van de ritten: metrolijn */
.leg{grid-template-columns:48px 18px 1fr;gap:10px}
.lbar{position:relative;background:none!important;border-radius:0}
.lbar::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:4px;border-radius:2px;background:currentColor}
.lbar::after{content:"";position:absolute;left:3px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--md-scl0);border:3px solid currentColor;box-sizing:border-box}
.lbar.m-trein{color:var(--trein)}.lbar.m-hst{color:var(--hst)}.lbar.m-nacht{color:var(--nacht)}.lbar.m-bus{color:var(--bus)}.lbar.m-boot{color:var(--boot)}.lbar.m-vlieg{color:var(--vlieg)}.lbar.m-regio{color:var(--regio)}.lbar.m-lokaal{color:var(--lopen)}
.lbar.m-lokaal::before{background:repeating-linear-gradient(currentColor 0 4px,transparent 4px 8px)}
.xfer{margin-left:58px;background:transparent;border-left:3px dotted var(--rail);border-radius:0;padding:6px 12px}

/* kaart */
.mapbox{background:var(--md-scl0);border-radius:24px;padding:10px;box-shadow:var(--e1)}
@media (prefers-color-scheme:dark){.mapbox{background:var(--md-scl1)}}
.mh{display:none}
.mapwrap{position:relative}
#kaart{height:520px;border-radius:16px;background:#cfe0ec}
@media(max-width:899px){#kaart{height:360px}}
#kaart .sea1{stop-color:#dbe9f3}#kaart .sea2{stop-color:#bcd3e6}
#kaart .grat{fill:none;stroke:#ffffff;stroke-width:.35;opacity:.55}
#kaart .land path{fill:#fbf9f3;stroke:#d5cfc2;stroke-width:.8}
#kaart .cty circle{fill:#9a937f}#kaart .cty text{fill:#6e6858;font-family:var(--md-font);font-weight:500;text-anchor:middle;paint-order:stroke;stroke:#fbf9f3;stroke-width:3px;stroke-linejoin:round;pointer-events:none}
@media (prefers-color-scheme:dark){#kaart{background:#0c1722}#kaart .sea1{stop-color:#13243a}#kaart .sea2{stop-color:#0b1624}#kaart .grat{stroke:#2a3b52}#kaart .land path{fill:#1d232c;stroke:#353d49}#kaart .cty circle{fill:#6b7483}#kaart .cty text{fill:#9aa3b2;stroke:#1d232c}}
#kaart .rt .seg{cursor:pointer}
#kaart .rt .hit{stroke:transparent;stroke-width:16;fill:none}
#kaart .rt .casing{stroke:#fff;stroke-width:8;opacity:.95;filter:url(#lineSh)}
#kaart .rt .route{stroke-width:4.5}
#kaart .rt .seg:hover .route{stroke-width:6.5}
#kaart .rt .dash{stroke-dasharray:6 6}
#kaart .rt.draw .route:not(.dash){stroke-dasharray:100;stroke-dashoffset:100;animation:drawl .9s ease-out forwards;animation-delay:calc(var(--i) * 70ms)}
@keyframes drawl{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){#kaart .rt.draw .route{animation:none;stroke-dasharray:none;stroke-dashoffset:0}}
#kaart .mk circle{stroke:#fff;stroke-width:2.2}
#kaart .mk .pin{stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
#kaart .mk-A .pin{fill:#11845a}#kaart .mk-B .pin{fill:#c4441b}
#kaart .mk-stay circle{fill:var(--gold)}#kaart .mk-stay .sym{fill:#261900}
#kaart .mk-hotel circle{fill:var(--md-primary)}#kaart .mk-night circle{fill:#2b2f70}
#kaart .mk-tr circle{fill:#fff;stroke:var(--md-on-surface);stroke-width:2.4}
#kaart .mk .lb{font-weight:500}
.mapctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden;box-shadow:var(--e2)}
.mapctl button{width:40px;height:40px;border:0;background:var(--md-scl0);color:var(--md-on-surface);font:500 18px var(--md-font);cursor:pointer}
@media (prefers-color-scheme:dark){.mapctl button{background:var(--md-scl3)}}
.mapctl button:hover{background:var(--md-scl2)}.mapctl button[aria-pressed=true]{background:var(--md-primary);color:var(--md-on-primary)}
.maptip{position:absolute;z-index:3;pointer-events:none;background:var(--md-inverse);color:#f0f0f5;font-size:12.5px;padding:6px 10px;border-radius:8px;box-shadow:var(--e2);max-width:280px}
.legend{padding:10px 4px 2px}

/* afdrukken */
@media print{
  nav.tabs,.ts-actions,form.planner,.alts,.mapctl,#live-out,.h-actions .btn,footer,.legend,.mlic,.via-bar,#toast,header .live-badge,#lang{display:none!important}
  body{background:#fff;padding:0}.layout{display:block}.side{position:static}.tripsum{background:#fff;color:#000;border:2px solid #1f4f8f}.tripsum *{color:#000!important}
  .tl-card,.booking{box-shadow:none;border:1px solid #ccc;break-inside:avoid}details>*{display:block}
}

.livewrap{background:var(--md-scl0);border-radius:18px;padding:4px 16px;margin:16px 0 0;box-shadow:var(--e1);border-left:4px solid #11845a}
@media (prefers-color-scheme:dark){.livewrap{background:var(--md-scl1)}}
.livewrap.loading{padding:14px 16px}
.livewrap>summary{cursor:pointer;list-style:none;display:flex;gap:12px;align-items:center;padding:10px 0}
.livewrap>summary::-webkit-details-marker{display:none}
.livewrap>summary .ic{width:22px;height:22px;margin:0;color:#11845a}
.livewrap>summary span{display:flex;flex-direction:column}.livewrap>summary small{color:var(--md-on-surface-variant);font-size:12.5px}
.livewrap .card.live{background:var(--md-scl2)}

/* synchroniseren */
#sync-out{margin:12px 0 4px}
#sync-out .sub{display:flex;gap:8px;align-items:flex-start}
#sync-out .sub .ic{flex:none;width:18px;height:18px;margin-top:1px}
.sync{padding:16px;border-radius:20px;background:var(--md-scl0);box-shadow:var(--e1);border:1px solid var(--md-outline-variant)}
.sync.on{border-color:color-mix(in srgb,var(--md-primary) 35%,transparent);background:color-mix(in srgb,var(--md-primary-container) 35%,var(--md-scl0))}
@media (prefers-color-scheme:dark){.sync{background:var(--md-scl1)}.sync.on{background:color-mix(in srgb,var(--md-primary-container) 30%,var(--md-scl1))}}
.sync-h{display:flex;gap:12px;align-items:flex-start}
.sync-h>.ic{flex:none;width:36px;height:36px;padding:8px;border-radius:12px;background:var(--md-primary-container);color:var(--md-on-primary-container)}
.sync-h b{display:block;font-weight:500}.sync-h small{display:block;color:var(--md-on-surface-variant);margin-top:2px;line-height:1.4}
.sync-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sync-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.sync-code span{color:var(--md-on-surface-variant);font-size:.875rem}
.sync-code code{font:500 1.05rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;padding:6px 12px;border-radius:10px;background:var(--md-surface);border:1px dashed var(--md-outline)}
.sync-in{display:flex;gap:8px;align-items:flex-end;margin-top:14px;padding-top:12px;border-top:1px solid var(--md-outline-variant)}
.sync-in label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--md-on-surface-variant)}
.sync-in input{font:inherit;font-size:1rem;letter-spacing:.04em;padding:10px 12px;border-radius:10px;border:1px solid var(--md-outline);background:var(--md-surface);color:var(--md-on-surface)}
@media print{#sync-out{display:none}}

/* eerlijkheid: bronvermelding en schattingen */
.src{font-size:12px;color:var(--md-on-surface-variant);margin:4px 0 2px;display:flex;gap:6px;align-items:flex-start;line-height:1.4}
.src .ic{flex:none;width:14px;height:14px;margin-top:1px;opacity:.7}
.src.ok{color:var(--md-primary)}
.leg.est .lt b{font-style:italic;font-weight:500}
.ts-legend{font-size:12.5px;color:#cfdcf3;margin:10px 0 0;display:flex;gap:6px;align-items:center;position:relative;z-index:1}
.ts-legend .ic{width:14px;height:14px;flex:none}
.via-h{font-size:12px;color:var(--md-on-surface-variant);margin:6px 0 2px}
.fac{font-size:13px;margin:6px 0;padding:10px 12px;border-radius:12px;background:var(--md-scl1, #eef2f8)}
.fac ul{margin:6px 0;padding-left:18px}
.box.about.ai h3{margin:0 0 6px;font-size:15px;font-weight:500}
.box.about.ai ul{margin:6px 0 0;padding-left:18px}
.box.about.ai li{margin:3px 0}

/* Europese toets in de kopbalk: dunne blauwe lijn en een vage sterrenkring */
header.appbar{border-top:3px solid #1f4f8f;overflow:hidden}
header.appbar::after{content:"";position:absolute;right:-26px;top:-38px;width:120px;height:120px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='%23f5c542' d='M83.00,44.00L84.35,48.15L88.71,48.15L85.18,50.71L86.53,54.85L83.00,52.29L79.47,54.85L80.82,50.71L77.29,48.15L81.65,48.15ZM78.58,60.50L79.93,64.65L84.29,64.65L80.76,67.21L82.11,71.35L78.58,68.79L75.05,71.35L76.40,67.21L72.87,64.65L77.23,64.65ZM66.50,72.58L67.85,76.72L72.21,76.72L68.68,79.29L70.03,83.43L66.50,80.87L62.97,83.43L64.32,79.29L60.79,76.72L65.15,76.72ZM50.00,77.00L51.35,81.15L55.71,81.15L52.18,83.71L53.53,87.85L50.00,85.29L46.47,87.85L47.82,83.71L44.29,81.15L48.65,81.15ZM33.50,72.58L34.85,76.72L39.21,76.72L35.68,79.29L37.03,83.43L33.50,80.87L29.97,83.43L31.32,79.29L27.79,76.72L32.15,76.72ZM21.42,60.50L22.77,64.65L27.13,64.65L23.60,67.21L24.95,71.35L21.42,68.79L17.89,71.35L19.24,67.21L15.71,64.65L20.07,64.65ZM17.00,44.00L18.35,48.15L22.71,48.15L19.18,50.71L20.53,54.85L17.00,52.29L13.47,54.85L14.82,50.71L11.29,48.15L15.65,48.15ZM21.42,27.50L22.77,31.65L27.13,31.65L23.60,34.21L24.95,38.35L21.42,35.79L17.89,38.35L19.24,34.21L15.71,31.65L20.07,31.65ZM33.50,15.42L34.85,19.57L39.21,19.57L35.68,22.13L37.03,26.28L33.50,23.71L29.97,26.28L31.32,22.13L27.79,19.57L32.15,19.57ZM50.00,11.00L51.35,15.15L55.71,15.15L52.18,17.71L53.53,21.85L50.00,19.29L46.47,21.85L47.82,17.71L44.29,15.15L48.65,15.15ZM66.50,15.42L67.85,19.57L72.21,19.57L68.68,22.13L70.03,26.28L66.50,23.71L62.97,26.28L64.32,22.13L60.79,19.57L65.15,19.57ZM78.58,27.50L79.93,31.65L84.29,31.65L80.76,34.21L82.11,38.35L78.58,35.79L75.05,38.35L76.40,34.21L72.87,31.65L77.23,31.65Z'/></svg>") center/contain no-repeat;opacity:.16;pointer-events:none}
@media (prefers-color-scheme:dark){header.appbar{border-top-color:#9cc3ff}header.appbar::after{opacity:.12}}

/* landeninfo */
.cinfo{border-radius:20px;padding:16px;background:var(--md-scl0, #fff);box-shadow:var(--e1);border:1px solid var(--md-outline-variant);margin:12px 0}
@media (prefers-color-scheme:dark){.cinfo{background:var(--md-scl1)}}
.ci-head{display:flex;gap:14px;align-items:center}
.ci-flag{font-size:44px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.ci-head h3{margin:0;font:500 22px/1.2 var(--md-font)}
.ci-clock{color:var(--md-on-surface-variant);font-size:14px;margin-top:2px}
.ci-clock b{color:var(--md-on-surface);font:500 18px var(--md-font);font-variant-numeric:tabular-nums}
.ci-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:14px 0 4px}
.ci-facts div{background:var(--md-surface);border-radius:12px;padding:8px 10px}
.ci-facts span{display:block;font-size:12px;color:var(--md-on-surface-variant)}
.ci-facts b{font-weight:500}
.ci-tip{display:flex;gap:8px;align-items:flex-start;background:color-mix(in srgb,var(--gold) 16%,transparent);border-radius:12px;padding:10px 12px;margin:10px 0 0;font-size:14px}
.ci-tip .ic{flex:none;width:18px;height:18px;color:var(--gold-ink, #7a5900)}
.ci-sub{font-size:12px;color:var(--md-on-surface-variant);margin:10px 0 0}
.phr{margin-top:14px}
.phr h4{margin:0 0 6px;font:500 15px var(--md-font)}
.phr-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.phr-tabs button{font:inherit;font-size:13px;border:1px solid var(--md-outline);background:none;color:inherit;border-radius:999px;padding:4px 12px;cursor:pointer}
.phr-tabs button[aria-pressed="true"]{background:var(--md-primary);border-color:var(--md-primary);color:var(--md-on-primary, #fff)}
.phr ol{list-style:none;margin:0;padding:0}
.phr li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--md-outline-variant)}
.phr li:first-child{border-top:0}
.phr .loc{font:500 16px/1.3 var(--md-font)}
.phr .rom{font-size:13px;color:var(--md-on-surface-variant);font-style:italic}
.phr .mean{font-size:12.5px;color:var(--md-on-surface-variant)}
.phr .say{grid-row:1 / span 3;grid-column:2;width:40px;height:40px;border-radius:50%;border:0;background:var(--md-primary-container);color:var(--md-on-primary-container);cursor:pointer;font-size:18px}
.phr .say:disabled{opacity:.4;cursor:default}

/* vlucht van/naar buiten Europa */
.tl-card.flight-ic{border-left:4px solid var(--md-primary);background:color-mix(in srgb,var(--md-primary-container) 30%,var(--md-scl0, #fff))}
@media (prefers-color-scheme:dark){.tl-card.flight-ic{background:color-mix(in srgb,var(--md-primary-container) 25%,var(--md-scl1))}}
.tl-card.flight-ic p{margin:8px 0}
.gw{display:flex;flex-direction:column;gap:4px;margin:10px 0;font-size:12px;color:var(--md-on-surface-variant);max-width:420px}
.gw select{font:inherit;font-size:14px;padding:8px 10px;border-radius:10px;border:1px solid var(--md-outline);background:var(--md-surface);color:var(--md-on-surface)}

/* SPECIMEN: alles wat geschat is en niet uit een bron of live komt */
.tl-card.travel{position:relative;overflow:hidden}
.tl-card.travel.specimen::before{content:attr(data-stamp);position:absolute;right:-6px;top:38%;transform:rotate(-14deg);font:700 34px/1 var(--md-font);letter-spacing:.18em;color:rgba(186,26,26,.10);border:3px solid rgba(186,26,26,.12);border-radius:10px;padding:4px 14px;pointer-events:none;z-index:0;white-space:nowrap}
.tl-card.travel>*{position:relative;z-index:1}
@media (prefers-color-scheme:dark){.tl-card.travel.specimen::before{color:rgba(255,180,171,.12);border-color:rgba(255,180,171,.14)}}
.tag.spec{background:#ffdad6;color:#93000a;font-weight:700;letter-spacing:.06em}
.tag.ok{background:#c9f2d3;color:#0b5223;font-weight:600}
@media (prefers-color-scheme:dark){.tag.spec{background:#93000a;color:#ffdad6}.tag.ok{background:#0b5223;color:#c9f2d3}}
.vf{font-size:12.5px;color:var(--md-on-surface-variant);margin-top:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vf .spin{width:12px;height:12px}
.tl-card.travel.real{border-left:4px solid #2e7d4f}
.leg.spec .lt b{color:var(--md-on-surface-variant)}
.nt.spec{border-left:3px solid #ba1a1a;padding-left:8px}
.ts-spec{position:relative;z-index:1;margin:10px 0 0;padding:8px 12px;border-radius:12px;background:rgba(255,218,214,.16);border:1px solid rgba(255,218,214,.35);font-size:13px;color:#fff}
.ts-spec b{letter-spacing:.08em;margin-right:4px;color:#ffdad6}
.ts-spec.done{background:rgba(201,242,211,.16);border-color:rgba(201,242,211,.4)}.ts-spec.done b{color:#c9f2d3}
@media print{.tl-card.travel.specimen::before{color:rgba(0,0,0,.12);border-color:rgba(0,0,0,.15)}}

/* partnerlinks en bijdrage */
sup.aff{font-size:9.5px;font-weight:600;letter-spacing:.04em;margin-left:3px;padding:1px 4px;border-radius:4px;background:var(--md-scl2, #e6ebf3);color:var(--md-on-surface-variant);vertical-align:super;text-transform:uppercase}
#support a{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--gold);color:#261900;text-decoration:none;font-weight:500}