@charset "UTF-8";
/*------------------------------------------------------------------
[Event Exhibitor Manager - Programme items of an exhibitor]

Purely additive stylesheet for the "Events" section on the exhibitor
detail view. The cards themselves are styled by the Event Calendar's
own ec-single-event.css through the .ec-related-card classes - that is
deliberate, so a change of colour source, badge look or cancelled state
in that plugin carries over here without a second edit.

Everything below only does what that stylesheet cannot know about:
the hero image variant, and the box-sizing the calendar only resets
inside its own #ec-app container.

1. SECTION & SCOPE
2. HERO VARIANT
3. NON-CLICKABLE CARDS
4. RESPONSIVE
-------------------------------------------------------------------*/


/* =========================================
   1. SECTION & SCOPE
   ========================================= */

/* Abstand nur, wenn About oder Galerie darueber stehen - ist der Abschnitt das
   einzige in der Hauptspalte, sitzt er direkt oben wie About es tun wuerde. */
.eem-single-events-wrap:not(:first-child) {
	margin-top: 40px;
}

/* Die Kacheln liegen bewusst nicht in #ec-app, wo der Event Calendar sein
   box-sizing setzt - deshalb hier selbst, sonst sprengt das Padding der
   Kacheln das Grid. */
.eem-ec-scope,
.eem-ec-scope * {
	box-sizing: border-box;
}

/* Grid-Grundlage kommt aus .ec-related-grid; in der schmaleren Hauptspalte der
   Ausstellerseite darf eine Kachel etwas enger werden.
   Beide Klassen im Selektor, damit diese Regel unabhaengig von der Ladereihenfolge
   gegen .ec-related-grid gewinnt - sonst entschied, welches Stylesheet zuletzt
   im Dokument steht. */
html body .eem-ec-scope .ec-related-grid.eem-ec-grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}


/* =========================================
   2. HERO VARIANT
   ========================================= */

/* Das Bild soll randlos sitzen: Das Padding der Basis-Kachel wandert
   deshalb in den Textkoerper. */
html body .eem-ec-scope .eem-ec-card.eem-ec-has-hero {
	padding: 0;
	overflow: hidden;
}

html body .eem-ec-scope .eem-ec-card-hero {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: rgba(var(--ec-s-bg-rgb, 247, 107, 21), 0.25);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

/* Dezenter Verlauf nach oben: Badge und Pille muessen auch auf einem hellen
   Foto lesbar bleiben, ohne dass das Bild abgedunkelt wirkt. */
html body .eem-ec-scope .eem-ec-card-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 60%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
	pointer-events: none;
}

html body .eem-ec-scope .eem-ec-hero-header {
	position: absolute;
	top: 10px;
	right: 10px;
	left: 10px;
	margin: 0;
	z-index: 1;
}

/* Badge behaelt die Akzentfarbe der Kachel, bekommt auf dem Foto aber eine
   Kante, damit er sich vom Bild loest. */
html body .eem-ec-scope .eem-ec-has-hero .ec-related-badge {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Die Datums-Pille ist im Original eine helle Akzenttoenung - auf einem Foto
   waere sie unlesbar. Hier deshalb deckend hell mit dunkler Schrift. */
html body .eem-ec-scope .eem-ec-has-hero .ec-related-date-pill {
	background: rgba(255, 255, 255, 0.94);
	color: #1e293b;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

html body .eem-ec-scope .eem-ec-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 14px 16px 16px 16px;
}

/* Abgesagt: Das Bild tritt zurueck, der Titel bleibt lesbar. */
html body .eem-ec-scope .eem-ec-card.ec-is-cancelled .eem-ec-card-hero {
	filter: grayscale(1);
	opacity: 0.55;
}


/* =========================================
   3. NON-CLICKABLE CARDS
   ========================================= */

/* Programmpunkte mit Klickziel "keines" im Event Calendar: Die Kachel zeigt
   dann Informationen, aber keinen Hover, der eine Verlinkung verspricht. */
html body .eem-ec-scope .eem-ec-card.eem-ec-static,
html body .eem-ec-scope .eem-ec-card.eem-ec-static:hover {
	cursor: default;
	transform: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
	background: rgba(var(--ec-s-bg-rgb, 247, 107, 21), 0.12);
	border-color: #e2e8f0;
	border-left-color: var(--ec-s-accent);
}

html body .eem-ec-scope .eem-ec-card.eem-ec-static:hover .ec-related-card-title {
	color: #0f172a;
}


/* =========================================
   4. MODAL IM MODAL
   ========================================= */

/* Wird eine Kachel im Aussteller-Modal angeklickt, oeffnet sich das
   Detail-Modal des Event Calendars darueber. Beide Plugins arbeiten mit
   z-index: 999990.
   
   Der globale Modal-Container des Event Calendars (#ec-modal-container) besitzt
   die Klasse .ec-event-calendar-app. Dadurch greift container-type: inline-size,
   was einen neuen Stacking Context auf Standard-Ebene (0) erzeugt.
   Jedes darin liegende Modal – selbst mit z-index: 999995 – bleibt innerhalb
   dieses Stacking Contexts gefangen und kann niemals vor dem Aussteller-Modal
   (z-index: 999990) liegen.

   Loesung: Wir heben den Modal-Container selbst auf z-index: 999995 an und
   neutralisieren container-type fuer diesen Container. */
html body #ec-modal-container {
	container-type: normal;
	position: relative;
	z-index: 999995;
	pointer-events: none;
}

html body #ec-modal-container > * {
	pointer-events: auto;
}

html body #ec-modal-container .ec-detail-modal,
html body #ec-modal-container .ec-detail-modal.active,
html body #ec-detail-modal.active,
html body .ec-detail-modal.ec-modal.active {
	z-index: 999995;
}

/* Der Hallenplan des Event Calendars liegt mit 1000020 von sich aus darueber -
   der bleibt bewusst unangetastet. */


/* =========================================
   5. RESPONSIVE
   ========================================= */

@media (max-width: 480px) {
	html body .eem-ec-scope .ec-related-grid.eem-ec-grid {
		grid-template-columns: 1fr;
	}

	html body .eem-ec-scope .eem-ec-card-hero {
		aspect-ratio: 2 / 1;
	}
}


/* =========================================
   6. PROGRAMM EINES RAUMS (Hallenplan)
   ========================================= */

/* Raum im Plan, der mit einem Ort des Event Calendars verknuepft ist. */
.eem-interactive-room {
	cursor: pointer;
	pointer-events: all;
}

.eem-interactive-room > rect,
.eem-interactive-room > polygon,
.eem-interactive-room > path,
.eem-interactive-room > ellipse {
	pointer-events: all;
	cursor: pointer;
	transition: fill 0.2s ease, fill-opacity 0.2s ease, stroke 0.2s ease, filter 0.2s ease;
}

.eem-interactive-room:hover > rect,
.eem-interactive-room:hover > polygon,
.eem-interactive-room:hover > path,
.eem-interactive-room:hover > ellipse,
.eem-interactive-room > rect:hover,
.eem-interactive-room > polygon:hover,
.eem-interactive-room > path:hover,
.eem-interactive-room > ellipse:hover {
	fill: var(--eem-primary, #f76b15) !important;
	fill-opacity: 0.18 !important;
	stroke: var(--eem-primary, #f76b15) !important;
	filter: drop-shadow(0 0 4px var(--eem-primary, #f76b15));
}

.eem-interactive-room:focus-visible {
	outline: 3px solid var(--eem-primary, #f76b15);
	outline-offset: 1px;
}

/* Eigenes Fenster, bewusst ohne die Klassen des Aussteller-Details: Dessen
   Schliessen-Handler und History-Eintrag gehoeren zu einem Aussteller.
   Auf Seitenebene gleicher z-index wie das Aussteller-Detail (999990) - der
   Modal-Container des Event Calendars (999995, siehe Abschnitt 4) liegt darueber,
   eine angeklickte Kachel oeffnet ihr Detailfenster also obenauf. */
.eem-venue-modal {
	display: none;
	position: fixed;
	z-index: 999990;
	inset: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	padding: 40px 20px;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	overscroll-behavior: contain;
	background-color: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.eem-venue-modal.active {
	display: flex;
}

.eem-venue-modal,
.eem-venue-modal * {
	box-sizing: border-box;
}

.eem-venue-backdrop {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.eem-venue-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 960px;
	max-height: 88vh;
	max-height: 88dvh;
	margin: auto;
	display: flex;
	flex-direction: column;
}

.eem-venue-dialog {
	width: 100%;
	max-height: 88vh;
	max-height: 88dvh;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

.eem-venue-body {
	padding: 30px;
}

.eem-venue-close {
	position: absolute;
	top: -16px;
	right: -16px;
	z-index: 99;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, 0.08);
	background: #ffffff;
	color: #1e293b;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.eem-venue-close:hover,
.eem-venue-close:focus-visible {
	background: var(--eem-primary, #f76b15);
	border-color: var(--eem-primary, #f76b15);
	color: #ffffff;
}

.eem-venue-kicker {
	margin: 0 0 4px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #64748b;
}

.eem-venue-title {
	margin: 0 0 10px;
	font-size: 1.6rem;
	line-height: 1.25;
	color: #0f172a;
}

.eem-venue-intro,
.eem-venue-empty {
	margin: 0 0 20px;
	font-size: 1rem;
	line-height: 1.5;
	color: #475569;
}

.eem-venue-empty {
	margin-bottom: 0;
}

.eem-venue-footer {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.eem-venue-close-bottom {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: #475569;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.eem-venue-close-bottom:hover,
.eem-venue-close-bottom:focus-visible {
	background: var(--eem-primary, #f76b15);
	border-color: var(--eem-primary, #f76b15);
	color: #ffffff;
}

@media (max-width: 799px) {
	.eem-venue-modal {
		padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px;
	}

	.eem-venue-container,
	.eem-venue-dialog {
		max-height: 90vh;
		max-height: 90dvh;
	}

	.eem-venue-dialog {
		border-radius: 14px;
	}

	.eem-venue-body {
		padding: 20px 15px;
	}

	.eem-venue-close {
		top: 10px;
		right: 10px;
		width: 36px;
		height: 36px;
		font-size: 20px;
		background: rgba(0, 0, 0, 0.65);
		color: #ffffff;
		border-color: rgba(255, 255, 255, 0.2);
	}

	.eem-venue-close-bottom {
		width: 100%;
	}
}

/* Im Lightbox und im Vollbild liegen die Fenster in einem eigenen Stacking
   Context (siehe eemOpenVenueModal in eem-app.js). Dort zaehlt nur die
   Reihenfolge untereinander: Programm < Modal-Container des Event Calendars,
   damit dessen Detailfenster ueber dem Programm aufgeht. */
html body .eem-venue-host > .eem-venue-modal {
	z-index: 1005;
}

html body .eem-venue-host > #ec-modal-container {
	z-index: 1010;
}