/**
 * EventHub Karten-Teile — Tokens und Aufbau-Varianten
 *
 * Gestaltung der Elemente, die parts/card-media.php und parts/card-body.php
 * je nach Aufbau-Option ausgeben (Card_Data::LAYOUT_OPTIONS, Filter
 * `eventhub_card_options`), plus die Plugin-Verbesserungen
 * (Video-Playbutton, Serien-Icon).
 *
 * Aufbau dieser Datei:
 *
 *   1. Tokens (`--ehc-*`) in der Cascade Layer `eventhub-cards`.
 *      Ungelayerte Deklarationen gewinnen immer gegen gelayerte — ein Theme
 *      setzt seine Werte also einfach auf `:root`, unabhängig von
 *      Ladereihenfolge und Spezifität.
 *
 *   2. Regeln OHNE Layer, aber ausschließlich auf die neuen Klassen bzw.
 *      Modifier gerichtet. Gelayert würden sie auch gegen die eigenen,
 *      ungelayerten Grundregeln des Plugins verlieren (z. B. overflow am
 *      Bildbereich, Position des Datum-Badges). Theme-Karten mit eigenem
 *      Markup (Child-Overrides) tragen diese Klassen nicht und bleiben
 *      unberührt.
 *
 * Werte, die von der Kategorie abhängen (`--eh-cat`, `--eh-cat-deep`,
 * `--eh-cat-soft`), stehen am Element selbst (style-Attribut) und werden
 * deshalb in den Regeln aufgelöst, nicht in den Tokens.
 *
 * @package EventHub
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

@layer eventhub-cards {
    :root {
        /* Grundfarben */
        --ehc-accent: var(--eventhub-color-primary, #0073aa);
        --ehc-accent-dark: var(--eventhub-color-primary-dark, #005a87);
        --ehc-muted: var(--eventhub-color-text-muted, #666);
        --ehc-surface: var(--eventhub-color-bg-alt, #f9f9f9);
        --ehc-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

        /* Datumsblock (date_style: overlay) */
        --ehc-date-bg: var(--ehc-accent);
        --ehc-date-bg-highlight: var(--eventhub-color-highlight-dark, #996600);
        --ehc-date-fg: #fff;
        --ehc-date-shape: none;
        --ehc-date-shadow: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
        --ehc-date-shadow-highlight: var(--ehc-date-shadow);
        --ehc-date-width: 3.75rem;
        --ehc-date-padding: 0.6rem;
        --ehc-date-day-size: 1.75rem;
        --ehc-date-month-size: 0.8rem;
        --ehc-date-inset: 0.75rem;

        /* Highlight-Schild (highlight_style: label) */
        --ehc-highlight-bg: var(--ehc-date-bg-highlight);
        --ehc-highlight-size: 0.75rem;
        --ehc-highlight-padding: 0.4em 0.75em;
        --ehc-highlight-shape: none;

        /* Textbereich bei überlappendem Datumsblock */
        --ehc-body-overlap: 0px;
        --ehc-body-indent: var(--eventhub-spacing-md, 1rem);

        /* Kategorie-Pillen (category_position: media) */
        --ehc-pill-bg: rgba(0, 0, 0, 0.65);
        --ehc-pill-bg-hover: rgba(0, 0, 0, 0.5);
        --ehc-pill-fg: #fff;
        --ehc-pill-blur: 6px;
        --ehc-pill-size: 0.7rem;
        --ehc-pill-weight: 600;
        --ehc-pill-case: uppercase;
        --ehc-pill-padding: 0.3em 0.75em;

        /* Badges im Bild */
        --ehc-badge-size: 0.75rem;
        --ehc-badge-padding: 0.35em 0.75em;
        --ehc-badge-radius: var(--eventhub-border-radius, 4px);
        --ehc-flag-tickets-bg: var(--ehc-accent);
        --ehc-flag-tickets-bg-hover: var(--ehc-accent-dark);
        --ehc-flag-tickets-fg: #fff;
        --ehc-flag-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        --ehc-flag-tickets-shadow: var(--ehc-flag-shadow);
        --ehc-flag-free-shadow: var(--ehc-flag-shadow);
        /* Weiße Schrift braucht 4,5:1: die Grundfarbe wird deshalb abgedunkelt.
           Themes setzen --ehc-flag-free-bg direkt und sind davon nicht betroffen. */
        --ehc-flag-free-bg: color-mix(in srgb, var(--eventhub-color-free, #28a745) 70%, #000);
        --ehc-flag-free-bg-hover: color-mix(in srgb, var(--ehc-flag-free-bg) 80%, #000);

        /* Datumszeile (meta_format: split) */
        --ehc-meta-size: var(--eventhub-font-size-sm, 0.875rem);
        --ehc-weekday-color: var(--ehc-accent);
        --ehc-weekday-weight: 600;
        --ehc-time-color: var(--ehc-muted);
        --ehc-time-case: none;
        --ehc-meta-gap: 0.5rem;
        --ehc-status-padding: 0.25rem 0.5rem;
        --ehc-status-tracking: 0.025em;
        --ehc-series-color: var(--ehc-muted);
        --ehc-series-opacity: 0.7;

        /* Platzhalter ohne Bild (placeholder_style: category) */
        --ehc-placeholder-bg: var(--ehc-surface);
        --ehc-placeholder-icon: var(--ehc-muted);
        --ehc-placeholder-icon-size: 3rem;

        /* --- Neue Grundrisse (sm, lg): Hülle --- */
        --ehc-bg: #fff;
        --ehc-border: 1px solid var(--eventhub-color-border, #e0e0e0);
        --ehc-radius: var(--eventhub-border-radius, 8px);
        --ehc-shadow: var(--eventhub-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.1));
        --ehc-shadow-hover: var(--eventhub-card-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.15));
        --ehc-shadow-hover-highlight: var(--ehc-shadow-hover);
        --ehc-highlight-edge: 3px solid var(--eventhub-color-highlight, #ffc107);
        --ehc-hover-lift: 0px;
        --ehc-duration: 0.3s;
        --ehc-media-zoom: 1.05;
        --ehc-padding: var(--eventhub-spacing-md, 1rem);
        --ehc-gap: var(--eventhub-spacing-xs, 0.25rem);

        /* Titel und Ort */
        --ehc-title-size: var(--eventhub-font-size-lg, 1.125rem);
        --ehc-title-weight: 600;
        --ehc-title-leading: 1.3;
        --ehc-title-lines: 2;
        --ehc-title-color: inherit;
        --ehc-title-hover-color: var(--ehc-title-color);
        --ehc-title-underline: 2px;
        --ehc-venue-size: var(--eventhub-font-size-sm, 0.875rem);
        --ehc-venue-icon: var(--ehc-muted);

        /* Quer-Karte (sm) */
        --ehc-sm-media-width: clamp(6.25rem, 22%, 10.5rem); /* breite Karte: Foto wie in der Laufend-Zeile */
        --ehc-sm-border: var(--ehc-border);
        --ehc-sm-shadow: var(--ehc-shadow);
        --ehc-sm-hover-bg: var(--ehc-surface);
        --ehc-sm-padding: 0.75rem;
        --ehc-sm-title-size: var(--eventhub-font-size-base, 1rem);
        --ehc-sm-meta-size: 0.875rem;
        --ehc-sm-date-padding: 0.38rem;
        --ehc-sm-date-day-size: 1.4rem;
        --ehc-sm-date-month-size: 0.7rem;
        --ehc-sm-date-shape: var(--ehc-date-shape);
        --ehc-sm-placeholder-icon-size: 1.5rem;
        --ehc-sm-placeholder-icon-display: block;
        --ehc-sm-placeholder-offset: 2.2rem;
        --ehc-sm-badge-size: 0.65rem;
        --ehc-sm-badge-padding: 0.3em 0.6em;
        --ehc-free-tag-size: 0.75rem; /* Kostenlos-Etikett in sm und Laufend-Zeile */
        --ehc-where-size: 0.9375rem; /* Ortszeile in sm und Laufend-Zeile */
        --ehc-where-icon-size: 1rem; /* Ort-Pin und Kategorie-Symbol dort */
        --ehc-shield-size: 0.875rem; /* Highlight-Schild im Foto, breit (ab 560 px) */
        --ehc-shield-size-narrow: 0.7rem; /* … und schmal: passt auf die 6,25-rem-Kachel */

        /* Treffer-Karte (hit): Hülle und Schrift wie sm */
        --ehc-hit-icon-size: 2.5rem;
        --ehc-hit-icon-radius: calc(var(--ehc-radius) * 0.75);
        --ehc-hit-icon-bg: color-mix(in srgb, var(--ehc-accent) 8%, var(--ehc-bg));
        --ehc-hit-icon-fg: var(--ehc-accent);
        --ehc-hit-kind-color: var(--ehc-weekday-color);
        --ehc-hit-kind-size: calc(var(--ehc-sm-meta-size) * 0.8);
        --ehc-hit-arrow-color: var(--ehc-muted);

        /* Laufend-Zeile (running-row): gemeinsame Fläche, Foto, Wann */
        --ehc-run-border: var(--ehc-sm-border);
        --ehc-run-shadow: var(--ehc-sm-shadow);
        --ehc-run-divider: 1px solid var(--eventhub-color-border, #e0e0e0);
        --ehc-run-media-width: 10.5rem;
        --ehc-run-media-width-narrow: 6.25rem;
        --ehc-run-media-shape: none;
        --ehc-run-highlight-skew: 0deg;
        --ehc-run-date-col: 7.25rem;
        --ehc-run-when-size: 0.9375rem;
        --ehc-run-title-size: clamp(1.125rem, 1rem + 0.6cqi, 1.45rem);
        --ehc-run-plain-title-size: 1.0625rem;

        /* Hero-Karte (lg) */
        --ehc-lg-media-max: 28rem;
        --ehc-lg-title-size: clamp(1.125rem, 0.85rem + 1.2cqi, 1.75rem);
        --ehc-lg-title-lines: 3;
        --ehc-lg-wide-date-scale: 1.25;
        --ehc-lg-wide-title-size: clamp(1.75rem, 1.2rem + 1.2cqi, 2.5rem);
        --ehc-lg-wide-meta-size: 1.0625rem;

        /* Laufende Zeitraum-Events: Punkt vor der heutigen Öffnungszeit */
        --ehc-live-open: var(--eventhub-color-planned, #28a745);
        --ehc-live-outside: var(--eventhub-color-postponed, #fd7e14);
        --ehc-live-closed: var(--eventhub-color-cancelled, #dc3545);
        --ehc-live-upcoming: var(--ehc-muted);
    }
}

/* ==========================================================================
   2. PLUGIN-VERBESSERUNGEN (gelten für alle Plugin-Karten)
   ========================================================================== */

/* Video-Playbutton mittig auf dem Bild */
.eventhub-event-card__playbutton {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    pointer-events: none;
}

.eventhub-event-card__playbutton svg {
    width: 3.5rem;
    height: 3.5rem;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    opacity: 0.85;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

@media (hover: hover) {
    :is(.eventhub-event-card, .eventhub-card):hover .eventhub-event-card__playbutton svg {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Serien-Symbol als SVG statt Emoji */
.eventhub-event-card__series-link .eventhub-event-card__series-icon {
    width: 1.1em;
    height: 1.1em;
}

/* ==========================================================================
   3. DATUMSBLOCK (date_style: overlay, highlight_style: label)
   ========================================================================== */

/* Der Block ragt aus dem Bild in den Textbereich — der Bildbereich darf
   deshalb nicht clippen; das übernimmt der Bild-Link. */
.eventhub-event-card__image-wrapper:has(> .eventhub-event-card__date-wrapper) {
    overflow: visible;
}

.eventhub-event-card__image-wrapper:has(> .eventhub-event-card__date-wrapper) > a {
    overflow: hidden;
    border-radius: inherit;
}

.eventhub-event-card__date-wrapper {
    position: absolute;
    bottom: -1px;
    left: var(--ehc-date-inset);
    z-index: 3;
    pointer-events: none;
}

.eventhub-event-card__date-wrapper .eventhub-event-card__date-badge--overlay {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: var(--ehc-date-width);
    padding: var(--ehc-date-padding) calc(var(--ehc-date-padding) + 4px);
    border-radius: 0;
    background: var(--ehc-date-bg);
    color: var(--ehc-date-fg);
    clip-path: var(--ehc-date-shape);
    box-shadow: none;
    filter: var(--ehc-date-shadow);
    pointer-events: auto;
    /* Monat und „bis/ab" erben die Schriftfarbe statt des Badge-Grautons. */
    --eventhub-date-badge-month: currentColor;
}

.eventhub-event-card__date-wrapper .eventhub-event-card__date-badge--highlight {
    background: var(--ehc-date-bg-highlight);
    filter: var(--ehc-date-shadow-highlight);
}

.eventhub-event-card__date-badge--overlay .eventhub-event-card__date-day {
    font-size: var(--ehc-date-day-size);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.eventhub-event-card__date-badge--overlay .eventhub-event-card__date-month {
    font-size: var(--ehc-date-month-size);
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.eventhub-event-card__date-badge--overlay .eventhub-event-card__date-prefix {
    font-size: calc(var(--ehc-date-month-size) * 0.85);
    opacity: 0.85;
}

.eventhub-event-card__highlight-label {
    position: absolute;
    bottom: calc(100% - 8px);
    left: 0;
    min-width: var(--ehc-date-width);
    padding: var(--ehc-highlight-padding);
    background: var(--ehc-highlight-bg);
    color: var(--ehc-date-fg);
    font-size: var(--ehc-highlight-size);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    clip-path: var(--ehc-highlight-shape);
    z-index: 1;
    /* Beschriftung so hoch wie die Zeile (Abschnitt 4, .eventhub-card__label) */
    --ehc-label-height: 1.5em;
}

/* Schräg um die eigene Mitte: die Mitte der Schrift bleibt auf der Mitte
   des Schilds. */
.eventhub-event-card__highlight-label .eventhub-card__label {
    display: block;
    transform: skewY(-6deg) scale(1.1);
}

.eventhub-event-card__date-star {
    position: absolute;
    top: -28px;
    left: -10px;
    width: 24px;
    height: 24px;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    animation: eventhub-card-star-pulse 2s ease-in-out infinite;
    z-index: 2;
}

.eventhub-event-card__date-star svg {
    display: block;
    width: 100%;
    height: 100%;
}

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

@media (prefers-reduced-motion: reduce) {
    .eventhub-event-card__date-star {
        animation: none;
    }
}

/* Textbereich rückt unter den überlappenden Block */
:is(.eventhub-event-card, .eventhub-card--md, .eventhub-card--lg):has(.eventhub-event-card__date-wrapper) > .eventhub-event-card__content {
    position: relative;
    z-index: 2;
    margin-top: var(--ehc-body-overlap);
    padding-left: var(--ehc-body-indent);
    background: inherit;
}

:is(.eventhub-event-card, .eventhub-card--md, .eventhub-card--lg):has(.eventhub-event-card__date-wrapper) .eventhub-event-card__image-wrapper {
    z-index: 3;
}

/* ==========================================================================
   4. KATEGORIE-PILLEN IM BILD (category_position: media)
   ========================================================================== */

.eventhub-event-card__category-pills {
    position: absolute;
    top: var(--ehc-date-inset);
    left: var(--ehc-date-inset);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Über den Container qualifiziert: `.image-wrapper a` (eventhub-event-card.css)
   setzt sonst display: block und height: 100% auf jeden Link im Bild. */
.eventhub-event-card__category-pills .eventhub-event-card__category-pill {
    display: inline-flex;
    height: auto;
    align-items: center;
    gap: 0.35em;
    padding: var(--ehc-pill-padding);
    border-radius: 50vh;
    background: var(--ehc-pill-bg);
    -webkit-backdrop-filter: blur(var(--ehc-pill-blur));
    backdrop-filter: blur(var(--ehc-pill-blur));
    color: var(--ehc-pill-fg);
    font-size: var(--ehc-pill-size);
    font-weight: var(--ehc-pill-weight);
    letter-spacing: 0.05em;
    line-height: 1;
    text-decoration: none;
    text-transform: var(--ehc-pill-case);
    transition:
        transform 0.3s var(--ehc-ease),
        background-color 0.3s var(--ehc-ease);
}

.eventhub-event-card__category-pills .eventhub-event-card__category-pill:hover,
.eventhub-event-card__category-pills .eventhub-event-card__category-pill:focus-visible {
    background: var(--ehc-pill-bg-hover);
    color: var(--ehc-pill-fg);
    text-decoration: none;
    transform: scale(1.05);
}

/* Icon als Maske: nimmt die Kategoriefarbe an, für den dunklen Grund
   aufgehellt; ohne Kategoriefarbe in Schriftfarbe. */
.eventhub-event-card__category-icon {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    background-color: var(--eh-cat, var(--ehc-pill-fg));
    -webkit-mask: var(--ehc-cat-icon) center / contain no-repeat;
    mask: var(--ehc-cat-icon) center / contain no-repeat;
}

@supports (color: color-mix(in oklab, red, white)) {
    .eventhub-event-card__category-icon {
        background-color: color-mix(in oklab, var(--eh-cat, var(--ehc-pill-fg)) 78%, white);
    }
}

.eventhub-event-card__category-emoji {
    flex-shrink: 0;
    font-size: 0.95em;
    line-height: 1;
}

/* Beschriftung aller Pillen und Schilder (Kategorie, Reihe, Tickets,
   Kostenlos, Terminzahl, Status, Highlight): Versalien exakt mittig. Die
   Zeile wird auf Versalhöhe beschnitten und gleichmäßig wieder auf
   --ehc-label-height (Standard 1em = line-height 1) aufgefüllt — unabhängig
   von den Maßen der Schrift und von der Pixelrundung fließender
   Schriftgrößen. Die Schilder selbst haben deshalb oben und unten gleich
   viel Innenabstand. Ohne text-box (Firefox) gilt die normale Zeile. */
@supports (text-box: trim-both cap alphabetic) {
    .eventhub-card__label {
        display: block;
        padding-block: calc((var(--ehc-label-height, 1em) - 1cap) / 2);
        text-box: trim-both cap alphabetic;
    }
}

/* ==========================================================================
   5. TICKET-BADGE IM BILD (ticket_style: flag)
   ========================================================================== */

.eventhub-event-card__ticket-flag {
    position: absolute;
    right: var(--eventhub-spacing-sm, 0.5rem);
    bottom: var(--eventhub-spacing-sm, 0.5rem);
    z-index: 2;
}

/* Schilder im Bild — Tickets, Kostenlos (md/lg) und Terminzahl der Reihe —
   teilen eine Form; nur Farbe und Lage stehen bei den einzelnen Schildern. */
.eventhub-badge.eventhub-badge--tickets,
:is(.eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__free-badge .eventhub-badge--free,
.eventhub-card__count-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: var(--ehc-badge-padding);
    border-radius: var(--ehc-badge-radius);
    font-size: var(--ehc-badge-size);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        transform 0.3s var(--ehc-ease),
        background-color 0.3s var(--ehc-ease);
}

.eventhub-badge.eventhub-badge--tickets {
    background: var(--ehc-flag-tickets-bg);
    color: var(--ehc-flag-tickets-fg);
}

.eventhub-badge.eventhub-badge--tickets:hover,
.eventhub-badge.eventhub-badge--tickets:focus-visible {
    background: var(--ehc-flag-tickets-bg-hover);
    color: var(--ehc-flag-tickets-fg);
    text-decoration: none;
    transform: scale(1.05);
}

.eventhub-event-card__ticket-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* Farbe des Kostenlos-Badges in JEDER Plugin-Karte aus dem Token (sm und
   medium nutzten bisher die allgemeine Badge-Farbe, ohne Kontrastprüfung). */
:is(.eventhub-card, .eventhub-event-card) .eventhub-badge--free {
    background-color: var(--ehc-flag-free-bg);
    color: var(--ehc-flag-tickets-fg);
}

/* Kostenlos-Link hovert in JEDER Karte dunkelgrün, nie grau. Die Spezifität
   (0,4,0) schlägt generische Link-Hover-Regeln von Themes
   (z. B. `.wrapper .eventhub-badge--link:hover`). */
:is(.eventhub-card, .eventhub-event-card) .eventhub-badge--free.eventhub-badge--link:is(:hover, :focus-visible) {
    background: var(--ehc-flag-free-bg-hover);
    color: var(--ehc-flag-tickets-fg);
    text-decoration: none;
}

/* Liegt der Datumsblock unten links, rücken die Badges unten rechts an die
   Bildkante, auf dieselbe Linie wie der Block. */
.eventhub-event-card__image-wrapper:has(> .eventhub-event-card__date-wrapper) > .eventhub-event-card__ticket-flag,
.eventhub-event-card__image-wrapper:has(> .eventhub-event-card__date-wrapper) > .eventhub-event-card__free-badge {
    right: var(--ehc-date-inset);
    bottom: 0;
}

/* ==========================================================================
   6. DATUMSZEILE (meta_format: split, status_position: meta)
   ========================================================================== */

/* Doppelte Klasse: schlägt die feste Handy-Größe der alten Karten
   (`.eventhub-event-card__date` in eventhub-responsive.css, max. 576 px). */
.eventhub-event-card__date.eventhub-event-card__date--split {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5em;
    font-size: var(--ehc-meta-size);
}

.eventhub-event-card__date--split .eventhub-event-card__weekday {
    color: var(--ehc-weekday-color);
    font-weight: var(--ehc-weekday-weight);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.eventhub-event-card__date--split .eventhub-event-card__time {
    color: var(--ehc-time-color);
    font-weight: 500;
    text-transform: var(--ehc-time-case);
}

.eventhub-event-card__meta > .eventhub-badge {
    font-size: var(--ehc-badge-size);
    line-height: 1;
}

/* ==========================================================================
   7. KARTE OHNE BILD (placeholder_style: category)
   ========================================================================== */

.eventhub-event-card__image-placeholder.eventhub-event-card__image-placeholder--category {
    background: var(--eh-cat-soft, var(--ehc-placeholder-bg));
    color: var(--eh-cat-deep, var(--ehc-placeholder-icon));
}

.eventhub-event-card__image-placeholder--category .eventhub-event-card__placeholder-icon {
    width: var(--ehc-placeholder-icon-size);
    height: var(--ehc-placeholder-icon-size);
}

/* Maske nur, wenn das Kategorie-Icon als Wert mitkommt (span) — der
   Kalender-Rückfall ist ein normales SVG. */
span.eventhub-event-card__placeholder-icon {
    background-color: currentColor;
    -webkit-mask: var(--ehc-cat-icon) center / contain no-repeat;
    mask: var(--ehc-cat-icon) center / contain no-repeat;
}

.eventhub-event-card__placeholder-emoji {
    font-size: var(--ehc-placeholder-icon-size);
    line-height: 1;
}

/* ==========================================================================
   8. NEUE GRUNDRISSE — gemeinsame Hülle (sm, md, lg; Hülle und Titel
      auch für die Treffer-Karte, hit)

   Wurzel `.eventhub-card` mit Modifier, die Elemente kommen aus den Teilen
   (`.eventhub-event-card__*`). Die Karte ist eigener Container, damit
   fließende Größen (cqi) und Umbrüche an der Kartenbreite hängen statt am
   Viewport. Die ältere `.eventhub-card--small` bleibt unberührt.
   ========================================================================== */

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg, .eventhub-card--hit) {
    container: eventhub-card / inline-size;
    background: var(--ehc-bg);
    border: var(--ehc-border);
    border-radius: var(--ehc-radius);
    box-shadow: var(--ehc-shadow);
    transition:
        transform var(--ehc-duration) var(--ehc-ease),
        box-shadow var(--ehc-duration) var(--ehc-ease),
        background-color var(--ehc-duration) var(--ehc-ease);
}

.eventhub-card.eventhub-card--highlight:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) {
    border-left: var(--ehc-highlight-edge);
}

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__image,
.eventhub-running-row__media img {
    transition: transform calc(var(--ehc-duration) * 1.5) var(--ehc-ease);
}

/* Bild-Link ohne Unterstrich (Themes unterstreichen Links, sichtbar unter
   dem Platzhalter-Emoji). */
.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__image-wrapper > a {
    text-decoration: none;
}

/* `:where()` hält die Spezifität unter der Einrück-Regel des Datumsblocks
   (Abschnitt 3), sonst überschreibt dieses padding deren padding-left. */
.eventhub-card:where(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__content {
    padding: var(--ehc-padding);
    gap: var(--ehc-gap);
}

/* Titel: Unterstrich wächst beim Hover der Karte */
.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg, .eventhub-card--hit) .eventhub-event-card__title {
    color: var(--ehc-title-color);
    font-size: var(--ehc-title-size);
    font-weight: var(--ehc-title-weight);
    line-height: var(--ehc-title-leading);
    -webkit-line-clamp: var(--ehc-title-lines);
    line-clamp: var(--ehc-title-lines);
}

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg, .eventhub-card--hit) .eventhub-event-card__title a,
.eventhub-running-row__title a {
    background-image: linear-gradient(var(--ehc-accent), var(--ehc-accent));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% var(--ehc-title-underline);
    text-decoration: none;
    transition:
        background-size 0.3s ease,
        color 0.2s ease;
}

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg, .eventhub-card--hit) .eventhub-event-card__title a:is(:hover, :focus-visible) {
    text-decoration: none;
}

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__venue {
    font-size: var(--ehc-venue-size);
    color: var(--ehc-muted);
}

.eventhub-pin {
    flex-shrink: 0;
    width: var(--ehc-where-icon-size);
    height: var(--ehc-where-icon-size);
    color: var(--ehc-venue-icon);
}

/* Serien-Symbol: grau und gedämpft, beim Hover Akzentfarbe */
.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__series-link {
    color: var(--ehc-series-color);
    opacity: var(--ehc-series-opacity);
}

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__series-link {
    transition: transform 0.2s var(--ehc-ease);
}

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__series-link:is(:hover, :focus-visible) {
    color: var(--ehc-accent);
    opacity: 1;
    transform: scale(1.15);
}

/* Orts-Link: Akzentfarbe beim Hover, kein Unterstrich (wie Editorial);
   `a:hover` des Themes würde sonst grau färben und unterstreichen. */
.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__venue a:is(:hover, :focus-visible) {
    color: var(--ehc-accent);
    text-decoration: none;
}

/* Karte ohne Bild: tiefe Kategoriefarbe, Icon weiß */
.eventhub-card .eventhub-event-card__image-placeholder.eventhub-event-card__image-placeholder--category {
    background: var(--eh-cat-deep, var(--ehc-placeholder-bg));
    color: #fff;
}

@media (hover: hover) {
    .eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg):hover .eventhub-event-card__image,
    .eventhub-running-row:hover .eventhub-running-row__media img {
        transform: scale(var(--ehc-media-zoom));
    }

    .eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg, .eventhub-card--hit):hover .eventhub-event-card__title a,
    .eventhub-running-row:hover .eventhub-running-row__title a {
        color: var(--ehc-title-hover-color);
        background-size: 100% var(--ehc-title-underline);
    }
}

@media (prefers-reduced-motion: reduce) {
    .eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg, .eventhub-card--hit),
    .eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__image,
    .eventhub-running-row,
    .eventhub-running-row__media img,
    .eventhub-running-row__title a {
        transition: none;
    }
}

/* ==========================================================================
   9. QUER-KARTE (sm)

   Raster: Bildkachel | Text | Merken-Herz. Der Bildbereich ist
   `display: contents` — Bild-Link und Herz werden direkt Rasterelemente.
   Datumsblock und Playbutton sind absolut positioniert und beziehen sich
   damit auf die Karte; weil die Kachel links über die volle Höhe läuft,
   genügt dafür die linke Kante plus Kachelbreite.
   ========================================================================== */

.eventhub-card.eventhub-card--sm {
    display: grid;
    grid-template-columns: var(--ehc-sm-media-width) minmax(0, 1fr) auto;
    align-items: center;
    border: var(--ehc-sm-border);
    box-shadow: var(--ehc-sm-shadow);

    /* Datumsblock, Titel und Datumszeile in Kachelgröße */
    --ehc-date-width: 0px;
    --ehc-date-padding: var(--ehc-sm-date-padding);
    --ehc-date-day-size: var(--ehc-sm-date-day-size);
    --ehc-date-month-size: var(--ehc-sm-date-month-size);
    --ehc-date-shape: var(--ehc-sm-date-shape);
    --ehc-placeholder-icon-size: var(--ehc-sm-placeholder-icon-size);
    --ehc-title-size: var(--ehc-sm-title-size);
    --ehc-meta-size: var(--ehc-sm-meta-size);
    --ehc-venue-size: var(--ehc-where-size);
}

.eventhub-card--sm .eventhub-event-card__image-wrapper {
    display: contents;
}

.eventhub-card--sm .eventhub-event-card__image-wrapper > a {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    min-height: var(--ehc-sm-media-width);
    overflow: hidden;
}

/* Foto mit schräger Kante und Highlight-Schild wie die Laufend-Zeile (9b);
   das Datum steht nur in der Datumszeile. Der Rahmen (der Bild-Link) trägt die
   Form und schneidet ab, so bleibt der Zoom beim Überfahren in der Kante. */
.eventhub-card--sm .eventhub-event-card__image-wrapper > a {
    clip-path: var(--ehc-run-media-shape);
}

.eventhub-card--sm .eventhub-highlight-shield {
    bottom: 0.5rem;
    font-size: var(--ehc-shield-size-narrow);
}

@container eventhub-card (min-width: 560px) {
    .eventhub-card--sm .eventhub-highlight-shield {
        font-size: var(--ehc-shield-size);
    }
}

/* Kostenlos-Etikett (grün) — EIN Baustein für sm und Laufend-Zeile
   (Klasse `eventhub-free-tag`), damit beide immer gleich groß sind. Größe
   absolut aus dem Token, nicht relativ zur Zeile. Kostenlos filtert die Liste
   (data-filter-free), Hover dunkelgrün; die Farbe steht fest, damit `a:hover`
   des Themes sie nicht überschreibt. */
.eventhub-free-tag {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 0.3em 0.45em;
    border-radius: 3px;
    background: var(--ehc-flag-free-bg);
    color: var(--ehc-flag-tickets-fg);
    font-size: var(--ehc-free-tag-size);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        transform 0.3s var(--ehc-ease),
        background-color 0.3s var(--ehc-ease);
}

a.eventhub-free-tag:is(:hover, :focus-visible) {
    background: var(--ehc-flag-free-bg-hover);
    color: var(--ehc-flag-tickets-fg);
    text-decoration: none;
    transform: scale(1.05);
}

a.eventhub-free-tag:focus-visible {
    outline: 2px solid var(--ehc-accent);
    outline-offset: 2px;
}

/* Breite Karte: Kostenlos steht rechts vor dem Herz und ist wie dieses
   vertikal zentriert (wie die Infogruppe der Laufend-Zeile). Der Text lässt
   dafür Platz. Schmal bleibt es in der Datumszeile. */
.eventhub-card.eventhub-card--sm {
    position: relative;
}

@container eventhub-card (min-width: 560px) {
    .eventhub-card--sm .eventhub-free-tag {
        position: absolute;
        top: 50%;
        right: calc(var(--ehc-sm-padding) + 22px + 1rem);
        z-index: 2;
        /* eigene translate-Eigenschaft statt transform, damit der Hover-scale
           (transform) die Zentrierung nicht überschreibt */
        translate: 0 -50%;
    }

    .eventhub-card--sm:has(.eventhub-free-tag) .eventhub-event-card__content {
        padding-right: 7rem;
    }
}

/* Bild und Fläche füllen die Kachel, ohne die Zeilenhöhe zu bestimmen */
.eventhub-card--sm .eventhub-event-card__image-wrapper > a > :is(img, .eventhub-event-card__image-placeholder) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eventhub-card--sm .eventhub-event-card__image-placeholder {
    font-size: var(--ehc-placeholder-icon-size);
}

.eventhub-card--sm .eventhub-event-card__playbutton {
    inset: 0 auto 0 0;
    width: var(--ehc-sm-media-width);
}

/* Datumsblock füllt die Kachelbreite. Er ragt 1 px über die Unterkante
   (die Karte schneidet ab): Bild und Block runden bei gebrochenen
   Pixeldichten sonst unterschiedlich, und ein Fotostreifen blitzt durch. */
.eventhub-card--sm .eventhub-event-card__date-wrapper {
    left: 0;
    bottom: -1px;
    width: var(--ehc-sm-media-width);
}

/* Rechte Kante: clip-path und drop-shadow zeichnen den Block weichgezeichnet,
   das Foto dagegen auf ganze Pixel gerundet — bei gebrochenen Pixeldichten
   blitzt ein Fotostreifen rechts neben dem Block durch. Ein Überstand würde
   stattdessen eine sichtbare Stufe erzeugen. Darum liegt eine harte Rückseite
   in Blockfarbe unter der Kante, die mit dem Foto auf dieselben Pixel rundet. */
.eventhub-card--sm .eventhub-event-card__date-wrapper::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 3px;
    background: var(--ehc-date-bg);
}

.eventhub-card--sm .eventhub-event-card__date-wrapper:has(.eventhub-event-card__date-badge--highlight)::after {
    background: var(--ehc-date-bg-highlight);
}

.eventhub-card--sm .eventhub-event-card__date-wrapper .eventhub-event-card__date-badge--overlay {
    width: 100%;
    box-sizing: border-box;
    padding-inline: 0;
}

/* Kachel ohne Bild: Kategoriefarbe mit kleinem Kategorie-Icon. Das Icon
   steht in der freien Fläche über dem Datumsblock, etwas unter deren Mitte
   (Offset kleiner als die Blockhöhe von ca. 2,9rem), ohne Datumsblock unter
   dem kleinen Datums-Badge oben links. */
.eventhub-card--sm .eventhub-event-card__image-placeholder > * {
    display: var(--ehc-sm-placeholder-icon-display);
}

.eventhub-card--sm .eventhub-event-card__image-placeholder {
    box-sizing: border-box;
    align-items: center;
    padding-right: 6%; /* Mitte des Trapezes: die schräge Kante nimmt rechts Fläche */
}

/* Status in der Datumszeile kleiner als in den großen Karten */
.eventhub-card--sm .eventhub-event-card__meta > .eventhub-badge {
    padding: var(--ehc-sm-badge-padding);
    font-size: var(--ehc-sm-badge-size);
}

/* Kleines Datum oben links (date_style: badge) */
.eventhub-card--sm .eventhub-event-card__date-badge:not(.eventhub-event-card__date-badge--overlay) {
    top: 0.375rem;
    left: 0.375rem;
    min-width: 2.25rem;
    padding: 0.2rem 0.3rem;
}

.eventhub-card--sm .eventhub-event-card__date-badge:not(.eventhub-event-card__date-badge--overlay) .eventhub-event-card__date-day {
    font-size: 1rem;
}

.eventhub-card--sm .eventhub-event-card__date-badge:not(.eventhub-event-card__date-badge--overlay) .eventhub-event-card__date-month {
    font-size: 0.6rem;
}

/* Das Schild braucht mehr Fläche als die Kachel hat; der Highlight bleibt
   am orangen Datumsblock und seinem Stern erkennbar. */
.eventhub-card--sm .eventhub-event-card__highlight-label {
    display: none;
}

.eventhub-card--sm .eventhub-event-card__date-star {
    top: -0.55rem; /* halb auf dem Orange, halb auf dem Foto */
    left: 0.35rem;
    width: 1.1rem;
    height: 1.1rem;
}

.eventhub-card--sm .eventhub-event-card__playbutton svg {
    width: 2rem;
    height: 2rem;
}

.eventhub-card--sm .eventhub-event-card__content {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: var(--ehc-sm-padding);
    gap: 0.15rem;
}

.eventhub-card--sm .eventhub-event-card__meta {
    flex-wrap: wrap;
    gap: 0 0.75em;
    font-size: var(--ehc-meta-size);
    line-height: 1.4;
}

.eventhub-card--sm .eventhub-event-card__date {
    font-size: inherit;
}

.eventhub-card--sm .eventhub-event-card__details {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-top: 0;
}

/* Die Ortszeile nimmt die ganze Zeile ein (flex: 1). Nur so steht ihre
   Breite fest; vorher richtete sie sich nach dem Inhalt und kürzte die
   Kategorie, obwohl daneben Platz war. */
.eventhub-card--sm .eventhub-event-card__venue {
    line-height: 1.35;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.2em;
    min-width: 0;
    max-width: 100%;
}

/* Ortszeile „Ort  Kategorie“ (wie die frühere Banner-Karte): das
   Kategorie-Icon im Blau des Orts-Pins trennt beide (ohne Icon ein „·“).
   Der Ort hat Vorrang: Bei Platzmangel kürzt sich zuerst die Kategorie
   (flex-shrink 100), bis Symbol und ein paar Buchstaben übrig sind; erst
   dann der Ort. Beide mit Auslassungspunkten. */
.eventhub-card--sm :is(.eventhub-event-card__venue-name, .eventhub-event-card__venue-category-name) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eventhub-card--sm .eventhub-event-card__venue-sep {
    flex-shrink: 0;
}

.eventhub-card--sm .eventhub-event-card__venue-category {
    flex: 0 100 auto;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* Neben dem Ort: mindestens Symbol und rund drei Buchstaben */
.eventhub-card--sm .eventhub-event-card__venue-name ~ .eventhub-event-card__venue-category {
    min-width: 4em;
    margin-left: 0.5em;
}

.eventhub-card--sm .eventhub-event-card__venue-sep + .eventhub-event-card__venue-category {
    margin-left: 0;
}

.eventhub-category-icon {
    flex-shrink: 0;
    width: var(--ehc-where-icon-size);
    height: var(--ehc-where-icon-size);
    margin-right: 0.3em;
    background-color: var(--ehc-venue-icon);
    -webkit-mask: var(--ehc-cat-icon) center / contain no-repeat;
    mask: var(--ehc-cat-icon) center / contain no-repeat;
}

.eventhub-card--sm .eventhub-event-card__venue-category .eventhub-event-card__category-emoji {
    flex-shrink: 0;
    margin-right: 0.3em;
}

/* Kostenlos im Bild: klein oben links über dem Datumsblock; ohne Block
   (kleines Datums-Badge oben links) unten links. */
.eventhub-card--sm .eventhub-event-card__image-wrapper > .eventhub-event-card__free-badge {
    top: auto;
    right: auto;
    bottom: 0.375rem;
    left: 0.375rem;
}

.eventhub-card--sm .eventhub-event-card__image-wrapper:has(> .eventhub-event-card__date-wrapper) > .eventhub-event-card__free-badge {
    top: 0.375rem;
    bottom: auto;
}

.eventhub-card--sm .eventhub-event-card__free-badge .eventhub-badge {
    padding: var(--ehc-sm-badge-padding);
    font-size: var(--ehc-sm-badge-size);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Herz rechts, vertikal mittig wie in der Laufend-Zeile (statt auf dem
   Bild). Darüber bleibt Platz für die Öffnungszeit laufender Events
   (Abschnitt 11). */
.eventhub-card--sm .eventhub-favorite-btn--card {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    margin-right: var(--ehc-sm-padding);
    background: none;
    padding: 0;
}

/* Gleiche Herzgröße wie auf md/lg: dort sitzt das Herz in einer 26-px-Scheibe mit
   4 px Innenabstand (Symbol 18 px). Hier steht es ohne Scheibe; die Fläche zum Tippen
   bleibt über das ::after (44 px) groß genug. */
.eventhub-card--sm .eventhub-favorite-btn--card .eventhub-favorite-btn__icon,
.eventhub-running-row .eventhub-favorite-btn--card .eventhub-favorite-btn__icon {
    width: 18px;
    height: 18px;
}

@media (hover: hover) {
    .eventhub-card.eventhub-card--sm:hover {
        background: var(--ehc-sm-hover-bg);
        box-shadow: var(--ehc-sm-shadow);
    }
}

/* Laufendes Zeitraum-Event, heute geschlossen: Kachel tritt zurück */
.eventhub-card--sm.eventhub-card--closed-today .eventhub-event-card__image-wrapper > a {
    filter: grayscale(1);
    opacity: 0.6;
}

/* ==========================================================================
   9b. LAUFEND-ZEILE (running-row.php, Liste „Aktuell laufend“)

   Alle Zeilen auf einer gemeinsamen Fläche mit Trennlinien. Highlight und
   Top mit Foto, normale als schlichte Zeile mit dem Wann als fester
   Spalte. Das Wann steht in der Farbe des Wochentags der Karten, die
   Öffnungszeit wie deren Uhrzeit. Schmal (Handy) stapeln sich Wann, Titel
   und Ort.
   ========================================================================== */

.eventhub-running-events__list:has(> .eventhub-running-row) {
    container: eventhub-running / inline-size;
    overflow: hidden;
    background: var(--ehc-bg);
    border: var(--ehc-run-border);
    border-radius: var(--ehc-radius);
    box-shadow: var(--ehc-run-shadow);
}

.eventhub-running-row {
    position: relative;
    transition: background-color var(--ehc-duration) var(--ehc-ease);
    display: grid;
    grid-template-columns: var(--ehc-run-media-width) minmax(0, 1fr) auto auto;
    grid-template-areas:
        "media when info heart"
        "media text info heart";
    align-items: center;
    column-gap: 1.25rem;
    padding-right: calc(var(--ehc-sm-padding) + 1px); /* Herz mit Randabstand wie in der sm-Karte */
    border-top: var(--ehc-run-divider);
}

.eventhub-running-row:first-child {
    border-top: 0;
}

.eventhub-running-row--top {
    align-content: center;
    min-height: 6.5rem;
}

/* Wann-Zeile aufgelöst: das Datum steht über dem Titel, Status, Kostenlos
   und Öffnungszeit rechtsbündig vor dem Herz — wie in der Textzeile. */
.eventhub-running-row--top .eventhub-running-row__when {
    display: contents;
}

.eventhub-running-row--top .eventhub-running-row__until {
    grid-area: when;
    align-self: end;
    justify-self: start;
    padding-top: 1rem;
    margin-bottom: 0.125rem;
}

.eventhub-running-row--top .eventhub-running-row__text {
    align-self: start;
    padding-bottom: 1rem;
}

/* Foto füllt die Zeilenhöhe; Form (z. B. schräge Kante) aus dem Token */
/* Der Rahmen trägt die Form und schneidet ab — so bleibt der Zoom beim
   Überfahren innerhalb der schrägen Kante. */
.eventhub-running-row__media {
    grid-area: media;
    position: relative;
    align-self: stretch;
    display: block;
    min-height: 100%;
    overflow: hidden;
    clip-path: var(--ehc-run-media-shape);
    text-decoration: none;
}

.eventhub-running-row__media img,
.eventhub-running-row__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eventhub-running-row__placeholder {
    display: grid;
    place-items: center;
    background: var(--eh-cat-deep, var(--ehc-placeholder-bg));
}

.eventhub-running-row__placeholder-icon {
    width: 2rem;
    height: 2rem;
    background-color: #fff;
    -webkit-mask: var(--ehc-cat-icon) center / contain no-repeat;
    mask: var(--ehc-cat-icon) center / contain no-repeat;
}

/* Heute geschlossen oder abgesagt: die ganze Zeile tritt zurück, wie
   abgesagte Karten (.eventhub-card--cancelled) und die frühere Banner-Karte */
.eventhub-running-row.eventhub-running-row--closed-today,
.eventhub-running-row.eventhub-running-row--cancelled {
    opacity: 0.6;
}

/* Highlight-Schild auf dem Foto, Farbe wie das Schild der Karten. Die Schräge
   kommt aus einer Drehung des ganzen Schilds (statt clip-path): Balken,
   Schrift und Stern stehen dadurch exakt im selben Winkel. */
.eventhub-highlight-shield {
    position: absolute;
    bottom: 0.625rem;
    left: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.9em 0.35em 0.55em;
    background: var(--ehc-highlight-bg);
    color: var(--ehc-date-fg);
    font-size: var(--ehc-shield-size);
    font-style: italic;
    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
    transform: skewY(var(--ehc-run-highlight-skew));
}

/* Stern im Balken, in einer Reihe mit der Schrift (Animation aus Abschnitt 3).
   Der Schwerpunkt eines Sterns liegt unter der Mitte seiner Box, daher
   leicht nach oben gesetzt (top, weil die Animation transform belegt). */
.eventhub-highlight-shield .eventhub-highlight-shield__star {
    position: relative;
    top: -0.05em;
    left: 0;
    width: 1.15em;
    height: 1.15em;
    flex: none;
    filter: none;
}

/* Blauer Pin vor dem Ort, wie in der Ortszeile der Karten */
.eventhub-running-row__where .eventhub-pin {
    display: inline-block;
    margin-right: 0.25em;
    vertical-align: -0.15em;
}

/* Wann: Enddatum bzw. Countdown, Status, Kostenlos, heutige Öffnungszeit */
.eventhub-running-row__when {
    grid-area: when;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    min-width: 0;
    font-size: var(--ehc-run-when-size);
    line-height: 1.25;
    text-transform: var(--ehc-time-case);
}

.eventhub-running-row__until {
    color: var(--ehc-weekday-color);
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.eventhub-running-row__info {
    grid-area: info;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem 0.75rem;
}

.eventhub-running-row__status {
    color: var(--ehc-muted);
    font-weight: 700;
}

/* Heutige Öffnungszeit fett, aber grau — wie in der sm-Karte */
.eventhub-running-row__hours {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--ehc-time-color);
    font-weight: 700;
    white-space: nowrap;
}

.eventhub-running-row__text {
    grid-area: text;
    min-width: 0;
}

.eventhub-running-row__title {
    margin: 0;
    color: var(--ehc-title-color);
    font-size: var(--ehc-run-title-size);
    font-weight: var(--ehc-title-weight);
    line-height: 1.2;
}

.eventhub-running-row__title a {
    color: inherit;
    text-decoration: none;
}

/* Ganze Zeile klickbar; Ort, Kategorie und Herz liegen darüber */
.eventhub-running-row__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Gleiche sichtbare Abstände Wann → Titel und Titel → Ort (gemessen von
   Grundlinie zu Versalhöhe): kein Zusatzabstand über dem Ort, dafür am
   Desktop 2 px unter dem Wann (der Titel ist dort größer). */
.eventhub-running-row__where {
    margin: 0;
    overflow: hidden;
    color: var(--ehc-muted);
    font-size: var(--ehc-where-size);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eventhub-running-row__where a,
.eventhub-running-row .eventhub-free-tag,
.eventhub-running-row .eventhub-favorite-btn {
    position: relative;
    z-index: 2;
}

.eventhub-running-row__where a {
    color: inherit;
    text-decoration: none;
}

.eventhub-running-row__sep {
    padding: 0 0.35em;
    opacity: 0.5;
}

/* Kategorie-Symbol vor dem Namen im Blau des Orts-Pins, wie in der sm-Karte */
.eventhub-running-row__category {
    display: inline-flex;
    align-items: center;
    vertical-align: bottom;
}

/* Abstand nur hinter dem Ort (ohne Ort steht die Kategorie bündig) */
.eventhub-running-row .eventhub-pin ~ .eventhub-running-row__category {
    margin-left: 0.5em;
}

.eventhub-running-row__sep + .eventhub-running-row__category {
    margin-left: 0;
}

.eventhub-running-row__category-emoji {
    flex-shrink: 0;
    margin-right: 0.3em;
}

/* Herz wie bei der sm-Karte (Variante card, gemeinsame Regeln dort);
   hier nur der Platz im Raster statt der Position über dem Bild. */
.eventhub-running-row .eventhub-favorite-btn--card {
    grid-area: heart;
    align-self: center;
    top: auto;
    right: auto;
    margin: 0;
    padding: 0;
    background: none;
}

/* Überfahren wie bei den Karten: grauer Grund (wie sm), Bild-Zoom und
   wachsender Unterstrich am Titel kommen aus Abschnitt 8. */
@media (hover: hover) {
    .eventhub-running-row:hover {
        background-color: var(--ehc-sm-hover-bg);
    }

    .eventhub-running-row__where a:hover {
        color: var(--ehc-title-hover-color);
    }
}

/* Normale Veranstaltung: eine Zeile — Wann | Titel · Ort · Kategorie | Herz */
.eventhub-running-row--plain {
    grid-template-columns: var(--ehc-run-date-col) minmax(0, 1fr) auto auto;
    grid-template-areas: "when text info heart";
    min-height: 3.25rem;
    padding-left: 1.5rem;
}

.eventhub-running-row--plain .eventhub-running-row__text {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-block: 0.75rem;
}

.eventhub-running-row--plain .eventhub-running-row__title {
    flex: 0 1 auto;
    overflow: hidden;
    font-size: var(--ehc-run-plain-title-size);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eventhub-running-row--plain .eventhub-running-row__where {
    flex: 1 1 0;
    margin: 0;
}

/* Datum als Spalte links, Status/Kostenlos/Öffnungszeit vor dem Herz */
.eventhub-running-row--plain .eventhub-running-row__when {
    display: contents;
}

.eventhub-running-row--plain .eventhub-running-row__until {
    grid-area: when;
}

/* Handy: Wann über dem Titel, Titel darf umbrechen */
@container eventhub-running (max-width: 560px) {
    .eventhub-running-row {
        grid-template-columns: var(--ehc-run-media-width-narrow) minmax(0, 1fr) auto;
        grid-template-areas:
            "media when heart"
            "media text heart";
        column-gap: 0.875rem;
    }

    .eventhub-running-row--top {
        min-height: 6.25rem;
    }

    /* Schmal ist kein Platz für die Spalte: alles wieder unter das Datum */
    .eventhub-running-row--top .eventhub-running-row__when {
        display: flex;
        padding-top: 0.75rem;
    }

    .eventhub-running-row--top .eventhub-running-row__until {
        padding-top: 0;
        margin-bottom: 0;
    }

    .eventhub-running-row__info {
        justify-content: flex-start;
    }

    .eventhub-running-row--top .eventhub-running-row__text {
        padding-bottom: 0.75rem;
    }

    .eventhub-running-row .eventhub-highlight-shield {
        bottom: 0.5rem;
        font-size: var(--ehc-shield-size-narrow);
    }

    .eventhub-running-row--plain {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "when heart"
            "text heart";
        padding-left: 1rem;
    }

    .eventhub-running-row--plain .eventhub-running-row__when {
        display: flex;
        padding-top: 0.7rem;
    }

    .eventhub-running-row--plain .eventhub-running-row__text {
        display: block;
        padding-block: 0.1rem 0.7rem;
    }

    .eventhub-running-row--plain .eventhub-running-row__title {
        white-space: normal;
    }
}

/* ==========================================================================
   10. HERO-KARTE (lg) — Grundregeln gelten auch für md (Abschnitt 10a)

   Bild oben: 4:3 wie die Editorial-Karte, ab 600 px Kartenbreite 16:9,
   nie höher als --ehc-lg-media-max. Ab 800 px Kartenbreite stehen Bild und Text
   nebeneinander — umgeschaltet über Container-Abfragen auf den Kindern,
   die Karte selbst bleibt ein umbrechender Flex-Container.
   ========================================================================== */

.eventhub-card:is(.eventhub-card--lg, .eventhub-card--md) {
    display: flex;
    flex-flow: row wrap;
}

.eventhub-card.eventhub-card--lg {
    --ehc-title-size: var(--ehc-lg-title-size);
    --ehc-title-lines: var(--ehc-lg-title-lines);
}

:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__image-wrapper {
    flex: 0 0 100%;
    aspect-ratio: 4 / 3;
    max-height: var(--ehc-lg-media-max);
}

:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__content {
    flex: 1 1 100%;
    min-width: 0;
}

/* Der Text deckt die untersten --ehc-body-overlap des Bildes ab (wie bei der
   Editorial-Karte; der Wert ist negativ); der Datumsblock liegt im Bildbereich davor und hängt so
   in den Text. Der Bild-Link wird dafür unten abgeschnitten. */
:is(.eventhub-card--lg, .eventhub-card--md):has(.eventhub-event-card__date-wrapper) .eventhub-event-card__image-wrapper > a {
    clip-path: inset(0 0 calc(-1 * var(--ehc-body-overlap)) 0);
}

/* Textrhythmus wie Editorial: Abstand nach oben, dann eng gestapelt. */
:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__content {
    gap: 0;
}

:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__meta {
    padding-top: var(--ehc-gap);
    margin-bottom: 2px;
}

:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__title {
    margin-bottom: 4px;
}

:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__details {
    margin-top: 0;
}

/* Ticket- und Kostenlos-Badge im Bild: Schatten aus Tokens (im Child ein
   farbiger Schein wie bei der Editorial-Karte). */
:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-badge--tickets.eventhub-badge--card-overlay {
    box-shadow: var(--ehc-flag-tickets-shadow);
}

:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-badge--free.eventhub-badge--card-overlay {
    box-shadow: var(--ehc-flag-free-shadow);
}

/* Datumszeile: Abstände und Status-Badge aus Tokens (Editorial-Maße im Child). */
:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__meta {
    gap: var(--ehc-meta-gap);
}

:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__date--split {
    column-gap: var(--ehc-meta-gap);
}

:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__meta > .eventhub-badge {
    padding: var(--ehc-status-padding);
    letter-spacing: var(--ehc-status-tracking);
}

/* Ortszeile: Pin 1,1 em, Abstand drei Viertel des Meta-Abstands (Editorial). */
:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__venue {
    gap: calc(var(--ehc-meta-gap) * 0.75);
}

:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-pin {
    width: 1.1em;
    height: 1.1em;
}

/* Serien-Symbol sitzt rechts in der Meta-Zeile. */
:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__series-link {
    margin-left: auto;
}

/* Playbutton so groß wie bei der Editorial-Karte. */
:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__playbutton svg {
    width: 4rem;
    height: 4rem;
}

/* Highlight-Beschriftung läuft genau so breit wie der Datumsblock (der
   Block ist der Bezug: das Label füllt seine Breite von links bis rechts). */
:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__highlight-label {
    right: 0;
    padding-inline: 0;
}

/* Monatszeile wie Editorial (Zeilenhöhe 1,5) statt der engen Karten-Zeilenhöhe. */
:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__date-badge--overlay .eventhub-event-card__date-month {
    line-height: 1.5;
}

:is(.eventhub-card--lg, .eventhub-card--md) .eventhub-event-card__image-placeholder {
    --ehc-placeholder-icon-size: 4rem;
    font-size: 4rem;
}

@container eventhub-card (min-width: 600px) {
    .eventhub-card--lg .eventhub-event-card__image-wrapper {
        aspect-ratio: 16 / 9;
    }
}

@container eventhub-card (min-width: 800px) {
    .eventhub-card--lg .eventhub-event-card__image-wrapper {
        flex-basis: 60%;
        aspect-ratio: 16 / 10;
        max-height: none;
    }

    .eventhub-card--lg .eventhub-event-card__content {
        flex-basis: 0;
        justify-content: center;
        padding: calc(var(--ehc-padding) * 2);
    }

    /* Nebeneinander ist der Text das Gegengewicht zum großen Bild: Titel und
       Meta wachsen mit, statt in einer leeren Spalte klein zu stehen. */
    .eventhub-card.eventhub-card--lg {
        --ehc-title-size: var(--ehc-lg-wide-title-size);
        --ehc-meta-size: var(--ehc-lg-wide-meta-size);
        --ehc-venue-size: var(--ehc-lg-wide-meta-size);
    }

    .eventhub-card--lg .eventhub-event-card__meta {
        margin-bottom: 0.4rem;
    }

    .eventhub-card--lg .eventhub-event-card__title {
        margin-bottom: 0.75rem;
    }

    /* Foto mit schräger rechter Kante wie sm und die Laufend-Zeile. Bei 16:10
       ergibt der Token denselben Winkel wie dort (ca. 10°). */
    .eventhub-card--lg:has(.eventhub-event-card__date-wrapper) .eventhub-event-card__image-wrapper > a {
        clip-path: var(--ehc-run-media-shape);
    }

    /* Datumsblock samt Schild und Stern wächst, verankert unten links. */
    .eventhub-card--lg .eventhub-event-card__date-wrapper {
        transform: scale(var(--ehc-lg-wide-date-scale));
        transform-origin: left bottom;
    }

    .eventhub-card--lg .eventhub-event-card__date-star {
        top: -34px;
        left: -12px;
        width: 28px;
        height: 28px;
    }

    /* Ticket- und Kostenlos-Badge wandern in die Textspalte, unten bündig
       zum Text — am Bildrand klebten sie und gingen unter. Bezugspunkt bleibt
       der Bildbereich, das Badge steht rechts daneben (Bildbereich visible). */
    .eventhub-card.eventhub-card--lg .eventhub-event-card__image-wrapper {
        overflow: visible;
    }

    .eventhub-card.eventhub-card--lg .eventhub-event-card__image-wrapper > :is(.eventhub-event-card__ticket-flag, .eventhub-event-card__free-badge) {
        right: auto;
        bottom: calc(var(--ehc-padding) * 2);
        left: calc(100% + var(--ehc-padding) * 2);
    }

    .eventhub-card.eventhub-card--lg .eventhub-event-card__image-wrapper > :is(.eventhub-event-card__ticket-flag, .eventhub-event-card__free-badge) .eventhub-badge {
        padding: 0.9em 1.4em;
        font-size: calc(var(--ehc-badge-size) * 1.2);
    }

    /* Nebeneinander ragt der Datumsblock nicht in den Text */
    .eventhub-card--lg:has(.eventhub-event-card__date-wrapper) > .eventhub-event-card__content {
        margin-top: 0;
        padding-left: calc(var(--ehc-padding) * 2);
    }
}

@media (hover: hover) {
    .eventhub-card:is(.eventhub-card--lg, .eventhub-card--md):hover {
        transform: translateY(var(--ehc-hover-lift));
        box-shadow: var(--ehc-shadow-hover);
    }

    .eventhub-card:is(.eventhub-card--lg, .eventhub-card--md).eventhub-card--highlight:hover {
        box-shadow: var(--ehc-shadow-hover-highlight);
    }
}

/* ==========================================================================
   10a. STANDARDKARTE (md)

   Die frühere Editorial-Karte: wie lg schmal (Bild oben, Datumsblock ragt
   in den Text), aber ohne Breitbild-Umschaltung. Eigenheiten der Editorial-
   Karte, die md übernimmt:
   - Bild auf dem Handy 16:9 statt 4:3 (kompakter in der Liste),
   - Titel bis 3 Zeilen, in schmalen Karten (Karussell) 2,
   - Wochentag und Uhrzeit bleiben zusammen; ein Status-Badge rutscht
     dahinter in die nächste Zeile,
   - ganz schmal: Ticket-Badge ohne Symbol.
   ========================================================================== */

/* Im Raster gleich hohe Karten: der Leerraum gehört unter den Text, nicht
   ins Bild (sonst streckt die Flex-Zeile den Bildbereich). */
.eventhub-card.eventhub-card--md {
    align-content: flex-start;
    --ehc-title-lines: 3;
}

.eventhub-card--md .eventhub-event-card__image-wrapper {
    max-height: none;
}

@media (max-width: 576px) {
    .eventhub-card--md .eventhub-event-card__image-wrapper {
        aspect-ratio: 16 / 9;
    }
}

.eventhub-card--md .eventhub-event-card__date--split {
    flex-wrap: nowrap;
}

@container eventhub-card (max-width: 300px) {
    .eventhub-card--md .eventhub-event-card__title {
        --ehc-title-lines: 2;
    }
}

@container eventhub-card (max-width: 240px) {
    .eventhub-card--md .eventhub-event-card__ticket-icon {
        display: none;
    }
}

/* ==========================================================================
   10b. REIHEN-KARTE (md, series-card.php)

   Wie die Standardkarte, aber ohne Datumsblock und Herz: oben links die
   Pille „Reihe“ (wie die Kategorie-Pillen, nur nicht verlinkt), unten
   rechts die Zahl der kommenden Termine als dunkles Schild; im Text
   Terminzeile und Zeitraum mit Kalender-Symbol.
   ========================================================================== */

/* Pille und Termin-Schild sind nicht verlinkt: Klicks gehen zur Karte durch. */
.eventhub-card--series .eventhub-event-card__category-pills,
.eventhub-card__count-flag {
    pointer-events: none;
}

/* Gleich groß wie das Kategorie-Icon, damit die Pille gleich hoch ist. */
.eventhub-card__kind-icon {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
}

/* Form aus Abschnitt 5 (Schilder im Bild), hier nur Lage und Farbe. */
.eventhub-card__count-flag {
    position: absolute;
    right: var(--ehc-date-inset);
    bottom: var(--ehc-date-inset);
    z-index: 2;
    background: var(--ehc-pill-bg);
    -webkit-backdrop-filter: blur(var(--ehc-pill-blur));
    backdrop-filter: blur(var(--ehc-pill-blur));
    color: var(--ehc-pill-fg);
    white-space: nowrap;
}

.eventhub-card--series .eventhub-event-card__title {
    padding-top: var(--ehc-gap);
}

.eventhub-card__series-next,
.eventhub-card__series-range {
    margin: 0;
    color: var(--ehc-muted);
    font-size: var(--ehc-venue-size);
    line-height: 1.5;
}

.eventhub-card__series-range {
    display: flex;
    align-items: center;
    gap: calc(var(--ehc-meta-gap) * 0.75);
    margin-top: 2px;
}

.eventhub-card__series-range-icon {
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    color: var(--ehc-venue-icon);
}

/* ==========================================================================
   10c. TREFFER-KARTE (hit-card.php)

   Veranstalter, Reihe, Ort oder Kategorie in einer Trefferliste. Eine
   Zeile wie die Quer-Karte (gleicher Rahmen, Schatten und Hover):
   Symbol-Kachel | Typ, Name, Termine | Pfeil. Titel, Hover-Unterstrich und
   die klickbare Fläche kommen aus Abschnitt 8 und 14.
   ========================================================================== */

.eventhub-card.eventhub-card--hit {
    position: relative;
    display: grid;
    grid-template-columns: var(--ehc-hit-icon-size) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--ehc-sm-padding);
    padding: var(--ehc-sm-padding);
    border: var(--ehc-sm-border);
    box-shadow: var(--ehc-sm-shadow);
    --ehc-title-size: var(--ehc-sm-title-size);
}

/* Kategorien in ihrer Farbe (style-Attribut), sonst Akzentfarbe */
.eventhub-card__hit-icon {
    display: grid;
    place-items: center;
    width: var(--ehc-hit-icon-size);
    height: var(--ehc-hit-icon-size);
    border-radius: var(--ehc-hit-icon-radius);
    background: var(--eh-cat-soft, var(--ehc-hit-icon-bg));
    color: var(--eh-cat-deep, var(--ehc-hit-icon-fg));
}

.eventhub-card__hit-icon-svg {
    width: 50%;
    height: 50%;
}

.eventhub-card__hit-icon-mask {
    width: 55%;
    height: 55%;
    background-color: currentColor;
    -webkit-mask: var(--ehc-cat-icon) center / contain no-repeat;
    mask: var(--ehc-cat-icon) center / contain no-repeat;
}

.eventhub-card__hit-icon-emoji {
    font-size: calc(var(--ehc-hit-icon-size) * 0.5);
    line-height: 1;
}

.eventhub-card__hit-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.eventhub-card__hit-kind {
    color: var(--ehc-hit-kind-color);
    font-size: var(--ehc-hit-kind-size);
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.eventhub-card--hit .eventhub-event-card__title {
    margin: 0;
}

.eventhub-card__hit-meta {
    margin: 0;
    color: var(--ehc-muted);
    font-size: var(--ehc-sm-meta-size);
    line-height: 1.4;
}

.eventhub-card__hit-arrow {
    flex-shrink: 0;
    color: var(--ehc-hit-arrow-color);
    transition:
        transform var(--ehc-duration) var(--ehc-ease),
        color var(--ehc-duration) var(--ehc-ease);
}

@media (hover: hover) {
    .eventhub-card.eventhub-card--hit:hover {
        background: var(--ehc-sm-hover-bg);
    }

    .eventhub-card.eventhub-card--hit:hover .eventhub-card__hit-arrow {
        color: var(--ehc-accent);
        transform: translateX(2px);
    }
}

/* ==========================================================================
   11. LAUFZEIT IN DER DATUMSZEILE (sm, lg, Zeitraum-Events)
   ========================================================================== */

.eventhub-event-card__date--running {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.75em;
}

.eventhub-event-card__countdown--last-day {
    color: var(--ehc-live-closed);
    font-weight: 700;
}

.eventhub-event-card__live-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Heutige Öffnungszeit fett wie in der früheren Banner-Karte, im Grau
   der Uhrzeit (schlägt das Gewicht der geteilten Datumszeile). */
.eventhub-event-card__date--running .eventhub-event-card__live-status {
    color: var(--ehc-time-color);
    font-weight: 700;
}

/* In der Quer-Karte rechtsbündig oben, über dem Herz unten rechts (wie die
   rechte Spalte der Banner-Karte), damit sie ins Auge fällt: die
   Datumszeile reicht dafür in die Herz-Spalte hinein (Herz 26 px +
   Randabstand) und endet bündig mit dem Herz. So passen Zeitraum und
   Öffnungszeit auch schmal in eine Zeile. */
.eventhub-card--sm .eventhub-event-card__meta:has(> .eventhub-event-card__date--running) {
    margin-right: calc(-26px - var(--ehc-sm-padding));
}

.eventhub-card--sm .eventhub-event-card__date--running {
    flex: 1 1 auto;
}

.eventhub-card--sm .eventhub-event-card__date--running .eventhub-event-card__live-status {
    margin-left: auto;
}

.eventhub-event-card__live-status::before {
    content: "";
    flex-shrink: 0;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background-color: var(--ehc-live-upcoming);
}

.eventhub-live-status--open-now.eventhub-event-card__live-status::before {
    background-color: var(--ehc-live-open);
    box-shadow: 0 0 6px color-mix(in srgb, var(--ehc-live-open) 60%, transparent);
}

.eventhub-live-status--outside-hours.eventhub-event-card__live-status::before {
    background-color: var(--ehc-live-outside);
}

.eventhub-live-status--closed.eventhub-event-card__live-status::before {
    background-color: var(--ehc-live-closed);
}

/* ==========================================================================
   12. TREFFERFLÄCHEN (sm, lg)

   Die sichtbare Größe bleibt, die klickbare Fläche wächst über ein
   Pseudo-Element (WCAG 2.5.8: mindestens 24 px). Das Herz bekommt 44 px —
   es steht frei am Kartenrand. Serien-Symbol und Kategorie-Link liegen in
   der Textzeile und bleiben bei 24 px, damit sie den Titel nicht überdecken.
   ========================================================================== */

/* Bezugspunkt für das Pseudo-Element. Das Herz ist in lg schon absolut
   positioniert (Bild, oben rechts), in sm steht es statisch im Raster. */
.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__series-link,
.eventhub-card--sm .eventhub-event-card__venue-category,
.eventhub-card--sm .eventhub-favorite-btn--card {
    position: relative;
}

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__series-link::after,
.eventhub-card--sm .eventhub-event-card__venue-category::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 24px);
    height: max(100%, 24px);
    transform: translate(-50%, -50%);
}

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-favorite-btn--card::after,
.eventhub-running-row .eventhub-favorite-btn--card::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* Herz in sm steht ohne Hintergrund auf der Karte: auch beim Hover keine
   weiße Scheibe (eventhub-favorites.css gibt dem Bild-Herz eine). */
.eventhub-card--sm .eventhub-favorite-btn--card:hover,
.eventhub-running-row .eventhub-favorite-btn--card:hover {
    background: none;
}

/* Fokusring des Herzens als Schatten: Themes nehmen Buttons gern die
   Outline (z. B. `outline: none !important`). */
.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-favorite-btn--card:focus-visible,
.eventhub-running-row .eventhub-favorite-btn--card:focus-visible {
    box-shadow: 0 0 0 2px var(--ehc-bg), 0 0 0 4px var(--ehc-accent);
}

/* Badge-Links außerhalb des Bildes (lg breit): der weiße Fokusring der
   Bild-Badges wäre auf der weißen Karte unsichtbar. */
@container eventhub-card (min-width: 800px) {
    .eventhub-card--lg .eventhub-badge--link:focus-visible {
        outline-color: var(--ehc-accent);
    }
}

/* ==========================================================================
   13. LESBARKEIT (sm, lg)

   - Monat im Datumsblock ohne Deckkraft: weiß auf Farbfläche, volle Stärke.
   - Abgesagt: die ganze Karte wird über Deckkraft zurückgenommen
     (.eventhub-card--cancelled in eventhub-event-card.css).
   ========================================================================== */

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__date-badge--overlay .eventhub-event-card__date-month {
    opacity: 1;
}

/* ==========================================================================
   14. GANZE KARTE KLICKBAR (sm, md, lg, hit)

   Der Titel-Link spannt sich über ein Pseudo-Element über seinen
   Bezugsrahmen: in sm die ganze Karte, in lg den Textbereich (der ist
   positioniert, das Bild hat seinen eigenen Link). Der Datumsblock lässt
   Klicks zum Bild-Link durch. Alle anderen Links und Buttons liegen
   darüber und bleiben einzeln anklickbar.
   ========================================================================== */

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg, .eventhub-card--hit) .eventhub-event-card__title > a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__date-badge--overlay {
    pointer-events: none;
}

.eventhub-card:is(.eventhub-card--sm, .eventhub-card--md, .eventhub-card--lg) .eventhub-event-card__content :is(a, button):not(.eventhub-event-card__title > a, .eventhub-free-tag) {
    position: relative;
    z-index: 2;
}