/**
 * Ensemble Shortcodes - Events
 * 
 * Styles for event-related shortcodes:
 * - [ensemble_events] - Events Grid
 * - [ensemble_upcoming] - Upcoming Events List
 * - [ensemble_featured] - Featured Events
 * - Single Event components
 * 
 * @package Ensemble
 * @subpackage Shortcodes
 * @version 3.0.0
 * 
 * DEPENDENCIES:
 * - _base.css
 * - _components.css
 * 
 * CONDITIONAL LOADING:
 * Only loaded when event shortcodes are present on page.
 */

/* ============================================
   EVENTS GRID WRAPPER
   ============================================ */

.ensemble-events-grid-wrapper {
    margin: var(--ensemble-section-spacing, 48px) 0;
}

/* No margin for slider/hero layouts */
.ensemble-events-grid-wrapper.es-is-slider {
    margin: 0;
}

/* Hide filters for slider layouts */
.ensemble-events-grid-wrapper.es-is-slider .ensemble-grid-filters {
    display: none !important;
}

/* ============================================
   GRID FILTERS
   ============================================ */

.ensemble-grid-filters {
    margin-bottom: 32px;
    padding: var(--ensemble-card-padding, 24px);
    background: var(--ensemble-filter-bg, var(--ensemble-surface, #ffffff));
    border-radius: var(--ensemble-card-radius, 12px);
}

.ensemble-search-box {
    margin-bottom: 16px;
}

.ensemble-search-input {
    width: 100%;
    padding: var(--ensemble-input-padding-v, 12px) var(--ensemble-input-padding-h, 16px);
    border: var(--ensemble-input-border-width, 1px) solid var(--ensemble-input-border, var(--ensemble-card-border, #e2e8f0));
    border-radius: var(--ensemble-input-radius, var(--ensemble-radius, 8px));
    font-size: var(--ensemble-body-size, 16px);
    font-family: var(--ensemble-font-body, inherit);
    background: var(--ensemble-input-bg, var(--ensemble-card-bg, #ffffff));
    color: var(--ensemble-input-text, var(--ensemble-text, #1a202c));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ensemble-search-input::placeholder {
    color: var(--ensemble-input-placeholder, var(--ensemble-text-muted, #a0aec0));
}

.ensemble-search-input:focus {
    outline: none;
    border-color: var(--ensemble-input-focus-border, var(--ensemble-primary, #667eea));
    box-shadow: 0 0 0 3px var(--ensemble-input-focus-shadow, rgba(102, 126, 234, 0.15));
}

.ensemble-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ensemble-filter {
    flex: 1;
    min-width: 150px;
    padding: var(--ensemble-input-padding-v, 10px) var(--ensemble-input-padding-h, 16px);
    border: var(--ensemble-input-border-width, 1px) solid var(--ensemble-input-border, var(--ensemble-card-border, #e2e8f0));
    border-radius: var(--ensemble-input-radius, var(--ensemble-radius, 8px));
    font-size: var(--ensemble-body-size, 16px);
    font-family: var(--ensemble-font-body, inherit);
    background: var(--ensemble-input-bg, var(--ensemble-card-bg, #ffffff));
    color: var(--ensemble-input-text, var(--ensemble-text, #1a202c));
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.ensemble-filter:focus {
    outline: none;
    border-color: var(--ensemble-input-focus-border, var(--ensemble-primary, #667eea));
}

/* ============================================
   SINGLE EVENT/ARTIST/LOCATION PAGES
   ============================================ */

.ensemble-single-event,
.ensemble-single-artist,
.ensemble-single-location {
    margin: var(--ensemble-section-spacing, 48px) 0;
}

.ensemble-single-event .ensemble-event-header,
.ensemble-single-artist .ensemble-artist-header,
.ensemble-single-location .ensemble-location-header {
    margin-bottom: 24px;
}

/* Meta Grid */
.ensemble-single-event .ensemble-meta-grid,
.ensemble-single-artist .ensemble-meta-grid,
.ensemble-single-location .ensemble-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0;
    padding: var(--ensemble-card-padding, 24px);
    background: var(--ensemble-card-bg, #ffffff);
    border: var(--ensemble-card-border-width, 1px) solid var(--ensemble-card-border, #e2e8f0);
    border-radius: var(--ensemble-card-radius, 12px);
}

.ensemble-single-event .ensemble-meta-item,
.ensemble-single-artist .ensemble-meta-item,
.ensemble-single-location .ensemble-meta-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Description */
.ensemble-single-event .ensemble-event-description,
.ensemble-single-artist .ensemble-artist-description,
.ensemble-single-location .ensemble-location-description {
    margin: 32px 0;
}

.ensemble-single-event .ensemble-content,
.ensemble-single-artist .ensemble-content,
.ensemble-single-location .ensemble-content {
    line-height: var(--ensemble-line-height, 1.6);
    color: var(--ensemble-text, #1a202c);
}

.ensemble-single-event .ensemble-content p,
.ensemble-single-artist .ensemble-content p,
.ensemble-single-location .ensemble-content p {
    margin: 0 0 16px 0;
}

/* ============================================
   SOCIAL LINKS
   ============================================ */

.ensemble-artist-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0;
}

.ensemble-social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--ensemble-card-bg, #ffffff);
    border: 1px solid var(--ensemble-card-border, #e2e8f0);
    border-radius: var(--ensemble-radius, 8px);
    color: var(--ensemble-text, #1a202c);
    text-decoration: none;
    font-size: var(--ensemble-small-size, 14px);
    transition: var(--ensemble-transition, all 0.3s ease);
}

.ensemble-social-link:hover {
    background: var(--ensemble-primary, #667eea);
    color: var(--ensemble-button-text, #ffffff);
    border-color: var(--ensemble-primary, #667eea);
    transform: translateY(-2px);
    text-decoration: none;
}

.ensemble-social-link .dashicons {
    width: 16px;
    height: 16px;
    font-size: var(--ensemble-body-size, 16px);
}

/* ============================================
   ARTIST/LOCATION REFERENCES
   ============================================ */

.ensemble-artist-references {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    padding: 12px 16px;
    background: var(--ensemble-card-bg, #ffffff);
    border-left: 3px solid var(--ensemble-primary, #667eea);
    border-radius: var(--ensemble-radius, 8px);
    font-size: var(--ensemble-small-size, 14px);
    color: var(--ensemble-text-secondary, #718096);
}

.ensemble-artist-references .dashicons {
    color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #667eea));
    font-size: var(--ensemble-lg-size, 18px);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ensemble-references-text {
    line-height: 1.4;
}

/* ============================================
   EVENTS LIST (on Artist/Location pages)
   ============================================ */

.ensemble-artist-events-section,
.ensemble-location-events-section {
    margin-top: 48px;
}

.ensemble-artist-events-section h2,
.ensemble-location-events-section h2 {
    font-family: var(--ensemble-font-heading, inherit);
    font-size: var(--ensemble-h2-size, 28px);
    font-weight: var(--ensemble-heading-weight, 700);
    color: var(--ensemble-text, #1a202c);
    margin: 0 0 24px 0;
}

.ensemble-events-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ensemble-event-list-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--ensemble-card-bg, #ffffff);
    border: var(--ensemble-card-border-width, 1px) solid var(--ensemble-card-border, #e2e8f0);
    border-radius: var(--ensemble-card-radius, 12px);
    transition: var(--ensemble-transition, all 0.3s ease);
}

.ensemble-event-list-item:hover {
    border-color: var(--ensemble-primary, #667eea);
    box-shadow: var(--ensemble-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
}

.ensemble-event-list-item .ensemble-event-date {
    flex-shrink: 0;
}

.ensemble-event-list-item .ensemble-event-info {
    flex: 1;
    min-width: 0;
}

.ensemble-event-list-item .ensemble-event-title {
    margin: 0 0 8px 0;
    font-size: var(--ensemble-h4-size, 20px);
    font-weight: var(--ensemble-button-weight, 600);
}

.ensemble-event-list-item .ensemble-event-title a {
    color: var(--ensemble-text, #1a202c);
    text-decoration: none;
}

.ensemble-event-list-item .ensemble-event-title a:hover {
    color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #667eea));
}

.ensemble-event-list-item .ensemble-event-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: var(--ensemble-small-size, 14px);
    color: var(--ensemble-text-secondary, #718096);
}

.ensemble-event-list-item .ensemble-event-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ensemble-event-list-item .ensemble-event-details .dashicons {
    width: 16px;
    height: 16px;
    font-size: var(--ensemble-body-size, 16px);
    color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #667eea));
}

/* ============================================
   UPCOMING EVENTS
   ============================================ */

.ensemble-upcoming-events {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: var(--ensemble-section-spacing, 48px) 0;
}

.ensemble-upcoming-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--ensemble-card-bg, #ffffff);
    border: var(--ensemble-card-border-width, 1px) solid var(--ensemble-card-border, #e2e8f0);
    border-radius: var(--ensemble-card-radius, 12px);
    transition: var(--ensemble-transition, all 0.3s ease);
}

.ensemble-upcoming-item:hover {
    border-color: var(--ensemble-primary, #667eea);
    box-shadow: var(--ensemble-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
}

/* Thumbnail */
.ensemble-upcoming-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: calc(var(--ensemble-card-radius, 12px) / 2);
    overflow: hidden;
}

.ensemble-upcoming-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content */
.ensemble-upcoming-content {
    flex: 1;
    min-width: 0;
}

.ensemble-upcoming-date {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

/* Date Badge */
.ensemble-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--ensemble-primary, #667eea);
    color: var(--ensemble-button-text, #ffffff);
    border-radius: calc(var(--ensemble-radius, 8px) / 2);
    flex-shrink: 0;
}

.ensemble-date-badge .date-day {
    font-size: var(--ensemble-xl-size, 20px);
    font-weight: var(--ensemble-heading-weight, 700);
    line-height: 1;
}

.ensemble-date-badge .date-month {
    font-size: var(--ensemble-xs-size, 12px);
    font-weight: var(--ensemble-button-weight, 600);
    text-transform: uppercase;
    line-height: 1;
}

/* Countdown Badge */
.ensemble-countdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--ensemble-badge-padding-v, 4px) var(--ensemble-badge-padding-h, 8px);
    background: var(--ensemble-secondary, #764ba2);
    color: var(--ensemble-button-text, #ffffff);
    border-radius: var(--ensemble-badge-radius, 12px);
    font-size: var(--ensemble-small-size, 14px);
    font-weight: var(--ensemble-button-weight, 600);
}

/* Title */
.ensemble-upcoming-title {
    margin: 0 0 8px 0;
}

.ensemble-upcoming-title a {
    color: var(--ensemble-text, #1a202c);
    text-decoration: none;
    font-size: var(--ensemble-h4-size, 20px);
    font-weight: var(--ensemble-button-weight, 600);
}

.ensemble-upcoming-title a:hover {
    color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #667eea));
}

/* Details */
.ensemble-upcoming-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--ensemble-small-size, 14px);
    color: var(--ensemble-text-secondary, #718096);
}

.ensemble-upcoming-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ensemble-upcoming-details .dashicons {
    width: 14px;
    height: 14px;
    font-size: var(--ensemble-small-size, 14px);
    color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #667eea));
}

/* ============================================
   FEATURED EVENTS
   ============================================ */

.ensemble-featured-events {
    margin: var(--ensemble-section-spacing, 48px) 0;
}

.ensemble-featured-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: var(--ensemble-badge-padding-v, 6px) var(--ensemble-badge-padding-h, 12px);
    background: var(--ensemble-secondary, #764ba2);
    color: var(--ensemble-button-text, #ffffff);
    border-radius: var(--ensemble-badge-radius, 16px);
    font-size: var(--ensemble-badge-font-size, var(--ensemble-small-size, 14px));
    font-weight: var(--ensemble-badge-font-weight, 600);
    z-index: 10;
}

/* ============================================
   MOBILE TICKET CARD
   ============================================ */

.es-mobile-ticket-card {
    display: none;
}

.es-desktop-ticket {
    display: block;
}

@media (max-width: 991px) {
    .es-mobile-ticket-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: var(--ensemble-card-padding, 24px);
        margin: 24px 0;
        background: var(--ensemble-surface, #ffffff);
        border-radius: var(--ensemble-card-radius, 12px);
        text-align: center;
    }
    
    .es-mobile-ticket-price {
        font-size: var(--ensemble-h3-size, 24px);
        font-weight: var(--ensemble-heading-weight, 700);
        color: var(--ensemble-text, #1a202c);
    }
    
    .es-mobile-ticket-card .es-ticket-button {
        width: 100%;
        max-width: 300px;
    }
    
    .es-desktop-ticket {
        display: none !important;
    }
}

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

.es-venue-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.es-venue-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.es-venue-genre {
    display: inline-block;
    padding: var(--ensemble-badge-padding-v, 4px) var(--ensemble-badge-padding-h, 12px);
    background: var(--ensemble-primary, #667eea);
    color: var(--ensemble-button-text, #ffffff);
    font-size: var(--ensemble-xs-size, 12px);
    border-radius: var(--ensemble-badge-radius, 20px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CANONICAL EVENT CARD (Phase 4) — rendered via ensemble_render_event_card().
   One markup, variants simple|list|compact. Consumes --ensemble-* only.
   Layout sets restyle via body.es-layout-{set} .ensemble-event-card …
   Scoped under .ensemble-event-card to not touch legacy event classes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Grid container (arrangement) --- */
/* Grid columns come from _components.css (.ensemble-events-grid.ensemble-columns-N).
   Here we only handle the LIST arrangement: stack the --list cards full width. */
.ensemble-events-grid.ensemble-layout-list {
    display: flex;
    flex-direction: column;
    gap: var(--ensemble-grid-gap, 16px);
}
.ensemble-events-grid.ensemble-layout-list > .ensemble-event-card { width: 100%; }

/* --- Base --- */
.ensemble-event-card {
    position: relative;
    background: var(--ensemble-card-bg, #ffffff);
    color: var(--ensemble-text, #1a1a1a);
    border: var(--ensemble-card-border-width, 1px) solid var(--ensemble-card-border, rgba(0,0,0,0.08));
    border-radius: var(--ensemble-card-radius, 12px);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ensemble-event-card a { text-decoration: none; color: inherit; }
.ensemble-event-card .ensemble-event-title { margin: 0; color: inherit; font-family: var(--ensemble-heading-font, inherit); }
.ensemble-event-card .ensemble-event-placeholder {
    width: 100%; height: 100%;
    background: var(--ensemble-muted-bg, #f0f0f3);
    min-height: 140px;
}
.ensemble-event-card .ensemble-event-badge {
    position: absolute; top: 12px; right: 12px;
    padding: 4px 10px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    background: var(--ensemble-primary, #e91e8c); color: var(--ensemble-primary-contrast, #fff);
    border-radius: var(--ensemble-badge-radius, 4px);
    z-index: 2;
}
.ensemble-event-card .ensemble-event-price {
    display: inline-block;
    font-weight: 600;
    color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #e91e8c));
}
.ensemble-event-card .ensemble-event-price small { font-weight: 400; opacity: 0.7; }
.ensemble-event-card .ensemble-event-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    color: var(--ensemble-muted-text, #6b6b76);
    font-size: 0.9rem;
}
.ensemble-event-card .ensemble-event-meta-sep { opacity: 0.5; }
.ensemble-event-card .ensemble-event-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ensemble-event-card .ensemble-btn {
    display: inline-block; padding: 8px 16px;
    border-radius: var(--ensemble-button-radius, 6px);
    font-size: 0.85rem; font-weight: 600;
    transition: opacity 0.2s ease;
}
.ensemble-event-card .ensemble-btn-primary { background: var(--ensemble-primary, #e91e8c); color: #fff; }
.ensemble-event-card .ensemble-btn-tickets { background: var(--ensemble-secondary, #2b2b3a); color: #fff; }
.ensemble-event-card .ensemble-btn:hover { opacity: 0.85; }

/* --- Variant: simple (image on top, content below) --- */
.ensemble-event-card--simple .ensemble-event-card-inner { display: block; }
.ensemble-event-card--simple .ensemble-event-image {
    position: relative;
    overflow: hidden;
    background: var(--ensemble-muted-bg, #f0f0f3);
}
.ensemble-event-card--simple.ensemble-event-ratio-landscape .ensemble-event-image { aspect-ratio: 16 / 9; }
.ensemble-event-card--simple.ensemble-event-ratio-square .ensemble-event-image { aspect-ratio: 1 / 1; }
.ensemble-event-card--simple.ensemble-event-ratio-portrait .ensemble-event-image { aspect-ratio: 4 / 5; }
.ensemble-event-card--simple .ensemble-event-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s ease;
}
.ensemble-event-card--simple:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.ensemble-event-card--simple:hover .ensemble-event-image img { transform: scale(1.05); }
.ensemble-event-card--simple .ensemble-event-content {
    display: flex; flex-direction: column; gap: 8px;
    padding: var(--ensemble-card-padding, 18px);
}
.ensemble-event-card--simple .ensemble-event-date {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 0.85rem; color: var(--ensemble-muted-text, #6b6b76); text-transform: uppercase; letter-spacing: 0.04em;
}
.ensemble-event-card--simple .ensemble-event-day { font-weight: 700; color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #e91e8c)); }
.ensemble-event-card--simple .ensemble-event-title { font-size: 1.15rem; line-height: 1.3; }
/* Ticket-Button der einfachen Card (31.10.2026): steht hinter dem Card-Link,
   noch in der Card. Ohne eigenen Abstand oben, die Inhaltszeile endet direkt darueber. */
.ensemble-event-card--simple > .ensemble-event-actions {
    margin-top: 0;
    padding: 0 var(--ensemble-card-padding, 18px) var(--ensemble-card-padding, 18px);
}
.ensemble-event-card--simple:has(> .ensemble-event-actions) .ensemble-event-content { padding-bottom: 12px; }

/* --- Variant: list (horizontal row) --- */
/* A4 (20.10.2026): flex-direction ausdruecklich — _components.css setzt alle
   Karten auf column, die Listenkarte stapelte deshalb Bild ueber Text. */
.ensemble-event-card--list { display: flex; flex-direction: row; gap: 16px; align-items: stretch; }
.ensemble-event-card--list .ensemble-event-thumb {
    position: relative; flex: 0 0 34%; max-width: 220px;
    overflow: hidden; background: var(--ensemble-muted-bg, #f0f0f3);
}
.ensemble-event-card--list .ensemble-event-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ensemble-event-card--list .ensemble-event-content {
    display: flex; flex-direction: column; gap: 6px;
    padding: var(--ensemble-card-padding, 16px);
    flex: 1; min-width: 0;
}
.ensemble-event-card--list .ensemble-event-date {
    font-size: 0.8rem; color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #e91e8c)); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.ensemble-event-card--list .ensemble-event-title { font-size: 1.1rem; line-height: 1.3; }
.ensemble-event-card--list .ensemble-event-excerpt { color: var(--ensemble-muted-text, #6b6b76); font-size: 0.92rem; }

/* Akteure (Line-up) in der Karte — unter dem Titel, gedämpft. (07.09.2026) */
.ensemble-event-card .ensemble-event-artists {
    margin: 2px 0 6px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--ensemble-muted-text, #6b6b76);
}
.ensemble-event-card--simple .ensemble-event-artists { margin-bottom: 8px; }
.ensemble-event-card--list:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.10); }
@media (max-width: 560px) {
    .ensemble-event-card--list { flex-direction: column; }
    .ensemble-event-card--list .ensemble-event-thumb { flex-basis: auto; max-width: none; aspect-ratio: 16/9; }
}

/* --- Variant: compact (date block + title/meta) --- */
/* Als Zeile: Datum links, Titel und Meta daneben, linksbuendig. Doppelte
   Klasse, weil _components.css alle Karten auf column stellt (die Karte
   stand sonst mittig, z. B. unter "Upcoming events" auf Orts- und
   Akteurseiten). Fix 03.11.2026. */
.ensemble-event-card.ensemble-event-card--compact {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
    gap: 14px; height: auto;
    padding: 10px 14px;
    text-align: left;
}
.ensemble-event-card--compact .ensemble-event-date {
    flex: 0 0 auto; text-align: center; line-height: 1;
    padding: 8px 10px; border-radius: var(--ensemble-badge-radius, 8px);
    background: var(--ensemble-muted-bg, #f0f0f3);
}
.ensemble-event-card--compact .ensemble-event-day { display: block; font-size: 1.3rem; font-weight: 700; color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #e91e8c)); }
.ensemble-event-card--compact .ensemble-event-month { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ensemble-muted-text, #6b6b76); }
.ensemble-event-card--compact .ensemble-event-content { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1 1 auto; text-align: left; }
.ensemble-event-card--compact .ensemble-event-title { font-size: 1rem; }
.ensemble-event-card--compact:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }

/* Kompakt-Card mit Zusaetzen (07.10.2026): kleines quadratisches Vorschaubild
   und Akteur-Zeile. Nur mit dem Card-Argument compact_extras, das derzeit
   allein [ensemble_upcoming_events] setzt - jede andere Kompakt-Card traegt
   die Modifikator-Klasse nicht und bleibt unveraendert. */
.ensemble-event-card--compact.ensemble-event-card--compact-extras .ensemble-event-thumb {
    flex: 0 0 48px; width: 48px; height: 48px;
    overflow: hidden;
    border-radius: var(--ensemble-badge-radius, 8px);
    background: var(--ensemble-muted-bg, #f0f0f3);
}
.ensemble-event-card--compact.ensemble-event-card--compact-extras .ensemble-event-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ensemble-event-card--compact.ensemble-event-card--compact-extras .ensemble-event-artists { margin: 0; font-size: 0.85rem; }

/* --- Special status (cancelled/postponed/soldout) --- */
.ensemble-event-card[class*="ensemble-event-status-"] .ensemble-event-title { opacity: 0.7; }
.ensemble-event-card .ensemble-event-badge--status { background: var(--ensemble-danger, #c0392b); }


/* ============================================================
   CARD STYLE VARIANTS (Brand Tuner / style attribute)
   Moved here from elementor.css (2026-08-16) so the styles
   classic|overlay|minimal|compact|featured work for event
   cards in the base — elementor.css was never enqueued.
   ============================================================ */

/* ============================================
   COMPACT CARD STYLE
   ============================================ */

.ensemble-card-compact .ensemble-event-image {
    height: 150px;
}

.ensemble-card-compact .ensemble-event-image img {
    height: 150px;
    object-fit: var(--ensemble-card-image-fit, cover);
}

.ensemble-card-compact .ensemble-event-content {
    padding: 12px;
}

.ensemble-card-compact .ensemble-event-title {
    font-size: var(--ensemble-body-size, 16px);
    margin-bottom: 8px;
}

.ensemble-card-compact .ensemble-event-meta {
    font-size: var(--ensemble-xs-size, 12px);
}

.ensemble-card-compact .ensemble-event-date {
    display: none;
}

/* ============================================
   MINIMAL CARD STYLE
   ============================================ */

.ensemble-card-minimal {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.ensemble-card-minimal .ensemble-event-image {
    border-radius: var(--ensemble-radius, 8px);
    overflow: hidden;
    margin: 0;
}

.ensemble-card-minimal .ensemble-event-content {
    padding: 16px 0;
}

.ensemble-card-minimal .ensemble-event-title {
    font-size: var(--ensemble-lg-size, 18px);
}

.ensemble-card-minimal:hover {
    transform: none;
    box-shadow: none;
}

/* ============================================
   OVERLAY CARD STYLE
   Image background with gradient overlay
   ============================================ */

.ensemble-card-overlay {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    padding: 0;
}

.ensemble-card-overlay .ensemble-event-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    border-radius: 0;
}

.ensemble-card-overlay .ensemble-event-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.ensemble-card-overlay .ensemble-event-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        transparent, 
        var(--ensemble-gradient-mid, rgba(0, 0, 0, 0.4)) 40%,
        var(--ensemble-gradient-start, rgba(0, 0, 0, 0.8))
    );
    padding: 60px 20px 20px;
    color: var(--ensemble-overlay-text, #ffffff);
}

.ensemble-card-overlay .ensemble-event-title a,
.ensemble-card-overlay .ensemble-event-title {
    color: var(--ensemble-overlay-text, #ffffff);
}

.ensemble-card-overlay .ensemble-event-meta {
    color: var(--ensemble-overlay-text-secondary, rgba(255, 255, 255, 0.8));
}

.ensemble-card-overlay .ensemble-event-date {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--ensemble-primary, #667eea);
    color: var(--ensemble-button-text, #ffffff);
    padding: 8px 12px;
    border-radius: var(--ensemble-radius, 8px);
}

.ensemble-card-overlay:hover {
    transform: none;
}

.ensemble-card-overlay:hover .ensemble-event-image img {
    transform: scale(1.05);
}

/* ============================================
   FEATURED CARD STYLE
   ============================================ */

.ensemble-card-featured {
    border: 2px solid var(--ensemble-primary, #667eea);
    position: relative;
}

.ensemble-card-featured::before {
    content: attr(data-featured-label, "Featured");
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--ensemble-primary, #667eea);
    color: var(--ensemble-button-text, #ffffff);
    padding: var(--ensemble-badge-padding-v, 4px) var(--ensemble-badge-padding-h, 12px);
    font-size: var(--ensemble-xs-size, 12px);
    font-weight: var(--ensemble-badge-font-weight, 600);
    border-radius: var(--ensemble-badge-radius, 4px);
    z-index: 10;
}

.ensemble-card-featured .ensemble-event-image {
    height: 220px;
}

.ensemble-card-featured .ensemble-event-image img {
    height: 220px;
    object-fit: var(--ensemble-card-image-fit, cover);
}

/* ============================================
   CATEGORY BADGE (on card)
   ============================================ */

.ensemble-event-category-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--ensemble-primary, #667eea);
    color: var(--ensemble-button-text, #ffffff);
    padding: var(--ensemble-badge-padding-v, 4px) var(--ensemble-badge-padding-h, 10px);
    font-size: var(--ensemble-xs-size, 12px);
    font-weight: var(--ensemble-badge-font-weight, 600);
    border-radius: var(--ensemble-badge-radius, 4px);
    text-transform: uppercase;
    z-index: 10;
}

/* ============================================================
   CARD STYLE VARIANTS — template cards (--simple)
   Scoped like artists.css/locations.css (2026-08-16): the grid
   container carries ensemble-style-{overlay|minimal}, the card
   itself is .ensemble-event-card--simple (templates/event-card.php).
   ============================================================ */

/* ---------- OVERLAY ---------- */
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple {
    position: relative;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--ensemble-card-radius, 12px);
    color: #fff;
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple.ensemble-event-ratio-square { aspect-ratio: 1 / 1; }
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple.ensemble-event-ratio-portrait { aspect-ratio: 4 / 5; }

.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-card-inner {
    display: block;
    height: 100%;
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    aspect-ratio: auto;
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, var(--ensemble-secondary, #2b2b3a), var(--ensemble-muted-bg, #45454f));
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 0, 0, 0.05) 70%,
        transparent 100%);
    transition: background 0.3s ease;
    pointer-events: none;
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: var(--ensemble-card-padding, 18px);
}
/* Ticket-Button (31.10.2026): oben rechts ueber dem Bild, die Inhaltszeile liegt unten. */
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple > .ensemble-event-actions {
    position: absolute;
    top: var(--ensemble-card-padding, 18px);
    right: var(--ensemble-card-padding, 18px);
    z-index: 3;
    margin: 0;
    padding: 0;
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-badge {
    z-index: 2;
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-title {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.2;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-date,
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-meta,
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-time,
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-location {
    color: rgba(255, 255, 255, 0.78);
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-meta {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-price {
    color: #fff;
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple:hover::after {
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.55) 45%,
        rgba(0, 0, 0, 0.12) 75%,
        rgba(0, 0, 0, 0.05) 100%);
}

/* ---------- MINIMAL ---------- */
.ensemble-events-grid.ensemble-style-minimal .ensemble-event-card--simple {
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--ensemble-card-border, rgba(0, 0, 0, 0.12));
}
.ensemble-events-grid.ensemble-style-minimal .ensemble-event-card--simple:hover {
    transform: none;
    box-shadow: none;
}
.ensemble-events-grid.ensemble-style-minimal .ensemble-event-card--simple .ensemble-event-image { display: none; }
.ensemble-events-grid.ensemble-style-minimal .ensemble-event-card--simple .ensemble-event-content {
    padding: 20px 4px;
}
.ensemble-events-grid.ensemble-style-minimal .ensemble-event-card--simple > .ensemble-event-actions { padding: 0 4px 20px; }
.ensemble-events-grid.ensemble-style-minimal .ensemble-event-card--simple:has(> .ensemble-event-actions) .ensemble-event-content { padding-bottom: 8px; }
.ensemble-events-grid.ensemble-style-minimal .ensemble-event-card--simple .ensemble-event-date {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ensemble-muted-text, #6b6b76);
}
.ensemble-events-grid.ensemble-style-minimal .ensemble-event-card--simple .ensemble-event-title {
    font-size: 1.15rem;
    line-height: 1.3;
    transition: color 0.2s ease;
}
.ensemble-events-grid.ensemble-style-minimal .ensemble-event-card--simple:hover .ensemble-event-title {
    color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #667eea));
}
.ensemble-events-grid.ensemble-style-minimal .ensemble-event-card--simple .ensemble-event-meta,
.ensemble-events-grid.ensemble-style-minimal .ensemble-event-card--simple .ensemble-event-price {
    font-size: 0.9rem;
    color: var(--ensemble-muted-text, #6b6b76);
}

/* ═══════════════════════════════════════════════════════════════════════════
   [ensemble_whats_on] — Was geht heute (01.11.2026)
   Kopf mit Titel, Umschalter (Naechster Oeffnungstag / Naechste 7 Tage) und
   „Ganzes Programm". Je Zeile: Uhrzeit | kompakte Card | Ticket-Knopf.
   Die Hausfarbe kommt als --es-house-color an der Zeile.
   ═══════════════════════════════════════════════════════════════════════════ */
.ensemble-whats-on { display: flex; flex-direction: column; gap: 16px; }
.ensemble-whats-on__head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.ensemble-whats-on__title {
    margin: 0; flex: 1 1 auto;
    font-family: var(--ensemble-heading-font, inherit);
}
.ensemble-whats-on__tabs {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--ensemble-muted-bg, #f0f0f3);
    border-radius: var(--ensemble-button-radius, 6px);
}
.ensemble-whats-on__tab {
    appearance: none; border: 0; cursor: pointer;
    padding: 8px 14px;
    background: transparent;
    color: var(--ensemble-text, #1a1a1a);
    font: inherit; font-size: 0.85rem; font-weight: 600;
    border-radius: var(--ensemble-button-radius, 6px);
    transition: background 0.2s ease, color 0.2s ease;
}
.ensemble-whats-on__tab[aria-selected="true"] {
    background: var(--ensemble-primary, #e91e8c);
    color: var(--ensemble-primary-contrast, #fff);
}
.ensemble-whats-on__tab:focus-visible { outline: 2px solid var(--ensemble-primary, #e91e8c); outline-offset: 2px; }
.ensemble-whats-on .ensemble-btn {
    display: inline-block; padding: 8px 16px;
    border-radius: var(--ensemble-button-radius, 6px);
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    transition: opacity 0.2s ease;
}
.ensemble-whats-on .ensemble-btn:hover { opacity: 0.85; }
.ensemble-whats-on .ensemble-btn-primary { background: var(--ensemble-primary, #e91e8c); color: var(--ensemble-primary-contrast, #fff); }
.ensemble-whats-on .ensemble-btn-tickets { background: var(--ensemble-secondary, #2b2b3a); color: #fff; }

.ensemble-whats-on__panel[hidden] { display: none; }
.ensemble-whats-on__day {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    margin: 8px 0 8px;
    font-family: var(--ensemble-heading-font, inherit);
    font-size: 1.1rem;
}
.ensemble-whats-on__panel > .ensemble-whats-on__day:first-child { margin-top: 0; }
.ensemble-whats-on__day-date {
    font-family: var(--ensemble-body-font, inherit);
    font-size: 0.85rem; font-weight: 400;
    color: var(--ensemble-muted-text, #6b6b76);
}
.ensemble-whats-on__list {
    list-style: none; margin: 0 0 8px; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.ensemble-whats-on__row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    margin: 0;
    padding-left: 12px;
    border-left: 4px solid var(--es-house-color, var(--ensemble-card-border, rgba(0,0,0,0.08)));
}
.ensemble-whats-on__time {
    font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--ensemble-text, #1a1a1a);
}
.ensemble-whats-on__row.is-running .ensemble-whats-on__time {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ensemble-primary-on-dark, var(--ensemble-primary, #e91e8c));
}
/* _components.css stellt alle Karten auf column, die Kompakt-Card stand
   dadurch mittig. Hier ausdruecklich als Zeile, linksbuendig. */
.ensemble-whats-on__row > .ensemble-event-card--compact {
    min-width: 0;
    flex-direction: row;
    justify-content: flex-start;
}
.ensemble-whats-on__ticket { white-space: nowrap; }
.ensemble-whats-on__empty { margin: 0; color: var(--ensemble-muted-text, #6b6b76); }

@media (max-width: 600px) {
    .ensemble-whats-on__tabs { width: 100%; }
    .ensemble-whats-on__tab { flex: 1 1 0; padding: 8px 6px; }
    .ensemble-whats-on__row {
        grid-template-columns: 3.75rem minmax(0, 1fr);
        gap: 8px 10px;
    }
    .ensemble-whats-on__ticket { grid-column: 2; justify-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Card-Bild / Flyer (01.11.2026)
   Formate fuer den Bildrahmen der einfachen Card (zu portrait/square/landscape
   oben). Ein Flyer wird nie beschnitten: in einem fremden Rahmen steht er
   eingepasst auf der Kartenflaeche. Plakatwand (card_format="auto"): jede
   Card hat das Format ihres Flyers, die Cards stehen oben buendig.
   ═══════════════════════════════════════════════════════════════════════════ */
.ensemble-event-card--simple.ensemble-event-ratio-a-portrait .ensemble-event-image  { aspect-ratio: 1 / 1.4142; }
.ensemble-event-card--simple.ensemble-event-ratio-din-long .ensemble-event-image    { aspect-ratio: 99 / 210; }
.ensemble-event-card--simple.ensemble-event-ratio-story .ensemble-event-image       { aspect-ratio: 9 / 16; }
.ensemble-event-card--simple.ensemble-event-ratio-a-landscape .ensemble-event-image { aspect-ratio: 1.4142 / 1; }

.ensemble-event-card--flyer .ensemble-event-image,
.ensemble-event-card--flyer .ensemble-event-thumb {
    background: var(--ensemble-muted-bg, #f0f0f3);
}
.ensemble-event-card--flyer .ensemble-event-image img,
.ensemble-event-card--flyer .ensemble-event-thumb img {
    object-fit: contain;
}
/* Ein Flyer ist schon gestaltet: beim Ueberfahren nicht vergroessern. */
.ensemble-event-card--simple.ensemble-event-card--flyer:hover .ensemble-event-image img { transform: none; }

.ensemble-events-grid--posterwall { align-items: start; }
.ensemble-events-grid--posterwall > .ensemble-event-card { align-self: start; }

/* Nur der Flyer (Schalter am Card-Bild): Text nur optisch weg. */
.ensemble-event-card--flyer-only .ensemble-event-content {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ensemble-event-card--simple.ensemble-event-card--flyer-only { padding: 0; }
.ensemble-event-card--flyer-only .ensemble-event-image {
    width: 100%;
    margin: 0;
}
.ensemble-event-card--simple.ensemble-event-card--flyer-only > .ensemble-event-actions {
    padding: 10px 12px;
}
/* Ticket-Button der Nur-Flyer-Card: klein, Kontur, mit Icon (01.11.2026). */
/* Doppelte Klasse: .ensemble-event-card .ensemble-btn und .ensemble-whats-on
   .ensemble-btn setzen inline-block, das nahm dem Icon den Abstand. */
.ensemble-btn.ensemble-btn-tickets--compact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    background: transparent;
    color: var(--ensemble-text, #1a1a1a);
    box-shadow: inset 0 0 0 1px currentColor;
}
.ensemble-btn.ensemble-btn-tickets--compact:hover {
    background: var(--ensemble-secondary, #2b2b3a);
    color: #fff;
    box-shadow: none;
    opacity: 1;
}
.ensemble-btn-tickets--compact .ensemble-btn-icon {
    display: block;
    width: 15px;
    height: 15px;
    flex: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ticket-Knopf, Serien-Hinweis, Knopf unten (01.11.2026)
   Ticket-Knopf ueberall gleich: Icon + „Tickets", dezent (.ensemble-btn-tickets--compact).
   Die einfache Card ist eine Spalte: Bild oben, Inhalt, die Knopfzeile unten
   buendig. Stehen Cards verschiedener Hoehe in einer Reihe (Flyer neben
   Querformat), liegen die Knoepfe trotzdem auf einer Linie.
   ═══════════════════════════════════════════════════════════════════════════ */
.ensemble-event-card--simple {
    display: flex;
    flex-direction: column;
}
.ensemble-event-card--simple > .ensemble-event-card-inner { flex: 1 1 auto; }
.ensemble-event-card--simple > .ensemble-event-actions {
    margin-top: auto;
    align-items: center;
    justify-content: space-between;
}
.ensemble-event-card--simple > .ensemble-event-actions .ensemble-btn-tickets { margin-left: auto; }

/* Serien-Hinweis „Jeden Samstag" (Orts- und Akteurseiten, Serien einmal). */
.ensemble-event-series {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--ensemble-muted-text, #6b6b76);
}
.ensemble-event-series__icon {
    width: 13px;
    height: 13px;
    flex: none;
}
.ensemble-event-card--list .ensemble-event-series,
.ensemble-event-card--compact .ensemble-event-series { margin-top: 2px; }
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple > .ensemble-event-actions .ensemble-event-series { color: #fff; }

/* Overlay: Lesbarkeit (04.11.2026). Die Akteurszeile hatte keine eigene
   Overlay-Regel und erbte die gedaempfte Textfarbe (grau auf Foto), der Tag
   im Datum die Primaerfarbe. Auf einem unbekannten Foto ist beides kaum zu
   lesen. Jetzt hell wie Zeit und Ort, dazu ein Schatten und ein dichterer
   Verlauf im unteren Teil, wo der Text steht. */
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-artists {
    color: rgba(255, 255, 255, 0.88);
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-day {
    color: #fff;
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple .ensemble-event-content {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 12px rgba(0, 0, 0, 0.35);
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple::after {
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.7) 40%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.1) 100%);
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple:hover::after {
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.94) 0%,
        rgba(0, 0, 0, 0.75) 45%,
        rgba(0, 0, 0, 0.35) 75%,
        rgba(0, 0, 0, 0.12) 100%);
}

/* Overlay mit Serien-Hinweis (04.11.2026): Die Aktionszeile hing nur rechts
   oben. Mit dem Hinweis „Cada miércoles, jueves …" wuchs sie nach links,
   auf schmalen Cards brach der Text um und lag unter dem Ticket-Button.
   Jetzt über die ganze Breite: Hinweis links (darf umbrechen), Button rechts. */
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple > .ensemble-event-actions:has(.ensemble-event-series) {
    left: var(--ensemble-card-padding, 18px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple > .ensemble-event-actions .ensemble-event-series {
    flex: 0 1 auto;
    min-width: 0;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple > .ensemble-event-actions .ensemble-btn-tickets {
    flex: none;
    width: auto; /* unter 480 px setzt _components.css jeden Button auf 100 % */
}
/* Kein Umbruch: Hinweis bricht in sich um, der Button bleibt rechts daneben
   (vorher rutschte er auf schmalen Cards in eine eigene, volle Zeile). */
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple > .ensemble-event-actions:has(.ensemble-event-series) {
    flex-wrap: nowrap;
}
/* Ticket-Button auf dem Bild: dunkle Glasfläche statt dunkler Kontur, sonst
   auf hellen Fotos kaum zu sehen. */
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple > .ensemble-event-actions .ensemble-btn.ensemble-btn-tickets--compact {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.ensemble-events-grid.ensemble-style-overlay .ensemble-event-card--simple > .ensemble-event-actions .ensemble-btn.ensemble-btn-tickets--compact:hover {
    background: var(--ensemble-secondary, #2b2b3a);
    box-shadow: none;
}

/* Nur-Flyer-Cards strecken sich nicht auf die Reihenhoehe (01.11.2026): Steht
   ein hoher Flyer (DIN lang) in der Reihe, bekamen die Nachbarn sonst eine
   grosse leere Flaeche unter dem Flyer. Knopf sitzt direkt unter dem Flyer. */
/* height: auto gegen height: 100 % aus _components.css. */
.ensemble-events-grid > .ensemble-event-card--flyer-only { align-self: start; height: auto; }