/* plate_suites — Unterkünfte-Liste (Karten / Zeilen / Teaser / Kategorie-Karten).
 *
 * Gescoped auf .frame-type-atomicplan_suiteslist. Farben, Linien und Radien NUR
 * über var(--ls-*, <fallback>) — ein Projekt-Theme skinnt das Element, indem es
 * die Tokens setzt; ohne Theme greifen die neutralen Fallbacks.
 *
 * HARTE REGEL — Frame-System: hier steht KEIN Sektions-Hintergrund und KEIN
 * vertikales Sektions-Padding. Beides kommt ausschließlich aus den generischen
 * Frame-Feldern am Element (background_color_class, background_image,
 * space_before/after_class, frame_layout_inner_*). Wer hier `padding-block` oder
 * `background` auf die äußere Box legt, macht genau diese Felder wirkungslos.
 */

/* ---------- Filter-Chips ---------- */
.frame-type-atomicplan_suiteslist .ls-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}

.frame-type-atomicplan_suiteslist .ls-chip {
	display: inline-block;
	padding: 0.45em 1.1em;
	border: 1px solid var(--ls-line, rgba(45, 45, 45, 0.16));
	border-radius: var(--ls-pill-radius, 999px);
	font-size: 0.85rem;
	line-height: 1.3;
	text-decoration: none;
	color: inherit;
	background: transparent;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.frame-type-atomicplan_suiteslist .ls-chip:hover,
.frame-type-atomicplan_suiteslist .ls-chip:focus-visible {
	border-color: var(--ls-accent, #9c8255);
}

.frame-type-atomicplan_suiteslist .ls-chip.is-active {
	background: var(--ls-accent, #9c8255);
	border-color: var(--ls-accent, #9c8255);
	color: var(--ls-accent-contrast, #fff);
}

/* ---------- Grids ---------- */
.frame-type-atomicplan_suiteslist .ls-grid {
	display: grid;
	gap: var(--ls-gap, clamp(1.2rem, 2.5vw, 2rem));
}

.frame-type-atomicplan_suiteslist .ls-grid--cards {
	grid-template-columns: repeat(auto-fill, minmax(var(--ls-card-min, 20rem), 1fr));
}

.frame-type-atomicplan_suiteslist .ls-grid--teaser {
	grid-template-columns: repeat(auto-fill, minmax(var(--ls-teaser-min, 15rem), 1fr));
}

.frame-type-atomicplan_suiteslist .ls-grid--cats {
	grid-template-columns: repeat(auto-fill, minmax(var(--ls-cat-min, 14rem), 1fr));
}

/* Zeilen-Liste: eine Spalte, Trennlinie zwischen den Einträgen. */
.frame-type-atomicplan_suiteslist .ls-grid--rows {
	grid-template-columns: 1fr;
	gap: 0;
}

.frame-type-atomicplan_suiteslist .ls-grid--rows .ls-item + .ls-item {
	border-top: 1px solid var(--ls-line, rgba(45, 45, 45, 0.14));
}

/* ---------- Karte ----------
   Die Karte ist ein <article>, KEIN grosses <a>: ein Merk-Knopf in einem Link
   waere ungueltiges HTML und in Safari/Firefox nicht zuverlaessig bedienbar.
   Stattdessen deckt ein „stretched link" am Titel die Flaeche ab (siehe unten),
   und die Knopfzeile liegt als Geschwister darueber. `overflow: hidden` bleibt
   moeglich, weil die Stretched-Flaeche INNERHALB der Karte liegt. */
.frame-type-atomicplan_suiteslist .ls-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	border: 1px solid var(--ls-line, rgba(45, 45, 45, 0.14));
	border-radius: var(--ls-radius, 0.25rem);
	overflow: hidden;
	background: var(--ls-card-bg, transparent);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.frame-type-atomicplan_suiteslist .ls-card:hover,
.frame-type-atomicplan_suiteslist .ls-card:focus-within {
	border-color: var(--ls-accent, #9c8255);
}

/* Stretched link: EIN Link deckt die ganze Karte ab. Die Stapelebene ist NICHT
   Kosmetik — ohne `z-index: 1` malen die Geschwister, die im Markup NACH dem
   Titel stehen (Teaser, Faktenzeile, Ortszeile), sich darueber, und ein Klick
   auf den Kartentext tut nichts. Alles, was ausdruecklich NICHT zur Detailseite
   fuehren soll, liegt eine Ebene hoeher (.ls-card__actions, z-index: 2). */
.frame-type-atomicplan_suiteslist .ls-card__link {
	color: inherit;
	text-decoration: none;
}

.frame-type-atomicplan_suiteslist .ls-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Der Zuschnitt kommt aus der cropVariant „default" (4:3) im Backend — das
   aspect-ratio hier hält nur das Grid ruhig, solange das Bild lädt, und ist
   KEIN Ersatz-Zuschnitt. */
.frame-type-atomicplan_suiteslist .ls-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.frame-type-atomicplan_suiteslist .ls-card__img,
.frame-type-atomicplan_suiteslist .ls-row__img,
.frame-type-atomicplan_suiteslist .ls-teaser__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.frame-type-atomicplan_suiteslist .ls-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--ls-card-padding, 1.25rem);
	/* Die Knopfzeile sitzt immer unten, egal wie viel Text darueber steht —
	   sonst „huepfen" die Knoepfe im Raster von Karte zu Karte. */
	flex: 1 1 auto;
}

.frame-type-atomicplan_suiteslist .ls-card__actions {
	/* UEBER der Stretched-Link-Flaeche: ohne `position` + hoeheres `z-index`
	   faengt der Titel-Link den Klick ab und „Merken" navigiert zur Detailseite. */
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block-start: auto;
	padding-block-start: 0.9rem;
}

.frame-type-atomicplan_suiteslist .ls-card__type,
.frame-type-atomicplan_suiteslist .ls-row__type,
.frame-type-atomicplan_suiteslist .ls-teaser__type {
	margin: 0;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ls-muted, rgba(45, 45, 45, 0.62));
}

.frame-type-atomicplan_suiteslist .ls-card__title,
.frame-type-atomicplan_suiteslist .ls-row__title,
.frame-type-atomicplan_suiteslist .ls-teaser__title {
	margin: 0;
	font-size: var(--ls-title-size, 1.25rem);
	line-height: 1.25;
}

.frame-type-atomicplan_suiteslist .ls-row__title a {
	color: inherit;
	text-decoration: none;
}

.frame-type-atomicplan_suiteslist .ls-card__price,
.frame-type-atomicplan_suiteslist .ls-teaser__price {
	margin: 0;
	font-weight: 600;
	color: var(--ls-accent-deep, var(--ls-accent, #9c8255));
}

.frame-type-atomicplan_suiteslist .ls-card__teaser,
.frame-type-atomicplan_suiteslist .ls-row__teaser {
	margin: 0;
	color: var(--ls-text-muted, inherit);
}

.frame-type-atomicplan_suiteslist .ls-card__place,
.frame-type-atomicplan_suiteslist .ls-row__place {
	margin: 0;
	font-size: 0.85rem;
	color: var(--ls-muted, rgba(45, 45, 45, 0.62));
}

/* ---------- Zeile ---------- */
.frame-type-atomicplan_suiteslist .ls-row {
	/* wie die Karte: <article> + stretched link am Titel, Knopfzeile darueber */
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
	padding-block: clamp(1.2rem, 2.5vw, 2rem);
}

.frame-type-atomicplan_suiteslist .ls-row__link {
	color: inherit;
	text-decoration: none;
}

.frame-type-atomicplan_suiteslist .ls-row__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.frame-type-atomicplan_suiteslist .ls-row__actions {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block-start: 0.4rem;
}

@container (min-width: 40rem) {
	.frame-type-atomicplan_suiteslist .ls-row {
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
		align-items: start;
	}
}

.frame-type-atomicplan_suiteslist .ls-row__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ls-radius, 0.25rem);
}

.frame-type-atomicplan_suiteslist .ls-row__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* ---------- Icon-Faktenzeile (Partial Suite/Facts) ----------
   Flaeche · Personen · Preis. Die Icons sind maskierte SVGs (`.mask-svg` aus
   plate_partials/Atoms/Icon) — ihre Farbe kommt aus `--bs-icon-color`, nicht aus
   der Datei. Deshalb hier die Variable setzen und NICHT `background-color` an
   `.mask-svg` schreiben: so bleibt das Icon in einem invertierten Frame
   mitfaerbbar. */
.frame-type-atomicplan_suiteslist .ls-facts {
	--bs-icon-color: currentColor;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.1rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.88rem;
	color: var(--ls-text-muted, inherit);
}

.frame-type-atomicplan_suiteslist .ls-facts__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	line-height: 1.3;
}

.frame-type-atomicplan_suiteslist .ls-facts__item--price {
	font-weight: 600;
	color: var(--ls-accent-deep, var(--ls-accent, #9c8255));
}

.frame-type-atomicplan_suiteslist .ls-facts__icon {
	display: inline-flex;
	opacity: 0.75;
}

/* Restliche Angaben der Zeilen-Darstellung (Betten, Ausblick) als
   Label/Wert-Paare — Flaeche/Personen/Preis stehen bereits als Icon-Zeile. */
.frame-type-atomicplan_suiteslist .ls-row__details {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.2rem 1rem;
	margin: 0;
	font-size: 0.9rem;
}

.frame-type-atomicplan_suiteslist .ls-row__details dt {
	font-weight: 400;
	color: var(--ls-muted, rgba(45, 45, 45, 0.62));
}

.frame-type-atomicplan_suiteslist .ls-row__details dd {
	margin: 0;
}

/* ---------- Ausstattungs-Pills ---------- */
.frame-type-atomicplan_suiteslist .ls-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.frame-type-atomicplan_suiteslist .ls-pill {
	padding: 0.3em 0.8em;
	border: 1px solid var(--ls-line, rgba(45, 45, 45, 0.16));
	border-radius: var(--ls-pill-radius, 999px);
	font-size: 0.78rem;
	line-height: 1.3;
}

/* ---------- Teaser ---------- */
.frame-type-atomicplan_suiteslist .ls-teaser {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
}

.frame-type-atomicplan_suiteslist .ls-teaser__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ls-radius, 0.25rem);
}

/* ---------- Kategorie-Karte ---------- */
.frame-type-atomicplan_suiteslist .ls-cat-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ls-cat-height, 8rem);
	padding: 1.25rem;
	text-align: center;
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--ls-line, rgba(45, 45, 45, 0.16));
	border-radius: var(--ls-radius, 0.25rem);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.frame-type-atomicplan_suiteslist .ls-cat-card:hover {
	border-color: var(--ls-accent, #9c8255);
}

.frame-type-atomicplan_suiteslist .ls-cat-card__title {
	font-size: var(--ls-title-size, 1.25rem);
	line-height: 1.25;
}

/* ---------- Leerzustand ---------- */
.frame-type-atomicplan_suiteslist .ls-empty {
	margin: 0;
	color: var(--ls-muted, rgba(45, 45, 45, 0.62));
}

/* Container-Queries brauchen einen Container — die Liste selbst. */
.frame-type-atomicplan_suiteslist .ls-list {
	container-type: inline-size;
}

/* ==========================================================================
   Server-Modus (Filterverfahren „Über die Datenbank")
   --------------------------------------------------------------------------
   Nur Filterleiste und Blätter-Navigation. Weiterhin KEIN Sektions-Padding,
   KEIN Sektions-Hintergrund und KEINE eigene Container-Breite — die kommen
   ausschließlich aus den generischen Frame-Feldern bzw. dem `.frame-container`.
   Farben laufen wie im übrigen Block über `--ls-*` mit neutralem Fallback.
   ========================================================================== */

.frame-type-atomicplan_suiteslist .ls-filterbar {
	display: flex;
	flex-direction: column;
	gap: 0.8rem 1.4rem;
	margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}

/* Die Chips bringen ihren eigenen Abstand mit; in der Server-Filterleiste
   sitzen sie direkt über dem Formular. */
.frame-type-atomicplan_suiteslist .ls-filterbar .ls-chips {
	margin-bottom: 0;
}

.frame-type-atomicplan_suiteslist .ls-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.8rem 1.4rem;
}

.frame-type-atomicplan_suiteslist .ls-form__search,
.frame-type-atomicplan_suiteslist .ls-form__select {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.frame-type-atomicplan_suiteslist .ls-form__selects {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.8rem 1.2rem;
}

.frame-type-atomicplan_suiteslist .ls-form__label {
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ls-muted, rgba(45, 45, 45, 0.62));
}

.frame-type-atomicplan_suiteslist .ls-form__search input[type="search"],
.frame-type-atomicplan_suiteslist .ls-form__select select {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ls-line, rgba(45, 45, 45, 0.16));
	padding: 0.5rem 0.2rem;
	font-size: 0.95rem;
	color: inherit;
	max-width: 18rem;
	/* Ohne Mindestbreite quetscht die Flex-Zeile das Suchfeld so weit zusammen,
	   dass der Platzhalter abgeschnitten wird. */
	min-width: 12rem;
}

.frame-type-atomicplan_suiteslist .ls-form__search input[type="search"]:focus,
.frame-type-atomicplan_suiteslist .ls-form__select select:focus {
	outline: none;
	border-bottom-color: var(--ls-accent, #9c8255);
}

.frame-type-atomicplan_suiteslist .ls-form__submit {
	padding: 0.5em 1.4em;
	border: 1px solid var(--ls-line, rgba(45, 45, 45, 0.16));
	border-radius: var(--ls-pill-radius, 999px);
	background: transparent;
	color: inherit;
	font-size: 0.8rem;
	cursor: pointer;
}

.frame-type-atomicplan_suiteslist .ls-form__submit:hover,
.frame-type-atomicplan_suiteslist .ls-form__submit:focus-visible {
	border-color: var(--ls-accent, #9c8255);
}

.frame-type-atomicplan_suiteslist .ls-form__reset,
.frame-type-atomicplan_suiteslist .ls-empty__reset {
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ls-accent, #9c8255);
}

.frame-type-atomicplan_suiteslist .ls-form__count {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.8rem;
	color: var(--ls-muted, rgba(45, 45, 45, 0.62));
}

/* Während eine HTMX-Anfrage läuft: Ergebnis leicht abblenden, damit sichtbar
   ist, dass etwas passiert (htmx setzt `htmx-request` am hx-indicator-Ziel). */
.frame-type-atomicplan_suiteslist .ls-list.htmx-request .ls-grid {
	opacity: 0.45;
	transition: opacity 0.2s;
}

/* ---------- Blättern ----------
   Mittig UNTER den Ergebnissen. `justify-content: center` allein genügt nicht,
   wenn ein Theme die Liste als Raster mit Filter-Sidebar baut — dann muss das
   Theme die Navigation zusätzlich in die Ergebnisspalte stellen
   (z. B. `.ls-pagination { grid-column: 2; }`). */
.frame-type-atomicplan_suiteslist .ls-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.9rem;
	margin-block-start: clamp(1.8rem, 4vw, 3rem);
}

.frame-type-atomicplan_suiteslist .ls-pagination__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.frame-type-atomicplan_suiteslist .ls-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	min-height: 2.4rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--ls-line, rgba(45, 45, 45, 0.16));
	border-radius: var(--ls-pill-radius, 999px);
	text-decoration: none;
	color: inherit;
	font-size: 0.85rem;
}

.frame-type-atomicplan_suiteslist .ls-pagination__page.is-current {
	background: var(--ls-accent, #9c8255);
	border-color: var(--ls-accent, #9c8255);
	color: var(--ls-accent-contrast, #fff);
}

.frame-type-atomicplan_suiteslist .ls-pagination__gap {
	padding-inline: 0.25rem;
	color: var(--ls-muted, rgba(45, 45, 45, 0.62));
}

.frame-type-atomicplan_suiteslist .ls-pagination__step {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
	color: var(--ls-accent, #9c8255);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.frame-type-atomicplan_suiteslist .ls-pagination__page:hover,
.frame-type-atomicplan_suiteslist .ls-pagination__step:hover {
	border-color: var(--ls-accent, #9c8255);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}