/* ===== ROS REAL · Seite Beauftragen (Design v46, Auftrag BP1) =====
   Nur für die Seite Beauftragen. Der Dialog (BP2) folgt unter dem Kopfkommentar
   am Ende dieser Datei. Nur Tokens aus main.css, keine Hex-Werte. */

/* ===== Einstieg: Knopf „Beauftragung starten“ ===== */
.bstart {
	margin-top: 44px;
}
.bstart__knopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}
.bstart .dazu {
	margin: 14px 0 0;
	font: 400 var(--t3)/1.7 var(--sans);
	color: var(--grau);
}
.bstart .jshinweis {
	margin: 14px 0 0;
	font: 400 var(--t3)/1.7 var(--sans);
	color: var(--grau);
}
.bstart .jshinweis a {
	color: var(--blau);
}

/* ===== Provisions-Tabelle: Abstand zum Fließtext ===== */
.haupt .ptab {
	margin: 26px 0;
}

/* ===== Seitenleiste „Unterlagen“ ===== */
#preisblock .sltitel {
	margin: 0 0 8px;
	font: 400 var(--t3)/1.65 var(--sans);
	color: var(--grau);
}
#preisblock .slzeile {
	margin: 0;
	font: 400 var(--t3)/1.7 var(--sans);
	color: var(--tinte);
}
#preisblock .sld {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--linie);
}
#preisblock .sld > span:first-child {
	font: 400 var(--t2)/1.5 var(--sans);
	color: var(--tinte);
	min-width: 0;
}
#preisblock .sld a,
#preisblock .sld .folgt {
	flex: none;
	font: 400 var(--t3)/1.5 var(--sans);
	color: var(--grau);
	white-space: nowrap;
}
#preisblock .sld a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}
#preisblock .slalle {
	margin: 14px 0 0;
	font: 400 var(--t3)/1.65 var(--sans);
	color: var(--grau);
}
#preisblock .slhinweis {
	margin: 18px 0 0;
	font: 400 var(--t4)/1.7 var(--sans);
	color: var(--grau);
}

/* === Dialog (BP2) === */
/* Nur Tokens aus main.css, keine Hex-Werte. Maße nach Bauanleitung „Beauftragen · Dialog“. */

/* --- Fläche: schmaler als „Mehr Filter“ (760) und als der Standard (720). --- */
#beauftragen-dialog .blattd__flaeche {
	width: min(680px, 100%);
}

/* --- Kopf: Titel links, Schließen rechts, Teile-Leiste als eigene Zeile --- */
#beauftragen-dialog .kopfd {
	flex-wrap: wrap;
	align-items: flex-start;
}
#beauftragen-dialog .kopftext {
	min-width: 0;
}
#beauftragen-dialog .schrittzeile {
	margin: 0 0 4px;
	font: 400 var(--t4)/1.65 var(--sans);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--grau);
}
#beauftragen-dialog .teile {
	display: flex;
	flex-wrap: nowrap;
	gap: 0 14px;
	align-items: baseline;
	margin: 6px 0 0;
	flex: 1 1 100%;
}
#beauftragen-dialog .teile button {
	background: none;
	border: 0;
	padding: 10px 0;
	min-height: 44px;
	font: inherit;
	font-size: var(--t3);
	color: var(--grau);
	cursor: pointer;
	white-space: nowrap;
}
#beauftragen-dialog .teile button.besucht,
#beauftragen-dialog .teile button:hover {
	color: var(--tinte);
}
#beauftragen-dialog .teile button.an {
	color: var(--tinte);
	text-decoration: underline;
	text-underline-offset: var(--unterstrich-abstand);
	text-decoration-thickness: 1px;
}
#beauftragen-dialog .teile .trenner {
	color: var(--linie);
	font-size: var(--t3);
}
#beauftragen-dialog .teile .fehltmarke {
	font-size: var(--t4);
	color: var(--fehler);
}

/* --- Inhalt: Abschnitte, Etiketten, Gruppen --- */
#beauftragen-dialog .az {
	margin: 0 0 16px;
	font: 400 var(--g5)/1.2 var(--serif);
	font-style: italic;
	color: var(--tinte);
}
#beauftragen-dialog .az:focus,
#beauftragen-dialog .az:focus-visible {
	outline: none;
}
#beauftragen-dialog .wgtitel {
	margin: 18px 0 12px;
	font: 400 var(--g5)/1.2 var(--serif);
	color: var(--tinte);
}
#beauftragen-dialog .einl {
	margin: 14px 0 0;
	max-width: 62ch;
	font: 400 var(--t2)/1.7 var(--sans);
	color: var(--tinte);
}
#beauftragen-dialog .unverbindlich {
	margin: -4px 0 18px;
	max-width: 62ch;
	font: 400 var(--t3)/1.6 var(--sans);
	color: var(--grau);
}
/* Die Einleitung der Zusammenfassung leitet ihren Arbeitsblock ein. */
#beauftragen-dialog .schrittblock > .einl + .teilblock,
#beauftragen-dialog .schrittblock > .einl + #b-zusammen {
	margin-top: 32px;
}
#beauftragen-dialog .gz {
	margin: 16px 0 6px;
	font: 400 var(--t4)/1.65 var(--sans);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--grau);
}
#beauftragen-dialog .gz .pflicht {
	letter-spacing: .04em;
	text-transform: none;
}
#beauftragen-dialog .gwhinweis {
	margin: 0 0 10px;
	max-width: 62ch;
	font: 400 var(--t4)/1.65 var(--sans);
	color: var(--grau);
}
#beauftragen-dialog .sammel {
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--fehler);
	color: var(--fehler);
	font-size: var(--t3);
}
#beauftragen-dialog .sammel[hidden] {
	display: none;
}
#beauftragen-dialog .fehler {
	margin: 6px 0 0;
	font: 400 var(--t4)/1.6 var(--sans);
	color: var(--fehler);
}

/* --- Kästchen-Gruppen (kgrid) und Schnellwahl --- */
#beauftragen-dialog .kgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
	gap: 0 20px;
}
#beauftragen-dialog .kgrid.bezirke {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
#beauftragen-dialog .kgrid .haken {
	margin: 0;
	min-height: 44px;
	align-items: center;
	font-size: var(--t2);
}
#beauftragen-dialog .kgrid .haken span {
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}
#beauftragen-dialog .haken {
	font-size: var(--t2);
}
#beauftragen-dialog .schnell {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}
#beauftragen-dialog .schnell button {
	background: none;
	border: 0;
	padding: 10px 2px;
	min-height: 44px;
	font: inherit;
	font-size: var(--t3);
	color: var(--grau);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: var(--unterstrich-abstand);
	text-decoration-thickness: 1px;
}
#beauftragen-dialog .schnell button:hover {
	color: var(--tinte);
}

/* --- Gewichtete Merkmale (Muss · Wunsch) --- */
#beauftragen-dialog .gwliste {
	display: block;
	border-top: 1px solid var(--linie);
}
#beauftragen-dialog .gwliste .gwz {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--linie);
	min-height: 52px;
	padding: 4px 0;
}
#beauftragen-dialog .gwliste .haken {
	margin: 0;
	min-height: 44px;
	align-items: center;
	font-size: var(--t2);
	padding: 4px 0;
	flex: 1 1 auto;
}
#beauftragen-dialog .gwliste .haken span {
	white-space: normal;
	overflow-wrap: break-word;
}
#beauftragen-dialog .gw {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex: 0 0 auto;
	visibility: hidden;
}
#beauftragen-dialog .gwz.an .gw {
	visibility: visible;
}
#beauftragen-dialog .gw button {
	background: none;
	border: 0;
	padding: 10px 0;
	min-height: 44px;
	font: inherit;
	font-size: var(--t3);
	color: var(--grau);
	cursor: pointer;
	white-space: nowrap;
}
#beauftragen-dialog .gw button.an {
	color: var(--tinte);
	text-decoration: underline;
	text-underline-offset: var(--unterstrich-abstand);
	text-decoration-thickness: 1px;
}
#beauftragen-dialog .gw button:hover {
	color: var(--tinte);
}
#beauftragen-dialog .gw .trenner {
	color: var(--linie);
	font-size: var(--t3);
}

/* --- Felder mit Einheit und Datumsauswahl --- */
#beauftragen-dialog .zeilen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0 14px;
}
#beauftragen-dialog .mitEinheit {
	position: relative;
	display: block;
}
#beauftragen-dialog .mitEinheit input {
	padding-right: 96px;
}
#beauftragen-dialog .mitEinheit .eh {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--t3);
	color: var(--grau);
	pointer-events: none;
}
#beauftragen-dialog .zaehler {
	margin: 6px 0 0;
	font: 400 var(--t4)/1.6 var(--sans);
	color: var(--grau);
}
#beauftragen-dialog .bdatum {
	position: relative;
	max-width: 320px;
}
#beauftragen-dialog .bdatum .dknopf {
	background: none;
	border: 0;
	padding: 10px 2px;
	min-height: 44px;
	font: inherit;
	font-size: var(--t3);
	color: var(--grau);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: var(--unterstrich-abstand);
	text-decoration-thickness: 1px;
}
#beauftragen-dialog .bdatum .dknopf:hover {
	color: var(--tinte);
}
#beauftragen-dialog .bkal {
	position: absolute;
	left: 0;
	top: calc(100% + 8px);
	z-index: 30;
	width: min(340px, 100%);
	background: var(--papier);
	box-shadow: 0 10px 36px rgba(22, 32, 58, .26);
	padding: 14px;
}
#beauftragen-dialog .bkal[hidden] {
	display: none;
}
#beauftragen-dialog .bkal .kkopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
#beauftragen-dialog .bkal .kkopf b {
	font: 400 18px/1.4 var(--serif);
	color: var(--tinte);
}
#beauftragen-dialog .bkal .kkopf button {
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--t3);
	color: var(--grau);
	cursor: pointer;
	min-height: 44px;
	padding: 0 2px;
	text-decoration: underline;
	text-underline-offset: var(--unterstrich-abstand);
	text-decoration-thickness: 1px;
}
#beauftragen-dialog .bkal .kkopf button:hover {
	color: var(--tinte);
}
#beauftragen-dialog .bkal .kwoche,
#beauftragen-dialog .bkal .ktage {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
#beauftragen-dialog .bkal .kwoche span {
	font-size: var(--t4);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--grau);
	text-align: center;
	padding-bottom: 6px;
}
#beauftragen-dialog .bkal .ktage button {
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--t2);
	color: var(--tinte);
	min-height: 44px;
	cursor: pointer;
	font-variant-numeric: lining-nums tabular-nums;
}
#beauftragen-dialog .bkal .ktage button:hover {
	background: var(--papier-tief);
}
#beauftragen-dialog .bkal .ktage button.an {
	background: var(--blau);
	color: var(--papier);
}
#beauftragen-dialog .bkal .ktage button[disabled] {
	color: var(--linie);
	cursor: default;
}
#beauftragen-dialog .bkal .ktage span {
	min-height: 44px;
}

/* --- Unterlagenliste und Zustimmung --- */
#beauftragen-dialog .dliste {
	border-top: 1px solid var(--linie);
	margin-top: 18px;
}
#beauftragen-dialog .dliste .dz {
	border-bottom: 1px solid var(--linie);
	padding: 14px 0;
}
#beauftragen-dialog .dliste .dkopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
#beauftragen-dialog .dliste .dtitel {
	font: 400 var(--t1)/1.5 var(--sans);
	color: var(--tinte);
}
#beauftragen-dialog .dliste .dwege {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}
#beauftragen-dialog .dliste .dwege button,
#beauftragen-dialog .dliste .dwege a {
	background: none;
	border: 0;
	padding: 10px 2px;
	min-height: 44px;
	font: inherit;
	font-size: var(--t3);
	color: var(--grau);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: var(--unterstrich-abstand);
	text-decoration-thickness: 1px;
	white-space: nowrap;
}
#beauftragen-dialog .dliste .dwege button:hover,
#beauftragen-dialog .dliste .dwege a:hover {
	color: var(--tinte);
}
#beauftragen-dialog .dliste .dwege .folgt {
	font-size: var(--t3);
	line-height: 1.6;
	color: var(--grau);
	padding: 10px 2px;
	min-height: 44px;
	white-space: nowrap;
}
#beauftragen-dialog .dliste .dtext {
	font: 400 var(--t2)/1.75 var(--sans);
	color: var(--grau);
	margin: 12px 0 4px;
	max-width: 64ch;
}
#beauftragen-dialog .dliste .dtext[hidden] {
	display: none;
}
#beauftragen-dialog .dliste .dtext ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: dv;
}
#beauftragen-dialog .dliste .dtext ol li {
	counter-increment: dv;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 12px;
	padding: 10px 0;
}
#beauftragen-dialog .dliste .dtext ol li::before {
	content: counter(dv) ".";
	font-family: var(--serif);
	font-size: 18px;
}
#beauftragen-dialog .dliste .dtext b {
	font-weight: 400;
	font-style: italic;
	color: var(--tinte);
}
#beauftragen-dialog .alle {
	margin: 16px 0 0;
	font: 400 var(--t3)/1.65 var(--sans);
	color: var(--grau);
}
#beauftragen-dialog .alle .folgt {
	color: var(--grau);
}
#beauftragen-dialog .zust {
	margin-top: 24px;
	padding-top: 14px;
	border-top: 1px solid var(--linie);
}
#beauftragen-dialog .zust.gesperrt .haken,
#beauftragen-dialog .zust.gesperrt .haken span {
	color: var(--grau);
}
#beauftragen-dialog .zust.gesperrt .haken input {
	opacity: .5;
}

/* --- Zusammenfassung --- */
#beauftragen-dialog .zblock {
	border-top: 1px solid var(--linie);
	padding: 18px 0 6px;
}
#beauftragen-dialog .zblock .zk {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
}
#beauftragen-dialog .zblock .zk h3 {
	margin: 0 0 10px;
	font: 400 var(--g5)/1.2 var(--serif);
	font-style: italic;
	color: var(--tinte);
}
#beauftragen-dialog .zblock .aendern {
	background: none;
	border: 0;
	padding: 10px 2px;
	min-height: 44px;
	font: inherit;
	font-size: var(--t3);
	color: var(--grau);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: var(--unterstrich-abstand);
	text-decoration-thickness: 1px;
}
#beauftragen-dialog .zblock .aendern:hover {
	color: var(--tinte);
}
#beauftragen-dialog .zzeile {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 9px 0;
	border-top: 1px solid var(--linie);
}
#beauftragen-dialog .zzeile .zl {
	font: 400 var(--t3)/1.5 var(--sans);
	color: var(--grau);
	flex: 0 0 auto;
	max-width: 45%;
}
#beauftragen-dialog .zzeile .zw {
	font: 400 var(--t2)/1.5 var(--sans);
	color: var(--tinte);
	text-align: right;
}
/* Freitext bleibt als eigener, gut lesbarer Absatz unter seiner Beschriftung. */
#beauftragen-dialog .zzeile--lang {
	display: block;
}
#beauftragen-dialog .zzeile--lang .zl {
	display: block;
	max-width: none;
	margin: 0 0 4px;
}
#beauftragen-dialog .zzeile--lang .zw {
	display: block;
	text-align: left;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
#beauftragen-dialog .zblock.wichtig ul {
	margin: 0;
	padding-left: 18px;
}
#beauftragen-dialog .zblock.wichtig li {
	font: 400 var(--t2)/1.7 var(--sans);
	color: var(--tinte);
	margin-bottom: 8px;
}

/* --- Block „noch kein Absenden“ --- */
#beauftragen-dialog .nablock {
	margin-top: 24px;
	padding: 20px;
	background: var(--papier-tief);
}
#beauftragen-dialog .nablock p {
	margin: 0 0 12px;
	font: 400 var(--t2)/1.6 var(--sans);
	color: var(--tinte);
}
#beauftragen-dialog .nablock .nawege {
	color: var(--tinte);
}
#beauftragen-dialog .nablock .nawege a {
	color: var(--blau);
}
#beauftragen-dialog .nablock .knopf {
	margin-top: 8px;
}

/* --- Absenden (Suchauftrag aktiv) --- */
#beauftragen-dialog .nablock--senden {
	padding: 0;
	background: none;
}
#beauftragen-dialog .nablock--senden .fehler {
	margin: 0 0 12px;
	font: 400 var(--t3)/1.6 var(--sans);
	color: var(--fehler);
}
#beauftragen-dialog .nablock--senden .fehler[hidden] {
	display: none;
}
#beauftragen-dialog .nablock--senden .knopf[aria-busy="true"] {
	opacity: .6;
	cursor: progress;
}

/* --- Danke (Schritt 4) --- */
#beauftragen-dialog .bdanke {
	max-width: 62ch;
	padding-top: 6px;
}
#beauftragen-dialog .bdanke__nr {
	margin: 0 0 14px;
	font: 400 var(--t4)/1.65 var(--sans);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--grau);
}
#beauftragen-dialog .bdanke__text {
	margin: 0 0 18px;
	font: 400 var(--g5)/1.35 var(--serif);
	color: var(--tinte);
}
#beauftragen-dialog .bdanke__wege {
	margin: 0;
	font: 400 var(--t2)/1.6 var(--sans);
	color: var(--tinte);
}
#beauftragen-dialog .bdanke__wege a {
	color: var(--blau);
}

/* --- Fuß: Zurück links, Hauptknopf rechts --- */
#beauftragen-dialog .ffuss {
	display: flex;
	align-items: center;
	gap: 18px;
	border-top: 1px solid var(--linie);
}
#beauftragen-dialog .ffuss .zurueck {
	background: none;
	border: 0;
	padding: 10px 2px;
	min-height: 44px;
	font: inherit;
	font-size: var(--t3);
	color: var(--grau);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: var(--unterstrich-abstand);
	text-decoration-thickness: 1px;
}
#beauftragen-dialog .ffuss .zurueck:hover {
	color: var(--tinte);
}
#beauftragen-dialog .ffuss .knopf {
	margin-left: auto;
}

/* --- Nachfrage beim Schließen (eigene Ebene, keine Browser-Blase) --- */
.beauftragen-nachfrage {
	position: absolute;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: color-mix(in srgb, var(--tinte) 44%, transparent);
}
.beauftragen-nachfrage[hidden] {
	display: none;
}
.beauftragen-nachfrage__karte {
	width: min(460px, 100%);
	padding: clamp(22px, 3vw, 32px);
	background: var(--papier);
}
.beauftragen-nachfrage__text {
	margin: 0 0 22px;
	font: 400 clamp(19px, 1.8vw, 23px)/1.55 var(--serif);
	color: var(--tinte);
}
.beauftragen-nachfrage__zeile {
	display: flex;
	gap: 22px;
	align-items: center;
	flex-wrap: wrap;
}

/* --- Handy (< 768 px): Teile-Leiste ohne Trenner, Fuß über dem Home-Balken --- */
@media (max-width: 480px) {
	#beauftragen-dialog .teile {
		gap: 0 7px;
	}
	#beauftragen-dialog .teile button {
		font-size: 13px;
		min-width: 44px; /* Audit 23.09.: „Was“/„Wo“ waren 21–26 px breit */
	}
	#beauftragen-dialog .teile .trenner {
		display: none;
	}
}
@media (max-width: 767px) {
	#beauftragen-dialog .kgrid {
		grid-template-columns: minmax(0, 1fr);
	}
	#beauftragen-dialog .kgrid.bezirke {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#beauftragen-dialog .ffuss .knopf {
		width: 100%;
		justify-content: center;
	}
	#beauftragen-dialog .ffuss {
		flex-wrap: wrap;
	}
	#beauftragen-dialog .bkal {
		position: static;
		margin-top: 8px;
		width: 100%;
	}
}

/* K2 Paket 3 – Messrunde 2 Nr 123: Fuß wie Prototyp (14 px oben/unten, Weiter-Knopf 40 hoch, 14 px). */
#beauftragen-dialog .ffuss { padding: 14px 0 max(14px, env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
	#beauftragen-dialog .ffuss .knopf {
		min-height: 40px;
		padding: 0 22px;
		font-size: var(--t3);
	}
}

/* K2 Paket 4 – Messrunde 2 Nr 127/128: Einstieg wie Prototyp – Knopf 40 hoch, 14 px,
   „Drei Schritte …“ rechts daneben (umbrechend), Unterlagen-Zeilen mit 44-px-Link. */
.bstart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 34px;
}
.bstart .knopf {
	min-height: 40px;
	padding: 0 22px;
	font: 400 var(--t3)/1.2 var(--sans);
	letter-spacing: .02em;
}
.bstart .dazu {
	margin: 0;
	max-width: 42ch;
	font: 400 13px/1.7 var(--sans);
}
#preisblock .sld { padding: 11px 0; }
#preisblock .sld a,
#preisblock .sld .folgt {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 13px;
}

/* =====================================================================
   Thomas 23.09. („Prozess Beauftragung cleaner – Fenster, Texte“):
   – Kopf: „Schritt 1 von 3“ ohne doppelten Titel, „Schließen“ oben rechts statt allein
     in einer eigenen Zeile, Teile ohne Trennpunkte, feine Linie unter dem Kopf
   – „Pflicht“ überall gleich als kleines * (Hinweis steht in der Einleitung); Screenreader
     lesen weiterhin „Pflicht“
   – Kästchen-Beschriftungen nie mitten im Wort trennen („Dachgeschoßwoh-nung“)
   ===================================================================== */
#beauftragen-dialog .kopfd {
	position: relative;
	border-bottom: 1px solid var(--linie);
}
#beauftragen-dialog .kopfd .kopftext { padding-right: 96px; }
#beauftragen-dialog .kopfd .zud {
	position: absolute;
	top: calc(clamp(18px, 2.4vw, 28px) - 12px);
	right: 0;
}
#beauftragen-dialog .teile { gap: 0 22px; margin-top: 10px; }
#beauftragen-dialog .dinhalt { padding-top: 22px; }
#beauftragen-dialog .teile .trenner { display: none; }
#beauftragen-dialog .teile[hidden] { display: none; } /* Schritt 2/3: JS blendet die Teile aus, display:flex hob das auf */
#beauftragen-dialog .pflicht {
	font-size: 0;
	letter-spacing: 0;
}
#beauftragen-dialog .pflicht::after {
	content: "*" / "";
	margin-left: 1px;
	font: 400 var(--t3)/1 var(--sans);
	color: var(--grau);
}
#beauftragen-dialog .kgrid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
#beauftragen-dialog .kgrid .haken span {
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: normal;
}
@media (max-width: 1023px) {
	#beauftragen-dialog .kopfd .zud { top: 2px; }
}
@media (max-width: 480px) {
	#beauftragen-dialog .teile { gap: 0 7px; }
}

/* Thomas 23.09.: Seitenleiste „Unterlagen“ ruhiger – Zeilen nicht mehr auf 44 px gestreckt
   (die Trefferfläche der PDF-Links kommt aus .tf::after), Einleitung in Serif wie die
   Seitenleisten der anderen Seiten, erste Liste mit Linie oben. */
#preisblock .slzeile {
	margin: 0 0 18px;
	font: 400 var(--g5)/1.4 var(--serif);
}
#preisblock .sld { padding: 12px 0; align-items: baseline; }
#preisblock .sld:first-child { border-top: 1px solid var(--linie); }
#preisblock .sld a,
#preisblock .sld .folgt {
	display: inline;
	min-height: 0;
	font-size: var(--t3);
}
/* Thomas 23.09.: nach einer Unterbrechung nicht zwei gleich schwere Knöpfe – „fortsetzen“ ist
   der Hauptknopf, „neu starten“ tritt als Textlink dahinter zurück. */
.bstart__knopf:has([data-beauftragen-fortsetzen]:not([hidden])) > [data-beauftragen-fortsetzen] { order: 1; }
.bstart__knopf:has([data-beauftragen-fortsetzen]:not([hidden])) > button[data-dialog-auf] {
	order: 2;
	padding-left: 0;
	padding-right: 0;
	background: none;
	color: var(--tinte);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: var(--unterstrich-abstand);
}

/* =====================================================================
   Thomas 23.09. („die roten Texte wirken reingequetscht“):
   – Sammelhinweis mit feiner roter Linie links statt Kasten (unter der Kopflinie wirkte ein
     Kasten gedrängt), mit Luft zur Überschrift darunter
   – Meldungen unter den Feldern eine Stufe größer, dicht am Feld und mit Luft zum nächsten
     Etikett; leere Pflichtfelder mit rotem Rahmen
   – Teile-Leiste: statt „Bitte ausfüllen“ neben dem Wort wird der Teil rot; der Text bleibt
     für Screenreader erhalten
   ===================================================================== */
#beauftragen-dialog .sammel {
	margin: 0 0 28px;
	padding: 2px 0 2px 14px;
	border: 0;
	border-left: 2px solid var(--fehler);
	font: 400 var(--t3)/1.6 var(--sans);
}
#beauftragen-dialog .fehler {
	margin: 2px 0 20px;
	font: 400 var(--t3)/1.6 var(--sans);
}
#beauftragen-dialog .teile .fehltmarke {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
#beauftragen-dialog .teile button.fehlt,
#beauftragen-dialog .teile button.fehlt:hover {
	color: var(--fehler);
	text-decoration-color: var(--fehler);
}
/* Handy: Teile gleichmäßig über die Breite (vorher standen „Was“/„Wo“ weit auseinander,
   „Budget Wünsche“ eng), Trefferfläche bleibt mind. 44 px breit. */
@media (max-width: 480px) {
	#beauftragen-dialog .teile {
		justify-content: space-between;
		gap: 0;
		margin-left: -8px;
		margin-right: -8px;
	}
	#beauftragen-dialog .teile button {
		min-width: 44px;
		padding: 10px 8px;
	}
}

/* Unterlagen (Schritt 2) am Handy: Titel oben, Lesen/PDF immer darunter – vorher stand
   „Lesen folgt“ je nach Titellänge mal daneben, mal darunter. */
@media (max-width: 600px) {
	#beauftragen-dialog .dliste .dkopf {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
}
/* Sehr schmal (320 px): „Ausstattung“ ist länger als „Wünsche“ – weniger Innenabstand. */
@media (max-width: 360px) {
	#beauftragen-dialog .teile {
		margin-left: -5px;
		margin-right: -5px;
	}
	#beauftragen-dialog .teile button {
		padding: 10px 5px;
	}
}

/* Kurze Querformate: Kopf und Teilnavigation bleiben sichtbar, ohne den ersten Inhalt
   hinter der festen Aktionsleiste zu verdrängen. */
@media (max-height: 520px) and (min-width: 481px) {
	#beauftragen-dialog.blattd .kopfd {
		padding-top: 10px;
		padding-bottom: 6px;
		row-gap: 4px;
	}
	#beauftragen-dialog .schrittzeile {
		margin-bottom: 0;
		line-height: 1.35;
	}
	#beauftragen-dialog .teile {
		margin-top: 2px;
	}
	#beauftragen-dialog .teile button {
		padding-top: 5px;
		padding-bottom: 5px;
	}
	#beauftragen-dialog .dinhalt {
		padding-top: 14px;
	}
	#beauftragen-dialog .az {
		margin-bottom: 10px;
	}
	#beauftragen-dialog .unverbindlich {
		margin-bottom: 8px;
	}
	#beauftragen-dialog .einl {
		margin-top: 8px;
		line-height: 1.5;
	}
	#beauftragen-dialog .gz {
		margin-top: 12px;
	}
}