/* paginas.css — GEGENEREERD door scripts/bundel_css.py.
 * Hier staat de opmaak die eerder als <style>-blok in elke pagina zat:
 * 722 blokken in 19 varianten, samen ruim 3 MB.
 * Bij een verschil is de variant gekozen die op de meeste pagina's stond;
 * die keuzes staan onderaan dit bestand opgesomd.
 * NIET met de hand bewerken — pas de bron aan en draai het script opnieuw. */

.route-hero { background: linear-gradient(135deg, #1a56db 0%, #1245b5 100%); color: #fff; padding: 3.5rem 0 3rem; text-align: center }
.route-hero .route-badge-pill { display: inline-block; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); border-radius: 20px; padding: .3rem 1rem; font-size: .85rem; letter-spacing: .5px; margin-bottom: 1rem }
.route-hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.25; margin-bottom: .75rem; max-width: 720px; margin-left: auto; margin-right: auto }
.route-hero .answer-first { font-size: 1.05rem; color: rgba(255,255,255,.88); max-width: 600px; margin: 0 auto 1.75rem; line-height: 1.65 }
.compensation-box { display: inline-flex; flex-direction: column; align-items: center; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.3); border-radius: 16px; padding: 1.25rem 2.5rem; margin: 0 auto 1.75rem }
.compensation-box .amount { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 900; color: #fff; line-height: 1 }
.compensation-box .amount-label { font-size: .85rem; color: rgba(255,255,255,.75); margin-top: .3rem }
.cta-route { display: inline-block; background: #fff; color: #1a56db; font-size: 1.05rem; font-weight: 700; padding: .85rem 2.2rem; border-radius: 50px; text-decoration: none; transition: background .2s, transform .15s; box-shadow: 0 4px 18px rgba(0,0,0,.18) }
.cta-route:hover { background: #eef3ff; transform: translateY(-2px); text-decoration: none }
.cta-note { font-size: .8rem; color: rgba(255,255,255,.65); margin-top: .75rem; display: block }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0 }
.info-card { background: #fff; border-radius: 12px; padding: 1.25rem 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,.06); border-left: 4px solid #1a56db }
.info-card .ic-label { font-size: .78rem; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .3rem }
.info-card .ic-value { font-size: 1.15rem; font-weight: 700; color: #111827 }
.badges-wrap { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 }
.route-badge-item { background: #eef3ff; color: #1a56db; padding: .3rem .85rem; border-radius: 20px; font-size: .85rem; font-weight: 500 }
.route-section h2 { font-size: 1.4rem; font-weight: 700; color: #111827; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 3px solid #1a56db; display: inline-block }
.route-section { margin-bottom: 3rem }
.route-section p { color: #4b5563 }
.steps-list { list-style: none; padding: 0 }
.steps-list li { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; background: #fff; border-radius: 12px; margin-bottom: .75rem; box-shadow: 0 2px 10px rgba(0,0,0,.05) }
.step-num { flex-shrink: 0; width: 2rem; height: 2rem; background: #1a56db; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem }
.step-text strong { display: block; margin-bottom: .2rem; color: #111827 }
.step-text { color: #4b5563 }
details.faq-item { background: #fff; border-radius: 12px; margin-bottom: .75rem; box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden }
details.faq-item summary { padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; color: #111827; list-style: none; position: relative; padding-right: 2.5rem }
details.faq-item summary::after { content: "+"; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: #1a56db; line-height: 1 }
details.faq-item[open] summary::after { content: "−" }
.faq-answer { padding: .75rem 1.25rem 1rem; color: #4b5563; border-top: 1px solid #f3f4f6 }
.cta-route-block { background: linear-gradient(135deg, #1a56db, #1245b5); border-radius: 16px; padding: 2.5rem; text-align: center; color: #fff }
.cta-route-block h2 { color: #fff; border-color: rgba(255,255,255,.4); font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem }
.cta-route-block p { color: rgba(255,255,255,.8); margin-bottom: 1rem }
.related-routes-wrap { display: flex; flex-wrap: wrap; gap: .6rem }
.related-routes-wrap a { background: #eef3ff; color: #1a56db; padding: .4rem 1rem; border-radius: 20px; font-size: .88rem; text-decoration: none; transition: background .15s }
.related-routes-wrap a:hover { background: #dbeafe; text-decoration: none }
.hub-intro { max-width: 720px; margin: 0 auto 2.5rem; color: #4b5563; font-size: 1.05rem; line-height: 1.7 }
.route-group { margin-bottom: 2.5rem }
.route-group h2 { font-size: 1.3rem; font-weight: 700; color: #111827; border-bottom: 3px solid #1a56db; padding-bottom: .4rem; display: inline-block; margin-bottom: 1rem }
.route-group ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .5rem }
.route-group ul li a { display: block; padding: .6rem 1rem; background: #f9fafb; border-radius: 8px; color: #1a56db; font-weight: 500; font-size: .92rem; text-decoration: none; border: 1px solid #e5e7eb; transition: background .15s, border-color .15s }
.route-group ul li a:hover { background: #eef3ff; border-color: #1a56db; text-decoration: none }
.hub-cta { background: #eef3ff; border-radius: 16px; padding: 2rem; text-align: center; margin-top: 2rem }
.hub-cta p { color: #4b5563; margin-bottom: 1rem; max-width: 500px; margin-left: auto; margin-right: auto }
.intake-wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 80px }
.intake-steps { display: flex; gap: 0; margin: 32px 0 40px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--clr-gray-200) }
.intake-tab { flex: 1; padding: 12px 8px; text-align: center; font-size: .78rem; font-weight: 600; color: var(--clr-gray-400); background: var(--clr-gray-50); border-right: 1px solid var(--clr-gray-200); cursor: default; transition: background var(--transition) }
.intake-tab:last-child { border-right: none }
.intake-tab .step-num { width: 22px; height: 22px; background: var(--clr-gray-200); color: var(--clr-gray-600); border-radius: 50%; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px }
.intake-tab.active { background: #fff; color: var(--clr-primary) }
.intake-tab.active .step-num { background: var(--clr-primary); color: #fff }
.intake-tab.done .step-num { background: var(--clr-success); color: #fff }
.intake-tab.done { color: var(--clr-success) }
.intake-panel { display: none }
.intake-panel.active { display: block }
.intake-panel h2 { margin-bottom: 8px }
.intake-panel .panel-sub { color: var(--clr-gray-400); margin-bottom: 28px; font-size: .95rem }
.passenger-block { border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); margin-bottom: 16px; overflow: hidden }
.passenger-block__header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--clr-gray-50); cursor: pointer; font-weight: 600 }
.passenger-block__name-preview { flex: 1; font-size: .85rem; font-weight: 400; color: var(--clr-gray-400) }
.passenger-block__chevron { margin-left: auto; color: var(--clr-gray-400); font-size: .8rem }
.passenger-block__body { padding: 20px 18px }
.passenger-block__body.collapsed { display: none }
.signature-block { border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); margin-bottom: 28px; padding: 24px }
.signature-block h3 { margin-bottom: 16px; font-size: 1rem }
.volmacht-scroll { background: var(--clr-gray-50); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-sm); padding: 20px; max-height: 360px; overflow-y: auto; font-size: .88rem; line-height: 1.7; margin-bottom: 20px }
.volmacht-text h3 { font-size: 1rem; margin-bottom: 12px }
.volmacht-text h4 { font-size: .92rem; margin: 16px 0 6px }
.volmacht-text p, .volmacht-text ul, .volmacht-text ol { margin-bottom: 10px; font-size: .88rem }
.volmacht-text li { margin-left: 20px; margin-bottom: 4px }
#intake-error { background: #fef2f2; border: 1px solid #fca5a5; color: #dc2626; border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 20px; font-size: .9rem }
.confirmation-timeline { list-style: none; margin: 24px 0 }
.confirmation-timeline li { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--clr-gray-100) }
.confirmation-timeline li:last-child { border-bottom: none }
.tl-num { flex-shrink: 0; width: 28px; height: 28px; background: var(--clr-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700 }
.tl-body { font-size: .93rem }
.tl-body strong { display: block; margin-bottom: 2px }
.pax-count-row { display: flex; align-items: center; gap: 16px; margin-bottom: 24px }
.pax-count-row label { font-weight: 600; flex-shrink: 0 }
.pax-count-row select { max-width: 180px }
.predecision-box { border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 16px }
.predecision-box label { font-size: .93rem; cursor: pointer }
.predecision-box .pd-help { font-size: .83rem; color: var(--clr-gray-400); margin-top: 6px }
.file-size-note { font-size: .8rem; color: var(--clr-gray-400); margin-top: 4px }
.booking-upload-section { background: var(--clr-gray-50); border: 1px solid var(--clr-gray-200); border-radius: var(--radius-md); padding: 18px; margin-bottom: 24px }
.honesty-box-intake { background: #eff6ff; border: 1px solid #93c5fd; border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 32px; font-size: .88rem; line-height: 1.65 }
.honesty-box-intake ul { list-style: disc; padding-left: 20px; margin-top: 8px }
.honesty-box-intake li { margin-bottom: 6px }
.thankyou-section { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 80px 24px }
.thankyou-box { max-width: 560px; text-align: center }
.thankyou-icon { width: 72px; height: 72px; background: #d1fae5; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px }
.thankyou-icon svg { width: 40px; height: 40px; color: #059669 }
.thankyou-box h1 { font-size: 2rem; font-weight: 800; color: #111827; margin-bottom: 16px; line-height: 1.2 }
.thankyou-box p { font-size: 1.05rem; color: #4b5563; margin-bottom: 14px; line-height: 1.7 }
.steps-list li + li { border-top: 1px solid #f3f4f6 }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px }
.zinios-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem;margin:2rem 0 }
.zinios-card { background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 10px rgba(0,0,0,.06);border-left:4px solid #1a56db;text-decoration:none;color:inherit;display:block;transition:box-shadow .2s,transform .15s }
.zinios-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.1);transform:translateY(-2px);text-decoration:none }
.zinios-card h3 { font-size:1.1rem;font-weight:700;color:#111827;margin-bottom:.5rem }
.zinios-card p { font-size:.9rem;color:#6b7280;margin:0;line-height:1.5 }
.zinios-group { margin-bottom:2.5rem }
.zinios-group h2 { font-size:1.2rem;font-weight:700;color:#111827;border-bottom:3px solid #1a56db;padding-bottom:.4rem;display:inline-block;margin-bottom:1rem }
.tpl-marker { background: #fef9c3; color: #78350f; border: 1px dashed #f59e0b; border-radius: 3px; padding: 0 4px; font-style: italic }
.event-badge { display: inline-flex; align-items: center; gap: 6px; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; border-radius: 20px; padding: 6px 14px; font-size: .85rem; font-weight: 600; margin-bottom: 20px }
.staking-box-a { background: #f0fdf4; border: 2px solid #16a34a; border-radius: var(--radius-md); padding: 28px 32px; margin: 32px 0 }
.staking-box-a h3 { color: #15803d; margin-bottom: 12px }
.staking-box-b { background: #fff7ed; border: 2px solid #f97316; border-radius: var(--radius-md); padding: 28px 32px; margin: 32px 0 }
.staking-box-b h3 { color: #c2410c; margin-bottom: 12px }
.wat-nu-steps { counter-reset: step; list-style: none; padding: 0; margin: 0 }
.wat-nu-steps li { counter-increment: step; display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--clr-gray-200) }
.wat-nu-steps li:last-child { border-bottom: none }
.wat-nu-steps li::before { content: counter(step); flex-shrink: 0; width: 32px; height: 32px; background: var(--clr-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem }
.overmacht-box { background: #fff7ed; border: 2px solid #f97316; border-radius: var(--radius-md); padding: 28px 32px; margin: 32px 0 }
.overmacht-box h3 { color: #c2410c; margin-bottom: 12px }
.storing-intern-box { background: #f0fdf4; border: 2px solid #16a34a; border-radius: var(--radius-md); padding: 28px 32px; margin: 32px 0 }
.storing-intern-box h3 { color: #15803d; margin-bottom: 12px }
.storing-extern-box { background: #fff7ed; border: 2px solid #f97316; border-radius: var(--radius-md); padding: 28px 32px; margin: 32px 0 }
.storing-extern-box h3 { color: #c2410c; margin-bottom: 12px }
.route-hero .breadcrumb a,.route-hero .breadcrumb span { color:rgba(255,255,255,.75) }
.route-hero .breadcrumb span:last-child { color:#fff }
.route-hero p { font-size:1.05rem;opacity:.9;max-width:680px }
.badge-pill { display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.25rem .85rem;font-size:.82rem;font-weight:600;letter-spacing:.02em;margin-bottom:1rem }
.comp-amount { font-size:2.8rem;font-weight:800;color:#7c3aed;line-height:1 }
.comp-label { font-size:.9rem;color:#374151;font-weight:500 }
.comp-sub { font-size:.8rem;color:#6b7280;margin-top:.25rem }
.info-card__label { font-size:.78rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em }
.info-card__value { font-size:1.15rem;font-weight:700;color:#111827;margin-top:.2rem }
.badge { background:#eef3ff;color:#1a56db;border:1px solid #c7d7f9;border-radius:8px;padding:.3rem .75rem;font-size:.83rem;font-weight:600 }
.steps-list li::before { content:counter(steps);min-width:2rem;height:2rem;background:#1a56db;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0 }
.faq-item details { border:1px solid #e5e7eb;border-radius:10px;margin-bottom:.75rem }
.faq-item summary { padding:.85rem 1rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center }
.faq-item summary::after { content:"+";font-size:1.2rem;color:#1a56db }
.faq-item details[open] summary::after { content:"−" }
.faq-item details p { padding:.5rem 1rem 1rem;color:#374151;margin:0 }
.related-route-card { background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:.85rem 1rem;text-decoration:none;color:#1a56db;font-weight:600;font-size:.9rem;transition:background .15s,border-color .15s;display:block }
.related-route-card:hover { background:#eef3ff;border-color:#1a56db }
.honesty-box { background:#fffbeb;border:1px solid #fcd34d;border-radius:12px;padding:1.25rem 1.5rem;margin:1.5rem 0 }
.honesty-box h3 { color:#92400e;margin:0 0 .5rem;font-size:1rem }
.honesty-box p { color:#78350f;margin:0;font-size:.92rem }

@media (max-width: 600px) {
  .route-hero { padding: 2.5rem 0 2rem }
  .compensation-box { padding: 1rem 1.5rem }
  .cta-route-block { padding: 1.75rem 1.25rem }
}

@media(max-width:600px) {
  .route-hero { padding:2.5rem 0 2rem }
  .compensation-box { padding:1rem 1.5rem }
  .cta-route-block { padding:1.75rem 1.25rem }
}

/* Opgeloste verschillen — hier week de opmaak per pagina af:
 *   .route-hero: 3 varianten, gekozen die op background: linear-gradient(135deg, #1a56db 0%, #1245b5 100%... (448 pagina's)
 *   .route-hero h1: 3 varianten, gekozen die op font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; lin... (448 pagina's)
 *   .compensation-box: 3 varianten, gekozen die op display: inline-flex; flex-direction: column; align-items: c... (448 pagina's)
 *   .steps-list: 4 varianten, gekozen die op list-style: none; padding: 0... (384 pagina's)
 *   .steps-list li: 4 varianten, gekozen die op display: flex; gap: 1rem; align-items: flex-start; padding: ... (384 pagina's)
 *   .route-hero .answer-first: 2 varianten, gekozen die op font-size: 1.05rem; color: rgba(255,255,255,.88); max-width:... (448 pagina's)
 *   .compensation-box .amount: 2 varianten, gekozen die op font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 900; col... (448 pagina's)
 *   .compensation-box .amount-label: 2 varianten, gekozen die op font-size: .85rem; color: rgba(255,255,255,.75); margin-top:... (448 pagina's)
 *   .cta-route: 2 varianten, gekozen die op display: inline-block; background: #fff; color: #1a56db; fon... (448 pagina's)
 *   .cta-route:hover: 2 varianten, gekozen die op background: #eef3ff; transform: translateY(-2px); text-decor... (448 pagina's)
 *   .cta-note: 2 varianten, gekozen die op font-size: .8rem; color: rgba(255,255,255,.65); margin-top: ... (448 pagina's)
 *   .info-grid: 3 varianten, gekozen die op display: grid; grid-template-columns: repeat(auto-fit, minma... (384 pagina's)
 *   .info-card: 3 varianten, gekozen die op background: #fff; border-radius: 12px; padding: 1.25rem 1.5r... (384 pagina's)
 *   .badges-wrap: 2 varianten, gekozen die op display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0... (384 pagina's)
 *   .cta-route-block: 3 varianten, gekozen die op background: linear-gradient(135deg, #1a56db, #1245b5); borde... (384 pagina's)
 *   .cta-route-block h2: 4 varianten, gekozen die op color: #fff; border-color: rgba(255,255,255,.4); font-size: ... (384 pagina's)
 *   .related-routes-wrap: 3 varianten, gekozen die op display: flex; flex-wrap: wrap; gap: .6rem... (384 pagina's)
 *   .step-num: 3 varianten, gekozen die op flex-shrink: 0; width: 2rem; height: 2rem; background: #1a56... (384 pagina's)
 *   .route-hero .route-badge-pill: 2 varianten, gekozen die op display: inline-block; background: rgba(255,255,255,.15); bo... (384 pagina's)
 *   .info-card .ic-label: 2 varianten, gekozen die op font-size: .78rem; color: #6b7280; text-transform: uppercase... (384 pagina's)
 *   .info-card .ic-value: 2 varianten, gekozen die op font-size: 1.15rem; font-weight: 700; color: #111827... (384 pagina's)
 *   .route-badge-item: 2 varianten, gekozen die op background: #eef3ff; color: #1a56db; padding: .3rem .85rem; ... (384 pagina's)
 *   .route-section h2: 2 varianten, gekozen die op font-size: 1.4rem; font-weight: 700; color: #111827; margin-... (384 pagina's)
 *   .route-section: 2 varianten, gekozen die op margin-bottom: 3rem... (384 pagina's)
 *   .step-text strong: 2 varianten, gekozen die op display: block; margin-bottom: .2rem; color: #111827... (384 pagina's)
 *   .step-text: 2 varianten, gekozen die op color: #4b5563... (384 pagina's)
 *   details.faq-item: 2 varianten, gekozen die op background: #fff; border-radius: 12px; margin-bottom: .75rem... (384 pagina's)
 *   details.faq-item summary: 2 varianten, gekozen die op padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; co... (384 pagina's)
 *   details.faq-item summary::after: 2 varianten, gekozen die op content: "+"; position: absolute; right: 1.25rem; top: 50%; ... (384 pagina's)
 *   details.faq-item[open] summary::after: 2 varianten, gekozen die op content: "−"... (384 pagina's)
 *   .faq-answer: 2 varianten, gekozen die op padding: .75rem 1.25rem 1rem; color: #4b5563; border-top: 1p... (384 pagina's)
 *   .cta-route-block p: 2 varianten, gekozen die op color: rgba(255,255,255,.8); margin-bottom: 1rem... (384 pagina's)
 *   .related-routes-wrap a: 2 varianten, gekozen die op background: #eef3ff; color: #1a56db; padding: .4rem 1rem; bo... (384 pagina's)
 *   .related-routes-wrap a:hover: 2 varianten, gekozen die op background: #dbeafe; text-decoration: none... (384 pagina's)
 *   .route-section p: 2 varianten, gekozen die op color: #4b5563... (384 pagina's)
 *   .comp-amount: 3 varianten, gekozen die op font-size:2.8rem;font-weight:800;color:#7c3aed;line-height:1... (38 pagina's)
 *   .hub-intro: 2 varianten, gekozen die op max-width: 720px; margin: 0 auto 2.5rem; color: #4b5563; fon... (5 pagina's)
 *   .route-group: 2 varianten, gekozen die op margin-bottom: 2.5rem... (5 pagina's)
 *   .route-group h2: 2 varianten, gekozen die op font-size: 1.3rem; font-weight: 700; color: #111827; border-... (5 pagina's)
 *   .route-group ul: 2 varianten, gekozen die op list-style: none; display: grid; grid-template-columns: repe... (5 pagina's)
 */

/* ══════════════════════════════════════════════════════════════════════
   HANDMATIG ONDERHOUDEN — NIET GEGENEREERD          [handmatig-blok]
   ══════════════════════════════════════════════════════════════════════

   Alles hierboven is door scripts/bundel_css.py uit de pagina's getrokken.
   Alles hieronder is met de hand geschreven en moet blijven staan.

   Waarom dit blok bestaat: 104 klassen op de site hadden nergens een
   CSS-regel. De 64 Letse routepagina's droegen daardoor een compleet
   ongestileerde hero, boarding-card en info-grid — kale tekst op wit, terwijl
   dezelfde pagina in twaalf andere talen een blauwe hero met een kaart toont.
   Dat was de zichtbare kant van "de andere pagina's zien er anders uit".

   De regels hieronder gebruiken dezelfde tokens als de rest van dit bestand
   (#1a56db, 12px radius, dezelfde schaduw), zodat de twee sjablonen naast
   elkaar hetzelfde ogen. Dat de HTML nog uiteenloopt is een apart punt; zie
   out/2026-08-01-eindrapport.md.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero met twee kolommen (Lets sjabloon) ─────────────────────────── */
.route-hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; text-align: left; margin-top: 1.5rem }
.route-hero__text h1 { margin-left: 0; margin-right: 0; max-width: none }
.route-hero__text .lead { font-size: 1.05rem; color: rgba(255,255,255,.88); line-height: 1.65; margin-bottom: 0 }
.route-hero__sub { font-size: .95rem; color: rgba(255,255,255,.75); margin-top: .5rem }
.route-hero__card { display: flex; justify-content: center }
@media (max-width: 820px) {
  .route-hero__inner { grid-template-columns: 1fr; gap: 1.75rem; text-align: center }
  .route-hero__text h1 { margin-left: auto; margin-right: auto }
}

/* ── Instapkaart: het blikvanger-element van de Letse routepagina ───── */
.boarding-card { background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.3); border-radius: 16px; padding: 1.5rem 1.75rem; min-width: 260px; backdrop-filter: blur(2px) }
.boarding-card__route { display: flex; align-items: center; justify-content: center; gap: .85rem; margin-bottom: .35rem }
.boarding-card__code { font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 800; color: #fff; letter-spacing: .04em }
.boarding-card__arrow { font-size: 1.35rem; color: rgba(255,255,255,.7) }
.boarding-card__info { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .85rem; color: rgba(255,255,255,.75); padding-bottom: .9rem; border-bottom: 1px solid rgba(255,255,255,.2) }
.boarding-card__comp { margin-top: .9rem; text-align: center; font-size: 1.15rem; color: #fff }
.boarding-card__comp strong { font-size: 1.6rem; font-weight: 900 }

/* ── Info-grid in BEM-vorm — gelijk aan .info-card/.ic-label hierboven ─ */
.info-grid__item { background: #fff; border-radius: 12px; padding: 1.25rem 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,.06); border-left: 4px solid #1a56db }
.info-grid__label { font-size: .78rem; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .3rem }
.info-grid__value { font-size: 1.15rem; font-weight: 700; color: #111827 }

/* ── FAQ in BEM-vorm ────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: .6rem }
.faq { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden }
.faq__body { padding: .75rem 1.25rem 1rem; color: #4b5563; border-top: 1px solid #f3f4f6 }

/* ── Routekaarten op de overzichtspagina's ──────────────────────────── */
.route-grid, .routes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.5rem 0 }
.route-card { display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.1rem 1.25rem; text-decoration: none; color: inherit; transition: box-shadow 180ms, transform 180ms }
.route-card:hover { box-shadow: 0 8px 24px rgba(16,24,40,.10); transform: translateY(-2px) }
.route-card__iata { font-size: .8rem; font-weight: 700; color: #1a56db; letter-spacing: .06em }
.route-card__label { font-size: 1rem; font-weight: 600; color: #111827; margin-top: .15rem }
.route-card__comp { font-size: .9rem; color: #6b7280; margin-top: .45rem }

/* ── Artikelkaarten ─────────────────────────────────────────────────── */
.article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem }
.article-card, .card--article { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.25rem 1.4rem; transition: box-shadow 180ms }
.article-card:hover, .card--article:hover { box-shadow: 0 8px 24px rgba(16,24,40,.10) }
.article-card__icon { font-size: 1.5rem; margin-bottom: .5rem }
.article-card__cta, .card__link { display: inline-block; margin-top: .6rem; font-weight: 600; color: #1a56db; text-decoration: none }
.article-card__cta:hover, .card__link:hover { text-decoration: underline }
.card--link { display: block; text-decoration: none; color: inherit }
.card__label { font-size: .78rem; color: #6b7280; text-transform: uppercase; letter-spacing: .5px }
.card__title { font-size: 1.05rem; font-weight: 700; color: #111827; margin-top: .2rem }

/* ── Losse elementen ────────────────────────────────────────────────── */
.lead { font-size: 1.08rem; line-height: 1.65; color: #4b5563 }
.section--cta { background: linear-gradient(135deg, #1a56db 0%, #1245b5 100%); color: #fff; padding: 3rem 0; text-align: center }
.section--cta h2, .section--cta p { color: #fff }
.section--gray { background: #f6f8fb }
.alert--warning { background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12 }
.cta-box { background: #f6f8fb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; text-align: center }
.comp-table, .table { width: 100%; border-collapse: collapse; font-size: .92rem }
.comp-table th, .comp-table td, .table th, .table td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid #eef1f5 }
.comp-table th, .table th { color: #6b7280; font-weight: 600 }
.comp-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid #eef1f5 }
.hint, .note, .footnote { font-size: .85rem; color: #6b7280 }
/* Een tekstlink midden in een alinea — de Estse pagina's gebruiken deze naam. */
.link { color: #1a56db; text-decoration: underline; text-underline-offset: 2px }
.link:hover { color: #1245b5 }

/* ── Hulpklassen die in de HTML staan maar nergens waren gedefinieerd ─ */
.mb-3 { margin-bottom: .75rem } .mb-10 { margin-bottom: 2.5rem } .mb-12 { margin-bottom: 3rem }
.mt-10 { margin-top: 2.5rem }