/**
 * FFW Termine – Frontend-Styles der Terminübersicht.
 *
 * Nutzt die --ffw-* Variablen des Plugins "FFW Einsatzverwaltung" bzw. des
 * FFW Themes. Ist keines von beiden aktiv, gelten die Standardwerte in der
 * jeweiligen var(…, Standard)-Angabe (helles, neutrales Design).
 * Keine festen Farben außerhalb dieser Standardwerte. Flach, ohne Schatten.
 */

.ffw-te {
	--ffw-te-text: var(--ffw-farbe-text, currentColor);
	--ffw-te-gedaempft: var(--ffw-farbe-text-gedaempft, color-mix(in srgb, currentColor 65%, transparent));
	--ffw-te-flaeche: var(--ffw-farbe-flaeche, transparent);
	--ffw-te-primaer-text: var(--ffw-farbe-primaer-text, #fff);
	--ffw-te-flaeche-2: var(--ffw-farbe-flaeche-2, color-mix(in srgb, currentColor 6%, transparent));
	--ffw-te-rahmen: var(--ffw-farbe-rahmen, color-mix(in srgb, currentColor 22%, transparent));
	--ffw-te-primaer: var(--ffw-farbe-primaer, #b3261e);
	--ffw-te-sekundaer: var(--ffw-farbe-sekundaer, #1f5fae);
	--ffw-te-radius: var(--ffw-radius, 6px);
	--ffw-te-radius-klein: var(--ffw-radius-klein, 4px);

	container: ffw-te / inline-size;
	color: var(--ffw-te-text);
}

.ffw-te *,
.ffw-te *::before,
.ffw-te *::after {
	box-sizing: border-box;
}

/* Monatsgruppen
   ========================================================================== */

.ffw-termine__monat + .ffw-termine__monat {
	margin-top: 2rem;
}

.ffw-termine__monat-titel {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
	color: var(--ffw-te-gedaempft);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Linie rechts neben dem Monat. */
.ffw-termine__monat-titel::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ffw-te-rahmen);
}

.ffw-termine__liste {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ein Termin: Datum links, Inhalt rechts
   ========================================================================== */

.ffw-termin {
	display: grid;
	grid-template-columns: 3.75rem 1fr;
	gap: 1rem;
	align-items: start;
	margin: 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--ffw-te-rahmen);
	border-radius: var(--ffw-te-radius);
	background: var(--ffw-te-flaeche);
}

.ffw-termin__datum {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.4rem 0.25rem;
	border-radius: var(--ffw-te-radius-klein);
	background: var(--ffw-te-flaeche-2);
	line-height: 1.1;
	text-align: center;
}

.ffw-termin__wochentag,
.ffw-termin__monat {
	color: var(--ffw-te-gedaempft);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.ffw-termin__tag {
	margin: 0.1rem 0;
	color: var(--ffw-te-primaer);
	font-size: 1.5rem;
	font-weight: 700;
}

.ffw-termin__inhalt {
	min-width: 0;
}

.ffw-termin__titel {
	margin: 0.1rem 0 0.3rem;
	font-size: 1.05rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ffw-termin__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	color: var(--ffw-te-gedaempft);
	font-size: 0.9rem;
}

.ffw-termin__angabe {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	overflow-wrap: anywhere;
}

.ffw-termin__icon {
	display: inline-flex;
	flex: none;
	color: var(--ffw-te-sekundaer);
}

.ffw-termin__icon svg {
	width: 1rem;
	height: 1rem;
}


/* Mehrere Kalender: Farbstreifen links, Schildchen mit Kalendername,
   Auswahlknöpfe über der Liste. Die Farbe kommt je Kalender aus
   --ffw-te-kalender (Einstellung im Menü „Termine“).
   ========================================================================== */

.ffw-termin--kalender {
	border-inline-start: 4px solid var(--ffw-te-kalender, var(--ffw-te-primaer));
}

.ffw-termin__kalender {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.9rem;
	margin: 0 0 0.15rem;
	color: var(--ffw-te-gedaempft);
	font-size: 0.8rem;
	font-weight: 600;
}

.ffw-termin__schild {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.ffw-termine__punkt {
	flex: none;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	background: var(--ffw-te-kalender, var(--ffw-te-primaer));
}

.ffw-termine__auswahl {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
}

.ffw-termine__knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--ffw-te-rahmen);
	border-radius: 999px;
	background: var(--ffw-te-flaeche);
	color: var(--ffw-te-text);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.ffw-termine__knopf:hover {
	border-color: currentColor;
}

.ffw-termine__knopf:focus-visible {
	outline: 2px solid var(--ffw-te-sekundaer);
	outline-offset: 2px;
}

/* Gewählter Knopf: gefüllt in der Akzentfarbe, Punkt mit hellem Rand. */
.ffw-termine__knopf[aria-current="true"] {
	border-color: var(--ffw-te-primaer);
	background: var(--ffw-te-primaer);
	color: var(--ffw-te-primaer-text);
}

.ffw-termine__knopf[aria-current="true"] .ffw-termine__punkt {
	box-shadow: 0 0 0 2px var(--ffw-te-primaer-text);
}

/* Breiter Platz: Datum etwas größer. */
@container ffw-te (min-width: 560px) {
	.ffw-termin {
		grid-template-columns: 4.25rem 1fr;
		gap: 1.25rem;
		padding: 1rem 1.25rem;
	}

	.ffw-termin__tag {
		font-size: 1.75rem;
	}
}

/* Hinweise
   ========================================================================== */

.ffw-termine__leer,
.ffw-termine__fehler {
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ffw-te-rahmen);
	border-inline-start: 4px solid var(--ffw-te-sekundaer);
	border-radius: var(--ffw-te-radius-klein);
	background: var(--ffw-te-flaeche);
}

.ffw-termine__fehler {
	border-inline-start-color: var(--ffw-te-primaer);
	font-size: 0.9rem;
}