/*
 * mabetec-shop Seiten-Layouts — Home, Shop-Listing, Produktdetail
 * Industrial-Editorial mit Slope-Signatur
 * Quelle: Mockup Stand 2026-06
 * Ergänzt: WooCommerce-Loop-Override am Dateiende (Scope: .woocommerce ul.products)
 */

/* ============ HOME — HERO ============ */
.mb-hero {
	position: relative;
	/* Höhe proportional zur Breite: bei 1440px ergibt 50vw = 720px (kalibriert auf
	   --mb-container-wide). So bleibt das Seitenverhältnis des Elements konstant,
	   wenn der Browser breiter wird — das Bild wird nicht zunehmend beschnitten,
	   sondern wächst mit. Auf der Inhalts-Höhe wirkt es als Minimum (Text-Block
	   kann den Block bei Bedarf höher drücken). Stacked-Layout <=1024 überschreibt. */
	min-height: 50vw;
	background: var(--mb-card);
	overflow: hidden;
	display: flex;
	align-items: stretch;
}

/* Weißes Diagonal-Panel links. Winkel = --mb-slope-angle (22° gegen die
   Vertikale, aus dem Mockup ausgemessen): oben breiter, unten schmaler,
   Kante von oben-rechts nach unten-links. skewX hält den Winkel HÖHEN-
   KONSTANT (zieht sich als Signatur durch), der Text bleibt ungeschert. */
.mb-hero::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -30%;
	width: 80%; /* rechte Kante an der Mittelachse bei ~50% Hero-Breite
	               → oben ~60%, unten ~40% (Mockup-Verhältnis) */
	background: var(--mb-card);
	transform: skewX(calc(-1 * var(--mb-slope-angle, 22deg)));
	transform-origin: center;
	z-index: 2;
}

.mb-hero__bg {
	position: absolute;
	inset: 0;
	/* 28.09.2026: Anhang 16570 — von mabetec gelieferte Fassung (Frau, Stuhl,
	   Geländer pixelgleich), nur die Dielenfläche neu: 20 cm je Diele im
	   Maßstab zu Fuß und Stuhl, sieben Rillen je Diele, Stoß als feine Linie.
	   3:2, beide Füße der Frau vollständig im Bild.
	   Position so gewählt, dass Frau und Füße rechts der Schräge sitzen. */
	background-image: url(/wp-content/uploads/2026/09/aluteck-balkon-sommer-kopfbild-v4.jpg);
	background-size: cover;
	background-position: 62% 78%;
	z-index: 1;
}
/* 2.14.1: festes Bildfeld statt „cover über die volle Hero-Fläche".
   Anlass: Thorsten — auf breiten Monitoren wurde die Frau oben und links
   angeschnitten (Kopf am Seitenkopf, Stuhl im Schrägschnitt), unten blieb
   viel leere Bodenfläche. Ursache: Der Hero ist ab ~1600 px genau 2:1
   (min-height 50vw), das Bild 3:2 — cover schnitt ein Viertel der Höhe weg,
   und die Schräge liegt bei 22° immer bei ~60 % (oben) bis ~40 % (unten).
   Jetzt ist das Bildfeld rechtsbündig 80 % breit im Format 3:2 (Höhe
   53,3vw): Das Motiv skaliert nur noch mit, der Ausschnitt ist auf jeder
   Breite gleich. Der linke Bildrand liegt vollständig unter der weißen
   Schräg-Fläche, die Frau sitzt bei ~58–78 % der Breite rechts neben der
   Schräge, ihr Kopf ~17 % unter der Oberkante, unten werden nur ~6 %
   Bodenfläche abgeschnitten. Ist der Text höher als das Bildfeld (1025–
   ~1500 px), wächst das Feld per min-height mit (cover, oben verankert). */
@media (min-width: 1025px) {
	.mb-hero__bg {
		inset: 0 0 auto auto;
		width: 80%;
		height: auto;
		aspect-ratio: 3 / 2;
		min-height: 100%;
		background-position: 50% 0;
	}
}

/* Dunkles Overlay entfernt — Bild erscheint ohne Abdunklung */
.mb-hero__bg::after {
	display: none;
}

.mb-hero__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	display: flex;
	flex-direction: column;
	/* Block im oberen, breiteren Teil der Schräg-Fläche halten, damit die CTAs
	   nicht an der nach links wandernden Schräg-Kante kleben. */
	justify-content: flex-start;
	padding: var(--mb-space-8) 0 var(--mb-space-9);
}

.mb-hero__copy {
	max-width: 560px;
	color: var(--mb-ink-900);
}

.mb-hero__meta {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: var(--mb-tracking-cap);
	text-transform: uppercase;
	color: var(--mb-red);
	margin-bottom: var(--mb-space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--mb-space-2);
}
.mb-hero__meta::before {
	content: "";
	width: 32px;
	height: 2px;
	background: var(--mb-red);
}

.mb-hero h1 {
	color: var(--mb-ink-900);
	/* Kleiner als --mb-fs-display und mit der Viewport-Breite skalierend, damit
	   "Die Allwetterdiele." über alle Desktop-Breiten einzeilig bleibt und die
	   Headline samt CTAs zuverlässig auf die weiße Schräg-Fläche passt. */
	font-size: clamp(2rem, 3vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0 0 var(--mb-space-4);
}
.mb-hero h1 em {
	font-style: normal;
	color: var(--mb-red);
	display: block;
}

.mb-hero p {
	font-size: var(--mb-fs-lead);
	color: var(--mb-ink-700);
	margin: 0 0 var(--mb-space-5);
	max-width: 480px;
}

/* USP-Leiste: flache Icon-Reihe, kein Kasten, kein Kreis */
.mb-hero__usps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-3) var(--mb-space-5);
	margin-bottom: var(--mb-space-5);
}
.mb-hero__usp {
	display: flex;
	align-items: center;
	gap: var(--mb-space-2);
	font-size: var(--mb-fs-small);
	font-weight: var(--mb-weight-strong);
	color: var(--mb-ink-800);
}
.mb-hero__usp .mb-icon {
	width: 30px;
	height: 30px;
	color: var(--mb-red);
	flex-shrink: 0;
}

.mb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-4);
	align-items: center;
}

/* Ghost-Button im Hero sitzt jetzt auf der WEISSEN Fläche (nicht mehr auf dem
   dunklen Bild). Die Bridge-Default-Optik (halbtransparent dunkel + Blur, Hover
   weiß) ist hier obsolet und der weiße Hover wäre unsichtbar. Die echte Optik
   liegt auf dem inneren .elementor-button — als klaren Outline-Button mit
   dunklem Hover überschreiben. */
.mb-hero .elementor-widget.mb-cta--ghost .elementor-button {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--mb-ink-900);
	border-color: var(--mb-ink-900);
	text-shadow: none;
}
.mb-hero .elementor-widget.mb-cta--ghost .elementor-button:hover {
	background: var(--mb-ink-900);
	color: #fff;
}

/* Trust-Stamp im Bildbereich rechts; z-index über Pseudo-Panel */
/* Runder „100 % wasserdicht"-Badge entfernt — doppelte sich inhaltlich mit dem
   ersten Feature-Icon in der weißen Fläche (Feedback 2026-06-29). */
.mb-hero__stamp {
	display: none;
}

/* Tablet & Mobil (<=1024): gestapelt statt schräg. Die diagonale Schräge ist
   ein Desktop-Feature; bei schmalen/hohen Viewports würde sie zu extrem und
   würde Bild oder Text beschneiden. Stattdessen: Bild oben (Frau + Stuhl
   vollständig sichtbar), Text darunter auf weißer Fläche. */
@media (max-width: 1024px) {
	.mb-hero {
		flex-direction: column;
		min-height: 0;
	}
	.mb-hero::before { display: none; }      /* keine Schräge */
	.mb-hero__stamp { display: none; }
	.mb-hero__bg {
		position: relative;
		inset: auto;
		width: 100%;
		/* 2.14.1: festes 3:2-Format = ganzes Bild, auf jeder Breite derselbe
		   Ausschnitt (vorher 50vw/62vw mit Höhen-Deckel 440/320 px). */
		height: auto;
		aspect-ratio: 3 / 2;
		max-height: none;
		background-size: cover;
		background-position: 50% 50%;
		z-index: 1;
	}
	/* Elementor setzt flex-wrap:wrap auf den Container; in einer Spalte mit
	   Umbruch rechnet Chrome das aspect-ratio-Bild unter ~700 px mit Höhe 0
	   und der Text überdeckt es. Ohne Umbruch stimmt die Höhe. */
	.e-con.mb-hero { flex-wrap: nowrap; }
	.mb-hero__inner {
		position: relative;
		z-index: 3;
		background: var(--mb-card);
		padding: var(--mb-space-7) 0;
	}
	.mb-hero__copy {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.mb-hero__inner {
		padding: var(--mb-space-5) 0;   /* weniger Luft Bild->Text auf Mobil */
	}
	.mb-hero__usps {
		gap: var(--mb-space-3) var(--mb-space-4);
	}
}

/* ============ UNTERSEITEN — SEITENKOPF (.mb-page-hero, seit 2.14.0) ============
   Ersetzt den von der Vorgänger-Site übernommenen Kopf (Parallax-Bild +
   weißer Kasten, der mit negativem Rand über dem Bild lag). Verwandt mit dem
   Startseiten-Hero, aber flacher und ohne Überdeckung: links der Text auf der
   hellen Neutralfläche, rechts das Bild mit dem 22°-Schrägschnitt
   (--mb-slope-angle) — das Motiv bleibt vollständig sichtbar, die Headline
   steht immer auf ruhigem Grund (Kontrast unabhängig vom Bild).
   Struktur und Shortcodes: inc/seitenkopf.php. Variante --schlicht ohne
   Bild für Rechtstexte, Service-Seiten, Warenkorb, Kasse, Konto.
   Auch der Shop-/Kategorie-Kopf (Vorlage 425, .mb-cat-hero) nutzt ihn. */
.e-con.mb-page-hero {
	--mb-ph-min: clamp(340px, 30vw, 460px);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-rows: minmax(var(--mb-ph-min), auto);
	grid-auto-rows: auto;
	gap: 0;
	padding: 0;
	margin: 0 0 var(--mb-space-5);
	--margin-bottom: var(--mb-space-5);
	background: var(--mb-neutral-100);
	position: relative;
	overflow: hidden;
	border-bottom: var(--mb-border);
}

/* Textspalte: linke Kante fluchtet mit Logo/Container (1280 px + 48 px Gutter) */
.e-con.mb-page-hero > .e-con.mb-page-hero__copy {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: var(--mb-space-6) var(--mb-space-5) var(--mb-space-6)
		max(var(--mb-gutter-desk), calc((100vw - var(--mb-container)) / 2 + var(--mb-gutter-desk)));
	position: relative;
	z-index: 2;
}
.mb-page-hero__copy > .elementor-widget { width: 100%; margin: 0; }

/* Bildspalte: Schrägschnitt links, oben breiter als unten wie beim Hero */
.mb-page-hero > .elementor-widget.mb-page-hero__bild {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: var(--mb-ph-min);
	margin: 0;
	clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
	background: var(--mb-neutral-200);
}
.mb-page-hero__bild .elementor-widget-container,
.mb-page-hero__bild .elementor-shortcode { position: static; height: 100%; }
/* Spezifität (0,2,1) gegen Elementors `.elementor img { height:auto }` —
   sonst behielt das Bild sein eigenes Format, ragte unten aus der Fläche
   und wurde dort abgeschnitten (object-position wirkungslos; bis 2.14.0). */
.mb-page-hero__bild img.mb-page-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* Alles Weitere im Kopf-Container (z. B. Besprechungs-Kästen im Shop-Kopf)
   läuft als volle Zeile unter Text und Bild. */
.e-con.mb-page-hero > :not(.mb-page-hero__copy):not(.mb-page-hero__bild) {
	grid-column: 1 / -1;
	width: 100%;
	margin: 0;
	padding: 0 max(var(--mb-gutter-desk), calc((100vw - var(--mb-container)) / 2 + var(--mb-gutter-desk)));
}

/* Seitenpfad (Unterseiten per [mb_seitenpfad], Shop per WC-Breadcrumb) */
.mb-seitenpfad,
.mb-page-hero .mb-crumb {
	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);
	margin: 0 0 var(--mb-space-3);
	padding: 0;
	border: 0;
}
.mb-seitenpfad a,
.mb-page-hero .mb-crumb a {
	color: var(--mb-ink-700);
	text-decoration: none;
}
.mb-seitenpfad a:hover,
.mb-seitenpfad a:focus-visible,
.mb-page-hero .mb-crumb a:hover {
	color: var(--mb-red);
}
.mb-seitenpfad [aria-current] { color: var(--mb-red); }
.mb-seitenpfad__sep { margin: 0 var(--mb-space-1); color: var(--mb-ink-500); }

/* Kleine Kennzeile (Shop: „Kategorie" — nur auf Kategorie-Seiten sinnvoll) */
.post-type-archive-product .mb-page-hero__meta { display: none; }
.mb-page-hero__meta,
.mb-page-hero__meta p {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: var(--mb-tracking-cap);
	text-transform: uppercase;
	color: var(--mb-red);
	margin: 0 0 var(--mb-space-2);
}

.mb-page-hero h1,
.mb-page-hero .elementor-heading-title.elementor-size-default {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: clamp(2rem, 2.9vw, 3.2rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--mb-ink-900);
	margin: 0 0 var(--mb-space-3);
	/* Lange deutsche Komposita („Anwendungsbeispiele") nur an Wortfugen trennen
	   (weiche Trennstellen aus inc/worttrennung.php), nie automatisch. */
	hyphens: manual;
	-webkit-hyphens: manual;
	overflow-wrap: normal;
	text-align: left;
}

.mb-page-hero__lead,
.mb-page-hero__lead p {
	font-size: 1.125rem;
	line-height: var(--mb-lh-body);
	color: var(--mb-ink-700);
	max-width: 36rem;
	margin: 0;
	text-align: left;
}
.mb-page-hero__lead p + p { margin-top: var(--mb-space-2); }

.mb-page-hero__copy > .mb-page-hero__extra { margin-top: var(--mb-space-4); }
.mb-page-hero__copy > .mb-page-hero__extra + .mb-page-hero__extra { margin-top: var(--mb-space-2); }
.mb-page-hero__extra p { margin: 0; color: var(--mb-ink-700); }
.mb-page-hero__extra .elementor-heading-title {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-strong);
	font-size: 1.375rem;
	color: var(--mb-ink-900);
	margin: 0;
}
.mb-page-hero__extra .elementor-heading-title a { color: inherit; text-decoration: none; }
.mb-page-hero__extra .elementor-heading-title a:hover { color: var(--mb-red); }

/* Variante ohne Bild: gleiche Textspalte, rechts nur die Schräge als
   Signatur (Neutralfläche eine Stufe dunkler). */
.e-con.mb-page-hero--schlicht {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
}
.e-con.mb-page-hero--schlicht > .e-con.mb-page-hero__copy {
	padding-top: var(--mb-space-6);
	padding-bottom: var(--mb-space-6);
	padding-right: 30%;
}
.e-con.mb-page-hero--schlicht::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -6%;
	width: 26%;
	background: var(--mb-neutral-200);
	transform: skewX(calc(-1 * var(--mb-slope-angle, 22deg)));
	transform-origin: bottom left;
	z-index: 1;
	pointer-events: none;
}

/* Festes Bildformat (seit 2.14.1). Anlass: Thorsten — bei fester Höhe wurde
   der Ausschnitt mit wachsender Breite immer flacher, man sah „meistens gar
   nichts mehr vom Boden" bzw. nur noch die Person, keine Dielen. Jetzt hat
   die Bildfläche ein festes Seitenverhältnis (--mb-ph-ratio, 16:10 — knapp
   flacher als die 3:2-Kopfbilder, die dadurch fast vollständig sichtbar
   sind) und der Kopf wächst mit der Breite in der Höhe mit, ohne Obergrenze.
   Die Zeilenhöhe ergibt sich aus der Bildspalte (aspect-ratio), der Text
   sitzt vertikal zentriert. Nur wenn der Text höher ist als das Bild (bei
   1025–1279 px auf textreichen Seiten), wächst die Zeile mit und das Bild
   wird etwas schmaler angeschnitten. Fokus je Seite über `pos` im Shortcode
   [mb_seitenkopf_bild] (object-position). Mobil dasselbe Format.
   Gilt auch für den Shop-/Kategorie-Kopf (.mb-cat-hero, Vorlage 425), der
   dasselbe Problem hatte (bei 3360 px Bildfläche 7 : 1). */
.e-con.mb-page-hero {
	--mb-ph-ratio: 16 / 10;
	grid-template-rows: auto;
}
@media (min-width: 1025px) {
	/* Textspalte mindestens „Container-Einzug + 540 px" breit: Auf breiten
	   Monitoren rückt der Text mit dem Container nach innen und wurde in
	   der 5/12-Spalte schmal (3360 px: ~270 px, Headline in Silben
	   zerhackt). Das Bild behält dabei sein Format, nur seine Breite und
	   damit die Höhe des Kopfs ändern sich. */
	.e-con.mb-page-hero:not(.mb-page-hero--schlicht) {
		grid-template-columns: max(41.667%, calc(50% - var(--mb-container) / 2 + var(--mb-gutter-desk) + 540px)) minmax(0, 1fr);
	}
	.e-con.mb-page-hero:not(.mb-page-hero--schlicht) > .e-con.mb-page-hero__copy {
		padding-top: var(--mb-space-5);
		padding-bottom: var(--mb-space-5);
	}
}
/* (0,4,0): gilt auch gegen die Höhen der Tablet-/Mobil-Blöcke unten */
.e-con.mb-page-hero > .elementor-widget.mb-page-hero__bild {
	height: auto;
	min-height: 0;
	max-height: none;
	aspect-ratio: var(--mb-ph-ratio);
	align-self: stretch;
}

/* Tablet und Mobil: gestapelt — Bild oben mit schräger Unterkante, Text darunter */
@media (max-width: 1024px) {
	.e-con.mb-page-hero {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
	}
	.mb-page-hero > .elementor-widget.mb-page-hero__bild {
		grid-column: 1;
		grid-row: 1;
		height: 52vw;
		max-height: 440px;
		min-height: 0;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vw));
	}
	.e-con.mb-page-hero > .e-con.mb-page-hero__copy {
		grid-row: 2;
		padding: var(--mb-space-4) var(--mb-gutter-desk) var(--mb-space-6);
	}
	.e-con.mb-page-hero > :not(.mb-page-hero__copy):not(.mb-page-hero__bild) {
		padding: 0 var(--mb-gutter-desk);
	}
	.e-con.mb-page-hero--schlicht > .e-con.mb-page-hero__copy {
		grid-row: 1;
		padding: var(--mb-space-6) 30% var(--mb-space-6) var(--mb-gutter-desk);
	}
}
@media (max-width: 600px) {
	.e-con.mb-page-hero > .e-con.mb-page-hero__copy {
		padding: var(--mb-space-3) var(--mb-gutter-mobile) var(--mb-space-5);
	}
	.e-con.mb-page-hero > :not(.mb-page-hero__copy):not(.mb-page-hero__bild) {
		padding: 0 var(--mb-gutter-mobile);
	}
	.mb-page-hero > .elementor-widget.mb-page-hero__bild { height: 60vw; }
	.e-con.mb-page-hero--schlicht > .e-con.mb-page-hero__copy {
		padding: var(--mb-space-5) 22% var(--mb-space-5) var(--mb-gutter-mobile);
	}
	.e-con.mb-page-hero--schlicht::after { width: 18%; right: -8%; }
	.mb-page-hero__lead,
	.mb-page-hero__lead p { font-size: 1.0625rem; }
}

/* Ausnahme Shop-Übersicht und Produktkategorien: kompakter Kopf (seit
   2.19.6). Anlass: Thorsten, 30.09.2026 — „Dieser Hero-Bereich auf der
   Shop-Seite muss viel niedriger werden, damit man dann auch direkt
   Produkte sieht, und links ist auch zu wenig Text dafür, dass der
   Hero-Bereich so hoch sein kann." Statt des mitwachsenden 16:10-Formats
   eine feste, flache Höhe (220 px bei 1280, 300 px ab ca. 2000 px Breite),
   damit bei 1280–2560 px und 900 px Fensterhöhe die erste Produktreihe
   samt Sortierleiste ohne Scrollen sichtbar ist. Links stehen nur
   Seitenpfad und Überschrift (Shop und Kategorien haben keine
   Beschreibung). Der Bildausschnitt sitzt auf Liege + Dielenfläche; das
   Inline-`object-position` aus [mb_seitenkopf_bild] (auf 16:10 abgestimmt)
   wird deshalb hier überschrieben. Nur `.mb-cat-hero` (Vorlage 425) —
   Inhaltsseiten und Startseite bleiben unverändert. */
.e-con.mb-page-hero.mb-cat-hero {
	--mb-cat-hero-h: clamp(220px, calc(11vw + 80px), 300px);
	/* Abstand zur Liste trägt allein deren Innenabstand (48 px) */
	margin-bottom: 0;
	--margin-bottom: 0;
}
.e-con.mb-page-hero.mb-cat-hero > .elementor-widget.mb-page-hero__bild {
	aspect-ratio: auto;
	height: var(--mb-cat-hero-h);
}
.mb-cat-hero .mb-page-hero__bild img.mb-page-hero__img {
	object-position: 50% 55% !important;
}
@media (min-width: 1025px) {
	.e-con.mb-page-hero.mb-cat-hero > .e-con.mb-page-hero__copy {
		padding-top: var(--mb-space-4);
		padding-bottom: var(--mb-space-4);
	}
}
@media (max-width: 1024px) {
	.e-con.mb-page-hero.mb-cat-hero {
		--mb-cat-hero-h: clamp(150px, 26vw, 240px);
	}
	.e-con.mb-page-hero.mb-cat-hero > .e-con.mb-page-hero__copy {
		padding-top: var(--mb-space-3);
		padding-bottom: var(--mb-space-4);
	}
	.e-con.mb-page-hero.mb-cat-hero > .elementor-widget.mb-page-hero__bild {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
	}
}
@media (max-width: 600px) {
	.e-con.mb-page-hero.mb-cat-hero {
		--mb-cat-hero-h: clamp(120px, 34vw, 170px);
	}
	.e-con.mb-page-hero.mb-cat-hero > .e-con.mb-page-hero__copy {
		padding-top: var(--mb-space-2);
		padding-bottom: var(--mb-space-3);
	}
}

/* ============ HOME — WARUM ALUTECK (Teaser #3089) ============
   Anordnung nach Kundenvorlage (Intro links + 4 Feature-Karten rechts,
   darunter Sanierungs-Block Bild+Text), Anmutung in unserem Design:
   flache Karten mit Slope-Ecke statt runder Bubble-Kacheln, eigene
   Typografie, Marken-Rot als Akzent. */
.mb-why {
	padding: var(--mb-space-9) 0;
	background: var(--mb-neutral-100);
}

/* --- Block A: Intro links, Karten rechts --- */
.mb-why__intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-6);
	align-items: start;
}
@media (min-width: 960px) {
	.mb-why__intro {
		grid-template-columns: 4fr 8fr;
		gap: var(--mb-space-8);
	}
}
.mb-why__lead .mb-meta {
	color: var(--mb-red);
	display: block;
	margin-bottom: var(--mb-space-2);
}
.mb-why__lead h2 {
	margin: 0 0 var(--mb-space-4);
	padding-bottom: var(--mb-space-4);
	border-bottom: 2px solid var(--mb-red);
}
.mb-why__lead p {
	font-size: var(--mb-fs-lead);
	color: var(--mb-ink-700);
	margin: 0;
	max-width: 42ch;
}

/* --- Feature-Karten (flach, Slope-Ecke) --- */
.mb-why__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-4);
}
@media (min-width: 560px) {
	.mb-why__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	/* 4 Karten nebeneinander in einer Reihe (rechte, breite Spalte) */
	.mb-why__cards { grid-template-columns: repeat(4, 1fr); gap: var(--mb-space-3); }
}
/* 960–1099 px: Vier Karten sind hier breiter als die rechte Spalte (jede Karte
   ist mindestens so breit wie ihr längstes Wort, z. B. „Pflegeleicht") — bei
   960 px 66 px, bei 1024 px 2 px Querscroll. Dort 2 × 2 Karten. */
@media (min-width: 960px) and (max-width: 1099px) {
	.mb-why__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mb-why-card {
	background: var(--mb-card);
	border: var(--mb-border);
	padding: var(--mb-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-2);
}
.mb-why-card__icon {
	font-size: 1.75rem;
	color: var(--mb-red);
	line-height: 1;
}
.mb-why-card h3 {
	font-family: var(--mb-font-display);
	font-size: var(--mb-fs-h4);
	/* Enger als der globale Fließtext, explizit statt über die
	   geerbte h1-h4-Regel aus tokens.css — Kundenwunsch: kompaktere
	   Kartentexte. */
	line-height: 1.15;
	margin: 0;
}
.mb-why-card p {
	font-size: var(--mb-fs-small);
	line-height: 1.4;
	color: var(--mb-ink-700);
	margin: 0;
}
/* Desktop-4-spaltig: enger + kleinerer Titel, damit „Edle Optik" einzeilig bleibt.
   Muss NACH den Basis-Regeln stehen (gleiche Spezifität → Quell-Reihenfolge gewinnt). */
@media (min-width: 960px) {
	.mb-why-card { padding: var(--mb-space-3); }
	.mb-why-card h3 { font-size: var(--mb-fs-lead); }
}

/* --- Block B: Sanieren ohne Abriss — Bild links, Text rechts --- */
.mb-why__reno {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-6);
	align-items: center;
	margin-top: var(--mb-space-8);
}
@media (min-width: 960px) {
	/* gleiche Spaltigkeit wie der Intro-Block: Bild fluchtet unter der Headline
	   (schmale linke Spalte), Text unter den Karten (breite rechte Spalte). */
	.mb-why__reno {
		grid-template-columns: 4fr 8fr;
		gap: var(--mb-space-8);
	}
}
.mb-why__reno-media {
	aspect-ratio: 4 / 3;
	/* 30.09.2026: neu erzeugt — Träger parallel zur Hauswand, Dielen
	   rechtwinklig darüber (Regel bildwelt-ki-regeln.md Abschnitt 11),
	   Dielenfläche aus Trentaus Draufsicht; ersetzt Anhang 16569.
	   Ersetzt 25.09.2026: das Motiv zeigt die eigentliche Sanierungs-Szene
	   (alter Fliesenbalkon, Stahl-Unterkonstruktion, Übergang zur fertigen
	   AluTeck-Fläche) statt des Lagerfotos 16315, das nur als Platzhalter
	   diente und zur eigenen Bildunterschrift nicht passte. */
	background-image: url(/wp-content/uploads/2026/09/aluteck-balkon-sanieren-auf-fliesen-rechtwinklig-traeger.jpg);
	background-size: cover;
	background-position: center;
	clip-path: var(--mb-slope-md);
}
.mb-why__reno-body .mb-meta {
	color: var(--mb-red);
	display: block;
	margin-bottom: var(--mb-space-2);
}
.mb-why__reno-body h2 {
	margin: 0 0 var(--mb-space-4);
	padding-bottom: var(--mb-space-4);
	border-bottom: 2px solid var(--mb-red);
}
.mb-why__reno-body p {
	color: var(--mb-ink-700);
	margin: 0;
	max-width: 52ch;
}

/* ============ HOME — SEPARATOR-TEASER „Stylisch, edel und pflegeleicht" (#3091) ============
   Aus statischer Widget-Vorlage übernommen. Komposition aus hellem Teaser oben
   (Zone 1) + anthrazitfarbener B2B-Fläche unten (Zone 2). Die Marken-Schräge ist
   die LINKE KANTE der grauen Fläche (skewX(-22deg), höhen-konstant). Markup liegt
   als Elementor-HTML-Widget in einem vollbreiten Container ohne Padding. */

/* Roter Eyebrow/Kicker (Title Case, fett, sans) */
.mb-kicker {
	display: inline-block;
	font-family: var(--mb-font-body);
	font-weight: var(--mb-weight-strong);
	font-size: var(--mb-fs-small);
	letter-spacing: 0.02em;
	color: var(--mb-red);
	margin: 0 0 var(--mb-space-2);
}

/* Headline mit roter Unterstreichung (Editorial-Rule) */
.mb-headrule {
	position: relative;
	display: block;
	padding-bottom: var(--mb-space-3);
	margin: 0 0 var(--mb-space-4);
}
.mb-headrule::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--mb-red);
}

/* ---------- Wrapper: heller Hintergrund der ganzen Komposition ---------- */
.mb-sep-widget {
	position: relative;
	background: #F1F1F2;             /* hellgrau wie Referenz */
	overflow: hidden;               /* Full-Bleed-Band sauber beschneiden */
}

/* ---------- ZONE 1: heller Teaser ---------- */
.mb-sep-widget__top {
	padding: var(--mb-space-9) 0 calc(var(--mb-space-9) + var(--mb-space-6));
}
.mb-sep__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-6);
	align-items: center;
}
@media (min-width: 960px) {
	.mb-sep__grid {
		grid-template-columns: 6fr 5fr;
		gap: var(--mb-space-8);
	}
}
.mb-sep__title {
	font-size: var(--mb-fs-h1);
}
.mb-sep__body {
	max-width: 48ch;
	color: var(--mb-ink-800);
	font-size: var(--mb-fs-body);
	margin: 0;
}
.mb-sep__media {
	aspect-ratio: 4 / 3;
	/* 30.09.2026: Dielen rechtwinklig zur Vorderkante (Maskenverfahren) statt 16566.
	   28.09.2026: Anhang 16566 (Dielenfläche nach Vorlage v1) statt 16529.
	   Ersetzt 25.09.2026: Besen + nasse Diele statt Anhang
	   16508 (Siegel mit Tippfehlern, falsche Profile). Bewusster
	   Ausschnitt aus dem Fotografen-Blick von oben-vorn — Besen, Füße und
	   Diele bleiben bei cover/center auf allen Breiten vollständig im Bild;
	   die 14px-Eck-Notch von --mb-slope-md schneidet nichts Wesentliches an. */
	background-image: url(/wp-content/uploads/2026/09/aluteck-balkon-reinigen-besen-rechtwinklig.jpg);
	background-size: cover;
	background-position: center;
	clip-path: var(--mb-slope-md);
}

/* ---------- ZONE 2: graue Fläche mit LINKER Schräge ---------- */
.mb-slope-band {
	position: relative;
	overflow: hidden;                        /* Keil-Überhang beschneiden */
	margin-top: calc(var(--mb-space-8) * -1); /* Schräge schneidet in Zone 1 */
	background: #363A42;                      /* Anthrazit — Brand-Rot poppt erst auf dunklem Grund */
	color: #fff;
	--mb-slope-apex: 38%;                     /* X, wo flache Oberkante in die Diagonale übergeht */
}
/* Schräge = LINKE Kante, exakt 22° gegen die Vertikale (skewX, höhenunabhängig). */
.mb-slope-band::before {
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	left: -100vw;
	right: calc(100% - var(--mb-slope-apex)); /* rechte Kante bei Apex-X */
	background: #F1F1F2;                       /* = Wrapper-Hellgrau */
	transform: skewX(-22deg);
	transform-origin: top right;
	pointer-events: none;
}
.mb-slope-band__inner {
	position: relative;
	z-index: 1;                               /* Inhalt über dem Keil */
	padding: var(--mb-space-7) 5vw var(--mb-space-8) 37vw;  /* links räumt die Diagonale (22°) frei */
}
.mb-slope-band__kicker-row {
	text-align: right;
	margin-bottom: var(--mb-space-1);
}
.mb-slope-band__kicker-row .mb-kicker {
	color: #FF2D52;              /* etwas heller als Brand-Rot — bessere Lesbarkeit auf Anthrazit */
}
/* Selektor doppelt geklasst (0,2,0), damit er den Kit `.elementor-kit-7 h2`
   (0,1,1, setzt Ink-900) schlägt — sonst dunkle Headline auf dunklem Band. */
.mb-slope-band .mb-slope-band__title {
	font-size: var(--mb-fs-h2);
	color: #fff;
	margin: 0 0 var(--mb-space-6);
}
.mb-slope-band__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-5);
	align-items: start;
}
@media (min-width: 768px) {
	.mb-slope-band__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--mb-space-7);
	}
}
.mb-slope-band__actions {
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-3);
	align-items: stretch;
}
.mb-slope-band__actions .mb-cta,
.mb-slope-band__actions .mb-cta:hover {
	justify-content: center;
	clip-path: none;                 /* rechteckige B2B-Buttons wie Referenz */
	padding: var(--mb-space-4) var(--mb-space-5);
	/* Weiß erzwingen: der Elementor-Kit setzt `.elementor-kit-7 a { color: red }`
	   (Spezifität 0,1,1) und würde sonst den weißen Button-Text rot färben.
	   Dieser Selektor (0,2,0 bzw. 0,3,0) gewinnt ohne !important. */
	color: #fff;
}
.mb-slope-band__text {
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--mb-fs-body);
	margin: 0;
	max-width: 40ch;
}

/* ---------- Mobile: linke Diagonale unbrauchbar -> Keil aus, sanfter Top-Cut ---------- */
@media (max-width: 767px) {
	.mb-slope-band {
		margin-top: calc(var(--mb-space-5) * -1);
		clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%);
	}
	.mb-slope-band::before {
		display: none;
	}
	.mb-slope-band__inner {
		padding: calc(var(--mb-space-7) + 24px) var(--mb-gutter-mobile) var(--mb-space-7);
	}
	.mb-slope-band__kicker-row {
		text-align: left;
	}
	.mb-slope-band__title {
		font-size: var(--mb-fs-h3);
	}
}

/* ============ HOME — KONFIGURATOR-TEASER (entfernt in AP-5) ============
   Block war laut E2 nie gebaut; einzige Referenz war die stale Home-Revision
   16302. Samt .mb-spec-list als toten Code entfernt — die _media-Regel band
   das Vorgänger-Bild diele_holzstruktur.jpg (uploads/2022/07). Bei einer
   späteren, explizit beauftragten Neuauflage neu aufbauen. */

/* ============ HOME — VORTEILE-STACK ============ */
.mb-benefits {
	padding: var(--mb-space-8) 0;
	background: var(--mb-paper);
}
.mb-benefits__head {
	max-width: 720px;
	margin-bottom: var(--mb-space-7);
}
.mb-benefit-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-5);
	align-items: center;
	margin-bottom: var(--mb-space-8);
}
.mb-benefit-row:last-child {
	margin-bottom: 0;
}
@media (min-width: 768px) {
	.mb-benefit-row {
		grid-template-columns: 5fr 7fr;
		gap: var(--mb-space-7);
	}
	.mb-benefit-row--reverse {
		grid-template-columns: 7fr 5fr;
	}
	.mb-benefit-row--reverse .mb-benefit-row__media {
		order: 2;
	}
}
.mb-benefit-row__media {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	clip-path: var(--mb-slope-md);
}
.mb-benefit-row__body h3 {
	font-size: var(--mb-fs-h2);
	margin: var(--mb-space-3) 0;
}
.mb-benefit-row__body p {
	max-width: 56ch;
	color: var(--mb-ink-700);
}

/* ============ HOME — ANWENDUNGEN STRIP ============ */
.mb-applications {
	padding: 0;
	background: var(--mb-ink-900);
}
.mb-applications__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--mb-ink-900);
}
@media (min-width: 768px) {
	.mb-applications__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.mb-application-tile {
	position: relative;
	aspect-ratio: 4 / 5;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	transition: filter var(--mb-dur-base) var(--mb-ease-cut);
}
.mb-application-tile:hover {
	filter: brightness(1.1);
}
.mb-application-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(2, 10, 10, 0.85) 100%);
}
.mb-application-tile__label {
	position: absolute;
	left: var(--mb-space-3);
	bottom: var(--mb-space-3);
	z-index: 2;
	color: #fff;
}
.mb-application-tile__label small {
	display: block;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: var(--mb-tracking-cap);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 4px;
}
.mb-application-tile__label strong {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: var(--mb-fs-h4);
	line-height: 1;
}

/* ============ HOME — B2B BLOCK ============ */
.mb-b2b {
	background: var(--mb-ink-800);
	color: #fff;
	padding: var(--mb-space-9) 0;
	position: relative;
	overflow: hidden;
}
.mb-b2b::before {
	content: "";
	position: absolute;
	right: -100px;
	top: -100px;
	width: 420px;
	height: 420px;
	border: 2px solid rgba(255, 4, 52, 0.25);
	border-radius: 50%;
	pointer-events: none;
}
.mb-b2b__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-6);
	align-items: end;
}
@media (min-width: 768px) {
	.mb-b2b__inner {
		grid-template-columns: 2fr 1fr;
	}
}
.mb-b2b h2 {
	color: #fff;
	font-size: var(--mb-fs-h2);
	margin: 0 0 var(--mb-space-4);
	max-width: 16ch;
}
.mb-b2b p {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--mb-fs-lead);
	max-width: 64ch;
}
.mb-b2b__actions {
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-3);
	align-items: flex-start;
}
.mb-b2b__actions .mb-link {
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.4);
}
.mb-b2b__actions .mb-link:hover {
	color: #fff;
	border-color: var(--mb-red);
}

/* ============ HOME — TRUST ZERTIFIKATE ============ */
.mb-trust {
	padding: var(--mb-space-8) 0;
}
.mb-trust__head {
	margin-bottom: var(--mb-space-6);
	max-width: 540px;
}
.mb-trust__head .mb-meta {
	margin-bottom: var(--mb-space-2);
}
.mb-trust__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: var(--mb-border-ink);
	border-bottom: var(--mb-border-ink);
}
@media (min-width: 640px) {
	.mb-trust__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.mb-trust__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.mb-trust-card {
	padding: var(--mb-space-5);
	border-right: var(--mb-border-ink);
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-2);
}
.mb-trust-card:last-child {
	border-right: 0;
}
@media (max-width: 1023px) {
	.mb-trust-card:nth-child(2n) {
		border-right: 0;
	}
	.mb-trust-card:nth-child(-n+2) {
		border-bottom: var(--mb-border-ink);
	}
}
@media (max-width: 639px) {
	.mb-trust-card {
		border-right: 0;
		border-bottom: var(--mb-border-ink);
	}
	.mb-trust-card:last-child {
		border-bottom: 0;
	}
}
.mb-trust-card__name {
	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-trust-card__since {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-red);
	letter-spacing: var(--mb-tracking-cap);
	text-transform: uppercase;
	/* Feste Höhe für bis zu 2 Zeilen Sublabel (GSB bricht um), damit die Logos
	   darunter und die Beschreibungstexte über alle 4 Karten auf gleicher Höhe
	   fluchten. */
	display: block;
	line-height: 1.35;
	min-height: calc(2 * 1.35em);
}
/* Zertifizierungs-Logo unter dem roten Sublabel — höhen-normiert, linksbündig,
   damit die unterschiedlichen Logo-Seitenverhältnisse einheitlich wirken.
   Doppelt geklasst (0,2,0), damit die Fix-Höhe das Elementor `.elementor img
   { height:auto }` (0,1,1) schlägt — sonst skalieren die Logos über die Breite
   und werden unterschiedlich hoch. */
.mb-trust-card .mb-trust-card__logo {
	align-self: flex-start;
	height: 72px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin: var(--mb-space-1) 0;
}
.mb-trust-card p {
	margin: 0;
	color: var(--mb-ink-700);
	font-size: var(--mb-fs-small);
}

/* ============ SHOP-LISTING ============ */
/* Kategorie-Kopf: seit 2.14.0 derselbe geteilte Seitenkopf wie die
   Unterseiten (.mb-page-hero, Block „UNTERSEITEN — SEITENKOPF" oben) — das
   Motiv liegt nicht mehr unter einem Lichtschleier, sondern rechts neben
   dem Text. Hier nur noch die Kategorie-Eigenheiten. */
.mb-cat-hero__sub {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-small);
	letter-spacing: var(--mb-tracking-cap);
	color: var(--mb-ink-700);
	text-transform: uppercase;
	margin-top: var(--mb-space-2);
}

.mb-crumb {
	padding: var(--mb-space-3) 0;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-ink-600);
	letter-spacing: 0.04em;
	border-bottom: var(--mb-border);
}
.mb-crumb a {
	color: var(--mb-ink-700);
}
.mb-crumb a:hover {
	color: var(--mb-red);
}
.mb-crumb .sep {
	margin: 0 var(--mb-space-1);
	color: var(--mb-ink-500);
}

.mb-listing {
	padding: var(--mb-space-6) 0 var(--mb-space-9);
}
.mb-listing__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-5);
}
@media (min-width: 960px) {
	.mb-listing__layout {
		grid-template-columns: 260px 1fr;
		gap: var(--mb-space-6);
	}
}

/* Kategorie-Sidebar (Einfachauswahl, vertikal) */
.mb-catnav {
	border-right: 0;
}
@media (min-width: 960px) {
	.mb-catnav {
		border-right: var(--mb-border);
		padding-right: var(--mb-space-4);
	}
}
.mb-catnav__head {
	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-catnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.mb-catnav__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mb-space-2);
	width: 100%;
	padding: 10px var(--mb-space-3);
	background: transparent;
	border: 0;
	border-left: 2px solid transparent;
	color: var(--mb-ink-900);
	font-family: var(--mb-font-body);
	font-weight: var(--mb-weight-medium);
	font-size: var(--mb-fs-body);
	text-align: left;
	cursor: pointer;
	transition: background var(--mb-dur-fast) var(--mb-ease-cut),
		border-color var(--mb-dur-fast) var(--mb-ease-cut),
		color var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-catnav__item:hover {
	background: var(--mb-paper);
	border-left-color: var(--mb-red);
}
.mb-catnav__item.is-active {
	background: var(--mb-red-tint);
	color: var(--mb-ink-900);
	border-left-color: var(--mb-red);
	clip-path: var(--mb-slope-sm);
}
.mb-catnav__count {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-ink-500);
	letter-spacing: 0.04em;
}
.mb-catnav__item.is-active .mb-catnav__count {
	color: var(--mb-ink-700);
}
.mb-catnav__item:hover .mb-catnav__count {
	color: var(--mb-red);
}
.mb-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--mb-space-3) 0;
	margin-bottom: var(--mb-space-4);
	border-bottom: var(--mb-border-ink);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.04em;
	color: var(--mb-ink-600);
	text-transform: uppercase;
	gap: var(--mb-space-3);
	flex-wrap: wrap;
}
.mb-toolbar__sort {
	display: flex;
	align-items: center;
	gap: var(--mb-space-3);
}
.mb-toolbar select {
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	border: var(--mb-border-ink);
	background: transparent;
	padding: 4px 8px;
	color: var(--mb-ink-900);
	cursor: pointer;
}
.mb-prod-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-4);
}
@media (min-width: 640px) {
	.mb-prod-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.mb-prod-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ============ PRODUKTDETAIL ============ */
.mb-pdp {
	padding: var(--mb-space-6) 0 var(--mb-space-9);
}
.mb-pdp__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-6);
}
@media (min-width: 960px) {
	.mb-pdp__layout {
		grid-template-columns: 7fr 5fr;
		gap: var(--mb-space-7);
		align-items: start;
	}
}
.mb-pdp__gallery {
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-3);
}
.mb-pdp__main-img {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: var(--mb-ink-900);
	clip-path: var(--mb-slope-lg);
}
.mb-pdp__thumbs {
	display: flex;
	gap: var(--mb-space-2);
	overflow-x: auto;
}
.mb-pdp__thumb {
	width: 88px;
	height: 88px;
	background-size: cover;
	background-position: center;
	border: 2px solid var(--mb-rule);
	flex-shrink: 0;
	cursor: pointer;
}
.mb-pdp__thumb.is-active {
	border-color: var(--mb-red);
}
.mb-pdp__buy {
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-4);
	position: sticky;
	top: 88px;
}
.mb-pdp__buy .mb-meta {
	margin: 0;
}
.mb-pdp__buy h1 {
	font-size: var(--mb-fs-h2);
	margin: 0;
}
.mb-pdp__sub {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-small);
	color: var(--mb-ink-600);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mb-pdp__lead {
	color: var(--mb-ink-700);
	font-size: var(--mb-fs-lead);
	line-height: var(--mb-lh-body);
}
.mb-konfig-wrap {
	position: relative;
	margin-top: var(--mb-space-4);
}
.mb-konfig-label {
	position: absolute;
	top: 0;
	left: var(--mb-space-4);
	transform: translateY(-50%);
	background: var(--mb-red);
	color: #fff;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: var(--mb-tracking-cap);
	text-transform: uppercase;
	padding: 4px var(--mb-space-2);
	font-weight: var(--mb-weight-strong);
	z-index: 2;
	white-space: nowrap;
}
.mb-konfig-block {
	background: var(--mb-ink-800);
	color: #fff;
	padding: var(--mb-space-5);
	clip-path: var(--mb-slope-lg);
}
.mb-konfig-block h3 {
	color: #fff;
	font-size: var(--mb-fs-h4);
	margin: 0 0 var(--mb-space-3);
}
.mb-konfig-block p {
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 var(--mb-space-4);
	font-size: var(--mb-fs-small);
}
.mb-konfig-block .mb-cta {
	width: 100%;
	justify-content: space-between;
}
.mb-divider-or {
	display: flex;
	align-items: center;
	gap: var(--mb-space-3);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: var(--mb-tracking-cap);
	color: var(--mb-ink-600);
	text-transform: uppercase;
}
.mb-divider-or::before,
.mb-divider-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--mb-rule);
}
.mb-buy-form {
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-3);
}
.mb-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mb-field label {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.04em;
	color: var(--mb-ink-600);
	text-transform: uppercase;
}
.mb-field select,
.mb-field input[type="number"] {
	font-family: var(--mb-font-body);
	font-size: var(--mb-fs-body);
	padding: var(--mb-space-2) var(--mb-space-3);
	border: var(--mb-border-ink);
	background: var(--mb-card);
	color: var(--mb-ink-900);
	border-radius: var(--mb-radius-input);
}
.mb-qty {
	display: flex;
	align-items: stretch;
	border: var(--mb-border-ink);
	max-width: 180px;
}
.mb-qty button {
	background: transparent;
	border: 0;
	width: 36px;
	height: 40px;
	color: var(--mb-ink-900);
	font-weight: var(--mb-weight-strong);
	font-size: var(--mb-fs-lead);
	cursor: pointer;
}
.mb-qty input {
	flex: 1;
	border: 0;
	text-align: center;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-body);
	background: transparent;
	color: var(--mb-ink-900);
	-moz-appearance: textfield;
}
.mb-qty input::-webkit-outer-spin-button,
.mb-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.mb-price-row {
	display: flex;
	align-items: baseline;
	gap: var(--mb-space-3);
	margin-top: var(--mb-space-2);
	border-top: var(--mb-border);
	padding-top: var(--mb-space-3);
}
.mb-price-row__big {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: var(--mb-fs-h3);
	color: var(--mb-ink-900);
	letter-spacing: -0.01em;
}
.mb-price-row__meta {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-ink-600);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mb-add-row {
	display: flex;
	gap: var(--mb-space-3);
}
.mb-trust-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-2);
	padding-top: var(--mb-space-3);
	border-top: var(--mb-border);
}
.mb-trust-strip .mb-pill {
	font-size: var(--mb-fs-meta);
}
.mb-trust-strip .mb-pill__icon {
	width: 24px;
	height: 24px;
	font-size: 13px;
}
.mb-callout {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-small);
	color: var(--mb-ink-700);
	letter-spacing: 0.02em;
}
.mb-callout strong {
	color: var(--mb-red);
}

.mb-pdp__tabs {
	margin-top: var(--mb-space-9);
}
.mb-pdp__tabs h2 {
	font-size: var(--mb-fs-h3);
	margin: 0 0 var(--mb-space-5);
}
.mb-pdp__tabs-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-6);
}
@media (min-width: 960px) {
	.mb-pdp__tabs-row {
		grid-template-columns: 5fr 7fr;
		gap: var(--mb-space-7);
	}
}
.mb-pdp__report-img {
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-position: center;
	clip-path: var(--mb-slope-md);
}
.mb-pdp__report-img + p {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-ink-600);
	text-transform: uppercase;
	letter-spacing: var(--mb-tracking-cap);
	margin-top: var(--mb-space-2);
}

/* ============ HOME — USP-STRIP (Vorteile prominent direkt unter Hero) ============ */
.mb-usp-strip {
	background: var(--mb-ink-900);
	color: #fff;
	padding: var(--mb-space-6) 0;
	border-top: 3px solid var(--mb-red);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mb-usp-strip__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--mb-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mb-usp-item {
	display: flex;
	align-items: flex-start;
	gap: var(--mb-space-3);
	font-family: var(--mb-font-body);
}
.mb-usp-item i {
	font-size: 38px;
	color: var(--mb-red);
	line-height: 1;
	flex-shrink: 0;
	margin-top: 2px;
}
.mb-usp-item strong {
	display: block;
	font-size: var(--mb-fs-lead);
	font-weight: var(--mb-weight-strong);
	letter-spacing: -0.01em;
	margin-bottom: 4px;
	color: #fff;
}
.mb-usp-item span {
	display: block;
	font-size: var(--mb-fs-body);
	color: rgba(255,255,255,0.72);
	line-height: 1.4;
}
@media (max-width: 960px) {
	.mb-usp-strip__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.mb-usp-strip__list { grid-template-columns: 1fr; gap: var(--mb-space-4); }
}

/* Preview-Hilfsklasse: Element mit .is-hidden-preview wird nicht gezeigt.
   Aktuell am mb-reviews-Skeleton (Startseite 1657), bis echte Bewertungen
   vorliegen — Klasse entfernen, sobald der Block befüllt ist (reversibel). */
.is-hidden-preview { display: none !important; }

/* ============ HOME — REVIEWS (Skeleton bis Janis echte Bewertungen liefert) ============ */
.mb-reviews {
	padding: var(--mb-space-9) 0;
	background: var(--mb-neutral-100);
}
.mb-reviews__head {
	margin-bottom: var(--mb-space-7);
	max-width: 720px;
}
.mb-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mb-space-5);
}
.mb-review-card {
	background: #fff;
	padding: var(--mb-space-5);
	border: 1px solid var(--mb-neutral-300);
	display: flex;
	flex-direction: column;
	gap: var(--mb-space-3);
}
.mb-review-card__logo {
	width: 88px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px dashed var(--mb-neutral-400);
	color: var(--mb-ink-500);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	text-transform: uppercase;
	letter-spacing: var(--mb-tracking-cap);
}
.mb-review-card__stars {
	color: var(--mb-red);
	letter-spacing: 2px;
	font-size: 18px;
}
.mb-review-card blockquote {
	margin: 0;
	font-size: var(--mb-fs-body);
	line-height: 1.45;
	color: var(--mb-ink-700);
	font-style: normal;
}
.mb-review-card footer {
	border-top: 1px solid var(--mb-neutral-200);
	padding-top: var(--mb-space-3);
	margin-top: auto;
}
.mb-review-card footer strong {
	display: block;
	font-size: var(--mb-fs-body);
	color: var(--mb-ink-900);
}
.mb-review-card footer span {
	display: block;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-ink-500);
	text-transform: uppercase;
	letter-spacing: var(--mb-tracking-cap);
	margin-top: 2px;
}
.mb-reviews__note {
	margin-top: var(--mb-space-5);
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	color: var(--mb-ink-500);
	text-align: center;
}
@media (max-width: 960px) {
	.mb-reviews__grid { grid-template-columns: 1fr; }
}

/* ============ WOOCOMMERCE LOOP OVERRIDE ============ */
/*
 * Bringt den WC-Standard-Produkt-Loop (ul.products li.product) auf mb-prod-card-Optik.
 * Scope: .woocommerce ul.products — trifft Loop-Grid und Cart-Cross-Sells,
 * aber keine anderen WC-Listen (z.B. .woocommerce-checkout).
 */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mb-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 640px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* Neben der Kategorienleiste bleiben zwischen 1024 und 1199 px nur rund
   580 px Breite — drei Karten wären dort zu schmal für Titel und Preis. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.mb-listing ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Karten-Optik analog .mb-prod-card */
.woocommerce ul.products li.product {
	background: var(--mb-card);
	border: 1px solid var(--mb-rule-strong);
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	transition: transform var(--mb-dur-fast) var(--mb-ease-cut),
		box-shadow var(--mb-dur-fast) var(--mb-ease-cut);
}
.woocommerce ul.products li.product:hover {
	transform: translate(-4px, -4px);
	box-shadow: var(--mb-shadow-press);
}

/* Produktbild */
.woocommerce ul.products li.product img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

/* Produkttitel */
.woocommerce ul.products li.product .woocommerce-loop-product__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);
	padding: var(--mb-space-3) var(--mb-space-3) 0;
	margin: 0;
}

/* Preis: JetBrains Mono */
.woocommerce ul.products li.product .price {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-body);
	color: var(--mb-ink-900);
	padding: var(--mb-space-1) var(--mb-space-3);
}

/* In-den-Warenkorb-Button: mb-cta-Optik mit Slope-Clip */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - var(--mb-space-6));
	margin: var(--mb-space-2) var(--mb-space-3) var(--mb-space-3);
	padding: var(--mb-space-2) var(--mb-space-4);
	background: var(--mb-red);
	color: #fff;
	font-family: var(--mb-font-body);
	font-weight: var(--mb-weight-strong);
	font-size: var(--mb-fs-small);
	border: 0;
	clip-path: var(--mb-slope-sm);
	text-decoration: none;
	transition: background var(--mb-dur-fast) var(--mb-ease-cut),
		transform var(--mb-dur-fast) var(--mb-ease-cut);
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
	background: var(--mb-red-hover);
	color: #fff;
	transform: translate(-2px, -2px);
}

/* Sale-Badge: Sand-Hintergrund */
.woocommerce ul.products li.product .onsale {
	background: var(--mb-sand);
	color: var(--mb-sand-ink);
	border-radius: 0;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	font-weight: var(--mb-weight-strong);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	min-height: auto;
	min-width: auto;
	padding: 4px var(--mb-space-2);
	line-height: 1;
}

/* ===================================================================== *
 * ETAPPE 4 — PDP-PATTERN-SWITCHING + CATNAV-ANCHOR
 * Ein Single-Product-Template für beide Muster:
 *  - Konfigurator-Produkte (Body-Class mb-pdp--konfigurator via
 *    Produkt-Meta _mb_aw_profile, gesetzt in functions.php):
 *    Preis + Add-to-Cart aus, Konfigurator-Panel an.
 *  - Zubehör-Produkte (ohne Body-Class): WC-Standard-Kaufpanel,
 *    Konfigurator-Panel aus.
 * ===================================================================== */

/*
 * Konfigurator-Produkt: Direktkauf-Button aus (Preis entsteht erst im
 * Konfigurator, ein Warenkorb-Klick ohne Länge/Farbe ergäbe keinen Sinn).
 * Der Ab-Preis (.mb-pdp__price, Elementor-Preis-Widget) bleibt sichtbar —
 * er zeigt den Laufmeter-/Quadratmeterpreis aus dem Filter
 * woocommerce_get_price_html (functions.php) als Einstieg vor dem
 * Konfigurator-Panel.
 */
body.mb-pdp--konfigurator .mb-pdp__cart {
	display: none;
}

/*
 * Preis-Widget auf der PDP: Laufmeter-Preis groß (Basis-Preisoptik über
 * .price geerbt, JetBrains Mono), Quadratmeter-Umrechnung klein und
 * gedämpft darunter — gleiches Muster wie im Loop (mb-abprice__m2 in
 * shop-listing.css), hier nur größer skaliert für die PDP-Prominenz.
 */
.mb-pdp__price .mb-abprice__lfm {
	display: block;
	font-size: var(--mb-fs-h3);
	font-weight: var(--mb-weight-strong);
	color: var(--mb-ink-900);
}
.mb-pdp__price .mb-abprice__m2 {
	display: block;
	font-size: var(--mb-fs-small);
	color: var(--mb-ink-500);
	margin-top: var(--mb-space-1);
}
.mb-pdp__price .mb-abprice__tax {
	margin-left: var(--mb-space-1);
}

/* Zubehör-Produkt: Konfigurator-Panel ausblenden */
body.single-product:not(.mb-pdp--konfigurator) .mb-konfig-wrap {
	display: none;
}

/* Catnav-Items sind im Shop echte Links (Mockup: Buttons) */
a.mb-catnav__item,
a.mb-catnav__item:hover {
	text-decoration: none;
}

/* Dielen-spezifischer Callout (Längen-Hinweis) nur auf Konfigurator-PDPs */
body.single-product:not(.mb-pdp--konfigurator) .mb-callout--konfig {
	display: none;
}

/* Zubehör-Kaufpanel: WC-Add-to-Cart-Button in CI-Optik (statt WC-Lila) */
.woocommerce .mb-pdp__cart button.single_add_to_cart_button,
.woocommerce .mb-pdp__cart button.single_add_to_cart_button.alt,
.woocommerce .mb-pdp__cart button.single_add_to_cart_button.disabled {
	background: var(--mb-red);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-family: var(--mb-font-body);
	font-weight: var(--mb-weight-strong);
	font-size: var(--mb-fs-body);
	padding: 14px 28px;
	clip-path: var(--mb-slope-sm);
	transition: background var(--mb-dur-fast) var(--mb-ease-cut),
		transform var(--mb-dur-fast) var(--mb-ease-cut);
}
.woocommerce .mb-pdp__cart button.single_add_to_cart_button:hover,
.woocommerce .mb-pdp__cart button.single_add_to_cart_button.alt:hover,
.woocommerce .mb-pdp__cart button.single_add_to_cart_button.disabled:hover {
	background: var(--mb-red-hover);
	color: #fff;
	transform: translate(-2px, -2px);
}

/* ===================================================================== *
 * REVIEW-FIXES 2026-06-10 — Topbar, Loop-Karten, PDP-Ergänzungen
 * ===================================================================== */

/* Topbar (Mockup: schwarzer Mono-Balken über dem Header) */
.mb-topbar {
	background: var(--mb-ink-900);
	color: #fff;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: var(--mb-space-1) var(--mb-space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--mb-space-3);
	align-items: center;
	justify-content: space-between;
}
.mb-topbar a {
	color: #fff;
	text-decoration: none;
	opacity: 0.85;
}
.mb-topbar a:hover {
	opacity: 1;
	color: var(--mb-red);
}
@media (max-width: 640px) {
	.mb-topbar__info { display: none; }
	.mb-topbar { justify-content: center; }
}

/* Loop-Karten: Spec-Zeile, Trennlinie vor Preis, Versand-Lead, Button vollbreit */
.woocommerce ul.products li.product .mb-loop-spec {
	display: block;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: var(--mb-tracking-cap);
	text-transform: uppercase;
	color: var(--mb-ink-500);
	margin-bottom: var(--mb-space-1);
}
.woocommerce ul.products li.product .price {
	border-top: var(--mb-border);
	padding-top: var(--mb-space-3);
	margin-top: var(--mb-space-3);
	display: block;
}
.woocommerce ul.products li.product .mb-loop-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;
	text-transform: uppercase;
	color: var(--mb-ink-600);
	margin: var(--mb-space-2) 0;
}
.woocommerce ul.products li.product .mb-loop-lead::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mb-success, #1f9d55);
	flex-shrink: 0;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
	display: flex;
	width: 100%;
	justify-content: center;
}

/* PDP: Technische-Daten-Bild — [mb_tech_profil] (functions.php). Standard
   ist der Foto-Fallback (Slope-Optik wie bisher); der Profilschnitt-SVG
   bekommt eine eigene, technischere Optik (siehe .mb-tech-profil__img
   direkt darunter — hoehere Spezifitaet durch die Klasse gewinnt). */
.mb-pdp__report-wrap img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	clip-path: var(--mb-slope-md);
	display: block;
}
.mb-pdp__report-wrap .mb-tech-profil__img {
	aspect-ratio: auto;
	width: 100%;
	height: auto;
	object-fit: contain;
	clip-path: none;
	background: var(--mb-neutral-100);
	border: var(--mb-border);
	padding: var(--mb-space-5) var(--mb-space-4);
}

/* PDP: „Passendes Zubehör" (Related Products) — nur auf Zubehör-PDPs */
body.mb-pdp--konfigurator .mb-pdp__related {
	display: none;
}
.mb-pdp__related h2 {
	font-size: var(--mb-fs-h3);
	margin: 0 0 var(--mb-space-5);
}

/* Related-Widget bringt eine eigene Überschrift mit („Ähnliche Produkte")
   — die Sektions-Headline „Passendes Zubehör" kommt aus dem Template */
.mb-pdp__related .elementor-widget-woocommerce-product-related h2 {
	display: none;
}

/* ============ HOME — ÜBER MABETEC (#3093) ============
   Aus Widget-Vorlage (assets/css/widgets/ueber-mabetec.css) übernommen.
   Icons mb-icon--medal / --handshake sind in components.css registriert.
   Bilder sind Platzhalter („Foto folgt") bis zum Foto-Shooting Haslach. */
.mb-about {
	padding: var(--mb-space-8) 0;
	background: var(--mb-paper);
}

/* ---------- Kopf: Eyebrow + Firmenname + rote Unterstreichung ---------- */
.mb-about__head {
	margin-bottom: var(--mb-space-6);
}
.mb-about__head .mb-meta {
	display: block;
	color: var(--mb-red);
	margin-bottom: var(--mb-space-2);
}
.mb-about__head h2 {
	margin: 0;
	padding-bottom: var(--mb-space-3);
	border-bottom: 3px solid var(--mb-red);
	display: inline-block;
}

/* ---------- Obere Zone: Fließtext links, Feature-Grid rechts ---------- */
.mb-about__intro {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
	gap: var(--mb-space-7);
	align-items: start;
}
.mb-about__text {
	font-weight: var(--mb-weight-strong);
	font-size: var(--mb-fs-body);
	line-height: var(--mb-lh-body);
	color: var(--mb-ink-900);
	margin: 0;
	max-width: 42ch;
}

/* Feature-Grid 2x2 */
.mb-about__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mb-space-5) var(--mb-space-5);
}
.mb-about__feature {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--mb-space-3);
	align-items: start;
}

/* rote, kantige Icon-Kachel statt rundem Tile der Vorlage */
.mb-about__badge {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	background: var(--mb-red);
	color: #fff;
	border-radius: var(--mb-radius-input);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--mb-shadow-press);
}
.mb-about__badge .mb-icon {
	width: 28px;
	height: 28px;
}

.mb-about__feature-title {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-strong);
	font-size: var(--mb-fs-lead);
	line-height: 1.15;
	color: var(--mb-ink-900);
	margin: 0 0 var(--mb-space-1);
}
.mb-about__feature p {
	margin: 0;
	font-size: var(--mb-fs-small);
	line-height: 1.45;
	color: var(--mb-ink-600);
}

/* ---------- Bilder-Reihe (4 Frames) ---------- */
.mb-about__gallery {
	margin-top: var(--mb-space-7);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mb-space-4);
}
.mb-about__shot {
	position: relative;
	aspect-ratio: 5 / 4;
	background: var(--mb-ink-800);
	background-size: cover;
	background-position: center;
	border: var(--mb-border);
	/* roter Akzent statt der Wulst-Rahmen der Vorlage */
	border-top: 3px solid var(--mb-red);
	display: flex;
	align-items: flex-end;
}
.mb-about__shot--placeholder {
	background-image:
		linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 55%),
		repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px);
}
.mb-about__shot-note {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.82);
	padding: var(--mb-space-2) var(--mb-space-3);
	line-height: 1.35;
}
/* Echtes Foto füllt die ganze Kachel, die Beschriftung liegt unten links
   auf einem dunklen Verlauf. */
.mb-about__shot {
	overflow: hidden;
}
.mb-about__shot-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mb-about__shot:has(.mb-about__shot-img)::after {
	content: "";
	position: absolute;
	inset: 45% 0 0 0;
	background: linear-gradient(to bottom, rgba(2, 10, 10, 0) 0%, rgba(2, 10, 10, 0.72) 100%);
	pointer-events: none;
}
.mb-about__shot:has(.mb-about__shot-img) .mb-about__shot-note {
	position: relative;
	z-index: 1;
	color: #fff;
}

/* ---------- Adresszeile ---------- */
.mb-about__address {
	margin: var(--mb-space-6) 0 0;
	text-align: center;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-small);
	color: var(--mb-ink-700);
	letter-spacing: 0.01em;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.mb-about__intro {
		grid-template-columns: 1fr;
		gap: var(--mb-space-6);
	}
	.mb-about__gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.mb-about {
		padding: var(--mb-space-6) 0;
	}
	.mb-about__features {
		grid-template-columns: 1fr;
		gap: var(--mb-space-4);
	}
	.mb-about__gallery {
		grid-template-columns: 1fr;
	}
}

/* ============ HOME — EINSATZBEREICHE (#3092) ============
   Split-Sektion: Text links, fotorealistisches Haus-Bild rechts (22°-Slope am
   linken Bildrand) mit beschrifteten Pill-Hotspots + Tooltips. Icons über das
   mb-icon-Masken-System (lokale Phosphor-SVGs). Aus Widget-Vorlage übernommen. */
.mb-usecases {
	position: relative;
	background: var(--mb-paper);
	overflow: hidden;
	isolation: isolate;
}
.mb-usecases__media {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	left: 43%;
	z-index: 1;
	line-height: 0;
}
.mb-usecases__media img {
	width: 100%; height: 100%;
	display: block; object-fit: cover; object-position: center;
	clip-path: polygon(29% 0, 100% 0, 100% 100%, 0 100%);
}
.mb-usecases__inner { position: relative; z-index: 2; pointer-events: none; }
.mb-usecases__text {
	max-width: 40%;
	padding: var(--mb-space-6) 0;
	min-height: 660px;
	display: flex; flex-direction: column; justify-content: center;
}
.mb-usecases__title {
	font-size: clamp(2.75rem, 5vw, 4.25rem);
	line-height: 0.98; letter-spacing: -0.02em;
	margin: 0 0 var(--mb-space-2);
}
.mb-usecases__sub {
	font-family: var(--mb-font-display); font-weight: var(--mb-weight-display);
	font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.15;
	color: var(--mb-red); margin: 0 0 var(--mb-space-4);
}
.mb-usecases__lead {
	font-size: var(--mb-fs-lead); color: var(--mb-ink-700);
	max-width: 30em; margin: 0 0 var(--mb-space-6);
}
.mb-usecases__actions { display: flex; flex-wrap: wrap; gap: var(--mb-space-3); pointer-events: auto; }
/* Primärer CTA: weiße Schrift erzwingen (0,3,0) gegen den Elementor-Kit
   `.elementor-kit-7 a { color: rot }` — sonst rot-auf-rot unsichtbar. */
.mb-usecases__actions .mb-cta:not(.mb-cta--muted) { color: #fff; }
.mb-usecases__actions .mb-cta--muted {
	background: var(--mb-neutral-300); color: var(--mb-ink-800);
}
.mb-usecases__actions .mb-cta--muted:hover { background: var(--mb-neutral-400); }
.mb-usecases .mb-cta::after { content: "»"; }

/* Chip-Liste — nur Mobile */
.mb-usecases__chips { display: none; list-style: none; margin: 0; padding: 0; pointer-events: auto; }
.mb-usecases__chips a {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--mb-red); color: #fff;
	border-radius: var(--mb-radius-pill);
	padding: 6px 14px 6px 6px;
	font-family: var(--mb-font-body); font-weight: var(--mb-weight-strong); font-size: 0.8rem;
}
.mb-usecases__chips a .mb-uc-pill__badge { width: 24px; height: 24px; }
.mb-usecases__chips a .mb-uc-pill__badge .mb-icon { width: 13px; height: 13px; }

/* ---- Pill-Hotspot ---- */
.mb-uc-pill {
	position: absolute; transform: translateY(-50%);
	z-index: 3;
	display: inline-flex; align-items: center; gap: 9px;
	padding: 5px 18px 5px 5px;
	background: var(--mb-red); color: #fff;
	border: none; border-radius: var(--mb-radius-pill);
	box-shadow: 0 4px 16px rgba(2, 10, 10, 0.38);
	font-family: var(--mb-font-body); font-weight: var(--mb-weight-strong);
	font-size: 0.82rem; letter-spacing: 0.01em; white-space: nowrap;
	cursor: pointer;
	transition: background var(--mb-dur-fast) var(--mb-ease-cut), transform var(--mb-dur-fast) var(--mb-ease-cut);
}
.mb-uc-pill__badge {
	width: 30px; height: 30px; flex: 0 0 auto;
	border-radius: 50%; background: #fff; color: var(--mb-red);
	display: inline-flex; align-items: center; justify-content: center;
}
.mb-uc-pill__badge .mb-icon { width: 16px; height: 16px; }
.mb-uc-pill:hover, .mb-uc-pill:focus-visible {
	background: var(--mb-ink-900); outline: none; transform: translateY(-50%) scale(1.04);
}
.mb-uc-pill:hover, .mb-uc-pill:focus-within, .mb-uc-pill.is-open { z-index: 20; }

/* ---- Tooltip ---- */
.mb-uc-pill__tip {
	position: absolute; left: 0; bottom: calc(100% + 12px);
	width: max-content; max-width: 250px;
	background: var(--mb-card); color: var(--mb-ink-900);
	border: var(--mb-border-thick); clip-path: var(--mb-slope-md);
	padding: var(--mb-space-3) var(--mb-space-4);
	box-shadow: var(--mb-shadow-press);
	text-align: left; white-space: normal;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--mb-dur-base) var(--mb-ease-cut),
	            transform var(--mb-dur-base) var(--mb-ease-cut),
	            visibility 0s linear var(--mb-dur-base);
}
.mb-uc-pill__tip h3 {
	font-family: var(--mb-font-display); font-size: var(--mb-fs-small);
	line-height: 1.2; margin: 0 0 4px; color: var(--mb-ink-900);
}
.mb-uc-pill__tip p {
	font-size: var(--mb-fs-meta); line-height: 1.45; color: var(--mb-ink-700);
	margin: 0 0 var(--mb-space-2); font-weight: var(--mb-weight-body);
}
.mb-uc-pill__tip a {
	font-family: var(--mb-font-mono); font-size: var(--mb-fs-meta);
	font-weight: var(--mb-weight-medium); text-transform: uppercase; letter-spacing: 0.04em;
}
.mb-uc-pill::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px;
	pointer-events: none;
}
.mb-uc-pill--tip-below::after { bottom: auto; top: 100%; }
.mb-uc-pill:hover::after, .mb-uc-pill:focus-within::after, .mb-uc-pill.is-open::after { pointer-events: auto; }
.mb-uc-pill:hover .mb-uc-pill__tip,
.mb-uc-pill:focus-within .mb-uc-pill__tip,
.mb-uc-pill.is-open .mb-uc-pill__tip {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity var(--mb-dur-base) var(--mb-ease-cut), transform var(--mb-dur-base) var(--mb-ease-cut);
}
.mb-uc-pill--tip-below .mb-uc-pill__tip { bottom: auto; top: calc(100% + 12px); transform: translateY(-6px); }
.mb-uc-pill--tip-below:hover .mb-uc-pill__tip,
.mb-uc-pill--tip-below:focus-within .mb-uc-pill__tip,
.mb-uc-pill--tip-below.is-open .mb-uc-pill__tip { transform: translateY(0); }
.mb-uc-pill--tip-left .mb-uc-pill__tip { left: auto; right: 0; }
.mb-uc-pill--flip { flex-direction: row-reverse; padding: 5px 5px 5px 18px; }

/* Festes Bildformat mit Hotspots (seit 2.14.1). Anlass: Thorsten — bei sehr
   breitem Browser „stimmt die Position der einzelnen Badges überhaupt nicht
   mehr. Der Balkon ist zum Beispiel gar nicht mehr sichtbar." Ursache: Die
   Bildfläche hatte eine feste Höhe (660 px), das Bild lief per cover und die
   Badges waren in Prozent der FLÄCHE gesetzt — bei 3360 px war die Fläche
   2,9 : 1 statt 3 : 2, oben und unten fehlte ein Drittel, die Badges
   rutschten vom Motiv. Jetzt:
   - Bild und Badges liegen gemeinsam im Rahmen .mb-usecases__frame im
     Bildformat 3 : 2; Badges in Prozent des BILDES (sitzen auf jeder Breite
     auf Balkon, Terrasse, Treppe, Poolumrandung).
   - Der Rahmen deckt die Fläche wie cover (max(100cqw, 150cqh), zentriert)
     — wird die Fläche doch einmal höher als 3 : 2 (Text höher als das Bild
     bei ~900–1300 px), wird links/rechts etwas angeschnitten, die Badges
     wandern aber mit dem Bild.
   - Die Textspalte ist mindestens 38vw hoch (= 57vw Bildbreite / 1,5), so
     wächst der Abschnitt mit der Breite in der Höhe mit.
   - Der Schrägschnitt liegt jetzt auf der Fläche statt auf dem Bild; die
     Badges bleiben rechts des Keils (Poolumrandung bei 34 %). */
@media (min-width: 901px) {
	.mb-usecases__media {
		container-type: size;
		clip-path: polygon(29% 0, 100% 0, 100% 100%, 0 100%);
	}
	.mb-usecases__frame {
		position: absolute;
		left: 50%;
		top: 50%;
		width: max(100cqw, 150cqh);
		aspect-ratio: 3 / 2;
		transform: translate(-50%, -50%);
	}
	.mb-usecases__media .mb-usecases__frame img {
		width: 100%;
		height: 100%;
		clip-path: none;
	}
	.mb-usecases__text { min-height: max(38vw, 420px); }
	/* KI-Zeile am sichtbaren Rand der Fläche, nicht am (angeschnittenen)
	   Rand des Rahmens: Versatz = Überstand des Rahmens über die Fläche. */
	.mb-usecases__frame > .mb-ki-hinweis--bild {
		right: calc((max(100cqw, 150cqh) - 100cqw) / 2);
		bottom: calc((max(100cqw, 150cqh) / 1.5 - 100cqh) / 2);
	}
}

/* Responsiv: unter 900px stapeln (Bild oben, Text darunter) */
@media (max-width: 900px) {
	.mb-usecases { overflow: hidden; }
	.mb-usecases__media { position: static; width: 100%; inset: auto; }
	.mb-usecases__media img { width: 100%; height: auto; max-width: 100%; clip-path: none; }
	.mb-usecases__text { max-width: 100%; min-height: 0; padding: var(--mb-space-6) 0 0; }
	.mb-uc-pill { display: none; }
	.mb-usecases__chips { display: flex; flex-wrap: wrap; gap: var(--mb-space-2); margin: var(--mb-space-5) 0 0; }
}
@media (max-width: 768px) {
	.mb-usecases__title { font-size: clamp(2rem, 9vw, 2.75rem); }
}

/* ============ PAKET 2 (23.09.2026) — FARBKACHELN SEITE 1790 ============
   Abschnitt „Farben“ auf /aw-diele/ (Elementor-Abschnitt d49a36d, CSS-Klasse
   mb-farbkacheln): sechs Kacheln — Roh (Platzhalter „Foto folgt“, SVG 4 : 3)
   und die fünf Trentau-Oberflächen (480 × 480). Alle Bilder quadratisch, damit
   die Beschriftungen auf einer Linie stehen. Mobil zwei Kacheln je Zeile
   (Spaltenbreite 50 % in den Elementor-Einstellungen). */
.mb-farbkacheln .elementor-widget-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
/* ============ ENDE PAKET 2 ============ */