@charset "UTF-8";
/* ============================================================
   Volker Siedts Homepage — 2026 Refresh
   Modern, framework-free CSS. Mobile-first.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
    /* Palette — dezent warmer Cream (Reise-Stimmung, ohne dominantes Beige) */
    --color-bg: #fcfaf5;          /* warmer Hauch — Seitenhintergrund */
    --color-surface: #ffffff;     /* Karten / Menüs / Dropdowns — Weiß für klaren Kontrast */
    --color-surface-alt: #f1ebdc; /* Block-Hintergründe (Breadcrumb, Galerien, Routenliste) */
    --color-text: #142028;
    --color-text-muted: #5b6772;
    --color-border: #dde3ea;
    --color-accent: #0b6e93;
    --color-accent-strong: #084d68;
    --color-accent-tint: #e3f1f8;
    --color-link: #c0362c;
    --color-link-hover: #962820;
    --color-tip: #0f766e;
    --color-header-bg: rgba(11, 36, 52, 0.92);
    --color-header-bg-solid: #0b2434;
    --color-header-text: #f4f8fb;
    --color-header-text-muted: #b9cbd6;
    --color-overlay: rgba(11, 36, 52, 0.45);

    /* Typography */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* Layout */
    --container-max: 1240px;
    --container-pad: clamp(1rem, 4vw, 2rem);
    --article-width: 52rem;
    /* Mehrteilige Berichte: Lesespalte + Abstand + Sidebar (nur Desktop ab 1100px) */
    --article-report-layout-max: calc(var(--article-width) + var(--space-8) + 15.5rem);
    --header-height: 64px;
    /* Sticky Chapter-Browser: wie Abstand zwischen zwei .chapter-sidebar-nav__panel (margin-top space-2) */
    --chapter-sidebar-sticky-gap: var(--space-2);
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(15, 30, 45, 0.06), 0 1px 3px rgba(15, 30, 45, 0.08);
    --shadow-md: 0 4px 10px rgba(15, 30, 45, 0.08), 0 10px 30px rgba(15, 30, 45, 0.06);
    --shadow-lg: 0 20px 40px rgba(15, 30, 45, 0.12);

    /* Motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --duration-fast: 150ms;
    --duration: 220ms;

    /* Inline-Tipp-Glühbirne (.tip): Bernstein, klar getrennt von --color-link; Icon = filled Silhouette */
    --color-tip-icon: #f59e0b;
    --tip-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13h-5a.5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6Zm3 8.5a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Z'/></svg>");

    /* Karten-Regionen (klickbare Polygone) — warm, gut sichtbar auf blauem Meer */
    --map-region-fill: #d4734a;
    --map-region-stroke: #8b3420;
    --map-region-fill-opacity: 0.38;
    --map-region-stroke-opacity: 0.92;
    --map-region-hover-fill-opacity: 0.55;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0e171f;
        --color-surface: #16222d;
        --color-surface-alt: #1c2a36;
        --color-text: #e8eef3;
        --color-text-muted: #9aa9b5;
        --color-border: #25323e;
        --color-accent: #4cb1d4;
        --color-accent-strong: #82cee9;
        --color-accent-tint: #1a3744;
        --color-link: #f87171;
        --color-link-hover: #fca5a5;
        --color-tip: #5eead4;
        --color-tip-icon: #facc15;
        --color-header-bg: rgba(8, 17, 24, 0.88);
        --color-header-bg-solid: #081118;
        --color-header-text: #f3f8fb;
        --color-header-text-muted: #aabbc6;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.55);
        --map-region-fill: #e8956f;
        --map-region-stroke: #f4c4a8;
        --map-region-fill-opacity: 0.42;
        --map-region-hover-fill-opacity: 0.58;
    }
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--color-link); text-decoration: none; transition: color var(--duration-fast) var(--ease); }
a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-4); letter-spacing: -0.01em; }
p { margin: 0 0 var(--space-4); }
ul { margin: 0; padding: 0; list-style: none; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%);
    background: var(--color-accent); color: #fff; padding: var(--space-3) var(--space-4);
    border-radius: 0 0 var(--radius-md) var(--radius-md); z-index: 1000;
    transition: transform var(--duration) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; text-decoration: none; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    color: var(--color-header-text);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: box-shadow var(--duration) var(--ease);
    isolation: isolate;
}
/* Background blur lives on a pseudo-element so the header itself does not
   become a containing block for fixed descendants (mobile drawer nav). */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-header-bg);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    z-index: -1;
    pointer-events: none;
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.site-header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.site-header__logo {
    display: flex; align-items: center; flex: 0 0 auto;
    color: var(--color-header-text);
}
.site-header__logo img {
    height: 40px; width: auto;
    filter: brightness(0) invert(1);
}

.nav-toggle {
    width: 44px; height: 44px;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    color: var(--color-header-text);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease);
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.nav-toggle__bar {
    display: block; width: 22px; height: 2px; background: currentColor;
    transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Primary nav (mobile baseline) ---------- */
.primary-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-header-bg-solid);
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    transform: translateY(calc(-100% - var(--header-height) - 64px));
    transition: transform var(--duration) var(--ease);
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-4);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}
.primary-nav.is-open { transform: translateY(0); }

.primary-nav__list {
    display: flex; flex-direction: column; gap: var(--space-1);
}
.primary-nav__item { position: relative; }
.primary-nav__link {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--color-header-text);
    font-weight: 500;
    font-size: 1.05rem;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease);
}
.primary-nav__link:hover,
.primary-nav__link:focus { background: rgba(255, 255, 255, 0.08); color: var(--color-header-text); text-decoration: none; }
.primary-nav__chevron {
    width: 12px; height: 12px;
    transition: transform var(--duration) var(--ease);
}
.has-submenu[aria-expanded="true"] > .primary-nav__link .primary-nav__chevron,
.has-submenu.is-open > .primary-nav__link .primary-nav__chevron { transform: rotate(180deg); }

/* Submenus (mobile) — accordion */
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration) var(--ease);
    background: rgba(0, 0, 0, 0.18);
    border-radius: var(--radius-sm);
    margin-top: var(--space-1);
}
.has-submenu.is-open > .submenu { max-height: 2000px; }

.submenu__grid {
    display: grid; gap: var(--space-5);
    padding: var(--space-4);
}
.submenu__col { display: flex; flex-direction: column; gap: var(--space-1); }
.submenu__col > li > a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-header-text);
    border-radius: var(--radius-sm);
}
.submenu__col > li > a:hover {
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}
.submenu__sub {
    padding-left: var(--space-4);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    margin: var(--space-1) 0 var(--space-2) var(--space-3);
    display: flex; flex-direction: column;
}
.submenu__sub a {
    display: block;
    padding: var(--space-1) var(--space-3);
    color: var(--color-header-text-muted);
    font-size: 0.94rem;
}
.submenu__sub a:hover { color: var(--color-header-text); }
.submenu--simple { padding: var(--space-2); }
.submenu--simple a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-header-text);
    border-radius: var(--radius-sm);
}
.submenu--simple a:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }

/* ---------- Drill-down nav (mobile only) ---------- */
.drill-nav { display: none; }

@media (max-width: 767.98px) {
    /* When JS has built the drill nav, hide the original list & its accordions */
    .primary-nav.has-drill-nav > .primary-nav__list { display: none; }
    .primary-nav.has-drill-nav .submenu { display: none; }

    .drill-nav { display: block; }

    .drill-panel { display: none; }
    .drill-panel.is-active {
        display: block;
        animation: drill-slide-in 220ms var(--ease);
    }
    @keyframes drill-slide-in {
        from { opacity: 0; transform: translateX(10px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    .drill-header {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding-bottom: var(--space-3);
        margin-bottom: var(--space-2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .drill-back {
        background: transparent;
        border: 0;
        color: var(--color-header-text);
        padding: var(--space-2) var(--space-3);
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        cursor: pointer;
        border-radius: var(--radius-sm);
        font: inherit;
        font-size: 0.92rem;
        font-weight: 500;
        transition: background var(--duration-fast) var(--ease);
    }
    .drill-back:hover,
    .drill-back:focus-visible { background: rgba(255, 255, 255, 0.1); outline: none; }
    .drill-back svg { width: 14px; height: 14px; }

    .drill-title {
        color: var(--color-header-text);
        font-weight: 700;
        font-size: 1.25rem;
        line-height: 1.4;
        text-decoration: none;
        padding: var(--space-1) var(--space-3);
        position: relative;
        transition: color var(--duration-fast) var(--ease);
    }
    .drill-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.2em;
        bottom: 0.2em;
        width: 1px;
        background: rgba(255, 255, 255, 0.3);
    }
    .drill-title:hover,
    .drill-title:focus-visible {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        text-decoration: none;
        border-radius: var(--radius-sm);
        outline: none;
    }

    .drill-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .drill-row {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        color: var(--color-header-text);
        border-radius: var(--radius-sm);
        font-size: 1.05rem;
        font-weight: 500;
        text-decoration: none;
        transition: background var(--duration-fast) var(--ease);
    }
    .drill-row__label { flex: 1; }
    .drill-row:hover,
    .drill-row:focus-visible {
        background: rgba(255, 255, 255, 0.08);
        color: var(--color-header-text);
        text-decoration: none;
        outline: none;
    }
    .drill-chevron {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        color: var(--color-header-text-muted);
    }
}

/* Search toggle button (mobile only) */
.search-toggle {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    color: var(--color-header-text);
    cursor: pointer;
    margin-left: auto;
    transition: background var(--duration-fast) var(--ease);
}
.search-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.search-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); }
.search-toggle svg { width: 18px; height: 18px; }

/* Inline search pill (desktop only) */
.site-search { display: none; }

/* Custom clear-button for type="search" inputs on dark backgrounds */
.site-search input[type="search"]::-webkit-search-cancel-button,
.search-overlay input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-left: var(--space-2);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' stroke='%23f4f8fb' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease);
}
.site-search input[type="search"]::-webkit-search-cancel-button:hover,
.search-overlay input[type="search"]::-webkit-search-cancel-button:hover {
    opacity: 1;
}

/* Search overlay — slides down below header */
.search-overlay {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--container-pad);
    background: var(--color-header-bg-solid);
    /* box-shadow nur bei is-open, sonst hängt der Schatten der versteckten Overlay
       sichtbar in den Viewport rein (Y-Offset 16px) */
    transform: translateY(calc(-100% - var(--header-height) - 16px));
    transition: transform var(--duration) var(--ease);
}
.search-overlay.is-open {
    transform: translateY(0);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}
.search-overlay input[type="search"] {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-header-text);
    font: inherit;
    font-size: 1rem;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    -webkit-appearance: none;
    appearance: none;
}
.search-overlay input[type="search"]::placeholder { color: var(--color-header-text-muted); }
.search-overlay input[type="search"]:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 0;
    border-color: transparent;
}
.search-overlay__submit,
.search-overlay__close {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease);
}
.search-overlay__submit {
    background: var(--color-accent);
    color: #fff;
}
.search-overlay__submit:hover { background: var(--color-accent-strong); }
.search-overlay__submit svg { width: 18px; height: 18px; }
.search-overlay__close {
    background: transparent;
    color: var(--color-header-text);
}
.search-overlay__close:hover { background: rgba(255, 255, 255, 0.1); }
.search-overlay__close svg { width: 18px; height: 18px; }

/* ---------- Desktop nav ---------- */
@media (min-width: 768px) {
    .nav-toggle { display: none; }
    .search-toggle { display: none; }

    /* Inline search pill */
    .site-search {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        margin-left: auto;
        width: clamp(180px, 22vw, 260px);
        background: rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
    }
    .site-search input[type="search"] {
        flex: 1;
        min-width: 0;
        background: transparent;
        border: 0;
        color: var(--color-header-text);
        font: inherit;
        padding: var(--space-2) 0;
        -webkit-appearance: none;
        appearance: none;
    }
    .site-search input[type="search"]::placeholder { color: var(--color-header-text-muted); }
    .site-search input[type="search"]:focus { outline: none; }
    .site-search button {
        flex: 0 0 auto;
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--color-accent);
        border: 0; color: #fff;
        border-radius: 999px;
        cursor: pointer;
        transition: background var(--duration-fast) var(--ease);
    }
    .site-search button:hover { background: var(--color-accent-strong); }
    .site-search svg { width: 18px; height: 18px; }

    .primary-nav {
        position: static;
        transform: none;
        inset: auto;
        background: transparent;
        box-shadow: none;       /* mobile drawer-shadow im Desktop-Layout neutralisieren */
        padding: 0;
        flex-direction: row;
        align-items: center;
        gap: var(--space-5);
        flex: 1;
        overflow: visible;
    }

    .primary-nav__list {
        flex-direction: row;
        gap: var(--space-1);
        flex: 1;
    }

    .primary-nav__item { position: relative; }
    .primary-nav__link {
        padding: var(--space-3) var(--space-4);
        min-height: var(--header-height);
    }

    /* Mega menu desktop */
    .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0;
        background: var(--color-surface);
        color: var(--color-text);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        max-height: none;
        overflow: visible;
        min-width: 280px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity var(--duration) var(--ease),
                    transform var(--duration) var(--ease),
                    visibility var(--duration) var(--ease);
        pointer-events: none;
        z-index: 50;
    }
    .has-submenu.is-open > .submenu,
    .has-submenu:hover > .submenu,
    .has-submenu:focus-within > .submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition-delay: 0s;
    }

    .submenu--mega {
        position: fixed;
        top: var(--header-height);
        left: var(--space-4);
        right: var(--space-4);
        width: auto;
        max-width: calc(var(--container-max) - 2 * var(--space-4));
        margin-inline: auto;
    }
    .submenu__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: var(--space-5);
        gap: var(--space-5);
    }
    .submenu__grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .submenu__col a {
        hyphens: auto;
        overflow-wrap: anywhere;
    }
    .submenu__col > li > a {
        padding: var(--space-2) var(--space-3);
        color: var(--color-text);
        font-weight: 500;
    }
    .submenu__col > li > a:hover {
        background: var(--color-accent-tint);
        color: var(--color-accent-strong);
    }
    .submenu__sub { border-left-color: var(--color-border); }
    .submenu__sub a { color: var(--color-text-muted); }
    .submenu__sub a:hover { color: var(--color-accent-strong); background: var(--color-accent-tint); }

    .submenu--simple {
        min-width: 280px; padding: var(--space-2);
    }
    .submenu--simple a {
        color: var(--color-text);
        font-weight: 500;
        white-space: nowrap;
    }
    .submenu--simple a:hover {
        background: var(--color-accent-tint);
        color: var(--color-accent-strong);
    }

}

/* ---------- Main / hero ---------- */
.site-main { padding-bottom: var(--space-8); }

.hero {
    padding: var(--space-8) var(--container-pad) var(--space-7);
}
.hero__inner {
    max-width: var(--container-max);
    margin: 0 auto;
}
.hero__title {
    font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
    margin-bottom: var(--space-4);
    color: var(--color-accent-strong);
}
.hero__lead {
    font-size: clamp(1.05rem, 0.6vw + 1rem, 1.25rem);
    max-width: 75ch;
    color: var(--color-text-muted);
    margin: 0;
}
.hero__lead a { font-weight: 600; }

/* ---------- Section title ---------- */
.section-title {
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    margin-bottom: var(--space-6);
}

/* ---------- Hero separator ---------- */
.hero__separator {
    width: 72px;
    height: 3px;
    background: var(--color-accent);
    border: 0;
    border-radius: 2px;
    margin: 0 0 var(--space-5);
}

/* ---------- Teasers ---------- */
.teasers {
    padding: var(--space-6) var(--container-pad) 0;
}
.teasers__inner {
    max-width: var(--container-max);
    margin: 0 auto;
}

.teaser-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}

@media (min-width: 760px) {
    .teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.teaser-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.teaser-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.teaser-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface-alt);
}
.teaser-card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--ease);
}
.teaser-card:hover .teaser-card__media img { transform: scale(1.04); }

.teaser-card__body {
    padding: var(--space-3) var(--space-5) var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-2);
    flex: 1;
}
.teaser-card__title {
    font-size: 1.2rem;
    margin: 0;
}
.teaser-card__title a {
    color: var(--color-text);
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size var(--duration) var(--ease), color var(--duration-fast) var(--ease);
}
.teaser-card__title a:hover {
    color: var(--color-text);
    text-decoration: none;
    background-size: 100% 1px;
}
.teaser-card__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    margin: 0;
}
.teaser-card__meta::before {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><rect x='1' y='2.5' width='12' height='10.5' rx='1.2' stroke='black' stroke-width='1.3' fill='none'/><path d='M1 5.7h12' stroke='black' stroke-width='1.3'/><path d='M4 1v2.6M10 1v2.6' stroke='black' stroke-width='1.3' stroke-linecap='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><rect x='1' y='2.5' width='12' height='10.5' rx='1.2' stroke='black' stroke-width='1.3' fill='none'/><path d='M1 5.7h12' stroke='black' stroke-width='1.3'/><path d='M4 1v2.6M10 1v2.6' stroke='black' stroke-width='1.3' stroke-linecap='round'/></svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.teaser-card__text {
    color: var(--color-text-muted);
    margin: 0;
    flex: 1;
}

/* Wide viewports: horizontal layout, image left, fills card height */
@media (min-width: 1100px) {
    .teaser-card {
        flex-direction: row;
        align-items: stretch;
    }
    .teaser-card__media {
        flex: 0 0 45%;
        aspect-ratio: auto;
    }
    .teaser-card__body {
        flex: 1;
        padding: var(--space-4) var(--space-5) var(--space-5);
    }
}

/* ---------- Featured section (wraps hero-carousel) ---------- */
.featured {
    padding: var(--space-5) var(--container-pad) 0;
}
.featured__inner {
    max-width: var(--container-max);
    margin: 0 auto;
}
/* Karussell auf gleiche Breite wie die Teaser-Tile-Grid, linksbündig */
.featured__inner > .hero-carousel {
    max-width: 56rem;
}

/* ---------- Hero Carousel ---------- */
.hero-carousel {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 60vh;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface-alt);
    box-shadow: var(--shadow-md);
}

.hero-carousel__slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-carousel__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms var(--ease), visibility 500ms var(--ease);
    text-decoration: none;
    color: #fff;
}
.hero-carousel__slide:hover { text-decoration: none; color: #fff; }
.hero-carousel__slide.is-active {
    opacity: 1;
    visibility: visible;
}
.hero-carousel--single .hero-carousel__slide { transition: none; }

.hero-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-carousel__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-7) var(--space-5) var(--space-5);
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
    color: #fff;
}

.hero-carousel__title {
    color: #fff;
    margin: 0 0 var(--space-2);
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.hero-carousel__text {
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 var(--space-3);
    max-width: 60ch;
    font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.1rem);
}

.hero-carousel__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    transition: transform var(--duration-fast) var(--ease);
}
.hero-carousel__cta svg { width: 16px; height: 16px; }
.hero-carousel__slide:hover .hero-carousel__cta { transform: translateX(4px); }

.hero-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--duration-fast) var(--ease);
    z-index: 2;
}
.hero-carousel__nav:hover { background: rgba(0, 0, 0, 0.6); }
.hero-carousel__nav--prev { left: var(--space-4); }
.hero-carousel__nav--next { right: var(--space-4); }
.hero-carousel__nav svg { width: 20px; height: 20px; }

.hero-carousel__dots {
    position: absolute;
    bottom: var(--space-4);
    right: var(--space-4);
    display: flex;
    gap: var(--space-2);
    z-index: 2;
}
.hero-carousel__dot {
    width: 10px; height: 10px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
    border: 0;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.hero-carousel__dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero-carousel__dot.is-active {
    background: #fff;
    transform: scale(1.2);
}

@media (max-width: 600px) {
    .hero-carousel__nav { display: none; }
    .hero-carousel__caption { padding: var(--space-6) var(--space-4) var(--space-4); }
    .hero-carousel__text { display: none; }
    .hero-carousel__dots { bottom: var(--space-3); right: var(--space-3); }
}

/* ---------- Teaser Tile (Option B — visual variant) ---------- */
.teaser-tile-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 56rem; /* ~25% schmaler als der Container, linksbündig */
}
@media (min-width: 760px) {
    .teaser-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.teaser-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    aspect-ratio: 16 / 9;
    background: var(--color-surface-alt);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.teaser-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.teaser-tile__link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
}
.teaser-tile__link:hover { color: #fff; text-decoration: none; }

.teaser-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease);
}
.teaser-tile:hover .teaser-tile__img { transform: scale(1.06); }

.teaser-tile__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-5) var(--space-4) var(--space-4);
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
    color: #fff;
}
.teaser-tile__title {
    color: #fff;
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.teaser-tile__text {
    color: rgba(255, 255, 255, 0.88);
    margin: var(--space-2) 0 0;
    font-size: 0.92rem;
    line-height: 1.4;
}

/* ---------- Article (single post) ---------- */
.article {
    padding: var(--space-5) var(--container-pad) var(--space-7);
}
.article__inner {
    max-width: var(--article-width);
    margin: 0 auto;
}
.article__header {
    padding-top: var(--space-5);
    margin-bottom: var(--space-5);
}
/* Mehrteilige Reiseberichte (Australien): etwas kompakter bis zum ersten Kapitel-h2 */
.article--with-report-nav .article__header {
    margin-bottom: var(--space-4);
}
.article--with-report-nav .article__body > .article__chapter:first-child > h2 {
    margin-top: var(--space-6);
}
.article__title {
    font-size: clamp(1.75rem, 1.5vw + 1.25rem, 2.25rem);
    line-height: 1.15;
    color: var(--color-accent-strong);
    margin: 0 0 var(--space-3);
}
.article__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0;
}
.article__meta::before {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><rect x='1' y='2.5' width='12' height='10.5' rx='1.2' stroke='black' stroke-width='1.3' fill='none'/><path d='M1 5.7h12' stroke='black' stroke-width='1.3'/><path d='M4 1v2.6M10 1v2.6' stroke='black' stroke-width='1.3' stroke-linecap='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><rect x='1' y='2.5' width='12' height='10.5' rx='1.2' stroke='black' stroke-width='1.3' fill='none'/><path d='M1 5.7h12' stroke='black' stroke-width='1.3'/><path d='M4 1v2.6M10 1v2.6' stroke='black' stroke-width='1.3' stroke-linecap='round'/></svg>");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.article__separator {
    width: 72px;
    height: 3px;
    background: var(--color-accent);
    border: 0;
    border-radius: 2px;
    margin: var(--space-4) 0 0;
}
.article__body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text);
}
.article__body p {
    margin: 0 0 var(--space-4);
}

/* Einleitungsabsatz auf Doorpages / Hub-Seiten (vormals Bootstrap .lead) */
.article__body p.article__lead {
    font-size: 1.2rem;
    line-height: 1.65;
    margin-bottom: var(--space-5);
}
@media (min-width: 640px) {
    .article__body p.article__lead {
        font-size: 1.3rem;
        line-height: 1.68;
    }
}
.article__body p.article__lead a {
    font-weight: 600;
}

/* Doorpages: prominente Ziel-„Karten“ + Leaflet (nicht wie Chapter-Pills) */
.door-section {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}
.door-section__heading {
    font-size: clamp(1.28rem, 1vw + 1rem, 1.55rem);
    margin: 0 0 var(--space-5);
    letter-spacing: -0.01em;
}
.door-section__grid {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}
@media (min-width: 800px) {
    .door-section__grid {
        /* --door-grid-columns pro Seite via render_door_map_section($layout) */
        grid-template-columns: var(--door-grid-columns, minmax(0, 1fr) minmax(0, 2fr));
        gap: var(--space-5);
    }
    .door-section__map .leaflet-map-figure {
        margin: 0;
    }
}
.door-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* side-grid: zwei Spalten nur mobil (volle Breite); Desktop eine Spalte neben der Karte */
.door-links--cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}
@media (min-width: 800px) {
    .door-links--cols-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Variante A: Karte oben, Links darunter — 2 Spalten mobil, 3 ab ~640px */
.door-section--map-first .door-section__grid {
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 800px) {
    .door-section--map-first .door-section__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.door-links--cols-responsive {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}
@media (min-width: 640px) {
    .door-links--cols-responsive {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* map-first-stack: Karte oben, darunter 1 Spalte → 2 gleich breite Spalten ab 640px */
.door-links--cols-2-below-map {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}
@media (min-width: 640px) {
    .door-links--cols-2-below-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.door-links--compact .door-links__card {
    align-items: center;
    padding: var(--space-2) var(--space-3);
}
.door-links--compact .door-links__title {
    font-size: 1rem;
}
.door-links--compact .door-links__chevron {
    margin-top: 0;
    font-size: 1.2rem;
}
/* Vergleichsvorschau auf Doorpages (temporär) */
.door-section--compare {
    margin-top: var(--space-7);
    padding: var(--space-5);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--color-surface-alt) 35%, transparent);
}
.door-section--compare + .door-section--compare {
    margin-top: var(--space-6);
}
.door-section--compare .door-section__heading {
    font-size: clamp(1.1rem, 0.9vw + 0.95rem, 1.35rem);
    color: var(--color-text-muted);
}
.door-links__card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--color-text);
    transition:
        border-color var(--duration) var(--ease),
        box-shadow var(--duration) var(--ease),
        transform var(--duration) var(--ease);
}
.door-links__card:hover {
    color: var(--color-text);
    text-decoration: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.door-links__body {
    flex: 1;
    min-width: 0;
}
.door-links__title {
    display: block;
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: -0.01em;
    color: var(--color-accent-strong);
}
.door-links__subtitle {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}
.door-links__chevron {
    flex-shrink: 0;
    font-size: 1.35rem;
    line-height: 1;
    margin-top: 0.12em;
    color: var(--color-accent);
}

.article__body .article__chapter > ul,
.article__body .article__chapter > ol {
    margin: 0 0 var(--space-4) var(--space-5);
    padding: 0;
}
.article__body .article__chapter > ul {
    list-style: disc;
}
.article__body .article__chapter > ol {
    list-style: decimal;
}
.article__body .article__chapter > ul > li,
.article__body .article__chapter > ol > li {
    margin: 0;
    padding-left: var(--space-1);
}
.article__body .article__chapter {
    /* --chapter-nav-height wird per JS gesetzt (ResizeObserver); Fallback 80px für ersten Render */
    scroll-margin-top: calc(var(--header-height) + var(--chapter-nav-height, 80px) + var(--space-3));
}
.article__body .article__anchor {
    scroll-margin-top: calc(var(--header-height) + var(--chapter-nav-height, 80px) + var(--space-3));
}
/* Legacy-Berichte: #einleitung = Mood + Titel (Anker im Header, nicht im Textblock) */
.article__header.article__anchor {
    scroll-margin-top: calc(var(--header-height) + var(--space-3));
}
.article__body .article__week-title {
    margin-top: var(--space-5);
    margin-bottom: var(--space-3);
    color: var(--color-text);
    font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem);
    letter-spacing: -0.005em;
}
.article__body .article__chapter h2 {
    font-size: clamp(1.35rem, 1vw + 1rem, 1.75rem);
    margin-top: var(--space-7);
    margin-bottom: var(--space-3);
    color: var(--color-text);
    letter-spacing: -0.005em;
}
.article__body .article__chapter h3 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--color-text);
    font-size: clamp(1.18rem, 0.75vw + 0.95rem, 1.45rem);
    letter-spacing: -0.005em;
}
.article__body .article__chapter + .article__chapter {
    margin-top: 0;
}
.article__body .article__chapter + .article__chapter::before {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-accent);
    border-radius: 2px;
    margin: var(--space-6) auto var(--space-4);
    opacity: 0.55;
}
.article__section-divider {
    display: block;
    width: 60px;
    height: 3px;
    margin: var(--space-6) auto var(--space-4);
    border: 0;
    border-radius: 2px;
    background: var(--color-accent);
    opacity: 0.55;
}
.article__body .article__chapter + .article__chapter h2 {
    margin-top: 0;
}
.article__body .article__chapter + .article__chapter h3 {
    margin-top: 0;
}
.article__body strong { font-weight: 600; color: var(--color-text); }
.article__body em { font-style: italic; }

/* Google Programmable Search (Suchergebnisseite) */
.article__body--google-cse .article__chapter {
    margin: 0;
}
.google-cse {
    max-width: 100%;
    overflow: visible;
}
.google-cse .gsc-branding,
.google-cse .gcsc-branding {
    display: none !important;
}
.google-cse .gsc-control-cse,
.google-cse .gsc-control-cse .gsc-control-wrapper-cse {
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
/* Suchfeld: kompakt wie Header-Suche, bündig mit Artikelspalte */
.google-cse form.gsc-search-box {
    margin: 0 0 var(--space-4) !important;
    max-width: 100%;
}
.google-cse table.gsc-search-box {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
}
.google-cse table.gsc-search-box tr {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--space-2);
}
.google-cse table.gsc-search-box td.gsc-input {
    flex: 1 1 auto;
    width: auto !important;
    padding: 0 !important;
}
.google-cse table.gsc-search-box td.gsc-search-button {
    flex: 0 0 auto;
    width: auto !important;
    padding: 0 !important;
}
.google-cse table.gsc-search-box td.gsc-clear-button {
    width: auto !important;
}
.google-cse .gsc-input-box,
.google-cse .gsc-input-box table,
.google-cse .gsc-input-box tbody,
.google-cse .gsc-input-box tr,
.google-cse .gsib_a,
.google-cse .gsib_b {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.35 !important;
}
.google-cse .gsc-input-box {
    width: 100% !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-sm);
    padding: 0 !important;
}
.google-cse .gsc-input {
    width: 100% !important;
    height: 2.5rem !important;
    min-height: 0 !important;
    font: inherit !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    color: var(--color-text) !important;
    padding: var(--space-2) var(--space-3) !important;
    background: transparent !important;
    background-image: none !important;
}
.google-cse .gsc-search-button-v2,
.google-cse .gsc-search-button,
.google-cse button.gsc-search-button {
    margin: 0 !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-accent) !important;
}
.google-cse .gsc-search-button-v2:hover,
.google-cse .gsc-search-button:hover,
.google-cse button.gsc-search-button:hover {
    background: var(--color-accent-strong) !important;
}
.google-cse .gsc-search-button-v2 svg,
.google-cse .gsc-search-button svg {
    fill: #fff !important;
}
.google-cse .gscb_a {
    color: var(--color-text-muted) !important;
}
.google-cse .gsc-positioningWrapper {
    margin: 0 !important;
    padding: 0 !important;
}
/* Toolbar: Reiter links, Sortierung rechts (DOM per JS zusammengeführt) */
.google-cse__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-4) !important;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.google-cse__toolbarRow {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    min-width: 0;
}
.google-cse__toolbarMeta {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--space-1);
    border-top: 1px solid color-mix(in oklab, var(--color-border) 70%, transparent);
}
.google-cse__toolbarMeta .gsc-result-info,
.google-cse__toolbarMeta .gsc-result-info-container {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--color-text-muted) !important;
    font: inherit !important;
    font-size: 0.8125rem !important;
}
.google-cse__toolbar .gsc-tabsArea {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
}
.google-cse__toolbar .gsc-tabsArea .gs-spacer,
.google-cse__toolbar .gsc-tabsArea .gs-spacer-opera {
    display: none !important;
}
.google-cse__toolbar .gsc-tabHeader {
    display: inline-block;
    margin: 0 !important;
    padding: var(--space-2) var(--space-4) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--color-text-muted) !important;
    font: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
}
.google-cse__toolbar .gsc-tabHeader.gsc-tabhActive {
    color: #fff !important;
    background: var(--color-accent) !important;
    border-color: var(--color-accent-strong) !important;
}
.google-cse__toolbar .gsc-tabHeader.gsc-tabhInactive:hover {
    color: var(--color-accent-strong) !important;
    background: color-mix(in oklab, var(--color-accent-tint) 55%, var(--color-surface-alt)) !important;
    border-color: var(--color-border) !important;
}
.google-cse__toolbar .gsc-orderby-container {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--space-2);
    margin: 0 !important;
    padding: 0 !important;
    text-align: right;
    background: transparent !important;
    white-space: nowrap;
}
.google-cse__toolbar .gsc-orderby-label {
    color: var(--color-text-muted) !important;
    font: inherit !important;
    font-size: 0.8125rem !important;
    font-weight: 600;
    padding: 0 !important;
    margin: 0 !important;
}
.google-cse__toolbar .gsc-option-menu-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.google-cse__toolbar .gsc-selected-option-container {
    display: block;
    height: 2rem !important;
    line-height: 2rem !important;
    min-width: 6.5rem;
    max-width: none;
    margin: 0 !important;
    padding: 0 1.625rem 0 0.625rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    font: inherit !important;
    font-size: 0.8125rem !important;
    font-weight: 600;
    box-shadow: none !important;
    position: relative !important;
    text-align: left !important;
    cursor: pointer;
}

/* Google-Info-Leiste ausblenden, sobald wir sie in die Toolbar gezogen haben */
.google-cse .gsc-above-wrapper-area[data-cse-moved="1"] {
    display: none !important;
}
.google-cse__toolbar .gsc-selected-option {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.google-cse__toolbar .gsc-control-cse .gsc-option-selector,
.google-cse__toolbar .gsc-option-selector {
    position: absolute !important;
    top: 50% !important;
    right: 0.5rem !important;
    margin: 0 !important;
    transform: translateY(-50%);
    height: 11px !important;
    width: 7px !important;
    padding: 0 !important;
    border: 0 !important;
}
.google-cse__toolbar .gsc-option-menu-container.gsc-option-menu-container-visible .gsc-option-menu {
    top: calc(100% + 2px);
    right: 0;
}
/* Kein Scroll-Container in der Spalte — Seite scrollt normal */
.google-cse .gsc-results-wrapper-nooverlay {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.google-cse .gsc-tabData.gsc-tabdActive {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.google-cse .gsc-results-wrapper-visible,
.google-cse .gsc-results-wrapper-overlay,
.google-cse .gsc-expansionArea,
.google-cse .gsc-wrapper,
.google-cse .gsc-results,
.google-cse .gsc-tabData {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    position: static !important;
}
.google-cse .gsc-above-wrapper-area {
    margin: 0 0 var(--space-4) !important;
    padding: var(--space-2) var(--space-3) !important;
    border: 1px solid var(--color-border) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--color-surface-alt);
    width: 100% !important;
    display: block !important;
    box-sizing: border-box;
}
.google-cse .gsc-above-wrapper-area-container,
.google-cse .gsc-above-wrapper-area-container table,
.google-cse .gsc-above-wrapper-area-container tbody,
.google-cse .gsc-above-wrapper-area-container tr {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.google-cse .gsc-above-wrapper-area-container {
    display: block !important;
}
.google-cse .gsc-above-wrapper-area-container table {
    table-layout: fixed;
    border-collapse: collapse;
}
.google-cse .gsc-above-wrapper-area-container td {
    padding: 0 !important;
    vertical-align: middle !important;
}
.google-cse .gsc-above-wrapper-area-container td:empty {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
}
.google-cse .gsc-result-info-container {
    width: 100%;
}
.google-cse .gsc-result-info {
    color: var(--color-text-muted) !important;
    font: inherit !important;
    font-size: 0.8125rem !important;
    margin: 0 !important;
    padding: 0 !important;
}
.google-cse .gsc-option-menu-container {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.google-cse .gsc-option-menu {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-md) !important;
    font-size: 0.8125rem !important;
    padding: var(--space-1) 0 !important;
}
.google-cse .gsc-option-menu-item {
    color: var(--color-text) !important;
    font: inherit !important;
    padding: var(--space-2) var(--space-4) !important;
    background: var(--color-surface) !important;
}
.google-cse .gsc-option-menu-item:hover,
.google-cse .gsc-option-menu-item-highlighted {
    background: var(--color-accent-tint) !important;
    color: var(--color-accent-strong) !important;
}
/* Treffer: Akzentfarbe wie Überschriften (Google: .gs-result .gs-title * { color:#0000cc; underline }) */
.google-cse .gsc-control-cse .gs-result .gs-title,
.google-cse .gsc-control-cse .gs-result .gs-title *,
.google-cse .gs-result .gs-title a.gs-title,
.google-cse .gs-result .gs-title a.gs-title * {
    color: var(--color-accent-strong) !important;
    font-weight: 600;
    text-decoration: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background-image: none !important;
}
.google-cse .gsc-control-cse .gs-result .gs-title a.gs-title:hover,
.google-cse .gsc-control-cse .gs-result .gs-title a.gs-title:hover *,
.google-cse .gs-result .gs-title a.gs-title:hover,
.google-cse .gs-result .gs-title a.gs-title:hover * {
    color: var(--color-accent) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--color-accent) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px;
    border-bottom: none !important;
}
.google-cse .gs-snippet,
.google-cse .gs-visibleUrl,
.google-cse .gs-visibleUrl-short,
.google-cse .gs-visibleUrl-breadcrumb {
    color: var(--color-text-muted) !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
}
.google-cse .gsc-webResult.gsc-result,
.google-cse .gsc-result {
    margin: 0 0 var(--space-4) !important;
    padding: var(--space-5) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-sm);
}
.google-cse .gsc-webResult.gsc-result:last-child {
    margin-bottom: 0 !important;
}
/* Fußzeile: Seitennummern + „bei Google suchen“ */
.google-cse .gsc-cursor-box {
    --cse-pagination-border: color-mix(in oklab, var(--color-border) 72%, var(--color-text-muted));
    margin-top: var(--space-6);
    padding: var(--space-5) var(--space-4);
    border-top: 1px solid var(--cse-pagination-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}
.google-cse .gsc-cursor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}
.google-cse .gsc-cursor-box .gsc-trailing-more-results,
.google-cse .gsc-cursor-box .gcsc-more-maybe-branding-root {
    margin: 0 !important;
    padding: 0;
    display: block;
    order: 2;
}
.google-cse .gsc-cursor {
    order: 1;
}
.google-cse .gsc-cursor-page,
.google-cse .gsc-cursor-next-page,
.google-cse .gsc-cursor-numbered-page {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    margin: 0 !important;
    padding: 0 var(--space-3) !important;
    border: 1px solid var(--cse-pagination-border) !important;
    border-radius: 6px;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    font: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition:
        background var(--duration-fast) var(--ease),
        border-color var(--duration-fast) var(--ease),
        color var(--duration-fast) var(--ease);
}
.google-cse .gsc-cursor-page:hover,
.google-cse .gsc-cursor-next-page:hover,
.google-cse .gsc-cursor-numbered-page:hover {
    background: var(--color-accent-tint) !important;
    border-color: color-mix(in oklab, var(--color-accent) 40%, var(--color-border)) !important;
    color: var(--color-accent-strong) !important;
}
.google-cse .gsc-cursor-current-page {
    background: transparent !important;
    border: 2px solid var(--color-accent) !important;
    color: var(--color-accent-strong) !important;
    cursor: default;
    box-shadow: none;
}
/* „… bei Google suchen“ (gcsc-find-more-on-google) */
.google-cse .gcsc-more-maybe-branding-root a,
.google-cse .gsc-trailing-more-results a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: var(--space-2) var(--space-4);
    border: 1px solid color-mix(in oklab, var(--color-link) 28%, var(--color-border));
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-link) !important;
    font: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;
    box-shadow: var(--shadow-sm);
    transition:
        background var(--duration-fast) var(--ease),
        border-color var(--duration-fast) var(--ease),
        color var(--duration-fast) var(--ease);
}
.google-cse .gcsc-find-more-on-google {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    margin: 0;
    padding: 0;
    color: inherit;
    line-height: 1.35;
    white-space: nowrap;
}
.google-cse .gcsc-find-more-on-google-magnifier {
    display: block;
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
    margin: 0 !important;
    padding: 0;
    overflow: visible;
    fill: currentColor;
    vertical-align: middle;
}
.google-cse .gcsc-find-more-on-google-text,
.google-cse .gcsc-find-more-on-google-query {
    display: inline !important;
    margin: 0;
    padding: 0;
    color: inherit !important;
    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit;
    line-height: inherit;
    white-space: normal;
}
.google-cse .gcsc-find-more-on-google-query {
    font-weight: 700;
}
.google-cse .gcsc-more-maybe-branding-root a:hover,
.google-cse .gcsc-more-maybe-branding-root a:focus-visible,
.google-cse .gsc-trailing-more-results a:hover,
.google-cse .gsc-trailing-more-results a:focus-visible {
    background: color-mix(in oklab, var(--color-link) 8%, var(--color-surface)) !important;
    border-color: color-mix(in oklab, var(--color-link) 45%, var(--color-border)) !important;
    color: var(--color-link-hover) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.google-cse .gsc-trailing-more-results img,
.google-cse .gsc-trailing-more-results a img {
    width: 1rem;
    height: 1rem;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    opacity: 0.85;
    flex-shrink: 0;
}

.article-mood {
    margin: 0 0 var(--space-5);
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}
.article-mood img {
    display: block;
    width: 100%;
    height: auto;
}
.article-callout {
    margin: var(--space-5) 0;
    padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
    border-left: 4px solid var(--color-accent);
    background: color-mix(in oklab, var(--color-accent-tint) 46%, var(--color-surface));
    box-shadow: 0 1px 0 color-mix(in oklab, var(--color-border) 75%, transparent);
}
.article-callout > :first-child { margin-top: 0; }
.article-callout > :last-child { margin-bottom: 0; }
.article-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.article-checklist > li {
    position: relative;
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
}
.article-checklist > li:last-child {
    margin-bottom: 0;
}
.article-checklist > li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.05em;
    color: var(--color-accent-strong);
    font-size: 0.95em;
    font-weight: 700;
}
.article-checklist--plain > li {
    padding-left: 0;
}
.article-checklist--plain > li::before {
    content: none;
}

/* ---------- Inline Gallery (Thumbnails im Text) ---------- */
.inline-gallery {
    --thumb-area: 16000; /* px² Zielfläche pro Thumbnail (unabhängig vom Seitenverhältnis) */
    display: flex;
    gap: var(--space-2);
}
.inline-gallery--stacked { flex-direction: column; align-items: flex-start; }
.inline-gallery--row     { flex-direction: row; flex-wrap: wrap; align-items: stretch; max-width: 100%; }
.inline-gallery--row.inline-gallery--right,
.inline-gallery--row.inline-gallery--left {
    clear: both;
    margin-bottom: var(--space-4);
}
/* Stacked + rechts schwebend: Thumbnails auch rechtsbündig zueinander */
.inline-gallery--stacked.inline-gallery--right { align-items: flex-end; }
.inline-gallery--left {
    float: left;
    margin: var(--space-1) var(--space-5) var(--space-3) 0;
}
.inline-gallery--right {
    float: right;
    margin: var(--space-1) 0 var(--space-3) var(--space-5);
}
/* Block-Modus nutzt CSS Grid statt Flex — damit funktionieren Shrink + Wrap sauber,
   ohne dass aspect-ratio + align-items: stretch (aus --row) die Breite festzurrt. */
.inline-gallery--block {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, max-content));
    justify-content: center;
    gap: var(--space-2);
    float: none;
    clear: both;
    margin: var(--space-5) auto;
    width: 100%;
}
/* Auf schmalen Viewports immer 2 Spalten — vermeidet das 3+1-Layout bei 4 Bildern. */
@media (max-width: 767.98px) {
    .inline-gallery--block {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .inline-gallery--block .inline-gallery__thumb {
        width: 100%;
        min-width: 0;
    }
}

/* ---------- Block Gallery (eigenständig, für ≥3 Bilder als Grid) ---------- */
.block-gallery,
.article__body .article__chapter > .block-gallery {
    list-style: none;
    margin: var(--space-5) 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-2);
}
/* Hochformat: mehr Spalten (~gleiche Zellenfläche wie 6× Querformat), volle Breite + gleicher gap */
.block-gallery--portrait,
.article__body .article__chapter > .block-gallery--portrait {
    grid-template-columns: repeat(var(--gal-cols, 10), minmax(0, 1fr));
}
@media (max-width: 767.98px) {
    .block-gallery,
    .article__body .article__chapter > .block-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .block-gallery--portrait,
    .article__body .article__chapter > .block-gallery--portrait {
        grid-template-columns: repeat(var(--gal-cols-sm, 5), minmax(0, 1fr));
    }
}
.block-gallery > li,
.article__body .article__chapter > .block-gallery > li {
    margin: 0;
    padding: 0;
}
.block-gallery__thumb {
    display: block;
    aspect-ratio: var(--gal-aspect, 231 / 130);
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    cursor: zoom-in;
    position: relative;
}
.block-gallery__thumb picture,
.block-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.block-gallery__thumb img {
    transition: transform var(--duration) var(--ease);
}
.block-gallery__thumb:hover img,
.block-gallery__thumb:focus-visible img {
    transform: scale(1.05);
}
/* Mehr Luft bei Block-Galerie-Serien mit Zwischenüberschrift (z. B. Fazit-Diashow). */
.article__body .article__chapter > .block-gallery:has(+ h2) {
    margin-bottom: var(--space-8);
}
.article__body .article__chapter > h2:has(+ .block-gallery) {
    margin-top: var(--space-8);
    margin-bottom: var(--space-5);
}
.article__body .article__chapter > h2:first-of-type:has(+ .block-gallery) {
    margin-top: var(--space-7);
}

/* ---------- Flickr Gallery (gemischte Aspect-Ratios, „justified" Rows) ----------
   Trick: flex-grow ist proportional zur Aspect-Ratio des Bildes, flex-basis ebenso.
   In jeder Zeile bekommt jedes Item eine Breite ∝ ar; mit aspect-ratio gelockter Höhe
   ergibt das identische Höhen pro Zeile. max-width verhindert einzelne Riesenbilder.
   Unvollständige Zeilen (2+ Bilder, rechts Lücke) füllt main.js per --flickr-row-h. */
.flickr-gallery,
.article__body .article__chapter > .flickr-gallery {
    --flickr-target-h: 180px;
    --flickr-max-h:    240px;
    list-style: none;
    margin: var(--space-5) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
@media (max-width: 600px) {
    .flickr-gallery {
        --flickr-target-h: 130px;
        --flickr-max-h:    180px;
    }
}
.flickr-gallery > li,
.article__body .article__chapter > .flickr-gallery > li {
    flex-grow:   var(--ar);
    flex-shrink: 1;
    flex-basis:  calc(var(--ar) * var(--flickr-target-h));
    aspect-ratio: var(--ar);
    min-width:   0;
    max-width:   calc(var(--ar) * var(--flickr-max-h));
    margin: 0;
    padding: 0;
}
.flickr-gallery__item {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    cursor: zoom-in;
}
.flickr-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration) var(--ease);
}
.flickr-gallery__item:hover img,
.flickr-gallery__item:focus-visible img {
    transform: scale(1.05);
}
/* Unvollständige Zeile: Höhe aus JS (--flickr-row-h), Zeile bis zum Rand füllen */
.flickr-gallery > li.flickr-gallery__item--fill-row {
    flex-basis: calc(var(--ar) * var(--flickr-row-h));
    max-width: calc(var(--ar) * var(--flickr-row-h));
}
/* Einzelbild in letzter Zeile: zentrieren statt über die volle Breite strecken */
.flickr-gallery > li.flickr-gallery__item--solo-row {
    margin-inline: auto;
}

/* ---------- Raw Gallery (Thumbs in natürlicher Pixelgröße, einfaches Flow-Layout) ----
   Bewusst minimal: Thumbnails fließen wie Inline-Elemente, brechen am Rand um.
   Geeignet für sehr kleine Thumbs (z.B. die alten 96×66er Vorschau-GIFs/AVIFs). */
.raw-gallery,
.article__body .article__chapter > .raw-gallery {
    list-style: none;
    margin: var(--space-4) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.raw-gallery > li,
.article__body .article__chapter > .raw-gallery > li { margin: 0; padding: 0; }
.raw-gallery__item {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    cursor: zoom-in;
    line-height: 0;
}
.raw-gallery__item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    transition: transform var(--duration) var(--ease);
}
.raw-gallery__item:hover img,
.raw-gallery__item:focus-visible img {
    transform: scale(1.05);
}

.inline-gallery__thumb {
    --aspect: 1.5; /* fallback, wird pro Bild via inline-style überschrieben */
    aspect-ratio: var(--aspect);
    /* Größere der beiden Formeln gewinnt → Landscape nutzt aspect × sqrt(area),
       Portrait nutzt sqrt(area × aspect). Identisch in stacked und row. */
    width: max(
        calc(sqrt(var(--thumb-area) * var(--aspect)) * 1px),
        calc(var(--aspect) * sqrt(var(--thumb-area)) * 1px)
    );
    flex-shrink: 0;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    position: relative;
    cursor: zoom-in;
}
/* thumbWidth in PHP: lange Seite = --thumb-width (Quer) bzw. --thumb-height (Hoch) */
.inline-gallery__thumb--fixed {
    width: var(--thumb-width);
    max-width: var(--thumb-width);
    min-width: var(--thumb-width);
}
.inline-gallery__thumb--fixed-portrait {
    width: calc(var(--thumb-height) * var(--aspect));
    height: var(--thumb-height);
    max-width: none;
    min-width: unset;
    max-height: var(--thumb-height);
    min-height: var(--thumb-height);
}
.inline-gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration) var(--ease);
}
.inline-gallery__thumb::after {
    content: "";
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='4.5' stroke='white' stroke-width='1.5' fill='none'/><path d='M10.5 10.5L14 14' stroke='white' stroke-width='1.5' stroke-linecap='round'/><path d='M5 7h4M7 5v4' stroke='white' stroke-width='1.3' stroke-linecap='round'/></svg>") center/16px no-repeat;
    border-radius: 999px;
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
    pointer-events: none;
}
.inline-gallery__thumb:hover img,
.inline-gallery__thumb:focus-visible img {
    transform: scale(1.04);
}
.inline-gallery__thumb:hover::after,
.inline-gallery__thumb:focus-visible::after {
    opacity: 1;
}
.lightbox-link {
    cursor: zoom-in;
}
.media-link {
    margin: var(--space-3) 0 var(--space-5);
    overflow-wrap: normal;
    word-break: normal;
}
.media-link__anchor {
    display: inline;
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
    cursor: zoom-in;
}
.media-link--external .media-link__anchor {
    cursor: pointer;
}
.media-link__anchor:hover,
.media-link__anchor:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
}
.media-link__icon,
.media-thumb__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.media-link__icon {
    width: 1.5em;
    height: 1.5em;
    margin-right: var(--space-2);
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
}
.media-link__icon::before,
.media-thumb__play::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 0.36em solid transparent;
    border-bottom: 0.36em solid transparent;
    border-left: 0.56em solid currentColor;
    margin-left: 0.12em;
}
.media-link__duration {
    display: inline;
    color: var(--color-text-muted);
    font-weight: 500;
    white-space: nowrap;
    margin-left: 0.25em;
    text-decoration: none;
}
.media-thumb__play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

@media (max-width: 600px) {
    .inline-gallery--left,
    .inline-gallery--right,
    .leaflet-map-figure--inline {
        float: none;
        margin: var(--space-4) auto;
    }
    /* Auf Mobile: stacked → ebenfalls als row anordnen, damit der Text drüber/drunter nicht zerrissen wird */
    .inline-gallery--stacked { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Lightbox ---------- */
/* Globale img/svg-Regel (max-width:100%) sonst riesige Lightbox-Icons auf Mobilgeräten */
.lightbox svg {
    max-width: none;
    max-height: none;
}
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: rgba(8, 14, 20, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: lightbox-fade 200ms var(--ease);
}
@keyframes lightbox-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.lightbox[hidden] { display: none; }

.lightbox__figure {
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    width: fit-content;
    max-width: 100%;
    max-height: 100%;
}
.lightbox__image,
.lightbox__video {
    display: block;
    align-self: center;
    max-width: min(1920px, calc(100vw - 8rem));
    max-height: calc(100vh - 10rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox__video {
    background: #000;
}
.lightbox__video[hidden] {
    display: none;
}
.lightbox__caption-wrap {
    /* Stretches to figure width by default (align-items: stretch).
       JS additionally clamps max-width to the rendered image width
       (important for portrait images where caption content can exceed image width). */
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    padding-top: var(--space-3);
    color: #f4f8fb;
    font-size: 0.95rem;
    line-height: 1.5;
}
.lightbox__caption-wrap[hidden] { display: none; }
.lightbox__caption {
    flex: 1 1 auto;
    min-width: 60%;
    margin: 0;
    text-align: left;
}
.lightbox__credit {
    flex: 0 0 auto;
    text-align: right;
    color: rgba(244, 248, 251, 0.7);
    white-space: nowrap;
}
.lightbox__caption:empty,
.lightbox__credit:empty { display: none; }
/* Wenn nur das Credit da ist (Caption leer): nach rechts ausrichten */
.lightbox__caption-wrap:has(.lightbox__caption:empty) {
    justify-content: flex-end;
}

.lightbox__nav {
    position: absolute;
    z-index: 5;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 0;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--duration-fast) var(--ease);
}
.lightbox__close,
.lightbox__fullscreen,
.lightbox__caption-toggle {
    position: absolute;
    z-index: 5;
    width: 42px;
    height: 42px;
    background: rgba(8, 14, 20, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
    overflow: hidden;
    box-sizing: border-box;
}
.lightbox__fullscreen {
    border-radius: var(--radius-sm);
    top: var(--space-2);
    left: var(--space-2);
}
.lightbox__close {
    border-radius: 999px;
    top: var(--space-2);
    right: var(--space-2);
}
.lightbox__caption-toggle {
    display: none;
    border-radius: var(--radius-sm);
    bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px));
    right: max(var(--space-3), env(safe-area-inset-right, 0px));
}
.lightbox__caption-toggle[hidden] {
    display: none !important;
}
.lightbox__fullscreen svg,
.lightbox__caption-toggle svg {
    display: block;
    width: 22px;
    height: 22px;
    max-width: none;
    max-height: none;
    flex: 0 0 auto;
}
.lightbox__nav:hover,
.lightbox__nav:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    outline: none;
}
.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__fullscreen:hover,
.lightbox__fullscreen:focus-visible {
    background: rgba(8, 14, 20, 0.44);
    outline: none;
}
.lightbox__close svg,
.lightbox__nav svg {
    display: block;
    width: 22px;
    height: 22px;
}
.lightbox__nav--prev { left: var(--space-5); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--space-5); top: 50%; transform: translateY(-50%); }
.lightbox__nav[hidden] { display: none; }

.lightbox__counter {
    align-self: center;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: rgba(0, 0, 0, 0.4);
    border-radius: 999px;
    color: #f4f8fb;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.lightbox__counter:empty { display: none; }

/* Mobil/Querformat: Vollbild nur per Orientierung, kein Button */
@media (max-width: 767.98px), (max-height: 767.98px) {
    .lightbox__fullscreen,
    .lightbox.is-fullscreen .lightbox__fullscreen,
    .lightbox:fullscreen .lightbox__fullscreen,
    .lightbox:-webkit-full-screen .lightbox__fullscreen {
        display: none !important;
        pointer-events: none !important;
    }
}

@media (max-width: 600px) {
    .lightbox { padding: var(--space-3); }
    .lightbox__close,
    .lightbox__fullscreen,
    .lightbox__caption-toggle { width: 40px; height: 40px; }
    .lightbox__nav { width: 40px; height: 40px; }
    .lightbox__nav--prev { left: var(--space-3); }
    .lightbox__nav--next { right: var(--space-3); }
    .lightbox__image,
    .lightbox__video { max-width: calc(100vw - 2rem); max-height: calc(100vh - 12rem); }
}

/* Vollbild: natives API (:fullscreen) + Fallback-Klasse (z. B. iOS) */
.lightbox.is-fullscreen,
.lightbox:fullscreen,
.lightbox:-webkit-full-screen {
    padding: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: -webkit-fill-available;
    background: #000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.lightbox.is-fullscreen .lightbox__figure,
.lightbox:fullscreen .lightbox__figure,
.lightbox:-webkit-full-screen .lightbox__figure {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    justify-content: center;
    pointer-events: none;
}
.lightbox.is-fullscreen .lightbox__image,
.lightbox.is-fullscreen .lightbox__video,
.lightbox.is-fullscreen .lightbox__counter,
.lightbox.is-fullscreen .lightbox__close,
.lightbox.is-fullscreen .lightbox__fullscreen,
.lightbox.is-fullscreen .lightbox__caption-toggle,
.lightbox:fullscreen .lightbox__image,
.lightbox:fullscreen .lightbox__video,
.lightbox:fullscreen .lightbox__counter,
.lightbox:fullscreen .lightbox__close,
.lightbox:fullscreen .lightbox__fullscreen,
.lightbox:fullscreen .lightbox__caption-toggle {
    pointer-events: auto;
}
.lightbox.is-fullscreen .lightbox__image,
.lightbox.is-fullscreen .lightbox__video,
.lightbox:fullscreen .lightbox__image,
.lightbox:fullscreen .lightbox__video {
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    width: auto;
    height: auto;
    border-radius: 0;
    box-shadow: none;
}
.lightbox.is-fullscreen .lightbox__caption-wrap,
.lightbox:fullscreen .lightbox__caption-wrap {
    display: none !important;
}
.lightbox.is-fullscreen .lightbox__caption-toggle,
.lightbox:fullscreen .lightbox__caption-toggle {
    display: flex;
}
.lightbox.is-fullscreen.is-caption-visible .lightbox__caption-wrap,
.lightbox:fullscreen.is-caption-visible .lightbox__caption-wrap {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    z-index: 4;
    /* left/right: per JS an Bildkante (Letterboxing), Fallback bis Messung */
    left: max(var(--space-4), env(safe-area-inset-left, 0px));
    right: max(3.75rem, calc(var(--space-4) + env(safe-area-inset-right, 0px)));
    bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    box-sizing: border-box;
    max-height: min(38vh, 12rem);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 0 14px rgba(0, 0, 0, 0.85);
}
.lightbox.is-fullscreen.is-caption-visible .lightbox__credit,
.lightbox:fullscreen.is-caption-visible .lightbox__credit {
    color: rgba(255, 255, 255, 0.85);
}
.lightbox.is-fullscreen.is-caption-visible .lightbox__caption-toggle,
.lightbox:fullscreen.is-caption-visible .lightbox__caption-toggle {
    background: rgba(8, 14, 20, 0.44);
}
.lightbox.is-fullscreen .lightbox__counter,
.lightbox:fullscreen .lightbox__counter,
.lightbox:-webkit-full-screen .lightbox__counter {
    position: absolute;
    top: max(var(--space-3), env(safe-area-inset-top, 0px));
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 0 12px rgba(0, 0, 0, 0.75);
}
.lightbox.is-fullscreen .lightbox__nav--prev,
.lightbox:fullscreen .lightbox__nav--prev {
    left: max(var(--space-3), env(safe-area-inset-left, 0px));
}
.lightbox.is-fullscreen .lightbox__nav--next,
.lightbox:fullscreen .lightbox__nav--next {
    right: max(var(--space-3), env(safe-area-inset-right, 0px));
}
.lightbox.is-fullscreen .lightbox__fullscreen,
.lightbox:fullscreen .lightbox__fullscreen {
    top: var(--space-2);
    left: var(--space-2);
}
.lightbox.is-fullscreen .lightbox__close,
.lightbox:fullscreen .lightbox__close {
    top: var(--space-2);
    right: var(--space-2);
}
.lightbox.is-fullscreen .lightbox__nav,
.lightbox:fullscreen .lightbox__nav {
    z-index: 5;
}

body.is-lightbox-open { overflow: hidden; }

/* ---------- Tipp-Icon (inline-Markierung im Text) ----------
   <span class="tip" aria-label="Tipp"></span> — filled Glühbirne (--color-tip-icon Bernstein, nicht Linkrot). */
.tip {
    display: inline-block;
    width: 1.28em;
    height: 1.28em;
    vertical-align: -0.16em;
    margin: 0 0.08em 0 0.12em;
    flex-shrink: 0;
    background-color: var(--color-tip-icon);
    -webkit-mask: var(--tip-icon) no-repeat center / contain;
            mask: var(--tip-icon) no-repeat center / contain;
}

/* ---------- Reiseübersichtskarte & -liste (mehrteilige Berichte) ---------- */
.journey-overview {
    margin: var(--space-5) 0 var(--space-6);
}
.journey-overview__title {
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    font-size: clamp(1.15rem, 0.65vw + 1rem, 1.4rem);
    letter-spacing: -0.005em;
}
.journey-overview--compact {
    margin-top: 0;
    margin-bottom: var(--space-5);
}
.journey-overview--compact .journey-map {
    margin-top: var(--space-3);
}
.journey-overview--compact .journey-map__stage {
    max-width: min(100%, 38rem);
    margin: 0 auto;
}
.journey-overview--compact .journey-map__pin {
    min-width: 1.55rem;
    height: 1.55rem;
    font-size: 0.74rem;
}
.journey-overview + .article__chapter > h2 {
    margin-top: var(--space-5);
}
.journey-map {
    margin: var(--space-5) 0 var(--space-4);
    text-align: center;
}
.journey-map__stage {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}
.journey-map img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
.journey-map__hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.journey-map__hotspot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    color: #fff;
    text-decoration: none;
    pointer-events: auto;
}
.journey-map__pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 var(--space-1);
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    transition: transform var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.journey-map__hotspot.is-current-part .journey-map__pin {
    border-color: #fff7ed;
    background: #f97316;
    box-shadow:
        0 0 0 4px rgba(249, 115, 22, 0.32),
        0 0 0 8px rgba(249, 115, 22, 0.16),
        0 4px 14px rgba(0, 0, 0, 0.3);
}
.journey-map__tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--space-2));
    width: max-content;
    max-width: 15rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: left;
    transform: translate(-50%, 4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.journey-map__tip strong {
    display: block;
    color: var(--color-accent-strong);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.journey-map__hotspot:hover,
.journey-map__hotspot:focus-visible {
    z-index: 3;
    color: #fff;
    text-decoration: none;
    outline: none;
}
.journey-map__hotspot:hover .journey-map__pin,
.journey-map__hotspot:focus-visible .journey-map__pin {
    background: var(--color-accent-strong);
    transform: scale(1.12);
}
.journey-map__hotspot:hover .journey-map__tip,
.journey-map__hotspot:focus-visible .journey-map__tip {
    opacity: 1;
    transform: translate(-50%, 0);
}
.journey-map__caption {
    max-width: 34rem;
    margin: var(--space-3) auto 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}
.journey-list {
    display: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-2);
    list-style: none;
    line-height: 1.45;
}
.journey-list li {
    margin: 0;
    padding: 0;
}
.journey-list a {
    display: block;
    height: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.journey-list a:hover,
.journey-list a:focus-visible {
    border-color: var(--color-accent);
    background: color-mix(in oklab, var(--color-accent-tint) 45%, var(--color-surface));
    text-decoration: none;
    transform: translateY(-1px);
    outline: none;
}
.journey-list span {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.journey-list strong {
    display: block;
    color: var(--color-text);
    font-size: 0.98rem;
    font-weight: 600;
}
.journey-list small {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: 0.84rem;
}
.journey-overview--suedafrika .journey-map__stage {
    max-width: min(100%, 32rem);
    margin: 0 auto;
}
@media (max-width: 700px) {
    .journey-overview--compact {
        display: none;
    }
    .journey-map__hotspots {
        display: none;
    }
    .journey-map__caption {
        text-align: left;
    }
    .journey-map__caption::after {
        content: " Die Wochenübersicht darunter ist auf Mobilgeräten die einfachere Navigation.";
    }
    .journey-list {
        display: grid;
    }
    .journey-overview--compact .journey-map__stage {
        max-width: 100%;
    }
}

/* ---------- Leaflet Maps ---------- */
.leaflet-container {
    overflow: hidden;
    font-family: inherit;
    touch-action: pan-x pan-y;
}
/* Ein Finger = Seite scrollen; zwei Finger = Karte (Leaflet: nur .leaflet-touch-zoom, kein -drag) */
.leaflet-container.leaflet-map--cooperative-touch.leaflet-touch-zoom:not(.leaflet-touch-drag) {
    touch-action: pan-y pinch-zoom !important;
}
.leaflet-map.is-fullscreen .leaflet-container,
.leaflet-map:fullscreen .leaflet-container {
    touch-action: pan-x pan-y !important;
}
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
    user-select: none;
    -webkit-user-drag: none;
}
.leaflet-tile-pane { z-index: 200; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-overlay-pane svg,
.leaflet-marker-pane svg,
.leaflet-shadow-pane svg,
.leaflet-tooltip-pane svg,
.leaflet-popup-pane svg {
    overflow: visible;
}
.leaflet-container svg {
    max-width: none !important;
    max-height: none !important;
}
.leaflet-container svg.leaflet-zoom-animated {
    width: auto !important;
    height: auto !important;
}
.leaflet-container path {
    max-width: none;
}
.leaflet-interactive {
    cursor: pointer;
}
.leaflet-tile {
    max-width: none !important;
    max-height: none !important;
    filter: inherit;
    visibility: visible;
}
.leaflet-zoom-animated {
    transform-origin: 0 0;
}
.leaflet-control {
    position: relative;
    z-index: 800;
    pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
}
.leaflet-top { top: 10px; }
.leaflet-right { right: 10px; }
.leaflet-bottom { bottom: 10px; }
.leaflet-left { left: 10px; }
.leaflet-top .leaflet-control { margin-top: 0; }
.leaflet-bottom .leaflet-control { margin-bottom: 0; }
.leaflet-left .leaflet-control { margin-left: 0; }
.leaflet-right .leaflet-control { margin-right: 0; }
.leaflet-control-zoom,
.leaflet-control-layers,
.leaflet-control-fullscreen,
.trail-map-profile-control {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}
.leaflet-control-fullscreen {
    width: 34px;
    box-sizing: border-box;
}
.leaflet-control-zoom a {
    display: block;
    width: 30px;
    height: 30px;
    color: var(--color-text);
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
    font-size: 1.2rem;
    font-weight: 600;
}
.leaflet-control-zoom a:last-child {
    border-bottom: 0;
}
.leaflet-map--no-zoom .leaflet-control-zoom {
    display: none;
}
.leaflet-control-zoom a:hover,
.leaflet-control-zoom a:focus-visible {
    background: var(--color-surface-alt);
    text-decoration: none;
}
.leaflet-control-fullscreen button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    border: 0;
    color: var(--color-text);
    background: transparent;
    cursor: pointer;
}
.leaflet-control-fullscreen button:hover,
.leaflet-control-fullscreen button:focus-visible {
    background: var(--color-surface-alt);
}
.leaflet-control-fullscreen svg {
    width: 20px;
    height: 20px;
}
.leaflet-control-layers {
    padding: 0;
    color: var(--color-text);
    font-size: 0.88rem;
}
.leaflet-control-layers .leaflet-control-layers-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    color: var(--color-text);
    background: transparent !important;
    background-image: none !important;
    opacity: 0.86;
}
.leaflet-control-layers .leaflet-control-layers-toggle svg {
    width: 24px;
    height: 24px;
}
.leaflet-control-layers .leaflet-control-layers-toggle:hover,
.leaflet-control-layers .leaflet-control-layers-toggle:focus-visible {
    color: var(--color-text);
    opacity: 1;
}
.leaflet-control-layers-list {
    display: none;
    margin: 0;
}
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
    display: block;
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
}
.leaflet-control-layers label {
    display: flex;
    gap: 0.45em;
    align-items: center;
    margin: var(--space-1) 0;
    text-align: left;
}
.leaflet-control-layers label span {
    flex: 1;
    text-align: left;
}
.leaflet-control-attribution {
    max-width: calc(100% - 2 * var(--space-2));
    padding: 2px 5px;
    background: color-mix(in oklab, var(--color-surface) 86%, transparent);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    line-height: 1.25;
}
.leaflet-control-attribution a {
    color: inherit;
}
.leaflet-tooltip {
    position: absolute;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
    white-space: nowrap;
    pointer-events: none;
}
.leaflet-tooltip-top::before,
.leaflet-tooltip-bottom::before,
.leaflet-tooltip-left::before,
.leaflet-tooltip-right::before {
    content: "";
    position: absolute;
    border: 6px solid transparent;
}
.leaflet-tooltip-top::before {
    left: 50%;
    bottom: -12px;
    margin-left: -6px;
    border-top-color: var(--color-border);
}
.leaflet-map-tooltip::before {
    display: none;
}
.leaflet-map-figure {
    position: relative;
    z-index: 0;
    margin: var(--space-5) 0;
    isolation: isolate;
}
.leaflet-map-figure--inline {
    width: min(100%, var(--map-width, 320px));
    margin-top: var(--space-1);
    margin-bottom: var(--space-3);
}
.leaflet-map-figure--right {
    float: right;
    margin-left: var(--space-5);
}
.leaflet-map-figure--left {
    float: left;
    margin-right: var(--space-5);
}
.leaflet-map {
    position: relative;
    z-index: 0;
    width: 100%;
    height: var(--map-height, 320px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface-alt);
    box-shadow: var(--shadow-sm);
    isolation: isolate;
}
.leaflet-map:fullscreen,
.leaflet-map.is-fullscreen {
    width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
}
.route-embed {
    display: block;
    margin: var(--space-5) 0 var(--space-1);
    border-radius: var(--radius-md);
}
.route-embed__credit {
    margin-top: 0;
    color: var(--color-muted);
}
.trail-map {
    position: relative;
    z-index: 0;
    margin: var(--space-5) 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.trail-map__canvas {
    position: relative;
    z-index: 0;
    width: 100%;
    height: var(--trail-map-height, 350px);
    background: var(--color-surface-alt);
}
.trail-map__canvas:fullscreen,
.trail-map__canvas.is-fullscreen {
    width: 100vw;
    height: 100vh;
}
.trail-map__summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
    background: color-mix(in oklab, var(--color-surface) 90%, var(--color-surface-alt));
    color: var(--color-muted);
    font-size: 0.92rem;
}
.trail-map__summary-main {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    min-width: 0;
}
.trail-map__summary strong {
    color: var(--color-text);
}
.trail-map__summary-credit {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--color-muted);
    font-size: 0.72rem;
    line-height: 1.2;
}
.trail-map__summary-credit a {
    color: inherit;
}
@media (max-width: 760px) {
    .trail-map__summary-credit {
        flex-basis: 100%;
        margin-left: 0;
    }
}
.trail-map__profile {
    position: relative;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: 1px solid var(--color-border);
    background: color-mix(in oklab, var(--color-surface) 94%, var(--color-surface-alt));
}
.trail-map__profile[hidden],
.trail-map__profile:empty {
    display: none;
}
.trail-map__profile-svg {
    display: block;
    width: 100%;
    height: 118px;
}
.trail-map__profile-grid line {
    stroke: color-mix(in oklab, var(--color-border) 82%, transparent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}
.trail-map__profile-svg polygon {
    fill: color-mix(in oklab, #3f51b5 18%, transparent);
}
.trail-map__profile-svg polyline {
    fill: none;
    stroke: #3f51b5;
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
}
.trail-map__profile-axis {
    stroke: color-mix(in oklab, var(--color-text-muted) 70%, transparent);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}
.trail-map__profile-labels {
    fill: var(--color-muted);
    font: 600 0.72rem/1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.trail-map__profile-cursor line {
    stroke: var(--color-text);
    stroke-width: 1.3;
    vector-effect: non-scaling-stroke;
}
.trail-map__profile-cursor circle {
    fill: #c0362c;
    stroke: #fff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}
.trail-map__hover-tooltip,
.trail-map__leaflet-tooltip {
    display: grid;
    gap: 0.1rem;
    padding: 0.32rem 0.5rem;
    border: 1px solid color-mix(in oklab, var(--color-text) 14%, var(--color-border));
    border-radius: var(--radius-sm);
    background: color-mix(in oklab, var(--color-surface) 94%, transparent);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
    font-size: 0.78rem;
    line-height: 1.15;
    white-space: nowrap;
    pointer-events: none;
}
.trail-map__hover-tooltip {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -110%);
}
.trail-map__hover-tooltip[hidden] {
    display: none;
}
.trail-map__leaflet-tooltip {
    text-align: left;
}
.trail-map__leaflet-tooltip::before {
    display: none;
}
.trail-map__hover-tooltip strong,
.trail-map__leaflet-tooltip strong {
    font-size: 0.82rem;
}
.trail-map-profile-control {
    width: 38px;
    height: 38px;
    box-sizing: border-box;
}
.trail-map-profile-control button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 0;
    color: var(--color-text);
    background: transparent;
    cursor: pointer;
}
.trail-map-profile-control button:hover,
.trail-map-profile-control button:focus-visible,
.trail-map-profile-control button[aria-expanded="true"] {
    background: var(--color-surface-alt);
}
.trail-map-profile-control svg {
    width: 22px;
    height: 22px;
}
.trail-map-marker {
    background: transparent;
    border: 0;
}
.trail-map-marker span {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #3f51b5;
    color: #fff;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.38);
    font: 700 0.72rem/1 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.trail-map-marker--start span {
    background: #2e7d32;
}
.trail-map-marker--finish span {
    background: #c0362c;
}
.trail-map-marker--km span {
    width: 22px;
    height: 22px;
    background: #f7f5ef;
    color: #3f51b5;
    border-color: #3f51b5;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
}
.trail-map .elevation-control {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}
.trail-map .elevation-control .background {
    background: transparent;
}
.trail-map .elevation-control .area {
    fill: color-mix(in oklab, #3f51b5 32%, transparent);
}
.trail-map .elevation-control .altitude,
.trail-map .elevation-control .distance {
    stroke: #3f51b5;
}
@media (max-width: 600px) {
    .leaflet-map-figure--inline {
        float: none;
        margin: var(--space-4) auto;
    }
    .trail-map__canvas {
        height: 300px;
    }
}
.leaflet-custom-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: transparent;
    border: 0;
}
.leaflet-custom-marker span {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    min-width: 20px;
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: #c0362c;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38), 0 0 0 2px rgba(192, 54, 44, 0.28);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    transition:
        transform var(--duration) var(--ease),
        box-shadow var(--duration) var(--ease);
}
.leaflet-custom-marker--icon-wide span {
    width: auto;
    min-width: 24px;
    padding: 0 4px;
    font-size: 0.68rem;
}
.leaflet-custom-marker--highlight span {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.36), 0 2px 10px rgba(0, 0, 0, 0.38);
}
.leaflet-custom-marker--dive span {
    width: 22px;
    min-width: 22px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 2px;
    overflow: hidden;
    background: #c0362c;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.42), 0 0 0 2px rgba(192, 54, 44, 0.28);
}
.leaflet-custom-marker--dive.leaflet-custom-marker--icon-wide span {
    min-width: 26px;
    width: auto;
    padding: 0 3px;
}
.leaflet-custom-marker--dive span::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 38%, #fff 39%, #fff 61%, transparent 62%);
}
.leaflet-custom-marker--food span {
    background: #c2410c;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38), 0 0 0 2px rgba(194, 65, 12, 0.28);
}
/* Restaurant: Teller (Ring + Punkt) — auf kleinen Pins besser lesbar als Messer/Gabel */
.leaflet-custom-marker--food.leaflet-custom-marker--food-icon-only span {
    width: 24px;
    min-width: 24px;
    height: 24px;
    font-size: 0;
}
.leaflet-custom-marker--food.leaflet-custom-marker--food-icon-only span::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 2.5px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
}
.leaflet-custom-marker--food.leaflet-custom-marker--food-icon-only span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%;
}
@media (hover: hover) {
    .leaflet-custom-marker--food .leaflet-custom-marker__link:hover span {
        box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.36), 0 3px 12px rgba(0, 0, 0, 0.4);
    }
}
.leaflet-custom-marker__link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.leaflet-custom-marker--interactive .leaflet-custom-marker__label {
    pointer-events: auto;
}
.leaflet-custom-marker__label {
    position: absolute;
    left: calc(50% + var(--marker-label-x, 0px));
    top: calc(50% + var(--marker-label-y, -8px));
    z-index: 1;
    display: block;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
    font: 600 0.82rem/1.25 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-style: normal;
    white-space: nowrap;
    pointer-events: none;
    transition:
        border-color var(--duration) var(--ease),
        box-shadow var(--duration) var(--ease),
        color var(--duration) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .leaflet-custom-marker__link:hover span {
        transform: scale(1.1);
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.42), 0 0 0 3px rgba(192, 54, 44, 0.38);
    }
    .leaflet-custom-marker__link:hover .leaflet-custom-marker__label {
        border-color: var(--color-accent);
        box-shadow: var(--shadow-lg);
        color: var(--color-accent-strong);
    }
    .leaflet-custom-marker--highlight .leaflet-custom-marker__link:hover span {
        box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.42), 0 3px 14px rgba(0, 0, 0, 0.42);
    }
}
.leaflet-custom-marker__label--top {
    transform: translate(-50%, -100%);
}
.leaflet-custom-marker__label--right {
    transform: translate(0, -50%);
}
.leaflet-custom-marker__label--bottom {
    transform: translate(-50%, 0);
}
.leaflet-custom-marker__label--left {
    transform: translate(-100%, -50%);
}
.leaflet-custom-marker--label {
    width: 0;
    height: 0;
}
.leaflet-custom-marker__label--only {
    left: var(--marker-label-x, 0);
    top: var(--marker-label-y, 0);
}
/* regionPalette auf .leaflet-map: coral (Default), amber, sand, wine */
.leaflet-map[data-region-palette="amber"] {
    --map-region-fill: #e6a23c;
    --map-region-stroke: #b45309;
    --map-region-fill-opacity: 0.4;
    --map-region-hover-fill-opacity: 0.58;
}
.leaflet-map[data-region-palette="sand"] {
    --map-region-fill: #d4c4a0;
    --map-region-stroke: #7a6348;
    --map-region-fill-opacity: 0.45;
    --map-region-hover-fill-opacity: 0.62;
}
.leaflet-map[data-region-palette="wine"] {
    --map-region-fill: #c24a5a;
    --map-region-stroke: #7a2038;
    --map-region-fill-opacity: 0.36;
    --map-region-hover-fill-opacity: 0.52;
}
.leaflet-map[data-region-palette="accent"] {
    --map-region-fill: #0b6e93;
    --map-region-stroke: #084d68;
    --map-region-fill-opacity: 0.28;
    --map-region-hover-fill-opacity: 0.42;
}
.leaflet-map-region--link {
    cursor: pointer;
}
.leaflet-map-region--link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.leaflet-map-tooltip {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-md);
    font: 600 0.82rem/1.25 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.leaflet-map-tooltip--highlight {
    color: var(--color-text);
}

/* ---------- Article Pagination (mehrteilige Berichte) ----------
   Kompakt, wenig Fläche — kein sandfarbener Kasten. Abweichung zu .chapter-nav__link:
   eckig (6px statt Pillen), meist nur Rand + transparenter Hintergrund; aktuell per
   fetter Kontur + Typo, nicht wie Kapitel-„is-active“ mit voller Accent-Füllung. */
.article-pagination {
    --article-pagination-border: color-mix(in oklab, var(--color-border) 72%, var(--color-text-muted));
    margin: var(--space-6) 0 var(--space-3);
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--article-pagination-border);
}
.article-pagination__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.article-pagination__item { margin: 0; }
.article-pagination__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--article-pagination-border);
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.3;
    transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
a.article-pagination__link:hover,
a.article-pagination__link:focus-visible {
    background: var(--color-accent-tint);
    border-color: color-mix(in oklab, var(--color-accent) 40%, var(--color-border));
    color: var(--color-accent-strong);
}
.article-pagination__item.is-current .article-pagination__link {
    background: transparent;
    border-color: var(--color-accent);
    border-width: 2px;
    padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
    color: var(--color-accent-strong);
    font-weight: 600;
    cursor: default;
}
.article-pagination__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    height: 1.35em;
    padding: 0 0.2em;
    border-radius: 4px;
    background: color-mix(in oklab, var(--color-text) 8%, transparent);
    color: var(--color-text-muted);
    font-size: 0.75em;
    font-weight: 700;
    flex-shrink: 0;
}
.article-pagination__item.is-current .article-pagination__num {
    background: var(--color-accent);
    color: #fff;
}
.article-pagination__item--badge .article-pagination__link {
    gap: 0;
    padding: var(--space-2);
}
.article-pagination__item--badge.is-current .article-pagination__link {
    padding: calc(var(--space-2) - 1px);
}
.article-pagination__item--badge .article-pagination__num {
    min-width: 1.8em;
    height: 1.8em;
    padding: 0 0.35em;
    font-size: 0.8rem;
}

/* ---------- Article Share ---------- */
.article-share {
    margin: var(--space-8) 0 var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-accent-tint);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in oklab, var(--color-accent) 20%, transparent);
}
.article-share__title {
    margin: 0 0 var(--space-4);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-accent-strong);
}
.article-share__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.article-share__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.article-share__btn:hover,
.article-share__btn:focus-visible {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    text-decoration: none;
    outline: none;
    transform: translateY(-1px);
}
.article-share__btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.article-share__btn.is-copied {
    background: var(--color-accent-strong);
    color: #fff;
    border-color: var(--color-accent-strong);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) var(--container-pad);
}
.breadcrumb__list {
    max-width: var(--article-width);
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    font-size: 0.92rem;
}
.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
}
.breadcrumb__item + .breadcrumb__item::before {
    content: "\203A";
    color: var(--color-text-muted);
    font-size: 1.4em;
    line-height: 1;
}
.breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease);
}
.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.breadcrumb__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.breadcrumb__current {
    color: var(--color-text);
    font-weight: 500;
}

/* Breadcrumb-Dropdown (für mehrteilige Reports — klickbar auf Desktop UND Mobile) */
.breadcrumb__item--dropdown { position: relative; }
.breadcrumb__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--color-link);
    font-weight: 500;
    cursor: pointer;
}
.breadcrumb__toggle:hover,
.breadcrumb__toggle:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.breadcrumb__chevron {
    width: 12px;
    height: 12px;
    transition: transform var(--duration-fast) var(--ease);
}
.breadcrumb__toggle[aria-expanded="true"] .breadcrumb__chevron {
    transform: rotate(180deg);
}
.breadcrumb__menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: max(220px, 100%);
    max-width: calc(100vw - 2 * var(--container-pad));
}
.breadcrumb__menu[hidden] { display: none; }
.breadcrumb__menu-item { margin: 0; }
.breadcrumb__menu-item a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    line-height: 1.3;
    white-space: nowrap;
}
.breadcrumb__menu-item a:hover,
.breadcrumb__menu-item a:focus-visible {
    background: var(--color-surface-alt);
    color: var(--color-link);
    text-decoration: none;
}
.breadcrumb__menu-item.is-current > a {
    color: var(--color-link);
    font-weight: 500;
}

/* ---------- Chapter Nav (sticky, Pills + Scrollspy) ---------- */
.chapter-nav {
    position: sticky;
    top: var(--header-height);
    z-index: 10;
    margin: var(--space-5) 0 var(--space-6);
    padding: var(--space-3) 0;
    background: color-mix(in oklab, var(--color-bg) 92%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.chapter-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.chapter-nav__link {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.chapter-nav__link:hover,
.chapter-nav__link:focus-visible {
    background: var(--color-accent-tint);
    color: var(--color-accent-strong);
    border-color: var(--color-accent-tint);
    text-decoration: none;
    outline: none;
}
.chapter-nav__link.is-active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* Mobile: Klapper (Button) — Desktop unverändert (Toggle + hidden-Panel ausgeblendet) */
.chapter-nav__toggle {
    display: none;
}
.chapter-nav__panel[hidden] {
    display: none;
}

@media (max-width: 767.98px) {
    .chapter-nav {
        margin: var(--space-3) 0 var(--space-4);
        padding: var(--space-2) 0;
    }
    .chapter-nav__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        width: 100%;
        margin: 0;
        padding: var(--space-3) var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md, 0.5rem);
        background: var(--color-surface);
        box-shadow: 0 1px 2px color-mix(in oklab, var(--color-text) 8%, transparent);
        color: var(--color-text);
        font: inherit;
        font-size: 0.92rem;
        line-height: 1.35;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
    }
    .chapter-nav__toggle:hover {
        background: var(--color-accent-tint);
        border-color: var(--color-accent-tint);
    }
    .chapter-nav__toggle:active {
        box-shadow: none;
    }
    .chapter-nav.is-open .chapter-nav__toggle {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-color: transparent;
        background: var(--color-accent-tint);
    }
    .chapter-nav__toggle-text {
        display: flex;
        align-items: baseline;
        gap: 0.35em;
        min-width: 0;
        flex: 1;
    }
    .chapter-nav__toggle-prefix {
        flex-shrink: 0;
        font-weight: 500;
        color: var(--color-text-muted);
    }
    .chapter-nav__toggle-current {
        font-weight: 600;
        color: var(--color-accent-strong);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .chapter-nav__toggle-icon {
        flex-shrink: 0;
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border-radius: 999px;
        border: 1px solid var(--color-border);
        background: var(--color-bg);
        color: var(--color-accent-strong);
        transition: transform var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
    }
    .chapter-nav__toggle-icon::before {
        content: '';
        width: 0.5rem;
        height: 0.5rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-15%) rotate(45deg);
    }
    .chapter-nav.is-open .chapter-nav__toggle-icon {
        transform: rotate(180deg);
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: #fff;
    }
    .chapter-nav__panel {
        border: 1px solid var(--color-border);
        border-top: 0;
        border-radius: 0 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem);
        background: var(--color-surface);
        padding: var(--space-2) var(--space-2) var(--space-3);
    }
    .chapter-nav__panel:not([hidden]) .chapter-nav__list {
        max-height: min(45vh, 16rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: var(--space-1);
    }
}

@media (min-width: 768px) {
    .chapter-nav__toggle {
        display: none !important;
    }
    .chapter-nav__panel,
    .chapter-nav__panel[hidden] {
        display: block !important;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}

/* ---------- Mehrteiliger Bericht: Hauptspalte + Desktop-Sidebar (Kapitel gesamt) ---------- */
.article__layout {
    display: block;
}
.article__primary {
    min-width: 0;
    /* Lesespalte bleibt --article-width; Doorpages/Home nutzen --container-max (breiter). */
    max-width: var(--article-width);
}
.article--with-report-nav .article__toc-sidebar,
.article--with-report-nav .article__report-nav {
    display: none;
}
@media (min-width: 1100px) {
    /* Pillen-Ankernavi: Klasse chapter-nav--no-desktop (render_chapter_nav …, false); Breakpoint = Sidebar */
    .chapter-nav--no-desktop {
        display: none;
    }
    .article__body:has(.chapter-nav--no-desktop) .article__chapter {
        scroll-margin-top: calc(var(--header-height) + var(--space-3));
    }
    .article--with-report-nav .article__inner {
        max-width: min(100%, var(--article-report-layout-max));
    }
    /* Breadcrumb sitzt im gleichen „Rahmen“ wie article__inner (sonst zu schmal zentriert) */
    main:has(> .article.article--with-report-nav) > .breadcrumb .breadcrumb__list {
        max-width: min(100%, var(--article-report-layout-max));
    }
    .article--with-report-nav .article__layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 15.5rem);
        gap: var(--space-6);
        align-items: stretch;
    }
    /* Primärspalte „auflösen“: Header über volle Breite, Body + Sidebar teilen eine Zeile
       (wie früher per Layout) — Sidebar beginnt auf Höhe des Fließtextes, nicht unter der H1-Zelle. */
    .article--with-report-nav .article__primary {
        display: contents;
    }
    .article--with-report-nav .article__header {
        grid-column: 1 / -1;
        max-width: var(--article-width);
        justify-self: start;
        /* Enger als <1100px: Sidebar + volle Breite wirken sonst zu luftig */
        margin-bottom: var(--space-3);
    }
    .article--with-report-nav.article--with-mood .article__header {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
    .article--with-report-nav .article__body {
        min-width: 0;
        max-width: var(--article-width);
    }
    .article--with-report-nav .article__body > .article__chapter:first-child > h2 {
        margin-top: var(--space-5);
    }
    .article--with-report-nav .article__toc-sidebar,
    .article--with-report-nav .article__report-nav {
        display: flex;
        flex-direction: column;
        min-width: 0;
        /* Bündig mit erstem Kapitel-h2 (Desktop) */
        padding-top: var(--space-5);
        box-sizing: border-box;
    }
    .article--with-report-nav .article__toc-sidebar .chapter-sidebar-nav,
    .article--with-report-nav .article__report-nav .chapter-sidebar-nav {
        padding-top: 0;
        padding-bottom: var(--space-2);
    }
}

/* Sidebar-TOC: Klappen pro Berichtsteil (nur aktiver Teil geöffnet) */
.chapter-sidebar-nav {
    position: sticky;
    top: calc(var(--header-height) + var(--chapter-sidebar-sticky-gap));
    z-index: 10;
    max-height: calc(100dvh - var(--header-height) - var(--chapter-sidebar-sticky-gap) - var(--space-3));
    overflow-y: auto;
    padding: var(--space-2) 0;
    background: transparent;
    border: none;
    font-size: 0.88rem;
    line-height: 1.45;
}
.chapter-sidebar-nav__panel {
    margin: var(--space-2) 0 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    overflow: hidden;
}
.chapter-sidebar-nav__panel:first-of-type {
    margin-top: 0;
}
.chapter-sidebar-nav__panel--current {
    border-color: var(--color-accent);
    background: color-mix(in oklab, var(--color-accent) 10%, var(--color-surface));
}
.chapter-sidebar-nav__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    user-select: none;
    background: color-mix(in oklab, var(--color-accent-tint) 82%, var(--color-surface));
    transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.chapter-sidebar-nav__summary::-webkit-details-marker {
    display: none;
}
.chapter-sidebar-nav__summary::marker {
    content: '';
}
.chapter-sidebar-nav__summary:hover {
    background: color-mix(in oklab, var(--color-accent-tint) 58%, var(--color-accent) 14%);
}
.chapter-sidebar-nav__summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}
.chapter-sidebar-nav__panel--current .chapter-sidebar-nav__summary {
    color: var(--color-accent-strong);
    background: color-mix(in oklab, var(--color-accent-tint) 45%, var(--color-accent) 22%);
}
.chapter-sidebar-nav__panel--current .chapter-sidebar-nav__summary:hover {
    background: color-mix(in oklab, var(--color-accent-tint) 32%, var(--color-accent) 34%);
}
.chapter-sidebar-nav__summary-title {
    flex: 1 1 auto;
    min-width: 0;
}
/* Klapp-Hinweis rechts (geschlossen +, geöffnet −) */
.chapter-sidebar-nav__summary::after {
    content: "+";
    flex: 0 0 1.15rem;
    width: 1.15rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15rem;
    color: inherit;
    opacity: 0.55;
    transition: opacity var(--duration-fast) var(--ease);
}
.chapter-sidebar-nav__panel[open] > .chapter-sidebar-nav__summary::after {
    content: "\2212";
    font-size: 1.05rem;
    line-height: 1.05rem;
}
.chapter-sidebar-nav__summary:hover::after {
    opacity: 0.9;
}
.chapter-sidebar-nav__panel .chapter-sidebar-nav__list {
    list-style: none;
    margin: 0;
    padding: var(--space-2) 0 var(--space-2);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}
.chapter-sidebar-nav__panel--current .chapter-sidebar-nav__list {
    background: color-mix(in oklab, var(--color-accent) 5%, var(--color-surface));
}
.chapter-sidebar-nav__item {
    margin: 0;
    padding: 0;
}
.chapter-sidebar-nav__item + .chapter-sidebar-nav__item {
    margin-top: 0;
}
.chapter-sidebar-nav__link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-3);
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition:
        background var(--duration-fast) var(--ease),
        color var(--duration-fast) var(--ease);
}
.chapter-sidebar-nav__link:hover,
.chapter-sidebar-nav__link:focus-visible {
    color: var(--color-accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: none;
}
.chapter-sidebar-nav__link.is-active {
    background: var(--color-accent);
    color: #fff;
}
.chapter-sidebar-nav__link.is-active:hover,
.chapter-sidebar-nav__link.is-active:focus-visible {
    color: #fff;
    text-decoration: none;
}

/* ---------- Destinations Accordion (Tauchen-Doorpage) ---------- */
.destinations {
    padding: var(--space-5) var(--container-pad) 0;
}
.destinations__inner {
    max-width: var(--container-max);
    margin: 0 auto;
}
.destinations__details {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.destinations__details[open] {
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.destinations__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    list-style: none;
    user-select: none;
    transition: background var(--duration-fast) var(--ease);
}
.destinations__summary::-webkit-details-marker { display: none; }
.destinations__summary:hover { background: var(--color-surface-alt); }
.destinations__summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}
.destinations__chevron {
    width: 14px; height: 14px;
    color: var(--color-text-muted);
    transition: transform var(--duration) var(--ease);
    flex-shrink: 0;
}
.destinations__details[open] .destinations__chevron { transform: rotate(180deg); }
.destinations__count {
    margin-left: auto;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
}
.destinations__list {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-4);
    display: grid;
    gap: var(--space-1) var(--space-4);
    grid-template-columns: 1fr;
    border-top: 1px solid var(--color-border);
}
@media (min-width: 560px) {
    .destinations__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .destinations__list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .destinations__list { grid-template-columns: repeat(4, 1fr); }
}
.destinations__list a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 0.98rem;
    transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.destinations__list a:hover,
.destinations__list a:focus-visible {
    background: var(--color-accent-tint);
    color: var(--color-accent-strong);
    text-decoration: none;
    outline: none;
}

/* ---------- Footer ---------- */
.site-footer {
    margin-top: var(--space-8);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.site-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-5) var(--container-pad);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
}
.site-footer__copy { margin: 0; font-size: 0.9rem; }
.site-footer__nav {
    display: flex; flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}
.site-footer__nav a {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.site-footer__nav a:hover { color: var(--color-link-hover); }

@media (min-width: 720px) {
    .site-footer__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* ---------- Scroll to top ---------- */
.scroll-top {
    position: fixed;
    right: var(--container-pad);
    bottom: var(--space-4);
    width: 44px; height: 44px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    border: 0;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), background var(--duration-fast) var(--ease);
    pointer-events: none;
    z-index: 90;
}
.scroll-top svg { width: 28px; height: 28px; }
.scroll-top:hover { background: var(--color-accent-strong); }
.scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top[hidden] { display: inline-flex; }

/* ---------- Tauchen: Chronik (responsive Tabelle) ---------- */
.article--chronik .article__inner {
    max-width: var(--container-max);
}
main:has(> .article.article--chronik) > .breadcrumb .breadcrumb__list {
    max-width: var(--container-max);
}
.article--chronik .article__lead {
    max-width: var(--article-width);
}
.chronicle-table-wrap {
    margin-top: var(--space-5);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.chronicle-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.98rem;
    line-height: 1.45;
}
.chronicle-table tbody tr {
    border-bottom: 1px solid var(--color-border);
}
.chronicle-table tbody tr:nth-child(odd) {
    background: var(--color-surface-alt);
}
.chronicle-table td {
    padding: var(--space-4);
    vertical-align: top;
}
.chronicle-table__col-flags {
    width: auto;
    min-width: 6.75rem;
    white-space: nowrap;
    vertical-align: top;
    padding-right: var(--space-4);
}
/* Global img { max-width:100% } würde Flaggen in schmaler Zelle auf ~0px schrumpfen */
.chronicle-table__col-flags img {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    height: auto;
    max-width: none;
    float: none !important;
    margin: 0 !important;
}
.chronicle-table__col-flags img + img {
    margin-left: var(--space-2);
}
.chronicle-table__col-when {
    width: 11.5rem;
    font-weight: 600;
}
.chronicle-table__col-when strong {
    font-weight: 700;
    color: var(--color-text);
}
.chronicle-table__col-desc a {
    font-weight: 600;
}
@media (max-width: 720px) {
    .chronicle-table-wrap {
        overflow-x: visible;
    }
    .chronicle-table tbody tr {
        display: block;
        padding: var(--space-4);
        margin-bottom: var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
    }
    .chronicle-table tbody tr:nth-child(odd) {
        background: var(--color-surface-alt);
    }
    .chronicle-table td {
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
    }
    .chronicle-table td + td {
        margin-top: var(--space-3);
    }
    .chronicle-table__col-flags {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: var(--space-2);
        width: auto;
        min-width: 0;
        white-space: normal;
        margin-bottom: var(--space-2);
    }
    .chronicle-table__col-flags img {
        max-width: none;
    }
}

/* ---------- Tauchen: Weltkarte ---------- */
.article--weltkarte .article__inner {
    max-width: var(--container-max);
}
main:has(> .article.article--weltkarte) > .breadcrumb .breadcrumb__list {
    max-width: var(--container-max);
}
.article--weltkarte .article__header,
.article--weltkarte .article__lead,
.article--weltkarte .article-share {
    max-width: var(--article-width);
}
.article--weltkarte .weltkarte-section {
    margin-top: var(--space-5);
    padding-top: 0;
    border-top: 0;
}
.article--weltkarte .weltkarte-section .door-section__grid {
    grid-template-columns: minmax(0, 1fr);
}
.article--weltkarte .weltkarte-section .leaflet-map-figure {
    margin: 0;
}

/* ---------- Sitemap ---------- */
.article--sitemap .article__inner {
    max-width: var(--container-max);
}
main:has(> .article.article--sitemap) > .breadcrumb .breadcrumb__list {
    max-width: var(--container-max);
}
.article--sitemap .article__title--with-icon {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.article--sitemap .article__title--with-icon .sitemap-icon {
    flex: 0 0 auto;
    width: 1.35em;
    height: 1.35em;
    color: var(--color-accent-strong);
}
.article--sitemap .article__body {
    font-size: 1rem;
}
.sitemap-icon {
    display: block;
    width: 1.15em;
    height: 1.15em;
}
.sitemap-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
@media (min-width: 768px) {
    .sitemap-layout {
        flex-direction: row;
        align-items: stretch;
        min-height: 28rem;
    }
}
.sitemap-layout__tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
    .sitemap-layout__tabs {
        flex: 0 0 11.5rem;
        flex-direction: column;
        border-bottom: 0;
        border-right: 1px solid var(--color-border);
    }
}
.sitemap-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: 1 1 0;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition:
        background var(--duration-fast) var(--ease),
        color var(--duration-fast) var(--ease),
        border-color var(--duration-fast) var(--ease);
}
@media (min-width: 768px) {
    .sitemap-tab {
        flex: 0 0 auto;
        justify-content: flex-start;
        text-align: left;
        border-bottom: 0;
        border-left: 3px solid transparent;
    }
}
.sitemap-tab .sitemap-icon {
    flex-shrink: 0;
    opacity: 0.85;
}
.sitemap-tab.is-active .sitemap-icon {
    opacity: 1;
    color: var(--color-accent-strong);
}
.sitemap-tab:hover {
    color: var(--color-accent-strong);
    background: color-mix(in oklab, var(--color-accent-tint) 40%, var(--color-surface-alt));
}
.sitemap-tab.is-active {
    color: var(--color-accent-strong);
    background: var(--color-surface);
    border-color: var(--color-accent);
}
.sitemap-layout__panels {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-5) var(--space-4);
}
@media (min-width: 768px) {
    .sitemap-layout__panels {
        padding: var(--space-5) var(--space-6);
    }
}
.sitemap-panel[hidden] {
    display: none !important;
}

/* Migrierte Einträge aus der alten sitemap.php (kurze Linktexte, 3 Spalten Tauchen) */
.sitemap-legacy h2.title {
    margin: 0 0 var(--space-5);
    font-size: clamp(1.35rem, 1vw + 1rem, 1.65rem);
    text-align: center;
    line-height: 1.2;
}
.sitemap-legacy h2.title a {
    color: var(--color-accent-strong);
    text-decoration: none;
}
.sitemap-legacy h2.title a:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sitemap-legacy .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 768px) {
    .sitemap-legacy .row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.sitemap-legacy .col-md-4 {
    min-width: 0;
}
.sitemap-legacy ul.list,
.sitemap-legacy ul.list-icons {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sitemap-legacy ul.list > li,
.sitemap-legacy ul.list-icons > li {
    margin: 0 0 var(--space-2);
}
.sitemap-legacy h3 {
    margin: var(--space-4) 0 var(--space-2);
    font-size: 1.05rem;
    line-height: 1.3;
}
.sitemap-legacy ul.list > li:first-child > h3 {
    margin-top: 0;
}
.sitemap-legacy h3 a {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}
.sitemap-legacy h3 a:hover {
    color: var(--color-accent-strong);
}
/* Einrückung erst unter Zwischenebene (nicht für Cocos/Indonesien selbst) */
.sitemap-legacy li > h3 + ul.list > li > ul,
.sitemap-legacy li > h3 + ul.list > li > ul ul {
    margin: var(--space-1) 0 var(--space-3);
    padding-left: var(--space-4);
}
.sitemap-legacy a {
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
}
.sitemap-legacy a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Ebene 1: Region (h3) – dunkel, ohne Chevron */
/* Ebene 2: Zwischenebene – dunkel (Unterliste oder <strong> im alten HTML, z. B. Indonesien, Cocos, Jordanien) */
.sitemap-legacy li > h3 + ul.list > li:has(> ul) > a,
.sitemap-legacy li > h3 + ul.list > li > a:has(strong) {
    color: var(--color-text);
    font-weight: 700;
}
.sitemap-legacy li > h3 + ul.list > li:has(> ul) > a:hover,
.sitemap-legacy li > h3 + ul.list > li > a:has(strong):hover {
    color: var(--color-accent-strong);
    text-decoration: none;
}
.sitemap-legacy li > h3 + ul.list > li:has(> ul) > a:hover .sitemap-link__label,
.sitemap-legacy li > h3 + ul.list > li > a:has(strong):hover .sitemap-link__label {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Ebene 3+: Berichte/Ziele unter Zwischenebene – Linkfarbe (überschreibt ggf. strong aus dem HTML) */
.sitemap-legacy li > h3 + ul.list > li > ul a {
    color: var(--color-link);
    font-weight: 600;
}
.sitemap-legacy li > a {
    display: flex;
    align-items: flex-start;
    gap: 0.35em;
    text-decoration: none;
}
.sitemap-legacy li > a:hover {
    text-decoration: none;
}
.sitemap-legacy li > a:hover .sitemap-link__label {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sitemap-legacy .sitemap-link__label {
    min-width: 0;
}
/* Chevron folgt immer der sichtbaren Linkfarbe (nicht fest --color-link) */
.sitemap-legacy li > a::before {
    content: "›";
    flex: 0 0 auto;
    color: currentColor;
    font-weight: 700;
    line-height: inherit;
}
.sitemap-legacy li > h3 + ul.list > li > ul a strong {
    color: inherit;
    font-weight: inherit;
}

/* ---------- Body lock when mobile menu open ---------- */
body.is-nav-open { overflow: hidden; }