/* ==========================================================================
   Sektion 11 · Abschluss-Anfrage (acf/mk-anfrage)
   Abweichung vom Design #16b/#16m (Betrieb): kein Foto, helle Sektion zwischen zwei schwarzen (10 und 12).
   Grund Weiß. Text links 560 px, Formularkarte weiß rechtsbündig 400 px, dahinter ein warmer Lichtschein.
   Karte und Text senkrecht mittig. Formular wie im Hero, ohne Videofenster.
   Text in em auf Basis --mk-fs-body (kein zoom). Die Karte wächst ab 1600 px wie der Hero (zoom-Stufen).
   ========================================================================== */

.mk-section.mk-anfrage {
	--mk-anfrage-x: max(var(--mk-gutter), 6.25vw);        /* 90 px bei 1440 */
	--mk-anfrage-w: 31.11em;                             /* Textspalte 560 px */
	--mk-anfrage-karte: 400px;                           /* Formularkarte (wächst per zoom) */
	--mk-anfrage-focus: #D9541F;                         /* Feldrahmen im Fokus, wie Hero */
	--mk-anfrage-dash: #CFCFCA;
	--mk-anfrage-dash-bg: #FEF7F2;
	padding: 0;                                          /* doppelte Klasse: sonst gewinnt .mk-section */
	font-size: var(--mk-fs-body);
	background: var(--mk-white);
}

.mk-anfrage__inner {
	display: grid;
	grid-template-columns: minmax(0, var(--mk-anfrage-w)) minmax(2em, 1fr) auto;
	align-items: center;                                 /* Text senkrecht mittig zur Karte */
	/* 1260 px Inhalt bei 1440. Wächst mit der H2 (sie wächst schneller als Text und Karte), damit sie nie in die Karte läuft */
	max-width: calc(max(70em, var(--mk-fs-h2) * 17.5 + 600px) + 2 * var(--mk-anfrage-x));
	margin-inline: auto;
	padding: 6.22em var(--mk-anfrage-x) 5.78em;          /* 112 / 104 px */
}
.mk-anfrage__text   { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mk-anfrage__buehne { grid-column: 3; position: relative; width: var(--mk-anfrage-karte); }

/* ---------- Text ---------- */
.mk-anfrage__eyebrow {
	margin: 0 0 1.333em; min-height: 1.3em;              /* 16 px, eine Zeile */
	font-size: 0.667em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	line-height: 1.3; color: var(--mk-gold-dark);
}
.mk-anfrage__rule { display: block; width: 4.89em; height: 2px; margin-bottom: 1.22em; background: var(--mk-gold); }   /* 88 / 22 px */
.mk-anfrage__rule--thin { width: 6.67em; height: 1px; margin: 1.22em 0; background: rgba(214, 167, 66, 0.75); }        /* 120 px */
.mk-anfrage .mk-anfrage__h2 {    /* doppelte Klasse: sonst gewinnt .mk-h2 aus main.css */
	/* Breiter als die Textspalte (reicht in den freien Raum vor der Karte, 770 px bei 1440), bricht auf jeder Breite gleich um.
	   Endet immer mind. 32 px vor der Karte (1280–1353 px: lange Leistungsnamen brechen dort auf 3 Zeilen) */
	width: min(calc(var(--mk-fs-h2) * 17.5), calc(100vw - 2 * var(--mk-anfrage-x) - var(--mk-anfrage-karte) - 32px));
	max-width: none; margin: 0;
	color: var(--mk-ink);
}
.mk-anfrage__gold { color: var(--mk-gold-head); font-weight: 900; }
.mk-anfrage__p { margin: 0; font-size: 1em; line-height: 1.65; color: var(--mk-text-strong); }
.mk-anfrage__p + .mk-anfrage__p { margin-top: 1.11em; }   /* 20 px */
.mk-anfrage__p strong { font-weight: 700; color: var(--mk-ink); }

/* ---------- Lichtschein hinter der Karte ---------- */
.mk-anfrage__schein {
	position: absolute; inset: -22% -34%; z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(255, 94, 41, 0.22) 0%, rgba(255, 94, 41, 0.09) 45%, rgba(255, 94, 41, 0) 100%),
		radial-gradient(closest-side, rgba(214, 167, 66, 0.26) 0%, rgba(214, 167, 66, 0.10) 55%, rgba(214, 167, 66, 0) 100%);
}

/* ---------- Formularkarte ---------- */
.mk-anfrage__card {
	position: relative; z-index: 1;
	padding: 22px;
	background: var(--mk-white);
	border-radius: var(--mk-r-card);
	box-shadow:
		0 0 0 1px var(--mk-card-edge),
		0 30px 60px -26px rgba(255, 94, 41, 0.34),
		0 12px 28px -18px rgba(20, 20, 19, 0.14);
}

.mk-anfrage .mk-anfrage__form { display: flex; flex-direction: column; gap: 12px; padding: 0 6px 6px; }
.mk-anfrage__form-title {
	margin: 0 0 2px;
	font-size: 22px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3;
	text-align: center; color: var(--mk-ink);
}
.mk-anfrage__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk-anfrage__feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; }

.mk-anfrage .mk-field {
	display: block; width: 100%; min-width: 0;
	padding: 14px;
	border: 1px solid var(--mk-line); border-radius: var(--mk-r-ctrl);
	background: var(--mk-white);
	font-family: var(--mk-font-text); font-size: 15.5px; line-height: 1.4; color: var(--mk-ink);
	outline: none;
	transition: border-color var(--mk-t-color);
}
.mk-anfrage .mk-field::placeholder { color: #8C8C87; opacity: 1; }
.mk-anfrage .mk-field:focus { border-color: var(--mk-anfrage-focus); }
.mk-anfrage textarea.mk-field { resize: none; line-height: 1.5; }
.mk-anfrage .mk-field.is-error { border-color: #B3341A; background: #FDF6F4; }
.mk-anfrage__fehler { font-size: 12.5px; line-height: 1.35; color: #B3341A; }
.mk-anfrage__fehler[hidden] { display: none; }

.mk-anfrage .mk-anfrage__upload {
	display: flex; align-items: center; gap: 10px;
	padding: 13px 14px;
	border: 1px dashed var(--mk-anfrage-dash); border-radius: var(--mk-r-ctrl);
	background: transparent;
	font-size: 14.5px; line-height: 1.4; color: var(--mk-text);
	cursor: pointer;
	transition: border-color var(--mk-t-color), background-color var(--mk-t-color);
}
.mk-anfrage .mk-anfrage__upload .mk-icon { color: var(--mk-ink); }
.mk-anfrage .mk-anfrage__upload:hover,
.mk-anfrage .mk-anfrage__upload:focus-within { border-color: var(--mk-anfrage-focus); background-color: var(--mk-anfrage-dash-bg); }

/* Gewählte Dateien (Liste erzeugt das Hero-Skript, daher dessen Klassennamen) */
.mk-anfrage .mk-anfrage__files { display: flex; flex-direction: column; gap: 8px; }
.mk-anfrage .mk-anfrage__files.is-filled .mk-anfrage__upload { border-style: solid; border-color: var(--mk-line); }
.mk-anfrage__filelist[hidden] { display: none; }
.mk-anfrage__filelist {
	display: flex; flex-direction: column; gap: 6px;
	margin: 0; padding: 10px 12px; list-style: none;
	background: var(--mk-white); border: 1px solid var(--mk-line); border-radius: var(--mk-r-ctrl);
	font-size: 13px; line-height: 1.35; color: var(--mk-text);
	max-height: 160px; overflow-y: auto;
}
.mk-anfrage__filelist li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.mk-anfrage .mk-hero__filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-anfrage .mk-hero__filesize { flex: 0 0 auto; color: #6B6B66; font-variant-numeric: tabular-nums; }
.mk-anfrage .mk-hero__filesum {
	padding-top: 6px; border-top: 1px solid var(--mk-line);
	font-weight: 600; color: var(--mk-text-strong); justify-content: flex-start;
}
.mk-anfrage__filelist .is-error,
.mk-anfrage__filelist .is-error .mk-hero__filesize { color: #B3341A; }
.mk-anfrage__filehint { margin: 0; font-size: 12px; line-height: 1.4; color: #6B6B66; }

.mk-anfrage .mk-anfrage__submit { margin-top: 4px; padding: 19px 22px; font-size: 13px; white-space: nowrap; }

/* Drei Punkte: Icon über Text, einreihig (wie Hero) */
.mk-anfrage__points {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
	margin: 10px 0 0; padding: 0; list-style: none;
}
.mk-anfrage__points li {
	display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
	font-size: 11.5px; line-height: 1.2; color: var(--mk-text-strong); white-space: nowrap;
}
.mk-anfrage__points .mk-icon { color: var(--mk-gold); }

/* ---------- Große Bildschirme: Karte wächst wie der Hero ---------- */
@media (min-width: 1600px) { .mk-anfrage__buehne { zoom: 1.03; } }
@media (min-width: 1760px) { .mk-anfrage__buehne { zoom: 1.07; } }
@media (min-width: 1920px) { .mk-anfrage__buehne { zoom: 1.11; } }
@media (min-width: 2080px) { .mk-anfrage__buehne { zoom: 1.15; } }
@media (min-width: 2240px) { .mk-anfrage__buehne { zoom: 1.18; } }
@media (min-width: 2400px) { .mk-anfrage__buehne { zoom: 1.22; } }

/* ---------- 901–1279 px: nebeneinander zu eng, Karte unter den Text (wie Sektion 9) ---------- */
@media (min-width: 901px) and (max-width: 1279px) {
	.mk-anfrage .mk-anfrage__h2 { width: min(calc(var(--mk-fs-h2) * 17.5), calc(100vw - 2 * var(--mk-anfrage-x))); }
	.mk-anfrage__inner { grid-template-columns: minmax(0, 1fr); max-width: none; }
	.mk-anfrage__text { grid-column: 1; max-width: 37.78em; }       /* 680 px */
	.mk-anfrage__buehne { grid-column: 1; margin-top: 3.56em; }      /* 64 px */
}

/* ---------- Mobil: Text, darunter die Karte ---------- */
@media (max-width: 900px) {
	.mk-anfrage__inner {
		grid-template-columns: minmax(0, 1fr);
		max-width: none;
		padding: 34px 22px 44px;
	}
	.mk-anfrage__text, .mk-anfrage__buehne { grid-column: 1; }
	.mk-anfrage__eyebrow { margin-bottom: 12px; font-size: 11px; min-height: 0; }
	.mk-anfrage__rule { width: 72px; margin-bottom: 18px; }
	.mk-anfrage .mk-anfrage__h2 { width: 100%; }
	.mk-anfrage__rule--thin { width: 100px; margin: 18px 0; }
	.mk-anfrage__p + .mk-anfrage__p { margin-top: 16px; }

	.mk-anfrage__buehne { width: auto; margin: 30px -6px 0; }        /* Karte 16 px vom Rand (Design) */
	.mk-anfrage__schein { inset: -10% -12%; }
	.mk-anfrage__card { padding: 16px; }
	.mk-anfrage .mk-anfrage__form { gap: 14px; padding: 0; }
	.mk-anfrage__form-title { font-size: 20px; }
	.mk-anfrage__row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.mk-anfrage .mk-field { padding: 15px; font-size: 16px; }         /* 16 px: kein iOS-Zoom */
	.mk-anfrage .mk-anfrage__upload { padding: 15px; font-size: 15px; }
	.mk-anfrage .mk-anfrage__submit { margin-top: 0; padding: 19px 18px; }
	.mk-anfrage__points { gap: 6px; margin-top: 0; }
	.mk-anfrage__points li { gap: 5px; font-size: 11px; }
	.mk-anfrage__points .mk-icon { width: 17px; height: 17px; }
}
@media (max-width: 360px) {
	.mk-anfrage__points li { white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-anfrage .mk-anfrage__submit { transition: none; }
}