/*
 * Die Kopfzeile.
 *
 * Zwei Zustände:
 *
 *   offen     Kontaktleiste, darunter das Logo mittig mit den Zeichen
 *             rechts, darunter das Menü.                       150 px
 *   klein     Beim Scrollen: die Kontaktleiste fällt weg, die zwei
 *             Reihen werden eine - kleines Logo links, Menü in der
 *             Mitte, Warenkorb rechts.                          58 px
 *
 * Am Handy gibt es nur eine Reihe: Burger, Logo, Warenkorb.
 */

/*
 * Schwebend, nicht mitlaufend - und der Platz darunter bleibt gleich.
 *
 * WARUM NICHT position: sticky, WAS DAS NAHELIEGENDE WAERE:
 *
 * Eine mitlaufende Kopfzeile nimmt trotzdem Platz im Seitenfluss ein.
 * Schiebt sie sich beim Scrollen von 182 auf 58 Pixel zusammen, wird die
 * ganze Seite 124 Pixel kuerzer. Der Browser rueckt die Scrollposition
 * nach, die faellt unter die Schwelle, die Leiste faehrt wieder aus, die
 * Seite wird laenger - und von vorn. Das war das Flackern.
 *
 * Schwebend nimmt sie gar keinen Platz ein; den haelt statt dessen der
 * Platzhalter darunter frei, und der ist immer gleich hoch. Damit aendert
 * sich die Laenge der Seite nie, und es gibt nichts zu flackern.
 */
.mlk-kopf {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9000;
	background: #fff;
	color: #1F1B18;
	font-family: inherit;

	/*
	 * Die Kopfzeile liegt vorn - aber erst, wenn etwas dahinter ist.
	 *
	 * Am Seitenanfang liegt hinter ihr nichts, und ein Schatten haette
	 * nichts zu werfen: dann nur eine Haarlinie. Sobald der Inhalt unter
	 * sie wandert, hebt sie sich ab. Dieselbe Handschrift tragen die
	 * Vorschau und die Preisleiste: eine helle Kante an der vorderen
	 * Seite, ein enger Schatten direkt darunter und ein weiter, weicher
	 * dahinter.
	 */
	box-shadow: 0 1px 0 rgba(31, 27, 24, .08);
	transition: box-shadow .25s ease;
}

.mlk-kopf--klein {
	/*
	 * Der erste Versuch war unsichtbar: Schatten mit stark negativer
	 * Streuung (-24px) schrumpfen so weit, dass nichts mehr zu sehen ist.
	 * Jetzt zwei Lagen, die man wirklich bemerkt - eine enge dicht unter
	 * der Kante, eine weite dahinter.
	 */
	box-shadow:
		0 1px 0 rgba(31, 27, 24, .14),
		0 4px 10px -2px rgba(31, 27, 24, .16),
		0 14px 26px -8px rgba(31, 27, 24, .22);
}

/*
 * Der Verlauf unter der Kante.
 *
 * Er sagt deutlicher als jeder Schatten, dass hier etwas durchlaeuft: Der
 * Inhalt taucht unter der Leiste ab und wird dabei dunkler. Auf dem
 * Handy ist das der Unterschied, den man tatsaechlich sieht.
 */
.mlk-kopf::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 16px;
	background: linear-gradient(to bottom, rgba(31, 27, 24, .13), rgba(31, 27, 24, 0));
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

.mlk-kopf--klein::after { opacity: 1; }

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

/*
 * Genau so hoch wie die ausgefahrene Kopfzeile:
 * Kontaktleiste 40 + Reihe 132 + Menue 52 = 224.
 */
.mlk-kopf__platz { height: 224px; }

/* Angemeldet steht die Werkzeugleiste von WordPress im Weg. */
body.admin-bar .mlk-kopf { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .mlk-kopf { top: 46px; }
}

.mlk-kopf * { box-sizing: border-box; }

.mlk-kopf__innen {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

/* ------------------------------------------------------------------
   Obere Leiste: Kontakt und Symbole
   ------------------------------------------------------------------ */

.mlk-kopf__oben {
	background: #17161A;
	color: #CFC9C2;
	height: 40px;
	overflow: hidden;
	font-size: 13.5px;
	transition: height .28s ease;
}

.mlk-kopf__oben .mlk-kopf__innen {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.mlk-kopf__kontakt,
.mlk-kopf__symbole {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}

.mlk-kopf__kontakt > * {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.mlk-kopf__kontakt a:hover { color: #fff; }

.mlk-kopf__symbole { gap: 6px; }

.mlk-kopf__symbole a {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	color: #E4DFD9;
	border-radius: 5px;
	transition: color .15s ease, background .15s ease;
}

.mlk-kopf__symbole .mlk-kopf__zeichen {
	width: 20px;
	height: 20px;
	opacity: 1;
}

.mlk-kopf__symbole a:hover { color: #fff; background: rgba(255,255,255,.10); }

.mlk-kopf__zeichen { width: 16px; height: 16px; flex: none; }

.mlk-kopf__oben .mlk-kopf__zeichen { opacity: .7; }

/* ------------------------------------------------------------------
   Die mitfahrende Leiste
   ------------------------------------------------------------------ */

/*
 * Die Hoehe bestimmt das Logo, nicht die Breite.
 *
 * Das Logo ist 2,5 mal so breit wie hoch. Ueber die Breite bemessen war es
 * bei 210 px ganze 84 px hoch - hoeher als die Reihe, in der es stehen
 * sollte. Es sah gequetscht aus, weil es das auch war.
 */
.mlk-kopf__reihe {
	position: relative;
	height: 132px;
	display: flex;
	align-items: center;
	gap: 20px;
	transition: height .3s ease;
}

/*
 * Mittig heißt mittig auf dem Bildschirm, nicht mittig zwischen den
 * Zeichen. Deshalb schwebt das Logo über der Reihe: So schiebt die Zahl
 * am Warenkorb es nicht zur Seite, wenn aus 2 eine 12 wird.
 */
.mlk-kopf__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: block;
	line-height: 0;
	transition: left .3s ease, transform .3s ease;
}

/*
 * ZWEI KLASSEN, UND ZWAR MIT ABSICHT.
 *
 * WooCommerce bringt eine eigene Regel mit:
 *
 *     .woocommerce img, .woocommerce-page img { height: auto }
 *
 * Die zählt in CSS mehr als eine einzelne Klasse und hat deshalb jede
 * Höhenangabe hier überstimmt - allerdings nur auf Shop- und
 * Produktseiten. Auf der Startseite sass das Logo richtig, überall sonst
 * ragte es aus der Reihe heraus. Mit ".mlk-kopf" davor wiegt unsere Regel
 * schwerer, ganz ohne !important.
 */
.mlk-kopf .mlk-kopf__logobild {
	height: 95px;
	width: auto;
	max-width: none;
	display: block;
	transition: height .3s ease;
}

.mlk-kopf__wortmarke {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}

.mlk-kopf__werkzeuge {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.mlk-kopf__rund {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #E2DCD5;
	background: #fff;
	color: #2B2622;
	display: grid;
	place-items: center;
	text-decoration: none;
	transition: width .3s ease, height .3s ease, background .15s ease;
}

.mlk-kopf__rund:hover { background: #F5F1EC; }
.mlk-kopf__rund .mlk-kopf__zeichen { width: 19px; height: 19px; }

/*
 * WhatsApp ist bei dir der Weg, ueber den die meisten Fragen kommen - in
 * der alten Kopfzeile stand dafuer eine ganze Zeile mit Knopf. Als
 * blasses Zeichen neben dem Konto ginge er unter, deshalb in seinem
 * eigenen Gruen und mit Namen daneben.
 */
.mlk-kopf__wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px 0 13px;
	border-radius: 999px;
	background: #25A55B;
	border: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: height .3s ease, padding .3s ease, background .15s ease;
}

.mlk-kopf__wa:hover { background: #1E8C4C; color: #fff; }
.mlk-kopf__wa .mlk-kopf__zeichen { width: 21px; height: 21px; }

.mlk-kopf--klein .mlk-kopf__wa { height: 34px; padding: 0 13px 0 11px; font-size: 13px; }
.mlk-kopf--klein .mlk-kopf__wa .mlk-kopf__zeichen { width: 18px; height: 18px; }

/* --- Der Warenkorb --- */

/*
 * Der Preis muss lesbar sein, nicht dekorativ.
 *
 * Vorher standen Betrag und Anzahl nebeneinander im dunklen Knopf - weiss
 * neben orange, beides gleich gross. Das Auge fand den Preis nicht.
 *
 * Jetzt sitzt die Anzahl als kleine Marke am Warenkorbzeichen, wie man es
 * kennt, und der Preis steht allein und deutlich daneben.
 */
.mlk-kopf__korb {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	background: #17161A;
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0 18px 0 15px;
	height: 42px;
	font: inherit;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .01em;
	cursor: pointer;
	white-space: nowrap;
	transition: height .3s ease, padding .3s ease, font-size .3s ease;
}

.mlk-kopf__korb:hover { background: #000; }

.mlk-kopf__korbzeichen { position: relative; display: block; line-height: 0; }
.mlk-kopf__korb .mlk-kopf__zeichen { width: 21px; height: 21px; }

.mlk-kopf__summe { color: #fff; }

/* WooCommerce gibt den Betrag mit Auszeichnung heraus - hier ohne Kanten. */
.mlk-kopf__summe .woocommerce-Price-amount { font-weight: 700; }
.mlk-kopf__summe bdi { white-space: nowrap; }

/* Eine 0 am Warenkorb sagt nichts - dann bleibt die Marke weg. */
.mlk-kopf__anzahl[hidden] { display: none; }

.mlk-kopf__anzahl {
	position: absolute;
	top: -7px;
	right: -9px;
	background: #E8590C;
	color: #fff;
	border: 2px solid #17161A;
	border-radius: 999px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --- Das Menü --- */

.mlk-kopf__menue {
	position: absolute;
	left: 0;
	right: 0;
	top: 132px;
	height: 52px;
	border-top: 1px solid #EEE9E2;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: top .3s ease, height .3s ease, left .3s ease, right .3s ease;
}

.mlk-kopf__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 28px;
}

.mlk-kopf__liste li { position: relative; }

.mlk-kopf__liste > li > a {
	display: block;
	padding: 6px 0;
	color: #2B2622;
	text-decoration: none;
	font-size: 19px;
	font-weight: 500;
	letter-spacing: .02em;
	white-space: nowrap;
}

.mlk-kopf__liste > li > a:hover,
.mlk-kopf__liste > li.current-menu-item > a,
.mlk-kopf__liste > li.current-menu-ancestor > a { color: #C24608; }

.mlk-kopf__liste > li.current-menu-item > a { box-shadow: inset 0 -2px 0 #C24608; }

/* Untermenüs */

.mlk-kopf__liste .sub-menu {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	margin-top: 8px;
	min-width: 230px;
	list-style: none;
	padding: 8px 0;
	background: #fff;
	border: 1px solid #E4DFD8;
	border-radius: 4px;
	box-shadow: 0 12px 30px rgba(31,27,24,.13);
	opacity: 0;
	visibility: hidden;
	transition: opacity .16s ease, visibility .16s ease;
	z-index: 10;
}

/*
 * Die Bruecke ueber den Abstand.
 *
 * Zwischen Menuepunkt und Untermenue liegen acht Pixel Luft - sie sehen
 * gut aus, gehoerten aber zu keinem von beiden. Wer mit der Maus gerade
 * nach unten fuhr, verlor auf diesem Streifen die Beruehrung, und das
 * Menue klappte zu. Man musste einen Bogen fahren, um hineinzukommen.
 *
 * Das unsichtbare Stueck fuellt die Luecke. Es gehoert zum Untermenue und
 * damit zum Menuepunkt darueber - der Zeiger verlaesst ihn also nie.
 */
.mlk-kopf__liste .sub-menu::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 10px;
}

.mlk-kopf__liste > li:hover > .sub-menu,
.mlk-kopf__liste > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.mlk-kopf__liste .sub-menu a {
	display: block;
	padding: 10px 20px;
	color: #2B2622;
	text-decoration: none;
	font-size: 18px;
	white-space: nowrap;
}

.mlk-kopf__liste .sub-menu a:hover { background: #F5F1EC; color: #C24608; }

/* Der Platz, den die Menüreihe unter der Leiste einnimmt. */
.mlk-kopf__leiste { position: relative; padding-bottom: 52px; transition: padding-bottom .3s ease; }

/* Etwas Abstand nach aussen, damit Logo und Knoepfe nicht an der Kante kleben. */
.mlk-kopf__reihe { padding-top: 4px; padding-bottom: 4px; }

/* ------------------------------------------------------------------
   Zusammengeschoben - beim Scrollen
   ------------------------------------------------------------------ */

.mlk-kopf--klein .mlk-kopf__oben { height: 0; }

.mlk-kopf--klein .mlk-kopf__reihe { height: 64px; }

.mlk-kopf--klein .mlk-kopf__logo {
	left: 24px;
	transform: translate(0, -50%);
}

.mlk-kopf.mlk-kopf--klein .mlk-kopf__logobild { height: 44px; }

/*
 * Zusammengeschoben rueckt das Menue in dieselbe Reihe - und bekommt den
 * Platz, der uebrig ist, statt fester Abstaende von links und rechts.
 *
 * Mit festen Werten ging es schief: Die Luecke zwischen Logo und Knoepfen
 * ist 807 Pixel breit, das groessere Menue 820 - es lief unter das Logo.
 * Als gewoehnliches Flex-Kind rechnet der Browser die Luecke selbst aus,
 * bei jeder Fensterbreite neu. Der Einzug links haelt dem schwebenden
 * Logo seinen Platz frei.
 */
.mlk-kopf--klein .mlk-kopf__reihe { padding-left: 152px; }

.mlk-kopf--klein .mlk-kopf__menue {
	position: static;
	flex: 1 1 auto;
	min-width: 0;
	height: 64px;
	border-top: 0;
	justify-content: center;

	/*
	 * KEIN overflow: hidden.
	 *
	 * Es stand hier, um zu breite Menues abzuschneiden - und schnitt
	 * damit auch die Untermenues ab, die nach unten aufklappen. Beim
	 * Zeigen auf "Feuerstellen" erschien nichts.
	 *
	 * Zu breite Menues fangen wir jetzt anders ab: Dann bleibt die
	 * Leiste zweizeilig (siehe mlk-kopf--eng), und beschnitten werden
	 * muss gar nichts.
	 */
	overflow: visible;
}

.mlk-kopf--klein .mlk-kopf__leiste { padding-bottom: 0; }

/*
 * Zusammengeschoben etwas knapper - bei 16 Pixeln und 20 Abstand war die
 * Liste 861 Pixel breit, der Platz daneben 860. Ein Pixel zu viel, und die
 * Leiste waere zweizeilig geblieben. Mit 15,5 und 16 bleiben rund 20 Pixel
 * Luft, und gegenueber frueher (14) ist es immer noch groesser.
 */
.mlk-kopf--klein .mlk-kopf__liste { gap: 16px; }
.mlk-kopf--klein .mlk-kopf__liste > li > a { font-size: 15.5px; }

/*
 * Und wenn es nicht in eine Reihe passt, bleiben es zwei.
 *
 * Das Menue in dieselbe Reihe zu schieben spart 46 Pixel - aber nur, wenn
 * daneben Platz ist. Bei schmaleren Fenstern ist er das nicht: Dann wurde
 * links das "S" von "Startseite" abgeschnitten und rechts verschwand
 * "Shop" hinter dem WhatsApp-Knopf.
 *
 * Lieber zweizeilig als beschnitten. Das Skript misst nach und setzt
 * "mlk-kopf--eng", wenn es eng wird - dann bleibt die Menuereihe, wo sie
 * ist, und nur die obere Reihe schiebt sich zusammen. Aus 224 Pixeln
 * werden dann 110 statt 64. Immer noch die Haelfte.
 */
@media (min-width: 901px) {

	.mlk-kopf--klein.mlk-kopf--eng .mlk-kopf__reihe { padding-left: 0; }

	.mlk-kopf--klein.mlk-kopf--eng .mlk-kopf__menue {
		position: absolute;
		left: 0;
		right: 0;
		top: 64px;
		height: 46px;
		flex: none;
		overflow: visible;
		border-top: 1px solid #EEE9E2;
	}

	.mlk-kopf--klein.mlk-kopf--eng .mlk-kopf__leiste { padding-bottom: 46px; }
}

.mlk-kopf--klein .mlk-kopf__rund { width: 34px; height: 34px; }
.mlk-kopf--klein .mlk-kopf__rund .mlk-kopf__zeichen { width: 17px; height: 17px; }

/*
 * Zusammengeschoben traegt WhatsApp seinen Namen nicht mit.
 *
 * Der Inhalt der Kopfzeile ist auf 1240 Pixel begrenzt - breiter wird es
 * auch auf einem grossen Bildschirm nicht. Mit dem Wort daneben belegen
 * die Knoepfe rechts rund 340 Pixel, und fuer das groessere Menue blieben
 * 748 - zu wenig fuer die noetigen 791. Die Leiste waere deshalb IMMER
 * zweizeilig geblieben, egal wie breit der Bildschirm ist.
 *
 * Ohne das Wort sind es 204 Pixel, und das Menue passt mit Luft daneben.
 * Das Gruen bleibt, erkennbar ist der Knopf also weiterhin.
 */
.mlk-kopf--klein .mlk-kopf__wa span { display: none; }

.mlk-kopf--klein .mlk-kopf__wa {
	width: 34px;
	padding: 0;
	justify-content: center;
}
.mlk-kopf--klein .mlk-kopf__korb { height: 34px; padding: 0 14px 0 12px; font-size: 14px; }
.mlk-kopf--klein .mlk-kopf__korb .mlk-kopf__zeichen { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
	.mlk-kopf__oben, .mlk-kopf__reihe, .mlk-kopf__logo, .mlk-kopf__logobild,
	.mlk-kopf__menue, .mlk-kopf__leiste, .mlk-kopf__rund, .mlk-kopf__korb {
		transition: none;
	}
}

/* Waehrend gemessen wird, bewegt sich nichts. */
.mlk-kopf--messen,
.mlk-kopf--messen * { transition: none !important; }

/* ------------------------------------------------------------------
   Der Burger und das Aufklappmenü
   ------------------------------------------------------------------ */

.mlk-kopf__burger {
	display: none;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	align-items: center;
	flex: none;
}

.mlk-kopf__burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: #2B2622;
	border-radius: 2px;
	transition: transform .22s ease, opacity .18s ease;
}

.mlk-kopf__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mlk-kopf__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mlk-kopf__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/*
 * Das Menue liegt UEBER der Seite, es schiebt sie nicht.
 *
 * Als normaler Block in der Kopfzeile machte es diese hoeher - und alles
 * darunter rutschte weg. Wer das Menue wieder schloss, stand woanders als
 * vorher. Als Ueberlagerung bleibt die Seite, wo sie ist.
 *
 * Der Abstand nach oben kommt von der Kopfzeile selbst: Das Skript misst
 * sie und schreibt die Hoehe in --mlk-kopf-hoehe.
 */
.mlk-kopf__schublade {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: var(--mlk-kopf-hoehe, 104px);
	bottom: 0;
	z-index: 8998;
	background: #fff;
	border-top: 1px solid #EEE9E2;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	box-shadow: 0 14px 34px rgba(31,27,24,.18);
}

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

/*
 * KEIN overflow:hidden am body, solange das Menue offen ist.
 *
 * Das war der naheliegende Weg, die Seite dahinter festzuhalten - auf dem
 * iPhone bringt er aber alles durcheinander, was mit position:fixed unten
 * klebt: Preisleiste, der Pfeil nach oben, der WhatsApp-Knopf. Safari
 * setzt sie dann an den Rand eines Bereichs, den man gar nicht sieht, und
 * sie stehen mitten im Bild.
 *
 * Gebraucht wird die Sperre ohnehin kaum: Das Menue liegt als eigene
 * Flaeche ueber der Seite und faengt das Wischen mit
 * overscroll-behavior selbst ab.
 */

.mlk-kopf__liste--schublade {
	list-style: none;
	margin: 0;
	padding: 6px 0 18px;
	display: block;
}

.mlk-kopf__liste--schublade li { border-top: 1px solid #F2EEE8; }
.mlk-kopf__liste--schublade > li:first-child { border-top: 0; }

/*
 * Wieder zwei Klassen: Das Theme bringt eigene Abstaende fuer Menuepunkte
 * mit und gewinnt sonst. Die Zeilen waren dann 34 Pixel hoch - mit dem
 * Daumen kaum zu treffen. 52 sind das Mindestmass, das sich bewaehrt hat.
 */
.mlk-kopf .mlk-kopf__liste--schublade a {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 12px 24px;
	color: #2B2622;
	text-decoration: none;
	font-size: 16.5px;
	line-height: 1.3;
}

/*
 * Untermenues im Aufklappmenue.
 *
 * Sie muessen alles ablegen, was sie am Schreibtisch tragen: dort schweben
 * sie als Kaesten unter ihrem Punkt. Am Handy stand dieser Kasten dann
 * mitten im Bild und ueberdeckte die Punkte darunter.
 *
 * Zu bleiben sie, bis jemand den Punkt antippt - aufgeklappt waeren es 21
 * Zeilen, und das laesst sich am Handy nicht ueberblicken.
 */
.mlk-kopf__liste--schublade .sub-menu {
	display: none;
	position: static;
	transform: none;
	opacity: 1;
	visibility: visible;
	margin: 0;
	padding: 0 0 6px;
	min-width: 0;
	list-style: none;
	background: #FAF7F3;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: none;
}

.mlk-kopf__liste--schublade li.mlk-offen > .sub-menu { display: block; }

.mlk-kopf .mlk-kopf__liste--schublade .sub-menu a {
	min-height: 48px;
	padding: 10px 24px 10px 42px;
	font-size: 15.5px;
	color: #4A423B;
	white-space: normal;
}

.mlk-kopf__liste--schublade .sub-menu a:hover { background: #F2EDE6; }

/*
 * Der Winkel als Rahmenstueck, nicht als Schriftzeichen.
 *
 * Als Zeichen (>) haengt es davon ab, ob die Schrift es hat - beim ersten
 * Versuch stand dort ein leeres Kaestchen. Zwei Rahmenkanten, um 45 Grad
 * gedreht, hat jeder Browser.
 */
.mlk-kopf .mlk-kopf__liste--schublade li.menu-item-has-children > a {
	justify-content: space-between;
	gap: 12px;
}

.mlk-kopf__liste--schublade li.menu-item-has-children > a::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-right: 2px solid #9A9088;
	border-bottom: 2px solid #9A9088;
	transform: rotate(-45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.mlk-kopf__liste--schublade li.mlk-offen > a::after {
	transform: rotate(45deg) translate(-2px, -2px);
	border-color: #C24608;
}

.mlk-kopf__liste--schublade li.mlk-offen > a { color: #C24608; }

@media (prefers-reduced-motion: reduce) {
	.mlk-kopf__liste--schublade li.menu-item-has-children > a::after { transition: none; }
}

/* ------------------------------------------------------------------
   Am Handy: eine Reihe
   ------------------------------------------------------------------ */

@media (max-width: 1100px) {

	.mlk-kopf__liste { gap: 20px; }
	.mlk-kopf__liste > li > a { font-size: 17px; }
	.mlk-kopf--klein .mlk-kopf__liste { gap: 15px; }
	.mlk-kopf--klein .mlk-kopf__liste > li > a { font-size: 15px; }

	/* Eng wird es zuerst beim Wort neben dem WhatsApp-Zeichen. */
	.mlk-kopf__wa span { display: none; }
	.mlk-kopf__wa { padding: 0; width: 42px; justify-content: center; }
	.mlk-kopf--klein .mlk-kopf__wa { width: 34px; padding: 0; }
}

@media (max-width: 900px) {

	.mlk-kopf__innen { padding: 0 14px; }

	.mlk-kopf__burger { display: flex; }

	/* Das Menü in der Leiste weicht dem Aufklappmenü. */
	.mlk-kopf__menue { display: none; }
	.mlk-kopf__leiste { padding-bottom: 0; }

	.mlk-kopf__reihe { height: 64px; }
	.mlk-kopf--klein .mlk-kopf__reihe { height: 64px; padding-left: 0; }

	/* Kontaktleiste 38 + Reihe 64 = 102. */
	.mlk-kopf__platz { height: 102px; }

	.mlk-kopf__logo,
	.mlk-kopf--klein .mlk-kopf__logo {
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.mlk-kopf .mlk-kopf__logobild,
	.mlk-kopf.mlk-kopf--klein .mlk-kopf__logobild { height: 44px; }

	/*
	 * Und niemals so breit, dass es an Burger oder Warenkorb stösst.
	 * 150 Pixel sind die zwei Knöpfe plus Luft.
	 */
	.mlk-kopf .mlk-kopf__logo { max-width: calc(100% - 150px); }
	.mlk-kopf .mlk-kopf__logobild { max-width: 100%; object-fit: contain; object-position: center; }

	/*
	 * Am Handy bleibt oben nur der Warenkorb.
	 *
	 * Das Konto steckt im Aufklappmenü. WhatsApp ebenfalls - denn der
	 * grüne Knopf schwebt ohnehin unten rechts auf jeder Seite. Zweimal
	 * derselbe Weg, und dafür wurde das Logo zwischen den Knöpfen
	 * zusammengedrückt. Ohne ihn hat es die Mitte für sich.
	 */
	.mlk-kopf__rund,
	.mlk-kopf__wa { display: none; }

	.mlk-kopf__korb,
	.mlk-kopf--klein .mlk-kopf__korb {
		height: 38px;
		padding: 0 14px 0 12px;
		gap: 9px;
		font-size: 14px;
	}

	.mlk-kopf__schublade { display: block; }

	/* Oben nur noch Telefon und die Symbole - für mehr ist kein Platz. */
	.mlk-kopf__mail,
	.mlk-kopf__zeiten { display: none; }

	.mlk-kopf__oben { height: 38px; font-size: 12.5px; }
	.mlk-kopf__oben .mlk-kopf__innen { height: 38px; }
	.mlk-kopf__symbole { gap: 2px; }
	.mlk-kopf__symbole a { width: 30px; height: 30px; }
}

@media (max-width: 420px) {
	.mlk-kopf .mlk-kopf__logobild,
	.mlk-kopf.mlk-kopf--klein .mlk-kopf__logobild { height: 38px; }
	.mlk-kopf__summe { display: none; }

	.mlk-kopf__korb,
	.mlk-kopf--klein .mlk-kopf__korb { height: 34px; width: 34px; padding: 0; justify-content: center; }

	.mlk-kopf__wa,
	.mlk-kopf--klein .mlk-kopf__wa { height: 34px; width: 34px; }
}