/* =========================
   GLOBAL SHOP OVERRIDES
========================= */

#main-wrapper>div#content-wrapper {
    background: #fff url("../images/bg-trails.jpg") no-repeat top center !important;
    margin-top: -98px;
    padding-top: 104px;
}

.image-banner-area {
    background: transparent !important;
}

body[data-page="28"] .banner-default {
    display: none;
}

/* =========================
   MAPLIBRE POPUP & CONTROLS
========================= */

.maplibregl-popup-content {
    font-size: 14px;
    line-height: 1.4;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.maplibregl-ctrl-group {
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.maplibregl-ctrl-attrib {
    font-size: 10px !important;
    opacity: 0.6;
}

.maplibregl-ctrl-attrib:hover {
    opacity: 1;
}

/* =========================
   POI MARKERS
========================= */

.poi-marker-wrapper {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.poi-marker {
    background: none !important;
    border: none !important;
}

.poi-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
    transition: box-shadow 0.15s;
}

.poi-icon:hover {
    box-shadow: 0 0 0 4px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.4);
}

.poi-icon-img {
    width: 32px;
    height: 40px;
    object-fit: contain;
}

/* =========================
   MAP LEGEND (on-map control)
========================= */

.map-legend {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    line-height: 1.8;
    color: #333;
    max-width: 180px;
}

.map-legend .legend-title {
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    color: #333;
}

.map-legend .legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 0;
    color: #444;
}

.map-legend .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.map-legend .legend-line-dashed {
    width: 18px;
    height: 0;
    border-top: 2px dashed #555;
    flex-shrink: 0;
}

.map-legend .legend-filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
}

.map-legend .legend-filter-cb {
    width: 13px;
    height: 13px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.legend-toggle-btn {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background-color 0.15s;
}

.legend-toggle-btn:hover {
    background: rgba(255, 255, 255, 1);
}

/* =========================
   ROUTE LINE EFFECTS
========================= */

.route-line {
    transition: stroke-width 0.15s ease, stroke-opacity 0.15s ease;
}

/* =========================
   ROUTE MARKERS
========================= */

.route-marker-icon {
    background: transparent !important;
    border: none !important;
}

.chairlift-marker {
    background: transparent !important;
    border: none !important;
}

.route-start-marker {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 8px;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.route-start-marker:hover {
    box-shadow: 0 0 0 4px rgba(255,255,255,0.6), 0 2px 8px rgba(0,0,0,0.4);
}

.route-end-marker {
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.route-end-marker:hover {
    filter: brightness(1.15);
}

/* =========================
   GROUPED START MARKERS
========================= */

.route-group-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1e293b;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.route-group-marker:hover {
    box-shadow: 0 0 0 4px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.4);
}

.route-group-popup {
    min-width: 160px;
}

.route-group-popup-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s;
    font-size: 13px;
}

.route-group-popup-item:hover {
    background: rgba(0, 0, 0, 0.06);
}

.route-group-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* =========================
   OPENING HOURS CARD
========================= */

.opening-hours-card {
    background: #ffffff;
    padding: 28px 24px;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
}

.oh-title {
    font-weight: 900;
    letter-spacing: 4px;
    font-size: 14px;
    margin-bottom: 20px;
}

.oh-section {
    margin-bottom: 18px;
}

.oh-label {
    display: inline-block;
    background: #ffe600;
    color: #000;
    font-weight: 800;
    padding: 6px 10px;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.oh-value {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}

.oh-season {
    font-size: 13px;
    color: #555;
    margin: -10px 0 18px;
    letter-spacing: 1px;
}

.oh-status {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #000;
    color: #ffe600;
}
.oh-status-pre   { background: #6c757d; color: #fff; }
.oh-status-soon  { background: #ff9800; color: #fff; }
.oh-status-open  { background: #28a745; color: #fff; }
.oh-status-post  { background: #343a40; color: #ffe600; }

.fa-marker-inner {
    font-size: 28px;
    line-height: 28px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

/* =========================
   VIDEO COOKIE CONSENT
========================= */

.video-consent-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #1a1a2e;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.video-consent-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    padding: 20px;
}

.video-consent-overlay p {
    margin-bottom: 12px;
    font-size: 14px;
    opacity: 0.9;
}

.video-consent-overlay button {
    background: #e74c3c;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
}

.video-consent-overlay button:hover {
    background: #c0392b;
}

.video-consent-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ================================================================
   TRACKMAPS REDESIGN — trm-* namespace
   ================================================================ */

/* --- Header --- */
.trm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0 14px;
    gap: 16px;
    flex-wrap: wrap;
}

.trm-title {
    font-family: var(--font2, 'Arial Black', sans-serif);
    font-size: 42px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1;
    color: #000;
    margin: 0;
}

/* View Toggle (Karte / Galerie) */
.trm-view-toggle {
    display: flex;
    gap: 0;
    border: 2px solid #000;
    overflow: hidden;
}

.trm-view-toggle .trm-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none !important;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background-color 0.2s, color 0.2s;
    background: #fff !important;
    color: #333 !important;
    line-height: 1;
    border-radius: 0 !important;
    outline: none;
}

.trm-view-toggle .trm-toggle-btn.active {
    background: #fffc00 !important;
    color: #000 !important;
}

.trm-view-toggle .trm-toggle-btn:hover:not(.active) {
    background: #f5f5f5 !important;
}

.trm-toggle-btn svg {
    flex-shrink: 0;
}

/* ================================================================
   MAP VIEW — Layout
   ================================================================ */
.trm-map-view {
    display: flex;
    width: 100%;
    position: relative;
    height: calc(100vh - 200px);
    min-height: 600px;
    max-height: 900px;
}

/* --- Sidebar (links) --- */
.trm-sidebar {
    width: 300px;
    min-width: 300px;
    height: 100%;
    max-height: 100%;
    background: #f6f5f3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #e5e4e0;
}

/* --- Filter Wrapper (anchor for absolute panel) --- */
.trm-filter-wrapper {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

/* --- Filter Header --- */
.trm-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #fffc00;
    cursor: pointer;
    font-family: var(--font2, 'Arial Black', sans-serif);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #000;
    user-select: none;
    transition: background-color 0.15s;
}

.trm-filter-header:hover {
    background: #f5eb00;
}

.trm-filter-chevron {
    font-size: 10px;
    transition: transform 0.25s ease;
}

.trm-filter-header.is-open .trm-filter-chevron {
    transform: rotate(180deg);
}

/* --- Filter Panel (overlay, not push-down) --- */
.trm-filter-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 14px 18px;
    background: #fff;
    border-bottom: 1px solid #e5e4e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 4px 4px;
    max-height: 400px;
    overflow-y: auto;
}

.trm-filter-group {
    margin-bottom: 14px;
}

.trm-filter-group:last-of-type {
    margin-bottom: 8px;
}

.trm-filter-group strong,
.trm-filter-group em {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    margin-bottom: 6px;
    font-style: normal;
}

.trm-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
    font-size: 13px;
    color: #333;
}

.trm-filter-cb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #b1b1b1;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s, border-color 0.15s;
    margin: 0;
    flex-shrink: 0;
}
.trm-filter-cb:checked {
    background: #258292;
    border-color: #258292;
}
.trm-filter-cb:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.trm-filter-cb:hover:not(:checked) {
    border-color: #888;
}
.trm-filter-cb:focus-visible {
    outline: 2px solid #fffc00;
    outline-offset: 2px;
    accent-color: #000;
}

.trm-filter-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.trm-filter-text {
    flex: 1;
}

.trm-filter-apply {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background: #000;
    color: #fff;
    border: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background-color 0.15s;
}

.trm-filter-apply:hover {
    background: #333;
}

/* --- Route List (in Sidebar) --- */
.trm-route-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Route Card */
.trm-route-card {
    display: flex;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color 0.15s, border-left-color 0.2s;
    border-bottom: 1px solid #eae9e6;
}

.trm-route-card:hover {
    background: rgba(0, 0, 0, 0.04);
}

.trm-route-card.is-active,
.trm-route-card.active {
    background: rgba(255, 252, 0, 0.12);
    border-left: 4px solid #fffc00;
    box-shadow: inset 0 0 0 1px rgba(255, 252, 0, 0.2);
}

/* No map data indicator */
.trm-no-map-data {
    position: relative;
}
.trm-no-map-data::after {
    content: 'Keine GPX-Daten';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #b0a090;
    background: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
}
.trm-gallery-card.trm-no-map-data::after {
    top: auto;
    bottom: 8px;
    right: 8px;
}

/* Thumbnail */
.trm-route-thumb {
    width: 80px;
    height: 52px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: #ddd;
}

/* Route Info (rechts vom Thumb) */
.trm-route-info {
    flex: 1;
    min-width: 0;
}

.trm-route-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trm-route-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #666;
}

.trm-route-diff-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.trm-route-status-icon {
    font-size: 11px;
    font-weight: 700;
}

.trm-route-status-icon.is-open { color: #16a34a; }
.trm-route-status-icon.is-closed { color: #dc2626; }
.trm-route-status-icon.is-partial { color: #ea580c; }

.trm-route-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.trm-route-stat svg {
    width: 12px;
    height: 12px;
    opacity: 0.5;
}

/* Route Card inner elements (JS-generated trm-card-* classes) */
.trm-card-thumb {
    width: 80px;
    height: 52px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: #e5e4e0;
    position: relative;
}

.trm-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.trm-card-body {
    flex: 1;
    min-width: 0;
}

.trm-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trm-card-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.trm-card-badges .trm-badge-diff {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.trm-card-badges .trm-badge-status {
    font-size: 11px;
    font-weight: 600;
}

.trm-card-badges .trm-status-open { color: #16a34a; }
.trm-card-badges .trm-status-closed { color: #dc2626; }
.trm-card-badges .trm-status-partially_open { color: #ea580c; }

.trm-card-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #888;
}

.trm-card-stats .trm-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.trm-no-results {
    padding: 30px 18px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

/* --- Custom Scrollbar (Sidebar) --- */
.trm-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.trm-route-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.trm-route-list::-webkit-scrollbar {
    width: 5px;
}

.trm-route-list::-webkit-scrollbar-track {
    background: transparent;
}

.trm-route-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.trm-route-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* --- Loading Skeleton / Placeholder --- */
.trm-skeleton {
    background: linear-gradient(90deg, #e5e4e0 25%, #f0efec 50%, #e5e4e0 75%);
    background-size: 200% 100%;
    animation: trm-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes trm-skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.trm-img-loading {
    position: relative;
    overflow: hidden;
}

.trm-img-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #e5e4e0 25%, #f0efec 50%, #e5e4e0 75%);
    background-size: 200% 100%;
    animation: trm-skeleton-pulse 1.5s ease-in-out infinite;
    z-index: 1;
}

.trm-img-loading.trm-img-loaded::before {
    display: none;
}

/* --- Smooth Panel Transitions --- */
.trm-sidebar {
    transition: width 0.3s ease, min-width 0.3s ease, transform 0.3s ease;
}

.trm-detail-panel {
    transition: transform 0.3s ease;
}

.trm-filter-panel {
    transition: opacity 0.2s ease;
}

/* --- Map Container --- */
.trm-map-container {
    flex: 1;
    min-width: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* --- Detail Panel (right overlay) --- */
.trm-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 340px;
    height: 100%;
    max-height: 100%;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 10;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.trm-detail-panel[style*="display:none"],
.trm-detail-panel[style*="display: none"] {
    transform: translateX(100%);
}

.trm-detail-close {
    position: sticky;
    top: 0;
    float: right;
    width: 36px;
    height: 36px;
    margin: 12px 12px 0 0;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    transition: background-color 0.15s;
}

.trm-detail-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.trm-detail-content {
    padding: 16px 20px 24px;
}

/* Detail panel inner elements */
.trm-detail-title {
    font-family: var(--font2, 'Arial Black', sans-serif);
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    color: #000;
    margin: 0 0 10px;
    padding-right: 40px;
}

.trm-detail-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.trm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.trm-badge-diff {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #333;
}

.trm-badge-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #f0f0f0;
    color: #555;
}

.trm-badge-status.is-open,
.trm-badge-status.trm-status-open            { background: #dcfce7; color: #16a34a; }
.trm-badge-status.is-closed,
.trm-badge-status.trm-status-closed          { background: #fee2e2; color: #dc2626; }
.trm-badge-status.is-partial,
.trm-badge-status.trm-status-partially_open  { background: #fff7ed; color: #ea580c; }

.trm-detail-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.trm-detail-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trm-detail-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
}

.trm-detail-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.trm-detail-gallery {
    margin-bottom: 16px;
}

.trm-detail-gallery-main {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.trm-detail-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    opacity: 0.7;
    transition: opacity 0.15s, background-color 0.15s;
}

.trm-detail-gallery-main:hover .trm-detail-arrow {
    opacity: 1;
}

.trm-detail-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

.trm-detail-arrow-prev { left: 6px; }
.trm-detail-arrow-next { right: 6px; }

/* Slider buttons injected by selectRoute() into detail gallery */
.trm-detail-gallery-main .trm-slider-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trm-detail-gallery-main:hover .trm-slider-btn { opacity: 1; }
.trm-detail-gallery-main .trm-slider-prev { left: 8px; }
.trm-detail-gallery-main .trm-slider-next { right: 8px; }

.trm-detail-image {
    width: 100%;
    border-radius: 4px;
    display: block;
}

.trm-detail-thumbs {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.trm-detail-thumb {
    width: 52px;
    height: 36px;
    object-fit: cover;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
    flex-shrink: 0;
    border: 2px solid transparent;
}

.trm-detail-thumb-video {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #fff;
    font-size: 14px;
}

.trm-detail-video-inline {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.trm-detail-thumb:hover {
    opacity: 0.9;
}

.trm-detail-thumb.is-active {
    opacity: 1;
    border-color: #fffc00;
}

.trm-detail-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 16px;
}

.trm-detail-desc p {
    margin: 0 0 8px;
}

/* --- Videos in Detail Panel --- */
.trm-detail-videos {
    margin-bottom: 16px;
}

.trm-detail-videos h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    margin: 0 0 8px;
}

.trm-detail-video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 10px;
}

.trm-detail-video-embed iframe,
.trm-detail-video-embed video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.trm-detail-elevation {
    margin-bottom: 16px;
}

.trm-detail-elevation h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    margin: 0 0 8px;
}

.trm-detail-elevation canvas {
    width: 100%;
    height: 120px;
    border-radius: 6px;
    background: #f9f9f7;
}

.trm-detail-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.trm-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.15s;
}

.trm-detail-link:hover {
    color: #555;
}

.trm-detail-link-komoot {
    background: #6db33f;
    color: #fff;
    border-radius: 4px;
    padding: 4px 8px;
}

.trm-detail-link-komoot:hover {
    background: #5a9e32;
    color: #fff;
}

.trm-detail-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ================================================================
   GALLERY VIEW
   ================================================================ */
.trm-gallery-view {
    display: flex;
    gap: 28px;
    width: 100%;
    padding: 0;
    align-items: flex-start;
}

/* --- Gallery Filters (links, sticky) --- */
.trm-gallery-filters {
    width: 210px;
    min-width: 210px;
    flex-shrink: 0;
    padding: 20px 0;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.trm-gallery-filters h3 {
    font-family: var(--font2, 'Arial Black', sans-serif);
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 18px;
    color: #000;
}

/* Gallery filter items: label left, checkbox right */
.trm-gallery-filters .trm-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
    font-size: 13px;
    color: #333;
    flex-direction: row;
}

.trm-gallery-filters .trm-filter-cb {
    order: 2;
    margin-left: auto;
}

.trm-gallery-filters .trm-filter-swatch {
    order: 0;
}

.trm-gallery-filters .trm-filter-text {
    order: 1;
    flex: 1;
}

/* Gallery filter: status labels as yellow tags */
.trm-gallery-filters .trm-filter-group em {
    display: inline-block;
    background: #fffc00;
    color: #000;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    padding: 3px 10px 2px;
    margin-bottom: 8px;
    letter-spacing: 0.03em;
}

/* --- Gallery Grid --- */
.trm-gallery-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--trm-gallery-cols, 3), 1fr);
    gap: 22px;
    padding: 20px 0;
    align-content: start;
}

/* --- Gallery Card --- */
.trm-gallery-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s, transform 0.15s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.trm-gallery-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

/* Card Image: fixed 16:9 ratio */
.trm-gallery-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e5e4e0;
    flex-shrink: 0;
}

.trm-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #eae9e6;
}

.trm-placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.trm-gallery-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.trm-gallery-card:hover .trm-gallery-card-image img {
    transform: scale(1.05);
}

/* Card Image Overlay: dark gradient + route name */
.trm-gallery-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 16px 12px;
    background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.7) 100%);
    color: #fff;
    pointer-events: none;
}

.trm-gallery-card-name {
    font-family: var(--font2, 'Arial Black', sans-serif);
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.15;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Card Body */
.trm-gallery-card-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Gallery Card Title Row (name + info icon) */
.trm-gallery-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.trm-gallery-card-title {
    font-family: var(--font2, 'Arial Black', sans-serif);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    color: #000;
}

.trm-gallery-info-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #000;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s;
    padding: 0;
}

.trm-gallery-info-btn:hover {
    background: #fffc00;
}

.trm-gallery-info-btn svg {
    width: 16px;
    height: 16px;
}

/* Card Meta: difficulty dot + label, info icon */
.trm-gallery-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.trm-gallery-card-diff {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.trm-gallery-card-diff .trm-filter-swatch {
    width: 10px;
    height: 10px;
}

.trm-gallery-card-info-icon {
    margin-left: auto;
    width: 18px;
    height: 18px;
    color: #999;
    flex-shrink: 0;
}

/* Card Description: max 3 lines */
.trm-gallery-card-desc {
    font-size: 13px;
    line-height: 1.55;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 14px;
    flex: 1;
}

/* Card Button: outlined, full width */
.trm-gallery-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    color: #000;
    border: 2px solid #000;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    margin-top: auto;
}

.trm-gallery-card-btn:hover {
    background: #fffc00;
    border-color: #fffc00;
}

.trm-gallery-card-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ================================================================
   MODAL (<dialog>)
   ================================================================ */
.trm-modal {
    padding: 0;
    border: none;
    border-radius: 10px;
    max-width: 900px;
    width: 95vw;
    max-height: 90vh;
    overflow: visible;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    background: #fff;
}

.trm-modal[open] {
    animation: trm-modal-in 0.25s ease-out;
}

@keyframes trm-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.trm-modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.trm-modal-inner {
    position: relative;
    height: 72vh;
    max-height: 72vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Close button — top-right, over map area */
.trm-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, transform 0.15s;
}

.trm-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.08);
}

/* Two-column layout: 45% map / 55% content */
.trm-modal-layout {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Modal: Map / route preview (links, 45%) */
.trm-modal-map {
    width: 45%;
    min-width: 45%;
    min-height: 500px;
    background: #e8e7e3;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

/* Ensure the MapLibre map div fills its container completely */
.trm-modal-map > div {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Placeholder when no map loaded yet */
.trm-modal-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* Modal: Content (rechts, 55%) — scrollbar nur hier */
.trm-modal-content {
    width: 55%;
    padding: 28px 28px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;

    /* Fancy scrollbar — Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Fancy scrollbar — Webkit (Chrome, Safari, Edge) */
.trm-modal-content::-webkit-scrollbar {
    width: 6px;
}
.trm-modal-content::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}
.trm-modal-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    transition: background 0.2s;
}
.trm-modal-content:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
}
.trm-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.45);
}

/* Route title */
.trm-modal-title {
    font-family: var(--font2, 'Arial Black', sans-serif);
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    color: #000;
    margin: 0 0 14px;
}

/* Meta row: tags + stats inline */
.trm-modal-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Meta: difficulty + status tags */
.trm-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.trm-meta-tag-diff {
    color: #fff;
}

.trm-meta-tag-status {
    background: #f0f0f0;
    color: #555;
}

.trm-meta-tag-status.is-open { background: #dcfce7; color: #16a34a; }
.trm-meta-tag-status.is-closed { background: #fee2e2; color: #dc2626; }
.trm-meta-tag-status.is-partial { background: #fff7ed; color: #ea580c; }

/* Meta: stat items (duration, distance, elevation) */
.trm-meta-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    padding: 0 2px;
}

.trm-meta-stat svg {
    width: 14px;
    height: 14px;
    opacity: 0.55;
    flex-shrink: 0;
}

.trm-meta-divider {
    width: 1px;
    height: 14px;
    background: #ddd;
    flex-shrink: 0;
}

/* ---- Modal: Image Slider ---- */
.trm-modal-slider {
    margin-bottom: 20px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
    flex-shrink: 0;
}

.trm-modal-slider:empty {
    display: none;
}

/* Main image area */
.trm-slider-viewport {
    position: relative;
    overflow: hidden;
    max-height: 150px;
}

.trm-slider-track {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.trm-slider-slide {
    min-width: 100%;
    flex-shrink: 0;
}

.trm-slider-slide img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
}

.trm-slider-slide video {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    background: #000;
}

/* Prev/Next nav arrows */
.trm-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background-color 0.15s, opacity 0.15s;
    opacity: 0.7;
}

.trm-modal-slider:hover .trm-slider-btn,
.trm-slider-viewport:hover .trm-slider-btn {
    opacity: 1;
}

.trm-slider-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.trm-slider-prev { left: 8px; }
.trm-slider-next { right: 8px; }

/* Dot indicators */
.trm-slider-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 4px;
}

.trm-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s, transform 0.15s;
}

.trm-slider-dot.is-active {
    background: #333;
    transform: scale(1.25);
}

/* Thumbnail strip below main image */
.trm-slider-thumbs {
    display: flex;
    gap: 4px;
    padding: 6px 6px 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.trm-slider-thumb {
    width: 56px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 4px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: opacity 0.15s, border-color 0.15s;
}

.trm-slider-thumb:hover {
    opacity: 0.85;
}

.trm-slider-thumb.is-active {
    opacity: 1;
    border-color: #000;
}

/* Video badge overlay on slide */
.trm-slider-video-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

/* ---- Modal: Elevation Profile ---- */
.trm-modal-elevation {
    margin-bottom: 20px;
    background: #f9f9f7;
    border-radius: 8px;
    padding: 14px 16px;
    flex-shrink: 0;
}

.trm-modal-elevation h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin: 0 0 10px;
}

#trm-modal-elevation-canvas {
    width: 100%;
    height: 160px;
    border-radius: 4px;
    display: block;
}

/* Elevation legend: colored dots for difficulty segments */
.trm-elevation-legend {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.trm-elevation-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #666;
    font-weight: 500;
}

.trm-elevation-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Elevation stats row (min/max/gain) */
.trm-elevation-stats {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.trm-elevation-stat {
    font-size: 12px;
    color: #666;
}

.trm-elevation-stat strong {
    color: #333;
    font-weight: 700;
}

/* ---- Modal: Description ---- */
.trm-modal-description {
    font-size: 14px;
    line-height: 1.65;
    color: #444;
    margin-bottom: 20px;
}

.trm-modal-description:empty {
    display: none;
}

/* ---- Modal: Waypoints ---- */
.trm-modal-waypoints {
    margin-bottom: 20px;
}

.trm-modal-waypoints:empty {
    display: none;
}

.trm-modal-waypoints h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin: 0 0 10px;
}

.trm-waypoint {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    color: #333;
}

.trm-waypoint:last-child {
    border-bottom: none;
}

/* S / Z circle icon */
.trm-waypoint-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
}

.trm-waypoint-icon.is-start {
    background: #16a34a;
}

.trm-waypoint-icon.is-end {
    background: #dc2626;
}

.trm-waypoint-name {
    flex: 1;
    font-weight: 600;
    color: #222;
}

.trm-waypoint-elev {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    flex-shrink: 0;
}

/* Dashed connector line between waypoints */
.trm-waypoint-connector {
    width: 30px;
    display: flex;
    justify-content: center;
    padding: 0;
}

.trm-waypoint-connector::after {
    content: '';
    display: block;
    width: 2px;
    height: 18px;
    border-left: 2px dashed #ccc;
}

/* ---- Modal: Actions ---- */
.trm-modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 18px;
    margin-top: 24px;
    border-top: 1px solid #eee;
}

.trm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, transform 0.1s;
    line-height: 1;
}

.trm-btn:active {
    transform: scale(0.97);
}

.trm-btn svg {
    flex-shrink: 0;
}

.trm-nav-dropdown {
    position: relative;
    display: inline-block;
}

.trm-btn-navigate {
    background: #000;
    color: #fff;
}

.trm-btn-navigate:hover {
    background: #333;
}

.trm-nav-chevron {
    margin-left: 4px;
    transition: transform 0.2s;
}

.trm-nav-dropdown.is-open .trm-nav-chevron {
    transform: rotate(180deg);
}

.trm-nav-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    min-width: 180px;
    z-index: 10;
    overflow: hidden;
}

.trm-nav-menu.is-open {
    display: block;
}

.trm-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s;
}

.trm-nav-item:hover {
    background: #f5f5f5;
    color: #000;
    text-decoration: none;
}

.trm-nav-item img {
    flex-shrink: 0;
}

.trm-btn-gpx {
    background: #f0f0f0;
    color: #333;
}

.trm-btn-gpx:hover {
    background: #e0e0e0;
}

.trm-btn-tickets {
    background: #fffc00;
    color: #000;
    font-weight: 800;
}

.trm-btn-tickets:hover {
    background: #e8e500;
}

/* ================================================================
   CLASSIC MODE — Map full width, no sidebar
   ================================================================ */
.trm-map-view.trm-classic {
    /* No sidebar in classic mode — map takes full width */
}

.trm-map-view.trm-classic .trm-sidebar {
    display: none !important;
}

.trm-map-view.trm-classic .trm-detail-panel {
    display: none !important;
}

.trm-map-view.trm-classic .trm-sidebar-toggle {
    display: none !important;
}

.trm-map-view.trm-classic .trm-map-container {
    flex: 1;
    height: 100%;
}

/* ---- Map Style Toggle (classic ↔ modern within map view) ---- */
.trm-map-style-toggle {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: flex;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.trm-style-btn {
    padding: 7px 14px;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.trm-style-btn:first-child {
    border-right: 1px solid #e5e5e5;
}

.trm-style-btn.active {
    background: #000;
    color: #fff;
}

.trm-style-btn:hover:not(.active) {
    background: #f5f5f5;
}

/* ================================================================
   RESPONSIVE — Large tablet (992px – 1199px)
   ================================================================ */
@media (max-width: 1199px) and (min-width: 992px) {
    .trm-sidebar {
        width: 220px;
        min-width: 220px;
    }

    .trm-detail-panel {
        width: 280px;
    }

    .trm-card-thumb {
        width: 60px;
        height: 40px;
    }

    .trm-card-name {
        font-size: 13px;
    }

    .trm-card-stats {
        font-size: 11px;
    }

    .trm-gallery-filters {
        width: 180px;
        min-width: 180px;
    }
}

/* ================================================================
   RESPONSIVE — Tablet (768px – 991px)
   ================================================================ */
@media (max-width: 991px) {
    .trm-title {
        font-size: 32px;
    }

    /* Sidebar as overlay over the map */
    .trm-map-view {
        position: relative;
        height: calc(100vh - 180px);
        min-height: 500px;
        max-height: 800px;
    }

    .trm-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        width: 280px;
        min-width: 280px;
        height: 100%;
        max-height: 100%;
        z-index: 20;
        background: rgba(246, 245, 243, 0.97);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
    }

    .trm-sidebar.is-open {
        transform: translateX(0);
    }

    .trm-map-container {
        width: 100%;
        flex: 1;
        height: 100%;
    }

    .trm-detail-panel {
        width: 300px;
        max-height: 100%;
    }

    /* Sidebar toggle button (shown on tablet) */
    .trm-sidebar-toggle {
        display: flex;
    }

    .trm-modal-layout {
        flex-direction: column;
    }

    .trm-modal-map {
        width: 100%;
        min-width: 100%;
        height: 240px;
        min-height: 240px;
    }

    .trm-modal-content {
        width: 100%;
        max-height: none;
        padding: 22px 22px 20px;
        flex: 1;
        overflow-y: auto;
    }

    .trm-modal-title {
        font-size: 22px;
    }

    .trm-slider-thumbs {
        padding: 4px;
    }

    .trm-gallery-filters {
        width: 180px;
        min-width: 180px;
    }

    .trm-gallery-grid {
        gap: 16px;
    }

    .trm-gallery-card-name {
        font-size: 15px;
    }
}

/* ================================================================
   RESPONSIVE — Mobile (< 768px)
   ================================================================ */
@media (max-width: 767px) {
    .trm-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 0 10px;
    }

    .trm-title {
        font-size: 28px;
    }

    .trm-view-toggle {
        align-self: stretch;
    }

    .trm-toggle-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 12px;
    }

    /* Map View: map full width, route strip at bottom */
    .trm-map-view {
        flex-direction: column;
        height: auto;
        min-height: auto;
        max-height: none;
        position: relative;
    }

    /* Hide default sidebar, show horizontal strip instead */
    .trm-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100%;
        min-width: 100%;
        height: auto;
        max-height: 40vh;
        z-index: 30;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-right: none;
        border-top: 1px solid #e5e4e0;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
        transform: none;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .trm-sidebar .trm-filter-header {
        padding: 10px 14px;
        font-size: 11px;
    }

    .trm-sidebar .trm-filter-panel {
        max-height: 40vh;
        overflow-y: auto;
    }

    /* Route list: horizontal scrolling strip */
    .trm-route-list {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px 14px;
        gap: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .trm-route-list::-webkit-scrollbar {
        display: none;
    }

    .trm-route-card {
        min-width: 200px;
        max-width: 220px;
        flex-shrink: 0;
        flex-direction: column;
        padding: 10px;
        border-left: none;
        border-bottom: none;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        scroll-snap-align: start;
    }

    .trm-route-card.active,
    .trm-route-card.is-active {
        border-left: none;
        box-shadow: 0 0 0 2px #fffc00, 0 2px 12px rgba(0, 0, 0, 0.12);
    }

    .trm-card-thumb {
        width: 100%;
        height: 80px;
        margin-bottom: 8px;
        border-radius: 4px;
    }

    .trm-card-stats {
        font-size: 11px;
        gap: 8px;
    }

    /* Map: takes remaining space above strip */
    .trm-map-container {
        height: calc(100vh - 200px);
        min-height: 300px;
        max-height: none;
        width: 100%;
    }

    .trm-detail-panel {
        position: fixed;
        top: 0;
        right: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1000;
        border-radius: 0;
    }

    /* Hide sidebar toggle on mobile — sidebar is always bottom strip */
    .trm-sidebar-toggle {
        display: none !important;
    }

    /* Gallery View: stack filters on top */
    .trm-gallery-view {
        flex-direction: column;
        gap: 0;
    }

    .trm-gallery-filters {
        width: 100%;
        min-width: 100%;
        padding: 12px 0;
        position: static;
        max-height: none;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-start;
    }

    .trm-gallery-filters h3 {
        width: 100%;
        margin-bottom: 8px;
    }

    .trm-gallery-filters .trm-filter-group {
        flex: 1;
        min-width: 140px;
    }

    .trm-gallery-grid {
        --trm-gallery-cols: 2 !important;
        gap: 14px;
        padding: 12px 0;
    }

    /* Modal: full-screen single column */
    .trm-modal {
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .trm-modal[open] {
        animation: none;
    }

    .trm-modal-inner {
        max-height: 100vh;
        height: 100vh;
    }

    .trm-modal-layout {
        flex-direction: column;
        min-height: 100vh;
    }

    .trm-modal-map {
        width: 100%;
        min-width: 100%;
        height: 200px;
        flex-shrink: 0;
    }

    .trm-modal-content {
        width: 100%;
        padding: 20px 16px;
        max-height: none;
        flex: 1;
        overflow-y: auto;
    }

    .trm-modal-title {
        font-size: 20px;
    }

    .trm-modal-meta {
        gap: 6px;
    }

    .trm-meta-stat {
        font-size: 12px;
    }

    .trm-slider-thumbs {
        gap: 3px;
        padding: 4px;
    }

    .trm-slider-thumb {
        width: 44px;
        height: 30px;
    }

    /* Always show slider arrows on touch devices */
    .trm-slider-btn {
        opacity: 1;
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .trm-modal-elevation {
        padding: 12px;
    }

    #trm-modal-elevation-canvas {
        height: 120px;
    }

    .trm-elevation-legend {
        gap: 10px;
    }

    .trm-modal-actions {
        flex-direction: column;
    }

    .trm-btn {
        justify-content: center;
        width: 100%;
    }
}

/* ================================================================
   RESPONSIVE — Small mobile (< 480px)
   ================================================================ */
@media (max-width: 479px) {
    .trm-title {
        font-size: 24px;
    }

    .trm-toggle-btn {
        font-size: 11px;
        padding: 8px 10px;
        gap: 6px;
    }

    .trm-toggle-btn svg {
        width: 14px;
        height: 14px;
    }

    .trm-route-card {
        min-width: 180px;
        max-width: 190px;
    }

    .trm-gallery-card-name {
        font-size: 14px;
    }

    .trm-gallery-grid {
        --trm-gallery-cols: 1 !important;
        gap: 12px;
    }

    .trm-gallery-filters .trm-filter-group {
        min-width: 100%;
    }

    .trm-map-container {
        height: calc(100vh - 180px);
    }
}

/* ================================================================
   SIDEBAR TOGGLE BUTTON (Tablet overlay trigger)
   ================================================================ */
.trm-sidebar-toggle {
    display: none;
    position: absolute;
    top: 60px;
    left: 12px;
    z-index: 15;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 0.15s;
}

.trm-sidebar-toggle:hover {
    background: #fff;
}

.trm-sidebar-toggle.is-active {
    background: #fffc00;
    color: #000;
}

/* Prevent body scroll when modal open on mobile */
body.trm-modal-open,
body.trm-lightbox-open {
    overflow: hidden;
}

/* Prevent horizontal overflow */
.bikepark-trackmap,
.trm-map-view,
.trm-gallery-view {
    overflow-x: hidden;
    max-width: 100%;
}

/* ================================================================
   LIGHTBOX
   ================================================================ */
.trm-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.25s ease;
    cursor: zoom-out;
}

.trm-lightbox.is-visible {
    opacity: 1;
}

.trm-lightbox-content {
    max-width: 92vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.trm-lightbox-content img {
    max-width: 92vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.trm-lightbox-content iframe,
.trm-lightbox-content video {
    width: 80vw;
    height: 45vw;
    max-height: 85vh;
    border: none;
    border-radius: 4px;
    background: #000;
}

.trm-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
    z-index: 10;
    line-height: 1;
}

.trm-lightbox-close:hover {
    opacity: 1;
}

.trm-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s;
    z-index: 10;
}

.trm-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.trm-lightbox-prev { left: 16px; }
.trm-lightbox-next { right: 16px; }

.trm-lightbox-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .trm-lightbox-nav {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    .trm-lightbox-prev { left: 8px; }
    .trm-lightbox-next { right: 8px; }
    .trm-lightbox-content iframe,
    .trm-lightbox-content video {
        width: 95vw;
        height: 53vw;
    }
}

/* ================================================================
   PERFORMANCE — GPU acceleration & layout stability
   ================================================================ */

/* GPU-accelerated transforms for animated panels */
.trm-sidebar,
.trm-detail-panel,
.trm-lightbox-content {
    will-change: transform;
}

/* Layout containment for route cards */
.trm-route-card {
    contain: layout style;
}

/* Fixed aspect ratio for thumbnails — prevents layout shifts */
.trm-card-thumb img {
    aspect-ratio: 80 / 52;
    object-fit: cover;
}

.trm-gallery-card-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Smooth scrolling for mobile sidebar */
.trm-route-list,
.trm-modal-content {
    -webkit-overflow-scrolling: touch;
}

/* ================================================================
   ACCESSIBILITY — WCAG 2.1 AA
   ================================================================ */

/* Screen reader only (visually hidden but accessible) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fieldset reset for semantic filter groups */
.trm-filter-group[is="fieldset"],
fieldset.trm-filter-group {
    border: none;
    padding: 0;
    margin: 0 0 14px;
    min-width: 0;
}

fieldset.trm-filter-group:last-of-type {
    margin-bottom: 8px;
}

fieldset.trm-filter-group legend.sr-only + strong,
fieldset.trm-filter-group legend.sr-only + em {
    display: block;
}

/* Focus styles — visible keyboard focus ring */
.trm-toggle-btn:focus-visible,
.trm-filter-apply:focus-visible,
.trm-filter-header:focus-visible,
.trm-sidebar-toggle:focus-visible,
.trm-detail-close:focus-visible,
.trm-modal-close:focus-visible,
.trm-btn:focus-visible,
.trm-nav-item:focus-visible,
.trm-route-card:focus-visible,
.trm-gallery-card:focus-visible,
.trm-slider-btn:focus-visible,
.trm-lightbox-close:focus-visible,
.trm-lightbox-nav:focus-visible {
    outline: 3px solid #fffc00;
    outline-offset: 2px;
}

.trm-filter-cb:focus-visible {
    outline: 2px solid #fffc00;
    outline-offset: 1px;
}

/* Skip link (optional, for keyboard users) */
.trm-skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0 0 4px 4px;
    transition: top 0.2s;
}

.trm-skip-link:focus {
    top: 0;
}

/* Reduced motion: disable all animations & transitions */
@media (prefers-reduced-motion: reduce) {
    .trm-sidebar,
    .trm-detail-panel,
    .trm-filter-panel,
    .trm-lightbox,
    .trm-modal[open],
    .trm-modal-inner,
    .trm-skeleton,
    .trm-img-loading::before {
        animation: none !important;
        transition: none !important;
    }

    .trm-sidebar,
    .trm-detail-panel,
    .trm-lightbox-content {
        will-change: auto;
    }

    .trm-route-card,
    .trm-gallery-card,
    .trm-toggle-btn,
    .trm-filter-apply,
    .trm-btn,
    .trm-nav-item,
    .trm-slider-btn,
    .trm-lightbox-nav,
    .trm-sidebar-toggle {
        transition: none !important;
    }
}

/* ================================================================
   SKELETON LOADING
   ================================================================ */
@keyframes trm-skeleton-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.trm-skeleton {
    padding: 4px 0;
}

.trm-skeleton-img {
    width: 100%;
    height: 120px;
    background: linear-gradient(110deg, #e8e8e8 30%, #f5f5f5 50%, #e8e8e8 70%);
    background-size: 200% 100%;
    border-radius: 6px;
    margin-bottom: 12px;
    animation: trm-skeleton-pulse 1.4s ease-in-out infinite;
}

.trm-skeleton-line {
    height: 12px;
    background: linear-gradient(110deg, #e8e8e8 30%, #f5f5f5 50%, #e8e8e8 70%);
    background-size: 200% 100%;
    border-radius: 4px;
    margin-bottom: 8px;
    animation: trm-skeleton-pulse 1.4s ease-in-out infinite;
}

.trm-skeleton-line:nth-child(2) { animation-delay: 0.1s; }
.trm-skeleton-line:nth-child(3) { animation-delay: 0.2s; }
.trm-skeleton-line:nth-child(4) { animation-delay: 0.3s; }
.trm-skeleton-line:nth-child(5) { animation-delay: 0.4s; }
.trm-skeleton-line:nth-child(6) { animation-delay: 0.5s; }

/* Modal skeleton overlay */
.trm-modal-skeleton-overlay {
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: 5;
    padding: 28px;
    transition: opacity 0.2s ease-out;
}

/* =============================================================
   ERGÄNZTE KLASSEN – fehlende Definitionen (ergänzt 2026-04)
   ============================================================= */

/* --- Route-Card: Thumb-Wrap (oberer Bereich mit Name, Status, Bild) --- */
.trm-cart-thumb-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    width: 90px;
    min-width: 90px;
}

.trm-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* --- Schwierigkeitsgrad: Farb-Dot-Wrapper --- */
.trm-badge-diff-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trm-badge-diff-color > span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- Tag-Badge --- */
.trm-badge-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    background: #f0f0f0;
    color: #555;
    white-space: nowrap;
    border: 1px solid #e8e8e8;
}

/* --- Stat Icon-Wrapper (Dauer, Länge, Höhe) --- */
.trm-stat-duration,
.trm-stat-length,
.trm-stat-elevation {
    display: inline-flex;
    align-items: center;
    opacity: 0.65;
    font-size: 11px;
}

/* --- Beschreibungen im Detail-Panel / Modal --- */
.trm-short-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    font-weight: 500;
    margin-bottom: 10px;
}

.trm-long-desc {
    font-size: 14px;
    line-height: 1.65;
    color: #555;
    margin-bottom: 16px;
}

.trm-long-desc p {
    margin: 0 0 8px;
}

.trm-long-desc ul,
.trm-long-desc ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.trm-long-desc li {
    margin-bottom: 4px;
}

.trm-long-desc b,
.trm-long-desc strong {
    font-weight: 700;
    color: #333;
}

/* --- Galerie-Karte: Trenner --- */
.trm-gallery-card-desc-sep {
    display: block;
    height: 1px;
    background: #e8e8e8;
    margin: 8px 0;
}

/* --- Detail-Beschreibungsbereich --- */
.trm-detail-description {
    font-size: 14px;
    line-height: 1.65;
    color: #444;
    margin-bottom: 16px;
}

.trm-detail-description p {
    margin: 0 0 8px;
}

.trm-detail-description ul,
.trm-detail-description ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.trm-detail-description li {
    margin-bottom: 4px;
}

.trm-detail-description b,
.trm-detail-description strong {
    font-weight: 700;
}

/* --- Galerie-Karte: Title-Wrap --- */
.trm-card-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

/* --- Color Bullet in Gallery Cards --- */
.color-bullet {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 4px;
    vertical-align: middle;
}

/* =====================================================================
   TRACKMAPS PLUGIN — SCOPED REDESIGN (v1.8.0)
   All rules below are namespaced under .trackmaps-plugin so they never
   leak into the shop template (header, footer, nav, hero, etc.).
   Overrides earlier declarations via specificity, not !important.
   ===================================================================== */

.trackmaps-plugin {
    /* === CORE BRAND (v1.10.0 design-tokens update) === */
    --tm-yellow:          #FFE600; /* was #FFD500 — brand refresh */
    --tm-dark:            #111111;
    --tm-black:           #000000; /* kept for backward compat with older rules */
    --tm-white:           #FFFFFF;
    --tm-surface-soft:    #F7F7F7;
    --tm-scrim:           rgba(17,17,17,0.04);

    /* === TEXT === */
    --tm-text-primary:    #1A1A1A;
    --tm-text-secondary:  #5A5A5A;
    --tm-text-tertiary:   #8A8A8A;
    --tm-border-subtle:   #E5E5E5;
    --tm-grey-badge:      #EEEEEE;

    /* === DIFFICULTY DOTS (sidebar UI only — polyline colors stay from MAP_CONFIG) === */
    --tm-diff-very-easy:  #4CAF50;
    --tm-diff-easy:       #2196F3;
    --tm-diff-medium:     #FF8A1E;
    --tm-diff-hard:       #E53935;
    --tm-diff-extreme:    #111111;

    /* === STATUS BADGES === */
    --tm-status-open-bg:      #E8F5E9;
    --tm-status-open-text:    #2E7D32;
    --tm-status-partial-bg:   #FFF4E5;
    --tm-status-partial-text: #B26A00;
    --tm-status-closed-bg:    #FDECEA;
    --tm-status-closed-text:  #C62828;

    /* === SPECIAL LAYERS === */
    --tm-orange:          #F08A1C; /* kept — existing POI-marker color */
    --tm-chairlift-color: #7A4BFF;
    --tm-red-hard:        #E53935;
    --tm-green-easy:      #4CAF50;

    /* === SCROLLBAR / LEGACY BORDER (backward compat) === */
    --tm-grey-border:        #E5E5E5;
    --tm-grey-scroll-thumb:  #BDBDBD;
    --tm-grey-scroll-track:  #EFEFEF;

    /* === RADII === */
    --tm-radius-panel: 8px;
    --tm-radius-pill:  4px;
    --tm-radius-image: 4px;

    /* === SHADOWS === */
    --tm-shadow:          0 8px 24px rgba(0,0,0,0.10); /* was 0 4px 20px rgba(0,0,0,0.08) — design-spec panel */
    --tm-shadow-panel:    0 8px 24px rgba(0,0,0,0.10);
    --tm-shadow-hover:    0 4px 12px rgba(0,0,0,0.08);
    --tm-shadow-toggle:   0 2px  6px rgba(0,0,0,0.06);
    --tm-poi-shadow:      0 2px  4px rgba(0,0,0,0.25);

    /* === SPACING === */
    --tm-gap-section: 24px;
    --tm-gap-cell:    12px;
    --tm-pad-panel:   20px;
    --tm-pad-cell:    10px;

    /* === BASEMAP DESATURATION (0..1) — set via JS from admin option
       tm_basemap_desaturation. 0 = original tiles, 1 = max desat.
       Default v1.10.27: 0.9 (deutlich entsättigt) weil die OpenFreeMap-
       Liberty-Tiles von Haus aus sehr kräftig grün/gelb sind und die
       Strecken darauf untergehen. Admin-Setting überschreibt. === */
    --tm-desat: 0.9;

    width: 100%;
    box-sizing: border-box;
}

/* Basemap-Dämpfung: die OpenFreeMap-Liberty-Tiles sind von Haus aus
   sehr kräftig grün/gelb, sodass die Strecken- und POI-Overlays
   optisch untergehen. Wir wenden jetzt einen festen, starken Filter
   auf das MapLibre-Canvas an (saturate 0.4 / brightness 1.08 /
   contrast 0.95 — entspricht der v5-Design-Referenz).

   Da MapLibre alles auf ein Canvas rendert, werden Strecken-Linien
   und POI-Symbol-Layer mit beruhigt. Das ist akzeptabel weil:
     - Streckenlinien in bikepark-konvention-Farben bleiben klar
       lesbar (Rot/Orange/Grün/Blau unterscheiden sich weiterhin
       deutlich).
     - POI-Marker haben einen weißen Kreis als Kontrast-Polster
       baked in, der vom Filter nicht beeinträchtigt wird.

   Die Admin-Option tm_basemap_desaturation wird via --tm-desat
   weiterhin gesetzt, steuert aber jetzt nur noch den zusätzlichen
   Feinabgleich (multiplikativ auf saturate). */
/* Seit Punkt 4 (v1.10.32): Basemap-Entsättigung wird per MapLibre
   Paint-Properties auf Layer-Ebene gemacht (trmApplyBasemapDesaturation
   in trackmaps.js) — so bleiben Strecken-Linien, POI-Symbole und
   Chairlift-Linien farblich ungetrübt. Der alte Canvas-CSS-Filter
   wird daher nicht mehr genutzt. */
.trackmaps-plugin .maplibregl-canvas,
.trackmaps-plugin .maplibregl-canvas-container > canvas {
    filter: none;
}

.trackmaps-plugin * { box-sizing: border-box; }

/* ── TOP-BAR ────────────────────────────────────────── */
.trackmaps-plugin .trm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: transparent;
    padding: 0;
    margin: 0 0 24px 0;
    border: 0;
    box-shadow: none;
    flex-wrap: wrap;
}

.trackmaps-plugin .trm-title-badge {
    background: var(--tm-grey-badge);
    color: var(--tm-black);
    padding: 14px 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 20px;
    border-radius: 2px;
    display: inline-block;
    line-height: 1;
}

.trackmaps-plugin .trm-view-toggle {
    display: flex;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.trackmaps-plugin .trm-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
    height: 64px;
    padding: 10px 16px;
    border: 2px solid var(--tm-black);
    background: var(--tm-white);
    color: var(--tm-black);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s, color 0.15s;
}

.trackmaps-plugin .trm-toggle-btn svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.trackmaps-plugin .trm-toggle-btn.active {
    background: var(--tm-yellow);
    color: var(--tm-black);
}

.trackmaps-plugin .trm-toggle-btn:focus-visible {
    outline: 3px solid var(--tm-yellow);
    outline-offset: 2px;
}

.trackmaps-plugin .trm-toggle-btn span {
    display: block;
    text-align: left;
}

/* ── MAP STAGE ───────────────────────────────────────── */
.trackmaps-plugin .trm-map-view {
    position: relative;
    width: 100%;
    min-height: 80vh;
    height: 880px;
    background: transparent;
    border-radius: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.trackmaps-plugin .trm-map-container {
    position: absolute;
    inset: 0;
    border-radius: 0 !important;
    overflow: hidden;
}

/* ── SCHWEBENDES LINKES PANEL ────────────────────────── */
.trackmaps-plugin .trm-sidebar {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 330px;
    max-height: calc(100% - 48px);
    background: var(--tm-white);
    box-shadow: var(--tm-shadow);
    border-radius: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    z-index: 5;
    overflow: hidden;
}

/* Filter header (yellow bar) */
.trackmaps-plugin .trm-filter-wrapper { background: var(--tm-white); }

.trackmaps-plugin .trm-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 16px 20px;
    background: var(--tm-yellow);
    color: var(--tm-black);
    border: 0;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 0;
}

.trackmaps-plugin .trm-filter-chevron {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--tm-black);
    transition: transform 0.2s;
}

.trackmaps-plugin .trm-filter-header.is-open .trm-filter-chevron {
    transform: rotate(180deg);
}

/* Filter flyout (yellow) */
.trackmaps-plugin .trm-filter-panel {
    background: var(--tm-yellow);
    padding: 20px 24px;
    max-height: calc(80vh - 56px);
    overflow-y: auto;
    border-radius: 0;
    box-shadow: none;
}

.trackmaps-plugin .trm-filter-group {
    border: 0;
    margin: 0 0 18px 0;
    padding: 0;
}

.trackmaps-plugin .trm-filter-group strong,
.trackmaps-plugin .trm-filter-group em {
    display: block;
    font-weight: 800;
    font-size: 13px;
    text-transform: none;
    color: var(--tm-black);
    margin-bottom: 8px;
    letter-spacing: 0.2px;
}

.trackmaps-plugin .trm-filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    cursor: pointer;
    color: var(--tm-black);
}

.trackmaps-plugin .trm-filter-cb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--tm-black);
    background: var(--tm-white);
    border-radius: 0;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    margin: 0;
}

.trackmaps-plugin .trm-filter-cb:checked {
    background: var(--tm-black);
}

.trackmaps-plugin .trm-filter-cb:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: -1px;
    width: 6px;
    height: 11px;
    border-right: 2px solid var(--tm-white);
    border-bottom: 2px solid var(--tm-white);
    transform: rotate(45deg);
}

.trackmaps-plugin .trm-filter-apply {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 12px;
    background: var(--tm-black);
    color: var(--tm-white);
    border: 0;
    border-radius: 0;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.trackmaps-plugin .trm-filter-apply:hover {
    background: #222;
}

/* Route list */
.trackmaps-plugin .trm-route-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0;
}

/* POI list */
.trackmaps-plugin .trm-poi-list-section { border-top: 1px solid var(--tm-grey-border); }
.trackmaps-plugin .trm-poi-list-heading {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tm-black);
    padding: 14px 16px;
    margin: 0;
}
.trackmaps-plugin .trm-poi-list { padding: 0 0 8px 0; }
.trackmaps-plugin .trm-poi-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--tm-grey-border);
    transition: background 0.1s;
}
.trackmaps-plugin .trm-poi-list-item:hover { background: #fafafa; }
.trackmaps-plugin .trm-poi-list-badge {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--tm-orange);
    display: flex;
    align-items: center;
    justify-content: center;
}
.trackmaps-plugin .trm-poi-list-text { display: flex; flex-direction: column; line-height: 1.3; }
.trackmaps-plugin .trm-poi-list-text strong { font-size: 14px; color: var(--tm-black); }
.trackmaps-plugin .trm-poi-list-cat { font-size: 12px; color: #888; }

/* ── SCHWEBENDES RECHTES DETAIL-PANEL ───────────────── */
.trackmaps-plugin .trm-detail-panel {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 380px;
    max-height: calc(100% - 48px);
    background: var(--tm-white);
    box-shadow: var(--tm-shadow);
    border-radius: 0;
    border: 0;
    overflow-y: auto;
    z-index: 5;
    transform: translateX(20px);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}

.trackmaps-plugin .trm-detail-panel.is-visible {
    transform: translateX(0);
    opacity: 1;
}

/* ── POI-MARKER AUF DER KARTE ───────────────────────── */
.trackmaps-plugin .trm-poi-marker,
.trm-poi-marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tm-orange, #F08A1C);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: transform 0.15s;
    border: 0;
}

.trackmaps-plugin .trm-poi-marker:hover,
.trm-poi-marker:hover { transform: scale(1.15); }

/* Kill legacy white halo from old .poi-icon styling */
.trackmaps-plugin .poi-icon,
.trackmaps-plugin .poi-marker-wrapper,
.trackmaps-plugin .poi-icon-img { display: none !important; }

/* ── CUSTOM SCROLLBARS ──────────────────────────────── */
.trackmaps-plugin .trm-sidebar,
.trackmaps-plugin .trm-detail-panel,
.trackmaps-plugin .trm-filter-panel,
.trackmaps-plugin .trm-route-list {
    scrollbar-width: thin;
    scrollbar-color: var(--tm-grey-scroll-thumb) var(--tm-grey-scroll-track);
}

.trackmaps-plugin .trm-sidebar::-webkit-scrollbar,
.trackmaps-plugin .trm-detail-panel::-webkit-scrollbar,
.trackmaps-plugin .trm-filter-panel::-webkit-scrollbar,
.trackmaps-plugin .trm-route-list::-webkit-scrollbar { width: 8px; }

.trackmaps-plugin .trm-sidebar::-webkit-scrollbar-track,
.trackmaps-plugin .trm-detail-panel::-webkit-scrollbar-track,
.trackmaps-plugin .trm-filter-panel::-webkit-scrollbar-track,
.trackmaps-plugin .trm-route-list::-webkit-scrollbar-track { background: var(--tm-grey-scroll-track); }

.trackmaps-plugin .trm-sidebar::-webkit-scrollbar-thumb,
.trackmaps-plugin .trm-detail-panel::-webkit-scrollbar-thumb,
.trackmaps-plugin .trm-filter-panel::-webkit-scrollbar-thumb,
.trackmaps-plugin .trm-route-list::-webkit-scrollbar-thumb {
    background: var(--tm-grey-scroll-thumb);
    border-radius: 0;
}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1023px) {
    .trackmaps-plugin .trm-map-view { height: auto; min-height: 700px; }
    .trackmaps-plugin .trm-sidebar {
        top: 0;
        left: 0;
        bottom: 0;
        width: 320px;
        max-height: none;
        transform: translateX(-100%);
        transition: transform 0.25s;
    }
    .trackmaps-plugin .trm-sidebar.is-open { transform: translateX(0); }
    .trackmaps-plugin .trm-detail-panel {
        width: 90%;
        max-width: 380px;
    }
}

@media (max-width: 767px) {
    .trackmaps-plugin .trm-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .trackmaps-plugin .trm-view-toggle { width: 100%; }
    .trackmaps-plugin .trm-toggle-btn { flex: 1; min-width: 0; height: 56px; }
    .trackmaps-plugin .trm-map-view { min-height: 600px; }

    .trackmaps-plugin .trm-sidebar {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 60vh;
        transform: translateY(100%);
    }
    .trackmaps-plugin .trm-sidebar.is-open { transform: translateY(0); }

    .trackmaps-plugin .trm-detail-panel {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-height: 75vh;
        max-width: none;
    }
}

/* POI filter-row: small orange icon badge before the label */
.trackmaps-plugin .trm-filter-poi-item { gap: 8px; }
.trackmaps-plugin .trm-poi-filter-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: var(--tm-orange);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.trackmaps-plugin .trm-poi-filter-icon svg {
    width: 14px;
    height: 14px;
}

/* ── ROUTE CARD (redesign, scoped) ────────────────── */
.trackmaps-plugin .trm-route-card {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 10px;
    border-bottom: 1px solid var(--tm-grey-border);
    cursor: pointer;
    transition: background 0.12s;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    min-height: 120px;
}
.trackmaps-plugin .trm-route-card:hover {
    background: #fafafa;
}
.trackmaps-plugin .trm-route-card.active {
    background: #fff9d6;
    box-shadow: inset 3px 0 0 var(--tm-yellow);
}

.trackmaps-plugin .trm-cart-thumb-wrap {
    width: 100px;
    flex-shrink: 0;
}

.trackmaps-plugin .trm-card-thumb {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 0;
    overflow: hidden;
    background: #222;
    flex-shrink: 0;
}
.trackmaps-plugin .trm-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trackmaps-plugin .trm-card-thumb-empty {
    background: #222
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2' ry='2'/><circle cx='8.5' cy='8.5' r='1.5'/><polyline points='21 15 16 10 5 21'/></svg>") center/36px 36px no-repeat;
}

/* Status icon on thumbnail (top-right, 24x24, square) */
.trackmaps-plugin .trm-thumb-status-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    border-radius: 0;
    line-height: 1;
    z-index: 2;
}
.trackmaps-plugin .trm-thumb-status-icon.trm-status-open { background: #1fa957; }
.trackmaps-plugin .trm-thumb-status-icon.trm-status-partially_open { background: #e8a020; }
.trackmaps-plugin .trm-thumb-status-icon.trm-status-closed { background: var(--tm-red-hard); }

/* Route name as white overlay centered on thumbnail, multi-line, no truncation */
.trackmaps-plugin .trm-thumb-name {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.3);
    letter-spacing: 0.3px;
    white-space: normal;        /* multi-line allowed */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;      /* max 3 lines before clipping */
    -webkit-box-orient: vertical;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
}

/* Kill the legacy .trm-card-name (above thumb) — name is now an overlay */
.trackmaps-plugin .trm-route-card .trm-card-name { display: none; }

/* Kill the text-only "GESCHLOSSEN" badge under the thumb */
.trackmaps-plugin .trm-route-card > .trm-cart-thumb-wrap > .trm-badge-status,
.trackmaps-plugin .trm-route-card > .trm-badge-status { display: none !important; }

/* Card body: stats stack vertically (Zeile 1..4) */
.trackmaps-plugin .trm-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.trackmaps-plugin .trm-card-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    font-size: 13px;
    color: #333;
}
.trackmaps-plugin .trm-card-stats .trm-stat,
.trackmaps-plugin .trm-card-stats .trm-badge-diff {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}
.trackmaps-plugin .trm-badge-diff {
    background: transparent !important;
    color: #111 !important;
    padding: 0 !important;
    font-weight: 700;
    font-size: 13px;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.trackmaps-plugin .trm-badge-diff-color {
    width: 10px;
    height: 10px;
    display: inline-block;
    flex-shrink: 0;
}
.trackmaps-plugin .trm-badge-diff-color > span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Tag pills: max 2 visible rows via wrap + max-height clip */
.trackmaps-plugin .trm-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 42px;
    overflow: hidden;
    margin-top: 4px;
}
.trackmaps-plugin .trm-badge-tag {
    font-size: 10px;
    padding: 2px 6px;
    background: #efefef;
    color: #555;
    border-radius: 0;
    white-space: nowrap;
}

/* ── DETAIL PANEL: peaks + actions (scoped) ─────────── */
.trackmaps-plugin .trm-detail-peaks {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
}
.trackmaps-plugin .trm-peak-high { color: #dc2626; }
.trackmaps-plugin .trm-peak-low  { color: #3B9FE8; }

.trackmaps-plugin .trm-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.trackmaps-plugin .trm-detail-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--tm-white);
    color: var(--tm-black);
    border: 2px solid var(--tm-black);
    border-radius: 0;
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.trackmaps-plugin .trm-detail-action:hover {
    background: var(--tm-black);
    color: var(--tm-white);
}
.trackmaps-plugin .trm-detail-action-primary {
    background: var(--tm-yellow);
    border-color: var(--tm-black);
}
.trackmaps-plugin .trm-detail-action-primary:hover {
    background: var(--tm-black);
    color: var(--tm-yellow);
}
.trackmaps-plugin .trm-detail-action.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.trackmaps-plugin .trm-detail-panel .trm-detail-links {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    justify-content: center;
    font-size: 12px;
}
.trackmaps-plugin .trm-detail-panel .trm-detail-links .trm-detail-link {
    color: #777;
    text-decoration: underline;
}

/* ── POI DETAIL-PANEL VARIANT (scoped) ────────────── */
.trackmaps-plugin .trm-poi-detail {
    padding: 20px;
}
.trackmaps-plugin .trm-poi-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.trackmaps-plugin .trm-poi-detail-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tm-orange);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.trackmaps-plugin .trm-poi-detail-badge svg {
    width: 20px;
    height: 20px;
}
.trackmaps-plugin .trm-poi-detail-title {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.trackmaps-plugin .trm-poi-detail-title strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--tm-black);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.trackmaps-plugin .trm-poi-detail-cat {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
.trackmaps-plugin .trm-poi-detail-img {
    margin: 0 0 14px;
}
.trackmaps-plugin .trm-poi-detail-img img {
    max-width: 100%;
    display: block;
}
.trackmaps-plugin .trm-poi-detail-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 16px;
}

/* ─────────────────────────────────────────────────────
   INTERACTION SAFETY (scoped, v1.8.3)
   - Map container must receive wheel/pinch/click events itself;
     overlay panels stop bubbling within themselves (so clicks inside
     sidebar/filter/detail don't pan the map), but outside the panel
     area the map stays fully interactive.
   - Detail-panel arrows and close button need pointer-events:auto and
     a z-index above the panel image so clicks always land on them.
   ───────────────────────────────────────────────────── */
.trackmaps-plugin .trm-map-container {
    pointer-events: auto;
}

.trackmaps-plugin .trm-sidebar,
.trackmaps-plugin .trm-detail-panel {
    pointer-events: auto;
}

.trackmaps-plugin .trm-detail-arrow,
.trackmaps-plugin .trm-detail-close {
    pointer-events: auto !important;
    z-index: 10;
}

/* The close button was positioned absolute on the panel; ensure it
   stays above the scroll content and is always clickable. */
.trackmaps-plugin .trm-detail-close {
    position: absolute;
    top: 8px;
    right: 10px;
}

/* ── AGGREGATED STARTPOINT MARKER (scoped) ────────── */
.trm-startpoint-aggregate {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* pill + dot purely decorative */
    cursor: default;
    user-select: none;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
}
.trm-startpoint-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tm-orange, #F08A1C);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
}
.trm-startpoint-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}
.trm-startpoint-pill {
    background: #fff;
    padding: 5px 10px 4px;
    text-align: center;
    min-width: 82px;
    line-height: 1.15;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.trm-startpoint-pill-top {
    font-size: 11px;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.trm-startpoint-pill-bottom {
    font-size: 11px;
    color: #777;
    margin-top: 1px;
}

/* ── ELEVATION POI ROW (scoped) ──────────────────── */
.trackmaps-plugin .trm-elev-chart-wrap {
    position: relative;
    padding-top: 24px; /* reserve space for the POI-icon row */
}
.trackmaps-plugin .trm-elev-poi-row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    pointer-events: none;
}
.trackmaps-plugin .trm-elev-poi {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: var(--tm-orange, #F08A1C);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    pointer-events: auto;
    cursor: help;
}
.trackmaps-plugin .trm-elev-poi svg {
    width: 12px;
    height: 12px;
}

/* ── MAP INTERACTION SAFETY (v1.8.7) ─────────────── */
/* Ensure mousewheel + pinch zoom work even if a parent template block sets
   touch-action:none. Scoped. */
.trackmaps-plugin .trm-map-container,
.trackmaps-plugin .trm-map-container canvas,
.trackmaps-plugin .trm-map-container .maplibregl-canvas-container {
    touch-action: pan-x pan-y !important;
    pointer-events: auto !important;
}
/* MapLibre zoom/compass buttons must stay clickable above overlays. */
.trackmaps-plugin .maplibregl-ctrl-top-right,
.trackmaps-plugin .maplibregl-ctrl-bottom-right,
.trackmaps-plugin .maplibregl-ctrl-group {
    pointer-events: auto !important;
    z-index: 6 !important;
}
.trackmaps-plugin .maplibregl-ctrl-group button {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ── ELEVATION EMPTY STATE ──────────────────────── */
.trackmaps-plugin .trm-elev-empty {
    padding: 18px 10px;
    text-align: center;
    font-size: 13px;
    color: #777;
    background: #f7f6f2;
    border: 1px dashed #ddd;
    margin-top: 8px;
}

/* =====================================================================
   D2 COLOR REFRESH (v1.10.0-d2) — scoped overrides using new tokens
   ===================================================================== */

/* Status badges use the pastel palette from the design spec. */
.trackmaps-plugin .trm-badge-status,
.trackmaps-plugin .trm-meta-tag-status {
    border-radius: var(--tm-radius-pill);
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
}
.trackmaps-plugin .trm-badge-status.is-open,
.trackmaps-plugin .trm-badge-status.trm-status-open,
.trackmaps-plugin .trm-meta-tag-status.is-open {
    background: var(--tm-status-open-bg);
    color:      var(--tm-status-open-text);
}
.trackmaps-plugin .trm-badge-status.is-partial,
.trackmaps-plugin .trm-badge-status.trm-status-partially_open,
.trackmaps-plugin .trm-meta-tag-status.is-partial {
    background: var(--tm-status-partial-bg);
    color:      var(--tm-status-partial-text);
}
.trackmaps-plugin .trm-badge-status.is-closed,
.trackmaps-plugin .trm-badge-status.trm-status-closed,
.trackmaps-plugin .trm-meta-tag-status.is-closed {
    background: var(--tm-status-closed-bg);
    color:      var(--tm-status-closed-text);
}

/* Route-status-icon in the sidebar (colored check/warning/cross) — same palette */
.trackmaps-plugin .trm-route-status-icon.is-open    { color: var(--tm-status-open-text); }
.trackmaps-plugin .trm-route-status-icon.is-partial { color: var(--tm-status-partial-text); }
.trackmaps-plugin .trm-route-status-icon.is-closed  { color: var(--tm-status-closed-text); }

/* Thumbnail status indicator (top-right on 100x100 thumb, circular for open,
   square for others). Uses the new pastel text-colors as fill. */
.trackmaps-plugin .trm-thumb-status-icon.trm-status-open {
    background: var(--tm-status-open-text);  /* solid green on badge */
}
.trackmaps-plugin .trm-thumb-status-icon.trm-status-partially_open {
    background: var(--tm-status-partial-text);
}
.trackmaps-plugin .trm-thumb-status-icon.trm-status-closed {
    background: var(--tm-status-closed-text);
}

/* =====================================================================
   D3 TYPOGRAPHY + SPACING + RADII + SHADOWS (v1.10.0-d3)
   Scoped overrides, nur letzter Block gewinnt; keine bestehenden
   Rules geloescht. Konsumiert die in D1 eingefuehrten Tokens.
   ===================================================================== */

/* Header-Area: Top-Bar (STRECKENKARTE + Toggle).
   Spec H1: 20px/24px uppercase weight 700 letter-spacing 1px.
*/
.trackmaps-plugin .trm-header {
    margin-bottom: var(--tm-gap-section);
}
.trackmaps-plugin .trm-title-badge {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: var(--tm-radius-pill);
}

/* Toggle-Pills Karten/Galerie.
   Spec: Höhe 48px, Padding 0 16px, aktiv bg #FFE600, Icon 20px.
*/
.trackmaps-plugin .trm-toggle-btn {
    min-width: auto;
    height: 48px;
    padding: 0 16px;
    gap: 8px;
    border: 1px solid var(--tm-border-subtle);
    border-radius: var(--tm-radius-pill);
    background: var(--tm-white);
    color: var(--tm-text-primary);
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.8px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.trackmaps-plugin .trm-toggle-btn svg {
    width: 20px;
    height: 20px;
}
.trackmaps-plugin .trm-toggle-btn.active {
    background: var(--tm-yellow);
    color: var(--tm-text-primary);
    border-color: var(--tm-yellow);
    box-shadow: var(--tm-shadow-toggle);
}
.trackmaps-plugin .trm-toggle-btn span { text-align: left; white-space: nowrap; }

/* Sidebar panel (Liste + Filter).
   Spec: Radius 8px, Shadow-Panel, Padding 20px (nur Listenbereiche),
   Breite 300px desktop (D5 uebernimmt das, hier nur Radien+Shadow).
*/
.trackmaps-plugin .trm-sidebar {
    border-radius: var(--tm-radius-panel);
    box-shadow: var(--tm-shadow-panel);
    background: var(--tm-white);
}

/* Sidebar Route Card (Kachel).
   Spec: Padding 10px, vertikaler Gap 12px zwischen Kacheln,
   Bilder in Kachel Radius 4px, Hover-Shadow.
   Titel ueber dem Thumbnail: 13px/16px uppercase weight 700 ls .5px.
*/
.trackmaps-plugin .trm-route-card {
    padding: var(--tm-pad-cell);
    gap: 14px;
    margin-bottom: var(--tm-gap-cell);
    border-bottom: 0;  /* gap statt Trennlinie */
    background: var(--tm-white);
    border-radius: var(--tm-radius-panel);
    transition: background 0.12s, box-shadow 0.15s;
}
.trackmaps-plugin .trm-route-card:hover {
    background: var(--tm-surface-soft);
    box-shadow: var(--tm-shadow-hover);
}
.trackmaps-plugin .trm-route-card.active {
    background: var(--tm-white);
    box-shadow:
        inset 0 0 0 2px var(--tm-yellow),
        var(--tm-shadow-hover);
}
.trackmaps-plugin .trm-card-thumb {
    border-radius: var(--tm-radius-image);
}
.trackmaps-plugin .trm-thumb-name {
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.5px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Filter-Header (gelber Balken) + Apply-Button.
   Spec: Header 44px, Apply-Button 44px, Label 13px/16px uppercase ls .8px.
*/
.trackmaps-plugin .trm-filter-wrapper,
.trackmaps-plugin .trm-filter-header {
    border-top-left-radius: var(--tm-radius-panel);
    border-top-right-radius: var(--tm-radius-panel);
}
.trackmaps-plugin .trm-filter-header {
    height: 44px;
    padding: 0 16px;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.8px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--tm-yellow);
    color: var(--tm-text-primary);
}
.trackmaps-plugin .trm-filter-panel {
    padding: 16px 20px;
}
.trackmaps-plugin .trm-filter-group {
    margin: 0 0 12px 0;
}
.trackmaps-plugin .trm-filter-group strong,
.trackmaps-plugin .trm-filter-group em {
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 8px;
}
.trackmaps-plugin .trm-filter-item {
    min-height: 28px;
    gap: 10px;
}
.trackmaps-plugin .trm-filter-cb {
    width: 16px;
    height: 16px;
}
.trackmaps-plugin .trm-filter-cb:checked::after {
    left: 3px;
    top: -1px;
    width: 5px;
    height: 10px;
}
.trackmaps-plugin .trm-filter-text {
    font-size: 13px;
    line-height: 20px;
}
.trackmaps-plugin .trm-filter-apply {
    height: 44px;
    margin-top: 12px;
    border-radius: var(--tm-radius-pill);
    background: var(--tm-dark);
    color: var(--tm-white);
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.8px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Detail panel.
   Spec: Radius 8px, Shadow-Panel, Padding 20px.
   Titel (KYRHILL): 22px/28px uppercase weight 700.
   Kennzahlen-Reihe 13px weight 400, Beschreibung 14px/20px,
   Höhenprofil-Label 12px uppercase weight 700 letter-spacing .5px.
*/
.trackmaps-plugin .trm-detail-panel {
    border-radius: var(--tm-radius-panel);
    box-shadow: var(--tm-shadow-panel);
    padding: 0;
}
.trackmaps-plugin .trm-detail-content {
    padding: var(--tm-pad-panel);
}
.trackmaps-plugin .trm-detail-title,
.trackmaps-plugin h2.trm-detail-title {
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0 0 10px;
    color: var(--tm-text-primary);
}
.trackmaps-plugin .trm-detail-stat-label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--tm-text-tertiary);
}
.trackmaps-plugin .trm-detail-stat-value {
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    color: var(--tm-text-primary);
}
.trackmaps-plugin .trm-detail-description,
.trackmaps-plugin .trm-detail-desc {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--tm-text-secondary);
}
.trackmaps-plugin .trm-detail-elevation h4 {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--tm-text-primary);
    margin: 0 0 8px;
}
.trackmaps-plugin .trm-detail-image {
    border-radius: var(--tm-radius-image);
}
.trackmaps-plugin .trm-detail-thumb {
    border-radius: var(--tm-radius-image);
}
.trackmaps-plugin .trm-detail-arrow {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--tm-text-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    opacity: 1;
    left: 8px;
}
.trackmaps-plugin .trm-detail-arrow-next { left: auto; right: 8px; }

/* Detail-panel Action-buttons — Spec: 44px hoch, Navigieren gelb (primary),
   GPX-Download Outline schwarz. Button-Label 13px uppercase ls .8px.
*/
.trackmaps-plugin .trm-detail-action {
    height: 44px;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0.8px;
    border-radius: var(--tm-radius-pill);
}

/* Global card-surface shadows for scoped panels that weren't yet tokenized. */
.trackmaps-plugin .trm-sidebar,
.trackmaps-plugin .trm-detail-panel {
    box-shadow: var(--tm-shadow-panel);
}

/* =====================================================================
   D4 + D5 SIDEBAR DIMENSIONS + CARD LAYOUT (v1.10.0-d4+d5)
   Spec-Dimensionen: Sidebar 300px desktop / 260px bei 1024px,
   Kachel Hoehe 96px, Thumbnail 80x80, Status-Indikator 20x20
   mit unterschiedlichem Radius je Status (circle=offen, square=closed).
   ===================================================================== */

/* Desktop: Sidebar 300px (war 330px) */
.trackmaps-plugin .trm-sidebar {
    width: 300px;
}

/* 1024–1279px: Sidebar 260px */
@media (min-width: 1024px) and (max-width: 1279px) {
    .trackmaps-plugin .trm-sidebar {
        width: 260px;
    }
}

/* Route-Card kompakter.
   Thumbnail 80x80 statt 100x100. Content-Block daneben wird schmaler,
   aber weiterhin die 4 Stats-Zeilen vertikal (Difficulty, Dauer,
   Laenge, Hoehenmeter). */
.trackmaps-plugin .trm-route-card {
    min-height: 96px;
    padding: 8px var(--tm-pad-cell);
    gap: 12px;
}
.trackmaps-plugin .trm-cart-thumb-wrap {
    width: 80px;
}
.trackmaps-plugin .trm-card-thumb {
    width: 80px;
    height: 80px;
}
.trackmaps-plugin .trm-thumb-name {
    /* Thumbnail ist 80 statt 100 → Text kleiner */
    font-size: 11px;
    line-height: 1.1;
    padding: 4px;
    -webkit-line-clamp: 3;
    letter-spacing: 0.2px;
}

/* Status-Indikator auf Thumbnail: 20x20 statt 24x24.
   Spec: circle (radius 50%) fuer "open", square (radius 4px) fuer
   "closed"/"partial". Farben aus den D1-Tokens. */
.trackmaps-plugin .trm-thumb-status-icon {
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: 700;
    top: 4px;
    right: 4px;
}
.trackmaps-plugin .trm-thumb-status-icon.trm-status-open {
    border-radius: 50%;
    background: var(--tm-status-open-bg);
    color: var(--tm-status-open-text);
}
.trackmaps-plugin .trm-thumb-status-icon.trm-status-closed {
    border-radius: var(--tm-radius-pill);
    background: var(--tm-status-closed-text);   /* satteres Rot als bg */
    color: var(--tm-white);
}
.trackmaps-plugin .trm-thumb-status-icon.trm-status-partially_open {
    border-radius: var(--tm-radius-pill);
    background: var(--tm-status-partial-text);
    color: var(--tm-white);
}

/* Content-Block rechts vom Thumbnail: kompakter, damit die 96px-Hoehe
   eingehalten wird. Stats-Zeilen etwas dichter. */
.trackmaps-plugin .trm-card-body {
    padding-left: 2px;
    gap: 1px;
}
.trackmaps-plugin .trm-card-stats {
    gap: 1px;
    font-size: 12px;
    line-height: 16px;
}
.trackmaps-plugin .trm-card-stats .trm-stat,
.trackmaps-plugin .trm-card-stats .trm-badge-diff {
    font-size: 12px;
    line-height: 16px;
}
.trackmaps-plugin .trm-badge-diff {
    font-size: 12px !important;
}

/* Tag-Pills bei 96px-Kachel ausblenden — Platz reicht nicht.
   Tags werden im Detail-Panel angezeigt. */
.trackmaps-plugin .trm-route-card .trm-card-tags {
    display: none;
}

/* 768–1023px: Sidebar wird Drawer-Overlay. Bereits in Responsive-Block
   weiter oben definiert (D3-Cascade). Hier nur die neue Breite
   sicherstellen, wenn Drawer aufgeklappt. */
@media (max-width: 1023px) {
    .trackmaps-plugin .trm-sidebar {
        width: 300px;
    }
}

/* <768px: Sidebar volle Breite als Bottom-Sheet — kommt in D8. */

/* =====================================================================
   D6 FILTER-PANEL POLISH (v1.10.0-d6)
   Content-Details: Checkbox-Stil, Chevron-Animation, Icon-Badges-Spacing.
   Die groben Dimensionen (Header 44, Apply 44, Font-Größen) sind bereits
   in D3 gesetzt.
   ===================================================================== */

.trackmaps-plugin .trm-filter-chevron {
    transition: transform 0.2s ease;
}

/* Checkbox: 16x16, schwarzer Rand 2px, weiss innen, radius 0 laut Spec
   (Buttons/Pills waeren 4px — Checkboxen sind Spec-konform scharf). */
.trackmaps-plugin .trm-filter-cb {
    border: 2px solid var(--tm-dark);
    background: var(--tm-white);
    border-radius: 0;
}
.trackmaps-plugin .trm-filter-cb:checked {
    background: var(--tm-dark);
}

/* POI-Icon-Badge vor Filter-Item (Spec: kleiner oranger Kreis 22px). */
.trackmaps-plugin .trm-poi-filter-icon {
    box-shadow: var(--tm-poi-shadow);
}

/* =====================================================================
   D7 DETAIL-PANEL (v1.10.0-d7)
   Panel-Breite 360px desktop / 320px bei 1024-1279 / full <768px (D8).
   Close-X 24px, Slider-Arrow weisser Hintergrund, Chart 140px.
   ===================================================================== */

.trackmaps-plugin .trm-detail-panel {
    width: 360px;  /* Spec: 360 desktop */
    max-height: calc(100% - 48px);
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .trackmaps-plugin .trm-detail-panel {
        width: 320px;
    }
}

/* Close-X oben rechts — 24x24, transparent, Hover surface-soft. */
.trackmaps-plugin .trm-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tm-text-primary);
    font-size: 20px;
    line-height: 1;
    border-radius: var(--tm-radius-pill);
    cursor: pointer;
    z-index: 11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
}
.trackmaps-plugin .trm-detail-close:hover {
    background: var(--tm-surface-soft);
}

/* Slider-Arrow: weisse Halbtransparenz 0.9, schwarze Chevrons, rund 32px,
   Shadow, 8px vom Rand. */
.trackmaps-plugin .trm-detail-arrow {
    background: rgba(255, 255, 255, 0.9);
    color: var(--tm-text-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    opacity: 1;
}
.trackmaps-plugin .trm-detail-arrow:hover {
    background: var(--tm-white);
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}
.trackmaps-plugin .trm-detail-arrow-prev { left: 8px; }
.trackmaps-plugin .trm-detail-arrow-next { right: 8px; }

/* Slider index badge (optional, Aufgabe 8). Rechts unten im Gallery-
   Main-Bereich, halbtransparent schwarz, weißer Text. */
.trackmaps-plugin .trm-detail-slider-index {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(17, 17, 17, 0.65);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
    pointer-events: none;
    z-index: 2;
}
.trackmaps-plugin .trm-detail-gallery-main { position: relative; }

/* Bild-Slider: 16:9, Radius 4px. */
.trackmaps-plugin .trm-detail-gallery-main {
    border-radius: var(--tm-radius-image);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--tm-surface-soft);
}
.trackmaps-plugin .trm-detail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Kennzahlen-Reihe: 3 Inline-Items, Icons 16px, Text 13px, Gap 16px. */
.trackmaps-plugin .trm-detail-stats {
    display: flex;
    gap: 16px;
    margin: 16px 0 12px;
    flex-wrap: wrap;
}
.trackmaps-plugin .trm-detail-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Beschreibung: 14/20, max. ~8 Zeilen sichtbar, dann Panel-Scroll. */
.trackmaps-plugin .trm-detail-description,
.trackmaps-plugin .trm-detail-desc {
    max-height: calc(20px * 8);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    margin: 0 0 16px;
}
.trackmaps-plugin .trm-detail-description.is-expanded,
.trackmaps-plugin .trm-detail-desc.is-expanded {
    max-height: none;
    -webkit-line-clamp: unset;
}

/* Höhenprofil: Chart 140px, POI-Icons oberhalb 16px. */
.trackmaps-plugin .trm-detail-elevation {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--tm-border-subtle);
}
.trackmaps-plugin .trm-elev-chart-wrap {
    padding-top: 24px; /* POI-Icon-Reihe */
    height: 164px;     /* 24 icons + 140 chart */
}
.trackmaps-plugin #trm-detail-elevation-canvas {
    height: 140px !important;
}
.trackmaps-plugin .trm-elev-poi {
    width: 16px;
    height: 16px;
}
.trackmaps-plugin .trm-elev-poi svg {
    width: 10px;
    height: 10px;
}

/* Aktionsleiste: 2 Buttons nebeneinander, Navigieren gelb (Primary),
   GPX-Download outline 1px schwarz. */
.trackmaps-plugin .trm-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.trackmaps-plugin .trm-detail-action {
    flex: 1 1 0;
    background: var(--tm-white);
    color: var(--tm-text-primary);
    border: 1px solid var(--tm-dark);
    border-radius: var(--tm-radius-pill);
}
.trackmaps-plugin .trm-detail-action-primary {
    background: var(--tm-yellow);
    color: var(--tm-text-primary);
    border-color: var(--tm-yellow);
}
.trackmaps-plugin .trm-detail-action:hover {
    background: var(--tm-dark);
    color: var(--tm-white);
    border-color: var(--tm-dark);
}
.trackmaps-plugin .trm-detail-action-primary:hover {
    background: var(--tm-dark);
    color: var(--tm-yellow);
}

/* =====================================================================
   D8 RESPONSIVE BREAKPOINTS (v1.10.0-d8)
   Feinschliff der in D4+D5 bereits umgesetzten Breiten:
     ≥1280       Sidebar 300 · Detail 360
     1024–1279   Sidebar 260 · Detail 320
     768–1023    Sidebar-Drawer 300 · Detail-Drawer 360 (full height, right)
     <768        Map 70vh · Sidebar Bottom-Sheet 80% · Detail Fullscreen
                 Filter-Panel als Fullscreen-Overlay mit Sticky Header + Apply
   ===================================================================== */

/* --- 768–1023px: Tablet-Drawers (left Sidebar + right Detail) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    .trackmaps-plugin .trm-map-view {
        height: auto;
        min-height: 760px;
    }
    .trackmaps-plugin .trm-sidebar {
        top: 0;
        left: 0;
        bottom: 0;
        width: 300px;
        max-height: none;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        border-radius: 0;
        z-index: 15;
    }
    .trackmaps-plugin .trm-sidebar.is-open { transform: translateX(0); }

    .trackmaps-plugin .trm-sidebar-toggle {
        display: inline-flex;
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 6;
    }

    .trackmaps-plugin .trm-detail-panel {
        top: 0;
        right: 0;
        bottom: 0;
        width: 360px !important;
        max-height: none;
        max-width: none;
        border-radius: 0;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 15;
    }
    .trackmaps-plugin .trm-detail-panel.is-visible {
        transform: translateX(0);
    }
}

/* --- <768px: Mobile — Karte 70vh, Bottom-Sheets, Fullscreen-Filter --- */
@media (max-width: 767px) {
    .trackmaps-plugin .trm-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 12px;
    }
    .trackmaps-plugin .trm-view-toggle { width: 100%; }
    .trackmaps-plugin .trm-toggle-btn {
        flex: 1;
        min-width: 0;
        height: 40px;              /* Spec */
        padding: 0 12px;
        font-size: 12px;
        line-height: 14px;
        letter-spacing: 0.6px;
    }
    .trackmaps-plugin .trm-toggle-btn svg {
        width: 18px;
        height: 18px;
    }

    .trackmaps-plugin .trm-map-view {
        height: 70vh;
        min-height: 520px;
    }
    .trackmaps-plugin .trm-map-container {
        border-radius: 0 !important;
    }

    /* Sidebar als Bottom-Sheet (80% Höhe, Slide-up) */
    .trackmaps-plugin .trm-sidebar {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 80vh;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.25s ease;
        z-index: 20;
    }
    .trackmaps-plugin .trm-sidebar.is-open { transform: translateY(0); }

    /* Detail-Panel: vollflächiger Bottom-Sheet / Fullscreen */
    .trackmaps-plugin .trm-detail-panel {
        top: 0 !important;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100% !important;
        max-height: none;
        max-width: none;
        border-radius: 0;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        z-index: 25;
        padding: 0;
    }
    .trackmaps-plugin .trm-detail-panel.is-visible {
        transform: translateY(0);
    }

    /* Filter-Panel als Fullscreen-Overlay mit Sticky Header + Sticky Apply */
    .trackmaps-plugin .trm-filter-panel {
        position: fixed;
        inset: 0;
        width: 100%;
        max-height: none;
        padding: 0;
        z-index: 30;
        overflow-y: auto;
        background: var(--tm-yellow);
        border-radius: 0;
    }
    /* Sticky Header ist der bestehende .trm-filter-header — hochgezogen ans top */
    .trackmaps-plugin .trm-filter-panel > .trm-filter-group:first-of-type {
        margin-top: 60px; /* Platz für sticky header */
    }
    .trackmaps-plugin .trm-filter-wrapper .trm-filter-header {
        position: sticky;
        top: 0;
        z-index: 2;
        box-shadow: 0 1px 0 rgba(0,0,0,0.08);
    }
    .trackmaps-plugin .trm-filter-apply {
        position: sticky;
        bottom: 0;
        margin-top: 16px;
        z-index: 2;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    }
    .trackmaps-plugin .trm-filter-group {
        padding: 0 20px;
    }
    .trackmaps-plugin .trm-filter-group:first-of-type { padding-top: 16px; }

    /* Mobile: Sidebar-Toggle immer sichtbar, oben links über der Karte */
    .trackmaps-plugin .trm-sidebar-toggle {
        display: inline-flex;
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 6;
    }
}

/* Touch-Targets: min 44x44 überall (scoped) */
.trackmaps-plugin .trm-toggle-btn,
.trackmaps-plugin .trm-filter-apply,
.trackmaps-plugin .trm-detail-action,
.trackmaps-plugin .trm-detail-close,
.trackmaps-plugin .trm-detail-arrow,
.trackmaps-plugin .trm-sidebar-toggle {
    touch-action: manipulation;
}

/* =====================================================================
   D9 WCAG 2.1 AA (v1.10.0-d9)
   Focus-visible-Ringe auf ALLEN interaktiven Elementen im Plugin-Scope.
   Spec: 2px solid #111 outline-offset 2px. Niemals outline:none ohne
   gleichwertigen Ersatz.
   ===================================================================== */

.trackmaps-plugin button,
.trackmaps-plugin a,
.trackmaps-plugin [role="button"],
.trackmaps-plugin input,
.trackmaps-plugin select,
.trackmaps-plugin textarea,
.trackmaps-plugin .trm-route-card,
.trackmaps-plugin .trm-poi-list-item {
    outline: none;
}
.trackmaps-plugin button:focus-visible,
.trackmaps-plugin a:focus-visible,
.trackmaps-plugin [role="button"]:focus-visible,
.trackmaps-plugin input:focus-visible,
.trackmaps-plugin select:focus-visible,
.trackmaps-plugin textarea:focus-visible,
.trackmaps-plugin .trm-route-card:focus-visible,
.trackmaps-plugin .trm-poi-list-item:focus-visible,
.trackmaps-plugin .trm-filter-cb:focus-visible,
.trackmaps-plugin .trm-detail-close:focus-visible,
.trackmaps-plugin .trm-detail-arrow:focus-visible,
.trackmaps-plugin .trm-toggle-btn:focus-visible,
.trackmaps-plugin .trm-filter-header:focus-visible,
.trackmaps-plugin .trm-filter-apply:focus-visible,
.trackmaps-plugin .trm-detail-action:focus-visible {
    outline: 2px solid var(--tm-dark);
    outline-offset: 2px;
    /* Radius-bewusster Fokus-Ring (Button-Pills 4px, Panels 8px) */
    border-radius: inherit;
}

/* MapLibre-canvas bekommt einen subtileren Ring innerhalb der Panel-Kante */
.trackmaps-plugin .maplibregl-canvas:focus-visible {
    outline: 3px solid var(--tm-yellow);
    outline-offset: -3px;
}

/* Sidebar-Kachel: stärkerer Ring da die Kachel selber kein Button-Look hat */
.trackmaps-plugin .trm-route-card:focus-visible {
    outline: 2px solid var(--tm-dark);
    outline-offset: -2px;
}

/* Visual "active" marker per aria-pressed (Sidebar-Kacheln).
   Identisch zum .active-State aus D3. */
.trackmaps-plugin .trm-route-card[aria-pressed="true"] {
    box-shadow:
        inset 0 0 0 2px var(--tm-yellow),
        var(--tm-shadow-hover);
    background: var(--tm-white);
}

/* =====================================================================
   D10 PREFERS-REDUCED-MOTION (v1.10.0-d10)
   Respektiert System-Einstellung "Bewegung reduzieren" vollstaendig.
   JS-seitig bekommt scheduleFit/flyTo/animateInitialDraw duration:0
   (siehe trackmaps.js __tmReducedMotion). CSS unterdrueckt alle
   Slide-/Fade-/Pulse-/Stroke-Transitions im Plugin-Scope.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .trackmaps-plugin,
    .trackmaps-plugin *,
    .trackmaps-plugin *::before,
    .trackmaps-plugin *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Panels erscheinen ohne Slide, stattdessen direkt sichtbar */
    .trackmaps-plugin .trm-detail-panel {
        transform: none !important;
    }
    .trackmaps-plugin .trm-sidebar {
        transition: none !important;
    }

    /* Optional pulse-animation auf dem Startpunkt-Marker abschalten */
    .trackmaps-plugin .trm-startpoint-aggregate,
    .trm-startpoint-aggregate,
    .route-start-marker {
        animation: none !important;
    }
}

/* =====================================================================
   E3: HIDE "Bodenbeschaffenheit" + "Uplift" FILTER GROUPS (v1.10.1-e3)
   Spec v5: beide Gruppen entfallen aus der UI. Checkboxen bleiben im
   DOM (alle default-checked) → JS-Filter-Logik wertet sie nach wie vor
   aus, trifft aber keinen einzigen Track vom Constraint (alle surfaces
   und beide uplift-Zustaende sind aktiv).
   ===================================================================== */
.trackmaps-plugin .trm-filter-group-hidden,
.trackmaps-plugin .trm-gallery-filters .trm-filter-group-hidden {
    display: none !important;
}

/* =====================================================================
   E4: APPLY-BUTTON AUF GELB (v1.10.1-e4)
   Ueberschreibt v1.10.0-d3 (dark). Spec v5: Button gelb, volle Breite.
   Hover invertiert zu dark fuer klaren Interaktions-Feedback.
   ===================================================================== */
.trackmaps-plugin .trm-filter-apply {
    background: var(--tm-yellow);
    color: var(--tm-text-primary);
    border: 2px solid var(--tm-dark);
    width: 100%;
    box-shadow: var(--tm-shadow-toggle);
}
.trackmaps-plugin .trm-filter-apply:hover {
    background: var(--tm-dark);
    color: var(--tm-yellow);
    border-color: var(--tm-dark);
}
.trackmaps-plugin .trm-filter-apply:active {
    transform: translateY(1px);
}

/* =====================================================================
   E5: DETAIL-PANEL ACTIONS AS TEXTLINKS (v1.10.1-e5)
   Ueberschreibt v1.10.0-d7 (gefuellte Buttons 44px). Spec v5:
   dezente Textlinks mit kleinem Icon, kein bg, kein border, Hover
   underline. Funktionalitaet identisch (same <a> hrefs).
   ===================================================================== */
.trackmaps-plugin .trm-detail-actions {
    display: flex;
    gap: 20px;
    margin-top: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.trackmaps-plugin .trm-detail-action,
.trackmaps-plugin a.trm-detail-action,
.trackmaps-plugin span.trm-detail-action {
    flex: 0 0 auto;
    height: auto;
    padding: 4px 0;
    background: transparent;
    color: var(--tm-text-primary);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    gap: 6px;
    cursor: pointer;
    transition: color 0.12s;
}
.trackmaps-plugin .trm-detail-action svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.trackmaps-plugin .trm-detail-action:hover {
    background: transparent;
    color: var(--tm-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.trackmaps-plugin .trm-detail-action-primary,
.trackmaps-plugin .trm-detail-action-primary:hover {
    background: transparent;
    color: var(--tm-text-primary);
    border-color: transparent;
}
.trackmaps-plugin .trm-detail-action.is-disabled {
    color: var(--tm-text-tertiary);
    cursor: not-allowed;
    opacity: 1; /* was 0.5 — Textlinks muessen Kontrast halten für WCAG */
}
.trackmaps-plugin .trm-detail-action.is-disabled:hover {
    text-decoration: none;
}

/* =====================================================================
   E6: TRANSPARENTE PANEL-HINTERGRÜNDE (v1.10.1-e6)
   Sidebar + Detail-Panel: 90% weiss + Backdrop-Blur — Map bleibt
   durch die Panels durchsehbar, Tracks hinter den Overlays
   erkennbar. Filter-Panel minimal transparent damit die Karte
   visuelle Prioritaet behaelt.
   ===================================================================== */

.trackmaps-plugin .trm-sidebar {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 0; /* kein harter Rahmen — Schatten uebernimmt */
}
.trackmaps-plugin .trm-detail-panel {
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 0;
}

/* Filter-Header (gelber Balken) minimal transparent damit die Karte
   hinter dem Dropdown-Schatten sichtbar bleibt. */
.trackmaps-plugin .trm-filter-header {
    background: rgba(255, 230, 0, 0.92);
}

/* Filter-Flyout-Panel: minimal transparent + Blur. Gelbton bleibt klar. */
.trackmaps-plugin .trm-filter-panel {
    background: rgba(255, 230, 0, 0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* POI-Liste unter Streckenliste: gleicher Sidebar-Hintergrund
   (Transparenz wird vom Sidebar-Wrapper geerbt, hier nur Trennlinie). */
.trackmaps-plugin .trm-poi-list-section {
    background: transparent; /* erbt vom Sidebar */
}

/* Detail-Panel Close-X auf hellem Hover-Hintergrund statt surface-soft,
   damit er sich vom transparenten Panel abhebt. */
.trackmaps-plugin .trm-detail-close:hover {
    background: rgba(17, 17, 17, 0.08);
}

/* Route-Cards erben den Sidebar-Hintergrund — setzt sonst den Transparenz-
   Effekt outside zurueck. Nur der Hover-State bekommt eine solide, aber
   immer noch leicht transparente, helle Schicht fuer Lesbarkeit. */
.trackmaps-plugin .trm-route-card {
    background: transparent;
}
.trackmaps-plugin .trm-route-card:hover {
    background: rgba(247, 247, 247, 0.9);
}
.trackmaps-plugin .trm-route-card.active {
    background: rgba(255, 255, 255, 0.95);
}

/* Firefox ohne backdrop-filter-Support faellt auf solideren Hintergrund
   zurueck (95 % weiss) damit Lesbarkeit gewahrt bleibt. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .trackmaps-plugin .trm-sidebar,
    .trackmaps-plugin .trm-detail-panel {
        background: rgba(255, 255, 255, 0.95);
    }
    .trackmaps-plugin .trm-filter-panel {
        background: rgba(255, 230, 0, 0.96);
    }
}

/* =====================================================================
   E7: SIDEBAR-CARD LANDSCAPE LAYOUT (v1.10.2-e7)
   Overrides previous overlay-on-thumbnail design. Name is now a proper
   headline next to the thumb, parameter row (badge + ⏱/⭤/↗) sits under
   it. Status icon moves onto the title row (top-right of the body) so
   it never blocks the route name.
   ===================================================================== */
.trackmaps-plugin .trm-route-card.trm-card-landscape {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    min-height: 96px;
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0;
    box-shadow: none;
    transition: background 0.12s;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape:hover {
    background: rgba(255, 255, 255, 0.55);
}
.trackmaps-plugin .trm-route-card.trm-card-landscape.active {
    background: rgba(255, 249, 214, 0.85);
    box-shadow: inset 3px 0 0 var(--tm-yellow);
}

/* Thumb: fixed square 80x80 with object-fit cover. Never stretched. */
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-cart-thumb-wrap {
    width: 80px;
    flex: 0 0 80px;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-thumb {
    width: 80px;
    height: 80px;
    aspect-ratio: 1 / 1;
    border-radius: var(--tm-radius-image, 4px);
    overflow: hidden;
    position: relative;
    background: #1b1b1b;
    flex-shrink: 0;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Kill the old overlay text + status-on-thumb — they have moved to the body */
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-thumb-name,
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-thumb-status-icon {
    display: none !important;
}

/* Card body: flex column, title row on top, stats row below. */
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding-left: 2px;
}
.trackmaps-plugin .trm-card-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}
.trackmaps-plugin .trm-card-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0.15px;
    text-transform: uppercase;
    color: var(--tm-text-primary);
    /* Up to 3 lines + break-word + hyphens so names like
       "Beginner Kids Parcours", "Slopestyle-Area" or "SRAM Flow Country"
       fit without ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
/* Status icon next to title (NOT on the thumb) — semi-transparent white
   pill background so the coloured SVG icon reads clearly on any
   underlying card state. Tooltip via title + aria-label. */
.trackmaps-plugin .trm-card-status {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    margin-top: 0;
    padding: 0;
}
.trackmaps-plugin .trm-card-status svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Stats row: horizontal, icon before value, small-caps line */
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-stats {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 1.2;
    color: #333;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-stats .trm-stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-stats .trm-stat-icon {
    font-size: 12px;
    line-height: 1;
    color: #666;
    display: inline-block;
    width: 12px;
    text-align: center;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-badge-diff {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 !important;
    background: transparent !important;
    color: #111 !important;
    font-size: 12px !important;
    font-weight: 700;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-badge-diff-color {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-badge-diff-color > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
}

/* Meta row: Ø Dauer / Länge / Höhenmeter (horizontal, flex-wrap).
   Gets only rendered when at least one value is present (JS guard). */
.trackmaps-plugin .trm-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12px;
    color: #555;
    margin-top: 6px;
}
.trackmaps-plugin .trm-card-meta .trm-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.trackmaps-plugin .trm-card-meta .trm-meta-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #777;
    vertical-align: middle;
    margin-right: 4px;
}
.trackmaps-plugin .trm-card-meta .trm-meta-val {
    font-weight: 600;
    color: #333;
}

/* Das frühere ::after-Pseudo für "KEINE GPX-DATEN" ist abgelöst durch
   ein explizites .trm-badge-no-gpx-Element (Aufgabe F). Hier stilistisch
   neutralisieren, damit Backward-Compat-Markup keine Doppel-Badges
   zeigt. */
.trackmaps-plugin .trm-route-card.trm-card-landscape.trm-no-map-data .trm-card-body::after,
.trackmaps-plugin .trm-route-card.trm-card--no-gpx .trm-card-body::after {
    content: none;
}

/* Card-Level-Zustand: leicht ausgegraut wenn keine Geo-Daten. Nur
   Optik, kein interaktiver Unterschied — Card bleibt klickbar. */
.trackmaps-plugin .trm-route-card.trm-card--no-gpx,
.trackmaps-plugin .trm-gallery-card.trm-card--no-gpx {
    opacity: 0.94;
}

/* Das explizite Badge .trm-badge-no-gpx — klein, dunkelorange Pille. */
.trackmaps-plugin .trm-badge-no-gpx {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    background: #b5651d;
    border-radius: 3px;
    align-self: flex-start;
    line-height: 1.3;
    text-transform: uppercase;
}

/* =====================================================================
   DETAIL-PANEL META ROW (Aufgabe 6 — v1.10.8)
   Parameter-Zeile zwischen Gallery und Description: Ø Dauer / Länge /
   Höhenmeter. Dünne Trennlinien oben+unten, 14 px Schrift, 16 px gap.
   Icon-Set identisch zum Sidebar-Meta-Row (Aufgabe 4). Ein Wert fehlt
   → Item ausgelassen. Alle drei fehlen → Container nicht gerendert.
   ===================================================================== */
.trackmaps-plugin .trm-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 14px 0;
    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tm-text-primary);
}
.trackmaps-plugin .trm-detail-meta .trm-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}
.trackmaps-plugin .trm-detail-meta .trm-meta-icon {
    color: #666;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 4px;
}
.trackmaps-plugin .trm-detail-meta .trm-meta-val {
    font-weight: 700;
    color: var(--tm-text-primary);
}

/* Höchster/Tiefster Punkt legend below the elevation chart (Aufgabe 7).
   Insert-Markup aus drawElevationProfile-Callsite. Neue Klassen
   .trm-elev-legend / .trm-elev-legend-item mit SVG-Triangle-Icons. Die
   alten .trm-detail-peaks / .trm-peak-Klassen bleiben als
   Backward-Compat-Fallback erhalten. */
.trackmaps-plugin .trm-elev-legend,
.trackmaps-plugin .trm-detail-peaks {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-text-primary);
}
.trackmaps-plugin .trm-elev-legend-item,
.trackmaps-plugin .trm-peak {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.trackmaps-plugin .trm-elev-legend-icon {
    flex-shrink: 0;
}
.trackmaps-plugin .trm-elev-high,
.trackmaps-plugin .trm-peak-high { color: #b01f1f; }
.trackmaps-plugin .trm-elev-low,
.trackmaps-plugin .trm-peak-low  { color: #1a5fb4; }

/* =====================================================================
   F1 — TYPOGRAPHY PASS (Aufgabe A, v1.10.12)
   Final layer: jede Regel hier überschreibt alle früheren Selektoren
   derselben Spezifität (Cascade-Reihenfolge). Alle Selektoren bleiben
   unter .trackmaps-plugin gescoped — kein Leak in andere Shop-Seiten.
   ===================================================================== */

/* ---- Listen-Karten ---- */
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-title,
.trackmaps-plugin .trm-card-landscape .trm-card-title,
.trackmaps-plugin .trm-card-title {
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.trackmaps-plugin .trm-route-card .trm-badge-diff,
.trackmaps-plugin .trm-card-landscape .trm-badge-diff,
.trackmaps-plugin .trm-badge-diff {
    font-size: 13px !important;
    font-weight: 700;
}
.trackmaps-plugin .trm-route-card .trm-badge-tag,
.trackmaps-plugin .trm-badge-tag {
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* ---- Mini-Badge "KEINE GPX-DATEN" auf der Karte ---- */
.trackmaps-plugin .trm-badge-no-gpx,
.trackmaps-plugin .trm-route-card .trm-no-map-data,
.trackmaps-plugin .trm-route-card.trm-card-landscape.trm-no-map-data .trm-card-body::after {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
}

/* ---- Filter-Panel ---- */
.trackmaps-plugin .trm-filter-header {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.trackmaps-plugin .trm-filter-panel fieldset.trm-filter-group strong,
.trackmaps-plugin .trm-filter-panel .trm-filter-group strong,
.trackmaps-plugin .trm-gallery-filters .trm-filter-group em {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 6px;
    display: block;
}
.trackmaps-plugin .trm-filter-panel .trm-filter-text,
.trackmaps-plugin .trm-gallery-filters .trm-filter-text,
.trackmaps-plugin .trm-filter-text {
    font-size: 14px;
    font-weight: 500;
}
.trackmaps-plugin .trm-filter-apply {
    font-size: 14px;
    font-weight: 800;
    padding: 12px 16px;
    letter-spacing: 0.04em;
}

/* ---- Detail-Panel ---- */
.trackmaps-plugin .trm-detail-panel .trm-detail-title,
.trackmaps-plugin h2.trm-detail-title,
.trackmaps-plugin .trm-detail-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
}
.trackmaps-plugin .trm-detail-badges .trm-badge-diff,
.trackmaps-plugin .trm-detail-badges .trm-badge-status {
    font-size: 13px;
}
.trackmaps-plugin .trm-short-desc p,
.trackmaps-plugin .trm-long-desc p,
.trackmaps-plugin .trm-detail-description p,
.trackmaps-plugin .trm-detail-desc p {
    font-size: 15px;
    line-height: 1.55;
}
.trackmaps-plugin .trm-detail-elevation {
    margin-top: 16px;
}
.trackmaps-plugin .trm-detail-elevation h4 {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}
.trackmaps-plugin .trm-detail-action,
.trackmaps-plugin a.trm-detail-action,
.trackmaps-plugin span.trm-detail-action {
    font-size: 14px;
    font-weight: 700;
}

/* =====================================================================
   F2 — CARD LAYOUT FINE-TUNING (Aufgabe B, v1.10.13)
   Thumb 72×72 statt 80×80, Body min-width 180px, damit die neue
   15px-Titel-Schrift (Aufgabe A) genug Raum hat.
   ===================================================================== */
.trackmaps-plugin .trm-route-card.trm-card-landscape {
    padding: 10px;
    gap: 12px;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-cart-thumb-wrap {
    width: 72px;
    flex: 0 0 72px;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-thumb {
    width: 72px;
    height: 72px;
    aspect-ratio: 1 / 1;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-body {
    min-width: 180px;
    flex: 1 1 auto;
}

/* =====================================================================
   G1 — POI MARKERS + POPUP (Teil 1.1, v1.10.19)
   Weißer 28×28 Kreis + Drop-Shadow, SVG 20×20 in Farbe gemäß Heuristik.
   Closed-Variante: Opacity + Diagonal-Strich via ::after.
   MapLibre-Popup kompakt (max-width 260).
   ===================================================================== */
/* HTML-Marker-Stil bleibt als Legacy-Fallback vorhanden, wird aber
   seit v1.10.23 nicht mehr aktiv genutzt — POIs laufen jetzt als
   Symbol-Layer (siehe trmEnsurePoiLayers im JS). KEINE transition
   auf transform, weil MapLibre die Marker-Positionen Frame-für-Frame
   per translate() aktualisiert: Eine CSS-transition erzeugt dann
   genau das "Nachziehen", das in der alten Variante sichtbar war. */
.trackmaps-plugin .trm-poi-marker,
.maplibregl-map .trm-poi-marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.trackmaps-plugin .trm-poi-marker--closed,
.maplibregl-map .trm-poi-marker--closed { opacity: 0.55; }
.trackmaps-plugin .trm-poi-marker--closed::after,
.maplibregl-map .trm-poi-marker--closed::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: linear-gradient(45deg, transparent 46%, #dc2626 46%, #dc2626 54%, transparent 54%);
    pointer-events: none;
    border-radius: 50%;
}

/* Popup Styling */
.maplibregl-popup.trm-popup .maplibregl-popup-content {
    max-width: 260px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.35;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.trm-poi-popup-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.trm-poi-popup-head strong {
    font-size: 14px;
    flex: 1 1 auto;
}
.trm-popup-status {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    color: #fff;
    white-space: nowrap;
}
.trm-popup-status.is-open { background: #16a34a; }
.trm-popup-status.is-partially_open,
.trm-popup-status.is-partial { background: #eab308; }
.trm-popup-status.is-closed { background: #dc2626; }
.trm-poi-popup-desc {
    margin: 6px 0;
    color: #444;
    font-size: 13px;
}
.trm-poi-popup-more {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 10px;
    background: #111;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.trm-poi-popup-more:hover { background: #333; }

/* =====================================================================
   G2 — CHAIRLIFT PYLONS + HOVER-POPUP (Teil 1.2)
   Pylon-Marker klein, neutral. Dev-Farbe entspricht Linienfarbe.
   ===================================================================== */
.trackmaps-plugin .trm-chairlift-pylon,
.maplibregl-map .trm-chairlift-pylon {
    width: 12px;
    height: 12px;
    display: block;
    opacity: 0.85;
    pointer-events: none;
}
.maplibregl-popup.trm-chairlift-popup .maplibregl-popup-content {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
}
.trm-chairlift-tip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}
.trm-chairlift-tip strong { font-size: 13px; }
.trm-chairlift-tip span { color: #666; font-size: 11px; }

/* =====================================================================
   G3 — POI-LIST-SECTION im Detail-Panel (Teil 1.4)
   Wird zwischen .trm-detail-description und .trm-detail-elevation
   eingefügt. Nur sichtbar, wenn mind. 1 POI auf der Strecke liegt.
   ===================================================================== */
.trackmaps-plugin .trm-detail-panel .trm-poi-list-section {
    margin: 12px 0;
}
.trackmaps-plugin .trm-detail-panel .trm-poi-list-heading {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 8px;
    text-transform: uppercase;
}
.trackmaps-plugin .trm-detail-panel .trm-poi-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.trackmaps-plugin .trm-detail-panel .trm-poi-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.025);
}
.trackmaps-plugin .trm-detail-panel .trm-poi-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.trackmaps-plugin .trm-detail-panel .trm-poi-name {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--tm-text-primary);
}
.trackmaps-plugin .trm-detail-panel .trm-poi-status {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    color: #fff;
    white-space: nowrap;
}
.trackmaps-plugin .trm-detail-panel .trm-poi-status.is-open { background: #16a34a; }
.trackmaps-plugin .trm-detail-panel .trm-poi-status.is-partial,
.trackmaps-plugin .trm-detail-panel .trm-poi-status.is-partially_open { background: #eab308; }
.trackmaps-plugin .trm-detail-panel .trm-poi-status.is-closed { background: #dc2626; }

/* =====================================================================
   H1 — TEIL 2: Optik-Nachzug (v1.10.20)
   Badge-Position, Status-Icon, Diff-Farben, Filter-z-index, Badge-13px
   ===================================================================== */

/* Diff-Farbvariablen (Aufgabe 2.3) auf .trackmaps-plugin — werden an
   .trm-filter-swatch und .trm-badge-diff-color weitergereicht, damit
   Filter-UI, Listen-Karte und Detail-Badges dieselben Werte haben. */
.trackmaps-plugin {
    --trm-diff-very-easy: #22c55e;
    --trm-diff-very_easy: #22c55e;  /* backwards-compat mit server-Key */
    --trm-diff-easy: #2563eb;
    --trm-diff-medium: #dc2626;
    --trm-diff-hard: #111111;
    --trm-diff-difficult: #111111;  /* aktueller server-key */
}
.trackmaps-plugin .trm-filter-swatch[style*="#"] {
    /* Swatch bleibt inline-style (vom Template gerendert) — nur Größe
       und Shape hier sicherstellen. */
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}

/* 2.1 Badge im Thumb oben rechts (statt im Body). Der explizite
   Pseudo-Block aus F-Typography bleibt neutralisiert durch den
   content:none-Override in G3 (weiter oben). */
.trackmaps-plugin .trm-card-thumb .trm-badge-no-gpx--in-thumb {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    margin: 0;
    padding: 2px 5px;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #fff;
    background: rgba(181, 101, 29, 0.95);
    border-radius: 3px;
    text-transform: uppercase;
    max-width: calc(100% - 8px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* 2.2 Status-Icon Listen-Karte: weißer Kreis 92% opacity + Shadow.
   stroke-Farbe kommt aus dem Status-Klassen-Kontext. */
.trackmaps-plugin .trm-card-status {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.trackmaps-plugin .trm-card-status svg {
    width: 14px;
    height: 14px;
    display: block;
}
.trackmaps-plugin .trm-card-status.trm-status-open svg   { stroke: #16a34a; }
.trackmaps-plugin .trm-card-status.trm-status-closed svg { stroke: #dc2626; }
.trackmaps-plugin .trm-card-status.trm-status-partially_open svg,
.trackmaps-plugin .trm-card-status.trm-status-partial svg { stroke: #eab308; }

/* 2.3 Diff-Farben durchreichen an die Dot-Darstellung der Listen- und
   Detail-Badges. Die per data-diff ausgewählte Color kommt aus den
   CSS-Variablen — inline-styles im Template werden aber weiterhin
   respektiert (MAP_CONFIG.difficultyColors als Admin-Option). */
.trackmaps-plugin .trm-badge-diff[data-diff="very_easy"] .trm-badge-diff-color > span,
.trackmaps-plugin .trm-badge-diff[data-diff="very_easy"] .color-bullet {
    background: var(--trm-diff-very-easy) !important;
}
.trackmaps-plugin .trm-badge-diff[data-diff="easy"] .trm-badge-diff-color > span,
.trackmaps-plugin .trm-badge-diff[data-diff="easy"] .color-bullet {
    background: var(--trm-diff-easy) !important;
}
.trackmaps-plugin .trm-badge-diff[data-diff="medium"] .trm-badge-diff-color > span,
.trackmaps-plugin .trm-badge-diff[data-diff="medium"] .color-bullet {
    background: var(--trm-diff-medium) !important;
}
.trackmaps-plugin .trm-badge-diff[data-diff="difficult"] .trm-badge-diff-color > span,
.trackmaps-plugin .trm-badge-diff[data-diff="difficult"] .color-bullet,
.trackmaps-plugin .trm-badge-diff[data-diff="hard"] .trm-badge-diff-color > span,
.trackmaps-plugin .trm-badge-diff[data-diff="hard"] .color-bullet {
    background: var(--trm-diff-hard) !important;
}

/* 2.4 Filter-Panel z-index + Shadow + Sidebar-Dim wenn Filter offen. */
.trackmaps-plugin .trm-filter-panel {
    z-index: 20;
    background: rgba(255, 230, 0, 0.96);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.trackmaps-plugin .trm-sidebar { position: relative; }
.trackmaps-plugin .trm-sidebar.filter-open .trm-route-list {
    opacity: 0.35;
    transition: opacity 0.15s;
    pointer-events: none;
}

/* 2.5 .trm-badge-diff endgültig auf 13 px — F1-Override schon gesetzt,
   hier mit noch höherer Spezifität abgesichert gegen alte Regeln aus
   Zeile 3883 / 4574. */
.trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-stats .trm-badge-diff,
.trackmaps-plugin .trm-card-landscape .trm-badge-diff {
    font-size: 13px !important;
    font-weight: 700;
}

/* =====================================================================
   I1 — TEIL 3: Meta-Rows Feinschliff (v1.10.21)
   Finaler Override auf die Werte aus dem letzten Prompt.
   ===================================================================== */

/* 3.1 Listen-Karten Meta-Row: gap 6/12, font 12, color #555, SVG 13×13
   stroke #666, vertical-align -2, margin-right 3. */
.trackmaps-plugin .trm-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 12px;
    color: #555;
    margin-top: 6px;
}
.trackmaps-plugin .trm-card-meta .trm-meta-icon {
    width: 13px;
    height: 13px;
    stroke: #666;
    vertical-align: -2px;
    margin-right: 3px;
    flex-shrink: 0;
}

/* 3.2 Detail-Panel Meta-Row: font 15 / fw 600, gap 20, padding 12 0,
   margin 8 0, border-top/bottom 0.08, SVG 16×16 stroke #111,
   vertical-align -3, margin-right 6. */
.trackmaps-plugin .trm-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 12px 0;
    margin: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tm-text-primary);
}
.trackmaps-plugin .trm-detail-meta .trm-meta-icon {
    width: 16px;
    height: 16px;
    stroke: #111;
    vertical-align: -3px;
    margin-right: 6px;
    flex-shrink: 0;
}

/* =====================================================================
   J1 — POI-DETAIL-PANEL (Punkt 3)
   selectPoi öffnet jetzt direkt das bestehende .trm-detail-panel
   statt eines Map-Popups. Der Header bekommt den farbigen Kategorie-
   Kreis identisch zum Map-Marker, rechts ein Status-Badge.
   ===================================================================== */
.trackmaps-plugin .trm-poi-detail .trm-poi-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.trackmaps-plugin .trm-poi-detail-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.trackmaps-plugin .trm-poi-detail-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.trackmaps-plugin .trm-poi-detail-title strong {
    font-size: 20px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--tm-text-primary);
}
.trackmaps-plugin .trm-poi-detail-cat {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.trackmaps-plugin .trm-poi-detail-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.trackmaps-plugin .trm-poi-detail-status.is-open    { background: #16a34a; }
.trackmaps-plugin .trm-poi-detail-status.is-partial { background: #eab308; }
.trackmaps-plugin .trm-poi-detail-status.is-closed  { background: #dc2626; }
.trackmaps-plugin .trm-poi-detail-desc {
    margin: 8px 0 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--tm-text-primary);
}

/* Die alten Map-Popup-Styles bleiben als Backward-Compat sichtbar,
   werden aber seit Punkt 3 nicht mehr erzeugt. */

/* =====================================================================
   K1 — SIDEBAR-POI-SEKTION (Punkt 4)
   Direkt unterhalb der Streckenliste. Trenner + Heading +
   Button-Liste. Icon = farbiger 64x64 Kreis (passend zum Karten-
   Symbol-Layer), daneben Name + Kategorie, rechts Status-Pille.
   ===================================================================== */
.trackmaps-plugin .trm-sidebar-poi-section {
    margin: 16px 0 8px;
    padding: 0;
    border-top: 1px solid #CCCCCC;
}
/* Alter Divider-Container — nicht mehr nötig (Section-Border übernimmt).
   Bleibt unsichtbar für Backward-Compat. */
.trackmaps-plugin .trm-sidebar-poi-divider {
    display: none;
}
.trackmaps-plugin .trm-sidebar-poi-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 12px 8px;
    border-bottom: 1px solid #CCCCCC;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tm-text-primary);
}
.trackmaps-plugin .trm-sidebar-poi-list {
    padding-top: 16px;
}
.trackmaps-plugin .trm-sidebar-poi-heading svg {
    flex-shrink: 0;
    stroke: var(--tm-text-primary);
}
.trackmaps-plugin .trm-sidebar-poi-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px 12px;
}
.trackmaps-plugin .trm-sidebar-poi-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 4px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
    width: 100%;
    min-height: 56px;
}
.trackmaps-plugin .trm-sidebar-poi-item:hover {
    background: rgba(247, 232, 0, 0.28);
}
.trackmaps-plugin .trm-sidebar-poi-item:focus-visible {
    outline: 3px solid #fffc00;
    outline-offset: 2px;
}
.trackmaps-plugin .trm-sidebar-poi-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.trackmaps-plugin .trm-sidebar-poi-thumb svg {
    display: block;
}
.trackmaps-plugin .trm-sidebar-poi-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.trackmaps-plugin .trm-sidebar-poi-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--tm-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trackmaps-plugin .trm-sidebar-poi-cat {
    font-size: 11px;
    color: #666;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trackmaps-plugin .trm-sidebar-poi-status {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.trackmaps-plugin .trm-sidebar-poi-status.is-open    { background: #16a34a; }
.trackmaps-plugin .trm-sidebar-poi-status.is-partial { background: #eab308; }
.trackmaps-plugin .trm-sidebar-poi-status.is-closed  { background: #dc2626; }

/* =====================================================================
   L1 — POI-FILTER-GRUPPE (Punkt 5)
   Master-Toggle + eine Checkbox pro POI-Kategorie. Swatch ist ein
   kleiner farbiger Kreis mit Icon (gleiche Ikonografie wie die
   Karten-Marker).
   ===================================================================== */
.trackmaps-plugin .trm-filter-pois-group .trm-filter-item--master {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.trackmaps-plugin .trm-filter-pois-group .trm-filter-item {
    align-items: center;
}
.trackmaps-plugin .trm-poi-filter-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    margin-right: 2px;
}
.trackmaps-plugin .trm-poi-filter-swatch svg { display: block; }

/* =====================================================================
   M1 — SIDEBAR LAYOUT (Problem 1, v1.10.35)
   Sidebar ist Flex-Column mit fester Höhe. Filter-Wrapper als sticky
   Kopf, darunter der gemeinsame Scrollarea-Container mit overflow.
   Die einzelnen Listen (Strecken + POI) haben overflow:visible und
   nehmen ihre natürliche Höhe ein — ein gemeinsamer Scrollbar, nicht
   pro Sektion einer.
   ===================================================================== */
.trackmaps-plugin .trm-sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;  /* Scroll nur im inneren Scrollarea */
}
.trackmaps-plugin .trm-sidebar .trm-filter-wrapper {
    flex: 0 0 auto;
    position: relative; /* Anchor für das Filter-Overlay (Problem 3) */
}
.trackmaps-plugin .trm-sidebar-scrollarea {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

/* Die einzelnen Listen innerhalb des Scrollareas bekommen explizit
   overflow:visible + auto-Höhe, damit sie den gemeinsamen Scrollbar
   nutzen und nicht zu 0 px kollabieren. */
.trackmaps-plugin .trm-sidebar-scrollarea .trm-route-list,
.trackmaps-plugin .trm-sidebar-scrollarea .trm-sidebar-poi-section {
    overflow: visible !important;
    max-height: none !important;
    flex: none !important;
}

/* Schmale Custom-Scrollbar — nur auf WebKit/Blink.
   Track transparent, Thumb #AAA mit Hover #888. */
.trackmaps-plugin .trm-sidebar-scrollarea::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
.trackmaps-plugin .trm-sidebar-scrollarea::-webkit-scrollbar-track {
    background: transparent;
}
.trackmaps-plugin .trm-sidebar-scrollarea::-webkit-scrollbar-thumb {
    background: #AAA;
    border-radius: 4px;
}
.trackmaps-plugin .trm-sidebar-scrollarea::-webkit-scrollbar-thumb:hover {
    background: #888;
}
/* Firefox / Standard-Scrollbar-API */
.trackmaps-plugin .trm-sidebar-scrollarea {
    scrollbar-width: thin;
    scrollbar-color: #AAA transparent;
}

/* Trenner vor dem POI-Abschnitt. Entspricht Problem-1-Spec:
   1 px #D0D0D0 oben + unten, Heading 14 px fett, Padding 14 px. */
.trackmaps-plugin .trm-sidebar-scrollarea .trm-sidebar-poi-section {
    margin-top: 20px;
    border-top: 1px solid #D0D0D0;
}
.trackmaps-plugin .trm-sidebar-scrollarea .trm-sidebar-poi-heading {
    margin: 0;
    padding: 14px 12px;
    border-bottom: 1px solid #D0D0D0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tm-text-primary);
    justify-content: flex-start;
}
.trackmaps-plugin .trm-sidebar-scrollarea .trm-sidebar-poi-list {
    padding-top: 14px;
}

/* Legacy-POI-Sektion bleibt in diesem Commit noch im DOM (Problem 2),
   aber soll auf keinen Fall Höhe einnehmen oder sichtbar sein. */
.trackmaps-plugin #trm-poi-list-section {
    display: none !important;
}

/* =====================================================================
   M2 — FILTER ALS OVERLAY (Problem 3, v1.10.37)
   Filter öffnet sich als absolut positioniertes Overlay oberhalb der
   Streckenliste — nicht als inline-Block, der die Liste wegdrückt.
   Eigene max-height + overflow-y, damit auch auf kleinen Sidebars
   der "Filter anwenden"-Button erreichbar ist.
   ===================================================================== */
.trackmaps-plugin .trm-sidebar { position: relative; }
/* Wrapper selbst nicht relative → position:absolute im Panel
   resolvt auf .trm-sidebar. */
.trackmaps-plugin .trm-sidebar > .trm-filter-wrapper {
    position: static;
}
.trackmaps-plugin .trm-sidebar .trm-filter-panel {
    position: absolute;
    top: 52px;            /* unterhalb Filter-Button (~44 px + 8 px Luft) */
    left: 8px;
    right: 8px;
    z-index: 50;
    max-height: calc(100% - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(247, 230, 0, 0.96);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    padding: 12px;
}
.trackmaps-plugin .trm-sidebar .trm-filter-panel::-webkit-scrollbar {
    width: 7px;
}
.trackmaps-plugin .trm-sidebar .trm-filter-panel::-webkit-scrollbar-track {
    background: transparent;
}
.trackmaps-plugin .trm-sidebar .trm-filter-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
}
/* Sidebar-dim beim Öffnen fällt weg — Overlay liegt optisch drüber. */
.trackmaps-plugin .trm-sidebar.filter-open .trm-sidebar-scrollarea {
    /* dezenter Schleier, damit Overlay-Fokus klar ist */
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* =====================================================================
   M3 — DETAIL-PANEL INTERNAL SCROLL (Problem 5, v1.10.38)
   Panel ist Flex-Column mit fester Höhe. Close-Button liegt absolute
   oben-rechts, bleibt beim Scrollen sichtbar. .trm-detail-content
   bekommt den Scrollbar und min-height:0 (Flex-Quirk).
   ===================================================================== */
.trackmaps-plugin .trm-detail-panel {
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;   /* outer hat keinen eigenen Scroll mehr */
    height: calc(100% - 48px);
}
.trackmaps-plugin .trm-detail-panel .trm-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    /* Close-Button trotz overflow:hidden des Panels weiterhin sichtbar —
       absolute Positionierung wird nicht geclippt, weil Panel
       position:relative/absolute ist (bereits gesetzt). */
}
.trackmaps-plugin .trm-detail-panel .trm-detail-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
}
/* schmaler Scrollbar analog zur Sidebar */
.trackmaps-plugin .trm-detail-panel .trm-detail-content::-webkit-scrollbar {
    width: 7px;
}
.trackmaps-plugin .trm-detail-panel .trm-detail-content::-webkit-scrollbar-track {
    background: transparent;
}
.trackmaps-plugin .trm-detail-panel .trm-detail-content::-webkit-scrollbar-thumb {
    background: #AAA;
    border-radius: 4px;
}
.trackmaps-plugin .trm-detail-panel .trm-detail-content::-webkit-scrollbar-thumb:hover {
    background: #888;
}
.trackmaps-plugin .trm-detail-panel .trm-detail-content {
    scrollbar-width: thin;
    scrollbar-color: #AAA transparent;
}

/* =====================================================================
   N1 — MOBILE RESPONSIVE (v1.10.40)
   Behebt horizontal-Scroll auf <=768 px Viewports. Die fixen
   min-width/max-width-Werte auf .trm-route-card, die auf Desktop
   die kompakte 96-px-Zeilenhöhe erzeugen, werden mobil aufgelöst.
   ===================================================================== */

/* Safety-Net: Plugin-Wrapper kriegt overflow-x:hidden, damit
   evtl. durchsickernde fixe Breiten keine horizontale Seiten-
   Scrollbar erzeugen. Die Ursache (Card-Breiten) wird darunter
   in der Media-Query endgültig entfernt. */
.trackmaps-plugin {
    max-width: 100%;
    overflow-x: hidden;
}
.trackmaps-plugin *,
.trackmaps-plugin *::before,
.trackmaps-plugin *::after {
    box-sizing: border-box;
}

/* Thumbnail-Bilder stretchen korrekt, nie overflow */
.trackmaps-plugin .trm-card-thumb img {
    max-width: 100%;
    height: auto;
}

/* === Breakpoint <=768 px: Mobile Layout === */
@media (max-width: 768px) {
    /* Route-Card darf sich auf ganze Sidebar-Breite ausdehnen —
       die Desktop-Regeln (180/190) werden per !important überstimmt,
       weil sie im Responsive-Cascade teilweise direkter scopen. */
    .trackmaps-plugin .trm-route-card,
    .trackmaps-plugin .trm-card-landscape,
    .trackmaps-plugin .trm-route-card.trm-card-landscape,
    .trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-body {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .trackmaps-plugin .trm-card-body,
    .trackmaps-plugin .trm-card-head,
    .trackmaps-plugin .trm-card-stats,
    .trackmaps-plugin .trm-card-meta,
    .trackmaps-plugin .trm-cart-thumb-wrap,
    .trackmaps-plugin .trm-card-thumb {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Main-View: Sidebar + Map stapeln statt nebeneinander */
    .trackmaps-plugin .trm-map-view {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .trackmaps-plugin .trm-sidebar {
        position: static !important;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        max-height: 60vh;
        flex: 0 0 auto;
        order: 2;                /* Sidebar unter die Karte */
    }
    .trackmaps-plugin .trm-map-container {
        width: 100% !important;
        min-height: 60vh;
        flex: 1 1 auto;
        order: 1;
    }

    /* Detail-Panel mobil: Vollbild-Overlay statt schwebend */
    .trackmaps-plugin .trm-detail-panel {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0;
        bottom: 0;
        width: 100% !important;
        height: 100% !important;
        max-height: 100%;
        z-index: 1000;
    }

    /* Filter-Overlay: auf Mobile nimmt es die komplette Sidebar-
       Breite minus kleiner Außenabstände. */
    .trackmaps-plugin .trm-sidebar .trm-filter-panel {
        left: 4px;
        right: 4px;
        max-height: calc(100% - 60px);
    }

    /* Header-Toggle (KARTEN/GALERIE) darf umbrechen */
    .trackmaps-plugin .trm-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .trackmaps-plugin .trm-view-toggle {
        width: 100%;
        justify-content: flex-start;
    }

    /* MapLibre Canvas folgt Container-Breite — falls irgendwo
       eine fixe width im Inline-Style gelandet ist, überstimmen. */
    .trackmaps-plugin .maplibregl-canvas,
    .trackmaps-plugin .maplibregl-canvas-container {
        max-width: 100% !important;
    }
}

/* Bug 3 + Aufgabe C: Placeholder-Bilder sollen keine Lightbox
   triggern. cursor:default als visueller Hinweis, JS-Guard
   kümmert sich ums Abfangen des Clicks. Klassen-Set umfasst
   alle Quellen: render-seitige --empty, onerror-gesetzte
   .trm-is-placeholder, Wrapper-Klassen .is-empty und legacy
   --empty-Wrapper-Variante. */
.trackmaps-plugin img.trm-is-placeholder,
.trackmaps-plugin .trm-is-placeholder img,
.trackmaps-plugin .trm-detail-image.trm-is-placeholder,
.trackmaps-plugin .trm-detail-image--empty,
.trackmaps-plugin .trm-detail-gallery-main.is-empty .trm-detail-image,
.trackmaps-plugin .trm-detail-gallery-main--empty .trm-detail-image {
    cursor: default !important;
    pointer-events: auto;   /* JS-Guard braucht das Click-Event weiterhin */
    transform: none !important;
}
.trackmaps-plugin .trm-detail-gallery-main.is-empty .trm-detail-image:hover,
.trackmaps-plugin .trm-detail-image--empty:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Bug 2: Toggle-Button für Beschreibung im Detail-Panel */
.trackmaps-plugin .trm-desc-toggle {
    display: inline-block;
    margin: 4px 0 14px;
    padding: 4px 10px;
    background: transparent;
    color: var(--tm-text-primary);
    border: 1px solid var(--tm-dark);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.trackmaps-plugin .trm-desc-toggle:hover {
    background: var(--tm-dark);
    color: var(--tm-yellow);
}

/* === Breakpoint <=480 px: noch kompakter === */
@media (max-width: 480px) {
    .trackmaps-plugin .trm-sidebar { max-height: 55vh; }
    .trackmaps-plugin .trm-map-container { min-height: 45vh; }
    .trackmaps-plugin .trm-route-card.trm-card-landscape {
        gap: 10px;
        padding: 8px 10px;
    }
    .trackmaps-plugin .trm-card-title {
        font-size: 14px;
    }
}

/* =====================================================================
   O1 — DESCRIPTION CLAMP ENTFERNEN (Aufgabe B, v1.10.44)
   Per User-Preference (Variante B): .trm-detail-desc darf die
   Höhe nicht künstlich deckeln, damit der Parent-Scroll-Container
   #trm-detail-content automatisch overflow-y:auto greift und das
   GESAMTE Detail-Panel scrollbar wird.
   Der aus Bug 2 (v1.10.42) eingebaute "Mehr anzeigen"-Toggle
   bleibt als Funktion erhalten, aber trmInstallDescToggle
   (scrollHeight > clientHeight) triggert jetzt nicht mehr, weil
   wir den Clamp auflösen — der ganze Text steht direkt da.
   ===================================================================== */
.trackmaps-plugin .trm-detail-description,
.trackmaps-plugin .trm-detail-desc {
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}
/* Kein Fade-Out / Masken-Overlay simulieren das alte "abgeschnitten". */
.trackmaps-plugin .trm-detail-description::after,
.trackmaps-plugin .trm-detail-desc::after {
    content: none;
}
/* Mobile Touch-Scrolling im Detail-Panel sicherstellen. */
@media (max-width: 768px) {
    .trackmaps-plugin .trm-detail-panel {
        -webkit-overflow-scrolling: touch;
    }
    .trackmaps-plugin .trm-detail-panel .trm-detail-content {
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================================
   P1 — MOBILE KARTENANSICHT FEINSCHLIFF (Aufgabe 1, v1.10.46)
   Ergänzt die bisherigen Mobile-Blöcke N1/M1. Exakte Werte laut
   Spec: Header stapelt, View-Toggle 44 px + 12 px, Karte 60vh
   min 360 max 520, Sidebar static unterhalb der Karte, kein
   Off-Canvas-Transform, Touch-Targets 44 px minimum.
   ===================================================================== */
@media (max-width: 767px) {
    /* Header + Toggle */
    .trackmaps-plugin .trm-header {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 16px;
    }
    .trackmaps-plugin .trm-title,
    .trackmaps-plugin .trm-title-badge {
        font-size: 22px;
        white-space: nowrap;
    }
    .trackmaps-plugin .trm-view-toggle {
        width: 100%;
        display: flex;
        gap: 8px;
    }
    .trackmaps-plugin .trm-toggle-btn {
        flex: 1;
        height: 44px;
        font-size: 12px;
        letter-spacing: 0.4px;
        white-space: nowrap;
        min-height: 44px;
    }
    .trackmaps-plugin .trm-toggle-btn svg {
        width: 14px;
        height: 14px;
    }

    /* Map-View: stapeln, kein fixed height */
    .trackmaps-plugin .trm-map-view {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    .trackmaps-plugin .trm-map-container,
    .trackmaps-plugin #bikepark-trackmap-map {
        width: 100% !important;
        height: 60vh !important;
        min-height: 360px;
        max-height: 520px;
        position: relative;
        border-radius: 0;
        order: 1;
    }

    /* Sidebar mobil: static unter der Karte, keine Off-Canvas-
       Transform, kein Toggle-Button mehr nötig. */
    .trackmaps-plugin #trm-sidebar,
    .trackmaps-plugin .trm-sidebar {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        background: #fff;
        box-shadow: none !important;
        max-height: none !important;
        border-top: 1px solid #E5E5E5;
        order: 2;
    }
    .trackmaps-plugin #trm-sidebar-toggle,
    .trackmaps-plugin .trm-sidebar-toggle {
        display: none !important;
    }
    .trackmaps-plugin .trm-sidebar-scrollarea {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Filter-Header klickbar, min 44 px. Panel-Höhe für mobile
       leicht nach oben anpassen (s.a. P2). */
    .trackmaps-plugin .trm-filter-header {
        min-height: 44px;
        padding: 10px 14px;
    }

    /* Route-Karten vertikal */
    .trackmaps-plugin .trm-route-card,
    .trackmaps-plugin .trm-route-card.trm-card-landscape {
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: row;
        padding: 10px 12px;
        gap: 10px;
        min-height: 44px;
    }
    .trackmaps-plugin .trm-card-thumb,
    .trackmaps-plugin .trm-route-card.trm-card-landscape .trm-card-thumb {
        width: 72px !important;
        height: 54px !important;
        flex-shrink: 0;
        border-radius: 6px;
    }
    .trackmaps-plugin .trm-card-thumb img {
        object-fit: cover;
    }
    .trackmaps-plugin .trm-card-title {
        font-size: 14px;
        font-weight: 700;
        -webkit-line-clamp: 2;
    }
    .trackmaps-plugin .trm-card-stats,
    .trackmaps-plugin .trm-card-stats .trm-badge-diff,
    .trackmaps-plugin .trm-card-stats .trm-stat {
        font-size: 12px !important;
    }

    /* POI-Liste mobil */
    .trackmaps-plugin .trm-sidebar-poi-list {
        display: flex;
        flex-direction: column;
    }
    .trackmaps-plugin .trm-sidebar-poi-item {
        width: 100%;
        display: grid !important;
        grid-template-columns: 36px 1fr auto;
        gap: 10px;
        padding: 8px 10px;
        min-height: 52px;
        align-items: center;
    }
    .trackmaps-plugin .trm-sidebar-poi-thumb {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }
    .trackmaps-plugin .trm-sidebar-poi-thumb svg {
        width: 18px;
        height: 18px;
    }
    .trackmaps-plugin .trm-sidebar-poi-name {
        font-size: 13px;
    }
    .trackmaps-plugin .trm-sidebar-poi-cat {
        font-size: 11px;
        color: var(--tm-text-tertiary, #777);
    }
    .trackmaps-plugin .trm-sidebar-poi-status {
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 999px;
    }

    /* Detail-Panel mobil: Vollbild-Overlay mit slide-in */
    .trackmaps-plugin .trm-detail-panel {
        position: fixed !important;
        inset: 0;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        transform: translateX(100%);
        transition: transform 0.22s ease-out;
    }
    .trackmaps-plugin .trm-detail-panel.is-visible {
        transform: translateX(0);
    }
    .trackmaps-plugin .trm-detail-close {
        width: 44px !important;
        height: 44px !important;
        top: 8px !important;
        right: 8px !important;
    }
    .trackmaps-plugin .trm-detail-content {
        padding: 16px !important;
    }
    .trackmaps-plugin .trm-detail-gallery-main {
        height: 220px !important;
    }
    .trackmaps-plugin #trm-detail-elevation-canvas {
        max-width: 100% !important;
    }

    /* Touch-Targets 44 px minimum auf allen interaktiven Knöpfen */
    .trackmaps-plugin .trm-filter-apply,
    .trackmaps-plugin .trm-detail-action,
    .trackmaps-plugin .trm-desc-toggle,
    .trackmaps-plugin .trm-filter-item {
        min-height: 44px;
    }

    /* Plugin darf keine globale overflow:hidden erzwingen — ja
       das wurde in N1 auf .trackmaps-plugin gesetzt, aber NICHT
       auf html/body. Noch einmal explizit sicherstellen. */
    html, body { overflow-x: visible; }
}

/* Extra-Breakpoint <=380 px */
@media (max-width: 380px) {
    .trackmaps-plugin .trm-title,
    .trackmaps-plugin .trm-title-badge {
        font-size: 20px;
    }
    .trackmaps-plugin .trm-toggle-btn {
        font-size: 11px;
        padding: 0 8px;
        gap: 4px;
    }
    .trackmaps-plugin .trm-toggle-btn-label--long {
        display: none;
    }
    .trackmaps-plugin .trm-toggle-btn-label--short {
        display: inline;
    }
}

/* =====================================================================
   Q1 — GALERIE-POI-SEKTION (Aufgabe 2b, v1.10.47)
   Unterhalb des Gallery-Grids. Desktop: auto-fill grid, mobil 1-col.
   Gleiche Item-Struktur wie Sidebar-POI, aber größer für Grid-Layout.
   ===================================================================== */
.trackmaps-plugin .trm-gallery-poi-section {
    margin: 32px 0 16px;
    padding: 0 16px;
}
.trackmaps-plugin .trm-gallery-poi-section[hidden] {
    display: none !important;
}
.trackmaps-plugin .trm-gallery-poi-heading {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: var(--tm-text-primary);
}
.trackmaps-plugin .trm-gallery-poi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.trackmaps-plugin .trm-gallery-poi-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    min-height: 64px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.trackmaps-plugin .trm-gallery-poi-card:hover {
    border-color: var(--tm-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.trackmaps-plugin .trm-gallery-poi-thumb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.trackmaps-plugin .trm-gallery-poi-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.trackmaps-plugin .trm-gallery-poi-name {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tm-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.trackmaps-plugin .trm-gallery-poi-cat {
    font-size: 11px;
    color: #666;
    font-weight: 500;
}
.trackmaps-plugin .trm-gallery-poi-status {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    width: fit-content;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.trackmaps-plugin .trm-gallery-poi-status.trm-status-open { background: #16a34a; }
.trackmaps-plugin .trm-gallery-poi-status.trm-status-partial { background: #eab308; }
.trackmaps-plugin .trm-gallery-poi-status.trm-status-closed { background: #dc2626; }

/* =====================================================================
   Q2 — GALERIE MOBILE OPTIMIERUNG (Aufgabe 2c, v1.10.47)
   ===================================================================== */
@media (max-width: 1199px) {
    .trackmaps-plugin .trm-gallery-grid {
        --trm-gallery-cols: 2 !important;
    }
}
@media (max-width: 991px) {
    /* Filter-Sidebar Galerie kollabiert auf Button */
    .trackmaps-plugin .trm-gallery-filters {
        width: 100%;
    }
}
@media (max-width: 767px) {
    .trackmaps-plugin .trm-gallery-grid {
        --trm-gallery-cols: 1 !important;
        grid-template-columns: 1fr !important;
    }
    .trackmaps-plugin .trm-gallery-filters {
        position: static !important;
        width: 100% !important;
    }
    .trackmaps-plugin .trm-gallery-filters h3 {
        font-size: 16px;
    }
    .trackmaps-plugin .trm-gallery-card {
        border-radius: 8px;
        min-height: 0;
    }
    .trackmaps-plugin .trm-gallery-card-image {
        aspect-ratio: 16 / 10;
    }
    .trackmaps-plugin .trm-gallery-card-title,
    .trackmaps-plugin .trm-gallery-card h3 {
        font-size: 16px;
    }
    .trackmaps-plugin .trm-gallery-card-btn {
        width: 100%;
        height: 44px;
        font-size: 13px;
    }
    .trackmaps-plugin .trm-badge-status,
    .trackmaps-plugin .trm-gallery-tags span {
        font-size: 10px;
        padding: 3px 6px;
    }

    /* Gallery-POI-Section 1-Spalte */
    .trackmaps-plugin .trm-gallery-poi-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .trackmaps-plugin .trm-gallery-poi-heading {
        font-size: 16px;
        letter-spacing: 0.6px;
        margin: 24px 0 12px;
    }
}

/* Hover-Transforms auf Touch-Geräten deaktivieren */
@media (hover: none) {
    .trackmaps-plugin .trm-gallery-card:hover,
    .trackmaps-plugin .trm-gallery-poi-card:hover {
        transform: none !important;
    }
}




/* =====================================================================
   R1 — CARD-LAYOUT v2: Titel + Status im Thumb-Overlay (v1.10.57)
   Titel und Status wandern in die linke Bild-Spalte, rechts bleibt
   Difficulty + Meta (.trm-card-body).
   ===================================================================== */
.trackmaps-plugin .trm-route-card.trm-card-landscape--v2 {
    gap: 14px;
    padding: 10px;
    align-items: stretch;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape--v2 .trm-cart-thumb-wrap {
    width: 130px;
    flex: 0 0 130px;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape--v2 .trm-card-thumb {
    width: 130px;
    height: 110px;
    aspect-ratio: auto;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}
.trackmaps-plugin .trm-route-card.trm-card-landscape--v2 .trm-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay mit Dark-Gradient — macht den weißen Titel lesbar auch auf
   sehr hellen Bildbereichen. */
.trackmaps-plugin .trm-card-thumb-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px 8px 7px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.55) 60%,
        rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
}
.trackmaps-plugin .trm-card-title.trm-card-title--overlay {
    color: #fff;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Status-Icon-Overlay top-right. Nutzt die vorhandenen Status-Klassen
   vom card-status-Styling, aber kleiner und als pinned badge. */
.trackmaps-plugin .trm-card-status.trm-card-status--overlay {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: unset;
    margin: 0;
    padding: 0;
    z-index: 3;
}
.trackmaps-plugin .trm-card-status.trm-card-status--overlay svg {
    width: 12px;
    height: 12px;
    display: block;
}

/* KEINE-GPX-Badge im Thumb: rutscht unter Status, bleibt aber oben */
.trackmaps-plugin .trm-card-landscape--v2 .trm-badge-no-gpx--in-thumb {
    top: 32px;
    right: 6px;
    z-index: 2;
}

/* Body rechts: nur noch Difficulty + Meta, kein Titel mehr. */
.trackmaps-plugin .trm-route-card.trm-card-landscape--v2 .trm-card-body {
    padding: 0;
    min-width: 0;
    justify-content: center;
    gap: 8px;
}

/* Mobile: stack thumb + body vertikal wenn eng, Thumb volle Breite. */
@media (max-width: 540px) {
    .trackmaps-plugin .trm-route-card.trm-card-landscape--v2 {
        flex-direction: column !important;
    }
    .trackmaps-plugin .trm-route-card.trm-card-landscape--v2 .trm-cart-thumb-wrap,
    .trackmaps-plugin .trm-route-card.trm-card-landscape--v2 .trm-card-thumb {
        width: 100% !important;
        flex: 0 0 auto;
    }
    .trackmaps-plugin .trm-route-card.trm-card-landscape--v2 .trm-card-thumb {
        height: 140px;
    }
    .trackmaps-plugin .trm-card-title.trm-card-title--overlay {
        font-size: 14px;
        -webkit-line-clamp: 2;
    }
}

/* ==========================================================================
   BBF HOURS WIDGET (v1.10.61)
   Ampel-style clickable widget produced by $bikepark_hours_<key>_widget.
   Styles are namespaced with .bbf- so they can live on any page without
   conflicting with host-theme CSS.
   ========================================================================== */
.bbf-hours-widget {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}
.bbf-hours-trigger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .7rem;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bbf-hours-trigger:hover,
.bbf-hours-trigger:focus-visible {
    background: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .25);
    outline: none;
}
.bbf-hours-trigger[aria-expanded="true"] {
    background: rgba(0, 0, 0, .06);
    border-color: rgba(0, 0, 0, .35);
}
.bbf-hours-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #6c757d;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .6);
}
.bbf-hours-dot--open   { background: #28a745; }
.bbf-hours-dot--soon   { background: #ff9800; }
.bbf-hours-dot--closed { background: #dc3545; }
.bbf-hours-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bbf-hours-popover {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    min-width: 240px;
    max-width: 320px;
    padding: .5rem 0;
    color: #212529;
    font-size: 14px;
    line-height: 1.35;
}
.bbf-hours-popover__header {
    padding: .25rem 1rem .5rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin-bottom: .25rem;
}
.bbf-hours-popover__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}
.bbf-hours-popover__item + .bbf-hours-popover__item {
    border-top: 1px solid rgba(0, 0, 0, .05);
}
.bbf-hours-popover__entry {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .5rem;
    align-items: center;
    width: 100%;
    padding: .5rem 1rem;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.bbf-hours-popover__entry:hover,
.bbf-hours-popover__entry:focus-visible {
    background: rgba(0, 0, 0, .04);
    outline: none;
}
.bbf-hours-popover__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bbf-hours-popover__time {
    color: #6c757d;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}
.bbf-hours-popover__empty {
    padding: .5rem 1rem;
    color: #6c757d;
    text-align: center;
}