/**
 * markoon meventa Rechner – Frontend-Styles.
 * Farben kommen über --mmr-accent aus den Plugin-Einstellungen.
 */

/*
 * Zwei Enfold-Vorgaben, die auf Elementor-Canvas-Seiten stören, weil dort die
 * Theme-Wrapper (#wrap_all, html.responsive) fehlen, die sie sonst neutralisieren:
 *
 *   grid.css        html { min-width: 910px }        -> Seite bleibt unter 910 px starr
 *   enfold_child.css html { background: #282B2E }    -> dunkelgrauer Seitenhintergrund
 *
 * Greift nur dort, wo dieses Stylesheet geladen wird – also auf Seiten mit Rechner.
 */
html:root {
	min-width: 0;
	background-color: #fff;
}

html:root body {
	background-color: #fff;
}

/*
 * Elementors Inline-Icon-Listen arbeiten mit negativen Aussenabstaenden
 * (margin-right/-left aus "space_between") und ragen dadurch auf schmalen
 * Viewports rechts aus dem Layout. Die Werte stehen im generierten Seiten-CSS
 * und sind hoeher gewichtet, deshalb hier bewusst mit !important.
 */
.elementor-icon-list-items.elementor-inline-items {
	flex-wrap: wrap;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.elementor-icon-list-items.elementor-inline-items > .elementor-icon-list-item:first-child {
	margin-left: 0 !important;
}

.mmr {
	--mmr-ink: #1c1c2b;
	--mmr-muted: #5d5d6b;
	--mmr-line: #e6e6ec;
	--mmr-soft: #f6f6f8;
	--mmr-tint: #fdf2f8;
	--mmr-radius: 14px;

	/*
	 * Blauer Aktionsbutton, uebernommen vom Elementor-Button der Kampagne
	 * (#008BD2, weisse 2px-Kontur, 6px Radius).
	 */
	--mmr-btn-bg: #008bd2;
	--mmr-btn-bg-hover: #0077b5;
	--mmr-btn-text: #fff;
	--mmr-btn-border: #fff;

	color: var(--mmr-ink);
	font-size: 16px;
	line-height: 1.6;
}

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

/*
 * Hilfsklassen für die Elementor-Seiten.
 * Der Prozentwert bezieht sich auf den Elternblock, deshalb funktioniert der
 * Ausbruch unabhängig davon, wie breit der Theme-Container gerade ist.
 */
/*
 * Elementor setzt Container-Margins über die Variable --margin-right.
 * Die Regel muss deshalb dort ansetzen, sonst greift sie nicht.
 */
.mmr-bleed-right {
	--margin-right: calc((100% - 100vw) / 2);

	margin-right: calc((100% - 100vw) / 2);
}

@media (max-width: 1024px) {
	.mmr-bleed-right {
		--margin-right: calc((100% - 100vw) / 2);
		--margin-left: calc((100% - 100vw) / 2);

		margin-right: calc((100% - 100vw) / 2);
		margin-left: calc((100% - 100vw) / 2);
	}
}

.mmr p {
	margin: 0;
}

/* ---------------------------------------------------------------- *
 * Schritt-Überschriften
 * ---------------------------------------------------------------- */

.mmr-step {
	padding: 40px 0;
	border-top: 1px solid var(--mmr-line);
}

.mmr-step:first-child {
	border-top: 0;
}

/*
 * Der erste und letzte Abschnitt geben ihren aeusseren Abstand ab: sonst
 * addiert sich die Innenluft des Blocks auf das Padding des Elementor-
 * Containers und der vertikale Rhythmus der Seite wird ungleichmaessig.
 * :first-of-type/:last-of-type statt :first-child, weil vor dem ersten
 * Abschnitt noch das Konfigurations-<script> steht.
 */
.mmr > .mmr-step:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.mmr > .mmr-step:last-of-type {
	padding-bottom: 0;
}

.mmr-step[hidden] {
	display: none;
}

/* Aufklappende Bereiche sanft einblenden. */
.mmr-step--2.is-visible,
.mmr-result.is-visible,
.mmr-panel.is-visible {
	animation: mmr-fade-in 0.35s ease both;
}

@keyframes mmr-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmr-step--2.is-visible,
	.mmr-result.is-visible,
	.mmr-panel.is-visible {
		animation: none;
	}
}

.mmr-step__heading {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 28px;
	font-size: 1.35rem;
	line-height: 1.3;
}

/* Ohne min-width: 0 schrumpft der Titel im Flexlayout nicht und ragt auf
   schmalen Viewports aus der Karte heraus. */
.mmr-step__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}


/*
 * Fliesstext unter einer Schrittueberschrift. Steht er da, rueckt die
 * Ueberschrift naeher heran, damit beides als Einheit liest.
 */
.mmr-step__intro {
	margin: 0 0 26px !important;
	max-width: 60em;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mmr-muted);
}

.mmr-step__heading:has(+ .mmr-step__intro) {
	margin-bottom: 14px;
}

.mmr-step__num {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mmr-accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------- *
 * Karten
 * ---------------------------------------------------------------- */

.mmr-card {
	background: #fff;
	border: 1px solid var(--mmr-line);
	border-radius: var(--mmr-radius);
	padding: 22px 20px 18px;
}

.mmr-card--pad {
	padding: 28px 26px;
}

.mmr-card--center {
	text-align: center;
}

.mmr-card__title {
	margin: 0 0 18px !important;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
}

/* ---------------------------------------------------------------- *
 * Slider
 * ---------------------------------------------------------------- */

.mmr-sliders {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.mmr-slider {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.mmr-slider__question {
	margin: 0 0 auto !important;
	min-height: 4.2em;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--mmr-muted);
}

.mmr-slider__question strong {
	color: var(--mmr-ink);
	font-weight: 700;
}

.mmr-slider__value {
	margin: 16px 0 2px !important;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.mmr-slider__suffix {
	font-size: 0.55em;
	font-weight: 700;
	margin-left: 2px;
}

.mmr-slider__unit {
	margin: 0 0 26px !important;
	font-size: 0.85rem;
	color: var(--mmr-muted);
}

/* Ohne Einheit fehlt sonst der Abstand zwischen Zahl und Regler. */
.mmr-slider__value:last-of-type {
	margin-bottom: 24px !important;
}

.mmr-ticks {
	display: flex;
	justify-content: space-between;
	margin-top: 14px;
	font-size: 0.72rem;
	color: var(--mmr-muted);
	gap: 2px;
}

.mmr-tick {
	flex: 1 1 0;
	text-align: center;
	white-space: nowrap;
}

.mmr-tick:first-child {
	text-align: left;
}

.mmr-tick:last-child {
	text-align: right;
}

/*
 * Range-Input in beiden Engines gleich aussehen lassen.
 * Knopf und Schiene sind bewusst gross gehalten: Der Rechner wird in der
 * Gastronomie oft im Stehen und mit kaltem Finger bedient. --mmr-thumb steuert
 * beides zentral, die Hoehe des Inputs bestimmt die Trefferflaeche.
 */
.mmr-range {
	--mmr-progress: 0%;
	--mmr-thumb: 30px;
	--mmr-track: 6px;

	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 44px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	touch-action: pan-y;
}

.mmr-range:focus-visible {
	outline: 2px solid var(--mmr-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

.mmr-range::-webkit-slider-runnable-track {
	height: var(--mmr-track);
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--mmr-accent) 0,
		var(--mmr-accent) var(--mmr-progress),
		var(--mmr-line) var(--mmr-progress),
		var(--mmr-line) 100%
	);
}

.mmr-range::-moz-range-track {
	height: var(--mmr-track);
	border-radius: 999px;
	background: var(--mmr-line);
}

.mmr-range::-moz-range-progress {
	height: var(--mmr-track);
	border-radius: 999px;
	background: var(--mmr-accent);
}

.mmr-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: var(--mmr-thumb);
	height: var(--mmr-thumb);
	margin-top: calc((var(--mmr-track) - var(--mmr-thumb)) / 2);
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--mmr-accent);
	box-shadow: 0 2px 8px rgba(28, 28, 43, 0.28);
	transition: transform 0.12s ease;
}

.mmr-range::-moz-range-thumb {
	box-sizing: border-box;
	width: var(--mmr-thumb);
	height: var(--mmr-thumb);
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--mmr-accent);
	box-shadow: 0 2px 8px rgba(28, 28, 43, 0.28);
}

.mmr-range:active::-webkit-slider-thumb {
	transform: scale(1.08);
}

/* Auf Touch-Geraeten noch etwas groesser. */
@media (pointer: coarse) {
	.mmr-range {
		--mmr-thumb: 36px;

		height: 48px;
	}
}

/* ---------------------------------------------------------------- *
 * Buttons
 * ---------------------------------------------------------------- */

.mmr-actions {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.mmr-actions--stacked {
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.mmr-card.has-error .mmr-field {
	border-color: #d63638;
}

.mmr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* 2px weniger als vorher, die Kontur gleicht den Unterschied aus. */
	padding: 13px 30px;
	border: 2px solid var(--mmr-btn-border);
	border-radius: 6px;
	background: var(--mmr-btn-bg);
	color: var(--mmr-btn-text);
	font: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.mmr-btn:hover {
	transform: translateY(-1px);
}

.mmr-btn:hover,
.mmr-btn:focus-visible {
	background: var(--mmr-btn-bg-hover);
	color: var(--mmr-btn-text);
}

.mmr-btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.mmr-btn--lg {
	padding: 16px 38px;
	font-size: 0.95rem;
}

.mmr-btn__arrow {
	display: inline-flex;
	align-items: center;
	font-size: 1em;
	line-height: 1;
}

.mmr-btn__arrow svg {
	display: block;
	width: 1em;
	height: 1em;
}

/* ---------------------------------------------------------------- *
 * Ergebnis
 * ---------------------------------------------------------------- */

.mmr-result {
	margin: 8px 0 0;
	padding: 34px 30px 26px;
	background: var(--mmr-soft);
	border-radius: var(--mmr-radius);
}

.mmr-result[hidden] {
	display: none;
}

/*
 * Der Ergebnisblock ist seit der Umnummerierung Schritt 2 und traegt dieselbe
 * Ueberschrift wie die anderen Schritte. Die alte, zentrierte Variante bleibt
 * fuer den Fall stehen, dass sie irgendwo noch verwendet wird.
 */
.mmr-result__title {
	margin: 0 0 26px;
	text-align: center;
	font-size: 1.2rem;
}

/* Nie mehr als vier Kacheln pro Reihe – sonst wird jede zu schmal. */
.mmr-result__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	text-align: center;
}

.mmr-result__grid--1,
.mmr-result__grid--2,
.mmr-result__grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/*
 * Bei fünf Kacheln bliebe in der zweiten Reihe eine einzelne stehen. Die
 * letzte läuft deshalb über die volle Breite – inhaltlich ist es die
 * Abschlusszahl, das liest sich als Summenzeile.
 */
.mmr-result__grid--5 > .mmr-tile:nth-child(5) {
	grid-column: 1 / -1;
	padding-top: 20px;
	border-top: 1px solid var(--mmr-line);
	border-left: 0;
}

.mmr-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	border-left: 1px solid var(--mmr-line);
}

.mmr-tile:first-child {
	border-left: 0;
}

.mmr-tile__icon {
	color: var(--mmr-accent);
	line-height: 0;
}

.mmr-tile__icon svg {
	width: 34px;
	height: 34px;
}

.mmr-tile__value {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.mmr-tile__label {
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--mmr-muted);
}

.mmr-tile--highlight .mmr-tile__value,
.mmr-tile--highlight .mmr-tile__label {
	color: var(--mmr-accent);
}

/*
 * Gesamtergebnis ("ueber X Monate") bewusst herausgehoben: groesser, in der
 * Akzentfarbe und mit flaechigem Hintergrund.
 */
.mmr-tile--total {
	gap: 4px;
	padding: 20px 16px;
	border-left: 0;
	border-radius: var(--mmr-radius);
	background: var(--mmr-tint);
}

.mmr-tile--total .mmr-tile__value {
	font-size: 2.75rem;
	color: var(--mmr-accent);
}

.mmr-tile--total .mmr-tile__label {
	font-size: 0.9rem;
	color: var(--mmr-accent);
}

/*
 * Die Regel fuer die fuenfte Kachel setzt Trennlinie und Innenabstand;
 * gleiche Spezifitaet, deshalb hier danach zurueckgenommen.
 */
.mmr-result__grid--5 > .mmr-tile--total:nth-child(5) {
	padding-top: 20px;
	border-top: 0;
}

.mmr-note {
	display: flex;
	gap: 10px;
	margin-top: 26px !important;
	padding-top: 18px;
	border-top: 1px solid var(--mmr-line);
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--mmr-muted);
}

.mmr-note__icon {
	flex: 0 0 auto;
	line-height: 0;
	color: var(--mmr-muted);
}

.mmr-note__icon svg {
	width: 18px;
	height: 18px;
}

/* ---------------------------------------------------------------- *
 * Schritt 2
 * ---------------------------------------------------------------- */

.mmr-inputs {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.mmr-label {
	display: block;
	margin-bottom: 10px;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.4;
}

.mmr-field {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid var(--mmr-line);
	border-radius: 6px;
	background: #fff;
	transition: border-color 0.15s ease;
}

.mmr-field:focus-within {
	border-color: var(--mmr-accent);
}

.mmr-field__icon {
	flex: 0 0 auto;
	padding-left: 12px;
	line-height: 0;
	color: var(--mmr-accent);
}

.mmr-field__icon svg {
	width: 20px;
	height: 20px;
}

.mmr-field__suffix {
	flex: 0 0 auto;
	padding-right: 14px;
	font-size: 0.85rem;
	color: var(--mmr-muted);
	white-space: nowrap;
}

.mmr-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 13px 14px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.95rem;
}

.mmr-input:focus {
	outline: none;
	box-shadow: none;
}

.mmr-input:disabled {
	color: var(--mmr-muted);
	cursor: not-allowed;
}

textarea.mmr-input {
	resize: vertical;
	line-height: 1.5;
}

.mmr-field--select::after {
	content: "";
	position: absolute;
	right: 16px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--mmr-muted);
	border-bottom: 2px solid var(--mmr-muted);
	transform: translateY(-25%) rotate(45deg);
	pointer-events: none;
}

select.mmr-input {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px;
	cursor: pointer;

	/*
	 * Ohne eigene Hintergrundfarbe erbt das native Auswahlmenue unter Windows
	 * den transparenten Hintergrund und stellt die Eintraege blass dar.
	 */
	background-color: #fff;
	color: var(--mmr-ink);
	-webkit-text-fill-color: var(--mmr-ink);
}

select.mmr-input option {
	background-color: #fff;
	color: var(--mmr-ink);
}

/* Nur der Platzhalter bleibt zurueckgenommen. */
select.mmr-input option[value=""] {
	color: #8b8b99;
}

.mmr-input::placeholder {
	color: #8b8b99;
	opacity: 1;
}

.mmr-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 0.85rem;
	color: var(--mmr-muted);
	cursor: pointer;
}

.mmr-check--inline {
	flex: 0 0 auto;
	align-self: center;
	margin: 0;
	padding: 0;
	font-size: 0.78rem;
	line-height: 1.25;
	white-space: normal;
	max-width: 6.5em;
}

.mmr-check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--mmr-accent);
}

.mmr-hint {
	margin-top: 8px !important;
	font-size: 0.78rem;
	color: var(--mmr-muted);
}

/* Im Anfrageformular sitzt der Hinweis direkt unter dem Feld. */
.mmr-form__field .mmr-hint {
	margin-top: 6px !important;
	padding-left: 2px;
}

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

.mmr-hint--warn {
	margin-top: 14px !important;
	padding: 10px 14px;
	background: var(--mmr-tint);
	border-left: 3px solid var(--mmr-accent);
	border-radius: 0 8px 8px 0;
	color: var(--mmr-ink);
	text-align: left;
}

.mmr-panel {
	margin-top: 30px;
	padding: 32px 28px 24px;
	background: var(--mmr-soft);
	border-radius: var(--mmr-radius);
}

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

.mmr-panel__title {
	margin: 0 0 24px;
	text-align: center;
	font-size: 1.15rem;
}

.mmr-panel__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	text-align: center;
}

.mmr-panel__grid--cards {
	align-items: stretch;
}

.mmr-panel__grid--cards > * {
	height: 100%;
}

.mmr-panel__col {
	padding: 0 16px;
	border-left: 1px solid var(--mmr-line);
}

.mmr-panel__col:first-child {
	border-left: 0;
}

.mmr-panel__label {
	margin: 0 0 6px !important;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--mmr-muted);
}

.mmr-panel__value {
	margin: 0 !important;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.mmr-panel__value--accent {
	color: var(--mmr-accent);
}

.mmr-panel__value--lg {
	font-size: 2.2rem;
}

.mmr-panel__value-sub {
	font-size: 0.62em;
}

.mmr-panel__sub {
	margin: 6px 0 0 !important;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--mmr-muted);
}

.mmr-panel__sub--accent {
	color: var(--mmr-accent);
}

.mmr-stack--sep {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--mmr-line);
}

.mmr-formula {
	margin: 4px 0 10px !important;
	font-size: 0.85rem;
	color: var(--mmr-ink);
}

.mmr-features {
	margin: 20px 0 0 !important;
	padding: 0 !important;
	list-style: none;
	/* Die Karte zentriert ihren Inhalt - die Leistungsliste bleibt linksbuendig. */
	text-align: left;
}

.mmr-features li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 46px;
	font-size: 0.9rem;
	line-height: 1.45;
	list-style: none;
}

/* Statt Haken ein vorangestelltes "inkl." (Kundenwunsch). */
.mmr-features li::before {
	content: "inkl.";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--mmr-accent);
	font-weight: 600;
}

/* Vergleichsblock */
.mmr-compare {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0;
	margin-top: 30px;
}

.mmr-compare__side {
	padding: 24px 26px;
	background: #fff;
	border-radius: var(--mmr-radius);
}

.mmr-compare__side--accent {
	background: var(--mmr-tint);
}

.mmr-compare__vs {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	margin: 0 -20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	font-size: 1.15rem;
	font-weight: 700;
	z-index: 1;
}

.mmr-compare__intro {
	font-size: 0.85rem;
	color: var(--mmr-muted);
}

.mmr-compare__value {
	margin: 4px 0 !important;
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.1;
}

.mmr-compare__text {
	font-size: 0.88rem;
	color: var(--mmr-muted);
}

.mmr-people {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin-top: 16px;
}

.mmr-person {
	color: var(--mmr-line);
	line-height: 0;
}

.mmr-person.is-on {
	color: var(--mmr-ink);
}

.mmr-people--accent .mmr-person.is-on {
	color: var(--mmr-accent);
}

.mmr-footnote {
	margin-top: 24px !important;
	font-size: 0.72rem;
	line-height: 1.55;
	color: var(--mmr-muted);
}

/* ---------------------------------------------------------------- *
 * Formular
 * ---------------------------------------------------------------- */

/* Eigenstaendige Anfrage - kein nummerierter Schritt des Rechners. */
.mmr-step--form {
	padding-top: 46px;
}

/*
 * Ohne eingebaute Ueberschrift (heading="no") bestimmt das davor gesetzte
 * Elementor-Element den Abstand – sonst kaeme der Innenabstand doppelt.
 */
.mmr-step--form--nohead {
	padding-top: 0;
}

.mmr-form__heading {
	margin: 0 0 24px;
	font-size: 1.6rem;
	line-height: 1.25;
	color: var(--mmr-ink);
}

.mmr-accent {
	color: var(--mmr-accent);
}

/* Formular liegt wie im Mockup auf einer eigenen weissen Karte. */
.mmr-form {
	padding: clamp(20px, 3vw, 36px);
	background: #fff;
	border: 1px solid var(--mmr-line);
	border-radius: 18px;
	box-shadow: 0 2px 20px rgba(28, 28, 43, 0.05);
}

.mmr-form__intro {
	display: grid;
	gap: clamp(20px, 3vw, 36px);
	grid-template-columns: 1.5fr 1fr 1fr;
	align-items: start;
	margin-bottom: 28px;
}

.mmr-form__text p {
	margin: 0 0 12px !important;
	color: var(--mmr-muted);
}

.mmr-usps {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.mmr-usps li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 34px;
	list-style: none;
	font-size: 0.95rem;
}

.mmr-usps li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 22px;
	height: 22px;
	border: 2px solid var(--mmr-accent);
	border-radius: 50%;
}

.mmr-usps li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 0.5em;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--mmr-accent);
	border-bottom: 2px solid var(--mmr-accent);
	transform: rotate(-45deg);
}

.mmr-form__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mmr-radius);
}

.mmr-form__prefill {
	margin-bottom: 18px !important;
	padding: 10px 16px;
	border-left: 3px solid var(--mmr-accent);
	background: var(--mmr-tint);
	border-radius: 0 8px 8px 0;
	font-size: 0.85rem;
	color: var(--mmr-ink);
}

.mmr-form__prefill[hidden] {
	display: none;
}

/* 1fr auf die Zeilen zieht alle Felder auf die Hoehe der hoechsten Zeile. */
.mmr-form__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: minmax(66px, 1fr);
}

/* Felder einer Rasterzeile auf gleiche Hoehe ziehen. */
.mmr-form__field {
	display: flex;
	flex-direction: column;
}

.mmr-form__field > .mmr-field {
	flex: 1 1 auto;
}

.mmr-form__field--wide {
	grid-column: 1 / -1;
}

.mmr-form__field.has-error .mmr-field {
	border-color: #d63638;
}

/* Feldbeschriftung sitzt im Rahmen, darunter die Eingabe. */
.mmr-form .mmr-field {
	align-items: stretch;
	gap: 12px;
	min-height: 66px;
	padding: 9px 14px;
	border-radius: 10px;
}

.mmr-form .mmr-field__icon {
	display: flex;
	align-items: center;
	padding-left: 0;
}

.mmr-field__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-width: 0;
}

.mmr-field__label {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mmr-muted);
}

.mmr-req {
	color: var(--mmr-accent);
}

.mmr-form .mmr-input {
	padding: 0;
	font-size: 0.95rem;
	line-height: 1.45;
}

/* Einzeilig wie die uebrigen Felder; per Anfasser vergroesserbar. */
.mmr-form textarea.mmr-input {
	height: 1.45em;
	min-height: 1.45em;
	max-height: 7em;
	overflow: hidden auto;
	resize: vertical;
}

.mmr-field__label {
	min-height: 1.3em;
}

.mmr-form .mmr-field--select::after {
	top: 50%;
	right: 16px;
	transform: translateY(-65%) rotate(45deg);
}

.mmr-form select.mmr-input {
	padding-right: 22px;
}

.mmr-error {
	margin: 6px 0 0 !important;
	font-size: 0.78rem;
	color: #d63638;
}

.mmr-error[hidden] {
	display: none;
}

.mmr-form__footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 18px 24px;
	margin-top: 26px;
}

.mmr-required-note {
	font-size: 0.8rem;
	color: var(--mmr-muted);
}

.mmr-form__footer .mmr-privacy {
	justify-self: end;
}

.mmr-privacy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
	color: var(--mmr-muted);
}

.mmr-privacy svg {
	width: 18px;
	height: 18px;
}

.mmr-form__message {
	margin-top: 20px !important;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 0.92rem;
}

.mmr-form__message[hidden] {
	display: none;
}

.mmr-form__message.is-success {
	background: var(--mmr-tint);
	color: var(--mmr-accent);
}

.mmr-form__message.is-error {
	background: #fcf0f1;
	color: #d63638;
}

/* ---------------------------------------------------------------- *
 * Newsletter-Block
 * ---------------------------------------------------------------- */

.mmr-nl {
	--mmr-nl-badge: 200px;
}

.mmr-nl__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	border-radius: 20px;
}

.mmr-nl__left {
	padding: clamp(24px, 3.4vw, 44px);
	padding-right: calc(var(--mmr-nl-badge) / 2 + 24px);
	background: linear-gradient(115deg, #fdf1f7 0%, #fbe6f1 100%);
}

.mmr-nl__headline {
	margin: 0 0 16px;
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.mmr-nl__headline-1,
.mmr-nl__headline-2 {
	display: block;
}

.mmr-nl__headline-1 {
	color: var(--mmr-ink);
}

.mmr-nl__headline-2 {
	color: var(--mmr-accent);
}

.mmr-nl__text {
	margin: 0 0 26px !important;
	max-width: 34em;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mmr-muted);
}

.mmr-nl__text strong {
	color: var(--mmr-ink);
}

.mmr-nl__benefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.mmr-nl__benefits li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 0 0 14px;
	margin: 0;
	border-left: 1px solid rgba(149, 18, 114, 0.18);
	list-style: none;
}

.mmr-nl__benefits li:first-child {
	padding-left: 0;
	border-left: 0;
}

.mmr-nl__benefit-icon {
	color: var(--mmr-accent);
	line-height: 0;
}

.mmr-nl__benefit-icon svg {
	width: 26px;
	height: 26px;
}

.mmr-nl__benefit-title {
	font-size: 0.74rem;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--mmr-accent);
}

.mmr-nl__benefit-text {
	font-size: 0.74rem;
	line-height: 1.4;
	color: var(--mmr-muted);
}

/* Kreis sitzt mittig auf der Kante zwischen beiden Flaechen. */
.mmr-nl__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: var(--mmr-nl-badge);
	height: var(--mmr-nl-badge);
	padding: 18px;
	border-radius: 50%;
	background: var(--mmr-accent);
	color: #fff;
	text-align: center;
	transform: translate(-50%, -50%);
	box-shadow: 0 6px 30px rgba(28, 28, 43, 0.18);
}

.mmr-nl__badge-icon {
	line-height: 0;
}

.mmr-nl__badge-icon svg {
	width: 28px;
	height: 28px;
}

.mmr-nl__badge-top,
.mmr-nl__badge-bottom {
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mmr-nl__badge-amount {
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
}

.mmr-nl__right {
	display: flex;
	align-items: center;
	padding: clamp(24px, 3.4vw, 44px);
	padding-left: calc(var(--mmr-nl-badge) / 2 + 24px);
	background-color: var(--mmr-accent);
	background-image: linear-gradient(115deg, #a5157f 0%, #c21f86 55%, #7a0f5e 100%);
	background-size: cover;
	background-position: center;
	color: #fff;
}

/* Wenn ein Bild hinterlegt ist, legt sich der Farbverlauf darueber. */
.mmr-nl__right[style*="background-image"] {
	position: relative;
	background-blend-mode: multiply;
}

.mmr-nl__right-inner {
	width: 100%;
}

.mmr-nl__form-headline {
	margin: 0 0 18px !important;
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	font-weight: 800;
	line-height: 1.35;
	text-transform: uppercase;
}

.mmr-nl__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 340px;
}

.mmr-nl__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mmr-nl__input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 4px;
	background: #fff;
	color: var(--mmr-ink);
	font: inherit;
	font-size: 0.95rem;
}

.mmr-nl__input::placeholder {
	color: #8b8b99;
	opacity: 1;
}

.mmr-nl__input:focus {
	outline: 2px solid #fff;
	outline-offset: 1px;
}

.mmr-nl__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	border: 0;
	border-radius: 4px;
	background: #6d0c53;
	color: #fff;
	font: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.mmr-nl__button:hover,
.mmr-nl__button:focus-visible {
	background: #520a3f;
	color: #fff;
}

.mmr-nl__button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.mmr-nl__message {
	margin: 4px 0 0 !important;
	padding: 10px 14px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 0.85rem;
	color: #fff;
}

.mmr-nl__message[hidden] {
	display: none;
}

.mmr-nl__message.is-error {
	background: rgba(0, 0, 0, 0.28);
}

.mmr-nl__legal {
	margin: 18px 0 0 !important;
	max-width: 360px;
	font-size: 0.68rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

/* Eingebettetes Fremdformular (Elementor Forms) auf die Flaeche abstimmen. */
.mmr-nl__embed {
	max-width: 340px;
}

.mmr-nl__embed .elementor-field-group > label {
	color: #fff;
}

.mmr-nl__embed .elementor-message {
	color: #fff;
}

.mmr-nl__embed .elementor-field-type-submit {
	margin-top: 4px;
}

@media (max-width: 1024px) {
	.mmr-nl {
		--mmr-nl-badge: 160px;
	}

	.mmr-nl__benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 14px;
	}

	.mmr-nl__benefits li:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

/*
 * Gestapelt liegt die Naht nicht mehr in der Blockmitte. Der Kreis wandert
 * deshalb aus der absoluten Positionierung zurueck in den Fluss – dort steht
 * er im Markup ohnehin zwischen beiden Flaechen – und ueberlappt sie je zur
 * Haelfte ueber negative Aussenabstaende.
 */
@media (max-width: 880px) {
	.mmr-nl__inner {
		grid-template-columns: 1fr;
	}

	.mmr-nl__badge {
		position: relative;
		top: auto;
		left: auto;
		margin: calc(var(--mmr-nl-badge) / -2) auto;
		transform: none;
		justify-self: center;
	}

	.mmr-nl__left {
		padding-right: clamp(24px, 3.4vw, 44px);
		padding-bottom: calc(var(--mmr-nl-badge) / 2 + 20px);
	}

	.mmr-nl__right {
		padding-left: clamp(24px, 3.4vw, 44px);
		padding-top: calc(var(--mmr-nl-badge) / 2 + 20px);
	}

	.mmr-nl__form,
	.mmr-nl__legal {
		max-width: none;
	}
}

@media (max-width: 600px) {
	.mmr-nl {
		--mmr-nl-badge: 138px;
	}

	.mmr-nl__benefits {
		grid-template-columns: 1fr;
	}

	.mmr-nl__benefits li {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 4px 10px;
		padding-left: 0;
		border-left: 0;
	}

	.mmr-nl__benefit-title {
		flex: 1 1 auto;
	}

	.mmr-nl__benefit-text {
		flex: 1 1 100%;
	}

	.mmr-nl__badge-amount {
		font-size: 1.8rem;
	}
}

/* Honeypot */
.mmr-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- *
 * Responsive
 * ---------------------------------------------------------------- */

/* Tablet quer / kleiner Desktop */
@media (max-width: 1024px) {
	.mmr-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mmr-form__intro {
		grid-template-columns: 1fr 1fr;
	}

	.mmr-form__image {
		grid-column: 1 / -1;
		max-width: 420px;
	}

	.mmr-result__grid,
	.mmr-panel__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 20px;
	}

	.mmr-tile,
	.mmr-panel__col {
		border-left: 0;
	}
}

/* Tablet hoch */
@media (max-width: 880px) {
	.mmr-form__intro {
		grid-template-columns: 1fr;
	}

	.mmr-form__image {
		max-width: 100%;
	}

	.mmr-compare {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.mmr-compare__vs {
		margin: -10px auto;
	}

	.mmr-panel__col,
	.mmr-tile {
		border-left: 0;
	}
}

/* Mobil – gleiche Grenze wie Elementors Mobil-Breakpoint (767 px) */
@media (max-width: 767px) {
	.mmr-sliders {
		grid-template-columns: 1fr;
	}

	.mmr-form__grid {
		grid-template-columns: 1fr;
	}

	.mmr-result__grid,
	.mmr-panel__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.mmr-tile,
	.mmr-panel__col {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 18px 0;
		border-top: 1px solid var(--mmr-line);
		text-align: left;
	}

	.mmr-tile:first-child,
	.mmr-panel__col:first-child {
		border-top: 0;
		padding-top: 0;
	}

	.mmr-tile__icon {
		flex: 0 0 auto;
	}

	.mmr-tile__value {
		flex: 0 0 auto;
		min-width: 5.5em;
	}

	.mmr-tile__label {
		flex: 1 1 auto;
	}

	.mmr-step {
		padding: 28px 0;
	}

	.mmr-step__heading {
		gap: 10px;
		margin-bottom: 20px;
		font-size: 1.1rem;
	}

	.mmr-step__num {
		width: 28px;
		height: 28px;
		font-size: 0.85rem;
	}

	.mmr-result,
	.mmr-panel {
		padding: 24px 18px 20px;
	}

	.mmr-slider__question {
		min-height: 0;
	}

	.mmr-slider__value {
		font-size: 2.2rem;
	}

	.mmr-panel__value {
		font-size: 1.7rem;
	}

	.mmr-btn {
		width: 100%;
	}

	.mmr-form__footer {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.mmr-form__footer .mmr-privacy {
		justify-self: center;
	}

	/* Auf schmalen Geraeten sitzt die Checkbox unter dem Eingabefeld. */
	.mmr-form .mmr-field:has(.mmr-check--inline) {
		flex-wrap: wrap;
	}

	.mmr-check--inline {
		max-width: none;
		width: 100%;
		padding-left: 32px;
	}
}

@media (max-width: 600px) {
	.mmr-tile--total .mmr-tile__value {
		font-size: 2.1rem;
	}
}

/*
 * Schrittnummer vor einer Ueberschrift, die ausserhalb des Rechners steht.
 * Im Elementor-Widget im Reiter "Erweitert" die CSS-Klasse mmr-step-num-1
 * (bzw. -2, -3, -4) vergeben; die Nummer wird dann davorgesetzt.
 */
[class*="mmr-step-num-"] .elementor-heading-title,
h1[class*="mmr-step-num-"],
h2[class*="mmr-step-num-"],
h3[class*="mmr-step-num-"],
h4[class*="mmr-step-num-"] {
	display: flex;
	align-items: center;
	gap: 14px;
}

[class*="mmr-step-num-"] .elementor-heading-title::before,
h1[class*="mmr-step-num-"]::before,
h2[class*="mmr-step-num-"]::before,
h3[class*="mmr-step-num-"]::before,
h4[class*="mmr-step-num-"]::before {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mmr-accent, #951272);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.mmr-step-num-1 .elementor-heading-title::before,
h1.mmr-step-num-1::before,
h2.mmr-step-num-1::before,
h3.mmr-step-num-1::before,
h4.mmr-step-num-1::before {
	content: "1";
}

.mmr-step-num-2 .elementor-heading-title::before,
h1.mmr-step-num-2::before,
h2.mmr-step-num-2::before,
h3.mmr-step-num-2::before,
h4.mmr-step-num-2::before {
	content: "2";
}

.mmr-step-num-3 .elementor-heading-title::before,
h1.mmr-step-num-3::before,
h2.mmr-step-num-3::before,
h3.mmr-step-num-3::before,
h4.mmr-step-num-3::before {
	content: "3";
}

.mmr-step-num-4 .elementor-heading-title::before,
h1.mmr-step-num-4::before,
h2.mmr-step-num-4::before,
h3.mmr-step-num-4::before,
h4.mmr-step-num-4::before {
	content: "4";
}

@media (max-width: 600px) {
	[class*="mmr-step-num-"] .elementor-heading-title::before,
	h1[class*="mmr-step-num-"]::before,
	h2[class*="mmr-step-num-"]::before,
	h3[class*="mmr-step-num-"]::before,
	h4[class*="mmr-step-num-"]::before {
		width: 28px;
		height: 28px;
		font-size: 0.85rem;
	}
}