/* ==========================================================================
   LOKANES CSS-Modul: wem-wir-vertrauen.css
   Lädt auf /wem-wir-vertrauen/.
   Inhalt: Seitenblock wordpress/page-blocks/wem-wir-vertrauen.html.

   Einbindung und Ladereihenfolge: ../lokanes-css.php (global, geschenkefinder, Seitenmodul).
   Ein Seitenmodul lädt immer nach global.css. Hinweise zur Pflege: ../README.md
   Hervorgegangen aus dem früheren WoodMart "Global Custom CSS" (Stand 12.10.2026);
   Regeln und Abschnittskommentare sind unverändert übernommen.
   ========================================================================== */

/* ==========================================================================
   WEM WIR VERTRAUEN V2
   Seite: wordpress/page-blocks/wem-wir-vertrauen.html
   Hersteller-Explorer: Karte + Auswahl + ein aktives Porträt. Das Skript im
   Seitenblock setzt .lokanes-wwv--js; ohne JavaScript stehen alle Porträts
   untereinander. Alle Regeln unter .lokanes-wwv gescoped.
========================================================================== */

.lokanes-wwv {
    --wwv-copper: #cc9e7e;
    --wwv-ink: #1a1a1a;
    --wwv-text: #4a4a4a;
    --wwv-muted: #6b6b6b;
    --wwv-line: rgba(204, 158, 126, 0.35);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px 88px;
    box-sizing: border-box;
    font-family: 'Jost', sans-serif;
    color: var(--wwv-text);
}

.lokanes-wwv *,
.lokanes-wwv *::before,
.lokanes-wwv *::after {
    box-sizing: border-box;
}

.lokanes-wwv ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lokanes-wwv li {
    margin: 0;
}

.lokanes-wwv a:focus-visible,
.lokanes-wwv button:focus-visible,
.lokanes-wwv select:focus-visible,
.lokanes-wwv .lokanes-wwv__panel:focus-visible {
    outline: 2px solid var(--wwv-ink);
    outline-offset: 3px;
}

/* --- Gemeinsame Typografie --- */
.lokanes-wwv .lokanes-wwv__eyebrow {
    margin: 0 0 12px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wwv-copper);
}

.lokanes-wwv .lokanes-wwv__h2 {
    margin: 0 0 14px;
    font-family: 'Georgia', serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--wwv-ink);
    text-wrap: balance;
}

.lokanes-wwv .lokanes-wwv__h2--small {
    font-size: 30px;
}

.lokanes-wwv .lokanes-wwv__text {
    max-width: 620px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.65;
    color: var(--wwv-text);
}

/* --- Hero --- */
.lokanes-wwv .lokanes-wwv__hero {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    padding: 56px 0 0;
    text-align: center;
}

.lokanes-wwv .lokanes-wwv__hero-badge {
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 2;
}

.lokanes-wwv .lokanes-wwv__title {
    max-width: 760px;
    margin: 0 auto 18px;
    font-family: 'Georgia', serif;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: normal;
    text-transform: none;
    color: var(--wwv-ink);
    text-wrap: balance;
}

.lokanes-wwv .lokanes-wwv__intro {
    max-width: 680px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.65;
    color: var(--wwv-text);
}

/* --- Unser Anspruch --- */
.lokanes-wwv .lokanes-wwv__claim {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    align-items: center;
    gap: 56px;
    padding-top: 64px;
}

.lokanes-wwv .lokanes-wwv__claim-media {
    display: block;
}

.lokanes-wwv .lokanes-wwv__claim-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}

.lokanes-wwv .lokanes-wwv__claim-body {
    text-align: left;
}

.lokanes-wwv .lokanes-wwv__claim-body .lokanes-wwv__eyebrow {
    margin-bottom: 18px;
}

.lokanes-wwv .lokanes-wwv__values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
    margin-bottom: 32px;
}

.lokanes-wwv .lokanes-wwv__value {
    padding-top: 22px;
    border-top: 1px solid var(--wwv-line);
}

.lokanes-wwv .lokanes-wwv__value-icon {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
    color: var(--wwv-copper);
}

.lokanes-wwv .lokanes-wwv__value-icon svg,
.lokanes-wwv .lokanes-wwv__value-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Die kleine Deutschlandkarte ist eine schwarze SVG-Datei. Derselbe Filter wie bei
   .lokanes-de-map färbt sie kupfern wie die beiden anderen Icons. */
.lokanes-wwv .lokanes-wwv__value-icon img {
    filter: invert(72%) sepia(21%) saturate(692%) hue-rotate(339deg) brightness(88%) contrast(85%);
}

.lokanes-wwv .lokanes-wwv__value-title {
    margin: 0 0 8px;
    font-family: 'Georgia', serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    color: var(--wwv-ink);
}

.lokanes-wwv .lokanes-wwv__value-lead {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--wwv-ink);
}

.lokanes-wwv .lokanes-wwv__value-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--wwv-text);
}

/* --- Hersteller-Explorer: Rahmen --- */
.lokanes-wwv .lokanes-wwv__explorer {
    margin-top: 88px;
}

.lokanes-wwv .lokanes-wwv__explorer-eyebrow {
    margin-bottom: 20px;
    text-align: center;
}

.lokanes-wwv .lokanes-wwv__sprite {
    position: absolute;
}

/* Grundlayout (auch ohne JavaScript und auf Tablet): Karte | Auswahl, darunter die Porträts. */
.lokanes-wwv .lokanes-wwv__stage {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
        "map nav"
        "detail detail";
    align-items: center;
    padding: 44px 48px;
    background-color: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--wwv-line);
    border-radius: 10px;
}

.lokanes-wwv .lokanes-wwv__map-col {
    grid-area: map;
    padding-right: 48px;
}

.lokanes-wwv .lokanes-wwv__nav {
    grid-area: nav;
    padding-left: 48px;
    border-left: 1px solid var(--wwv-line);
}

.lokanes-wwv .lokanes-wwv__detail {
    grid-area: detail;
    margin-top: 40px;
    padding-top: 12px;
    border-top: 1px solid var(--wwv-line);
    text-align: left;
}

/* --- Karte --- */
.lokanes-wwv .lokanes-wwv__map {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    aspect-ratio: 94.92 / 125.14;
}

.lokanes-wwv .lokanes-wwv__map-img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    opacity: 0.72;
    pointer-events: none;
}

/* Pin: --x / --y sind die Koordinaten aus dem Block "Pin Locations" (Karte 94.92 x 125.14).
   Die Pin-Spitze liegt dort 7.11 unter dem y-Wert; der Pin wird an seiner Spitze verankert. */
.lokanes-wwv .lokanes-wwv__pin {
    position: absolute;
    left: calc(var(--x) / 94.92 * 100%);
    top: calc((var(--y) + 7.11) / 125.14 * 100%);
    z-index: 1;
    width: 22px;
    height: 31px;
    margin: -31px 0 0 -11px;
    color: var(--wwv-ink);
    text-decoration: none;
    transition: opacity 0.25s ease, color 0.25s ease;
}

/* Größere Trefferfläche */
.lokanes-wwv .lokanes-wwv__pin::before {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -4px;
    left: -6px;
}

.lokanes-wwv .lokanes-wwv__pin-icon {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: currentColor;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.16));
    transform-origin: 50% 100%;
    transition: transform 0.25s ease;
}

.lokanes-wwv .lokanes-wwv__pin-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    z-index: 2;
    padding: 4px 10px 5px;
    background-color: var(--wwv-ink);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #d9d4cf;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.lokanes-wwv .lokanes-wwv__pin-label b {
    font-weight: 500;
    color: #ffffff;
}

/* Am Kartenrand öffnet das Label zur Kartenmitte hin. */
.lokanes-wwv .lokanes-wwv__pin--label-start .lokanes-wwv__pin-label {
    left: -6px;
    transform: none;
}

.lokanes-wwv .lokanes-wwv__pin--label-end .lokanes-wwv__pin-label {
    left: auto;
    right: -6px;
    transform: none;
}

.lokanes-wwv .lokanes-wwv__pin:hover,
.lokanes-wwv .lokanes-wwv__pin:focus-visible {
    z-index: 3;
    color: #b8845f;
    opacity: 1;
}

.lokanes-wwv .lokanes-wwv__pin:hover .lokanes-wwv__pin-icon,
.lokanes-wwv .lokanes-wwv__pin:focus-visible .lokanes-wwv__pin-icon {
    transform: scale(1.12);
}

.lokanes-wwv .lokanes-wwv__pin:hover .lokanes-wwv__pin-label,
.lokanes-wwv .lokanes-wwv__pin:focus-visible .lokanes-wwv__pin-label,
.lokanes-wwv .lokanes-wwv__pin[aria-current="true"] .lokanes-wwv__pin-label {
    opacity: 1;
    visibility: visible;
}

/* Ist ein Hersteller gewählt, treten die übrigen Pins zurück. */
.lokanes-wwv .lokanes-wwv__stage.has-active .lokanes-wwv__pin:not([aria-current="true"]):not(:hover):not(:focus-visible) {
    opacity: 0.4;
}

.lokanes-wwv .lokanes-wwv__pin[aria-current="true"] {
    z-index: 2;
    color: var(--wwv-copper);
}

.lokanes-wwv .lokanes-wwv__pin[aria-current="true"] .lokanes-wwv__pin-icon {
    transform: scale(1.35);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
}

.lokanes-wwv .lokanes-wwv__pin[aria-current="true"] .lokanes-wwv__pin-label {
    bottom: calc(135% + 7px);
}

.lokanes-wwv .lokanes-wwv__pin:hover {
    z-index: 4;
}

/* --- Auswahl --- */
.lokanes-wwv .lokanes-wwv__nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    column-gap: 10px;
    text-align: left;
}

.lokanes-wwv .lokanes-wwv__nav-title {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wwv-muted);
}

/* "Vorheriger / Nächster", Zähler und Mobile-Auswahl brauchen das Skript. */
.lokanes-wwv .lokanes-wwv__pager-btn,
.lokanes-wwv .lokanes-wwv__pager-count,
.lokanes-wwv .lokanes-wwv__select {
    display: none;
}

.lokanes-wwv.lokanes-wwv--js .lokanes-wwv__pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 1px solid var(--wwv-line);
    border-radius: 50%;
    box-shadow: none;
    color: var(--wwv-ink);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lokanes-wwv.lokanes-wwv--js .lokanes-wwv__pager-btn:hover {
    background-color: rgba(204, 158, 126, 0.14);
    border-color: var(--wwv-copper);
    box-shadow: none;
    color: var(--wwv-ink);
}

.lokanes-wwv .lokanes-wwv__pager-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lokanes-wwv.lokanes-wwv--js .lokanes-wwv__pager-count {
    display: block;
    min-width: 96px;
    font-family: 'Georgia', serif;
    font-size: 14px;
    font-style: italic;
    line-height: 1.3;
    text-align: center;
    color: var(--wwv-muted);
}

.lokanes-wwv .lokanes-wwv__index {
    grid-column: 1 / -1;
    margin-top: 18px;
    column-count: 2;
    column-gap: 36px;
}

.lokanes-wwv .lokanes-wwv__index li {
    break-inside: avoid;
}

.lokanes-wwv .lokanes-wwv__index-link {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    padding: 7px 0 7px 16px;
    border-bottom: 1px solid rgba(204, 158, 126, 0.2);
    text-decoration: none;
    color: var(--wwv-ink);
}

/* Markierung links: Punkt, beim aktiven Hersteller gefüllt. */
.lokanes-wwv .lokanes-wwv__index-link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 6px;
    height: 6px;
    border: 1px solid var(--wwv-copper);
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.lokanes-wwv .lokanes-wwv__index-name {
    font-size: 16px;
    line-height: 1.4;
    color: var(--wwv-ink);
}

.lokanes-wwv .lokanes-wwv__index-place {
    font-size: 13px;
    line-height: 1.4;
    color: var(--wwv-muted);
}

.lokanes-wwv .lokanes-wwv__index-link:hover {
    color: var(--wwv-ink);
}

.lokanes-wwv .lokanes-wwv__index-link:hover::before,
.lokanes-wwv .lokanes-wwv__index-link[aria-current="true"]::before {
    background-color: var(--wwv-copper);
}

.lokanes-wwv .lokanes-wwv__index-link[aria-current="true"] {
    border-bottom-color: var(--wwv-copper);
}

.lokanes-wwv .lokanes-wwv__index-link[aria-current="true"] .lokanes-wwv__index-name {
    font-weight: 500;
}

/* --- Porträts --- */
.lokanes-wwv .lokanes-wwv__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    align-items: start;
    gap: 32px;
    padding: 28px 0;
    border-top: 1px solid rgba(204, 158, 126, 0.2);
    scroll-margin-top: 20px;
}

.lokanes-wwv .lokanes-wwv__panel--intro {
    display: block;
    border-top: 0;
}

.lokanes-wwv .lokanes-wwv__panel-head {
    margin: 0 0 12px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.lokanes-wwv .lokanes-wwv__panel-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wwv-muted);
}

.lokanes-wwv .lokanes-wwv__panel-name {
    color: var(--wwv-ink);
}

.lokanes-wwv .lokanes-wwv__panel-sep {
    margin: 0 4px;
    color: var(--wwv-copper);
}

.lokanes-wwv .lokanes-wwv__panel-title {
    display: block;
    font-family: 'Georgia', serif;
    font-size: 30px;
    line-height: 1.2;
    color: var(--wwv-ink);
    text-wrap: balance;
}

.lokanes-wwv .lokanes-wwv__panel-text {
    max-width: 560px;
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--wwv-text);
}

.lokanes-wwv .lokanes-wwv__panel-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: rgba(204, 158, 126, 0.12);
    border-radius: 10px;
}

.lokanes-wwv .lokanes-wwv__hint {
    margin: 18px 0 0;
    font-family: 'Georgia', serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.5;
    color: var(--wwv-muted);
}

/* Mehrere Hersteller an einem Ort */
.lokanes-wwv .lokanes-wwv__switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--wwv-muted);
}

.lokanes-wwv .lokanes-wwv__switch-label {
    margin-right: 4px;
}

.lokanes-wwv .lokanes-wwv__switch-link {
    padding: 5px 14px;
    border: 1px solid var(--wwv-line);
    border-radius: 50px;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    color: var(--wwv-ink);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lokanes-wwv .lokanes-wwv__switch-link:hover {
    border-color: var(--wwv-copper);
    color: var(--wwv-ink);
}

.lokanes-wwv .lokanes-wwv__switch-link[aria-current="true"] {
    background-color: var(--wwv-ink);
    border-color: var(--wwv-ink);
    color: #f2f0ef;
}

/* Statusmeldung nur für Screenreader */
.lokanes-wwv .lokanes-wwv__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Mit Skript: ein aktives Porträt --- */
.lokanes-wwv.lokanes-wwv--js .lokanes-wwv__detail {
    min-height: 288px;
    padding-top: 36px;
}

.lokanes-wwv.lokanes-wwv--js .lokanes-wwv__panel {
    display: none;
    padding: 0;
    border-top: 0;
}

.lokanes-wwv.lokanes-wwv--js .lokanes-wwv__panel.is-active {
    display: grid;
    animation: lokanes-wwv-in 0.3s ease both;
}

.lokanes-wwv.lokanes-wwv--js .lokanes-wwv__panel--intro.is-active {
    display: block;
}

@keyframes lokanes-wwv-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* --- Dein Geheimtipp --- */
.lokanes-wwv .lokanes-wwv__tip {
    max-width: 860px;
    margin: 88px auto 0;
    padding: 48px 56px 52px;
    background-color: rgba(204, 158, 126, 0.13);
    border-radius: 10px;
    text-align: center;
}

.lokanes-wwv .lokanes-wwv__tip .lokanes-wwv__text {
    margin-bottom: 30px;
}

/* Die globale Button-Regel setzt bis einschließlich 768px width: 100%.
   Das Mobile-Layout dieser Seite endet bei 767px, deshalb ab 768px natürliche Breite. */
@media (min-width: 768px) {
    .lokanes-wwv a.lokanes-texture-btn {
        width: auto !important;
    }
}

/* --- Desktop: Karte links, rechts Porträt und darunter die Auswahl --- */
@media (min-width: 1025px) {
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__stage {
        grid-template-areas:
            "map detail"
            "map nav";
        grid-template-rows: auto auto;
        align-items: start;
    }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__map-col {
        align-self: center;
    }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__detail {
        min-height: 324px;
        margin-top: 0;
        padding: 4px 0 24px 48px;
        border-top: 0;
        border-left: 1px solid var(--wwv-line);
    }
    /* Trennlinie zwischen Porträt und Auswahl */
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__nav::before {
        content: "";
        grid-column: 1 / -1;
        margin-bottom: 20px;
        border-top: 1px solid var(--wwv-line);
    }
}

@media (min-width: 1025px) and (max-width: 1199px) {
    .lokanes-wwv .lokanes-wwv__stage { padding: 40px 36px; }
    .lokanes-wwv .lokanes-wwv__map-col { padding-right: 36px; }
    .lokanes-wwv .lokanes-wwv__nav { padding-left: 36px; }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__detail { min-height: 372px; padding-left: 36px; }
    .lokanes-wwv .lokanes-wwv__panel { grid-template-columns: minmax(0, 1fr) 170px; gap: 26px; }
    .lokanes-wwv .lokanes-wwv__values { gap: 28px; }
}

/* --- Tablet --- */
@media (max-width: 1024px) {
    .lokanes-wwv .lokanes-wwv__hero { padding-top: 36px; }
    .lokanes-wwv .lokanes-wwv__hero-badge {
        position: static;
        display: flex;
        justify-content: center;
        margin-bottom: 18px;
    }
    .lokanes-wwv .lokanes-wwv__hero-badge .lokanes-mig-badge { width: 84px; height: 84px; }
    .lokanes-wwv .lokanes-wwv__title { font-size: 40px; }
    .lokanes-wwv .lokanes-wwv__claim {
        grid-template-columns: 200px minmax(0, 1fr);
        align-items: start;
        gap: 36px;
        padding-top: 52px;
    }
    .lokanes-wwv .lokanes-wwv__values { gap: 24px; margin-bottom: 28px; }
    .lokanes-wwv .lokanes-wwv__value-title { font-size: 19px; }
    .lokanes-wwv .lokanes-wwv__explorer { margin-top: 72px; }
    .lokanes-wwv .lokanes-wwv__stage {
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
        padding: 36px 32px;
    }
    .lokanes-wwv .lokanes-wwv__map-col { padding-right: 32px; }
    .lokanes-wwv .lokanes-wwv__nav { padding-left: 32px; }
    .lokanes-wwv .lokanes-wwv__index { column-gap: 24px; }
    .lokanes-wwv .lokanes-wwv__pin { width: 20px; height: 28px; margin: -28px 0 0 -10px; }
    .lokanes-wwv .lokanes-wwv__detail { margin-top: 32px; }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__detail { min-height: 264px; padding-top: 32px; }
    .lokanes-wwv .lokanes-wwv__h2 { font-size: 32px; }
    .lokanes-wwv .lokanes-wwv__h2--small { font-size: 28px; }
    .lokanes-wwv .lokanes-wwv__tip { margin-top: 72px; padding: 40px 40px 44px; }
}

@media (min-width: 768px) and (max-width: 900px) {
    /* Drei Werte nebeneinander werden neben dem Bild zu schmal: Bild über die Werte. */
    .lokanes-wwv .lokanes-wwv__claim { grid-template-columns: 1fr; gap: 32px; }
    .lokanes-wwv .lokanes-wwv__claim-media { max-width: 260px; margin: 0 auto; }
    /* Karte bekommt mehr Anteil; in der Auswahl steht der Ort unter dem Namen. */
    .lokanes-wwv .lokanes-wwv__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: 32px 28px; }
    .lokanes-wwv .lokanes-wwv__map-col { padding-right: 28px; }
    .lokanes-wwv .lokanes-wwv__nav { padding-left: 28px; column-gap: 8px; }
    .lokanes-wwv .lokanes-wwv__nav-title { letter-spacing: 0.14em; }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__pager-count { min-width: 52px; }
    .lokanes-wwv .lokanes-wwv__index { column-gap: 20px; }
    .lokanes-wwv .lokanes-wwv__index-name { font-size: 15px; }
    .lokanes-wwv .lokanes-wwv__index-place { flex-basis: 100%; }
    .lokanes-wwv .lokanes-wwv__pin { width: 18px; height: 26px; margin: -26px 0 0 -9px; }
}

/* --- Mobile --- */
@media (max-width: 767px) {
    .lokanes-wwv { padding: 0 16px 64px; }
    .lokanes-wwv .lokanes-wwv__hero { padding-top: 26px; }
    .lokanes-wwv .lokanes-wwv__hero-badge { margin-bottom: 14px; }
    .lokanes-wwv .lokanes-wwv__hero-badge .lokanes-mig-badge { width: 72px; height: 72px; }
    .lokanes-wwv .lokanes-wwv__title { margin-bottom: 14px; font-size: 31px; }
    .lokanes-wwv .lokanes-wwv__intro { font-size: 16px; line-height: 1.6; }
    .lokanes-wwv .lokanes-wwv__claim {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-top: 40px;
    }
    .lokanes-wwv .lokanes-wwv__claim-media { max-width: 220px; margin: 0 auto; }
    .lokanes-wwv .lokanes-wwv__claim-body .lokanes-wwv__eyebrow { margin-bottom: 14px; text-align: center; }
    .lokanes-wwv .lokanes-wwv__values { grid-template-columns: 1fr; gap: 0; margin-bottom: 26px; }
    .lokanes-wwv a.lokanes-texture-btn {
        min-height: 50px !important;
        padding: 13px 18px !important;
        font-size: 13px !important;
        letter-spacing: 0.08em !important;
    }
    .lokanes-wwv .lokanes-wwv__value {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        column-gap: 14px;
        padding: 18px 0;
    }
    .lokanes-wwv .lokanes-wwv__value:last-child { border-bottom: 1px solid var(--wwv-line); }
    .lokanes-wwv .lokanes-wwv__value-icon { grid-row: 1 / span 3; width: 26px; height: 26px; margin: 2px 0 0; }
    .lokanes-wwv .lokanes-wwv__value-title { margin-bottom: 6px; font-size: 19px; }
    .lokanes-wwv .lokanes-wwv__explorer { margin-top: 56px; }
    .lokanes-wwv .lokanes-wwv__explorer-eyebrow { margin-bottom: 16px; }
    .lokanes-wwv .lokanes-wwv__stage {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "map"
            "nav"
            "detail";
        padding: 26px 18px 28px;
    }
    .lokanes-wwv .lokanes-wwv__map-col { padding: 0; }
    .lokanes-wwv .lokanes-wwv__map { max-width: 250px; }
    .lokanes-wwv .lokanes-wwv__pin { width: 18px; height: 26px; margin: -26px 0 0 -9px; }
    .lokanes-wwv .lokanes-wwv__nav {
        margin-top: 26px;
        padding: 0;
        border-left: 0;
    }
    .lokanes-wwv .lokanes-wwv__index { column-count: 1; }
    /* Mit Skript: eine Zeile aus Zurück | Auswahl | Weiter statt der Liste. */
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__nav {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        row-gap: 10px;
        column-gap: 8px;
    }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__nav-title { grid-area: 1 / 1 / 2 / 3; }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__pager-count {
        grid-area: 1 / 2 / 2 / 4;
        justify-self: end;
        min-width: 0;
        font-size: 13px;
        text-align: right;
    }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__pager-btn { width: 44px; height: 48px; border-radius: 6px; }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__pager-btn:first-of-type { grid-area: 2 / 1; }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__pager-btn:last-of-type { grid-area: 2 / 3; }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__select {
        grid-area: 2 / 2;
        display: block;
        width: 100%;
        max-width: none;
        height: 48px;
        margin: 0;
        padding: 0 38px 0 14px;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-color: rgba(255, 255, 255, 0.7);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 12px 7px;
        border: 1px solid rgba(204, 158, 126, 0.6);
        border-radius: 6px;
        box-shadow: none;
        font-family: 'Jost', sans-serif;
        font-size: 16px;
        line-height: 1.2;
        text-overflow: ellipsis;
        color: var(--wwv-ink);
    }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__index { display: none; }
    .lokanes-wwv .lokanes-wwv__detail { margin-top: 24px; }
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__detail { min-height: 0; padding-top: 24px; }
    .lokanes-wwv .lokanes-wwv__panel { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 0; }
    .lokanes-wwv .lokanes-wwv__panel-title { font-size: 26px; }
    .lokanes-wwv .lokanes-wwv__panel-eyebrow { letter-spacing: 0.14em; }
    .lokanes-wwv .lokanes-wwv__panel-img { aspect-ratio: 4 / 3; }
    .lokanes-wwv .lokanes-wwv__h2 { font-size: 28px; }
    .lokanes-wwv .lokanes-wwv__h2--small { font-size: 24px; }
    .lokanes-wwv .lokanes-wwv__tip { margin-top: 56px; padding: 32px 22px 34px; }
    .lokanes-wwv .lokanes-wwv__tip .lokanes-wwv__text { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .lokanes-wwv.lokanes-wwv--js .lokanes-wwv__panel.is-active { animation: none; }
    .lokanes-wwv .lokanes-wwv__pin,
    .lokanes-wwv .lokanes-wwv__pin-icon,
    .lokanes-wwv .lokanes-wwv__pin-label,
    .lokanes-wwv .lokanes-wwv__pager-btn,
    .lokanes-wwv .lokanes-wwv__index-link::before,
    .lokanes-wwv .lokanes-wwv__switch-link { transition: none; }
}