/* plate_suites — Detailseite (Partial Suite/Detail/Body).
 *
 * Farben, Linien und Radien NUR über var(--ls-*, <fallback>) — ein Projekt-Theme
 * skinnt die Seite über die Tokens bzw. ein Template-Override; ohne Theme greifen
 * die neutralen Fallbacks.
 *
 * Scope ist .ls-detail (die Detailseite ist kein Inhaltselement, es gibt hier
 * also keine .frame-type-*-Klasse). Die colPos-0-Inhalte darunter rendern
 * unverändert durch ihr eigenes Frame-System — dieses CSS fasst sie nicht an.
 *
 * NICHT hier: der Seitenkopf. Der ist seit 09/2026 der generische Organism
 * `Organisms/PageHero/Default` (plate_partials) — Box, Schichtung, Freiraum
 * unter dem fixierten Header und die Nachbildung der .frame-container-Box stehen
 * dort, gesteuert über die Slots `--pl-pagehero-*`. Wer hier eine dieser
 * Rechnungen wiederholt, baut die Drift wieder ein, wegen der der eigene Kopf
 * überhaupt abgelöst wurde.
 *
 * NICHT hier: Knöpfe und Merk-Knopf — die stehen in suites-ui.css, weil sie
 * genauso im Listen-CE vorkommen.
 */

/* Inhaltsbreite = die des generischen .frame-container. Die Detailseite ist kein
   Inhaltselement und rendert in <main> OHNE .frame-Huelle; sie kann den
   .frame-container also nicht benutzen und muss dessen Box nachbilden — aus
   denselben Quellen (--frame-width-xxl + --bs-gap-default), damit die linke Kante
   mit dem uebrigen Seiteninhalt und dem Seitenkopf fluchtet. Fallbacks fuer
   Installationen ohne plate_bootstrap. Eine EIGENE Rechnung waere eine zweite
   Breitenquelle (harte Regel im Workspace); GAR KEINE Breite ist genauso falsch —
   ohne diese Box lief die ganze Detailseite randabfallend und stand bei 1920px
   248px links von jedem Inhaltselement derselben Site (gemessen 08/2026).
   Zeilenlaengen gehoeren an die Text-Bloecke (ch/rem), nicht hierher. */
.ls-detail {
	--ls-detail-gutter: var(--bs-gap-default, 1.5rem);
	max-width: var(--frame-width-xxl, 1380px);
	margin-inline: auto;
	padding-inline: var(--ls-detail-gutter);
	/* Container fuer die Abfrage weiter unten. Der Container muss ein VORFAHR
	   sein — ein Element kann sich nicht selbst abfragen. Genau daran scheiterte
	   die zweispaltige Aufteilung bis 09/2026: `container-type` stand auf
	   `.ls-detail__body` UND die Abfrage galt demselben Element, also griff sie
	   nie und der Fakten-Kasten stand auch auf 1600px unter dem Text. */
	container-type: inline-size;
}

/* ---------- Body ---------- */
.ls-detail__body {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: clamp(2rem, 5vw, 4rem);
}

@container (min-width: 52rem) {
	.ls-detail__body {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: start;
	}
}

.ls-detail__content {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.ls-detail__prose > :first-child {
	margin-block-start: 0;
}

.ls-detail__prose > :last-child {
	margin-block-end: 0;
}

.ls-detail__h {
	margin: 0 0 0.8rem;
	font-size: var(--ls-h2-size, 1.4rem);
}

.ls-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.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;
}

/* ---------- Aside ---------- */
.ls-detail__aside {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: clamp(1rem, 2.5vw, 1.75rem);
	border: 1px solid var(--ls-line, rgba(45, 45, 45, 0.14));
	border-radius: var(--ls-radius, 0.25rem);
}

.ls-detail__facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.35rem 1rem;
	margin: 0;
	font-size: 0.92rem;
}

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

.ls-detail__facts dd {
	margin: 0;
}

.ls-detail__aside .ls-btn {
	align-self: start;
}

/* ---------- Galerie im Detail-Text (zweites Verfahren, abschaltbar) ---------- */
.ls-detail__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--ls-gallery-min, 16rem), 1fr));
	gap: var(--ls-gap, clamp(0.8rem, 2vw, 1.5rem));
	padding-block-end: clamp(2rem, 5vw, 4rem);
}

.ls-detail__gallery-item {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ls-radius, 0.25rem);
}

.ls-detail__gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- „Gehoert zu <Resort>" ----------
   Der zweite gesicherte Weg zurueck ins Haus (der erste ist der Kontextpfad im
   Seitenkopf). EIN Link um die ganze Karte — hier ist das zulaessig, weil darin
   kein zweites Bedienelement liegt. */
.ls-detail__parent {
	padding-block-end: clamp(2rem, 5vw, 4rem);
}

.ls-parent {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	padding: clamp(0.9rem, 2vw, 1.4rem);
	border: 1px solid var(--ls-line, rgba(45, 45, 45, 0.14));
	border-radius: var(--ls-radius, 0.25rem);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

@media (min-width: 36rem) {
	.ls-parent {
		grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
	}
}

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

.ls-parent__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ls-radius, 0.25rem);
}

.ls-parent__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ls-parent__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ls-parent__eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ls-muted, rgba(45, 45, 45, 0.62));
}

.ls-parent__title {
	font-size: var(--ls-title-size, 1.25rem);
	line-height: 1.25;
}

.ls-parent__more {
	font-size: 0.85rem;
	color: var(--ls-accent-deep, var(--ls-accent, #9c8255));
}

/* ---------- Kontextpfad im Seitenkopf ----------
   Der Organism rendert die <nav> mit den Klassen, die der Aufrufer uebergibt;
   Optik gehoert hierher, nicht in den Vertrag. */
.ls-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-block-end: 1.2rem;
	font-size: 0.82rem;
}

.ls-crumbs a {
	color: inherit;
}

.ls-crumbs .sep {
	opacity: 0.55;
}

/* ---------- Fallback-Kopf ohne verknuepften Datensatz ----------
   Nur die vertikale Luft — die Inhaltsbreite kommt bereits von .ls-detail. */
.ls-detail--empty {
	padding-block: clamp(2rem, 5vw, 4rem);
}

/* ---------------------------------------------------------------------------
   Inhaltsspalte (colPos 0) unter dem Detail-Body.

   `plate_bootstrap` gibt jedem `<main>` ein Innen-Padding oben — als SLOT:
   `main { padding-top: var(--plb-page-main-pt, var(--bs-gap-large, 50px)) }`.
   Auf einer normalen Seite ist das der Sektionsrhythmus unter dem Seitenkopf.

   HIER steht davor aber schon der Detail-Body, der mit eigenem Abstand endet —
   gemessen kamen 184px (Slot) + 64px (Body) = 248px Leere zwischen „Gehoert zu"
   und dem ersten Inhaltselement zusammen. Schlimmer als die Optik ist die
   Wirkung auf die Redaktion: Das pauschale Padding liegt UEBER der CE-Spalte
   und addiert sich auf `space_before_class` des ersten Elements — „kein
   Abstand" kaeme nie unter diesen Sockel.

   Deshalb: den SLOT auf 0 setzen (Variable, nicht Eigenschaft — die Regel aus
   Skill `css` Abschnitt 2d gilt auch hier). Der Abstand zum ersten Element
   kommt danach dort her, wo er hingehoert: aus dessen Frame-Feldern.
   --------------------------------------------------------------------------- */
.ls-detail__editorial { --plb-page-main-pt: 0; }