/* Vignetshop – huisstijl (werknaam). Tokens bovenaan; geen inline styles (CSP). */
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  --inkt: #0F1B2D;
  --inkt-2: #4A5568;
  --grond: #EBEEF3;
  --wit: #FFFFFF;
  --lijn: #E3E6EC;
  --lijn-2: #C5CBD6;
  --blauw: #1D46C2;
  --blauw-donker: #14318A;
  --blauw-licht: #EAF1FF;
  --navy-2: #1E2E4A;
  --navy-tekst: #C9D3E3;
  --geel: #FFD500;
  --amber-licht: #FFF4D6;
  --amber-tekst: #3D2F00;
  --groen: #0F7A5C;
  --groen-licht: #E3F4EC;
  --rood: #B42318;
  --rood-licht: #FDECEA;
  --radius: 12px;
  --kop-font: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--inkt); background: var(--grond); line-height: 1.55; font-size: 16px; }
img { max-width: 100%; height: auto; }
a { color: var(--blauw); }
a:hover { color: var(--blauw-donker); }
h1, h2, h3 { font-family: var(--kop-font); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--wit); padding: 8px 12px; z-index: 10; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 24px; } }
.smal { max-width: 820px; }
.blok { padding-top: 56px; padding-bottom: 32px; }
.intro { font-size: 1.15rem; color: var(--inkt-2); max-width: 680px; }
.klein { font-size: .85rem; color: var(--inkt-2); }
.midden { text-align: center; }
.mono { font-family: ui-monospace, Menlo, monospace; }
.inline { display: inline; }
[hidden] { display: none !important; }

.demo-balk { background: var(--inkt); color: var(--geel); text-align: center; font-size: .85rem; padding: 6px 16px; }

/* Kop */
.kop { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.kop__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 12px; padding-bottom: 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--inkt); font-family: var(--kop-font); font-weight: 700; font-size: 1.35rem; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.menu a { color: var(--inkt); text-decoration: none; padding: 8px 0; }
.menu a[aria-current] { color: var(--blauw); font-weight: 600; }
.menu a.knop { color: var(--wit); padding: 8px 16px; }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius); background: var(--blauw); color: var(--wit); font: inherit; font-weight: 600; text-decoration: none; border: 2px solid var(--blauw); cursor: pointer; }
.knop:hover { background: var(--blauw-donker); border-color: var(--blauw-donker); color: var(--wit); }
.knop--klein { min-height: 40px; padding: 0 14px; font-size: .95rem; }
.knop--breed { width: 100%; min-height: 54px; font-size: 1.05rem; }
.knop--licht { background: var(--wit); color: var(--inkt); border-color: var(--lijn-2); }
.knop--licht:hover { background: var(--grond); color: var(--inkt); border-color: var(--inkt-2); }
.linkknop { background: none; border: 0; padding: 8px 0; font: inherit; color: var(--inkt); cursor: pointer; text-decoration: underline; }

/* Held */
.held { background: var(--inkt); color: var(--wit); }
.held__rij { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 48px; padding-bottom: 56px; align-items: flex-start; }
.held__tekst { flex: 1 1 400px; min-width: 0; padding-top: 8px; }
.held__intro { color: var(--navy-tekst); font-size: 1.15rem; max-width: 540px; }
.labels { display: flex; flex-wrap: wrap; gap: 8px; }
.label { background: var(--navy-2); border-radius: 99px; padding: 6px 12px; font-size: .85rem; }
.vinkjes { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.vinkjes li { padding-left: 32px; background: url('/img/vink.svg') no-repeat 0 3px; }

/* Bestelformulier */
.bestel { flex: 1 1 440px; min-width: 0; background: var(--wit); color: var(--inkt); border-radius: 16px; padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,.25); display: grid; gap: 18px; scroll-margin-top: 16px; }
@media (min-width: 720px) { .bestel { padding: 28px; } }
.bestel h2 { margin: 0; font-size: 1.5rem; }
.veld { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.veld > label, .veld > legend, .upload label { font-weight: 600; font-size: .95rem; padding: 0; }
.veld__hulp { font-size: .85rem; color: var(--inkt-2); margin: 0; }
.veld__fout { color: var(--rood); font-size: .9rem; font-weight: 500; margin: 0; }
input[type=text], input:not([type]), input[type=email], input[type=date], input[type=password], select, textarea {
  font: inherit; min-height: 48px; padding: 0 12px; border: 1px solid var(--lijn-2); border-radius: 10px; background: var(--wit); color: var(--inkt); width: 100%;
}
textarea { padding: 10px 12px; }
[aria-invalid=true] { border-color: var(--rood) !important; border-width: 2px !important; }
.kenteken { background: var(--geel) !important; border: 2px solid var(--inkt) !important; font-size: 1.3rem !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.kenteken--klein { font-size: 1.1rem !important; }
.twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.twee--breed { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tegel { position: relative; display: grid; gap: 2px; text-align: center; padding: 10px 4px; min-height: 64px; border: 2px solid var(--lijn-2); border-radius: 10px; cursor: pointer; }
.tegel input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tegel:has(input:checked) { border-color: var(--blauw); background: var(--blauw-licht); }
.tegel:has(input:focus-visible) { outline: 3px solid var(--blauw); outline-offset: 2px; }
.tegel__naam { font-weight: 600; }
.tegel__prijs { font-size: .85rem; color: var(--inkt-2); }
.vakjes { display: grid; gap: 10px; }
.vakje { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.vakje input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--blauw); }
.som { margin: 0; border-top: 1px solid var(--lijn); padding-top: 14px; display: grid; gap: 6px; }
.som div { display: flex; justify-content: space-between; gap: 12px; }
.som dt, .som dd { margin: 0; }
.som__totaal { font-size: 1.25rem; font-weight: 700; padding-top: 4px; }
.melding { border-radius: 10px; padding: 12px 16px; font-size: .95rem; margin: 0 0 1em; }
.melding--info { background: var(--blauw-licht); }
.melding--fout { background: var(--rood-licht); color: var(--rood); font-weight: 500; }
.melding--goed { background: var(--groen-licht); color: var(--groen); font-weight: 500; }

/* Inhoud */
.tabelvak { overflow-x: auto; background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; margin: 16px 0; }
.tabel { width: 100%; border-collapse: collapse; min-width: 600px; }
.tabel th, .tabel td { padding: 12px 16px; text-align: left; border-top: 1px solid var(--lijn); vertical-align: top; }
.tabel thead th { background: #EEF1F6; border-top: 0; }
.tabel__eur { display: block; font-weight: 600; }
.tabel__czk { display: block; font-size: .82rem; color: var(--inkt-2); }
.lijst { padding-left: 1.2em; display: grid; gap: 8px; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 16px 0 32px; }
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.kaart h3 { margin-bottom: 4px; }
.kaart__label { display: inline-block; font-size: .8rem; font-weight: 600; padding: 2px 10px; border-radius: 99px; margin-bottom: 8px; }
.kaart--vignet .kaart__label { background: var(--blauw-licht); color: var(--blauw-donker); }
.kaart--geen .kaart__label { background: #EEF1F6; color: var(--inkt-2); }
.kaart--vrijstelling .kaart__label { background: var(--amber-licht); color: var(--amber-tekst); }
.check { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 24px; display: grid; gap: 16px; margin: 24px 0 40px; }
.check h2 { margin: 0; font-size: 1.4rem; }
.uitkomst { border-radius: 10px; padding: 16px; font-weight: 500; }
.uitkomst--vignet { background: var(--blauw-licht); }
.uitkomst--geen { background: #EEF1F6; }
.uitkomst--vrijstelling { background: var(--amber-licht); color: var(--amber-tekst); }
.uitkomst strong { display: block; font-size: 1.15rem; margin-bottom: 4px; }
.faq { display: grid; gap: 12px; }
.faq details, .uitleg { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px 20px; }
.faq summary, .uitleg summary { font-weight: 600; cursor: pointer; }
.faq p { margin: 10px 0 0; color: var(--inkt-2); }
.overzicht { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 20px; margin: 16px 0 24px; }
.kenteken-plaat { display: inline-flex; align-items: stretch; background: var(--geel); border: 2px solid var(--inkt); border-radius: 6px; font-weight: 700; font-size: 1.4rem; letter-spacing: 1px; overflow: hidden; margin-bottom: 16px; }
.kenteken-plaat span { background: #003399; color: var(--wit); font-size: .8rem; padding: 0 8px; display: flex; align-items: flex-end; padding-bottom: 4px; }
.kenteken-plaat { padding-right: 12px; gap: 10px; }
.gegevens { margin: 0 0 12px; display: grid; gap: 8px; }
.gegevens div { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 12px; }
.gegevens dt { color: var(--inkt-2); }
.gegevens dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.betaal { display: grid; gap: 10px; max-width: 480px; }
.tijdlijn { list-style: none; padding: 0; margin: 16px 0 8px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.tijdlijn li { padding-left: 28px; color: var(--inkt-2); position: relative; }
.tijdlijn li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lijn-2); }
.tijdlijn li.klaar { color: var(--inkt); font-weight: 600; }
.tijdlijn li.klaar::before { border: 0; width: 20px; height: 20px; background: url('/img/vink-groen.svg') no-repeat; }

/* Eerlijk-balk en voet */
.eerlijk { background: var(--amber-licht); border-top: 1px solid #F0DFA8; margin-top: 48px; }
.eerlijk__rij { display: flex; gap: 12px; align-items: flex-start; padding-top: 18px; padding-bottom: 18px; color: var(--amber-tekst); }
.eerlijk__rij img { flex: none; margin-top: 2px; }
.eerlijk p { margin: 0; }
.eerlijk a { color: var(--amber-tekst); }
.voet { margin-top: 48px; background: var(--inkt); color: var(--navy-tekst); font-size: .9rem; }
.voet__rij { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-top: 24px; padding-bottom: 24px; }
.voet__naam { color: var(--wit); font-family: var(--kop-font); font-size: 1.15rem; }
.voet__links { display: grid; gap: 4px; }
.voet a { color: var(--wit); }
.voet__vibe { margin: 0; padding: 0 16px 20px; text-align: center; }

/* Beheer */
.beheer .blok { padding-top: 32px; }
.kop--beheer { background: var(--inkt); border: 0; }
.kop--beheer .logo, .kop--beheer .menu a, .kop--beheer .linkknop { color: var(--wit); }
.kop--beheer .menu a[aria-current] { color: var(--geel); }
.tegels-beheer { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.stat { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px; text-decoration: none; color: var(--inkt-2); display: grid; gap: 2px; font-size: .9rem; }
.stat__getal { font-family: var(--kop-font); font-size: 1.8rem; font-weight: 700; color: var(--inkt); }
.stat--spoed { border: 2px solid var(--rood); }
.stat--spoed .stat__getal { color: var(--rood); }
.balk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters a { padding: 6px 12px; border-radius: 99px; background: var(--wit); border: 1px solid var(--lijn); text-decoration: none; color: var(--inkt); font-size: .88rem; }
.filters a[aria-current] { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.tabel--beheer { min-width: 760px; font-size: .93rem; }
.mini-plaat { background: var(--geel); border: 1px solid var(--inkt); border-radius: 4px; padding: 1px 6px; font-weight: 700; white-space: nowrap; }
.badge { display: inline-block; font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: #EEF1F6; color: var(--inkt-2); vertical-align: middle; white-space: nowrap; }
.badge--betaald { background: var(--blauw-licht); color: var(--blauw-donker); }
.badge--ingekocht { background: var(--amber-licht); color: var(--amber-tekst); }
.badge--geleverd { background: var(--groen-licht); color: var(--groen); }
.badge--spoed, .badge--geannuleerd { background: var(--rood-licht); color: var(--rood); }
.demo-knop { margin-top: 16px; }
.inkoop-kop { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 16px 20px; margin: 16px 0; }
.inkoop-kop p { margin: 0; }
.groot { font-size: 1.3rem; }
.set { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.set--spoed { border: 2px solid var(--rood); }
.set h2 { font-size: 1.3rem; }
.set__instellingen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 12px; }
.set__instellingen dt { font-size: .8rem; color: var(--inkt-2); }
.set__instellingen dd { margin: 0; font-weight: 600; }
.kentekens { font-family: ui-monospace, Menlo, monospace; font-size: 1rem; margin-bottom: 8px; background: var(--grond); }
.set__orders { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; }
.upload { margin-top: 32px; }
.upload form { display: grid; gap: 10px; max-width: 520px; }
.mail__tekst { white-space: pre-wrap; font-family: inherit; background: var(--grond); border-radius: 10px; padding: 14px; margin: 0 0 8px; }
.uitleg { margin: 16px 0; }
.uitleg .lijst { margin: 12px 0 0; }

/* ===== Vrolijker: foto's, nieuws, video ===== */
:root { --rood-cz: #D7141A; --zon: #FFB703; }
.held--foto { background: linear-gradient(100deg, rgba(15,27,45,.92) 0%, rgba(15,27,45,.75) 45%, rgba(15,27,45,.35) 100%), url('/img/foto/hero-960.webp') center / cover no-repeat; }
@media (min-width: 961px) { .held--foto { background-image: linear-gradient(100deg, rgba(15,27,45,.92) 0%, rgba(15,27,45,.72) 42%, rgba(15,27,45,.25) 100%), url('/img/foto/hero-1600.webp'); } }
.held--foto .held__rij { padding-top: 64px; padding-bottom: 72px; }
.held--foto .label { background: rgba(255,255,255,.16); backdrop-filter: blur(4px); }
.held--foto .label:first-child { background: var(--rood-cz); }

.paginaheld { color: var(--wit); padding: 96px 0 64px; background: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.25)), url('/img/foto/snelweg-1280.webp') center / cover no-repeat; }
.paginaheld > .wrap > p, .paginaheld__tekst > p { font-size: 1.2rem; max-width: 620px; margin: 0; }

.feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.feit { background: var(--wit); border-radius: 16px; padding: 20px; display: grid; gap: 4px; box-shadow: 0 4px 18px rgba(15,27,45,.08); } /* zoals de witte kaarten op de homepage */
.feit__getal { font-family: var(--kop-font); font-size: 2.4rem; font-weight: 700; line-height: 1; }
.twee-kol { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; }
.tabel--smal { min-width: 0; }
.vinklijst { list-style: none; padding: 0; display: grid; gap: 10px; }
.vinklijst li { padding-left: 30px; background: url('/img/vink-groen.svg') no-repeat 0 3px; }
.tolblok { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; background: var(--wit); border-radius: 20px; padding: 28px; box-shadow: 0 10px 30px rgba(15,27,45,.08); }
.tolblok > div { flex: 1 1 360px; min-width: 0; }
.tolblok__kaart { flex: 0 1 300px; }
.tolblok .knop { margin: 4px 8px 4px 0; }
.bestemmingen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: 20px; }
.bestemming { background: var(--wit); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(15,27,45,.08); }
.bestemming__beeld { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bestemming__tekst { padding: 16px 18px 6px; }
.bestemming__tekst p { color: var(--inkt-2); font-size: .95rem; }

.kop-met-link { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.nieuwskaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 16px; }
.nieuwskaart { background: var(--wit); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(15,27,45,.08); transition: transform .15s ease; }
.nieuwskaart:hover { transform: translateY(-3px); }
.nieuwskaart__link { color: inherit; text-decoration: none; display: block; height: 100%; }
.nieuwskaart__beeld { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.nieuwskaart__tekst { padding: 16px 20px 20px; }
.nieuwskaart time { font-size: .82rem; color: var(--rood-cz); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.nieuwskaart h3 { margin: 6px 0 8px; }
.nieuwskaart p { color: var(--inkt-2); font-size: .95rem; }
.leesmeer { color: var(--blauw); font-weight: 600; }
.leesmeer::after { content: ' →'; }
.bericht h2 { font-size: 1.4rem; margin-top: 1.4em; }
.bericht__beeld { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; margin: 8px 0 24px; }
.cta-blok { margin-top: 32px; background: var(--wit); border-radius: 16px; box-shadow: 0 4px 18px rgba(15,27,45,.08); padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cta-blok p { margin: 0; }
/* als laatste in het blok: 32px (blok) + 24px = 56px grijs onder de kaart, mobiel 40px, zoals onder de voordelen */
.cta-blok:last-child { margin-bottom: 24px; }
@media (max-width: 767px) { .cta-blok:last-child { margin-bottom: 8px; } }

.reisband { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.reisband__beeld { flex: 1 1 360px; min-width: 0; width: 100%; max-width: 520px; border-radius: 20px; transform: rotate(-1.5deg); box-shadow: 0 16px 40px rgba(15,27,45,.18); }
.reisband__tekst { flex: 1 1 320px; min-width: 0; }
.kaart__icoon { float: right; margin: 0 0 8px 12px; border-radius: 10px; }

/* ===== Bestelformulier in stappen ===== */
.bestel__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.stapteller { margin: 0; font-size: .85rem; font-weight: 600; color: var(--blauw); background: var(--blauw-licht); padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.stap { display: grid; gap: 18px; }
.stap + .stap:not([hidden]) { border-top: 1px dashed var(--lijn-2); padding-top: 18px; }
.stap--nieuw { animation: uitschuiven .35s ease-out; }
@keyframes uitschuiven { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stap--nieuw { animation: none; } }
.prijsregel { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--grond); border: 0; border-radius: 12px; padding: 14px 16px; }
.prijsregel__label { font-weight: 600; font-size: .95rem; }
.prijsregel__bedrag { font-family: var(--kop-font); font-size: 1.6rem; font-weight: 700; white-space: nowrap; }

/* ===== Blokken om en om een achtergrondkleur (over de volle breedte) ===== */
:root { --band-wit: #FFFFFF; --band-tint: #EAF1FB; }
main > section.blok { padding-top: 64px; padding-bottom: 64px; box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); }
main > section.blok:nth-child(even) { --band: var(--band-wit); }
main > section.blok:nth-child(odd) { --band: var(--grond); } /* om en om wit en paginakleur; één blok = paginakleur */
/* vaste achtergrond, los van de volgorde (homepage: om en om wit en paginakleur) */
main > section.blok.blok--wit { --band: var(--band-wit); }
main > section.blok.blok--grond { --band: var(--grond); }
main > section.blok > :last-child { margin-bottom: 0; }
.voet { margin-top: 0; }
/* kaarten op een witte band: iets meer contrast */
main > section.blok:nth-child(even) .kaart,
main > section.blok:nth-child(even) .faq details { background: #F6F8FC; }
.logo__accent { color: var(--blauw); }

/* ===== Meerdere landen ===== */
.paginaheld--cz { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.25)), url('/img/foto/snelweg-1280.webp'); }
.paginaheld--si { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.2)), url('/img/foto/hero-si-1600.webp'); }
.paginaheld__knoppen { margin-top: 20px !important; display: flex; flex-wrap: wrap; gap: 10px; }
.kopvlag { vertical-align: -2px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.landkeuze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.landtegel { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 52px; border: 2px solid var(--lijn-2); border-radius: 10px; cursor: pointer; font-weight: 600; }
.landtegel input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.landtegel img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(15,27,45,.12); }
.landtegel:has(input:checked) { border-color: var(--blauw); background: var(--blauw-licht); }
.landtegel:has(input:focus-visible) { outline: 3px solid var(--blauw); outline-offset: 2px; }
.landgroep { display: grid; gap: 18px; }
.tegel--uit { opacity: .45; cursor: not-allowed; }
.menu__land { display: inline-flex; align-items: center; gap: 6px; }
.menu__land img { border-radius: 2px; box-shadow: 0 0 0 1px rgba(15,27,45,.12); }
.tabelkop img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(15,27,45,.12); }
.tabelkop { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 1.35rem; }
.tolblok__foto { border-radius: 14px; object-fit: cover; aspect-ratio: 16 / 9; height: auto; }
.logo img { border-radius: 10px; }
.set__knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .inkoopland { margin-bottom: 32px; }
.bestemmingen, .kaarten { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.paginaheld--hu { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.25)), url('/img/foto/hero-hu-1600.webp'); }
.landkeuze { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.paginaheld--sk { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.2)), url("/img/foto/hero-sk-1600.webp"); }

/* ===== Menu "Landen" (schaalt naar 7 landen) ===== */
.landenmenu { position: relative; }
.landenmenu summary { list-style: none; cursor: pointer; padding: 8px 0; display: inline-flex; align-items: center; gap: 6px; }
.landenmenu summary::-webkit-details-marker { display: none; }
.landenmenu summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.landenmenu[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.landenmenu summary.actief { color: var(--blauw); font-weight: 600; }
.landenmenu__lijst { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; box-shadow: 0 16px 40px rgba(15,27,45,.16); padding: 8px; display: grid; }
.landenmenu__lijst a { padding: 10px 12px !important; border-radius: 8px; }
.landenmenu__lijst a:hover, .landenmenu__lijst a[aria-current] { background: var(--blauw-licht); }
@media (max-width: 600px) { .landenmenu__lijst { left: 0; right: auto; } }
.landkeuze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paginaheld--ch { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.2)), url("/img/foto/hero-ch-1600.webp"); }
.paginaheld--ro { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.2)), url('/img/foto/hero-ro-1600.webp'); }
.paginaheld--bg { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.2)), url('/img/foto/hero-bg-1600.webp'); }
.paginaheld--es { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.2)), url('/img/foto/hero-es-1600.webp'); }
.paginaheld--md { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.2)), url('/img/foto/hero-md-1600.webp'); }
.landkeuze { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .landtegel { padding: 8px 10px; gap: 8px; font-size: .95rem; }
@media (min-width: 480px) { .tegels:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.voet__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; }
@media (min-width: 1024px) { .voet__rij { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.voet__links strong { color: var(--wit); font-family: var(--kop-font); margin-bottom: 4px; }
.voet__blok p { margin: 8px 0 0; }
.juridisch h2 { font-size: 1.3rem; margin-top: 1.6em; }
.juridisch p, .juridisch li { color: var(--inkt); }

/* ===== Chatassistent ===== */
.chat-knop { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 14px; border: 0; border-radius: 99px; background: var(--blauw); color: var(--wit); font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px rgba(15,27,45,.3); }
.chat-knop:hover { background: var(--blauw-donker); }
.chat-knop__icoon { width: 26px; height: 26px; border-radius: 50%; background: var(--wit) url('/img/logo.svg') center / 22px no-repeat; }
.chat-knop--open .chat-knop__tekst::after { content: ' ✕'; }
.chat { position: fixed; right: 16px; bottom: 80px; z-index: 40; width: min(380px, calc(100vw - 32px)); height: min(540px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--wit); border-radius: 18px; box-shadow: 0 20px 60px rgba(15,27,45,.3); overflow: hidden; }
.chat[hidden] { display: none !important; }
.chat__kop { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--inkt); color: var(--wit); font-family: var(--kop-font); }
.chat__sluit { background: none; border: 0; color: var(--wit); font-size: 1.6rem; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; }
.chat__berichten { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--grond); }
.chat__bericht { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: .93rem; line-height: 1.45; }
.chat__bericht p { margin: 0; }
.chat__bericht--bot { align-self: flex-start; background: var(--wit); border: 1px solid var(--lijn); border-bottom-left-radius: 4px; }
.chat__bericht--klant { align-self: flex-end; background: var(--blauw); color: var(--wit); border-bottom-right-radius: 4px; }
.chat__link { display: inline-block; margin: 8px 8px 0 0; font-weight: 600; font-size: .88rem; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; background: var(--grond); }
.chat__chips:empty { display: none; }
.chat__chip { border: 1px solid var(--blauw); color: var(--blauw); background: var(--wit); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: .82rem; cursor: pointer; }
.chat__chip:hover { background: var(--blauw-licht); }
.chat__invoer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--lijn); background: var(--wit); }
.chat__invoer input { flex: 1; min-height: 44px; }
.chat__bezig { color: var(--inkt-2); }
@media (max-width: 480px) { .chat-knop__tekst { display: none; } .chat-knop { padding: 0 13px; } }
.voet__links { align-content: start; gap: 2px; }
.voet__links a { display: flex; align-items: center; min-height: 24px; padding: 2px 0; line-height: 1.4; } /* minimaal 24px hoog: goed aan te tikken */

/* ===== Prijzen per land uitklapbaar (homepage) ===== */
.prijslanden { display: grid; gap: 10px; margin-top: 16px; }
.prijsland { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; }
.prijsland summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-height: 56px; font-weight: 600; }
.prijsland summary::-webkit-details-marker { display: none; }
.prijsland summary img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(15,27,45,.12); flex: none; }
.prijsland__naam { font-family: var(--kop-font); font-size: 1.1rem; }
.prijsland__vanaf { margin-left: auto; color: var(--inkt-2); font-weight: 500; white-space: nowrap; }
.prijsland__vanaf strong { color: var(--inkt); }
.prijsland summary::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--inkt-2); border-bottom: 2px solid var(--inkt-2); transform: rotate(45deg); margin: -4px 4px 0 6px; transition: transform .2s; }
.prijsland[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.prijsland[open] summary { border-bottom: 1px solid var(--lijn); background: var(--blauw-licht); }
.prijsland summary:hover { background: var(--grond); }
.prijsland__inhoud { padding: 4px 16px 16px; }
.prijsland__inhoud .tabelvak { margin: 12px 0; border: 0; }
.prijsland__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .prijsland summary::after { transition: none; } }

/* ===== Landpagina met bestelformulier in de header ===== */
.paginaheld--bestel { padding: 48px 0 56px; }
.paginaheld__rij { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.paginaheld__tekst { flex: 1 1 380px; min-width: 0; padding-top: 24px; }
.paginaheld__tekst h1 { font-size: clamp(2rem, 4vw, 2.9rem); }
.paginaheld--bestel .bestel { flex: 1 1 440px; }

.paginaheld--bestel .bestel { color: var(--inkt); }
@media (min-width: 900px) { .paginaheld--bestel .paginaheld__knoppen .knop:first-child { display: none; } }

/* ===== Winkelmand ===== */
.mandlink { display: inline-flex; align-items: center; gap: 6px; }
.mandlink__icoon { width: 22px; height: 22px; background: url('/img/mand.svg') center / contain no-repeat; }
.mandlink__aantal { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--rood-cz); color: var(--wit); font-size: .78rem; font-weight: 700; }
.mand__raster { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.mand__lijst { flex: 2 1 480px; min-width: 0; }
.mand__regels { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.mand__regel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 14px 16px; }
.mand__vlag { border-radius: 3px; box-shadow: 0 0 0 1px rgba(15,27,45,.12); flex: none; }
.mand__info { flex: 1 1 240px; min-width: 0; display: grid; gap: 3px; font-size: .93rem; }
.mand__info span { color: var(--inkt-2); }
.mand__prijs { font-family: var(--kop-font); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.mand__status { display: grid; gap: 4px; justify-items: end; font-size: .9rem; }
.mand__verwijder { margin: 0; }
.mand__meer { background: var(--wit); border: 1px dashed var(--lijn-2); border-radius: 14px; padding: 18px 20px; }
.mand__meer h2 { font-size: 1.2rem; }
.mand__landen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mand__land { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--lijn-2); border-radius: 10px; background: var(--wit); text-decoration: none; color: var(--inkt); font-weight: 600; font-size: .93rem; }
.mand__land:hover { border-color: var(--blauw); background: var(--blauw-licht); color: var(--inkt); }
.mand__land img { border-radius: 2px; box-shadow: 0 0 0 1px rgba(15,27,45,.12); }
.mand__afrekenen { flex: 1 1 320px; min-width: 0; background: var(--wit); border-radius: 16px; padding: 22px; box-shadow: 0 10px 30px rgba(15,27,45,.1); display: grid; gap: 16px; position: sticky; top: 16px; }
.mand__afrekenen h2 { margin: 0; font-size: 1.4rem; }
.mand__totaal { margin: 0; display: grid; gap: 6px; }
.mand__totaal div { display: flex; justify-content: space-between; gap: 12px; }
.mand__totaal dt, .mand__totaal dd { margin: 0; }
.mand__totaalregel { border-top: 1px solid var(--lijn); padding-top: 8px; font-weight: 700; font-size: 1.1rem; }
@media (max-width: 720px) { .mand__afrekenen { position: static; } }
.paginaheld--tb { background-image: linear-gradient(0deg, rgba(15,27,45,.88), rgba(15,27,45,.35)), url("/img/foto/fr-peage-1280.webp"); }
.paginaheld--fr { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.2)), url("/img/foto/hero-fr-1600.webp"); }
.paginaheld--de { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.2)), url("/img/foto/hero-de-1600.webp"); }
.paginaheld--at { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.2)), url("/img/foto/hero-at-1600.webp"); }
.prijsgroep { margin: 18px 0 4px; font-family: var(--kop-font); font-size: 1.05rem; }

/* ===== Product 2: trajecttol (Oostenrijk) ===== */
.trajecten { border: 1px solid var(--lijn-2); border-radius: 12px; background: var(--grond); }
.trajecten summary { list-style: none; cursor: pointer; padding: 12px 14px; display: grid; gap: 2px; position: relative; padding-right: 40px; }
.trajecten summary::-webkit-details-marker { display: none; }
.trajecten summary::after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--blauw); color: var(--wit); display: grid; place-items: center; font-weight: 700; line-height: 1; }
.trajecten[open] summary::after { content: '−'; }
.trajecten__kop { font-weight: 600; }
.trajecten__sub { font-size: .85rem; color: var(--inkt-2); }
.trajecten > .veld__hulp { padding: 0 14px; }
.trajecten__lijst { display: grid; gap: 8px; padding: 10px 14px 14px; }
.traject { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); gap: 10px; align-items: center; }
.traject label { font-size: .9rem; font-weight: 500; }
.traject select { min-height: 42px; font-size: .9rem; }
@media (max-width: 480px) { .traject { grid-template-columns: 1fr; gap: 4px; } }

/* ===== Oostenrijk: verplicht vignet + extra trajecttol ===== */
.tol-uitleg { margin: 0 0 6px; font-size: .9rem; }
.deelkop { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; }
.deelsub { display: block; font-weight: 400; font-size: .85rem; color: var(--inkt-2); margin-top: 2px; }
.pil { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 99px; }
.pil--verplicht { background: var(--rood-cz); color: var(--wit); }
.pil--extra { background: var(--zon); color: var(--inkt); }
.traject label { display: grid; gap: 1px; }
.traject__route { font-size: .8rem; color: var(--inkt-2); font-weight: 400; }
.prijs-uitsplitsing { margin: 0 0 -8px; font-size: .88rem; color: var(--inkt-2); text-align: right; }

/* Homepage "Goed voorbereid op reis": landknoppen in een strak raster, even breed, vlag links */

/* Indeling in categorieën: menu, homepage, footer */
.landenmenu__groep { display: grid; align-content: start; }
.landenmenu__kop { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--inkt-2); padding: 10px 12px 4px; }
@media (min-width: 901px) { .landenmenu__lijst { grid-template-columns: repeat(3, minmax(190px, auto)); gap: 4px 12px; } }
/* 901-1199 px: drie kolommen (612 px) vallen links buiten beeld; dan twee (responsive-check 2026-11-13) */
@media (min-width: 901px) and (max-width: 1199px) { .landenmenu__lijst { grid-template-columns: repeat(2, minmax(190px, auto)); } }
.categoriekop { margin: 36px 0 4px; font-size: 1.35rem; }
.categoriesub { margin: 0 0 4px; color: var(--inkt-2); }
.voet__tussenkop { margin-top: 14px; }
.critair th img { vertical-align: middle; margin-right: 8px; }
.critair th { white-space: nowrap; }

/* Klantbeoordelingen, partners en betaallogo's */
.sterren { color: #F5B400; letter-spacing: 2px; }
.review blockquote { margin: 0; flex: 1; }
.review blockquote p { margin: 0; }
.review figcaption { font-weight: 600; color: var(--inkt-2); }
.voet__betaal { display: grid; gap: 8px; margin-top: 16px; }
.voet__betaallogos { display: flex; gap: 8px; }
.voet__betaallogos img { height: 40px; width: auto; background: #fff; border-radius: 6px; padding: 3px; }

/* Homepage volgens mockup: korte hero, bestelformulier eronder (overlappend), pluspunten, eenvoudige kaarten */
.held--mockup .held__tekst { padding-top: 72px; padding-bottom: 140px; max-width: 1180px; }
.held--mockup h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.1; max-width: 620px; margin: 0 0 16px; }
.held--mockup .held__intro { max-width: 540px; margin: 0; }
.held__boven { color: var(--geel); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .85rem; margin: 0 0 14px; }
.held__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.knop--geel { background: var(--geel); border-color: var(--geel); color: var(--inkt); }
.knop--geel:hover { background: #F2C600; border-color: #F2C600; color: var(--inkt); }
.bestelvak { position: relative; margin-top: -96px; }
.bestelvak .bestel { box-shadow: 0 20px 50px rgba(15,27,45,.18); }
.bestel__voet { margin: 0; color: var(--inkt-2); }
@media (min-width: 960px) {
  .bestel--breed { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 0; align-items: start; }
  .bestel--breed > *, .bestel--breed .bestel__land, .bestel--breed .bestel__looptijd, .bestel--breed .bestel__keuze, .bestel--breed .bestel__extra { margin-bottom: 16px; }
  .bestel--breed > .bestel__kop { margin-bottom: 20px; }
  .bestel--breed > .bestel__voet { margin-bottom: 0; }
  .bestel--breed .landkeuze { gap: 6px; }
  .bestel--breed .landtegel { flex-direction: row; justify-content: flex-start; gap: 6px; padding: 10px 8px; min-height: 0; font-size: .82rem; border-width: 1.5px; }
  .bestel--breed .landtegel img { width: 18px; height: 12px; flex: none; }
  .bestel--breed .landtegel span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bestel--breed > .bestel__kop, .bestel--breed > .melding, .bestel--breed > .stap:not([data-stap="1"]), .bestel--breed > .bestel__voet { grid-column: 1 / -1; }
  .bestel--breed > .stap[data-stap="1"], .bestel--breed .landgroep:not([hidden]) { display: contents; }
  .bestel--breed:not(.bestel--land) > .stappenbalk { display: none; } /* brede homepage: kolommen zijn de stappen al */
  .bestel--breed .bestel__land { grid-column: 1; grid-row: 2 / span 4; }
  .bestel--breed .bestel__looptijd { grid-column: 2; grid-row: 2 / span 4; }
  .bestel--breed .bestel__looptijd .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bestel--breed .bestel__keuze { grid-column: 3; grid-row: 2; }
  .bestel--breed .bestel__extra { grid-column: 2 / -1; grid-row: 6; }
  .bestel--breed > .prijs-uitsplitsing { grid-column: 3; grid-row: 3; }
  .bestel--breed > .prijsregel { grid-column: 3; grid-row: 4; }
  .bestel--breed > #bestel-knop { grid-column: 3; grid-row: 5; }
  .bestel--breed .landkeuze { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* na stap 1: prijs en knop onderaan, onder de nieuwe velden */
  .bestel--breed > .stap[data-stap="2"] { grid-row: 7; }
  .bestel--breed > .stap[data-stap="3"] { grid-row: 8; }
  .bestel--breed > .bestel__voet { grid-row: 12; }
  .bestel--breed.bestel--verder > .prijs-uitsplitsing { grid-row: 9; }
  .bestel--breed.bestel--verder > .prijsregel { grid-row: 10; }
  .bestel--breed.bestel--verder > #bestel-knop { grid-row: 11; }
}
.usps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.usps li { display: flex; gap: 12px; align-items: flex-start; }
.usps img { flex: none; margin-top: 2px; }
.usps strong { display: block; }
.usps span { color: var(--inkt-2); font-size: .92rem; }
@media (min-width: 960px) {
  .bestel--breed .prijsregel__label { white-space: nowrap; }
  .bestel--breed .bestel__keuze > .veld__hulp { display: none; } /* staat al onderaan het formulier */
}

/* Mobiel menu: uitschuifmenu achter de menuknop (checkbox, werkt zonder JavaScript) */
.menuschakelaar { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.menuknop, .mandlink--mobiel { display: none; }
@media (max-width: 899px) {
  .kop__rij { flex-wrap: wrap; gap: 0 12px; }
  .logo { margin-right: auto; }
  .mandlink--mobiel { display: inline-flex; position: relative; padding: 10px; }
  .mandlink--mobiel .mandlink__aantal { position: absolute; top: 0; right: -4px; min-width: 20px; height: 20px; font-size: .72rem; }
  .menuknop { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--lijn-2); border-radius: 10px; cursor: pointer; font-weight: 600; user-select: none; }
  .menuknop__streep, .menuknop__streep::before, .menuknop__streep::after { display: block; width: 18px; height: 2px; background: var(--inkt); border-radius: 2px; position: relative; transition: transform .2s, background .2s; }
  .menuknop__streep::before, .menuknop__streep::after { content: ''; position: absolute; left: 0; }
  .menuknop__streep::before { top: -6px; }
  .menuknop__streep::after { top: 6px; }
  .menuschakelaar:checked + .menuknop .menuknop__streep { background: transparent; }
  .menuschakelaar:checked + .menuknop .menuknop__streep::before { transform: translateY(6px) rotate(45deg); }
  .menuschakelaar:checked + .menuknop .menuknop__streep::after { transform: translateY(-6px) rotate(-45deg); }
  .menuschakelaar:focus-visible + .menuknop { outline: 3px solid var(--blauw); outline-offset: 2px; }
  .menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin-top: 12px; border-top: 1px solid var(--lijn); }
  .menuschakelaar:checked ~ .menu { display: flex; }
  .kop--beheer .menu { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; border-top-color: rgba(255,255,255,.2); padding-top: 8px; }
  .menu > a, .landenmenu summary { padding: 14px 4px; border-bottom: 1px solid var(--lijn); }
  .landenmenu summary { display: flex; justify-content: space-between; }
  .menu > .mandlink { display: none; }
  .menu a.knop { margin: 14px 0 6px; padding: 12px 16px; justify-content: center; }
  .landenmenu__lijst { position: static; box-shadow: none; border: 0; border-radius: 0; padding: 4px 0 8px; min-width: 0; }
  .landenmenu__groep { padding-bottom: 4px; }
}
@media (max-width: 899px) {
  .kop__rij { flex-wrap: wrap; column-gap: 6px; }
  .menuknop { padding: 10px; }
  .menuknop__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.reviews__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 8px; }
.reviews__teller { color: var(--inkt-2); font-weight: 600; min-width: 48px; text-align: center; }
.review[hidden] { display: none; }
.chat__bericht--bot p { white-space: pre-line; } /* AI-antwoorden met alinea's en opsommingen */

/* Routepagina's (antwoordpagina's) */
.kort-antwoord { background: var(--wit); border-radius: 16px; box-shadow: 0 4px 18px rgba(15,27,45,.08); padding: 20px 24px; margin: 16px 0 24px; } /* witte kaart zoals de voordelen op de homepage */
.kort-antwoord h2 { margin: 0 0 6px; font-size: 1.1rem; }
.kort-antwoord p { margin: 0; }
.route h3 { margin-top: 24px; }
.kopvlag--klein { width: 24px; height: 16px; vertical-align: -2px; }
.routelijst { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.routelijst a { display: block; padding: 12px 16px; border: 1px solid var(--lijn); border-radius: 12px; text-decoration: none; }
.routekaarten { list-style: none; padding: 0; display: grid; gap: 14px; }
.routekaart { border: 1px solid var(--lijn); border-radius: 16px; padding: 16px 20px; }
.routekaart a { font-size: 1.1rem; }
.routekaart p { margin: 6px 0 0; }
.foutlinks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.foutlinks a { display: inline-block; padding: 8px 14px; border: 1px solid var(--lijn); border-radius: 999px; text-decoration: none; }

/* Beheer: statistieken */
.statfilter { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 8px 0 12px; }
.statfilter label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600; }
.statfilter input, .statfilter select { padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 8px; font: inherit; background: var(--wit); }
.statsnel { margin-bottom: 8px; }
.stat__trend { font-size: .82rem; color: #5B6475; }
.stat__trend--op { color: var(--groen); }
.stat__trend--neer { color: var(--rood); }
.stat--winst { background: var(--groen-licht); }
.grafiekvak { background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; padding: 12px; margin-bottom: 24px; }
.grafiek { width: 100%; height: auto; display: block; }
.grafiek .g-lijn { stroke: #E3E7EE; stroke-width: 1; }
.grafiek .g-as { font-size: 12px; fill: #5B6475; }
.grafiek .g-omzet { fill: #BFD3F5; }
.grafiek .g-winst { fill: var(--groen); }
.grafiek g:hover .g-omzet { fill: var(--blauw); }
.grafiek__legenda { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.leg { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.leg--omzet { background: #BFD3F5; }
.leg--winst { background: var(--groen); margin-left: 8px; }
.tabel--getallen td { text-align: right; white-space: nowrap; }
.tabel__totaal th, .tabel__totaal td { background: #EEF1F6; font-weight: 700; }
.uploadvelden { display: grid; gap: 14px; justify-items: start; } .uploadvelden label { display: block; font-weight: 600; margin-bottom: 4px; }
.zoekbalk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 14px; }
.zoekbalk input[type=search] { flex: 1 1 320px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 10px; font: inherit; }
.landfilter { margin-bottom: 10px; }
.landfilter img { vertical-align: -1px; }
/* Beheer: pagina's en inkoop per land */
.paginas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 16px 0 4px; }
.paginas a, .paginas span { min-width: 38px; text-align: center; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--wit); text-decoration: none; color: var(--inkt); }
.paginas [aria-current] { background: var(--inkt); color: var(--wit); border-color: var(--inkt); font-weight: 700; }
.paginas .paginas__uit { color: #9AA3B2; }
.paginas .paginas__gat { border: 0; background: none; min-width: 0; padding: 7px 2px; }
.paginas__info { margin-top: 4px; }
.landtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.landtabs a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--lijn); background: var(--wit); text-decoration: none; color: var(--inkt); font-weight: 600; }
.landtabs a[aria-current] { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.landtabs .landtabs__n { background: var(--blauw-licht); color: var(--inkt); border-radius: 99px; padding: 1px 9px; font-size: .85rem; }
.landtabs a.landtabs--spoed .landtabs__n { background: var(--rood); color: var(--wit); }
.sets-compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.sets-compact .set { margin: 0; }
.tabel--inkoop { min-width: 640px; }
/* Beheer: AI-assistent */
.assistent { max-width: 860px; }
.assistent__gesprek { display: grid; gap: 12px; margin: 16px 0; }
.assistent__bericht { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--lijn); background: var(--wit); }
.assistent__bericht p { margin: 0; white-space: pre-line; }
.assistent__bericht--beheer { background: var(--blauw-licht); justify-self: end; max-width: 85%; }
.assistent__bericht--wacht { color: #5B6475; font-style: italic; }
.assistent__bericht .linkknop { margin-top: 8px; color: var(--blauw); padding: 0; }
.assistent__bestellingen { margin: 10px 0 0; padding-left: 18px; font-size: .9rem; }
.assistent__invoer textarea { width: 100%; padding: 12px; border: 1px solid var(--lijn); border-radius: 12px; font: inherit; }
.assistent__knoppen, .assistent__snel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Beheer: klanten */
.badge--terug { background: var(--groen-licht); color: var(--groen); }
.klantgegevens { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 16px 20px; margin: 0 0 16px; }
.klantgegevens dt { font-size: .8rem; color: #5B6475; }
.klantgegevens dd { margin: 2px 0 0; }
.klantlink { display: block; font-size: .85rem; }
.nbregel { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 6px; }
.vakje--keuze { margin-top: 10px; }
.balk .zoekbalk { flex: 1 1 420px; margin: 0; flex-wrap: nowrap; }
.paginas--nieuws { margin-top: 28px; justify-content: center; }

/* Bestelformulier: stappenbalk, ingeklapte stappen, datum-snelkeuze */
.stappenbalk { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 18px; padding: 0; counter-reset: none; }
.stappenbalk li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: #5B6475; text-align: center; position: relative; }
.stappenbalk li::before { content: ''; position: absolute; top: 13px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: var(--lijn); }
.stappenbalk li:first-child::before { display: none; }
.stappenbalk li.klaar::before, .stappenbalk li.nu::before { background: var(--blauw); }
.stappenbalk__nr { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--lijn); background: var(--wit); color: #5B6475; font-size: .85rem; position: relative; z-index: 1; }
.stappenbalk li.nu { color: var(--blauw); }
.stappenbalk li.nu .stappenbalk__nr { border-color: var(--blauw); background: var(--blauw); color: var(--wit); }
.stappenbalk li.klaar { color: var(--inkt); }
.stappenbalk li.klaar .stappenbalk__nr { border-color: var(--groen); background: var(--groen); color: transparent; }
.stappenbalk li.klaar .stappenbalk__nr::after { content: '✓'; color: var(--wit); position: absolute; inset: 0; display: grid; place-items: center; }
.stap-samenvatting { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--grond); font-size: .95rem; }
.stap-samenvatting__vink { color: var(--groen); font-weight: 700; }
.stap-samenvatting__tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.stap-samenvatting .linkknop { color: var(--blauw); font-weight: 600; padding: 4px 0; min-height: 32px; }
.datum-snel { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.geldig-kader { background: var(--groen-licht); color: var(--inkt); border-radius: 10px; padding: 8px 12px; font-weight: 600; }
@media (max-width: 700px) {
  body.bezig-met-bestellen .chat-knop { padding: 0; width: 48px; min-height: 48px; justify-content: center; opacity: .85; }
  body.bezig-met-bestellen .chat-knop__tekst { display: none; }
}
.tekst-spoed { color: var(--rood); font-weight: 700; }
.mand__spoed { display: block; font-size: .78rem; font-weight: 600; color: var(--rood); }

/* Contactpagina: grote chat + formulier */
.contact { display: grid; gap: 24px; margin: 20px 0; }
@media (min-width: 900px) { .contact { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.contact__chat, .contact__formulier { background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: 20px; }
.contact__chat h2, .contact__formulier h2 { margin-top: 0; }
.chat.chat--inline { position: static; width: 100%; height: 560px; max-height: 70vh; box-shadow: none; border: 1px solid var(--lijn); }
.contact__val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact textarea { width: 100%; padding: 12px; border: 1px solid var(--lijn); border-radius: 12px; font: inherit; }
.menu__teller { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--geel); color: var(--inkt); font-size: .78rem; font-weight: 700; text-align: center; }
.bericht-kaart { margin-bottom: 14px; }
.bericht-kaart__naam { font-size: 1.1rem; margin: 4px 0 8px; }
.bericht-kaart__tekst { white-space: pre-line; }

/* Homepage: voordelen in een eigen kaart; cijfers tussen twee dunne lijnen (in het blok klanten) */
.voordelen { margin-top: 24px; padding-bottom: 24px; } /* kaart en schaduw op de grijze achtergrond; daaronder de autootje-strook */
.voordelen__kaart { background: var(--wit); border-radius: 16px; box-shadow: 0 4px 18px rgba(15,27,45,.08); padding: 24px; }
.tellers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; padding: 24px 0; margin: 24px 0 32px; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.teller { text-align: center; display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
.teller:nth-child(even) { border-left: 1px solid var(--lijn); }
@media (min-width: 700px) {
  .tellers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .teller + .teller { border-left: 1px solid var(--lijn); }
}
.teller__getal { font-family: var(--kop-font); font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; color: var(--blauw); line-height: 1.1; font-variant-numeric: tabular-nums; }
.teller__tekst { font-size: .9rem; color: #5B6475; }
.voordelen .usps { margin: 0; grid-template-columns: 1fr; }
@media (min-width: 700px) { .voordelen .usps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .voordelen .usps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .voordelen__kaart { padding: 20px 16px; } }

/* Homepage: rekenhulp (compacte donkere strook) */
.rekenhulp { margin-top: 24px; }
.rekenhulp__vak { background: #0b1834; color: var(--wit); border-radius: 16px; padding: 28px 32px; display: grid; gap: 20px 40px; align-items: center; }
@media (min-width: 960px) { .rekenhulp__vak { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } }
.rekenhulp__label { margin: 0 0 6px; color: #f5c518; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rekenhulp h2 { font-size: 1.75rem; margin: 0 0 8px; color: var(--wit); }
.rekenhulp__tekst p:last-child { margin: 0; color: var(--navy-tekst); }
.rekenhulp .planner__form { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.rekenhulp .planner__velden { display: contents; }
.rekenhulp .planner__naar { grid-column: 1 / -1; }
.rekenhulp .planner__velden label { color: var(--wit); }
.rekenhulp .planner__velden input { border: 0; min-height: 48px; }
.rekenhulp .planner__velden input:focus { box-shadow: 0 0 0 3px #f5c518; }
.rekenhulp .veld__fout { color: #FFB4AB; }
.rekenhulp .knop { background: #f5c518; border-color: #f5c518; color: #0b1834; white-space: nowrap; }
.rekenhulp .knop:hover { background: #E3B500; border-color: #E3B500; color: #0b1834; }
.rekenhulp .knop:focus-visible { outline: 3px solid var(--wit); outline-offset: 2px; }
@media (max-width: 700px) {
  .rekenhulp__vak { padding: 24px 20px; }
  .rekenhulp .planner__form { grid-template-columns: 1fr; }
  .rekenhulp .knop { width: 100%; }
}

/* Routeplanner */
.planner__form { margin: 16px 0 8px; }
.planner__populair { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 16px; }
.planner__chip { display: inline-block; padding: 5px 12px; border: 1px solid var(--lijn); border-radius: 999px; text-decoration: none; font-size: .92rem; }
.planner__chip:hover { border-color: var(--blauw); }
.planner__kop { margin-top: 28px; scroll-margin-top: 90px; }
.planroute { border: 1px solid var(--lijn); border-radius: 16px; padding: 16px 20px; margin: 16px 0; background: var(--wit); }
.planroute h3 { margin-top: 0; }
.planroute h4 { margin: 16px 0 8px; font-size: 1rem; }
.planroute__keten { list-style: none; padding: 0; margin: 8px 0 12px; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
.planroute__keten li + li::before { content: "→"; margin-right: 4px; color: #5B6475; }
.planland { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: #EEF1F5; font-size: .92rem; font-weight: 600; }
.planland--vignet { background: var(--blauw-licht); }
.planland img { border-radius: 2px; }
.planbestel { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.planbestel__item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--lijn); border-radius: 12px; }
.planbestel__item--nodig { border-color: var(--blauw); }
.planbestel__voor { display: block; margin-top: 2px; }
.planlabel { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #EEF1F5; color: #3A4252; vertical-align: 1px; }
.planlabel--nodig, .planlabel--vignet { background: var(--blauw); color: #fff; }
.planlabel--handig, .planlabel--tol { background: #FFF1D6; color: #7A4B00; }
.planlabel--geen { background: var(--groen-licht); color: #1D5E33; }
.planroute__landen { margin-top: 12px; }
.planroute__landen summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.planstap { border-top: 1px solid var(--lijn); padding: 8px 0; }
.planstap p { margin: 4px 0; }
@media (max-width: 560px) {
  .planbestel__item { flex-direction: column; align-items: stretch; }
  .planbestel__item .knop { text-align: center; }
  .planroute { padding: 14px; }
}
.planner__velden { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 12px; }
.planner__velden--extra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.planner__velden .veld { margin: 0; }
.planner__velden label { display: block; font-weight: 700; margin-bottom: 6px; }
.planner__velden input, .planner__velden select { width: 100%; min-width: 0; padding: 12px 14px; font: inherit; border: 2px solid var(--lijn); border-radius: 12px; background: var(--wit); }
.planner__velden input:focus, .planner__velden select:focus { border-color: var(--blauw); outline: none; }
.planner__vink label { font-weight: 400; display: flex; gap: 8px; align-items: center; margin-top: 30px; }
.planner__vink input { width: auto; }
.planreis th[scope="row"] { font-weight: 600; }
.planreis__rol { display: block; font-weight: 400; }
.planreis__reden { display: block; font-weight: 400; font-size: .85rem; color: #7A4B00; margin-top: 2px; }
.planreis--later td, .planreis--later th { color: #5B6475; }
.planreis tfoot th, .planreis tfoot td { border-top: 2px solid var(--lijn); }
.planmand { background: var(--blauw-licht); border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
@media (max-width: 700px) {
  .planner__velden, .planner__velden--extra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .planner__naar { grid-column: 1 / -1; }
  .planner__vink label { margin-top: 0; }
}
@media (max-width: 560px) {
  .planreis thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .planreis, .planreis tbody, .planreis tfoot { display: block; width: 100%; }
  .planreis tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
  .planreis th, .planreis td { display: block; padding: 0; border: 0; }
  .planreis th[scope="row"] { grid-column: 1 / -1; }
  .planreis td:last-child { text-align: right; font-weight: 700; }
  .planreis tfoot tr { border-bottom: 0; }
  .planreis tfoot th { grid-column: 1; }
}

/* Routeplanner: elk blok een eigen, duidelijke kleur */
.planroute { box-shadow: 0 2px 10px rgba(16, 24, 40, .06); }
.planroute .kort-antwoord { background: #DCE8FF; border-left: 5px solid var(--blauw); }
.planvak { border-radius: 14px; padding: 14px 16px; margin: 14px 0; border-left: 5px solid transparent; }
.planvak h4 { margin-top: 0; }
.planvak--reis { background: #FFF6D9; border-left-color: #E8B400; }
.planvak--reis .tabelvak, .planvak--reis .tabel { background: var(--wit); border-radius: 10px; }
.planvak--apart { background: #FFEBDD; border-left-color: #F07C2A; }
.planvak--apart .planbestel__item { background: var(--wit); }
.planvak--landen { background: #EEF1F5; border-left-color: #8A94A6; }
.planvak--landen .planstap { border-top-color: #D5DAE2; }
.planmand { background: #C9DBFF; border-left: 5px solid var(--blauw); }
.planmand input, .planmand select { background: var(--wit); }
.planmand .planner__velden { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 560px) { .planvak { padding: 12px; } }
@media (max-width: 560px) { .planmand .planner__velden { grid-template-columns: 1fr; } }

/* Wintersport Oostenrijk */
.paginaheld--winter { background-image: linear-gradient(0deg, rgba(15,27,45,.85), rgba(15,27,45,.25)), url("/img/foto/at-winter-1280.webp"); }
.gebieden { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.gebied { background: var(--wit); border-radius: 18px; box-shadow: 0 8px 24px rgba(15,27,45,.08); padding: 16px 18px; display: flex; flex-direction: column; } /* zoals de bestemmingen */
.gebied h3 { margin: 2px 0 4px; }
.gebied p { margin: 4px 0; }
.gebied a { margin-top: auto; padding-top: 8px; font-weight: 600; }
.gebied__regio { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5B6475; }
.gebied__plaatsen { color: #3A4252; }
.checklist { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 768px) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checklist__groep { margin: 0; border-radius: 16px; background: var(--wit); box-shadow: 0 4px 18px rgba(15,27,45,.08); } /* witte, uitklapbare kaart */
.checklist__groep legend:not(.sr) { font-weight: 700; font-size: 1.05rem; float: left; width: 100%; margin-bottom: 6px; } /* :not(.sr): de verborgen legend op /wintersport-oostenrijk moet 1px blijven, anders horizontaal scrollen */
.checklist__item { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; cursor: pointer; clear: both; }
.checklist__item input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--groen); }
.checklist__item input:checked + span { text-decoration: line-through; color: #5B6475; }
.checklist__knoppen { margin-top: 14px; }
@media print {
  header, footer, .paginaheld, .chat-knop, #chat, .checklist__knoppen, main > section:not(#checklist) { display: none !important; }
  .checklist__groep { background: none !important; border: 1px solid #999 !important; break-inside: avoid; }
  .checklist__plus, .checklist__balk { display: none !important; }
}

/* Homepage: wintersportband (alleen september t/m april) */
.winterband { margin-top: 28px; border-radius: 20px; overflow: hidden; color: #fff; background-color: #1B2A44; background-image: linear-gradient(90deg, rgba(15,27,45,.92) 0%, rgba(15,27,45,.7) 55%, rgba(15,27,45,.25) 100%), url("/img/foto/at-winter-1280.webp"); background-size: cover; background-position: center; }
.winterband__tekst { padding: 32px; max-width: 720px; }
.winterband + .klanten { margin-top: 56px; } /* homepage: grijze ruimte onder de wintersport-band, zoals onder de voordelen */
@media (max-width: 767px) { .winterband + .klanten { margin-top: 40px; } }
.winterband h2 { color: #fff; margin: 4px 0 10px; }
.winterband p { color: #E8EEF7; }
.winterband__boven { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #FFD25A !important; margin: 0; }
.winterband__knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
@media (max-width: 560px) { .winterband__tekst { padding: 22px 18px; } .winterband__knoppen .knop { width: 100%; text-align: center; } }
.inkoopadressen__sub { display: block; font-weight: 400; }
.inkoopadressen td, .inkoopadressen th { vertical-align: top; }
.inkoopadres h3 { margin-top: 0; display: flex; gap: 8px; align-items: center; }
.inkoopadres p { overflow-wrap: anywhere; }

/* RDW-controle bij het kenteken */
.rdw { border-radius: 12px; padding: 10px 14px; margin: 4px 0 10px; border-left: 5px solid var(--lijn); background: #F4F6F9; }
.rdw p { margin: 4px 0; }
.rdw--goed { border-left-color: var(--groen); background: #EAF6EF; }
.rdw--fout { border-left-color: var(--rood); background: #FDECEC; color: #7A1C1C; }
.rdw__melding--fout { color: #9B1C1C; font-weight: 600; }
.rdw__melding--let { color: #7A4B00; }
.rdw__voorstel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rdw-akkoord { margin: 4px 0 10px; }
.rdw__past { color: #1D5E33; font-weight: 600; }

/* Beheer: mailbox (demo-mails) */
.mailbox { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; min-height: 70vh; }
.mailbox__mappen { background: var(--grond); border-bottom: 1px solid var(--lijn); padding: 12px; }
.mailbox__mappen nav { display: flex; gap: 4px; overflow-x: auto; }
.mailbox__map { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 8px; color: var(--inkt); text-decoration: none; white-space: nowrap; font-size: .92rem; }
.mailbox__map:hover { background: var(--lijn); }
.mailbox__map[aria-current="page"] { background: var(--blauw-licht); color: var(--blauw-donker); font-weight: 600; }
.mailbox__aantal { font-size: .8rem; color: var(--inkt-2); }
.mailbox__demo { font-size: .8rem; color: var(--inkt-2); margin: 0 0 10px; }
.mailbox__lijst { min-width: 0; border-bottom: 1px solid var(--lijn); }
.mailbox__lijst ul { list-style: none; margin: 0; padding: 0; max-height: 75vh; overflow-y: auto; }
.mailbox__zoek { padding: 10px; border-bottom: 1px solid var(--lijn); }
.mailbox__zoek input { width: 100%; padding: 8px 12px; border: 1px solid var(--lijn-2); border-radius: 999px; font: inherit; font-size: .9rem; background: var(--grond); }
.mailbox__leeg { color: var(--inkt-2); padding: 20px; margin: 0; }
.mailbox__leeg--groot { text-align: center; padding-top: 25vh; }
.mailregel { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; border-left: 3px solid transparent; }
.mailregel:hover { background: var(--grond); }
.mailregel--open { background: var(--blauw-licht); border-left-color: var(--blauw); }
.mailregel__avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-2); color: var(--wit); font-weight: 700; font-size: .8rem; }
.mailregel__avatar--intern { background: var(--geel); color: var(--inkt); }
.mailregel__inhoud { min-width: 0; flex: 1; display: grid; gap: 2px; }
.mailregel__boven { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; }
.mailregel__aan { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailregel__boven time { color: var(--inkt-2); white-space: nowrap; font-size: .8rem; }
.mailregel__onderwerp, .mailregel__voorbeeld { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.mailregel__voorbeeld { color: var(--inkt-2); font-size: .82rem; }
.mailbox__lezen { min-width: 0; padding: 20px; }
.mailbox__terug { display: inline-block; margin-bottom: 12px; font-size: .9rem; }
.mailbox__onderwerp { font-size: 1.35rem; margin: 0 0 16px; overflow-wrap: anywhere; }
.mailkop { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.mailkop p { margin: 0; overflow-wrap: anywhere; }
.mailkop__adressen { flex: 1 1 180px; min-width: 0; }
.mailkop__tijd { color: var(--inkt-2); flex-basis: 100%; padding-left: 48px; }
@media (min-width: 900px) { .mailkop__tijd { flex-basis: auto; padding-left: 0; } }
.mailkop__bestelling { margin: 8px 0 0 48px; }
.mailbody { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin: 20px 0; padding-top: 20px; border-top: 1px solid var(--lijn); max-width: 68ch; }
.mailbijlage { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--lijn); border-radius: 10px; font-size: .9rem; max-width: 100%; overflow-wrap: anywhere; }
.mailbijlage__icoon { flex: none; background: var(--rood); color: var(--wit); font-size: .7rem; font-weight: 700; padding: 6px 7px; border-radius: 6px; }
/* Mobiel: lijst of geopende mail, niet allebei */
@media (max-width: 899px) {
  .mailbox--lezen .mailbox__mappen, .mailbox--lezen .mailbox__lijst { display: none; }
  .mailbox:not(.mailbox--lezen) .mailbox__lezen { display: none; }
}
@media (min-width: 900px) {
  .mailbox { grid-template-columns: 190px 340px minmax(0, 1fr); }
  .mailbox__mappen { border-bottom: 0; border-right: 1px solid var(--lijn); }
  .mailbox__mappen nav { flex-direction: column; overflow: visible; }
  .mailbox__lijst { border-bottom: 0; border-right: 1px solid var(--lijn); }
  .mailbox__terug { display: none; }
  .mailbox__lezen { padding: 24px 28px; max-height: 80vh; overflow-y: auto; }
}

/* Homepage: wat kun je bij ons regelen (drie diensten en de vignetlanden) */
.regeltegels { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
@media (min-width: 768px) { .regeltegels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.regeltegel { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--wit); color: var(--inkt); text-decoration: none; }
.regeltegel--uitgelicht { border-color: var(--blauw); background: var(--blauw-licht); }
a.regeltegel:hover { border-color: var(--blauw); }
.regeltegel img { margin-bottom: 4px; }
.regeltegel__naam { font-size: 1.1rem; }
.regeltegel__tekst { color: var(--inkt-2); font-size: .95rem; }
.regeltegel__prijs { margin-top: auto; padding-top: 6px; color: var(--inkt-2); }
.regeltegel__prijs strong { color: var(--inkt); }
.regeltegel__links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; font-weight: 600; }
.regelen__landenkop { margin-top: 40px; }
.regelen__landenkop h3 { margin: 0; font-size: 1.2rem; }
.landlinks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .landlinks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .landlinks { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.landlink { display: flex; align-items: center; gap: 10px; height: 100%; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--wit); color: var(--inkt); text-decoration: none; }
.landlink:hover { border-color: var(--blauw); }
.landlink img { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15,27,45,.12); }
.landlink span { min-width: 0; }
.landlink strong, .landlink small { display: block; }
.landlink small { color: var(--inkt-2); font-size: .85rem; }

/* Homepage: zo werkt het (stappen) met de uitlegvideo ernaast */
.werkwijze { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .werkwijze { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.werkwijze__stappen h2 { margin-top: 0; }
.stappen { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 20px; counter-reset: stap; }
.stappen li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; counter-increment: stap; }
.stappen li::before { content: counter(stap); grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blauw); color: var(--wit); font-family: var(--kop-font); font-weight: 700; }
.stappen h3 { margin: 5px 0 4px; font-size: 1.1rem; }
.stappen p { color: var(--inkt-2); margin: 0; }
.werkwijze__video video { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--inkt); }
.werkwijze__video .klein { margin: 10px 0 0; }

/* Homepage: klanten (reviews, cijfers en partners in één wit blok) */
.reviews { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 14px; }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review { margin: 0; background: var(--grond); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; margin-top: 40px; text-align: center; }
.partners__label { margin: 0; font-size: .85rem; font-weight: 600; color: var(--inkt-2); }
.partners__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; }
.partners__logos img { height: 40px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.partners__logos img:hover { filter: none; opacity: 1; }

/* Homepage: speelse strook met een rijdend autootje onder de voordelen (decoratie, views/partials/autootje.ejs).
   Zie de regel "alle stroken" hieronder voor breedte, hoogte en zachte randen. */
.autootje { background: var(--grond); }
.autootje__auto { offset-path: path("M-60 215 C 140 215, 200 140, 360 150 S 560 235, 720 205 S 940 120, 1100 150 S 1320 225, 1500 190"); offset-rotate: auto; animation: autootje-rijden 16s linear infinite; }
@keyframes autootje-rijden { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .autootje__auto { animation: none; offset-distance: 50%; } }
/* Homepage: getekend beeld met een vlakkere weg (LEESMIJ bij homepage-strook-chatgpt.zip); de landstroken houden het pad hierboven */
.autootje .autootje__auto { offset-path: path("M-60 206 C 120 202, 300 212, 480 210 S 760 213, 900 214 S 1120 214, 1250 212 S 1460 208, 1500 208"); animation-duration: 18s; }
.autootje__rand { stop-color: var(--grond); } /* bovenrand: 18 eenheden vervaging naar de achtergrond */
.autootje__vak { position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* zachte zijranden voor beeld én weg samen */
.autootje__beeld { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.autootje .autootje__vak svg { position: relative; -webkit-mask-image: none; mask-image: none; }

/* Landpagina's (vignet): hero zoals de homepage met de brede bestelkaart eronder (views/partials/land/held.ejs) */
.paginaheld--cz { --heldfoto: url('/img/foto/snelweg-1280.webp'); }
.paginaheld--si { --heldfoto: url('/img/foto/hero-si-1600.webp'); }
.paginaheld--hu { --heldfoto: url('/img/foto/hero-hu-1600.webp'); }
.paginaheld--sk { --heldfoto: url("/img/foto/hero-sk-1600.webp"); }
.paginaheld--ch { --heldfoto: url("/img/foto/hero-ch-1600.webp"); }
.paginaheld--ro { --heldfoto: url('/img/foto/hero-ro-1600.webp'); }
.paginaheld--bg { --heldfoto: url('/img/foto/hero-bg-1600.webp'); }
.paginaheld--md { --heldfoto: url('/img/foto/hero-md-1600.webp'); }
.paginaheld--at { --heldfoto: url("/img/foto/hero-at-1600.webp"); }
.paginaheld--land { padding: 72px 0 140px; background-image: linear-gradient(100deg, rgba(15,27,45,.92) 0%, rgba(15,27,45,.75) 45%, rgba(15,27,45,.35) 100%), var(--heldfoto); }
@media (min-width: 961px) { .paginaheld--land { background-image: linear-gradient(100deg, rgba(15,27,45,.92) 0%, rgba(15,27,45,.72) 42%, rgba(15,27,45,.25) 100%), var(--heldfoto); } }
.paginaheld--land .paginaheld__tekst { padding-top: 0; }
.paginaheld--land h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.1; max-width: 720px; margin: 0 0 16px; }
.paginaheld--land .held__boven { font-size: .85rem; max-width: none; margin: 0 0 14px; }
.paginaheld--land .held__intro { font-size: 1.15rem; max-width: 540px; margin: 0; }
.landheld { background: var(--grond); } /* kaart, schaduw en landstrook op grijs, zoals bij de voordelen */
.landheld .bestelvak { padding-bottom: 24px; }
.bestel__uitleg { display: none; }
@media (min-width: 960px) {
  .bestel--land { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.1fr); } /* geen landtegels: uitleg smaller dan op de homepage */
  .bestel--land .prijsregel__label { white-space: normal; } /* langer label dan op de homepage */
  .bestel--land > .stappenbalk { grid-column: 1 / -1; grid-row: 2; margin-bottom: 20px; }
  .bestel--land > .bestel__uitleg { display: block; grid-column: 1; grid-row: 3 / span 4; color: var(--inkt-2); }
  .bestel--land > .bestel__uitleg p { margin: 0 0 12px; }
  .bestel--land .bestel__looptijd { grid-row: 3 / span 4; }
  .bestel--land .bestel__keuze { grid-row: 3; }
  .bestel--land > .prijs-uitsplitsing { grid-row: 4; }
  .bestel--land > .prijsregel { grid-row: 5; }
  .bestel--land > #bestel-knop { grid-row: 6; }
  .bestel--land .bestel__extra { grid-column: 1 / -1; grid-row: 7; } /* Oostenrijk: trajecten als volle rij */
  .bestel--land > .stap[data-stap="2"] { grid-row: 8; }
  .bestel--land > .stap[data-stap="3"] { grid-row: 9; }
  .bestel--land.bestel--verder > .prijs-uitsplitsing { grid-row: 10; }
  .bestel--land.bestel--verder > .prijsregel { grid-row: 11; }
  .bestel--land.bestel--verder > #bestel-knop { grid-row: 12; }
  .bestel--land > .bestel__meer { display: none; } /* staat links in de uitleg */
}
.pijllink { font-weight: 600; text-decoration: none; } /* rustige link, bv. "Naar het bestelformulier ↑" */
.pijllink:hover { text-decoration: underline; }
/* "Meer vignetten?" met rechts de link naar /prijzen#land; smal onder elkaar en gecentreerd */
.bestel__meer--link { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 24px; text-align: center; }
.bestel__meer--link > span { flex: 1 1 320px; }
.bestel__prijzenlink { white-space: nowrap; }
.feiten + p { margin-top: 20px; } /* regel onder de regelkaarten (bv. wintersport op /oostenrijk) */

/* Vignet-landpagina's: vragen als uitklapbare items (views/partials/landvragen.ejs met uitklappen), links uitgelijnd, max. 800px breed */
.landvragen > .intro, .landvragen > .klein, .vragenlijst { max-width: 800px; }
.vragenlijst { display: grid; gap: 10px; margin: 20px 0 24px; }
.vraag { background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; }
.vraag summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 12px 18px; cursor: pointer; list-style: none; border-radius: 12px; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary h3 { margin: 0; font-size: 1.02rem; }
.vraag summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blauw-licht); color: var(--blauw); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.vraag[open] summary::after { content: '−'; }
.vraag > p { margin: 0; padding: 0 18px 16px; color: var(--inkt-2); }

/* Vignet-landpagina's: voertuigkaarten in de stijl van de homepage (partials/land/kaarten.ejs en de voertuigcheck op /tsjechie) */
main > section.blok .kaarten--land .kaart { background: var(--wit); border: 0; border-radius: 16px; box-shadow: 0 4px 18px rgba(15,27,45,.08); margin-bottom: 0; }
.kaarten--land { gap: 16px; }
.kaarten--land .kaart__icoon { float: none; display: block; margin: 0 0 12px; border-radius: 0; }
.kaarten--land .kaart__label, .kaarten--land .kaart--vignet .kaart__label, .kaarten--land .kaart--geen .kaart__label, .kaarten--land .kaart--vrijstelling .kaart__label { display: block; background: none; padding: 0; border-radius: 0; margin: 0 0 4px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--inkt-2); }
.kaarten--land .kaart .kaart__label--verplicht { color: var(--blauw-donker); } /* "Verplicht" valt op */
.kaarten--land .kaart h3 { margin: 0 0 6px; }
.kaarten--land .kaart p:last-child { margin-bottom: 0; }

/* Vignet-landpagina's: rijdende landstrook onder het formulier (views/partials/land/strook.ejs, partials in views/partials/stroken/).
   Zelfde opbouw als de homepage-strook: getekend beeld als <img> (public/img/stroken/<naam>-1440/-2880.webp, uit landen-stroken.zip),
   daarover de SVG met bovenrand, weg en voertuig; het voertuig rijdt over dezelfde lijn als de weg (wegen.txt), 18 s per rondje. */
.landstrook { background: var(--grond); }
.landstrook .autootje__auto { animation-duration: 18s; }
.landstrook .autootje__vak svg { position: relative; -webkit-mask-image: none; mask-image: none; }
.landstrook--zwitserland-zomer .autootje__auto { offset-path: path("M-60 204 C 120 200, 300 212, 480 210 S 760 215, 900 215 S 1200 211, 1330 203 S 1460 199, 1500 199"); }
.landstrook--zwitserland-winter .autootje__auto { offset-path: path("M-60 204 C 120 200, 300 212, 480 210 S 760 215, 900 215 S 1200 211, 1330 203 S 1460 199, 1500 199"); }
.landstrook--oostenrijk-zomer .autootje__auto { offset-path: path("M-60 204 C 120 200, 300 212, 480 210 S 760 214, 900 214 S 1120 217, 1250 217 S 1460 209, 1500 208"); }
.landstrook--oostenrijk-winter .autootje__auto { offset-path: path("M-60 204 C 120 200, 300 212, 480 210 S 760 214, 900 214 S 1120 217, 1250 217 S 1460 209, 1500 208"); }
.landstrook--slowakije-zomer .autootje__auto { offset-path: path("M-60 204 C 120 200, 300 212, 480 210 S 760 214, 900 214 S 1120 217, 1250 217 S 1460 209, 1500 208"); }
.landstrook--slowakije-winter .autootje__auto { offset-path: path("M-60 204 C 120 200, 300 212, 480 210 S 760 214, 900 214 S 1120 217, 1250 217 S 1460 209, 1500 208"); }
.landstrook--tsjechie .autootje__auto { offset-path: path("M-60 190 C 120 186, 260 204, 420 206 S 760 209, 980 207 S 1240 204, 1360 194 S 1460 188, 1500 188"); }
.landstrook--italie .autootje__auto { offset-path: path("M-60 204 C 120 200, 300 212, 480 210 S 760 215, 900 215 S 1200 211, 1330 203 S 1460 199, 1500 199"); }
.landstrook--hongarije .autootje__auto { offset-path: path("M-60 204 C 120 200, 300 212, 480 210 S 760 214, 900 214 S 1120 217, 1250 217 S 1460 209, 1500 208"); }
.landstrook--slovenie .autootje__auto { offset-path: path("M-60 205 C 120 201, 300 210, 480 213 S 760 217, 900 217 S 1120 217, 1250 216 S 1460 212, 1500 212"); }
.landstrook--duitsland .autootje__auto { offset-path: path("M-60 205 C 120 201, 300 212, 480 218 S 700 221, 900 219 S 1120 217, 1250 216 S 1460 212, 1500 212"); }
.landstrook--frankrijk .autootje__auto { offset-path: path("M-60 205 C 120 201, 300 210, 480 213 S 760 217, 900 217 S 1120 217, 1250 216 S 1460 212, 1500 212"); }
.landstrook--roemenie .autootje__auto { offset-path: path("M-60 204 C 120 200, 300 212, 480 210 S 760 214, 900 214 S 1120 217, 1250 217 S 1460 209, 1500 208"); }
.landstrook--bulgarije .autootje__auto { offset-path: path("M-60 205 C 120 201, 300 210, 480 213 S 760 217, 900 217 S 1120 217, 1250 216 S 1460 212, 1500 212"); }
.landstrook--moldavie .autootje__auto { offset-path: path("M-60 204 C 120 200, 300 210, 480 212 S 700 221, 820 221 S 1100 214, 1250 211 S 1460 207, 1500 207"); }
.landstrook--spanje .autootje__auto { offset-path: path("M-60 205 C 120 201, 300 212, 480 218 S 700 221, 900 219 S 1120 217, 1250 216 S 1460 212, 1500 212"); }
.landstrook--barcelona .autootje__auto { offset-path: path("M-60 205 C 120 201, 300 212, 480 218 S 700 221, 900 219 S 1120 217, 1250 216 S 1460 212, 1500 212"); }
.landstrook--tolbadge-europa .autootje__auto { offset-path: path("M-60 204 C 120 200, 300 212, 480 210 S 760 215, 900 215 S 1200 211, 1330 203 S 1460 199, 1500 199"); }
/* Tolbadge: het oranje vlak van de tolpaal wordt groen terwijl het autootje langskomt (36–50% van hetzelfde rondje); bij minder beweging oranje */
.tolpaal-licht { animation: tolpaal-licht 18s step-end infinite; }
@keyframes tolpaal-licht { 0% { fill: #f0922b; } 36% { fill: #2fb35a; } 50% { fill: #f0922b; } 100% { fill: #f0922b; } }
@media (prefers-reduced-motion: reduce) { .tolpaal-licht { animation: none; } }

/* Vignet-landpagina's: accenten zoals op de homepage */
main > section.blok .kaarten--land .kaart.kaart--uitgelicht { border: 1px solid var(--blauw); background: var(--blauw-licht); } /* verplichte product, zoals de eerste producttegel */
.rekenhulp--land { margin-top: 32px; }
.landwinter { align-items: stretch; }
.landwinter__band { border-radius: 20px; padding: 32px; color: var(--wit); background-color: #1B2A44; }
.landwinter__band--at-winter { background-image: linear-gradient(90deg, rgba(15,27,45,.92) 0%, rgba(15,27,45,.78) 55%, rgba(15,27,45,.55) 100%), url("/img/foto/at-winter-1280.webp"); background-size: cover; background-position: center; }
.landwinter__band .landwinter__label { margin: 0 0 6px; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #FFD25A; }
.landwinter__band h2 { color: var(--wit); margin-top: 0; }
.landwinter__band p { color: #E8EEF7; }
.landwinter__band strong { color: var(--wit); }
.landwinter__band a { color: var(--wit); }
.landwinter__kaart { background: var(--wit); border-radius: 16px; box-shadow: 0 4px 18px rgba(15,27,45,.08); padding: 24px 28px; }
.landwinter__kaart h2 { margin-top: 0; }
@media (max-width: 560px) { .landwinter__band { padding: 24px 20px; } .landwinter__kaart { padding: 20px; } }
/* alle stroken (homepage en landpagina's): even breed als de kaart erboven (in .wrap), overal dezelfde uitsnede 1440 × 232
   (1132 × 182px op desktop, evenredig kleiner op mobiel), zachte randen binnen de kaartbreedte */
.autootje svg, .landstrook svg { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* Oostenrijk (brede landvariant met uitlegtekst): uitleg links ook op mobiel, "Meer vignetten?" onder de trajecttolrij, rustig "Extra"-label */
.bestel--uitlegtekst > .bestel__uitleg { display: block; color: var(--inkt-2); }
.bestel--uitlegtekst > .bestel__uitleg p { margin: 0 0 12px; }
.bestel--uitlegtekst .bestel__keuze > .veld__hulp { display: none; } /* hulplink staat in de uitleg */
.bestel--land .pil--extra { background: none; color: var(--inkt-2); padding: 0; border-radius: 0; font-size: .78rem; font-weight: 600; text-transform: none; letter-spacing: .02em; }
@media (min-width: 960px) {
  .bestel--uitlegtekst > .bestel__meer { display: block; grid-column: 1 / -1; grid-row: 8; margin: 0 0 16px; text-align: left; }
  .bestel--uitlegtekst > .bestel__meer--link { display: flex; justify-content: space-between; }
  .bestel--uitlegtekst > .stap[data-stap="2"] { grid-row: 9; }
  .bestel--uitlegtekst > .stap[data-stap="3"] { grid-row: 10; }
  .bestel--uitlegtekst.bestel--verder > .prijs-uitsplitsing { grid-row: 11; }
  .bestel--uitlegtekst.bestel--verder > .prijsregel { grid-row: 12; }
  .bestel--uitlegtekst.bestel--verder > #bestel-knop { grid-row: 13; }
}

/* Milieusticker, Barcelona en tolbadge: zelfde hero en brede kaart; productvariant: midden brandstof/klasse/voertuig, rechts product, prijs en knop */
.paginaheld--de { --heldfoto: url("/img/foto/hero-de-1600.webp"); }
.paginaheld--fr { --heldfoto: url("/img/foto/hero-fr-1600.webp"); }
.paginaheld--es { --heldfoto: url('/img/foto/hero-es-1600.webp'); }
.paginaheld--tb { --heldfoto: url("/img/foto/fr-peage-1280.webp"); }
@media (min-width: 960px) {
  .bestel--product .bestel__keuze { grid-column: 2; grid-row: 3 / span 4; }
  .bestel--product .bestel__looptijd { grid-column: 3; grid-row: 3; }
  .bestel--product .bestel__looptijd .tegels { grid-template-columns: 1fr; }
}
.tipskaart { max-width: 800px; background: var(--wit); border-radius: 16px; box-shadow: 0 4px 18px rgba(15,27,45,.08); padding: 20px 28px; } /* tolbadge: "Goed om te weten" als witte kaart */
.tipskaart .lijst { margin: 0; }

/* Wintersport Oostenrijk: zelfde hero en kaart als de landpagina's (herofoto winter), checklist-iconen */
.paginaheld--winter { --heldfoto: url("/img/foto/at-winter-1280.webp"); }
.landvragen > .cta-blok { max-width: 800px; }
/* Wintersport Oostenrijk: winterregels als fotoband (zoals het winterblok op /oostenrijk), uitgelichte tabelrij */
.landwinter__band--obertauern { background-image: linear-gradient(90deg, rgba(15,27,45,.92) 0%, rgba(15,27,45,.8) 55%, rgba(15,27,45,.6) 100%), url("/img/foto/obertauern-1280.webp"); background-size: cover; background-position: center; }
.landwinter__band li { color: #E8EEF7; }
.landwinter__band .lijst { margin-bottom: 0; }
.tabel tr.tabel__uitgelicht > * { background: var(--blauw-licht); }
.tabel__label { display: block; font-size: .78rem; font-weight: 600; color: var(--inkt-2); }

/* Wintersport Oostenrijk: skigebieden per regio (tekeningen in views/partials/regio/) */
.regiokaarten { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 8px; }
@media (min-width: 900px) { .regiokaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.regiokaart { background: var(--wit); border-radius: 16px; box-shadow: 0 4px 18px rgba(15,27,45,.08); overflow: hidden; }
.regiokaart__beeld { background: var(--blauw-licht); padding: 16px 20px 0; }
.regiokaart__beeld svg { display: block; width: 100%; height: auto; }
.regiokaart__label { margin: 16px 20px 6px; font-family: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blauw); }
.regiokaart__lijst { list-style: none; margin: 0; padding: 0 0 8px; }
.regiolink { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 20px; color: var(--inkt); text-decoration: none; border-top: 1px solid var(--lijn); }
.regiokaart__lijst li:first-child .regiolink { border-top: 0; }
.regiolink strong, .regiolink small { display: block; }
.regiolink small { color: var(--inkt-2); font-size: .85rem; }
.regiolink__pijl { flex: none; color: var(--blauw); font-weight: 700; }
.regiolink:hover { background: var(--grond); }
.regiolink:focus-visible { outline-offset: -3px; } /* binnen de kaart (overflow: hidden) */

/* Wintersport Oostenrijk: speelse checklist (voortgang, uitklapbare groepen) */
.checklist__voortgang { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; background: var(--wit); border-radius: 16px; box-shadow: 0 4px 18px rgba(15,27,45,.08); padding: 20px 24px; margin-bottom: 20px; }
.checklist__stand { margin: 0; font-size: 1.05rem; }
.checklist__bericht { margin: 0; color: var(--inkt-2); font-weight: 600; text-align: right; }
@media (max-width: 560px) { .checklist__voortgang { grid-template-columns: 1fr; } .checklist__bericht { text-align: left; } }
.checklist__balk { grid-column: 1 / -1; width: 100%; height: 12px; -webkit-appearance: none; appearance: none; border: 0; border-radius: 99px; background: #E9EDF3; overflow: hidden; color: #f5c518; }
.checklist__balk::-webkit-progress-bar { background: #E9EDF3; border-radius: 99px; }
.checklist__balk::-webkit-progress-value { background: #f5c518; border-radius: 99px; transition: width .3s; }
.checklist__balk::-moz-progress-bar { background: #f5c518; border-radius: 99px; }
.checklist__groep summary { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: 16px; }
.checklist__groep summary::-webkit-details-marker { display: none; }
.checklist__icoon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--blauw-licht); display: grid; place-items: center; }
.checklist__titel { flex: 1; font-weight: 700; font-size: 1.05rem; }
.checklist__teller { flex: none; font-size: .85rem; font-weight: 600; color: var(--inkt-2); }
.checklist__teller--af { color: var(--groen); }
.checklist__plus { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blauw); color: var(--wit); display: grid; place-items: center; font-weight: 700; line-height: 1; }
.checklist__plus::before { content: '+'; }
.checklist__groep[open] .checklist__plus::before { content: '−'; }
.checklist__items { border: 0; margin: 0; padding: 0 18px 14px; min-width: 0; }

/* Infopagina's (views/landinfo.ejs): hero en hangende kaart zoals de landpagina's. Geen eigen foto: effen donkerblauw. */
.paginaheld--effen { --heldfoto: none; background-color: #1B2A44; }
.landheld--zonderstrook .bestelvak { padding-bottom: 48px; } /* ruimte onder de kaart op het grijze vlak */
.bestelvak .kort-antwoord--held { margin: 0; padding: 28px 32px; box-shadow: 0 20px 50px rgba(15,27,45,.18); }
.kort-antwoord--held h2 { font-size: 1.5rem; margin: 0 0 10px; }
.kort-antwoord--held p { font-size: 1.05rem; max-width: 820px; }
@media (max-width: 560px) { .bestelvak .kort-antwoord--held { padding: 22px 20px; } }
.landinfo__tekst > h2, .landinfo__tekst > p { max-width: 800px; }
.landinfo__tekst > h2:first-child { margin-top: 0; }
.bestel--wacht .bestel__wachttekst, .bestel--wacht .bestel__wachtprivacy { margin: 0; }
.bestel--wacht .bestel__wachttekst { color: var(--inkt-2); }
.bestel--wacht .melding { margin: 0; }
@media (min-width: 960px) {
  .bestel--wacht { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.1fr); column-gap: 28px; row-gap: 10px; align-items: start; }
  .bestel--wacht > .bestel__kop, .bestel--wacht > .melding { grid-column: 1 / -1; margin-bottom: 10px; }
  .bestel--wacht > .bestel__wachttekst { grid-column: 1; grid-row: 2 / span 2; }
  .bestel--wacht > .bestel__wachtveld { grid-column: 2; grid-row: 2; margin: 0; }
  .bestel--wacht > .bestel__wachtknop { grid-column: 3; grid-row: 2; width: 100%; }
  .bestel--wacht > .bestel__wachtprivacy { grid-column: 2 / -1; grid-row: 3; }
}
.landinfo__tekst > p + h2 { margin-top: 36px; }
@media (min-width: 960px) { .bestel--wacht > .bestel__wachtknop { margin-top: 30px; } } /* gelijk met het invoerveld: labelhoogte + tussenruimte van .veld */

/* ===== Landpagina's onderaan: snelheden, verplicht, winter, tips, noodnummers ===== */
/* maximumsnelheden: per soort weg een witte kaart (voorbeeld-snelheden.png): naam, groot bord (auto) en klein bord (met caravan) met een
   lichtblauw pilletje eronder, onderin het landschapje. Borden: alleen het bord uit het getekende plaatje (gemeten: rond bord 62% van de
   breedte, midden op 53,5% hoogte; 140 op 50%; adviesbord als afgeronde rechthoek). Op mobiel een veegbare rij (scroll-snap). */
.snelkaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.snelkaarten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.snelkaarten--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.snelkaart { position: relative; /* houdt de verborgen zin (.sr) binnen de veegbare rij */ display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 14px 14px; background: var(--wit); border-radius: 20px; box-shadow: 0 4px 18px rgba(15,27,45,.08); text-align: center; }
.snelkaart__waar { margin: 0; font-family: var(--kop-font); font-size: 1.12rem; font-weight: 700; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; } /* twee regels ruimte: borden op één lijn */
.snelkaart__borden { display: flex; justify-content: center; align-items: flex-start; gap: 14px; }
.snelkaart__bord { display: grid; justify-items: center; gap: 8px; }
.snelkaart__bord--klein .bord { margin: calc((92px - var(--d)) / 2) 0; } /* klein bord in het midden naast het grote: pilletjes op één lijn */
.snelkaarten--5 .snelkaart__bord--klein .bord { margin: calc((80px - var(--d)) / 2) 0; }
@media (max-width: 760px) { .snelkaarten.snelkaarten--5 .bord { --d: 92px; } .snelkaarten.snelkaarten--5 .bord--klein { --d: 64px; } .snelkaarten.snelkaarten--5 .snelkaart__bord--klein .bord { margin: calc((92px - var(--d)) / 2) 0; } } /* mobiel: één kaart in beeld, gewone maat */
.snelkaart__pil { padding: 3px 12px; border-radius: 999px; background: #E6EEFB; color: var(--inkt); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.snelkaart__extra { margin: -4px 0 0; font-size: .8rem; color: var(--inkt-2); }
.snelkaart__landschap { display: block; width: 100%; height: auto; margin-top: auto; border-radius: 14px; }
.bord { --d: 92px; --cy: 53.5%; position: relative; display: block; flex: none; width: var(--d); height: var(--d); filter: drop-shadow(0 2px 3px rgba(15,27,45,.2)); }
.bord--klein { --d: 64px; }
.bord--midden { --cy: 50%; }
.bord--advies { --cy: 47%; }
.bord img { position: absolute; left: 50%; top: 50%; width: calc(var(--d) / .62); max-width: none; height: auto; transform: translate(-50%, calc(-1 * var(--cy))); clip-path: circle(31% at 50% var(--cy)); }
.bord--advies img { clip-path: inset(18% 19% 24% 19% round 9%); }
.snelkaarten--5 .bord { --d: 80px; }
.snelkaarten--5 .bord--klein { --d: 56px; }
@media (max-width: 1100px) and (min-width: 761px) { .snelkaarten--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .snelkaarten--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .snelkaarten, .snelkaarten--3, .snelkaarten--5 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; gap: 12px; margin: 0 -16px; padding: 4px 16px 18px; scroll-padding: 0 16px; }
  .snelkaarten::-webkit-scrollbar { display: none; }
  .snelkaart { flex: 0 0 76%; scroll-snap-align: start; }
}
/* één korte regel met info-icoon onder een blok */
.infoRegel { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-size: .9rem; color: var(--inkt-2); }
.infoRegel img { flex: none; margin-top: 1px; }

/* "Je vignet" / "Je milieusticker": links de uitleg (categorie, kaarten, geldigheid), rechts kort de tol met foto */
.jevignet { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.jevignet__uitleg > h3:first-child { margin-top: 0; }
.jevignet__uitleg .kaarten--land { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jevignet__uitleg .kaarten--land > .kaart:last-child:nth-child(odd) { grid-column: 1 / -1; } /* oneven aantal: de laatste over de volle breedte */
@media (max-width: 560px) { .jevignet__uitleg .kaarten--land { grid-template-columns: 1fr; } }
.jevignet__tol { background: var(--wit); border-radius: 20px; box-shadow: 0 4px 18px rgba(15,27,45,.08); overflow: hidden; }
.jevignet__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.jevignet__toltekst { padding: 20px 22px 24px; font-size: .95rem; }
.jevignet__toltekst > h3 { margin-top: 0; font-size: 1.25rem; }
.jevignet__toltekst > p:last-child, .jevignet__toltekst > ul:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .jevignet { grid-template-columns: minmax(0, 1fr); gap: 28px; } } /* minmax(0): brede tabel (Crit'Air) scrolt in zijn eigen vak */
/* "Pak je auto in": links kop, zin, groene balk en stand; rechts grote tegels (knoppen met aria-pressed) */
.inpak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.inpak__tekst h2 { margin-top: 0; }
.inpak__tekst p { margin: 0 0 16px; color: var(--inkt-2); }
.inpak__balk { display: block; width: 100%; height: 12px; border: 0; border-radius: 999px; background: var(--wit); overflow: hidden; -webkit-appearance: none; appearance: none; box-shadow: inset 0 0 0 1px var(--lijn); }
.inpak__balk::-webkit-progress-bar { background: var(--wit); border-radius: 999px; }
.inpak__balk::-webkit-progress-value { background: var(--groen); border-radius: 999px; transition: width .3s; }
.inpak__balk::-moz-progress-bar { background: var(--groen); border-radius: 999px; }
.inpak__tekst .inpak__stand { margin: 10px 0 0; font-weight: 600; color: var(--inkt); }
.inpak__stand--klaar { color: var(--groen); }
.inpak__tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1100px) { .inpak__tegels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .inpak__tegels--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* aantal kolommen per land: geen losse tegel op een rij */
@media (max-width: 1099px) { .inpak__tegels--oneven > li:last-child { grid-column: 1 / -1; } } /* twee kolommen: bij 3 of 5 tegels de laatste over de volle breedte, nooit één alleen */
.paktegel { position: relative; display: grid; justify-items: start; align-content: start; gap: 4px; width: 100%; height: 100%; padding: 20px 20px 22px; text-align: left; font: inherit; color: var(--inkt); background: var(--wit); border: 2px solid transparent; border-radius: 18px; box-shadow: 0 4px 18px rgba(15,27,45,.08); cursor: pointer; transition: transform .2s, border-color .15s, background-color .15s, box-shadow .2s; }
.paktegel:hover { border-color: var(--lijn-2); }
.paktegel:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; }
.paktegel__icoon { display: block; width: 104px; height: 104px; margin: 0 0 8px -6px; mix-blend-mode: multiply; } /* getekend icoon met eigen wolkje, wit valt weg */
.paktegel__titel { font-weight: 600; line-height: 1.3; }
.paktegel__zin { font-size: .88rem; color: var(--inkt-2); line-height: 1.4; }
.paktegel__vink { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--lijn-2); background: var(--wit) no-repeat center / 16px; }
.paktegel[aria-pressed="true"] { border-color: var(--groen); background: var(--groen-licht); transform: translateY(-4px); box-shadow: 0 10px 24px rgba(15,27,45,.12); }
.paktegel[aria-pressed="true"] .paktegel__vink { border-color: var(--groen); background-color: var(--groen); background-image: url('/img/vink-wit.svg'); }
@media (prefers-reduced-motion: reduce) { .paktegel { transition: none; } }
@media (max-width: 760px) {
  .inpak { grid-template-columns: 1fr; gap: 20px; }
  .inpak__tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .paktegel { padding: 14px 14px 16px; }
  .paktegel__icoon { width: 80px; height: 80px; margin-left: -4px; }
  .paktegel__vink { top: 12px; right: 12px; width: 24px; height: 24px; }
}
/* winter: donker blok, links label en kop, rechts drie feitentegels */
.winterblok { background: #0B1834; color: var(--wit); border-radius: 20px; padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 32px; align-items: center; }
.winterblok__label { margin: 0 0 8px; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--geel); }
.winterblok h2 { color: var(--wit); margin: 0; }
.winterblok__feiten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.winterblok__feiten li { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 18px; display: grid; gap: 6px; align-content: start; }
.winterblok__feiten strong { font-family: var(--kop-font); font-size: 1.15rem; line-height: 1.2; color: var(--geel); }
.winterblok__feiten span { font-size: .9rem; line-height: 1.45; color: #DCE3EE; }
.winterblok__na { grid-column: 1 / -1; margin-top: -8px; }
.winterblok__na p { margin: 0; }
.winterblok__na a { color: var(--wit); }
@media (max-width: 900px) { .winterblok { grid-template-columns: 1fr; gap: 20px; padding: 28px 22px; } }
@media (max-width: 640px) { .winterblok__feiten { grid-template-columns: 1fr; } }

/* handig om te weten: lijst (icoon, titel, zin, dun lijntje ertussen) met rechts een geel briefje "In nood bellen" */
.weetjes--nood { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.weetjes h2 { margin-top: 0; }
.tiplijst { list-style: none; margin: 0; padding: 0; }
.tip { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--lijn); }
.tip:first-child { border-top: 0; padding-top: 4px; }
.tip__icoon { display: block; width: 72px; height: 72px; mix-blend-mode: multiply; } /* getekend icoon, wit valt weg op de band */
.tip strong { display: block; font-weight: 600; line-height: 1.3; margin-bottom: 3px; }
.tip p { margin: 0; font-size: .92rem; color: var(--inkt-2); line-height: 1.45; }
.briefje { margin-top: 56px; background: #F5C518; border-radius: 20px; padding: 26px 28px 28px; transform: rotate(-1.5deg); box-shadow: 0 14px 32px rgba(245,197,24,.35), 0 2px 6px rgba(15,27,45,.08); color: var(--inkt); }
.briefje__kop { margin: 0 0 14px; font-size: 1.25rem; }
.briefje__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.briefje__lijst li { display: flex; align-items: baseline; gap: 12px; }
.briefje__nummer { font-family: var(--kop-font); font-weight: 700; font-size: 2.1rem; line-height: 1; min-width: 2.4ch; }
.briefje__wat { font-size: .95rem; }
@media (max-width: 900px) {
  .weetjes--nood { grid-template-columns: 1fr; gap: 24px; }
  .briefje { margin-top: 0; transform: none; }
}
@media (max-width: 560px) { .tip { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; } .tip__icoon { width: 56px; height: 56px; } }

/* ===== Prijzenpagina: brede kaart over de hero met landkeuze, looptijdtegels en uitklaptabel ===== */
.prijskaart { background: var(--wit); border-radius: 20px; box-shadow: 0 20px 50px rgba(15,27,45,.18); padding: 28px 32px 32px; }
.prijskaart__landen { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--lijn); }
.landpil { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 1.5px solid var(--lijn-2); border-radius: 999px; background: var(--wit); color: var(--inkt); font: inherit; font-size: .92rem; line-height: 1.2; cursor: pointer; transition: border-color .15s, background-color .15s; }
.landpil img { border-radius: 3px; flex: none; }
.landpil__naam { font-weight: 600; }
.landpil__vanaf { color: var(--inkt-2); font-size: .82rem; white-space: nowrap; }
.landpil:hover { border-color: var(--blauw); }
.landpil[aria-pressed="true"] { border-color: var(--blauw); background: var(--blauw-licht); }
.landpil[aria-pressed="true"] .landpil__vanaf { color: var(--blauw-donker); }
.prijsvak + .prijsvak { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--lijn); } /* zonder JavaScript: landen onder elkaar */
.prijsvak[hidden] { display: none; }
.prijskaart__landen:not([hidden]) ~ .prijsvak { margin-top: 0; padding-top: 0; border-top: 0; }
.prijsvak__kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 32px; margin-bottom: 20px; }
.prijsvak__titel { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); }
.prijsvak__titel img { border-radius: 3px; flex: none; }
.prijsvak__zin { margin: 0; color: var(--inkt-2); max-width: 620px; }
.soortkeuze { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--grond); gap: 4px; flex: none; }
.soortkeuze[hidden] { display: none; }
.soortkeuze__knop { border: 0; border-radius: 999px; padding: 8px 18px; background: transparent; color: var(--inkt-2); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; }
.soortkeuze__knop:hover { color: var(--inkt); }
.soortkeuze__knop[aria-pressed="true"] { background: var(--wit); color: var(--blauw-donker); box-shadow: 0 1px 4px rgba(15,27,45,.12); }
.prijsset[hidden] { display: none; }
.prijsset + .prijsset { margin-top: 20px; }
.prijsset__voor { margin: 0 0 18px; font-size: .88rem; color: var(--inkt-2); }
.looptijdtegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.lttegel { position: relative; display: grid; gap: 4px; align-content: center; text-align: center; min-height: 112px; padding: 22px 12px 18px; border: 2px solid var(--lijn-2); border-radius: 14px; background: var(--wit); }
.lttegel__naam { font-weight: 600; }
.lttegel__prijs { font-family: var(--kop-font); font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.lttegel--vakantie { background: #0B1834; border-color: #0B1834; color: var(--wit); }
.lttegel__label { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--geel); color: #0B1834; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.prijsvak__voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 24px; }
.prijsvak__voet .infoRegel { margin: 0; flex: 1 1 320px; }
.prijsvak__alles { margin-top: 24px; border-top: 1px solid var(--lijn); padding-top: 16px; }
.prijsvak__alles summary { cursor: pointer; font-weight: 600; color: var(--blauw); }
.prijsvak__alles summary:hover { color: var(--blauw-donker); }
.prijsvak__alles[open] summary { margin-bottom: 12px; }
.prijsvak__alles .prijsgroep { margin: 16px 0 8px; }
@media (max-width: 560px) {
  .prijskaart { padding: 20px 16px 24px; border-radius: 16px; }
  .prijskaart__landen { gap: 8px; padding-bottom: 18px; margin-bottom: 22px; }
  .prijskaart__landen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landpil { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: center; border-radius: 14px; padding: 7px 10px; font-size: .86rem; text-align: left; }
  .landpil img { grid-row: 1 / 3; }
  .landpil__naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .landpil__vanaf { font-size: .76rem; }
  .soortkeuze { width: 100%; }
  .soortkeuze__knop { flex: 1; padding: 8px 10px; }
  .looptijdtegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lttegel { min-height: 96px; padding: 20px 8px 14px; }
  .lttegel__prijs { font-size: 1.35rem; }
  .prijsvak__voet .knop { width: 100%; text-align: center; }
}