/* ==========================================================================
   EventHub Theme Overrides - Lust auf Leverkusen
   EDITORIAL / MAGAZIN STYLE
   ========================================================================== */

:root {
    /* Theme-Farben mit dark/light Varianten */

    /* Base Colors */
    --lev-white: #ffffff;
    --lev-black: #1a1a1a;

    /* Pink (Primary) */
    --lev-pink: #cb0950;
    --lev-pink-dark: #a00740;
    --lev-pink-light: #fdf0f4;

    /* Blue */
    --lev-blue: #4597cf;
    --lev-blue-dark: #2d7ab5;
    --lev-blue-light: #e8f4fc;

    /* Green */
    --lev-green: #9ec834;
    --lev-green-dark: #7da329;
    --lev-green-light: #f4f9e8;

    /* Orange */
    --lev-orange: #ec6608;
    --lev-orange-dark: #c45406;
    --lev-orange-light: #fef3e8;

    /* Grey */
    --lev-grey: #555555;
    --lev-grey-dark: #333333;
    --lev-grey-medium: #d8d8d8;
    --lev-grey-light-medium: #e9e9e9;
    --lev-grey-light: #f5f5f5;
    --lev-grey-lighter: #f1f2f6;

    /* UI Elements */
    --lev-border: #dfe6e9;
    --lev-scrollbar: #cbd5e0;
    --lev-scrollbar-hover: #a0aec0;
    --lev-hover: #e6e6e6;

    /* Hero Badge-Breiten (Badge + Column müssen übereinstimmen) */
    --hero-badge-width: 120px;
    --hero-badge-width-tablet: 90px;
    --hero-badge-width-mobile: 75px;

    /* =======================================================================
       FLUID DESIGN SYSTEM - Event Cards

       Formel: clamp(MIN, PREFERRED, MAX)
       - MIN: Untergrenze (nie kleiner, bleibt lesbar)
       - PREFERRED: Fließender Wert (basierend auf Container-Breite)
       - MAX: Obergrenze (wird nie größer)
       ======================================================================= */

    /* === FLUID FONT SIZES === */
    /* Titel: 1.1rem (17.6px) bis 1.35rem (21.6px) - größer & besser lesbar */
    --lev-card-title-size: clamp(1.1rem, 1rem + 0.6cqi, 1.35rem);

    /* Meta-Text (Wochentag, Uhrzeit): 0.9rem bis 1.05rem */
    --lev-card-meta-size: clamp(0.9rem, 0.85rem + 0.5cqi, 1.05rem);

    /* Venue-Text: 0.9rem bis 1.05rem */
    --lev-card-venue-size: clamp(0.9rem, 0.85rem + 0.5cqi, 1.05rem);

    /* Badge-Text (Kategorie, Kostenlos, Tickets): 0.7rem bis 0.8rem */
    --lev-card-badge-size: clamp(0.7rem, 0.75rem + 0.25cqi, 0.8rem);

    /* Datum-Overlay Tag: 1.75rem bis 2.5rem */
    --lev-card-date-day-size: clamp(1.75rem, 1.5rem + 2.5cqi, 2.5rem);

    /* Datum-Overlay Monat: 0.75rem bis 1.1rem */
    --lev-card-date-month-size: clamp(0.75rem, 0.75rem + 0.8cqi, 1.1rem);

    /* Highlight-Label */
    --lev-card-highlight-size: clamp(0.75rem, 0.65rem + 0.4cqi, 0.9rem);

    /* === FLUID SPACING === */
    /* Card Content Padding */
    --lev-card-padding: clamp(12px, 10px + 1.5cqi, 18px);
    --lev-card-padding-left: clamp(50px, 40px + 3cqi, 60px);

    /* Badge Padding */
    --lev-card-badge-padding-y: clamp(5px, 6px + 0.5cqi, 12px);
    --lev-card-badge-padding-x: clamp(10px, 10px + 0.8cqi, 20px);

    /* Gap zwischen Elementen */
    --lev-card-gap: clamp(4px, 3px + 0.8cqi, 8px);

    /* === FLUID SIZES === */
    /* Datum-Badge Breite */
    --lev-card-date-width: clamp(55px, 45px + 4cqi, 70px);
    --lev-card-date-padding: clamp(10px, 8px + 1cqi, 14px);

    /* Icon-Größen */
    --lev-card-icon-size: clamp(14px, 12px + 0.8cqi, 18px);

    /* Date Wrapper Position */
    --lev-card-date-left: clamp(12px, 10px + 1cqi, 16px);

    /* Content Overlap */
    --lev-card-content-overlap: clamp(-15px, -12px - 1cqi, -20px);
}

body {
    --eventhub-color-primary: var(--lev-pink);
    --eventhub-color-free: var(--lev-green);
    --eventhub-border-radius: 4px;

    /* Favoriten-Button: Theme-Pink statt Standard-Rot */
    --eventhub-favorite-color-active: var(--lev-pink);
}

/* ==========================================================================
   EVENTHUB WRAPPER - Zentrale Definition
   Alle Wrapper-Styles hier konsolidiert (nicht verstreut in der Datei!)
   body-Präfix erhöht Spezifität um Plugin-Defaults zu überschreiben
   ========================================================================== */

body .eventhub-wrapper {
    padding: 1.5rem 3rem;
    overflow: visible; /* Für negative Margins (Hero-Breakout) und Dropdowns */
}

@media (max-width: 992px) {
    body .eventhub-wrapper {
        padding: 1.5rem 1.25rem;
    }
}

@media (max-width: 767px) {
    body .eventhub-wrapper {
        padding: 1rem;
        padding-bottom: 0;
        margin-top: 0;
    }
}

/* Merkliste-Pill im Slider: Herz in Pink */
.eventhub-wrapper .eventhub-favorites-pill__icon {
    color: var(--lev-pink);
}

/* ==========================================================================
   ALLGEMEINE STYLES FÜR EVENTHUB SEITEN
   ========================================================================== */

/* Sticky Kalender-Button auf EventHub-Seiten ausblenden */
body.eventhub-page .sticky__event_btn,
body.eventhub-page .ssb-btns-right {
    display: none !important;
}

@media (max-width: 767px) {
    body.eventhub-page .blog-page #content {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Fix: Unicon Theme setzt overflow: unset und contain: content auf .blog-page article, das schneidet negative Margins ab */
.blog-page article.eventhub_events,
.blog-page article.eventhub_venues,
.blog-page article.eventhub_organizers,
.blog-page article.eventhub_series,
.blog-page article.eventhub_category,
.blog-page article.eventhub_district,
.blog-page article.eventhub_tag {
    overflow: visible !important;
    contain: none !important;
}

/* ==========================================================================
   FAVORITEN/MERKLISTE-SEITE
   ========================================================================== */

/* Breakout: Weißer Hintergrund bis ganz oben (wie bei Hero-Elementen) */
/*
.eventhub-wrapper:has(.eventhub-favorites-page) {
    background: var(--lev-white);
    margin-top: -1.5rem;
    padding-top: 1.5rem;
}

@media (max-width: 992px) {
    .eventhub-wrapper:has(.eventhub-favorites-page) {
        margin-top: -1rem;
        padding-top: 1rem;
    }
}

@media (max-width: 767px) {
    .eventhub-wrapper:has(.eventhub-favorites-page) {
        margin-top: -1rem;
        padding-top: 1rem;
    }
} */

.eventhub-wrapper .eventhub-favorites-page {
    background: var(--lev-white);
    min-height: 60vh; /* Mindesthöhe um Footer-Durchscheinen zu verhindern */
    padding-bottom: var(--eventhub-spacing-xl, 2rem);
}

/* Hinweis-Box in Theme-Farben */
.eventhub-wrapper .eventhub-favorites-page__past-notice {
    background: var(--lev-pink-light);
    border-left-color: var(--lev-pink);
}

.eventhub-wrapper .eventhub-event-list__heading-text,
.eventhub-wrapper .eventhub-section-title,
.eventhub-wrapper .eventhub-running-events__heading {
    color: var(--lev-grey);
}

.eventhub-wrapper .eventhub-favorite-btn--card {
    top: var(--lev-card-date-left);
    right: var(--lev-card-date-left);
    width: 26px;
    height: 26px;
}

/* ==========================================================================
   SINGLE EVENT HERO - Editorial Style
   Magazin-Layout passend zu Event-Cards
   ========================================================================== */

/* Container: Breakout für Edge-to-Edge Bild */
.eventhub-wrapper .eventhub-hero-editorial,
.eventhub-wrapper .eventhub-archive-header__image {
    position: relative;
    background: var(--lev-white);
    margin: -1.5rem -3rem 0 -3rem; /* Breakout aus Wrapper-Padding */
    width: calc(100% + 6rem);
    border-radius: 0;
}

/* NO-IMAGE: Styles sind zentral in der NO-IMAGE VARIANTE Sektion definiert (ca. Zeile 5545) */

/* ==========================================================================
   HERO-BILD (16:9) - Edge-to-Edge
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: visible; /* Erlaubt Badge/Button Überlappung */
    background: var(--lev-grey-light);
}

.eventhub-wrapper .eventhub-hero-editorial__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eventhub-wrapper .eventhub-hero-editorial__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--lev-pink-light) 0%,
        var(--lev-white) 100%
    );
    color: var(--lev-pink);
}

.eventhub-wrapper .eventhub-hero-editorial__image-placeholder .dashicons {
    font-size: 80px;
    width: 80px;
    height: 80px;
    opacity: 0.4;
}

/* ==========================================================================
   DATUMS-BADGE (Pinkes Trapez, ragt ins Bild)
   Eingerückt vom Rand (Container-Padding), halb im Bild
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__date-badge {
    position: absolute;
    bottom: 0;
    left: 3rem; /* Container-Padding Einrückung */
    z-index: 10;
    transform: translateY(50%); /* Halb im Bild, halb im Content */
}

.eventhub-wrapper .eventhub-hero-editorial__date-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--lev-pink);
    color: var(--lev-white);
    padding: 20px 20px 18px 20px;
    width: var(--hero-badge-width);
    box-sizing: border-box;
    clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%);
    /* filter: drop-shadow(0 4px 15px rgba(203, 9, 80, 0.4)); */
}

.eventhub-wrapper .eventhub-hero-editorial__date-day {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.eventhub-wrapper .eventhub-hero-editorial__date-month {
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
    opacity: 0.9;
}

/* ==========================================================================
   TICKET-BUTTON (halb im Bild, halb im Weißen - rechts)
   Eingerückt vom Rand (Container-Padding)
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__ticket-button {
    position: absolute;
    bottom: 0;
    right: 3rem; /* Container-Padding Einrückung */
    z-index: 10;
    transform: translateY(50%); /* Halb im Bild, halb im Content */

    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--lev-pink);
    color: var(--lev-white);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(203, 9, 80, 0.35);
}

@media (hover: hover) {
    .eventhub-hero-editorial__ticket-button:hover {
        background: var(--lev-pink-dark);
        color: var(--lev-white);
        text-decoration: none;
        transform: translateY(50%) scale(1.03);
        box-shadow: 0 6px 25px rgba(203, 9, 80, 0.45);
    }
}

.eventhub-wrapper .eventhub-hero-editorial__ticket-button .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
}

/* ==========================================================================
   COPYRIGHT-HINWEIS (rechter Rand, 90° gedreht, vertikal am Bild entlang)
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__copyright {
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 5;
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    padding: 2px 4px;
    border-radius: 0px;
    white-space: nowrap;

    /* Positionierung rechts unten, vertikal */
    transform-origin: 100% 100%;
    transform: rotate(-90deg) translateX(100%);

    /* Rendering-Opimierung für scharfe Schrift */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    will-change: transform;
}

/* ==========================================================================
   CONTENT-BEREICH (unter dem Bild)
   Zwei-Spalten-Layout: Badge-Spalte links | Main-Spalte rechts
   Main-Spalte startet auf Höhe des unteren Badge-Endes
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__content {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 0 3rem 2rem 3rem;
    min-height: 120px; /* Mindesthöhe für Layout-Stabilität */
}

/* NO-IMAGE: Kein zusätzliches Padding, kein Min-Height */
.eventhub-wrapper
    .eventhub-hero-editorial--no-image
    .eventhub-hero-editorial__content {
    padding: 0;
    min-height: 0;
}

/* Badge-Spalte (links) - exakt so breit wie Datums-Badge */
.eventhub-wrapper .eventhub-hero-editorial__badge-column {
    flex: 0 0 var(--hero-badge-width);
    min-width: var(--hero-badge-width);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* Oberer Teil ist für überlappendes Datums-Badge reserviert */
    padding-top: calc(45px + 0.75rem); /* Halbe Badge-Höhe + Abstand */
}

/* Kostenlos-Badge */
.eventhub-wrapper .eventhub-hero-editorial__free-badge {
    background: var(--lev-green);
    color: var(--lev-white);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 0;
    border-radius: 4px;
    text-align: center;
    margin-top: 1rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(158, 200, 52, 0.35);
}

/* Main-Spalte (rechts) - Content auf Höhe des unteren Badge-Endes */
.eventhub-wrapper .eventhub-hero-editorial__main-column {
    flex: 1;
    min-width: 0;
    /* Datum-Zeile soll auf Höhe des unteren Badge-Endes starten */
    padding-top: calc(
        25px - 1rem
    ); /* Halbe Badge-Höhe minus Offset für Ausrichtung */
}

/* ==========================================================================
   STATUS-BADGE INLINE (in Meta-Zeile: Abgesagt, Verschoben, Ausverkauft)
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__status-inline {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25em 0.75em;
    border-radius: 4px;
    /* Baseline-Ausrichtung: Badge-Text soll auf Textlinie sitzen */
    align-self: center;
}

/* Kostenlos-Badge INLINE (nur auf Mobile sichtbar, neben Status) */
.eventhub-wrapper .eventhub-hero-editorial__free-badge-inline {
    display: none; /* Auf Desktop ausgeblendet */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25em 0.75em;
    border-radius: 4px;
    background: var(--lev-green);
    color: var(--lev-white);
}

/* Abgesagt - Rot */
.eventhub-wrapper .eventhub-hero-editorial__status-inline--cancelled {
    background: var(--lev-pink);
    color: var(--lev-white);
}

/* Verschoben - Orange */
.eventhub-wrapper .eventhub-hero-editorial__status-inline--postponed {
    background: var(--lev-orange);
    color: var(--lev-white);
}

/* Ausverkauft - Grau */
.eventhub-wrapper .eventhub-hero-editorial__status-inline--soldout {
    background: var(--lev-grey);
    color: var(--lev-white);
}

/* ==========================================================================
   META-ZEILE (Datum ausführlich + Uhrzeit)
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0;
    font-size: 1.4rem;
    color: var(--lev-grey);
    text-transform: uppercase;
}

.eventhub-wrapper .eventhub-hero-editorial__date-full {
    font-weight: 600;
    color: var(--lev-pink);
}

.eventhub-wrapper .eventhub-hero-editorial__meta-separator {
    color: var(--lev-grey-medium);
    margin: 0 0.25rem;
}

.eventhub-wrapper .eventhub-hero-editorial__time {
    font-weight: 500;
}

.eventhub-wrapper .eventhub-hero-editorial__countdown {
    font-weight: 500;
    color: var(--lev-grey);
}

.eventhub-wrapper .eventhub-hero-editorial__countdown--ending-soon {
    color: var(--lev-orange);
}

.eventhub-wrapper .eventhub-hero-editorial__countdown--last-days {
    color: var(--eventhub-color-cancelled, #dc3545);
}

/* Serien-Icon (Wiederholungs-Symbol für Terminserien) */
.eventhub-wrapper .eventhub-hero-editorial__series-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lev-grey);
    opacity: 0.7;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    align-self: center;
    padding: 0.25rem;
}

.eventhub-wrapper .eventhub-hero-editorial__series-icon svg {
    width: 20px;
    height: 20px;
}

@media (hover: hover) {
    .eventhub-hero-editorial__series-icon:hover {
        opacity: 1;
        color: var(--lev-pink);
        transform: scale(1.15);
    }
}

/* ==========================================================================
   BREADCRUMB NAVIGATION
   ========================================================================== */

.eventhub-wrapper .eventhub-breadcrumb {
    padding: 0.5rem 0;
    margin: 0;
}

/* Breadcrumb über Hero-Bild: absolut positionieren */
.eventhub-wrapper .eventhub-hero-editorial .eventhub-breadcrumb {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: fit-content;
    max-width: calc(100% - 2rem);
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 0 0 8px 0;
    border-right: 2px solid var(--lev-white);
    border-bottom: 2px solid var(--lev-white);
}

/* Ohne Bild: normale Position (nicht absolut) */
.eventhub-wrapper .eventhub-hero-editorial--no-image .eventhub-breadcrumb {
    position: static;
    background: none;
    padding: 0 0 var(--eventhub-spacing-md) 0;
}

.eventhub-wrapper .eventhub-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
}

.eventhub-wrapper .eventhub-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lev-grey-dark);
}

.eventhub-wrapper .eventhub-breadcrumb__link {
    color: var(--lev-grey-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.eventhub-wrapper .eventhub-breadcrumb__link:hover {
    color: var(--lev-pink);
    text-decoration: none;
}

.eventhub-wrapper .eventhub-breadcrumb__separator {
    color: var(--lev-blue);
    font-weight: 800;
}

.eventhub-wrapper .eventhub-breadcrumb__current {
    color: var(--lev-grey-dark);
    font-weight: 500;
}

/* Hide breadcrumbs on print */
@media print {
    .eventhub-wrapper .eventhub-breadcrumb {
        display: none;
    }
}

@media (max-width: 767px) {
    .eventhub-wrapper .eventhub-hero-editorial .eventhub-breadcrumb {
        padding: 0.25rem 1rem;
    }
    .eventhub-wrapper .eventhub-hero-editorial--no-image .eventhub-breadcrumb {
        padding: 0 0 var(--eventhub-spacing-md) 0;
    }
}

/* ==========================================================================
   KICKER / DACHZEILE (in Meta-Zeile)
   ========================================================================== */

/* Kicker als eigenständiger Paragraph (Legacy/Fallback) */
.eventhub-wrapper .eventhub-hero-editorial__kicker {
    margin: 0 0 0.5rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lev-pink);
}

/* Kicker in der Meta-Zeile (neues Layout) */
.eventhub-wrapper .eventhub-hero-editorial__meta-kicker {
    font-weight: 600;
    text-transform: uppercase;
    color: var(--lev-pink);
}

/* ==========================================================================
   TITEL
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__title {
    margin: 0.5rem 0 0.5rem 0;
    font-size: 2.85rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--lev-grey);
    text-transform: uppercase;
    width: 80%;
}

/* Titel-Prefix (z.B. "Veranstaltungskalender" bei Venues/Organizers) */
/* Visuell versteckt, aber für SEO und Screenreader sichtbar */
.eventhub-wrapper .eventhub-hero-editorial__title-prefix {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   EVENT-TEASER (Dezenter Link zu Veranstaltungen im Hero)
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__event-teaser {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 1.25rem 0;
    color: var(--lev-pink);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Statischer Event-Teaser (kein Link, z.B. bei Timeframe-Seiten) */
.eventhub-wrapper .eventhub-hero-editorial__event-teaser--static {
    cursor: default;
}

.eventhub-wrapper .eventhub-hero-editorial__event-teaser-count {
    font-weight: 700;
}

.eventhub-wrapper .eventhub-hero-editorial__event-teaser-arrow {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

@media (hover: hover) {
    .eventhub-hero-editorial__event-teaser:hover {
        color: var(--lev-pink-dark);
        text-decoration: none;
    }

    .eventhub-hero-editorial__event-teaser:hover
        .eventhub-hero-editorial__event-teaser-arrow {
        transform: translateY(2px);
    }

    /* Statischer Teaser: Kein Hover-Effekt */
    .eventhub-hero-editorial__event-teaser--static:hover {
        color: var(--lev-pink);
    }
}

/* Smooth Scroll für den Event-Teaser */
html {
    scroll-behavior: smooth;
}

/* Scroll-Offset für Sticky Header */
#eventhub-events-section {
    scroll-margin-top: 80px; /* Höhe des sticky Headers auf Desktop */
}

@media (max-width: 768px) {
    #eventhub-events-section {
        scroll-margin-top: 0; /* Kein sticky Header auf Mobile */
    }
}

/* ==========================================================================
   SOCIAL-SHARE-ICONS
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__share {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Basis-Button-Styling (alle Share-Buttons) */
.eventhub-wrapper .eventhub-hero-editorial__share-button,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--lev-grey-light);
    border: none;
    border-radius: 50%;
    color: var(--lev-grey);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

@media (hover: hover) {
    .eventhub-hero-editorial__share-button:hover,
    .eventhub-hero-editorial__share .eventhub-calendar-links__button:hover,
    .eventhub-hero-editorial__calendar-btn
        button.eventhub-share__button--calendar:hover {
        background: var(--lev-hover);
        color: var(--lev-grey);
        text-decoration: none;
        transform: translateY(-2px);
    }
}

.eventhub-wrapper .eventhub-hero-editorial__share-icon,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Kalender-Button: Breiter mit Text */
.eventhub-wrapper .eventhub-hero-editorial__share-button--calendar,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__button {
    width: auto;
    padding: 0 16px;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: 50vh;
    margin: 0;
    white-space: nowrap;
}

/* Kalender-Button Text (beide Varianten konsolidiert) */
.eventhub-wrapper .eventhub-hero-editorial__calendar-text,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__text {
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: initial;
}

/* Kurzer Text nur auf Mobile (<577px), langer Text ab 577px */
.eventhub-wrapper .eventhub-hero-editorial__calendar-text--short {
    display: none;
}

.eventhub-wrapper .eventhub-hero-editorial__calendar-text--long {
    display: inline;
}

@media (max-width: 576px) {
    .eventhub-hero-editorial__calendar-text--short {
        display: inline;
    }

    .eventhub-hero-editorial__calendar-text--long {
        display: none;
    }
}

/* Kalender-Button Ergänzungen (Caret) */
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__caret {
    margin-left: 2px;
    opacity: 0.7;
}

/* Dropdown-Position im Hero-Kontext */
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__dropdown,
.eventhub-wrapper .eventhub-hero-editorial__calendar-btn {
    position: relative;
}

.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__dropdown-menu,
.eventhub-wrapper
    .eventhub-hero-editorial__calendar-btn
    .eventhub-calendar-links__dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100;
    min-width: 220px;
    background: var(--lev-white);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    padding: 6px;
    overflow: hidden;
}

.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__dropdown[data-open='true']
    .eventhub-calendar-links__dropdown-menu,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__dropdown:focus-within
    .eventhub-calendar-links__dropdown-menu,
.eventhub-wrapper
    .eventhub-hero-editorial__calendar-btn.is-open
    .eventhub-calendar-links__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown-Items Styling */
.eventhub-wrapper
    .eventhub-hero-editorial__calendar-btn
    .eventhub-calendar-links__dropdown-item,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__dropdown-item {
    border-radius: 4px;
    margin: 2px 0;
    /* iOS Tap Highlight entfernen */
    -webkit-tap-highlight-color: transparent;
    /* Breite auf Container begrenzen */
    width: auto;
    box-sizing: border-box;
}

/* Button-Reset für Webcal-Link kopieren (ist ein <button> statt <a>) */
.eventhub-wrapper
    .eventhub-hero-editorial__share
    button.eventhub-calendar-links__dropdown-item,
.eventhub-wrapper
    .eventhub-hero-editorial__calendar-btn
    button.eventhub-calendar-links__dropdown-item,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__dropdown-menu
    button.eventhub-calendar-links__dropdown-item {
    background: transparent !important;
    border: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    text-align: left !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 14px !important;
    color: inherit !important;
    width: 100% !important;
    line-height: inherit !important;
    letter-spacing: normal;
}

/* Hover/Focus/Active States für Dropdown-Items */
.eventhub-wrapper
    .eventhub-hero-editorial__calendar-btn
    .eventhub-calendar-links__dropdown-item:hover,
.eventhub-wrapper
    .eventhub-hero-editorial__calendar-btn
    .eventhub-calendar-links__dropdown-item:focus,
.eventhub-wrapper
    .eventhub-hero-editorial__calendar-btn
    .eventhub-calendar-links__dropdown-item:active,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__dropdown-item:hover,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__dropdown-item:focus,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    .eventhub-calendar-links__dropdown-item:active,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    button.eventhub-calendar-links__dropdown-item:hover,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    button.eventhub-calendar-links__dropdown-item:focus,
.eventhub-wrapper
    .eventhub-hero-editorial__share
    button.eventhub-calendar-links__dropdown-item:active,
.eventhub-wrapper
    .eventhub-hero-editorial__calendar-btn
    button.eventhub-calendar-links__dropdown-item:hover,
.eventhub-wrapper
    .eventhub-hero-editorial__calendar-btn
    button.eventhub-calendar-links__dropdown-item:focus,
.eventhub-wrapper
    .eventhub-hero-editorial__calendar-btn
    button.eventhub-calendar-links__dropdown-item:active {
    background: var(--lev-grey-light, #f5f5f5) !important;
    color: var(--lev-pink, #cb0950) !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    border-radius: 4px;
}

/* ==========================================================================
   VERANSTALTUNGSREIHEN-BADGES (kleine graue Badges unter Titel)
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__series-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.eventhub-wrapper .eventhub-hero-editorial__series-badge {
    display: inline-block;
    background: var(--lev-grey);
    color: var(--lev-white);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.3em 0.75em;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .eventhub-hero-editorial__series-badge:hover {
        background: var(--lev-grey-dark);
        color: var(--lev-white);
        text-decoration: none;
        transform: scale(1.05);
    }

    .eventhub-hero-editorial__series-links a:hover {
        text-decoration: underline;
    }
}

/* ==========================================================================
   TODAY-STATUS IM HERO (für Typ B / duration)
   Höhere Spezifität nötig, um Plugin-Defaults zu überschreiben
   ========================================================================== */

.eventhub-wrapper .eventhub-hero-editorial__today-status.eventhub-today-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    margin: 0 0 1.5rem 0 !important;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.eventhub-wrapper
    .eventhub-hero-editorial__today-status
    .eventhub-today-status__text {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.eventhub-wrapper .eventhub-hero-editorial__today-status strong {
    font-weight: 600;
}

/* ==========================================================================
   RESPONSIVE - HERO EDITORIAL
   ========================================================================== */

@media (max-width: 992px) {
    .eventhub-wrapper .eventhub-hero-editorial {
        margin: -1.5rem -1.25rem 0 -1.25rem;
        width: calc(100% + 2.5rem);
    }

    .eventhub-wrapper .eventhub-hero-editorial__date-badge {
        left: 1.25rem; /* Container-Padding */
    }

    .eventhub-wrapper .eventhub-hero-editorial__ticket-button {
        right: 1.25rem; /* Container-Padding */
        font-size: 1rem;
        padding: 12px 20px;
    }

    .eventhub-wrapper .eventhub-hero-editorial__content {
        padding: 0 1.25rem 1.25rem 1.25rem;
    }

    /* NO-IMAGE: Seitliches Padding statt volles Padding */
    .eventhub-wrapper
        .eventhub-hero-editorial--no-image
        .eventhub-hero-editorial__content {
        padding: 0;
    }

    .eventhub-wrapper .eventhub-hero-editorial__badge-column {
        padding-top: calc(40px + 0.75rem);
    }

    .eventhub-wrapper .eventhub-hero-editorial__main-column {
        padding-top: calc(40px - 0.75rem);
    }

    .eventhub-wrapper .eventhub-hero-editorial__series {
        padding: 1rem 1.25rem;
    }

    .eventhub-wrapper .eventhub-hero-editorial__title {
        font-size: 2.25rem;
    }
}

@media (max-width: 767px) {
    .eventhub-wrapper .eventhub-hero-editorial {
        margin: -1rem -1rem 0 -1rem;
        width: calc(100% + 2rem);
    }

    .eventhub-wrapper .eventhub-hero-editorial__image-wrapper {
        aspect-ratio: 16 / 9; /* Höheres Bild auf Mobile */
    }

    .eventhub-wrapper .eventhub-hero-editorial__date-badge {
        left: 1rem; /* Container-Padding */
    }

    .eventhub-wrapper .eventhub-hero-editorial__date-overlay {
        padding: 14px 16px 12px 16px;
        width: var(--hero-badge-width-tablet);
    }

    .eventhub-wrapper .eventhub-hero-editorial__date-day {
        font-size: 2.25rem;
    }

    .eventhub-wrapper .eventhub-hero-editorial__date-month {
        font-size: 1rem;
    }

    .eventhub-wrapper .eventhub-hero-editorial__ticket-button {
        right: 1rem; /* Container-Padding */
        font-size: 0.9rem;
        padding: 10px 16px;
        gap: 6px;
    }

    .eventhub-wrapper .eventhub-hero-editorial__ticket-button .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

    .eventhub-wrapper .eventhub-hero-editorial__copyright {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    /* Mobile: Content untereinander statt nebeneinander */
    .eventhub-wrapper .eventhub-hero-editorial__content {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0 1rem 1rem 1rem;
    }

    /* NO-IMAGE: Nur seitliches Padding auf Mobile */
    .eventhub-wrapper
        .eventhub-hero-editorial--no-image
        .eventhub-hero-editorial__content {
        padding: 0;
    }

    /* Badge-Column auf Mobile ausblenden (Kostenlos-Badge jetzt in Meta-Zeile) */
    .eventhub-wrapper .eventhub-hero-editorial__badge-column {
        display: none;
    }

    .eventhub-wrapper .eventhub-hero-editorial__main-column {
        padding-top: calc(1rem + 20px);
    }

    /* Meta-Zeile: Badges nebeneinander, Datum/Uhrzeit darunter */
    .eventhub-wrapper .eventhub-hero-editorial__meta {
        display: block; /* Block statt Flex für natürlichen Textfluss */
        font-size: 1rem;
    }

    /* Kostenlos-Badge inline auf Mobile anzeigen */
    .eventhub-wrapper .eventhub-hero-editorial__free-badge-inline {
        display: inline-block;
        margin-right: 0.5rem;
        padding: 0.25em 0.5em;
        margin-bottom: 0.75rem;
    }

    /* Status-Badge auch inline-block für Nebeneinander */
    .eventhub-wrapper .eventhub-hero-editorial__status-inline {
        display: inline-block;
        padding: 0.25em 0.5em;
        margin-bottom: 0.75rem;
    }

    /* Datum: inline, Zeilenumbruch nur wenn Badges vorhanden */
    .eventhub-wrapper .eventhub-hero-editorial__date-full {
        display: inline;
    }

    /* Zeilenumbruch vor Datum NUR wenn Badges vorhanden sind */
    .eventhub-wrapper
        .eventhub-hero-editorial__meta:has(
            .eventhub-hero-editorial__status-inline
        )
        .eventhub-hero-editorial__date-full::before,
    .eventhub-wrapper
        .eventhub-hero-editorial__meta:has(
            .eventhub-hero-editorial__free-badge-inline
        )
        .eventhub-hero-editorial__date-full::before {
        content: '\A';
        white-space: pre;
        line-height: 2; /* Abstand zwischen Badge-Zeile und Datum */
    }

    /* Uhrzeit inline nach Datum */
    .eventhub-wrapper .eventhub-hero-editorial__time {
        display: inline;
        vertical-align: baseline;
        margin-left: 0.5rem;
    }

    /* Serien-Icon: inline-flex für saubere vertikale Ausrichtung */
    .eventhub-wrapper .eventhub-hero-editorial__series-icon {
        display: inline-flex;
        vertical-align: baseline;
        margin-left: 0.5rem;
        position: relative;
        top: 0.05em; /* Feinjustierung zur Textlinie */
    }

    /* Serien-Icon passend zur kleineren Meta-Schrift */
    .eventhub-wrapper .eventhub-hero-editorial__series-icon svg {
        width: 16px;
        height: 16px;
    }

    .eventhub-wrapper .eventhub-hero-editorial__title {
        font-size: 2rem;
        width: 100%;
    }

    .eventhub-wrapper .eventhub-hero-editorial__share {
        gap: 0.5rem;
    }

    .eventhub-wrapper .eventhub-hero-editorial__share-button--calendar {
        padding: 0 12px;
        font-size: 0.85rem;
    }

    .eventhub-wrapper .eventhub-hero-editorial__series {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .eventhub-wrapper .eventhub-hero-editorial__date-overlay {
        padding: 16px 14px 14px 14px;
        /* width: var(--hero-badge-width-mobile); */
    }

    .eventhub-wrapper .eventhub-hero-editorial__date-day {
        font-size: 2rem;
    }

    .eventhub-wrapper .eventhub-hero-editorial__date-month {
        font-size: 1rem;
    }

    /* Ticket-Button kompakter auf kleinen Screens */
    .eventhub-wrapper .eventhub-hero-editorial__ticket-button {
        font-size: 0.8rem;
        padding: 8px 12px;
        gap: 5px;
    }

    .eventhub-wrapper .eventhub-hero-editorial__ticket-button .dashicons {
        font-size: 16px;
        width: 16px;
        height: 16px;
    }

    /* Kalender-Button: kompakter auf kleinen Screens */
    .eventhub-wrapper .eventhub-hero-editorial__share-button--calendar {
        width: auto;
        height: 36px;
        border-radius: 18px;
        padding: 0 12px;
        gap: 6px;
    }

    /* Kalender-Dropdown: Rechts ausrichten statt links, damit es nicht abgeschnitten wird */
    .eventhub-wrapper
        .eventhub-hero-editorial__calendar-btn
        .eventhub-calendar-links__dropdown-menu {
        left: auto;
        right: 0;
        min-width: 200px;
    }

    .eventhub-wrapper .eventhub-hero-editorial__title {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   SINGLE EVENT INFO BLOCKS - Durchgehende Card mit farbigen Headern
   Termin-Details (blau), Veranstalter (grün), Veranstaltungsort (orange)
   ========================================================================== */

/* Grid-Container als gemeinsame Card */
.eventhub-wrapper .eventhub-event-info-blocks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 !important;
    margin-top: var(--eventhub-spacing-xl, 2rem);
    margin-bottom: var(--eventhub-spacing-xl, 2rem);
    /*
    background: var(--lev-grey-light, #f5f5f5);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
    */
    overflow: hidden;
}

/* Einzelner Info-Block - kein eigener Schatten */
.eventhub-wrapper .eventhub-event-info-blocks .eventhub-info-block {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    margin-bottom: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: var(--eventhub-spacing-md, 1rem) var(--eventhub-spacing-xl, 2rem);
    position: relative; /* Für Trennstrich-Positionierung */
}

/* Blauer Akzent-Strich links (Desktop) */
.eventhub-wrapper .eventhub-event-info-blocks .eventhub-info-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background: var(--lev-blue);
    border-radius: 2px;
}

/* === FARBIGE HEADER === */
.eventhub-wrapper .eventhub-event-info-blocks .eventhub-info-block__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: var(--eventhub-spacing-lg, 1.5rem);
    color: var(--lev-grey);
    border-radius: 0; /* Keine Rundung, da durchgehend */
    position: relative; /* Für Trennstrich */
}

/* Header-Icon */
.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block__header-icon {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block__header-icon
    svg {
    width: 1.25em;
    height: 1.25em;
    display: block;
    color: var(--lev-pink);
    stroke-width: 2;
}

/* Header-Titel */
.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block
    .eventhub-info-block__title {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: inherit;
}

/* === CONTENT-BEREICH === */
.eventhub-wrapper .eventhub-event-info-blocks .eventhub-info-block__content {
    flex: 1;
    background: transparent; /* Gemeinsamer grauer Hintergrund vom Container */
}

/* Erster Block: kein Padding links */
.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block:first-child
    .eventhub-info-block__content {
    padding-left: 0;
}

.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block:first-child
    .eventhub-info-block__header {
    padding-left: 0;
}

/* Letzter Block: kein Padding rechts */
.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block:last-child
    .eventhub-info-block__content,
.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block:last-child
    .eventhub-info-block__header {
    padding-right: 0;
}

/* Info-Liste */
.eventhub-wrapper .eventhub-event-info-blocks .eventhub-info-block__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--eventhub-spacing-xs, 0.25rem);
}

/* Einzelne Items */
.eventhub-wrapper .eventhub-event-info-blocks .eventhub-info-block__item {
    display: flex;
    align-items: center;
    gap: var(--eventhub-spacing-sm, 0.5rem);
}

/* === PRIMÄRE ZEILE (erste Zeile = groß) === */
.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block__item--primary {
    margin-bottom: var(--eventhub-spacing-xs, 0.25rem);
}

/* Label (dt) bei primary ausblenden - nimmt sonst Platz */
.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block__item--primary
    .eventhub-info-block__label {
    display: none;
}

.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block__item--primary
    .eventhub-info-block__value {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lev-grey);
}

.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block__item--primary
    .eventhub-info-block__value
    a {
    color: var(--lev-blue, #4597cf);
}

@media (hover: hover) {
    .eventhub-event-info-blocks
        .eventhub-info-block__item--primary
        .eventhub-info-block__value
        a:hover {
        color: var(--lev-pink, #cb0950);
        text-decoration: none;
    }
}

/* === SUBLINE (Raum ohne Icon) === */
.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block__item--subline {
    margin-top: -0.25rem;
    padding-left: 0;
}

/* Label (dt) bei subline ausblenden */
.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block__item--subline
    .eventhub-info-block__label {
    display: none;
}

.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block__item--subline
    .eventhub-info-block__value {
    font-size: 1rem;
    font-weight: 400;
    color: var(--lev-grey, #555555);
}

/* === NORMALE DETAIL-ZEILEN (mit Icons) === */
.eventhub-wrapper .eventhub-event-info-blocks .eventhub-info-block__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    line-height: 1;
}

.eventhub-wrapper .eventhub-event-info-blocks .eventhub-info-block__icon--svg {
    color: var(--lev-blue);
    background: var(--lev-blue-light);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block__icon--svg
    svg {
    width: 14px;
    height: 14px;
    display: block;
    stroke-width: 2;
}

/* Values / Links */
.eventhub-wrapper .eventhub-event-info-blocks .eventhub-info-block__value {
    margin: 0;
    line-height: 1.5;
    color: var(--lev-grey, #555555);
    font-size: 1rem;
}

.eventhub-wrapper .eventhub-event-info-blocks .eventhub-info-block__value a {
    color: var(--lev-blue, #4597cf);
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Icon-Hover bei Links: Ganze Zeile klickbar machen */
.eventhub-wrapper
    .eventhub-event-info-blocks
    .eventhub-info-block__item:has(.eventhub-info-block__value a) {
    cursor: pointer;
}

@media (hover: hover) {
    .eventhub-event-info-blocks .eventhub-info-block__value a:hover {
        color: var(--lev-pink);
        text-decoration: none;
    }

    .eventhub-event-info-blocks
        .eventhub-info-block__item:has(.eventhub-info-block__value a):hover
        .eventhub-info-block__icon--svg {
        color: var(--lev-pink);
        background: var(--lev-pink-light, rgba(203, 9, 80, 0.1));
    }

    .eventhub-event-info-blocks
        .eventhub-info-block__item:has(.eventhub-info-block__value a):hover
        .eventhub-info-block__value
        a {
        color: var(--lev-pink);
    }
}

/* Bei 3 Blöcken: 3 Spalten */
.eventhub-wrapper .eventhub-event-info-blocks--three {
    grid-template-columns: repeat(3, 1fr);
}

/* Tablet: 2 Spalten (1024px und kleiner) */
@media (max-width: 1024px) {
    .eventhub-wrapper .eventhub-event-info-blocks,
    .eventhub-wrapper .eventhub-event-info-blocks--three {
        grid-template-columns: repeat(2, 1fr);
    }

    .eventhub-event-info-blocks--three > :nth-child(3) {
        grid-column: 1 / -1;
    }

    /* Erste Spalte (Block 1): kein Padding links */
    .eventhub-event-info-blocks > :first-child .eventhub-info-block__content,
    .eventhub-event-info-blocks > :first-child .eventhub-info-block__header {
        padding-left: 0;
    }

    /* Zweite Spalte (Block 2): kein Padding rechts */
    .eventhub-event-info-blocks > :nth-child(2) .eventhub-info-block__content,
    .eventhub-event-info-blocks > :nth-child(2) .eventhub-info-block__header {
        padding-right: 0;
    }

    /* 3. Block (volle Breite): kein seitliches Padding */
    .eventhub-event-info-blocks--three
        > :nth-child(3)
        .eventhub-info-block__content,
    .eventhub-event-info-blocks--three
        > :nth-child(3)
        .eventhub-info-block__header {
        padding-left: 0;
        padding-right: 0;
    }

    /* Abstand zwischen den oberen 2 Blöcken und dem 3. Block */
    .eventhub-event-info-blocks--three > :nth-child(1),
    .eventhub-event-info-blocks--three > :nth-child(2) {
        margin-bottom: var(--eventhub-spacing-md, 1rem) !important;
    }
}

/* Mobile: Allgemeine Anpassungen */
@media (max-width: 767px) {
    .eventhub-event-info-blocks
        .eventhub-info-block__item--primary
        .eventhub-info-block__value {
        font-size: 1.1rem;
    }

    /* === EINHEITLICHE ABSTÄNDE ZWISCHEN ALLEN BLÖCKEN AUF MOBILE === */
    .eventhub-wrapper .eventhub-map,
    .eventhub-wrapper .eventhub-video,
    .eventhub-wrapper .eventhub-event-dates,
    .eventhub-wrapper .eventhub-faq,
    .eventhub-wrapper .eventhub-similar-events {
        margin-bottom: var(--eventhub-spacing-lg, 1.5rem);
    }
}

/* Kleinste mobile Auflösung: 1 Spalte + blauer Akzent-Strich (576px und kleiner) */
@media (max-width: 576px) {
    .eventhub-wrapper .eventhub-event-info-blocks,
    .eventhub-wrapper .eventhub-event-info-blocks--three {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: var(--eventhub-spacing-lg, 1.5rem);
    }

    .eventhub-event-info-blocks--three > :nth-child(3) {
        grid-column: auto;
    }

    .eventhub-event-info-blocks .eventhub-info-block {
        padding: var(--eventhub-spacing-md, 1rem);
        padding-left: calc(var(--eventhub-spacing-md, 1rem) + 12px);
        margin-bottom: var(--eventhub-spacing-md, 1rem) !important;
    }

    .eventhub-event-info-blocks .eventhub-info-block:last-child {
        margin-bottom: 0 !important;
    }

    /* Header-Padding anpassen */
    .eventhub-event-info-blocks .eventhub-info-block__header {
        padding: 0 0 var(--eventhub-spacing-sm, 0.5rem) 0;
    }

    /* Content-Padding anpassen */
    .eventhub-event-info-blocks .eventhub-info-block__content {
        padding: 0;
    }
}

/* ==========================================================================
   ÖFFNUNGSZEITEN - Card Style mit pinkem Akzent
   ========================================================================== */

.eventhub-wrapper .eventhub-opening-hours {
    position: relative;
    background: var(--lev-grey-light, #f5f5f5);
    border: none;
    border-radius: 8px;
    padding: var(--eventhub-spacing-md, 1rem) var(--eventhub-spacing-lg, 1.5rem);
    padding-left: calc(var(--eventhub-spacing-lg, 1.5rem) + 8px);
    margin-bottom: var(--eventhub-spacing-xl, 2rem);
}

/* Pinker Akzent-Strich als Pseudo-Element */
.eventhub-wrapper .eventhub-opening-hours::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background: var(--lev-pink);
    border-radius: 2px;
}

/* Section-Titel (ÖFFNUNGSZEITEN) - wie FAQ-Titel */
.eventhub-wrapper .eventhub-opening-hours h2 {
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lev-grey);
    margin: 0 0 var(--eventhub-spacing-md, 1rem) 0;
}

/* Sub-Überschriften (REGULÄR, SONDERÖFFNUNGSZEITEN) - wie Info-Block-Header */
.eventhub-wrapper .eventhub-opening-hours h3 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lev-grey);
    margin: var(--eventhub-spacing-sm, 0.5rem) 0
        var(--eventhub-spacing-xs, 0.25rem) 0;
}

/* Erstes h3 (REGULÄR) braucht keinen margin-top */
.eventhub-wrapper .eventhub-opening-hours__regular h3:first-child {
    margin-top: 0;
}

/* Öffnungszeiten-Liste */
.eventhub-wrapper .eventhub-hours-list {
    gap: 0;
}

.eventhub-wrapper .eventhub-hours-list__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--eventhub-spacing-xs, 0.25rem) 0;
    font-size: 1rem;
    line-height: 1.4;
    border-bottom: none;
}

.eventhub-wrapper .eventhub-hours-list__row dt {
    color: var(--lev-grey, #555555);
    font-weight: 500;
}

.eventhub-wrapper .eventhub-hours-list__row dd {
    color: var(--lev-grey, #555555);
    text-align: right;
}

/* Sonderöffnungszeiten: Grau statt Rot/Orange */
.eventhub-wrapper .eventhub-hours-list__row--modified dt,
.eventhub-wrapper .eventhub-hours-list__row--modified dd,
.eventhub-wrapper .eventhub-hours-list__row--closed dt,
.eventhub-wrapper .eventhub-hours-list__row--closed dd {
    color: var(--lev-grey);
}

/* Sonderöffnungszeiten-Sektion */
.eventhub-wrapper .eventhub-opening-hours__special {
    margin-top: var(--eventhub-spacing-sm, 0.5rem);
    padding-top: 0;
    border-top: none;
}

/* ==========================================================================
   VIDEO EMBED - Card Style
   ========================================================================== */

.eventhub-wrapper .eventhub-video {
    background: var(--lev-white);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    margin-bottom: var(--eventhub-spacing-xl, 2rem);
    overflow: hidden;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.eventhub-wrapper .eventhub-video__container {
    border-radius: 4px;
    overflow: hidden;
}

/* ==========================================================================
   GOOGLE MAP - Card Style
   ========================================================================== */

.eventhub-wrapper .eventhub-map {
    background: var(--lev-white);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    margin-bottom: var(--eventhub-spacing-xl, 2rem);
    overflow: hidden;
}

.eventhub-wrapper .eventhub-map__iframe {
    border-radius: 4px;
    height: 350px;
}

/* Mobile: Kompaktere Höhe */
@media (max-width: 600px) {
    .eventhub-wrapper .eventhub-map__iframe {
        height: 250px;
    }
}

/* ==========================================================================
   WEITERE TERMINE - Card Style mit Pill-Buttons
   ========================================================================== */

.eventhub-wrapper .eventhub-event-dates {
    margin-bottom: var(--eventhub-spacing-xl, 2rem);
}

/* Titel als dezentes Label */
.eventhub-wrapper .eventhub-event-dates__title {
    margin: 0 0 var(--eventhub-spacing-sm, 0.5rem) 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lev-grey, #555555);
}

/* Liste als Flex-Container */
.eventhub-wrapper .eventhub-dates-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Termine als Pill-Buttons */
.eventhub-wrapper .eventhub-dates-list__item {
    background: var(--lev-grey-light-medium);
    border: 1px solid var(--lev-grey-light-medium);
    border-radius: 20px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.eventhub-wrapper .eventhub-dates-list__link {
    color: var(--lev-grey);
    text-decoration: none;
}

@media (hover: hover) {
    .eventhub-wrapper .eventhub-dates-list__item:hover {
        background: var(--lev-grey-medium);
        color: var(--lev-grey);
        transform: translateY(-2px);
    }

    .eventhub-wrapper .eventhub-dates-list__link:hover {
        text-decoration: none;
    }

    .eventhub-wrapper
        .eventhub-dates-list__item:hover
        .eventhub-dates-list__link {
        color: var(--lev-grey);
        text-decoration: none;
    }
}

/* "und X weitere Termine" Text */
.eventhub-wrapper .eventhub-dates-list__more {
    margin: 0.75rem 0 0 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--lev-grey, #555555);
    font-style: normal;
}

/* Mobile */
@media (max-width: 600px) {
    .eventhub-wrapper .eventhub-event-dates {
        /* padding: var(--eventhub-spacing-sm, 0.5rem)
            var(--eventhub-spacing-md, 1rem); */
    }

    .eventhub-wrapper .eventhub-dates-list__item {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
    }
}

/* ==========================================================================
   FAQ SECTION - Card Style
   ========================================================================== */

.eventhub-wrapper .eventhub-faq {
    position: relative;
    margin-bottom: var(--eventhub-spacing-xl, 2rem);
    background: var(--lev-grey-light);
    border-radius: 8px;
    padding: var(--eventhub-spacing-md, 1rem) var(--eventhub-spacing-lg, 1.5rem);
    padding-left: calc(var(--eventhub-spacing-lg, 1.5rem) + 8px);
}

/* Pinker Akzent-Strich als Pseudo-Element */
.eventhub-wrapper .eventhub-faq::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    background: var(--lev-pink);
    border-radius: 2px;
}

/* Titel als dezentes Label */
.eventhub-wrapper .eventhub-faq__title {
    margin: 0 0 var(--eventhub-spacing-md, 1rem) 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lev-grey, #555555);
}

/* FAQ Liste */
.eventhub-wrapper .eventhub-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--eventhub-spacing-sm, 0.5rem);
}

/* Einzelne FAQ-Items */
.eventhub-wrapper .eventhub-faq__item {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    transition: background 0.2s ease;
}

.eventhub-wrapper .eventhub-faq__item[open] {
    /* background: var(--lev-white); */
}

/* Frage (Summary/Klickbarer Bereich) */
.eventhub-wrapper .eventhub-faq__question {
    display: block;
    padding: var(--eventhub-spacing-sm, 0.5rem) var(--eventhub-spacing-md, 1rem);
    padding-left: 2.2rem; /* Platz für Pfeil links */
    position: relative;
    cursor: pointer;
    font-weight: 600;
    color: var(--lev-grey, #555555);
    transition: color 0.2s ease;
    list-style: none; /* Entfernt Standard-Marker */
    text-align: left;
    font-size: inherit; /* Erbt Theme-Schriftgröße (18px) */
    /* Mobile: Tap-Highlight und alle Hintergründe entfernen */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
    user-select: none;
    background: transparent !important;
    background-color: transparent !important;
}

/* Alle Zustände ohne Hintergrund */
.eventhub-wrapper .eventhub-faq__question:hover,
.eventhub-wrapper .eventhub-faq__question:focus,
.eventhub-wrapper .eventhub-faq__question:active,
.eventhub-wrapper .eventhub-faq__question:visited {
    background: transparent !important;
    background-color: transparent !important;
    outline: none;
}

/* Entfernt native Browser-Marker */
.eventhub-wrapper .eventhub-faq__question::-webkit-details-marker {
    display: none;
}

.eventhub-wrapper .eventhub-faq__question::marker {
    display: none;
    content: '';
}

/* Eigener Pfeil links */
.eventhub-wrapper .eventhub-faq__question::before {
    content: '▸';
    position: absolute;
    left: var(--eventhub-spacing-sm, 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em; /* Etwas größer als Text */
    color: var(--lev-pink, #cb0950);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.eventhub-wrapper .eventhub-faq__item[open] .eventhub-faq__question::before {
    transform: translateY(-50%) rotate(90deg);
}

@media (hover: hover) {
    .eventhub-wrapper .eventhub-faq__question:hover {
        color: var(--lev-pink, #cb0950);
        background: transparent !important;
    }
}

/* Antwort */
.eventhub-wrapper .eventhub-faq__answer {
    padding: var(--eventhub-spacing-md, 1rem);
    color: var(--lev-grey, #555555);
    font-size: inherit; /* Erbt Theme-Schriftgröße (18px) */
    line-height: 1.6;
    border-radius: 8px;
    background: var(--lev-white);
}

.eventhub-wrapper .eventhub-faq__answer p:last-child {
    margin-bottom: 0;
}

/* Mobile */
@media (max-width: 600px) {
    .eventhub-wrapper .eventhub-faq {
        padding: var(--eventhub-spacing-sm, 0.5rem);
    }

    /* Titel gleiche Größe wie Ähnliche Veranstaltungen */
    .eventhub-wrapper .eventhub-faq__title {
        font-size: 1.1rem;
    }

    .eventhub-wrapper .eventhub-faq__question {
        padding: var(--eventhub-spacing-sm, 0.5rem);
        padding-left: 1.8rem;
        font-size: 0.95rem;
    }

    .eventhub-wrapper .eventhub-faq__answer {
        padding: 0.75rem;
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   BACK NAVIGATION - Zurück-Button im blauen Pill-Stil
   Konsistent mit "Alle Events" Button in der Timeframe-Nav
   ========================================================================== */

.eventhub-wrapper .eventhub-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: transparent;
    border: 2px solid var(--lev-blue);
    border-radius: 50px; /* Pill-Form */
    color: var(--lev-blue);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease;
    margin: var(--eventhub-spacing-md, 1rem) 0 0 0;
}

/* Icon-Styling */
.eventhub-wrapper .eventhub-back-button__icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/* Hover: Gefüllt + Icon animiert */
@media (hover: hover) {
    .eventhub-wrapper .eventhub-back-button:hover {
        background: var(--lev-blue);
        border-color: var(--lev-blue);
        color: var(--lev-white);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(45, 122, 181, 0.3);
        text-decoration: none;
    }

    .eventhub-wrapper .eventhub-back-button:hover .eventhub-back-button__icon {
        transform: translateX(-3px);
    }
}

/* Active State */
.eventhub-wrapper .eventhub-back-button:active {
    transform: translateY(0);
    box-shadow: none;
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

/* Focus-Visible für Keyboard-Navigation */
.eventhub-wrapper .eventhub-back-button:focus-visible {
    outline: 2px solid var(--lev-blue);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .eventhub-back-navigation {
        margin-bottom: var(--eventhub-spacing-xl, 2rem);
    }

    .eventhub-wrapper .eventhub-back-button {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .eventhub-wrapper .eventhub-back-button {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
        letter-spacing: 0.02em;
    }
}

/* ==========================================================================
   ÄHNLICHE VERANSTALTUNGEN - Section am Ende der Single-Event-Seite
   ========================================================================== */

.eventhub-wrapper .eventhub-similar-events {
    margin-top: var(--eventhub-spacing-xl, 2rem);
    margin-bottom: var(--eventhub-spacing-xl, 2rem);
}

/* Titel wie andere Section-Überschriften */
.eventhub-wrapper .eventhub-similar-events__title {
    margin: 0 0 var(--eventhub-spacing-lg, 1.5rem) 0;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lev-grey, #555555);
}

/* Grid: 3 Spalten Desktop, 2 Tablet, 1 Mobile */
.eventhub-wrapper .eventhub-similar-events__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--eventhub-spacing-lg, 1.5rem);
}

@media (max-width: 1024px) {
    .eventhub-wrapper .eventhub-similar-events__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .eventhub-wrapper .eventhub-similar-events__grid {
        grid-template-columns: 1fr;
    }

    .eventhub-wrapper .eventhub-similar-events {
        margin-top: 0;
        padding-top: 0;
    }

    .eventhub-wrapper .eventhub-similar-events__title {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   EVENT CONTENT - Überschriften Styling
   ========================================================================== */

.eventhub-wrapper .eventhub-event-content h1,
.eventhub-wrapper .eventhub-event-content h2,
.eventhub-wrapper .eventhub-event-content h3,
.eventhub-wrapper .eventhub-event-content h4,
.eventhub-wrapper .eventhub-event-content h5,
.eventhub-wrapper .eventhub-event-content h6 {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ==========================================================================
   EDITORIAL CARD - Komplett neues Design
   Mit FLUID DESIGN + CONTAINER QUERIES für nahtlose Responsivität
   ========================================================================== */

/* ==========================================================================
   CONTAINER QUERY SETUP
   Cards passen sich an ihren CONTAINER an, nicht nur an den Viewport!
   ========================================================================== */

/* Event-Listen und Grids als Container markieren */
.eventhub-wrapper .eventhub-event-list,
.eventhub-wrapper .eventhub-event-grid,
.eventhub-wrapper .eventhub-highlight-slider__track,
.eventhub-wrapper .eventhub-similar-events__grid,
.eventhub-wrapper .eventhub-running-events__grid,
.wp-block-column,
.wp-block-group,
.sidebar,
.widget-area,
[class*='widget'],
.entry-content > * {
    container-type: inline-size;
    container-name: card-container;
}

/* Einzelne Card als eigener Container (für innere Anpassungen) */
.eventhub-wrapper .eventhub-card--editorial {
    container-type: inline-size;
    container-name: event-card;
}

/* ==========================================================================
   EDITORIAL CARD - BASE STYLES mit Fluid Variablen
   ========================================================================== */

.eventhub-wrapper .eventhub-card--editorial {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--lev-white);
    border-radius: 12px;
    border: none;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover nur auf Geräten mit echtem Hover-Support */
@media (hover: hover) {
    .eventhub-wrapper .eventhub-card--editorial:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(203, 9, 80, 0.15);
    }
}

/* ==========================================================================
   IMAGE CONTAINER
   Äußerer Container OHNE overflow:hidden → Badges können überstehen!
   ========================================================================== */

.eventhub-wrapper .eventhub-card-editorial__image-container {
    position: relative;
    aspect-ratio: 4 / 3;
    /* KEIN overflow:hidden hier - Badges dürfen über die Kante ragen */
}

/* Innerer Wrapper NUR für Bild-Clipping */
.eventhub-wrapper .eventhub-card-editorial__image-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden; /* Nur das Bild wird geclippt */
    border-radius: 12px 12px 0 0; /* Abgerundete Ecken oben */
}

.eventhub-wrapper .eventhub-card-editorial__image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

/* Dezenter Gradient von unten für bessere Badge-Lesbarkeit */
.eventhub-wrapper .eventhub-card-editorial__image-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.25), transparent);
    pointer-events: none;
    z-index: 1;
}

.eventhub-wrapper .eventhub-card-editorial__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Image Zoom nur auf Geräten mit echtem Hover-Support */
@media (hover: hover) {
    .eventhub-card--editorial:hover .eventhub-card-editorial__image {
        transform: scale(1.1);
    }
}

.eventhub-wrapper .eventhub-card-editorial__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--lev-pink-light) 0%,
        var(--lev-white) 100%
    );
    color: var(--lev-pink);
}

.eventhub-wrapper .eventhub-card-editorial__image-placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

/* ==========================================================================
   DATUM OVERLAY - Das Herzstück des Editorial-Designs
   ========================================================================== */

.eventhub-wrapper .eventhub-card-editorial__date-wrapper {
    position: absolute;
    bottom: -1px;
    left: var(--lev-card-date-left);
    z-index: 10;
    pointer-events: none; /* Wrapper selbst nicht klickbar */
}

.eventhub-wrapper .eventhub-card-editorial__date-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--lev-pink);
    color: var(--lev-white);
    padding: var(--lev-card-date-padding)
        calc(var(--lev-card-date-padding) + 4px);
    min-width: var(--lev-card-date-width);
    clip-path: polygon(0 11px, 100% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 4px 15px rgba(203, 9, 80, 0.4));
    pointer-events: auto; /* Nur das Overlay ist klickbar */
    cursor: pointer;
}

.eventhub-wrapper .eventhub-card-editorial__date-day {
    font-size: var(--lev-card-date-day-size);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.eventhub-wrapper .eventhub-card-editorial__date-month {
    font-size: var(--lev-card-date-month-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

/* ==========================================================================
   KATEGORIE BADGES
   ========================================================================== */

.eventhub-wrapper .eventhub-card-editorial__category-badges {
    position: absolute;
    top: var(--lev-card-date-left);
    left: var(--lev-card-date-left);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 5;
}

.eventhub-wrapper .eventhub-card-editorial__category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--lev-white);
    font-size: var(--lev-card-badge-size);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    /* Asymmetrisches Padding: oben etwas weniger für optische Zentrierung */
    padding: var(--lev-card-badge-padding-y) var(--lev-card-badge-padding-x);
    border-radius: 50vh;
    text-decoration: none;
    transition: all 0.3s ease;
}

.eventhub-wrapper .eventhub-card-editorial__category-badge:hover {
    text-decoration: none;
    color: var(--lev-white);
    transform: scale(1.05);
    background: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   STATUS & FREE BADGES
   ========================================================================== */

/* Status-Badge in der Meta-Zeile (nach Uhrzeit) */
.eventhub-wrapper .eventhub-card-editorial__meta .eventhub-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--lev-card-badge-size);
    padding: calc(var(--lev-card-badge-padding-y) - 2px)
        calc(var(--lev-card-badge-padding-x) - 4px);
    line-height: 1;
    border-radius: 4px;
}

.eventhub-wrapper .eventhub-card-editorial__meta .eventhub-badge--cancelled {
    background: var(--lev-pink);
    color: var(--lev-white);
}

.eventhub-wrapper .eventhub-card-editorial__free-badge {
    position: absolute;
    bottom: 0;
    right: var(--lev-card-date-left);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lev-green);
    color: var(--lev-white);
    font-size: var(--lev-card-badge-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: calc(var(--lev-card-badge-padding-y) - 0px)
        var(--lev-card-badge-padding-x)
        calc(var(--lev-card-badge-padding-y) + 2px)
        var(--lev-card-badge-padding-x);
    border-radius: 4px;
    z-index: 5;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 0px 5px 3px rgba(138, 184, 45, 0.25);
}

.eventhub-wrapper .eventhub-card-editorial__free-badge:hover {
    transform: scale(1.05); /* Transform kombinieren! */
    background: var(--lev-green-dark);
    color: var(--lev-white);
    text-decoration: none;
}

/* ==========================================================================
   STERN am Datums-Badge für Highlights
   ========================================================================== */

.eventhub-wrapper .eventhub-card-editorial__date-overlay--highlight {
    background: var(--lev-orange);
    box-shadow: 0 4px 15px rgba(236, 102, 8, 0.4);
}

.eventhub-wrapper .eventhub-card-editorial__date-star {
    position: absolute;
    top: -28px;
    left: -10px;
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--lev-white);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    animation: star-pulse 2s ease-in-out infinite;
    z-index: 25;
}

@keyframes star-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

.eventhub-wrapper .eventhub-card-editorial__highlight-label {
    display: block;
    position: absolute;
    bottom: calc(100% - 8px);
    left: 0;
    min-width: var(--lev-card-date-width);
    width: auto;
    background: var(--lev-orange);
    color: var(--lev-white);
    font-size: var(--lev-card-highlight-size);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: var(--lev-card-badge-padding-y)
        calc(var(--lev-card-badge-padding-x) + 3px)
        calc(var(--lev-card-badge-padding-y) + 1px);
    text-align: center;
    clip-path: polygon(0 11px, 100% 0, 100% calc(100% - 11px), 0 100%);
    z-index: 20;
    pointer-events: none;
    font-style: italic;
}

.eventhub-wrapper .eventhub-card-editorial__highlight-label span {
    display: inline-block;
    transform: skewY(-6deg) scale(1.1);
}

/* Highlight: Date-Overlay Farbe */
.eventhub-wrapper .eventhub-card-editorial__date-overlay--highlight {
    background: var(--lev-orange);
    filter: drop-shadow(0 4px 15px rgba(236, 102, 8, 0.4));
}

/* ==========================================================================
   TICKET BADGE im Bild (unten rechts)
   ========================================================================== */

.eventhub-wrapper .eventhub-card-editorial__ticket-badge {
    position: absolute;
    bottom: 0;
    right: var(--lev-card-date-left);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--lev-pink);
    color: var(--lev-white);
    font-size: var(--lev-card-badge-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: calc(var(--lev-card-badge-padding-y) - 0px)
        var(--lev-card-badge-padding-x)
        calc(var(--lev-card-badge-padding-y) + 2px)
        var(--lev-card-badge-padding-x);
    border-radius: 4px;
    text-decoration: none;
    z-index: 5;
    transition: all 0.3s ease;
    box-shadow: 0px 0px 5px 3px rgba(203, 9, 80, 0.25);
}

.eventhub-wrapper .eventhub-card-editorial__ticket-badge:hover {
    transform: scale(1.05); /* Transform kombinieren! */
    background: var(--lev-pink-dark);
    color: var(--lev-white);
    text-decoration: none;
}

.eventhub-wrapper .eventhub-card-editorial__ticket-badge .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
}

/* ==========================================================================
   CONTENT BEREICH - Überlappt das Bild
   ========================================================================== */

.eventhub-wrapper .eventhub-card-editorial__content {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--lev-card-padding) var(--lev-card-padding)
        var(--lev-card-padding) var(--lev-card-padding-left);
    margin-top: var(--lev-card-content-overlap);
    background: var(--lev-white);
    z-index: 2;
}

/* ==========================================================================
   META ZEILE
   ========================================================================== */

.eventhub-wrapper .eventhub-card-editorial__meta {
    display: flex;
    align-items: center;
    gap: var(--lev-card-gap);
    margin-top: var(--lev-card-gap);
    margin-bottom: 2px;
}

.eventhub-wrapper .eventhub-card-editorial__weekday {
    font-size: var(--lev-card-meta-size);
    font-weight: 600;
    color: var(--lev-pink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.eventhub-wrapper .eventhub-card-editorial__time {
    font-size: var(--lev-card-meta-size);
    color: var(--lev-grey);
    font-weight: 500;
    text-transform: uppercase;
}

.eventhub-wrapper .eventhub-card-editorial__time::before {
    content: '';
    margin-right: 0;
}

.eventhub-wrapper .eventhub-card-editorial__series-icon {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    color: var(--lev-grey);
    opacity: 0.7;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.eventhub-wrapper .eventhub-card-editorial__series-icon .eventhub-icon-stacked {
    width: var(--lev-card-icon-size);
    height: var(--lev-card-icon-size);
}

.eventhub-wrapper .eventhub-card-editorial__series-icon:hover {
    opacity: 1;
    color: var(--lev-pink);
    transform: scale(1.15);
}

/* ==========================================================================
   TITEL - Starke Typografie
   ========================================================================== */

.eventhub-wrapper .eventhub-card-editorial__title,
.eventhub-wrapper .eventhub-card-banner__title {
    margin: 0 0 4px 0;
    font-size: var(--lev-card-title-size);
    font-weight: 700;
    line-height: 1.35;
    color: var(--lev-black);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eventhub-wrapper .eventhub-card-editorial__title a,
.eventhub-wrapper .eventhub-card-banner__title a {
    display: inline;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
    background-image: linear-gradient(var(--lev-pink), var(--lev-pink));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition:
        background-size 0.3s ease,
        color 0.2s ease;
}

.eventhub-wrapper .eventhub-card-editorial__title a:hover,
.eventhub-wrapper .eventhub-card-banner__title a:hover {
    text-decoration: none;
    color: var(--lev-pink);
    background-size: 100% 2px;
}

/* ==========================================================================
   VENUE
   ========================================================================== */

.eventhub-wrapper .eventhub-card-editorial__venue {
    display: flex;
    align-items: center;
    gap: calc(var(--lev-card-gap) * 0.75);
    font-size: var(--lev-card-venue-size);
    color: var(--lev-grey);
}

.eventhub-wrapper .eventhub-card-editorial__venue-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    color: var(--lev-blue);
}

.eventhub-wrapper .eventhub-card-editorial__venue a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.eventhub-wrapper .eventhub-card-editorial__venue a:hover {
    color: var(--lev-pink);
}

/* ==========================================================================
   HIGHLIGHT VARIANTE
   ========================================================================== */
/*
.eventhub-wrapper .eventhub-card--editorial.eventhub-event-card--highlight {
    border: none;
    box-shadow: 0px 5px 15px rgba(236, 102, 8, 0.25);
}
*/
.eventhub-wrapper
    .eventhub-card--editorial.eventhub-event-card--highlight:hover {
    box-shadow: 0 20px 40px rgba(236, 102, 8, 0.25);
}

/* ==========================================================================
   CONTAINER QUERIES - Cards passen sich an CONTAINER-Breite an!

   Das Fluid Design System übernimmt die stufenlose Anpassung.
   Container Queries greifen nur für spezielle Layout-Anpassungen.
   ========================================================================== */

/*
   SEHR KLEINE CONTAINER (< 260px)
   z.B. sehr schmale Sidebar-Widgets
*/
@container card-container (max-width: 260px) {
    /* Kategorie-Badges komplett ausblenden bei extremer Enge */
    .eventhub-card-editorial__category-badges {
        display: none;
    }

    /* Highlight-Label kompakter */
    .eventhub-card-editorial__highlight-label span {
        letter-spacing: 0.08em;
    }

    /* Venue einzeilig mit Ellipsis */
    .eventhub-card-editorial__venue {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Titel maximal 2 Zeilen */
    .eventhub-card-editorial__title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/*
   KLEINE CONTAINER (260px - 320px)
   z.B. Standard-Sidebar, 4-Spalten ohne Sidebar
*/
@container card-container (min-width: 260px) and (max-width: 320px) {
    /* Nur 1 Kategorie-Badge anzeigen */
    .eventhub-card-editorial__category-badge:nth-child(n + 2) {
        display: none;
    }

    /* Titel maximal 2 Zeilen */
    .eventhub-card-editorial__title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/*
   MITTLERE CONTAINER (320px - 400px)
   z.B. 3-Spalten mit Sidebar, 2-Spalten Mobile
*/
@container card-container (min-width: 320px) and (max-width: 400px) {
    /* Maximal 2 Kategorie-Badges */
    .eventhub-card-editorial__category-badge:nth-child(n + 3) {
        display: none;
    }
}

/*
   GROSSE CONTAINER (> 400px)
   z.B. 2-Spalten Desktop, Featured Cards
   → Alle Badges sichtbar, volle Darstellung
*/

/* ==========================================================================
   CARD-INTERNE CONTAINER QUERIES
   Basierend auf der Breite der CARD selbst
   ========================================================================== */

/* Wenn die Card selbst sehr schmal ist (< 240px) */
@container event-card (max-width: 240px) {
    /* Series-Icon kleiner */
    .eventhub-card-editorial__series-icon .eventhub-icon-stacked {
        width: 14px;
        height: 14px;
    }

    /* Ticket-Badge Icon ausblenden, nur Text */
    .eventhub-card-editorial__ticket-badge .dashicons {
        display: none;
    }
}

/* Mittlere Card-Breite (240px - 300px) */
@container event-card (min-width: 240px) and (max-width: 300px) {
    /* Venue kann umbrechen */
    .eventhub-card-editorial__venue {
        flex-wrap: wrap;
    }
}

/* Große Card-Breite (> 300px) - mehr Platz für Content */
@container event-card (min-width: 300px) {
    /* Titel kann 3 Zeilen haben bei genug Platz */
    .eventhub-card-editorial__title {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

/* ==========================================================================
   ASPECT RATIO - Viewport-basiert
   Desktop: 4/3 (Standard), Mobile: 16/9
   ========================================================================== */

/* Mobile: 16:9 für kompaktere Darstellung */
@media (max-width: 576px) {
    .eventhub-wrapper .eventhub-card-editorial__image-container {
        aspect-ratio: 16 / 9;
    }
}

/* ==========================================================================
   FALLBACK FÜR BROWSER OHNE CONTAINER QUERY SUPPORT
   (Safari < 16, Firefox < 110)
   Diese Media Queries greifen NUR wenn Container Queries nicht unterstützt werden
   ========================================================================== */

@supports not (container-type: inline-size) {
    /* Kleine Viewports */
    @media (max-width: 576px) {
        .eventhub-card-editorial__image-container {
            aspect-ratio: 16 / 9;
        }

        .eventhub-card-editorial__category-badge:nth-child(n + 2) {
            display: none;
        }
    }

    /* Mittlere Viewports */
    @media (min-width: 577px) and (max-width: 768px) {
        .eventhub-card-editorial__category-badge:nth-child(n + 3) {
            display: none;
        }
    }
}

/* ==========================================================================
   ALLGEMEINE EVENTHUB OVERRIDES
   ========================================================================== */

/* .eventhub-wrapper → Zentral definiert am Dateianfang (nach :root) */

/* Grid Spacing */
.eventhub-wrapper .eventhub-event-grid {
    gap: 2rem;
}

/* Section Title */
.eventhub-wrapper .eventhub-section__title {
    color: var(--lev-grey);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
}

/* No Results Message */
.eventhub-wrapper .eventhub-no-results,
.eventhub-wrapper .eventhub-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--lev-grey);
    font-size: 1rem;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-style: normal;
}

.eventhub-wrapper .eventhub-no-results p,
.eventhub-wrapper .eventhub-empty-state p {
    margin: 0;
    max-width: 100%;
}

/* Filter Buttons */
.eventhub-wrapper .eventhub-filter__btn--active {
    background: var(--lev-pink) !important;
    color: var(--lev-white) !important;
    border-color: var(--lev-pink) !important;
}

.eventhub-wrapper .eventhub-filter__reset-btn {
    background: var(--lev-pink) !important;
    color: var(--lev-white) !important;
    border: none !important;
    font-weight: 600;
}

.eventhub-wrapper .eventhub-filter__reset-btn:hover {
    background: var(--lev-pink-dark) !important;
}

/* Quick Chips */
.eventhub-wrapper .eventhub-quick-chip {
    border-radius: 20px;
    font-weight: 500;
}

.eventhub-wrapper .eventhub-quick-chip:hover {
    border-color: var(--lev-pink);
    color: var(--lev-pink);
}

.eventhub-wrapper .eventhub-quick-chip--active {
    background: var(--lev-pink) !important;
    border-color: var(--lev-pink) !important;
    color: var(--lev-white) !important;
}

/* Load More Button */
.eventhub-wrapper .eventhub-load-more,
.eventhub-wrapper .eventhub-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    margin: var(--eventhub-spacing-xl, 2rem) auto;
    padding: 0.875rem 2rem;
    background: var(--lev-pink);
    color: var(--lev-white);
    border: none;
    border-radius: var(--eventhub-border-radius, 4px);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease !important;
}

@media (hover: hover) {
    .eventhub-wrapper .eventhub-load-more:hover:not(:disabled),
    .eventhub-load-more:hover:not(:disabled) {
        background: var(--lev-pink-dark);
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(203, 9, 80, 0.3);
    }
}

.eventhub-wrapper .eventhub-load-more:active:not(:disabled),
.eventhub-wrapper .eventhub-load-more:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(203, 9, 80, 0.2);
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease !important;
}

.eventhub-wrapper .eventhub-load-more:disabled,
.eventhub-wrapper .eventhub-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.eventhub-wrapper .eventhub-load-more:focus-visible,
.eventhub-wrapper .eventhub-load-more:focus-visible {
    outline: 2px solid var(--lev-pink);
    outline-offset: 2px;
}

/* Badge Links */
.eventhub-wrapper .eventhub-badge--link:hover {
    color: var(--lev-white) !important;
    background: var(--lev-grey);
}

/* ==========================================================================
   Submission Form Kompatibilität
   ========================================================================== */

/* Submit Button - gleiches Styling wie Load-More */
.eventhub-wrapper .eventhub-submission-page .eventhub-btn--primary,
.eventhub-wrapper .eventhub-btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: var(--lev-pink);
    color: var(--lev-white);
    border: none;
    border-radius: var(--eventhub-border-radius, 4px);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease;
}

@media (hover: hover) {
    .eventhub-submission-page .eventhub-btn--primary:hover:not(:disabled),
    .eventhub-btn--primary:hover:not(:disabled) {
        background: var(--lev-pink-dark);
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(203, 9, 80, 0.3);
    }
}

.eventhub-wrapper
    .eventhub-submission-page
    .eventhub-btn--primary:active:not(:disabled),
.eventhub-wrapper .eventhub-btn--primary:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(203, 9, 80, 0.2);
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

.eventhub-wrapper .eventhub-submission-page .eventhub-btn--primary:disabled,
.eventhub-wrapper .eventhub-btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.eventhub-wrapper
    .eventhub-submission-page
    .eventhub-btn--primary:focus-visible,
.eventhub-wrapper .eventhub-btn--primary:focus-visible {
    outline: 2px solid var(--lev-pink);
    outline-offset: 2px;
}

/* Large-Variante: Etwas mehr Padding */
.eventhub-wrapper .eventhub-btn--primary.eventhub-btn--large {
    padding: 1rem 2.5rem;
    font-size: 1rem;
}

/* Secondary Button - Outline-Stil */
.eventhub-wrapper .eventhub-submission-page .eventhub-btn--secondary,
.eventhub-wrapper .eventhub-btn--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--lev-white);
    color: var(--lev-pink);
    border: 2px solid var(--lev-pink);
    border-radius: var(--eventhub-border-radius, 4px);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease;
}

@media (hover: hover) {
    .eventhub-submission-page .eventhub-btn--secondary:hover,
    .eventhub-btn--secondary:hover {
        background: var(--lev-pink);
        color: var(--lev-white);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(203, 9, 80, 0.2);
    }
}

.eventhub-wrapper .eventhub-submission-page .eventhub-btn--secondary:active,
.eventhub-wrapper .eventhub-btn--secondary:active {
    transform: translateY(0);
    box-shadow: none;
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

.eventhub-wrapper
    .eventhub-submission-page
    .eventhub-btn--secondary:focus-visible,
.eventhub-wrapper .eventhub-btn--secondary:focus-visible {
    outline: 2px solid var(--lev-pink);
    outline-offset: 2px;
}

/* Small-Variante */
.eventhub-wrapper .eventhub-btn--secondary.eventhub-btn--small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

/* Section-Titel im Formular */
.eventhub-wrapper .eventhub-submission-page .eventhub-form-section__title {
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lev-grey);
    margin: 0 0 var(--eventhub-spacing-md, 1rem) 0;
}

.eventhub-wrapper .eventhub-submission-page,
.eventhub-wrapper .eventhub-submission-page *,
.eventhub-wrapper .eventhub-submission-page *::before,
.eventhub-wrapper .eventhub-submission-page *::after {
    box-sizing: border-box !important;
}

.eventhub-wrapper .eventhub-submission-page input[type='text'],
.eventhub-wrapper .eventhub-submission-page input[type='email'],
.eventhub-wrapper .eventhub-submission-page input[type='tel'],
.eventhub-wrapper .eventhub-submission-page input[type='url'],
.eventhub-wrapper .eventhub-submission-page input[type='date'],
.eventhub-wrapper .eventhub-submission-page input[type='time'],
.eventhub-wrapper .eventhub-submission-page textarea,
.eventhub-wrapper .eventhub-submission-page select {
    height: auto !important;
    line-height: 1.6 !important;
}

.eventhub-wrapper .eventhub-submission-page label,
.eventhub-wrapper .eventhub-submission-page label span {
    font-weight: inherit;
}

.eventhub-wrapper .eventhub-submission-page .eventhub-form-field__hint {
    margin-top: -12px;
}

/* ==========================================================================
   MODERNE FILTERBAR - Lust auf Leverkusen Style
   Passend zu generatepress_child/eventhub_aus Struktur
   mit Lust auf Leverkusen Farbschema (Pink statt Rot)
   ========================================================================== */

/* --- Basis-Container für alle Filter-Bars --- */
#eventhub-filter-form.eventhub-filter {
    background: var(--lev-grey-light, #f5f5f5);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: visible; /* Allow search dropdown to overflow */
}

/* .eventhub-wrapper overflow → Zentral definiert am Dateianfang (nach :root) */

/* --- Labels: Screen-Reader only --- */
#eventhub-filter-form .eventhub-filter__label.screen-reader-text,
#eventhub-filter-form
    .eventhub-filter__group--category
    > .eventhub-filter__label,
#eventhub-filter-form
    .eventhub-filter__group--district
    > .eventhub-filter__label,
#eventhub-filter-form .eventhub-filter__group--search > .eventhub-filter__label,
#eventhub-filter-form .eventhub-filter__group--timeframe > legend {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   SUCHFELD MIT ICON (search.php Override)
   Pill-Style wie im Original-Design
   ========================================================================== */

#eventhub-filter-form .eventhub-filter__group--search {
    position: relative;
    z-index: 2000; /* Höher als Custom-Select-Options (1000) */
    overflow: visible !important;
}

#eventhub-filter-form .eventhub-search--pill {
    position: relative;
    overflow: visible !important;
}

#eventhub-filter-form .eventhub-search--pill .eventhub-search__icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lev-grey);
    pointer-events: auto; /* Klickbar für Filter-Toggle */
    cursor: pointer;
    width: 18px;
    height: 18px;
    z-index: 2;
    transition: color 0.2s ease;
}

/* Hover-Effekt für klickbares Lupen-Icon */
@media (hover: hover) {
    #eventhub-filter-form .eventhub-search--pill .eventhub-search__icon:hover {
        color: var(--lev-pink);
    }
}

#eventhub-filter-form .eventhub-search--pill .eventhub-search__input {
    width: 100%;
    border: 1px solid var(--lev-border) !important;
    background: var(--lev-white) !important;
    border-radius: 50px !important;
    padding: 0.75rem 1.25rem 0.75rem 3.5rem !important; /* Standard-Padding */
    font-size: 1rem; /* Minimum 16px to prevent iOS auto-zoom on focus */
    font-weight: 600;
    color: var(--lev-grey);
    transition: all 0.2s;
    outline: none;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
    margin: 0;
}

/* Wenn Clear-Button sichtbar ist: Mehr Padding rechts für Platz */
#eventhub-filter-form
    .eventhub-search--pill:has(.eventhub-search__clear:not([hidden]))
    .eventhub-search__input {
    padding-right: 2.5rem !important;
}

/* Eigener Clear-Button (X) - plattformunabhängig */
#eventhub-filter-form .eventhub-search__clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    color: var(--lev-grey, #555555);
    opacity: 0.7;
    transition:
        opacity 0.2s,
        color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

#eventhub-filter-form .eventhub-search__clear:hover {
    opacity: 1;
    color: var(--lev-pink, #cb0950);
}

#eventhub-filter-form .eventhub-search__clear[hidden] {
    display: none;
}

#eventhub-filter-form .eventhub-search--pill .eventhub-search__input:focus {
    background: var(--lev-white) !important;
    box-shadow: none !important;
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
}

#eventhub-filter-form
    .eventhub-search--pill:focus-within
    .eventhub-search__icon {
    color: var(--lev-pink);
}

/* Suchergebnisse Dropdown */
#eventhub-filter-form .eventhub-search__results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: var(--lev-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 9999; /* High z-index to ensure visibility */
    max-height: 400px;
    overflow-y: auto;
}

/* Einzelne Suchergebnis-Items (korrekter Selektor) */
#eventhub-filter-form .eventhub-search__item {
    padding: 10px 15px;
    border-bottom: 1px solid var(--lev-grey-lighter);
    display: block;
    text-decoration: none;
    color: var(--lev-grey);
    transition: background 0.1s;
}

#eventhub-filter-form .eventhub-search__item:last-child {
    border-bottom: none;
}

#eventhub-filter-form .eventhub-search__item:hover {
    background: var(--lev-grey-light);
    color: var(--lev-grey);
}

/* ==========================================================================
   CUSTOM SELECT DROPDOWNS (JavaScript-gesteuert)
   ========================================================================== */

/* Native Select verstecken */
.eventhub-wrapper .eventhub-custom-select-wrapper select {
    display: none;
}

.eventhub-wrapper .eventhub-custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

.eventhub-wrapper .eventhub-custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lev-grey);
    background: var(--lev-white);
    border: 1px solid var(--lev-border);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: normal;
}

/* Hover nur für Geräte mit echtem Hover-Support (keine Touch-Geräte) */
@media (hover: hover) and (pointer: fine) {
    .eventhub-custom-select-trigger:hover {
        background: var(--lev-grey-light);
    }
}

/* Focus und Active States zurücksetzen */
.eventhub-wrapper .eventhub-custom-select-trigger:focus,
.eventhub-wrapper .eventhub-custom-select-trigger:active {
    background: var(--lev-white);
    outline: none;
}

.eventhub-wrapper .eventhub-custom-select-trigger:focus-visible {
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
    background: var(--lev-white);
}

.eventhub-wrapper
    .eventhub-custom-select-wrapper.is-open
    .eventhub-custom-select-trigger {
    background: var(--lev-white);
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
}

/* Nach dem Schließen: Hintergrund zurücksetzen */
.eventhub-wrapper
    .eventhub-custom-select-wrapper:not(.is-open)
    .eventhub-custom-select-trigger:not(:hover) {
    background: var(--lev-white);
}

.eventhub-wrapper .eventhub-custom-select-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s;
    color: var(--lev-grey);
    flex-shrink: 0;
    margin-left: 10px;
}

.eventhub-wrapper
    .eventhub-custom-select-wrapper.is-open
    .eventhub-custom-select-arrow {
    transform: rotate(180deg);
    color: var(--lev-pink);
}

.eventhub-wrapper .eventhub-custom-select-options {
    position: absolute;
    display: block;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--lev-white);
    border: 1px solid var(--lev-grey-lighter);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    z-index: 1000; /* Konsistent mit Such-Dropdown für korrekte Layering */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1);
    overflow: hidden;
}

/* Innerer scrollbarer Container */
.eventhub-wrapper .eventhub-custom-select-options-inner {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px 0;
}

.eventhub-wrapper
    .eventhub-custom-select-wrapper.is-open
    .eventhub-custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.eventhub-wrapper .eventhub-custom-option {
    padding: 10px 20px;
    font-size: 0.95rem;
    color: var(--lev-grey);
    cursor: pointer;
    transition: all 0.1s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eventhub-wrapper .eventhub-custom-option:hover {
    background-color: var(--lev-grey-medium);
    color: var(--lev-pink);
}

.eventhub-wrapper .eventhub-custom-option.selected {
    background-color: rgba(203, 9, 80, 0.05);
    color: var(--lev-pink);
    font-weight: 600;
}

/* Scrollbar for options (auf inner container) */
.eventhub-wrapper .eventhub-custom-select-options-inner::-webkit-scrollbar {
    width: 6px;
}
.eventhub-wrapper
    .eventhub-custom-select-options-inner::-webkit-scrollbar-track {
    background: var(--lev-grey-lighter);
    border-radius: 3px;
    margin: 8px 0;
}
.eventhub-wrapper
    .eventhub-custom-select-options-inner::-webkit-scrollbar-thumb {
    background: var(--lev-scrollbar);
    border-radius: 3px;
}
.eventhub-wrapper
    .eventhub-custom-select-options-inner::-webkit-scrollbar-thumb:hover {
    background: var(--lev-scrollbar-hover);
}

/* Fallback: Native Select Styling (wenn JS deaktiviert) */
#eventhub-filter-form .eventhub-filter__select {
    width: 100% !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: var(--lev-white) !important;
    background-image: none !important;
    border: 1px solid var(--lev-border) !important;
    border-radius: 50px !important;
    padding: 0.75rem 2.5rem 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
    color: var(--lev-grey) !important;
    cursor: pointer !important;
    transition: border-color 0.2s !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: normal !important;
}

#eventhub-filter-form .eventhub-filter__select:focus {
    border-color: var(--lev-pink) !important;
    box-shadow: none !important;
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
}

#eventhub-filter-form .eventhub-filter__chevron {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lev-grey);
    pointer-events: none;
}

/* ==========================================================================
   QUICK-FILTER CHIPS (Horizontaler Scroll-Container)
   ========================================================================== */

#eventhub-filter-form .eventhub-filter__chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: visible;
    overflow-y: visible;
    gap: 8px;
    padding: 10px 0 10px 0;
    margin-top: -20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 0px;
}

#eventhub-filter-form .eventhub-filter__chips::-webkit-scrollbar {
    display: none;
}

#eventhub-filter-form .eventhub-quick-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--lev-grey-light-medium);
    color: var(--lev-grey);
    border: 2px solid transparent;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

#eventhub-filter-form .eventhub-quick-chip:focus {
    outline: none;
}

#eventhub-filter-form .eventhub-quick-chip:focus-visible {
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
}

/* Hover nur für Geräte mit echtem Hover-Support */
@media (hover: hover) and (pointer: fine) {
    #eventhub-filter-form .eventhub-quick-chip:hover {
        background: var(--lev-grey-medium);
        transform: translateY(-2px);
        box-shadow: none;
    }

    #eventhub-filter-form .eventhub-quick-chip.is-active:hover {
        background: var(--lev-pink);
        color: var(--lev-white);
        border-color: var(--lev-pink);
        transform: translateY(-2px);
        box-shadow: none;
    }
}

#eventhub-filter-form .eventhub-quick-chip.is-active {
    background: var(--lev-pink);
    color: var(--lev-white);
    border-color: var(--lev-pink);
}

#eventhub-filter-form .eventhub-quick-chip__icon {
    display: flex;
    align-items: center;
    color: inherit;
}

#eventhub-filter-form .eventhub-quick-chip__icon svg {
    width: 15px;
    height: 15px;
}

/* ==========================================================================
   PILL-RADIO BUTTONS (timeframe-buttons.php Override)
   Mit animiertem Sliding Indicator
   ========================================================================== */

#eventhub-filter-form .eventhub-filter__group--timeframe {
    background-color: var(--lev-grey-light-medium);
    flex: 0 0 auto;
    border-radius: 50vh;
}

#eventhub-filter-form .eventhub-pill-buttons {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    align-items: center;
    justify-content: space-evenly;
    padding: 4px;
}

/* Sliding Indicator - Das pinke Element das gleitet */
#eventhub-filter-form .eventhub-pill-buttons::before {
    content: '';
    position: absolute;
    top: 4px;
    left: var(--indicator-left, 4px);
    width: var(--indicator-width, 60px);
    height: calc(100% - 8px);
    background: var(--lev-pink);
    border-radius: 50vh;
    transition:
        left var(--indicator-transition-duration, 0.35s)
            cubic-bezier(0.4, 0, 0.2, 1),
        width var(--indicator-transition-duration, 0.35s)
            cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(203, 9, 80, 0.3);
}

/* Verstecke Indicator wenn noch nicht initialisiert */
#eventhub-filter-form .eventhub-pill-buttons:not(.has-indicator)::before {
    opacity: 0;
}

#eventhub-filter-form .eventhub-pill-buttons.has-indicator::before {
    opacity: 1;
}

#eventhub-filter-form .eventhub-pill-radio {
    cursor: pointer;
    margin: 0;
    position: relative;
    z-index: 2;
}

#eventhub-filter-form .eventhub-pill-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#eventhub-filter-form .eventhub-pill-radio__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.75rem;
    border: 2px solid transparent;
    border-radius: 50vh;
    color: var(--lev-grey);
    font-size: 0.9rem;
    font-weight: 600;
    transition:
        color 0.25s ease,
        transform 0.2s ease;
    background: transparent;
    position: relative;
    z-index: 2;
}

/* Hover nur für Geräte mit echtem Hover-Support */
@media (hover: hover) and (pointer: fine) {
    #eventhub-filter-form
        .eventhub-pill-radio:hover
        .eventhub-pill-radio__label {
        transform: translateY(-1px);
        background: var(--lev-grey-medium);
    }

    /* Kein Hover-Hintergrund wenn bereits aktiv (checked) */
    #eventhub-filter-form
        .eventhub-pill-radio:hover
        input:checked
        + .eventhub-pill-radio__label {
        background: transparent;
    }
}

/* Aktiver Zustand - nur Textfarbe ändern, Hintergrund kommt vom Indicator */
/* Nur weiß wenn Datum NICHT fokussiert ist */
#eventhub-filter-form
    .eventhub-pill-buttons:not(.date-focused)
    .eventhub-pill-radio
    input:checked
    + .eventhub-pill-radio__label {
    color: var(--lev-white);
    background: transparent;
    border-color: transparent;
}

/* Wenn Datum fokussiert: checked Radio behält graue Farbe */
#eventhub-filter-form
    .eventhub-pill-buttons.date-focused
    .eventhub-pill-radio
    input:checked
    + .eventhub-pill-radio__label {
    color: var(--lev-grey);
    background: transparent;
    border-color: transparent;
}

#eventhub-filter-form
    .eventhub-pill-radio
    input:focus-visible
    + .eventhub-pill-radio__label {
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   DATUM-PILL MIT LABEL (datepicker.php Override)
   ========================================================================== */

#eventhub-filter-form .eventhub-pill-date {
    position: relative;
    display: inline-flex;
}

#eventhub-filter-form .eventhub-pill-date__input {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Mindestgröße für iOS Touch-Target: 44x44px */
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    z-index: 10;
    /* Visuell verstecken aber klickbar lassen */
    color: transparent;
    background: transparent;
    border: none;
    /* iOS braucht minimale Opacity > 0 */
    opacity: 0.01;
    /* iOS: Touch explizit erlauben */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Chrome/Webkit: Interne Steuerelemente verstecken */
#eventhub-filter-form
    .eventhub-wrapper
    .eventhub-pill-date__input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
}

.eventhub-wrapper
    #eventhub-filter-form
    .eventhub-pill-date__input::-webkit-inner-spin-button,
.eventhub-wrapper
    #eventhub-filter-form
    .eventhub-pill-date__input::-webkit-clear-button {
    display: none;
}

.eventhub-wrapper #eventhub-filter-form .eventhub-pill-date__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 1.3rem;
    padding: 0.3rem 0.75rem;
    border: 2px solid transparent;
    border-radius: 50vh;
    color: var(--lev-grey);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        color 0.25s ease,
        transform 0.2s ease;
    background: transparent;
    position: relative;
    z-index: 1;
    /* Label darf keine Touch-Events abfangen */
    pointer-events: none;
}

/* Text-Span: Nur anzeigen wenn Inhalt vorhanden */
.eventhub-wrapper #eventhub-filter-form .eventhub-pill-date__text:empty {
    display: none;
}

/* Hover nur für Geräte mit echtem Hover-Support */
@media (hover: hover) and (pointer: fine) {
    .eventhub-wrapper
        #eventhub-filter-form
        .eventhub-pill-date:hover
        .eventhub-pill-date__label {
        transform: translateY(-1px);
        background: var(--lev-grey-medium);
    }

    /* Kein Hover-Hintergrund wenn bereits aktiv */
    .eventhub-wrapper
        #eventhub-filter-form
        .eventhub-pill-date:hover
        .eventhub-pill-date__label.is-active,
    .eventhub-wrapper
        #eventhub-filter-form
        .eventhub-pill-date:hover
        .eventhub-pill-date__label.is-focused {
        background: transparent;
        transform: translateY(-1px);
    }
}

/* Aktiver Zustand - Textfarbe, Hintergrund kommt vom Sliding Indicator */
.eventhub-wrapper #eventhub-filter-form .eventhub-pill-date__label.is-active,
.eventhub-wrapper #eventhub-filter-form .eventhub-pill-date__label.is-focused {
    color: var(--lev-white);
    background: transparent;
    border-color: transparent;
}

.eventhub-wrapper #eventhub-filter-form .eventhub-pill-date__label svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

/* Label ist jetzt direkt fokussierbar (tabindex="0") */
.eventhub-wrapper
    #eventhub-filter-form
    .eventhub-pill-date__label:focus-visible {
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   TOGGLE-SWITCHES (actions.php Override)
   ========================================================================== */

.eventhub-wrapper #eventhub-filter-form .eventhub-filter-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.eventhub-wrapper #eventhub-filter-form .eventhub-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.eventhub-wrapper #eventhub-filter-form .eventhub-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.eventhub-wrapper #eventhub-filter-form .eventhub-toggle__switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--lev-grey-medium);
    border-radius: 10px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    /* Tap-Highlight auf Touch-Geräten deaktivieren */
    -webkit-tap-highlight-color: transparent;
}

/* Hover-Effekt für Toggle - NUR auf Geräten mit echtem Hover */
@media (hover: hover) and (pointer: fine) {
    .eventhub-wrapper
        #eventhub-filter-form
        .eventhub-toggle:hover
        .eventhub-toggle__switch {
        background: var(--lev-grey);
    }

    .eventhub-wrapper
        #eventhub-filter-form
        .eventhub-toggle:hover
        input:checked
        + .eventhub-toggle__switch {
        background: var(--lev-pink-dark);
    }
}

.eventhub-wrapper #eventhub-filter-form .eventhub-toggle__switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--lev-white);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.eventhub-wrapper
    #eventhub-filter-form
    .eventhub-toggle
    input:checked
    + .eventhub-toggle__switch {
    background: var(--lev-pink);
}

.eventhub-wrapper
    #eventhub-filter-form
    .eventhub-toggle
    input:checked
    + .eventhub-toggle__switch::before {
    transform: translateX(16px);
}

.eventhub-wrapper
    #eventhub-filter-form
    .eventhub-toggle
    input:focus-visible
    + .eventhub-toggle__switch {
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
}

.eventhub-wrapper #eventhub-filter-form .eventhub-toggle__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lev-grey);
}

/* Reset-Button (nur Icon) */
.eventhub-wrapper #eventhub-filter-form .eventhub-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--lev-pink);
    color: var(--lev-white);
    cursor: pointer;
    transition: all 0.2s ease;
    /* Tap-Highlight auf Touch-Geräten deaktivieren */
    -webkit-tap-highlight-color: transparent;
}

/* Hover nur auf Geräten mit echtem Hover-Support */
@media (hover: hover) and (pointer: fine) {
    .eventhub-wrapper #eventhub-filter-form .eventhub-reset-btn:hover {
        background: var(--lev-pink-dark);
        color: var(--lev-white);
        transform: scale(1.05);
    }
}

.eventhub-wrapper #eventhub-filter-form .eventhub-reset-btn:focus {
    outline: none;
}

.eventhub-wrapper #eventhub-filter-form .eventhub-reset-btn:focus-visible {
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
}

.eventhub-wrapper #eventhub-filter-form .eventhub-reset-btn svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   FILTER LAYOUT
   ========================================================================== */

#eventhub-filter-form .eventhub-filter__row--top {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

#eventhub-filter-form .eventhub-filter__row--bottom {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Timeframe-Wrapper: Auf Desktop normal, auf Mobile scrollbar */
#eventhub-filter-form .eventhub-filter__row--timeframe-wrapper {
    flex: 0 0 auto;
}

#eventhub-filter-form .eventhub-filter__group--search {
    flex: 1.5;
    min-width: 200px;
}

#eventhub-filter-form .eventhub-filter__group--category,
#eventhub-filter-form .eventhub-filter__group--district {
    flex: 1;
    min-width: 150px;
}

/* ==========================================================================
   MOBILE FILTER TOGGLE LOGIC (Desktop Defaults)
   ========================================================================== */

/* Toggle Button auf Desktop verstecken */
.eventhub-wrapper .eventhub-filter-mobile-toggle {
    display: none;
}

/* Wrappers verhalten sich neutral auf Desktop (DOM-Struktur ignorieren) */
.eventhub-wrapper .eventhub-filter__dropdowns-wrapper {
    display: contents;
}

.eventhub-wrapper .eventhub-filter__bottom-wrapper {
    display: contents;
}

/* ==========================================================================
   RESPONSIVE FÜR FILTERBAR (Tablet / Desktop - bis 992px)
   Kleine Korrekturen, aber noch keine Toggle-Logic
   ========================================================================== */
@media (max-width: 992px) {
    #eventhub-filter-form.eventhub-filter {
        padding: 1rem 1.25rem;
    }

    #eventhub-filter-form .eventhub-filter__row--bottom {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    /* Row-Top: Flex-Wrap für Dropdowns nebeneinander */
    #eventhub-filter-form .eventhub-filter__row--top {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: stretch;
    }

    /* Suche volle Breite - bis zum Mobile Breakpoint */
    #eventhub-filter-form .eventhub-filter__group--search {
        flex: 1 1 100%;
    }

    /* Kategorie und Stadtteil nebeneinander, je 50% */
    #eventhub-filter-form .eventhub-filter__group--category,
    #eventhub-filter-form .eventhub-filter__group--district {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
    }

    #eventhub-filter-form .eventhub-filter-actions {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: space-between;
        width: 100%;
    }

    #eventhub-filter-form .eventhub-filter-actions .eventhub-reset-btn {
        margin-left: auto;
    }
}

/* ==========================================================================
   MOBILE TOGGLE LOGIC (Erst ab 767px und kleiner!)
   ========================================================================== */

@media (max-width: 767px) {
    /* .eventhub-wrapper margin-top → Zentral definiert am Dateianfang (nach :root) */

    /* Toggle Button sichtbar und gestylt wie Reset-Icon */
    .eventhub-wrapper .eventhub-filter-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px; /* Feste Breite */
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--lev-pink) !important;
        color: var(--lev-white) !important;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-left: auto; /* Push to right if space allows */
    }

    /* Toggle Button im ausgeklappten Zustand: dezent grau */
    .eventhub-wrapper
        #eventhub-filter-form.filters-expanded
        .eventhub-filter-mobile-toggle {
        background: var(--lev-grey-light) !important;
        color: var(--lev-grey) !important;
    }

    /* Hover nur auf Geräten, die Hover unterstützen */
    @media (hover: hover) {
        .eventhub-wrapper .eventhub-filter-mobile-toggle:hover {
            background: var(--lev-pink-dark) !important;
            transform: scale(1.05);
        }

        /* Hover im ausgeklappten Zustand */
        .eventhub-wrapper
            #eventhub-filter-form.filters-expanded
            .eventhub-filter-mobile-toggle:hover {
            background: var(--lev-grey-medium) !important;
            color: var(--lev-grey) !important;
        }
    }

    /* Suche teilt sich Platz mit Button */
    #eventhub-filter-form .eventhub-filter__group--search {
        flex: 1 1 auto; /* Nimm restlichen Platz */
        width: auto;
        min-width: 0;
    }

    /* Suchergebnisse: Volle Breite (Suchfeld + Gap + Toggle-Button) */
    #eventhub-filter-form .eventhub-search__results {
        width: calc(100% + 1rem + 44px);
        max-width: calc(100% + 1rem + 44px) !important;
    }

    #eventhub-filter-form .eventhub-filter__row--top {
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.2rem;
        overflow: visible; /* Allow search dropdown to overflow */
        position: relative;
        z-index: 1000; /* Höher als andere Elemente für Such-Dropdown */
    }

    /* ====================================================================
       CHIPS: Mobile Layout & Visibility (verschoben nach row-top)
       ==================================================================== */
    #eventhub-filter-form .eventhub-filter__chips.chips-mobile-moved {
        /* Visibility: Initial versteckt */
        display: none !important;

        /* Layout */
        width: calc(100% + 2.5rem);
        flex-basis: 100%;
        flex-wrap: nowrap;
        order: 10; /* Nach Search+Toggle, vor Dropdowns */

        /* Spacing */
        margin: 0 -1.25rem 0 -1.25rem;
        padding: 0 1.25rem;

        /* Horizontal Scrolling */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #eventhub-filter-form
        .eventhub-filter__chips.chips-mobile-moved::-webkit-scrollbar {
        display: none;
    }

    /* Chips sichtbar wenn Filter expanded */
    #eventhub-filter-form.filters-expanded
        .eventhub-filter__chips.chips-mobile-moved {
        display: flex !important;
    }

    /* Layout für Dropdowns-Wrapper (versteckt per Default) */
    .eventhub-wrapper .eventhub-filter__dropdowns-wrapper {
        display: none; /* Initial versteckt */
        width: 100%;
        flex-basis: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 0;
        order: 20; /* Nach Chips */
        position: relative;
        z-index: 500; /* Unter row-top (1000), aber über bottom-wrapper */
    }

    /* Bottom Wrapper (versteckt per Default) */
    .eventhub-wrapper .eventhub-filter__bottom-wrapper {
        display: none; /* Initial versteckt */
        width: 100%;
        margin-top: 0;
        position: relative;
        z-index: 100; /* Niedrigster z-index da keine Dropdowns */
    }

    /* STATE: EXPANDED */
    .eventhub-wrapper
        #eventhub-filter-form.filters-expanded
        .eventhub-filter__dropdowns-wrapper {
        display: flex; /* Dropdowns sind flex-items */
    }

    .eventhub-wrapper
        #eventhub-filter-form.filters-expanded
        .eventhub-filter__bottom-wrapper {
        display: block;
    }

    /* Kategorie und Dropdowns (Standard: Nebeneinander, share space) */
    #eventhub-filter-form .eventhub-filter__group--category,
    #eventhub-filter-form .eventhub-filter__group--district {
        flex: 1 1 calc(50% - 0.5rem); /* Pro Element 50% minus halber Gap (1rem/2) */
        min-width: 0; /* Erlaubt Schrumpfen unter Inhalt-Größe bei Textüberlauf */
    }

    /* Timeframe-Wrapper: Edge-to-edge + horizontal scrollbar */
    #eventhub-filter-form .eventhub-filter__row--timeframe-wrapper {
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-bottom: 0;
        /* Edge-to-edge breakout */
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        width: calc(100% + 1.25rem);
        /* Padding links */
        padding-left: 1.25rem;
        padding-right: 0;
        position: relative;
    }

    #eventhub-filter-form
        .eventhub-filter__row--timeframe-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* Spacer entfernen, wir nutzen Margin */
    #eventhub-filter-form .eventhub-filter__row--timeframe-wrapper::after {
        display: none;
    }

    /* Fieldset: Margin-Right sorgt für den Abstand am Ende des Scrolls */
    #eventhub-filter-form .eventhub-filter__group--timeframe {
        display: inline-flex;
        /* Kalkulation: 100% des Wrappers minus die 1.25rem, die er rechts "übersteht" */
        /* Damit schließt die graue Box bündig mit dem Content darüber (Dropdowns) ab */
        min-width: calc(100% - 1.25rem);
        width: auto;
        /* Wenn genug Platz ist, nimm die berechnete Breite ein */
        justify-content: space-between;
        max-width: none;
        flex: 0 0 auto;
        box-sizing: border-box;
        padding-right: 0;
        margin-right: 1.25rem;
    }

    /* Pill-Buttons: Min-Width 100% damit es füllt, aber wachsen kann */
    #eventhub-filter-form .eventhub-pill-buttons {
        width: auto; /* WICHTIG: Erlaubt Wachsen über 100% hinaus für Scrollen */
        min-width: 100%; /* Füllt mindestens den Container */
        display: flex;
        justify-content: space-between;
        gap: 0;
        flex-wrap: nowrap;
        /* Padding erhöhen (12px), damit "Alle" und "Datum" nicht am Rand kleben */
        /* padding: 4px 12px; */
        box-sizing: border-box;
    }

    /* Jede einzelne Pill nicht stretchen, Originalform behalten */
    #eventhub-filter-form .eventhub-pill-radio,
    #eventhub-filter-form .eventhub-pill-date {
        flex: 0 0 auto;
        white-space: nowrap;
        text-align: center;
    }

    /* Label Padding wieder normal setzen */
    #eventhub-filter-form .eventhub-pill-radio__label,
    #eventhub-filter-form .eventhub-pill-date__label {
        width: auto;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Sliding Indicator auf Mobil komplett deaktivieren */
    #eventhub-filter-form .eventhub-pill-buttons::before {
        display: none !important;
        content: none !important;
    }

    /* Stattdessen: Direkter Hintergrund auf aktivem Element */
    #eventhub-filter-form
        .eventhub-pill-radio
        input:checked
        + .eventhub-pill-radio__label {
        background: var(--lev-pink) !important;
        color: var(--lev-white) !important;
        box-shadow: 0 2px 8px rgba(203, 9, 80, 0.3);
    }

    /* Datum-Pill aktiv */
    #eventhub-filter-form .eventhub-pill-date__label.is-active,
    #eventhub-filter-form .eventhub-pill-date__label.is-focused {
        background: var(--lev-pink) !important;
        color: var(--lev-white) !important;
        box-shadow: 0 2px 8px rgba(203, 9, 80, 0.3);
    }

    #eventhub-filter-form
        .eventhub-pill-date__label.is-active
        .eventhub-pill-date__icon,
    #eventhub-filter-form
        .eventhub-pill-date__label.is-focused
        .eventhub-pill-date__icon {
        color: var(--lev-white) !important;
    }

    /* Pills nicht mehr flex-grow - natürliche Breite behalten */
    #eventhub-filter-form .eventhub-pill-buttons .eventhub-pill-radio,
    #eventhub-filter-form .eventhub-pill-buttons .eventhub-pill-date {
        flex: 0 0 auto;
    }

    #eventhub-filter-form .eventhub-pill-buttons .eventhub-pill-radio__label {
        justify-content: center;
    }

    /* Toggles + Reset: Toggles links, Reset rechts */
    #eventhub-filter-form .eventhub-filter-actions {
        justify-content: space-between;
        width: 100%;
    }

    #eventhub-filter-form .eventhub-filter-actions .eventhub-reset-btn {
        margin-left: auto;
    }
}

@media (max-width: 576px) {
    #eventhub-filter-form .eventhub-pill-radio__label,
    #eventhub-filter-form .eventhub-pill-date__label {
        padding: 0.3em 0.75rem;
        font-size: 0.85rem;
    }

    #eventhub-filter-form .eventhub-toggle__label {
        font-size: 0.85rem;
    }
}

/* Dropdowns untereinander bei sehr kleinen Screens */
@media (max-width: 376px) {
    #eventhub-filter-form .eventhub-filter__group--category,
    #eventhub-filter-form .eventhub-filter__group--district {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   MODERNER EVENTHUB-SLIDER - Passend zum EventHub Editorial Design
   Alle Regeln mit .eventhub-wrapper Präfix für höhere Spezifität
   ========================================================================== */

/* Container mit abgerundeten Ecken und Schatten */
.eventhub-wrapper .eventhub-slider-container {
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    margin: -1.5rem -3rem 2rem -3rem;
}
Wel

/* Slide: Basis-Styles für Zoom-Effekt */
.eventhub-wrapper .eventhub-slide {
    overflow: hidden;
}

/* Hintergrundbild-Zoom vorbereiten - das Slide selbst hat background-image */
.eventhub-wrapper .eventhub-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center 25%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0;
}

/* Hover-Effekt: Sanfter Zoom wie bei Event Cards */
.eventhub-wrapper .eventhub-slide:hover::before,
.eventhub-wrapper .eventhub-slide:focus::before {
    transform: scale(1.05);
}

/* Modernes Overlay mit Gradient */
.eventhub-wrapper .eventhub-slide__overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.4) 40%,
        transparent 100%
    ) !important;
    transition: background 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index: 1;
}

/* Content-Bereich */
.eventhub-wrapper .eventhub-slide__content {
    padding: 0 32px 70px 32px !important;
    z-index: 2;
    position: relative;
}

/* Meta-Bereich (enthält Datum) */
.eventhub-wrapper .eventhub-slide__meta {
    margin-bottom: 4px;
}

/* Datum mit vertikalem Akzent-Balken - Editorial Style */
.eventhub-wrapper .eventhub-slide__date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    color: var(--lev-white) !important;
    box-shadow: none !important;
}

/* Pinker Akzent-Balken links via Pseudo-Element */
.eventhub-wrapper .eventhub-slide__date::before {
    content: '' !important;
    display: block !important;
    width: 6px !important;
    height: 1.4em !important;
    background: var(--lev-pink) !important;
}

/* Datum fett, Uhrzeit normal */
.eventhub-wrapper .eventhub-slide__date-text {
    font-weight: 700 !important;
}

.eventhub-wrapper .eventhub-slide__date-time {
    font-weight: 400 !important;
}

/* Titel mit modernem Design */
.eventhub-wrapper .eventhub-slide__title {
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5) !important;
    color: var(--lev-white) !important;
}

/* Copyright-Hinweis dezent unten rechts */
.eventhub-wrapper .eventhub-slide__copyright {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    z-index: 5;
    pointer-events: none;
}

/* Moderne Navigation Dots */
.eventhub-wrapper .eventhub-slider__dots {
    position: absolute;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    z-index: 20 !important;
}

.eventhub-wrapper .eventhub-slider__dot {
    width: 10px !important;
    height: 10px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    cursor: pointer !important;
    padding: 0 !important;
}

.eventhub-wrapper .eventhub-slider__dot:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    transform: scale(1.2) !important;
}

.eventhub-wrapper .eventhub-slider__dot.is-active {
    background: var(--lev-white) !important;
    border-color: var(--lev-white) !important;
    width: 28px !important;
    border-radius: 50vh !important;
}

.eventhub-wrapper .eventhub-slider__dot:focus-visible {
    outline: 2px solid var(--lev-white) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   EVENTHUB-SLIDER RESPONSIVE
   ========================================================================== */

@media screen and (min-width: 1200px) {
    .eventhub-wrapper .eventhub-slide__title {
        font-size: 2.25rem !important;
    }

    .eventhub-wrapper .eventhub-slide__date {
        font-size: 1.2rem !important;
    }

    .eventhub-wrapper .eventhub-slide__content {
        padding: 0 48px 60px 48px !important;
    }

    .eventhub-wrapper .eventhub-slider__dot {
        width: 12px !important;
        height: 12px !important;
    }

    .eventhub-wrapper .eventhub-slider__dot.is-active {
        width: 32px !important;
    }
}

@media screen and (min-width: 993px) and (max-width: 1199px) {
    .eventhub-wrapper .eventhub-slide__title {
        font-size: 1.875rem !important;
    }

    .eventhub-wrapper .eventhub-slide__date {
        font-size: 1.1rem !important;
    }

    .eventhub-wrapper .eventhub-slide__content {
        padding: 0 40px 60px 40px !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 992px) {
    .eventhub-wrapper .eventhub-slide__title {
        font-size: 1.5rem !important;
    }

    .eventhub-wrapper .eventhub-slide__date {
        font-size: 1rem !important;
    }

    .eventhub-wrapper .eventhub-slide__content {
        padding: 0 32px 50px 32px !important;
    }

    .eventhub-wrapper .eventhub-slider__dots {
        bottom: 20px !important;
    }
}

@media screen and (max-width: 768px) {
    .eventhub-wrapper .eventhub-slider-container {
        border-radius: 12px;
        margin-left: 0;
        margin-right: 0;
    }

    .eventhub-wrapper .eventhub-slide__title {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }

    .eventhub-wrapper .eventhub-slide__date {
        font-size: 0.95rem !important;
    }

    .eventhub-wrapper .eventhub-slide__date::before {
        width: 3px !important;
    }

    .eventhub-wrapper .eventhub-slide__content {
        padding: 0 20px 40px 20px !important;
    }

    .eventhub-wrapper .eventhub-slider__dots {
        bottom: 16px !important;
        gap: 8px !important;
    }

    .eventhub-wrapper .eventhub-slider__dot {
        width: 8px !important;
        height: 8px !important;
    }

    .eventhub-wrapper .eventhub-slider__dot.is-active {
        width: 24px !important;
    }
}

/* ==========================================================================
   RUNNING EVENTS (TYP-B ZEITRAUM-EVENTS) - Editorial Style
   Passend zum modernen Design von Cards, Filterbar und Slider
   ========================================================================== */

/* Container - transparent, gleicher Stil wie Kommende Veranstaltungen */
.eventhub-wrapper .eventhub-running-events {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    margin-bottom: 1.5rem;
    overflow: visible;
}

/* Toggle/Summary Header - gleicher Stil wie Kommende Veranstaltungen */
.eventhub-wrapper .eventhub-running-events__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin-bottom: 1rem;
    background: transparent;
    cursor: pointer;
    transition: none;
    border: none;
    list-style: none;
}

.eventhub-wrapper .eventhub-running-events__toggle::-webkit-details-marker {
    display: none;
}

.eventhub-wrapper .eventhub-running-events__toggle:hover {
    background: transparent;
}

/* Überschrift - EXAKT gleicher Stil wie "Kommende Veranstaltungen" */
.eventhub-wrapper .eventhub-running-events__heading {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--lev-grey);
    line-height: 1.2;
}

.eventhub-wrapper .eventhub-running-events__count {
    font-weight: 400;
    color: var(--lev-grey);
    font-size: 1rem;
}

/* Pfeil-Animation */
.eventhub-wrapper .eventhub-running-events__arrow {
    font-size: 0.75rem;
    color: var(--lev-pink);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.eventhub-wrapper
    .eventhub-running-events[open]
    .eventhub-running-events__arrow {
    transform: rotate(180deg);
}

/* Content-Bereich mit eigenem Container */
.eventhub-wrapper .eventhub-running-events__content {
    padding: 0;
    background: var(--lev-white);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Liste */
.eventhub-wrapper .eventhub-running-events__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ==========================================================================
   BANNER CARDS - Moderne Neugestaltung
   ========================================================================== */

.eventhub-wrapper .eventhub-card-banner {
    display: flex;
    align-items: stretch; /* Damit das Bild die volle Höhe einnimmt */
    background: var(--lev-white);
    border: none;
    border-left: 4px solid transparent;
    padding: 0; /* Padding komplett weg für Full-Height Image */
    transition: all 0.2s ease;
    position: relative;
    overflow: visible; /* Wichtig für den Stern, falls er überlappt */
    min-height: 80px; /* Kompakter */
}

.eventhub-wrapper .eventhub-card-banner:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 0; /* Plugin-Default überschreiben */
}

/* Hover nur auf Geräten mit echtem Hover-Support */
@media (hover: hover) {
    .eventhub-wrapper .eventhub-card-banner:hover {
        background: var(--lev-grey-light);
    }
}

/* Featured - Standard-Verhalten (Pinker Border) */
.eventhub-wrapper .eventhub-card-banner--featured {
    border-left-color: var(--lev-pink);
}

/* Highlight - Orange (konsistent mit Event-Cards) */
.eventhub-wrapper .eventhub-card-banner--highlight {
    border-left: none; /* Wird durch Pseudo-Element ersetzt */
    padding-left: 20px; /* Platz für Highlight-Leiste */
    position: relative;
    /* Gradient entfernt, da nicht mehr benötigt */
    background: var(--lev-white);
    /* Damit Pseudo-Elemente des Thumbnails sichtbar bleiben */
    overflow: visible;
}

@media (min-width: 769px) {
    /* Rotierter "Highlight"-Text im linken orangenen Rand */
    .eventhub-wrapper .eventhub-card-banner--highlight::before {
        content: 'Highlight';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        background: var(--lev-orange);

        /* Vertikaler Text */
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg); /* Text von unten nach oben */

        /* Typografie */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--lev-white);
        white-space: nowrap;

        z-index: 5;
        pointer-events: none;
    }
}

.eventhub-wrapper .eventhub-card-banner--highlight:hover {
    background-color: var(--lev-grey-light);
    background-image: none;
}

/* Thumbnail Anpassung - 4:3 Format für Desktop & Mobile */
.eventhub-wrapper .eventhub-card-banner__thumbnail {
    flex: 0 0 150px; /* Feste Breite Desktop */
    width: 150px;
    aspect-ratio: 16/9;
    height: auto; /* Höhe ergibt sich aus Breite */
    margin-right: 0;
    margin-left: 0;
    border-radius: 0;
    overflow: hidden; /* WICHTIG: Damit Zoom nicht rausragt */
    box-shadow: none;
    position: relative;
    align-self: flex-start; /* Verhindert Streckung, Bild bleibt oben */
    z-index: 1;
}

.eventhub-wrapper
    .eventhub-card-banner--highlight
    .eventhub-card-banner__thumbnail
    img {
    object-position: left;
}

.eventhub-wrapper
    .eventhub-card-banner--highlight
    .eventhub-card-banner__thumbnail {
    width: 134px;
    flex: 0 0 134px;
}

/*
   DIE SCHRÄGE FLÄCHE (Orange Wedge)
   Wird auf das Thumbnail gesetzt, damit es fest mit dem Bild verbunden ist.
*/
.eventhub-wrapper
    .eventhub-card-banner--highlight
    .eventhub-card-banner__thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 20px; /* Etwas breiter für 4:3 */
    background: var(--lev-orange);
    z-index: 10;
    /* Polygon anpassen für Box-Format */
    clip-path: polygon(0 0, 100% 0, 0 100%, 0% 100%);
}

/* Stern genau auf der Schnittstelle */
.eventhub-wrapper
    .eventhub-card-banner--highlight
    .eventhub-card-banner__thumbnail::after {
    content: '\f155'; /* Dashicon star-filled */
    font-family: 'dashicons';
    position: absolute;
    top: 6px;
    left: 8px;
    width: 24px;
    height: 24px;
    font-size: 22px;
    line-height: 1;
    color: var(--lev-white);

    background: none;
    clip-path: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
    animation: star-pulse 2s ease-in-out infinite;
    z-index: 20;

    /* Transform-Origin für Pulse-Effekt */
    transform-origin: center center;
}

/* Normal-Variante - kompakt, einzeilig, kein farbiger Akzent */
.eventhub-wrapper .eventhub-card-banner--normal {
    border-left-color: transparent;
    padding: 0;
    min-height: auto; /* WICHTIG: Soll so flach wie möglich sein */
}

.eventhub-wrapper
    .eventhub-card-banner--normal
    .eventhub-card-banner__thumbnail {
    display: none;
}

.eventhub-wrapper .eventhub-card-banner--normal .eventhub-card-banner__content {
    flex-direction: row;
    align-items: center;
    padding: 0.75rem 1.5rem; /* Kompakteres Padding */
}

.eventhub-wrapper .eventhub-card-banner--normal .eventhub-card-banner__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.eventhub-wrapper .eventhub-card-banner--normal .eventhub-card-banner__info {
    display: inline-flex;
    margin-left: 0.5rem;
}

.eventhub-wrapper .eventhub-card-banner--normal .eventhub-card-banner__main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.eventhub-wrapper .eventhub-card-banner--normal .eventhub-card-banner__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

/* ==========================================================================
   THUMBNAIL
   ========================================================================== */

.eventhub-wrapper .eventhub-card-banner__thumbnail {
    flex: 0 0 150px; /* Kleiner als vorher (140px) */
    width: 150px;
    height: auto;
    margin-right: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    position: relative;
    /* Damit das Bild wirklich skaliert und nicht croped */
    align-self: stretch;
}

.eventhub-wrapper .eventhub-card-banner__thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.eventhub-wrapper .eventhub-card-banner__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* WICHTIG: Bild füllt Container */
    display: block;
    border-radius: 0px;
    /* Zoom-Transition */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover-Effekt auf Bild (Zoom) - nur auf Geräten mit echtem Hover */
@media (hover: hover) {
    .eventhub-wrapper
        .eventhub-card-banner:hover
        .eventhub-card-banner__thumbnail
        img {
        transform: scale(1.1);
    }
}

.eventhub-wrapper .eventhub-card-banner__content {
    flex: 1; /* Nimmt den restlichen Platz ein */
    padding: 1rem 1.5rem; /* Padding hierhin verschoben */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   CONTENT BEREICH
   ========================================================================== */

.eventhub-wrapper .eventhub-card-banner__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.eventhub-wrapper .eventhub-card-banner__main {
    flex: 1;
    min-width: 0;
}

/* Info-Zeile (Venue + Kategorie) */
.eventhub-wrapper .eventhub-card-banner__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 1rem;
    color: var(--lev-grey);
}

.eventhub-wrapper .eventhub-card-banner__venue {
    color: var(--lev-grey);
    text-decoration: none;
    transition: color 0.2s ease;
}

.eventhub-wrapper .eventhub-card-banner__venue:hover {
    color: var(--lev-blue);
    text-decoration: none;
}

.eventhub-wrapper .eventhub-card-banner__separator {
    color: #ccc;
    margin: 0 0.125rem;
}

.eventhub-wrapper .eventhub-card-banner__category {
    color: var(--lev-grey);
    text-decoration: none;
    transition: color 0.2s ease;
}

.eventhub-wrapper .eventhub-card-banner__category:hover {
    color: var(--lev-blue);
    text-decoration: none;
}

/* ==========================================================================
   META BEREICH (Countdown + Status)
   ========================================================================== */

.eventhub-wrapper .eventhub-card-banner__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* Countdown Badge */
.eventhub-wrapper .eventhub-card-banner__countdown {
    display: inline-flex;
    align-items: center;
    background: var(--lev-grey-light);
    color: var(--lev-grey);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 50vh;
    white-space: nowrap;
}

/* Heute-Status */
.eventhub-wrapper .eventhub-card-banner__today-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--lev-grey);
    white-space: nowrap;
}

.eventhub-wrapper .eventhub-card-banner__status-hours {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   TODAY-STATUS - Farbige CSS-Punkte statt Emojis
   ========================================================================== */

/* Basis-Styling für den Status-Indikator */
.eventhub-wrapper .eventhub-card-banner__today-status::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Fallback-Farbe */
    background-color: var(--lev-grey);
}

/* Grüner Punkt: Jetzt geöffnet */
.eventhub-wrapper .eventhub-card-banner__today-status--open-now::before {
    background-color: var(--lev-green);
    box-shadow: 0 0 6px rgba(158, 200, 52, 0.6);
}

/* Gelber Punkt: Heute geöffnet, aber aktuell außerhalb der Öffnungszeiten */
.eventhub-wrapper .eventhub-card-banner__today-status--outside-hours::before {
    background-color: var(--lev-orange);
    box-shadow: 0 0 6px rgba(236, 102, 8, 0.5);
}

/* Roter Punkt: Heute geschlossen */
.eventhub-wrapper .eventhub-card-banner__today-status--closed::before {
    background-color: var(--eventhub-color-cancelled, #dc3545);
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.5);
}

/* Grauer Punkt: Kommend (noch nicht gestartet) */
.eventhub-wrapper .eventhub-card-banner__today-status--upcoming::before {
    background-color: var(--lev-grey);
    box-shadow: none;
}

/* Status-Icon-Container ausblenden (nicht mehr benötigt) */
.eventhub-wrapper .eventhub-card-banner__status-icon {
    display: none;
}

/* ==========================================================================
   TODAY-STATUS - Single-Event-Seite
   Gleiche Farbpunkte wie bei Event Cards für konsistente Darstellung
   ========================================================================== */

/* Basis-Styling für den Status-Indikator auf Single-Event */
.eventhub-wrapper .eventhub-today-status::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 0.4rem;
    vertical-align: middle;
    /* Fallback-Farbe */
    background-color: var(--lev-grey);
}

/* Grüner Punkt: Jetzt geöffnet */
.eventhub-wrapper .eventhub-today-status--open-now::before {
    background-color: var(--lev-green);
    box-shadow: 0 0 6px rgba(158, 200, 52, 0.6);
}

/* Orange Punkt: Heute geöffnet, aber aktuell außerhalb der Öffnungszeiten */
.eventhub-wrapper .eventhub-today-status--outside-hours::before {
    background-color: var(--lev-orange);
    box-shadow: 0 0 6px rgba(236, 102, 8, 0.5);
}

/* Roter Punkt: Heute geschlossen */
.eventhub-wrapper .eventhub-today-status--closed::before {
    background-color: var(--eventhub-color-cancelled, #dc3545);
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.5);
}

/* Grauer Punkt: Kommend (noch nicht gestartet) */
.eventhub-wrapper .eventhub-today-status--upcoming::before {
    background-color: var(--lev-grey);
    box-shadow: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    /*
       Mobil-Anpassung: Banner bleiben horizontal, Bild links bündig.
       Kein Wrapping, kein Padding am Wrapper.
    */
    .eventhub-wrapper .eventhub-card-banner {
        flex-wrap: nowrap !important;
        padding: 0 !important;
        gap: 0 !important;
        min-height: auto;
    }

    /*
       Thumbnail klein & 4:3 auch mobil
       !important erklärt den Krieg gegen kollidierende Plugin-Styles
    */
    .eventhub-wrapper .eventhub-card-banner__thumbnail,
    .eventhub-wrapper
        .eventhub-card-banner--highlight
        .eventhub-card-banner__thumbnail,
    .eventhub-wrapper
        .eventhub-card-banner--featured
        .eventhub-card-banner__thumbnail {
        flex: 0 0 100px !important;
        width: 100px !important;
        height: auto !important;
        aspect-ratio: 4/3 !important;
        border-radius: 0 !important;
    }

    /* Content Layout mobil */
    .eventhub-wrapper .eventhub-card-banner__content {
        padding: 0.75rem 1rem !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    /*
       Meta (Countdown + Uhrzeit) mobil:
       Vertikal stapeln (Countdown oben, Uhrzeit unten), rechtsbündig.
       Damit hat der Titel links mehr Platz.
    */
    .eventhub-wrapper .eventhub-card-banner__meta {
        flex-direction: column !important;
        align-items: flex-end !important;
        width: auto !important;
        justify-content: flex-start !important;
        margin-top: 0 !important;
        gap: 0.2rem !important;
        position: absolute;
        top: 0.75rem;
        right: 1rem;
    }

    /* Content braucht etwas Padding rechts, damit Text nicht unter Meta rutscht */
    .eventhub-wrapper .eventhub-card-banner__main {
        padding-right: 90px; /* Platz für Meta-Spalte */
    }

    /*
       Mobil-Spezial: Normale Events (ohne Bild) sollen kompakt bleiben!
       Kein Stack, sondern Zeile (flex-row), da wir die volle Breite haben.
    */
    .eventhub-wrapper
        .eventhub-card-banner--normal
        .eventhub-card-banner__content {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .eventhub-wrapper
        .eventhub-card-banner--normal
        .eventhub-card-banner__meta {
        width: auto !important;
        margin-top: 0 !important;
        justify-content: flex-end; /* Rechtsbündig */
        margin-left: auto; /* Schiebt es nach rechts */
    }

    .eventhub-wrapper .eventhub-card-banner {
        padding: 0 !important;
        gap: 0 !important;
        position: relative; /* Für absolute Positionierung des Sterns */
    }

    /*
       HIGHLIGHT/FEATURED MOBIL: Komplett anderes Layout!
       Kein Bild, aber schräger orangener Balken bleibt.
    */
    .eventhub-wrapper
        .eventhub-card-banner--highlight
        .eventhub-card-banner__thumbnail,
    .eventhub-wrapper
        .eventhub-card-banner--featured
        .eventhub-card-banner__thumbnail {
        display: none !important;
    }

    /* Orange Wedge und Stern auf Thumbnail mobil ausblenden */
    .eventhub-wrapper
        .eventhub-card-banner--highlight
        .eventhub-card-banner__thumbnail::before,
    .eventhub-wrapper
        .eventhub-card-banner--highlight
        .eventhub-card-banner__thumbnail::after {
        display: none !important;
    }

    /* Schräger orangener Balken links - bündig am Rand, unten schmaler zulaufend */
    .eventhub-wrapper .eventhub-card-banner--highlight::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important; /* Ganz links bündig */
        width: 22px !important;
        background: var(--lev-orange) !important;
        /* Trapez: Oben volle Breite (16px), unten ca. 40% (6-7px) */
        clip-path: polygon(0 0, 100% 0, 5px 100%, 0 100%) !important;
        z-index: 1 !important;
    }

    /* Stern direkt in der Karte oben links */
    .eventhub-wrapper .eventhub-card-banner--highlight::before {
        content: '\f155' !important; /* Dashicon star-filled */
        font-family: 'dashicons' !important;
        position: absolute !important;
        top: 0px !important;
        left: 1px !important;
        font-size: 18px !important;
        color: var(--lev-white) !important;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) !important;
        animation: star-pulse 2s ease-in-out infinite !important;
        z-index: 10 !important;
    }

    /* Content bei Highlight: Padding links wie bei anderen Karten, rechts für Meta */
    .eventhub-wrapper
        .eventhub-card-banner--highlight
        .eventhub-card-banner__content {
        padding-left: 1.25rem !important; /* Schmal - bündig mit anderen */
        padding-right: 7rem !important; /* Platz für Countdown + Uhrzeit */
    }

    /* WICHTIG: Titel MUSS umbrechen! */
    .eventhub-wrapper .eventhub-card-banner__title {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        display: block !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    /* Main-Container muss auch die Breite begrenzen */
    .eventhub-wrapper .eventhub-card-banner__main {
        max-width: calc(100% - 7rem) !important;
        overflow: hidden !important;
    }

    /* Meta vertikal zentrieren */
    .eventhub-wrapper .eventhub-card-banner__meta {
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important; /* Vertikal zentriert */
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0.75rem !important;
        gap: 0.15rem !important;
        margin-top: 0 !important;
        width: auto !important;
    }

    /* Main-Bereich: Kein extra Padding mehr nötig */
    .eventhub-wrapper .eventhub-card-banner__main {
        padding-right: 0 !important;
    }

    /* Titel NICHT verkleinern mobil -> Schriftgröße beibehalten */

    /* Titel NICHT verkleinern mobil -> Schriftgröße beibehalten */
    .eventhub-wrapper .eventhub-card-banner__title,
    .eventhub-wrapper
        .eventhub-card-banner--highlight
        .eventhub-card-banner__title,
    .eventhub-wrapper
        .eventhub-card-banner--featured
        .eventhub-card-banner__title,
    .eventhub-wrapper
        .eventhub-card-banner--normal
        .eventhub-card-banner__title {
        font-size: 1.15rem !important;
    }

    /* Info-Zeile: Schriftgröße beibehalten + kein margin-left (rutscht ja runter) */
    .eventhub-wrapper
        .eventhub-card-banner--normal
        .eventhub-card-banner__info {
        font-size: 1rem !important;
        margin-left: 0 !important;
    }

    /* ==========================================================================
       EDGE-TO-EDGE: Slider und Filterbar brechen aus Wrapper-Padding aus
       ========================================================================== */

    /* Slider: Edge-to-edge + kein Border-Radius + kein Abstand oben/unten */
    .eventhub-wrapper .eventhub-slider-container {
        margin-left: -1rem;
        margin-right: -1rem;
        margin-top: -1rem; /* Weißes Padding oben weg */
        margin-bottom: 0; /* Kein Abstand zur Filterbar */
        width: calc(100% + 2rem);
        border-radius: 0;
    }

    /* Filterbar: Edge-to-edge, oben flach, unten abgerundet mit Schatten */
    .eventhub-wrapper #eventhub-filter-form.eventhub-filter {
        margin-left: -1rem;
        margin-right: -1rem;
        margin-top: 0; /* Direkt am Slider */
        width: auto;
        border-radius: 0 0 16px 16px; /* Nur unten abgerundet */
        /* Eigenes Padding für Inhalt */
        padding-left: 1rem;
        padding-right: 1rem;
        /* Schatten nur unten */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-bottom: none;
        /* Position für Fade-Overlays */
        position: relative;
    }

    /* Weiße Fade-Overlays an den Rändern der Filterbar */
    .eventhub-wrapper #eventhub-filter-form.eventhub-filter::before,
    .eventhub-wrapper #eventhub-filter-form.eventhub-filter::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 16px;
        width: 1rem;
        pointer-events: none;
        z-index: 1001;
    }

    .eventhub-wrapper #eventhub-filter-form.eventhub-filter::before {
        left: -1px;
        background: linear-gradient(to right, white, transparent);
    }

    .eventhub-wrapper #eventhub-filter-form.eventhub-filter::after {
        right: -1px;
        background: linear-gradient(to left, white, transparent);
    }
}

/* ==========================================================================
   TOUCH DEVICE FOCUS/ACTIVE STATE CLEANUP
   Verhindert "klebende" dunkle Hintergrundfarben nach Touch-Interaktionen
   ========================================================================== */

/* --- Basis: Kein :focus Styling für Touch-Geräte, nur :focus-visible für Keyboard --- */

/* Quick-Filter Chips: Touch-Reset */
#eventhub-filter-form .eventhub-quick-chip:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* Nach Touch: Sofortiges Zurücksetzen des Hintergrunds */
@media (hover: none) and (pointer: coarse) {
    /* Touch-Geräte: Kein persistenter :focus Hintergrund */
    #eventhub-filter-form .eventhub-quick-chip:focus:not(:focus-visible) {
        background: var(--lev-grey-light);
        color: var(--lev-grey);
        transform: none;
    }

    #eventhub-filter-form
        .eventhub-quick-chip.is-active:focus:not(:focus-visible) {
        background: var(--lev-pink);
        color: var(--lev-white);
        border-color: var(--lev-pink);
        transform: none;
    }

    /* Custom Select Trigger: Touch-Reset */
    .eventhub-custom-select-trigger:focus:not(:focus-visible) {
        background: var(--lev-white);
        outline: none;
    }

    .eventhub-custom-select-trigger:active {
        background: var(--lev-grey-light);
        transition: background 0.1s ease;
    }

    /* Pill Radio Buttons: Touch-Reset */
    #eventhub-filter-form
        .eventhub-pill-radio__label:focus:not(:focus-visible) {
        background: transparent;
        outline: none;
    }

    #eventhub-filter-form
        .eventhub-pill-radio
        input:checked
        + .eventhub-pill-radio__label:focus:not(:focus-visible) {
        background: var(--lev-pink);
        color: var(--lev-white);
    }

    /* Toggle Switch: Touch-Reset */
    #eventhub-filter-form .eventhub-toggle__switch:focus:not(:focus-visible) {
        outline: none;
    }

    /* Toggle Container: Touch-Reset - verhindert "kleben" des Hover-States */
    #eventhub-filter-form
        .eventhub-toggle:focus:not(:focus-visible)
        .eventhub-toggle__switch {
        background: var(--lev-grey-medium);
    }

    #eventhub-filter-form
        .eventhub-toggle:focus:not(:focus-visible)
        input:checked
        + .eventhub-toggle__switch {
        background: var(--lev-pink);
    }

    /* Toggle: Active State für kurzen visuellen Feedback beim Tap */
    #eventhub-filter-form .eventhub-toggle:active .eventhub-toggle__switch {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    /* Reset Button: Touch-Reset */
    #eventhub-filter-form .eventhub-reset-btn:focus:not(:focus-visible) {
        outline: none;
        background: var(--lev-pink);
        transform: none;
    }

    #eventhub-filter-form .eventhub-reset-btn:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    /* Mobile Filter Toggle: Touch-Reset */
    .eventhub-wrapper .eventhub-filter-mobile-toggle:focus:not(:focus-visible) {
        outline: none;
        background: var(--lev-pink) !important;
        transform: none;
    }

    .eventhub-wrapper .eventhub-filter-mobile-toggle:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }

    /* Datepicker Pill: Touch-Reset */
    #eventhub-filter-form .eventhub-pill-date__label:focus:not(:focus-visible) {
        outline: none;
    }

    #eventhub-filter-form
        .eventhub-pill-date__label.is-active:focus:not(:focus-visible),
    #eventhub-filter-form
        .eventhub-pill-date__label.is-focused:focus:not(:focus-visible) {
        background: var(--lev-pink);
        color: var(--lev-white);
    }

    /* Suchfeld: Touch-Reset */
    #eventhub-filter-form
        .eventhub-search--pill
        .eventhub-search__input:focus:not(:focus-visible) {
        outline: 2px solid var(--lev-pink);
        outline-offset: 2px;
    }
}

/* --- Devices mit Hover-Capability: Normale Hover-States --- */
@media (hover: hover) and (pointer: fine) {
    /* Diese Geräte unterstützen echtes Hover - normale Styles anwenden */
    #eventhub-filter-form .eventhub-quick-chip:focus:not(:focus-visible) {
        /* Kein persistenter Focus-Hintergrund */
        background: var(--lev-grey-light-medium);
    }

    #eventhub-filter-form
        .eventhub-quick-chip.is-active:focus:not(:focus-visible) {
        background: var(--lev-pink);
    }
}

/* --- Universal: Keyboard Focus-Visible Styles --- */
/* Diese Styles gelten NUR für Keyboard-Navigation (Tab) */
#eventhub-filter-form .eventhub-quick-chip:focus-visible {
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
    background: var(--lev-grey-light-medium);
}

#eventhub-filter-form .eventhub-quick-chip.is-active:focus-visible {
    outline: 2px solid var(--lev-pink-dark) !important;
    outline-offset: 2px !important;
    background: var(--lev-pink);
}

.eventhub-wrapper .eventhub-custom-select-trigger:focus-visible {
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
}

.eventhub-wrapper .eventhub-filter-mobile-toggle:focus-visible {
    outline: 2px solid var(--lev-pink) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   SHORTCODE/BLOCK GRID - Responsive Breakpoints
   Für [eventhub] Shortcode und eventhub/events Gutenberg-Block
   ========================================================================== */

/* Basis: Grid-System */
.eventhub-wrapper--shortcode .eventhub-grid {
    display: grid;
    gap: var(--eventhub-grid-gap, 1.5rem);
}

/* Spalten-Varianten */
.eventhub-wrapper--shortcode .eventhub-grid--cols-1 {
    grid-template-columns: 1fr;
}
.eventhub-wrapper--shortcode .eventhub-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
.eventhub-wrapper--shortcode .eventhub-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}
.eventhub-wrapper--shortcode .eventhub-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* --- Tablet (max 992px): Max 2 Spalten --- */
@media (max-width: 992px) {
    .eventhub-wrapper--shortcode .eventhub-grid--cols-3,
    .eventhub-wrapper--shortcode .eventhub-grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Tablet Portrait (max 767px): Max 2 Spalten, kleinerer Gap --- */
@media (max-width: 767px) {
    .eventhub-wrapper--shortcode .eventhub-grid--cols-2,
    .eventhub-wrapper--shortcode .eventhub-grid--cols-3,
    .eventhub-wrapper--shortcode .eventhub-grid--cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* --- Mobile (max 576px): Immer 1 Spalte --- */
@media (max-width: 576px) {
    .eventhub-wrapper--shortcode .eventhub-grid--cols-2,
    .eventhub-wrapper--shortcode .eventhub-grid--cols-3,
    .eventhub-wrapper--shortcode .eventhub-grid--cols-4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ==========================================================================
   CPT-HERO - Editorial Style für Venue, Organizer, Series, Taxonomien
   Einheitliches Design passend zu Event-Single-Heroes
   ========================================================================== */

/* === CPT-SPEZIFISCHE ANPASSUNGEN === */

/* Badge-Variante für CPTs (Icon statt Datum) */
.eventhub-wrapper
    .eventhub-hero-editorial--cpt
    .eventhub-hero-editorial__cpt-overlay {
    padding: 16px 18px 18px 18px;
    min-width: 90px;
    min-height: 120px;
}

.eventhub-wrapper
    .eventhub-hero-editorial--cpt
    .eventhub-hero-editorial__cpt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 0.75em;
}

.eventhub-wrapper
    .eventhub-hero-editorial--cpt
    .eventhub-hero-editorial__cpt-icon
    svg {
    width: 42px;
    height: 42px;
    stroke-width: 1.75;
}

/* Venue: Pink Badge (Standard) */
.eventhub-wrapper
    .eventhub-hero-editorial--venue
    .eventhub-hero-editorial__cpt-overlay {
    background: var(--lev-pink);
}

/* === MAPS-BUTTON (Route planen) === */

.eventhub-wrapper .eventhub-hero-editorial__maps-button {
    background: var(--lev-blue);
    box-shadow: 0 4px 20px rgba(69, 151, 207, 0.35); /* Blauer Schatten statt Pink */
}

.eventhub-wrapper .eventhub-hero-editorial__maps-button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

@media (hover: hover) {
    .eventhub-hero-editorial__maps-button:hover {
        background: var(--lev-blue-dark);
        color: var(--lev-white);
        box-shadow: 0 6px 25px rgba(69, 151, 207, 0.45); /* Blauer Hover-Schatten */
    }
}

/* === BESCHREIBUNGS-TEXT IM HERO (falls verwendet) === */

.eventhub-wrapper .eventhub-hero-editorial__description {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--lev-grey);
    margin-bottom: 0.75rem;
    max-width: 800px;
}

/* === META-LINKS (Stadtteil, Kategorien) === */

.eventhub-wrapper .eventhub-hero-editorial__meta-link {
    color: var(--lev-pink);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .eventhub-hero-editorial__meta-link:hover {
        color: var(--lev-pink-dark);
        text-decoration: none;
    }
}

/* === NO-IMAGE VARIANTE ===
   ZENTRALE DEFINITION für ALLE CPTs/Taxonomien ohne Bild:
   Venue, Organizer, Series, Category, District, Tag

   HINWEIS: Content-Padding wird DIREKT bei den jeweiligen
   Media Queries definiert (Zeile ~375, ~890, ~965)
   ========================================================================== */

/* Base: Kein Breakout, normaler Flow, volle Breite */
.eventhub-wrapper .eventhub-hero-editorial--no-image {
    background: var(--lev-white);
    margin: 0 !important;
    width: 100% !important;
    padding: 0;
}

/* Main Column: Kein Badge-Padding nötig */
.eventhub-wrapper
    .eventhub-hero-editorial--no-image
    .eventhub-hero-editorial__main-column {
    padding-top: 0;
}

/* Titel: Kein Margin-Top */
.eventhub-wrapper
    .eventhub-hero-editorial--no-image
    .eventhub-hero-editorial__title {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Share: Weniger Abstand */
.eventhub-wrapper
    .eventhub-hero-editorial--no-image
    .eventhub-hero-editorial__share {
    margin-top: 0.5rem;
}

.eventhub-wrapper .eventhub-hero-editorial__main-column--full {
    padding-top: 0;
    width: 100%;
}

/* === RESPONSIVE ANPASSUNGEN FÜR CPT-HEROES === */

@media (max-width: 992px) {
    .eventhub-wrapper
        .eventhub-hero-editorial--cpt
        .eventhub-hero-editorial__cpt-icon
        svg {
        width: 36px;
        height: 36px;
    }

    .eventhub-wrapper
        .eventhub-hero-editorial--cpt
        .eventhub-hero-editorial__cpt-overlay {
        padding: 14px 16px 16px 16px;
        min-width: 80px;
    }

    .eventhub-wrapper .eventhub-hero-editorial__description {
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    .eventhub-wrapper
        .eventhub-hero-editorial--cpt
        .eventhub-hero-editorial__cpt-icon
        svg {
        width: 32px;
        height: 32px;
    }

    .eventhub-wrapper
        .eventhub-hero-editorial--cpt
        .eventhub-hero-editorial__cpt-overlay {
        padding: 12px 14px 14px 14px;
        min-width: 70px;
        min-height: 90px;
    }

    .eventhub-wrapper .eventhub-hero-editorial__maps-button {
        font-size: 0.85rem;
        padding: 10px 14px;
    }

    .eventhub-wrapper .eventhub-hero-editorial__maps-button svg {
        width: 18px;
        height: 18px;
    }

    .eventhub-wrapper .eventhub-hero-editorial__description {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 576px) {
    /* Maps-Button: Nur Icon auf Mobile */
    .eventhub-wrapper
        .eventhub-hero-editorial__maps-button
        .eventhub-hero-editorial__ticket-text {
        display: none;
    }

    .eventhub-wrapper .eventhub-hero-editorial__maps-button {
        width: auto;
        padding: 10px 12px;
    }
}

/* ==========================================================================
   ARCHIVE-HEADER - Fallback für Taxonomien ohne Hero
   Wird verwendet wenn kein Bild vorhanden ist
   ========================================================================== */

.eventhub-wrapper .eventhub-archive-header {
    margin-bottom: var(--eventhub-spacing-xl, 2rem);
}

/* Simple Variante für Timeframe-Seiten (ohne Bild, Badge, Share) */
.eventhub-wrapper .eventhub-archive-header--simple {
    margin-bottom: var(--eventhub-spacing-lg, 1.5rem);
}

.eventhub-wrapper
    .eventhub-archive-header--simple
    .eventhub-archive-header__content {
    max-width: none;
}

.eventhub-wrapper
    .eventhub-archive-header--simple
    .eventhub-archive-header__title {
    margin-bottom: 0.25rem;
}

.eventhub-wrapper .eventhub-archive-header__date {
    font-size: 1rem;
    color: var(--lev-grey);
    margin: 0;
    font-weight: 400;
}

.eventhub-wrapper .eventhub-archive-header__image {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: var(--lev-grey-light);
    margin-bottom: var(--eventhub-spacing-lg, 1.5rem);
}

.eventhub-wrapper .eventhub-archive-header__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eventhub-wrapper .eventhub-archive-header__content {
    max-width: 800px;
}

.eventhub-wrapper .eventhub-archive-header__title,
.eventhub-wrapper .eventhub-favorites-page .eventhub-archive__title {
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--lev-grey);
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
}

.eventhub-wrapper .eventhub-archive-header__description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--lev-grey);
}

.eventhub-wrapper .eventhub-archive-header__description p:last-child {
    margin-bottom: 0;
}

.eventhub-wrapper .eventhub-archive-header__count {
    margin: 1rem 0 0 0;
    font-size: 1rem;
}

.eventhub-wrapper .eventhub-archive-header__count-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lev-pink);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .eventhub-archive-header__count-link:hover {
        color: var(--lev-pink-dark);
    }
}

.eventhub-wrapper .eventhub-archive-header__count-arrow {
    font-size: 1.2em;
    transition: transform 0.2s ease;
}

@media (hover: hover) {
    .eventhub-archive-header__count-link:hover
        .eventhub-archive-header__count-arrow {
        transform: translateY(3px);
    }
}

/* Responsive */
@media (max-width: 767px) {
    .eventhub-archive-header__title,
    .eventhub-favorites-page .eventhub-archive__title {
        font-size: 1.75rem;
    }

    .eventhub-archive-header__description {
        font-size: 1rem;
    }

    .eventhub-archive-header__image {
        aspect-ratio: 16 / 9;
    }
}

/* ==========================================================================
   EVENTS-SEKTION - Einheitliches Layout für CPT/Taxonomie-Seiten
   ========================================================================== */

.eventhub-wrapper .eventhub-events-section {
    margin-top: var(--eventhub-spacing-xl, 2rem);
}

.eventhub-wrapper .eventhub-events-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--eventhub-spacing-lg, 1.5rem);
    padding-bottom: var(--eventhub-spacing-md, 1rem);
    border-bottom: 2px solid var(--lev-grey-light-medium);
}

.eventhub-wrapper .eventhub-events-section__header .eventhub-section-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lev-grey);
}

/* Kalender-Abo-Button im Header */
.eventhub-wrapper
    .eventhub-events-section__header
    .eventhub-calendar-subscribe {
    margin: 0;
}

@media (max-width: 576px) {
    .eventhub-events-section__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   VERGANGENE VERANSTALTUNGEN - Collapsible Sektion
   ========================================================================== */

.eventhub-wrapper .eventhub-past-events {
    margin-top: var(--eventhub-spacing-xl, 2rem);
    border-top: 2px solid var(--lev-grey-light-medium);
    padding-top: var(--eventhub-spacing-lg, 1.5rem);
}

.eventhub-wrapper .eventhub-past-events__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--lev-grey);
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: inherit;
}

.eventhub-wrapper .eventhub-past-events__toggle:hover {
    color: var(--lev-pink);
}

.eventhub-wrapper .eventhub-past-events__toggle-icon {
    transition: transform 0.3s ease;
}

.eventhub-wrapper
    .eventhub-past-events[open]
    .eventhub-past-events__toggle-icon {
    transform: rotate(180deg);
}

.eventhub-wrapper .eventhub-past-events__content {
    margin-top: var(--eventhub-spacing-lg, 1.5rem);
}

.eventhub-wrapper .eventhub-past-events__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--eventhub-spacing-lg, 1.5rem);
}

@media (max-width: 992px) {
    .eventhub-past-events__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .eventhub-past-events__grid {
        grid-template-columns: 1fr;
    }
}

.eventhub-wrapper .eventhub-past-events__more {
    margin-top: var(--eventhub-spacing-md, 1rem);
    font-size: 0.9rem;
    color: var(--lev-grey);
    font-style: italic;
}

/* ==========================================================================
   TAXONOMIE-BADGE (Archive-Header Editorial Style)
   ========================================================================== */

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--lev-grey);
    color: var(--lev-white);
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    margin-bottom: 1rem;
}

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__badge-icon
    svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;
}

/* ==========================================================================
   DISTRICT VENUES LISTE (Veranstaltungsorte im Stadtteil)
   ========================================================================== */

.eventhub-wrapper .eventhub-district-venues {
    margin-bottom: var(--eventhub-spacing-xl, 2rem);
}

/* Pills-Container */
.eventhub-wrapper .eventhub-district-venues__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Einzelne Pill */
.eventhub-wrapper .eventhub-district-venues__pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--lev-grey-light);
    color: var(--lev-grey);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 50vh;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

@media (hover: hover) {
    .eventhub-district-venues__pill:hover {
        background: var(--lev-grey-light-medium);
        color: var(--lev-grey);
        text-decoration: none;
        transform: translateY(-2px);
    }
}

/* ==========================================================================
   TAXONOMY-SPECIFIC META STYLING
   ========================================================================== */

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__event-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lev-pink);
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: var(--lev-pink-light);
    border-radius: var(--eventhub-border-radius, 4px);
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__event-count:hover {
    background: var(--lev-pink);
    color: var(--lev-white);
}

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__event-count
    .eventhub-hero-editorial__icon {
    width: 18px;
    height: 18px;
}

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__scroll-hint {
    font-size: 1.1rem;
    margin-left: 0.25rem;
}

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__ical-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lev-blue);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__ical-link:hover {
    color: var(--lev-blue-dark);
}

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__share {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__share
    a {
    color: var(--lev-grey);
    transition: color 0.2s ease;
}

.eventhub-wrapper
    .eventhub-hero-editorial--taxonomy
    .eventhub-hero-editorial__share
    a:hover {
    color: var(--lev-pink);
}

@media (max-width: 767px) {
    .eventhub-hero-editorial--taxonomy .eventhub-hero-editorial__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ==========================================================================
   TIMEFRAME NAVIGATION - Pill Style für /heute/, /morgen/, /wochenende/ etc.
   Passt zum Editorial Design mit sanften Animationen
   ========================================================================== */

.eventhub-wrapper .eventhub-timeframe-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
    padding: 0;
}

.eventhub-wrapper .eventhub-timeframe-nav__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--lev-grey-light);
    border-radius: 50px; /* Pill-Form */
    background: var(--lev-grey-light);
    color: var(--lev-grey);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease;
}

/* Hover nur auf Geräten mit echtem Hover-Support */
@media (hover: hover) {
    .eventhub-wrapper .eventhub-timeframe-nav__item:hover {
        background: var(--lev-grey-medium);
        border-color: var(--lev-grey-medium);
        color: var(--lev-grey);
        transform: translateY(-2px);
        text-decoration: none;
    }
}

/* Active State */
.eventhub-wrapper .eventhub-timeframe-nav__item--active {
    background: var(--lev-pink);
    border-color: var(--lev-pink);
    color: var(--lev-white);
    box-shadow: 0 4px 12px rgba(203, 9, 80, 0.25);
}

/* Active + Hover */
@media (hover: hover) {
    .eventhub-wrapper .eventhub-timeframe-nav__item--active:hover {
        background: var(--lev-pink-dark);
        border-color: var(--lev-pink-dark);
        color: var(--lev-white);
    }
}

/* Focus-Visible für Keyboard-Navigation */
.eventhub-wrapper .eventhub-timeframe-nav__item:focus-visible {
    outline: 2px solid var(--lev-pink);
    outline-offset: 2px;
}

/* Active State (Click) */
.eventhub-wrapper .eventhub-timeframe-nav__item:active {
    transform: translateY(0);
    box-shadow: none;
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

/* ==========================================================================
   "ALLE EVENTS" BUTTON - Hervorgehobener Link zurück zur Hauptübersicht
   Blauer Outline-Stil mit Grid-Icon, hebt sich von den Zeitraum-Pills ab
   ========================================================================== */

.eventhub-wrapper .eventhub-timeframe-nav__item:last-child {
    flex: 0 0 auto; /* Nicht wachsen, auto-Breite */
    margin-left: auto; /* Nach rechts schieben */
    background: transparent;
    border: 2px solid var(--lev-blue);
    color: var(--lev-blue);
    padding-left: 1.4rem;
    padding-right: 1.25rem;
    position: relative;
}

/* Grid-Icon via Pseudo-Element (4 Quadrate = Übersicht/Dashboard) */
.eventhub-wrapper .eventhub-timeframe-nav__item:last-child::before {
    content: '';
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.5rem;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6' rx='1'/%3E%3Crect x='9' y='1' width='6' height='6' rx='1'/%3E%3Crect x='1' y='9' width='6' height='6' rx='1'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    transition: transform 0.25s ease;
}

/* Hover: Gefüllt + Icon animiert */
@media (hover: hover) {
    .eventhub-wrapper .eventhub-timeframe-nav__item:last-child:hover {
        background: var(--lev-blue);
        border-color: var(--lev-blue);
        color: var(--lev-white);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(45, 122, 181, 0.3);
    }

    .eventhub-wrapper .eventhub-timeframe-nav__item:last-child:hover::before {
        transform: scale(1.15);
    }
}

/* Focus-Visible für "Alle Events" */
.eventhub-wrapper .eventhub-timeframe-nav__item:last-child:focus-visible {
    outline-color: var(--lev-blue);
}

/* ==========================================================================
   TIMEFRAME NAVIGATION - Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .eventhub-wrapper .eventhub-timeframe-nav {
        gap: 0.4rem;
    }

    .eventhub-wrapper .eventhub-timeframe-nav__item {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        line-height: 1;
    }
}

@media (max-width: 576px) {
    .eventhub-wrapper .eventhub-timeframe-nav {
        gap: 0.35rem;
    }

    .eventhub-wrapper .eventhub-timeframe-nav__item {
        padding: 0.6rem 0.75rem 0.5rem 0.75rem;
        font-size: 0.75rem;
        line-height: 1;
        letter-spacing: 0.02em;
    }

    /* "Alle Events" auch auf Mobile mit auto-Breite */
    .eventhub-wrapper .eventhub-timeframe-nav__item:last-child {
        flex: 0 0 auto;
        justify-content: center;
        margin-top: 0;
        padding-left: 0.75rem;
        padding-right: 1rem;
    }
}

/* ==========================================================================
   SPECIAL TIMEFRAME PAGE - /heute/, /morgen/, /wochenende/, /diese-woche/
   ========================================================================== */

.eventhub-wrapper .eventhub-special-timeframe {
    padding: 0;
}

/* Datums-Gruppen Header (Container für Titel + Count) */
.eventhub-wrapper .eventhub-date-group__header {
    margin-top: var(--eventhub-spacing-md, 1rem);
}

/* Datums-Gruppen Titel (z.B. "Samstag, 1. Februar") */
.eventhub-wrapper .eventhub-date-group__title {
    text-transform: uppercase;
}