/* ==========================================================================
   Preise · Kalkulationstabelle (acf/mk-kalkulation), 0.20.0 / 0.20.1
   Desktop ab 1280 px: Schwarz beginnt am linken Bildschirmrand (0.20.1, volle Breite statt 1440 mittig),
   die Tabelle endet rechts dort, wo in „Unterseiten · Branchen“ (mk-kinder V1) das Foto endet (gleiche Formel --mk-kalk-ende).
   Höhe nur aus dem Inhalt (kein vh). Tabelle immer 576 px hoch (Kopf 48 + 12 × 44).
   Tablet 901–1279 px: Schwarz oben, Tabelle volle Breite (min. 760 px).
   Mobil bis 900 px: Schwarz (Eyebrow, H2, Absatz) → Rechner → Schwarz (Bullets). Ohne JS: Tabelle waagrecht scrollbar.
   Feste px-Maße laut Design (kein zoom, keine em): auf jedem Laptop gleich.
   ========================================================================== */

.mk-section.mk-kalk {
	--mk-kalk-bullet: #EBD39A;
	--mk-kalk-nein: #B4533A;
	--mk-kalk-rand: rgba(214, 167, 66, 0.55);
	--mk-kalk-zart: rgba(214, 167, 66, 0.14);
	--mk-kalk-grau: #9A978E;
	--mk-kalk-links: calc(var(--mk-fs-body) * 29);   /* 0.20.2: breiter (vorher 25 em) · 522 px bei 1440, 580 bei 1920 */
	--mk-kalk-gap: 64px;
	/* Rechter Rand = Foto-Kante in mk-kinder V1 (blocks/mk-kinder/style.css, --mk-kinder-rand): 90 px bei 1440, 254 bei 1920 */
	--mk-kalk-kinder: max(var(--mk-max), calc(42.22 * var(--mk-fs-body) + max(500px, calc(var(--mk-fs-h2) * 11.36)) + 2 * var(--mk-gutter)));
	--mk-kalk-ende: max(var(--mk-gutter), calc((100% - var(--mk-kalk-kinder)) / 2 + var(--mk-gutter)));
	padding: 0;                      /* doppelte Klasse: sonst gewinnt .mk-section */
	background: var(--mk-white);
	font-size: 16px;
}

.mk-kalk__inner {
	display: grid;
	grid-template-columns: var(--mk-kalk-links) minmax(0, 1fr);
	column-gap: var(--mk-kalk-gap);
	padding-right: var(--mk-kalk-ende);   /* % im Rand = Sektionsbreite, wie in mk-kinder */
}

/* ---------- Links: Schwarz ---------- */
.mk-kalk__schwarz {
	position: relative;
	display: flex; flex-direction: column; justify-content: center;
	padding: 96px 2.8em 96px 3.9em;   /* 50 / 70 px bei 1440, in em: wächst mit der Schrift */
	background: var(--mk-black);
	color: var(--mk-white);
	font-size: var(--mk-fs-body);     /* 18 px bei 1440, bis 22 px: Schrift wie in den übrigen Sektionen (0.20.1) */
}
.mk-kalk__eyebrow {
	margin: 0;
	font-size: 0.75em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3;   /* 13,5 px */
	color: var(--mk-gold);
}
.mk-kalk__linie { display: block; width: 120px; height: 2px; margin: 18px 0 26px; background: var(--mk-gold); }
.mk-kalk__text { margin: 0; font-size: 1em; line-height: 1.65; color: var(--mk-white); }
.mk-kalk__text strong { color: var(--mk-white); }
.mk-kalk__text a.mk-link { color: var(--mk-gold); }
.mk-kalk__bullets { display: flex; flex-direction: column; gap: 0.8em; margin: 2em 0 0; padding: 0; list-style: none; }
.mk-kalk__bullets li { display: flex; align-items: flex-start; gap: 0.7em; font-size: 0.944em; line-height: 1.45; font-weight: 400; color: var(--mk-kalk-bullet); }   /* 17 px */
.mk-kalk__bullets .mk-icon { width: 1.25em; height: 1.25em; margin-top: 0.05em; color: var(--mk-gold); }

/* Hintergrundfoto unter schwarzem Schleier (0.20.2). Schleier 80 %: weißer Text bleibt bei jedem Foto über 4,5 : 1 */
.mk-kalk__foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--mk-black); }
.mk-kalk__foto-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }   /* absolut: das Foto bestimmt nie die Höhe */
.mk-kalk__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.86) 100%); }
.mk-kalk__schwarz > :not(.mk-kalk__foto) { position: relative; z-index: 1; }

/* ---------- Rechts: Weiß ---------- */
.mk-kalk__weiss { padding: 96px 0; text-align: center; min-width: 0; }
.mk-kalk .mk-kalk__h2 {          /* doppelte Klasse: sonst gewinnt .mk-h2 aus main.css */
	max-width: none; margin: 0 auto;
	font-size: calc(var(--mk-fs-h2) * 1.18); line-height: 1.04; color: var(--mk-ink);   /* 52 px bei 1440, wächst wie die H2 der anderen Sektionen (0.20.1) */
}
.mk-kalk__gold { color: var(--mk-gold-head); font-weight: 900; }
.mk-kalk__unter { margin: 16px 0 30px; font-size: 17px; font-style: italic; color: var(--mk-text); }

/* ---------- Tabelle ---------- */
.mk-kalk__tabelle-wrap { position: relative; }
.mk-kalk__tabelle {
	width: 100%; table-layout: fixed;
	border-collapse: separate; border-spacing: 0;
	border: 0; border-radius: 14px;
	box-shadow: 0 0 0 1px var(--mk-kalk-rand);   /* Rahmen ohne eigene Höhe: Tabelle genau 576 px (48 + 12 × 44) */
	background: var(--mk-white);
	font-variant-numeric: tabular-nums;
}
.mk-kalk__tabelle th, .mk-kalk__tabelle td {
	height: 44px; padding: 0 4px;
	border-top: 1px solid var(--mk-line);
	white-space: nowrap; text-align: center; vertical-align: middle;
	font-size: 16px; color: var(--mk-text-strong);   /* 0.20.1: größer (vorher 14) */
	transition: background-color 140ms ease, color 140ms ease;
}
.mk-kalk__tabelle thead th {
	height: 48px; border-top: 0;
	font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--mk-ink);
	background: #FBF9F4;
}
/* Stundenspalte rechtsbündig, immer eine Nachkommastelle (2,5 · 3,0 · 3,5): Komma steht in jeder Zeile an derselben Stelle (0.20.1) */
.mk-kalk__tabelle tbody th { font-weight: 700; color: var(--mk-ink); background: #FBF9F4; text-align: right; padding-right: 22px; }
.mk-kalk__tabelle thead th.mk-kalk__ecke { text-align: right; padding-right: 22px; }
.mk-kalk__tabelle thead th:first-child { border-top-left-radius: 14px; }
.mk-kalk__tabelle thead th:last-child { border-top-right-radius: 14px; }
.mk-kalk__tabelle tbody tr:last-child th { border-bottom-left-radius: 14px; }
.mk-kalk__tabelle tbody tr:last-child td:last-child { border-bottom-right-radius: 14px; }

.mk-kalk__preis {
	display: block; width: 100%; height: 100%; min-height: 43px; padding: 0;
	border: 0; background: none; cursor: pointer;
	font: inherit; font-variant-numeric: tabular-nums; color: inherit; white-space: nowrap;
}
.mk-kalk__preis:focus-visible { outline: 2px solid var(--mk-gold-dark); outline-offset: -3px; }
.mk-kalk__nein { font-size: 12.5px !important; color: var(--mk-kalk-nein) !important; }

/* Start: „Std/Wo“ gold · Hover: Zeile + Spalte zart, Kreuzung voll gold */
.mk-kalk__ecke.is-start { background: var(--mk-gold) !important; color: var(--mk-ink); }
.mk-kalk__tabelle .is-zeile, .mk-kalk__tabelle .is-spalte { background-color: var(--mk-kalk-zart); }
.mk-kalk__tabelle td.is-kreuz { background-color: var(--mk-gold); color: var(--mk-ink); font-weight: 700; }

/* ---------- Fenster bei Klick ---------- */
.mk-kalk__fenster {
	position: absolute; z-index: 5; width: 252px;
	padding: 12px 16px 14px;
	border: 1px solid var(--mk-kalk-rand); border-radius: 10px;
	background: var(--mk-white);
	box-shadow: 0 18px 40px -18px rgba(20, 20, 19, 0.35);
	text-align: left;
}
.mk-kalk__fenster[hidden] { display: none; }
.mk-kalk__fenster-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--mk-line); }
.mk-kalk__fenster-titel { margin: 0; font-size: 14px; font-weight: 700; color: var(--mk-ink); font-variant-numeric: tabular-nums; }
.mk-kalk__zu {
	display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: -6px;
	border: 0; border-radius: 50%; background: none; cursor: pointer;
	font-size: 20px; line-height: 1; color: var(--mk-text);
}
.mk-kalk__zu:hover, .mk-kalk__zu:focus-visible { background: var(--mk-kalk-zart); color: var(--mk-ink); }
.mk-kalk__werte { display: grid; gap: 4px; margin: 0; }
.mk-kalk__werte div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; line-height: 1.5; color: var(--mk-kalk-grau); }
.mk-kalk__werte dt, .mk-kalk__werte dd { margin: 0; }
.mk-kalk__werte dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-kalk__inner[data-vst="ja"] .mk-kalk__werte [data-art="netto"],
.mk-kalk__inner[data-vst="nein"] .mk-kalk__werte [data-art="brutto"] { color: var(--mk-ink); font-weight: 700; }

/* ---------- VSt-Knöpfe ---------- */
.mk-kalk__vst { margin-top: 26px; }
.mk-kalk__frage { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--mk-ink); }
.mk-kalk__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mk-kalk__knopf {
	/* Punkt links über beide Zeilen · Titel + Etikett oben · Beispiele darunter über die volle Breite (70 Zeichen = 2 Zeilen auch bei 1280) */
	display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-rows: auto auto;
	align-items: center; column-gap: 12px; row-gap: 3px;
	min-height: 72px; padding: 12px 16px;
	border: 1px solid var(--mk-line-gold-strong); border-radius: 10px;
	background: var(--mk-white); cursor: pointer; text-align: left;
	transition: background-color 160ms ease, border-color 160ms ease;
}
.mk-kalk__knopf:hover { border-color: var(--mk-gold-dark); }
.mk-kalk__knopf[aria-checked="true"] { border-color: var(--mk-gold-dark); background: var(--mk-kalk-zart); }
.mk-kalk__punkt { width: 18px; height: 18px; border: 2px solid var(--mk-gold); border-radius: 50%; background: var(--mk-white); }
.mk-kalk__knopf[aria-checked="true"] .mk-kalk__punkt { box-shadow: inset 0 0 0 3px var(--mk-white); background: var(--mk-gold-dark); border-color: var(--mk-gold-dark); }
.mk-kalk__punkt { grid-column: 1; grid-row: 1 / span 2; }
.mk-kalk__knopf-text { display: contents; }
.mk-kalk__knopf-titel { grid-column: 2; grid-row: 1; min-width: 0; }
.mk-kalk__knopf-bsp { grid-column: 2 / 4; grid-row: 2; }
.mk-kalk__etikett { grid-column: 3; grid-row: 1; justify-self: end; }
.mk-kalk__knopf-titel { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--mk-ink); }
.mk-kalk__knopf-bsp {
	font-size: 14px; line-height: 1.4; color: var(--mk-text-strong);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;   /* 70 Zeichen = 2 Zeilen */
}
.mk-kalk__etikett {
	padding: 4px 10px; border: 1px solid var(--mk-line-gold-strong); border-radius: 999px;
	font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--mk-gold-dark); background: var(--mk-white);
}
.mk-kalk__nur-mobil { display: none; }

/* Ohne JavaScript: VSt-Schalter hat keine Wirkung, daher ausgeblendet (Tabelle zeigt netto, Unterzeile sagt es) */
.mk-kalk__inner:not(.mk-kalk--js) .mk-kalk__vst { display: none; }

/* ---------- Mobil-Rechner (nur bis 900 px und nur mit JavaScript) ---------- */
.mk-kalk__rechner { display: none; }

/* ---------- 1280–1439 px: gleiche Anordnung, Spalten so, dass jede Zelle mind. 92 px hat (€ 11.881,80) ---------- */
@media (min-width: 1280px) and (max-width: 1439px) {
	/* Rechter Rand bleibt an der Foto-Kante von mk-kinder (90 px), daher hier links schmaler und Abstand kleiner */
	.mk-section.mk-kalk { --mk-kalk-links: 400px; --mk-kalk-gap: 32px; }
	.mk-kalk__schwarz { padding: 96px 28px 96px 40px; }
	.mk-kalk__bullets li { font-size: 0.889em; }   /* 16 px: 60 Zeichen bleiben 2 Zeilen */
	.mk-kalk__tabelle th, .mk-kalk__tabelle td { font-size: 15px; }
}

/* ---------- Tablet 901–1279 px: Schwarz oben, Tabelle volle Breite ---------- */
@media (min-width: 901px) and (max-width: 1279px) {
	.mk-kalk__inner { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
	.mk-kalk__schwarz { padding: 64px 40px; }
	.mk-kalk__schwarz::before { display: none; }
	.mk-kalk__weiss { padding: 64px 40px 72px; }
	.mk-kalk__tabelle { min-width: 760px; }
}

/* ---------- Mobil bis 900 px ---------- */
@media (max-width: 900px) {
	.mk-kalk__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding-right: 0; }
	.mk-kalk__schwarz, .mk-kalk__weiss { display: contents; }
	.mk-kalk__schwarz::before { display: none; }

	/* Reihenfolge: Schwarz (Eyebrow, H2, Absatz) → Weiß (Rechner) → Schwarz (Bullets).
	   Feste Zeilen (0.20.2), damit das Hintergrundfoto genau hinter dem oberen schwarzen Block (Zeilen 1–3) liegen kann */
	.mk-kalk__foto          { grid-column: 1; grid-row: 1 / 4; position: relative; inset: auto; z-index: 0; }
	.mk-kalk__kopf          { grid-row: 1; padding: 40px 22px 0; background: var(--mk-black); }
	.mk-kalk .mk-kalk__h2   { grid-row: 2; padding: 0 22px 16px; margin: 0; background: var(--mk-black); color: var(--mk-head-dark); font-size: 30px; text-align: left; }
	.mk-kalk__text          { grid-row: 3; padding: 0 22px 40px; background: var(--mk-black); font-size: 16px; }
	.mk-kalk__unter         { grid-row: 4; padding: 0 22px; }
	.mk-kalk__tabelle-wrap  { grid-row: 5; margin: 0 22px; overflow-x: auto; }
	.mk-kalk__vst           { grid-row: 6; margin: 0; padding: 32px 22px 0; }
	.mk-kalk__rechner       { grid-row: 7; }
	.mk-kalk__bullets       { grid-row: 8; margin: 0; padding: 36px 22px 44px; background: var(--mk-black); }
	.mk-kalk__schwarz > *, .mk-kalk__weiss > * { grid-column: 1; }   /* alle in Spalte 1, auch wo das Foto liegt (sonst weicht der Browser in eine zweite Spalte aus) */
	.mk-kalk__kopf, .mk-kalk .mk-kalk__h2, .mk-kalk__text { position: relative; z-index: 1; }
	.has-foto .mk-kalk__kopf, .mk-kalk .has-foto .mk-kalk__h2, .has-foto .mk-kalk__text { background: transparent; }

	.mk-kalk__linie { margin: 14px 0 18px; }
	.mk-kalk__unter { margin: 24px 0 16px; text-align: center; }
	.mk-kalk__tabelle { min-width: 760px; }

	.mk-kalk__frage { text-align: center; }
	/* Mobil untereinander: „Ja · exkl. 20 % MwSt“, darunter die Zielgruppen (0.20.1) */
	.mk-kalk__knoepfe { grid-template-columns: 1fr; gap: 10px; }
	.mk-kalk__knopf { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 0.1em; min-height: 48px; padding: 10px 14px; text-align: center; }
	.mk-kalk__knopf-titel { order: 0; }
	.mk-kalk__etikett { order: 1; }
	.mk-kalk__knopf-bsp { order: 2; flex-basis: 100%; font-size: 13px; -webkit-line-clamp: 3; }
	.mk-kalk__punkt, .mk-kalk__nur-pc { display: none; }
	.mk-kalk__nur-mobil { display: inline; }
	.mk-kalk__knopf-titel { font-size: 14px; white-space: nowrap; }
	.mk-kalk__etikett { padding: 0; border: 0; background: none; font-size: 14px; color: var(--mk-ink); }

	/* Mit JavaScript: Rechner statt Tabelle */
	.mk-kalk--js .mk-kalk__unter, .mk-kalk--js .mk-kalk__tabelle-wrap { display: none; }
	.mk-kalk--js .mk-kalk__rechner { display: block; padding: 20px 22px 40px; text-align: left; }
	.mk-kalk__regler { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: 14px; }
	.mk-kalk__regler label { font-size: 15px; font-weight: 700; color: var(--mk-ink); }
	.mk-kalk__regler output { font-size: 15px; font-weight: 700; color: var(--mk-gold-dark); font-variant-numeric: tabular-nums; }
	.mk-kalk__regler input[type="range"] { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--mk-gold); cursor: pointer; }

	.mk-kalk__ergebnis {
		display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 10px 12px;
		margin-top: 18px; padding: 16px;
		border: 1px solid var(--mk-kalk-rand); border-radius: 12px; background: var(--mk-white);
		font-variant-numeric: tabular-nums;
	}
	.mk-kalk__e-kopf { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: right; color: var(--mk-kalk-grau); }
	.mk-kalk__e-zeile { font-size: 14px; font-weight: 700; color: var(--mk-ink); }
	.mk-kalk__e-wert { font-size: 16px; font-weight: 700; text-align: right; white-space: nowrap; color: var(--mk-kalk-grau); }
	.mk-kalk__inner[data-vst="ja"] .mk-kalk__ergebnis [data-art="netto"],
	.mk-kalk__inner[data-vst="nein"] .mk-kalk__ergebnis [data-art="brutto"] { color: var(--mk-ink); }
}
@media (max-width: 360px) {
	.mk-kalk__knopf-titel, .mk-kalk__etikett { font-size: 13px; }
	.mk-kalk__e-wert { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-kalk__tabelle th, .mk-kalk__tabelle td, .mk-kalk__knopf { transition: none; }
}