/**
 * ML Produktkonfigurator – Frontend
 *
 * Alle Regeln sind mit .mlk gescoped. Das ist kein Selbstzweck: der
 * hello-elementor-Reset setzt u. a. `[type="button"], button { border: 1px
 * solid #c36; color: #c36 }`. Das hat dieselbe Spezifität wie eine einfache
 * Klasse und wird später geladen – ohne den .mlk-Vorsatz gewinnt das Theme.
 * Mit dem Vorsatz gewinnen wir, ohne irgendwo !important zu brauchen.
 */

.mlk {
	--mlk-rahmen: #e2ded8;
	--mlk-rahmen-stark: #c9c3ba;
	--mlk-akzent: #1a1a1a;
	--mlk-flaeche: #fff;
	--mlk-flaeche-alt: #f7f5f2;
	--mlk-text: #1a1a1a;
	--mlk-text-leise: #6b6b6b;
	--mlk-fehler: #b3261e;
	--mlk-radius: 12px;

	margin: 0 0 28px;
	color: var(--mlk-text);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

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

/* ---------- Notnagel für die Shortcode-Platzierung ----------
 *
 * Im Normalfall steht der Konfigurator vor dem Warenkorb-Formular. Wer ihn per
 * Shortcode ausdrücklich INNERHALB von form.cart platziert, läuft sonst in die
 * Flex-Zeile vieler Themes: der Konfigurator würde gequetscht, Mengenfeld und
 * Button über seine ganze Höhe gestreckt.
 */

form.cart:has(> .mlk) {
	flex-wrap: wrap;
	align-items: center;
}

form.cart > .mlk {
	flex: 1 0 100%;
	width: 100%;
	min-width: 0;
}

/* =====================================================================
 * Schritt-Karten
 * ================================================================== */

.mlk .mlk-section {
	margin: 0 0 20px;
	border: 1px solid var(--mlk-rahmen);
	border-radius: var(--mlk-radius);
	background: var(--mlk-flaeche);
	/*
	 * Bewusst KEIN overflow:hidden mehr.
	 *
	 * Es klippte zwar die Ecken der Kopfzeile sauber ab, macht aber jedes
	 * position:sticky darin wirkungslos – und die Kopfzeile soll ja gerade
	 * mitwandern. Die Ecken uebernimmt jetzt die Kopfzeile selbst.
	 */
}

/*
 * Die Ueberschrift eines Abschnitts wandert mit.
 *
 * Bei vier Seitenwaenden untereinander ist die Ueberschrift nach dem ersten
 * Blaettern weg, und man weiss nicht mehr, ob man noch in "Personalisierung"
 * ist oder schon im Zubehoer. Sie bleibt deshalb am oberen Rand stehen, bis
 * ihr Abschnitt zu Ende ist – dann schiebt die naechste sie hinaus.
 *
 * --mlk-oben setzt frontend.js: am Handy die Hoehe der klebenden Vorschau,
 * am Schreibtisch der Abstand zur Kopfleiste. Fest verdrahtet ginge es
 * nicht, die Vorschau ist auf- und zugeklappt verschieden hoch.
 */
.mlk .mlk-section__title {
	position: sticky;
	top: var(--mlk-oben, 72px);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 14px 20px;
	border-bottom: 1px solid var(--mlk-rahmen);
	border-top-left-radius: calc(var(--mlk-radius) - 1px);
	border-top-right-radius: calc(var(--mlk-radius) - 1px);
	background: var(--mlk-flaeche-alt);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/*
 * Wenn der Kopf sich von seiner Karte geloest hat.
 *
 * Solange er oben auf der Karte sitzt, sind die runden Ecken richtig -
 * sie sind die Ecken der Karte. Sobald er beim Blaettern nach unten
 * wandert, sind sie falsch: dann sieht er aus wie eine Pille, die mitten
 * in der Karte schwebt. Genau das war zu sehen.
 *
 * Geloest bekommt er darum eckige Kanten und einen Schatten - damit
 * liest er sich als Leiste, unter der der Inhalt durchlaeuft, und nicht
 * als etwas, das dort verrutscht ist. Die Klasse setzt frontend.js.
 */
.mlk .mlk-section__title--klebt {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .45);
}

.mlk .mlk-section__nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mlk-akzent);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	flex: 0 0 auto;
}

.mlk .mlk-section__desc {
	margin: 0;
	padding: 12px 20px 0;
	color: var(--mlk-text-leise);
	font-size: 14px;
}

/*
 * Abschnitte voneinander absetzen.
 *
 * In der Werkstattansicht tragen die Blöcke Farben, weil dort vier
 * verschiedene Arbeiten nebeneinanderliegen und man den richtigen Bereich
 * finden muss, ohne zu lesen. Hier ist es eine Reihenfolge: erst Farbe,
 * dann Motive, dann Zubehör. Da braucht es keine Signalfarbe, nur eine
 * klare Kante – deshalb ein ruhiger grauer Streifen links, sonst nichts.
 */
.mlk .mlk-section {
	border-left: 4px solid #cfc9c0;
}

/*
 * Der Beschreibungstext über dem Konfigurator.
 *
 * Als einzige Regel dieser Datei ohne .mlk-Vorsatz – sie muss es sein, denn
 * der Text steht außerhalb des Konfigurators, in einem eigenen
 * Elementor-Baustein darüber. Ungefährlich ist das trotzdem: Dieses
 * Stylesheet wird nur auf Produktseiten mit Konfigurator geladen (und im
 * Warenkorb, wo es diesen Text nicht gibt).
 *
 * Bewusst ohne den grauen Streifen der Abschnitte: Das ist Fließtext und
 * kein Schritt, den man abarbeitet. Ein ruhiger Kasten reicht, um ihn vom
 * Konfigurator darunter zu trennen. Die Werte stehen ausgeschrieben, weil
 * die Variablen an .mlk hängen und hier nicht gelten.
 */
.woocommerce-product-details__short-description {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid #e2ded8;
	border-radius: 12px;
	background: #f7f5f2;
}

.woocommerce-product-details__short-description > *:first-child {
	margin-top: 0;
}

.woocommerce-product-details__short-description > *:last-child {
	margin-bottom: 0;
}

/* =====================================================================
 * Felder
 * ================================================================== */

.mlk .mlk-field {
	padding: 16px 20px;
	border-top: 1px solid #f0eeea;
}

.mlk .mlk-section__title + .mlk-field,
.mlk .mlk-section__desc + .mlk-field {
	border-top: 0;
}

.mlk .mlk-field[hidden] {
	display: none;
}

.mlk .mlk-field__label {
	display: block;
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
}

.mlk .mlk-req {
	border: 0;
	margin-left: 2px;
	color: var(--mlk-fehler);
	text-decoration: none;
	cursor: help;
}

.mlk .mlk-field__hint {
	display: block;
	margin: 0 0 10px;
	color: var(--mlk-text-leise);
	font-size: 13.5px;
}

.mlk .mlk-field__label + .mlk-auswahl,
.mlk .mlk-field__label + .mlk-zubehoer,
.mlk .mlk-field__label + .mlk-motiv,
.mlk .mlk-field__label + .mlk-input {
	margin-top: 10px;
}

.mlk .mlk-field__error {
	display: block;
	margin: 8px 0 0;
	color: var(--mlk-fehler);
	font-size: 13.5px;
	font-weight: 600;
}

.mlk .mlk-field--fehler {
	background: #fdf5f5;
}

/* =====================================================================
 * Knöpfe
 * ================================================================== */

.mlk .mlk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px;
	border: 1px solid var(--mlk-akzent);
	border-radius: 8px;
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.mlk .mlk-btn:hover,
.mlk .mlk-btn:focus-visible {
	background: var(--mlk-flaeche-alt);
	color: var(--mlk-text);
}

.mlk .mlk-btn--primary {
	background: var(--mlk-akzent);
	border-color: var(--mlk-akzent);
	color: #fff;
}

.mlk .mlk-btn--primary:hover,
.mlk .mlk-btn--primary:focus-visible {
	background: #333;
	color: #fff;
}

/* =====================================================================
 * Motivfläche
 * ================================================================== */

/*
 * Der Behälter für das gewählte Motiv. Ohne Auswahl steht hier nichts –
 * früher blieb an dieser Stelle ein leerer gestrichelter Kasten stehen,
 * weil dort auch die Knöpfe lagen. Die sind jetzt in der Wegereihe.
 */
.mlk .mlk-motiv__slot {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.mlk .mlk-motiv__slot:not(:has(.mlk-motiv__vorschau:not([hidden]))) {
	display: none;
}

.mlk .mlk-motiv__vorschau {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px 8px 8px;
	border: 1px solid var(--mlk-rahmen);
	border-radius: 10px;
	background: var(--mlk-flaeche);
}

.mlk .mlk-motiv__vorschau[hidden] {
	display: none;
}

.mlk .mlk-motiv__bild {
	width: 60px;
	height: 60px;
	border-radius: 6px;
	object-fit: contain;
	background: var(--mlk-flaeche-alt);
}

.mlk .mlk-motiv__info {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.mlk .mlk-motiv__name {
	font-weight: 700;
	line-height: 1.25;
}

.mlk .mlk-motiv__preis {
	color: var(--mlk-text-leise);
	font-size: 14px;
}

.mlk .mlk-motiv__loeschen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--mlk-rahmen-stark);
	border-radius: 50%;
	background: var(--mlk-flaeche);
	color: var(--mlk-text-leise);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.mlk .mlk-motiv__loeschen:hover {
	border-color: var(--mlk-fehler);
	background: var(--mlk-fehler);
	color: #fff;
}

/* „Ohne Motiv“ ist jetzt einer der drei Wege – gestaltet über
   .mlk-motiv__weg weiter unten. */

.mlk .mlk-motiv__textfeld {
	display: block;
	margin: 12px 0 0;
}

.mlk .mlk-motiv__textfeld[hidden] {
	display: none;
}

.mlk .mlk-motiv__textlabel {
	display: block;
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 700;
}

.mlk .mlk-motiv__textinput {
	width: 100%;
	max-width: 340px;
	padding: 10px 12px;
	border: 1px solid var(--mlk-rahmen-stark);
	border-radius: 8px;
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
	font: inherit;
}

.mlk .mlk-motiv__texthinweis {
	display: block;
	margin: 5px 0 0;
	color: var(--mlk-text-leise);
	font-size: 13px;
}

/*
 * Der Monat der HU-Plakette.
 *
 * Sieht aus wie das Textfeld darueber - es sind zwei Angaben zu
 * derselben Sache, und die sollen auch so dastehen.
 */
.mlk .mlk-motiv__monat {
	display: block;
	margin: 14px 0 0;
}

/*
 * Ohne diese Regel bleibt das Feld beim Motivwechsel stehen.
 *
 * Das "display: block" darueber ist eine Autorenregel und schlaegt die
 * eingebaute Regel [hidden]{display:none} des Browsers - das Javascript
 * setzt hidden, und sichtbar bleibt es trotzdem. Beim Textfeld steht
 * dieselbe Zeile seit jeher daneben.
 */
.mlk .mlk-motiv__monat[hidden] {
	display: none;
}

.mlk .mlk-motiv__monatlabel {
	display: block;
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 700;
}

.mlk .mlk-motiv__monatwahl {
	width: 100%;
	max-width: 340px;
	padding: 10px 12px;
	border: 1px solid var(--mlk-rahmen-stark);
	border-radius: 8px;
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
	font: inherit;
}

.mlk .mlk-motiv__monathinweis {
	display: block;
	margin: 5px 0 0;
	color: var(--mlk-text-leise);
	font-size: 13px;
}

/* Fehlt der Monat, obwohl er verlangt ist - dieselbe Ansage wie sonst. */
.mlk .mlk-motiv__monatwahl.mlk-motiv__monatwahl--fehlt {
	border-color: var(--mlk-warnung, #b3261e);
}

/* =====================================================================
 * Zubehör
 * ================================================================== */

.mlk .mlk-zubehoer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px;
}

.mlk .mlk-karte {
	display: grid;
	grid-template-columns: 22px 68px 1fr;
	align-items: center;
	gap: 4px 12px;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--mlk-rahmen);
	border-radius: 10px;
	background: var(--mlk-flaeche);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mlk .mlk-karte:hover {
	border-color: var(--mlk-rahmen-stark);
}

.mlk .mlk-karte:has(.mlk-karte__input:checked) {
	border-color: var(--mlk-akzent);
	box-shadow: inset 0 0 0 1px var(--mlk-akzent);
}

.mlk .mlk-karte__input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--mlk-akzent);
}

.mlk .mlk-karte__bild img {
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 6px;
	object-fit: contain;
	background: var(--mlk-flaeche-alt);
}

.mlk .mlk-karte__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mlk .mlk-karte__name {
	font-weight: 700;
	line-height: 1.25;
}

.mlk .mlk-karte__preis {
	color: var(--mlk-text-leise);
	font-size: 14px;
}

.mlk .mlk-karte__je {
	font-size: 13px;
}

.mlk .mlk-karte__hinweis,
.mlk .mlk-karte__ausfuehrung,
.mlk .mlk-karte__variante,
.mlk .mlk-karte__menge {
	grid-column: 2 / -1;
}

.mlk .mlk-karte__hinweis {
	margin-top: 4px;
	color: var(--mlk-text-leise);
	font-size: 13px;
	line-height: 1.4;
}

.mlk .mlk-karte__ausfuehrung {
	color: var(--mlk-text-leise);
	font-size: 13px;
}

.mlk .mlk-karte__variante {
	width: 100%;
	margin-top: 6px;
	padding: 8px 10px;
	border: 1px solid var(--mlk-rahmen-stark);
	border-radius: 8px;
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
	font: inherit;
	font-size: 14px;
}

.mlk .mlk-karte__menge {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 14px;
}

.mlk .mlk-karte__mengelabel {
	color: var(--mlk-text-leise);
}

.mlk .mlk-karte__mengeinput {
	width: 74px;
	padding: 7px 8px;
	border: 1px solid var(--mlk-rahmen-stark);
	border-radius: 8px;
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
	font: inherit;
}

/* =====================================================================
 * Auswahl, Ankreuzfeld, Freitext
 * ================================================================== */

.mlk .mlk-auswahl {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mlk .mlk-auswahl--liste {
	flex-direction: column;
	flex-wrap: nowrap;
}

.mlk .mlk-auswahl__opt {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 10px 16px 10px 12px;
	border: 1px solid var(--mlk-rahmen);
	border-radius: 10px;
	background: var(--mlk-flaeche);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mlk .mlk-auswahl__opt:hover {
	border-color: var(--mlk-rahmen-stark);
}

.mlk .mlk-auswahl__opt:has(input:checked) {
	border-color: var(--mlk-akzent);
	box-shadow: inset 0 0 0 1px var(--mlk-akzent);
}

.mlk .mlk-auswahl__opt input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--mlk-akzent);
	flex: 0 0 auto;
}

.mlk .mlk-auswahl__bild img {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 6px;
	object-fit: cover;
}

.mlk .mlk-auswahl__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.mlk .mlk-auswahl__name {
	font-weight: 600;
	line-height: 1.25;
}

.mlk .mlk-auswahl__preis {
	color: var(--mlk-text-leise);
	font-size: 13.5px;
}

.mlk .mlk-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	cursor: pointer;
}

.mlk .mlk-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--mlk-akzent);
	flex: 0 0 auto;
}

.mlk .mlk-input {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--mlk-rahmen-stark);
	border-radius: 8px;
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
	font: inherit;
}

.mlk .mlk-input:focus-visible,
.mlk .mlk-motiv__textinput:focus-visible {
	outline: 2px solid var(--mlk-akzent);
	outline-offset: 1px;
}

.mlk .mlk-textarea {
	resize: vertical;
	min-height: 90px;
}

/* =====================================================================
 * Zusammenfassung
 * ================================================================== */

.mlk .mlk-summe {
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--mlk-akzent);
	border-radius: var(--mlk-radius);
	background: var(--mlk-flaeche-alt);
}

.mlk .mlk-summe__title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
}

.mlk .mlk-summe__liste {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.mlk .mlk-summe__zeile {
	display: grid;
	grid-template-columns: minmax(110px, 30%) 1fr auto;
	gap: 12px;
	margin: 0;
	padding: 6px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	font-size: 14px;
}

.mlk .mlk-summe__label {
	color: var(--mlk-text-leise);
}

.mlk .mlk-summe__wert {
	min-width: 0;
	overflow-wrap: anywhere;
	font-weight: 600;
}

.mlk .mlk-summe__preis {
	white-space: nowrap;
	text-align: right;
}

.mlk .mlk-summe__zeile--gesamt {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 0 0;
	border: 0;
	font-size: 16px;
	font-weight: 700;
}

.mlk .mlk-summe__betrag {
	font-size: 24px;
	font-weight: 700;
}

/* =====================================================================
 * Auswahlfenster für Motive
 * ================================================================== */

/*
 * KEIN overflow:hidden am body, solange das Motivfenster offen ist.
 *
 * Auf dem iPhone setzt Safari die Seite dabei zurueck - man tippt auf
 * "Motiv auswaehlen" und steht nach dem Schliessen an ganz anderer
 * Stelle. Gebraucht wird die Sperre nicht: Das Fenster liegt fest ueber
 * der Seite und faengt das Wischen selbst ab (overscroll-behavior am
 * Kasten darin).
 */
body.mlk-popup-offen {
	overscroll-behavior: contain;
}

.mlk .mlk-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.mlk .mlk-popup[hidden] {
	display: none;
}

.mlk .mlk-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
}

.mlk .mlk-popup__box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1060px, 100%);
	/*
	 * Feste Höhe statt max-height: Sonst ist der Kasten beim Öffnen nur so
	 * hoch wie die Ladezeile, wächst beim Eintreffen der Motive schlagartig
	 * mit – und Umschalter, Suchfeld und Filterknöpfe springen dem Kunden
	 * unter dem Finger weg.
	 */
	height: min(88vh, 900px);
	border-radius: 14px;
	background: var(--mlk-flaeche);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
	overflow: hidden;
}

.mlk .mlk-popup__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--mlk-rahmen);
}

.mlk .mlk-popup__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.mlk .mlk-popup__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--mlk-rahmen);
	border-radius: 50%;
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.mlk .mlk-popup__close:hover {
	background: var(--mlk-flaeche-alt);
}

.mlk .mlk-popup__filter {
	padding: 16px 24px;
	border-bottom: 1px solid var(--mlk-rahmen);
	background: var(--mlk-flaeche-alt);
}

.mlk .mlk-popup__suche {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--mlk-rahmen-stark);
	border-radius: 8px;
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
	font: inherit;
}

.mlk .mlk-popup__kats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	/*
	 * Platz für eine Knopfreihe freihalten, auch solange noch keine da ist.
	 * Sonst rutscht beim Eintreffen der Filter alles darunter nach unten.
	 */
	min-height: 33px;
}

.mlk .mlk-chip {
	padding: 6px 14px;
	border: 1px solid var(--mlk-rahmen-stark);
	border-radius: 999px;
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
	font: inherit;
	font-size: 13.5px;
	line-height: 1.4;
	cursor: pointer;
}

.mlk .mlk-chip:hover {
	border-color: var(--mlk-akzent);
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
}

.mlk .mlk-chip--aktiv,
.mlk .mlk-chip--aktiv:hover {
	border-color: var(--mlk-akzent);
	background: var(--mlk-akzent);
	color: #fff;
}

.mlk .mlk-popup__body {
	flex: 1;
	padding: 20px 24px 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mlk .mlk-popup__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
	align-items: start;
}

/* =====================================================================
 * Motivflächen voneinander abgrenzen
 * -------------------------------------------------------------------
 * Motivfläche 1, 2 und 3 standen ohne Trennung untereinander. Mit
 * Datenbank-Auswahl, Upload-Bereich, Video und Bestätigung ist jede
 * davon inzwischen so hoch, dass man ohne Abgrenzung nicht mehr sieht,
 * wo die eine aufhört und die nächste anfängt.
 * ================================================================== */

/*
 * Nachgemessen: der Bereich um die Felder herum ist weiß, nicht beige –
 * ein weißer Kasten hätte also gar keinen Kontrast erzeugt. Deshalb
 * andersherum: die Motivflächen bekommen einen warmen hellen Grund und
 * heben sich damit vom weißen Umfeld ab.
 */
.mlk .mlk-field.mlk-field--motiv {
	padding: 16px;
	border: 1px solid #ded8d0;
	border-radius: 12px;
	background: #f7f5f2;
}

.mlk .mlk-field--motiv + .mlk-field--motiv,
.mlk .mlk-field + .mlk-field--motiv,
.mlk .mlk-field--motiv + .mlk-field {
	margin-top: 20px;
}

/*
 * Die Überschrift der Fläche bekommt einen farbigen Balken links.
 * Damit ist der Anfang einer neuen Fläche schon beim Überfliegen
 * erkennbar, ohne den Rahmen zu suchen.
 */
.mlk .mlk-field--motiv > .mlk-field__label {
	padding: 0 0 10px 12px;
	border-left: 4px solid var(--mlk-akzent);
	border-bottom: 1px solid #e8e4de;
	margin-bottom: 14px;
	line-height: 1.2;
}

/* Im Kasten trägt die gestrichelte Linie über dem Upload nicht mehr –
   sie stünde direkt neben dem Rahmen. */
.mlk .mlk-field--motiv .mlk-eigen {
	border-top-style: solid;
}


/* =====================================================================
 * Eigenes Motiv hochladen
 * ================================================================== */

.mlk .mlk-eigen {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--mlk-rahmen);
}

/* Der Schalter „Eigenes Motiv hochladen“ steht jetzt in der Wegereihe
   und wird über .mlk-motiv__weg gestaltet. */

.mlk .mlk-eigen__preis {
	font-weight: 600;
}

.mlk .mlk-eigen__panel {
	margin-top: 12px;
	padding: 14px;
	border: 1px solid var(--mlk-rahmen);
	border-radius: 10px;
	background: var(--mlk-flaeche);
}

.mlk .mlk-eigen__regeln summary {
	cursor: pointer;
	font-weight: 600;
}

.mlk .mlk-eigen__regeln ul {
	margin: 10px 0 0;
	padding-left: 20px;
	line-height: 1.55;
}

.mlk .mlk-eigen__regeln li {
	margin-bottom: 7px;
}

/*
 * Erklärvideo. Es ist hochkant aufgenommen (720 × 1280) – die Höhe wird
 * begrenzt, sonst füllt es auf dem Handy den ganzen Bildschirm und der
 * Rest des Bereichs verschwindet aus dem Blick.
 */
.mlk .mlk-eigen__video {
	margin: 14px 0;
	text-align: center;
}

.mlk .mlk-eigen__kurz {
	margin: 0 0 12px;
	padding: 9px 11px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .04);
	line-height: 1.45;
}

.mlk .mlk-eigen__video video {
	width: 100%;
	max-width: 260px;
	max-height: 62vh;
	border-radius: 10px;
	background: #000;
	display: block;
	margin: 0 auto;
}

.mlk .mlk-eigen__video figcaption {
	margin-top: 6px;
	font-size: 14px;
	color: var(--mlk-text-leise, #777);
}

.mlk .mlk-eigen__pruefung {
	margin: 14px 0;
	padding: 10px 12px;
	border-left: 3px solid var(--mlk-akzent);
	background: rgba(0, 0, 0, .03);
	line-height: 1.5;
}

/* Die Dateiauswahl als Fläche – der graue Systemknopf allein wirkt verloren. */
.mlk .mlk-eigen__waehlen {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	border: 2px dashed var(--mlk-rahmen-stark);
	border-radius: 10px;
	cursor: pointer;
	text-align: center;
}

.mlk .mlk-eigen__waehlen:hover {
	border-color: var(--mlk-akzent);
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
}

.mlk .mlk-eigen__waehlen span {
	font-weight: 600;
}

.mlk .mlk-eigen__waehlen small {
	color: var(--mlk-text-leise, #777);
}

.mlk .mlk-eigen__datei {
	display: block;
	width: 100%;
	margin-bottom: 6px;
	font: inherit;
}

.mlk .mlk-eigen__status {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	line-height: 1.45;
}

.mlk .mlk-eigen__status--laeuft {
	background: rgba(0, 0, 0, .04);
}

.mlk .mlk-eigen__status--fehler {
	background: #fdeceb;
	color: #8c1d18;
}

.mlk .mlk-eigen__status--hinweis {
	background: #fff6e5;
	color: #6b4a00;
}

.mlk .mlk-eigen__ergebnis {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding: 10px;
	border: 1px solid var(--mlk-rahmen);
	border-radius: 8px;
	background: #fff;
}

.mlk .mlk-eigen__vorschau {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	background: #f2f0ed;
}

.mlk .mlk-eigen__daten {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	gap: 2px;
}

.mlk .mlk-eigen__name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.mlk .mlk-eigen__masse {
	font-size: 14px;
	color: var(--mlk-text-leise, #777);
}

.mlk .mlk-eigen__loeschen {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 1px solid var(--mlk-rahmen-stark);
	border-radius: 50%;
	background: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.mlk .mlk-eigen__loeschen:hover {
	border-color: var(--mlk-fehler);
	background: var(--mlk-fehler);
	color: #fff;
}

.mlk .mlk-eigen__zustimmung {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	line-height: 1.45;
}

.mlk .mlk-eigen__zustimmung input {
	margin-top: 3px;
	flex: 0 0 auto;
}

/* ---------- Motiv-Kachel: Beschriftung oben, Bild darunter ---------- */

.mlk .mlk-motivkarte {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	border: 1px solid var(--mlk-rahmen);
	border-radius: 10px;
	background: var(--mlk-flaeche);
	font: inherit;
	color: var(--mlk-text);
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;

	/*
	 * Safari setzt für <button> im eigenen Stylesheet align-items: center.
	 * Kopfzeile und Bildfläche wachsen dort deshalb nicht auf die volle
	 * Kartenbreite, sondern stehen mittig und schmal – der graue Balken
	 * hört mitten in der Karte auf. Chrome und Firefox tun das nicht.
	 */
	align-items: stretch;
}

/*
 * Hintergrund und Schriftfarbe stehen hier ausdrücklich, obwohl sie sich
 * nicht ändern: Der hello-elementor-Reset setzt
 * button:hover { background-color: #c36; color: #fff }. Wo wir beim
 * Überfahren nichts dazu sagen, greift das Theme – die Karte wurde pink
 * und die Beschriftung weiß auf weiß.
 */
.mlk .mlk-motivkarte:hover {
	border-color: var(--mlk-akzent);
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.mlk .mlk-motivkarte__kopf {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 10px 12px;
	border-bottom: 1px solid var(--mlk-rahmen);
	background: var(--mlk-flaeche-alt);
	min-height: 58px;
}

.mlk .mlk-motivkarte__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.mlk .mlk-motivkarte__preis {
	color: var(--mlk-text-leise);
	font-size: 13px;
}

.mlk .mlk-motivkarte__bild {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 160px;
	padding: 8px;
	background: var(--mlk-flaeche);
	overflow: hidden;
}

.mlk .mlk-motivkarte__bild img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.mlk .mlk-motivkarte__x {
	color: var(--mlk-rahmen-stark);
	font-size: 40px;
	line-height: 1;
}

.mlk .mlk-popup__status {
	margin: 20px 0;
	text-align: center;
	color: var(--mlk-text-leise);
}

.mlk .mlk-popup__mehr {
	display: flex;
	margin: 20px auto 0;
}

.mlk .mlk-popup__mehr[hidden] {
	display: none;
}

/* =====================================================================
 * Hinweis beim Nachbessern einer Zusammenstellung
 * ================================================================== */

.mlk .mlk-bearbeiten-hinweis {
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--mlk-akzent);
	border-left-width: 4px;
	border-radius: 8px;
	background: var(--mlk-flaeche-alt);
	font-size: 14px;
	line-height: 1.5;
}

/* =====================================================================
 * Eigenständige Motivgalerie – Shortcode [ml_motivgalerie]
 * ================================================================== */

.mlk-galerie {
	--mlk-galerie-spalten: 4;
}

.mlk .mlk-galerie__titel {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 700;
}

.mlk .mlk-galerie__filter {
	margin: 0 0 20px;
	padding: 16px;
	border: 1px solid var(--mlk-rahmen);
	border-radius: var(--mlk-radius);
	background: var(--mlk-flaeche-alt);
}

.mlk .mlk-galerie__grid {
	grid-template-columns: repeat(var(--mlk-galerie-spalten), minmax(0, 1fr));
}

.mlk .mlk-galerie__mehr {
	display: flex;
	margin: 24px auto 0;
}

.mlk .mlk-galerie__mehr[hidden] {
	display: none;
}

.mlk .mlk-galerie__anzahl {
	margin: 18px 0 0;
	color: var(--mlk-text-leise);
	font-size: 14px;
}

.mlk .mlk-motivkarte[hidden] {
	display: none;
}

/* =====================================================================
 * Das gewaehlte Motiv
 *
 * Wer noch einmal ins Fenster schaut, will zuerst sehen, wofuer er sich
 * entschieden hat - und zwar ohne Namen lesen zu muessen. Rahmen und
 * Haken, mehr braucht es nicht.
 * ================================================================== */
.mlk .mlk-motivkarte--gewaehlt {
	border-color: var(--mlk-akzent);
	box-shadow: 0 0 0 2px var(--mlk-akzent);
}

.mlk .mlk-motivkarte--gewaehlt .mlk-motivkarte__bild::after {
	content: "✓";
	position: absolute;
	left: 6px;
	bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mlk-akzent);
	color: #fff;
	font-size: 16px;
	line-height: 1;
}

/* =====================================================================
 * Die Lupe an der Motivkachel
 *
 * Sitzt in der Ecke des Bildes, nicht daneben: Die Kachel ist schon eng,
 * und eine eigene Zeile dafuer wuerde die Liste in die Laenge ziehen.
 * Gross genug zum Treffen mit dem Daumen (34 Pixel).
 * ================================================================== */
.mlk .mlk-motivkarte__bild {
	position: relative;
}

.mlk .mlk-lupe {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * 44 Pixel, nicht 34: Das ist das uebliche Mindestmass fuer etwas, das
	 * mit dem Daumen getroffen werden soll. Bei 34 ging es mehrfach daneben.
	 */
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--mlk-rahmen);
	color: var(--mlk-text);
	line-height: 0;
	cursor: zoom-in;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

.mlk .mlk-lupe svg {
	display: block;
}

/* =====================================================================
 * Das Herz zum Vormerken
 *
 * Gegenueber der Lupe, in derselben Groesse. Leer heisst "noch nicht
 * gemerkt", gefuellt und rot heisst "gemerkt" - die Sprache kennt jeder
 * aus anderen Laeden und muss nicht erklaert werden.
 * ================================================================== */
.mlk .mlk-merk {
	position: absolute;
	left: 6px;
	bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--mlk-rahmen);
	color: var(--mlk-text);
	line-height: 0;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

.mlk .mlk-merk svg {
	display: block;
}

.mlk .mlk-merk:hover,
.mlk .mlk-merk:focus-visible {
	border-color: #d33a3a;
	color: #d33a3a;
}

.mlk .mlk-merk--an {
	color: #d33a3a;
	border-color: #d33a3a;
}

.mlk .mlk-merk--an svg path {
	fill: #d33a3a;
}

/*
 * Auf der Galerieseite steht das Herz neben dem Link, nicht darin.
 * Die Huelle traegt die Stellung, damit die Ecke wieder ueber dem Bild
 * sitzt - wie im Motivfenster auch.
 */
.mlk .mlk-karte-huelle {
	position: relative;
	display: flex;
}

.mlk .mlk-karte-huelle > .mlk-motivkarte {
	flex: 1 1 auto;
	min-width: 0;
}

.mlk .mlk-karte-huelle[hidden] {
	display: none;
}

.mlk .mlk-karte-huelle .mlk-merk {
	left: auto;
	right: 8px;
	bottom: 8px;
}

/* Der Reiter "Gemerkt" traegt Herz und Zahl mit. */
.mlk .mlk-popup__merkzahl {
	font-variant-numeric: tabular-nums;
	opacity: .75;
}

/*
 * Das Herz im Reiter - dieselbe Sprache wie an den Kacheln. Rot bleibt es
 * auch im ausgewaehlten Reiter, sonst verschwaende es auf dunklem Grund.
 */
.mlk .mlk-popup__merkherz {
	display: inline-flex;
	line-height: 0;
	color: #d33a3a;
}

.mlk .mlk-popup__merkherz svg {
	display: block;
}

.mlk .mlk-popup__quelle--merk[hidden] {
	display: none;
}

.mlk .mlk-lupe:hover,
.mlk .mlk-lupe:focus-visible {
	background: #fff;
	border-color: var(--mlk-akzent);
}

/* =====================================================================
 * Ein Motiv gross ansehen
 *
 * Dunkler Grund, Bild darauf, sonst nichts. Alles schliesst es wieder.
 * ================================================================== */
.mlk-gross {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;

	/*
	 * Oben der Titel, unten die Leiste - beide bekommen ihren Platz ueber
	 * den Innenabstand. Eine gerechnete Bildhoehe waere falsch, sobald eine
	 * Zeile einmal umbricht.
	 */
	padding: 66px 20px 84px;
	background: rgba(0, 0, 0, .88);
	cursor: zoom-out;

	/*
	 * Die Beruehrung gehoert dieser Ansicht.
	 *
	 * Ohne diese Zeile deutet der Browser jeden Wisch als Scrollen, nimmt
	 * ihn fuer sich und schiebt die Seite darunter - der Wisch kam dann gar
	 * nicht erst an. Genau das hat Nico gemerkt: "reagiert teilweise nicht".
	 */
	touch-action: none;
	overscroll-behavior: contain;
}

/* Auch auf dem Bild selbst - dort landet der Finger meistens. */
.mlk-gross__bild,
.mlk-gross__name,
.mlk-gross__pfeil,
.mlk-gross__zu {
	touch-action: none;
}

/*
 * Solange ein Bild gross zu sehen ist, steht die Seite darunter still.
 * Sonst scrollt sie unbemerkt mit, und nach dem Schliessen ist man
 * woanders als vorher.
 */
html.mlk-starr,
html.mlk-starr body {
	overflow: hidden;
}

.mlk-gross--an {
	display: flex;
}

.mlk-gross__bild {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 8px;
	background: #fff;
}

/*
 * Der Motivname steht oben.
 *
 * Unten stand er zwischen Bild und Knoepfen im Weg. Wer ein Bild aufmacht,
 * will zuerst wissen, was er ansieht - und es ist die Ueberschrift dieser
 * Ansicht, keine Fussnote.
 *
 * Rechts bleibt Platz fuer das Kreuz, links ebenso viel, damit die Zeile
 * mittig bleibt statt daneben.
 */
.mlk-gross__name {
	position: absolute;
	left: 0;
	right: 0;
	top: 20px;
	padding: 0 68px;
	text-align: center;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
	pointer-events: none;
}

@media (max-width: 560px) {
	.mlk-gross__name { font-size: 17px; padding: 0 58px; }
}

/*
 * Die Leiste am unteren Rand.
 *
 * Zwei Wege, beide beschriftet: waehlen oder zurueck. Wer ein Motiv gross
 * ansieht, hat gerade entschieden - genau dann darf man ihn nicht ohne
 * Angebot zurueckschicken.
 */
.mlk-gross__leiste {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	display: flex;
	justify-content: center;
	gap: 10px;
	padding: 0 16px;
	flex-wrap: wrap;
}

.mlk-gross__waehlen,
.mlk-gross__weiter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

/*
 * Eigene Farben, keine Variablen.
 *
 * Die Variablen des Konfigurators haengen an ".mlk"; diese Ansicht haengt
 * am body und sieht sie nicht - die Angabe fiel ersatzlos aus, der Knopf
 * war durchsichtig. Und der Akzent ist fast Schwarz, auf dunklem Grund
 * also ohnehin die falsche Wahl.
 *
 * Weiss fuer den Weg, den man meistens will. Er sticht auf dem dunklen
 * Grund am staerksten hervor.
 */
.mlk-gross__waehlen {
	background: #fff;
	color: #1b1b1b;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/*
 * Halbdurchsichtiges Weiss sah auf hellen Bildern aus wie ein Schatten -
 * man sah nicht, dass man druecken kann. Jetzt deckend, mit dunkler
 * Schrift: ein Knopf, der wie einer aussieht.
 */
/* Der andere Weg: deckendes Grau, damit er als Knopf zu erkennen ist. */
.mlk-gross__weiter {
	background: #3c3c3c;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .35);
}

.mlk-gross__waehlen:hover { background: #ececec; }
.mlk-gross__weiter:hover  { background: #4e4e4e; }

.mlk-gross__zu {
	position: absolute;
	top: 14px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

/*
 * Blaettern am Rechner. Am Handy wird gewischt; die Pfeile stoeren dort
 * nicht, weil sie schmal am Rand sitzen und das Bild nicht verdecken.
 */
.mlk-gross__pfeil {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 76px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.mlk-gross__pfeil[hidden] {
	display: none;
}

.mlk-gross__pfeil--links  { left: 10px; }
.mlk-gross__pfeil--rechts { right: 10px; }

/*
 * Waehrend Nachschub geholt wird, blinkt der rechte Pfeil ruhig. Ohne
 * Zeichen sieht es aus, als haette der Wisch nicht gewirkt - und man
 * wischt noch einmal.
 */
.mlk-gross--laedt .mlk-gross__pfeil--rechts {
	animation: mlk-pocht 1s ease-in-out infinite;
}

@keyframes mlk-pocht {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
	.mlk-gross--laedt .mlk-gross__pfeil--rechts { animation: none; opacity: .5; }
}

.mlk-gross__pfeil:hover {
	background: rgba(255, 255, 255, .26);
}

@media (max-width: 560px) {
	.mlk-gross__pfeil { width: 38px; height: 62px; font-size: 28px; }
}

/* =====================================================================
 * Nachladen beim Scrollen
 *
 * Der Melder steht am Ende der Liste. Sieht der Kunde ihn, ist Nachschub
 * schon unterwegs - deshalb zeigt er einen ruhigen Balken und keinen
 * Knopf. Der Knopf bleibt nur dort, wo der Browser den Melder nicht
 * beobachten kann.
 * ================================================================== */
.mlk .mlk-popup__melder {
	display: flex;
	justify-content: center;
	padding: 18px 0 6px;
}

.mlk .mlk-popup__melder[hidden] {
	display: none;
}

.mlk .mlk-popup__melder--still .mlk-popup__mehr {
	display: none;
}

.mlk .mlk-popup__laedt {
	display: none;
	width: 120px;
	height: 4px;
	border-radius: 4px;
	background: var(--mlk-rahmen);
	overflow: hidden;
	position: relative;
}

.mlk .mlk-popup__melder--still .mlk-popup__laedt {
	display: block;
}

.mlk .mlk-popup__laedt::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 40%;
	border-radius: 4px;
	background: var(--mlk-akzent);
	animation: mlk-laeuft 1.1s ease-in-out infinite;
}

@keyframes mlk-laeuft {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
	.mlk .mlk-popup__laedt::after { animation: none; width: 100%; opacity: .5; }
}

.mlk a.mlk-motivkarte {
	text-decoration: none;
	color: var(--mlk-text);
}

@media (max-width: 900px) {
	.mlk .mlk-galerie__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.mlk .mlk-galerie__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =====================================================================
 * Mitlaufende Preisleiste
 *
 * Liegt außerhalb von .mlk (direkt am body), damit sie sich nicht in
 * überlaufende oder transformierte Elternelemente einklinkt. Deshalb hier
 * eigene, ausreichend spezifische Selektoren.
 * ================================================================== */

/*
 * Zwei Teile: ein Band über die ganze Breite, das die Seite darunter abdeckt,
 * und darin ein Kasten in der Mitte mit Preis und Knopf.
 *
 * Das Band ist fast undurchsichtig – halb durchscheinend liefen die
 * Motivkarten dahinter durch und man las zwei Dinge übereinander. Es ist
 * aber HELL, im Ton der Seite. Dunkel war es ein schwarzer Riegel quer über
 * den Bildschirm und drängte sich vor das, worum es geht.
 */
/*
 * Die dritte schwebende Ebene. Sie liegt unten, also zeigt ihre helle
 * Kante nach oben und der Schatten faellt nach oben aus - dorthin, wo der
 * Inhalt unter ihr durchlaeuft.
 */
.mlk-leiste {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .8),
		0 -1px 0 rgba(31, 27, 24, .12),
		0 -4px 10px -2px rgba(31, 27, 24, .14),
		0 -14px 26px -8px rgba(31, 27, 24, .20);
	padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	background: rgba(246, 245, 242, .97);
	backdrop-filter: blur(8px);
	animation: mlk-leiste-ein .18s ease-out;
}

/*
 * Weicher Uebergang nach oben.
 *
 * Die harte Oberkante schnitt die Seite ab wie ein Deckel. Der Verlauf laesst
 * das Band aus dem Inhalt herauswachsen, statt ihn abzuschneiden - und
 * nimmt gleichzeitig die Unruhe raus, wenn Karten unter dem Rand durchlaufen.
 */
.mlk-leiste::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 52px;
	background: linear-gradient(to top, rgba(246, 245, 242, .97), rgba(246, 245, 242, 0));
	/* Der Verlauf ist Zierde - Klicks gehen durch ihn hindurch. */
	pointer-events: none;
}

.mlk-leiste .mlk-leiste__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	/*
	 * Begrenzt und mittig: Über die volle Breite gezogen stehen Preis und
	 * Knopf einen halben Meter auseinander.
	 *
	 * Weiß statt getönt, weil der Kasten sich sonst im ebenfalls hellen Band
	 * verlieren würde – der Rahmen allein trägt das nicht.
	 */
	max-width: 660px;
	margin: 0 auto;
	padding: 8px 10px 8px 14px;
	border: 1px solid #d8d4cd;
	border-radius: 12px;
	background: #fff;
}

.mlk-leiste[hidden] {
	display: none;
}

@keyframes mlk-leiste-ein {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.mlk-leiste {
		animation: none;
	}
}

.mlk-leiste .mlk-leiste__summe {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 4px 6px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #1a1a1a;
	font: inherit;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

/* Auf dem weissen Kasten reicht ein leichter Ton. */
.mlk-leiste .mlk-leiste__summe:hover {
	background: #f2efe9;
}

.mlk-leiste .mlk-leiste__label {
	color: #6b6b6b;
	font-size: 12.5px;
}

.mlk-leiste .mlk-leiste__betrag {
	font-size: 21px;
	font-weight: 700;
	white-space: nowrap;
}

.mlk-leiste .mlk-leiste__knopf {
	flex: 0 1 auto;
	padding: 12px 22px;
	border: 1px solid #1a1a1a;
	border-radius: 8px;
	background: #1a1a1a;
	color: #fff;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease;
}

.mlk-leiste .mlk-leiste__knopf:hover {
	background: #333;
	color: #fff;
}

/* Etwas Luft am Seitenende, damit die Leiste nichts verdeckt */
body.mlk-leiste-sichtbar {
	scroll-padding-bottom: 88px;
}

@media (max-width: 480px) {

	.mlk-leiste {
		padding-left: 8px;
		padding-right: 8px;
	}

	.mlk-leiste .mlk-leiste__innen {
		gap: 10px;
		padding: 6px 8px 6px 12px;
	}

	.mlk-leiste .mlk-leiste__betrag {
		font-size: 18px;
	}

	.mlk-leiste .mlk-leiste__knopf {
		padding: 11px 16px;
		font-size: 14px;
	}
}

/* =====================================================================
 * Warenkorb
 * ================================================================== */

.mlk-cart-edit {
	display: inline-block;
	margin: 6px 0 0;
	padding: 5px 12px;
	border: 1px solid #1a1a1a;
	border-radius: 6px;
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}

.mlk-cart-edit:hover {
	background: #1a1a1a;
	color: #fff;
}

.mlk-cart-kind {
	display: inline-block;
	padding-left: 18px;
	border-left: 3px solid #e2ded8;
}

.mlk-cart-menge {
	color: #6b6b6b;
}

/* =====================================================================
 * Schmale Bildschirme
 * ================================================================== */

@media (max-width: 640px) {

	.mlk .mlk-section__title,
	.mlk .mlk-field,
	.mlk .mlk-summe {
		padding-left: 14px;
		padding-right: 14px;
	}

	.mlk .mlk-zubehoer {
		grid-template-columns: 1fr;
	}

	.mlk .mlk-popup {
		padding: 0;
	}

	.mlk .mlk-popup__box {
		width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.mlk .mlk-popup__head,
	.mlk .mlk-popup__filter,
	.mlk .mlk-popup__body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.mlk .mlk-popup__grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	/*
	 * Die Kategorieleiste brach auf dem Handy auf fünf Zeilen um und
	 * schob zusammen mit dem Suchfeld sämtliche Motive aus dem Bild –
	 * beim Öffnen war kein einziges Motiv zu sehen.
	 *
	 * Jetzt eine Zeile, die sich seitlich schieben lässt. Der leichte
	 * Anschnitt der letzten Schaltfläche ist Absicht: er zeigt, dass
	 * rechts noch etwas kommt.
	 */
	/*
	 * Auf dem Handy zählt jeder Zentimeter Scrollweg. Das hochkant
	 * aufgenommene Video würde sonst fast den ganzen Bildschirm füllen.
	 */
	.mlk .mlk-eigen__video video {
		max-width: 190px;
		max-height: 46vh;
	}

	.mlk .mlk-popup__kats {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-right: -16px;
		padding-right: 16px;
		scroll-padding-left: 16px;
		-webkit-overflow-scrolling: touch;
	}

	.mlk .mlk-popup__kats::-webkit-scrollbar {
		display: none;
	}

	.mlk .mlk-popup__kats .mlk-chip {
		flex: 0 0 auto;
	}

	.mlk .mlk-summe__zeile {
		grid-template-columns: 1fr auto;
	}

	.mlk .mlk-summe__label {
		grid-column: 1 / -1;
	}
}

/* =====================================================================
 * Bildvorschau der Konfiguration
 *
 * Blech und Motive sind Alphamasken über einer farbigen Fläche. Der
 * Farbwechsel ist dadurch ein reiner Stilwechsel ohne Nachladen.
 *
 * Die Auswahlregeln stehen bewusst ohne .mlk davor: am Schreibtisch
 * hängt das Skript die Vorschau unter die Bildergalerie in die linke
 * Produktspalte um – dann liegt sie außerhalb von .mlk.
 * ================================================================== */

.mlk-vorschau {
	position: relative;
	margin: 0 0 24px;
	padding: 16px 18px 14px;
	/*
	 * Kräftigerer Rahmen und getönte Fläche: Die Vorschau liegt beim
	 * Blättern über der Seite und muss sich davon abheben – weiß auf weiß
	 * verschwimmt.
	 */
	border: 1px solid var(--mlk-rahmen-stark, #c9c3ba);
	border-radius: var(--mlk-radius, 12px);
	background: #f2eee8;
	color: #1a1a1a;
	font-size: 15px;
	line-height: 1.5;
}

.mlk-vorschau__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

.mlk-vorschau__titel {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

.mlk-vorschau__zaehler {
	flex: none;
	padding: 4px 11px;
	border: 1px solid var(--mlk-rahmen-stark, #c9c3ba);
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.mlk-vorschau__zaehler[hidden] {
	display: none;
}

/*
 * Doppelt geklasst, nicht aus Übermut: der hello-elementor-Reset setzt
 * [type="button"] { border: 1px solid #c36; color: #c36 }. Das hat dieselbe
 * Spezifität wie eine einzelne Klasse und wird später geladen – mit nur
 * .mlk-vorschau__mehr gewinnt das Theme und der Pfeil wird pink.
 */
.mlk-vorschau .mlk-vorschau__mehr {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 2px 0 -6px;
	padding: 6px 0 2px;
	border: 0;
	background: none;
	color: var(--mlk-text-leise, #6b6b6b);
	cursor: pointer;
}

/*
 * Der Hintergrund muss hier ausdrücklich stehen: der Theme-Reset setzt
 * button:hover { background-color: #c36 }. Ohne Gegenregel wird der Pfeil
 * beim Überfahren zu einem pinken Balken.
 */
.mlk-vorschau .mlk-vorschau__mehr:hover,
.mlk-vorschau .mlk-vorschau__mehr:focus,
.mlk-vorschau .mlk-vorschau__mehr:focus-visible {
	background: none;
	color: #1a1a1a;
}

.mlk-vorschau .mlk-vorschau__mehr[hidden] {
	display: none;
}

.mlk-vorschau__pfeil {
	transition: transform .18s ease;
}

.mlk-vorschau--offen .mlk-vorschau__pfeil {
	transform: rotate(180deg);
}

.mlk-vorschau__buehne {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 6px;
	/* Heller als die Kastenfläche – das Blech soll freistehen. */
	background: #fff;
}

/*
 * Lupe über der Vorschau.
 *
 * Vergrößert wird der Inhalt der Bühne, nicht die Bühne selbst – die behält
 * ihre Größe und schneidet ab, was über den Rand hinauswandert. Der
 * Bezugspunkt folgt dem Mauszeiger, dadurch bleibt unter dem Zeiger immer
 * dieselbe Stelle stehen.
 *
 * Nur an Geräten mit echtem Zeiger. Am Handy gibt es kein Darüberfahren,
 * und ein Zoom, der beim Antippen zuschlägt, wäre dort im Weg statt hilfreich.
 */
.mlk-vorschau__inhalt {
	position: absolute;
	inset: 0;
	display: block;
	transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {

	.mlk-vorschau__buehne {
		cursor: zoom-in;
	}

	.mlk-vorschau__inhalt {
		transition: transform .12s ease-out;
	}
}

@media (prefers-reduced-motion: reduce) {

	.mlk-vorschau__inhalt {
		transition: none;
	}
}

.mlk-vorschau__blech {

	position: absolute;
	inset: 0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.mlk-vorschau__flaeche {
	position: absolute;
	display: block;
}

.mlk-vorschau__flaeche[hidden] {
	display: none;
}

.mlk-vorschau__motiv {
	position: absolute;
	inset: 0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	/* contain: das Motiv füllt die Fläche, ohne verzerrt zu werden. */
	-webkit-mask-size: contain;
	mask-size: contain;

	/* Pro Motiv verschiebbar und verkleinerbar. Eine schräge Zeile läuft nach
	   rechts oben aus; damit Zeichnung und Name zusammen mittig auf der Seitenwand
	   stehen, muss die Zeichnung dagegenhalten und Platz machen. Skaliert wird
	   über transform, nicht über mask-size: Prozentwerte dort beziehen sich auf
	   die Fläche und würden das Bild verzerren. */
	/* Zuletzt die Drehung der HU-Plakette. Sie MUSS in derselben Angabe
	   stehen: Ein zweites transform an anderer Stelle ersetzt dieses hier,
	   statt sich dazuzustellen - dann waeren Versatz und Groesse aller
	   uebrigen Motive weg. Genau das ist beim ersten Anlauf passiert. */
	transform: translate( var( --mlk-motiv-x, 0% ), var( --mlk-motiv-y, 0% ) )
		scale( var( --mlk-motiv-mass, 1 ) )
		rotate( var( --mlk-motiv-dreh, 0deg ) );
	transform-origin: 50% 50%;
}

/* Gedrehte Schrift darf über ihre Zone hinausragen – sie braucht mehr Platz
   als eine gerade, und daneben ist Blech. */
.mlk-vorschau__inschrift svg { overflow: visible; }

/*
 * Blockmodus: Zeichnung und Schrift liegen übereinander auf derselben Fläche.
 *
 * Bei einem Motiv wie dem Familiennamen sind beide zusammen EIN Schriftzug –
 * "Familie" kommt aus der Zeichnung, der Name von uns. In getrennten Zonen
 * stünde jedes für sich mittig und damit nie zusammen; das sah aus wie zwei
 * Sachen, die zufällig übereinander liegen.
 *
 * Wo die Schrift zur Zeichnung sitzt, wird am Motiv eingestellt.
 */
.mlk-vorschau__flaeche--block .mlk-vorschau__motiv {
	top: 0;
	bottom: 0;
}

.mlk-vorschau__flaeche--block .mlk-vorschau__inschrift--unten {
	top: 0;
	height: auto;
	bottom: 0;
}

/* Der Kundentext lässt sich in jedem Aufbau verschieben, nicht nur im Block. */
.mlk-vorschau__inschrift {
	transform: translate( var( --mlk-text-x, 0% ), var( --mlk-text-y, 0% ) );
}

/*
 * Inschrift im Blech.
 *
 * Gezeichnet wird sie als SVG, nicht als Text mit fester Größe: Die Vorschau
 * ist am Handy 340 px breit und am Schreibtisch 700 – ein SVG wächst einfach
 * mit, ohne dass beim Umschalten nachgerechnet werden muss.
 *
 * Sobald eine Inschrift da ist, gibt das Motiv die untere Hälfte der Fläche
 * frei – dasselbe Verhältnis wie auf der Vorlage, wo das Brautpaar oben und
 * die drei Zeilen darunter stehen. Ohne Text bleibt die Fläche unangetastet.
 */
.mlk-vorschau__flaeche--text .mlk-vorschau__motiv {
	bottom: 45%;
}

/*
 * ... ausser die Zeichnung soll ihre Flaeche behalten.
 *
 * Beim gepunkteten Herz stehen die Namen IM Herz und das Datum ist
 * freiwillig - gaebe das Herz Platz frei, spraenge es beim Eintippen des
 * Datums nach oben. Beim Kompass fuellt die Rose die Wand; kleiner soll
 * sie nicht werden. Der Text steht dann ueber dem unteren Teil, wo bei
 * beiden ohnehin Luft ist.
 */
.mlk-vorschau__flaeche--vollmotiv.mlk-vorschau__flaeche--text .mlk-vorschau__motiv {
	/*
	 * Der Kasten bleibt so hoch wie die Wand - deshalb wird die Zeichnung
	 * nicht kleiner. Sie schlaegt aber OBEN an statt mittig zu stehen: Eine
	 * quadratische Rose in einer hohen Wand laesst oben und unten Luft, und
	 * genau um diese Luft rueckt sie so nach oben. Unten wird der Platz
	 * frei, den die Zeile braucht.
	 */
	bottom: 0;
}

/*
 * ... und oben anschlagen tut sie nur, wenn es ausdruecklich dransteht.
 *
 * Das ist die zweite, unabhaengige Frage: Der Kompass soll hochruecken,
 * das Herz nicht. Solange beides an einem Schalter hing, ging nur eines.
 */
.mlk-vorschau__flaeche--obenan.mlk-vorschau__flaeche--vollmotiv.mlk-vorschau__flaeche--text .mlk-vorschau__motiv {
	-webkit-mask-position: center top;
	mask-position: center top;
}

/*
 * Steht auch über dem Motiv Text, rückt es zusätzlich von oben ein.
 *
 * Das ist der Aufbau der Eheringe: Namen oben, Ringe in der Mitte, Datum
 * unten. Die Ringe sind flach und breit, ihnen genügt das mittlere Viertel;
 * beim Brautpaar füllt die Zeichnung dagegen alles über der Schrift.
 */
.mlk-vorschau__flaeche--oben .mlk-vorschau__motiv {
	/*
	 * Die Ringe sitzen zwischen Namen und Datum, näher am Datum – so wie
	 * auf dem fertigen Korb. Oben brauchen drei Namenszeilen Platz, unten
	 * genügt eine Zeile, die aber genauso groß ist wie die Namen.
	 */
	top: 52%;
	bottom: 26%;
}

.mlk-vorschau__inschrift {
	position: absolute;
	right: 0;
	left: 0;
	display: block;
}

.mlk-vorschau__inschrift--unten {
	bottom: 0;
	height: 45%;
}

.mlk-vorschau__flaeche--oben .mlk-vorschau__inschrift--unten {
	height: 26%;
}

.mlk-vorschau__inschrift--oben {
	top: 0;
	height: 52%;
}

/*
 * Die innere Zone deckt sich mit der Zeichnung - beim Lorbeerkranz steht
 * die Zahl mitten im Kranz. Sie folgt demselben Versatz wie die obere
 * Zeile, damit sie sich mit derselben Einstellung treffen laesst.
 */
/*
 * Die innere Zone deckt sich immer mit der Zeichnung. Steht Text unter dem
 * Motiv, ist das die obere Haelfte; steht dort nichts, die ganze Flaeche.
 */
.mlk-vorschau__flaeche--text .mlk-vorschau__inschrift--innen,
/*
 * Behaelt die Zeichnung ihre Flaeche, steht die Innenschrift immer oben -
 * auch ohne Unterzeile. Sonst rutschen die Namen im gepunkteten Herz nach
 * unten, sobald der Kunde das Datum wieder loescht. Dieselbe Regel rechnet
 * das Werkstattbild ($zone_innen).
 */
.mlk-vorschau__flaeche--vollmotiv .mlk-vorschau__inschrift--innen {
	height: 55%;
}

.mlk-vorschau__inschrift--innen {
	top: 0;
	height: 100%;
	transform: translate(
		var( --mlk-text-x, 0% ),
		calc( var( --mlk-text-y, 0% ) + var( --mlk-text-oben-y, 0% ) )
	);
}

/*
 * Die obere Zeile darf zusaetzlich nach unten - beim Geburtstagsmotiv sitzt
 * die Zahl fast auf dem Bogen. Der allgemeine Versatz des Kundentextes gilt
 * weiter fuer beide Zonen; dieser hier kommt nur oben dazu.
 */
.mlk-vorschau__inschrift--oben {
	transform: translate(
		var( --mlk-text-x, 0% ),
		calc( var( --mlk-text-y, 0% ) + var( --mlk-text-oben-y, 0% ) )
	);
}

.mlk-vorschau__inschrift[hidden] {
	display: none;
}

.mlk-vorschau__inschrift svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Schreibschrift für Motive wie den Familiennamen.
 *
 * Bewusst als Auswahl vorhandener Schriften und ohne mitgelieferte Datei:
 * Nicos Vorlage ist „Sign Painter“, die zu macOS und iOS gehört und auf
 * seinen Geräten steht – auf einem Windows-Rechner aber nicht. Sie
 * mitzuliefern wäre nicht erlaubt, und sie nachzuladen hieße, jeden Besuch
 * an einen fremden Server zu melden.
 *
 * Deshalb: Wer sie hat, sieht sie. Sonst greift die nächstbeste
 * Schreibschrift des Geräts. Geschnitten wird ohnehin nach der CAM-Vorlage,
 * nicht nach dem, was der Browser zeigt.
 */
/*
 * Yellowtail liegt im Plugin und wird vom eigenen Server geliefert.
 *
 * Nicht über Google Fonts: Das würde bei jedem Seitenaufruf die IP-Adresse
 * des Kunden an einen fremden Server melden – dafür ist die Cookie-Zustimmung
 * dieses Shops nicht ausgelegt.
 *
 * "swap" heißt: Bis die Schrift da ist, steht der Name in der Ersatzschrift
 * und ist lesbar. Ohne das bliebe die Zeile für einen Moment leer, und der
 * Kunde sähe seinen Namen erst verzögert.
 *
 * Lizenz: Apache 2.0, Lizenztext liegt daneben in assets/fonts.
 */
@font-face {
	font-family: "MLK Schreibschrift";
	src: url("../fonts/Yellowtail-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.mlk-vorschau__flaeche--schreib .mlk-vorschau__inschrift text {
	font-family: "MLK Schreibschrift", "SignPainter", "Sign Painter",
		"Segoe Script", "Brush Script MT", cursive;
	font-weight: 400;
}

/*
 * Wantedo – die zweite Schreibschrift.
 *
 * Sie liegt hier, weil sie zur Zeichnung des Motivs gehört: Der feste Teil
 * ist in dieser Schrift ausgeschnitten, der Name des Kunden muss dieselbe
 * sein, sonst stehen zwei verschiedene Handschriften nebeneinander.
 */
/*
 * Arimo statt Arial.
 *
 * Nico will Arial. Arial gehoert Microsoft und darf auf einer oeffentlichen
 * Seite nicht mitgeliefert werden; Arimo hat Buchstabe fuer Buchstabe
 * dieselben Masse und steht unter der Open Font License. Auf dem
 * geschnittenen Blech ist kein Unterschied zu sehen.
 *
 * Dieselbe Datei benutzt auch das Bild fuer die Werkstatt - sonst zeigen
 * beide etwas anderes, und genau das war der Fehler vorher.
 */
@font-face {
	font-family: "MLK Arimo";
	src: url("../fonts/Arimo-Regular.ttf") format("truetype");
	font-display: swap;
}

/*
 * Tinos hat die Masse von Times New Roman und darf mitgeliefert werden -
 * Times selbst nicht. Fuer Motive, deren Vorlage eine Serifenschrift zeigt.
 */
@font-face {
	font-family: "MLK Tinos";
	src: url("../fonts/Tinos-Regular.ttf") format("truetype");
	font-display: swap;
}

.mlk-vorschau__flaeche--serif .mlk-vorschau__inschrift text {
	font-family: "MLK Tinos", "Times New Roman", Times, serif;
}

/*
 * Bellefair - der freie Ersatz fuer Bell MT.
 *
 * Nach derselben Vorlage gezeichnet: schmal, ruhig, und mit
 * Mediaevalziffern, bei denen die 3 und die 1 unter die Zeile haengen.
 * Genau die machen den Unterschied bei Koordinaten. Bell MT selbst
 * gehoert Monotype und darf nicht ausgeliefert werden - deshalb steht sie
 * auch nicht im Rueckfall.
 */
@font-face {
	font-family: "MLK Bellefair";
	src: url("../fonts/Bellefair-Regular.ttf") format("truetype");
	font-display: swap;
}

.mlk-vorschau__flaeche--bell .mlk-vorschau__inschrift text {
	font-family: "MLK Bellefair", "MLK Tinos", Georgia, "Times New Roman", serif;
}

@font-face {
	font-family: "MLK Wantedo";
	src: url("../fonts/Wantedo.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.mlk-vorschau__flaeche--wantedo .mlk-vorschau__inschrift text {
	font-family: "MLK Wantedo", "MLK Schreibschrift", "Segoe Script",
		"Brush Script MT", cursive;
	font-weight: 400;
}

.mlk-vorschau__inschrift text {

	font-family: "MLK Arimo", Arial, ui-rounded, "Arial Rounded MT Bold", "Helvetica Rounded",
		"Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 700;
}

/*
 * Marken für die Motivfelder.
 *
 * Dieselbe Nummer in derselben Farbe steht am Eingabefeld und über der
 * zugehörigen Seitenwand im Blech. Die Töne sind absichtlich gedeckt: Sie sollen
 * das Zuordnen beschleunigen, nicht die Seite bunt machen. Die Fläche ist
 * so klein, dass die Farbe nur wirkt, wo man sie sucht.
 */
.mlk-vorschau__marke,
.mlk .mlk-field__marke {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 5px;
	background: var(--mlk-marke, #8a8a8a);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Am Blech sitzt sie über der Seitenwand, damit sie kein Motiv verdeckt. */
.mlk-vorschau__marke {
	position: absolute;
	bottom: 100%;
	left: 0;
	margin-bottom: 5px;
}

.mlk .mlk-field__marke {
	margin-right: 7px;
	vertical-align: middle;
}

.mlk-marke--f1 { --mlk-marke: #6b8fb5; }
.mlk-marke--f2 { --mlk-marke: #a98a5c; }
.mlk-marke--f3 { --mlk-marke: #8d7aa8; }
.mlk-marke--f4 { --mlk-marke: #6f9a7c; }

/* Platzhalter, solange nichts gewählt ist oder die Zeichnung fehlt. */
.mlk-vorschau__platz {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 1px dashed rgba(255, 255, 255, .45);
	border-radius: 4px;
	color: rgba(255, 255, 255, .85);
	font-size: 11px;
	line-height: 1.25;
	text-align: center;
	/* Hält den Text auch auf dem hellen Silber lesbar. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	/* „Motivfläche“ ist breiter als eine schmale Fläche – lieber trennen
	   als abschneiden. Die Seite ist auf Deutsch ausgezeichnet. */
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow: hidden;
}

.mlk-vorschau__platz[hidden] {
	display: none;
}

/* Eigenes Motiv: Schraffur statt Umriss – der Inhalt steht noch nicht fest.
   Darin der Dateiname, damit erkennbar bleibt, welche Datei wo hängt. */
.mlk-vorschau__flaeche--eigen .mlk-vorschau__platz {
	border-style: solid;
	background: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, .16) 0 6px,
		rgba(255, 255, 255, .04) 6px 12px
	);
	color: #fff;
	font-size: 10px;
	line-height: 1.25;
	/* Dateinamen haben keine Wortgrenzen – ohne Umbruch mitten im Wort
	   stünde nur das erste Drittel da. */
	word-break: break-all;
	hyphens: none;
}

/* Zubehör-Übersicht */
.mlk-vorschau__zubehoer {
	display: grid;
	/* Zwei Spalten, wo der Platz reicht – sonst eine. */
	grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.mlk-vorschau__zubehoer[hidden] {
	display: none;
}

.mlk-vorschau__zteil {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--mlk-rahmen, #e2ded8);
	border-radius: 10px;
	background: var(--mlk-flaeche-alt, #f7f5f2);
	font-size: 13px;
	line-height: 1.3;
}

.mlk-vorschau__zbild {
	width: 84px;
	height: 84px;
	flex: none;
	border-radius: 8px;
	/* contain statt cover: bei Zubehör zählt die ganze Form, nicht ein
	   formatfüllender Ausschnitt. */
	background: #fff center/contain no-repeat;
}

.mlk-vorschau__zname {
	min-width: 0;
	overflow-wrap: anywhere;
}

.mlk-vorschau__hinweis {
	margin: 10px 0 0;
	color: var(--mlk-text-leise, #6b6b6b);
	font-size: 12px;
	line-height: 1.45;
}

/*
 * Am Schreibtisch steht die Vorschau in der linken Produktspalte, dort wo
 * unter der Bildergalerie ohnehin Platz frei bleibt, und läuft beim
 * Blättern mit. Das Umhängen erledigt frontend.js – ohne Skript bleibt
 * sie im Konfigurator stehen und funktioniert genauso.
 */
.mlk-vorschau--links {
	position: sticky;
	/*
	 * Unter der Kopfzeile, mit Luft.
	 *
	 * Hier standen feste 72 Pixel - gemessen zu einer Zeit, als die
	 * Kopfzeile noch mit der Seite wegscrollte. Seit sie schwebt und dabei
	 * zwischen 224 und 64 Pixeln wechselt, rutschte die Vorschau unter sie
	 * und war oben angeschnitten. --mlk-kopf-hoehe setzt kopfzeile.js auf
	 * die tatsaechliche Unterkante; die 16 Pixel Zugabe halten sie frei,
	 * damit sie nicht eingeklemmt wirkt.
	 */
	top: calc(var(--mlk-kopf-hoehe, 72px) + 16px);
	margin: 44px 0 0;
	transition: width .2s ease, margin-left .2s ease;
}

/*
 * Ist die Bildergalerie nach oben aus dem Blick gescrollt, darf die Vorschau
 * breiter werden – links neben der Spalte steht dann ohnehin nur Rand.
 *
 * Sie wächst ausdrücklich nach LINKS, nie nach rechts: rechts liegt der
 * Konfigurator, und der darf nicht verdeckt werden. Erst ab 1300 px, weil
 * darunter der Seitenrand zu schmal ist, um etwas herzugeben.
 */
@media (min-width: 1300px) {

	.mlk-vorschau--links.mlk-vorschau--weit {
		width: calc(100% + 90px);
		margin-left: -90px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.mlk-vorschau--links {
		transition: none;
	}
}

/* Sehr flache Fenster: dort ist für eine mitlaufende Vorschau kein Platz. */
@media (max-height: 700px) {

	.mlk-vorschau--links {
		position: static;
	}
}

/*
 * Handy und Tablet: die Vorschau klebt oben am Rand, so wie sie am
 * Schreibtisch links mitläuft. Eingeklappt zeigt sie nur das Blech –
 * mehr als ein Fünftel der Seite darf sie dem Konfigurator nicht
 * wegnehmen. Über den Knopf kommen Zubehör und Erklärung dazu.
 */
@media (max-width: 1024px) {

	/*
	 * Schwebende Leiste: etwas breiter als die Karten darunter, dafür vom
	 * Rand und vom oberen Fensterrand abgesetzt und mit Schatten. Vorher war
	 * sie exakt so breit und so gerundet wie die Karten und las sich deshalb
	 * als weitere Karte statt als Bedienleiste.
	 *
	 * --mlk-vw setzt frontend.js auf die Breite ohne Bildlaufleiste – mit
	 * 100vw wäre die Seite je nach Browser 8 bis 17 px zu breit.
	 */
	.mlk .mlk-vorschau {
		position: sticky;

		/*
		 * Unter der Kopfzeile, nicht unter dem Fensterrand.
		 *
		 * Mit festen 8 Pixeln klebte die Vorschau hinter der schwebenden
		 * Kopfzeile und war nicht mehr zu sehen. --mlk-kopf-hoehe setzt
		 * kopfzeile.js laufend auf deren Unterkante - ausgefahren rund 102,
		 * zusammengeschoben 64.
		 */
		top: calc(var(--mlk-kopf-hoehe, 8px) + 6px);
		z-index: 6;
		width: auto;
		margin: 0 calc(50% - var(--mlk-vw, 100vw) / 2 + 8px) 18px;
		padding: 8px 14px 4px;
		border-radius: 14px;

		/*
		 * Ruhig, solange sie im Seitenfluss steht - hinter ihr liegt dann
		 * nichts. Erst wenn sie oben klebt und der Inhalt unter ihr
		 * durchlaeuft, hebt sie sich ab. Gleiche Handschrift wie Kopfzeile
		 * und Preisleiste: heller Grat, enger Schatten, weiter Schatten.
		 */
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, .85),
			0 1px 2px rgba(0, 0, 0, .07);

		transition: box-shadow .25s ease;
	}

	.mlk .mlk-vorschau--klebt {
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, .9),
			0 2px 5px rgba(31, 27, 24, .13),
			0 12px 24px -6px rgba(31, 27, 24, .26);
	}

	@media (prefers-reduced-motion: reduce) {
		.mlk .mlk-vorschau { transition: none; }
	}

	/*
	 * Kappe über der klebenden Vorschau.
	 *
	 * Zwischen Fensterrand und Vorschau bleiben 8 px Luft, damit sie schwebt
	 * – und durch diese Lücke lief bisher der Seiteninhalt sichtbar hindurch.
	 * Die Kappe deckt sie ab, im selben Ton wie die Preisleiste unten. Sie
	 * erscheint nur, während die Vorschau wirklich oben klebt; am
	 * Seitenanfang stünde sie sonst als Streifen quer über der Kopfzeile.
	 */
	/*
	 * Die Kappe deckte die Luecke zwischen Fensterrand und Vorschau ab.
	 * Diese Luecke fuellt jetzt die Kopfzeile selbst - die Kappe laege
	 * quer darueber.
	 */
	.mlk .mlk-vorschau--klebt::before {
		content: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: calc(8px + env(safe-area-inset-top));
		background: rgba(26, 26, 26, .93);
		backdrop-filter: blur(8px);
	}

	.mlk .mlk-vorschau__titel {
		font-size: 13.5px;
	}

	.mlk .mlk-vorschau__buehne {
		border: 1px solid rgba(0, 0, 0, .07);
		transition: max-width .18s ease;
	}

	/*
	 * Eingeklappt eine flache Leiste: Beschriftung links, das Blech als
	 * Miniatur rechts. Der Pfeil sitzt darunter über die volle Breite.
	 */
	.mlk .mlk-vorschau:not(.mlk-vorschau--offen) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 12px;
	}

	.mlk .mlk-vorschau:not(.mlk-vorschau--offen) .mlk-vorschau__kopf {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		margin: 0;
	}

	.mlk .mlk-vorschau:not(.mlk-vorschau--offen) .mlk-vorschau__buehne {
		grid-column: 2;
		grid-row: 1;
		width: 168px;
		max-width: 45vw;
		margin: 0;
	}

	.mlk .mlk-vorschau:not(.mlk-vorschau--offen) .mlk-vorschau__mehr {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.mlk .mlk-vorschau--offen .mlk-vorschau__buehne {
		margin: 8px 0 0;
	}

	/*
	 * Aufgeklappt nie hoeher als der Platz, der da ist.
	 *
	 * Mit Zubehoerliste wurde der Kasten laenger als der Bildschirm. Weil
	 * er oben klebt, blieb die Seite dahinter stehen - man konnte weder
	 * weiterscrollen noch den Pfeil zum Zuklappen erreichen, der unten
	 * am Kasten sitzt. Eine Sackgasse.
	 *
	 * Jetzt endet er ueber der Preisleiste, und der Inhalt rollt in ihm
	 * selbst. Der Pfeil klebt dabei unten im Kasten und ist immer da.
	 */
	.mlk .mlk-vorschau--offen {
		max-height: calc(100dvh - var(--mlk-kopf-hoehe, 64px) - 96px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.mlk .mlk-vorschau--offen .mlk-vorschau__mehr {
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin: 0 -14px -4px;
		padding: 8px 0 6px;
		background: linear-gradient(to top, var(--mlk-flaeche-alt, #f2efe9) 62%, rgba(242, 239, 233, 0));
	}

	/* Eingeklappt tut die ganze Leiste etwas, nicht nur der Pfeil. */
	.mlk .mlk-vorschau:not(.mlk-vorschau--offen) {
		cursor: pointer;
	}

	/*
	 * Eingeklappt: alles außer dem Blech bleibt weg.
	 *
	 * Die eingetippten Texte gehören ausdrücklich dazu. Bei zwei Namen und
	 * einem Datum sind das drei Zeilen je Seitenwand – eingeklappt nahm das mehr
	 * Platz weg als die Vorschau selbst und schob den Konfigurator aus dem
	 * Bild. Aufgeklappt stehen sie wieder da.
	 */
	.mlk .mlk-vorschau:not(.mlk-vorschau--offen) .mlk-vorschau__zubehoer,
	.mlk .mlk-vorschau:not(.mlk-vorschau--offen) .mlk-vorschau__texte,
	.mlk .mlk-vorschau:not(.mlk-vorschau--offen) .mlk-vorschau__hinweis {
		display: none;
	}

	/*
	 * Während getippt wird, tritt die Vorschau ganz beiseite.
	 *
	 * Sie klebt oben, die Tastatur kommt von unten – dazwischen bleibt vom
	 * Eingabefeld nichts übrig. Ohne sie steht das Feld ruhig, und nach dem
	 * Tippen ist sie sofort wieder da.
	 */
	.mlk .mlk-vorschau--tippt {
		display: none;
	}

	/*
	 * Auf dem kleinen Blech ist eine Fläche keine 45 px breit – da passt
	 * „Motivfläche 2“ nicht hinein und würde nur als Buchstabensalat
	 * abgeschnitten. Der gestrichelte Rahmen sagt dasselbe: hier ist noch
	 * nichts gewählt. Beim Aufklappen kommt die Beschriftung zurück.
	 */
	/*
	 * In der eingeklappten Miniatur ist eine Seitenwand keine 40 px breit. Die
	 * Marke wäre dort nicht mehr zu lesen, und weil sie über der Seitenwand sitzt,
	 * stieße sie oben aus dem Blech heraus und würde abgeschnitten. Beim
	 * Aufklappen ist wieder Platz.
	 */
	.mlk .mlk .mlk-vorschau:not(.mlk-vorschau--offen) .mlk-vorschau__marke {
		display: none;
	}

	.mlk .mlk-vorschau:not(.mlk-vorschau--offen) .mlk-vorschau__platz {
		font-size: 0;
	}

	.mlk .mlk-vorschau--offen .mlk-vorschau__buehne {
		max-width: 100%;
	}

	/* Aufgeklappt ist eine Fläche rund 75 px breit – „Motivfläche“ passt
	   dort nur eine Spur kleiner hinein. */
	.mlk .mlk-vorschau--offen .mlk-vorschau__platz {
		padding: 2px;
		font-size: 10px;
	}

	.mlk .mlk-vorschau--offen .mlk-vorschau__zubehoer {
		/* Aufgeklappt ist genug Breite da – Bild und Text nebeneinander. */
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
 * Umschalter zwischen Motivdatenbank und Bildergalerien
 * ================================================================== */

/*
 * Die Reiterleiste.
 *
 * Hier stand "flex: 1 1 0" am Reiter - alle drei gleich breit. Mit zwei
 * Reitern ging das; mit dem dritten war "Gemerkt" am Handy eingequetscht
 * und halb abgeschnitten, und am Rechner zog sich die Leiste zu einem
 * breiten Balken.
 *
 * Jetzt nimmt jeder Reiter die Breite seines Textes, sie stehen mittig und
 * umbrechen, wenn der Platz nicht reicht. Lieber zwei Zeilen als ein
 * abgeschnittenes Wort.
 */
.mlk .mlk-popup__quellen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	padding: 12px 20px 0;
}

.mlk .mlk-popup__quellen[hidden] {
	display: none;
}

.mlk .mlk-popup__quelle {
	flex: 0 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
	padding: 9px 16px;
	border: 1px solid var(--mlk-rahmen-stark);
	border-radius: 999px;
	background: var(--mlk-flaeche);
	color: var(--mlk-text-leise);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.mlk .mlk-popup__quelle:hover {
	background: var(--mlk-flaeche-alt);
	color: var(--mlk-text);
}

.mlk .mlk-popup__quelle--aktiv,
.mlk .mlk-popup__quelle--aktiv:hover {
	border-color: var(--mlk-akzent);
	background: var(--mlk-akzent);
	color: #fff;
}

/* =====================================================================
 * Die drei Wege einer Motivfläche
 *
 * Motiv aus dem Bestand, eigenes Bild oder gar keins – gleichwertige
 * Schalter, von denen genau einer gilt.
 * ================================================================== */

.mlk .mlk-motiv__wege {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 8px;
	margin: 0 0 12px;
}

.mlk .mlk-motiv__weg {
	display: flex;
	/* Safari zentriert Kinder von <button> von sich aus – ohne stretch
	   stünden Beschriftung und Erklärzeile schmal in der Mitte. */
	align-items: stretch;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px;
	border: 1px solid var(--mlk-rahmen-stark);
	border-radius: 10px;
	background: var(--mlk-flaeche);
	color: var(--mlk-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;

	/* Das Theme setzt für Knöpfe white-space: nowrap – die Erklärzeile
	   liefe damit aus dem Schalter heraus und würde abgeschnitten. */
	white-space: normal;
	min-width: 0;
	overflow-wrap: anywhere;
}

.mlk .mlk-motiv__weg:hover {
	border-color: var(--mlk-akzent);
	background: var(--mlk-flaeche-alt);
	color: var(--mlk-text);
}

.mlk .mlk-motiv__weg--aktiv,
.mlk .mlk-motiv__weg--aktiv:hover {
	border-color: var(--mlk-akzent);
	background: var(--mlk-akzent);
	color: #fff;
	box-shadow: inset 0 0 0 1px var(--mlk-akzent);
}

.mlk .mlk-motiv__wegname {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.mlk .mlk-motiv__wegtext {
	font-size: 13px;
	line-height: 1.35;
	color: var(--mlk-text-leise);
}

.mlk .mlk-motiv__weg--aktiv .mlk-motiv__wegtext,
.mlk .mlk-motiv__weg--aktiv .mlk-eigen__preis {
	color: rgba(255, 255, 255, .85);
}

/* ---------------------------------------------------------------------------
   Express-Zahlknöpfe auf Konfiguratorseiten

   Die Knöpfe bleiben sichtbar, sind aber gesperrt, solange Pflichtangaben
   fehlen. Ein Klick auf die Sperre löst dieselbe Prüfung aus wie der
   Kaufen-Knopf. Verstecken wäre die schlechtere Lösung: Der Kunde soll
   sehen, dass es den Weg gibt.
   --------------------------------------------------------------------------- */

.mlk-express {
	position: relative;
}

/*
 * Gesperrt: die Knöpfe treten zurück, bleiben aber erkennbar. Kein Grauschleier
 * und keine Platte darüber – die Erklärung steht in der Zeile obendrüber, dort
 * wo man sie liest, ohne dass sie den Knopf zerschneidet.
 */
.mlk-express:not(.mlk-express--frei) > *:not(.mlk-express__sperre) {
	opacity: .38;
	filter: saturate(.15);
	transition: opacity .18s ease, filter .18s ease;
}

/*
 * Die Sperre fängt den Klick ab und ist dabei unsichtbar.
 *
 * PayPal setzt seinen Rahmen auf z-index 100 – alles darunter fängt keinen
 * Klick ab. Deshalb liegt sie deutlich darüber.
 */
.mlk-express__sperre {
	position: absolute;
	inset: -4px;
	z-index: 500;
	width: auto;
	border: 0;
	border-radius: 10px;
	padding: 0;
	background: transparent;
	font: inherit;
	color: transparent;
	cursor: pointer;
}

.mlk-express--frei .mlk-express__sperre {
	display: none;
}

/* ---------- Hinweiszeile über den Knöpfen ---------- */

.mlk-express__hinweis {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding: 9px 12px;
	border: 1px solid var(--mlk-rahmen, #e2ded8);
	border-radius: 10px;
	background: var(--mlk-flaeche-alt, #f7f5f2);
	color: var(--mlk-text-leise, #6b6b6b);
	font-size: 13.5px;
	line-height: 1.35;
	transition: border-color .18s ease, color .18s ease;
}

.mlk-express__hinweis svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

.mlk-express__hinweis[hidden] {
	display: none;
}

/* Beim Überfahren der gesperrten Fläche zeigt die Zeile, dass sie gemeint ist. */
.mlk-express:not(.mlk-express--frei):hover ~ .mlk-express__hinweis,
.mlk-express__hinweis:hover {
	border-color: var(--mlk-akzent, #1a1a1a);
	color: var(--mlk-text, #1a1a1a);
}

/* =========================================================================
 * Zwei Namen und ein Datum
 *
 * Getrennte Felder statt einer freien Zeile. Auf dem Telefon stehen die
 * beiden Namen untereinander, ab Tablet nebeneinander - Vornamen sind kurz,
 * zwei schmale Felder nebeneinander lesen sich besser als zwei breite.
 * ====================================================================== */

.mlk-motiv__paarfeld{display:block;margin-top:10px}
/* Dasselbe Versehen wie beim Monatsfeld: ohne diese Zeile bleiben Name
   und Datum beim Wechsel auf ein Motiv ohne Datum stehen. */
.mlk-motiv__paarfeld[hidden]{display:none}
.mlk-motiv__paarzeile{display:grid;grid-template-columns:1fr;gap:8px}
.mlk-motiv__paarteil{display:block;margin-top:8px}
.mlk-motiv__paarteil span{display:block;font-size:.85rem;font-weight:600;margin-bottom:3px}
.mlk-motiv__paarteil input{width:100%}
.mlk-motiv__paarhinweis{display:block;font-size:.8rem;opacity:.75;margin-top:5px}

@media (min-width:480px){
	.mlk-motiv__paarzeile{grid-template-columns:1fr 1fr;gap:10px}
	.mlk-motiv__paarzeile .mlk-motiv__paarteil{margin-top:0}
}

/* =========================================================================
 * Die eingegebenen Texte unter dem Blech
 *
 * Die Schrift ist bewusst keine heruntergeladene Datei: "ui-rounded" ist
 * auf Apple-Geraeten die Systemschrift in runder Form, "Arial Rounded MT
 * Bold" liegt auf vielen Windows-Rechnern. Damit stimmt der Eindruck, ohne
 * dass eine Schriftdatei ausgeliefert wird - das erspart die Lizenzfrage
 * und den Datenschutzaerger mit fremden Schriftservern.
 * ====================================================================== */

.mlk-vorschau__texte{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.mlk-vorschau__text{display:flex;flex-direction:column;gap:1px;
	padding:7px 10px;border-radius:8px;background:rgba(127,127,127,.09)}
.mlk-vorschau__textwo{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;opacity:.65}
.mlk-vorschau__textwas{font-family:ui-rounded,"Arial Rounded MT Bold","Helvetica Rounded",
	"Varela Round",system-ui,-apple-system,"Segoe UI",sans-serif;
	font-size:1.15rem;font-weight:600;line-height:1.25;word-break:break-word}


/* =====================================================================
 * Am Handy: Platz gewinnen
 *
 * Auf dem iPhone blieb vom Konfigurator zu wenig uebrig. Oben klebte die
 * Vorschau, unten die Preisleiste, und dazwischen nahm jeder Abschnitt
 * eine ganze Zeile nur fuer seine Ueberschrift.
 *
 * Drei Griffe:
 *
 *   1. Der Abschnittskopf steht hochkant am linken Rand und bleibt beim
 *      Blaettern stehen, solange man in dem Abschnitt ist. Das spart je
 *      Abschnitt 57 Pixel Hoehe und kostet 34 Pixel Breite.
 *   2. Schrift und Kaesten eine Spur kleiner - rund ein Fuenftel.
 *   3. Vorschau und Preisleiste enger gefasst.
 *
 * Nur bis 600 Pixel Breite. Tablet und Schreibtisch bleiben, wie sie sind.
 * ================================================================== */

@media (max-width: 600px) {

	/* ---------------------------------------------------------------
	 * 1. Der Abschnittskopf steht hochkant
	 * --------------------------------------------------------------- */

	/*
	 * Zwei Spalten: links die schmale Leiste mit Nummer und Namen, rechts
	 * alles andere. Der Kopf ueberspannt alle Zeilen - dadurch kann er
	 * innerhalb des Abschnitts kleben und wandert mit, solange man darin
	 * liest. Beim naechsten Abschnitt schiebt ihn dessen Kopf hinaus.
	 */
	/*
	 * Die 34 Pixel fuer die Leiste holt sich der Konfigurator vom
	 * Seitenrand zurueck: Er steht sonst 20 Pixel eingerueckt, waehrend die
	 * Vorschau darueber schon bis 8 Pixel an die Kante geht. Damit bleibt
	 * fuer die Eingaben sogar mehr Platz als vorher.
	 */
	.mlk {
		margin-left: -12px;
		margin-right: -12px;
	}

	.mlk .mlk-section {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr);

		/*
		 * Die Zeilen muessen ausdruecklich dastehen, auch wenn sie leer
		 * bleiben.
		 *
		 * Ohne sie greift "grid-row: 1 / -1" an der Leiste ins Leere: Das
		 * Ende des Rasters ist dann Zeile 1, die Leiste belegt also nur die
		 * ERSTE Zeile - und zieht diese auf ihre eigene Hoehe. Unter der
		 * zweizeiligen Beschreibung stand deshalb ein weisser Block von
		 * 186 Pixeln. Leere Zeilen sind 0 Pixel hoch und kosten nichts.
		 */
		grid-template-rows: repeat(24, auto);

		border-left-width: 0;
	}

	.mlk .mlk-section > * {
		grid-column: 2;
		min-width: 0;
	}

	.mlk .mlk-section__title {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: start;

		/* Nie hoeher als das Fenster, sonst klebt nichts mehr. */
		max-height: calc(100vh - var(--mlk-oben, 72px) - 90px);

		writing-mode: vertical-rl;
		transform: rotate(180deg);

		gap: 10px;
		padding: 14px 5px;
		overflow: hidden;

		border-bottom: 0;
		border-right: 1px solid var(--mlk-rahmen);
		border-radius: calc(var(--mlk-radius) - 1px) 0 0 calc(var(--mlk-radius) - 1px);

		font-size: 13.5px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/*
	 * Die Nummer steht aufrecht: Die Drehung des Kopfes wird an ihr wieder
	 * rueckgaengig gemacht, sonst laege die Ziffer auf der Seite.
	 */
	.mlk .mlk-section__nr {
		writing-mode: horizontal-tb;
		transform: rotate(180deg);
		width: 22px;
		height: 22px;
		font-size: 12px;
	}

	/* ---------------------------------------------------------------
	 * 2. Schrift und Kaesten eine Spur kleiner
	 * --------------------------------------------------------------- */

	.mlk { font-size: 12.5px; }

	.mlk .mlk-section__desc { padding: 10px 14px 0; font-size: 11.5px; }

	.mlk .mlk-field { padding: 11px 12px; }

	/*
	 * Der Kasten um eine Motivflaeche trug 16 Pixel Polster ringsum - bei
	 * kleinerer Schrift steht darin mehr Weissraum als Text.
	 */
	.mlk .mlk-field.mlk-field--motiv { padding: 11px; }

	.mlk .mlk-field--motiv + .mlk-field--motiv,
	.mlk .mlk-field + .mlk-field--motiv,
	.mlk .mlk-field--motiv + .mlk-field { margin-top: 12px; }

	/* Leerer Platz unter den drei Wegen, solange nichts hochgeladen ist. */
	.mlk .mlk-field--motiv .mlk-eigen { padding-top: 0; margin-top: 8px; }

	.mlk .mlk-field__label { font-size: 12.5px; }
	.mlk .mlk-field__hint  { font-size: 11px; margin-bottom: 8px; }

	/*
	 * EINGABEFELDER BLEIBEN BEI 16 PIXELN. Bitte nicht verkleinern.
	 *
	 * iOS zoomt beim Antippen in jedes Feld hinein, dessen Schrift kleiner
	 * als 16 Pixel ist - die Seite springt, und danach steht sie schief.
	 * Das laesst sich nicht abschalten, nur vermeiden. Alles andere hier
	 * ist kleiner geworden; diese eine Groesse muss bleiben.
	 */
	.mlk .mlk-field input:not([type="radio"]):not([type="checkbox"]),
	.mlk .mlk-field textarea,
	.mlk .mlk-field select,
	.mlk .mlk-popup input:not([type="radio"]):not([type="checkbox"]),
	.mlk .mlk-popup textarea { font-size: 16px; }

	.mlk .mlk-auswahl { gap: 6px; }

	.mlk .mlk-auswahl__opt {
		gap: 9px;
		padding: 7px 11px 7px 9px;
		border-radius: 8px;
	}

	.mlk .mlk-auswahl__bild img { width: 38px; height: 38px; }

	.mlk .mlk-auswahl__name { font-size: 12.5px; }

	.mlk .mlk-motiv__wege { gap: 6px; margin-bottom: 9px; }

	.mlk .mlk-motiv__weg { padding: 9px 12px; }

	.mlk .mlk-motiv__wegname { font-size: 12.5px; }
	.mlk .mlk-motiv__wegtext { font-size: 11px; }

	/*
	 * Der Rahmen um eine Motivflaeche darf schmaler werden - er traegt
	 * hier keine Erklaerung mehr, nur noch die Zuordnung.
	 */
	.mlk .mlk-field--motiv > .mlk-field__label {
		padding-left: 9px;
		margin-bottom: 10px;
	}

	/* ---------------------------------------------------------------
	 * 3. Vorschau und Preisleiste enger
	 * --------------------------------------------------------------- */

	.mlk .mlk-vorschau {
		padding: 6px 11px 2px;
		margin-bottom: 12px;
	}

	.mlk .mlk-vorschau__titel { font-size: 11.5px; }

	.mlk .mlk-vorschau:not(.mlk-vorschau--offen) .mlk-vorschau__buehne {
		width: 150px;
		max-width: 42vw;

		/*
		 * Die Nummern sitzen ueber ihrer Seitenwand und ragen dabei ein Stueck
		 * ueber das Blech hinaus. Beschnitten war von der 1, 2, 3 nur die
		 * untere Haelfte zu sehen.
		 */
		overflow: visible;
	}

	/* Und der Kasten braucht oben die Luft, in die sie ragen. */
	.mlk .mlk-vorschau:not(.mlk-vorschau--offen) { padding-top: 15px; }

	.mlk-vorschau .mlk-vorschau__mehr { margin: 0 0 -4px; padding: 3px 0 1px; }

	/*
	 * Die Leiste unten ist Anzeige, nicht Inhalt - sie darf zurueckstehen.
	 * Rund ein Drittel flacher als zuvor; der Knopf bleibt mit 38 Pixeln
	 * hoch genug, um ihn mit dem Daumen sicher zu treffen.
	 */
	.mlk-leiste {
		padding: 5px max(10px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
	}

	.mlk-leiste::before { height: 34px; }

	.mlk-leiste .mlk-leiste__innen { gap: 8px; padding: 5px 9px; }

	.mlk-leiste .mlk-leiste__summe { padding: 2px 4px; }

	.mlk-leiste .mlk-leiste__label  { font-size: 9.5px; }
	.mlk-leiste .mlk-leiste__betrag { font-size: 15px; }

	/*
	 * Der Knopf bekommt 5 Pixel zurueck: 40 statt 35. Er ist das Ende des
	 * ganzen Weges - da darf man sich beim Tippen nicht vertun.
	 */
	.mlk-leiste .mlk-leiste__knopf {
		padding: 11px 15px;
		font-size: 12.5px;
	}
}


/* =====================================================================
 * Die Checkliste
 *
 * Jedes Pflichtfeld sagt, woran es ist:
 *
 *   offen    getoenter Kasten mit farbigem Rahmen - hier fehlt noch etwas
 *   fertig   gruener Haken an der Ueberschrift
 *   zu       zusammengefahren, es bleibt die Ueberschrift und die Antwort
 *
 * Warum zuklappen: Ein Feuerkorb mit vier Motivflaechen ist sonst eine
 * Seite ohne Ende, auf der Erledigtes genauso viel Platz braucht wie
 * Offenes. Zugeklappt rueckt der naechste offene Punkt nach oben - man
 * sieht, was noch zu tun ist, statt was schon getan war.
 * ================================================================== */

.mlk .mlk-field--offen,
.mlk .mlk-field--fertig {
	transition: background-color .25s ease, border-color .25s ease;
}

/* --- Offen: hier ist noch etwas zu tun --- */

.mlk .mlk-field--offen {
	background: #fffaf3;
	box-shadow: inset 3px 0 0 var(--mlk-akzent, #c24608);
}

/*
 * Im Motivkasten sitzt schon ein eigener Rahmen - dort traegt die Tuenchung
 * allein, ein zweiter Balken daneben waere zu viel.
 */
.mlk .mlk-field--motiv.mlk-field--offen {
	border-color: #e8b98f;
	background: #fffaf3;
	box-shadow: none;
}

/* --- Erledigt: der Haken --- */

.mlk .mlk-field--fertig > .mlk-field__label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mlk .mlk-field--fertig > .mlk-field__label::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #2e7d4f;

	/*
	 * Der Haken als Hintergrundbild, nicht als Schriftzeichen: Ein Haken
	 * aus der Schrift haengt davon ab, ob der Browser ihn hat - und sieht
	 * in jeder Schrift anders aus.
	 */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

/* Der farbige Balken der Motivflaeche weicht dem Haken. */
.mlk .mlk-field--motiv.mlk-field--fertig > .mlk-field__label {
	border-left-color: #2e7d4f;
}

/* --- Die Antwortzeile --- */

.mlk .mlk-field__antwort {
	margin: 0;
	color: var(--mlk-text-leise, #6b6b6b);
	font-size: 14px;
	line-height: 1.4;
}

/* --- Zugeklappt --- */

.mlk .mlk-field--zu {
	cursor: pointer;
	background: #f7f9f7;
	border-color: #cfe0d4;
}

/*
 * Alles ausser Ueberschrift und Antwort verschwindet. Ausdruecklich mit
 * display:none und nicht mit einer Hoehe von 0 - die Eingaben liegen
 * sonst weiter im Weg, und ein Fingertipp landete auf einem Feld, das
 * gar nicht zu sehen ist.
 */
.mlk .mlk-field--zu > *:not(.mlk-field__label):not(.mlk-field__antwort) {
	display: none;
}

.mlk .mlk-field--zu > .mlk-field__label {
	margin-bottom: 2px;
}

/*
 * Der Hinweis am rechten Rand: zugeklappt "ändern", aufgeklappt "fertig".
 *
 * Beides sitzt an derselben Stelle und tut dasselbe - es klappt um. Ohne
 * das "fertig" gab es keinen Weg zurueck: Wer auf "ändern" getippt hatte,
 * bekam den Kasten nie wieder zu.
 */
.mlk .mlk-field--fertig > .mlk-field__label::after {
	margin-left: auto;
	color: var(--mlk-akzent, #c24608);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.mlk .mlk-field--zu > .mlk-field__label::after { content: "ändern"; }

.mlk .mlk-field--fertig:not(.mlk-field--zu) > .mlk-field__label {
	cursor: pointer;
}

.mlk .mlk-field--fertig:not(.mlk-field--zu) > .mlk-field__label::after {
	content: "fertig \2713";
	color: #2e7d4f;
}

.mlk .mlk-field--zu:hover { background: #f2f6f2; }

@media (prefers-reduced-motion: reduce) {
	.mlk .mlk-field--offen,
	.mlk .mlk-field--fertig { transition: none; }
}

/* Am Handy eine Spur kleiner, wie alles andere dort auch. */
@media (max-width: 600px) {

	.mlk .mlk-field__antwort { font-size: 11.5px; }

	.mlk .mlk-field--fertig > .mlk-field__label::before {
		width: 16px;
		height: 16px;
		background-size: 14px 14px;
	}

	.mlk .mlk-field--fertig > .mlk-field__label::after { font-size: 11px; }
}


/* =====================================================================
   "Mehr Infos" - Knopf und Fenster
   ================================================================== */

/* Der Knopf sitzt in der Karte und darf sie nicht sprengen: schmal,
   ruhig, ohne Farbe. Er ist ein Angebot, keine Handlungsaufforderung -
   der Kaufknopf soll der einzige auffaellige bleiben. */
.mlk-karte__info{
	display:inline-block;margin-top:6px;padding:5px 11px;
	font:inherit;font-size:13px;line-height:1.2;
	background:transparent;color:#5a5a5a;
	border:1px solid #cfcfcf;border-radius:8px;cursor:pointer}
.mlk-karte__info:hover{border-color:#9a9a9a;color:#2f2f2f}
.mlk-karte__info:disabled{opacity:.6;cursor:default}

.mlk-info[hidden]{display:none}
.mlk-info{position:fixed;inset:0;z-index:100000;
	display:flex;align-items:center;justify-content:center;padding:16px}
.mlk-info__hinter{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.mlk-info__kasten{position:relative;background:#fff;color:#2f2f2f;
	border-radius:14px;max-width:640px;width:100%;
	max-height:86vh;overflow:auto;padding:22px 24px;
	box-shadow:0 20px 60px rgba(0,0,0,.35)}
.mlk-info__zu{position:absolute;top:8px;right:10px;
	width:38px;height:38px;font-size:26px;line-height:1;
	background:transparent;border:0;color:#6a6a6a;cursor:pointer}
.mlk-info__zu:hover{color:#000}
.mlk-info__name{margin:0 34px 12px 0;font-size:20px;line-height:1.25}
.mlk-info__bilder{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
	gap:8px;margin:0 0 16px}
.mlk-info__bilder img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:9px;display:block}
.mlk-info__text{font-size:15px;line-height:1.6}
.mlk-info__text h3{font-size:16px;margin:16px 0 6px}
.mlk-info__text ul{margin:0 0 12px;padding-left:20px}
.mlk-info__text p{margin:0 0 10px}

/* Solange das Fenster offen ist, soll die Seite dahinter nicht scrollen. */
body.mlk-info-offen{overflow:hidden}

@media (prefers-color-scheme: dark){
	.mlk-info__kasten{background:#1b1d21;color:#e8e9ea}
	.mlk-info__zu{color:#9aa0a6}
	.mlk-info__zu:hover{color:#fff}
	.mlk-karte__info{color:#b9bec4;border-color:#3a3d42}
	.mlk-karte__info:hover{color:#e8e9ea;border-color:#5a5f66}
}