/* =========================================================================
 * Archiv-Seite (aktivitaten) – [losmachen_archive]
 * Nur auf dieser Seite geladen. Event-/Monats-Styles (.lm-event,
 * .lm-events__month, .lm-events__list) kommen aus der globalen style.css.
 * ========================================================================= */

/* Inhaltsbreite wie die Events auf der Startseite (Referenzlinie 1200px). */
.lm-archive {
	max-width: min(1200px, calc(100% - 2 * var(--lm-edge)));
	margin-inline: auto;
	padding-top: 8rem;      /* Abstand oberhalb der Headline (Desktop) */
	padding-bottom: 4rem;   /* Abstand nach dem letzten Element im Archiv */
}
@media (max-width: 1024px) {
	.lm-archive {
		padding-top: 5.5rem; /* Tablet: proportional weniger */
	}
}

/* ===== Kopf: Titel + Jahr-Filter auf einer Höhe (bei Platzmangel Umbruch) ===== */
.lm-archive__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;         /* zu wenig Platz → Filter bricht unter den Titel */
	margin-bottom: 1.25rem;  /* Abstand unter der Headline-Zeile */
}
.lm-archive__title {
	margin: 0;
	font-family: var(--lm-mono);
	font-weight: 700;
	font-size: clamp(2.25rem, 5vw, 3.125rem); /* wie „Veranstaltungen" auf der Startseite */
	line-height: 1.1;
}
/* Steuerung rechts: Export-Button + Jahr-Filter (bricht bei Platzmangel um). */
.lm-archive__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Export-Button: gleiches Pill-Design wie der Jahr-Filter. */
.lm-archive__export {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border: 1px solid #d9d4c4;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-family: var(--lm-mono);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.lm-archive__export:hover {
	background: #d9d4c4;
}

/* Jahres-Trenner in der „Alle"-Ansicht: große Jahreszahl OHNE Strich. */
.lm-archive__year {
	margin: 2.75rem 0 0.75rem;
	font-family: var(--lm-mono);
	font-weight: 700;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.1;
}
.lm-archive__year:first-of-type {
	margin-top: 0;
}

/* ===== Jahr-Filter: Dropdown im Pill-Design (wie „Kalender abonnieren") =====
 * Umgesetzt als <details>/<summary> → funktioniert auch ohne JavaScript. */
.lm-yearfilter {
	position: relative;
}
.lm-yearfilter__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border: 1px solid #d9d4c4;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-family: var(--lm-mono);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	list-style: none; /* Standard-Dreieck von <summary> entfernen */
	transition: background-color 0.2s ease;
}
.lm-yearfilter__btn::-webkit-details-marker {
	display: none;
}
.lm-yearfilter__btn:hover {
	background: #d9d4c4;
}
.lm-yearfilter__btn::after { /* Aufklapp-Pfeil */
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.15s ease;
}
.lm-yearfilter[open] .lm-yearfilter__btn::after {
	transform: rotate(180deg);
}
.lm-yearfilter__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	min-width: 160px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid #d9d4c4;
	border-radius: var(--lm-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.lm-yearfilter__list li {
	margin: 0;
}
.lm-yearfilter__opt {
	display: block;
	padding: 9px 14px;
	border-radius: 12px;
	font-family: var(--lm-mono);
	font-size: 0.95rem;
	color: #111;
	text-decoration: none;
}
.lm-yearfilter__opt:hover {
	background: var(--lm-card-fill);
}
.lm-yearfilter__opt.is-active {
	background: var(--lm-card-fill);
	font-weight: 700;
}

/* Alt-Termine ohne Detailseite werden als <div> gerendert → kein Link-Cursor,
 * keine Titel-Unterstreichung beim Hover. */
.lm-archive div.lm-event__inner {
	cursor: default;
}
.lm-archive div.lm-event__inner:hover .lm-event__title {
	text-decoration: none;
}

/* Kurzes Ausblenden beim Jahreswechsel (fetch). */
.lm-archive.is-loading {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

@media (max-width: 600px) {
	.lm-archive {
		padding-top: 3.5rem; /* Mobile: proportional weniger */
	}
	.lm-yearfilter__btn,
	.lm-archive__export {
		font-size: 0.95rem;
		padding: 9px 18px;
	}
}