/* MR-Metalldesign - Schriftzug-Konfigurator
   Farben aus dem Shop: Gold #a88d38, Anthrazit #2b2e32, Radius 4px. */

.mrmd-konfi {
	--gold: #a88d38;
	--gold-dunkel: #8a712e;
	--anthrazit: #2b2e32;
	--linie: #dcdee1;
	--flaeche: #f4f5f6;
	font-size: 16px;
	line-height: 1.5;
	color: var(--anthrazit);
	/* Abstand nach unten: das Anfrageformular ist per Default "hidden" (erst
	   nach Klick auf "Unverbindlich anfragen" sichtbar), daher folgt direkt
	   danach im Seiteninhalt die FAQ-Ueberschrift - ohne Abstand hier klebt
	   sie an den Buttons/der Preisbox. */
	margin-bottom: 64px;
}

@media (max-width: 640px) {
	.mrmd-konfi {
		margin-bottom: 44px;
	}
}

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

.mrmd-konfi-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

@media (max-width: 1000px) {
	.mrmd-konfi-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ---------- Vorschau ---------- */

.mrmd-konfi-buehne {
	position: sticky;
	top: 24px;
}

@media (max-width: 1000px) {
	.mrmd-konfi-buehne {
		position: static;
	}
}

.mrmd-konfi-vorschau {
	position: relative;
	background: #24262a;
	background-image:
		linear-gradient(135deg, rgba(255, 255, 255, .04) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .04) 75%, transparent 75%),
		linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .25) 75%, transparent 75%);
	background-size: 6px 6px;
	border: 1px solid #1b1d20;
	border-radius: 4px;
	padding: 32px 28px;
	min-height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.mrmd-konfi-vorschau svg {
	width: 100%;
	height: auto;
	max-height: 46vh;
	overflow: visible;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}

/* ==========================================================
   UMGEBUNG UND AUSSENFORM (v1.15, Wunsch Herr Röhrs 02.08.2026)

   Das Motiv lässt sich vor einem Foto ansehen - Garten, Klinker,
   Holz oder Innenraum - und wahlweise in einem rechteckigen oder
   runden Feld.

   🔴 Beides ist reine Ansicht. Der Rahmen wird nicht geschnitten,
   das Foto nicht mitgeliefert. Preis, Maße und Fertigungsdatei
   bleiben unberührt.
   ========================================================== */
.mrmd-konfi-vorschau.ist-umgebung {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* Über dem Foto liegt ein dunkler Schleier: das Motiv steht in
   Metalltönen und ginge auf einem hellen Garten sonst unter. */
.mrmd-konfi-vorschau.ist-umgebung::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12,13,15,.34) 0%, rgba(12,13,15,.46) 100%);
	pointer-events: none;
}
.mrmd-konfi-vorschau.ist-umgebung svg { position: relative; z-index: 1; }

.mrmd-konfi-kacheln--umgebung { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.mrmd-konfi-kachel--bild span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mrmd-konfi-umgebung-bild {
	display: block;
	width: 100%;
	height: 46px;
	border-radius: 3px;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(0,0,0,.10);
}
.mrmd-konfi-umgebung-leer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
	border-radius: 3px;
	border: 1px dashed #cfcabd;
	color: #8d9298;
	font-size: 18px;
}
.mrmd-konfi-kacheln--form { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* ---------- Arbeitsfläche festhalten (v1.11) ----------
 *
 * 🔴 Sobald mehrere Teile übereinanderliegen, gehören Fingergesten über der
 * Vorschau dem Konfigurator, nicht dem Scrollbalken. Ohne "touch-action: none"
 * deutet der Browser das Ziehen als Wischen, scrollt die Seite und bricht die
 * begonnene Zeigergeste mit einem pointercancel ab – das Motiv bleibt liegen
 * und der Bildschirm wandert davon (Meldung Herr Röhrs, 30.07.2026, Handy).
 *
 * Die Eigenschaft vererbt sich NICHT, das SVG und alles darin brauchen sie
 * deshalb eigens. Die Klasse setzt motiv.js nur bei mehr als einer Ebene –
 * sonst bliebe die Seite an dieser Stelle unscrollbar.
 */
.mrmd-konfi-vorschau.ist-schiebbar,
.mrmd-konfi-vorschau.ist-schiebbar * {
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.mrmd-konfi-vorschau.ist-schiebbar {
	cursor: grab;
}

.mrmd-konfi-vorschau.ist-schiebbar:active {
	cursor: grabbing;
}

.mrmd-konfi-vorschau-leer {
	color: #8d9298;
	font-size: 15px;
	text-align: center;
}

.mrmd-konfi-masse {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin-top: 1px;
	background: var(--linie);
	border: 1px solid var(--linie);
	border-radius: 4px;
	overflow: hidden;
}

.mrmd-konfi-mass {
	flex: 1 1 120px;
	background: #fff;
	padding: 12px 14px;
}

.mrmd-konfi-mass dt {
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #7b8085;
	margin: 0 0 3px;
}

.mrmd-konfi-mass dd {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--anthrazit);
}

/* ---------- Ablauf unter der Vorschau ---------- */

.mrmd-konfi-ablauf {
	margin-top: 22px;
	padding: 20px 22px;
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: 4px;
}

.mrmd-konfi-ablauf h3 {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold);
}

.mrmd-konfi-ablauf ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: schritt;
}

.mrmd-konfi-ablauf li {
	position: relative;
	counter-increment: schritt;
	padding: 0 0 14px 40px;
	font-size: 14px;
	color: #5f646a;
}

.mrmd-konfi-ablauf li:last-child {
	padding-bottom: 0;
}

.mrmd-konfi-ablauf li::before {
	content: counter( schritt );
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: var(--gold);
	border-radius: 3px;
}

.mrmd-konfi-ablauf li strong {
	display: block;
	color: var(--anthrazit);
	font-size: 14.5px;
	margin-bottom: 2px;
}

/* ---------- Bedienfeld ---------- */

.mrmd-konfi .mrmd-konfi-block {
	margin: 0 0 26px;
}

/* Fieldsets dienen nur der Gruppierung, sie sollen nicht als Kasten erscheinen. */
.mrmd-konfi fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* Nur die Beschriftung der Gruppe, nicht der Schalter darin. */
.mrmd-konfi-block > label:not(.mrmd-konfi-schalter),
.mrmd-konfi-legende {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 10px;
	padding: 0;
	border: 0;
}

.mrmd-konfi input[type="text"],
.mrmd-konfi input[type="email"],
.mrmd-konfi input[type="tel"],
.mrmd-konfi input[type="number"],
.mrmd-konfi textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	color: var(--anthrazit);
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 4px;
}

.mrmd-konfi input:focus,
.mrmd-konfi textarea:focus,
.mrmd-konfi button:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
	border-color: var(--gold);
}

.mrmd-konfi-hinweis {
	margin: 8px 0 0;
	font-size: 13px;
	color: #6f747a;
}

.mrmd-konfi-warnung {
	margin: 10px 0 0;
	padding: 10px 12px;
	font-size: 13.5px;
	background: #fdf5e2;
	border-left: 3px solid var(--gold);
	color: #6a5a24;
	border-radius: 0 4px 4px 0;
}

/* Kachelgruppen (Schrift, Material, Stärke) */

.mrmd-konfi-kacheln {
	display: grid;
	gap: 8px;
	border: 0;
	margin: 0;
	padding: 0;
}

.mrmd-konfi-kacheln--schrift {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.mrmd-konfi-kacheln--material {
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.mrmd-konfi-kacheln--staerke {
	grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}

.mrmd-konfi-kachel {
	position: relative;
	display: block;
	cursor: pointer;
}

.mrmd-konfi-kachel input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* Nur die aeussere Huelle ist die Kachel - Kinder duerfen keinen eigenen
   Rahmen bekommen, sonst entstehen Kaesten im Kasten. */
.mrmd-konfi-kachel > span {
	display: block;
	padding: 12px 10px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 4px;
	transition: border-color .15s, background .15s;
}

.mrmd-konfi-kachel > span span {
	display: block;
}

.mrmd-konfi-kachel:hover > span {
	border-color: var(--gold);
}

.mrmd-konfi-kachel input:checked + span {
	border-color: var(--gold);
	background: rgba(168, 141, 56, .1);
	box-shadow: inset 0 0 0 1px var(--gold);
}

.mrmd-konfi-kachel input:focus-visible + span {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

.mrmd-konfi-kachel svg {
	display: block;
	width: 100%;
	height: 34px;
	margin: 0 auto 6px;
}

.mrmd-konfi-kachel svg path {
	fill: var(--anthrazit);
}

.mrmd-konfi-kachel input:checked + span svg path {
	fill: var(--gold-dunkel);
}

.mrmd-konfi-kachel-name {
	font-size: 12.5px;
	color: #6f747a;
}

.mrmd-konfi-kachel input:checked + span .mrmd-konfi-kachel-name {
	color: var(--anthrazit);
	font-weight: 600;
}

.mrmd-konfi-probe {
	display: block;
	font-size: 11px;
	color: #9aa0a6;
	margin-top: 2px;
}

.mrmd-konfi-farbtupfer {
	display: block;
	width: 100%;
	height: 22px;
	margin-bottom: 8px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, .12);
}

.mrmd-konfi-material-name {
	display: block;
	font-weight: 600;
	font-size: 14.5px;
}

/* Schieberegler mit Zahlenfeld */

.mrmd-konfi-regler {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mrmd-konfi-regler input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;
	accent-color: var(--gold);
	height: 24px;
}

.mrmd-konfi-regler-zahl {
	flex: 0 0 108px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.mrmd-konfi-regler-zahl input {
	text-align: right;
}

.mrmd-konfi-einheit {
	font-size: 14px;
	color: #7b8085;
}

/* Schalter */

.mrmd-konfi-schalter {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: 4px;
	cursor: pointer;
}

.mrmd-konfi-schalter input {
	margin: 3px 0 0;
	accent-color: var(--gold);
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.mrmd-konfi-schalter-text strong {
	display: block;
	font-size: 15px;
}

.mrmd-konfi-schalter-text span {
	display: block;
	font-size: 13px;
	color: #6f747a;
	margin-top: 2px;
}

/* ---------- Preis ---------- */

.mrmd-konfi-preis {
	background: var(--anthrazit);
	color: #fff;
	border-radius: 4px;
	padding: 22px 24px;
	margin-bottom: 18px;
}

.mrmd-konfi-preis-zeile {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.mrmd-konfi-preis-label {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #a8adb3;
}

.mrmd-konfi-preis-brutto {
	font-size: 34px;
	font-weight: 700;
	color: var(--gold);
	line-height: 1.1;
	white-space: nowrap;
}

.mrmd-konfi-preis-fuss {
	margin: 14px 0 0;
	font-size: 12.5px;
	color: #9aa0a6;
	line-height: 1.45;
}

/* ---------- Schaltflächen ---------- */

.mrmd-konfi-aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mrmd-konfi-knopf {
	flex: 1 1 auto;
	display: inline-block;
	padding: 15px 22px;
	font-size: 15px;
	font-family: inherit;
	font-weight: 600;
	text-align: center;
	color: #fff;
	background: linear-gradient(180deg, #b89a3f 0%, var(--gold) 55%, #967d30 100%);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.mrmd-konfi-knopf:hover {
	background: var(--gold-dunkel);
}

.mrmd-konfi-knopf[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.mrmd-konfi-knopf--zweit {
	flex: 0 0 auto;
	background: #fff;
	color: var(--anthrazit);
	border: 1px solid var(--linie);
	box-shadow: none;
	font-weight: 500;
}

.mrmd-konfi-knopf--zweit:hover {
	background: var(--flaeche);
	border-color: var(--gold);
	color: var(--anthrazit);
}

/* ---------- Anfrageformular ---------- */

.mrmd-konfi-formular {
	margin-top: 22px;
	padding: 22px;
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: 4px;
}

.mrmd-konfi-formular h3 {
	margin: 0 0 4px;
	font-size: 19px;
}

.mrmd-konfi-formular-felder {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 16px;
}

.mrmd-konfi-formular-felder p {
	margin: 0;
}

.mrmd-konfi-formular-felder p.mrmd-konfi-breit {
	grid-column: 1 / -1;
}

@media (max-width: 560px) {
	.mrmd-konfi-formular-felder {
		grid-template-columns: 1fr;
	}
}

.mrmd-konfi-formular label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
}

.mrmd-konfi-honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mrmd-konfi-status {
	margin: 14px 0 0;
	padding: 12px 14px;
	font-size: 14px;
	border-radius: 4px;
}

.mrmd-konfi-status--ok {
	background: #e8f3e8;
	border-left: 3px solid #3f8b3f;
	color: #2c5c2c;
}

.mrmd-konfi-status--fehler {
	background: #fbeaea;
	border-left: 3px solid #b23b3b;
	color: #7d2727;
}

.mrmd-konfi-datenschutz {
	font-size: 12.5px;
	color: #6f747a;
	margin: 12px 0 0;
}

.mrmd-konfi-datenschutz a {
	color: var(--gold-dunkel);
}

/* ---------- Fertigungs-Ampel (v1.6) ---------- */

.mrmd-konfi-ampel {
	margin-top: 14px;
	padding: 14px 16px;
	border-radius: 4px;
	background: var(--flaeche);
	border-left: 3px solid var(--linie);
}

.mrmd-konfi-ampel.ist-gruen { background: #eef5ee; border-left-color: #3f8b3f; }
.mrmd-konfi-ampel.ist-gelb  { background: #fdf5e6; border-left-color: #c9962b; }
.mrmd-konfi-ampel.ist-rot   { background: #fbeaea; border-left-color: #b23b3b; }

.mrmd-konfi-ampel-kopf {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
}

.mrmd-konfi-ampel-punkt {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #9aa0a6;
}

.ist-gruen .mrmd-konfi-ampel-punkt { background: #3f8b3f; }
.ist-gelb  .mrmd-konfi-ampel-punkt { background: #d9a133; }
.ist-rot   .mrmd-konfi-ampel-punkt { background: #c33; }

.mrmd-konfi-ampel-titel {
	font-size: 14.5px;
	font-weight: 700;
}

.ist-gruen .mrmd-konfi-ampel-titel { color: #2c5c2c; }
.ist-gelb  .mrmd-konfi-ampel-titel { color: #7a5c12; }
.ist-rot   .mrmd-konfi-ampel-titel { color: #7d2727; }

.mrmd-konfi-ampel-liste {
	margin: 8px 0 0;
	padding: 0 0 0 21px;
	font-size: 13.5px;
	color: #4a4f55;
}

.mrmd-konfi-ampel-liste li + li { margin-top: 6px; }
.mrmd-konfi-ampel-liste li.ist-rot { color: #7d2727; }

.mrmd-konfi-lieferzeit {
	margin: 10px 0 0;
	font-size: 13.5px;
	color: #4a4f55;
}

/* ---------- Gesperrte Materialstaerke ---------- */

.mrmd-konfi-kachel.ist-gesperrt {
	opacity: 0.4;
	cursor: not-allowed;
}

.mrmd-konfi-kachel.ist-gesperrt > span {
	text-decoration: line-through;
}

/* ---------- Auswahlfeld Befestigung ---------- */

.mrmd-konfi select {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: var(--anthrazit);
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 4px;
}

.mrmd-konfi select:focus {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
}

/* ---------- Pulverbeschichtung / RAL ---------- */

.mrmd-konfi-ral-knopf {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	font: inherit;
	font-size: 14.5px;
	text-align: left;
	color: var(--anthrazit);
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 4px;
	cursor: pointer;
}

.mrmd-konfi-ral-knopf:hover { border-color: var(--gold); }

.mrmd-konfi-ral-tupfer {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: 1px solid var(--linie);
	border-radius: 3px;
	background: transparent;
}

.mrmd-konfi-ral-tafel {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 22, 25, 0.62);
}

.mrmd-konfi-ral-kasten {
	display: flex;
	flex-direction: column;
	width: min(760px, 100%);
	max-height: min(82vh, 720px);
	padding: 18px 20px 16px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

.mrmd-konfi-ral-kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 17px;
}

.mrmd-konfi-ral-schliessen {
	width: 34px;
	height: 34px;
	font-size: 24px;
	line-height: 1;
	color: #6f747a;
	background: none;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.mrmd-konfi-ral-schliessen:hover { background: var(--flaeche); color: var(--anthrazit); }

.mrmd-konfi-ral-suche {
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 14px;
	font: inherit;
	font-size: 15px;
	border: 1px solid var(--linie);
	border-radius: 4px;
}

.mrmd-konfi-ral-gitter {
	overflow-y: auto;
	flex: 1 1 auto;
	-webkit-overflow-scrolling: touch;
}

.mrmd-konfi-ral-gruppe + .mrmd-konfi-ral-gruppe { margin-top: 18px; }

.mrmd-konfi-ral-gruppe h4 {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6f747a;
}

.mrmd-konfi-ral-felder {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	gap: 7px;
}

.mrmd-konfi-ral-feld {
	position: relative;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 3px;
	cursor: pointer;
}

.mrmd-konfi-ral-feld:hover { transform: scale(1.06); }

.mrmd-konfi-ral-feld.ist-gewaehlt {
	outline: 3px solid var(--gold);
	outline-offset: 1px;
}

/* Nummer auf der Farbflaeche: heller Kasten, damit sie auf jedem Ton lesbar
   bleibt - RAL reicht von Reinweiss bis Tiefschwarz, eine feste Schriftfarbe
   waere auf der Haelfte der Toene unlesbar. */
.mrmd-konfi-ral-feld-nr {
	position: absolute;
	left: 3px;
	bottom: 3px;
	padding: 1px 4px;
	font-size: 10.5px;
	font-weight: 700;
	color: #23262a;
	background: rgba(255, 255, 255, 0.86);
	border-radius: 2px;
}

.mrmd-konfi-ral-fuss {
	margin: 12px 0 0;
	font-size: 12.5px;
	color: #6f747a;
}

@media (max-width: 640px) {
	.mrmd-konfi-ral-tafel { padding: 0; align-items: stretch; }
	.mrmd-konfi-ral-kasten {
		width: 100%;
		max-height: 100%;
		border-radius: 0;
		padding: 14px 14px 12px;
	}
	.mrmd-konfi-ral-felder { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
	.mrmd-konfi-ral-feld { height: 46px; }
}

/* Sicherung gegen einen Fehler, der beim Testen der RAL-Tafel auffiel:
   ein eigenes "display" im Stylesheet ueberstimmt das eingebaute
   [hidden] { display: none } des Browsers - die Tafel blieb sichtbar,
   obwohl das Skript sie laengst auf hidden gesetzt hatte. Gilt fuer alle
   Elemente des Konfigurators, damit sich das nicht wiederholt. */
.mrmd-konfi [hidden] {
	display: none !important;
}

/* ---------- Reiter Schriftzug / Wunschmotiv (v1.7) ---------- */

.mrmd-konfi-reiter-frage {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--anthrazit);
}

/*
 * 🔴 Die beiden Reiter folgen demselben Raster wie der Inhalt darunter
 * (1,15 zu 1, Abstand 40 px). Bei "1fr 1fr" waren sie gleich breit und
 * standen quer zu den Spalten - der linke Reiter endete mitten über der
 * Einstellungsspalte, statt mit der Vorschau abzuschliessen.
 * Vorgabe Herr Roehrs, 02.08.2026.
 */
.mrmd-konfi-reiter {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 40px;
	margin-bottom: 26px;
}
@media (max-width: 900px) {
	.mrmd-konfi-reiter { grid-template-columns: 1fr 1fr; gap: 10px; }
}

.mrmd-konfi-reiter-knopf {
	display: block;
	padding: 14px 18px;
	font: inherit;
	text-align: left;
	color: var(--anthrazit);
	background: var(--flaeche);
	border: 1px solid var(--linie);
	border-radius: 4px;
	cursor: pointer;
}

.mrmd-konfi-reiter-knopf strong {
	display: block;
	font-size: 16px;
	line-height: 1.3;
}

.mrmd-konfi-reiter-knopf span {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #6f747a;
}

.mrmd-konfi-reiter-knopf:hover { border-color: var(--gold); }

.mrmd-konfi-reiter-knopf.ist-aktiv {
	background: var(--anthrazit);
	border-color: var(--anthrazit);
	color: #fff;
}

.mrmd-konfi-reiter-knopf.ist-aktiv span { color: var(--gold); }

@media (max-width: 640px) {
	.mrmd-konfi-reiter-frage { font-size: 16px; margin-bottom: 8px; }
	.mrmd-konfi-reiter { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
	.mrmd-konfi-reiter-knopf { padding: 11px 14px; }
	.mrmd-konfi-reiter-knopf strong { font-size: 15px; }
}

/* ---------- Ebenen (mehrere Dateien uebereinander) ---------- */

.mrmd-motiv-ebenen {
	margin-top: 12px;
	border: 1px solid var(--linie);
	border-radius: 4px;
	background: var(--flaeche);
}

.mrmd-motiv-ebenen-kopf {
	margin: 0;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.4;
	color: #6f747a;
	border-bottom: 1px solid var(--linie);
}

.mrmd-motiv-ebene {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 8px 6px 12px;
	border-top: 1px solid var(--linie);
}

.mrmd-motiv-ebene:first-of-type { border-top: 0; }

.mrmd-motiv-ebene.ist-aktiv {
	background: #fff;
	box-shadow: inset 3px 0 0 var(--gold);
}

.mrmd-motiv-ebene-name {
	flex: 1;
	min-width: 0;
	padding: 4px 0;
	font: inherit;
	font-size: 14px;
	text-align: left;
	color: var(--anthrazit);
	background: none;
	border: 0;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mrmd-motiv-ebene.ist-aktiv .mrmd-motiv-ebene-name { font-weight: 700; }

.mrmd-motiv-ebene-knopf {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	font: inherit;
	font-size: 17px;
	line-height: 1;
	color: var(--anthrazit);
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 3px;
	cursor: pointer;
}

.mrmd-motiv-ebene-knopf:hover { border-color: var(--gold); }
.mrmd-motiv-ebene-weg:hover { border-color: #b32d2e; color: #b32d2e; }

/* Breite des einzelnen Teils in mm (v1.18) */
.mrmd-motiv-ebene-massfeld {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 12.5px;
	color: #6f747a;
}

.mrmd-motiv-ebene-mass {
	width: 62px;
	padding: 5px 6px;
	font: inherit;
	font-size: 13.5px;
	text-align: right;
	color: var(--anthrazit);
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 3px;
}

.mrmd-motiv-ebene-mass:focus {
	outline: 2px solid var(--gold);
	outline-offset: 1px;
	border-color: var(--gold);
}

@media (max-width: 480px) {
	/* Auf schmalen Geräten steht der Name in einer eigenen Zeile, sonst
	   drängen Feld und Knöpfe ihn auf wenige Zeichen zusammen. */
	.mrmd-motiv-ebene { flex-wrap: wrap; }
	.mrmd-motiv-ebene-name { flex: 1 0 100%; }
	.mrmd-motiv-ebene-massfeld { margin-right: auto; }
}

/* Der Vorschaukasten traegt die Zeigerbedienung, nicht das SVG darin. */
.mrmd-konfi-vorschau [data-ebene] { cursor: move; }

/* ---------- Datei-Ablage ---------- */

.mrmd-motiv-ablage {
	display: block;
	padding: 26px 20px;
	text-align: center;
	background: var(--flaeche);
	border: 2px dashed var(--linie);
	border-radius: 4px;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.mrmd-motiv-ablage:hover,
.mrmd-motiv-ablage.ist-bereit {
	border-color: var(--gold);
	background: #faf7ee;
}

.mrmd-motiv-ablage.ist-gefuellt {
	border-style: solid;
	border-color: #3f8b3f;
	background: #f2f8f2;
}

.mrmd-motiv-ablage strong {
	display: block;
	font-size: 15.5px;
}

.mrmd-motiv-ablage .mrmd-konfi-hinweis {
	margin: 5px 0 0;
	text-align: center;
}

.mrmd-motiv-ablage-zeichen {
	display: block;
	margin: 0 auto 8px;
	width: 38px;
	height: 38px;
	font-size: 20px;
	line-height: 36px;
	color: var(--gold-dunkel);
	background: #fff;
	border: 1px solid var(--linie);
	border-radius: 50%;
}

.mrmd-motiv-ablage-name {
	margin: 8px 0 0;
	font-size: 13.5px;
	font-weight: 700;
	color: #2c5c2c;
	overflow-wrap: anywhere;
}

/* ---------- Größenfelder ---------- */

.mrmd-motiv-groesse {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.mrmd-motiv-groesse-marke {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6f747a;
}

.mrmd-motiv-groesse .mrmd-konfi-regler-zahl { width: 100%; }
.mrmd-motiv-groesse .mrmd-konfi-regler-zahl input { width: 100%; }

@media (max-width: 420px) {
	.mrmd-motiv-groesse { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Kaufknopf (v1.8) ---------- */

.mrmd-konfi-knopf--kaufen {
	background: #2f7a3f;
	border-color: #2f7a3f;
	color: #fff;
}

.mrmd-konfi-knopf--kaufen:hover:not(:disabled) {
	background: #266333;
	border-color: #266333;
}