/* plate_suites — gemeinsame Bedienelemente (Knoepfe, Merk-Knopf, CTA-Reihe).
 *
 * Bewusst NICHT auf `.frame-type-…` gescoped: dieselben Elemente kommen im
 * Listen-CE, auf der Detailseite und im Seitenkopf vor. Deshalb eine eigene
 * Datei, die von allen dreien geladen wird — statt derselben Regel an drei
 * Stellen (die dann auseinanderlaufen).
 *
 * Farben, Radien und Abstaende NUR ueber var(--ls-*, <fallback>) — ein
 * Projekt-Theme skinnt ueber die Tokens, ohne Theme greifen die neutralen
 * Fallbacks. Keine Schriftgroessen an Ueberschriften, keine Container-Breite,
 * kein Sektions-Hintergrund (Frame-System).
 */

/* ---------- Knoepfe ---------- */
.ls-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: var(--ls-btn-padding, 0.7em 1.4em);
	border: 1px solid transparent;
	border-radius: var(--ls-btn-radius, 0.2rem);
	background: var(--ls-accent, #9c8255);
	color: var(--ls-accent-contrast, #fff);
	font-size: var(--ls-btn-font-size, 0.9rem);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ls-btn:hover,
.ls-btn:focus-visible {
	background: var(--ls-accent-deep, #826c46);
	color: var(--ls-accent-contrast, #fff);
}

/* `--primary` ist heute deckungsgleich mit der Grundform; die Klasse steht im
   Markup trotzdem, damit ein Theme die beiden Stufen trennen kann, ohne die
   Templates anzufassen. */
.ls-btn--primary {
	background: var(--ls-accent, #9c8255);
	color: var(--ls-accent-contrast, #fff);
}

.ls-btn--ghost {
	background: transparent;
	border-color: var(--ls-btn-ghost-border, currentColor);
	color: inherit;
}

.ls-btn--ghost:hover,
.ls-btn--ghost:focus-visible {
	background: var(--ls-btn-ghost-hover-bg, rgba(0, 0, 0, 0.06));
	color: inherit;
}

/* ---------- Merk-Knopf ----------
   `atomic-favorite-bt` (plate_atomic_assets) ist fuer einen SCHWEBENDEN Knopf
   ueber einem Bild vorkonfiguriert: `position: absolute`, oben rechts, weisses
   Icon mit Schlagschatten. In einer Knopfzeile ist davon nichts richtig.

   Die Komponente wird deshalb NICHT veraendert — sie liest all diese Werte aus
   CSS-Variablen, und genau die werden hier gesetzt. Custom Properties vererben
   in den Shadow-DOM, das ist der vorgesehene Weg. */
.ls-fav {
	--a-favorite-bt-display: inline-flex;
	--a-favorite-bt-position: static;
	--a-favorite-bt-right: auto;
	--a-favorite-bt-top: auto;
	--a-favorite-bt-padding: 0;
	--a-favorite-bt-bg: transparent;
	--a-favorite-bt-zindex: auto;
	/* Icon-Farbe der maskierten SVGs in den Slots (Atoms/Icon). */
	--bs-icon-color: currentColor;

	align-items: center;
	gap: 0.5rem;
	padding: var(--ls-btn-padding, 0.7em 1.4em);
	border: 1px solid var(--ls-line-strong, rgba(45, 45, 45, 0.28));
	border-radius: var(--ls-btn-radius, 0.2rem);
	font-size: var(--ls-btn-font-size, 0.9rem);
	line-height: 1.2;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

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

/* Gemerkt: das gefuellte Herz erscheint (Slot-Wechsel macht die Komponente),
   hier bekommt der ganze Knopf den Akzent. */
.ls-fav[active] {
	--bs-icon-color: var(--ls-accent-deep, var(--ls-accent, #9c8255));
	border-color: var(--ls-accent, #9c8255);
	color: var(--ls-accent-deep, var(--ls-accent, #9c8255));
}

.ls-fav__icon {
	display: inline-flex;
	align-items: center;
}

.ls-fav__label {
	white-space: nowrap;
}

/* ---------- CTA-Reihe im Seitenkopf ---------- */
.ls-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	margin-block-start: clamp(1.4rem, 3vw, 2.2rem);
}

/* Im Seitenkopf steht die Reihe auf einem abgedunkelten Bild — der
   Geister-Knopf und der Merk-Knopf erben dort die helle Kopf-Textfarbe. */
.pl-pagehero .ls-hero-ctas {
	--ls-btn-ghost-hover-bg: rgba(255, 255, 255, 0.16);
}

/* ---------- Klebrige Bodenleiste auf schmalen Viewports ----------
   Es gibt bewusst nur EINE CTA-Reihe im Markup: der Merk-Knopf traegt die id
   `suite-<uid>` (den Schluessel der Merkliste), und eine id darf pro Dokument
   nur einmal vorkommen. Statt einer zweiten Kopie wird DIESE Reihe unterhalb des
   Umbruchs fixiert — sie ist der Zielpunkt der Seite und darf nicht wegscrollen.

   `--ls-ctabar-h` reserviert am Seitenende den Platz, den die fixierte Leiste
   verdeckt; ohne das liegt der letzte Absatz darunter. */
@media (max-width: 47.99em) {
	.pl-pagehero .ls-hero-ctas {
		position: fixed;
		inset: auto 0 0 0;
		z-index: var(--ls-ctabar-z, 30);
		flex-wrap: nowrap;
		gap: 0.4rem;
		margin: 0;
		padding: 0.6rem var(--bs-gap-default, 1rem);
		background: var(--ls-ctabar-bg, #fff);
		color: var(--ls-ctabar-color, inherit);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
	}

	.pl-pagehero .ls-hero-ctas > * {
		/* Etwas kleinere Schrift und weniger Sperrung, damit „Dieses Zimmer
		   buchen" auf 375 px nicht dreizeilig wird. Token, keine feste Zahl an
		   der Eigenschaft — ein Theme kann es weiter anpassen. */
		--ls-btn-font-size: 0.68rem;
		flex: 1 1 0;
		min-width: 0;
		padding-inline: 0.5em;
		letter-spacing: 0.08em;
		font-size: var(--ls-btn-font-size);
	}

	/* „Merken" braucht neben zwei Text-Knoepfen keinen Text — das Herz genuegt,
	   der Zustand ist an der Farbe ablesbar. Der Text bleibt fuer
	   Screenreader im Dokument. */
	.pl-pagehero .ls-hero-ctas .ls-fav {
		flex: 0 0 auto;
	}

	.pl-pagehero .ls-hero-ctas .ls-fav__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Platz fuer die Leiste am Seitenende. */
	body:has(.pl-pagehero .ls-hero-ctas) {
		padding-bottom: var(--ls-ctabar-h, 4.5rem);
	}
}