/*
 * Mobile Navigation (Klasse Mercurino_Mobilnavigation) – von Hand gepflegt, eigenständig.
 * Farben: Designwelt v2 (docs/design/startseite.md § 6). Blocksy schaltet bei 999.98 px auf den Mobil-Kopf um.
 */

.mrc-mnav,
.mrc-msuche {
	--mrc-forest: #274c4f;
	--mrc-text: #2f4a4c;
	--mrc-sek: #456a6d;
	--mrc-creme: #fbf8f2;
	--mrc-linie: rgba(39, 76, 79, 0.14);
	--mrc-koralle: #c4412d;
	--mrc-tint: rgba(255, 114, 94, 0.11);
}

/* ── Offcanvas-Panel hell statt Blocksy-Standard (fast schwarz) ─────────── */

body.mrc-mobilnav #offcanvas .ct-panel-inner {
	background-color: #fbf8f2;
	box-shadow: -18px 0 50px rgba(24, 54, 56, 0.18);
}

body.mrc-mobilnav #offcanvas .ct-toggle-close {
	--theme-icon-color: #274c4f;
	--theme-icon-hover-color: #c4412d;
	--toggle-button-background: #fff;
	--toggle-button-border-color: rgba(39, 76, 79, 0.14);
	border-radius: 12px;
}

body.mrc-mobilnav #offcanvas .ct-panel-content[data-device="mobile"] .ct-panel-content-inner {
	align-items: stretch;
	text-align: left;
}

/* Blocksy-Menüs im Panel ausblenden – unsere Navigation ersetzt sie. */
.mrc-mnav[data-blocksy-menues="aus"] ~ .mobile-menu,
.mrc-mnav[data-blocksy-menues="aus"] ~ .ct-header-divider,
.mrc-mnav[data-blocksy-menues="aus"] ~ .site-logo-container {
	display: none !important;
}

/* Leere Blocksy-Menüs (ohne Einträge) nie als Lücke zeigen. */
#offcanvas .mobile-menu:not(:has(li)) {
	display: none;
}

/* ── Menü ─────────────────────────────────────────────────────────────── */

.mrc-mnav {
	width: 100%;
	color: var(--mrc-text);
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
}

.mrc-mnav * {
	box-sizing: border-box;
}

.mrc-mnav a {
	color: inherit;
	text-decoration: none;
}

.mrc-mnav__icon {
	width: 22px;
	height: 22px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Suche */
.mrc-mnav__suche {
	margin: 0 0 18px;
}

/* Schnellzugriffe */
.mrc-mnav__schnell {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 26px;
}

.mrc-mnav__kachel {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	padding: 12px 12px;
	border: 1px solid var(--mrc-linie);
	border-radius: 13px;
	background: #fff;
	color: var(--mrc-forest) !important;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.2;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.mrc-mnav__kachel:last-child:nth-child(odd) {
	grid-column: 1 / -1; /* ungerade Anzahl: letzte Kachel über die volle Breite */
}

.mrc-mnav__kachel .mrc-mnav__icon {
	width: 34px;
	height: 34px;
	padding: 7px;
	border-radius: 10px;
	background: var(--mrc-tint);
	color: var(--mrc-koralle);
	stroke-width: 1.9;
}

.mrc-mnav__kachel span {
	min-width: 0;
	/* Keine automatische Silbentrennung: Safari trennte damit „Alle Pro-/dukte“, obwohl am Leerzeichen
	   Platz war. Getrennt wird nur an weichen Trennzeichen (z. B. „Händler­portal“). */
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: break-word;
}

/*
 * Handys: Icon und Text bleiben nebeneinander, beides etwas kleiner. Vorher blieben neben dem
 * 34-px-Icon nur rund 70 px Text, „Anmelden“ brach auf 375-px-iPhones als „Anmelde/n“ um.
 * Bemessen wird am Kachelraster selbst (Container-Abfrage), nicht am Bildschirm, weil Blocksy die
 * Breite des Menüfensters je nach Gerät anders setzt. Ältere Browser nutzen die Bildschirmregel.
 */
.mrc-mnav__schnell {
	container-type: inline-size;
	container-name: mrc-schnell;
}

@media (max-width: 599.98px) {
	@supports not (container-type: inline-size) {
		.mrc-mnav__kachel {
			gap: 8px;
			padding: 10px;
			font-size: 14px;
		}

		.mrc-mnav__kachel .mrc-mnav__icon {
			width: 28px;
			height: 28px;
			padding: 5px;
			border-radius: 8px;
		}
	}
}

@container mrc-schnell (max-width: 359.98px) {
	.mrc-mnav__kachel {
		gap: 8px;
		min-height: 52px;
		padding: 10px;
		font-size: 14px;
	}

	.mrc-mnav__kachel .mrc-mnav__icon {
		width: 28px;
		height: 28px;
		padding: 5px;
		border-radius: 8px;
	}
}

/* Sehr schmale Handys (z. B. iPhone SE 1. Gen.) */
@container mrc-schnell (max-width: 259.98px) {
	.mrc-mnav__schnell {
		gap: 8px;
	}

	.mrc-mnav__kachel {
		gap: 6px;
		padding: 8px;
		font-size: 13px;
	}

	.mrc-mnav__kachel .mrc-mnav__icon {
		width: 24px;
		height: 24px;
		padding: 4px;
		border-radius: 7px;
	}
}

.mrc-mnav__kachel:hover,
.mrc-mnav__kachel:focus-visible {
	border-color: var(--mrc-koralle);
}

/* Gruppen */
.mrc-mnav__gruppe {
	margin: 0 0 22px;
}

.mrc-mnav__titel {
	margin: 0 0 6px !important;
	color: var(--mrc-sek);
	font-size: 12.5px;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mrc-mnav__liste,
.mrc-mnav__liste ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mrc-mnav__liste > li {
	margin: 0;
	border-bottom: 1px solid var(--mrc-linie);
}

.mrc-mnav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 50px;
	padding: 10px 2px;
	color: var(--mrc-forest) !important;
	font-size: 17px;
	font-weight: 650;
	cursor: pointer;
}

.mrc-mnav__link:hover,
.mrc-mnav__link:focus-visible {
	color: var(--mrc-koralle) !important;
}

/* Aufklappbare Hauptkategorie */
.mrc-mnav__auf > summary {
	list-style: none;
}

.mrc-mnav__auf > summary::-webkit-details-marker {
	display: none;
}

.mrc-mnav__auf > summary .mrc-mnav__icon {
	width: 20px;
	height: 20px;
	color: var(--mrc-sek);
	transition: transform 0.2s ease;
}

.mrc-mnav__auf[open] > summary .mrc-mnav__icon {
	transform: rotate(180deg);
}

.mrc-mnav__auf ul {
	padding: 0 0 10px 12px !important;
	border-left: 2px solid var(--mrc-tint);
	margin-left: 2px !important;
}

.mrc-mnav__auf ul a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 4px;
	color: var(--mrc-text);
	font-size: 16px;
}

.mrc-mnav__auf ul li:first-child a {
	color: var(--mrc-koralle);
	font-weight: 650;
}

.mrc-mnav__auf ul a:hover,
.mrc-mnav__auf ul a:focus-visible {
	color: var(--mrc-koralle);
}

/* Rechtliches */
.mrc-mnav__recht {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	padding-top: 4px;
}

.mrc-mnav__recht a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--mrc-sek) !important;
	font-size: 14px;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* ── Suchformular (Blocksy-Form und eigener Rückfall) ───────────────────── */

.mrc-mnav .ct-search-form,
.mrc-msuche .ct-search-form {
	--theme-form-field-height: 48px;
	--theme-form-field-border-radius: 12px;
	--theme-form-field-background-initial-color: #fff;
	--theme-form-field-background-focus-color: #fff;
	--theme-form-field-border-initial-color: rgba(39, 76, 79, 0.22);
	--theme-form-field-border-focus-color: #274c4f;
	--theme-form-text-initial-color: #2f4a4c;
	--theme-form-text-focus-color: #2f4a4c;
	width: 100%;
	max-width: none;
}

/* 16 px verhindert, dass iOS beim Antippen in das Feld zoomt. */
.mrc-mnav .ct-search-form input[type="search"],
.mrc-msuche .ct-search-form input[type="search"],
.mrc-suchform input[type="search"] {
	font-size: 16px !important;
}

.mrc-mnav .ct-search-form input[type="search"]::placeholder,
.mrc-msuche .ct-search-form input[type="search"]::placeholder,
.mrc-suchform input[type="search"]::placeholder {
	color: #5f7b7d;
	opacity: 1;
}

.mrc-mnav .ct-search-form button[type="submit"],
.mrc-msuche .ct-search-form button[type="submit"] {
	--theme-button-text-initial-color: #274c4f;
	--theme-button-text-hover-color: #c4412d;
}

/* Live-Ergebnisse: Blocksy legt die Liste rund um das Feld (das Feld liegt darüber) – kein eigener z-index. */
.mrc-mnav .ct-search-results,
.mrc-msuche .ct-search-results {
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(24, 54, 56, 0.18);
}

.mrc-mnav .ct-search-results a,
.mrc-msuche .ct-search-results a {
	min-height: 48px;
}

.mrc-suchform {
	position: relative;
	display: flex;
	width: 100%;
}

.mrc-suchform input[type="search"] {
	width: 100%;
	height: 48px;
	padding: 0 48px 0 14px;
	border: 1px solid rgba(39, 76, 79, 0.22);
	border-radius: 12px;
	background: #fff;
	color: #2f4a4c;
}

.mrc-suchform button {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #274c4f;
}

.mrc-suchform button svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* ── Suchleiste unter dem Kopf (nur Handy/Tablet) ──────────────────────── */

.mrc-msuche {
	display: none;
}

@media (max-width: 999.98px) {
	.mrc-msuche {
		display: block;
		position: relative;
		z-index: 20;
		padding: 4px 16px 12px;
		border-bottom: 1px solid rgba(39, 76, 79, 0.1);
		background: var(--theme-palette-color-8, #fff);
	}

	.mrc-msuche__inner {
		max-width: 680px;
		margin: 0 auto;
	}
}

/* ── iPhone/iPad: kein automatisches Hineinzoomen beim Antippen von Feldern ──
 * iOS zoomt in jedes Eingabefeld unter 16 px Schrift (z. B. Sortierung, Seitenleisten-Suche,
 * Anfrageformular) und zoomt danach nicht zurück. Gilt nur auf iOS-Geräten im Mobil-Layout. */
@supports (-webkit-touch-callout: none) {
	@media (max-width: 999.98px) {
		body.mrc-mobilnav :is(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"], select, textarea) {
			font-size: 16px !important;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.mrc-mnav__kachel,
	.mrc-mnav__auf > summary .mrc-mnav__icon {
		transition: none;
	}
}