/**
 * Tabletbereich: Desktop-Aufbau statt Telefon-Aufbau.
 *
 * Das Theme schaltet bei 960 px auf die Klappnavigation und bei 1080 px auf
 * einspaltige Layouts. Ein iPad liegt mit 768–834 px (hoch) und 1024–1366 px
 * (quer) genau dazwischen und bekam dadurch die Telefonfassung – obwohl der
 * Platz für zwei Spalten reicht.
 *
 * Diese Datei wirkt ausschließlich zwischen 768 px und 1280 px. Darunter bleibt
 * die Telefonfassung unangetastet, darüber die Desktopfassung; beide können
 * hierdurch also nicht kaputtgehen. Geladen wird sie zuletzt, damit sie die
 * bestehenden Umbrüche überschreibt.
 *
 * Aufbau:
 *   1. Kopfleiste: volle Navigation statt Klappmenü
 *   2. Inhalte, die zu früh einspaltig werden
 *   3. Hotelsuche: Filterspalte bleibt stehen
 *   4. Hotelseite: Buchungsspalte bleibt stehen
 */

/* ====================================================================== *
 * 1. Kopfleiste
 * ====================================================================== */

@media (min-width: 768px) and (max-width: 960px) {
	/* Auf einem Tablet ist für die Navigation Platz – das Klappmenü ist eine
	   Notlösung für Telefone. */
	.site-header__inner {
		display: flex;
		gap: 22px;
	}
	.brand { grid-column: auto; justify-self: auto; }
	.site-header__actions { grid-column: auto; justify-self: auto; margin-inline-start: auto; gap: 14px; }

	.nav { display: block; }
	.nav-toggle { display: none; }
	.mobile-nav,
	.mobile-nav.is-open { display: none; }

	.nav__list { gap: 20px; }
	.nav__list > li > a { font-size: 14.5px; }
}

@media (min-width: 900px) and (max-width: 960px) {
	/* Erst ab dieser Breite bleibt neben der Navigation noch Platz für den
	   Hauptknopf. Darunter genügen Merkzettel und Konto. */
	.header-cta { display: inline-flex; }
}

@media (min-width: 768px) and (max-width: 1080px) {
	.header-cta { padding-inline: 18px; font-size: 14.5px; }
}

/* ====================================================================== *
 * 2. Inhalte, die zu früh einspaltig werden
 * ====================================================================== */

@media (min-width: 768px) and (max-width: 1080px) {
	/* Angebotsseite: Buchungsspalte bleibt neben dem Inhalt stehen. */
	.rp-top { grid-template-columns: minmax(0, 1fr) 290px; }
	.rp-aside { position: sticky; max-width: none; }
	.rp-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Abenteuerseite */
	.advb { grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; }
	.rp-overview--adventure { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Kartenraster: drei statt zwei Spalten, solange die Karte lesbar bleibt. */
	.ap-cards--3,
	.ap-cards--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Das runde Siegel sitzt rechts im Hero. Die Vertrauenspunkte liefen bisher
	   darunter hindurch und wurden davon verdeckt. */
	.ap-hero__trust { max-width: 540px; }
}

@media (min-width: 768px) and (max-width: 860px) {
	/* Bei knapper Breite sind zwei Karten nebeneinander die bessere Wahl. */
	.ap-cards--3,
	.ap-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rp-top { grid-template-columns: minmax(0, 1fr) 250px; }
	.advb { grid-template-columns: minmax(0, 1fr) 240px; }
}

/* ====================================================================== *
 * 3. Hotelsuche
 * ====================================================================== */

@media (min-width: 768px) and (max-width: 1080px) {
	/* Die Filterspalte gehört auf ein Tablet neben die Treffer, nicht hinter
	   einen Knopf. */
	.hs__layout { grid-template-columns: 236px minmax(0, 1fr); gap: 20px; }

	.hs__side {
		position: sticky;
		top: calc(var(--header-h) + 14px);
		inset-inline-start: auto;
		width: auto;
		transform: none;
		z-index: auto;
		overflow: visible;
	}
	.hfx { border-radius: var(--ap-r); border: 1px solid var(--ap-line); min-height: 0; }

	.hs__filterbtn,
	.hfx__close { display: none; }
	.hs__backdrop { display: none; }

	/* Etwas kleinere Schrift, damit die schmalere Spalte nicht umbricht. */
	.hfx__sum { padding: 11px 13px; font-size: 14.5px; }
	.hfx__body { padding: 2px 13px 13px; }
	.hfx__check { font-size: 13.5px; }
}

@media (min-width: 768px) and (max-width: 1280px) {
	/* Bild- und Preisspalte schrumpfen mit, damit der Textteil lesbar bleibt.
	   Feste 268/232 px ließen bei 1100 px nur noch gut 140 px für den Namen. */
	.hrow { grid-template-columns: minmax(168px, 212px) minmax(0, 1fr) minmax(176px, 204px); }
	.hrow__medialink { min-height: 178px; }
	.hrow__title { font-size: 17.5px; }
	.hrow__value { font-size: 24px; }
	.hrow__aside { padding: 13px 14px; }
	.hrow__body { padding: 13px 14px; gap: 6px; }

	/* Der Knopf muss in die schmalere Spalte passen: Grundmaß sind 18 px
	   Schrift und 30 px Innenabstand, das sprengt sie. */
	.hrow__cta {
		font-size: 14.5px;
		padding-inline: 12px;
		gap: 6px;
		height: 42px;
		min-width: 0;
	}
	.hrow__cta span { min-width: 0; }
}

@media (min-width: 900px) and (max-width: 1080px) {
	/* Zimmertabelle bleibt eine Tabelle statt Karten zu werden. Unterhalb von
	   900 px reicht die Breite dafür nicht – dort bleibt es bei den Karten.
	   Die Zellen dürfen umbrechen, sonst schiebt sich die Tabelle über den
	   Rand und Preis und Knopf verschwinden. */
	.hrm__table thead { position: static; width: auto; height: auto; clip-path: none; }
	.hrm__table tbody tr { display: table-row; border: 0; border-radius: 0; padding: 0; margin: 0; }
	.hrm__table th,
	.hrm__table td { display: table-cell; border-bottom: 1px solid var(--line-soft); padding: 7px 7px; }
	.hrm__table td[data-label]::before { content: none; }
	.hrm__table td[data-label=""] { margin-top: 0; }

	.hrm__table { font-size: 12.5px; }
	.hrm__table td:nth-child(2),
	.hrm__table td:nth-child(3),
	.hrm__table td:nth-child(4) { white-space: normal; }
	.hrm__room { font-size: 12.5px; gap: 5px; }
	.hrm__cellprice strong { font-size: 14px; }
	.hrm__go { width: auto; height: 32px; padding-inline: 12px; font-size: 12.5px; }

	/* hotels.css schiebt Bewertung und Preis unter den Text, sobald es unter
	   1080 px geht. Ab 900 px ist dafür aber Platz daneben. */
	.hrow__aside {
		grid-column: auto;
		border-inline-start: 1px solid var(--line-soft);
		border-block-start: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	.hrow__rating { justify-content: flex-end; }
	.hrow__rword { text-align: end; }
	.hrow__buy { margin-block-start: auto; text-align: end; }
	.hrow__cta { width: 100%; }
}

@media (min-width: 768px) and (max-width: 900px) {
	/* Zu dritt wird es zu eng: Bewertung und Preis wandern unter den Text,
	   die Filterspalte bleibt aber stehen. */
	.hrow { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); }
	.hrow__aside {
		grid-column: 1 / -1;
		border-inline-start: 0;
		border-block-start: 1px solid var(--line-soft);
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.hrow__rating { justify-content: flex-start; }
	.hrow__rword { text-align: start; }
	.hrow__buy { margin-block-start: 0; text-align: end; }
	.hrow__cta { width: auto; }

	.hs__layout { grid-template-columns: 216px minmax(0, 1fr); }

	/* In der schmaleren Filterspalte stehen zwei Datumsfelder nebeneinander
	   nicht mehr lesbar – „tt.mm.jjjj“ wird abgeschnitten. */
	.hfx__row { grid-template-columns: minmax(0, 1fr); }
}

/* ====================================================================== *
 * 4. Hotelseite
 * ====================================================================== */

@media (min-width: 768px) and (max-width: 1080px) {
	.hd__grid { grid-template-columns: minmax(0, 1fr) 272px; gap: 20px; }
	.hd__side { position: sticky; top: calc(var(--header-h) + 64px); }
	.hd__title { font-size: 34px; }
	.hd__headside { align-items: flex-end; }

	/* Galerie: Hauptbild und Vorschau bleiben nebeneinander. */
	.hd .rgal { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
	.hd .rgal__main { min-height: 280px; max-height: 380px; aspect-ratio: auto; }
	.hd .rgal__thumbs { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); max-height: 380px; }
	.hd .rgal__thumb { aspect-ratio: auto; height: 100%; }

	.hrm__sumprice { width: auto; justify-content: flex-end; }

	/* Sechs Felder in einer Reihe passen hier nicht mehr. Zwei Reihen zu drei
	   Spalten füllen sich von selbst: Zeitraum und Nächte oben, Personen,
	   Zimmer und der Knopf darunter. */
	.hrm__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hrm__field--small input,
	.hrm__field--mid select { min-width: 0; }
	.hrm__submit { grid-column: auto; justify-content: center; }
}

@media (min-width: 768px) and (max-width: 900px) {
	.hd__grid { grid-template-columns: minmax(0, 1fr) 244px; }
}