/* ===== ROS REAL · Inhaltsseiten-Gerüst (Design v46, Auftrag BO) =====
   Verkaufen & Vermieten, Unternehmen, Kontakt, Widerruf, Beauftragen.
   Nur Tokens aus main.css, keine Hex-Werte.

   Wiederverwendet (hier nicht neu gebaut):
   - .einleitung und .flow (Schrift) kommen aus main.css; hier nur Abstände/Breite.
   - section.karteband, .mhinweis und .lagevermerk kommen aus karte.css.

   Scoping: .serifzeile, .zt, .zweispalt, .flow, .name, .einleitung, .drei sind auf
   der Objektseite in anderer Ausprägung belegt. Sie gelten hier nur innerhalb des
   Inhaltsseiten-Rahmens .seite. Das Raster von div.zwei greift nur, wenn eine
   Seitenleiste #preisblock direkt darin liegt (formular.css nutzt .zwei für zwei
   Formularfelder). */

/* ===== Seitenrahmen (max. 1440 px wie der Prototyp main.seite) ===== */
.seite {
	max-width: 1440px;
	margin: 0 auto;
}

/* ===== Hauptspalte + Seitenleiste ===== */
.zwei:has(> #preisblock) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 72px;
	padding: 44px var(--rand) 0;
	align-items: start;
}
@media (max-width: 1023px) {
	.zwei:has(> #preisblock) {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
		padding-top: 26px;
	}
}
.haupt {
	min-width: 0;
}

/* ===== Einspalter ===== */
.einspalter {
	padding: 44px var(--rand) 0;
}

/* ===== Kopf ===== */
.seite .serifzeile {
	margin: 26px 0 0;
	font-family: var(--serif);
	font-size: clamp(19px, 1.9vw, 26px);
	line-height: 1.3;
	color: var(--grau);
}
@media (max-width: 767px) {
	.seite .serifzeile {
		margin-top: 16px;
	}
}
/* h1.name: Größe --g2 und Zeilenhöhe 1.05 kommen aus main.css (h1). */
.seite h1.name {
	margin: 6px 0 0;
	text-wrap: balance;
}
.seite .einleitung {
	margin: 34px 0 0;
	max-width: 760px;
	text-wrap: pretty;
}
@media (max-width: 767px) {
	.seite .einleitung {
		margin-top: 22px;
	}
}

/* ===== Abschnitte und Zwischentitel ===== */
.abschnitt {
	margin-top: 76px;
}
@media (max-width: 767px) {
	.abschnitt {
		margin-top: 44px;
	}
}
.seite .zt {
	margin: 0 0 26px;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(29px, 2.7vw, 38px);
	line-height: 1.05;
	color: var(--tinte);
}
.lageband .zt {
	margin-bottom: 36px;
}

/* ===== Fließtext ===== */
.seite .flow {
	max-width: 760px;
	text-wrap: pretty;
}
.seite .flow p {
	margin: 0 0 20px;
}
.seite .flow p:last-child {
	margin-bottom: 0;
}
.seite .flow .liste {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 24px;
}
.seite .flow .liste span {
	font: 400 var(--g5)/1.72 var(--serif);
}

/* Abschluss-Sätze nach dem Drei-Spalten-Block („Wir freuen uns …“). */
.seite .abschnitt > .flow {
	margin: 0;
}
.seite .drei + .flow {
	margin-top: 30px;
	font-style: italic;
}
.seite .flow + .flow {
	margin-top: 14px;
}

/* ===== Zweispalter (Zwischentitel + Fließtext) ===== */
.seite .zweispalt {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 56px;
	align-items: start;
}
.seite .zweispalt .zt {
	margin: 0;
}
@media (max-width: 1023px) {
	.seite .zweispalt {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
}

/* ===== Schritte ===== */
.schritte {
	display: flex;
	flex-direction: column;
}
.schritt {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 20px;
	padding: 22px 0;
	border-top: 1px solid var(--linie);
	align-items: start;
}
.schritt:last-child {
	border-bottom: 1px solid var(--linie);
}
.schritt .nr {
	font-family: var(--serif);
	font-size: 28px;
	line-height: 1.65;
	color: var(--grau);
	font-variant-numeric: lining-nums tabular-nums;
}

/* ===== Provisions-Tabelle ===== */
.ptab {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t2);
}
.ptab th,
.ptab td {
	text-align: left;
	padding: 14px 16px 14px 0;
	border-bottom: 1px solid var(--linie);
	vertical-align: baseline;
	font-weight: 400;
}
.ptab thead th {
	font: 400 var(--t4)/1.65 var(--sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--grau);
	padding-bottom: 10px;
}
.ptab tbody th {
	font: 400 19px/1.65 var(--serif);
	color: var(--tinte);
}
@media (max-width: 767px) {
	.ptab {
		display: block;
		width: 100%;
	}
	.ptab thead {
		display: none;
	}
	.ptab tbody,
	.ptab tr,
	.ptab td,
	.ptab th {
		display: block;
		width: auto;
	}
	.ptab tr {
		padding: 16px 0;
		border-bottom: 1px solid var(--linie);
	}
	.ptab th[scope="row"] {
		font: 400 23px/1.65 var(--serif);
		padding: 0 0 8px;
		text-align: left;
	}
	.ptab td {
		padding: 6px 0;
	}
	.ptab td::before {
		content: attr(data-label);
		display: block;
		font: 400 var(--t4)/1.65 var(--sans);
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--grau);
		margin-bottom: 2px;
	}
}

/* ===== Provisions-Tabelle, ruhige Fassung (23.09.): Betrag inkl. USt, netto klein darunter ===== */
.ptab--preis td .betrag {
	display: block;
	color: var(--tinte);
}
.ptab--preis td .netto {
	display: block;
	margin-top: 2px;
	font: 400 var(--t3)/1.6 var(--sans);
	color: var(--grau);
}

/* ===== Befugnis-/Kleindruck-Zeile ===== */
.befugnis {
	margin-bottom: 0; /* Vergleich Prototyp 23.09. */
	margin-top: 44px;
	padding-top: 18px;
	border-top: 1px solid var(--linie);
	font: 400 var(--t3)/1.8 var(--sans);
	color: var(--grau);
}

/* ===== Kontaktzeilen (Etikett + Link, jede Zeile eigene 44-px-Fläche) ===== */
.kzeilen {
	display: flex;
	flex-direction: column;
}
.kzeilen .kzeile {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	min-height: 44px;
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid var(--linie);
	font: 400 var(--t2)/1.65 var(--sans);
}
.kzeilen .kzeile:last-child {
	border-bottom: 0;
}
.kzeilen .kzeile > span {
	color: var(--grau);
	flex: none;
}
.kzeilen .kzeile a {
	color: var(--blau);
	text-align: right;
}

/* ===== Drei Spalten („Wie wir arbeiten“) ===== */
.seite .drei {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}
.seite .drei .spalte {
	border-top: 1px solid var(--linie);
	padding-top: 20px;
}
.seite .drei .spalte .flow {
	font-size: 19px;
	margin: 0; /* Vergleich Prototyp 23.09. */
}
@media (max-width: 767px) {
	.seite .drei {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
}

/* ===== Kennzahlen ===== */
.kennz {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 44px;
}
.kennz > div {
	padding: 24px 22px;
	text-align: center;
	border-left: 1px solid var(--linie);
}
.kennz > div:first-child {
	border-left: 0;
}
.kennz b {
	display: block;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(28px, 2.9vw, 40px);
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
}
.kennz span {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--grau);
}
@media (max-width: 767px) {
	.kennz {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		margin-top: 26px;
		border-top: 1px solid var(--linie);
		border-bottom: 1px solid var(--linie);
	}
	.kennz > div {
		padding: 18px 10px;
	}
	.kennz b {
		font-size: clamp(26px, 7.4vw, 30px);
	}
	.kennz span {
		margin-top: 6px;
		font-size: 12px;
		line-height: 1.35;
	}
}
@media (max-width: 359px) {
	.kennz {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		border-bottom: 0;
	}
	.kennz > div {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 13px 0;
		text-align: left;
		border-left: 0;
		border-bottom: 1px solid var(--linie);
	}
	.kennz b {
		font-size: 26px;
	}
	.kennz span {
		margin-top: 0;
		text-align: right;
	}
}

/* ===== Team (zwei Personen, Foto-Fläche „Foto folgt“) ===== */
.team {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 56px);
}
.team > div {
	display: grid;
	grid-template-columns: clamp(200px, 17vw, 300px) minmax(0, 1fr);
	column-gap: clamp(18px, 2vw, 32px);
	align-items: start;
}
.team .pfoto {
	grid-column: 1;
	grid-row: 1;
	aspect-ratio: 4 / 5;
	align-self: start;
	background: var(--papier-tief);
	display: flex;
	align-items: flex-end;
	padding: 14px;
}
.team .pfoto em {
	font: italic 400 12px/1.6 var(--serif);
	color: var(--grau);
}
.team .pkopf {
	grid-column: 2;
	grid-row: 1;
}
.team .pname {
	margin: 0;
	font-family: var(--serif);
	font-size: 30px;
	line-height: 1.15;
	color: var(--tinte);
}
.team .prolle {
	margin: 4px 0 0;
	font: 400 var(--t3)/1.65 var(--sans);
	color: var(--grau);
}
.team .ptext {
	margin: 16px 0 0;
	grid-column: 2;
	grid-row: 2;
	font: 400 19px/1.7 var(--serif);
	color: var(--tinte);
}
.team .kzeilen {
	margin: 22px 0 0;
	grid-column: 2;
	grid-row: 3;
}
@media (max-width: 1023px) {
	.team {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 767px) {
	.team > div {
		grid-template-columns: 45% minmax(0, 1fr);
	}
	.team .pfoto {
		grid-column: 1;
		grid-row: 1;
	}
	.team .pkopf {
		grid-column: 2;
		grid-row: 1;
	}
	.team .ptext {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 16px;
	}
	.team .kzeilen {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 16px;
	}
}

/* ===== Seitenleiste (Ansprechpartner) ===== */
#preisblock {
	position: sticky;
	top: calc(64px + 56px);
	display: flex;
	flex-direction: column;
	gap: 28px;
	background: var(--papier-tief);
	padding: 34px 30px;
}
@media (max-width: 1023px) {
	#preisblock {
		position: static;
	}
}
#preisblock .label {
	margin: 0 0 10px;
	font: 400 13px/1.65 var(--sans);
	color: var(--grau);
}
#preisblock .aname {
	margin: 0;
	font: 400 26px/1.2 var(--serif);
	color: var(--tinte);
}
#preisblock .zusatz {
	margin: 8px 0 0;
	font: 400 13px/1.7 var(--sans);
	color: var(--grau);
}
#preisblock .knopf {
	display: flex;
	width: 100%;
}
#preisblock .lnks {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
#preisblock .lnks a {
	font: 400 var(--t3)/1.65 var(--sans);
	color: var(--grau);
}

/* ===== „Das Büro“ (Abschnitt vor Karte und Lageband) ===== */
.abschnitt.buehro {
	margin-top: 0;
	padding: 44px var(--rand) 30px;
}

/* ===== Stein-Übergang vor der Karte ===== */
.steinvor {
	height: clamp(28px, 4vw, 56px);
	background: var(--stein);
}

/* ===== Lageband (Stein, drei Spalten) ===== */
.lageband {
	background: var(--stein);
	color: var(--tinte);
}
.lageband .umgeb {
	max-width: 1440px;
	margin: 0 auto;
	padding: 54px var(--rand) 70px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.lageband .lbl {
	margin: 0 0 8px;
	font: 400 var(--t3)/2 var(--sans);
	color: var(--grau);
}
.lageband .werte {
	margin: 0;
	font: 400 var(--t2)/2 var(--sans);
	color: var(--tinte);
	font-variant-numeric: lining-nums tabular-nums;
}
@media (max-width: 1023px) {
	.lageband .umgeb {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		padding: 30px var(--rand) 40px;
	}
}
@media (max-width: 767px) {
	.lageband .umgeb {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
}

/* ===== Handy-Leiste unten ===== */
.mbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--papier);
	border-top: 1px solid var(--linie);
	padding: 12px var(--rand) calc(12px + env(safe-area-inset-bottom));
}
.mbar .knopf {
	width: auto;
	padding: 14px 22px;
}
.mbar .lnk {
	font: 400 var(--t3)/1.65 var(--sans);
	color: var(--blau);
}
@media (max-width: 1023px) {
	.mbar {
		display: flex;
	}
	body.hasbar {
		padding-bottom: 88px;
	}
}

/* ===== Abschluss (Knopf + Textlinks) ===== */
.abschluss {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	padding: 54px var(--rand) 80px;
}
.abschluss .knopf {
	width: auto;
	padding: 16px 30px;
}
.abschluss a:not(.knopf) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font: 400 var(--t1)/1.65 var(--sans);
	color: var(--blau);
}
.abschluss__links {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

/* K2 – Messrunde 2 Nr 134: Porträtfotos (Prototyp fotos/team), Format 4 : 5, randlos. */
.team .pfoto--bild {
	padding: 0;
	overflow: hidden;
}
.team .pfoto--bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== K2 Paket 4 – Inhaltsseiten wie Prototyp (Messrunde 2 Nr 126–137) ===== */
/* Nr 126: Schritte – Text ohne Absatzabstand, am Handy Nummer 40 breit, Abstand 14. */
.schritt .flow { margin: 0; }
@media (max-width: 767px) {
	.schritt { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
}
/* Seitenleiste unter dem Inhalt (unter 1024) mit dem Abstand des Prototyps. */
@media (max-width: 1023px) {
	.zwei:has(> #preisblock) { row-gap: 106px; }
}
/* Nr 133/139 (Handy): Kontaktzeilen Etikett über dem Wert. */
@media (max-width: 767px) {
	.kzeilen .kzeile { flex-direction: column; gap: 4px; }
	.kzeilen .kzeile a,
	.kzeilen .kzeile > span:last-child { text-align: left; }
}
/* Nr 135/136: Team wie Prototyp – beide Personen im selben Raster (Subgrid, gleiche Höhen),
   Foto 4 : 5 links über alle Zeilen, rechts Name, Rolle, Text, Kontaktzeilen (unten bündig). */
.team {
	grid-template-rows: auto auto 1fr auto;
	gap: clamp(28px, 3vw, 56px);
}
.team > div {
	grid-row: span 4;
	grid-template-rows: subgrid;
	grid-template-columns: clamp(200px, 17vw, 300px) minmax(0, 1fr);
	column-gap: clamp(18px, 2vw, 32px);
	row-gap: 0;
}
.team .pfoto { grid-column: 1; grid-row: 1 / span 4; }
.team .pkopf { display: contents; }
.team .pname { grid-column: 2; grid-row: 1; margin: 0; align-self: start; }
.team .prolle { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
.team .ptext { grid-column: 2; grid-row: 3; margin: 0; align-self: start; }
.team .kzeilen { grid-column: 2; grid-row: 4; margin: 0; align-self: end; }
@supports not (grid-template-rows: subgrid) {
	.team > div { grid-template-rows: auto auto minmax(180px, auto) auto; }
}
@media (max-width: 1023px) {
	.team { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.team > div { grid-row: auto; grid-template-rows: auto auto auto auto; }
}
@media (max-width: 767px) {
	.team > div {
		grid-template-columns: 45% minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		column-gap: 16px;
	}
	.team .pkopf { display: flex; flex-direction: column; grid-column: 2; grid-row: 1; align-self: start; }
	.team .pfoto { grid-column: 1; grid-row: 1; }
	.team .pname,
	.team .prolle { grid-column: auto; grid-row: auto; }
	.team .prolle { margin: 4px 0 0; }
	.team .ptext { margin: 16px 0 0; grid-column: 1 / -1; grid-row: 2; }
	.team .kzeilen { margin: 16px 0 0; grid-column: 1 / -1; grid-row: 3; align-self: start; }
}

/* K2 Paket 4 – Nachmessung: */
/* Beratungsliste: .liste der Übersicht (padding unten) gilt hier nicht; Schrift wie Fließtext. */
.seite .flow .liste { padding: 0; }
.seite .flow .liste span { font-size: clamp(19px, 1.45vw, 20px); }
/* Team ab 1024: Zeilenabstand des Subgrids kommt vom Team-Raster (Prototyp, 28–56 px). */
@media (min-width: 1024px) {
	.team > div { row-gap: normal; }
}
/* „Wie wir arbeiten“: drei Spalten erst ab 901 px (Prototyp). */
@media (max-width: 900px) {
	.seite .drei { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* Lageband: ab 768 drei Spalten nebeneinander (Prototyp), Titelabstand unter 1024 24 px. */
@media (min-width: 768px) and (max-width: 1023px) {
	.lageband .umgeb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lageband h2.zt { margin-bottom: 24px; }
}
@media (max-width: 767px) {
	.lageband h2.zt { margin-bottom: 24px; }
}
/* Kontakt: Formular-Seitenleiste unter 1024 mit dem knappen Abstand des Prototyps. */
@media (max-width: 1023px) {
	.zwei.kontakt:has(> #preisblock) { row-gap: 34px; }
}

/* Thomas 23.09. („Texte schwimmen, kein schöner Abstand nach unten“): Wie im Prototyp
   (Suchauftrag, Verkaufen & Vermieten: <div style="height:88px"> nach dem letzten Abschnitt)
   endet die Hauptspalte mit 88 px Luft vor der Seitenleiste bzw. dem Fuß. */
.seite .zwei:not(.kontakt) > .haupt::after {
	content: "";
	display: block;
	height: 88px;
}
/* Rücktritt: die Belehrung ist länger als das Formular – Seite endet sonst direkt am Fuß. */
/* :has(> #preisblock) hebt die Spezifität über die Grundregel .zwei:has(> #preisblock).
   Nur ab 1024: am Handy steht das Formular unten und bringt seinen Abstand selbst mit. */
@media (min-width: 1024px) {
	main > .zwei.kontakt:last-child:has(> #preisblock) { padding-bottom: 88px; }
}

/* Thomas 23.09.: Die Seitenleiste hält immer Abstand zum nächsten Element darunter (Kartenband,
   Stein-Übergang, Fuß) – auch beim Mitlaufen (sticky bleibt innerhalb des Randes stehen). */
#preisblock { margin-bottom: clamp(56px, 6vw, 88px); }