/* =========================================================================
 * Enroute — design system (fase 4, 2026-10-11)
 *
 * 1. Lettertypen        6. App-shell (topbalk, tabbalk, sheets, toasts)
 * 2. Design tokens      7. Componenten (pills, stats, kaarten, lege staat)
 * 3. Bootstrap-koppeling 8. Schermen (home, ontdek, spot, reis, fotoboek, formulieren, beheer)
 * 4. Basis & typografie 9. Kaart & lightbox
 * 5. Knoppen & formulieren 10. Beweging & toegankelijkheid
 *
 * Kleuren altijd via tokens (var(--er-…)), nooit hard; licht/donker via
 * [data-bs-theme] (gezet door assets/js/theme.js).
 * ========================================================================= */

/* ===== 1. Lettertypen (self-hosted, variabel, Latijnse subset; OFL) ===== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-wght.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-wght.woff2') format('woff2');
}

/* ===== 2. Design tokens ===== */
:root,
[data-bs-theme="light"] {
    --er-bg: #FAF7EE;
    --er-surface: #FFFFFF;
    --er-surface-2: #F2EEE2;
    --er-surface-3: #E9E4D4;
    --er-text: #1F2A24;
    --er-muted: #5F6B64;
    --er-primary: #2D6A4F;          /* bosgroen: navigatie, links, actief */
    --er-primary-strong: #1B4332;
    --er-primary-soft: rgba(45, 106, 79, .10);
    --er-accent: #C2571B;           /* zonsondergang: primaire knop (≥ 4.5:1 met wit) */
    --er-accent-hover: #A84A15;
    --er-accent-soft: rgba(194, 87, 27, .10);
    --er-accent-text: #FFFFFF;
    --er-marker: #E07B39;           /* decoratief: kaartmarkers, illustraties */
    --er-border: #E4DFD0;
    --er-danger: #B42318;
    --er-warning: #8A5A00;
    --er-success: #1F7A4D;
    --er-shadow: 0 1px 2px rgba(31, 42, 36, .04), 0 4px 16px rgba(31, 42, 36, .06);
    --er-shadow-lg: 0 8px 32px rgba(31, 42, 36, .14);
    --er-radius: 14px;
    --er-radius-sm: 10px;
    --er-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --er-font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --er-topbar-h: 60px;
    --er-tabbar-h: 64px;
    color-scheme: light;
}

[data-bs-theme="dark"] {
    --er-bg: #121614;
    --er-surface: #1B211E;
    --er-surface-2: #232B27;
    --er-surface-3: #2C3631;
    --er-text: #E9EDE9;
    --er-muted: #9AA59F;
    --er-primary: #5FB98C;
    --er-primary-strong: #8FD3B0;
    --er-primary-soft: rgba(95, 185, 140, .14);
    --er-accent: #F0955A;
    --er-accent-hover: #F5AA78;
    --er-accent-soft: rgba(240, 149, 90, .16);
    --er-accent-text: #1F2A24;
    --er-marker: #F0955A;
    --er-border: #2E3833;
    --er-danger: #F2877E;
    --er-warning: #E8B44C;
    --er-success: #6CCB98;
    --er-shadow: none;
    --er-shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

/* Oude variabelen (nog gebruikt in inline style-attributen) wijzen naar de tokens. */
:root, [data-bs-theme] {
    --enroute-green: var(--er-primary);
    --enroute-green-dark: var(--er-primary-strong);
    --enroute-cream: var(--er-bg);
    --enroute-orange: var(--er-accent);
    --enroute-orange-dark: var(--er-accent-hover);
}

/* ===== 3. Bootstrap koppelen aan de tokens ===== */
:root, [data-bs-theme] {
    --bs-body-bg: var(--er-bg);
    --bs-body-color: var(--er-text);
    --bs-body-font-family: var(--er-font);
    --bs-secondary-color: var(--er-muted);
    --bs-tertiary-bg: var(--er-surface-2);
    --bs-secondary-bg: var(--er-surface-2);
    --bs-border-color: var(--er-border);
    --bs-border-radius: var(--er-radius-sm);
    --bs-border-radius-lg: var(--er-radius);
    --bs-link-color: var(--er-primary);
    --bs-link-color-rgb: 45, 106, 79;
    --bs-link-hover-color: var(--er-primary-strong);
    --bs-emphasis-color: var(--er-text);
    --bs-card-bg: var(--er-surface);
    --bs-focus-ring-color: rgba(45, 106, 79, .35);
}
[data-bs-theme="dark"] { --bs-link-color-rgb: 95, 185, 140; }

/* ===== 4. Basis & typografie ===== */
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--er-bg);
    color: var(--er-text);
    font-family: var(--er-font);
    font-feature-settings: 'cv11', 'ss01';
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
h1, h2, h3, h4, h5, .er-heading {
    font-family: var(--er-font-heading);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--er-text);
}
h1, .h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h2, .h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); }
h3, .h3 { font-size: 1.2rem; }
.text-muted, .text-secondary { color: var(--er-muted) !important; }
.tabular, .er-stat__value, time { font-variant-numeric: tabular-nums; }
a { text-underline-offset: .15em; }
::selection { background: var(--er-accent-soft); }
hr { border-color: var(--er-border); opacity: 1; }

.er-icon {
    width: 1.15em; height: 1.15em;
    flex: none; display: inline-block; vertical-align: -.2em;
    stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.er-icon--fill { fill: currentColor; }
.er-icon--lg { width: 1.5em; height: 1.5em; }
.er-icon--xl { width: 2.5rem; height: 2.5rem; stroke-width: 1.6; }

/* ===== 5. Knoppen & formulieren ===== */
.btn { font-weight: 600; border-radius: 999px; padding: .55rem 1.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn-sm { padding: .35rem .8rem; font-size: .85rem; }
.btn-lg { padding: .75rem 1.4rem; }
.btn-icon { padding: .45rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; }
.btn-icon.btn-sm { width: 2rem; height: 2rem; padding: .3rem; }

.btn-enroute, .btn-primary {
    --bs-btn-bg: var(--er-accent); --bs-btn-border-color: var(--er-accent); --bs-btn-color: var(--er-accent-text);
    --bs-btn-hover-bg: var(--er-accent-hover); --bs-btn-hover-border-color: var(--er-accent-hover); --bs-btn-hover-color: var(--er-accent-text);
    --bs-btn-active-bg: var(--er-accent-hover); --bs-btn-active-border-color: var(--er-accent-hover); --bs-btn-active-color: var(--er-accent-text);
    --bs-btn-disabled-bg: var(--er-accent); --bs-btn-disabled-border-color: var(--er-accent); --bs-btn-disabled-color: var(--er-accent-text);
}
.btn-outline-enroute, .btn-outline-primary {
    --bs-btn-color: var(--er-primary); --bs-btn-border-color: var(--er-border); --bs-btn-bg: var(--er-surface);
    --bs-btn-hover-bg: var(--er-primary-soft); --bs-btn-hover-border-color: var(--er-primary); --bs-btn-hover-color: var(--er-primary);
    --bs-btn-active-bg: var(--er-primary-soft); --bs-btn-active-border-color: var(--er-primary); --bs-btn-active-color: var(--er-primary);
}
.btn-ghost {
    --bs-btn-color: var(--er-text); --bs-btn-border-color: transparent; --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--er-surface-2); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--er-text);
    --bs-btn-active-bg: var(--er-surface-3); --bs-btn-active-color: var(--er-text);
}
.btn-outline-danger {
    --bs-btn-color: var(--er-danger); --bs-btn-border-color: var(--er-border); --bs-btn-bg: var(--er-surface);
    --bs-btn-hover-bg: rgba(180, 35, 24, .08); --bs-btn-hover-color: var(--er-danger); --bs-btn-hover-border-color: var(--er-danger);
}
.btn-outline-secondary {
    --bs-btn-color: var(--er-text); --bs-btn-border-color: var(--er-border); --bs-btn-bg: var(--er-surface);
    --bs-btn-hover-bg: var(--er-surface-2); --bs-btn-hover-color: var(--er-text); --bs-btn-hover-border-color: var(--er-border);
    --bs-btn-active-bg: var(--er-surface-3); --bs-btn-active-color: var(--er-text); --bs-btn-active-border-color: var(--er-border);
}

.form-control, .form-select {
    background-color: var(--er-surface); color: var(--er-text);
    border: 1px solid var(--er-border); border-radius: var(--er-radius-sm);
    min-height: 2.75rem; padding: .55rem .85rem;
}
.form-control-sm, .form-select-sm { min-height: 2.25rem; padding: .35rem .65rem; }
.form-control:focus, .form-select:focus { border-color: var(--er-primary); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); background-color: var(--er-surface); color: var(--er-text); }
.form-control::placeholder { color: var(--er-muted); opacity: .8; }
.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.form-text { color: var(--er-muted); }
.form-check-input:checked { background-color: var(--er-primary); border-color: var(--er-primary); }
.input-group-text { background: var(--er-surface-2); border-color: var(--er-border); color: var(--er-muted); border-radius: var(--er-radius-sm); }
:focus-visible { outline: 2px solid var(--er-primary); outline-offset: 2px; }

/* ===== 6. App-shell ===== */
.er-skip { position: absolute; left: -9999px; top: .5rem; z-index: 3000; }
.er-skip:focus { left: .5rem; background: var(--er-surface); padding: .5rem 1rem; border-radius: var(--er-radius-sm); }

.er-topbar {
    position: sticky; top: 0; z-index: 1030;
    height: var(--er-topbar-h);
    background: color-mix(in srgb, var(--er-bg) 86%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--er-border);
    padding-top: env(safe-area-inset-top);
    box-sizing: content-box;
}
.er-topbar .container { height: 100%; display: flex; align-items: center; gap: 1rem; }
.er-brand {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--er-font-heading); font-weight: 800; font-size: 1.2rem;
    color: var(--er-text); text-decoration: none; letter-spacing: -.02em;
}
.er-brand__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: 10px;
    background: var(--er-primary); color: #fff;
}
[data-bs-theme="dark"] .er-brand__mark { color: #10231a; }
.er-nav { display: flex; gap: .25rem; margin-left: 1rem; }
.er-nav__link {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .8rem; border-radius: 999px;
    color: var(--er-muted); font-weight: 600; font-size: .93rem; text-decoration: none;
}
.er-nav__link:hover { color: var(--er-text); background: var(--er-surface-2); }
.er-nav__link.is-active { color: var(--er-primary); background: var(--er-primary-soft); }
.er-topbar__end { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.er-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--er-primary-soft); color: var(--er-primary);
    font-weight: 700; font-size: .85rem; border: 0;
}
.er-avatar--sm { width: 1.9rem; height: 1.9rem; font-size: .75rem; }
.er-avatar--lg { width: 3.5rem; height: 3.5rem; font-size: 1.2rem; flex: none; }

.er-main { flex: 1; padding-top: 1.5rem; padding-bottom: 2.5rem; }
.er-footer { color: var(--er-muted); font-size: .85rem; padding: 1.5rem 0 2rem; border-top: 1px solid var(--er-border); }

.dropdown-menu {
    --bs-dropdown-bg: var(--er-surface); --bs-dropdown-color: var(--er-text);
    --bs-dropdown-link-color: var(--er-text); --bs-dropdown-link-hover-bg: var(--er-surface-2);
    --bs-dropdown-link-active-bg: var(--er-primary-soft); --bs-dropdown-link-active-color: var(--er-primary);
    --bs-dropdown-border-color: var(--er-border); --bs-dropdown-divider-bg: var(--er-border);
    border-radius: var(--er-radius); box-shadow: var(--er-shadow-lg); padding: .4rem;
}
.dropdown-item { border-radius: 8px; display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; }
.dropdown-item .er-icon { color: var(--er-muted); }

/* Tabbalk (mobiel) */
.er-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--er-tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--er-surface) 92%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid var(--er-border);
}
.er-tabbar--3 { grid-template-columns: repeat(3, 1fr); }
.er-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    color: var(--er-muted); text-decoration: none; font-size: .72rem; font-weight: 600;
    background: none; border: 0; min-height: 44px;
}
.er-tab .er-icon { width: 1.45rem; height: 1.45rem; }
.er-tab.is-active { color: var(--er-primary); }
.er-tab--action .er-tab__bubble {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--er-accent); color: var(--er-accent-text);
    box-shadow: var(--er-shadow-lg); margin-top: -1.1rem;
}
.er-tab--action .er-tab__bubble .er-icon { width: 1.6rem; height: 1.6rem; }
@media (max-width: 767.98px) {
    body.has-tabbar .er-main { padding-bottom: calc(var(--er-tabbar-h) + env(safe-area-inset-bottom) + 1.5rem); }
    body.has-tabbar .er-footer { display: none; }
}

/* Bottom sheet (Bootstrap offcanvas-bottom) */
.er-sheet.offcanvas-bottom {
    height: auto; max-height: 85vh;
    border-radius: 20px 20px 0 0; border: 0;
    background: var(--er-surface); color: var(--er-text);
    padding-bottom: env(safe-area-inset-bottom);
}
.er-sheet .offcanvas-header { padding-bottom: .25rem; }
.er-sheet__grip { width: 2.5rem; height: 4px; border-radius: 4px; background: var(--er-surface-3); margin: .5rem auto 0; }
.er-sheet__list { list-style: none; padding: 0; margin: 0; }
.er-sheet__item {
    display: flex; align-items: center; gap: .85rem; width: 100%;
    padding: .8rem .5rem; border-radius: 12px; border: 0; background: none;
    color: var(--er-text); text-decoration: none; font-weight: 600; text-align: left;
}
.er-sheet__item:hover { background: var(--er-surface-2); }
.er-sheet__item .er-sheet__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 12px;
    background: var(--er-primary-soft); color: var(--er-primary);
}
.er-sheet__item small { display: block; color: var(--er-muted); font-weight: 400; }

/* Thema-schakelaar */
.er-segmented { display: inline-flex; padding: .2rem; gap: .2rem; background: var(--er-surface-2); border-radius: 999px; }
.er-segmented button, .er-segmented a {
    border: 0; background: none; color: var(--er-muted); font-weight: 600; font-size: .85rem;
    padding: .35rem .8rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
}
.er-segmented [aria-pressed="true"], .er-segmented .is-active { background: var(--er-surface); color: var(--er-text); box-shadow: var(--er-shadow); }

/* Toasts (flash-meldingen) */
.er-toasts {
    position: fixed; z-index: 2100; right: 1rem; top: calc(var(--er-topbar-h) + 1rem);
    display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 2rem));
}
@media (max-width: 767.98px) {
    .er-toasts { left: 1rem; right: 1rem; top: auto; bottom: calc(var(--er-tabbar-h) + env(safe-area-inset-bottom) + .75rem); max-width: none; }
}
.er-toast {
    display: flex; align-items: flex-start; gap: .65rem;
    background: var(--er-surface); color: var(--er-text);
    border: 1px solid var(--er-border); border-left: 4px solid var(--er-primary);
    border-radius: var(--er-radius-sm); box-shadow: var(--er-shadow-lg);
    padding: .8rem .9rem; animation: er-toast-in .25s ease-out;
}
.er-toast.is-hiding { opacity: 0; transform: translateY(-6px); transition: all .25s ease; }
.er-toast--success { border-left-color: var(--er-success); }
.er-toast--success > .er-icon { color: var(--er-success); }
.er-toast--danger { border-left-color: var(--er-danger); }
.er-toast--danger > .er-icon { color: var(--er-danger); }
.er-toast--warning { border-left-color: var(--er-warning); }
.er-toast--warning > .er-icon { color: var(--er-warning); }
.er-toast__body { flex: 1; font-size: .93rem; }
.er-toast__close { border: 0; background: none; color: var(--er-muted); padding: 0; line-height: 1; }
@keyframes er-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ===== 7. Componenten ===== */
.card, .er-card {
    --bs-card-bg: var(--er-surface);
    --bs-card-border-color: var(--er-border);
    background: var(--er-surface);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius);
    box-shadow: var(--er-shadow);
    color: var(--er-text);
}
.er-card { padding: 1.25rem; }
.er-card--flush { padding: 0; overflow: hidden; }
.er-section-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; }
.er-section-title h2 { margin: 0; font-size: 1.25rem; }
.er-section-title a { font-weight: 600; font-size: .9rem; text-decoration: none; }
.er-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.er-page-head h1 { margin: 0; }
.er-page-head__sub { color: var(--er-muted); margin: .25rem 0 0; }
.er-eyebrow { color: var(--er-muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Pills (outline/getint, nooit zware gevulde badges) */
.er-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .75rem; border-radius: 999px;
    font-size: .8rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
    border: 1px solid var(--er-border); color: var(--er-muted); background: transparent;
}
.er-pill .er-icon { width: 1em; height: 1em; }
.er-pill--primary { color: var(--er-primary); border-color: color-mix(in srgb, var(--er-primary) 45%, transparent); }
.er-pill--accent { color: var(--er-accent); border-color: color-mix(in srgb, var(--er-accent) 45%, transparent); }
.er-pill--success { color: var(--er-success); border-color: color-mix(in srgb, var(--er-success) 45%, transparent); }
.er-pill--danger { color: var(--er-danger); border-color: color-mix(in srgb, var(--er-danger) 45%, transparent); }
.er-pill--warning { color: var(--er-warning); border-color: color-mix(in srgb, var(--er-warning) 55%, transparent); background: rgba(232, 180, 76, .10); }
.er-pill--soft { background: var(--er-surface-2); border-color: transparent; color: var(--er-text); }
.er-pill--onphoto { background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .25); color: #fff; backdrop-filter: blur(6px); }

/* Statistieken */
.er-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .75rem; }
.er-stat { background: var(--er-surface); border: 1px solid var(--er-border); border-radius: var(--er-radius); padding: .9rem 1rem; }
.er-stat__value { display: block; font-family: var(--er-font-heading); font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--er-text); }
.er-stat__label { color: var(--er-muted); font-size: .82rem; font-weight: 600; }
.er-stats--onphoto .er-stat { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); backdrop-filter: blur(8px); }
.er-stats--onphoto .er-stat__value, .er-stats--onphoto .er-stat__label { color: #fff; }

/* Lege staat */
.er-empty { text-align: center; padding: 2.5rem 1.25rem; border: 1px dashed var(--er-border); border-radius: var(--er-radius); background: var(--er-surface); }
.er-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--er-primary-soft); color: var(--er-primary); margin-bottom: 1rem; }
.er-empty h3 { font-size: 1.1rem; }
.er-empty p { color: var(--er-muted); max-width: 32rem; margin: 0 auto 1.25rem; }

/* Spotkaart */
.er-spot-card { display: block; color: inherit; text-decoration: none; border-radius: var(--er-radius); }
.er-spot-card__media {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--er-radius); overflow: hidden;
    background: linear-gradient(135deg, var(--er-primary), var(--er-primary-strong));
    display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .6);
}
.er-spot-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.er-spot-card:hover .er-spot-card__media img { transform: scale(1.03); }
.er-spot-card__badges { position: absolute; left: .6rem; top: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.er-spot-card__body { padding: .6rem .15rem 0; }
.er-spot-card__title { font-weight: 700; font-size: .98rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er-spot-card__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--er-muted); font-size: .85rem; }
.er-spot-card__place { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er-rating { display: inline-flex; align-items: center; gap: .2rem; font-weight: 700; color: var(--er-text); font-variant-numeric: tabular-nums; }
.er-rating .er-icon { color: var(--er-marker); fill: var(--er-marker); width: .95em; height: .95em; }

/* Reiskaart */
.er-trip-card {
    position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--er-radius); overflow: hidden;
    color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--er-primary), var(--er-primary-strong));
    box-shadow: var(--er-shadow);
}
.er-trip-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.er-trip-card:hover img { transform: scale(1.03); }
.er-trip-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 20, 15, .85), rgba(10, 20, 15, .05) 60%); }
.er-trip-card__body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 1rem 1.1rem; }
.er-trip-card__title { font-family: var(--er-font-heading); font-weight: 800; font-size: 1.15rem; margin: 0; color: #fff; }
.er-trip-card__meta { font-size: .85rem; opacity: .9; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.er-trip-card__badge { position: absolute; z-index: 1; top: .75rem; right: .75rem; }

/* Horizontale scroller */
.er-scroller { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; }
.er-scroller > * { flex: none; scroll-snap-align: start; }
.er-scroller--trips > * { width: min(78vw, 320px); }
.er-scroller--photos img { width: 160px; height: 120px; object-fit: cover; border-radius: var(--er-radius-sm); }

/* Formulierkaart */
.er-form-section { background: var(--er-surface); border: 1px solid var(--er-border); border-radius: var(--er-radius); padding: 1.25rem; margin-bottom: 1rem; }
.er-form-section > h2, .er-form-section > h3 { font-size: 1.05rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.er-form-section > h2 .er-icon, .er-form-section > h3 .er-icon { color: var(--er-primary); }
.er-form-section--danger { border-color: color-mix(in srgb, var(--er-danger) 35%, var(--er-border)); }
.er-form-section--danger > h2 .er-icon { color: var(--er-danger); }
.er-form-section summary { cursor: pointer; }
.er-form-actions { position: sticky; bottom: 0; z-index: 5; display: flex; gap: .5rem; justify-content: flex-end; padding: .75rem 0; background: linear-gradient(to top, var(--er-bg) 70%, transparent); }
@media (max-width: 767.98px) {
    body.has-tabbar .er-form-actions { bottom: calc(var(--er-tabbar-h) + env(safe-area-inset-bottom)); }
    .er-form-actions .btn { flex: 1; }
}
.er-dropzone { border: 2px dashed var(--er-border); border-radius: var(--er-radius); padding: 1.5rem; text-align: center; background: var(--er-surface-2); transition: border-color .2s, background .2s; }
.er-dropzone.is-over { border-color: var(--er-accent); background: var(--er-accent-soft); }
.er-dropzone .er-icon { color: var(--er-accent); }
.er-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
/* Fotosuggesties (F-05) */
.er-suggestion { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; margin: 0; }
.er-suggestion + .er-suggestion { border-top: 1px solid var(--er-border); }
.er-suggestion img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.er-suggestion span { flex: 1; min-width: 0; font-size: .88rem; }
.er-suggestion .btn { flex: none; }

/* Spot bewaren (F-11) */
.er-actionbar form { margin: 0; }
.er-save.is-on { background: var(--er-primary-soft); }
.er-save.is-on .er-icon { fill: currentColor; }

/* Reisstatistieken (F-06) */
.er-statbar { margin-bottom: .7rem; }
.er-statbar__label { display: flex; align-items: center; gap: .45rem; font-size: .9rem; margin-bottom: .25rem; }
.er-statbar__label .er-icon { color: var(--er-muted); }
.er-statbar__track { height: .5rem; border-radius: 999px; background: var(--er-surface-2); overflow: hidden; }
.er-statbar__track span { display: block; height: 100%; border-radius: inherit; background: var(--er-primary); }
.er-statbar__track--accent span { background: var(--er-accent); }
.er-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.er-facts dt { font-size: .75rem; font-weight: 600; color: var(--er-muted); text-transform: uppercase; letter-spacing: .04em; }
.er-facts dd { margin: 0; font-weight: 600; }
.er-stats--stack { grid-template-columns: 1fr; }

/* Hartjes en reacties op etappes (F-10) */
.er-reactions { margin-top: 1rem; padding-top: .6rem; border-top: 1px solid var(--er-border); }
.er-reactions__bar { display: flex; align-items: center; gap: .25rem; }
.er-reactions__bar form { margin: 0; }
.er-heart, .er-reactions__toggle {
    display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none;
    padding: .35rem .6rem; border-radius: 999px; color: var(--er-muted); font-size: .85rem; font-weight: 600;
}
button.er-heart:hover, .er-reactions__toggle:hover { background: var(--er-surface-2); color: var(--er-text); }
.er-heart.is-on { color: var(--er-danger); }
.er-heart.is-on .er-icon { fill: currentColor; }
button.er-heart:active .er-icon { transform: scale(1.25); }
.er-heart .er-icon { transition: transform .15s; }
.er-comment { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem 0; }
.er-comment + .er-comment { border-top: 1px solid var(--er-border); }
.er-comment__main { flex: 1; min-width: 0; }
.er-comment__meta { font-size: .8rem; color: var(--er-muted); }
.er-comment__meta strong { color: var(--er-text); }
.er-comment__body { white-space: pre-line; overflow-wrap: anywhere; font-size: .92rem; }
.er-comment-form { display: flex; gap: .4rem; align-items: flex-end; margin-top: .5rem; }
.er-comment-form textarea { resize: none; overflow-y: auto; }

/* Sorteren (F-03, assets/js/sortable.js) */
[data-sort-handle] { cursor: grab; touch-action: none; }
.is-sorting { user-select: none; -webkit-user-select: none; }
.is-sorting [data-sort-handle] { cursor: grabbing; }
.is-dragging { opacity: .75; box-shadow: 0 0 0 2px var(--er-accent), var(--er-shadow-lg); position: relative; z-index: 2; }
.er-thumb__grip { position: absolute; right: .35rem; top: .35rem; width: 1.9rem; height: 1.9rem; padding: .3rem; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.er-sort-row { display: flex; align-items: center; gap: .5rem; padding: .55rem .25rem; border-bottom: 1px solid var(--er-border); background: var(--er-surface); }
.er-sort-row:last-child { border-bottom: 0; }
.er-sort-row__main { flex: 1; min-width: 0; }
.er-photo-card { margin: 0; min-width: 0; }
.er-photo-card__caption { margin-top: .35rem; font-size: .8rem; }
.er-thumbs--sm { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .4rem; }
.er-thumbs--sm .er-thumb__actions .btn { width: 1.6rem; height: 1.6rem; padding: .25rem; }
.min-w-0 { min-width: 0; }
.er-thumb { position: relative; border-radius: var(--er-radius-sm); overflow: hidden; background: var(--er-surface-2); aspect-ratio: 1; }
.er-thumb img { width: 100%; height: 100%; object-fit: cover; }
.er-thumb__actions { position: absolute; inset: auto .35rem .35rem .35rem; display: flex; gap: .3rem; justify-content: flex-end; }
.er-thumb__actions .btn { background: rgba(0, 0, 0, .55); border: 0; color: #fff; width: 1.9rem; height: 1.9rem; padding: .3rem; }
.er-thumb__badge { position: absolute; left: .35rem; top: .35rem; }

/* Sterren-beoordeling (1–10) */
.er-stars { display: inline-flex; flex-wrap: wrap; gap: .1rem; }
.er-star { border: 0; background: none; padding: .15rem; color: var(--er-surface-3); line-height: 0; }
.er-star .er-icon { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.er-star.is-on, .er-star.is-preview { color: var(--er-marker); }
.er-score-bar { display: grid; grid-template-columns: minmax(7rem, 1fr) 3fr auto; align-items: center; gap: .75rem; font-size: .9rem; }
.er-score-bar__track { height: 8px; border-radius: 8px; background: var(--er-surface-2); overflow: hidden; }
.er-score-bar__fill { height: 100%; border-radius: 8px; background: var(--er-primary); }

/* Tabellen (beheer) */
.table { --bs-table-bg: transparent; --bs-table-color: var(--er-text); --bs-table-striped-bg: var(--er-surface-2); --bs-table-striped-color: var(--er-text); --bs-table-border-color: var(--er-border); --bs-table-hover-bg: var(--er-surface-2); --bs-table-hover-color: var(--er-text); }
.table > thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--er-muted); font-weight: 700; }

/* ===== 8. Schermen ===== */

/* Home */
.er-hero {
    position: relative; overflow: hidden; border-radius: 22px; color: #fff;
    background: var(--er-primary-strong); min-height: 320px; display: flex; align-items: flex-end;
}
.er-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.er-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 22, 15, .92) 0%, rgba(8, 22, 15, .6) 50%, rgba(8, 22, 15, .4)); }
.er-hero__body { position: relative; z-index: 1; padding: 2rem 1.5rem; width: 100%; }
.er-hero h1 { color: #fff; font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem); max-width: 22ch; }
.er-hero p { color: rgba(255, 255, 255, .88); max-width: 40rem; }
.er-hero .er-search { max-width: 34rem; }
.er-search { display: flex; gap: .5rem; background: var(--er-surface); border-radius: 999px; padding: .35rem .35rem .35rem 1rem; align-items: center; box-shadow: var(--er-shadow-lg); }
.er-search .er-icon { color: var(--er-muted); }
.er-search input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; color: var(--er-text); padding: .4rem 0; }
.er-current-trip { display: flex; gap: 1rem; align-items: center; }

/* Ontdek */
.er-chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.er-chips::-webkit-scrollbar { display: none; }
.er-chip {
    flex: none; display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--er-border);
    background: var(--er-surface); color: var(--er-text); font-weight: 600; font-size: .85rem; text-decoration: none; white-space: nowrap;
}
.er-chip:hover { border-color: var(--er-primary); color: var(--er-primary); }
.er-chip.is-active { background: var(--er-primary-soft); border-color: var(--er-primary); color: var(--er-primary); }
.er-discover { display: grid; gap: 1.25rem; }
@media (min-width: 992px) {
    .er-discover--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .er-discover--split .er-discover__map { position: sticky; top: calc(var(--er-topbar-h) + 1rem); }
}
.er-discover__map { border-radius: var(--er-radius); overflow: hidden; border: 1px solid var(--er-border); background: var(--er-surface-2); }
.er-discover__map #map { height: min(70vh, 640px); }
.er-grid { display: grid; gap: 1.25rem .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.er-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
@media (max-width: 575.98px) { .er-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Spot-detail */
.er-gallery { position: relative; border-radius: var(--er-radius); overflow: hidden; background: var(--er-surface-2); }
.er-gallery__main { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; display: block; }
.er-gallery__count { position: absolute; right: .75rem; bottom: .75rem; }
@media (min-width: 768px) {
    .er-gallery--mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: .4rem; aspect-ratio: 16 / 7; background: none; }
    .er-gallery--mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
    .er-gallery--mosaic > :first-child { grid-row: span 2; }
    .er-gallery--mosaic .er-gallery__main { aspect-ratio: auto; height: 100%; }
}
.er-spot-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 1.25rem 0 .75rem; }
.er-spot-head h1 { margin: 0 0 .25rem; }
.er-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.er-actionbar { position: sticky; z-index: 6; bottom: 0; display: flex; gap: .5rem; padding: .75rem 0; background: linear-gradient(to top, var(--er-bg) 75%, transparent); }
@media (max-width: 767.98px) { body.has-tabbar .er-actionbar { bottom: calc(var(--er-tabbar-h) + env(safe-area-inset-bottom)); } .er-actionbar .btn { flex: 1; } }
@media (min-width: 768px) { .er-actionbar { position: static; background: none; padding: 0; } }
.er-note { border-left: 3px solid var(--er-border); padding: .25rem 0 .25rem .9rem; margin-bottom: 1rem; }
.er-note--private { border-left-color: var(--er-warning); background: rgba(232, 180, 76, .07); border-radius: 0 var(--er-radius-sm) var(--er-radius-sm) 0; padding-right: .75rem; }
.er-note__meta { color: var(--er-muted); font-size: .8rem; display: flex; align-items: center; gap: .4rem; }
.er-map-box { border-radius: var(--er-radius); overflow: hidden; border: 1px solid var(--er-border); }
.er-map-box #spotMap { height: 280px; }

/* Reispagina */
.er-trip-hero {
    position: relative; overflow: hidden; border-radius: 22px; min-height: 280px;
    color: #fff; display: flex; align-items: flex-end; margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--er-primary), var(--er-primary-strong));
}
.er-trip-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.er-trip-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 22, 15, .9), rgba(8, 22, 15, .2) 70%); pointer-events: none; }
.er-trip-hero__body { position: relative; z-index: 1; padding: 1.5rem; width: 100%; }
.er-trip-hero h1 { color: #fff; margin: 0 0 .35rem; }
.er-trip-hero__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: rgba(255, 255, 255, .88); font-size: .92rem; }
.er-trip-hero__actions { position: absolute; z-index: 2; top: 1rem; right: 1rem; display: flex; gap: .5rem; }
.er-trip-hero__actions .btn { background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .25); color: #fff; backdrop-filter: blur(6px); }
.er-avatars { display: inline-flex; }
.er-avatars .er-avatar { margin-left: -.45rem; border: 2px solid rgba(0, 0, 0, .35); background: var(--er-accent); color: var(--er-accent-text); }
.er-avatars .er-avatar:first-child { margin-left: 0; }

.er-trip-layout { display: grid; gap: 1.5rem; }
@media (min-width: 992px) {
    .er-trip-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
    .er-trip-layout__map { position: sticky; top: calc(var(--er-topbar-h) + 1rem); order: 2; }
}
.er-trip-map { border-radius: var(--er-radius); overflow: hidden; border: 1px solid var(--er-border); background: var(--er-surface-2); }
.er-trip-map #tripMap { height: 340px; }
@media (min-width: 992px) { .er-trip-map #tripMap { height: calc(100vh - var(--er-topbar-h) - 3rem); max-height: 720px; } }
.er-trip-map img { display: block; width: 100%; }

.er-timeline { list-style: none; margin: 0; padding: 0; }
.er-step { position: relative; padding-left: 3rem; padding-bottom: 1.5rem; }
.er-step::before {
    content: ''; position: absolute; left: 1.05rem; top: 2.4rem; bottom: 0; width: 2px;
    background: repeating-linear-gradient(var(--er-primary) 0 7px, transparent 7px 13px); opacity: .55;
}
.er-step:last-child::before { display: none; }
.er-step__marker {
    position: absolute; left: 0; top: .2rem; z-index: 1;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--er-accent); color: var(--er-accent-text); font-weight: 800; font-size: .9rem;
    box-shadow: 0 0 0 4px var(--er-bg);
}
.er-step.is-final .er-step__marker { background: var(--er-primary); color: #fff; }
.er-step.is-highlighted .er-card { box-shadow: 0 0 0 3px var(--er-accent); }
/* Geplande etappe (F-13): gestippeld en lichter, tot de dag is aangebroken. */
.er-step.is-planned .er-card { border-style: dashed; background: transparent; box-shadow: none; }
.er-step.is-planned .er-step__marker { background: var(--er-surface); color: var(--er-primary); border: 2px dashed var(--er-primary); }
.er-step__day { font-size: .78rem; font-weight: 700; color: var(--er-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
.er-step__route { font-family: var(--er-font-heading); font-weight: 700; font-size: 1.08rem; color: var(--er-text); margin: 0 0 .4rem; overflow-wrap: anywhere; }
.er-step__story { white-space: pre-line; margin-bottom: .75rem; }
.er-step__story.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.er-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; border-radius: var(--er-radius-sm); overflow: hidden; }
.er-mosaic a { display: block; position: relative; aspect-ratio: 1; background: var(--er-surface-2); }
.er-mosaic a:first-child { grid-column: span 2; grid-row: span 2; }
.er-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.er-mosaic__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff; font-weight: 700; font-size: 1.1rem; }
.er-stops { list-style: none; padding: 0; margin: .25rem 0 .9rem; border-left: 2px solid var(--er-border); }
.er-stop { padding: .35rem 0 .5rem .9rem; position: relative; }
.er-stop::before { content: ''; position: absolute; left: -6px; top: .75rem; width: 10px; height: 10px; border-radius: 50%; background: var(--er-marker); box-shadow: 0 0 0 3px var(--er-surface); }
.er-stop__name { font-weight: 600; font-size: .92rem; }
.er-stop__photos { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; }
.er-stop__photos img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.er-stop__photos .is-cover img { width: 116px; height: 116px; }
.er-fab {
    position: fixed; z-index: 1020; right: 1.25rem; bottom: 1.5rem;
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--er-accent); color: var(--er-accent-text); box-shadow: var(--er-shadow-lg);
}
.er-fab .er-icon { width: 1.6rem; height: 1.6rem; }
@media (max-width: 767.98px) { .er-fab { display: none; } }

/* Fotoboek */
.er-photobook-chapter { margin-bottom: 2.5rem; }
.er-photobook-chapter__head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .9rem; }
.er-photobook-chapter__nr { font-family: var(--er-font-heading); font-weight: 800; color: var(--er-accent); font-size: 1.5rem; }
.er-justified { display: flex; flex-wrap: wrap; gap: .45rem; }
.er-justified figure { margin: 0; flex: 1 1 200px; height: 200px; position: relative; overflow: hidden; border-radius: var(--er-radius-sm); background: var(--er-surface-2); }
.er-justified figure.is-portrait { flex-basis: 120px; }
.er-justified img { width: 100%; height: 100%; object-fit: cover; display: block; }
.er-justified figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem .6rem .45rem; color: #fff; font-size: .78rem; background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent); }
@media (max-width: 575.98px) { .er-justified figure { height: 130px; flex-basis: 130px; } }

/* Formulieren met stappen / secties */
.er-section-nav { position: sticky; top: calc(var(--er-topbar-h) + .5rem); z-index: 6; margin-bottom: 1rem; }
.er-location { position: relative; }
.er-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: .25rem; background: var(--er-surface); border: 1px solid var(--er-border); border-radius: var(--er-radius-sm); box-shadow: var(--er-shadow-lg); max-height: 260px; overflow-y: auto; }
.er-suggest button { display: flex; width: 100%; gap: .6rem; align-items: flex-start; border: 0; background: none; padding: .55rem .75rem; text-align: left; color: var(--er-text); }
.er-suggest button:hover, .er-suggest button:focus { background: var(--er-surface-2); }
.er-suggest small { color: var(--er-muted); display: block; }
.er-transport-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }
.er-transport-grid input { position: absolute; opacity: 0; pointer-events: none; }
.er-transport-grid label {
    display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer;
    padding: .7rem .4rem; border: 1px solid var(--er-border); border-radius: var(--er-radius-sm);
    background: var(--er-surface); font-size: .8rem; font-weight: 600; color: var(--er-muted); text-align: center;
}
.er-transport-grid label .er-icon { width: 1.4rem; height: 1.4rem; }
.er-transport-grid input:checked + label { border-color: var(--er-primary); background: var(--er-primary-soft); color: var(--er-primary); }
.er-transport-grid input:focus-visible + label { outline: 2px solid var(--er-primary); outline-offset: 2px; }
.er-list-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--er-border); }
.er-list-row:last-child { border-bottom: 0; }
.er-list-row__main { flex: 1; min-width: 0; }
.er-list-row__img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; background: var(--er-surface-2); }

/* Auth */
.er-auth { max-width: 440px; margin: 1rem auto 0; }
.er-auth__head { text-align: center; margin-bottom: 1.5rem; }
.er-auth__head .er-brand__mark { width: 3rem; height: 3rem; border-radius: 14px; margin-bottom: .75rem; }
.er-auth__head .er-brand__mark .er-icon { width: 1.4rem; height: 1.4rem; }
.er-callout { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem 1rem; border-radius: var(--er-radius-sm); background: var(--er-primary-soft); color: var(--er-text); font-size: .9rem; }
.er-callout > .er-icon { color: var(--er-primary); margin-top: .15rem; flex: none; }
.er-honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Offline-laag (public/offline.js) */
.eo-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045; text-align: center;
    background: var(--er-accent); color: #fff; font-size: .9rem; font-weight: 500;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); box-shadow: var(--er-shadow-lg);
}
.eo-badge {
    position: fixed; right: .9rem; bottom: .9rem; z-index: 1045; display: none; align-items: center; gap: .4rem;
    background: var(--er-primary); color: #fff; border-radius: 999px; padding: .4rem .85rem;
    font-size: .85rem; font-weight: 600; box-shadow: var(--er-shadow-lg);
}
.eo-badge .eo-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--er-accent); }
.eo-status { font-size: .85rem; margin-top: .35rem; }
.eo-status.queued { color: var(--er-accent); }
.eo-status.synced { color: var(--er-success); }
.eo-toast {
    position: fixed; left: 50%; bottom: 4.5rem; transform: translateX(-50%); z-index: 1090; max-width: 90vw;
    background: var(--er-surface); color: var(--er-text); border: 1px solid var(--er-border); border-left: 4px solid var(--er-accent);
    border-radius: var(--er-radius-sm); padding: .7rem 1rem; font-size: .85rem; box-shadow: var(--er-shadow-lg);
}
@media (max-width: 991.98px) {
    body.has-tabbar .eo-bar { bottom: calc(var(--er-tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: .6rem; }
    body.has-tabbar .eo-badge { bottom: calc(var(--er-tabbar-h) + env(safe-area-inset-bottom) + .75rem); }
    body.has-tabbar .eo-toast { bottom: calc(var(--er-tabbar-h) + env(safe-area-inset-bottom) + 1rem); }
}

/* Beheer */
.er-admin { display: grid; gap: 1.5rem; }
@media (min-width: 992px) { .er-admin { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
.er-admin__nav { display: flex; gap: .25rem; overflow-x: auto; }
@media (min-width: 992px) { .er-admin__nav { flex-direction: column; position: sticky; top: calc(var(--er-topbar-h) + 1rem); } }
.er-admin__nav a { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: 10px; color: var(--er-muted); font-weight: 600; text-decoration: none; white-space: nowrap; }
.er-admin__nav a:hover { background: var(--er-surface-2); color: var(--er-text); }
.er-admin__nav a.is-active { background: var(--er-primary-soft); color: var(--er-primary); }

/* Foutpagina's */
.er-error { text-align: center; max-width: 34rem; margin: 3rem auto; }
.er-error .er-empty__icon { width: 5rem; height: 5rem; }

/* Styleguide (alleen development) */
.er-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.er-swatch { border-radius: var(--er-radius-sm); border: 1px solid var(--er-border); overflow: hidden; background: var(--er-surface); font-size: .8rem; }
.er-swatch span { display: block; height: 56px; }
.er-swatch code { display: block; padding: .4rem .6rem; color: var(--er-muted); }

/* ===== 9. Kaart & lightbox ===== */
.er-map-icon { background: none; border: 0; }
.er-map-number {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
    color: #fff; font: 700 12px/1 var(--er-font); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--er-surface); color: var(--er-text); }
.er-map-popup { max-width: 230px; font-family: var(--er-font); }
.er-map-popup img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: .5rem; }
.er-map-popup strong { display: block; color: #1F2A24; }
.er-map-popup small { color: #5F6B64; }
.er-map-popup .btn { margin-top: .5rem; }

[data-lightbox] { cursor: zoom-in; }
.lb-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .94); display: none; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none; }
.lb-overlay.open { display: flex; }
.lb-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb-img { max-width: 100vw; max-height: 100vh; max-width: 100dvw; max-height: 100dvh; object-fit: contain; display: block; transition: opacity .15s ease; -webkit-touch-callout: none; }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border: none; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lb-btn:hover { background: rgba(255, 255, 255, .28); }
.lb-prev { left: .75rem; }
.lb-next { right: .75rem; }
.lb-close { position: absolute; top: calc(.75rem + env(safe-area-inset-top)); right: .75rem; width: 2.75rem; height: 2.75rem; border: none; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }
.lb-counter { position: absolute; top: calc(1rem + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .85); font-size: .9rem; background: rgba(0, 0, 0, .35); padding: .2rem .7rem; border-radius: 1rem; }
.lb-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); color: #fff; text-align: center; font-size: .95rem; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); }
@media (hover: none) { .lb-prev, .lb-next { width: 2.5rem; height: 2.5rem; opacity: .8; } }

[x-cloak] { display: none !important; }

/* ===== 10. Beweging & toegankelijkheid ===== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
.btn:active, .er-chip:active, .er-tab:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    @view-transition { navigation: none; }
}
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; }

/* Huidige reis op Home: reiskaart als paneel naast tekst */
.er-trip-card--panel { aspect-ratio: auto; min-height: 200px; height: 100%; border-radius: 0; box-shadow: none; }
summary { cursor: pointer; }
.er-step { scroll-margin-top: calc(var(--er-topbar-h) + 1rem); }
.er-step .er-card { transition: box-shadow .3s; }
.er-thumb.is-selected { outline: 3px solid var(--er-accent); outline-offset: -3px; }
.modal-content { background: var(--er-surface); color: var(--er-text); border: 1px solid var(--er-border); border-radius: var(--er-radius); }
.modal-header, .modal-footer { border-color: var(--er-border); }
.modal-header > [data-bs-dismiss="modal"] { margin-left: auto; }

/* Mozaïek past zich aan het aantal foto's aan (geen lege vakken) */
.er-mosaic--n1 { grid-template-columns: 1fr; }
.er-mosaic--n1 a:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 10; }
.er-mosaic--n2 { grid-template-columns: 1fr 1fr; }
.er-mosaic--n2 a:first-child { grid-column: auto; grid-row: auto; }
.er-mosaic--n3 { grid-template-columns: 2fr 1fr; }
.er-mosaic--n3 a:first-child { grid-column: auto; grid-row: span 2; aspect-ratio: auto; }
.er-mosaic--n4 { grid-template-columns: repeat(3, 1fr); }
.er-mosaic--n4 a:first-child { grid-column: span 3; grid-row: auto; aspect-ratio: 16 / 8; }