/**
 * EventHub Map View – Styles
 *
 * Styles für die interaktive Kartenansicht.
 * Split-Screen Desktop (40% Liste / 60% Karte), Mobile Toggle.
 *
 * Nutzt ausschließlich CSS-Variablen aus eventhub-variables.css.
 * Keine hardcodierten Farben, Fonts oder Pixel-Werte.
 *
 * @package EventHub
 * @since 1.1.0
 */

/* ==========================================================================
   THEME-CONTAINER OVERRIDES
   Die Map View braucht maximalen Platz. Typische Theme-Wrapper
   (max-width, padding) werden hier für die Map-Seite aufgehoben.
   ========================================================================== */

/* Verhindert ungewolltes Zoom/Scale in Chrome DevTools Responsive Mode. */
body.eventhub-page-map {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Nur #page Container erweitern, NICHT Header/Footer .grid-container. */
body.eventhub-page-map #page {
    max-width: 100%;
}

body.eventhub-page-map .site-content {
    flex-direction: column;
}

body.eventhub-page-map .inside-article,
body.eventhub-page-map .eventhub-wrapper {
    padding: 0;
    width: 100%;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

/* Mobile: Wrapper leicht nach unten rücken damit Theme-Elemente
   (Link-Block) im Hintergrund nicht durchscheinen. */
@media (max-width: 767px) {
    body.eventhub-page-map .eventhub-wrapper {
        margin-top: var(--eventhub-spacing-sm, 0.5rem);
    }
}

/* ==========================================================================
   MAP VIEW LAYOUT
   ========================================================================== */

/* Scoped box-sizing Reset – schützt vor Themes ohne globalen Reset. */
.eventhub-map-view,
.eventhub-map-view *,
.eventhub-map-view *::before,
.eventhub-map-view *::after {
    box-sizing: border-box;
}

.eventhub-map-view {
    display: flex;
    flex-direction: column;
    height: calc(80vh - var(--eventhub-map-header-offset, 3.75rem));
    overflow: hidden;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.eventhub-map-view__body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ==========================================================================
   SIDEBAR (40%)
   ========================================================================== */

.eventhub-map-view__sidebar {
    width: 100%;
    overflow-y: auto;
    padding: var(--eventhub-spacing-md);
}

.eventhub-map-view__counter {
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
    padding: var(--eventhub-spacing-sm) 0;
    border-bottom: 1px solid var(--eventhub-color-border);
}

.eventhub-map-view__sidebar.is-loading {
    pointer-events: none;
}

/* ==========================================================================
   MAP CONTAINER (60%)
   ========================================================================== */

.eventhub-map-view__map {
    width: 100%;
    position: relative;
}

.eventhub-map-view__map-canvas {
    width: 100%;
    height: 100%;
    border-radius: var(--eventhub-border-radius-lg, 8px);
}

/* ==========================================================================
   MAP CARDS (Sidebar)
   ========================================================================== */

.eventhub-map-card {
    display: flex;
    gap: var(--eventhub-spacing-sm);
    padding: var(--eventhub-spacing-sm);
    border-bottom: 1px solid var(--eventhub-color-border);
    cursor: pointer;
    transition: background var(--eventhub-transition);
    font-family: inherit;
}

.eventhub-map-card:hover,
.eventhub-map-card--active {
    background: var(--eventhub-color-bg-alt);
}

/* Bild-Spalte: Bild + Badges vertikal gestapelt */
.eventhub-map-card__image-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    width: 5rem;
}

.eventhub-map-card__image {
    width: 5rem;
    height: 3.75rem;
    border-radius: var(--eventhub-border-radius);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.eventhub-map-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eventhub-map-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eventhub-color-bg-alt);
    font-size: var(--eventhub-font-size-lg);
}

/* Status-Badges unter dem Bild */
.eventhub-map-card__status-badges {
    text-align: center;
    width: 100%;
}

.eventhub-map-card__content {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    position: relative;
}

/* Favoriten-Herz in Map-Card: rechts oben, kompakt */
.eventhub-map-card__content > .eventhub-favorite-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    padding: 2px;
    background: none;
    color: var(--eventhub-color-text-muted, #999);
}

.eventhub-map-card__content
    > .eventhub-favorite-btn
    .eventhub-favorite-btn__icon {
    filter: none;
}

.eventhub-map-card__content > .eventhub-favorite-btn:hover {
    color: var(--eventhub-favorite-color-active, #e74c3c);
}

.eventhub-map-card__content > .eventhub-favorite-btn.is-favorited {
    color: var(--eventhub-favorite-color-active, #e74c3c);
}

.eventhub-map-card__title {
    font-family: inherit;
    font-size: var(--eventhub-font-size-base);
    font-weight: var(--eventhub-font-weight-medium);
    line-height: 1.3;
    margin: 0 0 var(--eventhub-spacing-xs);
    padding-right: 1.5rem;
}

.eventhub-map-card__title a {
    color: inherit;
    text-decoration: none;
}

.eventhub-map-card__title a:hover {
    text-decoration: underline;
}

.eventhub-map-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
}

.eventhub-map-card__date {
    font-family: inherit;
}

.eventhub-map-card__venue {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-family: inherit;
}

.eventhub-map-card__venue-icon {
    flex-shrink: 0;
}

/* Inline-Badges (Status/Kostenlos) unter dem Bild */
.eventhub-map-card .eventhub-badge--inline {
    display: block;
    width: 100%;
    font-size: 0.65rem;
    padding: 0.15em 0;
    border-radius: 3px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   MAP CONTROLS (Overlay-Buttons)
   ========================================================================== */

.eventhub-map-control {
    background: var(--eventhub-color-bg-input, inherit);
    border: none;
    border-radius: var(--eventhub-border-radius);
    box-shadow: var(--eventhub-card-shadow);
    padding: var(--eventhub-spacing-xs) var(--eventhub-spacing-sm);
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm);
    cursor: pointer;
    transition: box-shadow var(--eventhub-transition);
}

.eventhub-map-control:hover {
    box-shadow: var(--eventhub-card-shadow-hover);
}

.eventhub-map-control--search-area {
    position: absolute;
    top: var(--eventhub-spacing-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: none;
}

.eventhub-map-control--search-area[hidden] {
    display: none;
}

.eventhub-map-control--search-area.is-visible {
    display: block;
}

.eventhub-map-control--geolocation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    margin-right: 10px;
    padding: 0;
    border-radius: 4px;
    background: #fff;
    border: none;
    color: #666;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    transition:
        background var(--eventhub-transition, 0.2s ease),
        color var(--eventhub-transition, 0.2s ease);
}

.eventhub-map-control--geolocation:hover {
    color: var(--eventhub-color-primary, #0073aa);
}

.eventhub-map-control--geolocation.is-loading,
.eventhub-map-control--geolocation.is-active {
    background: var(--eventhub-color-primary, #0073aa);
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px -1px;
}

.eventhub-map-control--geolocation.is-loading {
    cursor: wait;
    animation: eventhub-geo-pulse 1.2s ease-in-out infinite;
}

@keyframes eventhub-geo-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.eventhub-map-control--geolocation .eventhub-map-control__icon {
    color: inherit;
    fill: none;
    stroke: currentColor;
}

.eventhub-map-control__icon {
    flex-shrink: 0;
}

/* ==========================================================================
   USER LOCATION – Blue Dot (Nutzer-Standort)
   ========================================================================== */

.eventhub-map-user-location {
    position: relative;
    width: 22px;
    height: 22px;
}

.eventhub-map-user-location__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    background: #4285f4;
    border: 2.5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(66, 133, 244, 0.6);
    z-index: 2;
}

.eventhub-map-user-location__pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    background: rgba(66, 133, 244, 0.2);
    border-radius: 50%;
    z-index: 1;
    animation: eventhub-pulse 2s ease-out infinite;
}

@keyframes eventhub-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* ==========================================================================
   INFOWINDOW – Google Maps Wrapper Resets
   ========================================================================== */

/* Reset Google's built-in asymmetric padding on InfoWindow wrappers */
.eventhub-map-view .gm-style-iw.gm-style-iw-c {
    padding: 0 !important;
}

.eventhub-map-view .gm-style-iw-d {
    overflow: auto !important;
    padding: 0 !important;
}

/* Override legacy shortcodes.css padding */
.eventhub-map-view .gm-style-iw {
    padding: 0 !important;
}

/* Close-Button-Header kompakter */
.eventhub-map-view .gm-style-iw-chr {
    height: auto !important;
    padding: 0 !important;
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 1;
}

/* Close-Button sichtbar über dem Bild */
.eventhub-map-view .gm-style-iw-chr button {
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* X-Icon innerhalb des Buttons zentrieren */
.eventhub-map-view .gm-style-iw-chr button span {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   INFOWINDOW – Content
   ========================================================================== */

.eventhub-map-infowindow {
    max-width: 18rem;
    font-family: inherit;
    padding: var(--eventhub-spacing-md);
}

.eventhub-map-infowindow__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--eventhub-border-radius);
    display: block;
}

.eventhub-map-infowindow__body {
    padding-top: var(--eventhub-spacing-sm);
}

.eventhub-map-infowindow__title {
    font-family: inherit;
    font-size: var(--eventhub-font-size-base);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.25rem;
}

.eventhub-map-infowindow__title a {
    color: inherit;
    text-decoration: none;
}

.eventhub-map-infowindow__title a:hover {
    color: var(--eventhub-color-primary, currentColor);
}

.eventhub-map-infowindow__date {
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
    margin: 0 0 0.25rem;
}

/* Venue-Zeile mit Pin-Icon */
.eventhub-map-infowindow__venue-line {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
    margin: 0 0 0.5rem;
}

.eventhub-map-infowindow__venue-icon {
    flex-shrink: 0;
    color: var(--eventhub-color-primary, currentColor);
}

.eventhub-map-infowindow__venue-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.eventhub-map-infowindow__venue-link:hover {
    color: var(--eventhub-color-primary, currentColor);
}

/* Details-Link */
.eventhub-map-infowindow__link {
    display: inline-block;
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm);
    font-weight: 600;
    color: var(--eventhub-color-primary, currentColor);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.eventhub-map-infowindow__link:hover {
    opacity: 0.8;
}

/* Multi-Venue Header */
.eventhub-map-infowindow--multi .eventhub-map-infowindow__venue {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: inherit;
    font-size: var(--eventhub-font-size-base);
    font-weight: 700;
    margin: 0 0 0.15rem;
}

.eventhub-map-infowindow--multi
    .eventhub-map-infowindow__venue
    .eventhub-map-infowindow__venue-link {
    color: inherit;
}

.eventhub-map-infowindow--multi
    .eventhub-map-infowindow__venue
    .eventhub-map-infowindow__venue-link:hover {
    color: var(--eventhub-color-primary, currentColor);
}

.eventhub-map-infowindow--multi .eventhub-map-infowindow__count {
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
    margin: 0 0 var(--eventhub-spacing-md);
    padding-bottom: 0;
    border-bottom: none;
    box-shadow: none;
}

.eventhub-map-infowindow__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eventhub-map-infowindow__list li {
    padding: var(--eventhub-spacing-xs) 0;
    border-bottom: none;
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm);
}

.eventhub-map-infowindow__list li a {
    color: var(--eventhub-color-primary, currentColor);
    text-decoration: none;
}

.eventhub-map-infowindow__list li a:hover {
    text-decoration: underline;
}

.eventhub-map-infowindow__list li:last-child {
    border-bottom: none;
}

.eventhub-map-infowindow__more {
    color: var(--eventhub-color-text-muted);
    font-style: normal;
    padding-top: var(--eventhub-spacing-xs);
}

.eventhub-map-infowindow__more a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.eventhub-map-infowindow__more a:hover {
    color: var(--eventhub-color-primary, currentColor);
}

.eventhub-map-infowindow__more-icon {
    width: 0.9em;
    height: 0.9em;
    flex-shrink: 0;
}

/* ==========================================================================
   SKELETON LOADING
   ========================================================================== */

@keyframes eventhub-shimmer {
    0% {
        background-position: -20rem 0;
    }
    100% {
        background-position: 20rem 0;
    }
}

.eventhub-map-skeleton {
    display: flex;
    gap: var(--eventhub-spacing-sm);
    padding: var(--eventhub-spacing-sm);
    border-bottom: 1px solid var(--eventhub-color-border);
}

.eventhub-map-skeleton__image {
    width: 5rem;
    height: 3.75rem;
    border-radius: var(--eventhub-border-radius);
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        var(--eventhub-color-bg-alt) 25%,
        var(--eventhub-color-border) 50%,
        var(--eventhub-color-bg-alt) 75%
    );
    background-size: 40rem 100%;
    animation: eventhub-shimmer 1.5s infinite linear;
}

.eventhub-map-skeleton__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--eventhub-spacing-xs);
    justify-content: center;
}

.eventhub-map-skeleton__line {
    height: 0.75rem;
    border-radius: 0.25rem;
    background: linear-gradient(
        90deg,
        var(--eventhub-color-bg-alt) 25%,
        var(--eventhub-color-border) 50%,
        var(--eventhub-color-bg-alt) 75%
    );
    background-size: 40rem 100%;
    animation: eventhub-shimmer 1.5s infinite linear;
}

.eventhub-map-skeleton__line--title {
    width: 80%;
    height: 0.875rem;
}

.eventhub-map-skeleton__line--date {
    width: 50%;
}

.eventhub-map-skeleton__line--venue {
    width: 65%;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.eventhub-map-view__empty {
    padding: var(--eventhub-spacing-xl);
    text-align: center;
    color: var(--eventhub-color-text-muted);
    font-family: inherit;
}

/* ==========================================================================
   ERROR STATE
   ========================================================================== */

.eventhub-map-view__error {
    padding: var(--eventhub-spacing-xl);
    text-align: center;
    color: var(--eventhub-color-text-muted);
    font-family: inherit;
}

.eventhub-map-view__retry-btn {
    margin-top: var(--eventhub-spacing-md);
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm);
    cursor: pointer;
}

/* ==========================================================================
   NOSCRIPT FALLBACK
   ========================================================================== */

.eventhub-map-view__noscript {
    padding: var(--eventhub-spacing-xl);
    text-align: center;
    font-family: inherit;
}

/* ==========================================================================
   STATE-WECHSEL ANIMATIONEN
   ========================================================================== */

.eventhub-map-view__empty,
.eventhub-map-view__error {
    animation: eventhub-fade-in 0.2s ease;
}

@keyframes eventhub-fade-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   COUNTER TRANSITION
   ========================================================================== */

.eventhub-map-view__counter {
    transition: opacity 0.1s ease;
}

.eventhub-map-view__sidebar.is-loading .eventhub-map-view__counter {
    opacity: 0.4;
}

/* ==========================================================================
   MARKER BADGE
   ========================================================================== */

/* Location-Pin: Tropfenform mit Zahl im Kopf. */
/* Pins blenden ein, statt schlagartig dazustehen. Das erste Laden dauert
   zwangsläufig: erst Google Maps, dann der Abruf der Veranstaltungen – bis
   die Pins kommen, vergehen rund zwei Sekunden. Sie dann weich erscheinen zu
   lassen, kostet nichts und nimmt dem Moment die Härte.

   Bewusst nur opacity: transform ist hier die Anker-Positionierung (die
   Spitze sitzt auf der Koordinate), eine Animation darauf würde die Pins
   verschieben. */
@keyframes eventhub-map-pin-einblenden {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.eventhub-map-marker-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform var(--eventhub-transition);
    /* Spitze ist der Anker-Punkt. */
    transform: translateY(-50%);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    animation: eventhub-map-pin-einblenden 0.25s ease-out both;
}

.eventhub-map-marker-pin:hover {
    transform: translateY(-50%) scale(1.12);
}

.eventhub-map-marker-pin__head {
    background: var(--eventhub-color-primary, #0073aa);
    color: var(--eventhub-color-primary-contrast, #fff);
    border: 2px solid #fff;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm, 0.75rem);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.eventhub-map-marker-pin__tail {
    width: 0;
    height: 0;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
    border-top: 0.5rem solid var(--eventhub-color-primary, #0073aa);
    margin-top: -2px;
}

/* Aktiver Marker-Pin (Sidebar-Hover): einmaliger Bounce + Scale */
.eventhub-map-marker-pin--active {
    animation: eventhub-marker-bounce 0.4s ease;
    transform: translateY(-50%) scale(1.3);
    z-index: 9999 !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

@keyframes eventhub-marker-bounce {
    0% {
        transform: translateY(-50%) scale(1);
    }
    50% {
        transform: translateY(-50%) translateY(-0.75rem) scale(1.3);
    }
    100% {
        transform: translateY(-50%) scale(1.3);
    }
}

/* Cluster: Konzentrische Kreise, nach außen transparent. */
.eventhub-map-cluster {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(66, 133, 244, 0.15);
    cursor: pointer;
    transition: transform var(--eventhub-transition);
}

.eventhub-map-cluster::before {
    content: '';
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: rgba(66, 133, 244, 0.3);
}

.eventhub-map-cluster::after {
    content: '';
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: #4285f4;
}

.eventhub-map-cluster:hover {
    transform: scale(1.1);
}

.eventhub-map-cluster__count {
    position: relative;
    z-index: 1;
    color: #fff;
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm, 0.75rem);
    font-weight: 700;
    line-height: 1;
}

/* ==========================================================================
   FOCUS-VISIBLE (Keyboard Accessibility)
   ========================================================================== */

.eventhub-map-card:focus-visible {
    outline: 2px solid var(--eventhub-color-primary, #0073aa);
    outline-offset: -2px;
    background: var(--eventhub-color-bg-alt);
}

.eventhub-map-control:focus-visible {
    outline: 2px solid var(--eventhub-color-primary, #0073aa);
    outline-offset: 2px;
}

.eventhub-map-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.eventhub-map-slider__card:focus-visible {
    outline: 2px solid var(--eventhub-color-primary, #0073aa);
    outline-offset: -2px;
}

.eventhub-filter__toggle-more:focus-visible {
    outline: 2px solid var(--eventhub-color-primary, #0073aa);
    outline-offset: 2px;
}

.eventhub-map-view__retry-btn:focus-visible {
    outline: 2px solid var(--eventhub-color-primary, #0073aa);
    outline-offset: 2px;
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .eventhub-map-skeleton__image,
    .eventhub-map-skeleton__line {
        animation: none;
        background: var(--eventhub-color-bg-alt);
    }

    .eventhub-map-view__empty,
    .eventhub-map-view__error {
        animation: none;
    }

    .eventhub-map-marker-pin {
        transition: none;
        animation: none;
    }

    .eventhub-map-marker-pin--active {
        animation: none;
    }
}

/* ==========================================================================
   BACK-LINK
   ========================================================================== */

.eventhub-map-view__back-link {
    padding: var(--eventhub-spacing-md);
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm);
}

/* ==========================================================================
   VIEW-TOGGLE LINK (Archiv → Karte)
   ========================================================================== */

/* View-Switcher über dem Consent-Overlay halten (z-index: 10). */
.eventhub-map-view > .eventhub-view-switcher {
    position: relative;
    z-index: 150;
}

.eventhub-view-toggle {
    display: flex;
    justify-content: flex-end;
    padding: var(--eventhub-spacing-sm) 0;
}

.eventhub-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--eventhub-spacing-xs);
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
    text-decoration: none;
    transition: color var(--eventhub-transition);
}

.eventhub-view-toggle__btn:hover {
    color: var(--eventhub-color-primary);
}

.eventhub-view-toggle__icon {
    flex-shrink: 0;
}

/* ==========================================================================
   FILTER-BAR MAP-VARIANTE
   ========================================================================== */

.eventhub-filter--map {
    padding: var(--eventhub-spacing-sm) var(--eventhub-spacing-md);
    border-bottom: 1px solid var(--eventhub-color-border);
    font-family: inherit;
}

/* Mobile: Kompakteres Filter-Padding. */
@media (max-width: 767px) {
    .eventhub-filter--map {
        padding: var(--eventhub-spacing-xs, 0.25rem)
            var(--eventhub-spacing-sm, 0.5rem);
    }
}

.eventhub-filter--map .eventhub-filter__row--compact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eventhub-spacing-sm);
    align-items: center;
}

.eventhub-filter--map .eventhub-filter__row--map-actions {
    display: flex;
    gap: var(--eventhub-spacing-sm);
    align-items: center;
    /* margin-top: var(--eventhub-spacing-xs); */
}

.eventhub-filter__checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--eventhub-spacing-xs);
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text);
    cursor: pointer;
    white-space: nowrap;
}

/* ==========================================================================
   CONSENT-PLACEHOLDER (Borlabs Cookie V3 Integration)
   Wird angezeigt wenn noch kein Consent für Google Maps erteilt wurde.
   ========================================================================== */

.eventhub-map-consent {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--eventhub-color-bg-alt, #f5f5f5);
    border-radius: var(--eventhub-border-radius-lg, 8px);
    text-align: center;
    padding: var(--eventhub-spacing-lg);
    overflow-y: auto;
}

/* hidden-Attribut muss display:flex überschreiben. */
.eventhub-map-consent[hidden] {
    display: none;
}

.eventhub-map-consent__inner {
    max-width: 28rem;
}

.eventhub-map-consent__icon {
    color: var(--eventhub-color-text-muted, #666);
    margin-bottom: var(--eventhub-spacing-md);
    opacity: 0.6;
}

.eventhub-map-consent__title {
    font-family: inherit;
    font-size: var(--eventhub-font-size-lg, 1.25rem);
    font-weight: 600;
    color: var(--eventhub-color-text, inherit);
    margin: 0 0 var(--eventhub-spacing-sm);
}

.eventhub-map-consent__text {
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm, 0.875rem);
    color: var(--eventhub-color-text-muted, #666);
    line-height: var(--eventhub-line-height, 1.5);
    margin: 0 0 var(--eventhub-spacing-lg);
}

.eventhub-map-consent__button {
    display: inline-block;
    background: var(--eventhub-color-primary, #0073aa);
    color: var(--eventhub-color-primary-contrast, #fff);
    border: none;
    border-radius: var(--eventhub-border-radius-pill, 1.5rem);
    padding: var(--eventhub-spacing-sm) var(--eventhub-spacing-xl);
    font-family: inherit;
    font-size: var(--eventhub-font-size-base, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--eventhub-transition, 0.2s ease);
}

.eventhub-map-consent__button:hover {
    opacity: 0.85;
}

/* Buttons-Container: vertikal gestapelt, zentriert. */
.eventhub-map-consent__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--eventhub-spacing-sm);
    align-items: center;
}

.eventhub-map-consent__privacy-link {
    display: block;
    margin-top: var(--eventhub-spacing-sm);
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm, 0.875rem);
    color: var(--eventhub-color-text-muted, #666);
}

/* ==========================================================================
   MOBILE-TOGGLE BUTTON (nur mobile sichtbar)
   ========================================================================== */

.eventhub-map-toggle {
    position: fixed;
    bottom: var(--eventhub-spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--eventhub-color-primary, #0073aa);
    color: var(--eventhub-color-primary-contrast, #fff);
    border: none;
    border-radius: var(--eventhub-border-radius-pill, 1.5rem);
    padding: var(--eventhub-spacing-sm) var(--eventhub-spacing-xl, 2rem);
    font-family: inherit;
    font-size: var(--eventhub-font-size-base);
    font-weight: var(--eventhub-font-weight-semibold);
    box-shadow: var(--eventhub-card-shadow-hover);
    cursor: pointer;
    display: none;
    white-space: nowrap;
}

/* Eigener Hover-Zustand. Themes setzen häufig global button:hover – Unicon
   etwa auf #333 – und das schlägt mit (0,1,1) die Klasse hier (0,1,0). Auf
   Touch-Geräten bleibt Hover nach dem Antippen am Element haften, der Knopf
   wäre danach dauerhaft grau statt in der Primärfarbe. */
.eventhub-map-toggle:hover,
.eventhub-map-toggle:focus {
    background: var(--eventhub-color-primary, #0073aa);
    color: var(--eventhub-color-primary-contrast, #fff);
}

/* Echter Zeiger vorhanden: dezente Abdunklung als Rückmeldung. Über eine
   Hover-Query, damit der Zustand auf Touch gar nicht erst entsteht. */
@media (hover: hover) {
    .eventhub-map-toggle:hover {
        filter: brightness(0.92);
    }
}

/* ==========================================================================
   MOBILE CARD-SLIDER
   ========================================================================== */

.eventhub-map-slider {
    display: none;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    max-width: 100%;
    box-sizing: border-box;

    /* Breite einer Slider-Card, an genau einer Stelle. Die Rand-Regel weiter
       unten rechnet damit; beides muss zusammenpassen, sonst rasten erste und
       letzte Card nicht mittig ein. */
    --eventhub-map-slider-card-width: min(85%, 20rem);
}

.eventhub-map-slider::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.eventhub-map-slider__card {
    scroll-snap-align: center;
    flex: 0 0 var(--eventhub-map-slider-card-width);
    background: var(--eventhub-color-bg-input, inherit);
    border-radius: var(--eventhub-border-radius);
    box-shadow: var(--eventhub-card-shadow-hover);
    overflow: hidden;
    display: flex;
    font-family: inherit;
    position: relative;

    /* Hier stand content-visibility: auto (plus contain-intrinsic-size), um
       beim Wischen nur die sichtbaren Cards zu zeichnen. In Chrome brachte das
       viel – p95 der Frame-Zeit 58 → 17 ms – auf iOS aber war es unbrauchbar:
       Safari stuft die Cards im position:fixed-Slider viel aggressiver als
       "außerhalb" ein. Beim Laden erschienen gar keine Cards (nur die Pins und
       der Umschalt-Knopf), beim Scrollen verschwanden sie kurz und kamen
       wieder, und zuverlässig da waren sie erst nach einem Wechsel
       Liste → Karte, der ein Re-Layout erzwingt. Getestet am 2026-09-06.

       Wer es erneut versucht: nicht ohne iOS-Gerät, und der Slider müsste die
       Cards wohl selbst begrenzen (nur die Treffer in der Nähe im DOM halten)
       statt sich auf den Browser zu verlassen. */
}

/* Platzhalter im Slider, solange die Veranstaltungen noch laden.
   Geometrie wie eine echte Slider-Card (320x96 px), damit beim Austausch
   nichts springt. Der Shimmer kommt aus den vorhandenen
   .eventhub-map-skeleton__*-Bausteinen, die auch die Sidebar-Liste nutzt –
   samt deren Abschaltung unter prefers-reduced-motion. Sichtbar nur mobil,
   weil der Slider selbst nur dort angezeigt wird. */
.eventhub-map-slider__skeleton {
    scroll-snap-align: center;
    flex: 0 0 var(--eventhub-map-slider-card-width);
    height: 6rem;
    box-sizing: border-box;
    display: flex;
    gap: var(--eventhub-spacing-sm);
    padding: var(--eventhub-spacing-sm);
    background: var(--eventhub-color-bg-input, #fff);
    border-radius: var(--eventhub-border-radius);
    box-shadow: var(--eventhub-card-shadow-hover);
    overflow: hidden;
}

/* Das Bild füllt in der echten Card die volle Höhe – hier genauso, statt
   der festen 3.75rem aus der Listen-Variante. */
.eventhub-map-slider__skeleton .eventhub-map-skeleton__image {
    height: auto;
    align-self: stretch;
}

/* Erste und letzte Card mittig einrasten lassen.

   scroll-snap-align: center kann nur zentrieren, soweit der Scrollbereich es
   hergibt: ohne Rand liegt die erste Card bei scrollLeft 0 am linken und die
   letzte am rechten Displayrand. Beide standen damit nie dort, wohin die
   Karte pannt – nur bei ihnen sprang die Auswahl an den Bildschirmrand. Der
   Rand ist genau die halbe Restbreite, dann fällt die Card-Mitte auf die
   Slider-Mitte. Ein gap ist nicht abzuziehen: vor der ersten und nach der
   letzten Card setzt Flexbox keine Lücke.

   Bewusst als Rand am Kind statt als Innenabstand am Slider: Prozentwerte
   beziehen sich auf dessen Content-Box, ein padding würde also auch die
   Card-Breite (85 %) verkleinern und die Rechnung in sich drehen. Ein
   Pseudoelement als Platzhalter scheidet ebenfalls aus, ::after ist hier
   bereits der weiße Verlauf unter dem Slider.

   Der Selektor trifft absichtlich jedes Kind: beim Laden sind das die
   Platzhalter, danach die Cards. */
.eventhub-map-slider > :first-child {
    margin-inline-start: max(
        0px,
        calc((100% - var(--eventhub-map-slider-card-width)) / 2)
    );
}

.eventhub-map-slider > :last-child {
    margin-inline-end: max(
        0px,
        calc((100% - var(--eventhub-map-slider-card-width)) / 2)
    );
}

/* Favoriten-Button rechts oben in der Slider-Card. */
.eventhub-map-slider__card-fav.eventhub-favorite-btn--card {
    position: absolute;
    top: var(--eventhub-spacing-xs, 0.25rem);
    right: var(--eventhub-spacing-xs, 0.25rem);
    z-index: 5;
    padding: 0.15rem;
}

.eventhub-map-slider__card-image {
    width: 5rem;
    flex-shrink: 0;
}

.eventhub-map-slider__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eventhub-map-slider__card-body {
    padding: var(--eventhub-spacing-sm);
    overflow: hidden;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    min-width: 0;
}

.eventhub-map-slider__card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-size: var(--eventhub-font-size-sm);
}

.eventhub-map-slider__card-date {
    display: block;
    color: var(--eventhub-color-text-muted, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eventhub-map-slider__card-venue {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.eventhub-map-slider__card-venue-icon {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
}

/* Status-Badge in Slider-Card (inline neben Datum) */
.eventhub-map-slider__card-date .eventhub-badge--inline {
    font-size: 0.625rem;
    padding: 0.1rem 0.3rem;
    margin-left: 0.375rem;
    vertical-align: middle;
}

/* Status-Badge im InfoWindow (inline neben Datum) */
.eventhub-map-infowindow__date .eventhub-badge--inline {
    font-size: 0.6875rem;
    padding: 0.1rem 0.35rem;
    margin-left: 0.375rem;
    vertical-align: middle;
}

/* ==========================================================================
   AKTIVE SLIDER-CARD
   ========================================================================== */

.eventhub-map-slider__card--active {
    box-shadow:
        0 0 0 3px var(--eventhub-color-primary, #0073aa),
        0 0 14px 2px rgba(0, 115, 170, 0.35),
        var(--eventhub-card-shadow-hover);
    transform: scale(1.05);
    z-index: 2;
}

/* Nicht-aktive Cards abdimmen wenn eine aktive existiert.

   Die Deckkraft sitzt auf den Kindern, nicht auf der Card selbst: opacity
   trifft immer das ganze Element, also auch deren weißen Hintergrund – die
   Landkarte scheint dann mitten durch die Card. Früher fiel das nicht auf,
   weil der weiße Verlauf des Sliders dahinter lag (Weiß auf Weiß). So
   bleibt der Kartengrund deckend, und nur Bild und Text treten zurück. */
.eventhub-map-slider:has(.eventhub-map-slider__card--active)
    .eventhub-map-slider__card:not(.eventhub-map-slider__card--active) {
    transform: scale(0.97);
}

.eventhub-map-slider:has(.eventhub-map-slider__card--active)
    .eventhub-map-slider__card:not(.eventhub-map-slider__card--active)
    > * {
    opacity: 0.6;
}

/* Eigener Übergang statt --eventhub-transition (0.2s ease): Der Aktiv-Zustand
   wandert seit dem Umbau schon während des Scrollens mit und wechselt bei
   halber Strecke zur nächsten Card – gemessen rund 230 ms vor dem Einrasten.
   Mit 0.2s ease schlägt er in dieser Bewegung hart durch und wirkt deshalb wie
   ein Sprung am Ende. Die längere Dauer und die abflachende Kurve legen den
   Wechsel über den Rest der Bewegung. Bewusst nur hier gesetzt: der globale
   Wert gilt im ganzen Plugin. */
.eventhub-map-slider__card {
    transition:
        transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Die Deckkraft sitzt auf den Kindern (siehe oben), der Übergang gehört
   deshalb ebenfalls dorthin. */
.eventhub-map-slider__card > * {
    transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Der Block weiter oben deckt die Slider-Cards nicht ab – mit der deutlicheren
   Bewegung gehören sie jetzt dazu. */
@media (prefers-reduced-motion: reduce) {
    .eventhub-map-slider__card,
    .eventhub-map-slider__card > * {
        transition: none;
    }
}

/* ==========================================================================
   MOBILE (< 768px)
   ========================================================================== */

@media (max-width: 767px) {
    /* Volle Viewport-Höhe nutzen auf Mobile. */
    .eventhub-map-view {
        height: calc(100dvh - var(--eventhub-map-header-offset, 3.75rem));
    }

    .eventhub-map-view__body {
        flex-direction: column;
        position: relative;
    }

    /* Karte fullscreen mit Mindesthöhe. */
    .eventhub-map-view__map {
        width: 100%;
        height: 100%;
        min-height: 45vh;
        position: absolute;
        top: 0;
        left: 0;
    }

    /* Sidebar fullscreen (versteckt wenn Karte aktiv). */
    .eventhub-map-view__sidebar {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: var(--eventhub-color-bg-input, inherit);
        z-index: 5;
        display: none;
        border-right: none;
    }

    .eventhub-map-view--show-list .eventhub-map-view__sidebar {
        display: block;
    }

    .eventhub-map-view--show-list .eventhub-map-view__map {
        display: none;
    }

    /* Toggle-Button sichtbar + Safe-Area. */
    .eventhub-map-toggle {
        display: block;
        bottom: calc(
            var(--eventhub-spacing-lg) + env(safe-area-inset-bottom, 0px)
        );
    }

    /* Mobile Slider (horizontaler Card-Strip am unteren Rand) + Safe-Area.
       Padding-block schafft Platz fuer den Box-Shadow der aktiven Card,
       damit er nicht vom overflow geclippt wird. */
    .eventhub-map-slider {
        position: fixed;
        bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
        z-index: 50;
        overflow: hidden auto;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        display: flex;
        gap: var(--eventhub-spacing-sm);
        padding: 2rem 0;
        scroll-padding: 0 var(--eventhub-spacing-md);
        box-sizing: border-box;
        contain: inline-size;
        background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.7) 10%,
            rgba(255, 255, 255, 0.7) 90%,
            rgba(255, 255, 255, 0) 100%
        );
    }

    /* Weißer Verlauf unterhalb des Sliders bis zum Seitenboden –
       verdeckt durchscheinende Elemente (Footer-Links etc.). */
    .eventhub-map-slider::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(4.25rem + env(safe-area-inset-bottom, 0px));
        z-index: -1;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 1) 100%
        );
        pointer-events: none;
    }

    /* Slider-Hintergrund ausblenden wenn keine Cards vorhanden. */
    .eventhub-map-slider[hidden],
    .eventhub-map-slider:empty {
        background: none;
    }

    /* Consent-Overlay: Aus Map-Canvas ausbrechen, gesamten Body ueberlagern.
       So hat der Consent genug Platz fuer Icon, Text und Button. */
    .eventhub-map-consent {
        position: fixed;
        inset: 0;
        z-index: 101;
        border-radius: 0;
        padding: var(--eventhub-spacing-lg) var(--eventhub-spacing-md);
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    .eventhub-map-consent__inner {
        margin: auto;
    }

    .eventhub-map-consent__icon {
        width: 40px;
        height: 40px;
    }

    /* Geolocation-Button auf Mobile: Etwas Luft zum oberen Rand,
       damit er nicht direkt an der Filter-Bar klebt.
       (Position selbst kommt aus initMap → RIGHT_TOP.) */
    .eventhub-map-control--geolocation {
        margin-top: 10px;
    }

    .eventhub-map-view--show-list .eventhub-map-slider {
        display: none;
    }

    /* Filter-Bar: Alle Filter direkt sichtbar auf Mobile. */
    .eventhub-filter--map .eventhub-filter__row--compact {
        display: flex;
        flex-wrap: wrap;
        gap: var(--eventhub-spacing-xs);
    }

    /* Suchfeld: nimmt restlichen Platz neben dem Toggle-Button. */
    .eventhub-filter--map .eventhub-filter__group--search {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    /* Zeitraum-Legend: gleicher Stil wie Suche/Kategorie-Labels. */
    .eventhub-filter--map .eventhub-filter__group--timeframe > legend {
        float: left;
        width: auto;
        padding: 0;
        margin-right: var(--eventhub-spacing-sm);
        line-height: 1;
        margin-bottom: 0;
    }

    /* "Mehr Filter"-Toggle auf Mobile ausblenden – alles sofort sichtbar. */
    .eventhub-filter__toggle-more {
        display: none;
    }

    /* Mobile-Toggle-Button für Map-Filter: nur auf Mobile sichtbar. */
    .eventhub-filter-mobile-toggle--map {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 2.5rem;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--eventhub-color-primary, #0073aa);
        color: var(--eventhub-color-primary-contrast, #fff);
        cursor: pointer;
        transition: all var(--eventhub-transition, 0.2s ease);
    }

    /* Im ausgeklappten Zustand: dezent grau. */
    .eventhub-filter-mobile-toggle--map.is-active {
        background: var(--eventhub-color-bg-alt, #f0f0f0);
        color: var(--eventhub-color-text-muted, #666);
    }

    /* Mobile: Kategorie, Zeitraum und Actions-Zeile verstecken. */
    .eventhub-filter--map .eventhub-filter__group--category,
    .eventhub-filter--map .eventhub-filter__group--timeframe,
    .eventhub-filter--map .eventhub-filter__row--map-actions {
        display: none;
    }

    /* Wenn Filter aufgeklappt: alles zeigen. */
    .eventhub-filter--map.map-filters-expanded
        .eventhub-filter__group--category {
        display: flex;
        flex: 1 0 100%;
        min-width: 0;
        width: auto;
    }

    .eventhub-filter--map.map-filters-expanded
        .eventhub-filter__group--timeframe {
        display: block;
        flex: 1 0 100%;
        margin-top: var(--eventhub-spacing-sm, 0.5rem);
    }

    .eventhub-filter--map.map-filters-expanded
        .eventhub-filter__row--map-actions {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--eventhub-spacing-sm);
    }

    /* Top-Events / Actions-Gruppe nach rechts schieben. */
    .eventhub-filter__row--map-actions .eventhub-filter__group--actions {
        margin-left: auto;
    }

    .eventhub-filter__row--map-actions.is-open {
        display: flex;
    }

    /* Back-Link ausblenden (Platz sparen). */
    .eventhub-map-view__back-link {
        display: none;
    }
}

/* ==========================================================================
   MOBILE LANDSCAPE
   ========================================================================== */

@media (max-width: 767px) and (orientation: landscape) {
    /* Gesamthöhe maximieren – Header-Offset reduzieren. */
    .eventhub-map-view {
        height: calc(
            100vh - var(--eventhub-map-header-offset-landscape, 2.5rem)
        );
    }

    /* Slider kompakter machen. Die schmalere Card-Breite steckt in der
       Variable, damit die Ränder für das mittige Einrasten mitwandern. */
    .eventhub-map-slider {
        bottom: calc(2.75rem + env(safe-area-inset-bottom, 0px));
        --eventhub-map-slider-card-width: min(60%, 15rem);
    }

    /* Toggle-Button kompakter. */
    .eventhub-map-toggle {
        bottom: calc(
            var(--eventhub-spacing-sm) + env(safe-area-inset-bottom, 0px)
        );
        padding: var(--eventhub-spacing-xs) var(--eventhub-spacing-md);
        font-size: var(--eventhub-font-size-sm);
    }

    /* Filter-Aktions-Zeile auf Landscape ausblenden (Platz sparen). */
    .eventhub-filter--map .eventhub-filter__row--map-actions {
        display: none;
    }
}

/* ==========================================================================
   DESKTOP-ONLY (>= 768px)
   ========================================================================== */

@media (min-width: 768px) {
    .eventhub-map-view__sidebar {
        width: 40%;
    }

    .eventhub-map-view__map {
        width: 60%;
    }

    .eventhub-map-toggle {
        display: none !important;
    }

    .eventhub-map-slider {
        display: none !important;
    }

    /* Desktop: "Mehr Filter"-Button ausblenden, Zeile immer sichtbar. */
    .eventhub-filter__toggle-more {
        display: none;
    }

    /* Desktop: Mobile-Toggle-Button für Map-Filter ausblenden. */
    .eventhub-filter-mobile-toggle--map {
        display: none;
    }
}