@charset "UTF-8";
/* @group Veranstaltungen */

table.veranstaltungen {
	border-collapse: separate; /* Ermöglicht Zeilenabstände auf Desktop */
	border-spacing: 0 10px;    /* 10px Abstand zwischen den Zeilen */
	width: 100%;
}

table.veranstaltungen tr td {
	text-align: left;
	padding: 10px 12px;       /* Luftigere Desktop-Ansicht */
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #f7f7f7;	
}

/* Linker Rand für die erste Zelle der Zeile */
table.veranstaltungen tr td:first-child {
	border-left: 1px solid #ccc;
}

/* Rechter Rand für die letzte Zelle der Zeile */
table.veranstaltungen tr td:last-child {
	border-right: 1px solid #ccc;
}

table.veranstaltungen tr:hover td {
	background: #f2f2f2;	
}

/* Die ganze Zeile ist jetzt klickbar (Titel-Link + JS-Klick auf den Balken) */
table.veranstaltungen tr.ver-row {
	cursor: pointer;
}

/* Titel bleibt optisch wie bisher, ist aber jetzt ein echter Link */
table.veranstaltungen td a.ver-titel-link {
	color: inherit;
	text-decoration: none;
}

table.veranstaltungen td a.ver-titel-link:hover {
	text-decoration: underline;
}

/* Ausnahme für die Monatsüberschriften: Kein Hintergrund, keine Rahmen */
table.veranstaltungen tr td.sub_heading {
	font-weight: bold;
	padding: 30px 5px 10px;	
	background: none;
	border: none;
}

table.veranstaltungen tr td:nth-of-type(3n) {
	text-align: right;
	width: 45px;	
}

/* --- Globaler Stil für den neuen Icon-Link (Desktop) --- */
table.veranstaltungen td a.btn-details {
	display: inline-block;
	position: relative;
	width: 24px;
	height: 24px;
	text-decoration: none;
}

/* Versteckt den Text "Details" visuell, hält ihn aber barrierefrei */
table.veranstaltungen td a.btn-details span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Der gezeichnete Pfeil (Chevron) */
table.veranstaltungen td a.btn-details::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--sb_rot, #04337F);
	border-right: 2px solid var(--sb_rot, #04337F);
	transform: translate(-70%, -50%) rotate(45deg);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Hover-Effekt auf Desktop: Pfeil färbt sich dunkelblau und wandert minimal nach rechts */
table.veranstaltungen tr:hover td a.btn-details::after {
	border-color: var(--sb_dkrot, #0046B1);
	transform: translate(-40%, -50%) rotate(45deg);
}

/* --- Detailseite --- */

table.veranstaltungen_details {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 40px 0;
}

table.veranstaltungen_details tr td {
	text-align: left;
	padding: 5px 5px;
	border: 1px solid #ccc;
	background: #f7f7f7;
	vertical-align: top;	
}

table.veranstaltungen_details tr:hover td {
	background: #f2f2f2;	
}

img.ver_bild {
	width: 200px;
	float: right;
	margin: 0 5px 8px 10px;
	border: 3px solid #fff;
	box-shadow: 0px 0px 3px #aaa;
}

/* --- Neuer Zurück-Button (Desktop, rechtsbündig) --- */
.ver-back-container {
	width: 100%;
	display: flex;
	justify-content: flex-end; /* Rechtsbündig auf Desktop */
}

.ver-back-container.top {
	margin-bottom: 1rem;
}

.ver-back-container.bottom {
	margin-top: 2rem;
	clear: both;
}

a.btn-back {
	display: inline-flex;
	align-items: center;
	position: relative;
	padding: 6px 16px 6px 32px; /* Platz links für den Pfeil */
	background-color: var(--lightgray, #F8F9FA);
	border: 1px solid #ccc;
	color: #000;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Pfeil nach links für den Zurück-Button */
a.btn-back::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 14px;
	width: 7px;
	height: 7px;
	border-top: 2px solid var(--sb_rot, #04337F);
	border-right: 2px solid var(--sb_rot, #04337F);
	transform: translateY(-50%) rotate(-135deg); /* Zeigt nach links */
	transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Hover-Effekt: Hintergrund dunkelt leicht ab, Pfeil wird dunkelblau und schiebt sich nach links */
a.btn-back:hover {
	background-color: var(--middlegray, #dee2e6);
	border-color: #aaa;
	text-decoration: none;
	color: #000;
}

a.btn-back:hover::before {
	border-color: var(--sb_dkrot, #0046B1);
	transform: translateY(-50%) rotate(-135deg) translate(2px, -2px);
}

/* Formular */
form.ver_form {
	overflow:auto;	
	float: right;
	margin:0;
	padding:0;
	display:block;	
}

form.ver_form input,
form.ver_form input[type='submit'] {
	background: #f1f1f1;
	border: 1px solid #cccccc;
	font-size:10px;
	color: #000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

form.ver_form input {
	width: 80px;
	float: left;
	margin: 0 1px 0 0;
}

form.ver_form input:hover {
	border: 1px solid #aaa;
}

form.ver_form input[type='submit'] {
	width: 30px;
	margin:0;
	cursor: pointer;
}

.termin-past {
	color: #777;
	opacity: 0.7;
}

/* Zusatz "(beendet)" hinter dem Titel - in der Liste (innerhalb von
   .termin-past) und auf der Detailseite (in der Ueberschrift) */
.termin-beendet {
	font-size: 0.85em;
	font-weight: normal;
	font-style: italic;
	color: #777;
}

/* --- Mobile Ansicht für den Veranstaltungskalender --- */
@media screen and (max-width: 580px) {
	
	table.veranstaltungen {
		border-spacing: 0; /* Setzt den Desktop-Abstand für Mobil zurück */
	}

	table.veranstaltungen, 
	table.veranstaltungen tbody, 
	table.veranstaltungen tr {
		display: block;
		width: 100%;
	}

	/* Den Monats-Zwischentitel als volles Element anzeigen */
	table.veranstaltungen tr td.sub_heading {
		display: block;
		width: 100% !important;
		padding: 2rem 0.5rem 0.5rem 0.5rem;
	}

	/* Die normalen Zeilen der Tabelle umwandeln */
	table.veranstaltungen tr:not(:has(td.sub_heading)) {
		display: flex;
		flex-direction: column;
		position: relative;
		padding: 0.75rem;
		background: #f7f7f7;
		border: 1px solid #ccc;
		margin-bottom: 0.75rem;
	}

	/* Die Rahmen der einzelnen TDs entfernen */
	table.veranstaltungen tr:not(:has(td.sub_heading)) td {
		display: block;
		width: 100% !important;
		padding: 0;
		border: none;
		background: transparent;
		text-align: left;
	}

	/* 1. Spalte: Das Datum */
	table.veranstaltungen tr:not(:has(td.sub_heading)) td:nth-of-type(1) {
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--darkgray, #5B5B5B);
		margin-bottom: 0.25rem;
	}

	/* 2. Spalte: Der Titel */
	table.veranstaltungen tr:not(:has(td.sub_heading)) td:nth-of-type(2) {
		font-size: 1.1rem;
		font-weight: 400;
		padding-right: 40px;
	}

	/* 3. Spalte: Das Icon rechts positionieren */
	table.veranstaltungen tr:not(:has(td.sub_heading)) td:nth-of-type(3) {
		position: absolute;
		right: 0.75rem;
		top: 50%;
		transform: translateY(-50%);
		width: auto !important;
		text-align: right;
	}

	/* --- Optimierung für die Detailseite mobil --- */
	img.ver_bild {
		float: none;          /* Deaktiviert den Textumlauf */
		display: block;       /* Macht das Bild zu einem eigenständigen Block-Element */
		width: 100%;          /* Nutzt die volle verfügbare Breite des Bildschirms */
		max-width: 100%;
		margin: 0 0 1.5rem 0; /* Schafft sauberen Abstand nach unten zur Beschreibung */
		box-sizing: border-box;
	}

	/* Zurück-Button mobil mittig zentrieren */
	.ver-back-container {
		justify-content: center;
	}

	a.btn-back {
		width: 100%; /* Macht den Button mobil breiter und leichter mit dem Daumen tippbar */
		max-width: 200px;
		justify-content: center;
		padding: 10px 16px 10px 36px; /* Etwas größere Touch-Fläche */
	}

	a.btn-back::before {
		left: calc(50% - 45px); /* Positioniert den Pfeil relativ zur zentrierten Schrift */
	}
}

/* @end */