/*
 * mabetec-shop — Elementor-DOM-Bridge
 *
 * Das Design-CSS (tokens/components/pages) stammt aus dem statischen Mockup
 * und erwartet direktes Markup. Elementor-Container rendern aber Zwischen-
 * Ebenen (.e-con-inner) und Widget-Wrapper — diese Datei überbrückt die
 * Differenzen, damit die mb-*-Klassen im Elementor-Kontext identisch wirken.
 *
 * Regel: Hier stehen NUR strukturelle Mappings (display/flex/width),
 * keine Marken-Optik. Marken-Styles bleiben in components/pages.css.
 */

/* ---------- Header ---------- */

/* Elementor legt .e-con-inner zwischen __inner und die Flex-Kinder.
   Flex-Verhalten auf die Zwischen-Ebene durchreichen. */
.mb-header__inner > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--mb-space-5);
	width: 100%;
}

/* Logo-Widget: Bildgröße unabhängig von Wrapper-Tiefe begrenzen */
.mb-header .mb-header__logo img {
	height: 44px;
	width: auto;
}

/* Das Logo-Widget selbst nicht wachsen lassen, Nav nimmt den Restraum */
.mb-header__inner .mb-header__logo {
	flex-grow: 0;
	flex-shrink: 0;
	width: auto;
}
.mb-header__inner .mb-header__nav {
	flex-grow: 1;
	width: auto;
}
.mb-header__inner .mb-header__actions-wrap {
	flex-grow: 0;
	width: auto;
}

/* Elementor-Pro nav-menu-Widget auf mb-Nav-Optik mappen.
   Wichtig: nur die waagerechte Hauptliste als Flex-Zeile. Die
   Burger-Liste (.elementor-nav-menu--dropdown) muss Spalte bleiben. */
.mb-header__nav .elementor-nav-menu--main > .elementor-nav-menu {
	display: flex;
	gap: var(--mb-space-4);
	justify-content: center;
}
.mb-header__nav .elementor-nav-menu a.elementor-item {
	font-family: var(--mb-font-body);
	font-weight: var(--mb-weight-medium);
	font-size: var(--mb-fs-body);
	color: var(--mb-ink-800);
	text-decoration: none;
	padding: 4px 0;
}
/* Unterstrich kommt ausschliesslich aus der animierten ::after-Linie
   (.mb-header__nav a::after in components.css, links->rechts). Den
   instant border-bottom NICHT wieder einfuehren — sonst Doppel-Optik. */
.mb-header__nav .elementor-nav-menu a.elementor-item:hover,
.mb-header__nav .elementor-nav-menu a.elementor-item.elementor-item-active {
	color: var(--mb-ink-900);
}

/* ---------- Header-Nav: Untermenüs (AP-7) ----------

   Das Hauptmenü 281 hat seit AP-7 eine zweite Ebene. Elementor bringt
   dafür eigene Default-Optik mit; hier wird sie auf die CI gezogen.
   Der Breakpoint für Liste vs. Burger kommt von Elementor selbst
   (elementor-nav-menu--dropdown-tablet, also <= 1024px) — deshalb steht
   in components.css KEIN eigener display:none-Breakpoint mehr. */

/* Aufklapp-Panel auf dem Desktop */
.mb-header__nav .elementor-nav-menu--main .sub-menu {
	background: var(--mb-card);
	border: var(--mb-border);
	border-top: 2px solid var(--mb-red);
	box-shadow: 0 12px 28px rgba(2, 10, 10, 0.12);
	padding: var(--mb-space-1) 0;
	min-width: 232px;
}
.mb-header__nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-small);
	font-weight: var(--mb-weight-medium);
	color: var(--mb-ink-800);
	padding: 10px var(--mb-space-3);
	white-space: nowrap;
}
.mb-header__nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
.mb-header__nav .elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active {
	color: var(--mb-red);
	background: var(--mb-neutral-100);
}
/* Die animierte ::after-Linie gehört nur auf die oberste Ebene */
.mb-header__nav .sub-menu a::after {
	display: none;
}
/* Caret nicht als zweites Klickziel wirken lassen */
.mb-header__nav .elementor-item .sub-arrow {
	margin-inline-start: 6px;
}

/* ---------- Header-Nav: Burger-Ebene (AP-7) ---------- */

.mb-header__nav .elementor-menu-toggle {
	color: var(--mb-ink-900);
	background: transparent;
	padding: 8px;
	border-radius: var(--mb-radius-input);
	margin-inline-start: auto;
}
.mb-header__nav .elementor-menu-toggle:focus-visible {
	outline: 2px solid var(--mb-red);
	outline-offset: 2px;
}
.mb-header__nav .elementor-menu-toggle i {
	font-size: 26px;
}
.mb-header__nav nav.elementor-nav-menu--dropdown {
	background: var(--mb-card);
	border-top: 2px solid var(--mb-red);
	box-shadow: 0 16px 32px rgba(2, 10, 10, 0.14);
	max-width: 100vw;
}
.mb-header__nav nav.elementor-nav-menu--dropdown .elementor-nav-menu {
	display: block;
}
.mb-header__nav nav.elementor-nav-menu--dropdown a.elementor-item,
.mb-header__nav nav.elementor-nav-menu--dropdown a.elementor-sub-item {
	font-family: var(--mb-font-body);
	color: var(--mb-ink-800);
	padding: 14px var(--mb-space-3);
	border-bottom: var(--mb-border);
}
.mb-header__nav nav.elementor-nav-menu--dropdown a.elementor-sub-item {
	padding-inline-start: var(--mb-space-5);
	font-size: var(--mb-fs-small);
}
.mb-header__nav nav.elementor-nav-menu--dropdown a.elementor-item:hover,
.mb-header__nav nav.elementor-nav-menu--dropdown a.elementor-sub-item:hover {
	color: var(--mb-red);
	background: var(--mb-neutral-100);
}
/* Kein Querscroll: das Panel darf die Viewportbreite nie überschreiten */
.mb-header__nav nav.elementor-nav-menu--dropdown ul {
	max-width: 100%;
}

/* Kopfzeile unterhalb des Elementor-Tablet-Breakpoints auf EINE Zeile
   zwingen: Logo links, Icons rechts, Burger ganz aussen. Die Regeln
   stehen hier statt in components.css, weil sie die Flex-Vorgaben des
   Header-Blocks weiter oben in dieser Datei überschreiben müssen. */
@media (max-width: 1024px) {
	.mb-header__inner > .e-con-inner {
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--mb-space-2);
	}
	.mb-header__inner .mb-header__logo {
		flex-shrink: 0;
	}
	/* Das Logo behält sein Seitenverhältnis und eine feste Breite,
	   damit es in der einzeiligen Kopfzeile nicht zusammengedrückt
	   wird. 132 + 102 (Icons) + 42 (Burger) + 24 (Abstände) = 300px
	   und passt damit in die 307px Innenbreite bei 375px Viewport. */
	.mb-header .mb-header__logo img {
		width: 132px;
		height: auto;
		max-width: none;
	}
	.mb-header__inner .mb-header__nav {
		order: 3;
		width: auto;
		min-width: 0;
		flex-grow: 0;
		flex-shrink: 1;
		margin-left: 0;
		gap: 0;
	}
	.mb-header__inner .mb-header__actions-wrap {
		margin-left: auto;
		flex-shrink: 0;
	}

	/* Das Burger-Panel hängt sonst am Widget-Wrapper (Lektion 4:
	   Widget-Wrapper sind position:relative) und ragt 150px breit
	   rechts aus dem Viewport — das erzeugt Querscroll. Deshalb den
	   Wrapper hier static stellen, damit die sticky .mb-header der
	   Bezugsrahmen wird, und das Panel über die volle Breite legen. */
	.mb-header__inner {
		position: static;
	}
	.mb-header__inner .mb-header__nav {
		position: static;
	}
	.mb-header__nav nav.elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		max-height: calc(100vh - 72px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Zweite Ebene im Burger dauerhaft aufgeklappt: so ist jede
	   Inhaltsseite von der Startseite aus mit zwei Fingertipps
	   erreichbar (Burger, dann Seite) statt mit dreien. Das inline
	   display:none von SmartMenus lässt sich nur so überstimmen. */
	.mb-header__nav nav.elementor-nav-menu--dropdown .sub-menu {
		display: block !important;
	}
	.mb-header__nav nav.elementor-nav-menu--dropdown .sub-arrow {
		display: none;
	}
}

/* ---------- Header-Nav: Konfigurator als hervorgehobener Button ----------
   Eigene Menüpunkt-Klasse mb-nav-cta (Term 281, Menüpunkt "Konfigurator")
   hebt den Punkt als Button in Akzentfarbe ab, statt wie die uebrigen
   Punkte als Textlink zu laufen. Klasse landet am <li> (WP-Core-Walker),
   nicht am <a> — deshalb der Kindselektor. Quellreihenfolge nach den
   allgemeinen Nav-Regeln, damit sie bei gleicher Spezifitaet gewinnt. */
.mb-header__nav li.mb-nav-cta > a.elementor-item {
	background: var(--mb-red);
	color: #fff;
	font-weight: var(--mb-weight-strong);
	padding: 8px var(--mb-space-3);
	margin-inline-start: var(--mb-space-2);
	clip-path: var(--mb-slope-sm);
	transition: background var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-header__nav li.mb-nav-cta > a.elementor-item:hover,
.mb-header__nav li.mb-nav-cta > a.elementor-item.elementor-item-active {
	background: var(--mb-red-hover);
	color: #fff;
}
/* Keine animierte Unterstrich-Linie (components.css) auf einem Button
   mit Flaechenfarbe. */
.mb-header__nav li.mb-nav-cta > a.elementor-item::after {
	content: none;
}
/* Im Burger-Panel (<=1024px) volle Zeilenbreite statt Slope-Pille —
   bleibt trotzdem farblich abgesetzt. */
.mb-header__nav nav.elementor-nav-menu--dropdown li.mb-nav-cta > a.elementor-item {
	clip-path: none;
	margin-inline-start: 0;
	padding: 14px var(--mb-space-3);
	border-bottom: 0;
}

/* ---------- Footer ---------- */

/* Footer-Spalten: Elementor-Zwischenebene neutral durchreichen */
.mb-footer__main > .e-con-inner {
	display: block;
	width: 100%;
}

/* HTML-Widgets in mb-Containern: Widget-Wrapper nicht einengen */
.mb-footer .elementor-widget-html .elementor-widget-container,
.mb-header .elementor-widget-html .elementor-widget-container {
	width: 100%;
}

/* ---------- Hero ---------- */

/* Hero-BG + Stamp sind HTML-Widgets mit absolut positioniertem Inhalt.
   Elementor-Widget-Wrapper sind position:relative und fangen inset:0 ab —
   Wrapper um diese Deko-Widgets static stellen, damit sich absolute
   Positionierung auf .mb-hero bezieht. */
.mb-hero .elementor-widget:has(> .elementor-widget-container > .mb-hero__bg),
.mb-hero .elementor-widget:has(> .elementor-widget-container > .mb-hero__stamp),
.mb-hero .elementor-widget:has(> .mb-hero__bg),
.mb-hero .elementor-widget:has(> .mb-hero__stamp) {
	position: static;
	width: auto;
}

/* Hero-Text auf heller, weißer Schräg-Fläche: Kit-CSS setzt eigene Farben —
   mit Kit-Scope-Klasse auf Ink übersteuern. Der hervorgehobene em-Teil der
   Headline bleibt rot (siehe pages.css). */
body [class*="elementor-kit-"] .mb-hero h1,
.mb-hero h1.elementor-heading-title,
.mb-hero .elementor-widget-theme-post-title h1 {
	color: var(--mb-ink-900);
}
body [class*="elementor-kit-"] .mb-hero h1 em,
.mb-hero h1.elementor-heading-title em {
	color: var(--mb-red);
}
.mb-hero .elementor-widget-text-editor,
.mb-hero p {
	color: var(--mb-ink-700);
}

/* ---------- Allgemein ---------- */

/* mb-Sektionen in Elementor-Containern: volle Breite für e-con-inner */
.mb-usp-strip > .e-con-inner,
.mb-trust > .e-con-inner,
.mb-reviews > .e-con-inner,
.mb-b2b > .e-con-inner {
	width: 100%;
}

/* Kategorie-Hero (Shop-Listing): gleiches Kit-Spezifitäts-Problem wie mb-hero.
   Hero ist jetzt hell (Token-Paper + Motiv), daher Archive-Title (h1) und
   Sub-Text auf dunkles Ink zwingen — invertiert zum früheren Weiß-Zwang. */
body [class*="elementor-kit-"] .mb-cat-hero h1,
.mb-cat-hero h1.elementor-heading-title,
.mb-cat-hero .elementor-widget-theme-archive-title h1 {
	color: var(--mb-ink-900);
}
.mb-cat-hero .elementor-widget-text-editor,
.mb-cat-hero .elementor-widget-woocommerce-archive-description,
.mb-cat-hero p {
	color: var(--mb-ink-700);
}

/* Seitenkopf der Unterseiten (.mb-page-hero, 2.14.0): Kit-Globals für h1
   (Schrift, Farbe, Größe) laden nach dem Theme-CSS und würden gewinnen —
   mit Kit-Scope-Klasse auf die Theme-Typografie zwingen. */
body [class*="elementor-kit-"] .mb-page-hero h1,
body [class*="elementor-kit-"] .mb-page-hero h1.elementor-heading-title {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: clamp(2rem, 2.9vw, 3.2rem);
	line-height: 1.06;
	color: var(--mb-ink-900);
}
body [class*="elementor-kit-"] .mb-page-hero .mb-seitenpfad a,
body [class*="elementor-kit-"] .mb-page-hero .mb-crumb a {
	color: var(--mb-ink-700);
}

/* Listing-Toolbar: WC-Standard-Markup (result-count + ordering) auf
   mb-toolbar-Optik mappen — es gibt keinen gemeinsamen Wrapper, daher
   Floats wie WC-Default plus Mono-Typo; das Produkt-Grid cleart. */
.mb-listing .woocommerce-result-count,
.mb-listing .woocommerce-ordering,
.mb-listing .woocommerce-ordering select {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mb-ink-600);
}
.mb-listing .woocommerce-result-count {
	float: left;
	margin: 0 0 var(--mb-space-3);
	padding-top: 6px;
}
.mb-listing .woocommerce-ordering {
	float: right;
	margin: 0 0 var(--mb-space-3);
}
.mb-listing .woocommerce-ordering select {
	border: var(--mb-border-ink);
	background: transparent;
	padding: 4px 8px;
	color: var(--mb-ink-900);
	cursor: pointer;
}
.mb-listing ul.products {
	clear: both;
	border-top: var(--mb-border-ink);
	padding-top: var(--mb-space-4);
}

/* ---------- Sortier-Dropdown: eigenes Custom-Select statt nativem <select>
   (assets/js/mb-select.js) — gleiche Mono/Uppercase-Optik wie das ersetzte
   native Element, nur als Button+Listbox statt Browser-Chrome. Das native
   <select> bleibt im DOM (visuell versteckt), Formular bleibt ohne JS
   unveraendert nutzbar. */
.mb-listing .woocommerce-ordering .mb-select {
	position: relative;
	display: inline-block;
	min-width: 240px;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mb-select__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.mb-listing .woocommerce-ordering .mb-select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-2);
	width: 100%;
	border: var(--mb-border-ink);
	background: transparent;
	padding: 4px 8px;
	color: var(--mb-ink-900);
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	text-align: left;
	cursor: pointer;
}
.mb-listing .woocommerce-ordering .mb-select__button::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-listing .woocommerce-ordering .mb-select__button[aria-expanded="true"]::after {
	transform: rotate(225deg);
	margin-top: 3px;
}
.mb-listing .woocommerce-ordering .mb-select__button:focus-visible {
	outline: 2px solid var(--mb-red);
	outline-offset: 1px;
}
.mb-listing .woocommerce-ordering .mb-select__listbox {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: var(--mb-card);
	border: var(--mb-border-thick);
	box-shadow: var(--mb-shadow-press);
	text-transform: none;
	letter-spacing: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--mb-dur-fast) var(--mb-ease-cut),
	            transform var(--mb-dur-fast) var(--mb-ease-cut),
	            visibility 0s linear var(--mb-dur-fast);
}
.mb-listing .woocommerce-ordering .mb-select__listbox.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity var(--mb-dur-fast) var(--mb-ease-cut),
	            transform var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-listing .woocommerce-ordering .mb-select__option {
	padding: var(--mb-space-2) var(--mb-space-3);
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-small);
	color: var(--mb-ink-800);
	cursor: pointer;
	white-space: nowrap;
}
.mb-listing .woocommerce-ordering .mb-select__option.is-active {
	background: var(--mb-red-tint);
	color: var(--mb-ink-900);
}
.mb-listing .woocommerce-ordering .mb-select__option.is-selected {
	font-weight: var(--mb-weight-strong);
}

/* CTA-Links in Text-Editor-Widgets (z. B. [mb_konfig_cta] im Konfig-Block):
   Kit-Link-Farbe (rot) gewinnt sonst gegen .mb-cta-Weiß — Text wäre rot auf rot. */
body [class*="elementor-kit-"] a.mb-cta,
.elementor-widget-text-editor a.mb-cta {
	color: #fff;
}
body [class*="elementor-kit-"] a.mb-cta--ghost,
.elementor-widget-text-editor a.mb-cta--ghost {
	color: var(--mb-ink-900);
}

/* ===================================================================== *
 * REVIEW-FIXES 2026-06-10 — Mockup-Abgleich
 * ===================================================================== */

/* --- Sticky-Header: Elementor-Theme-Builder-Wrapper ist exakt header-
   hoch, position:sticky am inneren Container greift deshalb nie. Sticky
   gehört auf den Wrapper; .mb-header wird static (der kompakte
   Scroll-Zustand aus main.js wirkt weiter auf .mb-header, siehe
   .mb-header.is-scrolled in components.css — kein Auto-Hide mehr). --- */
header.elementor-location-header,
div[data-elementor-type="header"] {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Der kompakte Zustand (.mb-header.is-scrolled, 56 statt 72px) darf die
	   Dokumenthöhe nicht ändern: Sonst verschiebt Scroll-Anchoring die
	   Position um die Differenz, die Schwelle wird wieder unterschritten
	   und der Header „hüpft" dauerhaft. Ausgleich über einen Außenabstand
	   unter dem Wrapper (siehe unten) statt einer festen Wrapper-Höhe: Ein
	   durchsichtiger Streifen im fixierten Bereich blitzte beim Scrollen
	   als helle Linie unter dem Header auf (Thorsten, 30.09.2026).
	   Gleiche Dauer und Kurve wie die Höhe von .mb-header, damit die
	   Summe während des Übergangs konstant bleibt. */
	overflow-anchor: none;
	transition: margin-bottom var(--mb-dur-base) var(--mb-ease-cut);
}
header.elementor-location-header:has(.mb-header.is-scrolled),
div[data-elementor-type="header"]:has(.mb-header.is-scrolled) {
	margin-bottom: 16px;
}
/* Admin-Leiste nur bei eingeloggten Redakteuren/Admins berücksichtigen —
   beide Selektoren müssen auf body.admin-bar geprüft werden, sonst
   bekommt der Header auch bei Anonymen dauerhaft 32px Abstand. */
body.admin-bar header.elementor-location-header,
body.admin-bar div[data-elementor-type="header"] {
	top: 32px;
}
@media (max-width: 782px) {
	/* WP-Adminleiste ist unterhalb von 783px nur noch 46px hoch. */
	body.admin-bar header.elementor-location-header,
	body.admin-bar div[data-elementor-type="header"] {
		top: 46px;
	}
}
.elementor-location-header .mb-header,
div[data-elementor-type="header"] .mb-header {
	position: static;
}

/* --- Button-Widgets: _css_classes landet am Widget-WRAPPER, nicht am
   <a>. Wrapper neutralisieren, mb-cta-Optik aufs innere a.elementor-button
   mappen. Width:auto verhindert 100%-Stapelung in Flex-Rows. --- */
.elementor-widget.mb-cta,
.elementor-widget.mb-cta--ghost,
.elementor-widget.mb-cta--ink,
.elementor-widget.mb-link {
	width: auto;
	background: transparent !important;
	padding: 0;
	border: 0;
	clip-path: none;
	transform: none;
}
.elementor-widget.mb-cta::after,
.elementor-widget.mb-link::after {
	content: none;
}
.elementor-widget.mb-cta .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-2);
	padding: var(--mb-space-3) var(--mb-space-5);
	background: var(--mb-red);
	color: #fff;
	font-family: var(--mb-font-body);
	font-weight: var(--mb-weight-strong);
	font-size: var(--mb-fs-body);
	letter-spacing: 0.01em;
	border: 0;
	border-radius: 0;
	text-decoration: none;
	clip-path: var(--mb-slope-md);
	transition: background var(--mb-dur-fast) var(--mb-ease-cut),
		transform var(--mb-dur-fast) var(--mb-ease-cut);
}
.elementor-widget.mb-cta .elementor-button .elementor-button-text::after {
	content: "››";
	font-family: var(--mb-font-mono);
	margin-left: var(--mb-space-2);
	display: inline-block;
	transition: transform var(--mb-dur-base) var(--mb-ease-cut);
}
.elementor-widget.mb-cta .elementor-button:hover {
	background: var(--mb-red-hover);
	color: #fff;
	transform: translate(-2px, -2px);
}
.elementor-widget.mb-cta .elementor-button:hover .elementor-button-text::after {
	transform: translateX(4px);
}
.elementor-widget.mb-cta--ink .elementor-button {
	background: var(--mb-ink-900);
}
.elementor-widget.mb-cta--ink .elementor-button:hover {
	background: var(--mb-ink-800);
}
.elementor-widget.mb-cta--ghost .elementor-button {
	/* Dezente dunkle Hinterlegung + Blur, damit der Ghost-Button auch auf
	   hellen Stellen des Hero-Bilds lesbar bleibt (Meeting 27.05.). */
	background: rgba(2, 10, 10, 0.45);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	color: #fff;
	border: 2px solid #fff;
	clip-path: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	padding: calc(var(--mb-space-3) - 2px) calc(var(--mb-space-5) - 2px);
}
.elementor-widget.mb-cta--ghost .elementor-button:hover {
	background: #fff;
	color: var(--mb-ink-900);
	text-shadow: none;
	transform: translate(-2px, -2px);
}
/* mb-link als Button-Widget: unauffälliger Unterstrich-Link */
.elementor-widget.mb-link .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-1);
	background: transparent;
	border: 0;
	border-radius: 0;
	border-bottom: 2px solid currentColor;
	padding: 0 0 2px;
	color: inherit;
	font-weight: var(--mb-weight-medium);
}
.elementor-widget.mb-link .elementor-button:hover {
	background: transparent;
	color: var(--mb-red);
}

/* --- Konfig-Teaser: Mockup-Grid liegt auf dem Container, Elementor
   schiebt .e-con-inner dazwischen (Lesson 3) — Grid auf die Inner-Ebene
   mappen, Media-HTML-Widget füllt seine Zelle. --- */
.mb-konfig-teaser__grid > .e-con-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-6);
	align-items: stretch;
	width: 100%;
}
@media (min-width: 960px) {
	.mb-konfig-teaser__grid > .e-con-inner {
		grid-template-columns: 6fr 5fr;
		gap: var(--mb-space-8);
	}
}
.mb-konfig-teaser__grid .elementor-widget-html,
.mb-konfig-teaser__grid .elementor-widget-html .elementor-widget-container,
.mb-konfig-teaser__grid .mb-konfig-teaser__media {
	height: 100%;
	width: 100%;
}

/* Doppel-Grid-Falle: pages.css macht .mb-konfig-teaser__grid selbst zum
   Grid — als Elementor-Container ist sein einziges Kind aber .e-con-inner
   (das oben das echte Grid bekommt). Äußeres Grid hier neutralisieren. */
.e-con.mb-konfig-teaser__grid {
	display: block;
}

/* ===================================================================== *
 * LAYOUT-GRIDS AUF .e-con-inner MAPPEN (Lesson 15 generalisiert)
 * Die Mockup-Grids (.mb-listing__layout, .mb-pdp__layout, …) liegen auf
 * Elementor-BOXED-Containern, deren einziges Kind .e-con-inner ist —
 * Container-Grid + Flex-Settings kollabieren die Spalten. Container auf
 * block, Grid deterministisch auf die Inner-Ebene, Spalten-Kinder auf
 * volle Zellenbreite (schlägt die unzuverlässigen width-Settings).
 * ===================================================================== */

.e-con.mb-listing__layout,
.e-con.mb-pdp__layout,
.e-con.mb-pdp__tabs-row {
	display: block;
}
.e-con.mb-listing__layout > .e-con-inner,
.e-con.mb-pdp__layout > .e-con-inner,
.e-con.mb-pdp__tabs-row > .e-con-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-5);
	width: 100%;
	max-width: none;
}
@media (min-width: 960px) {
	.e-con.mb-listing__layout > .e-con-inner {
		grid-template-columns: 260px 1fr;
		gap: var(--mb-space-6);
	}
	.e-con.mb-pdp__layout > .e-con-inner {
		grid-template-columns: 7fr 5fr;
		gap: var(--mb-space-7);
		align-items: start;
	}
	.e-con.mb-pdp__tabs-row > .e-con-inner {
		grid-template-columns: 5fr 7fr;
		gap: var(--mb-space-7);
		align-items: start;
	}
}
/* Spalten-Kinder: volle Zellenbreite statt kollabierter width-Settings */
.e-con.mb-listing__layout > .e-con-inner > .e-con,
.e-con.mb-pdp__layout > .e-con-inner > .e-con,
.e-con.mb-pdp__tabs-row > .e-con-inner > .e-con {
	width: 100%;
	min-width: 0;
	max-width: none;
}
.mb-listing ul.products {
	width: 100%;
}

/* Sehr schmale Geräte (unter 375px, z. B. 320px): Logo und Abstände der
   einzeiligen Kopfzeile verkleinern, damit Burger und Icons nicht über den
   rechten Rand ragen (Querscroll). */
@media (max-width: 374px) {
	.mb-header .mb-header__logo img {
		width: 112px;
	}
	.mb-header__inner > .e-con-inner {
		gap: var(--mb-space-1);
	}
}