/* ==========================================================================
   Die 7 Fehler (acf/mk-fehler) · 0.17.15 · Design #fehlerb / #fehlerm
   Raster, Radien, Farben nur aus main.css. Maße in em auf Basis --mk-fs-body (18 px bei 1440).
   ========================================================================== */

.mk-fehler__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 540px;
	grid-template-areas:
		"kopf      kopf"
		"liste     figur"
		"abschluss figur";
	grid-template-rows: auto auto auto;
	column-gap: 72px;
}

/* ---------- Kopf ---------- */
.mk-fehler__kopf { grid-area: kopf; max-width: 760px; margin-bottom: 40px; }
.mk-fehler__eyebrow { margin-bottom: 16px; }
.mk-fehler__h2 { margin-bottom: 24px; }
.mk-fehler__gold { color: var(--mk-gold-head); }
.mk-fehler__intro { color: var(--mk-text); }

/* ---------- Liste der 7 Fehler ---------- */
.mk-fehler__liste {
	grid-area: liste; min-width: 0;
	display: flex; flex-direction: column;
	margin: -18px -12px 0; padding: 0; list-style: none;
}
.mk-fehler__zeile {
	display: grid;
	grid-template-columns: 2.22em minmax(0, 1fr) 3.33em;   /* 40 · Text · 60 px */
	column-gap: 16px;
	padding: 18px 12px;
	border-radius: var(--mk-r-img);
	transition: background-color 220ms ease;
}
.mk-fehler__zeile + .mk-fehler__zeile { box-shadow: 0 -1px 0 var(--mk-line-gold); }   /* Trennlinie ohne Höhe */
.mk-fehler__zeile.is-active { background: var(--mk-gold-tint); }
.mk-fehler__nr {
	padding-top: 0.3em;
	font-size: 0.722em; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
	color: var(--mk-gold-dark);
}
.mk-fehler__inhalt { min-width: 0; }
.mk-fehler .mk-fehler__h3 {
	margin: 0 0 6px;
	font-size: 1.056em; line-height: 1.25; letter-spacing: -0.01em; font-weight: 800;   /* 19 px */
	color: var(--mk-ink); hyphens: auto;
}
.mk-fehler__text { font-size: 0.861em; line-height: 1.55; color: var(--mk-text); }  /* 15,5 px */
.mk-fehler__wert {
	text-align: right; white-space: nowrap;
	font-family: var(--mk-font-head);
	font-size: 1.111em; font-weight: 800; font-variant-numeric: tabular-nums;          /* 20 px */
	color: var(--mk-gold-dark);
	transition: color 220ms ease;
}
.mk-fehler__zeile.is-active .mk-fehler__wert { color: var(--mk-gold-head); }

/* ---------- Triggersatz (0.20.2: ohne CTA und 3 Punkte, dafür größer): Desktop links unter der Liste ---------- */
.mk-fehler__abschluss { grid-area: abschluss; min-width: 0; align-self: start; padding-top: 30px; }
.mk-fehler__trigger {   /* Farbe und Größe wie Triggersatz der CTA-Gruppe, mittig; 0.21.3: wieder bis 2 Zeilen, ausgewogen umbrochen */
	margin: 0;
	font-size: 1.111em; line-height: 1.35; font-weight: 700;   /* 20 px bei 1440 */
	text-align: center; white-space: normal; text-wrap: balance;
	color: var(--mk-gold-dark);
}

/* ---------- Grafik (figure) ---------- */
.mk-fehler__figur {
	grid-area: figur; min-width: 0; margin: 0;
	display: flex; flex-direction: column;
}
.mk-fehler__karte {
	flex: 1;
	display: flex; flex-direction: column;
	padding: 30px 30px 26px;
	background: var(--mk-card-sand);
	border: 1px solid var(--mk-line-gold);
	border-radius: var(--mk-r-card);
	box-shadow: var(--mk-shadow-tile);
}
.mk-fehler__karte-kopf {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-bottom: 38px;
}
.mk-fehler__karte-titel {
	font-size: 0.639em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;   /* 11,5 px */
	color: var(--mk-gold-dark);
}
.mk-fehler__karte-info { font-size: 0.694em; color: var(--mk-text); white-space: nowrap; }  /* 12,5 px */

.mk-fehler__diagramm { flex: 1; display: flex; flex-direction: column; }
.mk-fehler__balken-reihe {
	flex: 1; min-height: 360px;
	display: flex; align-items: flex-end; gap: 12px;
	padding: 0 2px;
	border-bottom: 1px solid var(--mk-gold);
}
.mk-fehler__saeule {
	flex: 1; min-width: 0;
	height: var(--mk-fehler-h);
	display: flex; flex-direction: column; align-items: center;
	cursor: default;
}
.mk-fehler__saeule-wert {
	margin-top: -22px; white-space: nowrap;
	font-size: 0.667em; font-weight: 700; font-variant-numeric: tabular-nums;          /* 12 px */
	color: var(--mk-gold-dark);
	transition: color 220ms ease;
}
.mk-fehler__balken {
	flex: 1; width: 100%; margin-top: 6px;
	border-radius: 4px 4px 0 0;
	background: color-mix(in srgb, var(--mk-gold) var(--mk-fehler-ton), transparent);
	transition: background-color 260ms ease, box-shadow 260ms ease;
}
/* Aktiver Balken: nur --mk-gold-head, kein Zusatzton */
.mk-fehler__saeule.is-active .mk-fehler__balken {
	background: var(--mk-gold-head);
	box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--mk-gold-head) 75%, transparent);
}
.mk-fehler__saeule.is-active .mk-fehler__saeule-wert { color: var(--mk-gold-head); }
.mk-fehler__achse { display: flex; gap: 12px; padding: 10px 2px 0; }
.mk-fehler__achse span {
	flex: 1; text-align: center;
	font-size: 0.667em; font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--mk-gold-dark);
}
.mk-fehler__anzeige {
	display: flex; align-items: baseline; gap: 10px;
	min-height: 26px; margin-top: 22px; padding-top: 18px;
	border-top: 1px solid var(--mk-line-gold-soft);
}
.mk-fehler__anzeige-nr { font-size: 0.722em; font-weight: 700; letter-spacing: 0.06em; color: var(--mk-gold-dark); }
.mk-fehler__anzeige-titel { font-size: 0.889em; font-weight: 700; color: var(--mk-ink); }
.mk-fehler__anzeige-wert { margin-left: auto; white-space: nowrap; font-size: 0.889em; font-weight: 800; color: var(--mk-gold-head); }

.mk-fehler__bild { flex: 1; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.mk-fehler__bild-img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--mk-r-img); }

.mk-fehler__quelle {
	margin-top: 14px; text-align: right;
	font-size: 0.722em; line-height: 1.5; font-style: italic;                          /* 13 px */
	color: var(--mk-text);
}
.mk-fehler__quelle cite { font-style: italic; }
.mk-fehler__hinweis {
	margin-top: 12px; padding: 8px 12px;
	border: 1px dashed var(--mk-line-gold-strong); border-radius: var(--mk-r-ctrl);
	font-size: 0.72em; color: var(--mk-gold-dark);
}

/* ---------- Ab 1280 px: gleiche Außenkanten wie Unterseiten/Branchen V1 (0.18.7) ----------
   Links bündig mit dem Hero-Text wie mk-kinder (0.18.3), rechts der Rand von mk-kinder, ab 1600 px je Seite weiter
   nach außen (0.18.8). Spalten Liste 2 : Grafik 1, Grafik mind. 420 px (0.18.9), Abstand 4em.
   ACHTUNG: Zoom-Stufen wie in blocks/mk-kinder/style.css und blocks/mk-hero/style.css. */
@media (min-width: 1280px) {
	.mk-fehler { --mk-fehler-hz: 0.89; }
	@media (min-width: 1296px) { .mk-fehler { --mk-fehler-hz: 0.9; } }
	@media (min-width: 1360px) { .mk-fehler { --mk-fehler-hz: 0.94; } }
	@media (min-width: 1400px) { .mk-fehler { --mk-fehler-hz: 0.97; } }
	@media (min-width: 1440px) { .mk-fehler { --mk-fehler-hz: 1; } }
	@media (min-width: 1600px) { .mk-fehler { --mk-fehler-hz: 1.03; } }
	@media (min-width: 1760px) { .mk-fehler { --mk-fehler-hz: 1.07; } }
	@media (min-width: 1920px) { .mk-fehler { --mk-fehler-hz: 1.11; } }
	@media (min-width: 2080px) { .mk-fehler { --mk-fehler-hz: 1.15; } }
	@media (min-width: 2240px) { .mk-fehler { --mk-fehler-hz: 1.18; } }
	@media (min-width: 2400px) { .mk-fehler { --mk-fehler-hz: 1.22; } }

	.mk-wrap.mk-fehler__inner {
		/* Breite und Rand exakt wie mk-kinder V1 (rechte Spalte dort max(500 px, 11,36 × H2)) */
		--mk-fehler-breite: max(var(--mk-max), calc(38.22em + 4em + max(500px, calc(var(--mk-fs-h2) * 11.36)) + 2 * var(--mk-gutter)));
		--mk-fehler-rand: max(var(--mk-gutter), calc((100% - var(--mk-fehler-breite)) / 2 + var(--mk-gutter)));
		/* 0.18.8: Außenkanten weiter nach außen (links und rechts je --mk-fehler-mehr), die Innenkanten
		   (rechtes Ende der Liste, linkes Ende der Grafik) bleiben stehen. Ab 1600 px, höchstens 180 px je Seite */
		--mk-fehler-mehr: clamp(0px, calc((100vw - 1600px) * 0.16), 180px);
		max-width: none;
		padding-right: max(var(--mk-gutter), calc(var(--mk-fehler-rand) - var(--mk-fehler-mehr)));
		padding-left: max(var(--mk-gutter), calc(min(var(--mk-fehler-rand), max(calc(112px * var(--mk-fehler-hz)), calc(25% - 260px * var(--mk-fehler-hz)))) - var(--mk-fehler-mehr)));
		/* 0.18.9: Liste 2 : Grafik 1 (Grafik mindestens 420 px). Mehr Platz für den Text, kleinere Grafik.
		   Die Außenkanten aus 0.18.8 bleiben, nur die Innenkante wandert nach rechts */
		grid-template-columns: minmax(0, 2fr) minmax(420px, 1fr);
		grid-template-areas:
			"kopf      ."
			"liste     figur"
			"abschluss figur";
		column-gap: 4em;
	}
	/* Kopf nur über der Liste: die Einleitung läuft nicht über die Grafik hinaus (0.18.8) */
	.mk-fehler__kopf { max-width: none; margin-bottom: 28px; }
	.mk-fehler__h2 { margin-bottom: 18px; }
	.mk-fehler__zeile { padding-block: 12px; }
	.mk-fehler__liste { margin-top: -12px; }
	.mk-fehler .mk-fehler__h3 { margin-bottom: 4px; }
	.mk-fehler__abschluss { padding-top: 22px; }
	/* Diagramm: füllt die Höhe von Liste + Abschluss, darf dafür kleiner werden als bisher (360 px) */
	.mk-fehler__balken-reihe, .mk-fehler__bild { min-height: 200px; }
	.mk-fehler__karte-kopf { margin-bottom: 30px; }
}
/* Fensterhöhe bis 1350 px (auch 2560×1440 mit Browserleisten): weniger Sektionsabstand und Zeilenluft,
   damit Kopf, 7 Punkte und CTA auf einen Blick passen (0.18.8). Schrift bleibt gleich */
@media (min-width: 1280px) and (max-height: 1350px) {
	.mk-section.mk-fehler { --mk-pad-top: 40px; --mk-pad-bottom: 36px; }
	.mk-fehler__zeile { padding-block: 9px; }
	.mk-fehler__liste { margin-top: -9px; }
	.mk-fehler__kopf { margin-bottom: 20px; }
	.mk-fehler__abschluss { padding-top: 16px; }
}

/* ---------- 901–1279 px: eine Spalte, Grafik über der Liste, CTA links ---------- */
@media (max-width: 1279px) {
	.mk-fehler__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "kopf" "figur" "liste" "abschluss";
	}
	.mk-fehler__figur { max-width: 640px; margin-bottom: 40px; }
	.mk-fehler__balken-reihe { min-height: 280px; }
	.mk-fehler__abschluss { max-width: none; }   /* 0.20.3: Triggersatz mittig über die volle Breite */
}

/* ---------- Mobil (Design #fehlerm): Grafik zuerst, Triggersatz und CTA mittig ---------- */
@media (max-width: 900px) {
	.mk-fehler__kopf { margin-bottom: 26px; }
	.mk-fehler__eyebrow { margin-bottom: 12px; }
	.mk-fehler__h2 { margin-bottom: 18px; }
	.mk-fehler__figur { max-width: none; margin-bottom: 22px; }
	.mk-fehler__karte { padding: 22px 18px 18px; }
	.mk-fehler__karte-kopf { margin-bottom: 30px; }
	.mk-fehler__karte-titel { font-size: 0.656em; }                                    /* 10,5 px */
	.mk-fehler__karte-info { font-size: 0.719em; }                                     /* 11,5 px */
	.mk-fehler__balken-reihe { flex: 0 0 auto; height: 200px; min-height: 0; gap: 8px; }
	.mk-fehler__saeule-wert { margin-top: -18px; font-size: 0.656em; }                 /* 10,5 px */
	.mk-fehler__balken { margin-top: 4px; border-radius: 3px 3px 0 0; }
	.mk-fehler__achse { gap: 8px; }
	.mk-fehler__bild { min-height: 200px; }

	.mk-fehler__liste { margin: 0 -8px; }
	.mk-fehler__zeile { grid-template-columns: 30px minmax(0, 1fr) 48px; column-gap: 12px; padding: 16px 8px; }
	.mk-fehler .mk-fehler__h3 { font-size: 1.0625em; }                                 /* 17 px */
	.mk-fehler__text { font-size: 0.906em; }                                           /* 14,5 px */
	.mk-fehler__wert { font-size: 1.0625em; }                                          /* 17 px */

	.mk-fehler__abschluss { max-width: none; padding-top: 26px; text-align: center; }
	.mk-fehler__trigger { font-size: 1.125em; white-space: normal; text-wrap: balance; }   /* 18 px, mobil bis 2 Zeilen */
}

@media (prefers-reduced-motion: reduce) {
	.mk-fehler__zeile, .mk-fehler__wert, .mk-fehler__balken, .mk-fehler__saeule-wert { transition: none; }
}