/* ==================================================================
 * Veranstaltungen (EXT:sf_event_mgt) - Listen- und Detailansicht
 * ------------------------------------------------------------------
 * Nutzt die Bootstrap-Variablen der Seite (Primaerfarbe #2a9d8f) und
 * Font Awesome 5 Pro fuer die Icons. Alle Regeln sind mit
 * .tx-sf-event-mgt eingegrenzt und schlagen dadurch die
 * events_default.css der Extension, egal in welcher Reihenfolge
 * die Dateien geladen werden.
 * ================================================================== */

.tx-sf-event-mgt {
	--event-accent: var(--bs-primary, #2a9d8f);
	--event-accent-rgb: var(--bs-primary-rgb, 42, 157, 143);
	--event-border: var(--bs-border-color, #dedede);
	--event-muted: var(--bs-secondary-color, #6c757d);
	--event-radius: var(--bs-border-radius-lg, .5rem);
	margin-bottom: 3rem;
}

.tx-sf-event-mgt > h1 {
	margin-bottom: 1rem;
}


/* ==================================================================
 * 1. Kategorie-Filter
 * ================================================================== */

.tx-sf-event-mgt > .button {
	display: inline-block;
	margin: 0 .4rem .6rem 0;
	padding: .35rem .95rem;
	border: 1px solid var(--event-accent);
	border-radius: 999px;
	background: var(--event-accent);
	color: #fff;
	font-size: .9rem;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.tx-sf-event-mgt > .button.button-outline {
	background: transparent;
	color: var(--event-accent);
}

.tx-sf-event-mgt > .button.button-outline:hover,
.tx-sf-event-mgt > .button.button-outline:focus-visible {
	background: rgba(var(--event-accent-rgb), .1);
}

.tx-sf-event-mgt > .button:focus-visible {
	outline: 2px solid var(--event-accent);
	outline-offset: 2px;
}


/* ==================================================================
 * 2. Listenansicht - eine Karte pro Veranstaltung
 * ================================================================== */

.tx-sf-event-mgt .event-list-item {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem 1.5rem;
	margin: 0 0 1.25rem 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--event-border);
	border-left: 4px solid var(--event-accent);
	border-radius: var(--event-radius);
	background: #fff;
	transition: box-shadow .15s ease, border-color .15s ease;
}

.tx-sf-event-mgt > .button + .event-list-item,
.tx-sf-event-mgt > h1 + .event-list-item {
	margin-top: 1.25rem;
}

.tx-sf-event-mgt .event-list-item:hover,
.tx-sf-event-mgt .event-list-item:focus-within {
	border-color: rgba(var(--event-accent-rgb), .45);
	border-left-color: var(--event-accent);
	box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .08);
}

/* Zeilen: Standard der Extension (Label links, 150px) aufheben */
.tx-sf-event-mgt .event-list-row {
	display: block;
	margin: 0;
	min-width: 0;
}

.tx-sf-event-mgt .event-list-row .clear {
	display: none;
}

/* --- Titel -------------------------------------------------------- */

.tx-sf-event-mgt .event-list-row:first-child {
	grid-column: 1 / -1;
}

.tx-sf-event-mgt .event-list-item .event-title {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.3;
}

.tx-sf-event-mgt .event-list-item .event-title a {
	color: inherit;
	text-decoration: none;
	transition: color .15s ease;
}

/* Die ganze Karte ist klickbar */
.tx-sf-event-mgt .event-list-item .event-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.tx-sf-event-mgt .event-list-item:hover .event-title a,
.tx-sf-event-mgt .event-list-item .event-title a:focus-visible {
	color: var(--event-accent);
}

.tx-sf-event-mgt .event-list-item .event-title a:focus-visible {
	outline: none;
}

.tx-sf-event-mgt .event-list-item:focus-within {
	outline: 2px solid var(--event-accent);
	outline-offset: 2px;
}

/* --- Kurzbeschreibung --------------------------------------------- */

.tx-sf-event-mgt .event-list-row:nth-child(2) {
	grid-column: 1 / -1;
	margin-top: -.25rem;
}

.tx-sf-event-mgt .event-list-row:nth-child(2) .event-list-label {
	display: none;
}

.tx-sf-event-mgt .event-list-item .event-teaser {
	color: var(--bs-body-color, #212121);
	line-height: 1.55;
}

.tx-sf-event-mgt .event-list-item .event-teaser:empty {
	display: none;
}

/* Zeile nur ausblenden, wenn auch kein "Weiterlesen" darin steht */
.tx-sf-event-mgt .event-list-row:has(> .event-teaser:empty):not(:has(> .event-more)) {
	display: none;
}

/* "Weiterlesen" (aus dem ueberschriebenen ListItem-Partial) */
.tx-sf-event-mgt .event-list-item .event-more {
	display: flex;
	align-items: center;
	gap: .4rem;
	width: fit-content;
	margin-top: .35rem;
	margin-left: auto;
	color: var(--event-accent);
	font-weight: 600;
}

.tx-sf-event-mgt .event-list-item .event-teaser:empty + .event-more {
	margin-top: 0;
}

.tx-sf-event-mgt .event-list-item .event-more::after {
	content: "\f061"; /* arrow-right */
	font-family: "Font Awesome 5 Pro";
	font-size: .8em;
	font-weight: 900;
	transition: transform .15s ease;
}

.tx-sf-event-mgt .event-list-item:hover .event-more {
	text-decoration: underline;
}

.tx-sf-event-mgt .event-list-item:hover .event-more::after {
	transform: translateX(.2rem);
}

/* --- Eckdaten (Start, Ende, Ort) ---------------------------------- */

/* Preis wird in der Liste nicht angezeigt */
.tx-sf-event-mgt .event-list-row:has(> .event-price) {
	display: none;
}

.tx-sf-event-mgt .event-list-row:nth-child(n + 3) {
	padding-top: .9rem;
	border-top: 1px solid var(--event-border);
}

.tx-sf-event-mgt .event-list-label {
	display: flex;
	align-items: center;
	gap: .4rem;
	width: auto;
	margin-bottom: .2rem;
	color: var(--event-muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.tx-sf-event-mgt .event-list-value {
	color: var(--bs-body-color, #212121);
	font-weight: 400;
}

/* Icons vor den Labels (Font Awesome 5 Pro, solid) */
.tx-sf-event-mgt .event-list-row:has(> .event-startdate) .event-list-label::before,
.tx-sf-event-mgt .event-list-row:has(> .event-enddate) .event-list-label::before,
.tx-sf-event-mgt .event-list-row:has(> .event-location) .event-list-label::before {
	width: 1em;
	color: var(--event-accent);
	font-family: "Font Awesome 5 Pro";
	font-size: .85rem;
	font-weight: 900;
	letter-spacing: 0;
	text-align: center;
}

.tx-sf-event-mgt .event-list-row:has(> .event-startdate) .event-list-label::before {
	content: "\f073"; /* calendar-alt */
}

.tx-sf-event-mgt .event-list-row:has(> .event-enddate) .event-list-label::before {
	content: "\f11e"; /* flag-checkered */
}

.tx-sf-event-mgt .event-list-row:has(> .event-location) .event-list-label::before {
	content: "\f3c5"; /* map-marker-alt */
}

/* Leere Anmeldungs-Zeile ausblenden */
.tx-sf-event-mgt .event-list-row:has(> .event-registration:empty) {
	display: none;
}

.tx-sf-event-mgt .event-list-item .event-registration a {
	position: relative;
	z-index: 1;
}

/* --- Vorschaubild (nur mit ueberschriebenem ListItem-Partial) ----- */

/* Das Bild steht im Markup am Ende und wird per Grid nach links geholt */
.tx-sf-event-mgt .event-list-item:has(> .event-list-image) {
	grid-template-columns: 15rem repeat(3, minmax(0, 1fr));
}

.tx-sf-event-mgt .event-list-item:has(> .event-list-image) > .event-list-row:nth-child(-n + 2) {
	grid-column: 2 / -1;
}

.tx-sf-event-mgt .event-list-image {
	grid-column: 1;
	grid-row: 1 / span 3;
	align-self: start;
	overflow: hidden;
	aspect-ratio: 7 / 5;
	border-radius: var(--bs-border-radius, .375rem);
	background: #f2f2f3;
}

.tx-sf-event-mgt .event-list-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.tx-sf-event-mgt .event-list-item:hover .event-list-image img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {

	.tx-sf-event-mgt .event-list-image img {
		transition: none;
	}

	.tx-sf-event-mgt .event-list-item:hover .event-list-image img,
	.tx-sf-event-mgt .event-list-item:hover .event-more::after {
		transform: none;
	}

}


/* --- Responsive --------------------------------------------------- */

@media (max-width: 991.98px) {

	.tx-sf-event-mgt .event-list-item {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* In der zweiten Reihe der Eckdaten keine doppelte Trennlinie */
	.tx-sf-event-mgt .event-list-row:nth-child(n + 5) {
		padding-top: 0;
		border-top: 0;
	}

	/* Vorschaubild ueber die volle Breite oben */
	.tx-sf-event-mgt .event-list-item:has(> .event-list-image) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tx-sf-event-mgt .event-list-item:has(> .event-list-image) > .event-list-row:nth-child(-n + 2) {
		grid-column: 1 / -1;
	}

	.tx-sf-event-mgt .event-list-image {
		grid-column: 1 / -1;
		grid-row: 1;
		aspect-ratio: 16 / 7;
	}

}

@media (max-width: 575.98px) {

	.tx-sf-event-mgt .event-list-item {
		gap: .75rem 1rem;
		padding: 1rem 1.1rem;
	}

	.tx-sf-event-mgt .event-list-item .event-title {
		font-size: 1.15rem;
	}

}


/* ==================================================================
 * 3. Seitennavigation (Pagination)
 * Optisch wie die Pagination der News auf der Startseite.
 * ================================================================== */

.tx-sf-event-mgt .paginator {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 2rem 0 0 0;
	padding: 0;
	list-style: none;
}

.tx-sf-event-mgt .paginator li {
	margin: 0;
	color: var(--event-muted);
}

.tx-sf-event-mgt .paginator a {
	display: inline-block;
	min-width: 2.4rem;
	padding: .3rem .75rem .4rem;
	border: 1px solid #0f7272;
	border-radius: 10px;
	background: #0f7272;
	color: #fff;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.tx-sf-event-mgt .paginator a:hover,
.tx-sf-event-mgt .paginator a:focus-visible {
	border-color: #0a5555;
	background: #0a5555;
}

.tx-sf-event-mgt .paginator a:focus-visible {
	outline: 2px solid var(--event-accent);
	outline-offset: 2px;
}

.tx-sf-event-mgt .paginator .current a {
	border-color: var(--event-accent);
	background: var(--event-accent);
	pointer-events: none;
}

/* Pfeile an Vor/Zurueck (Font Awesome 5 Pro) */
.tx-sf-event-mgt .paginator .first a::before,
.tx-sf-event-mgt .paginator .previous a::before,
.tx-sf-event-mgt .paginator .next a::after,
.tx-sf-event-mgt .paginator .last a::after {
	font-family: "Font Awesome 5 Pro";
	font-size: .8em;
	font-weight: 900;
}

.tx-sf-event-mgt .paginator .first a::before {
	content: "\f100"; /* angle-double-left */
	margin-right: .4rem;
}

.tx-sf-event-mgt .paginator .previous a::before {
	content: "\f104"; /* angle-left */
	margin-right: .4rem;
}

.tx-sf-event-mgt .paginator .next a::after {
	content: "\f105"; /* angle-right */
	margin-left: .4rem;
}

.tx-sf-event-mgt .paginator .last a::after {
	content: "\f101"; /* angle-double-right */
	margin-left: .4rem;
}



/* ==================================================================
 * 4. Detailansicht - Standard-Template der Extension
 * Nur noch Rueckfall, falls das eigene Detail-Template nicht aktiv ist.
 * ================================================================== */

.tx-sf-event-mgt .event-detail-row {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	gap: .25rem 1.5rem;
	margin: 0;
	padding: .7rem 0;
	border-bottom: 1px solid var(--event-border);
}

.tx-sf-event-mgt .event-detail-row .clear {
	display: none;
}

.tx-sf-event-mgt .event-detail-row:first-of-type {
	display: block;
	padding: 0 0 1rem 0;
	border-bottom: 3px solid var(--event-accent);
}

.tx-sf-event-mgt .event-detail-row .event-title {
	margin: 0;
}

.tx-sf-event-mgt .event-detail-label {
	width: auto;
	color: var(--event-muted);
	font-weight: 600;
}

.tx-sf-event-mgt .event-detail-value > p:last-child {
	margin-bottom: 0;
}

.tx-sf-event-mgt .event-detail-value img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bs-border-radius, .375rem);
}

.tx-sf-event-mgt .event-detail-row:has(> .event-detail-value:empty) {
	display: none;
}

@media (max-width: 575.98px) {

	.tx-sf-event-mgt .event-detail-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.tx-sf-event-mgt .event-detail-label {
		font-size: .8rem;
	}

}


/* ==================================================================
 * 5. Detailansicht - eigenes Template (Templates/Event/Detail.fluid.html)
 * ================================================================== */

.tx-sf-event-mgt .event-detail {
	margin: 0;
}

/* --- Kopf: Titel und Kurzbeschreibung ----------------------------- */

.tx-sf-event-mgt .event-detail__header {
	max-width: 60rem;
	margin-bottom: 2rem;
}

.tx-sf-event-mgt .event-detail__eyebrow {
	margin: 0 0 .4rem 0;
	color: var(--event-accent);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tx-sf-event-mgt .event-detail__title {
	margin: 0;
	font-size: 2.25rem;
	line-height: 1.2;
}

.tx-sf-event-mgt .event-detail__teaser {
	margin: 1rem 0 0 0;
	color: #4a4a4a;
	font-size: 1.2rem;
	line-height: 1.55;
}

/* --- Zweispaltiges Layout: Inhalt + Eckdaten ---------------------- */

.tx-sf-event-mgt .event-detail__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 21rem;
	gap: 3rem;
	align-items: start;
}

.tx-sf-event-mgt .event-detail__main > :first-child {
	margin-top: 0;
}

/* --- Bild --------------------------------------------------------- */

.tx-sf-event-mgt .event-detail__image {
	margin: 0 0 2rem 0;
}

.tx-sf-event-mgt .event-detail__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--event-radius);
}

.tx-sf-event-mgt .event-detail__image figcaption {
	margin-top: .5rem;
	color: var(--event-muted);
	font-size: .85rem;
}

/* --- Beschreibung und weitere Abschnitte -------------------------- */

.tx-sf-event-mgt .event-detail__description {
	font-size: 1.05rem;
	line-height: 1.7;
}

.tx-sf-event-mgt .event-detail__description > :last-child,
.tx-sf-event-mgt .event-detail__section > :last-child {
	margin-bottom: 0;
}

.tx-sf-event-mgt .event-detail__section {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--event-border);
}

.tx-sf-event-mgt .event-detail__section h2 {
	margin: 0 0 1rem 0;
	font-size: 1.3rem;
}

.tx-sf-event-mgt .event-detail__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tx-sf-event-mgt .event-detail__gallery a {
	display: block;
	overflow: hidden;
	border-radius: var(--bs-border-radius, .375rem);
}

.tx-sf-event-mgt .event-detail__gallery img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .3s ease;
}

.tx-sf-event-mgt .event-detail__gallery a:hover img,
.tx-sf-event-mgt .event-detail__gallery a:focus-visible img {
	transform: scale(1.05);
}

/* --- Eckdaten-Kasten ---------------------------------------------- */

.tx-sf-event-mgt .event-detail__facts {
	padding: 1.5rem;
	border: 1px solid var(--event-border);
	border-left: 4px solid var(--event-accent);
	border-radius: var(--event-radius);
	background: #f7f8f8;
}

.tx-sf-event-mgt .event-detail__facts dl {
	margin: 0;
}

.tx-sf-event-mgt .event-detail__fact {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	column-gap: .5rem;
	padding: 1rem 0;
	border-top: 1px solid var(--event-border);
}

.tx-sf-event-mgt .event-detail__fact:first-child {
	padding-top: 0;
	border-top: 0;
}

.tx-sf-event-mgt .event-detail__fact:last-child {
	padding-bottom: 0;
}

/* "12:00 Uhr" nicht umbrechen */
.tx-sf-event-mgt .event-detail__time {
	white-space: nowrap;
}

/* Icon in der ersten Spalte, ueber beide Zeilen (dt + dd) */
.tx-sf-event-mgt .event-detail__fact::before {
	grid-row: 1 / span 2;
	padding-top: .15rem;
	color: var(--event-accent);
	font-family: "Font Awesome 5 Pro";
	font-size: 1rem;
	font-weight: 900;
	text-align: center;
}

.tx-sf-event-mgt .event-detail__fact--date::before {
	content: "\f073"; /* calendar-alt */
}

.tx-sf-event-mgt .event-detail__fact--location::before {
	content: "\f3c5"; /* map-marker-alt */
}

.tx-sf-event-mgt .event-detail__fact--organisator::before {
	content: "\f508"; /* user-tie */
}

.tx-sf-event-mgt .event-detail__fact--price::before {
	content: "\f153"; /* euro-sign */
}

.tx-sf-event-mgt .event-detail__fact--registration::before {
	content: "\f3ff"; /* ticket-alt */
}

.tx-sf-event-mgt .event-detail__fact--link::before {
	content: "\f0c1"; /* link */
}

.tx-sf-event-mgt .event-detail__fact dt {
	margin-bottom: .2rem;
	color: var(--event-muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.tx-sf-event-mgt .event-detail__fact dd {
	margin: 0;
	line-height: 1.5;
}

.tx-sf-event-mgt .event-detail__fact dd ul {
	margin: .3rem 0 0 0;
	padding-left: 1.1rem;
}

.tx-sf-event-mgt .event-detail__map {
	display: inline-block;
	margin-top: .3rem;
	font-size: .9rem;
}

/* --- Buttons ------------------------------------------------------ */

.tx-sf-event-mgt .event-detail__button,
.tx-sf-event-mgt .event-detail__calendar a,
.tx-sf-event-mgt .event-detail__back {
	display: inline-block;
	padding: .35rem .95rem;
	border: 1px solid var(--event-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--event-accent);
	font-size: .9rem;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.tx-sf-event-mgt .event-detail__button:hover,
.tx-sf-event-mgt .event-detail__button:focus-visible,
.tx-sf-event-mgt .event-detail__calendar a:hover,
.tx-sf-event-mgt .event-detail__calendar a:focus-visible,
.tx-sf-event-mgt .event-detail__back:hover,
.tx-sf-event-mgt .event-detail__back:focus-visible {
	background: var(--event-accent);
	color: #fff;
}

.tx-sf-event-mgt .event-detail__button:focus-visible,
.tx-sf-event-mgt .event-detail__calendar a:focus-visible,
.tx-sf-event-mgt .event-detail__back:focus-visible {
	outline: 2px solid var(--event-accent);
	outline-offset: 2px;
}

.tx-sf-event-mgt .event-detail__button--primary {
	display: block;
	margin-top: 1.25rem;
	padding: .6rem 1rem;
	background: var(--event-accent);
	color: #fff;
	font-weight: 600;
	text-align: center;
}

.tx-sf-event-mgt .event-detail__button--primary:hover,
.tx-sf-event-mgt .event-detail__button--primary:focus-visible {
	background: #0f7272;
	border-color: #0f7272;
}

/* --- In den Kalender eintragen ------------------------------------ */

.tx-sf-event-mgt .event-detail__calendar {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--event-border);
}

.tx-sf-event-mgt .event-detail__calendar-title {
	margin: 0 0 .6rem 0;
	color: var(--event-muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.tx-sf-event-mgt .event-detail__calendar ul {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tx-sf-event-mgt .event-detail__calendar a {
	padding: .25rem .75rem;
	background: #fff;
	font-size: .85rem;
}

/* --- Zurueck zur Liste -------------------------------------------- */

.tx-sf-event-mgt .event-detail__footer {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--event-border);
}

.tx-sf-event-mgt .event-detail__back::before {
	content: "\f104"; /* angle-left */
	margin-right: .5rem;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {

	.tx-sf-event-mgt .event-detail__gallery img {
		transition: none;
	}

	.tx-sf-event-mgt .event-detail__gallery a:hover img,
	.tx-sf-event-mgt .event-detail__gallery a:focus-visible img {
		transform: none;
	}

}

/* --- Responsive --------------------------------------------------- */

@media (max-width: 991.98px) {

	/* Eckdaten (wann, wo) vor dem Bild und der Beschreibung */
	.tx-sf-event-mgt .event-detail__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.tx-sf-event-mgt .event-detail__facts {
		order: -1;
	}

}

@media (max-width: 575.98px) {

	.tx-sf-event-mgt .event-detail__title {
		font-size: 1.7rem;
	}

	.tx-sf-event-mgt .event-detail__teaser {
		font-size: 1.05rem;
	}

	.tx-sf-event-mgt .event-detail__facts {
		padding: 1.1rem;
	}

}