/* ============ INHALTSSEITEN — BAUKASTEN (seit 2.16.0) ============
   Ersetzt den von allwetterdiele.de übernommenen Seitenaufbau (zentrierte
   Überschriften, rote Chevron-Listen, rote i-Kreise, Voll-Breite-Trenner,
   Standard-Akkordeon) durch Muster im Stil der Startseite: linksbündig,
   1-px-Linien statt Kreise und Schatten, Mono-Kennzahlen, Schrägschnitt an
   Bildern. Elementor liefert nur die Struktur (Container mit mb-*-Klassen,
   gebaut von .migration/2026-09-29-inhaltsseiten-aufbau.php), die Texte
   stehen unverändert in den Widgets.

   Lädt nach pages.css und vor elementor-bridge.css (functions.php).
   Alle Container haben content_width=full (kein .e-con-inner); Layout per
   CSS-Grid direkt auf dem Container wie beim Seitenkopf (.e-con.mb-page-hero).

   Bildflächen: festes Seitenverhältnis, das exakt dem Bildformat entspricht
   (quer 3:2, hoch 2:3, quadrat 1:1, 4:3) — nie feste Höhe mit Beschnitt
   (known-issues.md #45). Bildregeln mit Spezifität >= (0,2,1) gegen
   Elementors `.elementor img { height:auto }`.

   Muster (Kurzname → Klasse):
     Sektion ............ .mb-ih [--neutral | --eng | --dunkel]
     Sektionskopf ....... .mb-ih__titel (Überschrift) / .mb-ih__lead (Text)
     Einleitung ......... .mb-einleitung (Text links, Bild rechts)
     Text-Bild-Wechsel .. .mb-split [--rechts] > .mb-split__bild + .mb-split__text
     Textraster ......... .mb-textraster (Textblöcke zweispaltig)
     Merkmal-Raster ..... .mb-merkmale (Icon-Boxen als nummerierte Zellen)
     Kachel-Raster ...... .mb-kacheln > .mb-kachel
     Kompakte Liste ..... .mb-liste-kompakt (Icon-Boxen nur mit Titel)
     Datenliste ......... .mb-daten > .mb-daten__liste + Bild
     Farbflächen ........ .mb-farben (Bild-Widgets mit Bildunterschrift)
     Schrittfolge ....... .mb-schritte > .mb-schritt [--fertig]
     Etappen ............ .mb-etappe (Verlegung: Nummer, Text, Bild)
     Fragen ............. .mb-faq > .mb-faq__seite + .mb-faq__liste (Toggle)
     Kontaktkarten ...... .mb-kontakt > Container je Karte
     Lesetext ........... .mb-lesetext
     Hinweis ............ .mb-hinweis
     Bild ............... [mb_inhaltsbild] → figure.mb-bild (inc/inhalte.php)
*/

/* ---------- Sektion ---------- */
.e-con.mb-ih {
	--mb-ih-pad: max(var(--mb-gutter-desk), calc((100% - var(--mb-container)) / 2 + var(--mb-gutter-desk)));
	--mb-titel-linie: 2px; /* Unterstreichung der Sektionsüberschrift (Bezug für bündige Linien, 2.18.7) */
	display: block;
	padding: var(--mb-space-8) var(--mb-ih-pad);
	margin: 0;
	background: var(--mb-paper);
}
.e-con.mb-ih--neutral { background: var(--mb-neutral-100); }
.e-con.mb-ih--eng { padding-top: var(--mb-space-6); padding-bottom: var(--mb-space-6); }
.e-con.mb-ih + .e-con.mb-ih:not(.mb-ih--neutral):not(.mb-ih--dunkel) { padding-top: 0; }
.e-con.mb-ih--neutral + .e-con.mb-ih { padding-top: var(--mb-space-8); }
@media (max-width: 768px) {
	.e-con.mb-ih {
		--mb-ih-pad: var(--mb-gutter-mobile);
		padding-top: var(--mb-space-6);
		padding-bottom: var(--mb-space-6);
	}
	.e-con.mb-ih--neutral + .e-con.mb-ih { padding-top: var(--mb-space-6); }
}

/* Innerhalb der Sektionen: Widgets und Container ohne Elementor-Abstände */
.mb-ih .e-con { --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0; padding: 0; margin: 0; }
.mb-ih .elementor-widget { margin: 0; width: 100%; max-width: 100%; }
.mb-ih .elementor-widget + .elementor-widget,
.mb-ih .elementor-widget + .e-con,
.mb-ih .e-con + .elementor-widget,
.mb-ih .e-con + .e-con { margin-top: var(--mb-space-4); }

/* Schriften im Inhalt: linksbündig, Kit-Ausrichtungen neutralisieren */
.mb-ih .elementor-heading-title,
.mb-ih .elementor-widget-text-editor,
.mb-ih .elementor-icon-box-content { text-align: left; }
.mb-ih .elementor-widget-text-editor { color: var(--mb-ink-800); font-size: var(--mb-fs-body); line-height: var(--mb-lh-body); }
.mb-ih .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.mb-ih .elementor-widget-text-editor ul { margin: 0 0 var(--mb-space-3); padding: 0; list-style: none; }
.mb-ih .elementor-widget-text-editor ul li { position: relative; padding: 3px 0 3px 22px; }
.mb-ih .elementor-widget-text-editor ul li::before { content: ""; position: absolute; left: 2px; top: 0.95em; width: 10px; height: 2px; background: var(--mb-red); }
.mb-ih .elementor-widget-text-editor ol { margin: 0 0 var(--mb-space-3); padding: 0 0 0 24px; }
.mb-ih .elementor-widget-text-editor ol li::marker { font-family: var(--mb-font-mono); color: var(--mb-red); font-size: var(--mb-fs-small); }

/* Überschriften, die in Text-Widgets stehen (h2 im Editor-Inhalt) */
.mb-ih .elementor-widget-text-editor h2,
.mb-ih .elementor-widget-text-editor h3 {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, var(--mb-fs-h3));
	line-height: 1.12;
	color: var(--mb-ink-900);
	margin: 0 0 var(--mb-space-3);
	text-align: left;
	hyphens: manual;
}

/* ---------- Sektionskopf ---------- */
.mb-ih .mb-ih__titel { max-width: 820px; }
.mb-ih .mb-ih__titel .elementor-heading-title {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: clamp(2rem, 1.2rem + 2.2vw, var(--mb-fs-h2));
	line-height: 1.08;
	color: var(--mb-ink-900);
	padding-bottom: var(--mb-space-3);
	border-bottom: var(--mb-titel-linie) solid var(--mb-red);
	hyphens: manual;
}
.mb-ih .mb-ih__titel--klein .elementor-heading-title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, var(--mb-fs-h3)); }
.mb-ih .mb-ih__untertitel .elementor-heading-title {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	font-weight: 500;
	letter-spacing: var(--mb-tracking-cap);
	text-transform: uppercase;
	color: var(--mb-red);
}
.mb-ih .mb-ih__lead { max-width: 820px; }
.mb-ih .mb-ih__lead.elementor-widget-text-editor { font-size: 1.125rem; color: var(--mb-ink-700); }
.mb-ih .mb-ih__titel + .mb-ih__lead { margin-top: var(--mb-space-3); }
.mb-ih .mb-ih__lead + .e-con,
.mb-ih .mb-ih__titel + .e-con { margin-top: var(--mb-space-6); }

/* ---------- Bild ([mb_inhaltsbild]) ---------- */
.mb-bild { position: relative; margin: 0; width: 100%; }
.mb-bild__rahmen {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--mb-neutral-200);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 9% 100%, 0 78%);
}
.mb-bild--hoch .mb-bild__rahmen { aspect-ratio: 2 / 3; clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%, 0 90%); }
.mb-bild--quadrat .mb-bild__rahmen { aspect-ratio: 1 / 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 86%); }
.mb-bild--4x3 .mb-bild__rahmen { aspect-ratio: 4 / 3; }
.mb-bild--gerade .mb-bild__rahmen { clip-path: none; }
.mb-bild__rahmen img.mb-bild__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.mb-bild figcaption {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: 0.02em;
	color: var(--mb-ink-600);
	margin-top: var(--mb-space-2);
	padding-top: var(--mb-space-1);
	border-top: var(--mb-border);
}
/* Bildunterzeile: Bildunterschrift links, KI-Kennzeichnung rechts in derselben
   Zeile; ohne Bildunterschrift steht die Kennzeichnung allein rechts. */
.mb-bild figcaption.mb-bild__unterzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: var(--mb-space-3);
}
.mb-bild figcaption.mb-bild__unterzeile .mb-ki-hinweis { margin-left: auto; }
.mb-bild figcaption.mb-bild__unterzeile--ki {
	justify-content: flex-end;
	margin-top: var(--mb-space-1);
	padding-top: 0;
	border-top: 0;
}
/* Vorschlagskennung (nur solange die Besprechungshinweise aktiv sind) */
.mb-bild__vorschlag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: #7500EC;
	color: #fff;
	font-family: var(--mb-font-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.04em;
	padding: 6px 8px;
	pointer-events: none;
}
.mb-bild--platzhalter .mb-bild__rahmen {
	display: grid;
	place-items: center;
	background: repeating-linear-gradient(135deg, #ecebe7 0 10px, #f3f2ef 10px 20px);
}
.mb-bild--platzhalter .mb-bild__rahmen span {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	text-transform: uppercase;
	letter-spacing: var(--mb-tracking-cap);
	color: var(--mb-ink-600);
}

/* ---------- Einleitung ---------- */
.e-con.mb-einleitung {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--mb-space-7);
	align-items: center;
}
.mb-einleitung > .e-con + .elementor-widget,
.mb-einleitung > .elementor-widget + .elementor-widget { margin-top: 0; }
.mb-einleitung .mb-ih__lead.elementor-widget-text-editor { font-size: var(--mb-fs-lead); line-height: 1.5; color: var(--mb-ink-800); }

/* ---------- Text-Bild-Wechsel ---------- */
.e-con.mb-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--mb-space-7);
	align-items: center;
}
.e-con.mb-split--rechts { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.e-con.mb-split--rechts > .mb-split__bild { order: 2; }
.e-con.mb-split--hoch { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.e-con.mb-split--rechts.mb-split--hoch { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.mb-ih .e-con.mb-split > * { margin-top: 0; }
.mb-ih .e-con.mb-split + .e-con.mb-split,
.mb-ih .e-con.mb-split + .e-con.mb-textraster,
.mb-ih .e-con.mb-textraster + .e-con.mb-split { margin-top: var(--mb-space-8); }
.mb-split__text .elementor-widget-text-editor { max-width: 62ch; }

/* ---------- Textraster ---------- */
.e-con.mb-textraster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mb-space-6) var(--mb-space-7);
}
.mb-ih .e-con.mb-textraster > * { margin-top: 0; }
.mb-textraster > .elementor-widget-text-editor,
.mb-textraster > .e-con { border-top: 2px solid var(--mb-ink-900); padding-top: var(--mb-space-4); }
.mb-textraster .elementor-widget-text-editor h2 { font-size: 1.5rem; }
/* Besprechungs-Anker sind keine Rasterzellen (Widget per :has ausgeblendet) */
.mb-textraster > .elementor-widget-shortcode:has(.mb-bespr-anker) { display: none; }

/* ---------- Merkmal-Raster ---------- */
.e-con.mb-merkmale {
	--mb-merkmal-spalten: 1;
	display: grid;
	grid-template-columns: repeat(var(--mb-merkmal-spalten), minmax(0, 1fr));
	border-top: 2px solid var(--mb-ink-900);
	border-left: var(--mb-border);
	counter-reset: mb-merkmal;
}
.mb-ih .e-con.mb-merkmale > * { margin-top: 0; }
.mb-merkmale > .elementor-widget-icon-box {
	counter-increment: mb-merkmal;
	background: var(--mb-card);
	border-right: var(--mb-border);
	border-bottom: var(--mb-border);
	padding: var(--mb-space-4) var(--mb-space-4) var(--mb-space-5);
}
.mb-merkmale > .elementor-widget-icon-box::before {
	content: counter(mb-merkmal, decimal-leading-zero);
	display: block;
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	letter-spacing: var(--mb-tracking-cap);
	color: var(--mb-red);
	margin-bottom: var(--mb-space-2);
}
.mb-liste-kompakt .elementor-icon-box-icon,
.mb-daten__liste .elementor-icon-box-icon,
.mb-kachel .elementor-icon-box-icon { display: none; }
.mb-merkmale .elementor-icon-box-wrapper,
.mb-kachel .elementor-icon-box-wrapper { display: block; text-align: left; }
.mb-merkmale .elementor-icon-box-title,
.mb-kachel .elementor-icon-box-title {
	font-family: var(--mb-font-display);
	font-weight: 700;
	font-size: 1.1875rem;
	line-height: 1.3;
	color: var(--mb-ink-900);
	margin: 0 0 var(--mb-space-2);
}
.mb-merkmale .elementor-icon-box-title a,
.mb-kachel .elementor-icon-box-title a { color: inherit; }
.mb-merkmale .elementor-icon-box-description,
.mb-kachel .elementor-icon-box-description { font-size: var(--mb-fs-small); line-height: 1.55; color: var(--mb-ink-700); margin: 0; }
.mb-merkmale .elementor-icon-box-description ul,
.mb-merkmale .elementor-icon-box-content > ul { margin: var(--mb-space-2) 0 0; padding: 0; list-style: none; font-size: var(--mb-fs-small); line-height: 1.55; color: var(--mb-ink-700); }
.mb-merkmale .elementor-icon-box-description li,
.mb-merkmale .elementor-icon-box-content > ul li { position: relative; padding-left: 14px; }
.mb-merkmale .elementor-icon-box-description li::before,
.mb-merkmale .elementor-icon-box-content > ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--mb-red); }
.mb-merkmale .elementor-icon-box-description:empty { display: none; }

/* Aufteilung nach Anzahl (2.18.7, Thorsten 30.09.2026: „Die Aufteilung sollte
   bei sechs Stück drei drei sein."): 3 → 3, 4 → 4, 5 → 3+2, 6 → 3+3,
   7 → 4+3, 8 → 4+4, 9 → 3+3+3. Gezählt werden nur Merkmal-Kacheln
   (ausgeblendete Anker-Widgets nicht). */
@media (min-width: 768px) {
	.e-con.mb-merkmale { --mb-merkmal-spalten: 2; }
	.e-con.mb-merkmale:has(> :nth-child(1 of .elementor-widget-icon-box):nth-last-child(1 of .elementor-widget-icon-box)) { --mb-merkmal-spalten: 1; }
	.e-con.mb-merkmale:has(> :nth-child(3 of .elementor-widget-icon-box):nth-last-child(1 of .elementor-widget-icon-box)) { --mb-merkmal-spalten: 3; }
}
@media (min-width: 1025px) {
	.e-con.mb-merkmale { --mb-merkmal-spalten: 4; }
	.e-con.mb-merkmale:has(> :nth-child(1 of .elementor-widget-icon-box):nth-last-child(1 of .elementor-widget-icon-box)) { --mb-merkmal-spalten: 1; }
	.e-con.mb-merkmale:has(> :nth-child(2 of .elementor-widget-icon-box):nth-last-child(1 of .elementor-widget-icon-box)) { --mb-merkmal-spalten: 2; }
	.e-con.mb-merkmale:has(> :nth-child(3 of .elementor-widget-icon-box):nth-last-child(1 of .elementor-widget-icon-box)),
	.e-con.mb-merkmale:has(> :nth-child(5 of .elementor-widget-icon-box):nth-last-child(1 of .elementor-widget-icon-box)),
	.e-con.mb-merkmale:has(> :nth-child(6 of .elementor-widget-icon-box):nth-last-child(1 of .elementor-widget-icon-box)),
	.e-con.mb-merkmale:has(> :nth-child(9 of .elementor-widget-icon-box):nth-last-child(1 of .elementor-widget-icon-box)) { --mb-merkmal-spalten: 3; }
}

/* Symbol je Merkmal (2.18.7, Thorsten: „Hier müssen auch Bilder oder Symbole
   dazu."): lokale Phosphor-Symbole (assets/icons/, Fill-Stil) als Maske in
   Hausrot, 44 px, über dem Text; die Nummer bleibt klein oben rechts.
   Zuordnung je Widget-ID (Texte bleiben unverändert in Elementor); ein
   Merkmal ohne Zuordnung bekommt den Haken. Merkmale „Kein …" tragen den
   Strich (--mb-merkmal-strich), gebaut wie die Phosphor-slash-Symbole. */
.mb-merkmale > .elementor-widget-icon-box {
	--mb-merkmal-icon: url("../icons/check-bold.svg");
	position: relative;
}
.mb-merkmale > .elementor-widget-icon-box::before {
	position: absolute;
	top: var(--mb-space-4);
	right: var(--mb-space-4);
	margin: 0;
}
.mb-merkmale .elementor-icon-box-icon {
	display: block;
	position: relative;
	width: 44px;
	height: 44px;
	margin: 0 0 var(--mb-space-4);
}
.mb-merkmale .elementor-icon-box-icon .elementor-icon {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0;
	background-color: var(--mb-red);
	-webkit-mask: var(--mb-merkmal-icon) center / contain no-repeat;
	mask: var(--mb-merkmal-icon) center / contain no-repeat;
}
.mb-merkmale .elementor-icon-box-icon .elementor-icon > * { display: none; }
.mb-merkmale .elementor-icon-box-icon::after {
	content: "";
	display: var(--mb-merkmal-strich, none);
	position: absolute;
	left: 50%;
	top: 50%;
	width: 54px;
	height: 3px;
	background: var(--mb-red);
	box-shadow: 0 0 0 3px var(--mb-card);
	transform: translate(-50%, -50%) rotate(45deg);
}
/* Vorteile & Eigenschaften */
.mb-merkmale > [data-id="9b91fa5"] { --mb-merkmal-icon: url("../icons/drop-slash-fill.svg"); }   /* weder Lasur noch Öl */
.mb-merkmale > [data-id="b992cbc"] { --mb-merkmal-icon: url("../icons/leaf-fill.svg"); }         /* Umweltmanagement ISO 14001 */
.mb-merkmale > [data-id="d5376be"] { --mb-merkmal-icon: url("../icons/factory-fill.svg"); }      /* eigenes Werk */
.mb-merkmale > [data-id="736a603"] { --mb-merkmal-icon: url("../icons/seal-check-fill.svg"); }   /* GSB Master, Qualicoat Seaside */
.mb-merkmale > [data-id="334b912"] { --mb-merkmal-icon: url("../icons/sparkle-fill.svg"); }      /* Design, brillanter Touch */
.mb-merkmale > [data-id="3ee2def"] { --mb-merkmal-icon: url("../icons/palette-fill.svg"); }      /* Farben */
/* Reinigung & Pflege */
.mb-merkmale > [data-id="c5c801e"] { --mb-merkmal-icon: url("../icons/plant-fill.svg"); --mb-merkmal-strich: block; }        /* kein Grünspan */
.mb-merkmale > [data-id="6d57999"] { --mb-merkmal-icon: url("../icons/tree-fill.svg"); --mb-merkmal-strich: block; }         /* kein Verfaulen */
.mb-merkmale > [data-id="e527181"] { --mb-merkmal-icon: url("../icons/shield-check-fill.svg"); }                             /* keine Risse */
.mb-merkmale > [data-id="a081b5d"] { --mb-merkmal-icon: url("../icons/paint-roller-fill.svg"); --mb-merkmal-strich: block; } /* kein Nachlackieren */
.mb-merkmale > .elementor-widget-shortcode:has(.mb-bespr-anker) { display: none; }

/* ---------- Kachel-Raster ---------- */
.e-con.mb-kacheln {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mb-space-6) var(--mb-space-4);
}
.mb-ih .e-con.mb-kacheln > * { margin-top: 0; }
.e-con.mb-kachel { display: block; border-top: 3px solid var(--mb-red); padding-top: 0; }
.mb-ih .e-con.mb-kachel > .elementor-widget + .elementor-widget { margin-top: var(--mb-space-3); }
.mb-kachel .mb-bild__rahmen { clip-path: none; }
/* Kacheln einer Reihe teilen sich die Zeilen (Subgrid, 2.18.7): Ist eine
   Überschrift zweizeilig, rücken Bilder und Bildunterschrift-Linien der
   Nachbarkacheln mit — sie liegen je Reihe auf einer Höhe. Nur bei genau zwei
   Bausteinen je Kachel (Überschrift + Bild bzw. Bild + Text). */
@supports (grid-template-rows: subgrid) {
	.e-con.mb-kacheln:not(:has(> .mb-kachel > :nth-child(3))) { row-gap: 0; }
	.mb-ih .e-con.mb-kacheln:not(:has(> .mb-kachel > :nth-child(3))) > .e-con.mb-kachel {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: var(--mb-space-3);
		align-content: start;
		margin-bottom: var(--mb-space-6);
	}
	.mb-ih .e-con.mb-kacheln:not(:has(> .mb-kachel > :nth-child(3))) > .e-con.mb-kachel > .elementor-widget { margin-top: 0; }
	.mb-ih .e-con.mb-kacheln:not(:has(> .mb-kachel > :nth-child(3))) { margin-bottom: calc(-1 * var(--mb-space-6)); }
}
/* Kachel-Überschriften einzeilig halten (2.18.9, Thorsten 30.09.2026): Texte
   sind kurz gefasst, in schmalen Kacheln skaliert die Schrift leicht mit —
   kein Abschneiden; mobil (einspaltig) darf umbrechen. */
.mb-kachel .elementor-widget-heading .elementor-heading-title {
	font-family: var(--mb-font-display);
	font-weight: 700;
	font-size: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem);
	text-wrap: balance;
	line-height: 1.3;
	color: var(--mb-ink-900);
}

/* ---------- Kompakte Liste ---------- */
.e-con.mb-liste-kompakt {
	display: block;
	columns: 2;
	column-gap: var(--mb-space-6);
	border-top: var(--mb-border);
}
.mb-ih .e-con.mb-liste-kompakt > .elementor-widget { margin: 0; break-inside: avoid; }
.mb-liste-kompakt > .elementor-widget-icon-box {
	border-bottom: var(--mb-border);
	padding: var(--mb-space-2) 0 var(--mb-space-2) 22px;
	position: relative;
}
.mb-liste-kompakt > .elementor-widget-icon-box::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.3em;
	width: 10px;
	height: 2px;
	background: var(--mb-red);
}
.mb-liste-kompakt .elementor-icon-box-title,
.mb-daten__liste .elementor-icon-box-title {
	font-family: var(--mb-font-body);
	font-weight: 500;
	font-size: var(--mb-fs-body);
	line-height: 1.45;
	color: var(--mb-ink-900);
	margin: 0;
}
.mb-liste-kompakt .elementor-icon-box-wrapper,
.mb-daten__liste .elementor-icon-box-wrapper { display: block; text-align: left; }

/* ---------- Datenliste (Technische Daten) ---------- */
.e-con.mb-daten {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--mb-space-7);
	align-items: start;
}
.mb-ih .e-con.mb-daten > * { margin-top: 0; }
.e-con.mb-daten__liste { display: block; }
.mb-daten__liste > .elementor-widget-icon-box { margin: 0; padding: var(--mb-space-2) 0; border-bottom: var(--mb-border); }
.mb-ih .mb-daten__liste > .elementor-widget-icon-box { margin-top: 0; }
.mb-daten__liste > .mb-ih__titel + .elementor-widget-icon-box { margin-top: var(--mb-space-5); border-top: 2px solid var(--mb-ink-900); }

/* ---------- Farbflächen (Überblick) ---------- */
.e-con.mb-farben {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--mb-space-2);
}
.mb-ih .e-con.mb-farben > * { margin-top: 0; }
.mb-farben .elementor-widget-image figure { margin: 0; }
/* Verlinkte Bilder (<a> inline-block) brachten die Zeilen-Unterlänge mit — die
   Bildunterschrift-Linie saß 6 px tiefer als beim unverlinkten Bild (2.18.7). */
.mb-farben .elementor-widget-image a { display: block; }
.mb-farben .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	clip-path: var(--mb-slope-md);
	border-radius: 0;
	box-shadow: none;
}
.mb-farben .widget-image-caption,
.mb-farben figcaption {
	font-family: var(--mb-font-mono);
	font-size: var(--mb-fs-meta);
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: var(--mb-tracking-cap);
	text-align: left;
	color: var(--mb-ink-800);
	margin-top: var(--mb-space-2);
	padding-top: var(--mb-space-1);
	border-top: var(--mb-border);
}

/* ---------- RAL-Hinweis (Überblick) ---------- */
.e-con.mb-ral {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--mb-space-7);
	align-items: start;
}
.mb-ih .e-con.mb-ral > * { margin-top: 0; }
.mb-ral .elementor-icon-list-items { border-top: 2px solid var(--mb-ink-900); }
.mb-ral .elementor-icon-list-item { padding: var(--mb-space-2) 0; border-bottom: var(--mb-border); }
.mb-ral .elementor-icon-list-icon { display: none; }
.mb-ral .elementor-icon-list-item:not(:last-child)::after { display: none; }
.mb-ral .elementor-icon-list-text { font-weight: 500; color: var(--mb-ink-900); padding-left: 0; }
.mb-ral .elementor-widget-icon-list .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.mb-ral .elementor-icon-list-items { border-top-width: var(--mb-titel-linie); }

/* Linien benachbarter Spalten bündig (2.18.7, Thorsten 30.09.2026: „Solche
   Linien sollten auf einer Höhe liegen."): Die obere Linie der Nebenspalte
   liegt exakt auf der Unterstreichung der Überschrift links — unabhängig
   davon, wie viele Zeilen die Überschrift hat. Die Hauptspalte löst sich per
   display:contents ins Raster auf; die Überschrift belegt Zeile 1, ihre
   übrigen Bausteine die folgenden Zeilen. Die Nebenspalte beginnt in Zeile 2
   (= Unterkante der Überschrift) und rückt um die Linienstärke nach oben,
   sodass beide 2-px-Linien deckungsgleich liegen. Die letzte Zeile (1fr)
   nimmt überschüssige Höhe der Nebenspalte auf, damit sich die Abstände in
   der Hauptspalte nicht verschieben. Nur wenn die Spalten nebeneinander
   stehen (> 1024 px). */
@media (min-width: 1025px) {
	.e-con.mb-ral {
		grid-template-rows: auto repeat(8, auto) 1fr;
		row-gap: 0;
	}
	.e-con.mb-ral > .e-con:first-child { display: contents; }
	.mb-ral > .e-con:first-child > * { grid-column: 1; }
	.mb-ral > .e-con:first-child > .mb-ih__titel { grid-row: 1; }
	.mb-ih .e-con.mb-ral > .e-con:last-child {
		grid-column: 2;
		grid-row: 2 / -1;
		margin-top: calc(-1 * var(--mb-titel-linie));
	}
}

/* ---------- Schrittfolge ---------- */
.e-con.mb-schritte {
	display: block;
	counter-reset: mb-schritt;
	border-left: var(--mb-border);
	margin-left: 24px;
}
.e-con.mb-schritt {
	display: block;
	counter-increment: mb-schritt;
	position: relative;
	padding: 0 0 var(--mb-space-5) var(--mb-space-6);
}
.mb-ih .e-con.mb-schritte > .e-con.mb-schritt { margin-top: 0; }
.e-con.mb-schritt::before {
	content: counter(mb-schritt, decimal-leading-zero);
	position: absolute;
	left: -24px;
	top: 0;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var(--mb-red);
	color: #fff;
	font-family: var(--mb-font-mono);
	font-weight: 500;
	font-size: var(--mb-fs-small);
	box-shadow: var(--mb-shadow-press);
}
.e-con.mb-schritt--fertig::before { content: "✓"; background: var(--mb-ink-900); box-shadow: 4px 4px 0 var(--mb-red); font-size: 1.1rem; }
.e-con.mb-schritt:last-child { padding-bottom: 0; }
.mb-schritt > .elementor-widget-icon { display: none; }
.mb-ih .mb-schritt > .elementor-widget-text-editor { margin-top: 0; padding-top: 12px; }

/* ---------- Etappen (Verlegung) ---------- */
.e-con.mb-etappen { display: block; counter-reset: mb-etappe; }
.e-con.mb-etappe {
	display: grid;
	grid-template-columns: 88px minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--mb-space-2) var(--mb-space-5);
	align-items: start;
	counter-increment: mb-etappe;
	padding-top: var(--mb-space-5);
	border-top: var(--mb-border);
}
.e-con.mb-etappe::before {
	content: counter(mb-etappe, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1 / span 3;
	font-family: var(--mb-font-display);
	font-weight: 900;
	font-size: 3rem;
	line-height: 1;
	color: var(--mb-rule-strong);
}
.mb-ih .e-con.mb-etappe > * { margin-top: 0; grid-column: 2; }
.mb-ih .e-con.mb-etappe > .mb-etappe__bild { grid-column: 3; grid-row: 1 / span 4; }
.mb-ih .e-con.mb-etappen > .e-con.mb-etappe + .e-con.mb-etappe { margin-top: var(--mb-space-6); }
.mb-etappe .elementor-widget-heading:not(.mb-ih__untertitel) .elementor-heading-title {
	font-family: var(--mb-font-display);
	font-weight: var(--mb-weight-display);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--mb-ink-900);
}
.mb-etappe .elementor-widget-gallery:not(:has(img)) { display: none; }
/* Etappe ohne Bild (2.18.3, P18 entfernt): keine leere Bildspalte, Text über die ganze Breite. */
.e-con.mb-etappe:not(:has(> .mb-etappe__bild)) { grid-template-columns: 88px minmax(0, 1fr); }

/* ---------- Fragen & Antworten ---------- */
.e-con.mb-faq {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: var(--mb-space-7);
	align-items: start;
}
.mb-ih .e-con.mb-faq > * { margin-top: 0; }
.mb-faq > .mb-faq__seite { position: sticky; top: 124px; }
.mb-faq__liste .elementor-toggle { border-top: 2px solid var(--mb-ink-900); }
.mb-faq__liste .elementor-toggle .elementor-toggle-item { border: 0; border-bottom: var(--mb-border); margin: 0; }
.mb-faq__liste .elementor-toggle .elementor-tab-title {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px;
	gap: var(--mb-space-3);
	align-items: start;
	padding: var(--mb-space-3) 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.mb-faq__liste .elementor-toggle .elementor-toggle-icon { display: none; }
.mb-faq__liste .elementor-toggle .elementor-toggle-title,
.mb-faq__liste .elementor-toggle .elementor-tab-title a {
	font-family: var(--mb-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--mb-ink-900);
	text-decoration: none;
}
.mb-faq__liste .elementor-toggle .elementor-tab-title::after {
	content: "";
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	width: 14px;
	height: 14px;
	margin-top: 6px;
	background:
		linear-gradient(var(--mb-red), var(--mb-red)) center / 14px 2px no-repeat,
		linear-gradient(var(--mb-red), var(--mb-red)) center / 2px 14px no-repeat;
	transition: transform var(--mb-dur-base) var(--mb-ease-cut);
}
.mb-faq__liste .elementor-toggle .elementor-tab-title.elementor-active::after { transform: rotate(45deg); }
.mb-faq__liste .elementor-toggle .elementor-tab-title:focus-visible { outline: 2px solid var(--mb-red); outline-offset: 2px; }
.mb-faq__liste .elementor-toggle .elementor-tab-content {
	border: 0;
	padding: 0 40px var(--mb-space-4) 0;
	color: var(--mb-ink-800);
	max-width: 72ch;
}

/* ---------- Kontaktkarten ---------- */
.e-con.mb-kontakt {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 2px solid var(--mb-ink-900);
}
.mb-ih .e-con.mb-kontakt > .e-con {
	display: block;
	margin-top: 0;
	padding: var(--mb-space-4) var(--mb-space-4) var(--mb-space-5);
	border-bottom: var(--mb-border);
	border-left: var(--mb-border);
}
.mb-ih .e-con.mb-kontakt > .e-con:first-child { border-left: 0; padding-left: 0; }
.mb-kontakt .elementor-widget-heading .elementor-heading-title {
	font-family: var(--mb-font-display);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--mb-ink-900);
}
.mb-ih .mb-kontakt .elementor-widget-heading + .elementor-widget { margin-top: var(--mb-space-2); }
.mb-ih .mb-kontakt .elementor-widget-text-editor + .elementor-widget-heading { margin-top: var(--mb-space-4); }
.mb-kontakt .elementor-widget-text-editor { font-size: var(--mb-fs-small); }
.mb-kontakt .elementor-widget-text-editor p { margin-bottom: var(--mb-space-1); }

/* ---------- Lesetext und Hinweis ---------- */
.e-con.mb-lesetext { display: block; max-width: 780px; }
.mb-lesetext .elementor-widget-text-editor strong:only-child { font-family: var(--mb-font-display); }
.e-con.mb-lesetext-bild { display: block; max-width: 780px; }
.mb-ih .mb-hinweis.elementor-widget-text-editor {
	border-left: 3px solid var(--mb-ink-900);
	background: var(--mb-neutral-100);
	padding: var(--mb-space-3) var(--mb-space-4);
	font-size: var(--mb-fs-small);
	max-width: 820px;
}
.mb-ih--neutral .mb-hinweis.elementor-widget-text-editor { background: var(--mb-card); }
.mb-ih .mb-hinweis p { margin-bottom: var(--mb-space-2); }

/* ---------- Seitenweise ---------- */
.mb-ausgeblendet { display: none !important; }

/* Formular (Anfrage): Formular links, Bild rechts mitlaufend */
.e-con.mb-formular {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	gap: var(--mb-space-7);
	align-items: start;
}
.mb-ih .e-con.mb-formular > * { margin-top: 0; }
.mb-formular > .mb-formular__bild { position: sticky; top: 124px; }

/* RAL-Farbkarten (Unlimited Elements): Karten im CI — eckig, Linie statt Schatten */
.mb-ih .ue-color-item,
.mb-ih [class*="post_list_colors"] .uc_post_list_box,
.mb-ih [class*="post_list_colors"] .uc_post_list_image { border-radius: 0 !important; box-shadow: none !important; }

/* ---------- Umbrüche ---------- */
@media (max-width: 1024px) {
	.e-con.mb-einleitung,
	.e-con.mb-split,
	.e-con.mb-split--rechts,
	.e-con.mb-split--hoch,
	.e-con.mb-split--rechts.mb-split--hoch,
	.e-con.mb-daten,
	.e-con.mb-ral,
	.e-con.mb-faq,
	.e-con.mb-formular { grid-template-columns: minmax(0, 1fr); gap: var(--mb-space-5); }
	.e-con.mb-split--rechts > .mb-split__bild { order: 0; }
	.mb-faq > .mb-faq__seite,
	.mb-formular > .mb-formular__bild { position: static; }
	.mb-split--hoch > .mb-split__bild,
	.mb-faq__seite .mb-bild--hoch,
	.mb-formular__bild .mb-bild--hoch { max-width: 420px; }
	.e-con.mb-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.e-con.mb-kontakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mb-ih .e-con.mb-kontakt > .e-con:nth-child(3) { border-left: 0; padding-left: 0; }
	.e-con.mb-farben { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--mb-space-4); }
	.e-con.mb-etappe,
	.e-con.mb-etappe:not(:has(> .mb-etappe__bild)) { grid-template-columns: 64px minmax(0, 1fr); }
	.mb-ih .e-con.mb-etappe > .mb-etappe__bild { grid-column: 1 / -1; grid-row: auto; }
	.e-con.mb-etappe::before { font-size: 2.25rem; grid-row: 1 / span 2; }
}
@media (max-width: 767px) {
	.e-con.mb-textraster,
	.e-con.mb-kacheln,
	.e-con.mb-kontakt { grid-template-columns: minmax(0, 1fr); }
	.mb-ih .e-con.mb-kontakt > .e-con { border-left: 0; padding-left: 0; padding-right: 0; }
	.e-con.mb-liste-kompakt { columns: 1; }
	.e-con.mb-farben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mb-ih .e-con.mb-split + .e-con.mb-split,
	.mb-ih .e-con.mb-split + .e-con.mb-textraster,
	.mb-ih .e-con.mb-textraster + .e-con.mb-split { margin-top: var(--mb-space-7); }
}

/* Ausgeblendeter Besprechungs-Anker am Anfang einer Spalte: Der folgende
   Baustein ist der erste sichtbare und bekommt keinen Abstand nach oben
   (sonst sitzt die Linie der Nebenspalte 24 px zu tief, 2.18.7). */
.mb-ih .e-con > .elementor-widget-shortcode:first-child:has(.mb-bespr-anker) + *,
.mb-ih .e-con > .elementor-widget-shortcode:first-child:not(:has(.elementor-shortcode *)) + * { margin-top: 0; }

/* Leere Shortcode-Widgets (Besprechungs-Shortcodes bei abgeschalteten
   Hinweisen, Bild ohne Treffer) nehmen keinen Abstand ein — Layout mit und
   ohne Hinweise gleich (known-issues.md #44). */
.mb-ih .elementor-widget-shortcode:not(:has(.elementor-shortcode *)) { display: none; }

/* ---------- Vorher-Nachher-Vergleich ([mb_inhaltsbild nach="…"], 2.18.1) ----------
   Beide Bilder deckungsgleich in derselben Bildfläche (festes Format, #45);
   das Nachher-Bild wird ab --mb-vergleich-pos nach rechts freigegeben. */
.mb-vergleich { touch-action: pan-y; cursor: ew-resize; user-select: none; }
.mb-vergleich__nach {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--mb-vergleich-pos, 50%));
}
.mb-vergleich .mb-bild__img { pointer-events: none; }
.mb-vergleich__griff {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--mb-vergleich-pos, 50%);
	width: 44px;
	margin-left: -22px;
	z-index: 1;
	outline: none;
}
.mb-vergleich__griff::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 21px;
	width: 2px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(2, 10, 10, 0.25);
}
.mb-vergleich__griff::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	transform: translate(-50%, -50%);
	background: #fff center / 22px 22px no-repeat url("../icons/arrows-horizontal-bold.svg");
	border: 1px solid var(--mb-ink-900);
}
.mb-vergleich__griff:focus-visible::after { box-shadow: 0 0 0 3px var(--mb-red); }
.mb-vergleich__marke {
	position: absolute;
	bottom: 10px;
	z-index: 1;
	background: rgba(2, 10, 10, 0.72);
	color: #fff;
	font-family: var(--mb-font-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 8px;
	pointer-events: none;
}
.mb-vergleich__marke--vor { left: 16%; }
/* Die KI-Zeile sitzt ganz unten; die Marken rücken darüber. */
.mb-bild--vergleich .mb-vergleich__marke { bottom: 34px; }
.mb-vergleich__marke--nach { right: 10px; }

/* ---------- Bildreihe (Montage-Abfolge Verlegung, 2.18.1) ---------- */
.e-con.mb-bildreihe {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mb-space-5);
	counter-reset: mb-bildreihe;
}
.mb-ih .e-con.mb-bildreihe > * { margin-top: 0; min-width: 0; width: 100%; }
.mb-ih .mb-ih__titel + .e-con.mb-bildreihe,
.mb-ih .elementor-widget + .e-con.mb-bildreihe { margin-top: var(--mb-space-6); }
@media (max-width: 1024px) {
	.e-con.mb-bildreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.e-con.mb-bildreihe { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Kachel-Raster mit fünf Kacheln: ausgewogene Reihen (2.19.1) ----------
   Regel „ausgewogene Reihen" (Thorsten, 30.09.2026): Fünf Kacheln standen als
   3 + 2 (Tablet 2 + 2 + 1). Jetzt 2 + 3 auf einem 6er-Raster — die ersten
   beiden Kacheln je drei Spalten breit, die letzten drei je zwei; ab 768 px.
   Bilder und Bildunterschriften einer Reihe bleiben über das Subgrid bündig.
   Handy: eine Spalte. */
@media (min-width: 768px) {
	.e-con.mb-kacheln:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.e-con.mb-kacheln:has(> :nth-child(5):last-child) > :nth-child(-n+2) { grid-column: span 3; }
	.e-con.mb-kacheln:has(> :nth-child(5):last-child) > :nth-child(n+3) { grid-column: span 2; }
}

/* ---------- Kachel-Raster mit acht Kacheln: 4 + 4 (Besprechung 30.09.2026) ----------
   Einsatzbereiche auf „AluTeck Allwetterdiele" (1790): acht Kacheln stehen auf
   breiten Bildschirmen als 4 + 4, auf dem Tablet (bis 1024 px) greift das
   vorhandene 2er-Raster (2 × 4), auf dem Handy eine Spalte. Im schmaleren
   4er-Raster etwas kleinere Kachel-Überschrift, damit sie einzeilig bleibt;
   Bilder einer Reihe bleiben über das Subgrid bündig. */
@media (min-width: 1025px) {
	.e-con.mb-kacheln.mb-kacheln--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mb-kacheln--vier .mb-kachel .elementor-icon-box-title { font-size: 1.0625rem; }
}
/* Zwischen Tablet und Desktop (1025–1199 px) wären vier Kacheln zu schmal
   für einzeilige Überschriften: dort 2 × 4 wie auf dem Tablet. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.e-con.mb-kacheln.mb-kacheln--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Rechtstexte von Website-Check (2.27.0) ---------- */
/* Das Snippet bringt eigenes CSS mit (14 px, linksbündig); hier nur
   Anschluss an die Schrift des Shops. Das Snippet selbst bleibt unverändert. */
.mb-lesetext #jmdcontent {
	font-family: inherit;
	font-size: var(--mb-fs-small, 15px);
	line-height: 1.6;
	color: var(--mb-ink-900);
	overflow-wrap: anywhere;
}
/* Die Seitenüberschrift steht im Seitenkopf; die erste h1 des Texts entfällt
   (sonst doppelte Überschrift und zwei h1 je Seite). */
.mb-lesetext #jmdcontent > h1:first-child { display: none; }
.mb-lesetext #jmdcontent h1 { font-size: 2rem; line-height: 1.15; margin-top: 0; }
.mb-lesetext #jmdcontent h2 { font-size: 1.4rem; }
.mb-lesetext #jmdcontent h3 { font-size: 1.15rem; }
.mb-lesetext .jmdsnippet { max-width: 100%; }