/**
 * Kalenderfeeds – Frontend-Styles.
 *
 * Bewusst zurueckhaltend: Schrift und Textfarbe kommen vom Theme, alle
 * Abstaende und Farben lassen sich per Custom Property ueberschreiben.
 */

.kd-kf {
	--kd-kf-abstand: 1rem;
	--kd-kf-radius: 8px;
	--kd-kf-rahmen: rgba(0, 0, 0, 0.12);
	--kd-kf-flaeche: rgba(0, 0, 0, 0.02);
	--kd-kf-gedimmt: rgba(0, 0, 0, 0.6);
	--kd-kf-akzent: currentColor;
	--kd-kf-spalte-min: 260px;
}

.kd-kf__titel {
	margin: 0 0 var(--kd-kf-abstand);
}

.kd-kf__gruppe + .kd-kf__gruppe {
	margin-top: calc(var(--kd-kf-abstand) * 2);
}

.kd-kf__gruppe-titel {
	margin: 0 0 var(--kd-kf-abstand);
	font-size: 1.05em;
}

.kd-kf__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--kd-kf-spalte-min), 1fr));
	gap: var(--kd-kf-abstand);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kd-kf__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: var(--kd-kf-abstand);
	border: 1px solid var(--kd-kf-rahmen);
	border-radius: var(--kd-kf-radius);
	background: var(--kd-kf-flaeche);
}

.kd-kf__item::before {
	content: none; /* Themes setzen bei Listen gerne Bullets per Pseudo-Element. */
}

.kd-kf__item--veraltet {
	opacity: 0.65;
}

.kd-kf__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

.kd-kf__name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.kd-kf__badge {
	padding: 0.05em 0.5em;
	border: 1px solid var(--kd-kf-rahmen);
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 400;
	white-space: nowrap;
	color: var(--kd-kf-gedimmt);
}

.kd-kf__beschreibung,
.kd-kf__meta {
	margin: 0;
	font-size: 0.875em;
	color: var(--kd-kf-gedimmt);
}

.kd-kf__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.25rem;
}

.kd-kf__btn {
	display: inline-block;
	padding: 0.4em 0.85em;
	border: 1px solid var(--kd-kf-rahmen);
	border-radius: var(--kd-kf-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.875em;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.kd-kf__btn:hover,
.kd-kf__btn:focus-visible {
	border-color: var(--kd-kf-akzent);
}

.kd-kf__btn--abo {
	border-color: var(--kd-kf-akzent);
	font-weight: 600;
}

.kd-kf__btn--kopieren[data-kd-kf-kopiert="1"] {
	border-color: var(--kd-kf-akzent);
	font-weight: 600;
}

.kd-kf--hinweis p,
.kd-kf--leer p {
	margin: 0;
	font-size: 0.9375em;
	color: var(--kd-kf-gedimmt);
}

@media (prefers-color-scheme: dark) {
	.kd-kf {
		--kd-kf-rahmen: rgba(255, 255, 255, 0.18);
		--kd-kf-flaeche: rgba(255, 255, 255, 0.04);
		--kd-kf-gedimmt: rgba(255, 255, 255, 0.7);
	}
}

/* --- Kompakte Zeilenliste (Standard) ------------------------------------ */

.kd-kf__liste--kompakt {
	display: block;
	gap: 0;
}

.kd-kf__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--kd-kf-rahmen);
	list-style: none;
}

.kd-kf__zeile:last-child {
	border-bottom: 0;
}

.kd-kf__zeile::before,
.kd-kf__zeile::marker {
	content: none;
}

.kd-kf__zeile--veraltet {
	opacity: 0.6;
}

.kd-kf__zeile-haupt {
	display: flex;
	flex: 1 1 16rem;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.5rem;
	min-width: 0;
}

.kd-kf__icon {
	flex: none;
	width: 1em;
	height: 1em;
	transform: translateY(0.11em);
	opacity: 0.65;
}

.kd-kf__zeile-name {
	font-weight: 500;
	overflow-wrap: anywhere;
}

.kd-kf__zeile-meta {
	font-size: 0.85em;
	color: var(--kd-kf-gedimmt);
}

.kd-kf__zeile-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin-left: auto;
	font-size: 0.875em;
	white-space: nowrap;
}

.kd-kf__aktion {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 1em;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	opacity: 0.85;
	cursor: pointer;
}

.kd-kf__aktion:hover,
.kd-kf__aktion:focus-visible {
	color: var(--kd-kf-akzent);
	opacity: 1;
}

.kd-kf__aktion[data-kd-kf-kopiert="1"] {
	color: var(--kd-kf-akzent);
	opacity: 1;
	text-decoration: none;
}

.kd-kf__zeile-beschreibung {
	flex-basis: 100%;
	font-size: 0.85em;
	color: var(--kd-kf-gedimmt);
}