/*
 * mabetec-shop Design-Komponenten — Industrial-Editorial mit Slope-Signatur
 * Enthält: Container, Buttons, Pills, Stamps, Header, Footer, Produkt-Karten,
 *          Filter-Sidebar, Farb-Optionen, Datentabelle.
 * Quelle: Mockup Stand 2026-06
 * Hinweis: .mb-mocknav (Mockup-only-Navigation) ist hier nicht enthalten.
 */

/* ============ UMBRUCH-SCHUTZ / WORTTRENNUNG ============
   Überschriften trennen nie automatisch (Thorsten, 30.09.2026: „Anwendungsbei-
   spiele" statt „Anwendungs-beispiele"), sondern nur an den weichen
   Trennstellen (­) der Wortliste in inc/worttrennung.php — Fugen wie
   „Anwendungs|beispiele". overflow-wrap fängt ein unbekanntes, überlanges Wort
   nur im Notfall auf, damit es auf schmalen Viewports keinen Querscroll gibt
   (Seite 1798 bei 375px belegt). „AluTeck" steht in einem Span, der nie
   umbricht und nie getrennt wird — im Fließtext genauso wie in Überschriften. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-icon-box-title {
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: break-word;
}
.mb-nt {
	white-space: nowrap;
	hyphens: none;
	-webkit-hyphens: none;
}

/* ============ CONTAINER ============ */
.mb-container {
	max-width: var(--mb-container);
	margin: 0 auto;
	padding: 0 var(--mb-gutter-mobile);
}
.mb-container--wide {
	max-width: var(--mb-container-wide);
}
@media (min-width: 960px) {
	.mb-container {
		padding: 0 var(--mb-gutter-desk);
	}
}

/* ============ BUTTONS ============ */
.mb-cta {
	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;
	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);
	position: relative;
}
.mb-cta::after {
	content: "››";
	font-family: var(--mb-font-mono);
	margin-left: var(--mb-space-1);
	transition: transform var(--mb-dur-base) var(--mb-ease-cut);
}
.mb-cta:hover {
	background: var(--mb-red-hover);
	color: #fff;
	transform: translate(-2px, -2px);
}
.mb-cta:hover::after {
	transform: translateX(4px);
}

.mb-cta--ink {
	background: var(--mb-ink-900);
}
.mb-cta--ink:hover {
	background: var(--mb-ink-800);
}

.mb-cta--ghost {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
	clip-path: none;
	padding: calc(var(--mb-space-3) - 2px) calc(var(--mb-space-5) - 2px);
}
.mb-cta--ghost:hover {
	background: #fff;
	color: var(--mb-ink-900);
	transform: translate(-2px, -2px);
}

.mb-link {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-1);
	color: var(--mb-ink-900);
	font-weight: var(--mb-weight-medium);
	border-bottom: 2px solid var(--mb-ink-900);
	padding-bottom: 2px;
	transition: color var(--mb-dur-fast) var(--mb-ease-cut),
		border-color var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-link:hover {
	color: var(--mb-red);
	border-color: var(--mb-red);
}
.mb-link::after {
	content: "››";
	font-family: var(--mb-font-mono);
	margin-left: var(--mb-space-1);
}

/* ============ FEATURE PILLS (Janis-Slide-Stil) ============ */
.mb-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-2);
	background: var(--mb-card);
	border: var(--mb-border);
	padding: var(--mb-space-1) var(--mb-space-3) var(--mb-space-1) var(--mb-space-1);
	border-radius: var(--mb-radius-pill);
	font-weight: var(--mb-weight-medium);
	color: var(--mb-ink-900);
	font-size: var(--mb-fs-small);
}
.mb-pill__icon {
	width: 32px;
	height: 32px;
	background: var(--mb-red);
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}
.mb-pill--success .mb-pill__icon {
	background: var(--mb-success);
}

/* Phosphor-Icons (Icon-Font) und lokale SVG-Icons parallel unterstützen */
.mb-pill .ph-fill,
.mb-pill .mb-icon {
	/* Größe und Ausrichtung bereits durch .mb-pill__icon geregelt */
}

/* ============ TRUST STAMP ============ */
.mb-stamp {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: var(--mb-red);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: 1rem;
	line-height: 1.1;
	padding: var(--mb-space-3);
	transform: rotate(-8deg);
	box-shadow: var(--mb-shadow-press);
	letter-spacing: 0.02em;
}

/* ============ MONO META ============ */
.mb-meta {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.02em;
	color: var(--mb-ink-600);
	text-transform: uppercase;
}

/* ============ SECTION DIVIDER (Slope) ============ */
.mb-divider {
	height: 6px;
	background: var(--mb-red);
	clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
}

/* ============ HEADER ============ */
/* Der Header ist fixiert (sticky) und liegt beim Springen zu Ankern
   (Menü-Sprungmarken, FAQ, WP-Adminleiste) über dem Seitenanfang.
   scroll-padding-top schiebt jedes Sprungziel um die Header-Höhe plus
   Luft nach unten — wirkt global, ohne scroll-margin-top an jedem
   einzelnen Anker-Element setzen zu muessen. Wert an der groesseren
   (nicht-kompakten) Header-Hoehe von 72px ausgerichtet. */
html {
	scroll-padding-top: calc(72px + var(--mb-space-3));
}
html:has(body.admin-bar) {
	scroll-padding-top: calc(72px + var(--mb-space-3) + 32px);
}
@media (max-width: 782px) {
	html:has(body.admin-bar) {
		scroll-padding-top: calc(72px + var(--mb-space-3) + 46px);
	}
}
.mb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--mb-card);
	border-bottom: var(--mb-border-thick);
	height: 72px;
	display: flex;
	/* Header-Container ist ein Elementor-Column-Flex (Default). Inhalt
	   sowohl vertikal als auch horizontal zentrieren (achsenunabhaengig),
	   sonst klebt der Logo-Block oben. Elementors Default-Container-
	   Padding (10px) neutralisieren, damit der Abstand oben/unten
	   gleich ausfaellt. */
	align-items: center;
	justify-content: center;
	padding-top: 0;
	padding-bottom: 0;
	box-shadow: var(--mb-shadow-none);
	transition: height var(--mb-dur-base) var(--mb-ease-cut),
		box-shadow var(--mb-dur-base) var(--mb-ease-cut);
}
/* Kompakter Zustand ab main.js-Scroll-Schwelle (40px): etwas weniger
   Höhe, dezenter Schatten als Abgrenzung zum Inhalt. Der Header bleibt
   dabei immer sichtbar — kein Verstecken mehr (Kundenwunsch). */
.mb-header.is-scrolled {
	height: 56px;
	box-shadow: var(--mb-shadow-sticky);
}
.mb-header__inner {
	display: flex;
	align-items: center;
	gap: var(--mb-space-5);
	width: 100%;
}
.mb-header__logo img {
	height: 44px;
	width: auto;
}
/* Der Widget-Wrapper bleibt immer sichtbar — ob die waagerechte Liste oder
   der Burger erscheint, entscheidet Elementor an seinem Tablet-Breakpoint
   (<= 1024px). Ein eigener display:none-Breakpoint hier hat den Burger auf
   Mobil mitversteckt (AP-7). */
.mb-header__nav {
	display: flex;
	gap: var(--mb-space-5);
	margin-left: var(--mb-space-5);
}
.mb-header__nav a {
	color: var(--mb-ink-900);
	font-weight: var(--mb-weight-medium);
	font-size: var(--mb-fs-body);
	letter-spacing: -0.005em;
	position: relative;
	padding-bottom: 4px;
}
.mb-header__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--mb-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mb-dur-base) var(--mb-ease-cut);
}
.mb-header__nav a:hover::after,
.mb-header__nav a.is-active::after,
.mb-header__nav a.elementor-item-active::after,
.mb-header__nav .current-menu-item > a::after,
.mb-header__nav .current-menu-ancestor > a::after,
.mb-header__nav .current-product_cat-ancestor > a::after {
	transform: scaleX(1);
}
.mb-header__actions {
	display: flex;
	align-items: center;
	gap: var(--mb-space-3);
	margin-left: auto;
}
.mb-header__icon-btn {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mb-ink-900);
	font-size: 22px;
	background: transparent;
	border: 0;
	position: relative;
	cursor: pointer;
}
/* Icon-Farbe direkt auf der Maske setzen (entkoppelt von der Kit-Link-
   Farbe, die nackte <a> rot faerbt -> .mb-icon erbt sonst Rot via
   currentColor). Default schwarz, Hover rot. */
.mb-header__icon-btn .mb-icon {
	background-color: var(--mb-ink-900);
	transition: background-color var(--mb-dur-base) var(--mb-ease-cut);
}
.mb-header__icon-btn:hover .mb-icon {
	background-color: var(--mb-red);
}
/* ---------- Kopfzeile auf schmalen Viewports (AP-7) ----------
   Unterhalb von Elementors Tablet-Breakpoint zeigt das nav-menu-Widget
   den Burger. Damit Logo, Icons und Burger in die 72px hohe Kopfzeile
   passen, wird die Elementor-Innenzeile hier auf eine Zeile ohne Umbruch
   gezwungen und die Elemente werden verkleinert. Ohne diesen Block
   brach der Kopf schon vor AP-7 in mehrere Zeilen um und lief aus seiner
   festen Höhe heraus. */
@media (max-width: 1024px) {
	.mb-header__inner {
		gap: var(--mb-space-2);
	}
	.mb-header__actions {
		gap: 0;
		margin-left: 0;
	}
	.mb-header__icon-btn {
		width: 34px;
		height: 34px;
		font-size: 20px;
	}
}

.mb-header__cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	background: var(--mb-red);
	color: #fff;
	border-radius: var(--mb-radius-pill);
	font-family: var(--mb-font-mono);
	font-size: 10px;
	font-weight: var(--mb-weight-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}
.mb-toggle {
	display: none;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	text-transform: uppercase;
	letter-spacing: var(--mb-tracking-cap);
	gap: 0;
	border: var(--mb-border-ink);
}
@media (min-width: 1024px) {
	.mb-toggle {
		display: inline-flex;
	}
}
.mb-toggle button {
	background: transparent;
	border: 0;
	padding: 6px 14px;
	color: var(--mb-ink-700);
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-toggle button.is-active {
	color: var(--mb-ink-900);
	border-bottom-color: var(--mb-red);
	background: var(--mb-red-tint);
}

/* ============ FOOTER ============ */
/* Footer hell, in CI (#3094). Top-Zone Produktbild + roter CTA-Block, darunter
   4-Spalten (Brand/Kontakt/Adresse/Links), Ansprechpartner-Leiste, Rechtstexte. */
.mb-footer {
	background: var(--mb-neutral-100);
	color: var(--mb-ink-900);
	margin-top: var(--mb-space-9);
}

/* ---------- Top-Zone: Produktbild | roter CTA-Block ---------- */
.mb-footer__cta {
	display: grid;
	/* minmax(0, …) statt 1fr: sonst gibt der Mindestinhalt die Spaltenbreite
	   vor und der Block ragt bei 320px Breite über den Rand. */
	grid-template-columns: minmax(0, 1fr);
}
.mb-footer__visual {
	position: relative;
	min-height: 240px;
	/* Seit 01.10.2026 ein Projektbild statt des freigestellten Profilfotos
	   (Termin mit Janis 30.09., Bildvorschlag Thorsten: B01 Dachterrasse,
	   Anhang 16574). cover: Das Bild füllt die ganze linke Fläche und wird
	   erst von der Schräge des roten Blocks abgeschnitten. */
	background-image: url(/wp-content/uploads/2026/09/B01-aluteck-dachterrasse-dunkelgrau.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--mb-neutral-100);
}
@media (max-width: 879px) {
	/* Mobil/Tablet: Fläche im 3:2-Format des Projektbilds, vollständig
	   sichtbar über dem roten Block. */
	.mb-footer__visual {
		min-height: 0;
		aspect-ratio: 3 / 2;
		background-size: cover;
		background-position: center;
	}
}
@media (min-width: 880px) {
	/* Desktop: Bild füllt die ganze CTA-Zone, der rote Block liegt rechts und
	   schneidet mit einer 22°-Schräge (skewX, höhen-konstant wie alle anderen
	   Schrägen) in das Bild. overflow:hidden klippt den off-screen-Überhang des
	   roten Keils (::before right:-100vw) — sonst horizontales Scrollen. */
	.mb-footer__cta { display: block; position: relative; overflow: hidden; }
	.mb-footer__visual {
		position: absolute;
		/* Nur so breit wie der sichtbare Bereich bis unter die Schräge
		   (der rote Block nimmt die rechten 52 % ein, seine Schräge reicht
		   unten noch weiter nach links): So liegt die Bildmitte im sichtbaren
		   Teil statt nur der linke Rand (Thorsten, 01.10.2026). */
		inset: 0 40% 0 0;
		min-height: 0;
		background-position: center 60%;
	}
}
/* CI-Stempel statt rundem Vorlagen-Badge */
.mb-footer__stamp {
	position: absolute;
	left: var(--mb-space-5);
	/* oben links: dort ist das freigestellte Profilfoto leer, unten laufen
	   die Dielen aus dem Bild und würden verdeckt */
	top: var(--mb-space-5);
	background: var(--mb-card);
	border-left: 3px solid var(--mb-red);
	padding: var(--mb-space-2) var(--mb-space-4);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.02em;
	line-height: 1.45;
	color: var(--mb-ink-800);
	box-shadow: var(--mb-shadow-press);
}
.mb-footer__stamp strong {
	display: block;
	color: var(--mb-red);
	text-transform: uppercase;
}
@media (max-width: 879px) {
	.mb-footer__stamp {
		top: auto;
		left: auto;
		bottom: var(--mb-space-4);
		right: var(--mb-space-4);
	}
}
@media (max-width: 599px) {
	/* Auf schmalen Displays reicht die freie Ecke nicht für den Stempel */
	.mb-footer__stamp {
		display: none;
	}
}
.mb-footer__panel {
	position: relative;
	background: var(--mb-red);
	color: #fff;
	padding: var(--mb-space-7);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (min-width: 880px) {
	.mb-footer__panel {
		width: 52%;
		margin-left: auto;
		min-height: 360px;
		padding: var(--mb-space-8) var(--mb-space-8) var(--mb-space-8) var(--mb-space-7);
		background: transparent;   /* Rot kommt aus ::before mit Schräge */
	}
	/* Roter Block mit 22°-Schräge an der LINKEN Kante: skewX(-22°), höhen-konstant
	   wie Hero-Panel und Separator-Band. Die linke Diagonale schneidet ins Bild,
	   rechts läuft das Rot off-screen. */
	.mb-footer__panel::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: -100vw;
		background: var(--mb-red);
		transform: skewX(calc(-1 * var(--mb-slope-angle, 22deg)));
		transform-origin: top left;
		z-index: 0;
	}
	.mb-footer__panel > * { position: relative; z-index: 1; }
}
.mb-footer__panel h2 {
	color: #fff;
	font-size: var(--mb-fs-h3);
	margin: 0 0 var(--mb-space-3);
}
.mb-footer__panel p {
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 var(--mb-space-5);
	max-width: 44ch;
}
.mb-footer__panel .mb-cta {
	align-self: flex-start;
	background: #fff;
	color: var(--mb-ink-900);
	clip-path: none;
}
.mb-footer__panel .mb-cta:hover {
	background: var(--mb-ink-900);
	color: #fff;
}

/* ---------- Hauptzone: 4 Spalten auf Weiß ---------- */
.mb-footer__main {
	background: var(--mb-card);
	padding: var(--mb-space-7) 0;
}
.mb-footer__grid {
	display: grid;
	gap: var(--mb-space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.mb-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
	.mb-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.mb-footer__brand-logo {
	max-width: 250px;
	height: auto;
	display: block;
	margin-bottom: var(--mb-space-4);
}
.mb-footer__brand p {
	color: var(--mb-ink-700);
	font-size: var(--mb-fs-small);
	line-height: var(--mb-lh-body);
	max-width: 32ch;
	margin: 0;
}
.mb-footer__col h3 {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-strong);
	font-size: var(--mb-fs-h4);
	color: var(--mb-ink-900);
	margin: 0 0 var(--mb-space-4);
}
/* Kontakt/Adresse-Zeilen mit rotem Icon-Badge */
.mb-footer__item {
	display: flex;
	gap: var(--mb-space-3);
	align-items: flex-start;
	margin-bottom: var(--mb-space-4);
}
.mb-footer__item:last-child { margin-bottom: 0; }
.mb-footer__ico {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: var(--mb-red);
	color: #fff;
	border-radius: var(--mb-radius-input);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mb-footer__ico .mb-icon { width: 20px; height: 20px; }
.mb-footer__item b {
	display: block;
	color: var(--mb-red);
	font-size: var(--mb-fs-small);
	font-weight: var(--mb-weight-strong);
}
.mb-footer__item span,
.mb-footer__item a {
	color: var(--mb-ink-800);
	font-size: var(--mb-fs-body);
}
.mb-footer__item a:hover { color: var(--mb-red); }
.mb-footer__addr {
	margin: var(--mb-space-3) 0 0;
	color: var(--mb-ink-700);
	font-size: var(--mb-fs-body);
	line-height: var(--mb-lh-body);
}
/* Schnelle Links als getrennte Liste */
.mb-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mb-footer__links li { border-bottom: var(--mb-border); }
.mb-footer__links li:first-child { border-top: var(--mb-border); }
.mb-footer__links a {
	display: block;
	padding: var(--mb-space-3) 0;
	color: var(--mb-ink-800);
	font-size: var(--mb-fs-body);
	transition: color var(--mb-dur-fast) var(--mb-ease-cut),
		padding var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-footer__links a:hover {
	color: var(--mb-red);
	padding-left: var(--mb-space-2);
}

/* ---------- Untere Leiste: Direkte Ansprechpartner ---------- */
.mb-footer__partners {
	background: var(--mb-red-tint);
}
.mb-footer__partners-inner {
	display: grid;
	gap: var(--mb-space-4);
	grid-template-columns: 1fr;
	padding: var(--mb-space-5) 0;
}
@media (min-width: 960px) {
	.mb-footer__partners-inner {
		grid-template-columns: auto repeat(4, 1fr);
		align-items: center;
		gap: 0;
	}
}
.mb-footer__partners-head {
	display: flex;
	align-items: center;
	gap: var(--mb-space-3);
	color: var(--mb-red);
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-strong);
	padding-right: var(--mb-space-5);
}
.mb-footer__partner {
	font-size: var(--mb-fs-small);
}
@media (min-width: 960px) {
	.mb-footer__partner {
		padding-left: var(--mb-space-5);
		border-left: 1px solid rgba(255, 4, 52, 0.22);
	}
}
.mb-footer__partner b {
	display: block;
	color: var(--mb-red);
	font-weight: var(--mb-weight-strong);
}
.mb-footer__partner a { color: var(--mb-ink-700); }
.mb-footer__partner a:hover { color: var(--mb-red); }

/* ---------- Meta / Rechtstexte ---------- */
.mb-footer__legal {
	background: var(--mb-card);
	border-top: var(--mb-border);
}
.mb-footer__meta {
	padding: var(--mb-space-4) 0;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.04em;
	color: var(--mb-ink-600);
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-3);
}
.mb-footer__meta a { color: var(--mb-ink-700); }
.mb-footer__meta a:hover { color: var(--mb-red); }
.mb-footer__meta-spacer { flex: 1; }

/* ============ PRODUCT CARD ============ */
.mb-prod-card {
	background: var(--mb-card);
	border: var(--mb-border-ink);
	display: flex;
	flex-direction: column;
	transition: transform var(--mb-dur-fast) var(--mb-ease-cut),
		box-shadow var(--mb-dur-fast) var(--mb-ease-cut),
		border-width var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-prod-card:hover {
	transform: translate(-4px, -4px);
	box-shadow: var(--mb-shadow-press);
}
.mb-prod-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--mb-ink-900);
}
.mb-prod-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mb-prod-card__body {
	padding: var(--mb-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-2);
	flex: 1;
}
.mb-prod-card__title {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: var(--mb-fs-h4);
	color: var(--mb-ink-900);
	line-height: var(--mb-lh-tight);
}
.mb-prod-card__spec {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-ink-600);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.mb-prod-card__rule {
	height: 1px;
	background: var(--mb-rule);
	margin: var(--mb-space-1) 0;
}
.mb-prod-card__price {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-strong);
	font-size: var(--mb-fs-lead);
	color: var(--mb-ink-900);
}
.mb-prod-card__price small {
	display: block;
	font-family: var(--mb-font-mono);
	font-weight: var(--mb-weight-body);
	font-size: var(--mb-fs-meta);
	color: var(--mb-ink-600);
	letter-spacing: 0.02em;
	margin-top: 2px;
}
.mb-prod-card__lead {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-1);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.04em;
	color: var(--mb-success);
	text-transform: uppercase;
}
.mb-prod-card__lead::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--mb-success);
	border-radius: 50%;
	display: inline-block;
}
.mb-prod-card__cta {
	margin-top: auto;
}

/* ============ FILTER SIDEBAR ============ */
.mb-filter {
	border-right: var(--mb-border);
	padding-right: var(--mb-space-4);
}
.mb-filter__group {
	border-bottom: var(--mb-border);
	padding: var(--mb-space-4) 0;
}
.mb-filter__group:first-child {
	padding-top: 0;
}
.mb-filter__group h4 {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	font-weight: var(--mb-weight-medium);
	letter-spacing: var(--mb-tracking-cap);
	text-transform: uppercase;
	color: var(--mb-ink-600);
	margin: 0 0 var(--mb-space-3);
}
.mb-filter__group label {
	display: flex;
	align-items: center;
	gap: var(--mb-space-2);
	font-size: var(--mb-fs-small);
	margin-bottom: var(--mb-space-1);
	cursor: pointer;
	color: var(--mb-ink-700);
}
.mb-filter__group label:hover {
	color: var(--mb-ink-900);
}
.mb-filter__group input[type="checkbox"] {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--mb-red);
}
.mb-swatch-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-1);
}
.mb-swatch {
	width: 28px;
	height: 28px;
	border: var(--mb-border-ink);
	cursor: pointer;
	display: block;
}
.mb-swatch.is-active {
	outline: 2px solid var(--mb-red);
	outline-offset: 2px;
}

.mb-filter__count {
	margin-left: auto;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-ink-500);
	letter-spacing: 0.04em;
}
.mb-filter__group label {
	justify-content: space-between;
}
.mb-filter__more {
	display: inline-block;
	margin-top: var(--mb-space-2);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-red);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mb-filter__reset {
	margin-top: var(--mb-space-4);
	background: transparent;
	border: var(--mb-border-ink);
	padding: var(--mb-space-2) var(--mb-space-3);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--mb-ink-900);
	width: 100%;
	cursor: pointer;
	transition: background var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-filter__reset:hover {
	background: var(--mb-ink-900);
	color: #fff;
}

.mb-toolbar--bottom {
	border-top: var(--mb-border-ink);
	border-bottom: 0;
	justify-content: center;
	margin-top: var(--mb-space-5);
	margin-bottom: 0;
}

/* ============ COLOR OPTIONS (Variable Product, z.B. Wand-Einlaufblech) ============ */
.mb-color-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2);
}
.mb-color-opt {
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-2);
	background: var(--mb-card);
	border: var(--mb-border-ink);
	padding: 6px var(--mb-space-3) 6px 6px;
	cursor: pointer;
	font-family: var(--mb-font-body);
	color: var(--mb-ink-900);
	transition: transform var(--mb-dur-fast) var(--mb-ease-cut),
		box-shadow var(--mb-dur-fast) var(--mb-ease-cut),
		background var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-color-opt::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	background: var(--c, var(--mb-ink-500));
	border: 1px solid rgba(0, 0, 0, 0.15);
	flex-shrink: 0;
}
.mb-color-opt__name {
	font-size: var(--mb-fs-small);
	font-weight: var(--mb-weight-medium);
}
.mb-color-opt__name small {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-red);
	margin-left: 4px;
	letter-spacing: 0.02em;
}
.mb-color-opt:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--mb-shadow-press);
}
.mb-color-opt.is-active {
	background: var(--mb-ink-900);
	color: #fff;
	border-color: var(--mb-ink-900);
}
.mb-color-opt.is-active .mb-color-opt__name small {
	color: var(--mb-sand);
}

/* ============ TABLE — Datenblatt ============ */
.mb-data-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-body);
}
.mb-data-table th,
.mb-data-table td {
	border-bottom: var(--mb-border);
	padding: var(--mb-space-2) 0;
	text-align: left;
	vertical-align: top;
}
.mb-data-table th {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	font-weight: var(--mb-weight-medium);
	letter-spacing: var(--mb-tracking-cap);
	text-transform: uppercase;
	color: var(--mb-ink-600);
	width: 38%;
}

/* ============ KAUFPANEL ZUBEHÖR (PDP, Add-to-Cart-Widget .mb-pdp__cart) ============
 * Elementor Pro setzt form.cart auf flex/nowrap. Für Gäste blendet B2B Market
 * zusätzlich die Gesamtsumme (.bm-price-totals) in dieselbe Zeile ein — bei
 * 375 px ragte der Button dadurch 40 px über den Rand (Querscroll).
 * Mobil Umbruch erlauben: Die Gesamtsumme steht in eigener Zeile über Menge
 * und Button. Ab Tablet bleibt die Elementor-Regel (eine Zeile) unverändert —
 * dort passt alles, ein globales wrap hätte den Button auf Desktop in eine
 * zweite Zeile geschoben. Spezifität (0,6,3) liegt über der Elementor-Regel (0,6,2).
 */
@media (max-width: 767px) {
	div.elementor-widget-woocommerce-product-add-to-cart.mb-pdp__cart div.elementor-add-to-cart form.cart:not(.grouped_form):not(.variations_form),
	div.elementor-widget-woocommerce-product-add-to-cart.mb-pdp__cart div.elementor-add-to-cart form.cart.variations_form .woocommerce-variation-add-to-cart {
		flex-wrap: wrap;
	}

	div.elementor-widget-woocommerce-product-add-to-cart.mb-pdp__cart div.elementor-add-to-cart form.cart .bm-price-totals {
		flex: 0 0 100%;
	}
}

/* Tablet und kleiner Desktop (768–1199 px): Die Kaufspalte ist hier so schmal,
 * dass Gesamtsumme, Menge und Button für Gäste nicht in eine Zeile passen — bei
 * 1024 px ragte der Button 43 px über die Spalte hinaus. Gleiche Lösung wie
 * mobil: Gesamtsumme in eigener Zeile, darunter Menge und Button.
 * Ab 1200 px unverändert (eine Zeile).
 */
@media (min-width: 768px) and (max-width: 1199px) {
	div.elementor-widget-woocommerce-product-add-to-cart.mb-pdp__cart div.elementor-add-to-cart form.cart:not(.grouped_form):not(.variations_form),
	div.elementor-widget-woocommerce-product-add-to-cart.mb-pdp__cart div.elementor-add-to-cart form.cart.variations_form .woocommerce-variation-add-to-cart {
		flex-wrap: wrap;
	}

	div.elementor-widget-woocommerce-product-add-to-cart.mb-pdp__cart div.elementor-add-to-cart form.cart .bm-price-totals {
		flex: 0 0 100%;
	}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============ LOKALE PHOSPHOR-SVG-ICONS (statt CDN-Icon-Font) ============ */
/*
 * Verwendung: <span class="mb-icon mb-icon--drop"></span>
 * Die mb-pill__icon-Umgebung bleibt wie gehabt — .mb-icon kann direkt
 * darin eingesetzt werden als Ersatz für <i class="ph-fill ph-...">
 */
.mb-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	vertical-align: -0.125em;
}

.mb-icon--drop            { -webkit-mask-image: url('../icons/drop-fill.svg');            mask-image: url('../icons/drop-fill.svg'); }
.mb-icon--shield-check    { -webkit-mask-image: url('../icons/shield-check-fill.svg');    mask-image: url('../icons/shield-check-fill.svg'); }
.mb-icon--broom           { -webkit-mask-image: url('../icons/broom-fill.svg');           mask-image: url('../icons/broom-fill.svg'); }
.mb-icon--infinity        { -webkit-mask-image: url('../icons/infinity-fill.svg');        mask-image: url('../icons/infinity-fill.svg'); }
.mb-icon--hammer          { -webkit-mask-image: url('../icons/hammer-fill.svg');          mask-image: url('../icons/hammer-fill.svg'); }
.mb-icon--leaf            { -webkit-mask-image: url('../icons/leaf-fill.svg');            mask-image: url('../icons/leaf-fill.svg'); }
.mb-icon--magnifying-glass { -webkit-mask-image: url('../icons/magnifying-glass-fill.svg'); mask-image: url('../icons/magnifying-glass-fill.svg'); }
.mb-icon--user-circle     { -webkit-mask-image: url('../icons/user-circle-fill.svg');     mask-image: url('../icons/user-circle-fill.svg'); }
.mb-icon--shopping-bag    { -webkit-mask-image: url('../icons/shopping-bag-fill.svg');    mask-image: url('../icons/shopping-bag-fill.svg'); }
.mb-icon--truck           { -webkit-mask-image: url('../icons/truck-fill.svg');           mask-image: url('../icons/truck-fill.svg'); }
.mb-icon--package         { -webkit-mask-image: url('../icons/package-fill.svg');         mask-image: url('../icons/package-fill.svg'); }
.mb-icon--sparkle         { -webkit-mask-image: url('../icons/sparkle-fill.svg');         mask-image: url('../icons/sparkle-fill.svg'); }
.mb-icon--medal           { -webkit-mask-image: url('../icons/medal-fill.svg');           mask-image: url('../icons/medal-fill.svg'); }
.mb-icon--handshake       { -webkit-mask-image: url('../icons/handshake-fill.svg');       mask-image: url('../icons/handshake-fill.svg'); }
.mb-icon--phone           { -webkit-mask-image: url('../icons/phone-fill.svg');           mask-image: url('../icons/phone-fill.svg'); }
.mb-icon--envelope        { -webkit-mask-image: url('../icons/envelope-fill.svg');        mask-image: url('../icons/envelope-fill.svg'); }
.mb-icon--clock           { -webkit-mask-image: url('../icons/clock-fill.svg');           mask-image: url('../icons/clock-fill.svg'); }
.mb-icon--map-pin         { -webkit-mask-image: url('../icons/map-pin-fill.svg');         mask-image: url('../icons/map-pin-fill.svg'); }
.mb-icon--house-line      { -webkit-mask-image: url('../icons/house-line-fill.svg');      mask-image: url('../icons/house-line-fill.svg'); }
.mb-icon--buildings       { -webkit-mask-image: url('../icons/buildings-fill.svg');       mask-image: url('../icons/buildings-fill.svg'); }
.mb-icon--car             { -webkit-mask-image: url('../icons/car-fill.svg');             mask-image: url('../icons/car-fill.svg'); }
.mb-icon--armchair        { -webkit-mask-image: url('../icons/armchair-fill.svg');        mask-image: url('../icons/armchair-fill.svg'); }
.mb-icon--swimming-pool   { -webkit-mask-image: url('../icons/swimming-pool-fill.svg');   mask-image: url('../icons/swimming-pool-fill.svg'); }
.mb-icon--plant           { -webkit-mask-image: url('../icons/plant-fill.svg');           mask-image: url('../icons/plant-fill.svg'); }
/* Eigens gezeichnet (kein Phosphor-Original) — Treppen-Piktogramm fuer den
   Einsatzbereiche-Hotspot "Treppe" (Startseite, #3092-Nachtrag 25.09.2026). */
.mb-icon--stairs          { -webkit-mask-image: url('../icons/stairs-fill.svg');          mask-image: url('../icons/stairs-fill.svg'); }

/* ============ BUTTONS: KEINE UNTERSTREICHUNG — IN KEINEM ZUSTAND ============
   Kundenwunsch (Thorsten, 25.09.2026, erneut 30.09.2026): „Der Text in den
   Buttons wird bei Hover immer noch unterstrichen!" — Buttons dürfen nie eine
   Text-Unterstreichung zeigen, weder im Ruhezustand noch bei :hover, :focus,
   :focus-visible, :active oder :visited, auch nicht an Kind-Elementen (span
   im Elementor-Button, Badges, Labels).

   Warum eine zustandslose Regel mit !important: Das Elementor-Kit setzt
   `.elementor-kit-7 a:hover { text-decoration: underline }` (0,2,1) und
   schlug damit die frühere Zustandsliste (`.mb-cta:hover` = 0,2,0) — jeder
   neue Baustein brachte die Unterstreichung zurück. Diese eine Regel greift
   für alle Button-Typen unabhängig von Zustand, Baustein und Spezifität
   (auch Elementor-Widget-CSS pro Seite). Neue Knopf-Klassen brauchen keinen
   Eintrag, solange sie „btn", „button" oder „cta" im Klassennamen tragen
   oder ein <button> sind. Fließtext-Links bleiben unberührt.
   Der border-bottom von .mb-link ist Design, keine text-decoration.
   Geprüft durch `.migration/pruefung-button-hover.js` (docs/TESTPLAN.md). */
:root body :is(
	button, input[type="submit"], input[type="button"], input[type="reset"],
	[role="button"], .elementor-button, .wp-element-button, .button,
	.added_to_cart, a.remove, a[class*="btn"], a[class*="button"],
	a[class*="cta"], .mb-usecases__chips a,
	.mb-header__nav a, .wpcf7-submit
),
:root body :is(
	button, [role="button"], .elementor-button, .wp-element-button, .button,
	.added_to_cart, a.remove, a[class*="btn"], a[class*="button"],
	a[class*="cta"], .mb-usecases__chips a,
	.mb-header__nav a
) * {
	text-decoration: none !important;
}
.mb-cta:focus-visible,
.mb-cta--ink:focus-visible,
.mb-cta--ghost:focus-visible,
.elementor-button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.wpcf7-submit:focus-visible,
.nf-form-cont button:focus-visible,
.nf-form-cont input[type="submit"]:focus-visible {
	outline: 2px solid var(--mb-red);
	outline-offset: 2px;
	text-decoration: none;
}


/* ============ KI-KENNZEICHNUNG (Art. 50 KI-Verordnung) ============
   Text direkt am Bild, nie in der Bilddatei (inc/ki-kennzeichnung.php).
   - --zeile: Bildunterzeile unter dem Bild, Farbe --mb-ink-600. Der hellere
     Grauton --mb-ink-500 (#818181) erreicht auf Weiß nur 3,9 : 1; --mb-ink-600
     (#5D6374) ist der nächstdunklere Token (Messwerte siehe Bericht).
   - --bild: schmale Zeile am unteren Bildrand innerhalb der Bildfläche
     (Kopfbilder mit Schrägschnitt, Hintergrundbilder, Schieber, Karten); auf
     dunklem Grund (rgba 2,10,10 · 0,72) mit weißer Schrift. Absolut
     positioniert: verschiebt kein Layout.
   Das Elternelement wird nur dann positioniert, wenn keine Regel es anders
   setzt (:where = Spezifität 0). */
.mb-ki-hinweis {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	font-style: normal;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}
.mb-ki-hinweis[hidden] { display: none; }
.mb-ki-hinweis--zeile { color: var(--mb-ink-600); }
.mb-ki-hinweis--bild {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 3;
	max-width: 100%;
	padding: 4px 8px;
	background: rgba(2, 10, 10, 0.72);
	color: #fff;
	pointer-events: none;
}
:where(:has(> .mb-ki-hinweis--bild)) { position: relative; }
/* Footer-Projektbild: Auf dem Desktop deckt der rote Block die rechte Hälfte
   ab – die Kennzeichnung steht deshalb links unten im sichtbaren Bildteil. */
@media (min-width: 880px) {
	.mb-footer__visual > .mb-ki-hinweis--bild {
		right: auto;
		left: 0;
	}
}
.mb-ki-hinweis--lightbox { color: var(--mb-neutral-300); }

/* Footer-Erklärzeile */
.mb-footer__ki {
	margin: calc(-1 * var(--mb-space-2)) 0 0;
	padding: 0 0 var(--mb-space-4);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.04em;
	line-height: 1.5;
	color: var(--mb-ink-600);
}
.mb-footer__ki-leiste { background: var(--mb-card); border-top: var(--mb-border); padding-top: var(--mb-space-3); }

/* ============ KONTO: B2B-ANTRAG (inc/b2b-antrag.php) ============ */
.mb-konto-b2b {
	margin: var(--mb-space-6, 32px) 0;
	padding: var(--mb-space-5, 24px);
	background: var(--mb-card);
	border: var(--mb-border);
}
.mb-konto-b2b__titel {
	margin: 0 0 var(--mb-space-3, 12px);
}
.mb-konto-b2b__text,
.mb-konto-b2b__liste {
	margin: 0 0 var(--mb-space-3, 12px);
}
.mb-konto-b2b__liste {
	padding-left: 1.2em;
}
.mb-konto-b2b__aktion,
.mb-konto-b2b__form {
	margin: var(--mb-space-4, 16px) 0 0;
}
.mb-konto-b2b .mb-cta,
.mb-konto-b2b .mb-cta:hover,
.mb-konto-b2b .mb-cta:focus {
	text-decoration: none;
	cursor: pointer;
}