/*
 * Event-Liste und Event-Karte.
 *
 * PLAIN CSS, KEIN SCSS UND KEIN BUILD — dieselbe Begruendung wie in
 * categories.css: das Projekt hat bewusst keinen Node-Schritt, und lea_events
 * haengt sich nicht in die SCSS-Kette des Themes.
 *
 * Farben kommen aus den Custom Properties von bootstrap_package, jeweils mit
 * hartem Rueckfallwert. Laeuft das Element einmal ohne Theme, sieht es
 * trotzdem aus wie gedacht.
 *
 * NICHT in yavi_lucerne ablegen — das wird beim naechsten yavi-Update
 * ueberschrieben.
 */

.lea-events {
    --lea-ev-ink: var(--bs-primary, #0a1b3e);
    --lea-ev-accent: var(--bs-secondary, #b63032);
    --lea-ev-muted: #5b6570;
    --lea-ev-line: #e7ecf5;
    --lea-ev-field: #dde2ea;
    --lea-ev-radius: 18px;
}

/* ------------------------------------------------------------------ Filter */

/*
 * KEINE EIGENE FLAECHE UM DEN FILTER. Der Entwurf legt ihn auf ein helles Band;
 * im Seitenzusammenhang war das eine Kachel zu viel — der Rahmen des
 * Inhaltselements bleibt deshalb unangetastet, und die Leiste traegt ihre
 * Kante selbst.
 */
.lea-event-filter__form {
    margin-bottom: 26px;
}

/*
 * Die Leiste steht im Filter auf heller Flaeche und bekommt deshalb — wie im
 * Such-Overlay — eine Kante. Vier Felder statt drei: "Von" und "Bis" sind
 * beide Datumsfelder und teilen sich, was uebrig bleibt.
 */
.lea-search--filter {
    border: 1px solid var(--lea-search-border);
}

/*
 * DIE FILTERLEISTE DARF UMBRECHEN, die in Buehne und Overlay nicht.
 *
 * Sie traegt vier Felder statt drei, und mit einem Standort sechs. Ohne
 * Umbruch nimmt sich jedes feste Feld seinen Platz und "Was" bleibt als
 * einziges dehnbares Feld mit ein paar Pixeln zurueck — sichtbar war vom
 * Platzhalter noch "Eve". Mit Umbruch rutscht stattdessen ab, was nicht mehr
 * hineinpasst.
 */
.lea-search--filter {
    flex-wrap: wrap;
}

.lea-search--filter .lea-search__field--what {
    min-width: 180px;
}

/*
 * Das Fieldset unter der Leiste. Border und Padding weg — ein Fieldset bringt
 * beides von Haus aus mit, und der Rahmen um die Pillen waere ein Kasten im
 * Kasten.
 */
.lea-event-filter__categories {
    margin: 30px 0 0;
    padding: 0;
    border: 0;
}

.lea-event-filter__categories legend {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    padding: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8c95a5;
}

.lea-event-filter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    clear: both;
}

/*
 * DIE ANKREUZFELDER BLEIBEN ANKREUZFELDER.
 *
 * Sichtbar ist die Pille daneben, bedient wird weiterhin das input — nur so
 * funktionieren Tastatur, Vorlesesoftware und das Absenden ohne JavaScript
 * unveraendert. `display: none` waere hier der Fehler: ein so verstecktes Feld
 * ist nicht mehr fokussierbar, und die Kategorien waeren per Tastatur
 * unerreichbar. (Der Entwurf benutzt an dieser Stelle Knoepfe mit
 * aria-pressed — die brauchen JavaScript und schicken nichts ab.)
 */
.lea-event-filter__category input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lea-event-filter__category span {
    display: inline-block;
    padding: 10px 20px;
    border: 1.5px solid #d8dfeb;
    border-radius: 999px;
    background: #fff;
    color: var(--lea-ev-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.lea-event-filter__category:hover span {
    border-color: var(--lea-ev-ink);
}

.lea-event-filter__category input:checked + span {
    border-color: var(--lea-ev-ink);
    background: var(--lea-ev-ink);
    color: #fff;
}

/*
 * Der Fokusring gehoert an die Pille, nicht ans versteckte Feld — sonst
 * springt er beim Durchtabben an eine Stelle, an der nichts zu sehen ist.
 */
.lea-event-filter__category input:focus-visible + span {
    outline: 2px solid var(--lea-ev-accent);
    outline-offset: 2px;
}

/*
 * ZURUECKSETZEN ALS ICON (Entwurf suchform.html).
 *
 * Das Wort war fast so breit wie "Suchen" und hat die Leiste auf dem Handy
 * umbrechen lassen; der Pfeil sagt dasselbe auf einem Quadrat neben dem
 * Suchknopf. Umriss statt Flaeche, damit er nicht wie die zweite Hauptsache
 * aussieht.
 *
 * Im Fluid-Formular ist es ein Link, in der Island ein Knopf — beide bekommen
 * dasselbe Aussehen, sonst springt es in dem Moment, in dem das JavaScript
 * uebernimmt. `display: flex` zentriert das SVG in beiden Faellen; ein Link
 * waere sonst eine Textzeile mit Grundlinie.
 *
 * `position: relative` traegt das Popover darin.
 */
.lea-event-filter__reset {
    position: relative;
    flex-shrink: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-left: 10px;
    padding: 0;
    border: 1.5px solid #b63032;
    border-radius: 12px;
    background: none;
    color: #b63032;
    /* Wie beim Standort-Icon: eine geerbte Fuellfarbe schluege `color`. */
    -webkit-text-fill-color: currentColor;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.lea-event-filter__reset svg {
    display: block;
    width: 20px;
    height: 20px;
}

.lea-event-filter__reset:hover,
.lea-event-filter__reset:focus-visible {
    background: #b63032;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

/*
 * Das Popover sitzt hier MITTIG ueber dem Knopf, nicht rechtsbuendig wie am
 * Standort-Icon: dort ist es am rechten Rand eines breiten Feldes verankert,
 * hier ueber einem 52px-Quadrat. Die Grundregeln stehen in search.css.
 */
.lea-event-filter__reset .lea-search__tip {
    right: 50%;
    transform: translate(50%, 4px);
}

.lea-event-filter__reset .lea-search__tip::after {
    right: calc(50% - 5px);
}

.lea-event-filter__reset:hover .lea-search__tip,
.lea-event-filter__reset:focus-visible .lea-search__tip {
    opacity: 1;
    transform: translate(50%, 0);
}

/*
 * Gestapelt ab derselben Breite, ab der search.css die Leiste umbricht: der
 * Zuruecksetzen-Knopf sitzt dann nicht mehr neben, sondern unter dem
 * Suchknopf und nimmt die ganze Breite.
 */
@media (max-width: 860px) {
    .lea-event-filter__reset {
        margin: 8px 0 0;
        align-self: center;
    }
}

.lea-event-filter__status {
    margin: 0 0 22px;
    padding-top: 22px;
    border-top: 1px solid var(--lea-ev-line);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8a93a0;
}

.lea-event-filter__error {
    color: var(--lea-ev-accent);
}

/*
 * Der Hinweis, dass der Filter nicht verstanden wurde. Bewusst kein Rot: es
 * ist nichts kaputt, der Filter wurde nur weiter gefasst — Rot waere ein
 * Fehler, den es nicht gibt.
 */
.lea-event-filter__notice {
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid #f3dcc2;
    border-left: 4px solid #e08c3c;
    border-radius: 10px;
    background: #fff6ec;
    color: #8a4a18;
    font-size: 13px;
    line-height: 1.6;
}

/* ------------------------------------------------------------------ Raster */

/*
 * DAS RASTER GEHOERT DEM THEME, NICHT UNS — wie beim Kategorie-Raster.
 *
 * Aussen `card-group-element` mit `card-group-element-columns-3`, je Treffer
 * ein `card-group-element-item`. Die Spaltenzahl steckt in der Custom Property
 * `--cardgroup-columns` (bootstrap_package), die Staffel 1 / 2 ab sm / 3 ab lg
 * bringt yavi_core mit. Ein eigenes `display: grid` daneben waere die zweite
 * Rasterlogik auf derselben Seite: Events und ein Karten-Element des Themes
 * wuerden verschieden breit brechen, und es faellt erst auf, wenn beide
 * untereinander stehen.
 *
 * Die Liste bleibt trotzdem eine Liste: `ul` mit `li`. Die Klassen sind reines
 * CSS und an kein Element gebunden — eine Vorlesesoftware sagt weiterhin
 * "Liste mit 6 Eintraegen", was hier die ehrlichste Auskunft ist.
 */
.lea-event-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lea-event-list.card-group-element {
    --cardgroup-gap: 26px;
}

/*
 * yavi_core rundet jedes Item und schneidet in einigen Skins ab. Hier waere
 * das fatal: die Karte hebt sich im Hover um 3px, und der abgeschnittene Rand
 * samt Schatten saehe aus wie ein Rendering-Fehler.
 */
.card-group-lea-events .card-group-element-item {
    overflow: visible;
    border-radius: var(--lea-ev-radius);
}

/*
 * Kein Treffer. Steht als li im selben ul und ueber die volle Breite — ein
 * loses p daneben saesse ausserhalb des Rasters und haette weder dessen
 * Breite noch dessen Abstaende.
 */
.lea-event-list__empty {
    width: 100%;
    padding: 56px 24px;
    border: 1.5px dashed #d7dee8;
    border-radius: var(--lea-ev-radius);
    color: var(--lea-ev-muted);
    text-align: center;
    font-size: 15px;
}

.lea-event-list__empty strong {
    display: block;
    margin-bottom: 6px;
    color: var(--lea-ev-ink);
    font-size: 17px;
    font-weight: 600;
}

/* ------------------------------------------------------------------- Karte */

.lea-event-card {
    display: flex;
    /*
     * BEZUGSRAHMEN FUER DEN FLAECHENLINK IM TITEL.
     *
     * Ohne diese Zeile spannt Bootstraps `stretched-link` bis zum naechsten
     * positionierten Vorfahren — im Zweifel der Seitenabschnitt. Dann liegt
     * ein unsichtbarer Link ueber der halben Seite, und geklickt wird
     * ueberall dasselbe Event.
     */
    position: relative;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--lea-ev-radius);
    background: #fff;
    color: var(--lea-ev-ink);
    box-shadow: 0 6px 24px rgba(10, 27, 62, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lea-event-card:hover,
.lea-event-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(10, 27, 62, 0.14);
}

.lea-event-card__media {
    position: relative;
    height: 190px;
    margin: 0;
    overflow: hidden;
}

.lea-event-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lea-event-card__badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--lea-ev-ink);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    pointer-events: none;
}

.lea-event-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 22px 24px 24px;
}

.lea-event-card__date {
    color: var(--lea-ev-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    /*
     * Grossbuchstaben kommen aus dem CSS, nicht aus dem Text: das Datum wird
     * von f:format.date in der Sprache der Seite gesetzt, und ein
     * hart deutsches "SA" im Template waere in jeder anderen Sprache falsch.
     */
    text-transform: uppercase;
}

.lea-event-card__title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

/*
 * DER TITEL IST EIN LINK UND SIEHT NICHT DANACH AUS.
 *
 * Zwei Klassen und ein Element (0,2,1) mit Absicht: `.lea-detail a` (0,1,1)
 * faerbt auf der Detailseite jeden Link im Akzent, und unter "Aehnliche
 * Events" stehen genau diese Karten. Eine Regel mit einer Klasse verloere
 * dort — unabhaengig von der Ladereihenfolge.
 *
 * `-webkit-text-fill-color` muss mit: wo die Eigenschaft gesetzt ist, malt
 * sie den Text und `color` bleibt wirkungslos, egal wie schwer der Selektor
 * wiegt.
 */
.lea-event-card .lea-event-card__title a {
    color: inherit;
    -webkit-text-fill-color: currentColor;
    text-decoration: none;
}

.lea-event-card .lea-event-card__title a:focus-visible {
    outline: 2px solid var(--lea-ev-accent);
    outline-offset: 3px;
}

/*
 * DIE GANZE KARTE IST KLICKBAR — yavi hebt das sonst auf.
 *
 * `yavi_core/Structure/main.scss:68` setzt global
 * `.stretched-link::after { left: unset; bottom: unset }`. Damit faellt die
 * Flaeche in die rechte obere Ecke zusammen, und klickbar bleibt der
 * Titeltext. Dieselbe Ruecknahme steht in categories.css fuer die
 * Kategoriekacheln; hier wie dort in unserer Datei, weil yavi_core in einem
 * Projekt nie editiert wird.
 */
.lea-event-card .stretched-link::after {
    left: 0;
    bottom: 0;
}

/*
 * KEIN TEASER AUF DER KARTE.
 *
 * Er stand hier einmal und ist bewusst wieder verschwunden: der Entwurf
 * (Event-Box) kennt genau vier Zeilen — Datum, Titel, Ort, dann Preis und
 * Knopf. Ein zusaetzlicher Absatz zieht die Karte auf eine Hoehe, die der
 * Entwurf nie hatte, und laesst die Karten je nach Textlaenge verschieden
 * hoch werden. Der Teaser gehoert auf die Detailseite, wo Platz dafuer ist.
 */
.lea-event-card__place {
    margin: 0;
    color: var(--lea-ev-muted);
    font-size: 13px;
}

/*
 * `margin-top: auto` schiebt die Zeile an den unteren Rand — deshalb stehen
 * Preis und Knopf in Karten mit kurzem und langem Titel auf derselben Hoehe,
 * solange die Karten gleich hoch sind.
 */
.lea-event-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
}

.lea-event-card__price {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/*
 * EIN ABGESAGTES EVENT BLEIBT STEHEN — und sieht danach aus.
 *
 * Das Bild verliert seine Farbe, die Absage steht an der Stelle des Preises. Die Karte
 * bleibt klickbar: was los ist, steht auf der Detailseite.
 */
.lea-event-card--cancelled .lea-event-card__media img {
    filter: grayscale(1);
    opacity: 0.7;
}

.lea-event-card__price--cancelled {
    color: var(--lea-ev-accent);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* "Eintritt frei" ist eine gute Nachricht und kein fehlender Preis. */
.lea-event-card__price--free {
    color: #1f7a4c;
}

.lea-event-card__more {
    padding: 9px 20px;
    border: 1.5px solid var(--lea-ev-accent);
    border-radius: 999px;
    color: var(--lea-ev-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/*
 * DER KNOPF LEUCHTET AM KARTEN-HOVER, NICHT AM EIGENEN.
 *
 * Ueber ihm liegt seit dem Flaechenlink ein `::after`, und ein Element unter
 * einem anderen bekommt kein `:hover` — der Knopf blieb blass, waehrend die
 * Karte sich hob. Am Vorfahren gehoert die Bedingung ohnehin hin: klickbar
 * ist die ganze Karte, also soll auch die ganze Karte antworten.
 */
.lea-event-card:hover .lea-event-card__more,
.lea-event-card:focus-within .lea-event-card__more,
.lea-event-card__more:focus-visible {
    border-color: transparent;
    background: linear-gradient(90deg, #e22225, #ff7a5c);
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.lea-event-card__more:focus-visible {
    outline: 2px solid var(--lea-ev-ink);
    outline-offset: 2px;
}

/*
 * Saved events page: the remove button sits right, next to "Mehr".
 *
 * ER MUSS UEBER DEN FLAECHENLINK. Bootstraps `::after` traegt `z-index: 1`
 * und laege sonst darauf: der Klick auf das Faehnchen oeffnete das Event,
 * statt es von der Merkliste zu nehmen — und rueckgaengig machen laesst sich
 * das nur, indem man es wieder sucht.
 */
.lea-event-card__remove {
    position: relative;
    z-index: 2;
    margin: 0 0 0 auto;
}

.lea-event-card__remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1.5px solid var(--lea-ev-line);
    border-radius: 999px;
    background: #fff;
    color: var(--lea-ev-accent);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.lea-event-card__remove-btn:hover,
.lea-event-card__remove-btn:focus-visible {
    border-color: var(--lea-ev-accent);
    color: var(--lea-ev-ink);
}

/* Die Seite hinter dem Einladungslink: eine Karte, mehr braucht sie nicht. */
.lea-invitation__card {
    max-width: 540px;
    margin: 24px 0;
    padding: 28px;
    border: 1px solid #e3e8f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 36px rgba(10, 27, 62, .08);
}

.lea-invitation__lead {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 600;
    color: var(--lea-ev-ink);
}

.lea-invitation__role,
.lea-invitation__address,
.lea-invitation__hint {
    margin: 0 0 14px;
    font-size: 15px;
    color: #5a6478;
}

.lea-invitation__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.lea-invitation__notice {
    margin: 0 0 20px;
    padding: 12px 18px;
    border-radius: 12px;
    background: #eef1f6;
    color: var(--lea-ev-ink);
    font-size: 15px;
}

.lea-invitation__gone {
    max-width: 540px;
    margin: 24px 0;
    padding: 20px 24px;
    border: 1px solid #f0d4d4;
    border-radius: 16px;
    background: #fdf5f5;
    color: #8a3a3a;
    font-size: 15px;
}

.lea-favourites__notice {
    margin: 0 0 20px;
    padding: 12px 18px;
    border-radius: 12px;
    background: #eef1f6;
    color: var(--lea-ev-ink);
    font-size: 15px;
}

.lea-favourites__cta {
    display: block;
    margin-top: 20px;
}

.lea-favourites__cta .lea-event-card__more {
    display: inline-block;
}

/* ------------------------------------------------------ Kalender-Abo */

/*
 * Der Kasten unter der Liste. Er steht auf der Seitenflaeche und traegt seine Kante
 * selbst — dieselbe Entscheidung wie bei der Suchleiste: eine zweite Kachel um eine
 * Kachel herum ist eine zu viel.
 */
.lea-favourites__calendar {
    margin-top: 44px;
    padding: 26px 28px 28px;
    border: 1px solid var(--lea-ev-line);
    border-radius: var(--lea-ev-radius);
    background: #fff;
}

.lea-favourites__calendar-heading {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
}

.lea-favourites__calendar-intro {
    /* Eine Zeile soll lesbar bleiben, auch wenn der Kasten die ganze Breite hat. */
    max-width: 62ch;
    margin: 0 0 18px;
    color: var(--lea-ev-muted);
    font-size: 14px;
    line-height: 1.6;
}

.lea-favourites__calendar-actions {
    margin: 0 0 20px;
}

/*
 * Der Knopf ist hier mal ein Link, mal ein <button>. Ein button bringt eigene
 * Schrift, eigene Flaeche und keinen Zeiger mit — ohne diese drei Zeilen sehen die
 * beiden verschieden aus, je nachdem ob schon ein Abo besteht.
 */
.lea-favourites__calendar .lea-event-card__more {
    display: inline-block;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.lea-favourites__calendar .lea-event-card__more:hover {
    border-color: transparent;
    background: linear-gradient(90deg, #e22225, #ff7a5c);
    color: #fff;
    /* Eine geerbte Fuellfarbe schluege `color` — dieselbe Falle wie in der Buehne. */
    -webkit-text-fill-color: #fff;
}

.lea-favourites__calendar-label {
    display: block;
    margin-bottom: 6px;
    color: #8c95a5;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/*
 * Die Adresse steht in einem Feld und nicht als Text: so laesst sie sich mit einem
 * Dreifachklick greifen und kopieren, ohne dass dafuer JavaScript noetig waere.
 */
.lea-favourites__calendar-url {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--lea-ev-field);
    border-radius: 10px;
    background: #f7f9fc;
    color: var(--lea-ev-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}

.lea-favourites__calendar-hint {
    margin: 8px 0 0;
    color: var(--lea-ev-muted);
    font-size: 12px;
    line-height: 1.6;
}

.lea-favourites__calendar-forms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* Erneuern und Aufheben sind Nebenwege: Umriss, nicht Flaeche. */
.lea-favourites__calendar-button {
    padding: 9px 18px;
    border: 1.5px solid var(--lea-ev-field);
    border-radius: 999px;
    background: #fff;
    color: var(--lea-ev-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.lea-favourites__calendar-button:hover,
.lea-favourites__calendar-button:focus-visible {
    border-color: var(--lea-ev-ink);
    color: var(--lea-ev-ink);
}

/* ------------------------------------------------------------ Ladezustand */

/*
 * Nur die Island rendert das: server-seitig sind die Daten da, wenn die Seite
 * ankommt. Die Platzhalter haben die Masse der echten Karte — Bildflaeche
 * 190px, gleiche Innenabstaende —, damit beim Eintreffen der Daten nichts
 * springt.
 */
.lea-event-card--loading .lea-event-card__media,
.lea-event-skel {
    background: linear-gradient(90deg, #edf0f5 25%, #f7f9fc 37%, #edf0f5 63%);
    background-size: 400% 100%;
    animation: lea-event-shimmer 1.4s ease-in-out infinite;
}

.lea-event-skel {
    height: 12px;
    border-radius: 6px;
}

.lea-event-skel--date { width: 42%; }
.lea-event-skel--title { width: 88%; height: 18px; }
.lea-event-skel--place { width: 66%; }
.lea-event-skel--price { width: 74px; height: 16px; }
.lea-event-skel--more { width: 84px; height: 34px; border-radius: 999px; }

@keyframes lea-event-shimmer {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* ---------------------------------------------------------------- Seiten */

.lea-event-filter__pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    font-size: 13px;
    color: var(--lea-ev-muted);
}

.lea-event-filter__pages button,
.lea-event-filter__pages-link {
    display: inline-block;
    padding: 9px 20px;
    border: 1.5px solid var(--lea-ev-field);
    border-radius: 999px;
    background: #fff;
    color: var(--lea-ev-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.lea-event-filter__pages button:hover:not(:disabled),
.lea-event-filter__pages-link:hover:not([aria-disabled="true"]) {
    border-color: var(--lea-ev-accent);
    color: var(--lea-ev-accent);
}

.lea-event-filter__pages button:disabled,
.lea-event-filter__pages-link[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}

/* --------------------------------------------------------------- Bewegung */

@media (prefers-reduced-motion: reduce) {
    .lea-event-card,
    .lea-event-card__more,
    .lea-event-filter__category span,
    .lea-event-filter__pages button,
    .lea-event-filter__pages-link {
        transition: none;
    }

    .lea-event-card:hover,
    .lea-event-card:focus-within {
        transform: none;
    }

    .lea-event-card--loading .lea-event-card__media,
    .lea-event-skel {
        animation: none;
    }
}

/* -------------------------------------------- Kommende Events (Kopfzeile) */

/*
 * DIE KARTEN DARUNTER SIND DIESELBEN wie im Filter, deshalb steht das hier
 * und nicht in einer eigenen Datei: das Element braucht events.css ohnehin,
 * und eine zweite Datei waere ein zweiter Request fuer dreissig Zeilen. Der
 * Wrapper traegt `lea-events` mit, sonst faenden die Karten ihre Werte nicht.
 *
 * Ueberschrift links, Link rechts, beide auf derselben Grundlinie —
 * `flex-end`, nicht `center`: die Ueberschrift ist zwei- bis dreimal so hoch
 * wie der Link, mittig ausgerichtet schwebte er in der Zeile.
 */
.lea-upcoming__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 28px;
    margin-bottom: 30px;
}

.lea-upcoming__titles {
    min-width: 0;
}

/*
 * Der Abstand steht an der Zeile, nicht an der Ueberschrift — sonst zoege der
 * Aussenabstand der h2 den Link 16px unter ihre Grundlinie, und er saesse
 * sichtbar tiefer als im Entwurf.
 */
.lea-upcoming__titles .frame-header,
.lea-upcoming__titles .frame-header h1,
.lea-upcoming__titles .frame-header h2,
.lea-upcoming__titles .frame-header h3,
.lea-upcoming__titles .frame-header p:last-child {
    margin-bottom: 0;
}

/*
 * Die Kette ist laenger als noetig: yavi faerbt Links im Inhalt ueber eine
 * Regel mit zwei Klassen, `.lea-upcoming__all` allein verloere dagegen —
 * unabhaengig von der Ladereihenfolge.
 */
.lea-upcoming .lea-upcoming__all {
    flex-shrink: 0;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lea-ev-accent);
    border-bottom: 2px solid var(--lea-ev-accent);
    transition: color .2s ease, border-color .2s ease;
}

.lea-upcoming .lea-upcoming__all:hover,
.lea-upcoming .lea-upcoming__all:focus-visible {
    color: var(--lea-ev-ink);
    border-color: var(--lea-ev-ink);
}

/* Unter 600px stapeln sich Ueberschrift und Link — nebeneinander bliebe fuer
   keinen von beiden genug Platz. */
@media (max-width: 599.98px) {
    .lea-upcoming__all {
        align-self: flex-start;
    }
}