/* ═══════════════════════════════════════════════════════════
   Appartement-Einzelseite.
   Vorbild: 03_Design/final/idee-appartement.html

   Geladen nur dort. Inhalt links, Buchungskarte rechts klebend;
   am Handy wird die Karte zur festen Leiste am unteren Rand.
   ═══════════════════════════════════════════════════════════ */


.appartement__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	gap: var(--s7);
	align-items: start;
}

/* ── Galerie ────────────────────────────────────────────── */
/* Ein grosses Bild ueber zwei Zeilen, vier kleine daneben, zwei
   Pixel Fuge. Alle weiteren Bilder stehen als Feld da, aber nicht
   im Raster: sie tragen die Vollbildansicht. */
.gal {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	/* minmax(0, 1fr), nicht 1fr: eine Zeile mit 1fr kann nicht unter
	   den Inhalt schrumpfen, und die Bilder malten dann ueber den
	   Kasten hinaus. Der Kasten mass 454 Pixel, gezeichnet wurden
	   569, und die Kontrastmessung hielt die Faktenliste darunter
	   gegen ein Foto. */
	grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2px;
	aspect-ratio: 16 / 8;
	overflow: hidden;
}

.gal__feld {
	position: relative;
	overflow: hidden;
	/* Ohne min-height kann ein Rasterkind nicht unter die Hoehe
	   seines Bildes schrumpfen, und das Raster wird hoeher als sein
	   Seitenverhaeltnis: gemessen 569 statt 448 Pixel. */
	min-height: 0;
	min-width: 0;
	padding: 0;
	border: 0;
	background: var(--pa2);
	cursor: pointer;
}
/* Absolut in der Zelle, nicht im Fluss: die Zelle ist ein button,
   und darin loest height: 100% nicht gegen die Rasterzeile auf.
   Das vierte Bild stand 341 Pixel hoch in einer Zeile von 226 und
   ragte 115 Pixel unter den Kasten, der es abschnitt; unten fehlte
   ein Drittel des Fotos, gemessen am 17. September. */
.gal__feld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--e);
}
.gal__feld:hover img,
.gal__feld:focus-visible img { transform: scale(1.04); }

.gal__feld:first-child { grid-row: span 2; }

/* Die Zeile bestimmt die Hoehe, nicht das Seitenverhaeltnis der
   Galerie-Zelle: .galerie__feld bringt 4/3 mit, und galerie.css wird
   nach dieser Datei geladen. Mit 4/3 stand die vierte Zelle 341
   Pixel hoch in einer Zeile von 226 und ragte unter den Kasten. */
.gal .gal__feld { aspect-ratio: auto; }

/* Ab dem sechsten Bild nur noch in der Vollbildansicht. */
.gal__feld:nth-child(n+6) { display: none; }

/* Hat eine Wohnung nur vier Bilder, bliebe unten rechts eine Zelle
   leer. Das vierte nimmt dann beide Spalten. */
.gal__feld:nth-child(4):last-child { grid-column: span 2; }

/* Bei drei Bildern bliebe die ganze untere Zeile rechts leer. Der
   Soeldenkogel hat seit dem 22. September drei: das vierte war
   soeldenkogel-bad-1 ein zweites Mal, enger beschnitten. Die beiden
   rechten nehmen dann beide Zeilen. */
.gal__feld:nth-child(2):nth-last-child(2),
.gal__feld:nth-child(3):last-child { grid-row: span 2; }

/* Und bei zweien nimmt das zweite den ganzen Rest. Nach der
   Bildsichtung vom 22. September hat der Soeldenkogel noch zwei
   Aufnahmen, Wohn- und Schlafraum und Bad; die Kueche wartet auf ein
   neues Foto. Ohne diese Regel stand rechts ein leeres Feld ueber die
   halbe Breite. */
.gal__feld:nth-child(2):last-child { grid-column: span 2; grid-row: span 2; }

.gal__alle {
	position: absolute;
	right: var(--s3);
	bottom: var(--s3);
	z-index: 1;
}

/* Der Knopf traegt hier Papier, nicht den Akzent: der Akzent
   gehoert dem Weg zur Buchung. */
.kn--hell {
	background: var(--pa);
	color: var(--tx);
	box-shadow: inset 0 0 0 1px var(--ln);
}

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

/* ── Beschreibung und Fakten ────────────────────────────── */
.appartement__beschreibung {
	margin-top: var(--s5);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s6);
	align-items: start;
}
.appartement__beschreibung .fliesstext {
	font-size: 1rem;
	line-height: 1.6;
	max-width: 56ch;
}


/* ── Ein Abschnitt auf der Seite ────────────────────────── */
/* Der Abstand zwischen zwei Abschnitten steht einmal. Rand und
   Polster zusammen ergaben 73 Pixel, einen Wert, den die Skala
   nicht kennt; das Polster allein sind 48 und die Haarlinie einer. */
/* Die Bloecke neben der klebenden Buchungskarte sind Abschnitte im
   Kleinen und tragen den Abstand des Abschnitts: --s5 am Handy, --s6
   ab 760, nicht mehr. */
.appartement__block {
	margin-top: 0;
	padding-top: var(--abschnitt);
	border-top: 1px solid var(--ln);
}

/* ── Ausstattung ────────────────────────────────────────── */
.appartement__aus {
	columns: 3;
	column-gap: var(--s5);
	list-style: none;
}
.appartement__aus li { break-inside: avoid; }
.appartement__aus li {
	padding-block: var(--s2);
	border-bottom: 1px solid var(--ln);
	font-size: .9375rem;
}

/* ── Preise ─────────────────────────────────────────────── */
/* Die Preisliste ist seit dem 28. September das Modul von
   easyGuestManagement, Rahmen und Hoehe in blocks/buchung.css. */
.appartement__hin {
	margin-top: var(--s3);
	font-size: .8125rem;
	color: var(--mu);
	max-width: 62ch;
}

/* ── Grundriss und Lage im Haus ─────────────────────────── */
.appartement__zwei {
	display: grid;
	/* minmax(0, 1fr), nicht 1fr: die Mindestbreite einer Rasterzelle
	   ist sonst die Mindestbreite ihres Inhalts, und die ist beim
	   Grundriss die natuerliche Breite des Bildes. Am 22. September
	   stand der Kasten deshalb 3048 Pixel breit in einem Fenster von
	   390, und die Seite liess sich 2676 Pixel weit nach rechts
	   schieben. Vorher fiel das nicht auf: ohne Grundriss am Beitrag
	   gab es den ganzen Abschnitt nicht. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2px;
}
/* Steht der Grundriss allein, nimmt er die Breite des Kastens. Auf
   halber Spalte war er am Rechner 405 Pixel breit, und die
   Beschriftung der Raeume war darin nicht mehr zu lesen. Der Kasten
   richtet sich nach der Zeichnung und nicht nach 4 zu 3, sonst bliebe
   rundherum Papier stehen, das nichts traegt.

   Die Zeichnung selbst hoert bei 660 Pixeln auf, aus zwei Gruenden.
   Erstens lohnt sich der Klick sonst nicht: die Lupe zeigt bei 1440
   1354 Pixel, und die Haelfte davon sind 677. Zweitens ist 660 rund
   so breit, wie die Datei wirklich ist; die Vorlage misst 900 mal
   600, alles darueber ist gerechnet. Ueber die ganze Spalte stuende
   sie 574 Pixel hoch, erlaubt sind ohnehin nur 560 (Phase 2,
   Regel 8). */
.appartement__zwei--allein { grid-template-columns: minmax(0, 1fr); }
.appartement__zwei--allein .appartement__plan { aspect-ratio: auto; }
/* min(100%, ...), nicht 660px allein: die Regel ist genauer als die
   allgemeine mit max-width 100 Prozent und haette sie ersetzt. Die
   Zeichnung stand dann 660 Pixel breit in einer Zelle von 302. */
.appartement__zwei--allein .appartement__plan img { max-width: min(100%, 660px); }

/* Ein einzelnes Bild in der Lupe hat nichts zum Blaettern. */
.lupe__vor[hidden],
.lupe__zurueck[hidden] { display: none; }

/* Eine Zeichnung je Wohnung, nebeneinander. Die Anzahl steht nicht
   im Stil: grid-auto-flow column mit gleich breiten Spalten nimmt so
   viele, wie da sind, eine beim Soeldenkogel und drei beim
   Brunnenkogel. Am Handy untereinander, siehe unten. */
.appartement__plaene {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 2px;
}
/* Derselbe Knopf wie ein Galeriefeld, nur ohne Beschnitt: die
   Zeichnung wird nicht gefuellt, sie wird gezeigt. zoom-in sagt dem
   Zeiger, dass es gross geht, der Fokusrahmen der Tastatur. */
.appartement__plan__knopf {
	display: block;
	width: 100%;
	max-height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	appearance: none;
	line-height: 0;
}
.appartement__plan__knopf:focus-visible {
	outline: 2px solid var(--tx);
	outline-offset: 4px;
}

.appartement__plan {
	margin: 0;
	aspect-ratio: 4 / 3;
	background: var(--pa2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s3);
	padding: var(--s4);
}
.appartement__plan img {
	/* Der Kasten ist 4 zu 3, die Zeichnung 3 zu 2. Begrenzt wird
	   deshalb in beide Richtungen, sonst rechnet width auto gegen
	   max-height 100 Prozent und das Bild wird beliebig breit. */
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	mix-blend-mode: multiply;
}
.appartement__imhaus {
	background: var(--pa2);
	padding: var(--s4);
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	align-items: flex-start;
}
.appartement__imhaus p { max-width: 36ch; }

/* ── Buchungskarte ──────────────────────────────────────── */
.buchungskarte {
	position: sticky;
	top: calc(var(--kopf) + var(--s4));
	background: var(--pa2);
	padding: var(--s4);
}
.buchungskarte__preis {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s2);
	padding-bottom: var(--s3);
	border-bottom: 1px solid var(--ln);
}
.buchungskarte__preis b {
	font-weight: var(--gw-normal);
	font-size: 1.75rem;
	letter-spacing: var(--lw-preis);
}
.buchungskarte__preis span {
	font-size: .75rem;
	color: var(--mu);
}

.buchungskarte__felder {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
	margin-top: var(--s3);
}
.buchungskarte__felder > div {
	background: var(--pa);
	padding: var(--s2);
}
.buchungskarte__felder > div:last-child { grid-column: 1 / -1; }
.buchungskarte__felder label {
	display: block;
	font-size: var(--t-kick);
	font-weight: var(--gw-halb);
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mu);
}
.buchungskarte__felder input,
.buchungskarte__felder select {
	display: block;
	width: 100%;
	margin-top: var(--s1);
	border: 0;
	background: none;
	outline: none;
	font: var(--gw-normal) .9375rem var(--sans);
	color: var(--tx);
}
.buchungskarte__felder input:focus-visible,
.buchungskarte__felder select:focus-visible {
	outline: 2px solid var(--ak);
	outline-offset: 3px;
}

.buchungskarte__kn {
	width: 100%;
	margin-top: var(--s3);
	justify-content: center;
}
.buchungskarte__hin {
	margin-top: var(--s3);
	font-size: .75rem;
	line-height: 1.45;
	color: var(--mu);
}
/* Der Verweis steht im Satz und nimmt dessen Groesse an, nicht die
   .875rem des Textverweises (14 in 12, 1. Oktober). */
.buchungskarte__hin .tl { font-size: inherit; }
.buchungskarte .hinweis {
	margin-top: var(--s2);
	font-size: var(--t-klein);
	color: #9A2F22;
}

/* Am Handy die Leiste am unteren Rand. Sie zeigt Preis und Knopf,
   die Felder bleiben der Karte: eine Leiste mit drei Feldern waere
   eine zweite Buchungsstrecke. */
.buchungsleiste-mobil { display: none; }

/* ── Weitere Appartements ───────────────────────────────── */
/* Kopf und Liste tragen zusammen den Abstand zum ersten Bild: 24
   und 16 und die Haarlinie sind 41 Pixel, derselbe Wert wie im
   Seitenkopf zwischen Ueberschrift und Eckdaten. */

/* ── Gut zu wissen ──────────────────────────────────────── */
.appartement__wissen-g {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--s7);
	align-items: start;
}
.appartement__wege {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s4);
	margin-top: var(--s4);
}

/* ── Haltepunkt ─────────────────────────────────────────── */
@media (max-width: 61.25rem) {

	.appartement__raster {
		grid-template-columns: 1fr;
		gap: var(--s5);
	}

	.buchungskarte { display: none; }

	.buchungsleiste-mobil {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: var(--z-leiste);
		align-items: center;
		justify-content: space-between;
		gap: var(--s3);
		background: var(--pa);
		border-top: 1px solid var(--ln);
		padding: var(--s2) var(--m) calc(var(--s2) + var(--sicher-unten));
		box-shadow: 0 -8px 28px rgba(12, 13, 15, .1);
	}
	.buchungsleiste-mobil__preis b {
		display: block;
		font-weight: var(--gw-normal);
		font-size: 1.125rem;
		letter-spacing: -.02em;
	}
	.buchungsleiste-mobil__preis span {
		display: block;
		font-size: var(--t-kick);
		color: var(--mu);
	}
	/* Der Platz fuer die Leiste gehoert ans body, siehe layout.css. */
	body.appartement-seite { padding-bottom: var(--klebeleiste); }

	.gal {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		aspect-ratio: auto;
	}
	.gal .gal__feld { aspect-ratio: 1; }
	.gal .gal__feld:first-child {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 3 / 2;
	}
	/* Das vierte Bild nimmt beide Spalten, aber nicht als Quadrat:
	   707 Pixel hoch bei 768, erlaubt sind 560 (Phase 2). */
	.gal .gal__feld:nth-child(4):last-child { aspect-ratio: 2 / 1; }

	/* Dasselbe beim zweiten, wenn es nur zwei gibt. Die Regel am
	   Rechner gibt ihm beide Spalten und beide Zeilen; hier stand es
	   damit als Quadrat ueber die volle Breite, 354 Pixel hoch bei 390
	   und 707 bei 768, erlaubt sind 320 und 560. */
	.gal .gal__feld:nth-child(2):last-child {
		grid-row: auto;
		aspect-ratio: 2 / 1;
	}

	.appartement__beschreibung {
		grid-template-columns: 1fr;
		gap: var(--s4);
	}
	/* Am Handy als Raster mit zwei Spalten, nicht als Spaltensatz:
	   der verteilt neun Punkte ungleich, und unter der kuerzeren
	   Spalte blieb ein Rest von 137 Pixeln. Ist die Anzahl ungerade,
	   nimmt der letzte Punkt beide Spalten, dann enden sie
	   gemeinsam. */
	.appartement__aus {
		columns: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--s4);
	}
	.appartement__aus li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.appartement__zwei { grid-template-columns: minmax(0, 1fr); }
	.appartement__plaene { grid-auto-flow: row; }
	.appartement__wissen-g { grid-template-columns: 1fr; gap: var(--s4); }
}

/* Am Handy einspaltig (Sichtpruefung 1. Oktober: unter 600).
   Haltepunkt 760 statt 600, weil die Skala keinen anderen kennt. */
@media (max-width: 760px) {
	.appartement__aus { grid-template-columns: 1fr; }
}