/* ═══ Baustein Kacheln ══════════════════════════════════════
   Dieselbe Machart wie die Vorteile-Karten: Bild, Verlauf, Text
   unten. Dadurch bleibt die Handschrift der Seite gleich, egal ob
   drei Karten oder sieben Kacheln.
   ═══════════════════════════════════════════════════════════ */

/* Kopf des Blocks: links Nummer, Rubrik und Ueberschrift, rechts
   der Vorspann. Auf einer Spalte untereinander. */
.kacheln__kopf {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--r-mittel);
	align-items: end;
	margin-bottom: var(--r-mittel);
}
.kacheln__kopf .lead { max-width: 44ch; }

@media (max-width: 980px) {
	.kacheln__kopf { grid-template-columns: 1fr; gap: var(--s3); }
}

/* Vier Spalten, aus denen die Kacheln ihre Groesse nehmen: eine
   grosse ueber zwei mal zwei, vier einfache, zwei breite ueber je
   zwei Spalten. Die Reihenfolge im Markup ergibt die Belegung. */
.kacheln__g {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(11rem, 20vw, 16rem);
	gap: 2px;
}
.kachel--gross {
	grid-column: span 2;
	grid-row: span 2;
}
.kachel--breit {
	grid-column: span 2;
}
.kachel--gross .kachel__nm { font-size: clamp(20px, 2vw, 32px); }
.kachel--gross .kachel__satz { font-size: 14.5px; max-width: 42ch; }

/* Volle Deckkraft. Mit .78 lag die Zeile ueber einem hellen Hang
   bei 2,5 zu 1, und durchscheinende Schrift auf einem Foto ist der
   falsche Hebel: die Arbeit macht der Verlauf. */
.kachel__wann {
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	background: rgba(12, 13, 15, .62);
	padding: .45rem .6rem .4rem;
}
.kachel__pf {
	position: absolute;
	top: var(--kachel-polster);
	right: var(--kachel-polster);
	opacity: 0;
	transform: translate(-6px, 6px);
	transition: opacity .4s var(--e), transform .4s var(--e);
}
.kachel:hover .kachel__pf,
.kachel:focus-visible .kachel__pf { opacity: 1; transform: none; }

.kachel {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	--kachel-polster: clamp(20px, 2vw, 30px);
	padding: var(--kachel-polster);
	color: var(--we);
	text-decoration: none;
	background: var(--pa2);
}
.kachel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform .9s var(--e);
}
/* Kein Vollflaechenverlauf. Er lag ueber dem ganzen Bild und machte
   aus jedem Foto einen grauen Abzug; das Motiv war nur noch der
   Hintergrund seiner Beschriftung. Jetzt liegt er im unteren Teil,
   dort wo die Schrift steht, und das Bild bleibt hell.
   AUFTRAG_APPARTEMENT.md Teil G, Referenz idee-soelden.html. */
.kachel::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10, 11, 13, 0) 0%, rgba(10, 11, 13, .72) 100%);
}

/* Das Weltcupbild ist ein High-Key-Foto, Mittelwert 225: Schnee im
   Gegenlicht. Der Titel lag darauf bei 4,36 zu 1, knapp unter der
   Grenze. Der Verlauf bleibt im unteren Teil und deckt dort etwas
   mehr; das Bild bleibt hell, so wie die Referenz es verlangt.
   NACHPRUEFUNG_04-09.md, Abschnitt 3. */
.kachel--tief::after {
	background: linear-gradient(180deg, rgba(10, 11, 13, 0) 0%, rgba(10, 11, 13, .84) 100%);
}
.kachel:hover img,
.kachel:focus-visible img { transform: scale(1.04); }

/* Die Ortszeile sitzt auf einer Platte, der Titel darunter traegt
   einen Schatten. Vorher lag hier ein zweiter Verlauf, der am
   Textblock hing und mitwanderte. Er war die Antwort auf den
   Vollflaechenverlauf: der war an die Kachelhoehe gebunden und auf
   der grossen Kachel dort duenn, wo der Text stand. Ohne ihn
   braucht es ihn nicht mehr.

   Eine Platte ist ausserdem ehrlicher als ein Verlauf: sie deckt,
   wo sie liegt, und laesst das Bild daneben in Ruhe. */
.kachel__text {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.kachel__nm {
	font-weight: var(--gw-normal);
	letter-spacing: -.03em;
	font-size: clamp(17px, 1.5vw, 22px);
	line-height: 1.1;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}
.kachel__satz {
	font-size: var(--t-mittel);
	color: rgba(255, 255, 255, .78);
	max-width: 34ch;
}

.kachel:focus-visible {
	outline: 2px solid var(--we);
	outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {
	.kachel img { transition: none; }
	.kachel:hover img { transform: none; }
}

@media (max-width: 61.25rem) {
	.kacheln__g {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 44vw;
	}
	.kachel--gross { grid-column: span 2; grid-row: span 1; }
	.kachel--breit { grid-column: span 2; }
}

@media (max-width: 38.75rem) {
	.kacheln__g {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 62vw;
	}
	.kachel,
	.kachel--gross,
	.kachel--breit { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
	.kachel__pf { transition: none; }
}

/* Ohne Untertitel richten sich die Kacheln von selbst aus: die
   Ortszeile ist eine Zeile, der Titel hoechstens zwei. Die festen
   Mindesthoehen fuer drei Textzeilen sind damit weg. Wo der
   Untertitel eingeschaltet ist, traegt er sich selbst. */
.kachel__satz {
	line-height: 1.45;
}

/* Beim Weltcupmotiv laeuft der Ski bei mittigem Zuschnitt durch die
   Ueberschrift. Der Ausschnitt haelt ihn darunter. */
.kachel--tief img { object-position: 60% 38%; }