Loop-Item-Klasse (e-loop-item) UND Post-Klassen (inkl. event-expired) liegen
auf demselben
-Element.
Ausnahme EHS-Inhaltsbereich:
Der EHS (.dp-ehs) rendert seinen Inhaltsbereich ebenfalls als Loop-Item-Templates.
Diese Loop-Items dürfen NICHT ausgegraut werden – dafür gibt es weiter unten
einen expliziten Reset. Grayscale + Badge treffen dort nur das Bild (via
events-highlight-slider.css) und der Badge wird via PHP gerendert.
============================================================================= */
/* ── Loop-Karte ausgrauen (nur außerhalb des EHS) ───────────────────────────
Vier Selektoren decken alle bekannten Elementor Loop-Varianten ab:
1. .e-loop-item.event-expired → aktuelles Elementor Pro
2. .elementor-loop-item.event-expired → ältere Versionen
3/4. …mit verschachteltem article → Grid-Varianten
Die :not(.dp-ehs *)-Einschränkung ist in CSS 3 nicht möglich, daher
erfolgt der Ausschluss via Reset-Regel weiter unten.
─────────────────────────────────────────────────────────────────────────── */
.e-loop-item.event-expired,
.elementor-loop-item.event-expired,
.e-loop-item article.event-expired,
.elementor-loop-item article.event-expired {
filter: grayscale(1);
transition: filter 0.3s ease;
position: relative; /* Positionierungsanker für den Badge */
}
/* ── Reset: EHS-Inhaltsbereich NICHT ausgrauen ───────────────────────────────
Die Loop-Item-Templates im EHS-Inhaltsbereich (.dp-ehs__content-container)
erhalten denselben filter-Selektor von oben. Hier wird er zurückgesetzt.
Höhere Spezifizität durch tiefere Verschachtelung (.dp-ehs > ... > .event-expired).
─────────────────────────────────────────────────────────────────────────── */
.dp-ehs .e-loop-item.event-expired,
.dp-ehs .elementor-loop-item.event-expired,
.dp-ehs .e-loop-item article.event-expired,
.dp-ehs .elementor-loop-item article.event-expired {
filter: none;
position: static;
}
/* ── Buttons bei abgelaufenen Events ausblenden ──────────────────────────────
Gilt für:
- Elementor Button-Widget (.elementor-widget-button)
- GBB Custom Button (.elementor-widget-gbb-button)
in Loop-Karten (Loop Karussell), EHS-Inhaltsbereich UND Detailseite.
Das Widget-Wrapper-Element (.elementor-widget-*) wird ausgeblendet statt
nur der Button selbst – so entfällt auch Margin/Padding des Wrappers.
─────────────────────────────────────────────────────────────────────────── */
.e-loop-item.event-expired .elementor-widget-button,
.elementor-loop-item.event-expired .elementor-widget-button,
.e-loop-item article.event-expired .elementor-widget-button,
.elementor-loop-item article.event-expired .elementor-widget-button,
.e-loop-item.event-expired .elementor-widget-gbb-button,
.elementor-loop-item.event-expired .elementor-widget-gbb-button,
.e-loop-item article.event-expired .elementor-widget-gbb-button,
.elementor-loop-item article.event-expired .elementor-widget-gbb-button,
body.single-event.event-expired .elementor-widget-button,
body.single-event.event-expired .elementor-widget-gbb-button {
display: none;
}
/* ── Detailseite: Button-Ausnahme im Abgelaufen-Banner ───────────────────────
Der "Event abgelaufen"-Container in Elementor trägt die CSS-Klasse
"dp-event-expired-banner". Buttons darin (z.B. "Alle Events") sollen sichtbar
bleiben – höhere Spezifizität hebt die allgemeine hide-Regel oben auf.
─────────────────────────────────────────────────────────────────────────── */
body.single-event.event-expired .dp-event-expired-banner .elementor-widget-button,
body.single-event.event-expired .dp-event-expired-banner .elementor-widget-gbb-button {
display: block;
}
/* ── Detailseite: Hero-Bereich ausgrauen ─────────────────────────────────────
Voraussetzung: Im Elementor Single-Event-Template muss dem Hero-Container
die CSS-Klasse "dp-event-hero" zugewiesen sein (Erweitert → CSS-Klassen).
Anker ist "body.single-event.event-expired", da Elementors Full-Width-Template
den Content OHNE
-Wrapper rendert. Der body_class-Filter schreibt
"event-expired" auf das -Element (event-helpers.php).
─────────────────────────────────────────────────────────────────────────── */
body.single-event.event-expired .dp-event-hero {
filter: grayscale(1);
transition: filter 0.3s ease;
}
/* ── Badge: gemeinsame Basisstyles (EHS-Bild + Loop-Karussell) ───────────────
Ribbon in der Mitte des jeweiligen Containers (vertikal zentriert).
Badge-Markup:
"elementor-widget-heading" + "elementor-heading-title" übernehmen die globale
Heading-Schriftart, -farbe und -größe aus Elementor (identisch zum Heading-Widget).
─────────────────────────────────────────────────────────────────────────── */
.dp-ehs__expired-badge {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
z-index: 10;
display: block;
background: rgba(0, 0, 0, 0.52);
pointer-events: none;
user-select: none;
margin: 0;
padding: 0;
}
.dp-ehs__expired-badge .elementor-heading-title {
display: block;
color: rgba(255, 255, 255, 0.92) !important;
font-size: var(--e-global-typography-secondary-font-size) !important;
font-weight: var(--e-global-typography-secondary-font-weight);
letter-spacing: var(--e-global-typography-secondary-letter-spacing);
text-transform: var(--e-global-typography-secondary-text-transform);
text-align: center;
padding: 0.55em 1em;
margin: 0;
line-height: var(--e-global-typography-secondary-line-height);
}