/* Spiffy Ampel Add-on – Farben und Badges */

:root {
	--fram-rot: #e04b4b;
	--fram-gelb: #e0b400;
	--fram-gruen: #4caf50;
}

/* Legende oberhalb des Kalenders */
.fram-legende {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 12px;
	font-size: 0.85em;
}

.fram-legende-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.fram-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.fram-dot.fram-rot,
.fram-badge.fram-rot {
	background-color: var(--fram-rot);
}

.fram-dot.fram-gelb,
.fram-badge.fram-gelb {
	background-color: var(--fram-gelb);
}

.fram-dot.fram-gruen,
.fram-badge.fram-gruen {
	background-color: var(--fram-gruen);
}

/* Termin einfärben - gilt sowohl im Kalendergitter als auch in der
   "Upcoming Events"-Liste, da beide dieselbe .calnk-link-Struktur nutzen.
   !important überschreibt bewusst eine eventuell per Kategorie gesetzte Farbe. */
.calnk-link.fram-rot {
	background-color: var(--fram-rot) !important;
	color: #fff !important;
}

.calnk-link.fram-gelb {
	background-color: var(--fram-gelb) !important;
	color: #1a1a1a !important;
}

.calnk-link.fram-gruen {
	background-color: var(--fram-gruen) !important;
	color: #fff !important;
}

/* Datum in der Upcoming-Events-Liste einfärben */
.spiffy-upcoming-date.fram-rot {
	color: var(--fram-rot);
	font-weight: 600;
}

.spiffy-upcoming-date.fram-gelb {
	color: var(--fram-gelb);
	font-weight: 600;
}

.spiffy-upcoming-date.fram-gruen {
	color: var(--fram-gruen);
	font-weight: 600;
}

/* Kleines Badge mit "noch X Tage" direkt am Termin */
.fram-badge {
	display: block;
	margin-top: 2px;
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 0.7em;
	line-height: 1.4;
	color: #fff;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Responsive Layout für die "Upcoming Events"-Liste
   Desktop/Tablet: Tage nebeneinander (Flex-Zeile, bricht um wenn kein Platz mehr ist)
   Smartphone (<= 600px): Tage untereinander, volle Breite
--------------------------------------------------------------------- */
ul.spiffy.upcoming-events-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.spiffy.upcoming-events-list > li.spiffy-upcoming-day {
	flex: 1 1 200px;
	max-width: 260px;
	box-sizing: border-box;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 10px 14px;
}

ul.spiffy.upcoming-events-list .spiffy-upcoming-date {
	display: block;
	margin-bottom: 6px;
	font-size: 0.95em;
}

ul.spiffy.upcoming-events-list ul.spiffy-upcoming-events {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.spiffy.upcoming-events-list ul.spiffy-upcoming-events > li {
	margin: 0 0 4px;
}

@media (max-width: 600px) {
	ul.spiffy.upcoming-events-list {
		flex-direction: column;
	}

	ul.spiffy.upcoming-events-list > li.spiffy-upcoming-day {
		max-width: 100%;
		flex: 1 1 auto;
	}
}

/* ---------------------------------------------------------------------
   ICS-Abonnieren-Button [spiffy_ics_abo]
--------------------------------------------------------------------- */
.fram-ics-abo {
	margin: 16px 0;
}

.fram-ics-abo-button {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 6px;
	background-color: #2271b1;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

.fram-ics-abo-button:hover {
	background-color: #135e96;
	color: #fff;
}

.fram-ics-abo-hinweis {
	margin-top: 8px;
	font-size: 0.85em;
	color: #555;
}

.fram-ics-abo-hinweis code {
	word-break: break-all;
}

/* Optional: dezente Hintergrund-Tönung der ganzen Tageszelle */
td.fram-zelle.fram-rot {
	box-shadow: inset 0 0 0 1px var(--fram-rot);
}

td.fram-zelle.fram-gelb {
	box-shadow: inset 0 0 0 1px var(--fram-gelb);
}

td.fram-zelle.fram-gruen {
	box-shadow: inset 0 0 0 1px var(--fram-gruen);
}