/*
Theme Name: Oskar
Description: Block-Theme der Projektwebsite „Oskar“ Kufstein. Design-Tokens in theme.json.
Author: AlphaReal GmbH
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: oskar
*/

/*
 * Formsprache „Architekturmodell“: harte Kanten (Radius 0), Haarlinien statt Boxen,
 * sichtbares Raster, nummerierte Sektionen, viel Weißraum.
 * Tokens only, no hex values (docs/design-tokens.md).
 *
 * 1 Base · 2 Typography · 3 Buttons & links · 4 Header · 5 Hero · 6 Sections
 * 7 Components · 8 Forms · 9 Footer · 10 Motion
 */

:root {
	--oskar-ease: var(--wp--custom--motion--ease);
	--oskar-duration: var(--wp--custom--motion--duration);
	--oskar-line: var(--wp--custom--line) solid var(--wp--preset--color--line);
	--oskar-header-height: 80px;
}

/* ---------- 1 Base ---------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--oskar-header-height) + 16px);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--ink);
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.oskar-skip-link {
	position: absolute;
	left: -9999px;
}

.oskar-skip-link:focus {
	left: var(--wp--preset--spacing--20);
	top: var(--wp--preset--spacing--20);
	z-index: 100;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--white);
}

.wp-site-blocks > main {
	margin-block-start: 0;
}

img {
	border-radius: 0;
}

/* ---------- 2 Typography ---------- */

h1,
h2,
h3 {
	text-wrap: balance;
	/* German compounds ("Bauträgervertragsgesetz") must not overflow narrow screens. */
	hyphens: auto;
	overflow-wrap: break-word;
}

.oskar-figure__label,
.oskar-unit-mix thead th {
	hyphens: auto;
	overflow-wrap: anywhere;
}

p {
	text-wrap: pretty;
}

/* Comfortable measure: ~65 characters (benchmark: 41–76 on the best project sites). */
main p:not(.is-style-eyebrow):not(.oskar-fullbleed__title),
main li {
	max-width: 65ch;
}

/* Eyebrow with running section number: "01 ——— Lage" */
main {
	counter-reset: oskar-section;
}

.is-style-eyebrow,
.oskar-eyebrow {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
}

.is-style-eyebrow::before {
	content: "";
	flex: 0 0 3rem;
	height: 1px;
	background: currentColor;
	transform-origin: left center;
}

main .oskar-section .is-style-eyebrow {
	counter-increment: oskar-section;
}

main .oskar-section .is-style-eyebrow::before {
	content: counter(oskar-section, decimal-leading-zero);
	flex: 0 0 auto;
	height: auto;
	padding-inline-end: 4rem;
	background: linear-gradient(currentColor, currentColor) right center / 3rem 1px no-repeat;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	letter-spacing: 0;
}

.is-style-lead {
	max-width: 36em;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1.6;
}

/* ---------- 3 Buttons & links ---------- */

/*
 * Two button sizes only: standard (52 px) everywhere, compact (40 px) inside tables and
 * filter chips (navigator). Filled and outline share the 1px border, so heights match.
 */
.wp-element-button,
.wp-block-button__link,
.oskar-form .wpcf7-submit {
	box-sizing: border-box;
	display: inline-flex;
	gap: 0.875rem;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--button--height);
	padding-block: 0;
	border: 1px solid var(--wp--preset--color--primary);
	white-space: nowrap;
	transition: background-color 0.35s var(--oskar-ease), color 0.35s var(--oskar-ease), border-color 0.35s var(--oskar-ease);
}

.wp-block-button__link::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
	transition: transform 0.35s var(--oskar-ease);
}

.wp-block-button__link:hover::after {
	transform: translateX(4px);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--ink);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary-dark);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Text links: underline that grows from the left */
main p a:not(.wp-element-button),
.oskar-footer a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
	transition: background-size 0.4s var(--oskar-ease), color 0.3s;
}

main p a:not(.wp-element-button):hover,
.oskar-footer a:hover {
	background-size: 0 1px;
	background-position: right bottom;
}

/* ---------- 4 Header ---------- */

.oskar-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--white) 94%, transparent);
	border-bottom: var(--oskar-line);
	backdrop-filter: blur(14px);
	transition: background-color 0.45s var(--oskar-ease), border-color 0.45s var(--oskar-ease), color 0.45s var(--oskar-ease);
}

.oskar-header__bar {
	box-sizing: border-box;
	min-height: var(--oskar-header-height);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 0 var(--wp--style--root--padding-right, var(--wp--preset--spacing--30));
}

.oskar-header__nav {
	gap: var(--wp--preset--spacing--40);
}

.oskar-header .wp-block-navigation {
	gap: var(--wp--preset--spacing--30);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.oskar-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.375rem;
	white-space: nowrap;
}

.oskar-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--oskar-ease);
}

.oskar-header .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}


@media (max-width: 1279px) {
	.oskar-header .wp-block-navigation {
		gap: var(--wp--preset--spacing--20);
	}
}

.oskar-logo {
	display: inline-grid;
	line-height: 0;
}

.oskar-logo img {
	grid-area: 1 / 1;
	width: auto;
	height: 52px;
	transition: opacity 0.45s var(--oskar-ease);
}

.oskar-logo__img--light {
	opacity: 0;
}

/* Reading progress, appended by motion.js */
.oskar-progress {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

/* The header is sticky on every page; the hero no longer carries a dark image behind it (D-63). */

/* Mobile menu overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--anthracite) !important;
	color: var(--wp--preset--color--white) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- 5 Hero ---------- */

/*
 * Brochure cover (D-63): text on white beside the rendering, whose left edge is cut diagonally;
 * hairlines behind the text (isolation + z-index -1 as in the sections).
 */
.oskar-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
	min-height: min(calc(100svh - var(--oskar-header-height) - var(--wp-admin--admin-bar--height, 0px)), 51.25rem);
	overflow: clip;
	color: var(--wp--preset--color--ink);
	isolation: isolate;
}

.oskar-hero__content {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	margin: 0;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60) var(--wp--preset--spacing--70) max(var(--wp--style--root--padding-left, 1.25rem), calc((100vw - var(--wp--style--global--wide-size)) / 2));
}

.oskar-hero__content h1 {
	max-width: 12em;
	margin-block: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
}

.oskar-hero__content h1::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--sand);
}

.oskar-hero__content .is-style-lead {
	max-width: 30em;
	margin-block: 0 var(--wp--preset--spacing--50);
}

.oskar-hero__media {
	position: relative;
	min-height: 26rem;
	margin: 0;
	overflow: hidden;
	clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}

.oskar-hero__media picture {
	position: absolute;
	inset: 0;
	display: block;
}

.oskar-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 40%;
}

.oskar-hero__caption {
	position: absolute;
	right: var(--wp--style--root--padding-right, var(--wp--preset--spacing--30));
	bottom: var(--wp--preset--spacing--30);
	z-index: 1;
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--white);
}

@media (max-width: 781px) {
	.oskar-hero {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.oskar-hero__content {
		padding: var(--wp--preset--spacing--60) var(--wp--style--root--padding-right, 1.25rem) var(--wp--preset--spacing--50) var(--wp--style--root--padding-left, 1.25rem);
	}

	.oskar-hero__media {
		min-height: 0;
		height: clamp(16rem, 60vw, 26.25rem);
		clip-path: none;
	}
}

/* Key figures band: hairline grid, explicit columns per breakpoint (5 / 3 / 2) */
.oskar-band {
	padding-block: 0;
	border-bottom: var(--oskar-line);
}

.oskar-band .oskar-figures-row {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 0 !important;
}

.oskar-figures-row > .oskar-figure {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	border-left: 1px solid var(--wp--preset--color--warm-stone);
}

.oskar-figures-row .oskar-figure__value {
	font-size: clamp(1.625rem, 2.1vw, 2.25rem);
	line-height: 1.1;
}

/* Mobile: 2 columns */
.oskar-figures-row > .oskar-figure:nth-child(odd) {
	padding-inline-start: 0;
	border-left: 0;
}

.oskar-figures-row > .oskar-figure:nth-child(n + 3) {
	border-top: 1px solid var(--wp--preset--color--warm-stone);
}

@media (min-width: 782px) {
	.oskar-band .oskar-figures-row {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.oskar-figures-row > .oskar-figure:nth-child(odd) {
		padding-inline-start: var(--wp--preset--spacing--20);
		border-left: 1px solid var(--wp--preset--color--warm-stone);
	}

	.oskar-figures-row > .oskar-figure:nth-child(3n + 1) {
		padding-inline-start: 0;
		border-left: 0;
	}

	.oskar-figures-row > .oskar-figure:nth-child(n + 3) {
		border-top: 0;
	}

	.oskar-figures-row > .oskar-figure:nth-child(n + 4) {
		border-top: 1px solid var(--wp--preset--color--warm-stone);
	}
}

@media (min-width: 1200px) {
	.oskar-band .oskar-figures-row {
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	}

	.oskar-figures-row > .oskar-figure:nth-child(n) {
		padding-block: var(--wp--preset--spacing--40);
		padding-inline-start: var(--wp--preset--spacing--30);
		border-top: 0;
		border-left: 1px solid var(--wp--preset--color--warm-stone);
	}
}

/* ---------- 6 Sections ---------- */

.oskar-section {
	padding-block: var(--wp--preset--spacing--70);
}

.oskar-section--compact {
	padding-block: var(--wp--preset--spacing--60);
}

.oskar-section--flush {
	padding-block-start: 0;
}

.oskar-section__head {
	margin-block-end: var(--wp--preset--spacing--60);
}

.oskar-section h2 {
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* Brochure headline: a short rule below every section title (D-62) and page title (D-67) */
.oskar-section h2::after,
.oskar-page-intro h1::after,
.wp-block-post-title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin-block-start: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--sand);
}

/* Small label between head and content ("Das zeichnet Oskar aus") */
.oskar-section__label {
	margin: 0 0 var(--wp--preset--spacing--30);
	margin-inline: 0 !important; /* core centres paragraphs narrower than the container */
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
}

.oskar-section__label--spaced {
	margin-block-start: var(--wp--preset--spacing--60) !important;
}

/* Closing band before the contact section ("Ihr Platz im Oskar.") */
.oskar-section--band {
	padding-block: var(--wp--preset--spacing--60);
	border-top: var(--oskar-line);
}

/* Sand section (Ausstattung): ink text, white rule and edge line */
.oskar-section--sand {
	--oskar-tail-color: var(--wp--preset--color--white);
	--oskar-tail-opacity: var(--wp--custom--diagonal--opacity-tint);
}

.oskar-section--sand .is-style-eyebrow,
.oskar-section--sand .oskar-section__label,
.oskar-section--sand h2,
.oskar-section--sand h3 {
	color: var(--wp--preset--color--ink);
}

.oskar-section--sand h2::after {
	background: var(--wp--preset--color--white);
}

.oskar-section--sand a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--ink);
}

.oskar-section--dark .is-style-eyebrow {
	color: var(--wp--preset--color--warm-stone);
}

.oskar-section--dark h2,
.oskar-section--dark h3 {
	color: var(--wp--preset--color--white);
}

.oskar-section--dark h2::after {
	background: var(--wp--preset--color--white);
}

.oskar-section--dark a {
	color: inherit;
}

.oskar-page-intro {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

/* Page titles in the brochure style of the home hero (D-67): Jost 600, capitals, sand-dark */
.oskar-page-intro h1,
.wp-block-post-title {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
}

/* Apartment finder: short intro so filters, building and unit list fit on one screen */
.oskar-page-intro--compact {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
}

.oskar-page-intro--compact h1 {
	margin-block-end: var(--wp--preset--spacing--20);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.oskar-page-intro--compact .is-style-lead {
	max-width: 52rem;
	margin-block: 0;
	/* Left edge of the content column like the heading (core centres narrower children;
	   0 put the text at the edge of the window on screens wider than the column). */
	margin-left: max(0px, (100% - 1360px) / 2) !important;
	font-size: 1rem;
}

/* Split layouts */
.oskar-split {
	gap: var(--wp--preset--spacing--70) !important;
}

.wp-block-columns > .wp-block-column {
	min-width: 0;
}

@media (min-width: 782px) {
	.oskar-split--reverse {
		flex-direction: row-reverse;
	}
}

/* ---------- 7 Components ---------- */

/* Media: sharp image with a thin caption rule */
.oskar-media {
	position: relative;
	margin: 0;
}

.oskar-media picture {
	display: block;
	overflow: hidden;
}

.oskar-media img {
	display: block;
	width: 100%;
	height: auto;
}

.oskar-media--tall img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.oskar-media--43 > picture img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.oskar-media--32 > picture img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.oskar-media--11 > picture img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.oskar-media--band > picture img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* Diagonal left edge like the brochure's image cuts (on the img: the reveal clips the picture) */
.oskar-media--cut > picture img {
	clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

/*
 * The cut edge continues beyond the image as a fading hairline (D-64): upwards from the top of
 * the cut (12 % of the width) and downwards from the bottom-left corner, in the edge's own angle
 * (atan(0.12 * width / height), so per aspect ratio). The figure is an inline-size container, so
 * the lower line can start at the image's bottom (100cqw / ratio) below which the caption sits.
 * Lengths per section (--oskar-tail-up/-down) stop short of neighbouring text; the line may
 * cross into the padding of the section above.
 */
.oskar-media--cut {
	--oskar-cut-angle: 9.1deg; /* 4:3 */
	--oskar-cut-ratio: calc(4 / 3);
	container-type: inline-size;
}

.oskar-media--32.oskar-media--cut {
	--oskar-cut-angle: 10.2deg;
	--oskar-cut-ratio: 1.5;
}

.oskar-media--11.oskar-media--cut {
	--oskar-cut-angle: 6.8deg;
	--oskar-cut-ratio: 1;
}

.oskar-media--band.oskar-media--cut {
	--oskar-cut-angle: 13.5deg;
	--oskar-cut-ratio: 2;
}

.oskar-media--cut::before,
.oskar-media--cut::after {
	content: "";
	position: absolute;
	width: 1px;
	opacity: var(--oskar-tail-opacity, var(--wp--custom--diagonal--opacity));
	pointer-events: none;
	transition: opacity var(--oskar-duration) var(--oskar-ease) var(--oskar-duration);
}

/* Upwards: rises to the right into the space above the image */
.oskar-media--cut::before {
	top: 0;
	left: 12%;
	height: var(--oskar-tail-up, var(--wp--preset--spacing--70));
	background: linear-gradient(to top, var(--oskar-tail-color, var(--wp--preset--color--sand)), transparent);
	transform: translateY(-100%) rotate(var(--oskar-cut-angle));
	transform-origin: bottom center;
}

/* Downwards: falls to the left of the caption, into the column gap */
.oskar-media--cut::after {
	top: calc(100cqw / var(--oskar-cut-ratio));
	left: 0;
	height: var(--oskar-tail-down, 0px);
	background: linear-gradient(to bottom, var(--oskar-tail-color, var(--wp--preset--color--sand)), transparent);
	transform: rotate(var(--oskar-cut-angle));
	transform-origin: top center;
}

.oskar-motion .oskar-media--cut[data-reveal]:not(.is-revealed)::before,
.oskar-motion .oskar-media--cut[data-reveal]:not(.is-revealed)::after {
	opacity: 0;
}

/* Lengths: as far as the padding above and the content below allow (desktop measures) */
#wohnungen .oskar-media--cut {
	--oskar-tail-up: calc(var(--wp--preset--spacing--70) * 1.75); /* into the padding under the highlight tiles */
	--oskar-tail-down: calc(var(--wp--preset--spacing--70) * 0.75); /* stops above the availability bar */
}

#architektur .oskar-media--cut {
	--oskar-tail-up: calc(var(--wp--preset--spacing--70) * 1.9); /* into the padding under the location CTA */
	--oskar-tail-down: calc(var(--wp--preset--spacing--70) * 1.9); /* along the gap beside the image pair */
}

#ausstattung .oskar-media--cut {
	--oskar-tail-up: var(--wp--preset--spacing--70); /* white line: ends at the sand edge anyway */
	--oskar-tail-down: calc(var(--wp--preset--spacing--70) * 0.875); /* stops above "Bad & Technik" */
}

.oskar-section--band .oskar-media--cut {
	--oskar-tail-up: calc(var(--wp--preset--spacing--60) * 1.8); /* into the padding under the partners */
	--oskar-tail-down: calc(var(--wp--preset--spacing--60) * 1.2); /* stays inside the band */
}

/* Small screens stack text above the image: no line there, and none in print */
@media (max-width: 781px), print {
	.oskar-media--cut::before,
	.oskar-media--cut::after {
		display: none;
	}
}

/* Two small images under a large one */
.oskar-media__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--10);
	margin-block-start: var(--wp--preset--spacing--10);
}

.oskar-media__pair picture,
.oskar-media__pair img {
	display: block;
	width: 100%;
	height: 100%;
}

.oskar-media__pair img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.oskar-media figcaption,
.oskar-gallery__caption,
.oskar-fullbleed figcaption {
	margin-block-start: var(--wp--preset--spacing--10);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

/* Full-bleed image with display title */
.oskar-fullbleed {
	position: relative;
	margin: 0;
	overflow: hidden;
	color: var(--wp--preset--color--white);
}

.oskar-fullbleed img {
	display: block;
	width: 100%;
	height: clamp(18rem, 36vw, 31.25rem);
	object-fit: cover;
}

.oskar-fullbleed::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--anthracite) 70%, transparent), transparent 45%);
	pointer-events: none;
}

.oskar-fullbleed__title {
	position: absolute;
	bottom: var(--wp--preset--spacing--60);
	left: max(var(--wp--style--root--padding-left, 1.25rem), calc((100vw - var(--wp--style--global--wide-size)) / 2));
	z-index: 1;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.oskar-fullbleed figcaption {
	position: absolute;
	right: var(--wp--style--root--padding-right, 1.25rem);
	bottom: var(--wp--preset--spacing--30);
	z-index: 1;
	margin: 0;
}

/* Location: wide photo, map with the site marker, distances in two groups */
.oskar-location__intro {
	gap: var(--wp--preset--spacing--60) !important;
	margin-block-end: var(--wp--preset--spacing--60) !important;
}

.oskar-location__intro h3 {
	margin: 0;
	font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
}

/*
 * Panorama with callouts (as in the brochure). The photo sits on a canvas that keeps the photo's
 * aspect ratio and is at least as wide and as tall as the frame (so it covers it like
 * object-fit: cover, anchored at 55 % of the width); the callouts are positioned in percent of
 * that canvas, so they stay on their spots whatever the frame crops.
 */
.oskar-pano {
	--pano-h: clamp(24rem, 42vw, 46rem);
	--pano-ratio: 1.916;
	position: relative;
	margin: 0;
}

.oskar-pano__frame {
	position: relative;
	height: var(--pano-h);
	overflow: hidden;
	background: var(--wp--preset--color--stone);
}

.oskar-pano__canvas {
	--pano-w: max(100%, calc(var(--pano-h) * var(--pano-ratio)));
	position: absolute;
	top: 50%;
	left: clamp(calc(100% - var(--pano-w)), calc(50% - 0.55 * var(--pano-w)), 0px);
	width: var(--pano-w);
	aspect-ratio: var(--pano-ratio);
	transform: translateY(-50%);
}

.oskar-pano__canvas picture,
.oskar-pano__canvas img {
	display: block;
	width: 100%;
	height: auto;
}

.oskar-pano__marks {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.oskar-pano__mark {
	position: absolute;
	left: var(--x);
	top: var(--t);
	width: 0;
	height: calc(var(--d) - var(--t));
	border-left: 1px solid var(--wp--preset--color--white);
}

.oskar-pano__mark::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0.875rem;
	height: 0.875rem;
	transform: translate(-50%, 50%);
	border: 2px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
}

.oskar-pano__mark--site::after {
	width: 1.125rem;
	height: 1.125rem;
	background: var(--wp--preset--color--primary);
}

.oskar-pano__label {
	position: absolute;
	bottom: calc(100% + 0.4rem);
	left: 0;
	transform: translateX(-50%);
	color: var(--wp--preset--color--white);
	font-size: clamp(0.6875rem, 0.55rem + 0.3vw, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.oskar-pano__mark--site .oskar-pano__label {
	font-weight: 600;
}

.oskar-motion .oskar-pano__canvas[data-reveal] .oskar-pano__marks {
	transition: opacity var(--oskar-duration) var(--oskar-ease) calc(var(--oskar-duration) * 1.25);
}

.oskar-motion .oskar-pano__canvas[data-reveal]:not(.is-revealed) .oskar-pano__marks {
	opacity: 0;
}

.oskar-pano figcaption {
	margin: var(--wp--preset--spacing--10) var(--wp--style--root--padding-right, 1.25rem) 0 max(var(--wp--style--root--padding-left, 1.25rem), calc((100vw - var(--wp--style--global--wide-size)) / 2));
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.oskar-location__grid {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin-block-start: var(--wp--preset--spacing--60);
}

.oskar-map {
	position: relative;
	margin: 0;
}

/* The canvas holds image, markers and pin; legend and caption sit below it in the figure */
.oskar-map__canvas {
	position: relative;
}

.oskar-map picture {
	display: block;
	border: var(--oskar-line);
}

.oskar-map img {
	display: block;
	width: 100%;
	height: auto;
}

/* Site marker: dot with a soft ring, label above it (position from the build manifest; place 1
   sits just east of the site, so the label must not cover it) */
.oskar-map__pin {
	position: absolute;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 0.375rem;
	transform: translate(-50%, calc(-100% + 0.8125rem)); /* dot is 1.25rem + 2 x 3px border */
	pointer-events: none;
	transition: opacity var(--oskar-duration) var(--oskar-ease) var(--oskar-duration);
}

.oskar-motion .oskar-map[data-reveal]:not(.is-revealed) .oskar-map__pin {
	opacity: 0;
}

.oskar-map__dot {
	position: relative;
	width: 1.25rem;
	height: 1.25rem;
	border: 3px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}

.oskar-map__dot::after {
	content: "";
	position: absolute;
	inset: -0.875rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	opacity: 0.45;
}

.oskar-map__label {
	padding: 0.2rem 0.5rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Named places: numbered dots on the map, the same numbers in the list beside it (D-65) */
.oskar-map__poi {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	transform: translate(-50%, -50%);
	border: 1.5px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
}

/* Numbers paint above the site's ring */
.oskar-map__canvas > .oskar-map__poi {
	z-index: 1;
}

@media (max-width: 781px) {
	.oskar-map__canvas > .oskar-map__poi {
		width: 1.125rem;
		height: 1.125rem;
		font-size: 0.625rem;
	}
}

/* The list beside the map: number, place, walking distance */
.oskar-distances__list.oskar-distances__list--places li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0 0.75rem;
	align-items: center;
	justify-content: start;
	text-align: left;
}

.oskar-distances__list.oskar-distances__list--places .oskar-map__poi {
	position: static;
	transform: none;
}

.oskar-distances__list.oskar-distances__list--places .oskar-distances__place {
	justify-self: start;
}

.oskar-distances__note {
	margin: calc(-1 * var(--wp--preset--spacing--40)) 0 var(--wp--preset--spacing--50);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.oskar-map figcaption {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.oskar-distances h3 {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.oskar-distances h3 + .oskar-distances__list {
	border-top: var(--oskar-line);
}

.oskar-distances__list {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
}

.oskar-distances__list li {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block: 0.625rem;
	border-bottom: var(--oskar-line);
}

.oskar-distances__value {
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--anthracite);
}

.oskar-distances .oskar-section__cta {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.oskar-location__grid {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: start;
	}

}

/* Gallery: strict 3-column grid, 1px gutters like a model sheet */
.oskar-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: clamp(14rem, 24vw, 21.25rem) auto;
	gap: var(--wp--preset--spacing--10);
	margin-block: var(--wp--preset--spacing--60) 0;
}

.oskar-gallery--lead {
	margin-block: 0 var(--wp--preset--spacing--60);
}

.oskar-gallery__item {
	margin: 0;
	overflow: hidden;
}

.oskar-gallery__item--wide {
	grid-column: span 2;
}

.oskar-gallery__item picture,
.oskar-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
}

.oskar-gallery__item img {
	object-fit: cover;
	transition: transform 1.2s var(--oskar-ease);
}

.oskar-gallery__caption {
	align-self: start;
}

.oskar-gallery__item:hover img {
	transform: scale(1.04);
}

.oskar-gallery__caption {
	grid-column: 1 / -1;
	margin: 0;
}

@media (max-width: 781px) {
	.oskar-gallery {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.oskar-gallery__item img {
		aspect-ratio: 3 / 2;
	}

	.oskar-gallery__item--wide {
		grid-column: auto;
	}
}

/* Highlights: hairline grid of numbered tiles */
.oskar-highlights {
	gap: 0 !important;
	border-top: var(--oskar-line);
	border-left: var(--oskar-line);
	counter-reset: oskar-highlight;
}

/* Six tiles: three columns on desktop (the auto grid gave 4 + 2), two or one below. */
@media (min-width: 900px) {
	.oskar-highlights {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

.oskar-highlight {
	position: relative;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-right: var(--oskar-line);
	border-bottom: var(--oskar-line);
	background: var(--wp--preset--color--white);
	counter-increment: oskar-highlight;
	transition: background-color 0.5s var(--oskar-ease);
}

.oskar-highlight::before {
	content: counter(oskar-highlight, decimal-leading-zero);
	position: absolute;
	top: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	color: var(--wp--preset--color--sand-dark);
}

.oskar-highlight:hover {
	background: var(--wp--preset--color--stone);
}

.oskar-highlight__icon {
	display: inline-flex;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--wp--preset--color--sand-dark);
	transition: transform 0.6s var(--oskar-ease);
}

.oskar-highlight:hover .oskar-highlight__icon {
	transform: translateY(-4px);
}

.oskar-highlight__icon svg,
.oskar-highlight__icon img {
	width: 100%;
	height: 100%;
}

.oskar-highlight__title {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--10);
}

.oskar-highlight__text {
	max-width: 26em;
	margin: 0;
}

/* Key figure */
.oskar-figure {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.oskar-figure__label {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
}

.oskar-figure__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.oskar-figure__note {
	font-size: var(--wp--preset--font-size--small);
}

/* Energy certificate scale (certificate layout): class arrows, value in the row of its class */
.oskar-eaw {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	margin-block-end: var(--wp--preset--spacing--40);
}

.oskar-eaw__table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.oskar-eaw__table caption {
	padding-block-end: var(--wp--preset--spacing--20);
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
	caption-side: top;
}

.oskar-eaw__table th,
.oskar-eaw__table td {
	padding: 0.3125rem 0.5rem;
	border: 0;
	border-bottom: var(--oskar-line);
	text-align: left;
	vertical-align: middle;
}

.oskar-eaw__table thead th {
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.oskar-eaw__table abbr {
	text-decoration: none;
}

.oskar-eaw__table th:first-child,
.oskar-eaw__table td:first-child {
	width: 44%;
	padding-inline-start: 0;
}

.oskar-eaw__table td {
	width: 28%;
	white-space: nowrap;
}

.oskar-eaw__table td strong {
	font-size: 1.0625rem;
	font-weight: 600;
}

.oskar-eaw__table td small {
	font-size: 0.75rem;
}

.oskar-eaw__row--hit td {
	background: var(--wp--preset--color--stone);
}

/* Note under the scales: left edge of the column (core centres paragraphs narrower than the container) */
.oskar-eaw__note {
	max-width: 44em;
	margin-left: 0 !important;
}

.oskar-eaw__arrow {
	display: flex;
	align-items: center;
	width: var(--w);
	height: 1.75rem;
	padding-inline-start: 0.625rem;
	background: var(--eaw);
	clip-path: polygon(0 0, calc(100% - 0.75rem) 0, 100% 50%, calc(100% - 0.75rem) 100%, 0 100%);
	font-size: 1.1875rem; /* 19 px bold = large text; ink reaches 3.5:1 on every class colour */
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.oskar-eaw__row--app { --eaw: var(--wp--custom--energy--app); --w: 40%; }
.oskar-eaw__row--ap { --eaw: var(--wp--custom--energy--ap); --w: 47.5%; }
.oskar-eaw__row--a { --eaw: var(--wp--custom--energy--a); --w: 55%; }
.oskar-eaw__row--b { --eaw: var(--wp--custom--energy--b); --w: 62.5%; }
.oskar-eaw__row--c { --eaw: var(--wp--custom--energy--c); --w: 70%; }
.oskar-eaw__row--d { --eaw: var(--wp--custom--energy--d); --w: 77.5%; }
.oskar-eaw__row--e { --eaw: var(--wp--custom--energy--e); --w: 85%; }
.oskar-eaw__row--f { --eaw: var(--wp--custom--energy--f); --w: 92.5%; }
.oskar-eaw__row--g { --eaw: var(--wp--custom--energy--g); --w: 100%; }

@media (min-width: 782px) {
	.oskar-eaw {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* "Kein passender Grundriss gefunden?" under the unit mix */
.oskar-more {
	display: grid;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--warm-stone);
}

.oskar-more h3 {
	margin: 0 0 var(--wp--preset--spacing--10);
}

.oskar-more p {
	max-width: 44em;
	margin: 0;
}

.oskar-more .wp-block-buttons {
	margin: 0;
}

@media (min-width: 782px) {
	.oskar-more {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}
}

/* Checklist with drawn check icons */
.is-style-checklist {
	padding-inline-start: 0;
	list-style: none;
}

.is-style-checklist li {
	position: relative;
	padding-block: var(--wp--preset--spacing--10);
	padding-inline-start: 2rem;
	border-bottom: var(--oskar-line);
}

.is-style-checklist li::before {
	content: "";
	position: absolute;
	top: 0.95em;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--wp--preset--color--primary);
	mask: url("assets/icons/check.svg") center / contain no-repeat;
}

.oskar-section--dark .is-style-checklist li {
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 16%, transparent);
}

.oskar-section--sand .is-style-checklist li {
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent);
}

.oskar-section--sand .is-style-checklist li::before {
	background: var(--wp--preset--color--ink);
}

.oskar-section--dark .is-style-checklist li::before {
	background: var(--wp--preset--color--warm-stone);
}

.oskar-feature-columns {
	gap: var(--wp--preset--spacing--60) !important;
}

.oskar-feature-columns h3 {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Purchase steps: timeline with a line that draws across */
.oskar-steps {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40) 0 0;
	list-style: none;
	counter-reset: step;
}

.oskar-steps::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: var(--wp--preset--color--ink);
	transform-origin: left;
}

.oskar-steps li {
	position: relative;
	counter-increment: step;
}

.oskar-steps li {
	font-size: 0.9375rem;
	line-height: 1.6;
}

.oskar-steps li::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	margin-block-end: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--wp--preset--color--sand-dark);
}

.oskar-steps strong {
	display: block;
	margin-block-end: var(--wp--preset--spacing--10);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.3;
}

@media (min-width: 640px) {
	.oskar-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.oskar-steps {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Cards: white sheet with a hairline, no shadow, no radius */
.oskar-cards {
	gap: var(--wp--preset--spacing--30) !important;
}

.oskar-card {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--white);
	border: var(--oskar-line);
}

.oskar-card > h3:first-child {
	margin-block-start: 0;
}

/* Fact tables */
.is-style-facts table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.is-style-facts td {
	padding: var(--wp--preset--spacing--20) 0;
	border: 0;
	border-bottom: var(--oskar-line);
	vertical-align: top;
}

.is-style-facts tr:first-child td {
	border-top: 1px solid var(--wp--preset--color--ink);
}

.is-style-facts td:last-child {
	padding-inline-start: var(--wp--preset--spacing--20);
	font-weight: 500;
	text-align: right;
	white-space: nowrap;
}

.is-style-facts figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: 0.75rem;
	text-align: left;
}

/* Instalment plan (brochure p. 26): wide card; from 900 px the five rates form a scaled bar
   (column widths = share of the price, --cols set by the pattern), below that a plain list */
.oskar-card--wide {
	margin-block-end: var(--wp--preset--spacing--30);
}

.oskar-card--wide > p {
	max-width: 44em;
}

.oskar-rates {
	display: grid;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.oskar-rates li {
	display: grid;
	grid-template-columns: 3.75rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--20);
	border-bottom: var(--oskar-line);
}

.oskar-rates li:first-child {
	border-top: 1px solid var(--wp--preset--color--ink);
}

.oskar-rates__pct {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.oskar-rates__when {
	font-size: var(--wp--preset--font-size--small);
}

.oskar-rates__when strong {
	display: block;
	font-weight: 500;
}

.oskar-rates__note {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: 0.75rem;
}

@media (min-width: 900px) {
	.oskar-rates {
		grid-template-columns: var(--cols);
		gap: 0 2px;
	}

	.oskar-rates li,
	.oskar-rates li:first-child {
		display: block;
		padding: 0 var(--wp--preset--spacing--20) 0 0;
		border: 0;
	}

	.oskar-rates li::before {
		content: "";
		display: block;
		height: 0.625rem;
		margin-block-end: var(--wp--preset--spacing--20);
		background: var(--wp--preset--color--sage);
	}

	.oskar-rates li:nth-child(even)::before {
		background: var(--wp--preset--color--primary);
	}

	.oskar-rates__pct {
		display: block;
		font-size: 1.75rem;
		line-height: 1.1;
	}

	.oskar-rates__when {
		display: block;
		margin-block-start: var(--wp--preset--spacing--10);
		hyphens: auto;
	}
}

/* Unit mix */
.oskar-unit-mix {
	position: relative; /* contains the absolutely positioned screen-reader text */
	margin-block: var(--wp--preset--spacing--50);
	overflow-x: auto;
}

.oskar-unit-mix table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.oskar-unit-mix th,
.oskar-unit-mix td {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--preset--color--warm-stone);
	text-align: left;
	white-space: nowrap;
}

.oskar-unit-mix thead th {
	padding-block-start: 0;
	border-bottom-color: var(--wp--preset--color--ink);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.oskar-section__label + .oskar-unit-mix {
	margin-block-start: 0;
}

.oskar-unit-mix tbody th {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 400;
}

/* Type and link may wrap, so the table fits next to the image without scrolling. */
.oskar-unit-mix tbody th,
.oskar-unit-mix td:last-child {
	white-space: normal;
}

.oskar-unit-mix tbody tr {
	transition: background-color 0.4s var(--oskar-ease);
}

.oskar-unit-mix tbody tr:hover {
	background: color-mix(in srgb, var(--wp--preset--color--warm-stone) 25%, transparent);
}

.oskar-unit-mix__link {
	font-weight: 500;
	text-decoration: none;
}

.oskar-unit-mix__link::after {
	content: " →";
	display: inline-block;
	transition: transform 0.35s var(--oskar-ease);
}

.oskar-unit-mix tr:hover .oskar-unit-mix__link::after {
	transform: translateX(4px);
}

/* Partners: three columns with top rules */
.oskar-partners {
	gap: 0 !important;
}

.oskar-partners > .wp-block-column {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0 0;
	border-top: 1px solid var(--wp--preset--color--ink);
}

.oskar-partners h3 {
	margin-block: 0 var(--wp--preset--spacing--10);
}

/* Contact cards (D-63): portrait beside a sand panel whose right edge is cut diagonally */
.oskar-contacts {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--50);
}

.oskar-contact {
	display: flex;
	align-items: stretch;
}

.oskar-contact__photo {
	display: flex;
	flex: 0 0 6rem;
}

.oskar-contact__photo img,
.oskar-contact__monogram {
	display: grid;
	place-items: center;
	width: 6rem;
	height: 100%;
	min-height: 7.5rem;
	object-fit: cover;
}

.oskar-contact__monogram {
	background: var(--wp--preset--color--stone);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	color: var(--wp--preset--color--ink);
}

.oskar-contact__body {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.125rem;
	justify-content: center;
	min-width: 0;
	padding: 0.875rem 2rem 0.875rem 1.25rem;
	background: var(--wp--preset--color--sand);
	clip-path: polygon(0 0, 100% 0, calc(100% - 1.25rem) 100%, 0 100%);
	color: var(--wp--preset--color--ink);
}

.oskar-contact__name {
	margin: 0;
	line-height: 1.2;
}

.oskar-contact__title {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.oskar-contact__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.oskar-section .oskar-contact__links a {
	background: none;
	color: inherit; /* ink on sand 6.8:1; the sage link colour would reach only 2.9:1 */
	text-decoration: none;
}

.oskar-contact__links a:first-child {
	font-weight: 500;
}

.oskar-section .oskar-contact__links a:hover {
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
}

.oskar-contact-note {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ---------- 8 Forms (Contact Form 7) ---------- */

.oskar-form-card {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.oskar-form label {
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
}

.oskar-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	column-gap: var(--wp--preset--spacing--30);
}

/* Underline fields: one line, no box */
.oskar-form input:where([type="text"], [type="email"], [type="tel"]),
.oskar-form select,
.oskar-form textarea {
	box-sizing: border-box;
	width: 100%;
	margin-block-start: 0.25rem;
	padding: 0.625rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 1.0625rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink);
	transition: border-color 0.3s var(--oskar-ease), box-shadow 0.3s var(--oskar-ease);
}

.oskar-form textarea {
	min-height: 7rem;
	resize: vertical;
}

.oskar-form input:focus,
.oskar-form select:focus,
.oskar-form textarea:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: 0 1px 0 0 var(--wp--preset--color--primary);
}

.oskar-form ::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
}

.oskar-form .wpcf7-acceptance {
	display: block;
	margin-block: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.oskar-form .wpcf7-list-item {
	margin: 0;
}

.oskar-form .wpcf7-list-item label {
	display: flex;
	gap: var(--wp--preset--spacing--10);
	align-items: flex-start;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink);
}

.oskar-form input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.2em;
	accent-color: var(--wp--preset--color--primary);
}

.oskar-form .wpcf7-submit {
	padding-inline: var(--wp--custom--button--padding-inline);
	border-radius: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--custom--button--font-size);
	font-weight: 500;
	letter-spacing: var(--wp--custom--button--letter-spacing);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.35s var(--oskar-ease);
}

.oskar-form .wpcf7-submit:hover {
	border-color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--primary-dark);
}

.oskar-form .wpcf7-not-valid-tip {
	margin-block-start: 0.25rem;
	font-size: 0.75rem;
	letter-spacing: 0;
	text-transform: none;
}

.oskar-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 0 !important;
	padding: var(--wp--preset--spacing--20) !important;
	border: 1px solid currentColor !important;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- 9 Footer ---------- */

.oskar-footer {
	position: relative;
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
	overflow: clip;
	isolation: isolate;
}

.oskar-footer a {
	color: inherit;
}

.oskar-footer .is-style-eyebrow {
	color: var(--wp--preset--color--warm-stone);
}

.oskar-footer .is-style-eyebrow::before {
	flex-basis: 2rem;
}

.oskar-footer .oskar-logo {
	background: none;
}

.oskar-footer .oskar-logo img {
	height: 64px;
}

.oskar-footer .oskar-logo__img--light {
	opacity: 1; /* the header rule hides the light wordmark until the header is transparent */
}

.oskar-footer .oskar-logo__img--dark {
	display: none;
}

/* Partner logos (D-69): developer and marketing agency, white on the dark footer */
.oskar-footer .oskar-partner {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--20);
	line-height: 0;
	transition: opacity 0.3s var(--oskar-ease);
}

.oskar-footer .oskar-partner:hover {
	opacity: 0.8;
}

.oskar-footer .oskar-partner img {
	width: auto;
	height: 2.75rem;
}

.oskar-footer .oskar-partner--schwarzweiss img {
	height: 3.5rem;
}

.oskar-footer__grid {
	gap: var(--wp--preset--spacing--50) !important;
}

.oskar-footer__legal {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 18%, transparent);
	opacity: 0.8;
}

/* ---------- 9b Conversion (Paket 1, 20.10.2026) ---------- */

/* Header without CTA buttons (20.10.2026, Mario): calls to action live in the hero, the
   mobile action bar and the unit view. */

/* Unit and shortlist views: the navigator starts at the top, the page intro steps aside; the
   unit page has its own inquiry, so the finder's closing band stays away (D-67) */
.oskar-unit-view .oskar-page-intro,
.oskar-unit-view .oskar-finder-band {
	display: none;
}

.oskar-unit-view .oskar-section--flush {
	padding-block-start: var(--wp--preset--spacing--30);
}

/* Small screens: buttons may wrap their label instead of widening the page */
@media (max-width: 600px) {
	.wp-element-button,
	.wp-block-button__link,
	.oskar-form .wpcf7-submit {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
}

/* Section closing CTA */
.oskar-section__cta {
	margin-block-start: var(--wp--preset--spacing--50);
}

.oskar-split .oskar-section__cta {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Buttons on dark sections */
.oskar-section--dark .wp-block-button.is-style-outline > .wp-block-button__link,
.oskar-footer .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

.oskar-section--dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

/* Availability: headline, status bar, per-house counts, data timestamp */
.oskar-availability {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

.oskar-availability__headline {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
}

.oskar-availability__headline strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.oskar-availability__bar {
	display: flex;
	gap: 2px;
	height: 6px;
	margin-block-end: var(--wp--preset--spacing--20);
}

.oskar-availability__seg--available { background: var(--wp--preset--color--status-available); }
.oskar-availability__seg--reserved { background: var(--wp--preset--color--status-reserved); }
.oskar-availability__seg--sold { background: var(--wp--preset--color--status-sold); }

.oskar-motion .oskar-availability__bar {
	transform-origin: left;
	transition: transform 1.4s var(--oskar-ease);
}

.oskar-motion .oskar-availability:not(.is-revealed) .oskar-availability__bar {
	transform: scaleX(0);
}

.oskar-availability__houses {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.oskar-availability__asof {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: 0.75rem;
}

/* CTA ladder in the contact section: three steps, low to high commitment */
.oskar-ladder {
	display: grid;
	gap: 0;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--ink);
}

.oskar-ladder a {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0 var(--wp--preset--spacing--20);
	align-items: center;
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--preset--color--warm-stone);
	color: inherit;
	text-decoration: none;
	transition: padding 0.35s var(--oskar-ease), color 0.35s var(--oskar-ease);
}

.oskar-ladder a::after {
	content: "";
	grid-row: 1 / span 2;
	grid-column: 2;
	width: 1.125rem;
	height: 1.125rem;
	background: currentColor;
	mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
}

.oskar-ladder a:hover {
	padding-inline-start: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--primary);
}

.oskar-ladder strong {
	font-size: 1.0625rem;
	font-weight: 500;
}

.oskar-ladder span {
	font-size: var(--wp--preset--font-size--small);
}

/* Form: full-width rows and note */
.oskar-form .oskar-form__full {
	grid-column: 1 / -1;
}

.oskar-form__note {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

/* Thank-you page steps */
.oskar-steps--compact {
	margin-block: var(--wp--preset--spacing--40);
}

@media (min-width: 960px) {
	.oskar-steps--compact {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile action bar */
.oskar-actionbar {
	display: none;
}

@media (max-width: 781px) {
	.oskar-actionbar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 60;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--wp--preset--color--white);
		border-top: 1px solid var(--wp--preset--color--line);
	}

	body {
		padding-bottom: calc(4rem + env(safe-area-inset-bottom));
	}

	html {
		scroll-padding-bottom: calc(4rem + env(safe-area-inset-bottom));
	}

	.oskar-actionbar__item {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		align-items: center;
		justify-content: center;
		min-height: 4rem;
		color: var(--wp--preset--color--ink);
		font-size: 0.75rem;
		font-weight: 500;
		letter-spacing: 0.08em;
		text-decoration: none;
		text-transform: uppercase;
	}

	.oskar-actionbar__item svg {
		width: 1.375rem;
		height: 1.375rem;
	}

	.oskar-actionbar__item.is-primary {
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
	}

	.oskar-actionbar__badge {
		position: absolute;
		top: 0.5rem;
		left: calc(50% + 0.5rem);
		display: grid;
		place-items: center;
		min-width: 1.25rem;
		height: 1.25rem;
		padding-inline: 0.25rem;
		background: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
		font-size: 0.75rem;
		letter-spacing: 0;
	}

	.oskar-actionbar__badge[hidden] {
		display: none;
	}
}

/* ---------- 10 Motion ---------- */
/*
 * Start states apply only with html.oskar-motion (set in <head>, removed for
 * prefers-reduced-motion or if motion.js fails). Transforms and opacity only: no layout shift.
 */

.oskar-motion [data-reveal] {
	transition:
		opacity var(--oskar-duration) var(--oskar-ease),
		transform var(--oskar-duration) var(--oskar-ease),
		clip-path calc(var(--oskar-duration) * 1.25) var(--oskar-ease);
	transition-delay: var(--reveal-delay, 0ms);
}

.oskar-motion [data-reveal="up"]:not(.is-revealed) {
	opacity: 0;
	transform: translateY(var(--wp--custom--motion--distance));
}

/*
 * Image curtain: the picture opens upwards and settles from a slight zoom. The clip sits on
 * the inner <picture>, not on the observed figure: IntersectionObserver ignores fully
 * clipped targets.
 */
.oskar-motion [data-reveal="mask"] > picture {
	display: block;
	transition: clip-path calc(var(--oskar-duration) * 1.25) var(--oskar-ease);
	transition-delay: var(--reveal-delay, 0ms);
}

.oskar-motion [data-reveal="mask"]:not(.is-revealed) > picture {
	clip-path: inset(100% 0 0 0);
}

.oskar-motion [data-reveal="mask"] img {
	transition: transform calc(var(--oskar-duration) * 1.8) var(--oskar-ease);
}

.oskar-motion [data-reveal="mask"]:not(.is-revealed) img {
	transform: scale(1.14);
}

/* Lines draw from the left: eyebrow rule and the purchase timeline */
.oskar-motion [data-reveal="line"]:not(.is-revealed) {
	opacity: 0;
}

.oskar-motion .is-style-eyebrow[data-reveal="line"]::before,
.oskar-motion .oskar-steps[data-reveal="line"]::before {
	transition: transform calc(var(--oskar-duration) * 1.4) var(--oskar-ease), background-size calc(var(--oskar-duration) * 1.4) var(--oskar-ease);
}

.oskar-motion .is-style-eyebrow[data-reveal="line"]:not(.is-revealed)::before {
	background-size: 0 1px;
	transform: scaleX(0);
}

/* Numbered section eyebrows: keep the number, only the rule (background) draws. */
.oskar-motion main .oskar-section .is-style-eyebrow[data-reveal="line"]:not(.is-revealed)::before {
	transform: none;
}

.oskar-motion .oskar-steps[data-reveal="line"]:not(.is-revealed)::before {
	transform: scaleX(0);
}

.oskar-motion .oskar-steps[data-reveal="line"] {
	opacity: 1;
}

/* No transition for elements revealed instantly (already above the viewport) */
.oskar-motion .is-instant,
.oskar-motion .is-instant img,
.oskar-motion .is-instant::before {
	transition: none !important;
}

/* Hero intro on page load: staggered lines, image settles */
.oskar-motion .oskar-hero__media img {
	transform: scale(1.08);
	transition: transform 2.6s var(--oskar-ease);
}

.oskar-motion .oskar-hero__content > * {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.2s var(--oskar-ease), transform 1.2s var(--oskar-ease);
}

.oskar-motion.is-ready .oskar-hero__media img {
	transform: none;
}

.oskar-motion.is-ready .oskar-hero__content > * {
	opacity: 1;
	transform: none;
}

.oskar-motion.is-ready .oskar-hero__content > :nth-child(1) { transition-delay: 150ms; }
.oskar-motion.is-ready .oskar-hero__content > :nth-child(2) { transition-delay: 280ms; }
.oskar-motion.is-ready .oskar-hero__content > :nth-child(3) { transition-delay: 420ms; }
.oskar-motion.is-ready .oskar-hero__content > :nth-child(4) { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}