/* =========================================================================
 * Aktuelles – Übersicht ([losmachen_aktuelles])
 * Kopfzeile: links Titel/Intro/Chips, rechts fixierter Beitrag (space-between).
 * Darunter Masonry-Grid (3 Spalten). Kachel-Hintergrund allein aus dem Label.
 * ========================================================================= */

.lm-aktuelles {
	/* Volle Breite wie die Highlight-Cards der Startseite (92vw, viewport-zentriert). */
	width: 92vw;
	margin-inline: calc(50% - 46vw);
	padding-top: 8rem;
}

/* ---- Kopfzeile: Intro-Spalte + fixierter Beitrag ---- */
/* Erste Reihe = 3 gleiche Spalten wie das Grid darunter:
 * Intro-Spalte | fixer Beitrag 1 | fixer Beitrag 2. */
.lm-aktuelles__top {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	margin-bottom: 32px;
}
.lm-aktuelles__intro-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.lm-aktuelles__featured {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}
.lm-aktuelles__featured .lm-post {
	width: 100%;
}

.lm-aktuelles__title {
	margin: 0 0 1.7rem;
	font-family: var(--lm-mono);
	font-weight: 700;
	font-size: clamp(2.25rem, 5vw, 3.125rem);
	line-height: 1.1;
}
.lm-aktuelles__intro {
	margin: 0 0 1.75rem;
	max-width: 28rem; /* etwas schmaler */
	font-size: 1.125rem;
	line-height: 1.5;
}

/* ---- Filterleiste mit Strich (trennt Kopfzeile und Grid) ---- */
.lm-aktuelles__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 3rem 0 3rem; /* 3rem oben, 3rem unten (zu den Beiträgen) */
}
/* Strich rechts neben dem Filter – wie bei der Kalender-Navigation. */
.lm-aktuelles__filter::after {
	content: "";
	flex: 1 1 auto;
	min-width: 40px;
	height: 1.5px;
	background: var(--lm-black, #000);
}
.lm-chip {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border: 1px solid #000;
	border-radius: 0.5rem;
	background: transparent;
	color: #000;
	font-family: var(--lm-mono);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.lm-chip:hover {
	background: var(--lm-card-fill);
}
.lm-chip.is-active {
	background: #000;
	color: #fff;
}

/* Kategorie-Dropdown (statt Button-Wüste). Aktiver Zustand = schwarz. */
.lm-catfilter {
	position: relative;
}
.lm-catfilter__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
}
.lm-catfilter__btn::-webkit-details-marker {
	display: none;
}
.lm-catfilter__btn::after {
	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-catfilter[open] .lm-catfilter__btn::after {
	transform: rotate(180deg);
}
.lm-catfilter__list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 30;
	min-width: 180px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border: 1px solid #000;
	border-radius: 0.5rem;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.lm-catfilter__opt {
	display: block;
	padding: 9px 14px;
	border-radius: 0.35rem;
	color: #111;
	text-decoration: none;
	font-family: var(--lm-mono);
	font-size: 0.95rem;
}
.lm-catfilter__opt:hover {
	background: var(--lm-card-fill);
}
.lm-catfilter__opt.is-active {
	background: #000;
	color: #fff;
}

/* ---- Grid: 3 Spalten mit FESTEN Höhen ----
 * Row 1 (oberste Karte je Spalte) = groß / mittel / klein.
 * Alle weiteren Karten = einheitliche Höhe. Werte als Variablen (aus Figma). */
.lm-aktuelles__grid {
	display: flex;
	gap: 32px;
	margin-bottom: 5rem;
	/* Kartenbreite im Figma = 364. Höhen als Seitenverhältnis (364 / Höhe),
	 * damit die Proportion bei jeder Breite erhalten bleibt.
	 * Bitte die Figma-Höhen bestätigen (groß = 541 gemessen). */
	--lm-ar-lg:  364 / 541;  /* groß   */
	--lm-ar-md:  364 / 440;  /* mittel */
	--lm-ar-sm:  364 / 340;  /* klein  */
	--lm-ar-uni: 364 / 440;  /* einheitlich ab Row 2 */
}
.lm-aktuelles__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.lm-post--h-lg  { aspect-ratio: var(--lm-ar-lg); }
.lm-post--h-md  { aspect-ratio: var(--lm-ar-md); }
.lm-post--h-sm  { aspect-ratio: var(--lm-ar-sm); }
.lm-post--h-uni { aspect-ratio: var(--lm-ar-uni); }
/* Textmenge grob an die Kartenhöhe angepasst (kürzt mit „…"). */
.lm-post--h-lg  .lm-post__excerpt { -webkit-line-clamp: 12; }
.lm-post--h-md  .lm-post__excerpt { -webkit-line-clamp: 8; }
.lm-post--h-uni .lm-post__excerpt { -webkit-line-clamp: 8; }
.lm-post--h-sm  .lm-post__excerpt { -webkit-line-clamp: 4; }

/* ---- Kachel ---- */
.lm-post {
	border-radius: 20px;
	overflow: hidden;
	background: var(--lm-card-color, var(--lm-card-fill)); /* Label-Farbe (Fallback creme) */
}
.lm-post__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	color: #000;
	text-decoration: none;
}
.lm-post__media {
	overflow: hidden;
	flex-shrink: 0; /* Bildhöhe bleibt konstant, auch in kürzeren (kleinen) Karten */
}
.lm-post__media img {
	display: block;
	width: 100%;
	aspect-ratio: 364 / 157; /* feste Bildhöhe wie im Figma */
	object-fit: cover;
	transform: scale(1.03); /* Default leicht größer → beim Verkleinern entsteht kein Rand */
	/* kurze, angenehme Kurve (easeOutCubic, Framer-artig) */
	transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.lm-post__inner:hover .lm-post__media img {
	transform: scale(1); /* beim Hover kleiner, füllt aber weiterhin (kein Rand) */
}
.lm-post__body {
	flex: 1 1 auto;
	min-height: 0;        /* erlaubt dem Auszug zu schrumpfen */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
}
.lm-post__title {
	margin: 0 0 1.5rem; /* Abstand Titel → Auszug */
	font-family: var(--lm-mono);
	font-weight: 700;
	font-size: 1.5rem; /* alle Karten gleich groß wie der Lessi-/Featured-Titel */
	line-height: 1.2;
}
/* Animierte Unterstreichung: pro Zeile von links nach rechts (Hintergrund-Gradient
 * je Zeilen-Fragment dank box-decoration-break). */
.lm-post__title-ink {
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 0.09em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.lm-post__inner:hover .lm-post__title-ink {
	background-size: 100% 0.09em;
}
.lm-post__excerpt {
	margin: 0 0 3rem;    /* fester Abstand Auszug → Label (endet 3rem darüber) */
	flex: 0 1 auto;      /* darf schrumpfen, damit das Label nie rausrutscht */
	min-height: 0;
	font-size: 1.05rem;  /* wie die Kalender-Beschreibung auf der Startseite */
	line-height: 1.55;
	/* Text kürzen mit „…" – wie viel passt, hängt von der Kartenhöhe ab. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
}
/* Label sitzt unten mit Mindestabstand (gap oben). */
.lm-post__label {
	margin-top: auto;
	flex-shrink: 0;     /* Label bleibt fest, rutscht nie aus der Karte */
	padding: 11px 16px; /* ein Drittel höher als zuvor */
	border: 1.5px solid #000;
	border-radius: 0.5rem;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
}

/* ---- Hover-Element unten rechts: „Siegel" + durchrutschender Pfeil ---- */
.lm-post__arrow {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 56px;
	height: 60px;
	display: grid;
	place-items: center;
	z-index: 2;
	opacity: 0;
	transform: scale(0.5) rotate(-35deg);
	transition: opacity 0.3s cubic-bezier(0.33, 1, 0.68, 1),
		transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
	pointer-events: none;
}
.lm-post__inner:hover .lm-post__arrow {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}
.lm-post__arrow-shape {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: #141414; /* Farbe der Siegel-Form */
}
.lm-post__arrow-clip {
	position: relative;
	width: 22px;
	height: 22px;
	overflow: hidden;
	z-index: 1;
}
.lm-post__arrow-ic {
	position: absolute;
	inset: 0;
	width: 22px;
	height: 22px;
	transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.lm-post__arrow-ic svg {
	display: block;
	width: 100%;
	height: 100%;
}
.lm-post__arrow-ic.a1 { transform: translate(0, 0); }
.lm-post__arrow-ic.a2 { transform: translate(-120%, 120%); }
.lm-post__inner:hover .lm-post__arrow-ic.a1 { transform: translate(120%, -120%); }
.lm-post__inner:hover .lm-post__arrow-ic.a2 { transform: translate(0, 0); }

/* ---- Fixierter Beitrag (große Karte mit eigener, höherer Höhe) ---- */
.lm-post--featured {
	aspect-ratio: 364 / 375; /* etwas höher als der frühere Streckzustand – bei Bedarf anpassen */
}
/* Fixe Karten bekommen KEIN Label-Chip (sonst wirkt der Filter kaputt). */
.lm-post--featured .lm-post__label {
	display: none;
}
/* Bild-lose fixe Karte: oben ausgerichtet und ein Drittel kürzer. */
.lm-aktuelles__featured--nomedia .lm-post--featured {
	aspect-ratio: 364 / 238; /* ein Drittel kürzer als 364/357 */
}
.lm-post--featured .lm-post__excerpt {
	-webkit-line-clamp: 12;
}

/* ---- Platzhalter für den fixierten Beitrag ---- */
.lm-post--placeholder {
	background: var(--lm-card-fill);
	border: 2px dashed #b7b1a2;
}
.lm-post--placeholder .lm-post__inner {
	color: #6b6459;
}

/* ---- Farben je Label (Kategorie-Slug) → Hintergrund + Pfeilfarbe ---- */
.lm-post--update   { --lm-card-color: #a4a4ff; }
.lm-post--aktionen { --lm-card-color: #ff4200; }
.lm-post--story    { --lm-card-color: #fcea02; }
.lm-post--projekte { --lm-card-color: #ccff00; }
.lm-post--jobs     { --lm-card-color: #ffffff; }
/* Pfeil im Hover-Siegel nimmt die Kartenfarbe an. */
.lm-post__arrow-ic svg {
	stroke: var(--lm-card-color, #fff);
}

.lm-aktuelles__empty {
	font-style: italic;
}
.lm-aktuelles.is-loading {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.lm-aktuelles { padding-top: 5.5rem; }
	.lm-aktuelles__top { flex-direction: column; }
	.lm-aktuelles__featured { flex-basis: auto; max-width: 100%; }
	/* Feste Höhen nur auf Desktop – hier Karten in natürlicher Höhe, gestapelt. */
	.lm-aktuelles__grid { flex-wrap: wrap; }
	.lm-aktuelles__col { flex-basis: 100%; }
	.lm-post--h-lg, .lm-post--h-md, .lm-post--h-sm, .lm-post--h-uni { aspect-ratio: auto; }
	.lm-post__excerpt { -webkit-line-clamp: 8; }
}
@media (max-width: 600px) {
	.lm-aktuelles { padding-top: 3.5rem; }
	.lm-chip { font-size: 0.95rem; padding: 9px 18px; }
}