/* ═══ Baustein Buchungsstrecke ══════════════════════════════
   Der Bereich sitzt auf Papier, weil das fremde iFrame hell ist
   und sich nicht umfaerben laesst. Alles andere waere ein
   heller Kasten in einer dunklen Flaeche.

   Vor der Einwilligung steht die Sperre im normalen Fluss und
   bestimmt die Hoehe selbst. Ein leerer Kasten von 760 Pixeln
   mit drei Zeilen Text in der Mitte waere auf dem Handy die
   halbe Bildschirmhoehe Leere.
   ═══════════════════════════════════════════════════════════ */


.buchung__kopf {
	max-width: 62ch;
	margin-bottom: var(--s6);
}

/* ── Rahmen der Module ───────────────────────────────────
   Ein Rahmen fuer alle vier Module von easyGuestManagement, siehe
   partials/components/egm-rahmen.php. Leer und ohne Sperre, also
   bevor eine andere Sperre der Seite freigibt, nimmt er keinen
   Platz ein. */
.egm {
	container-type: inline-size;
	background: var(--pa);
	box-shadow: inset 0 0 0 1px var(--ln);
}
.egm:empty { display: none; }
.egm iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* ── Hoehen, gemessen am 28. September ───────────────────
   scrolling="no" bei voller Breite heisst fester Rahmen. Jede Zahl
   ist die sichtbare Hoehe des Moduls bei dieser Rahmenbreite, auf
   den Pixel gemessen, jeweils die groesste im Bereich. Gemessen
   wird am Rahmen, nicht am Fenster: das Modul bricht nach seiner
   eigenen Breite um (Bootstrap, 576, 768, 992), und der Rahmen ist
   auf der Appartementseite schmaler als auf der Preisseite. Deshalb
   Container Queries statt Media Queries.

   Die schmalste Stufe gilt ab 284 Pixeln Rahmen, also 320 Pixeln
   Fenster; 354 Pixel Rahmen sind 390 Pixel Fenster.

   Stimmt eine Zahl nicht mehr, weil der Anbieter sein Modul
   aendert, ist das Modul abgeschnitten oder steht auf Weissraum.
   Nachmessen, nicht schaetzen. */

/* Kalender. Schmal eine Tafel je Wohnung, sechs Wochenzeilen im
   laengsten Monat (Mai 2027: 1141, September 2026 mit fuenf: 991).
   Ab 816 Pixeln eine Zeile je Wohnung, unabhaengig vom Monat. */
/* Die Tabelle des Kalenders ist beim Anbieter hoechstens 1144 Pixel
   breit, darunter fuellt sie den Rahmen. Breiter stand rechts ein
   leerer Streifen, bei 1440 waren es 181 Pixel. Der Rahmen endet
   deshalb dort, wo die Tabelle endet, und steht links im Raster wie
   die Ueberschrift darueber. In Monaten mit 30 Tagen bleiben 24 Pixel
   rechts frei; das setzt das Modul so. */
.egm--kalender { max-width: 1144px; }
.egm--kalender iframe { height: 1141px; }
@container (min-width: 816px) {
	.egm--kalender iframe { height: 388px; }
}

/* Preisliste, je Wohnung verschieden hoch: Spalten je Personenzahl
   und die Laenge der Beschreibung. 1 Nederkogel, 2 Grieskogel,
   3 Gaislachkogel, 4 Soeldenkogel, 5 Brunnenkogel. */
.egm--preise[data-room="1"] iframe,
.egm--preise[data-room="4"] iframe { height: 369px; }
.egm--preise[data-room="2"] iframe { height: 397px; }
.egm--preise[data-room="3"] iframe { height: 426px; }
.egm--preise[data-room="5"] iframe { height: 363px; }
@container (min-width: 354px) {
	.egm--preise[data-room="1"] iframe,
	.egm--preise[data-room="4"] iframe { height: 308px; }
	.egm--preise[data-room="2"] iframe,
	.egm--preise[data-room="5"] iframe { height: 336px; }
	.egm--preise[data-room="3"] iframe { height: 364px; }
}
@container (min-width: 576px) {
	.egm--preise[data-room="1"] iframe,
	.egm--preise[data-room="4"] iframe { height: 292px; }
	.egm--preise[data-room="2"] iframe,
	.egm--preise[data-room="5"] iframe { height: 321px; }
	.egm--preise[data-room="3"] iframe { height: 349px; }
}
@container (min-width: 768px) {
	.egm--preise[data-room="1"] iframe,
	.egm--preise[data-room="4"] iframe { height: 281px; }
	.egm--preise[data-room="2"] iframe,
	.egm--preise[data-room="5"] iframe { height: 309px; }
	.egm--preise[data-room="3"] iframe { height: 337px; }
}

/* Buchungsformular. Das eine Modul mit Groessenanpasser, weil seine
   fuenf Schritte verschieden hoch sind. Die Mindesthoehe ist Schritt
   eins; waechst ein Schritt darueber, waechst der Rahmen mit. */
.egm--buchen iframe { min-height: 648px; }
@container (min-width: 707px) {
	.egm--buchen iframe { min-height: 559px; }
}
@container (min-width: 1325px) {
	.egm--buchen iframe { min-height: 449px; }
}

/* ── Einwilligung als Zeile ──────────────────────────────── */
/* Ein Absatz links, ein Knopf rechts, auf --pa2, Haarlinie darunter.
   Darunter beginnt sofort der Rahmen. Vorher stand hier eine zweite
   Seite ueber die volle Breite, und wer auf "Verfuegbarkeit pruefen"
   geklickt hatte, sah als Erstes wieder einen Knopf.
   AUFTRAG_BUCHEN_UND_ENGLISCH.md, Abschnitt 2. */
.buchung__sperre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	background: var(--pa2);
	padding: var(--s3) var(--s4);
	border-bottom: 1px solid var(--ln);
}

.buchung__sperre p {
	margin: 0;
	max-width: 72ch;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--mu);
}

.buchung__sperre .kn {
	height: 2.5rem;
	padding-inline: 1.1rem;
	font-size: .875rem;
}

.buchung__fenster { margin-top: var(--s3); }

/* Unter dem Kalender: wie die Sperre klein und gedaempft, der Verweis
   springt zum Formular darueber. */
.buchung__hinweis {
	margin-top: var(--s3);
	max-width: 72ch;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--mu);
}

/* ── Ohne Kundencode ────────────────────────────────────── */
/* Kein Rahmen, kein Knopf, der ins Leere fuehrt. Die Nummer ist auf
   dieser Seite der eine farbige Knopf: sie ist die Handlung, die
   jetzt zum Ziel fuehrt. */
.buchung__ersatz {
	align-items: center;
	text-align: center;
}

@media (max-width: 61.25rem) {

	.buchung__sperre {
		flex-direction: column;
		align-items: stretch;
		gap: var(--s3);
	}
}