/* ═══════════════════════════════════════════════════════════════════════════
   Verhuismarkt — routegidsen (/moving-from-<van>-to-<naar>/) + routekaarten op landpagina's
   Bouwer routes-seo 30-09-2026; herontwerp ROUTES-R3 (routes-land) 30-09-2026.
   Bouwt op de tokens uit movingcompare.css (--mc-*).
   Regels: inhoud is standaard zichtbaar. Verbergen gebeurt alleen onder html.cor-js (door JS gezet)
   en html.cor-now (failsafe na 1500 ms) toont alles zonder overgang. Alle beweging staat uit bij
   prefers-reduced-motion. Amber alleen als vlak/decor, nooit als tekst op licht (brand.md).
   ═══════════════════════════════════════════════════════════════════════════ */

.cor-body { background: var(--mc-canvas); }
.cor-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 480px) { .cor-wrap { padding: 0 16px; } }
.cor-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.cor-hero {
    position: relative; overflow: hidden; color: #fff;
    padding: 112px 0 64px;
    background:
        radial-gradient(700px 360px at 92% -10%, rgba(245,165,36,.16), transparent 60%),
        radial-gradient(900px 500px at -10% 120%, rgba(43,93,176,.55), transparent 60%),
        linear-gradient(160deg, var(--mc-navy-deep) 0%, var(--mc-navy) 100%);
}
.cor-hero::before { /* fijn raster, zelfde taal als de homepage */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(169,193,238,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(169,193,238,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.cor-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px; align-items: center; }
.cor-crumbs { font-size: var(--mc-fs-xs); color: #C4D2EE; margin: 0 0 18px; }
.cor-crumbs a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.cor-crumbs a:hover { text-decoration-color: #fff; }
.cor-eyebrow {
    display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px;
    font-size: var(--mc-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-mist);
}
.cor-eyebrow span { letter-spacing: 0; font-size: 1rem; }
.cor-hero h1 {
    font-size: var(--mc-fs-3xl); font-weight: 800; letter-spacing: -.035em; line-height: 1.04;
    margin: 0 0 16px; color: #fff; text-wrap: balance;
}
.cor-lead { font-size: var(--mc-fs-md); color: #DCE5F6; line-height: 1.6; margin: 0 0 26px; max-width: 34em; }
.cor-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 28px; }
.cor-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; text-decoration: none; min-height: 48px; }
.cor-btn-ghost {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--mc-pill);
    color: #fff; text-decoration: none; font-weight: 700; border: 1px solid rgba(169,193,238,.45);
    transition: border-color .2s, background .2s;
}
.cor-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.cor-hero a:focus-visible { outline: 3px solid var(--mc-amber); outline-offset: 3px; }

.cor-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cor-chips li {
    display: flex; flex-direction: column; padding: 10px 16px; border-radius: var(--mc-r);
    background: rgba(255,255,255,.07); border: 1px solid rgba(169,193,238,.18);
}
.cor-chips li:first-child { border-color: rgba(245,165,36,.55); box-shadow: inset 0 -3px 0 var(--mc-amber); }
.cor-chips strong { font-size: 1.05rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.cor-chips span { font-size: var(--mc-fs-xs); color: #C4D2EE; }
.cor-chips strong span { font-size: inherit; color: inherit; }

/* Fotokaart met reisstrook */
.cor-photo {
    position: relative; margin: 0; border-radius: var(--mc-r-xl); overflow: hidden; aspect-ratio: 16 / 11;
    background: var(--mc-navy-deep); box-shadow: 0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(169,193,238,.18);
}
.cor-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cor-photo::after { /* leesbaarheid van de strook onderin */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgba(11,29,69,.55) 70%, rgba(11,29,69,.92) 100%);
}
.cor-trip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 18px 14px; }
.cor-trip-km {
    position: absolute; left: 50%; top: -6px; transform: translateX(-50%); margin: 0; white-space: nowrap;
    padding: 6px 14px; border-radius: var(--mc-pill); background: var(--mc-amber); color: var(--mc-navy);
    font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5);
}
.cor-trip-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cor-trip-base { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; }
.cor-trip-line { fill: none; stroke: var(--mc-amber); stroke-width: 4; stroke-linecap: round; }
.cor-trip-city { fill: #fff; font: 700 15px/1 'Inter', system-ui, sans-serif; paint-order: stroke; stroke: rgba(11,29,69,.85); stroke-width: 4px; stroke-linejoin: round; }
.cor-trip-city-to { fill: #FFE1A8; }
.cor-truck { filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)); }

.cor-pin-from { fill: #fff; stroke: var(--mc-navy); stroke-width: 3; }
.cor-pin-to { fill: var(--mc-amber); stroke: var(--mc-navy); stroke-width: 3; }
.cor-pin-ring { fill: none; stroke: var(--mc-amber); stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; animation: cor-ping 2.2s var(--mc-ease) infinite; }
@keyframes cor-ping { 0% { transform: scale(.7); opacity: .7; } 80%, 100% { transform: scale(1.9); opacity: 0; } }

/* Schematische kaart (sectie Route) */
.cor-route-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.cor-map {
    margin: 0; padding: 14px 14px 10px; border-radius: var(--mc-r-lg);
    background: radial-gradient(300px 200px at 90% 0%, rgba(245,165,36,.14), transparent 60%), linear-gradient(160deg, var(--mc-navy-deep), var(--mc-navy));
}
.cor-map-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cor-route-base { fill: none; stroke: rgba(169,193,238,.28); stroke-width: 5; stroke-linecap: round; }
.cor-route-dash {
    fill: none; stroke: var(--mc-amber); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 2 11; animation: cor-dash 1.1s linear infinite;
}
@keyframes cor-dash { to { stroke-dashoffset: -13; } }
.cor-city { fill: #fff; font: 700 15px/1 'Inter', system-ui, sans-serif; paint-order: stroke; stroke: var(--mc-navy-deep); stroke-width: 4px; stroke-linejoin: round; }
.cor-city-to { fill: #FFE1A8; }
.cor-map figcaption { margin-top: 6px; font-size: var(--mc-fs-xs); color: #C4D2EE; text-align: center; }

/* ── Inhoudsnavigatie ─────────────────────────────────────────────────── */
.cor-toc { background: #fff; border-bottom: 1px solid var(--mc-line); }
.cor-toc .cor-wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 8px; padding-bottom: 8px; }
.cor-toc .cor-wrap::-webkit-scrollbar { display: none; }
.cor-toc a {
    flex: 0 0 auto; padding: 8px 14px; border-radius: var(--mc-pill); font-size: var(--mc-fs-sm); font-weight: 600;
    color: var(--mc-ink-2); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center;
}
.cor-toc a:hover { background: var(--mc-tint); color: var(--mc-navy); }
.cor-toc a:focus-visible { outline: none; box-shadow: var(--mc-focus); }
@media (min-width: 900px) { .cor-toc { position: sticky; top: 64px; z-index: 50; } }

/* ── Artikel ──────────────────────────────────────────────────────────── */
.cor-article { padding: 40px 20px 24px; max-width: 920px; }
.cor-article [id] { scroll-margin-top: 136px; }
.cor-intro {
    font-size: var(--mc-fs-md); line-height: 1.7; color: var(--mc-ink); margin: 0 0 28px;
    padding-left: 18px; border-left: 4px solid var(--mc-amber);
}
.cor-block {
    background: var(--mc-surface); border: 1px solid var(--mc-line); border-radius: var(--mc-r-lg);
    padding: 32px 32px 28px; margin-bottom: 20px; box-shadow: var(--mc-sh-1);
}
.cor-block h2, .cor-syoh h2, .cor-more h2, .cor-cta h2 {
    font-size: var(--mc-fs-xl); font-weight: 800; color: var(--mc-navy); margin: 0 0 14px; letter-spacing: -.025em; line-height: 1.2;
}
.cor-block h3 { font-size: 1.02rem; font-weight: 700; color: var(--mc-navy); margin: 20px 0 8px; }
.cor-block p, .cor-block li { color: var(--mc-ink-2); line-height: 1.7; font-size: .98rem; }
.cor-block p { margin: 0 0 12px; }
.cor-block a { color: var(--mc-blue); font-weight: 600; text-underline-offset: 3px; }
.cor-block a:hover { color: var(--mc-blue-dark); }
.cor-note { font-size: var(--mc-fs-sm); color: var(--mc-muted) !important; }
.cor-note-top { margin-top: -6px !important; }
.cor-dim { color: var(--mc-muted); }
.cor-kicker { margin: 0 0 6px; font-size: var(--mc-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-blue); }

.cor-table-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--mc-line); border-radius: var(--mc-r); }
.cor-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.cor-table th, .cor-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--mc-line); }
.cor-table tbody tr:last-child td { border-bottom: 0; }
.cor-table tbody tr:first-child td { background: var(--mc-tint); font-weight: 600; color: var(--mc-navy); }
.cor-table th { background: var(--mc-canvas); color: var(--mc-muted); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.cor-table td:last-child, .cor-table th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Opties */
.cor-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.cor-opt {
    border: 1px solid var(--mc-line); border-radius: var(--mc-r); padding: 20px 18px; background: linear-gradient(180deg, var(--mc-canvas), #fff 60%);
    transition: transform .25s var(--mc-ease), box-shadow .25s, border-color .25s;
}
.cor-opt:hover { transform: translateY(-3px); box-shadow: var(--mc-sh-2); border-color: var(--mc-line-strong); }
.cor-ico {
    display: inline-flex; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center;
    background: var(--mc-navy); color: #fff; font-size: 1rem; margin-bottom: 12px;
    box-shadow: inset 0 -3px 0 var(--mc-amber);
}
.cor-opt h3 { margin: 0 !important; }
.cor-opt-sub { font-size: var(--mc-fs-xs) !important; color: var(--mc-muted) !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin: 2px 0 10px !important; }
.cor-opt p:last-child { font-size: .93rem; margin: 0; }

/* Prijsfactoren */
.cor-factors { list-style: none; padding: 0; margin: 14px 0 16px; display: grid; gap: 10px; counter-reset: f; }
.cor-factors li {
    counter-increment: f; position: relative; padding: 14px 16px 14px 56px; margin: 0;
    background: var(--mc-canvas); border-radius: var(--mc-r); display: flex; flex-direction: column; gap: 2px;
}
.cor-factors li::before {
    content: counter(f); position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 1px solid var(--mc-line-strong); color: var(--mc-navy); font-weight: 800; font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
}
.cor-factors strong { color: var(--mc-navy); }
.cor-factors span { font-size: .94rem; }

/* Bronnen */
.cor-sources { list-style: none; padding: 0; margin: 8px 0 14px; display: grid; gap: 8px; }
.cor-sources li { margin: 0; }
.cor-sources a {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--mc-line); border-radius: var(--mc-r);
    text-decoration: none; font-size: .92rem; line-height: 1.45;
}
.cor-sources a::before { content: '\2197'; color: var(--mc-blue); font-weight: 800; }
.cor-sources a:hover { border-color: var(--mc-blue); background: var(--mc-tint); }

/* Stappen: tijdlijn. Zonder JS: stippellijn + navy nummers. Met JS (.is-live): amber vulling volgt het scrollen. */
.cor-steps { --cor-fill: 0; list-style: none; padding: 0; margin: 8px 0 0; position: relative; }
.cor-steps::before, .cor-steps::after { content: ''; position: absolute; left: 19px; top: 20px; bottom: 28px; width: 2px; }
.cor-steps::before { background: repeating-linear-gradient(180deg, var(--mc-line-strong) 0 6px, transparent 6px 11px); }
.cor-steps::after { background: var(--mc-amber); transform-origin: top; transform: scaleY(0); }
.cor-steps.is-live::after { transform: scaleY(var(--cor-fill)); transition: transform .15s linear; }
.cor-steps li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 0 0 18px; margin: 0; }
.cor-step-n {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--mc-navy); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; position: relative; z-index: 1;
    box-shadow: 0 0 0 4px #fff; transition: background .3s, color .3s, transform .3s var(--mc-ease);
}
.cor-steps li:last-child .cor-step-n, .cor-steps.is-live li.is-on .cor-step-n { background: var(--mc-amber); color: var(--mc-navy); }
.cor-steps.is-live li.is-on .cor-step-n { transform: scale(1.06); }
.cor-step-body { padding: 10px 16px 12px; border-radius: var(--mc-r); background: var(--mc-canvas); border: 1px solid transparent; transition: border-color .3s, background .3s; }
.cor-steps.is-live li.is-on .cor-step-body { background: #fff; border-color: var(--mc-line); box-shadow: var(--mc-sh-1); }
.cor-step-k { margin: 0 !important; font-size: var(--mc-fs-xs) !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-muted) !important; }
.cor-step-body p:last-child { margin: 2px 0 0 !important; }

/* Checklist met vinkjes */
.cor-check-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; padding: 12px 14px; border-radius: var(--mc-r); background: var(--mc-tint); }
.cor-check-bar[hidden] { display: none; }
.cor-check-meter { flex: 1 1 160px; height: 8px; border-radius: 99px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--mc-line-strong); }
.cor-check-meter span { display: block; height: 100%; width: 0; background: var(--mc-amber); border-radius: inherit; transition: width .35s var(--mc-ease); }
.cor-check-count { margin: 0 !important; font-weight: 700; color: var(--mc-navy) !important; font-size: var(--mc-fs-sm) !important; font-variant-numeric: tabular-nums; }
.cor-check-bar.is-complete .cor-check-count::after { content: ' \2713'; }
.cor-check-reset {
    min-height: 36px; padding: 0 14px; border-radius: var(--mc-pill); border: 1px solid var(--mc-line-strong); background: #fff;
    color: var(--mc-ink-2); font: 600 var(--mc-fs-sm)/1 inherit; cursor: pointer;
}
.cor-check-reset:hover { border-color: var(--mc-blue); color: var(--mc-navy); }
.cor-check-reset:focus-visible { outline: none; box-shadow: var(--mc-focus); }
.cor-check { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cor-check li { margin: 0; }
.cor-check-item {
    display: flex; gap: 12px; align-items: flex-start; height: 100%; padding: 14px 16px; cursor: pointer;
    border: 1px solid var(--mc-line); border-radius: var(--mc-r); background: #fff; font-size: .94rem; line-height: 1.5; color: var(--mc-ink-2);
    transition: border-color .2s, background .2s;
}
.cor-check-item:hover { border-color: var(--mc-line-strong); background: var(--mc-canvas); }
.cor-cb { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cor-cb-box {
    flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 2px solid var(--mc-line-strong); background: #fff;
    display: inline-flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, transform .2s var(--mc-ease);
}
.cor-cb-box svg path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset .25s var(--mc-ease); }
.cor-cb:checked + .cor-cb-box { background: var(--mc-navy); border-color: var(--mc-navy); transform: scale(1.05); }
.cor-cb:checked + .cor-cb-box svg path { stroke-dashoffset: 0; }
.cor-cb:focus-visible + .cor-cb-box { box-shadow: var(--mc-focus); }
.cor-cb:checked ~ .cor-check-t { color: var(--mc-muted); text-decoration: line-through; text-decoration-color: var(--mc-line-strong); }
.cor-check li.is-done .cor-check-item { background: var(--mc-canvas); }

/* FAQ-accordeon */
.cor-faq { display: grid; gap: 10px; }
.cor-faq-item { border: 1px solid var(--mc-line); border-radius: var(--mc-r); background: #fff; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.cor-faq-item[open] { border-color: var(--mc-line-strong); box-shadow: var(--mc-sh-2); }
.cor-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none;
    padding: 16px 18px; min-height: 52px; font-weight: 700; color: var(--mc-navy); line-height: 1.4;
}
.cor-faq-item summary::-webkit-details-marker { display: none; }
.cor-faq-item summary:hover { background: var(--mc-canvas); }
.cor-faq-item summary:focus-visible { outline: none; box-shadow: inset var(--mc-focus); }
.cor-faq-ico { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--mc-tint); transition: background .25s, transform .3s var(--mc-ease); }
.cor-faq-ico::before, .cor-faq-ico::after { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; border-radius: 2px; background: var(--mc-navy); transition: transform .3s var(--mc-ease), background .25s; }
.cor-faq-ico::after { transform: rotate(90deg); }
.cor-faq-item[open] .cor-faq-ico { background: var(--mc-navy); transform: rotate(180deg); }
.cor-faq-item[open] .cor-faq-ico::before, .cor-faq-item[open] .cor-faq-ico::after { background: #fff; }
.cor-faq-item[open] .cor-faq-ico::after { transform: rotate(0deg); }
.cor-faq-a { padding: 0 18px 16px; }
.cor-faq-a p { margin: 0 !important; }
@supports (interpolate-size: allow-keywords) {
    .cor-faq { interpolate-size: allow-keywords; }
    .cor-faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--mc-ease), content-visibility .3s allow-discrete; }
    .cor-faq-item[open]::details-content { block-size: auto; }
}

/* Zustersite */
.cor-syoh { margin: 36px 0 20px; }
.cor-syoh-lead { color: var(--mc-ink-2); margin: -4px 0 16px; }
.cor-syoh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cor-syoh-card {
    display: flex; flex-direction: column; border-radius: var(--mc-r-lg); background: #fff; border: 1px solid var(--mc-line); overflow: hidden;
    text-decoration: none; box-shadow: var(--mc-sh-1); transition: transform .25s var(--mc-ease), box-shadow .25s, border-color .25s;
}
.cor-syoh-card:hover { transform: translateY(-3px); box-shadow: var(--mc-sh-3); border-color: var(--mc-line-strong); }
.cor-syoh-card:focus-visible { outline: none; box-shadow: var(--mc-focus); }
.cor-syoh-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; transition: transform .6s var(--mc-ease); }
.cor-syoh-card:hover .cor-syoh-img { transform: scale(1.04); }
.cor-syoh-body { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; padding: 16px 18px 18px; position: relative; background: #fff; }
.cor-syoh-flag { grid-row: 1 / 3; font-size: 1.7rem; line-height: 1; }
.cor-syoh-t { font-weight: 800; color: var(--mc-navy); }
.cor-syoh-s { font-size: var(--mc-fs-sm); color: var(--mc-blue); font-weight: 600; }

/* CTA */
.cor-cta {
    margin: 36px 0; padding: 44px 28px; border-radius: var(--mc-r-xl); text-align: center; color: #fff; position: relative; overflow: hidden;
    background: radial-gradient(500px 240px at 100% 0%, rgba(245,165,36,.2), transparent 60%), linear-gradient(160deg, var(--mc-navy-deep), var(--mc-navy));
}
.cor-cta h2 { color: #fff !important; }
.cor-cta p { color: #DCE5F6; margin: 0 auto 22px; max-width: 32em; }
.cor-cta a:focus-visible { outline: 3px solid var(--mc-amber); outline-offset: 3px; }
.cor-cta-route { display: inline-flex; align-items: center; gap: 12px; margin: 0 auto 14px !important; font-weight: 700; font-size: var(--mc-fs-sm); color: var(--mc-mist) !important; }
.cor-cta-route i { width: 72px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff 0 10%, var(--mc-amber) 10% 100%); position: relative; }
.cor-cta-route i::after { content: ''; position: absolute; right: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--mc-amber); }

/* Andere routes (ook gebruikt op land.php) */
.cor-more { margin: 8px 0 48px; }
.cor-route-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cor-route-cards li { margin: 0; }
.cor-route-card {
    display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px; border-radius: var(--mc-r-lg);
    background: #fff; border: 1px solid var(--mc-line); text-decoration: none; box-shadow: var(--mc-sh-1); overflow: hidden;
    transition: transform .25s var(--mc-ease), box-shadow .25s, border-color .25s;
}
.cor-route-card:hover { transform: translateY(-3px); box-shadow: var(--mc-sh-3); border-color: var(--mc-line-strong); }
.cor-route-card:focus-visible { outline: none; box-shadow: var(--mc-focus); }
.cor-rc-flags { font-size: 1.15rem; }
.cor-rc-t { font-weight: 800; color: var(--mc-navy); }
.cor-rc-s { font-size: var(--mc-fs-xs); color: var(--mc-muted); }
.cor-rc-go { margin-top: 6px; font-size: var(--mc-fs-sm); color: var(--mc-blue); font-weight: 700; }
/* Beeldkaarten */
.cor-route-cards--img .cor-route-card, .cor-route-card:has(.cor-rc-img) { padding: 0; gap: 0; }
.cor-rc-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s var(--mc-ease); }
.cor-route-card:hover .cor-rc-img { transform: scale(1.04); }
.cor-rc-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 18px; position: relative; background: #fff; flex: 1; }

/* ── Reveals (alleen onder html.cor-js; failsafe html.cor-now) ───────── */
html.cor-js .cor-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--mc-ease), transform .6s var(--mc-ease); }
html.cor-js .cor-rv.is-in { opacity: 1; transform: none; }
html.cor-now .cor-rv { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ── Landpagina: "Popular routes to <land>" (opmaak landpagina zelf: mc-land.css) ── */
.land-routes { padding: 56px 0 8px; }
.land-routes .mp-section-sub { margin-bottom: 24px; }
.land-routes .cor-route-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; }
@media (max-width: 600px) { .land-routes .cor-route-cards { grid-template-columns: 1fr; } }

/* Landpagina: blok naar sellyourownhouse */
.land-syoh {
    max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid var(--mc-line); border-left: 4px solid var(--mc-amber);
    border-radius: var(--mc-r-lg); padding: 26px 28px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: space-between;
    box-shadow: var(--mc-sh-1);
}
.land-syoh > div { flex: 1; min-width: 240px; }
.land-syoh h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 8px; color: var(--mc-navy); }
.land-syoh p { font-size: .93rem; color: var(--mc-ink-2); margin: 0; line-height: 1.6; }
.land-syoh a {
    display: inline-flex; align-items: center; min-height: 46px; background: var(--mc-navy); color: #fff; padding: 0 22px;
    border-radius: var(--mc-pill); font-weight: 700; font-size: .92rem; white-space: nowrap; text-decoration: none;
}
.land-syoh a:hover { background: var(--mc-blue-dark); }
.land-syoh a:focus-visible { outline: none; box-shadow: var(--mc-focus); }

/* ── Responsief ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .cor-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .cor-photo { max-width: 640px; }
}
@media (max-width: 760px) {
    .cor-route-grid { grid-template-columns: 1fr; }
    .cor-map { max-width: 360px; }
}
@media (max-width: 700px) {
    .cor-opts { grid-template-columns: 1fr; }
    .cor-check { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .cor-hero { padding: 88px 0 36px; }
    .cor-hero h1 { font-size: 2.1rem; }
    .cor-photo { aspect-ratio: 4 / 3.4; border-radius: var(--mc-r-lg); }
    .cor-trip { padding: 0 8px 8px; }
    .cor-trip-km { font-size: .84rem; top: -34px; }
    .cor-trip-city { font-size: 19px; }
    .cor-block { padding: 22px 18px 18px; border-radius: var(--mc-r); }
    .cor-article { padding: 28px 16px 16px; }
    .cor-intro { font-size: 1rem; }
    .cor-hero-actions .cor-btn, .cor-hero-actions .cor-btn-ghost { flex: 1 1 100%; justify-content: center; }
    .cor-chips { gap: 8px; flex-wrap: nowrap; }
    .cor-chips li { flex: 1 1 0; min-width: 0; padding: 9px 10px; }
    .cor-chips strong { font-size: .92rem; white-space: nowrap; }
    .cor-chips > li > span { font-size: .7rem; }
    .cor-cta { padding: 32px 20px; }
    .cor-cta .cor-btn { width: 100%; justify-content: center; }
    .cor-table th, .cor-table td { padding: 10px; }
    .cor-step-body { padding: 8px 12px 10px; }
    .land-syoh { padding: 20px 18px; }
    .land-syoh a { width: 100%; justify-content: center; }
}

/* Knoppen in hero/CTA: gedeelde .mp-btn-hero heeft eigen marge; hier uitlijnen op de rij */
.cor-hero-actions .cor-btn, .cor-cta .cor-btn { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .cor-route-dash, .cor-pin-ring { animation: none; }
    .cor-pin-ring { opacity: .35; }
    .cor-opt, .cor-route-card, .cor-syoh-card, .cor-rc-img, .cor-syoh-img, .cor-step-n, .cor-faq-ico, .cor-faq-ico::before, .cor-faq-ico::after, .cor-cb-box, .cor-cb-box svg path, .cor-check-meter span { transition: none !important; }
    .cor-opt:hover, .cor-route-card:hover, .cor-syoh-card:hover { transform: none; }
    .cor-route-card:hover .cor-rc-img, .cor-syoh-card:hover .cor-syoh-img { transform: none; }
    .cor-faq-item::details-content { transition: none !important; }
}

/* ── [POLIJST-20260930] Inhoudsopgave links + CTA-kaart rechts vanaf 1200 px; scroll-spy-markering ── */
.cor-toc a.is-active { background: var(--mc-tint); color: var(--mc-navy); box-shadow: inset 0 0 0 1px var(--mc-line-strong); }
.cor-side { display: none; }
@media (min-width: 1200px) {
    .cor-layout { display: grid; grid-template-columns: 188px minmax(0, 780px) 272px; gap: 0 40px; justify-content: center; align-items: start; max-width: 1400px; margin: 0 auto; padding: 0 24px; }
    .cor-toc { position: sticky; top: 96px; z-index: 5; background: transparent; border: 0; padding-top: 44px; }
    .cor-toc .cor-wrap { display: flex; flex-direction: column; gap: 2px; padding: 0 0 0 14px; margin: 0; max-width: none; overflow: visible; border-left: 2px solid var(--mc-line); }
    .cor-toc .cor-wrap::before { content: 'On this page'; display: block; margin: 0 0 8px; font-size: var(--mc-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mc-muted); }
    .cor-toc a { min-height: 34px; padding: 6px 12px; margin-left: -16px; border-radius: 0 var(--mc-pill) var(--mc-pill) 0; border-left: 2px solid transparent; }
    .cor-toc a.is-active { background: var(--mc-tint); box-shadow: none; border-left-color: var(--mc-amber); color: var(--mc-navy); }
    .cor-article { padding: 40px 0 24px; max-width: none; margin: 0; }
    .cor-article [id] { scroll-margin-top: 96px; }
    .cor-side { display: block; position: sticky; top: 96px; margin-top: 44px; }
    .cor-side-card { background: #fff; border: 1px solid var(--mc-line); border-radius: var(--mc-r-lg); padding: 20px; box-shadow: var(--mc-sh-2); position: relative; overflow: hidden; }
    .cor-side-card::before { content: ''; position: absolute; left: 20px; top: 0; width: 48px; height: 4px; border-radius: 0 0 2px 2px; background: var(--mc-amber); }
    .cor-side-route { margin: 4px 0 6px; font-size: 1.3rem; line-height: 1; }
    .cor-side-route span { font-size: .9rem; color: var(--mc-muted); vertical-align: middle; }
    .cor-side-card h2 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; color: var(--mc-navy); }
    .cor-side-card p { margin: 0 0 14px; font-size: .9rem; line-height: 1.55; color: var(--mc-ink-2); }
    .cor-side-btn { width: 100%; justify-content: center; margin: 0 !important; }
    .cor-side-card .cor-side-note { margin: 10px 0 0; font-size: .78rem; color: var(--mc-muted); }
}
.cor-checked { margin: 14px 0 4px; font-size: .82rem; color: var(--mc-muted); display: block; } .cor-checked::before { content: "\2713"; color: var(--mc-blue); font-weight: 800; display: inline-block; margin-right: 6px; } /* [POLIJST3] block i.p.v. flex: tekst, datum en punt blijven één zin */

/* [POLIJST3-20260930] Mobiel: de 3 transportopties horizontaal swipen (scroll-snap), scheelt ruim een scherm */
@media (max-width: 640px) {
    .cor-opts { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 8px -16px 0; padding: 4px 16px 14px; scroll-padding: 0 16px; scrollbar-width: none; }
    .cor-opts::-webkit-scrollbar { display: none; }
    .cor-opts > .cor-opt { flex: 0 0 80vw; max-width: 330px; scroll-snap-align: start; }
    .cor-opt:hover { transform: none; }
}

/* ══ [COMPACT-20260930] Routegids mobiel (< 600 px): compacter en rustiger, zonder inhoud weg te laten ══════════════
   Strakkere blokken en regelafstand, kleinere schemakaart, stappen zonder kaartjes, checklist strakker,
   zustersite-kaarten als compacte rij met fotootje, "Other popular routes" als veegrij. */
@media (max-width: 599px) {
    .cor-hero { padding: 80px 0 28px; }
    .cor-hero h1 { font-size: 1.9rem; }
    .cor-hero-grid { gap: 22px; }
    .cor-photo { aspect-ratio: 16 / 10.5; }
    .cor-toc .cor-wrap { padding-top: 6px; padding-bottom: 6px; }

    .cor-article { padding: 20px 14px 8px; }
    .cor-intro { font-size: .97rem; line-height: 1.6; padding-left: 14px; margin-bottom: 16px; }
    .cor-block { padding: 18px 16px 12px; margin-bottom: 12px; }
    .cor-block h2, .cor-syoh h2, .cor-more h2, .cor-cta h2 { font-size: 1.42rem; margin-bottom: 10px; }
    .cor-block h3 { margin: 14px 0 6px; }
    .cor-block p, .cor-block li { font-size: .94rem; line-height: 1.6; }
    .cor-block p { margin-bottom: 10px; }

    /* Route: schemakaart kleiner, tabel strakker */
    .cor-route-grid { gap: 12px; }
    .cor-map { max-width: 230px; margin: 0 auto; padding: 10px 10px 6px; }
    .cor-table-wrap { margin: 10px 0; }
    .cor-table { font-size: .88rem; }
    .cor-table th, .cor-table td { padding: 7px 10px; line-height: 1.4; }

    /* Opties (veegrij) en prijsfactoren */
    .cor-opt { padding: 14px 14px; }
    .cor-ico { width: 36px; height: 36px; margin-bottom: 8px; }
    .cor-opt-sub { margin-bottom: 6px !important; }
    .cor-opt p:last-child { font-size: .9rem; line-height: 1.55; }
    .cor-factors { gap: 6px; margin: 10px 0 12px; }
    .cor-factors li { padding: 10px 12px 10px 46px; }
    .cor-factors li::before { left: 12px; top: 10px; width: 24px; height: 24px; }
    .cor-factors span { font-size: .9rem; line-height: 1.5; }

    /* Papierwerk */
    .cor-sources { gap: 6px; }
    .cor-sources a { padding: 8px 12px; font-size: .88rem; }
    .cor-checked { margin-top: 10px; }

    /* Stappen: nummer + tekst, geen kaartjes */
    .cor-steps::before, .cor-steps::after { left: 13px; top: 14px; }
    .cor-steps li { grid-template-columns: 28px 1fr; gap: 12px; padding-bottom: 12px; }
    .cor-step-n { width: 28px; height: 28px; font-size: .8rem; }
    .cor-step-body, .cor-steps.is-live li.is-on .cor-step-body { padding: 2px 0 0; background: none; border: 0; box-shadow: none; }
    .cor-step-body p { font-size: .92rem !important; line-height: 1.5 !important; }

    /* Checklist */
    .cor-check-bar { padding: 8px 12px; margin-bottom: 10px; gap: 8px 12px; }
    .cor-check { gap: 6px; }
    .cor-check-item { padding: 9px 12px; gap: 10px; font-size: .9rem; line-height: 1.45; }
    .cor-cb-box { flex-basis: 20px; width: 20px; height: 20px; }

    /* FAQ */
    .cor-faq { gap: 8px; }
    .cor-faq-item summary { padding: 12px 14px; min-height: 48px; font-size: .94rem; }
    .cor-faq-a { padding: 0 14px 12px; }

    /* Zustersite: compacte rij met fotootje i.p.v. twee grote fotokaarten */
    .cor-syoh { margin: 24px 0 14px; }
    .cor-syoh-lead { font-size: .93rem; margin-bottom: 12px; }
    .cor-syoh-cards { grid-template-columns: 1fr; gap: 8px; }
    .cor-syoh-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
    .cor-syoh-img { width: 64px; height: 100%; min-height: 64px; aspect-ratio: auto; }
    .cor-syoh-body { padding: 10px 12px; }
    .cor-syoh-flag { font-size: 1.3rem; }
    .cor-syoh-t { font-size: .92rem; line-height: 1.3; }
    .cor-syoh-s { font-size: .82rem; }

    /* Slot-CTA: geen lege navy ruimte */
    .cor-cta { margin: 18px 0; padding: 24px 18px; min-height: 0; }
    .cor-cta p { font-size: .93rem; margin-bottom: 16px; }

    /* Andere routes: veegrij */
    .cor-more { margin: 4px 0 24px; }
    .cor-more .cor-route-cards { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 4px 14px 12px; scroll-padding: 0 14px; scrollbar-width: none; }
    .cor-more .cor-route-cards::-webkit-scrollbar { display: none; }
    .cor-more .cor-route-cards > li { flex: 0 0 68vw; max-width: 270px; scroll-snap-align: start; }
    .cor-more .cor-route-card:hover { transform: none; }
    .cor-rc-img { aspect-ratio: 2 / 1; }
    .cor-rc-body { padding: 10px 14px 12px; gap: 2px; }
}