/* ==========================================================================
   Unterkünfte – Bad Freienwalde
   --------------------------------------------------------------------------
   Alle Farben, Abstände und Radien kommen aus dem Designsystem der Website
   (Automatic.css). Der Hexwert dahinter ist nur der Rückfall, falls ACSS
   einmal nicht geladen ist.

   Die Regeln des Systems, an die sich alles hier hält:
     – Kurgrün handelt (Links, Buttons, Symbole), Weinrot spricht (Überschriften)
     – Der Seitengrund ist nicht weiß, sondern --body-bg-color
     – Karten haben 5 px Radius, Buttons haben keinen
     – Ränder sind 1 px, Schwarz auf 20 %
   ========================================================================== */

.unterkunft-single,
.unterkunft-grid {
	--uk-gruen:        var(--primary, #0a5e44);
	--uk-gruen-hover:  var(--primary-hover, #0b6a4c);
	--uk-weinrot:      var(--accent, #98162f);
	--uk-flaeche:      var(--shade-white, #ffffff);
	--uk-rand:         var(--border-color-dark, rgba(0, 0, 0, .2));
	--uk-leise:        var(--neutral-semi-dark, #595959);
	--uk-symbol:       var(--primary-dark, #0c7353);
	--uk-radius:       0;   /* CI: nichts Rundes */

	--uk-xs: var(--space-xs, 1.9rem);
	--uk-s:  var(--space-s, 2.13rem);
	--uk-m:  var(--space-m, 2.4rem);
	--uk-l:  var(--space-l, 2.7rem);

	--uk-eng:   .5rem;
	--uk-mittel: .9rem;
}

/* ==========================================================================
   Grundgerüst
   ========================================================================== */

.unterkunft-single {
	display: flex;
	flex-direction: column;
	gap: var(--uk-l);
	max-width: var(--width-xl, 78rem);
	margin-inline: auto;
	padding-block: var(--uk-m) var(--uk-l);
	padding-inline: var(--gutter, 1.25rem);
}

.unterkunft-single > section {
	margin: 0;
}

/* Überschriften: Weinrot, Versalien ab h2 – wie überall auf der Website. */
.unterkunft-single h2,
.unterkunft-single h3 {
	color: var(--uk-weinrot);
	margin: 0;
}

.unterkunft-single a:not(.unterkunft-btn) {
	color: var(--uk-gruen);
}

.unterkunft-single a:not(.unterkunft-btn):hover {
	color: var(--uk-gruen-hover);
}

.unterkunft-single p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Kopf
   ========================================================================== */

.unterkunft-kopf {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.unterkunft-titel {
	margin: 0;
}

.unterkunft-meta {
	margin: 0;
	font-size: var(--text-xs, .875rem);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--uk-leise);
}

.unterkunft-sep {
	opacity: .5;
	margin-inline: .25em;
}

/* ==========================================================================
   Galerie – ein großes Bild, vier kleine daneben
   ========================================================================== */

.unterkunft-galerie {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--uk-eng);
}

.unterkunft-galerie figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--uk-radius);
	background: var(--uk-flaeche);
}

.unterkunft-galerie-haupt {
	grid-row: span 2;
}

.unterkunft-galerie img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

.unterkunft-galerie-haupt img {
	aspect-ratio: 4 / 3;
}

.unterkunft-galerie-mehr {
	position: relative;
}

.unterkunft-galerie-mehr img {
	filter: brightness(.45);
}

.unterkunft-galerie-mehr figcaption {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 600;
}

/* ==========================================================================
   Zweispalter: Inhalt und Kontaktkasten
   ========================================================================== */

.unterkunft-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: var(--uk-m);
	align-items: start;
}

.unterkunft-inhalt {
	display: flex;
	flex-direction: column;
	gap: var(--uk-m);
	min-width: 0;
}

.unterkunft-inhalt > section {
	display: flex;
	flex-direction: column;
	gap: var(--uk-mittel);
}

/* ==========================================================================
   Beschreibung
   ========================================================================== */

.unterkunft-untertitel {
	margin: 0;
	font-weight: 700;
}

.unterkunft-kurztext {
	margin: 0;
	font-size: 1.0625em;
}

.unterkunft-langtext > *:first-child { margin-top: 0; }
.unterkunft-langtext > *:last-child  { margin-bottom: 0; }

/* ==========================================================================
   Merkmale – zwei Listen, optisch ein Raster
   ========================================================================== */

.unterkunft-merkmalsgruppen {
	display: flex;
	flex-direction: column;
	gap: var(--uk-eng);
}

ul.merkmalsraster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--uk-eng) var(--uk-mittel);
	list-style: none;
	margin: 0;
	padding: 0;
}

li.merkmal {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: var(--text-s, .9375rem);
	line-height: 1.35;
}

li.merkmal::marker {
	content: "";
}

/* Symbole immer gleich groß und gleich weit weg vom Text – auch dann,
   wenn ein Term gar kein Symbol hat. */
.merkmal .dashicons,
.merkmal .unterkunft-icon-bild {
	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--uk-symbol);
}

/* ==========================================================================
   Wichtige Hinweise
   ========================================================================== */

.unterkunft-hinweise {
	border-left: 3px solid var(--uk-gruen);
	padding-left: var(--uk-mittel);
}

.unterkunft-hinweise p { margin: 0 0 .5rem; }
.unterkunft-hinweise p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Kontaktkasten
   ========================================================================== */

.unterkunft-kontaktbox {
	position: sticky;
	top: var(--uk-mittel);
	display: flex;
	flex-direction: column;
	gap: var(--uk-mittel);
	background: var(--uk-flaeche);
	padding: var(--uk-s);
}

.unterkunft-preis {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--uk-gruen);
}

.unterkunft-preis-hinweis {
	margin: -.6rem 0 0;
	font-size: var(--text-xs, .8125rem);
	color: var(--uk-leise);
}

.unterkunft-kontakt-titel {
	margin: 0;
	font-size: var(--text-xs, .8125rem);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--uk-leise);
}

.unterkunft-kontakt-titel + .unterkunft-kontakt {
	margin-top: -.5rem;
}

ul.unterkunft-kontakt,
ul.unterkunft-zeiten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	font-size: var(--text-s, .9375rem);
}

.unterkunft-kontakt li {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
}

.unterkunft-kontakt .dashicons {
	flex: 0 0 1.15rem;
	width: 1.15rem;
	height: 1.15rem;
	font-size: 1.15rem;
	color: var(--uk-gruen);
}

.unterkunft-kontakt a {
	overflow-wrap: anywhere;
}

.unterkunft-kontakt-hinweis {
	margin: 0;
	font-size: var(--text-xs, .75rem);
	line-height: 1.45;
	color: var(--uk-leise);
}

.unterkunft-zeiten {
	padding-top: var(--uk-mittel);
	border-top: 1px solid var(--uk-rand);
	color: var(--uk-leise);
}

.unterkunft-zeiten li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
}

/* ==========================================================================
   Buttons – eckig, wie im System
   ========================================================================== */

.unterkunft-btn {
	display: inline-block;
	padding: .5em 1.25em;
	border: 1.5px solid var(--uk-gruen);
	border-radius: 0;
	background: var(--uk-gruen);
	color: var(--shade-white, #fff);
	font-size: var(--text-s, .9375rem);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background .3s ease-in-out, border-color .3s ease-in-out;
}

.unterkunft-btn:hover,
.unterkunft-btn:focus-visible {
	background: var(--uk-gruen-hover);
	border-color: var(--uk-gruen-hover);
	color: var(--shade-white, #fff);
}

.unterkunft-btn-block {
	display: block;
}

/* ==========================================================================
   Zimmer der Notfassung – eigene Karten, kein fremdes CSS

   Dieselbe Form wie die Bricks-Klasse `unterkunftskarte`: Bild links, Text
   rechts, weiße Fläche, Haarlinie, keine Rundung.
   ========================================================================== */

li.unterkunft-zimmer-karte {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--uk-rand, rgba(0, 0, 0, .2));
	border-radius: 0;
	background: var(--uk-flaeche, #fff);
	overflow: hidden;
}

.unterkunft-zimmer-bildfeld {
	margin: 0;
	padding: 0;
	background: rgba(0, 0, 0, .06);
}

.unterkunft-zimmer-bild {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 14rem;
	object-fit: cover;
}

.unterkunft-zimmer-inhalt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .7rem;
	padding: var(--uk-s, 1.4rem);
}

.unterkunft-zimmer-titel {
	margin: 0;
	color: var(--uk-weinrot, #98162f);
	font-size: var(--text-m, 1.15rem);
	line-height: 1.25;
}

.unterkunft-zimmer-text {
	font-size: var(--text-s, .9rem);
	line-height: 1.55;
}

@media (max-width: 48rem) {

	li.unterkunft-zimmer-karte {
		grid-template-columns: minmax(0, 1fr);
	}

	.unterkunft-zimmer-bild {
		aspect-ratio: 3 / 2;
		height: auto;
		min-height: 0;
	}
}


ul.unterkunft-zimmer-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--uk-s);
}

ul.unterkunft-zimmer-liste > li { margin: 0; }
ul.unterkunft-zimmer-liste > li::marker { content: ""; }

/* Jede zweite Karte gespiegelt – wie auf den Bestandsseiten. */
.unterkunft-zimmer--gespiegelt {
	direction: rtl;
}

.unterkunft-zimmer--gespiegelt > * {
	direction: ltr;
}

.unterkunft-zimmer-art {
	margin: -.25rem 0 0;
	font-size: var(--text-xs, .8125rem);
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
}

.unterkunft-zimmer-preis {
	margin: 0;
	font-weight: 700;
	color: var(--uk-gruen);
}

ul.unterkunft-zimmer-galerie {
	list-style: none;
	margin: .25rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
	gap: .4rem;
}

ul.unterkunft-zimmer-galerie li { margin: 0; }

ul.unterkunft-zimmer-galerie img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ==========================================================================
   Lage
   ========================================================================== */

.unterkunft-lage {
	display: flex;
	flex-direction: column;
	gap: var(--uk-eng);
}

.unterkunft-karte {
	margin: 0;
	max-width: 48rem;
}

.unterkunft-karte-bild {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--uk-rand);
	border-radius: var(--uk-radius);
}

.unterkunft-karte-nachweis {
	margin: .35rem 0 0;
	font-size: var(--text-xs, .6875rem);
	line-height: 1.4;
	color: var(--uk-leise);
}

.unterkunft-karte-nachweis a {
	color: inherit;
	text-decoration: underline;
}

.unterkunft-adresse {
	margin: 0;
}

.unterkunft-anfahrt p { margin: 0; }

/* ==========================================================================
   Rechtliche Informationen
   ========================================================================== */

.unterkunft-rechtliches {
	display: flex;
	flex-direction: column;
	gap: var(--uk-eng);
	padding-top: var(--uk-mittel);
	border-top: 1px solid var(--uk-rand);
}

.unterkunft-rechtstext,
.unterkunft-melden {
	margin: 0;
	font-size: var(--text-s, .875rem);
	color: var(--uk-leise);
}

.unterkunft-barrierefrei-titel {
	margin: .5rem 0 0;
	font-size: 1rem;
}

.unterkunft-barrierefrei p { margin: 0 0 .5rem; }

/* ==========================================================================
   Übersichtsraster (Shortcode [unterkuenfte])
   ========================================================================== */

.unterkunft-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--uk-m);
}

.unterkunft-card {
	display: flex;
	background: var(--uk-flaeche);
	border: 1px solid var(--uk-rand);
	border-radius: var(--uk-radius);
	overflow: hidden;
}

.unterkunft-card-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.unterkunft-card-bild {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.unterkunft-card-body {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: var(--uk-mittel);
}

.unterkunft-card-titel {
	margin: 0;
	font-size: 1.125rem;
	color: var(--uk-weinrot);
}

.unterkunft-card-meta {
	margin: 0;
	font-size: var(--text-xs, .8125rem);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--uk-leise);
}

.unterkunft-card-text {
	margin: 0;
	flex-grow: 1;
}

.unterkunft-card-preis {
	margin: 0;
	font-weight: 700;
	color: var(--uk-gruen);
}

/* ==========================================================================
   Schmale Bildschirme
   ========================================================================== */

@media (max-width: 1024px) {
	.unterkunft-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.unterkunft-kontaktbox {
		position: static;
	}
}

@media (max-width: 700px) {
	.unterkunft-galerie {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}

	.unterkunft-galerie-haupt {
		grid-column: span 2;
		grid-row: auto;
	}

	li.unterkunft-zimmer-karte {
		grid-template-columns: minmax(0, 1fr);
	}

	.unterkunft-zimmer-preis {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.unterkunft-btn { transition: none; }
}

/* ==========================================================================
   Die Bricks-Vorlagen gestalten sich selbst
   --------------------------------------------------------------------------
   Hier standen bis Version 3.11 rund 300 Zeilen, die die Bricks-Detailseite
   nachträglich gestaltet haben – `body.single-unterkunft .faktenliste`,
   `.zimmerliste > .infocard` und so weiter. Der Grund war ein Notbehelf: Die
   Vorlage lieh sich Klassen der Website (`infocard`, `post-hero`), und deren
   CSS kam auf den Unterkunftsseiten gar nicht an.

   Seit Version 4.0 bringen die Vorlagen einen eigenen, vollständigen
   Klassensatz mit (`unterkunftskopf`, `unterkunftskarte`, `unterkunftsfakten`
   …). Die Gestaltung steht damit dort, wo Bricks sie erwartet: in den
   globalen Klassen, sichtbar und änderbar im Klassenpanel.

   Zwei Regeln blieben absichtlich hier NICHT stehen:
   – Der Listen-Reset steht jetzt im Custom-CSS der jeweiligen Klasse.
   – Die alte Regel `ul:has(> .quicklink-item)` griff auf eine Klasse der
     Website. Sie ist mit der neuen Vorlage gegenstandslos.

   Was oben steht, gestaltet weiterhin `template/single-unterkunft.php` –
   die Notfassung ohne Bricks, deren Klassen `unterkunft-…` heißen.
   ========================================================================== */