/*
 * CDU Termine - Frontend-Styles
 * Bewusst neutral gehalten, damit Divi/Theme-CSS ueberschreiben kann.
 * Alle Selektoren sind unter .cdu-termine-liste "genestet" und mit box-sizing
 * abgesichert, damit Divi's globale Resets (z.B. auf a, span, div) das Layout
 * nicht verschieben. Einfach in Divi ueber "Theme Customizer > Zusaetzliches CSS"
 * oder ein eigenes Child-Theme-Stylesheet ueberschreiben.
 */

.cdu-termine-liste,
.cdu-termine-liste * {
	box-sizing: border-box;
}

.cdu-termine-liste {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdu-termine-liste.cdu-termine-leer {
	padding: 16px;
	font-style: italic;
	color: #555;
}

.cdu-termin-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fff;
}

/* Kalender-Box links */
.cdu-termin-datum {
	flex: 0 0 70px;
	width: 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 4px;
	background: #52b7c1;
	border-radius: 4px;
	line-height: 1.1;
	text-align: center;
}

.cdu-termin-tag-zahl {
	font-size: 28px;
	font-weight: 700;
	color: #fff;
}

.cdu-termin-monat {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #fff;
	margin-top: 2px;
}

/* Informationsblock rechts */
.cdu-termin-info {
	flex: 1 1 auto;
	min-width: 0;
}

.cdu-termin-uhrzeit {
	font-size: 13px;
	color: #666;
	margin-bottom: 2px;
}

.cdu-termin-titel {
	font-size: 17px;
	font-weight: 700;
	color: #111;
	margin-bottom: 4px;
}

.cdu-termin-beschreibung {
	font-size: 14px;
	color: #333;
	margin-bottom: 6px;
}

.cdu-termin-ort {
	font-size: 13px;
	color: #555;
}

/* Tag-Badge */
.cdu-termin-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 8px;
	border-radius: 3px;
	margin-bottom: 6px;
	background: #ffa600;
	color: #fff;
}

/* Mobile: Kalender-Box etwas kleiner, Umbruch bleibt erhalten */
@media (max-width: 480px) {
	.cdu-termin-datum {
		flex-basis: 56px;
		width: 56px;
		padding: 8px 2px;
	}
	.cdu-termin-tag-zahl {
		font-size: 22px;
	}
	.cdu-termin-monat {
		font-size: 11px;
	}
}