/* Modul „Destination-Kacheln".
   Prototypen: 01 „Destination" (ohne Kurztext), 02 „Die Orte" (mit Kurztext). */

.modul--kacheln { padding-block: var(--sektion-y); }
.modul--kacheln.modul--linie-oben { padding-top: 0; }

.modul-kacheln__rahmen.fk-linie-oben { padding-top: var(--kopf-abstand); }

/* ---------------------------------------------------------------------- *
 * Kopf: links Kicker, H2, Unterzeile — rechts Text
 * ---------------------------------------------------------------------- */

.modul-kacheln__kopf {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: var(--kopf-gap, clamp(28px, 4vw, 64px));
	align-items: end;
}

.modul-kacheln__unterzeile {
	margin: 14px 0 0;
	font-size: var(--fs-unterzeile, 17px);
	color: var(--text-60);
}

.modul-kacheln__text {
	max-width: 52ch;
	color: var(--text-78);
}

.modul-kacheln__text p { margin: 0; }
.modul-kacheln__text p + p { margin-top: 16px; }

/* Der Schlusssatz steht im Design als eigene, kräftigere Zeile: in der Redaktion als fetter Absatz. */
.modul-kacheln__text strong {
	font-weight: var(--fw-label);
	color: var(--ink);
}

/* Übersichts-Variante (02): Text rechts kurz und klein, unten bündig. */
.modul--mit-kurztext .modul-kacheln__kopf {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
}

.modul--mit-kurztext .modul-kacheln__text {
	max-width: var(--mass-kurz);
	text-wrap: balance;
	font-size: var(--fs-karte);
	color: var(--text-65);
}

/* ---------------------------------------------------------------------- *
 * Raster und Kachel
 * ---------------------------------------------------------------------- */

.modul-kacheln__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--kachel-gap);
	margin: var(--raster-abstand) 0 0;
	padding: 0;
	list-style: none;
}

.modul--mit-kurztext .modul-kacheln__liste {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--grid-gap);
}

.modul-kacheln__liste:first-child { margin-top: 0; }

.modul-kacheln__eintrag { margin: 0; }

.modul-kacheln__kachel {
	display: block;
	color: inherit;
	text-decoration: none;
}

.modul-kacheln__bild {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--linie-08);
}

.modul-kacheln__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter var(--dur-bild) var(--ease-aus);
}

/* Farbe zeigt sich, sobald die Kachel gemeint ist — auch über Titelzeile und Tastatur. */
.modul-kacheln__kachel:hover .fk-bw--hover,
.modul-kacheln__kachel:focus-visible .fk-bw--hover { filter: none; }

/* Kleine Versalzeile unter dem Bild (01). */
.modul-kacheln__zeile {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 9px;
	font-size: var(--fs-label-klein);
	font-weight: var(--fw-label);
	letter-spacing: var(--ls-label-klein);
	line-height: var(--lh-text);
	text-transform: uppercase;
	color: var(--text-60);
}

/* Titelzeile mit H3 und goldenem Pfeil (02). */
.modul-kacheln__zeile--gross {
	margin-top: 16px;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

.modul-kacheln__zeile--gross .modul-kacheln__titel {
	margin: 0;
	font-size: var(--fs-h3-kachel, 20px);
	font-weight: var(--fw-h3);
	transition: color var(--dur-schnell) var(--ease-aus);
}

.modul-kacheln__zeile--gross .modul-kacheln__pfeil {
	color: var(--gold);
}

/* Pfeil (SVG) mittig zur Zeile, rechts bündig mit der Bildkante. */
.modul-kacheln__pfeil { flex: none; align-self: center; }

.modul-kacheln__kachel:hover .modul-kacheln__zeile--gross .modul-kacheln__titel { color: var(--gold); }

.modul-kacheln__kurztext {
	margin: 6px 0 0;
	font-size: var(--fs-karte-klein, 14.5px);
	line-height: var(--lh-text);
	color: var(--text-65);
	/* Zwei Zeilen, keine mit einem einzelnen Wort. */
	text-wrap: balance;
}

/* ---------------------------------------------------------------------- *
 * „Alle Destinationen"
 * ---------------------------------------------------------------------- */

/* Typografie und Goldunterstrich bringt `.fk-link` (site.css) mit. */
.modul-kacheln__alle { margin: var(--abstand-aktion) 0 0; }

/* Mobil: Kacheln ohne Kurztext zu zweit — vier Hochformate untereinander
   wären vier Bildschirmhöhen Scrollen für vier Ortsnamen. */
@media (max-width: 560px) {
	.modul--kacheln:not(.modul--mit-kurztext) .modul-kacheln__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}