/* ═══ Baustein Appartement-Index ════════════════════════════
   Vorbild: 03_Design/final/idee-start.html und idee-stimme-b.html

   Zwei Darstellungen aus einer Datenquelle:

   Karten  fuenf Typen in einer Reihe, Bild 4 zu 5, Preis auf der
           Karte. So steht die ganze Auswahl mit Preis in einem
           Bildschirm, und der eigene Preisabschnitt faellt weg.
   Liste   eine Zeile je Typ, Bild links, Preis rechts. Auf
           /appartements/, wo die Karten schon im Kopf stehen.

   Kein clamp() in grid-template-columns. Faellt die Regel in einem
   Renderer aus, bricht die ganze Zeile.
   ═══════════════════════════════════════════════════════════ */


/* ── Karten ─────────────────────────────────────────────── */
.apts__karten {
	display: grid;
	/* So viele Spalten, wie es Karten gibt. Auf der Startseite fuenf,
	   auf einer Appartementseite vier. */
	grid-template-columns: repeat(var(--apts-spalten, 5), minmax(0, 1fr));
	gap: var(--s4);
	border-top: 1px solid var(--ln);
	/* --s5, damit der Abstand vom Abschnittskopf zum ersten Bild auf
	   der Skala landet: 32 oben plus 32 hier sind 64. */
	padding-top: var(--s5);
	list-style: none;
}

.apts__karte a { display: block; }

/* Die Preiszeile steht in allen Karten unten buendig, auch wenn
   die Faktenzeile einer Karte umbricht (Brunnenkogel, 1. Oktober).
   Die Karte ist eine Spalte, die Preiszeile nimmt den Rest. */
.apts__karte { display: flex; flex-direction: column; }
.apts__karte a { display: flex; flex-direction: column; flex: 1 0 auto; }

.apts__bild {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--pa2);
	margin: 0;
}
.apts__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--e);
}
.apts__karte a:hover img,
.apts__karte a:focus-visible img { transform: scale(1.04); }

/* Abstand zum Bild darueber. --s4 mass gegen die Bildkante nur 23
   Pixel: der Kasten einer Zeile beginnt ueber der Oberlaenge.
   Siehe Pruefung 3 im Tor. */
.apts__nm {
	margin-top: var(--s5);
	font-size: 1.25rem;
	font-weight: var(--gw-normal);
	letter-spacing: -.025em;
	line-height: 1.1;
}
.apts__fakt {
	display: block;
	margin-top: var(--s1);
	font-size: .8125rem;
	color: var(--mu);
	/* Sonst steht "Personen" allein in der letzten Zeile. */
	text-wrap: pretty;
}
/* In der Karte gehoert der Abstand zur Preiszeile hierher; deren
   margin-top ist auto und fuellt nur auf. */
.apts__karte .apts__fakt { margin-bottom: var(--s2); }

/* Der Preis steht als Zeile unter einer Haarlinie: links das Wort,
   rechts die Zahl. In Textfarbe, nicht groesser als der Name. */
.apts__preis {
	display: flex;
	justify-content: space-between;
	gap: var(--s2);
	margin-top: auto;
	padding-top: var(--s2);
	border-top: 1px solid var(--ln);
	font-size: .875rem;
}
.apts__preis span { color: var(--mu); }

.apts__fuss {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--s4);
	flex-wrap: wrap;
	margin-top: var(--s4);
	font-size: .8125rem;
	color: var(--mu);
}
.apts__fuss span { max-width: 68ch; }
.apts__fuss .tl { flex: 0 0 auto; }
.apts__fuss .tl { color: var(--tx); }

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

@media (max-width: 61.25rem) {
	.apts__karten { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }

	/* Fuenf Karten auf zwei Spalten lassen unten eine Zelle leer, und
	   eine halbe Zeile sieht aus, als fehle eine Wohnung. Ist die
	   Anzahl ungerade, nimmt die letzte Karte die volle Breite und
	   ihr Bild das Querformat. Die Regel greift ueber die Anzahl,
	   nicht ueber eine Klasse: kommt ein sechster Typ dazu, geht das
	   Raster von selbst wieder auf. */
	.apts__karte:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.apts__karte:last-child:nth-child(odd) .apts__bild { aspect-ratio: 3 / 2; }
}

/* ── Liste ──────────────────────────────────────────────── */
.apts__liste {
	border-top: 1px solid var(--ln);
	list-style: none;
}
.apts__zeile { border-bottom: 1px solid var(--ln); }

.apts__verweis {
	display: grid;
	grid-template-columns: 2.5rem 11rem minmax(0, 1fr) auto;
	gap: var(--s6);
	align-items: center;
	padding-block: var(--s4);
}

.apts__nr {
	font-size: var(--t-kick);
	letter-spacing: .14em;
	color: var(--mu);
	font-variant-numeric: tabular-nums;
}

/* Der Bildbehaelter ist ein span und braucht deshalb display block,
   sonst greifen Breite und Verhaeltnis nicht. */
.apts__zeilenbild {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pa2);
}
.apts__zeilenbild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--e);
}
.apts__verweis:hover img,
.apts__verweis:focus-visible img { transform: scale(1.04); }

.apts__zeile .apts__nm { margin-top: 0; font-size: var(--t-name); }

.apts__zeile .apts__preis {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: right;
	white-space: nowrap;
}
.apts__zeile .apts__preis b {
	display: block;
	font-weight: var(--gw-normal);
	font-size: clamp(1.25rem, 1.8vw, 1.75rem);
	letter-spacing: var(--lw-preis);
	line-height: 1;
}
.apts__zeile .apts__preis span {
	display: block;
	margin-top: .25rem;
	font-size: var(--t-kick);
	letter-spacing: .14em;
	text-transform: uppercase;
}

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

@media (max-width: 61.25rem) {
	.apts__verweis {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--s3) var(--s4);
	}
	.apts__nr { display: none; }
	.apts__zeilenbild {
		grid-column: 1 / -1;
		aspect-ratio: 3 / 2;
	}
	.apts__zeile .apts__preis { align-self: start; }
}

/* ── Steckbrief ─────────────────────────────────────────── */
/* Vorbild: 03_Design/final/idee-appartements.html
   Auf /appartements/. Bild links, rechts alles, was man zum
   Vergleichen braucht: Name, ein Satz, Fakten, Ausstattung, aussen
   Preis und Knopf. Der Unterschied zur Zeile darueber ist nicht die
   Optik, sondern die Menge: wer hier steht, muss nicht klicken. */

.apts__steckliste {
	border-top: 1px solid var(--ln);
	list-style: none;
}

.apts__steck {
	display: grid;
	grid-template-columns: 4fr 8fr;
	gap: var(--s5);
	padding-block: var(--s4);
	border-bottom: 1px solid var(--ln);
	align-items: stretch;
}

/* Das Bild traegt den Namen schon als Platte. Fuer die Tastatur ist
   es deshalb kein zweites Ziel, der Name daneben ist der Verweis. */
.apts__steckbild { display: block; }

.apts__steckbild figure {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	height: 100%;
	background: var(--pa2);
}

.apts__steckbild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--e);
}

.apts__steck:hover .apts__steckbild img { transform: scale(1.03); }

.apts__steckinhalt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 14rem;
	gap: var(--s5);
	align-items: start;
}

.apts__stecknm {
	margin: 0;
	font-size: var(--t-name);
}

.apts__stecknm a {
	box-shadow: inset 0 -1px 0 transparent;
	transition: box-shadow .35s var(--e);
}

.apts__stecknm a:hover { box-shadow: inset 0 -1px 0 var(--tx); }

.apts__stecksatz {
	margin-top: var(--s2);
	max-width: 52ch;
	font-size: .9375rem;
}




/* --s1, nicht .3rem: unter der Beschriftung stand der Wert mit fuenf
   Pixeln, und fuenf steht auf keiner Skala. */

.apts__steckaus {
	margin-top: var(--s4);
	display: flex;
	flex-wrap: wrap;
	gap: .4rem var(--s2);
	list-style: none;
	font-size: .8125rem;
	color: var(--mu);
}

.apts__steckaus li::before {
	content: "·";
	margin-right: var(--s1);
}

.apts__steckaus li:first-child::before { content: none; }

.apts__steckpreis {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	height: 100%;
	padding-left: var(--s4);
	border-left: 1px solid var(--ln);
}

.apts__steckab { margin: 0; }

.apts__steckwert {
	display: block;
	font-size: clamp(1.25rem, 1.8vw, 1.75rem);
	letter-spacing: var(--lw-preis);
	line-height: 1;
}

.apts__steckbez {
	display: block;
	margin-top: .25rem;
	font-size: var(--t-kick);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mu);
}

.apts__steckpreis .kn { width: 100%; }

/* Der Textverweis steht unter dem Knopf, nicht am unteren Rand der
   Spalte. Die Referenz schiebt ihn mit margin-top:auto nach unten;
   ihre Zeilen sind aber flacher als unsere, und bei einem Bild von
   dreihundert Pixeln Hoehe klafft dazwischen ein Loch von hundert.
   Knopf und Verweis gehoeren zusammen, also stehen sie zusammen. */
.apts__steckpreis .tl {
	align-self: flex-start;
	font-size: .8125rem;
}

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

@media (max-width: 61.25rem) {

	/* --s4, nicht --s3: einspaltig steht der Name unmittelbar unter
	   dem Bild, und mit sechzehn Pixeln stand er zwanzig von der
	   Bildkante entfernt. */
	.apts__steck {
		grid-template-columns: 1fr;
		gap: var(--s4);
	}

	/* Am Handy ist der Name die Tastflaeche des ganzen Steckbriefs.
	   Als Zeile im Fluss war er neunzehn Pixel hoch. */
	.apts__stecknm a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.apts__steckbild figure { height: auto; }

	.apts__steckinhalt {
		grid-template-columns: 1fr;
		gap: var(--s3);
	}


	
	/* Preis und Knopf nebeneinander unter dem Faktenraster, so wie
	   in der Referenz. Untereinander waeren es drei Zeilen fuer
	   eine Information und eine Handlung. */
	.apts__steckpreis {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--s3);
		padding-left: 0;
		padding-top: var(--s3);
		border-left: 0;
		border-top: 1px solid var(--ln);
	}

	.apts__steckpreis .kn { width: auto; }

	.apts__steckpreis .tl {
		margin-top: 0;
		flex: 1 0 100%;
	}
}