/* ==========================================================================
   Sektion 5 · System / Leistungsverzeichnis (acf/mk-system)
   Grundlage Design #10b/#10m. Weiß. Links Kopf + Einleitung + 4 Methodenkarten (560 px bei 1440),
   rechts Heft + LV-Block als Gruppe, mittig in der rechten Fläche und mittig zur Textspalte.
   Höhe folgt dem Inhalt (kein Foto, das Höhe braucht). Maße in em auf Basis --mk-fs-body, kein zoom.
   ========================================================================== */

.mk-section.mk-system {
	--mk-system-x: max(var(--mk-gutter), 6.25vw);                     /* 90 px bei 1440 */
	/* Textspalte 640 px bei 1440 (Design 560: zu eng für „Reinigung im Stiegenhaus“, Kartentitel mit langen
	   Wörtern). Wächst mit der H2 (14,55 × H2), damit sie auf jeder Breite gleich umbricht */
	--mk-system-left: max(35.56em, calc(var(--mk-fs-h2) * 14.55));
	--mk-system-right: 34.44em;                                          /* rechte Fläche 620 px bei 1440, Gruppe 522 mittig */
	--mk-system-max: calc(var(--mk-system-left) + var(--mk-system-right) + 2 * var(--mk-system-x));
	padding: 0;                                     /* doppelte Klasse: sonst gewinnt .mk-section */
	font-size: var(--mk-fs-body);
	background: var(--mk-white);
}

.mk-system__inner {
	max-width: var(--mk-system-max);
	margin-inline: auto;
	padding: 4em var(--mk-system-x) 3.56em;          /* 72 / 64 px */
}

.mk-system__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--mk-system-left)) minmax(31.22em, 1fr);   /* rechts mind. 522 + 2 × 20 px */
	align-items: center;
	align-content: start;                            /* Zeile = Texthöhe: die LV-Gruppe steht mittig zum Text */
	min-height: var(--mk-system-stage, 0px);         /* feste Bühne, Resthöhe liegt unter dem Raster */
}
.mk-system__text { align-self: start; min-width: 0; }

/* ---------- Kopf ---------- */
.mk-system__eyebrow {
	margin: 0 0 1.333em;                              /* 16 px */
	font-size: 0.667em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	line-height: 1.3; color: var(--mk-gold-dark);
}
.mk-system__rule {
	display: block; width: 4.89em; height: 2px;       /* 88 px */
	margin-bottom: 1.22em;                            /* 22 px */
	background: var(--mk-gold);
}
.mk-system__rule--thin {
	width: 6.67em; height: 1px; margin: 1.22em 0;     /* 120 px */
	background: rgba(214, 167, 66, 0.75);
}
.mk-system .mk-system__h2 {     /* doppelte Klasse: sonst gewinnt .mk-h2 aus main.css (max. 709 px) */
	max-width: none; margin: 0; color: var(--mk-ink);
	min-height: 2.08em;                               /* 2 Zeilen reserviert */
}
.mk-system__gold { color: var(--mk-gold-head); font-weight: 900; }

.mk-system__intro {
	margin: 0; font-size: 1em; line-height: 1.65; color: var(--mk-text-strong);
}
.mk-system__intro strong { font-weight: 700; color: var(--mk-ink); }

/* ---------- Methodenkarten: 4 nebeneinander auf voller Spaltenbreite, goldene Haarlinien ---------- */
.mk-system__cards {
	display: flex; align-items: stretch;
	margin: 2em 0 0; padding: 0; list-style: none;    /* 36 px */
}
.mk-system__card {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; align-items: center; gap: 0.61em;   /* 11 px */
	padding: 0 0.89em;                                 /* 16 px */
	text-align: center;
}
.mk-system__card:first-child { padding-left: 0; }
.mk-system__card:last-child  { padding-right: 0; }
.mk-system__card + .mk-system__card { border-left: 1px solid rgba(214, 167, 66, 0.4); }
.mk-system__icon {
	width: 1.39em; height: 1.39em;                     /* 25 px */
	color: var(--mk-gold);
	transition: transform 220ms ease, color 220ms ease;
}
@media (hover: hover) {
	.mk-system__card:hover .mk-system__icon { transform: scale(1.14); color: var(--mk-gold-dark); }
}
.mk-system .mk-system__h3 {
	margin: 0; min-height: 2.5em;                      /* zwei Zeilen reserviert: alle Texte starten auf einer Linie */
	font-size: 0.861em; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;   /* 15,5 px */
	color: var(--mk-ink);
}
.mk-system__card p {
	margin: 0; font-size: 0.778em; line-height: 1.5; color: var(--mk-text);            /* 14 px */
	hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}

/* ---------- LV-Gruppe: Heft links, Titel / Text / Button rechts ----------
   Rechtsbündig am Inhaltsrand und unten bündig mit den Methodenkarten: der Button schließt mit dem
   längsten Kartentext ab, das Heft mit seiner untersten Ecke */
.mk-system__lv {
	justify-self: end; align-self: end;
	display: grid;
	grid-template-columns: 12.78em 14.44em;            /* 230 / 260 px */
	grid-template-rows: 1fr auto auto auto;
	grid-template-areas: "heft ." "heft titel" "heft text" "heft btn";
	column-gap: 1.78em;                                /* 32 px */
}
.mk-system__heft-wrap {
	grid-area: heft; position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 12.78em; height: 16.11em;                   /* 230 × 290 */
}
.mk-system__schatten {
	position: absolute; left: 1.22em; bottom: 0.78em; width: 10.89em; height: 3em;
	background: radial-gradient(ellipse at 50% 50%, rgba(20,20,19,0.32) 0%, rgba(20,20,19,0.13) 46%, rgba(20,20,19,0) 74%);
	filter: blur(6px); pointer-events: none;
}
.mk-system__heft {
	position: relative; display: block; flex: 0 0 auto;
	width: 9.44em; height: 12.22em;                    /* 170 × 220 */
	border-radius: 4px; overflow: hidden;
	background: var(--mk-sand);
	transform: perspective(900px) rotateY(-15deg) rotateZ(11deg);
	box-shadow: 14px 20px 40px -16px rgba(20,20,19,0.4), 3px 0 0 rgba(20,20,19,0.14);
	transition: transform 340ms ease, box-shadow 340ms ease;
}
a.mk-system__heft { cursor: pointer; }
/* Heft und Button sind eine Aktion: Hover auf einem von beiden richtet das Heft auf */
.mk-system__heft:hover,
.mk-system__lv:has(.mk-system__btn:hover) .mk-system__heft,
.mk-system__lv:has(.mk-system__btn:focus-visible) .mk-system__heft {
	transform: perspective(900px) rotateY(-6deg) rotateZ(4deg) scale(1.06);
	box-shadow: 10px 26px 52px -16px rgba(20,20,19,0.48), 3px 0 0 rgba(20,20,19,0.14);
}
.mk-system__cover-img { width: 100%; height: 100%; object-fit: cover; }

/* Umschlag ohne Foto: Sand, Buchrücken, Goldlinie, Titel */
.mk-system__umschlag {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: flex-start;
	padding: 1.33em 1.1em 1.1em 1.4em;
	background:
		linear-gradient(90deg, rgba(20,20,19,0.10) 0, rgba(20,20,19,0.02) 0.5em, rgba(20,20,19,0) 0.7em),
		linear-gradient(180deg, #FBF9F4 0%, #EFEDE9 100%);
}
.mk-system__umschlag-linie { display: block; width: 1.8em; height: 2px; margin-bottom: 0.9em; background: var(--mk-gold); }
.mk-system__umschlag-titel {
	font-family: var(--mk-font-head); font-size: 0.95em; font-weight: 800; line-height: 1.1;
	letter-spacing: -0.02em; color: var(--mk-ink); hyphens: manual;
}
.mk-system__umschlag-firma {
	margin-top: auto;
	font-size: 0.5em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--mk-gold-dark);
}

.mk-system .mk-system__lv-title {
	grid-area: titel; margin: 0;
	font-size: 1.78em; font-weight: 900; line-height: 1.02; letter-spacing: -0.025em;   /* 32 px */
	color: var(--mk-ink);
}
.mk-system__lv-text {
	grid-area: text; margin: 0.85em 0 0;              /* 14 px */
	font-size: 0.917em; line-height: 1.55; color: var(--mk-text);                        /* 16,5 px */
}
.mk-system__lv-text strong { font-weight: 700; color: var(--mk-ink); }

/* Download-Button: Nebenbutton-Standard (.mk-btn-neben in main.css, 0.17.12).
   Hier nur Maß, Schrift und die Kopplung mit dem Heft. Pfeil sinkt beim Hover 2 px. */
.mk-system__btn {
	grid-area: btn;
	display: flex; align-items: center; justify-content: center; gap: 0.77em;
	width: 100%; min-height: 4.31em; margin-top: 2em;  /* 56 / 26 px bei 13 px */
	padding: 0 1.85em;
	font-size: 0.72em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	line-height: 1.2; white-space: nowrap;
}
.mk-system__btn .mk-icon {
	width: 1.54em; height: 1.54em;
	transition: transform 240ms ease;
}
/* Hover auf dem Heft zeigt den Button im Hover-Zustand (gleiche Werte wie .mk-btn-neben:hover) */
.mk-system__lv:has(a.mk-system__heft:hover) .mk-system__btn.mk-btn-neben {
	background: var(--mk-gold-dark); border-color: var(--mk-gold-dark); color: var(--mk-white);
	box-shadow: var(--mk-shadow-neben);
}
.mk-system__btn:hover .mk-icon,
.mk-system__btn:focus-visible .mk-icon,
.mk-system__lv:has(a.mk-system__heft:hover) .mk-system__btn .mk-icon { transform: translateY(2px); }
/* Editor ohne PDF: gestrichelter Platzhalter, kein Hover */
.mk-system__btn--leer {
	border: 1px dashed var(--mk-line-gold-strong); border-radius: var(--mk-r-ctrl);
	color: var(--mk-text); cursor: default;
}

/* ---------- Abschluss: geschwungene Goldlinie über die volle Breite ---------- */
.mk-system__kurve { display: block; width: 100%; height: 2.56em; margin-bottom: 2.22em; }   /* 46 / 40 px */

/* ---------- Feste Bühne ab 1280 px (Höhe des Rasters, gemessen mit Text in voller Feldlänge) ---------- */
/* Summe der reservierten Zeilen: Eyebrow 1, H2 2, Einleitung 3, Kartentitel 2, Kartentext 5 Zeilen
   + Linien und Abstände. 1440 → 508 px. Kürzerer Text lässt die Höhe gleich, der Rest liegt unten */
@media (min-width: 1280px) {
	.mk-system__grid { --mk-system-stage: calc(22.97em + 3px + 2.08 * var(--mk-fs-h2)); }
}
/* Das geneigte Heft endet optisch 1,06 em über seinem Rahmen: nach unten schieben, damit seine
   unterste Ecke mit den Methodenkarten abschließt (gemessen 1280–2560: Abweichung ≤ 1 px) */
@media (min-width: 1280px) {
	.mk-system__heft-wrap { translate: 0 1.06em; }
}
/* 1280–1439: LV-Gruppe auf 85 %, damit die Textspalte breit genug für die H2 bleibt (1280: 623 px) */
@media (min-width: 1280px) and (max-width: 1439px) {
	.mk-system__grid { grid-template-columns: minmax(0, var(--mk-system-left)) minmax(26.54em, 1fr); }
	.mk-system__lv { font-size: 0.85em; }
}

/* ---------- Zwischengröße 901–1279 px: Text oben, LV-Gruppe darunter ---------- */
@media (min-width: 901px) and (max-width: 1279px) {
	.mk-system__grid { grid-template-columns: minmax(0, 1fr); }
	.mk-system__text { max-width: 37.8em; }            /* 680 px */
	.mk-system__lv { justify-self: start; margin-top: 2.5em; margin-left: -1.2em; }
}

/* ---------- Mobil (Design #10m): Kopf, Karten 2 × 2, LV-Titel, Text, Heft, Button ---------- */
@media (max-width: 900px) {
	.mk-system__inner { padding: 34px 22px 30px; }
	.mk-system__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.mk-system__eyebrow { margin-bottom: 12px; font-size: 11px; }
	.mk-system__rule { width: 72px; margin-bottom: 18px; }
	.mk-system .mk-system__h2 { min-height: 0; letter-spacing: -0.03em; }
	.mk-system__rule--thin { width: 100px; margin: 18px 0; }

	.mk-system__cards {
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0;
		margin: 24px -6px 0;
	}
	.mk-system__card,
	.mk-system__card:first-child,
	.mk-system__card:last-child { padding: 0 10px; }
	.mk-system__card + .mk-system__card { border-left: 0; }
	.mk-system__card:nth-child(odd) { border-right: 1px solid rgba(214, 167, 66, 0.4); }
	.mk-system__icon { width: 24px; height: 24px; }
	.mk-system .mk-system__h3 { font-size: 15px; }
	.mk-system__card p { font-size: 14px; }

	.mk-system__lv {
		justify-self: stretch; margin-top: 28px;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: "titel" "text" "heft" "btn";
		justify-items: center; text-align: center;
	}
	.mk-system .mk-system__lv-title { margin-top: 18px; font-size: 26px; }
	.mk-system__lv-text { max-width: 300px; margin-top: 14px; font-size: 15px; }
	.mk-system__heft-wrap { width: 100%; height: 200px; margin: 20px 0 4px; }
	.mk-system__schatten { left: 50%; bottom: 12px; width: 140px; height: 40px; translate: -50% 0; }
	.mk-system__heft { width: 118px; height: 154px; font-size: 12px;
		transform: perspective(800px) rotateY(-15deg) rotateZ(11deg);
		box-shadow: 12px 16px 32px -14px rgba(20,20,19,0.4), 3px 0 0 rgba(20,20,19,0.14); }
	.mk-system__heft:hover,
	.mk-system__lv:has(.mk-system__btn:hover) .mk-system__heft,
	.mk-system__lv:has(.mk-system__btn:focus-visible) .mk-system__heft {
		transform: perspective(800px) rotateY(-6deg) rotateZ(4deg) scale(1.05);
	}
	.mk-system__btn { margin-top: 16px; min-height: 56px; font-size: 13px; padding: 0 16px; }
	.mk-system__kurve { height: 30px; margin-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-system__heft, .mk-system__btn, .mk-system__btn .mk-icon, .mk-system__icon { transition: none; }
}