/* MINADI Startseite – Farbwelt angelehnt an die MINADI Schnellbestellung */

body.mfp-body {
	margin: 0;
	background: #1e1e21;
}

.mfp {
	--mfp-akzent: #e8489a;
	--mfp-grund: #1e1e21;
	--mfp-tief: #161618;
	--mfp-flaeche: #2b2b2f;
	--mfp-flaeche-hell: #252528;
	--mfp-flaeche-deko: #323236;
	--mfp-linie: #3a3a3f;
	--mfp-linie-stark: #5a5a60;
	--mfp-text: #ffffff;
	--mfp-text-2: #e4e4e7;
	--mfp-gedimmt: #b4b4ba;
	--mfp-leise: #9a9aa1;
	--mfp-schrift: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	min-height: 100vh;
	background: var(--mfp-grund);
	color: var(--mfp-text);
	font-family: var(--mfp-schrift);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: left;
}

/* Kleine Grundlage, damit Reste vom Theme nichts verbiegen */
.mfp *,
.mfp *::before,
.mfp *::after { box-sizing: border-box; }
.mfp h1, .mfp h2, .mfp h3, .mfp p, .mfp ul, .mfp ol, .mfp li { margin: 0; padding: 0; font-family: inherit; letter-spacing: normal; text-transform: none; }
.mfp ul, .mfp ol { list-style: none; }
.mfp img { display: block; max-width: 100%; height: auto; border: 0; }
.mfp a { color: var(--mfp-text); text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.mfp a:hover { color: var(--mfp-akzent); }
.mfp a:focus-visible,
.mfp button:focus-visible { outline: 2px solid var(--mfp-akzent); outline-offset: 3px; }

.mfp-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: clamp(20px, 4vw, 48px);
	padding-right: clamp(20px, 4vw, 48px);
}

/* Typografie */
.mfp-h1 { font-weight: 600; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -.01em; color: var(--mfp-text); }
.mfp-h2 { font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; color: var(--mfp-text); }
.mfp-h3 { font-weight: 600; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; color: var(--mfp-text); }
.mfp-label { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--mfp-akzent); }
.mfp-lead { max-width: 32em; font-size: 16px; line-height: 1.55; color: var(--mfp-gedimmt); }
.mfp-text { max-width: 34em; font-size: 15px; line-height: 1.55; color: var(--mfp-gedimmt); }
.mfp-klein { font-size: 14px; color: var(--mfp-leise); }
.mfp-gedimmt { color: var(--mfp-gedimmt); }
.mfp .mfp-akzent-link { color: var(--mfp-akzent); font-weight: 500; font-size: 15px; }
.mfp .mfp-akzent-link:hover { color: var(--mfp-text); }

/* Buttons – wie „Bestellung prüfen“ */
.mfp-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.mfp .mfp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 24px;
	border-radius: 23px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.mfp .mfp-btn-voll { background: #ffffff; color: var(--mfp-grund); }
.mfp .mfp-btn-voll:hover { background: #e4e4e7; color: var(--mfp-grund); }
.mfp .mfp-btn-rand { border: 1px solid var(--mfp-linie-stark); color: var(--mfp-text); font-weight: 500; }
.mfp .mfp-btn-rand:hover { border-color: var(--mfp-akzent); color: var(--mfp-text); }

/* Kopfzeile */
.mfp-kopf { border-bottom: 1px solid var(--mfp-linie); background: var(--mfp-grund); }
.mfp-kopf-innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.mfp .mfp-logo {
	font-weight: 200;
	font-size: 36px;
	line-height: 1;
	letter-spacing: .42em;
	margin-right: -.42em;
	color: var(--mfp-akzent);
	padding: 8px 0;
}
.mfp .mfp-logo:hover { color: var(--mfp-akzent); opacity: .85; }
.mfp-logo-bild { max-height: 56px; width: auto; }
.mfp-logo-klein { font-size: 28px; padding: 0; }
.mfp-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-left: auto; font-size: 15px; }
.mfp-aktionen { display: flex; align-items: center; gap: 24px; }
.mfp .mfp-suche { width: 300px; }
.mfp .mfp-nav .mfp-login-mobil { display: none; }
.mfp .mfp-nav-link { color: #d6d6da; padding: 12px 0; }
.mfp .mfp-nav-link:hover { color: var(--mfp-akzent); }
.mfp .mfp-login {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--mfp-akzent);
	border-radius: 12px;
	font-weight: 500;
	color: var(--mfp-text);
}
.mfp .mfp-login svg { color: var(--mfp-akzent); }
.mfp .mfp-login:hover { background: var(--mfp-flaeche); color: var(--mfp-text); }
.mfp-menue-knopf {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--mfp-linie-stark);
	border-radius: 12px;
	background: transparent;
	color: var(--mfp-text);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}

/* Einstieg + Kollektion */
.mfp-einstieg {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(40px, 5vw, 72px) clamp(56px, 7.5vw, 110px);
	align-items: center;
	padding-top: clamp(40px, 5vw, 80px);
	padding-bottom: clamp(40px, 5vw, 80px);
}
.mfp-einstieg-text { display: flex; flex-direction: column; gap: 22px; }

/* Hintergrundbild links oben */
.mfp-einstieg-band { position: relative; overflow: hidden; isolation: isolate; }
.mfp-einstieg-band > .mfp-einstieg { position: relative; z-index: 1; }
.mfp-einstieg-hg {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	pointer-events: none;
}
/* Variante „aussen“: Bild am linken Rand, läuft nach rechts und unten ins Dunkle aus. */
.mfp-hg-aussen .mfp-einstieg-hg {
	width: 50%;
	-webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .55) 35%, transparent 75%), linear-gradient(to bottom, #000 55%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .55) 35%, transparent 75%), linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-composite: intersect;
}
/* Ab großen Bildschirmen sitzt das Bild komplett im freien Rand plus ein kleines Stück darunter. */
@media (min-width: 1600px) {
	.mfp-hg-aussen .mfp-einstieg-hg { width: calc((100% - 1280px) / 2 + 420px); }
}
/* Variante „dezent“: Bild hinter dem Text, zur Schrift hin abgedunkelt. */
.mfp-hg-dezent .mfp-einstieg-hg {
	width: 60%;
	-webkit-mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 100%), linear-gradient(to bottom, #000 60%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, #000 0%, #000 45%, transparent 100%), linear-gradient(to bottom, #000 60%, transparent 100%);
	mask-composite: intersect;
	filter: grayscale(.35) brightness(.7);
}
.mfp-hg-dezent .mfp-einstieg-text :is(.mfp-h1, .mfp-lead, .mfp-klein) { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.mfp-einstieg .mfp-lead { font-size: 17px; }
.mfp-einstieg .mfp-btn { min-height: 50px; padding: 0 26px; border-radius: 25px; font-size: 16px; }
.mfp-einstieg .mfp-klein { font-size: 15px; }
.mfp-kollektion { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 24px; width: 100%; max-width: 440px; justify-self: end; }
.mfp-kat-liste { border-top: 1px solid var(--mfp-linie); }
.mfp .mfp-kat {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 12px;
	border-bottom: 1px solid var(--mfp-linie);
}
.mfp .mfp-kat:hover { background: var(--mfp-flaeche); color: var(--mfp-text); }
.mfp-kat-name { font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }
.mfp .mfp-kat:hover .mfp-kat-name { color: var(--mfp-akzent); }
.mfp-kat-rechts { display: flex; align-items: center; gap: 16px; flex: none; }
.mfp .mfp-kat-bild {
	display: block;
	width: 104px;
	height: 78px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--mfp-flaeche);
	border: 1px solid transparent;
}
.mfp .mfp-kat:hover .mfp-kat-bild { border-color: var(--mfp-akzent); }

/* Bänder */
.mfp-band { border-top: 1px solid var(--mfp-linie); }
.mfp-band-dunkel { background: var(--mfp-tief); border-bottom: 1px solid var(--mfp-linie); }
.mfp-band-dunkel + .mfp-band { border-top: 0; }
.mfp-band-hell { background: var(--mfp-flaeche-hell); }
.mfp-stapel {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(40px, 5vw, 72px);
}
.mfp-band-dunkel .mfp-stapel { gap: 36px; }
.mfp-kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; }
.mfp-kopfzeile-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 20px 32px;
}
.mfp-kopfzeile-raster .mfp-text { font-size: 16px; }
.mfp-trenner { border-top: 1px solid var(--mfp-linie); padding-top: 28px; }
.mfp-block { display: flex; flex-direction: column; gap: 14px; }

/* Konzept */
.mfp-konzept-listen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 28px 56px;
}
.mfp-haken { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--mfp-text-2); }
.mfp-haken-zweispaltig {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 10px 28px;
}
.mfp-haken li { display: flex; gap: 10px; }
.mfp-check { flex: none; margin-top: 2px; color: var(--mfp-akzent); }
.mfp-schritte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 12px;
}
.mfp .mfp-schritt {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--mfp-flaeche);
	font-size: 15px;
	line-height: 1.45;
	color: var(--mfp-text-2);
}
.mfp-schritt-nr { flex: none; font-weight: 300; font-size: 32px; line-height: 1; color: var(--mfp-akzent); }
.mfp-konzept-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.mfp-presse { display: flex; align-items: center; gap: 14px; }
.mfp .mfp-presse-bild { width: 54px; height: 72px; border-radius: 6px; object-fit: cover; background: var(--mfp-flaeche); flex: none; }
.mfp-presse-text { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--mfp-gedimmt); }
.mfp-presse-text .mfp-akzent-link { font-size: 14px; }

/* Raster für Modelle, Deko, Kampagnen */
.mfp-raster { display: grid; gap: 24px 16px; }
.mfp-raster-modelle { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.mfp-raster-deko { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.mfp-raster-kampagnen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.mfp .mfp-karte { display: flex; flex-direction: column; gap: 8px; color: var(--mfp-text); }
.mfp .mfp-karte:hover { color: var(--mfp-akzent); }
.mfp .mfp-karte-bild {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
	background: var(--mfp-flaeche);
}
.mfp-band-hell .mfp-karte-bild { background: var(--mfp-flaeche-deko); }
.mfp-karte-name { font-weight: 500; font-size: 17px; line-height: 1.3; }
.mfp-raster-deko .mfp-karte-name { font-size: 16px; }
.mfp .mfp-kampagne-bild {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
	background: var(--mfp-flaeche);
}
.mfp-leer { display: block; }

/* Shopfinder */
.mfp-shopfinder-band { padding: 0 clamp(20px, 4vw, 48px) clamp(40px, 5vw, 72px); }
.mfp-band + .mfp-shopfinder-band,
.mfp-band-hell + .mfp-shopfinder-band { padding-top: 0; }
.mfp-shopfinder {
	max-width: 1184px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: clamp(24px, 3.5vw, 40px);
	border: 1px solid var(--mfp-akzent);
	border-radius: 16px;
	background: var(--mfp-flaeche);
}
.mfp-shopfinder-text { display: flex; flex-direction: column; gap: 8px; max-width: 40em; }

/* Fußzeile */
.mfp-fuss { background: var(--mfp-tief); border-top: 1px solid var(--mfp-linie); }
.mfp-fuss .mfp-wrap { display: flex; flex-direction: column; gap: 40px; padding-top: clamp(40px, 5vw, 64px); padding-bottom: 24px; }
.mfp-fuss-spalten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 32px;
}
.mfp-fuss-spalte { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; }
.mfp-fuss-spalte .mfp-label { margin-bottom: 4px; }
.mfp-social { display: flex; gap: 16px; margin-top: 4px; }
.mfp-fuss-unten {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 28px;
	padding-top: 20px;
	border-top: 1px solid var(--mfp-linie);
	font-size: 13px;
	color: var(--mfp-leise);
}
.mfp-recht { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.mfp .mfp-recht a { color: var(--mfp-gedimmt); }
.mfp .mfp-recht a:hover { color: var(--mfp-akzent); }
.mfp-badge { max-height: 44px; width: auto; }

/* Handy */
@media (max-width: 1240px) {
	.mfp-kopf-innen { gap: 8px; }
	.mfp-menue-knopf { display: inline-flex; }
	.mfp-aktionen { margin-left: auto; }
	.mfp .mfp-suche { width: 260px; }
	.mfp .mfp-aktionen .mfp-login-desktop { display: none; }
	.mfp-nav {
		display: none;
		order: 10;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-left: 0;
		padding: 4px 0 10px;
	}
	.mfp-kopf.ist-offen .mfp-nav { display: flex; }
	.mfp .mfp-nav-link { padding: 12px 0; border-bottom: 1px solid var(--mfp-linie); }
	.mfp .mfp-nav .mfp-login-mobil { display: inline-flex; margin-top: 12px; justify-content: center; }
}

@media (max-width: 600px) {
	.mfp-raster-modelle,
	.mfp-raster-deko,
	.mfp-raster-kampagnen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
	.mfp-karte-name,
	.mfp-raster-deko .mfp-karte-name { font-size: 15px; }
}

@media (max-width: 900px) {
	/* Auf schmalen Bildschirmen liegt das Bild oben über die ganze Breite und blendet nach unten aus. */
	.mfp-hg-aussen .mfp-einstieg-hg,
	.mfp-hg-dezent .mfp-einstieg-hg {
		width: 100%;
		bottom: auto;
		height: 420px;
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%);
	}
	.mfp-einstieg-band.hat-hg .mfp-einstieg-text :is(.mfp-h1, .mfp-lead, .mfp-klein) { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
}

@media (max-width: 600px) {
	.mfp .mfp-suche { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
	.mfp .mfp-suche .msu-knopf-beispiel { display: none; }
}

@media (max-width: 480px) {
	.mfp-menue-text { display: none; }
	.mfp-menue-knopf { width: 44px; padding: 0; justify-content: center; }
	.mfp .mfp-kat { padding: 10px 8px; }
	.mfp .mfp-kat-bild { width: 76px; height: 57px; }
	.mfp .mfp-btn { flex: 1 1 auto; }
	.mfp .mfp-logo { font-size: 28px; }
	.mfp-logo-bild { max-height: 44px; }
}

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