/* MG ImmoConnect – Veranstaltungen: Übersicht (Cards + Filter). ACSS-kompatibel (--mgic-*/ACSS-Tokens mit
   Fallback), mobil-first. Keine festen Schriften (erbt Seiten-Schrift). Angelehnt an "Lumospace"-Layout. */

/* Archiv-/Übersichts-Seite: auf Content-Breite zentrieren (wie Objekt-Archiv). Der Shortcode [mgic-events]
   in einem bereits begrenzten Container bleibt unberührt – nur die Voll-Canvas-Archivseite wird begrenzt. */
.mgic-events-archive { width: 100%; max-width: var(--width-content, 1140px); margin-left: auto; margin-right: auto; padding: var(--space-l, 2.25rem) var(--gutter, 1rem); box-sizing: border-box; }
.mgic-events { --mgic-ev-radius: var(--radius-l, 16px); --mgic-ev-border: var(--neutral-light, #e5e7eb); }

.mgic-events__title { font-size: var(--h2, 1.8rem); color: var(--base, #1a2744); margin: 0 0 var(--space-m, 18px); }

/* Filterleiste */
.mgic-ev-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 var(--space-l, 24px); }
.mgic-ev-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mgic-ev-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--mgic-ev-border); background: var(--card-bg, #fff); color: var(--base, #1a2744); font-size: var(--text-s, .9rem); font-weight: 600; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.mgic-ev-pill:hover { border-color: var(--base, #1a2744); }
.mgic-ev-pill.is-active { background: var(--mgic-primary, var(--primary, var(--base, #1a2744))); color: #fff; border-color: transparent; }
.mgic-ev-ort select { min-height: 40px; padding: 0 34px 0 14px; border-radius: 999px; border: 1px solid var(--mgic-ev-border); background: var(--card-bg, #fff); color: var(--base, #1a2744); font-size: var(--text-s, .9rem); font-weight: 600; }

/* Karten-Liste */
.mgic-ev-grid { display: flex; flex-direction: column; gap: var(--space-m, 16px); }
.mgic-events__empty { color: var(--neutral-dark, #64748b); padding: 24px 0; }

.mgic-ev-card { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--card-bg, #fff); border: 1px solid var(--mgic-ev-border); border-radius: var(--mgic-ev-radius); padding: 14px; transition: box-shadow .15s, border-color .15s; }
.mgic-ev-card:hover { border-color: var(--primary, #cbd5e1); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.mgic-ev-card.is-planning { opacity: .82; }
/* Filter blendet Karten per [hidden] aus – muss display:flex/grid überstimmen. */
.mgic-ev-card[hidden] { display: none !important; }

.mgic-ev-card__media { display: block; border-radius: calc(var(--mgic-ev-radius) - 4px); overflow: hidden; background: var(--neutral-lightest, #f1f5f9); aspect-ratio: 16 / 10; }
.mgic-ev-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mgic-ev-card__ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--neutral-light, #e5e7eb), var(--neutral-lightest, #f1f5f9)); }

.mgic-ev-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.mgic-ev-badge { align-self: flex-start; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--neutral-lightest, #f1f5f9); color: var(--base, #1a2744); font-size: var(--text-xs, .78rem); font-weight: 600; }
.mgic-ev-card__title { margin: 2px 0 0; font-size: var(--h4, 1.25rem); line-height: 1.25; color: var(--base, #1a2744); }
.mgic-ev-card__title a { color: inherit; text-decoration: none; }
.mgic-ev-card__title a:hover { text-decoration: underline; }
/* Clickable-Parent: der Titel ist der EINZIGE echte Link; sein ::before spannt über die ganze Card (position:relative).
   ::before statt ::after, damit ein globales „a::after"-Underline-Snippet des Kunden das Overlay nicht lahmlegt (vgl. Log v0.91.9). */
.mgic-ev-card__title, .mgic-ev-card__title a { position: static; }
.mgic-ev-card__title a[href]::before { content: ""; position: absolute; inset: 0; z-index: 1; cursor: pointer; pointer-events: auto; background: none; border: 0; transform: none; }
.mgic-ev-card__title a::after { display: none !important; }
.mgic-ev-card a:hover { color: inherit; }
.mgic-ev-card__desc { margin: 0; color: var(--neutral-dark, #64748b); font-size: var(--text-s, .92rem); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Meta-Zeile: Icon + Text je Angabe (Termin/Ort/Plätze/Veranstalter) */
.mgic-ev-card__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; }
.mgic-ev-cmeta { display: inline-flex; align-items: center; gap: 7px; color: var(--neutral-dark, #64748b); font-size: var(--text-s, .9rem); }
.mgic-ev-cmeta svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--neutral, #94a3b8); }
.mgic-ev-cmeta > span { color: var(--base, #1a2744); font-weight: 600; }
.mgic-ev-more { font-style: normal; font-weight: 500; color: var(--neutral-dark, #64748b); }

.mgic-ev-card__actions { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
/* Buttons erben das Design-System via mgic_btn_class() (ACSS .btn--primary bzw. .mgic-btn). Hier NUR Layout-Modifier. */
.mgic-ev-card__actions .mgic-ev-cta { width: 100%; }
.mgic-ev-btn--disabled { opacity: .55; cursor: default; pointer-events: none; filter: grayscale(.2); }

/* Desktop: proportionales Grid (Bild · Body · Aktionen) statt Flex – kein Leerraum in der Mitte */
@media (min-width: 782px) {
	.mgic-ev-card { display: grid; grid-template-columns: 2fr 3fr 1.4fr; align-items: center; gap: 24px; padding: 16px; }
	.mgic-ev-card__media { aspect-ratio: 4 / 3; align-self: stretch; }
	.mgic-ev-card__body { align-self: center; }
}
@media (max-width: 480px) {
	.mgic-ev-filter { align-items: stretch; }
	.mgic-ev-ort, .mgic-ev-ort select { width: 100%; }
}

/* Card-Design „featured" (Hoch-Card, Grid): mehrspaltiges Raster statt Voll-Breite-Zeilen. Die Karte bleibt in ALLEN
   Breiten vertikal (Bild oben randlos · Body · Anmelde-Button) – die höhere Spezifität (0,2,0) überstimmt das Quer-Grid
   der ≥782px-Media-Query oben (0,1,0), auch innerhalb der Query. Mobil-first: minmax(280px,1fr) → 1 Spalte am Handy. */
.mgic-ev-grid--featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-m, 20px); }
.mgic-ev-grid--featured .mgic-ev-card { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 0; overflow: hidden; }
.mgic-ev-grid--featured .mgic-ev-card__media { aspect-ratio: 16 / 10; border-radius: 0; align-self: stretch; }
.mgic-ev-grid--featured .mgic-ev-card__body { align-self: stretch; padding: 2px 16px 0; gap: 8px; }
.mgic-ev-grid--featured .mgic-ev-card__actions { align-self: stretch; padding: 0 16px 16px; }

/* ============================================================
   Detailseite (single-event) – Struktur analog Objektdetailseite:
   HERO (Section) · BODY (Section mit Layout: Haupt-Blöcke + Aside-Karten) · CTA (Section)
   Inhaltsbereiche sind divs (.mgic-ev-block), NICHT je eine eigene <section>.
   ============================================================ */
/* Content-Breite + Zentrierung wie die Objektdetailseite (jede Sektion ist top-level .mgic-event-single). */
.mgic-event-single { --mgic-ev-radius: var(--radius-l, 16px); width: 100%; max-width: var(--content-width, 1140px); margin-left: auto; margin-right: auto; padding-inline: var(--gutter, 1rem); box-sizing: border-box; }
section.mgic-event-single { --section-padding-block: 0px; }
section.mgic-event-single + section.mgic-event-single { margin-top: var(--space-l, 2.25rem); }
section.mgic-event-single:first-of-type { margin-top: var(--space-l, 2.25rem); }
section.mgic-event-single:last-of-type { margin-bottom: var(--space-l, 2.25rem); }
/* Breadcrumb (nav, kein <section>) – Content-Breite via .mgic-event-single, etwas Abstand oben. */
.mgic-breadcrumb.mgic-event-single { margin-top: var(--space-m, 1.25rem); margin-bottom: 4px; }

/* HERO */
.mgic-ev-hero img { width: 100%; max-height: 460px; object-fit: cover; display: block; border-radius: var(--mgic-ev-radius); }
.mgic-ev-hero__ph { display: block; width: 100%; height: 260px; border-radius: var(--mgic-ev-radius); background: linear-gradient(135deg, var(--neutral-light, #e5e7eb), var(--neutral-lightest, #f1f5f9)); }

/* BODY-Layout */
.mgic-ev-layout { display: grid; gap: 28px; }
.mgic-ev-main { min-width: 0; }

/* TICKET-CARD (überlappt den Hero; links Info · Trennlinie · rechts Anmeldung – „Dinner Party"-Look) */
.mgic-ev-ticketwrap { margin-top: 0 !important; }
.mgic-ev-ticket { position: relative; z-index: 2; margin-top: -56px; background: var(--card-bg, #fff); border-radius: var(--mgic-ev-radius); box-shadow: 0 18px 50px rgba(0,0,0,.12); padding: 24px; display: grid; gap: 20px; }
.mgic-ev-ticket__main { display: flex; flex-direction: column; min-width: 0; }
.mgic-ev-ticket__title { margin: 8px 0 0; font-size: var(--h2, 2rem); line-height: 1.15; color: var(--base, #1a2744); }
.mgic-ev-ticket__teaser { margin: 10px 0 0; color: var(--neutral-dark, #64748b); font-size: var(--text-m, 1rem); line-height: 1.55; }

/* „Nächster Termin" direkt unter der Kurzbeschreibung */
.mgic-ev-nexttermin { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.mgic-ev-nexttermin__lbl { font-size: var(--text-xs, .72rem); text-transform: uppercase; letter-spacing: .06em; color: var(--neutral, #94a3b8); }
.mgic-ev-nexttermin__val { font-size: var(--text-m, 1.05rem); font-weight: 700; color: var(--base, #1a2744); }
.mgic-ev-nexttermin__sub { font-size: var(--text-s, .9rem); color: var(--neutral-dark, #64748b); }

/* Ticket-Seite (rechts): Anmeldung + „Weitere Termine ansehen" */
.mgic-ev-ticket__side { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.mgic-ev-side__label { font-size: var(--text-xs, .75rem); text-transform: uppercase; letter-spacing: .08em; color: var(--neutral, #94a3b8); }
.mgic-ev-side__date { font-size: var(--h4, 1.2rem); font-weight: 700; color: var(--base, #1a2744); }
.mgic-ev-side__hint { color: var(--neutral-dark, #64748b); font-size: var(--text-s, .9rem); }
.mgic-ev-ticket__side .btn, .mgic-ev-ticket__side .mgic-btn { margin-top: 6px; width: 100%; }
.mgic-ev-side__more { margin-top: 4px; text-align: center; font-size: var(--text-s, .9rem); font-weight: 600; color: var(--mgic-primary, var(--primary, var(--base, #1a2744))); text-decoration: none; }
.mgic-ev-side__more:hover { text-decoration: underline; }

@media (min-width: 782px) {
	.mgic-ev-ticket { grid-template-columns: 1.55fr 1fr; margin-top: -84px; margin-inline: clamp(0px, 4vw, 48px); padding: 32px 38px; gap: 34px; }
	.mgic-ev-ticket__side { border-left: 2px dashed var(--neutral-light, #e5e7eb); padding-left: 34px; }
}

/* Inhalts-Blöcke (divs, keine eigenen Sections) */
.mgic-ev-block { margin-top: 34px; }
.mgic-ev-block:first-of-type { margin-top: 26px; }
.mgic-ev-h2 { font-size: var(--h3, 1.5rem); color: var(--base, #1a2744); margin: 0 0 16px; }
.mgic-ev-prose { color: var(--text, #334155); line-height: 1.7; }
.mgic-ev-prose p { margin: 0 0 1em; }
.mgic-ev-notes { margin-top: 16px; color: var(--neutral-dark, #64748b); font-size: var(--text-s, .92rem); }
.mgic-ev-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--mgic-ev-radius); overflow: hidden; background: #000; }
.mgic-ev-video iframe, .mgic-ev-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Teilen */
.mgic-ev-share { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.mgic-ev-share__lbl { font-size: var(--text-xs, .75rem); color: var(--neutral, #94a3b8); margin-right: 2px; }
.mgic-ev-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--neutral-light, #e5e7eb); background: var(--card-bg, #fff); color: var(--base, #1a2744); font-weight: 700; text-decoration: none; cursor: pointer; }
.mgic-ev-share__btn:hover { border-color: var(--base, #1a2744); }
.mgic-ev-share__btn.is-copied { background: var(--accent, #16a34a); color: #fff; border-color: transparent; }

/* Terminliste – jede Zeile eine Ticket-Card: Meta-Grid (Datum/Ort/Referent/Teilnehmer/Preis); der „Termin wählen"-Button sitzt als Grid-Zelle unter „Referent" (kein separater Foot-Bereich → keine Leerfläche). */
/* Termine als EINZELNE Cards mit Abstand + leichtem Schatten (statt ein gemeinsamer Rahmen mit border-top-Trennern). */
.mgic-ev-termine__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mgic-ev-termin { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--card-bg, #fff); border: 1px solid var(--neutral-light, #e5e7eb); border-radius: var(--mgic-ev-radius); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.mgic-ev-termin:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.mgic-ev-termin svg { width: 16px; height: 16px; flex: none; }

/* Meta-Grid: 1 Spalte (Mobil) → 2 (ab 560px) → 3 (ab 782px). Fehlende Felder entfallen, Grid bleibt bündig; jede Zelle
   gleich aufgebaut (Icon-Slot + Label + Wert) ⇒ symmetrisch. Lange Adressen brechen INNERHALB der Zelle. */
.mgic-ev-termin__grid { display: grid; grid-template-columns: 1fr; gap: 14px 22px; align-items: start; }
.mgic-ev-termin__cell { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.mgic-ev-termin__ico { flex: 0 0 18px; display: inline-flex; justify-content: center; color: var(--neutral, #94a3b8); margin-top: 1px; }
.mgic-ev-termin__ico svg { color: currentColor; }
.mgic-ev-termin__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.mgic-ev-termin__k { font-size: var(--text-xs, .74rem); text-transform: uppercase; letter-spacing: .04em; color: var(--neutral-dark, #64748b); font-weight: 600; }
.mgic-ev-termin__v { color: var(--base, #1a2744); font-size: var(--text-s, .95rem); font-weight: 600; line-height: 1.35; }
.mgic-ev-termin__sub { color: var(--neutral-dark, #64748b); font-size: var(--text-s, .9rem); font-weight: 500; }
.mgic-ev-termin__price { font-weight: 700; }

/* CTA als Grid-Zelle im freien Slot unter „Referent": rechtsbündig, vertikal zentriert; mobil full-width. */
.mgic-ev-termin__cta { display: flex; align-items: center; justify-content: flex-end; align-self: center; justify-self: end; }

.mgic-ev-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--primary-trans-10, rgba(79,70,229,.1)); color: var(--primary, #4f46e5); font-size: var(--text-xs, .72rem); font-weight: 700; }
.mgic-ev-btn--sm { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding-top: 0; padding-bottom: 0; padding-left: 16px; padding-right: 16px; font-size: var(--text-s, .88rem); }
.mgic-ev-planning { color: var(--neutral-dark, #64748b); padding: 16px 0; }

@media (max-width: 559px) {
	.mgic-ev-termin__cta { justify-self: stretch; }
	.mgic-ev-termin__cta > * { width: 100%; }
}
@media (min-width: 560px) {
	.mgic-ev-termin__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 782px) {
	.mgic-ev-termin__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ASIDE-Karten (Nächster Termin + Veranstalter) */
.mgic-ev-aside { display: flex; flex-direction: column; gap: 18px; }
.mgic-ev-org { border: 1px solid var(--neutral-light, #e5e7eb); border-radius: var(--mgic-ev-radius); padding: 18px; background: var(--card-bg, #fff); }
.mgic-ev-org__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mgic-ev-org__logo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.mgic-ev-org__eyebrow { display: block; font-size: var(--text-xs, .72rem); color: var(--neutral, #94a3b8); }
.mgic-ev-org__name { display: block; font-size: var(--h4, 1.15rem); font-weight: 700; color: var(--base, #1a2744); }
.mgic-ev-org__list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
.mgic-ev-org__list dt { color: var(--neutral, #94a3b8); font-size: var(--text-xs, .75rem); }
.mgic-ev-org__list dd { margin: 0; font-size: var(--text-s, .9rem); font-weight: 600; }
.mgic-ev-org__list a { color: var(--primary, #4f46e5); text-decoration: none; word-break: break-word; }

/* CTA-Block (scrollt zur Terminauswahl – KEIN Inline-Formular mehr) */
.mgic-ev-cta__box { max-width: 720px; margin: 0 auto; text-align: center; padding: 30px 22px; border: 1px solid var(--neutral-light, #e5e7eb); border-radius: var(--mgic-ev-radius); background: var(--neutral-lightest, #f8fafc); }
.mgic-ev-cta__title { margin: 0; font-size: var(--h3, 1.5rem); color: var(--base, #1a2744); }
.mgic-ev-cta__text { margin: 10px auto 0; max-width: 46ch; color: var(--neutral-dark, #64748b); line-height: 1.55; }
.mgic-ev-cta__btn { margin-top: 18px; }
.mgic-event-form__termin select { width: 100%; }
/* Selects im Anmelde-Modal (Termin/Anrede/Gäste): Dropdown-Chevron garantiert sichtbar –
   überstimmt Theme-/ACSS-Resets (background-Shorthand bzw. background-image:none auf select). */
.mgic-ev-modal select,
.mgic-event-form select {
	appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
	padding-right: 2.6em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a2744' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right .9em center !important;
	background-size: 16px 16px !important;
}

/* Anmelde-Modal (<dialog>): zentriert desktop, Bottom-Sheet mobil. Ecken rund (Dialog clippt, Scroll im Panel). */
.mgic-ev-modal { width: min(560px, 94vw); max-width: 560px; max-height: 90vh; overflow: hidden; border: 0; border-radius: var(--mgic-ev-radius, 16px); padding: 0; background: var(--card-bg, #fff); color: var(--text, #334155); box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.mgic-ev-modal:not([open]) { display: none; }
.mgic-ev-modal::backdrop { background: rgba(15,23,42,.55); }
.mgic-ev-modal__panel { max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; padding: 56px 24px 24px; }
/* Opake Kopf-Kappe: der Schließen-Button überlappt beim Scrollen nichts mehr – Inhalt scrollt sauber darunter weg. */
.mgic-ev-modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 52px; background: var(--card-bg, #fff); z-index: 1; pointer-events: none; }
.mgic-ev-modal__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--neutral-lightest, #f1f5f9); color: var(--base, #1a2744); font-size: 24px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mgic-ev-modal__close:hover { background: var(--neutral-light, #e5e7eb); }
.mgic-ev-modal .mgic-form-wrap { margin: 0; }
/* Themen-Checkboxen als Grid → kürzeres Formular, weniger/kein Scrollen */
.mgic-event-form__topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px; }
/* Body-Scroll sperren, solange ein Modal offen ist */
html.mgic-ev-modal-open, html.mgic-ev-modal-open body { overflow: hidden; }
/* Fallback ohne <dialog>-showModal(): als fixiertes, zentriertes Overlay */
.mgic-ev-modal.is-open { display: block; position: fixed; inset: 0; margin: auto; z-index: 99999; }

/* Sanfter Fade-in (+ leichtes Anheben) */
.mgic-ev-modal[open] { animation: mgic-ev-modal-in .2s ease-out; }
.mgic-ev-modal[open]::backdrop { animation: mgic-ev-fade .2s ease-out; }
@keyframes mgic-ev-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes mgic-ev-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 560px) {
	.mgic-ev-modal { width: 100vw; max-width: 100vw; margin: 0; position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: 18px 18px 0 0; max-height: 92vh; }
	.mgic-ev-modal__panel { max-height: 92vh; padding: 56px 16px 20px; }
	.mgic-ev-modal[open] { animation: mgic-ev-sheet-in .26s ease-out; }
	@keyframes mgic-ev-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
	.mgic-ev-modal[open], .mgic-ev-modal[open]::backdrop { animation: none; }
}

/* Desktop: zwei Spalten, Aside sticky (wie Objektdetailseite) */
@media (min-width: 900px) {
	.mgic-ev-layout { grid-template-columns: 1.7fr 1fr; align-items: start; }
	.mgic-ev-aside { position: sticky; top: 24px; }
}