/* ===== ROS REAL · Objektseite „Erzählung“ (Design v46) =====
   Kopf (section.riesenkopf) und Erzählung (Das Objekt, versetzte Bilder, Die Räume).
   Nur Tokens aus main.css, keine Hex-Werte. */

/* Aufeinanderfolgende Abschnitte teilen sich den vertikalen Abstand. */
.abs + .abs { padding-top: 0; }

.objektwege {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 28px;
	padding: 12px var(--rand) 0;
	font: 400 var(--t3)/1.4 var(--sans);
	color: var(--grau);
}
.objektwege a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.objektwege__spruenge { display: flex; flex-wrap: wrap; gap: 0 20px; }
.objektwege__spruenge:empty { display: none; }
.objekt [data-objekt-abschnitt] { scroll-margin-top: calc(var(--kopf-h, 80px) + 16px); }
.objektwege + .riesenkopf { padding-top: 16px; }
@media (max-width: 767px) {
	.objektwege { font-size: var(--t4); }
	.objektwege__spruenge { width: 100%; gap: 0 16px; }
}

/* ---- Kopf ---- */
.riesenkopf {
	position: relative;
	padding: clamp(34px, 5vw, 74px) var(--rand) clamp(150px, 17vh, 210px);
}

.serifzeile {
	font-family: var(--serif);
	font-size: clamp(17px, 1.5vw, 21px);
	color: var(--grau);
	letter-spacing: .01em;
}

.riese {
	position: relative;
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
	font-size: var(--nam, clamp(48px, 12vw, 176px));
	margin: .06em 0 0;
	white-space: nowrap;
}

.wachsrahmen {
	position: relative;
	margin-top: clamp(16px, 2vw, 30px);
	height: min(68vh, 660px);
}

.wachsbild {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.wachsbild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
}

.wachsbild.leer {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--papier-tief);
}

.wachsbild .folgt {
	font: italic 400 clamp(26px, 2.4vw, 32px)/1.6 var(--serif);
	color: var(--grau);
	opacity: .72;
}

.wachsnote {
	position: absolute;
	right: 0;
	top: calc(100% + 24px);
	font: 400 var(--t4)/1.6 var(--sans);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--grau);
}

.lasche {
	position: absolute;
	left: 0;
	top: calc(100% + 20px);
	z-index: 3;
	width: min(560px, 58%);
	background: var(--papier);
}

.lasche .sz {
	font-family: var(--serif);
	font-size: var(--g6);
	color: var(--grau);
}

.lasche .pr {
	font-family: var(--serif);
	font-size: clamp(26px, 2.6vw, 36px);
	margin-top: 2px;
}

.lasche .pr span {
	font-family: var(--sans);
	font-size: var(--t2);
	color: var(--grau);
}

.lasche .zu {
	font-size: var(--t3);
	color: var(--grau);
	margin-top: 6px;
	line-height: 1.45;
}

/* ---- Kennzahlen ---- */
.zahlenband {
	padding: clamp(34px, 5vw, 64px) var(--rand) 0;
}

.zahlen {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 1px;
	background: var(--linie);
	border-top: 1px solid var(--linie);
	border-bottom: 1px solid var(--linie);
}

.zahlen > div {
	background: var(--papier);
	padding: 26px 20px;
}

.zahlen b {
	display: block;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(26px, 3.4vw, 49px);
	line-height: 1;
}

.zahlen span {
	display: block;
	margin-top: 8px;
}

/* ---- Erzählung ---- */
.zweispalt {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: start;
}

.aussage {
	font-family: var(--serif);
	font-size: clamp(25px, 3.1vw, 44.6px);
	line-height: 1.3;
	max-width: 24ch;
	text-wrap: balance;
}

.aussage.breit {
	max-width: 34ch;
}

.aussage + .text {
	margin-top: var(--block);
}

.text {
	font-family: var(--serif);
	font-size: clamp(18px, 1.55vw, 22px);
	line-height: 1.75;
	max-width: 62ch;
}

.text p + p {
	margin-top: 1em;
}

.zt {
	font-family: var(--serif);
	font-style: italic;
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.6;
	text-wrap: balance;
}

/* ---- Versetzte Bilder ---- */
.versetzt {
	padding: clamp(48px, 7vw, 104px) var(--rand);
}

.vgrid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 18px;
	row-gap: clamp(32px, 4vw, 56px);
	align-items: start;
}

.vbild {
	overflow: hidden;
}

.vbild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.v-a { grid-column: 1 / 7; aspect-ratio: 4 / 3; }
.v-b { grid-column: 7 / 13; aspect-ratio: 3 / 4; margin-top: clamp(34px, 6vw, 96px); }
.v-c { grid-column: 1 / 13; aspect-ratio: 21 / 9; }

/* ---- Grundrisse ---- */
.grundrisse {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: var(--block);
}

/* ---- Tablet & Handy ---- */
@media (max-width: 1023px) {
	.riesenkopf { padding-bottom: 0; }
	.wachsrahmen { position: static; height: auto; margin-top: 14px; }
	.wachsbild { position: relative; width: 100%; height: auto; aspect-ratio: 3 / 2; }
	.wachsbild img { position: static; }
	.wachsbild.leer { aspect-ratio: 3 / 2; }
	.lasche { position: static; width: auto; padding: 16px 0 0; background: none; }
	.wachsnote { position: static; margin-top: 8px; text-align: right; }
}

@media (max-width: 900px) {
	.zweispalt { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 767px) {
	/* Vergleich Prototyp 23.09.: am Handy darf der Name umbrechen, Zeilenabstand 1,02 (magazin.css). */
	.riese { font-size: var(--nam-m, clamp(32px, 12vw, 56px)); line-height: 1.02; white-space: normal; }
	.zahlen > div { padding: 18px 10px; }
	.zahlen span { margin-top: 6px; }
	.vgrid { column-gap: 10px; row-gap: 16px; }
	.v-a { grid-column: 1 / 13; aspect-ratio: 4 / 3; }
	.v-b { grid-column: 1 / 13; aspect-ratio: 4 / 3; margin-top: 0; }
	.v-c { grid-column: 1 / 13; }
	.grundrisse { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 479px) {
	.zahlen { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: none; }
	.zahlen > div {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 13px 0;
		text-align: left;
	}
	.zahlen b { font-size: 26px; }
	.zahlen span { margin-top: 0; text-align: right; }
}

/* ===== K2 – Messrunde 2 Nr 104 (Claude, 22.09.): große Bildschirme wie Prototyp,
   jeder Abschnitt 1900 bzw. 2240 breit und zentriert (auch Kartenband und Graphit). ===== */
@media (min-width: 1700px) {
	article.objekt > section {
		max-width: 1900px;
		margin-inline: auto;
	}
}
@media (min-width: 2200px) {
	article.objekt > section { max-width: 2240px; }
}

/* K2 – Messrunde 2 Nr 96: geringe Höhe (Handy quer) – Objektname höchstens 13 % der Fensterhöhe (Prototyp). */
@media (max-height: 500px) {
	.riese { font-size: min(var(--nam, 120px), 13vh); }
}
@media (max-height: 500px) and (max-width: 767px) {
	.riese { font-size: min(var(--nam-m, 64px), 13vh); }
}

/* ===== K2 – Messrunde 2 Nr 97/99 (Claude, 22.09.) ===== */
.zahlen b { font-size: var(--g4); }
/* Geringe Höhe (Handy quer): Bild links, Preisblock rechts daneben, unten bündig (Prototyp). */
@media (max-height: 500px) {
	.riesenkopf { padding-top: 14px; padding-bottom: 0; }
	.wachsrahmen {
		position: static;
		display: grid;
		grid-template-columns: minmax(0, 1fr) min(300px, 34%);
		gap: 0 clamp(14px, 2vw, 28px);
		align-items: end;
		height: auto;
		margin-top: 10px;
	}
	.wachsbild,
	.wachsbild.leer {
		grid-column: 1;
		grid-row: 1;
		position: relative;
		width: 100%;
		height: min(70svh, 420px);
		aspect-ratio: auto;
	}
	.wachsbild img { height: 100%; }
	.lasche {
		grid-column: 2;
		grid-row: 1;
		position: static;
		width: auto;
		padding: 0;
		background: none;
	}
	.lasche .pr { font-size: 24px; }
	.wachsnote {
		grid-column: 1;
		grid-row: 2;
		position: static;
		margin-top: 8px;
		text-align: right;
	}
}

/* ===== K3 – Bewegung wie Prototyp v46 (Thomas 22.09.) ===== */
/* Riesenname liegt über dem Titelfoto (Unterlängen wie das g ragen ins Bild). */
.riesenkopf .riese { z-index: 4; }
/* Titelfoto wächst von 88 % auf 100 % (objekt.js), das Bild darin 1,06 → 1,0. */
.wachsbild img {
	transform: scale(var(--innen, 1));
	transition: transform .5s ease;
}
/* Einleitung färbt sich beim Scrollen Wort für Wort ein (Grau 38 % → Tinte, Auftrag v44). */
.aussage .w {
	color: color-mix(in srgb, var(--grau) 38%, transparent);
	transition: color .35s ease;
}
.aussage .w.an { color: var(--tinte); }
/* Parallaxe der versetzten Bilder läuft über transform (objekt.js). */
.vbild[data-par] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
	.wachsbild img { transition: none; }
}

/* ===== K3 – Galerie (Wunsch Thomas 22.09.) ===== */
/* Auslöser zeigen, dass sie sich öffnen lassen. */
[data-galerie] { cursor: zoom-in; }
[data-galerie]:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
html.lbox-offen { overflow: hidden; }
/* Vollbild in Nachtblau, Bild mittig, Kopfzeile mit Zähler und „Schließen“, feine Pfeile links/rechts. */
.lbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	background: color-mix(in srgb, var(--blau) 97%, transparent);
	color: var(--papier);
}
.lbox[hidden] { display: none; }
.lbox.sichtbar { animation: lbox-ein .25s ease; }
@keyframes lbox-ein { from { opacity: 0; } to { opacity: 1; } }
body.admin-bar .lbox { top: var(--wp-admin--admin-bar--height, 32px); }
.lbox__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 var(--rand);
	min-height: 64px;
}
.lbox__zahl {
	margin: 0;
	font: 400 var(--t4)/1.6 var(--sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--papier) 72%, transparent);
}
.lbox__zu {
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	font: 400 var(--t2)/1 var(--sans);
	color: var(--papier);
	cursor: pointer;
}
.lbox__zu:hover { text-decoration: underline; text-underline-offset: var(--unterstrich-abstand); text-decoration-thickness: 1px; }
.lbox__buehne {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 0 clamp(16px, 7vw, 110px) clamp(16px, 4vh, 48px);
	touch-action: pan-y;
}
.lbox__bild {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transition: opacity .25s ease;
	user-select: none;
}
.lbox__bild.an { opacity: 1; }
.lbox__bild[hidden], .lbox__status[hidden], .lbox__erneut[hidden] { display: none; }
.lbox__status {
	max-width: 32rem;
	padding: 24px;
	text-align: center;
	font: 400 var(--t2)/1.6 var(--sans);
}
.lbox__status p { margin: 0; }
.lbox__erneut {
	min-width: 44px;
	min-height: 44px;
	margin-top: 16px;
	padding: 8px 16px;
	border: 1px solid currentColor;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
.lbox__erneut:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.lbox__pfeil {
	position: absolute;
	top: 50%;
	width: 56px;
	height: 88px;
	margin-top: -44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: color-mix(in srgb, var(--papier) 72%, transparent);
}
.lbox__pfeil::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 16px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translate(-65%, -50%) rotate(45deg);
}
.lbox__pfeil--zurueck { left: clamp(4px, 2vw, 32px); }
.lbox__pfeil--zurueck::before { transform: translate(-35%, -50%) rotate(-135deg); }
.lbox__pfeil--vor { right: clamp(4px, 2vw, 32px); }
.lbox__pfeil:hover { color: var(--papier); }
.lbox__pfeil[hidden] { display: none; }
@media (max-width: 767px) {
	.lbox__buehne { padding: 0 0 72px; }
	.lbox__pfeil { top: auto; bottom: 8px; margin-top: 0; height: 56px; }
	.lbox__kopf { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
	.lbox.sichtbar { animation: none; }
	.lbox__bild { transition: none; }
}

/* ===== K3 – Einblenden beim Scrollen (assets/js/einblenden.js, Prototyp v46) ===== */
html.rv [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .75s ease, transform .75s cubic-bezier(.16, .84, .26, 1);
}
html.rv [data-reveal].an { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html.rv [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ===== Vergleich Prototyp 23.09. (Handy) =====
   Der Prototyp setzt p{margin:0}; main.css gibt jedem Absatz 1em darunter. Auf der Objektseite
   entstanden dadurch Lücken (Lasche: Nr.-Zeile, Preis, Hinweis; „Das Objekt“, Betreuung).
   :where() hält die Spezifität bei 0,0,1 – jede Klassenregel mit eigenem Abstand gewinnt weiter. */
:where(.single-immobilie) p { margin: 0; }
:where(.single-immobilie) .text p + p { margin-top: 1em; }
/* Zählerzeile „Aufnahme 1 von …“ bleibt am Handy direkt beim zugehörigen Bild. */
@media (max-width: 1023px) and (min-height: 501px) {
	.wachsrahmen { display: flex; flex-direction: column; }
	.wachsrahmen > .wachsbild { order: 1; }
	.wachsrahmen > .wachsnote { order: 2; margin: 8px 0 0; }
	.wachsrahmen > .lasche { order: 3; }
}