/* ============================================================
   com_ekevents – Frontend Styles
   Typografie (font-family, font-size, font-weight, p, h1–h6)
   wird zentral über Gridbox gesteuert. Hier nur Layout, Farben,
   Komponenten-Chrome.
   ============================================================ */

/* Body-Margin auf Nicht-Gridbox-Pages global auf 50px.
   Im Veranstalter-Bereich (.ek-dashboard / .ek-auth) wird es im Template
   selbst per inline-Style auf 0 zurückgesetzt. */
body:not(.com_gridbox) .body { margin: 50px !important; }

/* Joomla-Alert-Toasts: Success-Variante mit grünem Akzent statt hellblau. */
joomla-alert[type="success"] {
    background-color: #d4edda !important;
    border-color: #28a060 !important;
    color: #155724 !important;
}
joomla-alert[type="success"] header,
joomla-alert[type="success"] .alert-heading {
    color: #155724 !important;
}
joomla-alert[type="warning"] {
    background-color: #fff3cd !important;
    border-color: #f0c060 !important;
}
joomla-alert[type="error"],
joomla-alert[type="danger"] {
    background-color: #f8d7da !important;
    border-color: #c83232 !important;
    color: #0f172a !important;
}
joomla-alert[type="error"] *,
joomla-alert[type="danger"] * {
    color: #0f172a !important;
}
joomla-alert[type="error"]::part(alert),
joomla-alert[type="danger"]::part(alert),
joomla-alert[type="error"]::part(content),
joomla-alert[type="danger"]::part(content) {
    color: #0f172a !important;
}

/* Gridbox/Bootstrap-Style System-Messages (#system-message .alert.*).
   Schrift schwarz, leicht größer + 400 weight für gute Lesbarkeit.
   html-body-Prefix für höhere Specificity gegen Gridbox-Defaults. */
html body #system-message,
html body #system-message .alert,
html body #system-message .alert-heading,
html body #system-message .alert-message,
html body #system-message > div .alert-message,
html body #system-message .alert .close,
html body #system-message * {
    color: #000 !important;
    font-weight: 400 !important;
    font-size: 1.05rem !important;
}
html body #system-message .alert-heading {
    font-size: 1.15rem !important;
    font-weight: 500 !important;
}

/* Success-Toast: „Geschafft"-Text durch Check-Circle-Icon ersetzen.
   Greift sowohl auf Bootstrap-Style (#system-message .alert-success)
   als auch auf das Joomla-Custom-Element (joomla-alert[type="success"]). */
html body #system-message .alert-success .alert-heading,
joomla-alert[type="success"] .alert-heading {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 0 .5rem !important;
    padding: 0 !important;
    text-align: center !important;
}
html body #system-message .alert-success .alert-heading::before,
joomla-alert[type="success"] .alert-heading::before {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0 auto;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155724' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8 12l3 3 5-6'/></svg>") center/contain no-repeat;
}

/* ─── Seitenwechsel-Fade ─────────────────────────────────── */
.ek-events-layout,
.ek-detail {
    animation: ekFadeIn .15s ease;
    transition: opacity .12s ease;
}
.ek-events-layout.is-leaving,
.ek-detail.is-leaving {
    opacity: 0;
}
@keyframes ekFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Fade-Curtain (wird per JS ans body angefügt). Farbe frei anpassbar. */
.ek-fade-curtain {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--ek-bg);   /* z. B. #f7f9fc – hier Wunschfarbe */
    /* background: #031d5b; */
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}
body.is-leaving .ek-fade-curtain {
    opacity: 1;
    z-index: 9998;
}

/* ─── Design-Variablen (zentral) ──────────────────────────── */
:root {
    --ek-bg:              #1e293b;   /* Dark Slate (passend zum gridbox-Bg) */
    --ek-card:            #eaeef4;   /* slate-100, einen Tick dunkler als fast-weiß */
    --ek-border:          #e2e8f0;   /* heller Border innerhalb Cards */
    --ek-text:            #0f172a;   /* text in Cards – Slate-900 */
    --ek-muted:           #64748b;   /* Slate-500 – in Cards */
    --ek-muted-light:     #94a3b8;   /* Slate-400 */
    --ek-accent:          #0d9488;   /* Teal */
    --ek-accent-hover:    #14b8a6;   /* Teal heller (auf dunklem Bg sichtbarer) */
    --ek-accent-soft:     #ccfbf1;   /* Teal ~10 % */
    --ek-family:          #4d7c5f;
    --ek-stadt:           #3b6ba5;
    --ek-festival:        #a06832;
    --ek-img-bg:          #e2e8f0;   /* Slate-200 */
    --ek-img-icon:        #94a3b8;
    --ek-intro:           #334155;   /* Slate-700 */

    /* Texte auf dem dunklen Seiten-Hintergrund (außerhalb der Cards) */
    --ek-on-bg-text:      #f8fafc;   /* Slate-50 – fast weiß */
    --ek-on-bg-muted:     #cbd5e1;   /* Slate-300 – deutlich heller als vorher */

    /* Inner-Card- und Form-Token (Light-Default — wird im Veranstalter-Bereich
       per Scope-Override auf Backend-Dark umgeschaltet, s.u. .ek-dashboard/.ek-auth) */
    --ek-card-inner:      #ffffff;   /* innere Cards/Sections auf .ek-card */
    --ek-input-bg:        #fcfcfc;   /* Form-Input bg */
    --ek-input-bg-focus:  #ffffff;
    --ek-input-text:      #0f172a;
    --ek-on-card-text:    #334155;   /* Fließtext auf .ek-card-inner */
}

/* ─── Veranstalter-Bereich: Backend-Dark-Theme ─────────────────
   Frontend-Login/Registrierung/Dashboard/EditLocation übernehmen
   das Backend-Farbschema (analog administrator/.../admin-edit-section.css).
   Variablen werden hier scoped umgesetzt — alle Regeln, die var(--ek-*)
   nutzen, ziehen automatisch nach. */
.ek-dashboard,
.ek-auth {
    --ek-card:           #1e2530;
    --ek-card-inner:     #1e2530;   /* gleich wie outer — Sections nur via Border separiert */
    --ek-input-bg:       #253040;   /* heller als Section, damit Inputs sichtbar abstehen */
    --ek-input-bg-focus: #2a3850;
    --ek-input-text:     #ffffff;   /* User-Wunsch: Eingabetext weiß für Lesbarkeit */
    --ek-text:           #e4edf6;
    --ek-border:         #3a4a5c;
    --ek-muted:          #9ab0c4;
    --ek-on-card-text:   #cbd5e1;
}

/* ─── Profil-Form-Styles (shared) ──────────────────────────────
   Wird von Profil-Tab (`tmpl/dashboard/default.php`) UND
   editLocation-Layout (`tmpl/dashboard/editLocation.php`) genutzt.
   Alle Selektoren mit `.ek-dashboard`-Prefix → Spezifität 0,0,2,1+,
   schlägt Gridbox-Baseline-Rules wie `input[type="text"] { background:#fff;
   width:15.625rem }` (gridbox.css L263-285), die sonst die Felder hellgrau
   und schmal machen würden. */
/* Spacing-Werte ans Backend-Edit-Layout angeglichen — kompakter,
   weil das alte Frontend-Layout (1rem Form-Gap + 1.25rem Section-Padding +
   .95rem H3 + 1rem H3-Margin + .85rem Grid-Gap) sehr großzügig war. */
.ek-dashboard .ek-profile-form { display: flex; flex-direction: column; gap: .75rem; }
.ek-dashboard .ek-profile-section {
    background: var(--ek-card-inner, #fff);
    border: 1px solid var(--ek-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.ek-dashboard .ek-profile-section h3 {
    margin: 0 0 .55rem;
    font-size: .82rem;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .09em;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--ek-border);
    line-height: 1.2;
}
.ek-dashboard .ek-profile-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .65rem 1.25rem; }
.ek-dashboard .ek-profile-field { display: flex; flex-direction: column; gap: .25rem; }
.ek-dashboard .ek-profile-field span { font-size: .85rem; color: #fff; letter-spacing: .05em; font-weight: 500; }
.ek-dashboard .ek-profile-field-hint {
    color: #fff;
    font-size: .92rem;
    font-weight: 400;
    letter-spacing: .04em;
    margin-top: .35rem;
    line-height: 1.5;
}
.ek-dashboard .ek-profile-field-hint a:hover,
.ek-dashboard .ek-profile-field-hint a:focus { color: #ffffff; }
.ek-dashboard .ek-profile-field input::placeholder { font-size: .85rem; opacity: .6; }
.ek-dashboard .ek-profile-field span em {
    color: #ef4848;
    font-style: normal;
    font-size: 1.7em;
    font-weight: 700;
    margin-left: .2em;
    line-height: 1;
    vertical-align: -.15em;
}
.ek-dashboard .ek-profile-field input {
    width: 100%;
    box-sizing: border-box;
    padding: .45rem .75rem;
    border: 1px solid var(--ek-border);
    border-radius: 4px;
    font-size: .95rem;
    background: var(--ek-input-bg, #fcfcfc);
    color: var(--ek-input-text, #0f172a);
    /* Gridbox setzt height: 3rem + line-height 1.25rem → unsere Padding-
       basierten Inputs würden sonst zu hoch wirken. Reset hier explizit. */
    height: auto;
    line-height: 1.4;
    margin-bottom: 0;
}
.ek-dashboard .ek-profile-field input:focus,
.ek-dashboard .ek-profile-field textarea:focus,
.ek-dashboard .ek-profile-field select:focus {
    outline: none;
    border-color: var(--ek-accent);
    background: var(--ek-input-bg-focus, #fff);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .25);
}
/* Textarea + Select gleichen Look wie Input — Gridbox-Defaults überschreiben. */
.ek-dashboard .ek-profile-field textarea,
.ek-dashboard .ek-profile-field select {
    width: 100%;
    box-sizing: border-box;
    padding: .55rem .8rem;
    border: 1px solid var(--ek-border);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--ek-input-bg, #fcfcfc);
    color: var(--ek-input-text, #0f172a);
    line-height: 1.4;
    margin-bottom: 0;
    height: auto;
}
.ek-dashboard .ek-profile-field textarea { resize: vertical; min-height: 6rem; }
.ek-dashboard .ek-profile-field select[multiple] { padding: .35rem; }
.ek-dashboard .ek-profile-field select[multiple] option {
    padding: .3rem .5rem;
    border-radius: 4px;
}
.ek-dashboard .ek-profile-field optgroup {
    color: var(--ek-muted);
    font-style: italic;
    font-size: .85rem;
}
/* Choices.js Optgroup-Headings im Dropdown (z. B. „Meine Orte" / „Pool geteilt"). */
.ek-dashboard .ek-profile-field .choices__heading {
    color: var(--ek-muted, #9ab0c4);
    font-weight: 400;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom-color: var(--ek-border, #3a4a5c);
    padding: .45rem .8rem .3rem;
}
/* Auswahlbare Items im Dropdown (Locations etc.) — leichter, mit Letter-Spacing. */
.ek-dashboard .ek-profile-field .choices__list--dropdown .choices__item--selectable {
    font-weight: 400;
    color: #f5faff;
    letter-spacing: .03em;
}

/* Choices.js — Dark-Theme-Overrides für die Multi-Selects (Kategorien,
   Familien-Typen) im Submit- und EditEvent-Form. Spezifität via
   `.ek-dashboard .ek-profile-field` damit's gegen Choices-Default greift. */
.ek-dashboard .ek-profile-field .choices { margin-bottom: 0; }
.ek-dashboard .ek-profile-field .choices__inner {
    background: var(--ek-input-bg, #253040);
    border: 1px solid var(--ek-border, #3a4a5c);
    border-radius: 6px;
    color: var(--ek-input-text, #d0dae8);
    /* Symmetrisches Padding + Flex damit der gecloned Search-Input mit
       seinem Placeholder-Text vertikal mittig sitzt. border-box damit Padding
       + Border nicht über die Spaltenbreite hinausragen. */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 2.6rem;
    padding: .35rem .55rem;
    font-size: 1rem;
}
.ek-dashboard .ek-profile-field .choices.is-focused .choices__inner {
    border-color: var(--ek-accent);
    background: var(--ek-input-bg-focus, #2a3850);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .25);
}
.ek-dashboard .ek-profile-field .choices__list--multiple .choices__item:not([data-placeholder]) {
    background: #2e4a6a;
    border-color: #3a6090;
    color: #e0eaf5;
    font-weight: 400;
    font-size: .9rem;
    line-height: 1.2;
    padding: .1rem .55rem;
    margin: .1rem .25rem .1rem 0;
    border-radius: 4px;
}
.ek-dashboard .ek-profile-field .choices__list--multiple .choices__item .choices__button {
    border-left: 1px solid rgba(255,255,255,.25);
    margin-left: .4rem;
    padding-left: .55rem;
    opacity: .8;
}
.ek-dashboard .ek-profile-field .choices__list--multiple .choices__item .choices__button:hover { opacity: 1; }
.ek-dashboard .ek-profile-field .choices__input {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ek-input-text);
    margin-bottom: 0;
    padding: .25rem 0;
    font-size: 1rem;
    /* Gridbox styled input[type="search"] mit border + height + width — hier wegnehmen */
    border: 0 !important;
    outline: 0 !important;
    height: auto !important;
    width: auto !important;
    box-shadow: none !important;
}
/* Sobald mindestens ein Item ausgewählt ist, den gecloned Search-Input
   komplett kollabieren — Choices.js setzt sonst per JS eine Breite, die dem
   Placeholder-Text entspricht, und reserviert auch dann noch Platz, wenn
   der Text via CSS unsichtbar ist. Auf Focus expandiert er wieder zum Tippen. */
.ek-dashboard .ek-profile-field .choices__list--multiple:has(.choices__item:not([data-placeholder])) ~ .choices__input--cloned,
.ek-dashboard .ek-profile-field .choices__list--multiple:has(.choices__item:not([data-placeholder])) .choices__input--cloned,
.ek-dashboard .ek-profile-field .choices__list--multiple .choices__item:not([data-placeholder]) ~ .choices__input--cloned {
    width: 1px !important;
    min-width: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: transparent;
}
.ek-dashboard .ek-profile-field .choices__list--multiple:has(.choices__item:not([data-placeholder])) ~ .choices__input--cloned:focus,
.ek-dashboard .ek-profile-field .choices__list--multiple:has(.choices__item:not([data-placeholder])) .choices__input--cloned:focus,
.ek-dashboard .ek-profile-field .choices__list--multiple .choices__item:not([data-placeholder]) ~ .choices__input--cloned:focus {
    width: 100px !important;
    color: var(--ek-input-text);
}
.ek-dashboard .ek-profile-field .choices__list--dropdown {
    background: #1e2530;
    border: 1px solid var(--ek-border);
    border-radius: 6px;
}
.ek-dashboard .ek-profile-field .choices__list--dropdown .choices__item--selectable {
    color: var(--ek-input-text);
    padding: .15rem .8rem;
    font-size: .92rem;
}
.ek-dashboard .ek-profile-field .choices__list--dropdown .choices__item--selectable.is-highlighted,
.ek-dashboard .ek-profile-field .choices__list--dropdown .choices__item--selectable.is-selected {
    background: #2e4a6a;
    color: #fff;
}
/* Bereits ausgewähltes Item ohne Hover — leicht abgesetzt aber nicht weiß */
.ek-dashboard .ek-profile-field .choices__list--dropdown .choices__item--selectable.is-selected:not(.is-highlighted) {
    background: #1a2a40;
    color: var(--ek-input-text);
}
/* Placeholder ohne Pill-Optik — Choices.js v11.2.1 setzt für das Placeholder-
   Item BEIDES: Klasse `.choices__placeholder` UND Attribut `data-placeholder=""`.
   Choices.js' eigene CSS-Regel `.choices__list--multiple .choices__item` hat
   high-specificity und gibt allen Items (auch dem Placeholder) `background-
   color`, `border` und `border-radius`. Hier mit !important + `background-color`
   (statt nur `background`) explizit überschreiben. */
.ek-dashboard .ek-profile-field .choices__placeholder,
.ek-dashboard .ek-profile-field .choices__item[data-placeholder],
.ek-dashboard .ek-profile-field .choices__list--multiple .choices__item.choices__placeholder,
.ek-dashboard .ek-profile-field .choices__list--multiple .choices__item[data-placeholder] {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ek-muted, #9ab0c4) !important;
    opacity: .7 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ek-dashboard .ek-profile-field .choices__input::placeholder {
    color: #f5faff;
    opacity: .8;
    font-weight: 400;
    letter-spacing: .05em;
}
/* Native multiple-Select fällt weg, sobald Choices initialisiert ist —
   solange das JS noch lädt, sieht man kein Box-Resize-Flackern. */
.ek-dashboard .ek-profile-field select[multiple] { min-height: 6rem; }
.ek-dashboard .ek-col-2  { grid-column: span 12; }
.ek-dashboard .ek-col-3  { grid-column: span 12; }
.ek-dashboard .ek-col-4  { grid-column: span 12; }
.ek-dashboard .ek-col-5  { grid-column: span 12; }
.ek-dashboard .ek-col-6  { grid-column: span 12; }
.ek-dashboard .ek-col-7  { grid-column: span 12; }
.ek-dashboard .ek-col-9  { grid-column: span 12; }
.ek-dashboard .ek-col-10 { grid-column: span 12; }
.ek-dashboard .ek-col-12 { grid-column: span 12; }
@media (min-width: 600px) {
    .ek-dashboard .ek-col-2  { grid-column: span 2;  }
    .ek-dashboard .ek-col-3  { grid-column: span 3;  }
    .ek-dashboard .ek-col-4  { grid-column: span 4;  }
    .ek-dashboard .ek-col-5  { grid-column: span 5;  }
    .ek-dashboard .ek-col-6  { grid-column: span 6;  }
    .ek-dashboard .ek-col-7  { grid-column: span 7;  }
    .ek-dashboard .ek-col-9  { grid-column: span 9;  }
    .ek-dashboard .ek-col-10 { grid-column: span 10; }
    .ek-dashboard .ek-col-12 { grid-column: span 12; }
}
/* Koords-Row: Lat/Lng/Geocode-Button auf einer Linie unten ausrichten
   (analog Backend-`row g-3 align-items-end`). */
.ek-dashboard .ek-profile-grid--coords { align-items: end; }
.ek-dashboard .ek-profile-grid--coords .ek-geo-action { gap: 0; }
.ek-dashboard .ek-profile-grid--coords .ek-geo-action .btn {
    background: transparent;
    border: 1px solid #28a060;
    color: #28a060;
    padding: .55rem .8rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
}
.ek-dashboard .ek-profile-grid--coords .ek-geo-action .btn:hover:not(:disabled) {
    background: #28a060;
    color: #fff;
}
.ek-dashboard .ek-profile-actions { display: flex; justify-content: flex-end; padding-top: .25rem; }

/* Event-Form-Layout: 2-Spalten 2fr/1fr analog Backend col-lg-8/col-lg-4. */
.ek-dashboard .ek-event-grid-2col { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 900px) {
    .ek-dashboard .ek-event-grid-2col { grid-template-columns: 2fr 1fr; align-items: start; }
}
.ek-dashboard .ek-event-col-left,
.ek-dashboard .ek-event-col-right { display: flex; flex-direction: column; gap: .75rem; }
/* Section-Header (für Locations / Submissions / Events / Submit / editLocation) */
.ek-dashboard .ek-dashboard-section-head { margin-bottom: 1.25rem; }
.ek-dashboard .ek-dashboard-section-head h2 { margin: 0 0 .25rem; font-size: 1.3rem; font-weight: 500; color: #fff; letter-spacing: .04em; }
.ek-dashboard .ek-dashboard-section-hint   { margin: 0; color: #fff; font-size: .92rem; letter-spacing: .04em; font-weight: 500; }
/* Outer-Card auch für editLocation (kommt im default.php-Block sonst nicht mit). */
.ek-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--ek-card, #eaeef4);
    color: var(--ek-text, #0f172a);
    border: 1px solid var(--ek-border, transparent);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.ek-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ek-border, #e2e8f0);
}
.ek-dashboard-header h1 { margin: 0; font-size: 1.7rem; font-weight: 400; color: #fff; }
body .body:has(.ek-dashboard) { margin: 50px 0 !important; }

/* Abmelden-Button rechts in der Dashboard-Kopfzeile.
   Dezent (Outline-Optik), damit er nicht mit den Action-Buttons konkurriert. */
.ek-dashboard-logout { margin: 0; }
.ek-dashboard-logout-btn {
    appearance: none;
    background: transparent;
    border: 1px solid #5a7a9a;
    color: #cbd5e1;
    padding: .4rem 1rem;
    border-radius: 6px;
    font-size: .85rem;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ek-dashboard-logout-btn:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border-color: #7a9aba;
}

/* ─── com_ekevents Site-Header anpassen ───────────────────────
   Auf com_ekevents-Seiten (Dashboard, Event-Listen, Detail) hat die
   Body-Klasse `com_ekevents`. Der Gridbox-Header ist per Default hell —
   das bricht den Dark-Look des Bereichs. Hier auf transparent + helle
   Schrift drücken. */
body.com_ekevents header.header,
body.com_ekevents header.header .ba-item,
body.com_ekevents header.header .ba-grid-row,
body.com_ekevents header.header .ba-grid-column,
body.com_ekevents header.header .ba-section {
    background: transparent !important;
    background-color: transparent !important;
}
body.com_ekevents header.header,
body.com_ekevents header.header a:not(.btn):not(.ba-button),
body.com_ekevents header.header li,
body.com_ekevents header.header span,
body.com_ekevents header.header .main-menu li > a {
    color: #f8fafc !important;
}
body.com_ekevents header.header a:not(.btn):not(.ba-button):hover,
body.com_ekevents header.header .main-menu li.active > a,
body.com_ekevents header.header .main-menu li.current > a {
    color: #5eead4 !important;
}

/* Dashboard vertikal mittig auf der Seite. Die Gridbox-Component-Spalte
   (`.ba-col-…`) wird zur Flex-Column mit Mindesthöhe; die `.ek-dashboard`
   bekommt `margin: auto` und schwebt damit zentriert. Bei langem Inhalt
   (Edit-Forms, lange Listen) degeneriert margin-auto zu 0 → Top-Anchored,
   normales Scroll. */
body.com_ekevents [class*="ba-col-"]:has(> .ek-dashboard) {
    min-height: calc(100vh - 8rem);
    display: flex;
    flex-direction: column;
}
body.com_ekevents [class*="ba-col-"]:has(> .ek-dashboard) > .ek-dashboard {
    margin-top: auto;
    margin-bottom: auto;
}

/* ─── Event-Detail: Hauptlayout ───────────────────────────── */
.ek-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* ─── Zurück-Bar (über der Hero-Card, linksbündig) ──────── */
.ek-back-bar {
    display: flex;
    justify-content: flex-start;
    padding: 0 .25rem;
}

/* ─── Hero-Card (einzige Card auf dieser Seite) ────────────── */
.ek-hero {
    background: var(--ek-card);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;       /* Bild + Card-Rundung sauber clippen */
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
}
.ek-hero-row {
    display: grid;
    grid-template-columns: 6fr 6fr;     /* 50/50 – war 3fr/9fr, dann 4fr/8fr */
    gap: 2rem;
    align-items: center;
}
.ek-hero-img-col { align-self: start; }
.ek-hero-meta    { text-align: center; }
.ek-hero-meta .ek-tags { margin-top: 1rem; }

@media (max-width: 720px) {
    .ek-hero { padding: 1.1rem; }
    .ek-hero-row { grid-template-columns: 1fr; gap: 1rem; }
}

/* ─── Hero-Blend-Variante (optional, Test) ─────────────────
   Bild fadet rechts ins Card-Background, Meta-Block überlappt
   leicht den Bildrand. Über die Klasse `ek-hero--blend` am
   Hero-Section-Element ein-/ausschaltbar (Template: edit-tmpl). */
.ek-hero--blend .ek-hero-row {
    grid-template-columns: 5fr 5fr;
    gap: 0;
    align-items: center;
}
.ek-hero--blend .ek-hero-img-col { align-self: stretch; }
.ek-hero--blend .ek-img {
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
            mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.ek-hero--blend .ek-hero-meta {
    margin-left: -10%;
    padding: 1.25rem 1.5rem;
    position: relative;
    z-index: 1;
}
@media (max-width: 720px) {
    .ek-hero--blend .ek-hero-row { grid-template-columns: 1fr; gap: 0; }
    .ek-hero--blend .ek-img {
        -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
                mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    }
    .ek-hero--blend .ek-hero-meta { margin-left: 0; margin-top: -2.5rem; padding: 0 1rem 1.25rem; }
}

/* ─── Content-Bereich (transparent auf dunklem BG) ─────────── */
.ek-content {
    display: grid;
    grid-template-columns: 3fr 9fr;
    gap: 0;
    align-items: stretch;
    color: var(--ek-on-bg-text);
}
.ek-content-side { padding: 0 1.75rem 0 .5rem; }
.ek-content-main {
    padding: 0 .5rem 0 1.75rem;
    border-left: 1px solid rgba(255, 255, 255, .2);
}
.ek-content-side > * + *,
.ek-content-main > * + * { margin-top: 1.5rem; }

@media (max-width: 720px) {
    .ek-content { grid-template-columns: 1fr; gap: 1.25rem; }
    .ek-content-side { padding: 0; }
    .ek-content-main { padding: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 1.25rem; }
}

/* ─── Bild ─────────────────────────────────────────────────── */
.ek-img {
    aspect-ratio: 3 / 2;                /* Pipeline-natives Detail-Format */
    background: var(--ek-img-bg);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ek-img-icon);
    font-size: 3rem;
}
/* Im Hero läuft das Bild flush an die Card-Kanten – Card hat overflow:hidden
   + border-radius:14px, also keine eigene Radius am Bild nötig */
.ek-hero .ek-img { border-radius: 0; }
.ek-img { position: relative; }
.ek-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.ek-img-caption {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .85rem;
    line-height: 1.3;
    padding: .2rem .6rem;
    border-radius: 4px;
    max-width: calc(100% - 1rem);
    pointer-events: none;
}

/* ─── Titel / Datum / Uhrzeit (zentriert, in Hero) ──────────
   .ek-title (h1) ohne Typo-Overrides – kommt aus Gridbox.
   text-align center und Farbe sind Kontext (Hero-Card auf hell). */
.ek-title { margin: 0 0 .6rem; color: var(--ek-text); text-align: center; font-size: 1.9rem; line-height: 1.4; text-shadow: 2px 2px 0 rgba(0, 0, 0, .2); }
/* Festival-Name direkt unter dem H1 im Detail-Hero */
.ek-festival-line {
    text-align: center;
    color: var(--ek-festival, #a06832);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin: -0.3rem 0 .8rem;
}
.ek-date  { color: var(--ek-text); text-align: center; margin-bottom: .15rem; }
.ek-time  { color: var(--ek-muted); text-align: center; }
.ek-hero-loc { color: var(--ek-muted); text-align: center; margin-top: .15rem; }

/* ─── Zurück-Button (in Hero, linksbündig) ────────────────── */
.ek-back-btn {
    display: inline-block;
    padding: .6rem 1.4rem;
    background: #fff;
    border: none;
    border-radius: 999px;
    color: var(--ek-accent);
    font-weight: 500;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .25);
    transform: translateY(-2px);
    transition: box-shadow .2s ease, transform .2s ease, color .15s;
}
.ek-back-btn:hover {
    color: var(--ek-text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transform: translateY(0);
}

/* ─── Tags (Soft-Pills, wie Row-Badges der Liste) ─────────── */
.ek-tags { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.ek-tag {
    display: inline-block;
    padding: .35rem .9rem;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ek-col, var(--ek-muted)) 18%, white);
    color: var(--ek-text);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.ek-tag.fam      { --ek-col: var(--ek-family); }
.ek-tag.sev      { --ek-col: var(--ek-stadt); }
.ek-tag.festival { --ek-col: var(--ek-festival); }

/* ─── Info-Blöcke (Tickets, Veranstaltungsort) ─────────────── */
/* Im Content-Bereich stehen die Texte auf dem dunklen Seiten-BG,
   daher helle on-bg-Farben statt der dunklen Card-Farben */
.ek-info-label {
    display: block;
    background: rgba(255, 255, 255, .1);
    color: var(--ek-on-bg-text);
    padding: .55rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
    margin-bottom: .9rem;
}
.ek-info-value { font-size: 1rem; color: var(--ek-on-bg-text); line-height: 1.55; text-align: left; }

.ek-tickets-grid {
    display: grid;
    grid-template-columns: 2fr 10fr;
    gap: .1rem .5rem;
    margin-top: .25rem;
}
.ek-tickets-grid .ek-tickets-label { font-size: 1rem; font-weight: 300 !important; color: var(--ek-on-bg-muted); line-height: 1.55; }
.ek-tickets-grid .ek-tickets-value { font-size: 1rem; font-weight: 300 !important; color: var(--ek-on-bg-text); line-height: 1.55; }
/* Inline-Tags innerhalb des Werts (z. B. <p> aus dem Editor-gespeicherten
   eintritt-Feld) sollen die Container-Typo erben, statt Gridbox-Defaults
   für Block-Elemente mit eigener margin/font-size mitzubringen. */
.ek-tickets-grid .ek-tickets-value p,
.ek-tickets-grid .ek-tickets-value strong,
.ek-tickets-grid .ek-tickets-value em,
.ek-tickets-grid .ek-tickets-value span,
.ek-tickets-grid .ek-tickets-value div {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.ek-tickets-btn-wrap { margin-top: 1.6rem; text-align: center; }
.ek-tickets-btn {
    display: inline-block;
    padding: .35rem 1.4rem;
    background: var(--ek-accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    font-size: .92rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .25);
    transform: translateY(-2px);
    transition: box-shadow .2s ease, transform .2s ease, background .15s;
}
.ek-tickets-btn:hover {
    background: var(--ek-accent-hover);
    color: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transform: translateY(0);
}

/* ─── Karte ───────────────────────────────────────────────── */
.ek-map { height: 240px; border-radius: 10px; border: none; overflow: hidden; }
.ek-map-links { font-size: .88rem; margin-top: .6rem; display: flex; gap: 1rem; justify-content: center; }
.ek-map-links a { color: var(--ek-accent-hover); text-decoration: none; font-weight: 500; }
.ek-map-links a:hover { color: var(--ek-on-bg-text); text-decoration: underline; }

/* ─── Beschreibung (auf dunklem BG) ───────────────────────── */
/* font-size + family + weight + line-height kommen aus Gridbox-`p` */
.ek-desc {
    color: #fff;
}
/* Auch alle Kind-Elemente (p, span, strong, em, li …) auf weiß –
   notwendig, weil Joomla-Editor-Inhalte eigene Farben mitbringen können */
.ek-desc * { color: inherit; }
.ek-desc a { color: var(--ek-accent-hover); }
.ek-desc p { margin: 0 0 1em; }
.ek-desc p:last-child { margin-bottom: 0; }

/* ─── Weitere Termine (Mini-Card, weißer BG auf dunklem Grund) */
.ek-dates { margin-top: 1.75rem; max-width: 70ch; }
.ek-dates-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .1);
    color: var(--ek-on-bg-text);
    padding: .55rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
    margin: 0 0 .9rem;
}
.ek-dates-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    padding: .1em .45em;
    border-radius: 999px;
    background: var(--ek-accent);
    color: #fff;
    font-size: .78em;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: none;
    line-height: 1.4;
}
.ek-dates-list {
    background: transparent;
}
.ek-dates-list a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 1.1rem;
    text-decoration: none;
    color: var(--ek-on-bg-text);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 1rem;
    line-height: 1.25;
    position: relative;
    transition: color .15s, padding-left .15s;
}
.ek-dates-list a::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ek-accent-hover);
    opacity: 0;
    transition: opacity .15s;
}
.ek-dates-list a:last-child { border-bottom: 0; }
.ek-dates-list a:hover {
    color: var(--ek-accent-hover);
    padding-left: 1.4rem;
}
.ek-dates-list a:hover::before { opacity: 1; }
.ek-dates-list .past {
    color: var(--ek-on-bg-muted);
    text-decoration: line-through;
    opacity: .55;
}
.ek-dates-list .ek-dates-hidden { display: none; }

.ek-dates-toggle-wrap { margin-top: .9rem; text-align: center; }
.ek-dates-toggle {
    display: inline-block;
    padding: .6rem 1.4rem;
    background: #fff;
    border: none;
    border-radius: 999px;
    color: var(--ek-accent);
    cursor: pointer;
    font-weight: 500;
    font-size: .92rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .25);
    transform: translateY(-2px);
    transition: box-shadow .2s ease, transform .2s ease, color .15s;
}
.ek-dates-toggle:hover {
    color: var(--ek-text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transform: translateY(0);
}

/* ============================================================
   Events-Liste
   ============================================================ */

/* ─── Seitentitel (H1) – ganze Breite, oberhalb von Karte/Liste.
   Typografie (size, weight, family) kommt aus Gridbox – hier nur
   Kontext-Overrides (Farbe für dunklen BG, Outer-Margin) */
.ek-page-title {
    color: var(--ek-on-bg-text);
    margin: 0 0 1.5rem;
}
h1 {
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .2);
}



/* ============================================================
   V2-Layout: Hero + horizontale Filter + Liste/Sticky-Map
   ============================================================ */

/* Hero-Block mit H1-Overlay (Phase 1: Gradient-Platzhalter, später Bild) */
.ek-list-hero {
    position: relative;
    min-height: 420px;
    /* Full-Width-Breakout aus dem Gridbox-Container: 100vw mit negativem
       margin-left, der das Element aus dem max-width-Wrapper rauszieht. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 2rem;
    border-radius: 0;
    overflow: hidden;
    /* Hintergrund-Bild + dunkler Gradient-Overlay (für H1-Lesbarkeit) */
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .55) 100%),
        url('/images/header/veranstaltungen.jpg') center center / cover no-repeat,
        var(--ek-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}
/* Inner-Container: hält die max-width, lässt den Hero den Full-Width-Background.
   12-Grid einspaltig: H1, Festival-Range und ggf. CTA-Modul stapeln vertikal mittig.
   Typografie des H1 kommt zentral aus Gridbox — wir setzen hier nur Farbe/Layout. */
.ek-list-hero-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.5rem;
}
.ek-list-hero-aside {
    color: #fff;
    width: 100%;
    max-width: 640px;
}
.ek-list-page-title {
    color: var(--ek-on-bg-text);
    margin: 0;
    text-align: center;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .2);
}

/* Content-Container unter dem Hero – mit Frame analog zu v1 (.ek-page-frame) */
.ek-list-content {
    margin: 0 auto 50px;
    padding: 1.25rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .45);
}

/* Horizontale Filter-Leiste – Visuelles Matching mit v1-Filter-Sidebar:
   helle Card, dezenter Schatten, runder Radius. Sticky-Verhalten ist v2-spezifisch
   (top: 0 statt 1rem; Form-Control-Light-Look kommt aus dem geteilten :is()-Block) */
.ek-list-filter-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 1.5rem;
    padding: 1rem 0;
    background: transparent;
    border: none;
    transition: background .25s ease, backdrop-filter .25s ease, padding .25s ease;
}
/* Sticky-„stuck"-Zustand: Padding seitlich + dunkles Backdrop für Lesbarkeit */
.ek-list-filter-bar.is-stuck {
    padding: 1rem 1.25rem;
}
/* Sticky-„stuck"-Zustand (per JS via IntersectionObserver gesetzt) –
   dunkel + minimal transparent, damit Karten beim Scrollen nicht durchscheinen */
.ek-list-filter-bar.is-stuck {
    background: rgba(15, 23, 42, .9);
    backdrop-filter: blur(8px);
}
/* Sentinel: 1px hohes Element direkt über der Bar – wenn es out-of-view geht,
   ist die Bar gestuck. Visuell unsichtbar. */
.ek-list-filter-sentinel {
    height: 1px;
    margin-bottom: -1px;
    pointer-events: none;
}
.ek-list-filter-row {
    display: grid;
    /* minmax(0, 1fr) statt 1fr → Spalten dürfen kleiner als ihr Content werden,
       sonst dehnen breite Choices-Dropdowns das Grid und werden rechts abgeschnitten */
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
    gap: .75rem;
    align-items: start;        /* top-align: Felder mit margin-bottom rutschen sonst nach oben */
}
.ek-list-filter-row--secondary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--ek-border);
    /* Smooth Akkordeon: max-height groß genug für jeden realistischen Inhalt;
       beim Schließen schnappt der Inhalt auf 0 zurück, alle Außenabstände auch.
       overflow: visible im offenen Endzustand, damit Choices-Dropdowns aus
       dem Container rausragen können (wird per JS während Animation auf hidden
       geschaltet, sonst würde das Akkordeon-Clipping nicht funktionieren). */
    overflow: visible;
    max-height: 800px;
    opacity: 1;
    transition: max-height 0.3s ease,
                opacity 0.2s ease,
                margin-top 0.3s ease,
                padding-top 0.3s ease,
                border-top-width 0.3s ease;
}
.ek-list-filter-row--secondary.is-animating,
.ek-list-filter-row--secondary.is-collapsed {
    overflow: hidden;
}
.ek-list-filter-row--secondary.is-collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top-width: 0;
    pointer-events: none;
}
/* Choices-Wrapper darf in der Grid-Cell schrumpfen, sonst overflow nach rechts */
.ek-list-filter-bar .choices,
.ek-list-filter-bar .ek-filter-field { min-width: 0; }

/* Vereinheitlichung Filter-Felder.
   Inputs (replace-Elemente) zentrieren Text via line-height,
   Choices__inner (div) zentriert via flex. */
.ek-list-filter-bar .form-control,
.ek-list-filter-bar .form-select,
.ek-list-filter-bar .flatpickr-input,
.ek-list-filter-bar input.flatpickr-alt-input,
.ek-list-filter-bar .choices__inner {
    border-radius: 8px !important;
    height: 42px !important;
    min-height: 42px !important;
    background-color: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
.ek-list-filter-bar .form-control:focus,
.ek-list-filter-bar .form-select:focus,
.ek-list-filter-bar .flatpickr-input:focus,
.ek-list-filter-bar .choices.is-focused .choices__inner,
.ek-list-filter-bar .choices.is-open .choices__inner {
    background-color: rgba(255, 255, 255, .14) !important;
    border-color: var(--ek-accent, #0d9488) !important;
}
/* Ausgewählter Wert im Single-Select + Multi-Tags weiß */
.ek-list-filter-bar .choices__list--single .choices__item,
.ek-list-filter-bar .choices__list--multiple .choices__item {
    color: #fff !important;
}
/* Placeholder-Item im Multi-Select: kein Tag-Look (Border/Background weg).
   Choices.js v11.2.1 setzt für das Placeholder-Item Klasse `.choices__placeholder`
   UND Attribut `data-placeholder=""`. Beide Varianten abdecken, mit
   `background-color` (statt nur `background`) und `!important`. */
.ek-list-filter-bar .choices__placeholder,
.ek-list-filter-bar .choices__item[data-placeholder],
.ek-list-filter-bar .choices__list--multiple .choices__item.choices__placeholder,
.ek-list-filter-bar .choices__list--multiple .choices__item[data-placeholder] {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .55) !important;
    opacity: 1 !important;
}
/* Dropdown-Liste: dunkel mit weißem Text */
.ek-list-filter-bar .choices__list--dropdown,
.ek-list-filter-bar .choices__list[aria-expanded] {
    background: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    color: #fff !important;
}
.ek-list-filter-bar .choices__list--dropdown .choices__item,
.ek-list-filter-bar .choices__list[aria-expanded] .choices__item {
    color: #fff !important;
}
.ek-list-filter-bar .choices__list--dropdown .choices__item--selectable.is-highlighted,
.ek-list-filter-bar .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(255, 255, 255, .12) !important;
}
/* Single-Select-Dropdown: die bereits gewählte Option bekommt von Choices.js
   aria-selected="true" + .is-highlighted (Auto-Highlight beim Öffnen) → ohne
   Override zu hell hinterlegt, weißer Text wird unlesbar. */
.ek-list-filter-bar .choices[data-type*="select-one"] .choices__list--dropdown .choices__item[aria-selected="true"],
.ek-list-filter-bar .choices[data-type*="select-one"] .choices__list[aria-expanded] .choices__item[aria-selected="true"] {
    background-color: rgba(13, 148, 136, .35) !important;
    color: #fff !important;
}
.ek-list-filter-bar .choices[data-type*="select-one"] .choices__list--dropdown .choices__item[aria-selected="true"].is-highlighted,
.ek-list-filter-bar .choices[data-type*="select-one"] .choices__list[aria-expanded] .choices__item[aria-selected="true"].is-highlighted {
    background-color: var(--ek-accent) !important;
    color: #fff !important;
}
.ek-list-filter-bar .choices__input {
    background: transparent !important;
    color: #fff !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/* Inputs: line-height = height für vertikale Text-Zentrierung.
   margin: 0 weil Gridbox global `margin-bottom: .625rem` auf Inputs setzt
   → ohne Reset rutschen die Inputs gegenüber Choices/Buttons nach oben weg */
.ek-list-filter-bar .form-control,
.ek-list-filter-bar .form-select,
.ek-list-filter-bar .flatpickr-input,
.ek-list-filter-bar input.flatpickr-alt-input,
.ek-list-filter-bar input[type="text"] {
    padding: 0 .85rem !important;
    line-height: 42px !important;
    margin: 0 !important;
}
/* In v2-Bar braucht das .ek-filter-field kein margin-bottom – die vertikale
   Trennung der Filter-Reihen wird über .ek-list-filter-row--secondary gemacht
   (margin-top + padding-top + border-top). margin-bottom: .9rem (aus der
   geteilten Sidebar-Regel) würde die Felder im Grid-Row nach oben drücken. */
.ek-list-filter-bar .ek-filter-field {
    margin-bottom: 0;
}
/* Choices__inner (div, kein input): flex + center, mehr rechts-padding für Pfeil */
.ek-list-filter-bar .choices__inner {
    padding: 0 2.25rem 0 .85rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
/* Choices' inneres single-list/item ohne eigenes Padding/Line-Height-Versatz
   (Cassiopeia setzt z. B. padding:7px 16px 0 4px → Text rutscht nach oben).
   WICHTIG: nur --single, nicht --dropdown – sonst kollabiert die Line-Height
   in der geöffneten Dropdown-Liste auf 1 → Items kleben aneinander */
.ek-list-filter-bar .choices__list--single,
.ek-list-filter-bar .choices__list--single .choices__item {
    padding: 0 !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Multi-Select Placeholder sitzt in .choices__input--cloned (input).
   Choices.js setzt dort margin-bottom:5px + padding:4px 0 4px 2px → Placeholder
   rutscht nach oben/links. Hier auf 0 forcieren, damit Placeholder vertikal
   zentriert sitzt (Flex-Center der Eltern wirkt dann sauber). */
.ek-list-filter-bar .choices__input,
.ek-list-filter-bar .choices__input--cloned {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Placeholder-Vereinheitlichung — analog Startseite: hell-transparent auf
   dunklem Hintergrund (statt --ek-muted dunkel auf hell). */
.ek-list-filter-bar .form-control::placeholder,
.ek-list-filter-bar .flatpickr-input::placeholder,
.ek-list-filter-bar input::placeholder,
.ek-list-filter-bar .choices__input::placeholder,
.ek-list-filter-bar .choices__placeholder,
.ek-list-filter-bar .choices__list--single .choices__item--selectable[data-placeholder="true"] {
    color: rgba(255, 255, 255, .55) !important;
    opacity: 1 !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    font-style: normal !important;
}
/* .choices outer Wrapper: Border-Radius via Variable kommt aus Gridbox-Section
   (oft pill); lokal überschreiben damit's mit dem Inner passt */
.ek-list-filter-bar .choices {
    --border-radius: 8px !important;
    border-radius: 8px !important;
    margin: 0 !important;
}
.ek-list-filter-row[hidden] { display: none; }

/* ─── Floating-Label-Pattern für Filter-Felder ─────────────────
   .ek-floating-field ist das <label>-Wrapper-Element; die Beschriftung
   liegt in .ek-floating-label und floatet hoch, wenn:
   - irgendein Nachfahre fokussiert ist (:focus-within)
   - der Input einen Wert hat (:not(:placeholder-shown), inkl. Datepicker)
   - der Choices-Wrapper "has-items" hat (Attribut wird per JS gesetzt)        */
.ek-list-filter-bar .ek-floating-field {
    position: relative;
    display: block;
    margin: 0;
}
.ek-floating-label {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .55);
    font-size: 1rem;
    font-weight: inherit;
    line-height: 1;
    pointer-events: none;
    z-index: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 2.5rem);
    transition: top .15s ease,
                font-size .15s ease,
                color .15s ease,
                padding .15s ease,
                background-color .15s ease,
                left .15s ease;
}
/* Aktiv: Label floatet auf die obere Border-Linie */
.ek-floating-field:focus-within > .ek-floating-label,
.ek-floating-field .ek-floating-input:not(:placeholder-shown) ~ .ek-floating-label,
.ek-floating-field--choices[data-has-items] > .ek-floating-label {
    top: 0;
    font-size: .95rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: #fff;
    padding: 1px .45rem;
    background-color: rgba(15, 25, 35, .92);
    border-radius: 3px;
    left: .65rem;
}

@media (max-width: 768px) {
    .ek-list-filter-row,
    .ek-list-filter-row--secondary { grid-template-columns: 1fr; }
}

/* „Weitere Filter ▾" Toggle-Button – im v1-.ek-btn-Stil (pill + shadow).
   Kein translateY(-2px) im v2-Filter, sonst sitzen die Buttons 2 px höher
   als die Form-Felder in der gleichen Zeile (Top-Misalignment). */
.ek-list-filter-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px;
    padding: 0 1.2rem;
    background: var(--ek-card);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--ek-muted);
    font-size: .85rem; font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .35);     /* v1-Lift-Shadow */
    transition: box-shadow .2s ease, color .15s, border-color .15s;
}
.ek-list-filter-toggle:hover {
    color: var(--ek-text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);       /* v1-Hover-„gedrückt" */
}
.ek-list-filter-toggle-arrow {
    display: inline-block;
    margin-left: .35rem;
    transition: transform .2s;
}
.ek-list-filter-toggle[aria-expanded="true"] .ek-list-filter-toggle-arrow {
    transform: rotate(180deg);
}

/* „Zurücksetzen"-Link – v1 .ek-btn-danger Stil (Akzentfarbe, Pill, kein Lift) */
.ek-list-filter-reset {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px;
    padding: 0 1.2rem;
    background: var(--ek-card);
    border: 1px solid var(--ek-accent);
    border-radius: 999px;
    color: var(--ek-accent);
    font-size: .85rem; font-weight: 500;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .35);     /* v1-Lift-Shadow */
    transition: box-shadow .2s ease, color .15s, border-color .15s;
}
.ek-list-filter-reset:hover {
    color: var(--ek-accent-hover);
    border-color: var(--ek-accent-hover);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);       /* v1-Hover-„gedrückt" */
}

/* Liste + Sticky-Map-Grid.
   min-height = volle Viewport-Höhe, damit die Sticky-Map auch dann sichtbar
   bleibt, wenn die Card-Liste kürzer ist als die Karte (sonst würde der Grid-
   Container am unteren Rand der Cards enden und die Map mit-rausscrollen) */
.ek-list-list-map {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 1.5rem;
    align-items: start;
    min-height: calc(100vh - var(--ek-list-filter-h) - var(--ek-list-stack-gap));
}
/* Modus „ohne Map" (Menü-Param show_map=0): Liste nimmt volle Breite */
.ek-list-list-map--no-map {
    grid-template-columns: 1fr;
    min-height: 0;
}
@media (max-width: 992px) {
    .ek-list-list-map {
        grid-template-columns: 1fr;
        min-height: 0;            /* mobile: stacked, kein min-height nötig */
    }
}

/* Sticky Map (rechte Spalte) – top-Wert = Filter-Bar-Höhe + Gap, damit der
   visuelle Abstand zwischen Filter und Karte beim Scrollen erhalten bleibt.
   CSS-Variable, damit der Wert bei expandierter Filter-Bar via JS angepasst
   werden kann. */
:root {
    --ek-list-filter-h: 5rem;     /* eingeklappte Filter-Bar (geschätzt) */
    --ek-list-stack-gap: 1.5rem;  /* Abstand Filter ↔ Karte – matcht margin-bottom der Filter-Bar im nicht-sticky Zustand */
}
.ek-list-map-sticky {
    position: sticky;
    top: calc(var(--ek-list-filter-h) + var(--ek-list-stack-gap));
    height: calc(100vh - var(--ek-list-filter-h) - var(--ek-list-stack-gap) - 1rem);
    min-height: 400px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
}
.ek-list-map-sticky .ek-events-map {
    height: 100%;
    margin: 0;
}
.ek-list-map-sticky .ek-events-map-inner { height: 100%; }
@media (max-width: 992px) {
    .ek-list-map-sticky {
        position: static;
        height: 50vh;
        min-height: 300px;
    }
}

/* In v2 trägt die Hauptspalte (Liste) keinen weißen Frame mehr (das macht jetzt
   die Filter-Leiste) – Liste sitzt direkt auf dem dunklen BG */
.ek-list-list-map .ek-events-main { padding: 0; }

/* Card-Hover-Highlight: deutlicher Glow + Farb-Shift via hue-rotate.
   Funktioniert für Standard-Marker UND Cluster-Icons (beide tragen
   die Klasse .leaflet-marker-icon). Standard-Leaflet-Marker ist blau
   (Hue ~220°) — hue-rotate(140deg) shiftet ihn nach rot. */
.leaflet-marker-icon.ek-marker-hover {
    /* hue-rotate VOR drop-shadow — sonst werden auch die Glow-Farben mitrotiert */
    filter:
        hue-rotate(140deg) saturate(2.2)
        drop-shadow(0 0 5px #fff)
        drop-shadow(0 0 18px #e63946)
        drop-shadow(0 0 28px #e63946);
    z-index: 1000 !important;
    transition: filter .15s;
}

/* ─── 3-Spalten-Karten-Grid ─────────────────────────────── */
.ek-list-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1rem;
}
@media (max-width: 1280px) {
    .ek-list-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ek-list-card-grid { grid-template-columns: 1fr; }
}

/* Layout-Umschalter (Kachel / Liste) – kleiner Toggle über dem Card-Grid */
.ek-layout-toggle {
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
    margin-bottom: .75rem;
}
.ek-layout-btn {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 6px;
    padding: .45rem .85rem;
    font-size: 1.25rem;
    line-height: 1;
    color: rgba(255, 255, 255, .9);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.ek-layout-btn:hover {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}
.ek-layout-btn.is-active {
    background: var(--ek-accent);
    border-color: var(--ek-accent);
    color: #fff;
}

/* Listen-Variante: Zeilen-Cards mit Bild links + Body rechts.
   Wird per JS-Toggle (.is-rows auf .ek-list-card-grid) aktiviert. */
.ek-list-card-grid.is-rows {
    grid-template-columns: 1fr;
}
.ek-list-card-grid.is-rows .ek-list-card {
    flex-direction: row;
}
.ek-list-card-grid.is-rows .ek-list-card-img {
    width: 240px;
    aspect-ratio: 16 / 10;
    flex-shrink: 0;
}
.ek-list-card-grid.is-rows .ek-list-card-body {
    flex: 1;
}
@media (max-width: 640px) {
    /* mobil: auch in Listen-Ansicht stacked, Bild oben + Body unten – sonst
       ist das Bild zu schmal und der Text quetscht sich daneben. */
    .ek-list-card-grid.is-rows .ek-list-card { flex-direction: column; }
    .ek-list-card-grid.is-rows .ek-list-card-img { width: 100%; }
}

/* Einzelne Card – vertikales Layout (Bild oben, Body unten) */
.ek-list-card {
    position: relative;
    background: var(--ek-card);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transition: box-shadow .25s ease, transform .25s ease;
    display: flex;
    flex-direction: column;
    /* scroll-margin-top: beim Rücksprung von der Detailseite via #event-XYZ
       soll die Card unter der sticky Filter-Bar erscheinen, nicht dahinter */
    scroll-margin-top: calc(var(--ek-list-filter-h) + var(--ek-list-stack-gap) + 1rem);
}
.ek-list-card:hover {
    box-shadow: 0 12px 30px rgba(15, 23, 42, .3);
    transform: translateY(-2px);
}

/* Bild-Bereich: Fixed Aspect-Ratio, Badges/Series-Icon als Overlays */
.ek-list-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ek-img-bg);
    overflow: hidden;
}
.ek-list-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.ek-list-card-img .ek-row-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ek-img-icon); font-size: 2.4rem;
}

/* Kategorie-Badges links unten auf dem Bild */
.ek-list-card-cats {
    position: absolute;
    left: .6rem;
    bottom: .6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    z-index: 2;                  /* über dem overlay-Link */
    max-width: calc(100% - 1.2rem);
}
.ek-list-card-cats .ek-row-badge {
    background: color-mix(in srgb, var(--ek-col, var(--ek-muted)) 85%, white);
    color: #fff;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* Reihen-Icon rechts oben (eigene Position überschreibt das Default aus .ek-row-img) */
.ek-list-card-img .ek-series-icon {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: var(--ek-accent) !important;
    color: #fff !important;
    min-width: 28px; height: 28px;
    padding: 0 .4rem;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 500;
    letter-spacing: .12em;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
    z-index: 2;
}

/* Body: Titel + Datum + Ort + Map-Button.
   flex:1 sorgt dafür, dass der Body die volle Card-Resthöhe füllt – damit
   wird der via margin-top:auto positionierte Map-Button wirklich ans
   Card-Ende geschoben, auch wenn der Inhalt darüber kurz ist. */
.ek-list-card-body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    flex: 1;
}
.ek-list-card-body .ek-row-title { margin: 0 0 .6rem; color: var(--ek-text); text-shadow: 2px 2px 0 rgba(0, 0, 0, .2); }
/* Festival-Name als kleine Zeile direkt unter dem Titel */
.ek-list-card-body .ek-row-festival {
    margin: -0.55rem 0 .55rem;
    color: var(--ek-festival, #a06832);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    text-align: center;
}
/* Datum/Uhrzeit + Ort/Stadt: Family/Weight/Color aus Gridbox, aber font-size
   und line-height kompakter als der globale p-Style (kleiner als h2 1.2rem,
   Zeilenabstand reduziert für Card-Layout) */
.ek-list-card-body .ek-row-datetime,
.ek-list-card-body .ek-row-location {
    font-size: .95rem;
    line-height: 1.4;
}
/* Map-Button-Wrapper landet via margin-top:auto immer am unteren Card-Rand,
   linksbündig (kein margin-left: auto wie in der V1-Row-Layout) */
.ek-list-card-mapbtn {
    margin-top: auto;
    padding-top: .5rem;
}
.ek-list-card-body .ek-row-map-btn {
    margin-left: 0;              /* Override des globalen margin-left: 2rem */
}
.ek-list-card-body .ek-row-badges {
    margin-top: .35rem;
    padding-top: 0;
    display: flex; flex-wrap: wrap; gap: .35rem;
}

/* ─── Rahmen + leichtes Overlay + Schatten – wird auf Liste UND Detail genutzt */
.ek-page-frame {
    border-radius: 12px;
    padding: 1.25rem;
    background: rgba(255, 255, 255, .05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .45);
}
/* Im Detail: Frame stapelt Hero + Content, eigener Innen-Abstand */
.ek-detail .ek-page-frame {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* ─── Events-Layout: Sidebar + Hauptbereich (proportional 3 · 9) ── */
.ek-events-layout {
    display: grid;
    grid-template-columns: 1fr;    /* mobile: stacked */
    gap: 1.5rem;
    align-items: start;
}
@media (min-width: 768px) {
    .ek-events-layout { grid-template-columns: 4fr 8fr; }   /* md: 4/8 */
}
@media (min-width: 992px) {
    .ek-events-layout { grid-template-columns: 3fr 9fr; }   /* lg: 3/9 */
}

/* ─── Filter-Container (gemeinsame Optik für v1-Sidebar und v2-Bar) ──
   Background, Position/top/z-index/padding sind variant-spezifisch und
   werden in den eigenen Blöcken (.ek-filter-sidebar / .ek-list-filter-bar) gesetzt. */
:is(.ek-filter-sidebar, .ek-list-filter-bar) {
    border: none;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
}
.ek-filter-sidebar {
    background: var(--ek-card);
    position: sticky;
    top: 1rem;
    z-index: 10;
    padding: 1.5rem 1.25rem 1.25rem;
}
@media (max-width: 900px) { .ek-filter-sidebar { position: static; } }

.ek-filter-form { margin: 0; }
.ek-filter-title {
    font-size: 1rem; font-weight: 600;
    color: var(--ek-text);
    text-align: left;
    margin: 0 0 1.1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--ek-border);
    letter-spacing: -.01em;
}
.ek-filter-field { margin-bottom: .9rem; }
.ek-filter-field:last-child { margin-bottom: 0; }
.ek-filter-field label {
    display: block;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ek-muted);
    margin-bottom: .25rem;
}

.ek-filter-actions {
    display: flex; gap: .5rem;
    margin-top: 1.2rem;
}
.ek-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    padding: .65rem 1.2rem;
    background: var(--ek-card);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .85rem; font-weight: 500;
    letter-spacing: .02em;
    text-decoration: none; cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .35);
    transform: translateY(-2px);
    transition: box-shadow .2s ease, transform .2s ease, color .15s, border-color .15s;
}
.ek-btn:hover {
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transform: translateY(0);
}
/* „Suchen" – dezent, ist nur Fallback (Auto-Submit macht's normalerweise) */
.ek-btn-primary { color: var(--ek-muted); }
.ek-btn-primary:hover { color: var(--ek-text); }

/* „Zurücksetzen" – Hauptaktion in der Sidebar */
.ek-btn-danger { color: var(--ek-accent); border-color: var(--ek-accent); }
.ek-btn-danger:hover { color: var(--ek-accent-hover); border-color: var(--ek-accent-hover); }

/* ─── Einheitliche Form-Elemente in der Filter-Sidebar ───── */
:is(.ek-filter-sidebar, .ek-list-filter-bar) .form-control,
:is(.ek-filter-sidebar, .ek-list-filter-bar) .form-select {
    height: 42px;
    font-size: .92rem;
    padding: .5rem .85rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: #eef2f6;      /* dezent ton-in-ton mit Card */
    color: var(--ek-text);
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) .form-control:hover,
:is(.ek-filter-sidebar, .ek-list-filter-bar) .form-select:hover {
    background-color: #e4eaf0;
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) .form-control:focus,
:is(.ek-filter-sidebar, .ek-list-filter-bar) .form-select:focus {
    background-color: #fff;
    border-color: var(--ek-accent);
    box-shadow: 0 0 0 3px var(--ek-accent-soft);
    outline: none;
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) input[type="date"].form-control { padding-right: .5rem; }

/* Choices.js: gleiche Höhe, gleicher Rahmen */
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices {
    /* Choices nutzt diese Variablen für alle Sub-Elemente (Inner, Dropdown-Items,
       Placeholder, Tags). Defaults sind 16/14/12px – wir gehen leicht hoch. */
    --choices-font-size-lg: 17px;
    --choices-font-size-md: 16px;
    --choices-font-size-sm: 14px;
    margin-bottom: 0;
    font-size: 1rem;
    width: 100%;
    position: relative;
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices.is-open,
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices.is-focused { z-index: 20; }
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__list--dropdown { z-index: 30; }
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices select { display: none !important; }

:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: var(--ek-muted) transparent transparent transparent;
    border-width: 6px 5px 0 5px;
    pointer-events: none;
    transition: transform .15s;
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices.is-open::after {
    transform: rotate(180deg);
    margin-top: -4px;
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__inner {
    min-height: 42px;
    height: auto;
    padding: 3px 2rem 3px .85rem;     /* horizontales Padding wie .form-control */
    border: 1px solid transparent;
    border-radius: 8px !important;     /* überschreibt choices.css-Default (oft 999px / pill) */
    background-color: #eef2f6;         /* gleicher BG wie .form-control */
    font-size: .92rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices:hover .choices__inner {
    background-color: #e4eaf0;          /* Hover-Konsistenz mit .form-control */
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__inner,
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__inner * { cursor: pointer; }
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices.is-open .choices__input { cursor: text; }
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices.is-focused .choices__inner,
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices.is-open .choices__inner {
    border-color: var(--ek-accent);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, .15);
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__list--multiple .choices__item {
    background: var(--ek-accent);
    border: 0;
    border-radius: 3px;
    font-size: .92rem;
    font-weight: 400;
    letter-spacing: .04em;
    margin: 2px 3px 2px 0;
    padding: 3px 20px 3px 8px;
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__input {
    background-color: transparent;
    font-size: .92rem;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__input--cloned::placeholder { color: var(--ek-muted); opacity: 1; }
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices[data-type*="select-multiple"] .choices__button {
    border-left-color: rgba(255, 255, 255, .4);
}
/* Single-Select (filter_ort, filter_location_id, filter_festival) bekommt
   den gleichen Pill-Look wie die Multi-Tags. Choices.js v11 macht
   .choices__list--single standardmäßig 100% breit → muss explizit auf
   auto-Breite. Pill nur auf echte Auswahl (data-item-Attribut), damit nach
   X-Klick / im Placeholder-Zustand kein grüner Streifen bleibt. */
.ek-list-filter-bar .choices[data-type*="select-one"] .choices__list--single {
    width: auto !important;
    max-width: 100%;
    display: inline-flex !important;
    padding: 0 !important;
}
.ek-list-filter-bar .choices[data-type*="select-one"] .choices__list--single .choices__item[data-item]:not([data-placeholder="true"]) {
    background: var(--ek-accent) !important;
    border: 0 !important;
    border-radius: 3px !important;
    font-size: .92rem !important;
    font-weight: 400 !important;
    letter-spacing: .04em !important;
    margin: 2px 3px 2px 0 !important;
    padding: 3px 8px !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
    width: auto !important;
}
/* X-Button replikiert das Choices-Default für select-multiple
   (border-left als Separator + SVG-X, Position relative im Inline-Flow). */
.ek-list-filter-bar .choices[data-type*="select-one"] .choices__list--single .choices__item[data-item]:not([data-placeholder="true"]) .choices__button {
    position: relative !important;
    display: inline-block !important;
    width: 8px !important;
    height: 20px !important;
    top: 0 !important;
    right: auto !important;
    margin: 0 -4px 0 8px !important;
    padding: 0 0 0 16px !important;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, .4) !important;
    border-radius: 0 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><line x1="3" y1="3" x2="18" y2="18" stroke="white" stroke-width="3"/><line x1="18" y1="3" x2="3" y2="18" stroke="white" stroke-width="3"/></svg>') !important;
    background-size: 8px 8px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    line-height: 1 !important;
    text-indent: -9999px;
    overflow: hidden;
    color: transparent;
    opacity: .75 !important;
    cursor: pointer;
    box-sizing: content-box;
}
.ek-list-filter-bar .choices[data-type*="select-one"] .choices__list--single .choices__item[data-item]:not([data-placeholder="true"]) .choices__button:hover {
    opacity: 1 !important;
}
/* Placeholder-Item in Single-Select: definitiv keinen Pill-Hintergrund */
.ek-list-filter-bar .choices[data-type*="select-one"] .choices__list--single .choices__item[data-placeholder="true"],
.ek-list-filter-bar .choices[data-type*="select-one"] .choices__list--single .choices__placeholder {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .55) !important;
}
/* Single-Select: das per JS ins .choices__inner verschobene Such-Input
   soll standardmäßig zusammengeklappt sein (Width 0), damit:
   1) sein "Suchen …"-Placeholder das floating Label nicht überlagert
   2) es nicht in eine zweite Zeile unter den ausgewählten Pill umbricht
   Erst bei Fokus/offenem Dropdown wird es sichtbar und tippbar. */
.ek-list-filter-bar .choices[data-type*="select-one"] .choices__inner .choices__input--cloned {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    transition: opacity .1s ease;
}
.ek-list-filter-bar .choices[data-type*="select-one"].is-focused .choices__inner .choices__input--cloned,
.ek-list-filter-bar .choices[data-type*="select-one"].is-open .choices__inner .choices__input--cloned {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 60px !important;
    overflow: visible !important;
    opacity: 1;
}

/* Authoritativer Override: Wenn der Wrapper (per JS) sagt „keine Auswahl",
   dann darf KEIN Pill-Look übrig bleiben, egal was Choices' DOM macht.
   Notwendig weil Choices.js v11 nach removeItem auf select-one teilweise
   das alte data-item-Element + button im DOM stehen lässt.
   Specificity muss höher sein als die Pill-Regel oben (0,7,0). */
.ek-list-filter-bar .ek-floating-field--choices:not([data-has-items]) .choices[data-type*="select-one"] .choices__list--single .choices__item[data-item] {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .55) !important;
}
.ek-list-filter-bar .ek-floating-field--choices:not([data-has-items]) .choices[data-type*="select-one"] .choices__list--single .choices__item[data-item] .choices__button {
    display: none !important;
}

:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__list--single { padding: 0; }
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__list--single .choices__item {
    padding: 0;
    font-size: .92rem;
    line-height: 1.5;
}
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__placeholder,
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__list--single .choices__item--selectable[data-placeholder="true"] {
    color: var(--ek-muted);
    opacity: 1;
}

/* Dropdown-Einträge (geöffnete Liste): kompakt aber lesbar.
   word-break: normal überschreibt Choices.js-Default break-all, sonst werden
   längere Ortsnamen mitten im Wort umgebrochen. */
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__list--dropdown .choices__item,
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__list--multiple .choices__item,
:is(.ek-filter-sidebar, .ek-list-filter-bar) .choices__list--single .choices__item {
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.4;
    word-break: normal;
    overflow-wrap: normal;
}

/* ─── Karten-Ansicht (Liste) – gleiche 3/9-Aufteilung wie Filter+Events ─ */
.ek-map-layout {
    display: grid;
    grid-template-columns: 1fr;      /* mobile: stacked, linke Spalte leer */
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: start;
}
@media (min-width: 768px) {
    .ek-map-layout { grid-template-columns: 4fr 8fr; }
}
@media (min-width: 992px) {
    .ek-map-layout { grid-template-columns: 3fr 9fr; }
}
/* Auf mobilen Viewports leeren linken Block nicht zeigen */
@media (max-width: 767.98px) {
    .ek-map-side { display: none; }
}

.ek-events-map {
    width: 100%;
    border: 1px solid var(--ek-border);
    border-radius: 8px;
    overflow: hidden;
}
.ek-events-map-inner {
    height: 380px;
    width: 100%;
}
@media (max-width: 768px) {
    .ek-events-map-inner { height: 280px; }
}

/* Reset-Control-Button (Leaflet-Control oben rechts, mit Text-Label).
   leaflet-bar gibt Default-Größe 26×26 px (gleiche Specificity, kommt aber
   später geladen) → höhere Specificity via .leaflet-bar.ek-map-reset-ctrl. */
.leaflet-bar.ek-map-reset-ctrl a {
    width: auto;
    height: auto;
    min-height: 30px;
    padding: 0 .9rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 30px;
    text-decoration: none;
    color: #333;
    white-space: nowrap;
}
.leaflet-bar.ek-map-reset-ctrl a:hover {
    background: #f4f4f4;
    color: #000;
}

/* Leaflet-Popup im EK-Design */
.leaflet-popup-content { font-size: .88rem; line-height: 1.45; margin: .6rem .8rem; }
.leaflet-popup-content .ek-popup-title { font-weight: 700; color: var(--ek-text); margin-bottom: .15rem; }
.leaflet-popup-content .ek-popup-ort   { color: var(--ek-muted); margin-bottom: .3rem; }
.leaflet-popup-content .ek-popup-count { font-weight: 600; }
.leaflet-popup-content .ek-popup-count a {
    color: var(--ek-accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--ek-accent);
}
.leaflet-popup-content .ek-popup-count a:hover {
    color: var(--ek-accent-hover);
    border-bottom-style: solid;
}

/* ─── Gesamtzahl-Header ──────────────────────────────────── */
.ek-total-header {
    background: transparent;
    border: none;
    padding: .4rem 0 1rem;
    text-align: center;
    color: var(--ek-on-bg-muted);
    font-size: 1rem;
    margin-bottom: .75rem;
}
.ek-total-header strong {
    color: var(--ek-accent-hover);   /* heller Teal für besseren Kontrast auf dunkel */
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: -.02em;
}

/* ─── Zeitnavigation (Jahr/Monat-Tabs) ───────────────────── */
.ek-timeline {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
/* Abstand vor der unteren Zeitleiste (nach Liste / Mehr-Button) */
.ek-events-main > .ek-timeline:last-child { margin-top: 2.5rem; margin-bottom: 0; }
.ek-timeline ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: thin; }
.ek-timeline ul::-webkit-scrollbar { height: 4px; }
.ek-timeline ul::-webkit-scrollbar-thumb { background: var(--ek-border); border-radius: 2px; }

.ek-timeline-years { margin-bottom: 0; }
.ek-timeline-years li a {
    display: block; padding: .4rem 1rem; font-size: 1.05rem; font-weight: 500;
    color: var(--ek-on-bg-muted); background: transparent; border: 1px solid transparent;
    border-radius: 999px; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s;
}
.ek-timeline-years li.is-active a { color: var(--ek-on-bg-text); background: rgba(248, 250, 252, .1); font-weight: 600; }
.ek-timeline-years li a:hover { color: var(--ek-on-bg-text); }

.ek-timeline-months li a {
    display: block; padding: .5rem 1.1rem; font-size: .95rem; font-weight: 500;
    color: var(--ek-on-bg-muted); background: transparent; border: 1px solid transparent;
    border-radius: 999px; text-decoration: none; white-space: nowrap;
    letter-spacing: .02em; transition: background .15s, color .15s;
}
.ek-timeline-months li a:hover { color: var(--ek-on-bg-text); background: rgba(248, 250, 252, .08); }
.ek-timeline-months li.is-active a { color: #fff; background: var(--ek-accent); font-weight: 600; }

/* Während aktiver Suche: Tabs leicht abgedimmt, keine aktive Markierung */
.ek-timeline.is-muted { opacity: .55; }

/* Such-Hinweis-Banner (ersetzt result-count bei aktiver Titel-Suche) */
.ek-search-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: rgba(13, 148, 136, .15);
    border: 1px solid rgba(13, 148, 136, .35);
    border-radius: 12px;
    padding: .8rem 1.1rem;
    margin-bottom: 1rem;
    font-size: .95rem; color: var(--ek-on-bg-text);
}
.ek-search-banner strong { font-weight: 600; color: var(--ek-accent-hover); }
.ek-search-clear {
    display: inline-block; padding: .4rem 1rem;
    background: var(--ek-card); border: none; border-radius: 999px;
    color: var(--ek-text); font-size: .82rem; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .25);
    transform: translateY(-2px);
    transition: box-shadow .2s ease, transform .2s ease, color .15s;
}
.ek-search-clear:hover {
    color: var(--ek-accent-hover);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
    transform: translateY(0);
}

/* „Mehr anzeigen"-Button unter der Karten-Liste */
.ek-more-wrap { display: flex; justify-content: center; margin: 2rem 0 1rem; }
.ek-more-btn {
    display: inline-block; padding: .8rem 1.8rem;
    background: var(--ek-card); border: none; border-radius: 999px;
    color: var(--ek-accent); font-weight: 500; font-size: .92rem;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .35);
    transform: translateY(-2px);
    transition: box-shadow .2s ease, transform .2s ease, color .15s;
}
.ek-more-btn:hover {
    color: var(--ek-text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transform: translateY(0);
}
.ek-more-count { color: var(--ek-muted); font-weight: 400; margin-left: .35rem; }
.ek-more-btn.is-loading { opacity: .6; pointer-events: none; cursor: wait; }

/* ─── Events-Liste: Header + Zeilen-Cards ─────────────────── */
.ek-result-count {
    background: transparent;
    border: none;
    padding: 0 0 .5rem;
    text-align: center;
    color: var(--ek-on-bg-text);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.ek-result-count strong { font-weight: 700; color: var(--ek-on-bg-text); font-size: 1.3rem; letter-spacing: -.01em; }

.ek-event-rows { display: flex; flex-direction: column; gap: 1rem; }

.ek-row-card {
    position: relative;
    display: grid;
    /* Mobile (xs): Datum 3 · Bild 4 · Body 5  (von 12) */
    grid-template-columns: 3fr 4fr 5fr;
    background: var(--ek-card);
    border: none;
    border-radius: 14px;
    overflow: hidden;
    min-height: 150px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transition: box-shadow .25s ease, transform .25s ease;
}
/* sm ab 576 px: 2 · 3 · 7 */
@media (min-width: 576px) {
    .ek-row-card { grid-template-columns: 2fr 3fr 7fr; }
}
/* lg ab 992 px: 1 · 3 · 8 */
@media (min-width: 992px) {
    .ek-row-card { grid-template-columns: 1fr 3fr 8fr; }
}
.ek-row-card:hover {
    box-shadow: 0 12px 30px rgba(15, 23, 42, .3);
    transform: translateY(-2px);
}
.ek-row-link { position: absolute; inset: 0; z-index: 1; }

/* Datumsblock links */
.ek-row-date {
    background: transparent;
    color: var(--ek-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .9rem .4rem .9rem .6rem;
    text-align: center;
    position: relative;
}
.ek-row-date::before {
    content: "";
    position: absolute;
    left: 0; top: 1rem; bottom: 1rem;
    width: 3px;
    background: var(--ek-cat-color, var(--ek-accent));
    border-radius: 2px;
}
.ek-row-date-prefix {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ek-muted);
    margin-bottom: .2rem;
}
.ek-row-date-weekday {
    font-size: .72rem;
    color: var(--ek-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
}
.ek-row-date-day {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ek-text);
    margin: .2rem 0 .1rem;
    letter-spacing: -.02em;
}
.ek-row-date-month {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ek-text);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: .1rem;
}
.ek-row-date-year {
    font-size: .7rem;
    color: var(--ek-muted-light);
    margin-top: .3rem;
    font-weight: 500;
}

/* Event läuft bereits (aus der Vergangenheit fortlaufend, z. B. Ausstellungen):
   warmer Hintergrund zur Unterscheidung vom Normal-Block */
.ek-row-date--running {
    background: #fef3c7;      /* sanftes Amber */
}
.ek-row-date--running .ek-row-date-prefix {
    color: #92400e;           /* warmes Dunkelbraun für „SEIT" */
}

/* Bild mittig */
.ek-row-img {
    position: relative;
    background: var(--ek-img-bg);
    overflow: hidden;
}
.ek-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-row-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ek-img-icon); font-size: 2.4rem;
}
.ek-row-img .ek-series-icon {
    position: absolute; top: .5rem; right: .5rem;
    background: var(--ek-accent); color: #fff;
    min-width: 28px; height: 28px; padding: 0 .4rem; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 500;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .25);
    z-index: 2;
}

/* Body rechts */
.ek-row-body {
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}
/* .ek-row-title (h2) – font-family + weight kommen aus Gridbox,
   font-size + line-height aber explizit (Gridbox-Default ist h2: line-height
   3.125rem, viel zu hoch für unseren kompakten Card-Title) */
.ek-row-title {
    margin: 0 0 .2rem;
    color: var(--ek-text);
    font-size: 1.2rem;
    line-height: 1.25;
}
/* Datum/Uhrzeit + Ort/Stadt: Typografie kommt aus Gridbox-`p`-Style
   (font-family, font-size, font-weight, color, line-height). Keine Overrides. */
.ek-row-location { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ek-row-location .sep { color: var(--ek-muted-light); }
.ek-row-map-btn {
    position: relative;
    z-index: 2;                  /* über dem overlay-<a class="ek-row-link"> */
    margin-left: 2rem;           /* sitzt direkt hinter Stadt/V-Ort, aber mit Atemraum */
    padding: .3rem .8rem;
    border: 1px solid var(--ek-accent);
    border-radius: 999px;
    background: var(--ek-card);
    color: var(--ek-text);
    font-size: .74rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .35);
    transform: translateY(-2px);
    transition: box-shadow .2s ease, transform .2s ease, color .15s;
}
.ek-row-map-btn::before {
    content: "📍";
    margin-right: .3rem;
    font-size: .9em;
}
.ek-row-map-btn:hover {
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transform: translateY(0);
    color: var(--ek-accent);
}
.ek-row-intro {
    margin: .35rem 0 0;
    color: var(--ek-intro);
    text-align: center;
}
.ek-row-badges {
    margin-top: auto; padding-top: .6rem;
    display: flex; flex-wrap: wrap; gap: .4rem;
}
.ek-row-badge {
    display: inline-block;
    padding: .3rem .8rem;
    border: none;
    background: color-mix(in srgb, var(--ek-col, var(--ek-muted)) 18%, white);
    color: var(--ek-text);
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .15em;
    text-transform: uppercase;
    border-radius: 999px;
}
.ek-row-badge-family   { --ek-col: var(--ek-family); }
.ek-row-badge-stadt    { --ek-col: var(--ek-stadt); }
.ek-row-badge-festival { --ek-col: var(--ek-festival); }

/* Ganz schmale Viewports (<= 576): Datum-Schrift kompakter */
@media (max-width: 575px) {
    .ek-row-date-day { font-size: 1.75rem; }
    .ek-row-date-month { font-size: .82rem; }
    .ek-row-date-weekday { font-size: .66rem; }
    .ek-row-date-prefix { font-size: .6rem; }
    .ek-row-date-year { font-size: .66rem; }
}

.ek-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ek-muted);
    background: var(--ek-card);
    border: 1px dashed var(--ek-border);
    border-radius: 8px;
}

/* ─── Scroll-Target nach Rückkehr ─────────────────────────── */
:target.ek-row-card,
:target.ek-list-card { animation: ek-pulse 1.5s ease-out 1; }
@keyframes ek-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(25, 118, 210, .6); }
    70%  { box-shadow: 0 0 0 14px rgba(25, 118, 210, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 118, 210, 0); }
}

/* Form-Action-Buttons (Verwerfen rot · Entwurf blau · Einreichen grün).
   Wird sowohl im Events-Submit-Tab (default.php) als auch in editLocation
   verwendet — daher hier global statt inline pro Template. */
.ek-submit-actions { gap: 1rem; }
.ek-submit-actions .btn-action {
    appearance: none !important;
    border: 0 !important;
    border-radius: 5px !important;
    padding: .55rem 1.1rem !important;
    font-size: .92rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    line-height: 1.3 !important;
    color: #fff !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: filter .15s ease;
}
.ek-submit-actions .btn-action:hover { filter: brightness(1.1); }
.ek-submit-actions .btn-discard { background: #c83232 !important; }
.ek-submit-actions .btn-draft   { background: #2476c8 !important; }
.ek-submit-actions .btn-submit  { background: #28a060 !important; }
/* Farb-Schema (Drafts + Live): Speichern blau · Einreichen grün ·
   Abbrechen gelb · Löschen rot · Vorschau teal. */
.ek-submit-actions .btn-cancel  { background: #d4a72c !important; color: #1a1a1a !important; }
.ek-submit-actions .btn-cancel:hover { filter: brightness(1.08) !important; }
.ek-submit-actions .btn-preview { background: #0d9488 !important; color: #fff !important; }

/* ─── Event-Bild-Field (Submit-Form + EditEvent) ─────────────
   Dasselbe Markup-Pattern wie Logo-Field (.ek-img-field/-preview/
   -actions/-btn), nur mit eigener `.--event`-Variante: 3:2-Vorschau
   statt freier Logo-Höhe. Modal-Styles werden in default.php (Profil-
   Tab) inline gesetzt — hier dupliziert nicht alles, nur die für
   EditEvent zwingend nötigen Bits + Cropper-spezifisches. */

.ek-img-field { display: flex; flex-direction: column; gap: .75rem; }
.ek-img-field--event .ek-img-preview {
    background: var(--ek-input-bg, #253040);
    border: 1px solid var(--ek-border, #3a4a5c);
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ek-img-field--event .ek-img-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ek-img-field--event .ek-img-empty {
    color: var(--ek-muted, #94a3b8);
    font-size: .9rem;
    font-style: italic;
}
.ek-img-field-hint {
    color: var(--ek-muted, #94a3b8);
    font-size: .82rem;
    line-height: 1.4;
}
.ek-img-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ek-img-btn {
    appearance: none;
    border: 0;
    border-radius: 6px;
    padding: .4rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter .15s ease, opacity .15s ease;
}
.ek-img-btn:hover:not(:disabled) { filter: brightness(1.1); }
.ek-img-btn:disabled { opacity: .45; cursor: not-allowed; }
.ek-img-btn--upload { background: #28a060; }
.ek-img-btn--pick   { background: #6b5fb8; }
.ek-img-btn--edit   { background: #2476c8; }
.ek-img-btn--clear  { background: #c83232; }
.ek-img-btn--save   { background: #28a060; }
.ek-img-btn--cancel {
    background: transparent;
    border: 1px solid #5a7a9a;
    color: #d0dae8;
}
.ek-img-btn--cancel:hover:not(:disabled) { background: rgba(255, 255, 255, .05); filter: none; }
.ek-img-field.is-busy { opacity: .6; pointer-events: none; }

/* Modal-Basis (analog Profil-Tab; hier für EditEvent-Layout, das
   die Profil-Inline-Styles nicht lädt). Modal hängt an `<body>` —
   daher KEIN ek-dashboard-Scope, hardcoded Farben statt Vars. */
.ek-img-modal {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ek-img-modal.is-open { display: flex; }
.ek-img-modal-dialog {
    background: #1e2530;
    border: 1px solid #3a4a5c;
    color: #e4edf6;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
}
.ek-img-modal-dialog--wide { max-width: 760px; }
.ek-img-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #3a4a5c;
    background: #2d3748;
}
.ek-img-modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 500; color: #e8f0f8; }
.ek-img-close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: #9ab0c4;
    cursor: pointer;
    padding: 0 .25rem;
}
.ek-img-close:hover { color: #fff; }
.ek-img-modal-body {
    background: #1e2530;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ek-img-modal-preview {
    background: #253040;
    border: 1px solid #3a4a5c;
    border-radius: 6px;
    padding: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}
.ek-img-modal-preview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    display: block;
}
/* Cropper-Bereich: Container, in dem Cropper.js seine Canvas-Layer
   reinmacht. Höhe begrenzen, sonst sprengt das Modal die Viewport-Höhe. */
.ek-img-modal-cropper {
    background: #0f1a2e;
    border: 1px solid #3a4a5c;
    border-radius: 6px;
    padding: 0;
    max-height: 420px;
    overflow: hidden;
}
.ek-img-modal-cropper img {
    display: block;
    max-width: 100%;
}

/* Cropper.js-Handles deutlicher machen — Defaults sind sehr dezent
   (halbtransparente weiße Punkte, kaum sichtbar). Wir geben dem Crop-Box
   einen klaren Teal-Rahmen + große Eckpunkte. */
.ek-img-modal-cropper .cropper-view-box {
    outline: 2px solid #14b8a6;
    outline-color: #14b8a6;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
}
.ek-img-modal-cropper .cropper-line {
    background-color: #14b8a6;
    opacity: .8;
}
.ek-img-modal-cropper .cropper-dashed {
    border-color: rgba(255, 255, 255, .55);
    opacity: .9;
}
.ek-img-modal-cropper .cropper-center::before,
.ek-img-modal-cropper .cropper-center::after {
    background-color: #14b8a6;
}
/* Eckpunkte: dicker, Teal, kontrastreich */
.ek-img-modal-cropper .cropper-point {
    background-color: #14b8a6;
    width: 12px;
    height: 12px;
    opacity: 1;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #0f1a2e;
}
.ek-img-modal-cropper .cropper-point.point-se { width: 14px; height: 14px; }
.ek-img-modal-cropper .cropper-modal {
    background-color: #000;
    opacity: .55;
}
.ek-img-modal-field { display: flex; flex-direction: column; gap: .35rem; }
.ek-img-modal-field span { color: #fff; font-size: .9rem; font-weight: 500; letter-spacing: .04em; }
.ek-img-modal-field input {
    padding: .55rem .8rem;
    border: 1px solid #3a4a5c;
    border-radius: 6px;
    font-size: 1rem;
    background: #253040;
    color: #d0dae8;
    width: 100%;
    box-sizing: border-box;
}
.ek-img-modal-field input:focus {
    outline: none;
    border-color: #5a7a9a;
    background: #2a3850;
    box-shadow: 0 0 0 3px rgba(90, 122, 154, .25);
}
.ek-img-modal-field small { color: #9ab0c4; font-size: .82rem; line-height: 1.4; }
.ek-img-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-top: 1px solid #3a4a5c;
    background: #2d3748;
}

/* Picker-Modal: Grid eigener Bibliotheks-Tiles */
.ek-img-picker-status {
    color: #9ab0c4;
    font-size: .9rem;
    text-align: center;
    padding: .5rem 0;
}
.ek-img-picker-status:empty { display: none; }
.ek-img-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
    max-height: 60vh;
    overflow-y: auto;
}
.ek-img-picker-tile {
    position: relative;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #253040;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease, transform .15s ease, opacity .15s ease;
}
.ek-img-picker-tile:hover { border-color: #14b8a6; transform: translateY(-2px); }
.ek-img-picker-tile.is-busy { opacity: .55; pointer-events: none; }
.ek-img-picker-tile-pick {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    color: inherit;
}
.ek-img-picker-tile-pick img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    background: #1a2332;
}
.ek-img-picker-tile-cap {
    display: block;
    padding: .35rem .5rem;
    color: #cbd5e1;
    font-size: .75rem;
    text-align: left;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Delete-X oben rechts auf dem Tile — nur bei Hover sichtbar, damit das
   Tile-Bild bei der Auswahl nicht ablenkt. */
.ek-img-picker-tile-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    background: rgba(200, 50, 50, .92);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, transform .15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    z-index: 2;
}
.ek-img-picker-tile:hover .ek-img-picker-tile-del { opacity: 1; }
.ek-img-picker-tile-del:hover { background: #c83232; transform: scale(1.1); }

/* ─── Termin-Reihen / Series-Builder (Frontend) ──────────────────────────
   Termin-Block analog Backend: Header-Zeile mit Spalten-Labels, dann jede
   Termin-Row mit den 5 Feldern in einer Reihe (Datum-Start | Zeit-Start |
   Zeit-Ende | Datum-Ende | Action). Freie Zeitangabe darunter über volle
   Breite. Buttons „+ Weiterer Termin" / „+ Wiederholung erstellen" sm-size,
   grün/blau wie Backend. */
.ek-termin-header,
.ek-termin-fields {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr 3fr 2fr;
    gap: .5rem;
    align-items: center;
}
.ek-termin-header { margin-bottom: .35rem; }
.ek-termin-header label {
    display: block;
    font-size: .82rem;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: .03em;
    margin: 0;
}
.ek-termin-header label em {
    color: #ef4848;
    font-style: normal;
    font-size: 1.7em;
    font-weight: 700;
    margin-left: .2em;
    line-height: 1;
    vertical-align: -.15em;
}
/* Termin-Inputs: dunkler Hintergrund + weißer Text (User-Wunsch: Lesbarkeit),
   etwas größer als Standard. Wir ziehen `--ek-input-*` explizit, weil die
   Termin-Inputs nicht in `.ek-profile-field` gewrapped sind. */
.ek-dashboard .ek-termin-fields input,
.ek-dashboard .ek-termin-freetime input {
    width: 100%;
    height: auto;
    margin-bottom: 0;
    padding: .7rem .85rem;
    font-size: 1rem;
    line-height: 1.4;
    background: var(--ek-input-bg, #253040);
    color: var(--ek-input-text, #ffffff);
    border: 1px solid var(--ek-border, #3a4a5c);
    border-radius: 4px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ek-dashboard .ek-termin-fields input::placeholder,
.ek-dashboard .ek-termin-freetime input::placeholder {
    color: #cbd5e1;
    opacity: .65;
}
.ek-dashboard .ek-termin-fields input:focus,
.ek-dashboard .ek-termin-freetime input:focus {
    background: var(--ek-input-bg-focus, #2a3850);
    border-color: #14b8a6;
    outline: none;
    box-shadow: 0 0 0 .15rem rgba(20, 184, 166, .25);
}

.ek-termin-row + .ek-termin-row {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .04);
}
.ek-termin-freetime { margin-top: .55rem; }
.ek-termin-freetime label {
    display: block;
    font-size: .82rem;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: .03em;
    margin: 0 0 .25rem;
}

.btn-ek-remove-termin {
    width: 100%;
    background: transparent;
    border: 1px solid #c83232;
    color: #f8c8c8;
    padding: .35rem .6rem;
    font-size: .85rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.2;
}
.btn-ek-remove-termin:hover { background: #c83232; color: #fff; }

.ek-termin-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}
/* sm-Buttons analog Backend: grün (Hinzufügen) / blau (Wiederholung) */
.btn-ek-add-termin,
.btn-ek-toggle-rrule {
    padding: .35rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .07em;
    color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.2;
}
.btn-ek-add-termin   { background: #28a060; border: 1px solid #34c87a; }
.btn-ek-toggle-rrule { background: #3b6c9a; border: 1px solid #4a86bc; }
.btn-ek-add-termin:hover,
.btn-ek-toggle-rrule:hover { filter: brightness(1.1); }
.ek-termin-actions-hint {
    color: #ffffff;
    font-size: .85rem;
    font-weight: 400;
    margin-left: .25rem;
}

/* Mobile-Fallback: Felder umbrechen */
@media (max-width: 700px) {
    .ek-termin-header { display: none; }
    .ek-termin-fields { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .ek-termin-col-action { grid-column: 1 / -1; }
}

.ek-series-hint {
    background: rgba(20, 184, 166, .08);
    border: 1px solid rgba(20, 184, 166, .35);
    color: #ffffff;
    padding: .55rem .85rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 400;
}
.ek-series-hint-icon { margin-right: .35rem; color: #14b8a6; font-weight: 700; }

.ek-rrule-box {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--ek-border, #2a3850);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}
.ek-rrule-row {
    display: grid;
    grid-template-columns: 3fr 2fr 3fr 2fr;
    gap: .75rem;
    align-items: end;
    margin-bottom: .5rem;
}
.ek-rrule-field label {
    display: block;
    font-size: .82rem;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: .03em;
    margin: 0 0 .25rem;
}
.ek-rrule-field label em {
    color: #ef4848;
    font-style: normal;
    font-size: 1.7em;
    font-weight: 700;
    margin-left: .2em;
    line-height: 1;
    vertical-align: -.15em;
}
.ek-dashboard .ek-rrule-field input,
.ek-dashboard .ek-rrule-field select {
    width: 100%;
    height: auto;
    margin-bottom: 0;
    padding: .55rem .75rem;
    font-size: .9rem;
    line-height: 1.4;
    background: var(--ek-input-bg, #253040);
    color: var(--ek-input-text, #d0dae8);
    border: 1px solid var(--ek-border, #3a4a5c);
    border-radius: 4px;
}
.ek-dashboard .ek-rrule-field input:focus,
.ek-dashboard .ek-rrule-field select:focus {
    background: var(--ek-input-bg-focus, #2a3850);
    border-color: #5a7a9a;
    outline: none;
    box-shadow: 0 0 0 .15rem rgba(90, 122, 154, .25);
}
.ek-rrule-weekly { margin-top: .75rem; }
@media (max-width: 700px) {
    .ek-rrule-row { grid-template-columns: 1fr 1fr; }
}
.ek-rrule-label {
    display: block;
    font-size: .85rem;
    color: #ffffff;
    font-weight: 400;
    margin-bottom: .35rem;
}
.ek-rrule-weekdays {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.ek-rrule-weekday {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--ek-border, #2a3850);
    padding: .35rem .7rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--ek-text, #e4edf6);
}
.ek-rrule-weekday input { margin-right: .35rem; }
.ek-rrule-monthly-day,
.ek-rrule-monthly-nth { margin-top: .75rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.ek-rrule-actions {
    margin-top: .75rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.ek-rrule-actions small { color: #ffffff; font-weight: 400; }
.btn-ek-rrule-generate {
    background: #2476c8;
    border: 1px solid #4a8fdb;
    color: #fff;
    padding: .4rem 1rem;
    font-weight: 600;
    letter-spacing: .05em;
}
.btn-ek-rrule-generate:hover { filter: brightness(1.1); }
.ek-rrule-msg {
    margin-top: .5rem;
    font-size: .85rem;
    min-height: 1em;
}

.ek-series-list {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ek-border, #2a3850);
}
.ek-series-list h4 {
    margin: 0 0 .65rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #ffffff;
    font-weight: 400;
}
.ek-series-table {
    width: 100%;
    border-collapse: collapse;
    color: #ffffff;
    font-weight: 400;
}
.ek-series-table th,
.ek-series-table td {
    padding: .4rem .65rem;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    text-align: left;
    font-weight: 400;
}
.ek-series-row-current {
    background: rgba(20, 184, 166, .1);
    color: var(--ek-text, #e4edf6);
    font-weight: 400;
}
/* „Dieser Termin"-Hinweis: keine Pill, farblich abgesetzter Text — bewusst
   neutraler Ton (Slate-Grau), damit er nicht mit dem Teal-Link verwechselt wird. */
.ek-series-current-badge {
    background: transparent;
    color: #9ab0c4;
    font-size: inherit;
    padding: 0;
    border-radius: 0;
    font-weight: 400;
    letter-spacing: 0;
    font-style: italic;
}
.ek-series-edit-link {
    color: #14b8a6;
    text-decoration: none;
    font-weight: 400;
}
.ek-series-edit-link:hover {
    color: #ffffff;
    text-decoration: underline;
}
.ek-series-row-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.ek-series-delete-btn {
    background: transparent;
    border: 1px solid rgba(255, 80, 80, .35);
    color: #ff7a7a;
    width: 1.4rem;
    height: 1.4rem;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
}
.ek-series-delete-btn:hover {
    background: rgba(255, 80, 80, .15);
    border-color: #ff7a7a;
    color: #ff5050;
}

/* ─────────────────────────────────────────────────────────────────
 * Custom-Tooltips — kurzer Delay statt Browser-Default (~1s).
 * Aktiviert durch ek-tooltips.js (kopiert title → data-ek-tooltip
 * und entfernt title, damit der Browser-Native nicht parallel auftaucht).
 * ───────────────────────────────────────────────────────────────── */
[data-ek-tooltip] {
    position: relative;
}
[data-ek-tooltip]::after {
    content: attr(data-ek-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: #1e2530;
    color: #e4edf6;
    border: 1px solid #3a4a5c;
    border-radius: 4px;
    padding: .3rem .55rem;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease .15s, visibility 0s linear .27s;
    z-index: 10000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
[data-ek-tooltip]:hover::after,
[data-ek-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transition: opacity .12s ease .15s, visibility 0s linear 0s;
}

/* Series-Badge in der Events-Liste — flache Box, Kalender-Icon, größere Schrift. */
.ek-series-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .6rem;
    padding: .15rem .55rem;
    background: rgba(20, 184, 166, .12);
    border: 1px solid rgba(20, 184, 166, .35);
    color: #ffffff;
    border-radius: 3px;
    font-size: .88rem;
    font-weight: 400;
    letter-spacing: 0;
    vertical-align: middle;
    line-height: 1.2;
}

/* ─── ek-richedit Overrides für Veranstalter-Bereich ─────────────────────
   Basis-CSS (`media/com_ekevents/css/ek-richedit.css`) ist auf das Backend-
   Theme abgestimmt; im Frontend wollen wir weißen Text und größeren
   Zeilenabstand (analog Backend TinyMCE 1.7), damit Beschreibung und
   freie Zeitangabe gut lesbar sind. */
.ek-dashboard .ek-richedit {
    background: var(--ek-input-bg, #253040);
    border-color: var(--ek-border, #3a4a5c);
}
.ek-dashboard .ek-richedit-bar {
    background: #1e2530;
    border-bottom-color: #2e3f52;
    padding: 6px;
    gap: 4px;
}
/* Toolbar-Buttons: deutlich größer + besser sichtbar als Default. */
.ek-dashboard .ek-richedit-btn {
    color: #ffffff;
    font-size: 1.05rem;
    padding: 6px 14px;
    min-width: 40px;
    line-height: 1.2;
    border-radius: 4px;
}
.ek-dashboard .ek-richedit-btn:hover { background: #2e3f52; border-color: #3a4a5c; }
.ek-dashboard .ek-richedit-content {
    background: var(--ek-input-bg, #253040);
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
    min-height: 120px;
}
.ek-dashboard .ek-richedit-content p,
.ek-dashboard .ek-richedit-content li,
.ek-dashboard .ek-richedit-content span {
    color: #ffffff;
    line-height: 1.7;
    font-weight: 400;
}
.ek-dashboard .ek-richedit-content strong,
.ek-dashboard .ek-richedit-content b {
    color: #ffffff;
    font-weight: 700;
}
.ek-dashboard .ek-richedit-content:focus {
    background: var(--ek-input-bg-focus, #2a3850);
}
.ek-dashboard .ek-richedit-content[contenteditable="true"]:empty::before {
    color: #cbd5e1;
    opacity: .65;
}
/* Beschreibung kann höher sein als Freie Zeitangabe — über rows-Attribut steuerbar. */
.ek-dashboard textarea[name="beschreibung"] + .ek-richedit .ek-richedit-content,
.ek-dashboard .ek-profile-field .ek-richedit .ek-richedit-content {
    min-height: 180px;
}
.ek-dashboard .ek-termin-freetime .ek-richedit-content {
    min-height: 80px;
}

/* ─── Modale (Series-Edit + Series-Delete) ───────────────────────────────
   Zentriertes Overlay. Farben hartcodiert (NICHT via --ek-*-Vars), weil das
   Modal außerhalb des `.ek-dashboard`-Wrappers gerendert wird und dann die
   :root-Defaults (light) greifen würden. Das Modal soll IMMER dark sein. */
.ek-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.ek-modal {
    background: #1e2530;
    color: #e4edf6;
    border: 1px solid #3a4a5c;
    border-radius: 8px;
    width: min(480px, 96vw);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
}
.ek-modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #3a4a5c;
    font-size: .95rem;
    color: #e4edf6;
}
.ek-modal-body { padding: 1.25rem; color: #e4edf6; }
.ek-modal-body p { margin: 0 0 .85rem; color: #e4edf6; }
.ek-modal-options { display: flex; flex-direction: column; gap: .55rem; }
.ek-modal-option {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid #3a4a5c;
    color: #e4edf6;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.ek-modal-option:hover { background: rgba(20, 184, 166, .1); border-color: rgba(20, 184, 166, .5); }
.ek-modal-option input[type="radio"] { accent-color: #14b8a6; }
.ek-modal-footer {
    padding: .85rem 1.25rem;
    border-top: 1px solid #3a4a5c;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}
/* Modal-Buttons exakt wie die Form-Action-Buttons in .ek-submit-actions
   (Farben + Padding + Font), damit die Modale visuell zur restlichen
   Veranstalter-Oberfläche passen. */
.ek-modal-footer .btn-action {
    appearance: none;
    border: 0;
    border-radius: 5px;
    padding: .55rem 1.1rem;
    font-size: .92rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.3;
    letter-spacing: 0;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s ease;
}
.ek-modal-footer .btn-action:hover { filter: brightness(1.1); }
.ek-modal-footer .btn-cancel { background: #d4a72c; color: #1a1a1a; }
.ek-modal-footer .btn-submit { background: #28a060; }
.ek-modal-footer .btn-delete { background: #c83232; }

/* ─── Startseite (Module mod_ek_*) ────────────────────────── */

/* Gemeinsame Section-Überschrift für alle Home-Module */
.ek-home-section-title {
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0 0 2rem;
    padding: 15px 0;
    color: var(--ek-on-bg-text, #fff);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Optionaler Einleitungstext direkt unter dem Section-Title */
.ek-home-section-intro {
    margin: -1.5rem 0 1.5rem;
    text-align: center;
    color: rgba(255, 255, 255, .85);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}

.ek-home-featured {
    /* Layout (background/border-radius/box-shadow) wird in Gridbox-Section gesetzt */
}

/* mod_ek_featured – 4-Card-Grid responsive */
.ek-home-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1024px) {
    .ek-home-featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .ek-home-featured-grid { grid-template-columns: 1fr; }
}

.ek-home-featured-card {
    display: flex;
    flex-direction: column;
    background: var(--ek-card, #fff);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transition: box-shadow .25s ease, transform .25s ease;
    text-decoration: none;
    color: inherit;
}
.ek-home-featured-card:hover {
    box-shadow: 0 12px 30px rgba(15, 23, 42, .3);
    transform: translateY(-2px);
}

.ek-home-featured-img {
    aspect-ratio: 16 / 10;
    background: var(--ek-img-bg, #eef2f6);
    overflow: hidden;
}
.ek-home-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ek-home-featured-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--ek-img-icon, #94a3b8);
    font-size: 2.4rem;
}

.ek-home-featured-body {
    padding: .9rem 1rem 1.1rem;
    display: flex; flex-direction: column;
}
.ek-home-featured-titel {
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: .06em;
    margin: 0;
    line-height: 1.35;
    color: var(--ek-on-card-text, inherit);
}
.ek-home-featured-datum {
    font-size: 1rem;
    font-weight: 400;
    color: var(--ek-muted, #64748b);
    letter-spacing: .02em;
    margin-top: .35rem;
}
.ek-home-featured-loc {
    font-size: 1rem;
    font-weight: 400;
    color: var(--ek-muted, #64748b);
    margin-top: 0;
}

/* mod_ek_quickpicks – Suche + Stadt + Pills */
.ek-home-quickpicks {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 9999 !important;
    overflow: visible !important;
}
.ek-home-quickpicks-form {
    position: relative;
    z-index: 9999 !important;
    overflow: visible !important;
}
.ek-home-quickpicks .choices {
    position: relative;
    z-index: 9999 !important;
}
.ek-home-quickpicks .choices.is-open,
.ek-home-quickpicks .choices.is-focused {
    z-index: 99999 !important;
}
.ek-home-quickpicks .choices__list--dropdown,
.ek-home-quickpicks .choices__list[aria-expanded] {
    z-index: 99999 !important;
    position: absolute !important;
}
/* Quickpicks-Form Responsive-Layout:
   - Mobile (<600px):  alles untereinander (1 Spalte), Button voll
   - Tablet (600–1099): 2x2 + Button volle Breite mittig
   - Desktop (≥1100): alle 4 Filter + Button in EINER Reihe */
.ek-home-quickpicks-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}
.ek-home-quickpicks-form .ek-home-quickpicks-submit {
    padding: 0 2.5rem;
}

@media (min-width: 600px) {
    .ek-home-quickpicks-form {
        grid-template-columns: 1fr 1fr;
    }
    .ek-home-quickpicks-form .ek-home-quickpicks-submit {
        grid-column: 1 / -1;
        justify-self: center;
        margin: .5rem 0 0;
    }
}

@media (min-width: 1100px) {
    /* 3 Spalten — 6 Felder verteilen sich auf 2 Reihen:
       Reihe 1: Suche / Stadt / Kategorie
       Reihe 2: Stadtevent / Festival / Submit */
    .ek-home-quickpicks-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .ek-home-quickpicks-form .ek-home-quickpicks-submit {
        grid-column: auto;
        justify-self: stretch;
        margin: 0;
    }
}
/* Höhere Specificity + !important gegen Gridbox-Defaults (input { background:#fff }) */
.ek-home-quickpicks .ek-home-quickpicks-search,
.ek-home-quickpicks .ek-home-quickpicks-city {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 46px !important;
    padding: 0 1rem !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
.ek-home-quickpicks .ek-home-quickpicks-search::placeholder { color: rgba(255, 255, 255, .55) !important; }
.ek-home-quickpicks .ek-home-quickpicks-search:focus,
.ek-home-quickpicks .ek-home-quickpicks-city:focus {
    outline: none;
    border-color: var(--ek-accent, #0d9488) !important;
    background: rgba(255, 255, 255, .14) !important;
}

/* Choices.js-Wrapper im Quickpicks-Block — gleiche Optik wie native Inputs.
   Schriftgröße via Choices-CSS-Variablen erhöht (Default 16/14/12 → 16/16/14). */
.ek-home-quickpicks .choices {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    --choices-font-size-lg: 16px;
    --choices-font-size-md: 16px;
    --choices-font-size-sm: 14px;
    font-size: 1rem;
}
.ek-home-quickpicks .choices__inner {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 2.25rem 0 1rem !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    border-radius: 8px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.ek-home-quickpicks .choices__list--single .choices__item,
.ek-home-quickpicks .choices__input {
    color: #fff !important;
    background: transparent !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ek-home-quickpicks .choices__placeholder { color: rgba(255, 255, 255, .55) !important; opacity: 1; }
/* Dropdown-Styles greifen auch im <body> (Hack: appendTo body in JS).
   Eigene Klasse .ek-home-quickpicks-dropdown wird im JS gesetzt. */
.ek-home-quickpicks-dropdown,
.ek-home-quickpicks .choices__list--dropdown,
.ek-home-quickpicks .choices__list[aria-expanded] {
    background: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    border-radius: 8px !important;
    color: #fff !important;
}
.ek-home-quickpicks-dropdown .choices__item,
.ek-home-quickpicks .choices__list--dropdown .choices__item,
.ek-home-quickpicks .choices__list[aria-expanded] .choices__item {
    color: #fff !important;
    padding: 4px 10px !important;
    line-height: 1.3 !important;
    word-break: normal !important;
    font-size: 1rem !important;
}
.ek-home-quickpicks-dropdown .choices__item--selectable.is-highlighted,
.ek-home-quickpicks .choices__list--dropdown .choices__item--selectable.is-highlighted,
.ek-home-quickpicks .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(255, 255, 255, .12) !important;
}
.ek-home-quickpicks-dropdown .choices__input {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    margin: 4px !important;
}
.ek-home-quickpicks-dropdown .choices__input::placeholder { color: rgba(255, 255, 255, .55) !important; }
.ek-home-quickpicks-submit {
    height: 46px;
    padding: 0 1.4rem;
    background: var(--ek-accent, #0d9488);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.ek-home-quickpicks-submit:hover { background: var(--ek-accent-hover, #14b8a6); }

.ek-home-quickpicks-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}
.ek-home-quickpicks-pill,
.ek-home-quickpicks-pill:link,
.ek-home-quickpicks-pill:visited,
.ek-home-quickpicks-pill:hover,
.ek-home-quickpicks-pill:focus,
.ek-home-quickpicks-pill:active {
    color: #fff !important;
    text-decoration: none;
}
.ek-home-quickpicks-pill {
    display: inline-block;
    padding: .55rem 1.2rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: .95rem;
    transition: background .15s, border-color .15s, transform .15s;
}
.ek-home-quickpicks-pill:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .6);
    transform: translateY(-1px);
}
/* alter flex-direction-Block obsolet seit Grid-Umstellung — mobile-Override
   ist nun in der .ek-home-quickpicks-form-Definition oben */

/* mod_ek_categories – Kategorien-Kacheln auf der Startseite */
.ek-home-categories {
    /* Layout (background/border-radius/box-shadow) wird in Gridbox-Section gesetzt */
}
.ek-home-categories-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}
@media (max-width: 1280px) {
    .ek-home-categories-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .ek-home-categories-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .ek-home-categories-grid { grid-template-columns: repeat(2, 1fr); }
}

.ek-home-categories-tile {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    text-decoration: none !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transition: box-shadow .2s ease, transform .2s ease;
}
.ek-home-categories-tile:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, .35);
    transform: translateY(-2px);
}
.ek-home-categories-tile-img {
    position: absolute;
    inset: 0;
    background: var(--ek-cat-color, #6c757d);
}
.ek-home-categories-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ek-home-categories-tile-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
    color: rgba(255, 255, 255, .5);
}
/* Dunkler Verlauf von unten, damit der Titel-Text auf jedem Bild lesbar bleibt */
.ek-home-categories-tile-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .15) 50%, transparent 100%);
}
.ek-home-categories-tile-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .6rem .8rem .7rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* mod_ek_festivals – Festival-Kacheln auf der Startseite/Festivals-Seite.
   Card-Struktur: Bild-/Gradient-Block oben (aspect 16:10) + Body unten
   mit Titel, Datum-Range, Event-Count. Gridbox-Breakpoints. */
.ek-home-festivals {
    /* Layout (background/border-radius/box-shadow) wird in Gridbox-Section gesetzt */
}
.ek-home-festivals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
@media (max-width: 80rem) {
    .ek-home-festivals-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 64rem) {
    .ek-home-festivals-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 48rem) {
    .ek-home-festivals-grid { grid-template-columns: 1fr; }
}

.ek-home-festivals-tile {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
    transition: box-shadow .2s ease, transform .2s ease;
}
.ek-home-festivals-tile:hover {
    box-shadow: none;
    transform: translateY(-2px);
}
.ek-home-festivals-tile-img {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #6c757d;
    overflow: hidden;
}
.ek-home-festivals-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Dezenter dunkler Verlauf nur unten — Bild bleibt im oberen Bereich klar erkennbar */
.ek-home-festivals-tile-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .15) 0%, transparent 40%);
    pointer-events: none;
}
.ek-home-festivals-tile-body {
    padding: .9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    text-align: center;
}
.ek-home-festivals-tile-title {
    color: #1f2937;
    line-height: 1.25;
}
.ek-home-festivals-tile-range {
    color: var(--ek-festival, #a06832);
    letter-spacing: .04em;
}
.ek-home-festivals-tile-count {
    color: #6c757d;
}
.ek-home-festivals-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #6c757d;
}

/* mod_ek_cities – Städte-Quick-Links auf der Startseite */
.ek-home-cities {
    /* Layout (background/border-radius/box-shadow) wird in Gridbox-Section gesetzt */
}
.ek-home-cities-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}
.ek-home-cities-list li {
    margin: 0;
    padding: 0;
}
.ek-home-cities-link,
.ek-home-cities-link:link,
.ek-home-cities-link:visited,
.ek-home-cities-link:hover,
.ek-home-cities-link:focus,
.ek-home-cities-link:active {
    color: #fff !important;
    text-decoration: none !important;
}
.ek-home-cities-link {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .55rem 1rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    font-size: 1rem;
    transition: background .15s, border-color .15s, transform .15s;
}
.ek-home-cities-link:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .55);
    transform: translateY(-1px);
}
.ek-home-cities-name { font-weight: 500; }
.ek-home-cities-count {
    font-size: .85rem;
    opacity: .75;
}

/* mod_ek_map – Mini-Karte auf der Startseite */
.ek-home-map {
    /* Layout (background/border-radius/box-shadow) wird in Gridbox-Section gesetzt */
}
.ek-home-map-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
}
.ek-home-map-inner {
    height: var(--ek-home-map-h, 420px);
    width: 100%;
}
.ek-home-map-cta {
    margin-top: 1rem;
    text-align: center;
}
.ek-home-map-cta a,
.ek-home-map-cta a:link,
.ek-home-map-cta a:visited,
.ek-home-map-cta a:hover,
.ek-home-map-cta a:focus {
    color: #fff !important;
    text-decoration: none !important;
    display: inline-block;
    padding: .5rem 1.2rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: .95rem;
    transition: background .15s, border-color .15s;
}
.ek-home-map-cta a:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .6);
}

/* mod_ek_kalenderhome – Newsletter-CTA-Block */
.ek-home-kalenderhome {
    /* Layout (background/border-radius/box-shadow) wird in Gridbox-Section gesetzt */
}
.ek-home-kalenderhome-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: 1rem 0 .5rem;
}
.ek-home-kalenderhome-icon {
    color: var(--ek-accent, #0d9488);
    margin-bottom: .5rem;
}
.ek-home-kalenderhome-heading {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: #fff;
    margin: 0 0 .6rem;
}
.ek-home-kalenderhome-intro {
    color: rgba(255, 255, 255, .85);
    font-size: 1rem;
    margin: 0 0 1.2rem;
}
.ek-home-kalenderhome-form {
    margin: 0;
}
.ek-home-kalenderhome-label {
    display: block;
    color: rgba(255, 255, 255, .7);
    font-size: .82rem;
    text-align: left;
    margin-bottom: .35rem;
}
.ek-home-kalenderhome-row {
    display: flex;
    gap: .5rem;
}
.ek-home-kalenderhome .ek-home-kalenderhome-email {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 46px !important;
    padding: 0 1rem !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
.ek-home-kalenderhome .ek-home-kalenderhome-email::placeholder { color: rgba(255, 255, 255, .55) !important; }
.ek-home-kalenderhome .ek-home-kalenderhome-email:focus {
    outline: none;
    border-color: var(--ek-accent, #0d9488) !important;
    background: rgba(255, 255, 255, .14) !important;
}
.ek-home-kalenderhome-submit {
    height: 46px;
    padding: 0 1.4rem;
    background: var(--ek-accent, #0d9488);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.ek-home-kalenderhome-submit:hover { background: var(--ek-accent-hover, #14b8a6); }
.ek-home-kalenderhome-note {
    margin-top: .75rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .55);
    font-style: italic;
    text-align: left;
}
.ek-home-kalenderhome-status {
    margin-top: .75rem;
    font-size: .92rem;
    color: rgba(255, 255, 255, .85);
    min-height: 1.2em;
}
.ek-home-kalenderhome-status.is-success {
    color: #14b8a6;
    font-weight: 500;
}
@media (max-width: 540px) {
    .ek-home-kalenderhome-row { flex-direction: column; }
    .ek-home-kalenderhome-submit { width: 100%; }
}

/* Festival-Zeitraum als Subline direkt unter dem H1 auf der Filter-Seite */
.ek-list-festival-range {
    margin: 1.2rem 0 1rem;
    text-align: center;
    color: var(--ek-text, #fff);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: .03em;
}
.ek-list-hero .ek-list-festival-range {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* Subheadline unter H1 (Default-State, kein Festival-Filter).
   Werte aligned mit dem, was Gridbox auf der Festival-Seite für die Sub setzt
   (font-size 1.75rem, line-height 3rem) — damit die Subs auf beiden Seiten
   konsistent wirken. */
.ek-list-subtitle {
    margin: 1.2rem 0 0;
    text-align: center;
    color: #fff;
    font-size: 1.75rem;
    line-height: 3rem;
    letter-spacing: .02em;
}
.ek-list-hero .ek-list-subtitle {
    text-shadow: 0 2px 4px rgba(0, 0, 0, .75),
                 0 1px 2px rgba(0, 0, 0, .85);
}

/* Festival-Block in der Detail-Sidebar */
.ek-content-side .ek-info-value a,
.ek-content-side .ek-info-value a:link,
.ek-content-side .ek-info-value a:visited,
.ek-content-side .ek-info-value a:hover,
.ek-content-side .ek-info-value a:focus {
    color: #fff !important;
    text-decoration: none;
    font-weight: 500;
}
.ek-content-side .ek-info-value a:hover {
    text-decoration: underline;
}
.ek-festival-range {
    color: #fff;
    font-size: 1.05rem;
    display: inline-block;
    margin-top: .25rem;
}
.ek-festival-url-link,
.ek-festival-url-link:link,
.ek-festival-url-link:visited {
    display: inline-block;
    margin-top: .3rem;
    color: var(--ek-accent-hover, #14b8a6);
    text-decoration: none;
    font-size: .92rem;
}
.ek-festival-url-link:hover { text-decoration: underline; }

/* Gridbox setzt auf body:not(.com_gridbox) .body einen Margin, der zwischen
   Site-Header und unserem Hero einen unerwünschten Abstand erzeugt. Auf
   com_ekevents-Seiten ziehen wir den auf 0. */
body.com_ekevents .body {
    margin: 0 !important;
}

/* mod_ek_cta – Generischer Call-to-Action-Block */
.ek-cta {
    color: #fff;
    text-align: center;
}
.ek-cta-icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: .8rem;
}
.ek-cta-heading {
    margin: 0 0 .6rem;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.ek-cta-intro {
    color: rgba(255, 255, 255, .92);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1.2rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.ek-cta-button,
.ek-cta-button:link,
.ek-cta-button:visited,
.ek-cta-button:hover,
.ek-cta-button:focus,
.ek-cta-button:active {
    display: inline-block;
    padding: .7rem 1.6rem;
    background: var(--ek-accent, #0d9488);
    color: #fff !important;
    text-decoration: none !important;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .02em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    transition: background .15s, transform .15s;
}
.ek-cta-button:hover {
    background: var(--ek-accent-hover, #14b8a6);
    transform: translateY(-1px);
}

/* Card-Variante: eigener heller Hintergrund */
.ek-cta--card {
    background: rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

/* Hero-Variante: transparent, fügt sich in Hero ein */
.ek-cta--hero {
    padding: 0;
}

/* ─── Vergleichstabelle „Dein Beitrag" ──────────────────────────
   Dark-Theme als Default (passt zum dunklen Gridbox-Section-Hintergrund
   im Rest der Site). Wird über ein Gridbox Custom-HTML-Widget eingebaut.
   Horizontaler Scroll-Container auf schmalen Viewports. */
.ek-compare-wrap {
    overflow-x: auto;
    margin: 1rem 0;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.ek-compare {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3),
                0 24px 60px rgba(0, 0, 0, .45);
}
.ek-compare th,
.ek-compare td {
    padding: .9rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    vertical-align: top;
    color: #fff;
}
.ek-compare tbody th {
    font-weight: 400;
    width: 50%;
}
.ek-compare thead th {
    background: rgba(255, 255, 255, .08);
    text-align: center;
    border-bottom: 2px solid rgba(13, 148, 136, .5);
}
.ek-compare thead th.ek-compare-col--premium {
    background: var(--ek-accent, #0d9488);
    color: #fff;
    border-bottom-color: var(--ek-accent, #0d9488);
}
.ek-compare-feature {
    background: transparent !important;
    border-bottom-color: transparent !important;
}
.ek-compare tbody td {
    text-align: center;
    width: 25%;
}
.ek-compare-yes {
    color: #14b8a6;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
}
.ek-compare-no {
    color: rgba(255, 255, 255, .3);
    font-size: 1.4rem;
    line-height: 1;
}
.ek-compare-highlight th,
.ek-compare-highlight td {
    background: rgba(255, 255, 255, .06);
}
.ek-compare-cost {
    background: rgba(255, 255, 255, .04);
}
.ek-compare-cost th,
.ek-compare-cost td {
    font-weight: 700;
    border-bottom: 0;
}
.ek-compare small {
    display: block;
    margin-top: .25rem;
    color: rgba(255, 255, 255, .65);
    font-size: .85em;
    font-weight: 400;
}
@media (max-width: 48rem) {
    .ek-compare th,
    .ek-compare td {
        padding: .6rem .7rem;
    }
    .ek-compare-yes,
    .ek-compare-no {
        font-size: 1.2rem;
    }
}

/* ─── .ek-auth — Login/Register-Forms ────────────────────────────────
   Wird sowohl von der Dashboard-Page (/mein-bereich Login + Register) als
   auch von mod_ek_auth (Login/Register-Modul für Gridbox-Modals) genutzt.
   Die Dark-Theme-Variablen für `.ek-auth` (siehe Block oben) liefern
   die Farben; hier die strukturellen Regeln.
   Modul-Variante hat zusätzliche Klasse `.ek-auth--module` und unterdrückt
   das page-level body-Margin-Override. */

/* Body-Margin nur für die standalone Dashboard-Variante, nicht für Modal-Modul */
body .body:has(.ek-auth:not(.ek-auth--module)) { margin: 50px 0 !important; }

.ek-auth {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}
.ek-auth--module {
    max-width: 100%;
    padding: 0;
}
.ek-auth-header {
    text-align: center;
    margin-bottom: 2rem;
}
.ek-auth-header h1 {
    margin: 0 0 .5rem;
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--ek-on-bg-text, #f8fafc);
}
.ek-auth-header p {
    margin: 0 auto;
    max-width: 720px;
    color: var(--ek-on-bg-text, #f8fafc);
    font-size: 1.15rem;
    line-height: 1.55;
    letter-spacing: .03em;
    text-align: center;
}

.ek-auth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 50rem) {
    .ek-auth-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.ek-register-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}
.ek-register-card { padding: 2rem 2rem 1.75rem; }

.ek-auth-card {
    background: var(--ek-card, #eaeef4);
    color: var(--ek-text, #0f172a);
    border: 1px solid var(--ek-border, transparent);
    border-radius: 14px;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.ek-auth-card h2 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: #fff;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--ek-border, #cbd5e1);
}
.ek-auth-card-register {
    background: linear-gradient(135deg, var(--ek-accent, #0d9488) 0%, var(--ek-accent-hover, #14b8a6) 100%);
    color: #fff;
}
.ek-auth-card-register h2 { border-bottom-color: rgba(255,255,255,.25); }
.ek-auth-card-register p  { line-height: 1.55; opacity: .95; }

.ek-auth-form { display: flex; flex-direction: column; gap: .85rem; }
.ek-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 48rem) { .ek-auth-row { grid-template-columns: 1fr; } }
.ek-auth-field { display: flex; flex-direction: column; gap: .3rem; }
.ek-auth-field span { font-size: .9rem; color: var(--ek-text); font-weight: 500; }
.ek-auth-field span em {
    color: #c83232;
    font-style: normal;
    font-size: 1.15em;
    font-weight: 600;
    margin-left: .15em;
    line-height: 1;
}
.ek-auth-field input {
    padding: .65rem .85rem;
    border: 1px solid var(--ek-border, #cbd5e1);
    border-radius: 6px;
    background: var(--ek-input-bg, #fff);
    font-size: 1rem;
    color: var(--ek-input-text, #0f172a);
}
.ek-auth-field input:focus {
    outline: none;
    border-color: var(--ek-accent, #0d9488);
    background: var(--ek-input-bg-focus, #fff);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .25);
}

.ek-auth-checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .92rem;
    color: var(--ek-text);
    margin: .25rem 0 0;
}
.ek-auth-checkbox input { margin: 0; }

.ek-auth-hint {
    margin: -2rem 0 -.25rem;
    font-size: .85rem;
    color: var(--ek-muted, #64748b);
    padding-left: .25rem;
}

.ek-auth-submit {
    background: var(--ek-accent, #0d9488);
    border: 0;
    color: #fff !important;
    padding: .75rem 1.25rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    transition: background .15s ease;
    margin-top: .35rem;
}
.ek-auth-submit:hover {
    background: var(--ek-accent-hover, #14b8a6);
    color: #fff !important;
}
.ek-auth-card-register .ek-auth-submit {
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .35);
    margin-top: 1rem;
    width: 100%;
}
.ek-auth-card-register .ek-auth-submit:hover {
    background: rgba(255, 255, 255, .25);
}

.ek-auth-links {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .9rem;
}
.ek-auth-links a {
    color: #5eead4;
    text-decoration: none;
}
.ek-auth-links a:hover { color: #99f6e4; text-decoration: underline; }

.ek-auth-back {
    margin: 1.25rem 0 0;
    text-align: center;
    color: var(--ek-text);
    font-size: .92rem;
}
.ek-auth-back a {
    color: var(--ek-accent, #0d9488);
    text-decoration: none;
    font-weight: 500;
}
.ek-auth-back a:hover { text-decoration: underline; }

.ek-auth-register-intro { line-height: 1.55; opacity: .95; margin: 0 0 1.25rem; }

/* Intro-Block (Erklärung + Schritte) im Register-Modal — sitzt zwischen
   H2 und Form-Feldern. Auf dem dunklen Modal-Card-Hintergrund gilt die
   gleiche Steps-Optik wie auf der ursprünglichen Gradient-Register-Card. */
.ek-register-intro {
    margin: 0 0 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--ek-border, rgba(255, 255, 255, .15));
}

/* Modal-Kontext: Gridbox-Modal-Container kann Farb-Inheritance brechen.
   Im .ek-auth--module-Scope Text explizit weiß setzen, damit Intro,
   Step-Beschreibungen, Field-Labels und Privacy-Block lesbar bleiben.
   Bewusst nicht via Universal-Selektor — Input-Texte und Accent-Links
   sollen ihre eigenen Farben behalten. */
.ek-auth--module,
.ek-auth--module .ek-auth-card,
.ek-auth--module .ek-auth-card h2,
.ek-auth--module p,
.ek-auth--module li,
.ek-auth--module strong,
.ek-auth--module .ek-auth-field span,
.ek-auth--module .ek-auth-checkbox,
.ek-auth--module .ek-auth-checkbox span,
.ek-auth--module .ek-auth-register-intro,
.ek-auth--module .ek-auth-steps-head,
.ek-auth--module .ek-auth-steps strong,
.ek-auth--module .ek-auth-steps span,
.ek-auth--module .ek-privacy-block p,
.ek-auth--module .ek-auth-hint,
.ek-auth--module .ek-auth-back,
.ek-auth--module .ek-auth-loggedin-note {
    color: #fff;
}
/* Privacy-Hinweis und Form-Hint sind nicht der Haupt-Content → leicht
   gedimmt, damit sie als sekundär erkennbar bleiben. */
.ek-auth--module .ek-privacy-block p,
.ek-auth--module .ek-auth-hint {
    color: rgba(255, 255, 255, .8);
}
.ek-auth--module .ek-auth-steps span {
    color: rgba(255, 255, 255, .9);
}

/* Inputs im Modul-Kontext (Login-/Register-Modal) UND in den Branded-
   Standalone-Pages (Joomla-com_users-Overrides remind/reset): Dark-Glass-
   Look wie in Filter-Bar / Quickpicks. Damit fügt sich das Form farblich
   in den Rest der Site ein statt als solider hellblauer Block zu stechen. */
.ek-auth--module .ek-auth-field input,
.ek-auth--branded .ek-auth-field input {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    border-radius: 8px;
    height: 42px;
    padding: 0 .85rem;
}
.ek-auth--module .ek-auth-field input:focus,
.ek-auth--branded .ek-auth-field input:focus {
    background: rgba(255, 255, 255, .14);
    border-color: var(--ek-accent, #0d9488);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .25);
}
.ek-auth--module .ek-auth-field input::placeholder,
.ek-auth--branded .ek-auth-field input::placeholder {
    color: rgba(255, 255, 255, .55);
}

/* Pflichtfeld-Sterne deutlich größer + leuchtkräftiger */
.ek-auth--module .ek-auth-field span em,
.ek-auth--branded .ek-auth-field span em {
    color: #ff6b6b;
    font-size: 1.5em;
    font-weight: 700;
    margin-left: .3em;
    vertical-align: middle;
    line-height: 0;
}

.ek-auth-steps-head {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 .65rem;
    color: rgba(255, 255, 255, .85);
    font-weight: 500;
}
.ek-auth-steps {
    list-style: none;
    counter-reset: ek-step;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.ek-auth-steps li {
    counter-increment: ek-step;
    padding-left: 2.4rem;
    position: relative;
    line-height: 1.45;
}
.ek-auth-steps li::before {
    content: counter(ek-step);
    position: absolute;
    left: 0;
    top: -.05em;
    width: 1.7rem;
    height: 1.7rem;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    text-align: center;
    line-height: 1.6rem;
    font-size: .85rem;
    font-weight: 500;
}
.ek-auth-steps strong { display: block; font-weight: 500; font-size: .95rem; }
.ek-auth-steps span { display: block; font-size: .98rem; line-height: 1.5; opacity: .9; margin-top: .2rem; }

.ek-auth-disabled-note {
    background: rgba(0, 0, 0, .15);
    border-radius: 6px;
    padding: .75rem 1rem;
    margin-top: 1rem;
    font-size: .9rem;
}
.ek-auth-loggedin-note {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--ek-text, #fff);
}

/* AJAX-Feedback-Boxen (Errors + Success) — werden per JS sichtbar gemacht */
.ek-auth-errors,
.ek-auth-success {
    display: none;
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border-radius: 6px;
    font-size: .92rem;
    line-height: 1.45;
}
.ek-auth-errors.is-visible,
.ek-auth-success.is-visible { display: block; }
.ek-auth-errors {
    background: rgba(200, 50, 50, .15);
    border: 1px solid rgba(200, 50, 50, .4);
    color: #fca5a5;
}
.ek-auth-errors-list {
    list-style: disc;
    margin: 0;
    padding-left: 1.25rem;
}
.ek-auth-errors-list li + li { margin-top: .2rem; }
.ek-auth-success {
    background: rgba(13, 148, 136, .18);
    border: 1px solid rgba(13, 148, 136, .45);
    color: #5eead4;
}

/* Submit-Button im "lädt"-Zustand */
.ek-auth-submit:disabled {
    opacity: .65;
    cursor: progress;
}

.ek-privacy-block {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--ek-border);
    border-left: 3px solid var(--ek-accent, #0d9488);
    border-radius: 6px;
    padding: .85rem 1rem;
    margin-top: .5rem;
}
.ek-privacy-block p {
    margin: 0 0 .85rem;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--ek-on-card-text, #334155);
}
.ek-privacy-checkbox {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--ek-text);
    cursor: pointer;
}
.ek-privacy-checkbox input {
    margin: 0;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.ek-privacy-checkbox a {
    color: var(--ek-accent, #0d9488);
    text-decoration: underline;
    font-weight: 500;
}
.ek-privacy-checkbox a:hover { text-decoration: none; }

/* ─── Hero-Höhe zentral für alle Pages ──────────────────────────
   Gridbox setzt für jede Section eine eigene min-height per ID-Selektor
   (z.B. `#item-1778769999915 { min-height: 50px }`). Damit unsere
   Hero-Sections auf allen Pages identische Höhe haben, vergeben wir
   die Klasse `.ek-page-hero` auf der jeweiligen Hero-Section in Gridbox.
   `!important` schlägt Gridbox' ID-spezifische min-height. */
.ek-page-hero,
.ek-list-hero {
    min-height: 550px !important;
    box-sizing: border-box;
}
/* Inhalt im Hero vertikal zentrieren (Flex). Gridbox-Sections nutzen
   `display: block` per Default → mit !important auf flex umstellen.
   Inner-Wrapper bekommt width:100% damit Rows/Columns ihre normale
   Breite behalten. */
.ek-page-hero {
    display: flex !important;
    align-items: center !important;
    flex-direction: column;
    justify-content: center;
}
.ek-page-hero > * {
    width: 100%;
}

/* ─── OL/UL-Listen weiß auf dunklen Gridbox-Sections ────────────────
   Greift global, da bisher kein OL/UL auf hellem Hintergrund eingesetzt
   wird. Falls später konfliktiert: per Section-Klasse scopen, z.B.
   `.ek-dark-section ol li, .ek-dark-section ul li`. */
ol,
ol li,
ol li *,
ol li::marker,
ul,
ul li,
ul li *,
ul li::marker {
    color: #fff !important;
}

/* ─── mod_ek_articles — generisches Artikel-Modul ──────────────────
   Zwei Layouts: featured-card (1 großer Beitrag) und list-compact
   (Card-Grid mehrerer Beiträge). Wird u.a. für Kulturpost-Latest +
   Kulturpost-Archiv eingesetzt. */

.ek-articles {
    /* Layout (background/border-radius/box-shadow) wird in Gridbox-Section gesetzt */
}

/* ── Featured-Card-Layout (großer einzelner Beitrag) ── */
.ek-articles-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    background: rgba(255, 255, 255, .05);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}
@media (min-width: 48rem) {
    .ek-articles-featured {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }
}
.ek-articles-featured-img {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
}
.ek-articles-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.ek-articles-featured-img:hover img {
    transform: scale(1.03);
}
.ek-articles-featured-body {
    padding: 1.5rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    color: #fff;
}
.ek-articles-featured-date {
    color: rgba(255, 255, 255, .65);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .82rem;
}
.ek-articles-featured-title {
    margin: 0;
    color: #fff;
    line-height: 1.25;
}
.ek-articles-featured-title a {
    color: #fff;
    text-decoration: none;
}
.ek-articles-featured-title a:hover {
    color: var(--ek-accent-hover, #14b8a6);
}
.ek-articles-featured-intro {
    margin: 0;
    color: rgba(255, 255, 255, .85);
    line-height: 1.55;
}
.ek-articles-featured-link {
    margin-top: auto;
    align-self: flex-start;
    color: var(--ek-accent-hover, #14b8a6);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: .03em;
}
.ek-articles-featured-link:hover {
    color: #fff;
}

/* ── List-Compact-Layout (Card-Grid mehrerer Beiträge) ── */
.ek-articles-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 48rem) {
    .ek-articles-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
    .ek-articles-list-grid { grid-template-columns: repeat(3, 1fr); }
}
.ek-articles-list-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .15);
    transition: box-shadow .2s ease, transform .2s ease;
}
.ek-articles-list-card:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, .3);
    transform: translateY(-2px);
}
.ek-articles-list-img {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
}
.ek-articles-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ek-articles-list-body {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
}
.ek-articles-list-date {
    color: rgba(255, 255, 255, .65);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .78rem;
}
.ek-articles-list-title {
    margin: 0;
    line-height: 1.3;
    color: #fff;
}
.ek-articles-list-title a {
    color: #fff;
    text-decoration: none;
}
.ek-articles-list-title a:hover {
    color: var(--ek-accent-hover, #14b8a6);
}
.ek-articles-list-intro {
    margin: 0;
    color: rgba(255, 255, 255, .8);
    font-size: .92rem;
    line-height: 1.5;
}