/*
 * „Berg. Wohnen“ (.ps-wohnen): Einleitung mit Initial „B“ und drei Unterkunftskarten (.ps-karte).
 */

.ps-start .ps-wohnen { background: var(--leinen); overflow: hidden; }

.ps-start .ps-wohnen__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 48px;
	margin-bottom: 48px;
}
.ps-start .ps-wohnen__einleitung { display: grid; gap: 20px; max-width: 640px; }
.ps-start .ps-wohnen__einleitung > .is-style-ps-dachzeile { margin-bottom: -2px; }

.ps-start .ps-wohnen__karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
	align-items: start;
	margin: 0;
}
.ps-start .ps-wohnen__karten > .wp-block-column { flex-basis: auto; margin: 0; min-width: 0; }

.ps-start .ps-karte {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 26px;
	background: var(--weiss);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-xs);
	transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ps-start .ps-karte:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ps-start .ps-karte > :not(.ps-karte__bild) { margin-inline: 24px; }
.ps-start .ps-karte__bild { margin: 0 0 10px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fels-200); }
.ps-start .ps-karte__bild a, .ps-start .ps-karte__bild img { display: block; width: 100%; height: 100%; }
.ps-start .ps-karte__bild img { object-fit: cover; transition: transform var(--dur-image) var(--ease-out); }
.ps-start .ps-karte:hover .ps-karte__bild img { transform: scale(1.04); }

.ps-start .ps-karte__marke {
	position: absolute;
	top: 16px;
	left: 16px;
	margin: 0 !important;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	background: var(--tanne-700);
	color: var(--schnee);
	font: 600 11px/1 var(--font-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	z-index: 2;
}
.ps-start .ps-karte__titel { font: 400 var(--fs-h3)/var(--lh-snug) var(--font-display); }
.ps-start .ps-karte__titel a { color: var(--text-strong); text-decoration: none; }
.ps-start .ps-karte__titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ps-start .ps-karte:hover .ps-karte__titel a { color: var(--tanne-700); }
.ps-start .ps-karte__text { font: 400 var(--fs-small)/1.6 var(--font-sans); color: var(--text-muted); }

.ps-start .ps-fakten { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; list-style: none; }
.ps-start .ps-fakten li { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1.2 var(--font-sans); color: var(--text-body); }
.ps-start .ps-fakten svg { width: 16px; height: 16px; color: var(--tanne-500); }

.ps-start .ps-karte__link {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--border-subtle);
	display: flex;
	justify-content: flex-end;
}
.ps-start .ps-karte__link a {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 12px/1 var(--font-sans);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tanne-700);
}
.ps-start .ps-karte__link a::after { content: "→"; display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.ps-start .ps-karte:hover .ps-karte__link a { color: var(--sonne-700); }
.ps-start .ps-karte:hover .ps-karte__link a::after { transform: translateX(3px); }