/*
 * Mild Richtpreiskalkulator
 *
 * Die Gestaltung stammt aus dem Entwurf von Claude Design (23.09.2026). Die
 * Klassennamen sind von dort unveraendert uebernommen (rk-steps, rk-grid,
 * rk-summary …), damit sich Entwurf und Umsetzung nebeneinander legen lassen.
 *
 * Farben: keine ist hier fest eingetippt, alle kommen aus den globalen Farben
 * des Design Systems. Die Werte hinter dem Komma sind Fallbacks.
 * Achtung: --e-global-color-secondary ist bei Mild Stein das Sekundaergrau,
 * NICHT der Akzent. Das Blau steht in primary.
 *
 * Abstaende und Schriftgroessen sind die Tokens des Entwurfs, hier lokal im
 * Rahmen .mrk gesetzt, weil die Website sie nicht als CSS-Variablen fuehrt.
 *
 * Warum steht vor jedem Selektor noch einmal .mrk?
 * Auf der Seite liegen Stylesheets, die NACH diesem geladen werden, unter
 * anderem die reset.css des Themes mit Regeln auf button und auf *. Gegen einen
 * einklassigen Selektor gewinnen die. Mit dem Rahmen davor hat jede Regel zwei
 * Klassen und setzt sich durch, ohne ein einziges !important.
 */

.mrk {
	/* Farben aus dem Design System */
	--rk-blau: var(--e-global-color-primary, #003770);
	--rk-blau-hover: var(--e-global-color-msblauhover, #002F61);
	--rk-blau-press: var(--e-global-color-msblaupress, #002850);
	--rk-blau-soft: var(--e-global-color-msblausoft, #E6ECF3);
	--rk-blau-softer: var(--e-global-color-msblausofter, #F3F6F9);
	--rk-grau: var(--e-global-color-secondary, #C6C6C6);
	--rk-grau-700: var(--e-global-color-mstextmuted, #6F7276);
	--rk-grau-600: var(--e-global-color-mstextcaption, #8B8D90);
	--rk-grau-400: #D8D8D8;
	--rk-grau-300: var(--e-global-color-mslinie, #E6E6E6);
	--rk-grau-200: var(--e-global-color-msbildgrund, #F0F0F0);
	--rk-grau-100: var(--e-global-color-msflaeche, #F7F7F7);
	--rk-ink: var(--e-global-color-text, #1F242A);
	--rk-weiss: var(--e-global-color-msweiss, #FFFFFF);
	--rk-fehler: #8C2F39;

	/* Abgeleitete Rollen */
	--rk-linie: var(--rk-grau-300);
	--rk-linie-kraeftig: var(--rk-grau);
	--rk-ring: 0 0 0 3px rgba(0, 55, 112, .22);
	--rk-schatten-2: 0 6px 18px rgba(0, 55, 112, .07);
	--rk-schatten-3: 0 16px 40px rgba(0, 55, 112, .10);

	/* Abstaende */
	--rk-1: 4px;  --rk-2: 8px;  --rk-3: 12px; --rk-4: 16px;
	--rk-5: 20px; --rk-6: 24px; --rk-7: 30px; --rk-8: 40px;
	--rk-9: 50px; --rk-11: 80px;

	/* Schrift */
	--rk-font-h: var(--e-global-typography-msh4-font-family, "Gabarito", system-ui, sans-serif);
	--rk-fs-h2: 36px;
	--rk-fs-h4: 20px;
	--rk-fs-body: 17px;
	--rk-fs-small: 15px;
	--rk-fs-caption: 13px;
	--rk-fs-eyebrow: 12px;

	--rk-dur: 320ms;
	--rk-ease: cubic-bezier(.22, .61, .36, 1);

	color: var(--rk-ink);
}

.mrk *,
.mrk *::before,
.mrk *::after { box-sizing: border-box; }

.mrk .rk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rk-9); }
.mrk .rk > * { min-width: 0; }

.mrk .rk input[type="radio"],
.mrk .rk-zustimmung input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.mrk .rk-svg { flex: 0 0 auto; display: block; }

/* --- Meldung ueber dem Formular --- */

.mrk .rk-meldung {
	padding: var(--rk-4) var(--rk-5);
	border: 1px solid var(--rk-fehler);
	background: #F6ECEC;
	color: var(--rk-fehler);
	font-size: var(--rk-fs-small);
	font-weight: 600;
}

.mrk .rk-meldung:focus { outline: none; }

/* --- Schrittleiste --- */

.mrk .rk-steps {
	position: relative;
	background: var(--rk-weiss);
	border-bottom: 1px solid var(--rk-linie);
}

.mrk .rk-steps ol {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.mrk .rk-step { min-width: 0; }

.mrk .rk-step button {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--rk-3);
	padding: var(--rk-5) var(--rk-3) var(--rk-5) 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--rk-fs-small);
	font-weight: 500;
	color: var(--rk-grau-600);
	text-align: left;
	cursor: default;
	transition: color var(--rk-dur) var(--rk-ease);
}

.mrk .rk-step button::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--rk-blau);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 600ms cubic-bezier(.16, .68, .32, 1);
}

.mrk .rk-step-nr {
	position: relative;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rk-linie-kraeftig);
	background: var(--rk-weiss);
	font-family: var(--rk-font-h);
	font-size: var(--rk-fs-small);
	font-weight: 600;
	line-height: 1;
	color: var(--rk-grau-600);
	transition: background var(--rk-dur) var(--rk-ease), border-color var(--rk-dur) var(--rk-ease), color var(--rk-dur) var(--rk-ease);
}

.mrk .rk-step-haken { display: none; }

.mrk .rk-step.is-done button { color: var(--rk-ink); cursor: pointer; }
.mrk .rk-step.is-done button:hover { color: var(--rk-blau); }
.mrk .rk-step.is-done button:hover .rk-step-nr { border-color: var(--rk-blau); }

.mrk .rk-step.is-done .rk-step-nr {
	background: var(--rk-blau-soft);
	border-color: var(--rk-blau-soft);
	color: var(--rk-blau);
}

.mrk .rk-step.is-done .rk-step-zahl { display: none; }
.mrk .rk-step.is-done .rk-step-haken { display: inline-flex; }

.mrk .rk-step.is-active button { color: var(--rk-blau); font-weight: 600; }
.mrk .rk-step.is-active button::after { transform: scaleX(1); }

.mrk .rk-step.is-active .rk-step-nr {
	background: var(--rk-blau);
	border-color: var(--rk-blau);
	color: var(--rk-weiss);
}

.mrk .rk-step button:focus-visible { outline: none; }
.mrk .rk-step button:focus-visible .rk-step-nr { box-shadow: var(--rk-ring); }

/* --- Zweispaltig: Auswahl links, Zusammenfassung rechts --- */

.mrk .rk-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--rk-11);
	align-items: start;
}

.mrk .rk-main { display: grid; gap: var(--rk-9); min-width: 0; }

.mrk .rk-panel {
	display: grid;
	gap: var(--rk-9);
	animation: rk-in 600ms cubic-bezier(.16, .68, .32, 1) both;
}

.mrk .rk-panel[hidden] { display: none; }

@keyframes rk-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

.mrk .rk-kopf { display: grid; gap: var(--rk-3); }

.mrk .rk-eyebrow {
	font-size: var(--rk-fs-eyebrow);
	letter-spacing: .16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--rk-grau-700);
}

.mrk .rk-titel {
	margin: 0;
	font-family: var(--rk-font-h);
	font-size: var(--rk-fs-h2);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--rk-blau);
}

/* --- Feld --- */

.mrk .rk-feld {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: grid;
	gap: var(--rk-4);
}

.mrk .rk-label {
	display: block;
	padding: 0;
	margin: 0 0 var(--rk-1);
	font-family: var(--rk-font-h);
	font-size: var(--rk-fs-h4);
	font-weight: 600;
	line-height: 1.3;
	color: var(--rk-blau);
}

.mrk .rk-feldlabel {
	display: block;
	font-size: var(--rk-fs-small);
	font-weight: 500;
	color: var(--rk-ink);
}

.mrk .rk-pflicht {
	font-size: var(--rk-fs-small);
	font-weight: 400;
	color: var(--rk-grau-700);
}

.mrk .rk-hint {
	margin: 0;
	max-width: 68ch;
	font-size: var(--rk-fs-small);
	line-height: 1.6;
	color: var(--rk-grau-700);
}

.mrk .rk-hint[hidden] { display: none; }

.mrk .rk-fehler {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--rk-2);
	font-size: var(--rk-fs-small);
	font-weight: 600;
	color: var(--rk-blau);
}

.mrk .rk-fehler[hidden] { display: none; }

.mrk .rk-eingabe { display: grid; gap: var(--rk-2); min-width: 0; }

.mrk .rk-input {
	width: 100%;
	padding: var(--rk-3) var(--rk-4);
	border: 1px solid var(--rk-linie-kraeftig);
	background: var(--rk-weiss);
	color: var(--rk-ink);
	font: inherit;
	font-size: var(--rk-fs-body);
	transition: border-color var(--rk-dur) var(--rk-ease), box-shadow var(--rk-dur) var(--rk-ease);
}

.mrk .rk-input:hover { border-color: var(--rk-blau); }
.mrk .rk-input:focus,
.mrk .rk-input:focus-visible { outline: none; border-color: var(--rk-blau); box-shadow: var(--rk-ring); }
.mrk .rk-textarea { resize: vertical; line-height: 1.6; }
.mrk .has-error .rk-input { border-color: var(--rk-fehler); }

/* --- Steinkacheln --- */

.mrk .rk-steine {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rk-5);
	align-items: stretch;
	/* Alle Kacheln gleich hoch, ueber alle Reihen hinweg. */
	grid-auto-rows: 1fr;
}

.mrk .rk-stein { position: relative; background: var(--rk-weiss); min-width: 0; height: 100%; }

.mrk .rk-stein-wahl {
	display: flex;
	flex-direction: column;
	height: 100%;
	cursor: pointer;
	border: 1px solid var(--rk-linie);
	background: var(--rk-weiss);
	transition: border-color var(--rk-dur) var(--rk-ease), box-shadow var(--rk-dur) var(--rk-ease);
}

.mrk .rk-stein-bild {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--rk-grau-200);
	flex: 0 0 auto;
}

.mrk .rk-stein-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms var(--rk-ease);
}

.mrk .rk-stein--ohne-foto .rk-stein-bild { background: var(--rk-grau-100); }

/* Der Balken nimmt den Rest der Hoehe, der Titel steht senkrecht mittig: oben und unten gleich viel Abstand (Wunsch Raphael 16.10.2026). */
.mrk .rk-stein-balken {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	flex: 1 1 auto;
	padding: var(--rk-4);
	min-height: 76px;
	border-top: 1px solid var(--rk-linie);
	background: var(--rk-weiss);
	transition: background var(--rk-dur) var(--rk-ease), border-color var(--rk-dur) var(--rk-ease);
}

.mrk .rk-stein-name {
	font-family: var(--rk-font-h);
	font-size: var(--rk-fs-body);
	font-weight: 600;
	line-height: 1.3;
	color: var(--rk-blau);
	transition: color var(--rk-dur) var(--rk-ease);
}

.mrk .rk-stein-zusatz {
	font-size: var(--rk-fs-caption);
	line-height: 1.5;
	color: var(--rk-grau-600);
	transition: color var(--rk-dur) var(--rk-ease);
}

.mrk .rk-stein-wahl:hover { border-color: var(--rk-linie-kraeftig); box-shadow: var(--rk-schatten-2); }
.mrk .rk-stein-wahl:hover .rk-stein-bild img { transform: scale(1.04); }

.mrk .rk-stein-check {
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rk-blau);
	color: var(--rk-weiss);
	opacity: 0;
	transform: scale(.8);
	transition: opacity var(--rk-dur) var(--rk-ease), transform var(--rk-dur) var(--rk-ease);
	pointer-events: none;
}

.mrk .rk-stein.is-selected .rk-stein-wahl { border-color: var(--rk-blau); box-shadow: inset 0 0 0 2px var(--rk-blau); }
.mrk .rk-stein.is-selected .rk-stein-balken { background: var(--rk-blau); border-top-color: var(--rk-blau); }
.mrk .rk-stein.is-selected .rk-stein-name { color: var(--rk-weiss); }
.mrk .rk-stein.is-selected .rk-stein-zusatz { color: rgba(255, 255, 255, .8); }
.mrk .rk-stein.is-selected .rk-stein-check { opacity: 1; transform: none; }
.mrk .rk-stein-wahl:has(input:focus-visible) { box-shadow: var(--rk-ring); border-color: var(--rk-blau); }

/* Das Info-Zeichen liegt ueber dem label, waehlt aber nichts aus. */
.mrk .rk-info,
.mrk .rk-info:hover,
.mrk .rk-info:focus,
.mrk .rk-info:focus-visible,
.mrk .rk-info:active {
	position: absolute;
	top: var(--rk-3);
	right: var(--rk-3);
	z-index: 3;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--rk-linie);
	border-radius: 0;
	cursor: pointer;
	transition: background var(--rk-dur) var(--rk-ease), border-color var(--rk-dur) var(--rk-ease);
}

.mrk .rk-info { background: var(--rk-weiss); color: var(--rk-blau); }

.mrk .rk-info:hover,
.mrk .rk-info:focus,
.mrk .rk-info:focus-visible { background: var(--rk-blau-soft); border-color: var(--rk-blau); color: var(--rk-blau); }

.mrk .rk-info:active { background: var(--rk-blau); border-color: var(--rk-blau); color: var(--rk-weiss); }
.mrk .rk-info:focus-visible { outline: none; box-shadow: var(--rk-ring); }

.mrk .rk-info-i {
	font-family: var(--rk-font-h);
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
}

/* --- Auswahlkarten --- */

.mrk .rk-options {
	display: grid;
	gap: var(--rk-4);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.mrk .rk-option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rk-4);
	min-height: 72px;
	padding: var(--rk-5);
	background: var(--rk-weiss);
	border: 1px solid var(--rk-linie-kraeftig);
	cursor: pointer;
	transition: background var(--rk-dur) var(--rk-ease), border-color var(--rk-dur) var(--rk-ease), color var(--rk-dur) var(--rk-ease), box-shadow var(--rk-dur) var(--rk-ease);
}

.mrk .rk-option[hidden] { display: none; }

.mrk .rk-option-name {
	font-size: var(--rk-fs-body);
	font-weight: 500;
	line-height: 1.3;
	color: var(--rk-ink);
	transition: color var(--rk-dur) var(--rk-ease);
}

.mrk .rk-option-mark {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rk-linie-kraeftig);
	color: transparent;
	transition: background var(--rk-dur) var(--rk-ease), border-color var(--rk-dur) var(--rk-ease), color var(--rk-dur) var(--rk-ease);
}

.mrk .rk-option:hover { border-color: var(--rk-blau); background: var(--rk-blau-softer); }
.mrk .rk-option:has(input:focus-visible) { box-shadow: var(--rk-ring); border-color: var(--rk-blau); }

.mrk .rk-option.is-selected { background: var(--rk-blau); border-color: var(--rk-blau); }
.mrk .rk-option.is-selected:hover { background: var(--rk-blau-hover); border-color: var(--rk-blau-hover); }
.mrk .rk-option.is-selected .rk-option-name { color: var(--rk-weiss); font-weight: 600; }
.mrk .rk-option.is-selected .rk-option-mark { background: var(--rk-weiss); border-color: var(--rk-weiss); color: var(--rk-blau); }

/* --- Flaeche: grosses Feld plus Regler --- */

.mrk .rk-flaeche {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--rk-8);
	align-items: center;
}

.mrk .rk-flaeche-eingabe {
	display: flex;
	align-items: baseline;
	gap: var(--rk-2);
	border: 1px solid var(--rk-linie-kraeftig);
	background: var(--rk-weiss);
	padding: var(--rk-4) var(--rk-5);
	cursor: text;
	transition: border-color var(--rk-dur) var(--rk-ease), box-shadow var(--rk-dur) var(--rk-ease);
}

.mrk .rk-flaeche-eingabe:focus-within { border-color: var(--rk-blau); box-shadow: var(--rk-ring); }

.mrk .rk-flaeche-eingabe input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: none;
	padding: 0;
	font-family: var(--rk-font-h);
	font-size: var(--rk-fs-h2);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--rk-blau);
}

.mrk .rk-flaeche-eingabe input::placeholder { color: var(--rk-linie-kraeftig); }

.mrk .rk-flaeche-einheit {
	font-family: var(--rk-font-h);
	font-size: var(--rk-fs-h4);
	color: var(--rk-grau-700);
}

.mrk .has-error .rk-flaeche-eingabe { border-color: var(--rk-fehler); }

.mrk .rk-slider { display: grid; gap: var(--rk-2); }
.mrk .rk-slider-bahn { position: relative; height: 44px; }

.mrk .rk-slider-spur,
.mrk .rk-slider-fuellung {
	position: absolute;
	left: 0;
	top: 20px;
	height: 4px;
	pointer-events: none;
}

.mrk .rk-slider-spur { right: 0; background: var(--rk-linie-kraeftig); }
.mrk .rk-slider-fuellung { width: calc((100% - 24px) * var(--rk-p, 0) + 12px); background: var(--rk-blau); }

.mrk .rk-slider-griff {
	position: absolute;
	top: 10px;
	left: calc((100% - 24px) * var(--rk-p, 0));
	width: 24px;
	height: 24px;
	background: var(--rk-blau);
	border: 3px solid var(--rk-weiss);
	box-shadow: 0 0 0 1px var(--rk-blau);
	pointer-events: none;
	transition: box-shadow var(--rk-dur) var(--rk-ease);
}

.mrk .rk-slider-bahn input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.mrk .rk-slider-bahn:focus-within .rk-slider-griff { box-shadow: 0 0 0 1px var(--rk-blau), var(--rk-ring); }

.mrk .rk-slider-skala {
	display: flex;
	justify-content: space-between;
	font-size: var(--rk-fs-caption);
	color: var(--rk-grau-600);
}

/* --- Kontakt --- */

.mrk .rk-panel .rk-kontakt-reihe {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rk-6);
}

.mrk .rk-upload {
	display: grid;
	justify-items: center;
	gap: var(--rk-4);
	padding: var(--rk-9) var(--rk-6);
	background: var(--rk-grau-100);
	border: 1px solid var(--rk-linie);
	text-align: center;
	transition: background var(--rk-dur) var(--rk-ease), border-color var(--rk-dur) var(--rk-ease);
}

.mrk .rk-upload.is-drag { background: var(--rk-blau-soft); border-color: var(--rk-blau); }
.mrk .rk-upload-text { margin: 0; font-size: var(--rk-fs-body); color: var(--rk-ink); }

.mrk .rk-dateien { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rk-2); }
.mrk .rk-dateien[hidden] { display: none; }

.mrk .rk-dateien li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rk-4);
	padding: var(--rk-3) var(--rk-4);
	border: 1px solid var(--rk-linie);
	font-size: var(--rk-fs-small);
	color: var(--rk-ink);
}

.mrk .rk-dateien li span { min-width: 0; overflow-wrap: anywhere; }

.mrk .rk-dateien button,
.mrk .rk-dateien button:hover,
.mrk .rk-dateien button:focus,
.mrk .rk-dateien button:active {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: calc(var(--rk-3) * -1) calc(var(--rk-4) * -1) calc(var(--rk-3) * -1) 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	border-left: 1px solid var(--rk-linie);
	color: var(--rk-blau);
	cursor: pointer;
}

.mrk .rk-zustimmung { padding-top: var(--rk-2); }

.mrk .rk-haken {
	display: flex;
	align-items: flex-start;
	gap: var(--rk-3);
	cursor: pointer;
}

.mrk .rk-haken-mark {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rk-linie-kraeftig);
	background: var(--rk-weiss);
	color: transparent;
	transition: background var(--rk-dur) var(--rk-ease), border-color var(--rk-dur) var(--rk-ease), color var(--rk-dur) var(--rk-ease);
}

.mrk .rk-haken input:checked ~ .rk-haken-mark {
	background: var(--rk-blau);
	border-color: var(--rk-blau);
	color: var(--rk-weiss);
}

.mrk .rk-haken:hover .rk-haken-mark { border-color: var(--rk-blau); }
.mrk .rk-haken input:focus-visible ~ .rk-haken-mark { box-shadow: var(--rk-ring); border-color: var(--rk-blau); }
.mrk .has-error .rk-haken-mark { border-color: var(--rk-fehler); }

.mrk .rk-haken-text { font-size: var(--rk-fs-small); line-height: 1.6; color: var(--rk-ink); }
.mrk .rk-zustimmung a { color: var(--rk-blau); text-decoration: underline; text-underline-offset: 3px; }
.mrk .rk-zustimmung a:hover { color: var(--rk-blau-press); }

/* --- Schaltflaechen ---
   Alle Zustaende ausgeschrieben, sonst schlagen die Farben des Themes durch. */

.mrk .rk-btn,
.mrk .rk-btn:hover,
.mrk .rk-btn:focus,
.mrk .rk-btn:focus-visible,
.mrk .rk-btn:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rk-2);
	padding: 14px 28px;
	border-radius: 0;
	font: inherit;
	font-size: var(--rk-fs-small);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--rk-dur) var(--rk-ease), border-color var(--rk-dur) var(--rk-ease), color var(--rk-dur) var(--rk-ease);
}

.mrk .rk-btn { border: 1px solid var(--rk-blau); background: var(--rk-blau); color: var(--rk-weiss); }

.mrk .rk-btn:hover,
.mrk .rk-btn:focus,
.mrk .rk-btn:focus-visible { border-color: var(--rk-blau-hover); background: var(--rk-blau-hover); color: var(--rk-weiss); }

.mrk .rk-btn:active { border-color: var(--rk-blau-press); background: var(--rk-blau-press); color: var(--rk-weiss); }
.mrk .rk-btn:focus-visible { outline: none; box-shadow: var(--rk-ring); }

.mrk .rk-btn--ghost { background: transparent; border-color: transparent; color: var(--rk-blau); padding-left: 0; }
.mrk .rk-btn--ghost:hover,
.mrk .rk-btn--ghost:focus,
.mrk .rk-btn--ghost:focus-visible { background: transparent; border-color: transparent; color: var(--rk-blau-hover); text-decoration: underline; text-underline-offset: 3px; }
.mrk .rk-btn--ghost:active { background: transparent; border-color: transparent; color: var(--rk-blau-press); }

.mrk .rk-btn--sekundaer { background: var(--rk-weiss); border-color: var(--rk-blau); color: var(--rk-blau); }
.mrk .rk-btn--sekundaer:hover,
.mrk .rk-btn--sekundaer:focus,
.mrk .rk-btn--sekundaer:focus-visible { background: var(--rk-blau); border-color: var(--rk-blau); color: var(--rk-weiss); }
.mrk .rk-btn--sekundaer:active { background: var(--rk-blau-press); border-color: var(--rk-blau-press); color: var(--rk-weiss); }

.mrk .rk-btn[hidden] { display: none; }
.mrk .rk-btn:disabled { opacity: .45; cursor: not-allowed; }

.mrk .rk-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--rk-4);
	padding-top: var(--rk-7);
	border-top: 1px solid var(--rk-linie);
}

.mrk .rk-nav-platz { flex: 1 1 auto; }

/* --- Ihre Auswahl --- */

.mrk .rk-summary { position: sticky; top: 120px; }
.mrk .rk-summary-toggle { display: none; }

.mrk .rk-summary-body {
	display: grid;
	gap: var(--rk-5);
	padding: var(--rk-7);
	background: var(--rk-grau-100);
}

.mrk .rk-summary-titel {
	margin: 0;
	font-family: var(--rk-font-h);
	font-size: var(--rk-fs-h4);
	font-weight: 600;
	color: var(--rk-blau);
}

.mrk .rk-summary-bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--rk-grau-200); }
.mrk .rk-summary-bild[hidden] { display: none; }
.mrk .rk-summary-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mrk .rk-summary-leer { margin: 0; font-size: var(--rk-fs-small); color: var(--rk-grau-700); }

.mrk .rk-summary-gruppe {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--rk-3);
	align-items: start;
	padding-top: var(--rk-4);
	margin-top: var(--rk-4);
	border-top: 1px solid var(--rk-grau-400);
}

.mrk .rk-summary-gruppe:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mrk .rk-summary-gruppe dl { margin: 0; display: grid; gap: var(--rk-3); }
.mrk .rk-summary-gruppe dl div { display: grid; gap: 2px; }
.mrk .rk-summary-gruppe dt { font-size: var(--rk-fs-caption); color: var(--rk-grau-600); }
.mrk .rk-summary-gruppe dd { margin: 0; font-size: var(--rk-fs-small); font-weight: 600; color: var(--rk-ink); }

.mrk .rk-summary-edit,
.mrk .rk-summary-edit:hover,
.mrk .rk-summary-edit:focus,
.mrk .rk-summary-edit:active {
	background: none;
	border: 0;
	padding: 4px 0;
	font: inherit;
	font-size: var(--rk-fs-small);
	font-weight: 600;
	color: var(--rk-blau);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.mrk .rk-summary-edit:hover { color: var(--rk-blau-press); }

.mrk .rk-summary-zahl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	margin-left: var(--rk-3);
	padding: 0 6px;
	background: var(--rk-blau);
	color: var(--rk-weiss);
	font-size: var(--rk-fs-caption);
	font-weight: 600;
}

.mrk .rk-summary-zahl[hidden] { display: none; }

/* --- Honigtoepfe --- */

.mrk .rk-honigtopf {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* --- Bestaetigung --- */

.mrk--ergebnis:focus { outline: none; }

.mrk .rk-danke { display: grid; justify-items: start; gap: var(--rk-4); max-width: 560px; }

.mrk .rk-danke-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rk-blau);
	color: var(--rk-weiss);
}

.mrk .rk-danke h2 {
	margin: 0;
	font-family: var(--rk-font-h);
	font-size: var(--rk-fs-h2);
	font-weight: 600;
	line-height: 1.15;
	color: var(--rk-blau);
}

.mrk .rk-danke p { margin: 0; font-size: var(--rk-fs-body); line-height: 1.7; color: var(--rk-ink); }

.mrk .rk-danke-liste {
	margin: var(--rk-4) 0 0;
	display: grid;
	gap: var(--rk-3);
	width: 100%;
	padding-top: var(--rk-5);
	border-top: 1px solid var(--rk-linie);
}

.mrk .rk-danke-liste div { display: grid; gap: 2px; }
.mrk .rk-danke-liste dt { font-size: var(--rk-fs-caption); color: var(--rk-grau-600); }
.mrk .rk-danke-liste dd { margin: 0; font-size: var(--rk-fs-small); font-weight: 600; color: var(--rk-ink); }

/* --- Testausgaben ---
   Gehoeren vor dem Go-Live weg, zusammen mit dem Filter mrk_testausgabe. */

.mrk .rk-testpreis {
	margin-top: var(--rk-9);
	padding: var(--rk-7);
	border: 2px dashed #B08900;
	background: #FFFDF4;
}

.mrk .rk-testpreis__vorspann {
	margin: 0 0 var(--rk-2);
	font-size: var(--rk-fs-eyebrow);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: #8A6D00;
}

.mrk .rk-testpreis__zahl {
	margin: 0 0 var(--rk-3);
	font-family: var(--rk-font-h);
	font-size: var(--rk-fs-h2);
	font-weight: 700;
	line-height: 1.2;
	color: var(--rk-blau);
}

.mrk .rk-testpreis__text { margin: 0; font-size: var(--rk-fs-small); color: var(--rk-grau-700); }

.mrk .mrk-testausgabe {
	margin: var(--rk-5) 0 0;
	padding: var(--rk-5);
	border: 2px dashed #B08900;
	background: #FFFDF4;
	font-size: var(--rk-fs-small);
	color: var(--rk-ink);
}

.mrk .mrk-testausgabe__titel {
	margin: 0 0 var(--rk-4);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: var(--rk-fs-eyebrow);
	color: #8A6D00;
}

.mrk .mrk-testausgabe__tabelle { width: 100%; border-collapse: collapse; margin: 0 0 var(--rk-4); }

.mrk .mrk-testausgabe__tabelle th,
.mrk .mrk-testausgabe__tabelle td {
	padding: 7px 10px;
	border-bottom: 1px solid #E8DFC0;
	text-align: left;
	vertical-align: top;
	color: var(--rk-ink);
}

.mrk .mrk-testausgabe__tabelle thead th { font-size: var(--rk-fs-caption); text-transform: uppercase; letter-spacing: .04em; }
.mrk .mrk-testausgabe__tabelle tfoot th { border-top: 2px solid #B08900; border-bottom: none; }
.mrk .mrk-testausgabe .mrk-rechts { text-align: right; white-space: nowrap; }
.mrk .mrk-testausgabe__liste { margin: 0 0 var(--rk-3); padding-left: 18px; display: grid; gap: var(--rk-1); }
.mrk .mrk-testausgabe__warnung { margin: 0 0 var(--rk-3); font-weight: 700; color: var(--rk-fehler); }
.mrk .mrk-testausgabe__fuss { margin: 0; font-size: var(--rk-fs-caption); color: var(--rk-grau-700); }
.mrk .mrk-testausgabe code { background: #F3ECD6; padding: 2px 5px; }

/* --- Tablet, bis 1024 px ---
   Zusammenfassung wird zur Leiste unten, Schrittleiste rollt waagrecht. */

@media (max-width: 1024px) {
	.mrk .rk-steps ol {
		display: flex;
		gap: var(--rk-6);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.mrk .rk-steps ol::-webkit-scrollbar { display: none; }
	.mrk .rk-step { flex: 0 0 auto; }
	.mrk .rk-step button { padding-right: 0; white-space: nowrap; }

	.mrk .rk-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.mrk .rk-steine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rk-4); }
	.mrk .rk-info { width: 44px; height: 44px; top: var(--rk-2); right: var(--rk-2); }
	.mrk .rk-option { padding: var(--rk-4) var(--rk-5); }
	.mrk .rk-flaeche { grid-template-columns: minmax(0, 1fr); gap: var(--rk-5); }
	.mrk .rk-summary-edit { min-height: 44px; padding: 0; }

	.mrk .rk-summary {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 70;
		background: var(--rk-weiss);
		border-top: 1px solid var(--rk-linie-kraeftig);
		box-shadow: var(--rk-schatten-3);
	}

	.mrk .rk-summary-toggle,
	.mrk .rk-summary-toggle:hover,
	.mrk .rk-summary-toggle:focus,
	.mrk .rk-summary-toggle:active {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		height: 64px;
		padding: 0 20px;
		background: none;
		border: 0;
		font: inherit;
		font-family: var(--rk-font-h);
		font-size: var(--rk-fs-body);
		font-weight: 600;
		color: var(--rk-blau);
		cursor: pointer;
	}

	.mrk .rk-summary-toggle > span { display: flex; align-items: center; }

	.mrk .rk-summary-body {
		display: none;
		max-height: calc(100dvh - 88px - 64px - 24px);
		overflow: auto;
		padding: 0 20px var(--rk-6);
		background: var(--rk-weiss);
	}

	.mrk .rk-summary.is-open .rk-summary-body { display: grid; }
	.mrk .rk-summary-titel { display: none; }
	.mrk .rk-summary-bild { aspect-ratio: 3 / 1; }
}

/* --- Handy, bis 767 px --- */

@media (max-width: 767px) {
	.mrk .rk { gap: var(--rk-7); }
	.mrk .rk-steps ol { gap: var(--rk-5); }
	.mrk .rk-titel { font-size: 28px; }
	.mrk .rk-steine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rk-3); }
	.mrk .rk-stein-balken { padding: var(--rk-3); min-height: 64px; }
	.mrk .rk-stein-name { font-size: var(--rk-fs-small); }
	.mrk .rk-options { grid-template-columns: minmax(0, 1fr); gap: var(--rk-3); }
	.mrk .rk-option { min-height: 64px; padding: var(--rk-4); }
	.mrk .rk-panel .rk-kontakt-reihe { grid-template-columns: minmax(0, 1fr); }
	.mrk .rk-upload { padding: var(--rk-6) var(--rk-5); }
	.mrk .rk-upload-text { display: none; }
	.mrk .rk-flaeche-eingabe input { font-size: 28px; }

	.mrk .rk-nav { flex-direction: column-reverse; align-items: stretch; gap: var(--rk-3); }
	.mrk .rk-nav-platz { display: none; }
	.mrk .rk-nav .rk-nav-weiter { width: 100%; min-height: 48px; }
	.mrk .rk-nav .rk-nav-zurueck { align-self: center; min-height: 44px; }
}

/* --- Ohne JavaScript stehen alle Schritte untereinander --- */

.mrk:not(.is-js) .rk-steps,
.mrk:not(.is-js) .rk-summary,
.mrk:not(.is-js) .rk-nav-zurueck { display: none; }

@media (prefers-reduced-motion: reduce) {
	.mrk .rk-panel { animation: none; }
	.mrk * { transition: none !important; }
}

/* --- Bis 1024 px: Leiste "Ihre Auswahl" unten (Wunsch Raphael 16.10.2026) ---
   1. Die Seite bekommt unten so viel Platz wie die Leiste, Impressum, AGB und Datenschutz bleiben erreichbar.
   2. Offen scrollt die Zusammenfassung in sich, die Seite dahinter steht still.
   3. Der runde Schnellkontakt-Knopf (.ms-sidebar) sitzt ueber der Leiste und verschwindet, solange sie offen ist. */
@media (max-width: 1024px) {
	body:has(.mrk.is-js .rk-summary) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
	.mrk .rk-summary { padding-bottom: env(safe-area-inset-bottom); }
	.mrk .rk-summary.is-open {
		display: flex;
		flex-direction: column;
		max-height: calc(100dvh - var(--ms-header-h, 88px));
	}
	.mrk .rk-summary.is-open .rk-summary-toggle { flex: 0 0 auto; }
	.mrk .rk-summary.is-open .rk-summary-body {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	html:has(.mrk .rk-summary.is-open) { overflow: hidden; }
	body:has(.mrk.is-js .rk-summary) .ms-sidebar { bottom: calc(64px + 16px + env(safe-area-inset-bottom)); }
	body:has(.mrk .rk-summary.is-open) .ms-sidebar { opacity: 0; visibility: hidden; pointer-events: none; }
}


/* --- Bis 1024 px: offene Auswahl als Vollbild (Wunsch Raphael 16.10.2026, Stand 0.9.11) ---
   Offen fuellt die Auswahl den ganzen Bildschirm, die Leiste steht oben, darunter scrollt der Inhalt.
   Der Inhalt ist offen ein Block statt Grid: Im Grid mit begrenzter Hoehe hat iOS Safari die Zeilen
   zusammengedrueckt, das Steinbild lag dann ueber den Texten. Die Sperre der Seite dahinter macht kalkulator.js. */
@media (max-width: 1024px) {
	.mrk .rk-summary.is-open {
		top: 0;
		bottom: 0;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		z-index: 100000;
		border-top: 0;
		padding-top: env(safe-area-inset-top);
	}

	.mrk .rk-summary.is-open .rk-summary-toggle { border-bottom: 1px solid var(--rk-linie); }

	.mrk .rk-summary.is-open .rk-summary-body {
		display: block;
		padding: var(--rk-5) 20px calc(var(--rk-8) + env(safe-area-inset-bottom));
	}

	.mrk .rk-summary.is-open .rk-summary-body > * { flex-shrink: 0; }

	.mrk .rk-summary.is-open .rk-summary-body > * + * { margin-top: var(--rk-5); }

	.mrk .rk-summary.is-open .rk-summary-bild { display: block; height: auto; }

	.mrk .rk-summary.is-open .rk-summary-bild[hidden] { display: none; }

	.mrk .rk-summary.is-open .rk-summary-bild img { height: auto; aspect-ratio: 3 / 1; }

	body.mrk-gesperrt { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
}