/**
 * Gestaltung der wiederverwendeten Elementor-Bausteine.
 *
 * Hier steht ausschließlich, was zu einer **Komponente** gehört, die an mehreren Stellen
 * vorkommt – derzeit die Beitragskarte (Loop-Vorlagen „Karte – Case Study" und
 * „Karte – Insight"). Sie erscheint auf der Startseite, auf den Lösungsseiten und in den
 * beiden Übersichten. Läge ihre Gestaltung im Stilblock einer Seite, sähe sie nur dort
 * richtig aus – genau das war der Fall, bevor diese Datei entstand: In den Archiven stimmte
 * die Karte, auf der Startseite war die Medienfläche 300px hoch statt im Verhältnis 16/10.
 *
 * Seitenbezogene Feinheiten bleiben im Stilblock des jeweiligen Templates (siehe ADR-63).
 *
 * Warum überhaupt eine Datei im Plugin: Elementor Pro stellt ohne Lizenz kein „Custom CSS"
 * bereit (GRENZEN G-16), und das aktive Theme ist ein Fremd-Theme (Hello Elementor), an dem
 * nichts geändert wird. Dasselbe Muster nutzt schon `Blocks\SectionStyles`.
 *
 * Farben und Maße folgen der Vorlage: --bits-cyan #009FE3, --bits-cyan-d #006F9E,
 * --bits-line #DBDEE2, --bits-soft #F4F6F8.
 */

/* ------------------------------------------------------------------ */
/* Beitragskarte                                                       */
/* ------------------------------------------------------------------ */
/*
 * HIER STAND `height: 100%` – GEGEN PRUEFLISTE 37 UND OHNE JEDE WIRKUNG.
 *
 * Zwei Gruende, es zu entfernen, und der zweite ist der belastbare:
 *
 * 1. Eine definite Hoehe verhindert das Strecken (Pruefliste 37). Gleich hohe Karten macht
 *    `.mb-karten-gleich` weiter unten – ein `display:flex` an der Huelle, ohne Hoehe
 *    (Pruefliste 63).
 * 2. Die Zeile war seit ihrer Entstehung wirkungslos. Elementors `frontend.min.css` setzt
 *    `.e-con{height:var(--height)}` – EINE Klasse, genau wie `.mbk-karte`, und die Datei
 *    laedt spaeter (gemessen: Stylesheet 5 gegen 9). Bei Gleichstand gewinnt Elementor
 *    ueber die Reihenfolge; das ist derselbe Fall wie bei den Karussell-Punkten
 *    (Pruefliste 64).
 *
 * Gegenprobe auf /insights/: eine Karte kuenstlich auf 520px gezwungen, die Huelle der
 * Nachbarn wuchs mit (Grid streckt), die Karten blieben bei 404px – mit und ohne die Zeile,
 * Wert fuer Wert gleich. Sie hat nichts getragen.
 */
/*
 * VERDOPPELTE Klasse (0,2,0): Die Karte ist ein Elementor-Container, und `frontend.min.css`
 * setzt `.e-con { overflow: var(--overflow) }` mit 0,1,0 - also GLEICHAUF mit einer blossen
 * Klasse. Bei Gleichstand gewinnt die spaetere Regel, und Elementors CSS laedt nach unserem:
 * Gemessen stand `overflow: visible` an Karte UND Medienflaeche, obwohl beide hier auf `hidden`
 * standen. Beim Hover ragte das gezoomte Vorschaubild dadurch 9 px seitlich und 5 px oben und
 * unten ueber die Kachel hinaus (gemeldet vom Auftraggeber, 06.10.2026).
 *
 * Dieselbe Familie wie `:where()` bei der Kachel-Transition (ADR-161) und `:not()` beim
 * Chip-Hover (ADR-161, Nachtrag 4) - nur hier ohne Pseudoklasse, als blosser Gleichstand.
 * Die `transition` steht aus demselben Grund mit im verdoppelten Selektor.
 */
.mbk-karte.mbk-karte {
	overflow: hidden;
	transition: .45s cubic-bezier(.2, .8, .3, 1);
}

.mbk-karte:hover {
	transform: translateY(-8px);
	box-shadow: 0 46px 96px -34px rgba(0, 0, 0, .35);
}

/*
 * Medienfläche im Verhältnis 16/10, das Bild deckend darin.
 *
 * Klasse verdoppelt – derselbe Gleichstand gegen `.e-con` wie bei der Karte darüber. Dieses
 * `overflow` ist das, was den Zoom beim Überfahren an der Kante abschneidet: Das Bild wächst
 * weiter um 6 %, sichtbar bleibt nur der Ausschnitt innerhalb der Kachel.
 */
.mbk-medien.mbk-medien {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	position: relative;
	flex: 0 0 auto;
}

.mbk-medien .mbk-bild,
.mbk-medien .mbk-bild .elementor-widget-container,
.mbk-medien .mbk-bild figure {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

.mbk-medien .mbk-bild {
	z-index: 1;
}

.mbk-medien .mbk-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .7s cubic-bezier(.2, .8, .3, 1);
}

.mbk-karte:hover .mbk-bild img {
	transform: scale(1.06);
}

/*
 * Ausfallfläche: Ohne Vorschaubild rendert Elementor kein <img>. Dann zeigt diese
 * gestaltete Fläche – so hält es die Vorlage auch, statt ein Loch zu lassen.
 */
.mbk-medien::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(90% 80% at 75% 15%, rgba(0, 159, 227, .30), transparent 62%),
		linear-gradient(160deg, #001521 0%, #000 70%);
}

/*
 * Rubrik und Datum über dem Titel (ADR-136, dritter Nachtrag). Die Übersicht zeigte beides nicht,
 * und sechs Anrisse trugen das Datum als Präfix aus der alten Website. Getrennt wird mit einem
 * Mittelpunkt am Datum – so steht kein Trennzeichen allein, wenn eine Rubrik fehlt.
 */
.mbk-meta {
	margin-bottom: 6px;
}

/* Karten einer Reihe gleich hoch: Das Loop Grid streckt die `.e-loop-item` (gemessen 461px), die Karte
   darin blieb bei ihrer Inhaltshöhe (419px) – seit der Titel drei Zeilen tragen darf, fällt das auf. */
.e-loop-item > .mbk-karte {
	height: 100%;
}

.mbk-rubrik .elementor-heading-title,
.mbk-datum .elementor-heading-title {
	text-transform: uppercase;
}

.mbk-rubrik:empty,
.mbk-datum:empty {
	display: none;
}

/* Das Trennzeichen nimmt die Farbe der Datumszeile, in der es steht: Rubrik ist #006F9E,
   Datum #5B6875 (Loop-Item #2019) - nur das Zeichen dazwischen stand auf #8A94A0 und kam
   damit auf 2,87:1. Keine Gestaltungsaenderung, sondern eine Angleichung innerhalb einer
   Zeile - und das letzte #8A94A0 im ausgelieferten CSS (G-29, 09.09.2026). */
.mbk-meta .mbk-rubrik + .mbk-datum .elementor-heading-title::before {
	content: "· ";
	color: #5B6875;
}

/* Zeilenbegrenzung: hält alle Karten einer Reihe auf gleicher Höhe, ohne feste Höhen.
   Drei Zeilen statt zwei: Bei 302px Kartenbreite und 17px Schrift brach „Zwischen Innovation und
   Kontrolle: Wie viel Freiheit verträgt die Cloud?" nach „verträg…" ab – gemessen an sechs von
   achtzehn Karten (ADR-136, dritter Nachtrag). */
.mbk-titel .elementor-heading-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.3em;
}

/*
 * Der Kartentitel eines LEITFADENS darf eine Zeile mehr - er ist eine Frage und deshalb lang.
 *
 * Das ist eine Rolle, keine Drift: Gemessen liegt der Median bei 76 Zeichen und 11 von 28 Titeln
 * ueber 80, wo drei Zeilen enden; bei den Insights sind es 52 im Median und 3 von 71 (4 Prozent).
 * Eine vierte Zeile fuer alle wuerde 68 Insight-Karten hoeher machen, um drei Titeln zu helfen -
 * deshalb eine eigene Klasse am Titel-Widget von #3327 (`tools/leitfaden-kartentitel.php`), wie
 * die Karte sie fuer ihre Textfelder schon fuehrt (`mblf-teaser`, `mblf-auszug`).
 *
 * Gemessen im Kartenmass (256px, 17px, Zeilenhoehe 22,1): drei Zeilen fassen 80 Zeichen, vier
 * fassen 108. Damit sind 9 der 12 abgeschnittenen Titel vollstaendig; drei bleiben (119, 119, 108
 * Zeichen) - das ist eine Textfrage und gehoert dem Auftraggeber (ADR-138, zweiter Nachtrag).
 *
 * Zwei Klassen im Selektor, damit die Reihenfolge in dieser Datei nicht entscheidet.
 */
.mbk-titel.mblf-titel .elementor-heading-title {
	-webkit-line-clamp: 4;
}

/*
 * Der Anriss – und ein Fallstrick, der erst mit echten Artikeln auffiel.
 *
 * Elementors Text-Editor gibt den Beitragsanriss **ohne** `<p>`-Hülle aus: Der Text steht
 * unmittelbar im Widget-Element. Eine Regel auf `.mbk-anriss p` greift dann nicht. Mit fünf
 * gleich langen Beispielanrissen war das unsichtbar; mit 67 übernommenen Artikeln liefen
 * einzelne Anrisse über fünf Zeilen, und die Karten einer Reihe standen ungleich hoch.
 *
 * Deshalb steht die Begrenzung am Widget selbst. Die beiden anderen Selektoren bleiben für
 * Anrisse mit Absatz-Markup und für Elementor-Fassungen mit innerer Hülle.
 */
.mbk-anriss,
.mbk-anriss > .elementor-widget-container,
.mbk-anriss p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mbk-anriss {
	flex: 1 1 auto;
	min-height: 4.8em;
}

/*
 * Der Teaser eines LEITFADENS darf eine Zeile mehr - wie sein Titel, und aus demselben Grund.
 *
 * Er ist kein Auszug, sondern ein eigener redaktioneller Text mit gepruefter Laenge: ADR-138
 * legte den Korridor auf 85 bis 115 Zeichen fest und laesst `leitfaden-teaser.php` jede der
 * 28 Fassungen dagegen pruefen. Abgelesen wurde er bei 14 px Schrift.
 *
 * Am 11.09.2026 hob die Angleichung den Teaser auf die Kartentext-Stufe 15 px - richtig fuer
 * die Leiter, aber drei Zeilen fassen dort nur noch rund 90 Zeichen. Gemessen waren danach
 * 6 von 12 Teasern auf /leitfaeden/ abgeschnitten, schon bei 93 Zeichen (eigener Fehler).
 *
 * Die Schriftgroesse ist die Leiterentscheidung, die Zeilenzahl die Anpassung an den Inhalt -
 * deshalb bleibt 15 px und die Klemme geht auf vier. Vier Zeilen fassen bei 15 px rund 120
 * Zeichen und decken damit den ganzen Korridor.
 *
 * Der Anriss einer Erfolgsgeschichte oder eines Insights ist ausdruecklich NICHT gemeint: Dort
 * ist das Abschneiden gewollt (gemessen 12 von 12 bzw. 10 von 12 geklemmt, Median 162 und 186
 * Zeichen) - ein Auszug DARF enden, ein geschriebener Teaser nicht.
 *
 * Zwei Klassen im Selektor, damit die Reihenfolge in dieser Datei nicht entscheidet.
 */
.mbk-anriss.mblf-teaser,
.mbk-anriss.mblf-teaser > .elementor-widget-container,
.mbk-anriss.mblf-teaser p {
	-webkit-line-clamp: 4;
}

.mbk-anriss.mblf-teaser {
	min-height: 6.4em;
}

.mbk-anriss p {
	margin: 0;
}

.mbk-mehr {
	margin-top: auto;
}

/*
 * Und dasselbe noch einmal mit vier Klassen – die Zeile darueber war wirkungslos.
 *
 * Gemessen an /insights/: „Mehr erfahren" stand in der ersten Kartenreihe drei Mal bei y=895
 * und einmal bei y=917, weil ein Titel drei statt zwei Zeilen hat. Die Karten sind gleich hoch
 * (441px, `.e-loop-item > .mbk-karte{height:100%}`), aber der Inhalt haengt oben.
 *
 * Ursache ist nicht die fehlende Regel, sondern ihre Spezifitaet: Elementor schreibt fuer das
 * Widget `.elementor-2019 .elementor-element.elementor-element-mbv0023{margin:22px 0 …}` –
 * drei Klassen, als Stilblock IM Dokument, also auch spaeter. `.mbk-mehr` mit einer Klasse
 * verliert zweifach. Dasselbe Muster wie ADR-101 und Pruefliste 64; es faellt nicht auf, weil
 * eine Regel, die nicht greift, keinen Fehler erzeugt – nur einen Sprung von 22px.
 *
 * Der Mindestabstand wandert von `margin` nach `padding`: `margin-top` muss `auto` bleiben
 * duerfen, sonst ist es wieder ein fester Wert. Bei kurzem Text schiebt `auto` die Zeile nach
 * unten, bei langem bleiben die 22px als Luft.
 */
.mbk-karte .mbk-koerper .elementor-widget.mbk-mehr {
	margin-top: auto;
	padding-top: 22px;
}

.mbk-mehr .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Der Pfeil hinter „lesen" – in der Vorlage ein SVG, hier ein Zeichen. */
.mbk-mehr .elementor-heading-title::after {
	content: "\2192";
	font-size: 16px;
	transition: transform .35s;
}

.mbk-karte:hover .mbk-mehr .elementor-heading-title::after {
	transform: translateX(5px);
}

/* ------------------------------------------------------------------ */
/* Blätterung eines Loop Grid                                          */
/* ------------------------------------------------------------------ */
.elementor-widget-loop-grid .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 56px;
}

.elementor-widget-loop-grid .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #DBDEE2;
	color: #000;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: .3s cubic-bezier(.2, .8, .3, 1);
}

.elementor-widget-loop-grid a.page-numbers:hover {
	border-color: rgba(0, 159, 227, .5);
	box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .35);
	transform: translateY(-2px);
}

.elementor-widget-loop-grid .page-numbers.current {
	background: #009FE3;
	border-color: #009FE3;
	color: #fff;
}

.elementor-widget-loop-grid .page-numbers.dots {
	background: none;
	border: 0;
	min-width: 0;
	padding: 0 4px;
	font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* Zitat-Karussell                                                     */
/* ------------------------------------------------------------------ */
/*
 * Zwei Beobachtungen aus dem Abgleich mit der Vorlage:
 *
 * 1. Die Karten brauchen senkrechten Rand, sonst wird ihr Schatten oben und unten
 *    abgeschnitten – die Vorlage gibt ihnen `margin: 18px 14px`.
 * 2. Die Seitenanzeige (Pager) saß direkt am Kartenrand und überlagerte den Schatten.
 *    Sie bekommt jetzt Abstand.
 */
.elementor-widget-loop-carousel .swiper-slide {
	padding: 18px 14px;
	box-sizing: border-box;
}

.elementor-widget-loop-carousel .swiper-pagination {
	margin-top: 20px;
}

/*
 * Die Punkte deutlicher und in der Akzentfarbe, wenn aktiv.
 *
 * ACHTUNG, HIER STAND EINMAL TOTER CODE. Die Regeln lauteten bis zum 27.08.2026 auf
 * `width`, `height`, `background` und `opacity` - und wirkten nicht. Grund: Elementors
 * `widget-loop-carousel.min.css` setzt dieselben Eigenschaften mit **derselben** Spezifitaet
 * (zwei Klassen), wird aber je Widget nachgeladen und gewinnt damit ueber die Reihenfolge.
 * Gemessen wurden 6px in Schwarz statt 8px in der Akzentfarbe.
 *
 * Statt den Selektor aufzubohren, werden jetzt die Variablen gesetzt, die Elementor und Swiper
 * selbst dafuer vorsehen. Eine Variable steht ueber jedem Spezifitaetsstreit - und sie ist die
 * dokumentierte Schnittstelle, kein Trick.
 */
.elementor-widget-loop-carousel {
	--dots-normal-color: #0D1520;
	--swiper-pagination-bullet-inactive-opacity: .22;
}

/*
 * Die Groesse der Punkte bleibt Elementors 6px. Ein eigener Wert waere moeglich, aber
 * `--swiper-pagination-size` steht bei Elementor an `.elementor-widget-loop-carousel
 * .elementor-pagination-type-bullets` - zwei Klassen, wie ein Selektor von uns, und sein
 * Stylesheet laedt spaeter. Fuer zwei Pixel lohnt kein dritter Selektor.
 *
 * Die Farbe des AKTIVEN Punkts braucht dagegen drei Klassen: `--swiper-pagination-color` erreicht
 * ihn nicht, weil Elementors Zwei-Klassen-Regel fuer `.swiper-pagination-bullet` auch den aktiven
 * trifft und `--dots-normal-color` einsetzt. Ohne diese Regel sind aktiv und inaktiv gleich
 * gefaerbt - der Pager sagt dann nichts mehr aus.
 */
.elementor-widget-loop-carousel.elementor-pagination-type-bullets .swiper-pagination-bullet-active {
	background-color: #009FE3;
	opacity: 1;
}

.elementor-widget-loop-carousel .swiper-pagination-bullet {
	transition: opacity .25s ease, background-color .25s ease, width .2s ease;
}

/* ------------------------------------------------------------------ */
/* Zitat-Karte: Foto und Logo                                          */
/* ------------------------------------------------------------------ */
/*
 * Die Karte ist mittig angelegt und trug oben schon einen Platzhalter – ein
 * Personensymbol. Genau dort gehört das Foto hin; ein erster Versuch mit einer
 * linksbündigen Fußzeile arbeitete gegen den Entwurf und wurde verworfen.
 *
 *     [ Foto oder Platzhaltersymbol ]
 *     »Zitat«
 *     Name
 *     Position · Unternehmen
 *     [ Logo ]
 *
 * Beide Bilder sind freiwillig. Ein Bild-Widget mit leerem Feld lässt Elementor ganz weg –
 * die Karte bekommt dadurch keine Lücke. Die Regeln müssen also nur die vier Fälle sauber
 * halten, in denen etwas da ist.
 */

/*
 * Alle Regeln hängen an `.mbz-karte` – nicht aus Bequemlichkeit, sondern aus Notwendigkeit:
 * Elementors Grundregel `.elementor-widget-image img` hat dieselbe Spezifität wie
 * `.mbz-foto img` und lädt später. Gemessen wurden dadurch `width: 72px` (unsere Regel), aber
 * `height: 59.5px`, `display: inline-block` und `border-radius: 0` – die Hälfte eines
 * Regelblocks wirkungslos. Mit der zusätzlichen Klasse gewinnt unsere Regel eindeutig.
 */

/* Das Platzhaltersymbol tritt zurück, sobald ein Foto vorliegt. */
.mbz-karte:has(.mbz-foto img) .mbz-icon {
	display: none;
}

/*
 * Die Abstände beider Bildplätze stehen als `_margin` am Widget, nicht hier.
 *
 * Grund: Elementors Regel `.e-con > .elementor-widget:not(:last-child)` setzt
 * `margin-block-end: 0` und hat mit drei Klassen die höhere Spezifität. Aus dem Stilblock
 * heraus kam deshalb nur die Oberkante durch – gemessen `margin: -10px 0px 0px`. Das Foto
 * klebte am Zitat, während der Platzhalter seine 14px hatte, weil Elementor die als
 * Element-Regel schreibt. Derselbe Weg trägt hier: die Einstellung am Widget.
 */

.mbz-karte .mbz-foto img {
	display: block;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	background: #F4F6F8;
	box-shadow: 0 6px 18px -10px rgba(13, 21, 32, .45);
}

/*
 * Das Logo ist Absender, nicht Blickfang: klein und zurückgenommen. Volle Sättigung würde
 * mit der Akzentfarbe der Seite konkurrieren.
 */
.mbz-karte .mbz-logo img {
	display: block;
	max-height: 24px;
	max-width: 120px;
	width: auto;
	height: auto;
	opacity: .7;
}

/* Kein Bild, kein Platz – falls Elementor doch eine leere Hülle rendert. */
.mbz-karte .mbz-foto:not(:has(img)),
.mbz-karte .mbz-logo:not(:has(img)) {
	display: none;
}

/* ------------------------------------------------------------------
 * Lange Komposita brechen auf schmalen Bildschirmen
 * ------------------------------------------------------------------
 *
 * Deutsche Überschriften enthalten Wörter, die schmaler als der Bildschirm sein müssen und es
 * nicht sind. Nachgemessen auf `/industrien/versicherungen/` bei 371px: Die H1 „IT für
 * Versicherungen" braucht 397px, hat 331px – die Seite ließ sich um 45px waagerecht schieben.
 * Der Befund kam von drei unabhängigen Messungen als „Überlauf durch das Kundenstimmen-
 * Karussell"; das war eine zweite, echte Ursache, aber nicht diese. Es lohnt, beide zu trennen.
 *
 * Warum nicht im Template: Das Problem hängt an der Sprache, nicht an einer Seite. Jedes
 * Template kann es treffen, sobald ein Titel ein langes Wort enthält – „Betriebsdatenerfassung",
 * „Anlagenverfügbarkeit", „Datenschutzerklärung".
 *
 * `overflow-wrap: anywhere` ist die Garantie, `hyphens: auto` die gute Form: Es trennt mit
 * Bindestrich statt hart mitten im Wort. Beides zusammen, weil `hyphens` allein nicht greift,
 * wenn kein Trennpunkt passt. Voraussetzung ist `lang` am `<html>` – gesetzt auf „de", geprüft.
 *
 * Nur unter 768px: Auf breiten Schirmen soll nichts getrennt werden, dort ist Platz.
 */
/*
 * `.elementor-heading-title` gehört dazu, nicht nur die Tags.
 *
 * Elementors Überschriften-Widget lässt den HTML-Tag frei wählen. Auf der Lösungsseite
 * „KI- & IT-Strategie" steht die 52px-Überschrift als `<div class="elementor-heading-title">`
 * – ein Selektor aus `h1, h2, h3` greift dort nicht. Gemessen: 403px Inhalt in 331px Platz,
 * 52px Überlauf, nachdem die erste Fassung dieser Regel schon lief.
 *
 * Die Klasse sitzt auf jeder Überschrift des Widgets, unabhängig vom Tag. Sie ist deshalb der
 * verlässlichere Anker – die Tags bleiben für Überschriften aus anderen Quellen stehen.
 */
/*
 * BERICHTIGT 30.08.2026 - `hyphens: auto` war als Notmassnahme richtig und als Dauerregel falsch.
 *
 * Die mobile Pruefrunde hat den Preis sichtbar gemacht. Getrennt wurde naemlich auch, wo es
 * nicht noetig war - Woerter, die als Ganzes in die naechste Zeile gepasst haetten:
 *
 *     „IT für Pro-duktion und Maschinen-bau"        (Branchenseite)
 *     „Zuhause im in-dustriellen Mit-telstand."     (Industrien-Uebersicht)
 *     „Projekte aus die-ser Branche."               (Branchenseite)
 *     „Theresa Herbig, … KI-In-itiativen"           (Zuschreibungszeile)
 *
 * Der letzte Fall zeigt es am deutlichsten: Ein **Name** wird getrennt. Und die Abnahmetabelle
 * in `PRUEFLISTE-ELEMENTOR.md` verlangt an anderer Stelle „kein Bruch innerhalb eines Wortes" -
 * die Doku widersprach sich also selbst.
 *
 * Dass die Regel falsch war, laesst sich auch daran ablesen, **wie oft sie zurueckgenommen
 * wurde**: dreimal, in #2027, #2107 und #4134, jeweils mit zwei Klassen gegen diese eine hier.
 * Eine Regel, gegen die drei Dokumente anschreiben, ist keine Grundregel mehr.
 *
 * Jetzt `hyphens: manual` - so wie die Referenz `:9003` es auf allen Ueberschriften haelt.
 * `overflow-wrap: break-word` bleibt als Garantie gegen echten Ueberlauf, aber es bricht erst,
 * wenn ein Wort allein nicht in die Zeile passt - nicht schon, wenn die Zeile voll ist. Das ist
 * der Unterschied zu `anywhere` und der Grund, warum die Trennstriche verschwinden, ohne dass
 * ein Ueberlauf zurueckkommt.
 *
 * ERWOGEN UND VERWORFEN: `hyphenate-limit-chars: 14 5 5` - Trennung nur bei Woertern ab 14
 * Zeichen. Elegant, weil „Versicherungen" getrennt wuerde und „industriellen" nicht. Verworfen,
 * weil die Wirkung sich nicht sauber nachmessen liess (die Zeilenhoehen blieben in allen
 * Varianten gleich, nur die Zaehlung der Textfragmente aenderte sich) und weil die Eigenschaft
 * jung ist. Eine Regel, deren Wirkung man nicht belegen kann, ist keine gute Grundregel.
 *
 * Voraussetzung bleibt `lang="de"` am `<html>` - gesetzt, geprueft.
 *
 * Nur unter 768px: Auf breiten Schirmen soll nichts getrennt werden, dort ist Platz.
 */
@media (max-width: 767px) {

	.elementor h1,
	.elementor h2,
	.elementor h3,
	.elementor .elementor-heading-title {
		overflow-wrap: break-word;
		hyphens: manual;
	}
}

/* ------------------------------------------------------------------
 * Akzentfarbe innerhalb einer Überschrift
 * ------------------------------------------------------------------
 *
 * `<span class="mb-akzent">` färbt einen Teil einer Überschrift, ohne dass dafür ein zweites
 * Widget nötig ist. Die Startseite arbeitet schon so – dort trägt allerdings **jedes**
 * Überschriften-Widget die Regel als eigenes `custom_css`:
 *
 *     selector .mb-akzent { color: var(--e-global-color-primary); }
 *
 * Achtmal dieselbe Zeile, und bei jeder neuen Überschrift eine Stelle, die man vergessen kann.
 * Hier steht sie einmal. Der Wert ist derselbe: Die Primärfarbe des Kits ist `#009FE3` – exakt
 * die Farbe, die das entfallene zweite Widget der Lösungsseiten als `title_color` hatte.
 *
 * Bewusst `var()` und keine feste Farbe: Wer die CI-Farbe im Kit ändert, ändert sie hier mit.
 * Das ist auch der Weg, auf dem die offene Kontrastfrage (G-23) an einer Stelle lösbar wäre.
 */
/*
 * ZWEI FARBEN, UNTERSCHIEDEN AM TAG (G-23, Freigabe 08.09.2026).
 *
 * `#009FE3` erreicht auf Weiss 2,97:1 und verfehlt damit die 3:1, die WCAG AA fuer grosse Schrift
 * verlangt. Auf DUNKLER Flaeche erreicht dieselbe Farbe 6,26 bis 7,07:1 und ist dort richtig
 * (ADR-99) - eine einzige Farbe kann es also nicht sein.
 *
 * Das Kriterium ist der Tag, und es ist gemessen: Alle 24 Akzente in einer H1 stehen im
 * Kopfbereich auf dunkler Flaeche (20 in `leistung_hero_titel`/`industrie_hero_titel`, vier als
 * Elementor-Einstellung in #2004, #3182, #4133, #4134). Alle 13 uebrigen stehen in `h2` oder
 * `div` und auf Weiss bzw. `#F4F6F8`. Eine H1 auf hellem Grund gibt es im Bestand nicht, und eine
 * Abschnittsueberschrift mit Akzent auf dunkler Flaeche auch nicht.
 *
 * Der Vorteil gegenueber einer Klasse je Stelle: Ein neuer Abschnitt ist von selbst richtig.
 * Kommt eines Tages ein heller Kopf oder ein dunkler Abschnitt, ist das eine Entscheidung - dann
 * traegt die Stelle eine eigene Klasse, und die Regel bleibt, wie sie ist.
 */
.elementor .mb-akzent {
	color: #0095D6;
}

.elementor h1 .mb-akzent {
	color: var(--e-global-color-primary, #009FE3);
}

/* ------------------------------------------------------------------
 * Kopfbereich einer dunklen Seite
 * ------------------------------------------------------------------
 *
 * Zehn Seiten beginnen mit derselben dunklen Fläche. Elementor gibt Verläufe an dieser
 * Stelle nicht aus (Prüfliste 8b), die Fläche kommt also ohnehin aus CSS – die Frage ist nur,
 * aus wessen. Bisher stand derselbe Verlauf wortgleich in bis zu neun Stilblöcken; wer ihn
 * ändern wollte, musste neun Dokumente anfassen und merkte es nicht, wenn er eines übersah.
 *
 * NACHGEMESSEN AM GERENDERTEN FRONTEND, nicht aus den Bauskripten geschlossen – wer den
 * Verlauf trägt und woher er kommt:
 *
 *   .mba-kopf      /loesungen/ /industrien/ /insights/ /case-studies/   diese Datei
 *   .mblf-a-kopf   /leitfaeden/                                        Stilblock im Dokument
 *   .mblf-kopf     Leitfaden-Detailseite                               Stilblock im Dokument
 *   .mbi-kopf      Insight-Detailseite                                 Stilblock im Dokument
 *   .mbko-kopf     /kontakt/                                           Stilblock im Dokument
 *   .mbnh-kopf     /nachhaltigkeit/                                    Stilblock im Dokument
 *   .mbrt-kopf     /impressum/ /datenschutzerklaerung/                 Stilblock im Dokument
 *
 * DREI KLASSEN GEHOEREN NICHT DAZU – das ist ein Befund, keine Dublette:
 *
 *   .mbue-kopf   /ueber-uns/ zeigt ein FOTO (München von oben), nicht den Verlauf.
 *   .mbka-kopf   /karriere/  zeigt ein FOTO (Team), nicht den Verlauf.
 *                Bei beiden steht die Verlaufsregel weiterhin im Stilblock des Dokuments und
 *                ist wirkungslos: Elementors Bildregel mit der Element-ID im Selektor gewinnt.
 *                Sie hier mitzusetzen würde nichts nützen und im Zweifel das Foto verdecken –
 *                deshalb stehen sie NICHT in der Liste unten.
 *   .mbwb-kopf   trifft überhaupt kein Element. Der Baustein „Warum BITS?" hat einen
 *                Abschnitt (`.mbwb-abschnitt`), aber keinen Kopfbereich. Die Regel entsteht
 *                aus `stilblock()` in `tools/elementor-statik.php`, das sie für JEDEN Präfix
 *                mitschreibt – auch dort, wo es keinen Kopfbereich gibt.
 *
 * Die INNENABSTAENDE bleiben, wo sie sind: Sie unterscheiden die Seiten (170/72 auf den
 * Übersichten, 160/100 auf /nachhaltigkeit/, 150/180, 150/0, …), stehen als Elementor-
 * Einstellung am inneren Container und haben mit der Fläche nichts zu tun.
 *
 * WARUM FUENF KLASSEN: Die Kopien in den Dokumenten stehen in einem `<style>` im Body und
 * gewinnen bei gleicher Spezifität über die Reihenfolge (Prüfliste 64). Mit fünf Klassen
 * greift diese Regel auch, solange die Kopien stehen bleiben – dieselbe Bauform wie beim
 * Verlauf der dunklen Flächen am Ende dieser Datei. `:is()` zählt dabei wie eine Klasse,
 * spart aber sieben ausgeschriebene Selektoren.
 */
:root {
	--mb-kopfflaeche:
		radial-gradient(120% 85% at 80% 8%, rgba(0, 159, 227, 0.27), transparent 62%),
		radial-gradient(90% 70% at 5% 92%, rgba(0, 111, 158, 0.24), transparent 60%),
		linear-gradient(160deg, #001521 0%, #000 62%);
}

.elementor .elementor-element.e-con:is(.mba-kopf, .mbi-kopf, .mbko-kopf, .mblf-kopf, .mblf-a-kopf, .mbnh-kopf, .mbrt-kopf):not(.elementor-motion-effects-element-type-background) {
	background-image: var(--mb-kopfflaeche);
}

:is(.mba-kopf, .mbi-kopf, .mbko-kopf, .mblf-kopf, .mblf-a-kopf, .mbnh-kopf, .mbrt-kopf) h1 {
	text-wrap: balance;
}

/*
 * Die Akzentlinie sitzt am `::after` des Überschriften-**Titels**, nicht am Widget: Elementors
 * Überschriften-Widget lässt den Tag frei wählen, und ein `h1`-Selektor greift dann nicht.
 * `.elementor-heading-title` trifft die Überschrift unabhängig vom Tag (Prüfliste 48).
 *
 * `.mblf-a-h1` steht daneben, weil die Leitfäden-Übersicht als einzige der fünf Übersichten
 * eigene Klassen führt (`mblf-a-kopf`/`mblf-a-h1` statt `mba-kopf`/`mba-h1`) – gemessen
 * identisch, also eine zweite Wahrheit ohne Gewinn. Solange ihre Kopie im Dokument steht,
 * gewinnt die; danach trägt diese Regel. Der eigentliche Schritt wäre, die Vorlage auf
 * `mba-*` umzustellen (siehe `tools/leitfaden-templates-bauen.php`).
 */
.mba-h1 .elementor-heading-title::after,
.mblf-a-h1 .elementor-heading-title::after {
	content: "";
	display: block;
	width: 54px;
	height: 4px;
	border-radius: 2px;
	background: var(--e-global-color-primary, #009FE3);
	margin-top: 22px;
}

/* ------------------------------------------------------------------
 * Navigationsliste (Baustein „Navigation: Liste aus einem Inhaltstyp")
 * ------------------------------------------------------------------
 *
 * Ersetzt die hartkodierten `icon-list`-Widgets der Mega-Menü-Ausklappflächen. Die Werte sind
 * aus ihnen übernommen, nicht neu erfunden – 46px Zeilenhöhe, 12px Innenabstand, derselbe
 * Verlauf beim Überfahren, derselbe Pfeil, der erst dabei erscheint.
 *
 * Zwei Größen, weil die Ausklappfläche zwei hat: die Fokus-Spalte groß und einspaltig, die
 * übrigen klein und zweispaltig. Mehr Varianten braucht es nicht – wer eine dritte anlegt,
 * sollte zuerst prüfen, ob nicht eine der beiden gemeint war.
 *
 * Hier und nicht im Stilblock eines Templates, weil die Liste an mehreren Orten erscheint
 * (Menü, Fußzeile) und dieselbe Optik haben soll (ADR-66).
 */
.mb-navliste {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 0 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-navliste--klein {
	grid-template-columns: repeat(2, 1fr);
}

.mb-navliste li {
	margin: 0;
	padding: 0;
	height: 46px;
}

.mb-navliste a {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 46px;
	padding: 0 12px;
	border-radius: 12px;
	color: #000;
	font-family: Inter, system-ui, sans-serif;
	font-size: 15.5px;
	font-weight: 700;
	text-decoration: none;

	/*
	 * `nowrap` ist übernommen: Die Spalten sind breit genug (328px bzw. 401px), und ein
	 * umbrechender Eintrag würde die 46px-Zeile sprengen. Bei einem längeren Titel fällt das
	 * sofort auf – besser als eine Zeile, die still aus dem Raster fällt.
	 */
	white-space: nowrap;
	transition: 0.2s;
}

.mb-navliste--klein a {
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
}

.mb-navliste a:hover,
.mb-navliste a:focus-visible {
	color: #006F9E;
	background: linear-gradient(135deg, rgba(0, 159, 227, 0.10), rgba(0, 159, 227, 0.03));
}

.mb-navliste a::after {
	content: "→";
	display: inline-block;
	margin-left: 8px;
	opacity: 0;
	transform: translateX(-4px);
	transition: 0.2s;
}

.mb-navliste a:hover::after,
.mb-navliste a:focus-visible::after {
	opacity: 1;
	transform: none;
}

/* Auf schmalen Geräten klappt das Mega-Menü ohnehin anders; eine Spalte ist dort richtig. */
@media (max-width: 767px) {
	.mb-navliste--klein {
		grid-template-columns: repeat(1, 1fr);
	}

	.mb-navliste a {
		white-space: normal;
		height: auto;
		min-height: 46px;
	}

	.mb-navliste li {
		height: auto;
	}
}

/* ------------------------------------------------------------------
 * Baustein „Lösung: Was es kostet"
 * ------------------------------------------------------------------
 *
 * Aus der aktualisierten Vorlage übernommen (`bls-preis-*`). Der Abschnitt beantwortet, wie
 * abgerechnet wird – die Frage, die sonst zum Absprung führt.
 *
 * Hier und nicht im Stilblock des Templates: Der Baustein steht als Widget, Block und
 * Shortcode bereit und kann damit auf mehr als einer Seite erscheinen (ADR-66).
 *
 * Eine Abweichung von der Vorlage mit Absicht: Dort trägt jeder Preisfaktor ein eigenes
 * Symbol. Symbole brauchen Dateien und eine Pflegestelle; hier steht ein Punkt in der
 * Akzentfarbe. Sobald es einen Symbolvorrat gibt, ist das die Stelle zum Nachziehen.
 */
.mb-preise-kopf {
	text-align: center;
	margin-bottom: 34px;
}

/*
 * Die Vorzeile steht auf der hellen Abschnittsfläche. `#009FE3` erreicht dort 2,97:1 und ist bei
 * 12,5px unter WCAG AA - `#006F9E` erreicht 5,57:1 (G-23). Nicht die Farbe ist der Fehler, sondern
 * die Farbe auf Weiß: Auf der dunklen Hervorhebungskarte bleibt der Akzent, dort sind es 5,67:1.
 */
.mb-preise-vorzeile {
	margin: 0 0 12px;
	color: #006F9E;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.mb-preise-titel {
	margin: 0 0 14px;
	color: #0D1520;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.mb-preise-lead {
	max-width: 640px;
	margin: 0 auto;
	color: #3D454D;
	font-size: 17px;
	line-height: 1.65;
}

/*
 * Drei Karten. `auto-fit` statt einer festen Spaltenzahl: Die Vorlage zeigt drei, aber ein
 * Modell mehr oder weniger ist eine Redaktionsentscheidung und darf das Raster nicht sprengen.
 */
.mb-preise-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 24px;
	align-items: stretch;
}

.mb-preis-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	padding: 22px 24px 24px;
	border: 1px solid #E7EBEF;
	border-radius: 26px;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(0, 21, 33, 0.04), 0 20px 44px -30px rgba(0, 21, 33, 0.24);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s, border-color 0.35s;
}

/*
 * Die Karte hebt sich beim Ueberfahren. Nur mit Zeigegeraet und nur, wenn der Besucher Bewegung
 * nicht abbestellt hat - dieselben zwei Bedingungen wie bei jeder anderen Bewegung im Projekt.
 */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

	.mb-preis-karte:hover {
		transform: translateY(-5px);
		border-color: #B8DFF4;
		box-shadow: 0 2px 4px rgba(0, 21, 33, 0.05), 0 32px 62px -32px rgba(0, 21, 33, 0.3);
	}

	.mb-preis-karte--hervor:hover {
		border-color: transparent;
		box-shadow: 0 3px 5px rgba(0, 21, 33, 0.2), 0 40px 76px -34px rgba(0, 21, 33, 0.74);
	}
}

/*
 * Die hervorgehobene Karte.
 *
 * Drei Farbwerte statt zwei, ein radialer Lichtkegel in der Akzentfarbe oben rechts und eine
 * haarfeine helle Linie ueber der Oberkante - die drei Griffe der Vorlage, die aus einer dunklen
 * Flaeche eine beleuchtete Karte machen. Alles reine Gestaltung, kein zusaetzliches Markup.
 *
 * Der Kontrast wird dabei besser: `#009FE3` auf `#001521` erreicht 6,04:1 gegen 5,61:1 auf dem
 * bisherigen `#111E2D`. Die Schrittnummer bleibt deshalb unser Akzent - die Vorlage hellt sie dort
 * auf `#3DB8F5` auf, was auf dunklem Grund nicht noetig ist.
 */
.mb-preis-karte--hervor {
	border: 0;
	background: linear-gradient(165deg, #00263A 0%, #001521 58%, #000C13 100%);
	box-shadow: 0 2px 3px rgba(0, 21, 33, 0.18), 0 30px 60px -34px rgba(0, 21, 33, 0.66);
}

.mb-preis-karte--hervor::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(62% 74% at 84% 4%, rgba(0, 159, 227, 0.4), rgba(0, 21, 33, 0) 70%);
}

.mb-preis-karte--hervor::after {
	content: "";
	position: absolute;
	top: 0;
	right: 24px;
	left: 24px;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

/* Der Inhalt gehoert ueber den Lichtkegel, sonst liegt er darunter. */
.mb-preis-karte--hervor > * {
	position: relative;
	z-index: 1;
}

.mb-preis-kopfzeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

/*
 * Die Schrittnummer steht in beiden Kartenarten. Auf der hellen Karte muss sie abdunkeln, auf der
 * dunklen darf der Akzent bleiben - die Regel danach holt ihn dort zurück.
 */
.mb-preis-schritt {
	color: #006F9E;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mb-preis-pille {
	padding: 4px 12px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	color: #FFFFFF;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Auf einer hellen Karte braucht die Kennzeichnung eine sichtbare Kante und dunkle Schrift. */
.mb-preis-karte:not(.mb-preis-karte--hervor) .mb-preis-pille {
	border-color: #DBDEE2;
	color: #5B6875;
}

.mb-preis-titel {
	margin: 0 0 6px;
	color: #0D1520;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

/* Auf dunklem Grund ist der Akzent richtig: #009FE3 auf #111E2D erreicht 5,67:1. */
.mb-preis-karte--hervor .mb-preis-schritt {
	color: var(--e-global-color-primary, #009FE3);
}

.mb-preis-karte--hervor .mb-preis-titel {
	color: #FFFFFF;
}

/*
 * Die Abrechnungszeile in CY_DUNKEL, nicht in der Akzentfarbe: 14px auf Weiß erreicht mit
 * `#009FE3` nur 2,97:1 (G-23). Auf der dunklen Karte ist die Akzentfarbe richtig.
 */
.mb-preis-modell {
	margin: 0 0 16px;
	color: #006F9E;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.mb-preis-karte--hervor .mb-preis-modell {
	color: var(--e-global-color-primary, #009FE3);
}

.mb-preis-punkte {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Zeichen und Text als Paar. Vorher lag der Haken absolut in einem 24px-Einzug; als gezeichnetes
 * Symbol im Textfluss richtet ihn `flex` an der ersten Zeile aus, auch wenn der Text umbricht.
 */
.mb-preis-punkte li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 9px;
	color: #3D454D;
	font-size: 15px;
	line-height: 1.5;
}

.mb-preis-punkte .mb-haken {
	flex: 0 0 16px;
	/*
	 * Ausgleich auf die erste Textzeile in `em`, nicht in Pixeln: So bleibt er richtig, wenn die
	 * Schriftgroesse sich aendert – ein fester Pixelwert waere an 14,5px gebunden. Die Vorlage
	 * macht es genauso (`.18em`).
	 */
	margin-top: 0.18em;
	color: #006F9E;
}

.mb-preis-karte--hervor .mb-preis-punkte .mb-haken {
	color: var(--e-global-color-primary, #009FE3);
}

.mb-preis-karte--hervor .mb-preis-punkte li {
	color: rgba(255, 255, 255, 0.92);
}

/*
 * Der Haken war ein `✓` als Pseudoelement. Ein Schriftzeichen sitzt auf der Grundlinie und nicht
 * in seiner optischen Mitte – derselbe Fehler wie beim Plus der Leistungsbausteine. Die Vorlage
 * zeichnet ihn; die Farbe steht oben bei der Zeile, wo auch die Ausrichtung steht.
 *
 * Er traegt Bedeutung („dieses Merkmal ist enthalten") und ist damit keine Zierde: WCAG verlangt
 * 3:1, `#009FE3` auf Weiss erreicht 2,97 – deshalb `#006F9E` auf der hellen Karte (G-23).
 */

/* Was den Preis bestimmt. */
.mb-preise-faktoren {
	margin-top: 34px;
	text-align: center;
}

/*
 * Sie ist ein `h3` – und braucht deshalb den Abschnitt im Selektor. Das Elementor-Kit setzt
 * `.elementor-kit-97 h3 { color: #000 }`; das ist Spezifitaet (0,1,1) und schlaegt eine reine
 * Klasse (0,1,0). Gemessen: Die Ueberschrift stand schwarz statt in `#006F9E`. Mit dem Abschnitt
 * davor sind es (0,2,0) – kein `!important`, kein Trick, nur eine Klasse mehr (Pruefliste 64).
 *
 * Aus demselben Grund steht die Groesse hier ausdruecklich: sonst gilt die Kit-Vorgabe.
 */
.mb-preise .mb-preise-faktoren-titel {
	margin: 0 0 14px;
	color: #006F9E;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

/*
 * Flex statt Raster, und zwar wegen der letzten Reihe: Bei fuenf Faktoren in einem vierspaltigen
 * Raster steht der fuenfte links aussen und drei Spalten bleiben leer. Zentriertes Flex-Umbrechen
 * setzt ihn in die Mitte. Die Vorlage macht es genauso.
 */
.mb-preise-faktorliste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-preise-faktorliste li {
	display: flex;
	flex: 0 1 250px;
	flex-direction: column;
	align-items: center;
	color: #0D1520;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: -0.012em;
	/*
	 * `balance` verteilt zwei Zeilen gleichmaessig statt eine lange und ein Wort; `anywhere` bricht
	 * ein deutsches Kompositum, das sonst aus der 250px-Spalte laeuft (Pruefliste 48).
	 */
	text-wrap: balance;
	overflow-wrap: anywhere;
}

/* =====================================================================
 * DER SYMBOL-CHIP: EINE MACHART, ZWEI GROESSEN (ADR-105)
 * =====================================================================
 *
 * Vorher gab es drei Macharten fuer dieselbe Sache: durchsichtig mit Kante (44px, Leistungs-
 * bausteine), vollflaechig `#009FE3` (60px, Branchenkarte) und Verlauf mit Schatten (36px,
 * Preisblock). Die Groesse folgte damit nicht der Karte, sondern dem Entstehungsdatum.
 *
 * DIE MACHART IST DER VERLAUF – so macht es die Vorlage, und die Messung bestaetigt es.
 *
 * Nachgesehen auf der gerenderten Loesungsseite der Vorlage (`:9003`, nicht in ihrem Stylesheet -
 * dort steht auch toter Code): Sie kennt fuer den Chip genau EIN Rezept, `.ks-ico`, und das ist ein
 * Verlauf `linear-gradient(150deg, #28BAF3 0%, #0089CE 52%, #00648F 100%)` mit einer 1px-Fase aus
 * zwei Innenschatten. Es tritt dort in drei Groessen auf – 36, 44 und (als Marke) 34 – immer in
 * derselben Machart. Ihr flaechig-cyaner `.bls-bau-ic` steht im Stylesheet, wird aber nicht
 * gerendert. Unser Preisblock-Chip hat also das richtige Rezept uebernommen; die durchsichtige
 * 44er-Kante und die vollflaechige 60er-Scheibe waren die Abweichungen.
 *
 * Die Messung sagt dasselbe. Gegen die Gruende, auf denen unsere Chips sitzen:
 *
 *   flaechig `#009FE3`   weisse Karte 2,97:1 · heller Abschnitt 2,74:1 · dunkle Karte 5,86:1
 *   Verlauf, Mitte       weisse Karte 4,01:1 · heller Abschnitt 3,71:1 · dunkle Karte 4,34:1
 *
 * Die flaechige Fassung liegt auf beiden hellen Gruenden UNTER der 3:1-Schwelle fuer nicht-textliche
 * Elemente – der Chip hebt sich dort also nicht ab. Der Verlauf traegt auf jedem Grund, weil er
 * beide Enden enthaelt: 80 % seiner Strecke liegen auch gegen den hellen Abschnitt ueber 3:1, und
 * sein dunkles Ende erreicht gegen Weiss 5,57:1. Ein Chip, der auf beiden Gruenden traegt, ist mehr
 * wert als zwei, die je einen koennen (dieselbe Ueberlegung wie bei den Schaltflaechen, ADR-95).
 *
 * Die durchsichtige Fassung war ohnehin kaum eine Form: Flaeche 1,08:1, Kante 1,39:1 gegen die
 * weisse Karte.
 *
 * Und der Verlauf ist der einzige, der unseren Symbolsatz bedient. Die Zeichen der Vorlage sind
 * einfarbig, unsere zweifarbig (ADR-97): `color` setzt die Hauptlinie, `--mb-symbol-2` die
 * Nebenlinie. Auf einer flaechigen Scheibe haetten beide Linien fast denselben Abstand zum Grund;
 * auf dem Verlauf bekommen sie ihn.
 *
 * Die Farben bleiben unsere: Verlauf von unserem Akzent `#009FE3` zu unserem dunklen Wert `#006F9E`
 * (ADR-97), nicht die drei Stufen der Vorlage. Uebernommen ist die 1px-Fase aus zwei
 * Innenschatten – sie gehoert zum Rezept und kostet zwei Werte.
 *
 * ZWEI GROESSEN, abgeleitet aus der Karte, in der der Chip sitzt. Gemessen bei uns und in der
 * Vorlage – das Verhaeltnis ist in beiden dasselbe, rund 15 % der Kartenbreite:
 *
 *   Branchenkarte      408 x 301  -> 60px   (Vorlage: 387er Karte -> 56px)
 *   Leistungsbaustein  302 x 463  -> 44px   (Vorlage: 284er Karte -> 44px)
 *   Preisfaktor        Spalte 250 -> 44px   (Vorlage: 250er Spalte -> 36px)
 *   Ablaufschritt      Spalte 290 -> 44px   (Vorlage: 270er Spalte -> 44px)  [ADR-106]
 *
 * Der Ablaufschritt ist am 28.08.2026 dazugekommen und bestaetigt die Machart, ohne sie zu
 * erweitern: Die Vorlage rendert dort denselben 44er Chip. Ihre Glyphe ist mit **26px** groesser
 * als unsere 22 - gemessen, nicht aus dem Stylesheet gelesen (dort stehen 21, ueberschrieben von
 * einer spaeteren Regel; Pruefliste 26). Wir bleiben bei 22: „das Zeichen ist die Haelfte des
 * Chips" ist die Regel dieses Systems fuer den kleinen Fall, und ein 26-in-44 waere ein dritter
 * Zahlenwert fuer dieselbe Groesse. Wer die Proportion der Vorlage will, setzt am Ablaufschritt
 * `--mb-chip-zeichen: 26px` - eine Zeile, kein Umbau.
 *
 * Beim Preisfaktor weichen wir bewusst ab: Der Auftraggeber hat eine Groesse je Kartengroesse
 * entschieden, und diese Spalte ist gar keine Karte – sie faellt damit in den kleinen Fall. Das ist
 * die einzige Stelle, an der die Vorlage eine dritte Groesse hat und wir keine.
 *
 * Die Grenze liegt bei rund 360px Kartenbreite: darueber 60, darunter 44.
 *
 * Das Zeichen ist die Haelfte des Chips: 22px in 44px. Beim 60er bleibt es bei den 26px aus dem
 * Dokument-Stilblock (siehe unten) – 43 % statt 50 %, ein Zahlenwert, keine Machart.
 */
/*
 * `.mbka-symbol` ist am 02.09.2026 dazugekommen (ADR-124): die Zeichen der Karten
 * „Das erwarten wir" und „Deine Vorteile" auf /karriere/. Gemessen sind diese Karten 302px
 * breit - genau der Fall „Leistungsbaustein" aus der Tabelle oben, also der 44er Chip. Der
 * Klassenname steht hier in der Liste und NICHT als eigener Regelblock: Eine zweite
 * Chip-Machart waere genau das, was ADR-105 abgeschafft hat.
 */
.mb-baustein-symbol,
.mb-preise-faktor-symbol,
.mb-schritt-symbol,
.mbka-symbol {
	--mb-chip: 44px;
	--mb-chip-zeichen: 22px;
	--mb-symbol-2: #BFE6FA;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--mb-chip);
	height: var(--mb-chip);
	border: 0;
	border-radius: 999px;
	background: linear-gradient(150deg, #009FE3 0%, #006F9E 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.18),
		0 10px 22px -12px rgba(0, 111, 158, 0.55);
	color: #DCF2FF;
	box-sizing: border-box;
}

.mb-baustein-symbol svg,
.mb-preise-faktor-symbol svg,
.mb-schritt-symbol svg,
.mbka-symbol svg {
	width: var(--mb-chip-zeichen);
	height: var(--mb-chip-zeichen);
}

/*
 * Der Abstand nach unten ist Layout, nicht Machart – er bleibt je Ort, wie er war.
 */
.mb-baustein-symbol {
	margin-bottom: 18px;
}

.mb-preise-faktor-symbol {
	margin-bottom: 10px;
}

/*
 * Der Chip der Karriere-Karten sitzt in einem HTML-Widget - der Abstand nach unten gehoert
 * deshalb an den Chip selbst, nicht an den Widget-Wrapper: Elementor setzt dort
 * `.e-con .elementor-widget.elementor-widget{margin-block-end:0}` mit drei Klassen und
 * gewinnt gegen jede Wrapper-Regel dieser Datei (gemessen, ADR-124).
 */
.mbka-symbol {
	margin-bottom: 14px;
}

/* =====================================================================
 * „SO ARBEITEN WIR" - DER ABLAUF EINER LOESUNG (ADR-106)
 * =====================================================================
 *
 * Die Werte stammen alle aus der Vorlage (`:9003`, gemessen am 28.08.2026 bei 1440px, Transitionen
 * abgeschaltet). Sie sind nicht neu erfunden - der Abschnitt stand vorher als Loop Grid mit
 * denselben Zahlen; getauscht ist nur, WER ihn rendert, und dazugekommen ist das Zeichen.
 *
 *   Raster    auto-fit, minmax(250px, 1fr), Luecke clamp(24px, 3vw, 40px)
 *   Schritt   Spalte, row-gap 14px, kein Innenabstand
 *   Linie     2px, Verlauf von der Akzentfarbe nach durchsichtig, volle Spaltenbreite
 *   Titel     15px/700, lh 1,15  (Rolle „Karten-Ueberschrift", Pruefliste 8a)
 *   Text      15px/400, lh 1,65
 *
 * Die Verlaufsrichtung ist waagerecht und laeuft nach rechts aus: Die Linie deutet die Bewegung
 * durch die Schritte an. Sie ist Zierrat, deshalb steht sie im Markup als `aria-hidden`-Span.
 *
 * Die Farben sind unsere: `#009FE3` statt der `#17A2E8` der Vorlage - dieselbe Entscheidung wie
 * beim Chip (ADR-105) und bei den Schaltflaechen (ADR-95).
 *
 * `auto-fit` mit einer Mindestbreite statt einer festen Spaltenzahl heisst: Das Raster bricht von
 * sich aus um, ohne Medienabfrage fuer Tablet und Mobil - genau wie in der Vorlage. Und eine
 * Loesung mit drei oder fuenf Schritten sieht trotzdem richtig aus.
 *
 * Die Spaltenzahl aus dem Attribut ist deshalb nicht als `repeat(3, …)` ausgedrueckt, sondern als
 * **Mindestbreite**: Sie ist die Obergrenze, unter der das Raster weiter umbrechen darf. Gerechnet
 * auf die 1280px Inhaltsbreite und 40px Luecke:
 *
 *   sp4  250px  ->  vier Spalten passen (4 x 250 + 120 = 1120 <= 1280), fuenf nicht
 *   sp3  340px  ->  drei passen (1100), vier brauchten 1480
 *   sp2  520px  ->  zwei passen (1080), drei brauchten 1640
 *
 * Ein `min(100%, …)` ist dabei Pflicht, sonst laeuft die Spalte auf einem 375px-Telefon ueber ihre
 * eigene Mindestbreite hinaus (waagerechter Ueberlauf, Pruefliste 48).
 */
.mb-schritte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: clamp(24px, 3vw, 40px);
}

.mb-schritte-sp3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.mb-schritte-sp2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
}

.mb-schritt {
	display: flex;
	flex-direction: column;
	row-gap: 14px;
	/*
	 * Ohne diese Zeile sprengt ein Rasterelement seine Spalte, sobald ein Kind eine natuerliche
	 * Mindestbreite hat (`min-width: auto` = `min-content`). Bei uns sind das die deutschen
	 * Komposita in den Schritt-Texten - im `_elementor_data` ist dazu nichts zu finden
	 * (Pruefliste 66).
	 */
	min-width: 0;
}

.mb-schritt-linie {
	display: block;
	width: 100%;
	height: 2px;
	background: linear-gradient(
		90deg,
		#009fe3 0%,
		rgba(0, 159, 227, 0.85) 30%,
		rgba(0, 159, 227, 0.45) 58%,
		rgba(0, 159, 227, 0.16) 80%,
		rgba(0, 159, 227, 0) 100%
	);
}

.mb-schritt-titel {
	margin: 0;
	color: #0d1520;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.mb-schritt-text {
	margin: 0;
	color: #5b6875;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: -0.007em;
}

/*
 * Die Branchenkarte – der grosse Fall.
 *
 * `.mbin-ic` ist KEIN eigenes Markup von uns, sondern ein Elementor-Container in der Loop-Vorlage
 * #2122 („Industrie - Karte"). Groesse (60), Radius und die vollflaechige `background-color`
 * `#009FE3` stehen dort als Container-Einstellungen, das Zeichen als `::before` mit einer
 * data-URI im Stilblock von #2107. Beides ist bewusst NICHT angetastet – gemeldet statt geaendert.
 *
 * Deshalb setzt diese Regel nur die zwei Eigenschaften, die die Machart ausmachen. Sie greift auch
 * gegen den Dokument-Stil, ohne Spezifitaetsstreit (Pruefliste 64): Elementor schreibt
 * `background-COLOR`, wir schreiben `background-IMAGE` – der Verlauf liegt darueber, und einen
 * konkurrierenden `box-shadow` gibt es an dem Container nicht. Nachgemessen: Verlauf und Schatten
 * kommen an, obwohl `post-2122.css` nach unserer Datei laedt.
 *
 * Die 60px bleiben, weil die Karte 408px breit ist – dasselbe Verhaeltnis wie oben.
 */
.mbin-ic {
	background-image: linear-gradient(150deg, #009FE3 0%, #006F9E 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.18),
		0 10px 22px -12px rgba(0, 111, 158, 0.55);
}

/* Zusage: derselbe Kasten wie ein Zitat (ADR-80) – Kante links, weiche Fläche. */
.mb-preise-zusage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 34px;
	padding: 22px 26px;
	border-left: 3px solid var(--e-global-color-primary, #009FE3);
	border-radius: 14px;
	background: #FFFFFF;
}

.mb-preise-zusage p {
	margin: 0;
	color: #3D454D;
	font-size: 15px;
	line-height: 1.6;
}

/*
 * Weiß auf `#009FE3` erreicht 2,97:1 - eine Schaltflaeche mit unlesbarer Beschriftung. Auf
 * `#006F9E` sind es 5,57:1.
 */
.mb-preise-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	padding: 15px 28px;
	border-radius: 999px;
	background: #006F9E;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: 0.2s;
}

/*
 * Der Hover-Zustand hellte auf: Weiß auf `#2FB4EA` erreicht **2,38:1** und war damit die
 * schlechteste Stelle des ganzen Abschnitts - schlechter als der Ruhezustand. Eine Schaltflaeche
 * dunkelt beim Ueberfahren ab, nicht auf. `#005B82` erreicht 7,04:1.
 */
.mb-preise-cta:hover,
.mb-preise-cta:focus-visible {
	background: #005B82;
	color: #FFFFFF;
}

@media (max-width: 767px) {
	.mb-preise-titel {
		font-size: 28px;
	}

	.mb-preise-zusage {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ------------------------------------------------------------------
 * Baustein „Sicherheit & Compliance" – Nachweiskarten auf dunklem Grund
 * ------------------------------------------------------------------
 *
 * Aus der aktualisierten Vorlage übernommen. Fünf Nachweise; Elementor stellt für Container
 * kein Rasterfeld bereit (G-18), deshalb steht die Breite hier.
 *
 * Zwei Dinge, die beide sein müssen – einzeln wirkt keines:
 *
 * 1. **`flex-wrap` steht in der Elementor-Einstellung des Containers**, nicht hier. Elementors
 *    eigene Container-Regeln setzen es über eine Variable und gewinnen gegen dieses Stylesheet.
 * 2. **Die Breite steht als `width`, nicht als `flex-basis`.** Ein Elementor-Container trägt
 *    `--width: 100%`; ein `flex: 1 1 <basis>` lässt die Karten schrumpfen, statt umzubrechen.
 *    Gemessen: fünf Karten in einer Reihe statt 3+2. `width` überschreibt die Variable.
 *
 * **Eine bewusste Abweichung von der Vorlage:** Dort wächst die letzte Reihe auf die volle
 * Breite, zwei Karten teilen sich dann 1280px. Das Ergebnis ist ein 628px breiter Kasten mit
 * dem Satz „Entwicklung in Deutschland." darin. Gleich breite Karten halten das Textmaß gleich
 * und lesen sich ruhiger – deshalb bleibt es hier bei einem Drittel für jede Karte.
 *
 * Symbole hat die Vorlage, wir nicht: Sie brauchen Dateien und eine Pflegestelle. Sobald es
 * einen Symbolvorrat gibt, ist das hier die Stelle.
 */
/*
 * NACHTRAG 28.08.2026 (ADR-108): Die Kacheln sind keine Elementor-Container mehr.
 *
 * Sie kommen seit dem Umbau aus dem Inhaltstyp „Nachweise" und werden vom Baustein
 * `mybits-sicherheit-nachweise` gerendert. Die Selektoren hiessen deshalb `.mb-siegel > .e-con`
 * und heissen jetzt `.mb-siegel > .mb-siegel-karte`. **Die Werte sind unveraendert** - Breite,
 * Kante, Radius und Flaeche stehen Ziffer fuer Ziffer so da wie vorher.
 *
 * Dazugekommen sind drei Dinge, die vorher als Elementor-EINSTELLUNGEN existierten und mit den
 * Containern verschwunden waeren: der Innenabstand (22/24/24/24), die Spaltenrichtung und die
 * Typografie von Titel und Text. Sie sind uebernommen, nicht neu gewaehlt.
 *
 * Der Prueferbericht vom 28.08.2026 nennt vier Abweichungen von der Vorlage (Radius 16 statt 20,
 * Kante grau statt cyan, flacher Grund statt Verlauf, kein Schatten). Sie bleiben **absichtlich
 * stehen**: Das ist Gestaltung und eine eigene Entscheidung, die man sehen und freigeben muss -
 * sie hat in einer Umstellung des Inhaltsmodells nichts zu suchen (dieselbe Ueberlegung wie beim
 * Ring der Gruende, ADR-107).
 */
.mb-siegel {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.mb-siegel > .mb-siegel-karte {
	display: flex;
	flex-direction: column;
	width: calc((100% - 48px) / 3);
	box-sizing: border-box;
	padding: 22px 24px 24px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.045);
}

.mb-siegel-sp2 > .mb-siegel-karte {
	width: calc((100% - 24px) / 2);
}

.mb-siegel-sp4 > .mb-siegel-karte {
	width: calc((100% - 72px) / 4);
}

.mb-siegel-karte p {
	margin: 0;
}

/*
 * DIE ZWEI HUELLEN DER DREHKARTE WAREN VORHER ELEMENTOR-CONTAINER.
 *
 * Als Container brachten `.mb-siegel-dreh` und `.mb-siegel-vorn` ihre Spaltenrichtung als
 * Einstellung mit; als eigenes Markup haben sie keine. Ohne diese zwei Zeilen faellt die
 * Drehkarte auseinander: `.mb-siegel-dreh{flex:1 1 auto}` im Stilblock von #4187 traefe ein
 * Blockelement, und `.mb-siegel-vorn::after{margin-top:auto}` - der Hinweis „Geltungsbereich
 * einblenden" - haette keinen Flex-Kontext, in dem `auto` etwas bedeutet.
 *
 * `display: grid` im gedrehten Zustand gewinnt trotzdem: Die Regel dort hat drei Klassen (0,3,0)
 * und steht in einem Stilblock, der spaeter laedt.
 */
.mb-siegel-karte .mb-siegel-dreh,
.mb-siegel-karte .mb-siegel-vorn {
	display: flex;
	flex-direction: column;
}

/*
 * ZWEI KLASSEN FUER DEN TITEL - sonst ist er SCHWARZ.
 *
 * Das Elementor-Kit setzt `.elementor-kit-97 h3{color:#000000}` (0,1,1, und die Datei laedt
 * spaeter, Pruefliste 64). Ein `.mb-siegel-titel` mit 0,1,0 verliert dagegen. Vorher war das kein
 * Thema, weil Elementors Ueberschriften-Widget seine Farbe als Element-Regel schrieb; mit dem
 * Umbau auf eigenes Markup ist es eines. Dasselbe Muster wie bei den Gruenden (ADR-107) und den
 * Beitragskarten (ADR-66).
 */
.mb-siegel-karte .mb-siegel-titel {
	margin: 0 0 8px;
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3em;
}

.mb-siegel-karte .mb-siegel-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.80);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55em;
}

/*
 * DER CHIP: DIE MACHART AUS ADR-105, IN DER GROSSEN GROESSE.
 *
 * Die Vorlage zeigt hier einen 56px-Chip mit 28px-Glyphe. Uebernommen ist die GROESSENKLASSE,
 * nicht die Zahl: ADR-105 kennt fuer dieses System genau zwei Groessen, 60 ueber und 44 unter
 * rund 360px Kartenbreite. Die Nachweiskachel ist bei 1280px Inhaltsbreite 394px breit, faellt
 * also in den grossen Fall - 60px, Zeichen 26px, wie bei der Branchenkarte. Ein 56er waere ein
 * dritter Zahlenwert fuer dieselbe Sache, und genau das hat ADR-105 abgeschafft.
 *
 * Die Machart selbst ist die eine des Systems: Verlauf `#009FE3` -> `#006F9E`, 1px-Fase aus zwei
 * Innenschatten. Die Vorlage nimmt hier einen hellen Chipkern mit umgekehrtem Duoton; das waere
 * eine zweite Machart und damit eine Gestaltungsentscheidung.
 */
.mb-siegel-symbol,
.mb-wert-symbol {
	--mb-chip: 60px;
	--mb-chip-zeichen: 26px;
	--mb-symbol-2: #BFE6FA;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	align-self: flex-start;
	box-sizing: border-box;
	width: var(--mb-chip);
	height: var(--mb-chip);
	margin-bottom: 18px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(150deg, #009FE3 0%, #006F9E 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.18),
		0 10px 22px -12px rgba(0, 111, 158, 0.55);
	color: #DCF2FF;
}

.mb-siegel-symbol svg,
.mb-wert-symbol svg {
	width: var(--mb-chip-zeichen);
	height: var(--mb-chip-zeichen);
}

/* Auf dem Tablet zwei je Reihe, auf dem Telefon eine. */
@media (max-width: 1024px) {

	.mb-siegel > .mb-siegel-karte,
	.mb-siegel-sp4 > .mb-siegel-karte {
		width: calc((100% - 24px) / 2);
	}
}

@media (max-width: 767px) {

	.mb-siegel > .mb-siegel-karte,
	.mb-siegel-sp2 > .mb-siegel-karte,
	.mb-siegel-sp4 > .mb-siegel-karte {
		width: 100%;
	}
}

/*
 * OHNE NACHWEISE VERSCHWINDET DIE GANZE FLAECHE - Ueberschrift, Vorspann, Innenabstand.
 *
 * Dieselbe Regel und derselbe Grund wie bei `.mbwb-abschnitt` (ADR-107) und `.mb-faq-sek`
 * (ADR-91): Bliebe der Abschnitt stehen, staende „Sicherheit, die auditiert ist" ueber 184px
 * Nichts. Der zweite Ausschluss ist fuer den Editor - eine Flaeche, die sich dort verbirgt, kann
 * niemand bearbeiten.
 *
 * `.mb-siegel-huelle` setzt `tools/sicherheit-einbauen.php` an den Container, der den Baustein
 * traegt. Eine eigene Klasse, weil `.mb-siegel` seit dem Umbau der Raster-Div des Bausteins ist
 * und mit ihm verschwindet - eine Regel auf einer Klasse, die es im leeren Fall gar nicht gibt,
 * koennte nie greifen.
 */
.mb-siegel-huelle:not(:has(.mb-siegel-karte)):not(:has(.mybits-block-hinweis)) {
	display: none;
}

/* ------------------------------------------------------------------
 * Kopf des FAQ-Abschnitts
 * ------------------------------------------------------------------
 *
 * Vorzeile und Überschrift stehen im Baustein und nicht als eigene Elementor-Widgets daneben:
 * Die Überschrift richtet sich nach dem gezeigten Beitrag („Fragen zu Produktion &
 * Maschinenbau", „Fragen zu diesem Projekt"), und ein dynamischer Tag kann nur **ein** Feld
 * nennen – der Baustein hängt aber in sechs Dokumenten mit fünf Inhaltstypen.
 *
 * Die Werte sind aus dem bisherigen, statischen Kopf des Bausteins übernommen, damit die
 * sechs Seiten unverändert aussehen.
 */
/*
 * Linksbuendig und ohne Abstand nach unten: Der Kopf steht in der LINKEN Spalte des
 * zweispaltigen FAQ-Bausteins (444px), die Fragen rechts (772px). Zentriert waere er nur
 * richtig, wenn er ueber der Liste staende.
 */
.mb-faq-kopf {
	text-align: left;
}

/*
 * DIESE REGEL TRIFFT DERZEIT KEIN ELEMENT – und trotzdem bleibt sie stehen, mit korrigierter
 * Farbe.
 *
 * Nachgesehen auf allen zehn Seiten mit FAQ-Abschnitt: Das Wort „FAQ" über der Überschrift ist
 * ein eigenes Elementor-Text-Widget (gemessen 12,5px/700 in `rgb(0,111,158)`), nicht dieses
 * Absatz-Element. `.mb-faq-vorzeile` entsteht nur, wenn das Baustein-Attribut `vorzeile`
 * gefüllt ist (`SectionRenderer::faq()`), und das ist es nirgends. Die Regel ist also kein
 * falscher Selektor, sondern ein noch nicht beschrittener Ausgabeweg – deshalb löschen wir sie
 * nicht.
 *
 * Der WERT war aber falsch, und zwar an der empfindlichsten Stelle: `#009FE3` erreicht auf der
 * hellen Abschnittsfläche 2,97:1 und ist bei 12,5px unter WCAG AA (G-23). Wer den Weg eines
 * Tages benutzt, bekäme genau die Farbe, die das benachbarte Widget bewusst NICHT hat. Jetzt
 * steht hier derselbe Wert wie dort und wie bei `.mb-preise-vorzeile`: `#006F9E`, 5,57:1.
 *
 * Auf dunklem Grund ist der Akzent richtig (5,67:1) – dafür die Regel darunter.
 */
.mb-faq-vorzeile {
	margin: 0 0 12px;
	color: #006F9E;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/*
 * Werte aus dem bisherigen, statischen Ueberschriften-Widget uebernommen.
 *
 * DER ABSCHNITT IM SELEKTOR IST PFLICHT, nicht Zierde. Der Titel ist ein `h2`, und das
 * Elementor-Kit setzt `.elementor-kit-97 h2 { color: #000 }` – Spezifität (0,1,1) gegen eine
 * reine Klasse (0,1,0). Gemessen: Die Überschrift stand auf allen zehn Seiten schwarz statt in
 * `#0D1520`. Mit `.mb-faq-kopf` davor sind es (0,2,0) – kein `!important`, nur eine Klasse
 * mehr (Prüfliste 64). Derselbe Griff wie bei `.mb-preise .mb-preise-faktoren-titel`.
 */
.mb-faq-kopf .mb-faq-titel {
	margin: 0;
	color: #0D1520;
	font-size: 36px;
	font-weight: 800;
	line-height: 50.6px;
	letter-spacing: -0.44px;
	text-wrap: balance;
}

/*
 * Auf dunklem Grund gilt die Farbe der Fläche, nicht die des Textes. Beide Regeln brauchen
 * denselben Abschnitt im Selektor wie oben, sonst gewinnt wieder das Kit.
 *
 * Anmerkung: `.mb-faq--hell` wird derzeit von keinem Baustein und keinem Werkzeug ausgegeben –
 * die Variante ist vorbereitet, aber unbenutzt.
 */
.mb-faq--hell .mb-faq-kopf .mb-faq-vorzeile {
	color: var(--e-global-color-primary, #009FE3);
}

.mb-faq--hell .mb-faq-kopf .mb-faq-titel {
	color: #FFFFFF;
}

@media (max-width: 767px) {
	.mb-faq-kopf .mb-faq-titel {
		font-size: 30px;
		line-height: 1.2;
	}
}

/* ------------------------------------------------------------------
 * Der FAQ-Abschnitt verbirgt sich ohne zugeordnete Fragen
 * ------------------------------------------------------------------
 *
 * Der Baustein zeigt ausschließlich, was am Beitrag zugeordnet ist. Ohne Zuordnung geben beide
 * Teile – Kopf und Liste – nichts aus. Was dann bliebe, ist die Fläche darum: 64px Innenabstand
 * oben und unten auf `#F4F6F8`, also ein grauer Streifen ohne Inhalt.
 *
 * Diese Regel entfernt ihn. Sie gehört hierher und nicht in einen Template-Stilblock, weil der
 * Baustein in sechs Dokumenten hängt (ADR-91) – eine Regel je Dokument wären sechs Kopien.
 *
 * Der zweite Ausschluss ist für den Editor: Dort gibt der Baustein einen Hinweis aus
 * (`.mybits-block-hinweis`), und eine Fläche, die sich im Editor verbirgt, kann niemand
 * bearbeiten.
 */
.mb-faq-sek:not(:has(.bh-faq-list)):not(:has(.mybits-block-hinweis)) {
	display: none;
}

/* ── Loop-Grid-Karten auf gleiche Hoehe ───────────────────────────────────────
 *
 * Das Grid streckt die Huelle `.e-loop-item` auf die Reihenhoehe - die Karte darin aber nicht.
 * Eine Karte mit kuerzerem Text bleibt flacher; nachgewiesen an der Startseite, wo die zweite von
 * vier Branchenboxen 250px statt 283px hoch war.
 *
 * Ein `display:flex` an der Huelle laesst die Karte die Hoehe fuellen, OHNE eine definite Hoehe zu
 * setzen. Ein `height:100%` an der Karte waere der naheliegende Griff und andernorts genau falsch:
 * Eine definite Hoehe verhindert das Strecken (Pruefliste 37).
 *
 * Der letzte Baustein der Karte - bei uns immer die Schaltflaeche - wird nach unten geschoben.
 * Damit liegen die Links einer Reihe auf einer Linie, auch wenn die Texte spaeter wieder
 * unterschiedlich lang werden. Das ist der Teil, der die Loesung haltbar macht: Sie verlaesst sich
 * nicht auf gleich lange Texte.
 */
.mb-karten-gleich .e-loop-item {
	display: flex;
}

.mb-karten-gleich .e-loop-item > .e-con {
	width: 100%;
}

.mb-karten-gleich .e-loop-item > .e-con > :last-child {
	margin-top: auto;
}

/* ── Kundenstimmen: Karussell ─────────────────────────────────────────────────
 *
 * Die Karte war 1276px breit - eine Zeile ueber die ganze Inhaltsbreite liest niemand. Die Vorlage
 * haelt ihre Zitatkarte bei 718px, und dahin geht es hier auch.
 *
 * Die Folienbreite entsteht aus dem Innenabstand des Swipers. Elementors Regler `offset_width`
 * kann das nicht leisten: Er kennt nur Pixel, und ein fester Wert ist bei 1920px richtig und bei
 * 1030px zerstoerend (Pruefliste 48). `max()` haelt den Abstand nie unter 14px, `calc()` macht die
 * Folie so breit wie die Karte - auf jedem Geraet.
 *
 * Voraussetzung: `offset_sides` steht am Widget auf `none`. Sonst schreibt Elementor eine eigene
 * Abstandsregel mit der Element-ID im Selektor, und diese hier verliert.
 */
.mb-stimmen .swiper {
	padding-inline: max(14px, calc((100% - 746px) / 2));
}

/*
 * Die Pfeile. Im Bedienfeld bietet Elementor fuer sie nur Hintergrundfarbe und Position - keine
 * Groesse, keine Glyphenfarbe, keinen Rahmen (nachgesehen mit `get_controls()`). Seine Vorgabe ist
 * 25px in `rgba(238,238,238,.9)`: auf weissem Grund praktisch unsichtbar.
 *
 * Im Stylesheet gibt es die Stellschrauben aber doch - als Variablen. Die Glyphe ist ein `<svg>`,
 * dessen `fill` aus `--arrow-normal-color` kommt; ein `color` am Knopf reicht deshalb nicht, es
 * verliert gegen den Drei-Klassen-Selektor von Elementor. Ueber die Variable greift es.
 */
.mb-stimmen {
	--arrow-normal-color: #0D1520;
	--arrow-hover-color: #006F9E;
	--arrow-size: 17px;
}

/*
 * Runder Knopf mit duenner Kante, wie in der Vorlage - er liegt ueber den ausgeblendeten
 * Nachbarkarten und braucht deshalb eine eigene Flaeche, um lesbar zu bleiben. Form und Flaeche
 * haben keine Variable, hier ist die Regel der richtige Weg.
 */
.mb-stimmen .elementor-swiper-button {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #DBDEE2;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 10px rgba(13, 21, 32, .08);
	transition: border-color .15s ease, box-shadow .15s ease;
}

/*
 * Der Rahmen braucht VIER Klassen, und das ist kein Trick.
 *
 * `widget-loop-carousel.min.css` setzt `border-style` mit drei Klassen:
 * `.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-next`. Die
 * Regel oben hat zwei – sie verliert, und `border-style: none` macht jede Breite zu 0. Gemessen:
 * Rahmenfarbe kam an (`rgb(219,222,226)`), Breite blieb `0px`. Auf **allen drei** Karussells, also
 * auch dort, wo der Rahmen seit dem 27.08. als behoben galt.
 *
 * Ein Gleichstand hilft nicht: Diese Datei laedt VOR jeder `widget-*.min.css` (Pruefliste 64), bei
 * gleicher Spezifitaet gewinnt also Elementor. Deshalb die Richtungsklassen ausdruecklich – vier
 * Klassen, kein `!important`, und der Selektor sagt selbst, gegen wen er antritt.
 */
.mb-stimmen.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-prev,
.mb-stimmen.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-next {
	border: 1px solid #DBDEE2;
}

.mb-stimmen.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-prev:hover,
.mb-stimmen.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-prev:focus-visible,
.mb-stimmen.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-next:hover,
.mb-stimmen.elementor-widget-loop-carousel .elementor-swiper-button.elementor-swiper-button-next:focus-visible {
	border-color: #009FE3;
}

.mb-stimmen .elementor-swiper-button:hover,
.mb-stimmen .elementor-swiper-button:focus-visible {
	box-shadow: 0 4px 16px rgba(13, 21, 32, .14);
}

/*
 * Die Punkte im Stimmen-Karussell: zwoelf Stueck, also muss die aktuelle Position auf einen Blick
 * lesbar sein. Der aktive wird deshalb zur Pille.
 *
 * Farbe und Grundgroesse kommen aus den Variablen oben. Die Pillenbreite braucht eine echte
 * Regel - eine Variable gaebe es nur fuer ALLE Punkte, nicht fuer den aktiven. Drei Klassen im
 * Selektor, damit sie den Zwei-Klassen-Selektor von Elementor schlaegt.
 */
.mb-stimmen {
	--dots-normal-color: #D3D9DF;
	--swiper-pagination-bullet-inactive-opacity: 1;
}

.mb-stimmen.elementor-widget-loop-carousel .swiper-pagination-bullet-active {
	width: 24px;
	border-radius: 999px;
	background-color: #009FE3;
}

/* ── Footer: sechs Profile in einer Zeile ─────────────────────────────────────
 *
 * Seit dem 27.08.2026 sind es sechs Profile statt drei (LinkedIn, kununu, YouTube, Facebook,
 * XING, GitHub). Sie brachen 5+1 um, und ein einzelnes Symbol in der zweiten Zeile sieht nach
 * Versehen aus.
 *
 * Gerechnet: Die Kachel ist 52px breit (26px Symbol + 13px Polster je Seite), der Abstand 16px.
 * Sechs Kacheln brauchen damit 6x52 + 5x16 = 392px - die Footer-Spalte hat 346px.
 *
 * Verkleinert wird das **Polster**, nicht das Symbol: Die Symbolgroesse traegt die
 * Erkennbarkeit, das Polster ist nur Luft. Mit 8px Polster ergibt sich 6x42 + 5x16 = 332px und
 * passt. `--icon-padding` ist Elementors eigene Variable dafuer; die zwei Regeln danach greifen,
 * falls eine kuenftige Fassung sie nicht mehr benutzt.
 */
.elementor-location-footer .elementor-widget-social-icons {
	--icon-padding: 8px;
}

.elementor-location-footer .elementor-social-icon {
	width: 42px;
	height: 42px;
	padding: 8px;
}

/* ── Lösung: Leistungsbausteine ───────────────────────────────────────────────
 *
 * Karten mit Symbol, Beschreibung und ausklappbarem Leistungsumfang.
 *
 * DAS AUSKLAPPEN: DAS PANEL LIEGT UNTER DEM RASTER, NICHT IN DER KARTE
 *
 * Drei Anläufe, und die ersten zwei sind lehrreich:
 *
 * 1. `<details>` in der Karte, Raster von `stretch` auf `start`. Nur die geöffnete Karte wuchs -
 *    die übrigen fielen aber auf ihre natürliche Höhe zurück (gemessen 468/468/468/446). Die 22px
 *    waren sichtbar, also war es kein Kompromiss, sondern ein Rest des Fehlers.
 * 2. Die Liste als absolute Klappe unter der Karte. Die Kartenhöhen blieben exakt gleich - aber
 *    die Klappe deckte den Abschnitt darunter ab. Und bei **acht** Bausteinen (Industrial AI, zwei
 *    Reihen) hätte sie die zweite Reihe verdeckt. Damit ausgeschieden.
 * 3. Ein Panel unter dem Raster, über die volle Breite. Das Raster bewegt sich nie, nichts wird
 *    verdeckt, und die Liste hat 1200px statt 250px.
 *
 * VIERTER ANLAUF, 31.08.2026: DER SCHALTER GEHÖRT IN SEINE KARTE
 *
 * Der Bau darüber stimmte, der Umschalter nicht. Vorher standen alle Radios am Anfang von
 * `.mb-bausteine`, weil die Regeln mit `~` arbeiteten - und der sieht nur, was nach ihm kommt.
 * Ein Klick auf `<label for="x">` setzt aber den **Fokus** auf `#x`, und der Browser rollt ein
 * fokussiertes Element ins Bild. Am Schreibtisch stehen Radios und Raster gemeinsam im Bild, also
 * fiel es nie auf; auf dem Telefon ist der Abschnitt über 2000px hoch, und die Seite sprang an
 * seinen Anfang - während der aufgeklappte Text unten erschien.
 *
 * Behoben an der Ursache, nicht mit einem Gegenmittel: Kästchen und Beschriftung stehen jetzt in
 * der Karte, das Panel direkt dahinter. Der Fokus landet dort, wo getippt wurde.
 *
 * Zwei Folgen, beide Verbesserungen:
 *
 *   Aus dem Radio wird ein **Kästchen**. Das Radio brauchte einen Hilfsschalter „alles zu" als
 *   Vorauswahl, weil es sich nicht abwählen lässt - und genau der war beim Schließen derselbe
 *   Sprung. Ein Kästchen schaltet sich selbst ab, „Schließen" zeigt auf dasselbe wie das „+".
 *   Der Preis: mehrere Panels können gleichzeitig offen stehen. Für ein „mehr dazu" je Karte ist
 *   das erwartetes Verhalten, kein Verlust.
 *
 *   Einspaltig erscheint das Panel unter **seiner** Karte. Am Schreibtisch bleibt die alte
 *   Anordnung, hergestellt über `order` - das ändert die Darstellung, nicht die Reihenfolge im
 *   Dokument, und die Regeln unten gelten unverändert.
 *
 * `article` für die Karte und `section` für das Panel bleiben - nicht mehr wegen `nth-of-type`,
 * sondern weil sie benennen, was sie sind.
 */
.mb-bausteine {
	position: relative;
}

.mb-bausteine-raster {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
}

/*
 * Fuenf Spalten (08.09.2026). Die Luecke ist 24px, also gehen bei fuenf Karten vier Luecken
 * ab: (100% - 96px) / 5. Bei 1280px Inhaltsbreite sind das 236,8px je Karte - eng, aber der
 * fuenfte Baustein von Managed Services brach sonst allein in eine zweite Zeile um.
 *
 * Die Reihenfolge der Regeln ist hier ohne Bedeutung (gleiche Spezifitaet, verschiedene
 * Klassen), die Position ueber sp4 ist nur der Lesbarkeit wegen absteigend.
 */
.mb-bausteine-sp5 .mb-baustein { width: calc((100% - 96px) / 5); }
.mb-bausteine-sp4 .mb-baustein { width: calc((100% - 72px) / 4); }
.mb-bausteine-sp3 .mb-baustein { width: calc((100% - 48px) / 3); }
.mb-bausteine-sp2 .mb-baustein { width: calc((100% - 24px) / 2); }

@media (max-width: 1024px) {
	.mb-bausteine .mb-baustein { width: calc((100% - 24px) / 2); }
}

@media (max-width: 640px) {
	.mb-bausteine .mb-baustein { width: 100%; }

	/*
	 * Einspaltig gehört das Panel unter SEINE Karte, nicht hinter alle.
	 *
	 * Vorher lagen alle Panels hinter dem gesamten Raster. Auf dem Telefon hieß das: Man tippt auf
	 * Karte 1 und der Text erscheint hinter Karte 8 - außerhalb des Bildes. `order` zurücknehmen
	 * genügt, weil die Reihenfolge im Dokument schon die richtige ist.
	 */
	.mb-bausteine .mb-baustein,
	.mb-bausteine .mb-baustein-panel { order: 0; }
}

/*
 * Das Kästchen ist unsichtbar, aber NICHT `display:none`: Ein ausgeblendetes Feld ist nicht
 * fokussierbar, und damit wäre der Baustein mit der Tastatur nicht bedienbar.
 *
 * `position: absolute` bezieht sich auf die KARTE (`.mb-baustein` ist deshalb `relative`), nicht
 * mehr auf `.mb-bausteine`. Das ist der Kern der Behebung vom 31.08.2026: Ein Klick auf die
 * Beschriftung setzt den Fokus hierher, und der Browser rollt das fokussierte Element ins Bild.
 * Steht es in der angetippten Karte, ist das ein Nichts-Tun - stand es am Anfang des Abschnitts,
 * sprang die Seite auf dem Telefon über 2000px nach oben.
 */
.mb-baustein-schalt {
	position: absolute;

	/*
	 * `bottom`/`left` sind PFLICHT, nicht Zierde - und das war beim ersten Anlauf am 31.08.2026
	 * uebersehen. Ein absolut positioniertes Kind eines FLEX-Containers ist kein Flex-Element;
	 * seine statische Position ist die **Inhaltsecke oben links** des Containers, nicht die
	 * Stelle, an der es im Markup steht.
	 *
	 * Gemessen an der letzten Karte bei 375px: Die Karte war beim Antippen ihrer Fusszeile 49px
	 * ueber der Bildkante angeschnitten, der Fokus zielte auf ihre Oberkante - und die Seite sprang
	 * 372px. Besser als die 1792px des alten Aufbaus (Gegenprobe im selben Lauf), aber nicht null.
	 *
	 * Mit `bottom: 0; left: 0` sitzt das Kaestchen am Kartenfuss, 37px neben seiner Beschriftung.
	 * Sprung: 0.
	 */
	bottom: 0;
	left: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mb-baustein {
	position: relative;
	order: 1;
	display: flex;
	flex-direction: column;
	padding: 26px 24px 22px;
	border: 1px solid #DBDEE2;
	border-radius: 20px;
	background: #ffffff;
	box-sizing: border-box;
}

/*
 * Der Chip dieser Karte ist der kleine Fall des gemeinsamen Symbol-Chips – die Machart steht weiter
 * oben unter „DER SYMBOL-CHIP" (ADR-105). Hier steht bewusst nichts mehr: Vorher war es eine
 * durchsichtige Flaeche mit Kante, die gegen die weisse Karte nur 1,08:1 erreichte.
 */

.mb-baustein-titel {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: #0D1520;
}

.mb-baustein-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #3D454D;
}

/*
 * Die Beschriftung sitzt am Kartenfuß. `margin-top: auto` schiebt sie dorthin - damit liegen die
 * Schalter einer Reihe auf einer Linie, auch wenn die Beschreibungen verschieden lang sind.
 */
.mb-baustein-schalter {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 18px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: #006F9E;
	transition: color .15s ease;
}

/*
 * Das Plus ist GEZEICHNET, nicht gesetzt.
 *
 * Als Schriftzeichen sass es sichtbar zu hoch im Kreis - und zwar trotz `align-items: center`:
 * Ein Glyph richtet sich an der Schriftlinie aus, nicht an seiner optischen Mitte, und bei Inter
 * liegt der Querbalken des Plus oberhalb davon. Mit `line-height` oder einem Versatz laesst sich
 * das je Groesse nachjustieren, aber nie zuverlaessig - jede Schrift hat andere Metriken.
 *
 * Zwei Balken aus `background-image` sitzen exakt mittig, weil sie an der Box ausgerichtet sind
 * und nicht an einer Schrift. Im offenen Zustand verschwindet der senkrechte Balken: Aus dem Plus
 * wird ein Minus, ohne Zeichenwechsel und ohne Sprung.
 */
.mb-baustein-schalter::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(0, 159, 227, .35);
	border-radius: 50%;
	flex: 0 0 auto;
	background-color: transparent;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 9px 1.4px, 1.4px 9px;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: background-size .15s ease, border-color .15s ease, background-color .15s ease;
}

/*
 * Der Fokusring gehört an die Beschriftung, nicht an das unsichtbare Kästchen.
 *
 * Vorher traf die Regel `~ … .mb-baustein .mb-baustein-schalter` ALLE Beschriftungen des Rasters -
 * mit der Tastatur leuchteten also acht Schalter auf, von denen einer gemeint war. Jetzt liegt das
 * Kästchen neben seiner Beschriftung, und `+` trifft genau die eine.
 */
.mb-baustein-schalt:focus-visible + .mb-baustein-schalter {
	outline: 2px solid #009FE3;
	outline-offset: 3px;
	border-radius: 4px;
}

/* ── Das Panel ───────────────────────────────────────────────────────────── */

.mb-baustein-panel {
	/*
	 * Das Panel liegt jetzt IM Raster, direkt hinter seiner Karte. Deshalb:
	 *
	 *   order: 2    am Schreibtisch hinter alle Karten - die gewohnte Anordnung
	 *   width: 100%  eine eigene Zeile, das Raster bricht um
	 *   kein margin-top   der Abstand kommt aus dem `gap: 24px` des Rasters. Beides ergäbe 48px -
	 *                     dieselbe Doppelung wie beim Zusammenfassen zweier Widgets (ADR-108).
	 */
	order: 2;
	width: 100%;
	display: none;
	padding: 26px 30px 22px;
	border: 1px solid rgba(0, 159, 227, .35);
	border-radius: 20px;
	background: #ffffff;
}

.mb-baustein-panel-titel {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #006F9E;
}

/*
 * Über die volle Breite lesen sich vier Punkte in zwei Spalten. Das ist der eigentliche Gewinn
 * dieser Fassung: In der Karte standen sie in einer 250px schmalen Schlucht.
 */
.mb-baustein-panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 44px;
}

@media (max-width: 720px) {
	.mb-baustein-panel ul { columns: 1; }
}

.mb-baustein-panel li {
	position: relative;
	margin-bottom: 11px;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.55;
	color: #3D454D;
	break-inside: avoid;
}

.mb-baustein-panel li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #009FE3;
}

.mb-baustein-zu {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: #5B6875;
}

/* Derselbe Grund wie oben: gezeichnet, nicht gesetzt. */
.mb-baustein-zu::before {
	content: '';
	display: block;
	width: 18px;
	height: 18px;
	border: 1px solid #DBDEE2;
	border-radius: 50%;
	flex: 0 0 auto;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 8px 1.4px;
	background-position: center;
	background-repeat: no-repeat;
}

.mb-baustein-zu:hover { color: #006F9E; }

/*
 * DIE AUSWAHL - DREI REGELN STATT 48 SELEKTOREN (31.08.2026)
 *
 * Vorher standen hier drei Bloecke mit je sechzehn handgeschriebenen `nth-of-type`-Paaren:
 * „Schalter n+1 gehoert zu Panel n". Sie waren von der Kartenzahl unabhaengig - aber nur bis
 * sechzehn, und das stand nirgends. Ein neunzehnter Baustein haette stumm nicht mehr aufgeklappt.
 *
 * Seit das Kaestchen in seiner Karte steht und das Panel dahinter, braucht es keinen Index:
 * `:has()` fragt die Karte nach ihrem eigenen Zustand, `+` findet das Panel daneben.
 */
.mb-baustein:has(.mb-baustein-schalt:checked) + .mb-baustein-panel {
	display: block;
}

/* Der offene Schalter zeigt ein Minus statt eines Plus. */
.mb-baustein:has(.mb-baustein-schalt:checked) .mb-baustein-schalter {
	color: #0D1520;
}

.mb-baustein:has(.mb-baustein-schalt:checked) .mb-baustein-schalter::before {
	/*
	 * `background-color`, nicht `background`: Die Kurzschreibweise wuerde `background-image`
	 * zuruecksetzen - und damit die beiden Balken loeschen.
	 */
	border-color: rgba(0, 159, 227, .7);
	background-color: rgba(0, 159, 227, .1);
	background-size: 9px 1.4px, 0 9px;
}

/*
 * Ausfallrichtung, wenn `:has()` fehlt: alle Panels offen.
 *
 * Dieselbe Richtung wie beim Klapp-Verzeichnis ohne JavaScript (G-27). Der Text steht dann
 * ungefragt da - laenger, aber vollstaendig. Die Umkehrung waere schlimmer: ein „+", das nichts
 * tut, und ein Leistungsumfang, den niemand mehr erreicht.
 */
@supports not (selector(:has(*))) {
	.mb-baustein-panel { display: block; }
	.mb-baustein-schalter { display: none; }
}

/* ------------------------------------------------------------------
 * Loop Grids duerfen ihre Spalte nicht sprengen
 * ------------------------------------------------------------------
 *
 * Gemessen auf `/karriere/`: Das Loop Grid „Aus dem BITS-Alltag" stand auf vier Spalten
 * (`repeat(4, 1fr)`), rechnete sich aber auf `600px 600px 600px 600px` aus - 2.472px in einem
 * 1.280px breiten Behaelter, und die ganze Seite lief 865px ueber den Rand.
 *
 * Die Ursache ist kein Wert im Dokument, sondern eine Regel des Rastermodells: Ein Rasterelement
 * hat `min-width: auto`, und das heisst `min-content`. `1fr` ist `minmax(auto, 1fr)` - die Spur
 * kann also nicht kleiner werden als der breiteste unteilbare Inhalt. Im Loop Item ist das das
 * Bild in seiner natuerlichen Groesse (598px, die „large"-Fassung). Vier davon sprengen jedes
 * Raster, ohne dass irgendwo eine Breite gesetzt waere - deshalb war im `_elementor_data` auch
 * nichts zu finden.
 *
 * `min-width: 0` gibt der Spur die Erlaubnis zu schrumpfen. Nachgemessen: 2.472 -> 1.280,
 * Spalten 302px, kein Ueberlauf mehr.
 *
 * Warum hier und nicht am einzelnen Grid: Es ist keine Eigenheit dieser Seite. Jedes Loop Grid mit
 * einem Bild im Eintrag hat dieselbe Anlage, und Elementor bietet dafuer kein Steuerelement -
 * derselbe Fall wie beim waagerechten Spaltenabstand (G-18).
 */
.elementor-loop-container.elementor-grid > .e-loop-item {
	min-width: 0;
}

/* ------------------------------------------------------------------
 * Dunkle Flaechen: der Verlauf der Vorlage
 * ------------------------------------------------------------------
 *
 * Auf der Vorlage (`:9003`) traegt JEDE dunkle Flaeche denselben Verlauf - drei radiale
 * Lichtkegel ueber einem dreistufigen linearen Grund. Gemessen an `.bh-branchen`
 * (Branchenfokus) und `.bits-warum` („Warum BITS?"): beide Flaechen liefern exakt dieses
 * Rezept.
 *
 * Vier unserer Flaechen standen stattdessen auf `linear-gradient(150deg, #020D16, #01111F)`.
 * Das ist rechnerisch ein Verlauf und optisch keiner: Die beiden Stops trennen rund 0,002
 * Leuchtdichte, das Auge sieht eine flache, fast schwarze Platte. Genau diese Flaechen sind
 * dem Auftraggeber aufgefallen.
 *
 * WARUM ALS CSS UND NICHT ALS EINSTELLUNG
 * Elementors Verlaufs-Steuerelement kennt genau ZWEI Farbstops und genau EINEN Verlauf. Das
 * Rezept der Vorlage hat drei Stops plus drei ueberlagerte Radiale - im Dokument ist es
 * schlicht nicht ausdrueckbar. Es ist ausserdem kein Wert dieser einen Seite, sondern die
 * Beschreibung dessen, was bei uns „dunkle Flaeche" heisst; damit gehoert es zu einer
 * Komponente und nicht in den Stilblock einer Seite (ADR-63).
 *
 * WARUM DIE SELEKTOREN FUENF KLASSEN TIEF SIND
 * Elementor schreibt den Flaechenverlauf als
 * `.elementor-2004 .elementor-element.elementor-element-mbb0015:not(.elementor-motion-effects-
 * element-type-background)`. Das sind VIER Klassen, nicht drei: `:not()` zaehlt das Argument
 * mit. Und diese Datei laedt VOR jeder `post-<id>.css` (nachgemessen: Position 5 gegen 11 ff.),
 * ein Gleichstand ginge also verloren - mit vier Klassen blieb die Flaeche nachweislich flach.
 *
 * Deshalb fuenf: `.elementor`-Wrapper, `.elementor-element`, die Kennung, `.e-con` und
 * dieselbe `:not()`-Bedingung, die Elementor selbst setzt. Sie ist nicht nur Ballast - mit
 * einem Bewegungseffekt auf dem Hintergrund wandert die Flaeche in eine eigene Ebene, und
 * dort haette unsere Regel nichts zu suchen. `!important` braucht es nicht.
 */
:root {
	--mb-dunkelflaeche:
		radial-gradient(58% 48% at 12% 16%, rgba(0, 159, 227, .26), transparent 70%),
		radial-gradient(52% 46% at 88% 82%, rgba(0, 111, 158, .34), transparent 72%),
		radial-gradient(46% 42% at 72% 8%, rgba(0, 159, 227, .16), transparent 70%),
		linear-gradient(135deg, #02101B 0%, #000814 44%, #001A3A 100%);
}

/*
 * Drei Flaechen, drei verschiedene Zugriffe - und das hat jeweils einen Grund:
 *
 *   `.mbwb-abschnitt`   „Warum BITS?". Die Marker-Klasse gibt es, sie sitzt auf der Flaeche
 *                       selbst und traegt damit alle drei Vorkommen (Startseite,
 *                       Loesungsseiten, /nachhaltigkeit/). Erste Wahl.
 *   `…-mbb0015`         Branchenfokus der Startseite. Hat KEINE Marker-Klasse. Die Element-ID
 *                       ist bei uns sprechend und aus einem eigenen Nummernraum vergeben
 *                       (`mbb` = Branchen), sie ist damit so stabil wie eine Klasse. Eine
 *                       Klasse zu ergaenzen hiesse, das Dokument zu aendern.
 *   `…-mbls0025`        Sicherheit & Compliance. `.mbls-sicherheit` gibt es zwar, sie sitzt
 *                       aber auf der aeusseren Huelle der Loesungsseite (mbls0029) - farbig
 *                       ist der Container INNERHALB der eingebetteten Bibliotheks-Vorlage.
 *                       Ueber dessen ID greift die Regel ueberall, wo die Vorlage eingebettet
 *                       wird, nicht nur auf der Loesungsseite.
 *   `.mbke-benefits`    „Zudem erhaeltst Du von uns …" auf /karriere/ (#3182). EIGENE
 *                       Marker-Klasse, nicht `.mbke-abschnitt`: die haengt am Werkzeug
 *                       `karriere-abschnitte.php` und wuerde jeden weiteren Abschnitt
 *                       treffen, den es dort ergaenzt (Pruefliste 84, wie `.mbko-abschnitt`).
 *   `.mbko-wege-sek`    „Wege zu uns" auf /kontakt/ (#3340). EIGENE Marker-Klasse, nicht
 *                       `.mbko-abschnitt`: die traegt auf dieser Seite DREI Abschnitte, und
 *                       zwei davon bleiben hell (Pruefliste 84). Der Abschnitt stand bis zum
 *                       30.08.2026 auf `#F4F6F8`; die Fliesenfarbe ist aus den Einstellungen
 *                       entfernt, damit hier nichts gegeneinander steht.
 */
.elementor .elementor-element.mbwb-abschnitt.e-con:not(.elementor-motion-effects-element-type-background),
.elementor .elementor-element.mbke-benefits.e-con:not(.elementor-motion-effects-element-type-background),
.elementor .elementor-element.mbko-wege-sek.e-con:not(.elementor-motion-effects-element-type-background),
.elementor .elementor-element.elementor-element-mbb0015.e-con:not(.elementor-motion-effects-element-type-background),
.elementor .elementor-element.elementor-element-mbls0025.e-con:not(.elementor-motion-effects-element-type-background) {
	background-image: var(--mb-dunkelflaeche);
}

/*
 * Der Footer ist ein Sonderfall: Er hat einen eigenen linearen Grund, der von Schwarz nach
 * `#0A4D70` laeuft. Nur der mittlere Stop fehlte - die Vorlage (`.bits-f2`) blendet bei 78 %
 * ueber `#001521` und macht den Uebergang damit weich. Zwei Stops springen; deshalb hier vier,
 * im Wortlaut der Vorlage.
 *
 * DER LICHTKEGEL SASS ANDERS ALS IN DER VORLAGE - zweimal daneben:
 *
 * 1. ORT. Unserer stand als Elementor-Ueberlagerung auf `::before`, mit
 *    `radial-gradient(at 100% 0%, …)`: Ohne Groessenangabe ist das `farthest-corner`, der Kegel
 *    zieht sich also ueber den GANZEN Footer (gemessen 1425 x 925px) und liest sich als
 *    "der Footer ist nicht ganz schwarz" statt als Licht. Die Vorlage setzt einen begrenzten
 *    Kegel `50% 312px at 86% -108px` - er sitzt leicht AUSSERHALB oben rechts, sein sichtbarer
 *    Teil ist ein weiches Band entlang der Oberkante.
 * 2. STAERKE. Elementor multipliziert die Ueberlagerung mit `--overlay-opacity: 0.5`
 *    (gemessen in `post-150.css`). Aus `rgba(0,111,158,.32)` wurden damit effektiv .16 - der
 *    Kegel war halb so kraeftig wie in der Vorlage.
 *
 * Deshalb steht der Kegel jetzt als erste Schicht IM Grund - wo die Vorlage ihn auch hat - und
 * die Ueberlagerung wird stillgelegt. Ohne das zweite haetten wir zwei Kegel.
 *
 * WAS EIGENTLICH ZU TUN WAERE: Die Ueberlagerung ist eine Elementor-EINSTELLUNG
 * (`background_overlay` am Element `mbf0028` der Fussvorlage #150). Der saubere Weg ist, sie
 * dort zu entfernen; dann kann die zweite Regel hier wieder weg. Sie steht hier, weil die
 * Korrektur ohne Aenderung am Dokument moeglich sein musste.
 *
 * Vier Klassen fuer die zweite Regel: `post-150.css` schreibt
 * `.elementor-150 .elementor-element.elementor-element-mbf0028::before` - drei Klassen, und
 * die Datei laedt spaeter als diese (gemessen: Stylesheet 5 gegen 23). Ein Gleichstand
 * verloere (Pruefliste 64).
 */
.elementor .elementor-element.elementor-element-mbf0028.e-con:not(.elementor-motion-effects-element-type-background) {
	background-image:
		radial-gradient(50% 312px at 86% -108px, rgba(0, 111, 158, .32), transparent 72%),
		linear-gradient(#000 0%, #000 52%, #001521 78%, #0A4D70 100%);
}

.elementor .elementor-element.elementor-element-mbf0028.e-con::before {
	background-image: none;
}

/* ------------------------------------------------------------------
 * Leitfaden: senkrechte Trenner in der Meta-Zeile
 * ------------------------------------------------------------------
 *
 * Die vier Spalten KATEGORIE / VEROEFFENTLICHT / AKTUALISIERT / LESEZEIT standen ohne
 * Trennung nebeneinander - vier gleich breite Textbloecke ohne erkennbare Zellgrenze. Der
 * Nachhaltigkeits-Hero loest dieselbe Aufgabe schon so
 * (`.…-kpi > .e-con + .e-con { border-left: 1px solid rgba(255,255,255,.16) }`); hier gilt der
 * hellere Sollwert .18, weil der Grund unter der Meta-Zeile dunkler ist.
 *
 * Die erste Zelle bleibt ohne Kante - eine Linie vor der ersten Spalte trennte nichts.
 *
 * NUR AB 901px: Darunter setzt der Stilblock der Vorlage `flex-wrap` und `flex: 1 1 45%`, die
 * Zeile wird also 2x2. Die dritte Zelle beginnt dann eine neue Reihe, und ihre linke Kante
 * haengt dort im Nichts.
 *
 * WO ES EIGENTLICH HINGEHOERT: in den Stilblock von `tools/leitfaden-templates-bauen.php`,
 * denn es ist eine Feinheit genau dieser Vorlage (ADR-63) und kein wiederverwendetes Bauteil.
 * Es steht hier, weil die Korrektur ohne Aenderung am Elementor-Dokument moeglich sein musste.
 * Beim naechsten Neubau der Leitfaden-Vorlagen dorthin verschieben.
 */
@media (min-width: 901px) {

	.mblf-meta > .mblf-meta-zelle + .mblf-meta-zelle {
		border-left: 1px solid rgba(255, 255, 255, .18);
		padding-left: 24px;
	}
}

/* =====================================================================
 * „WARUM BITS?" - DIE GRUENDE AUS DEM INHALTSTYP (ADR-107)
 * =====================================================================
 *
 * Alle Werte sind aus dem bisherigen Abschnitt UEBERNOMMEN, nicht neu gewaehlt. Gemessen am
 * 28.08.2026 auf der Startseite bei 1440px Fensterbreite, Transitionen vorher abgeschaltet
 * (Pruefliste 73), an der ersten Karte:
 *
 *   Karte    410,66 x 258,75 - Rahmen 1px rgba(0,159,227,.26), Radius 20, Innenabstand 28/26
 *   Ring     49 x 49 - Rahmen 3px #009FE3, Radius 50%, ohne Fuellung, 18px Abstand nach unten
 *   Glyphe   17 x 17, #009FE3
 *   Titel    15px/700, Zeilenhoehe 22px, #FFFFFF, 8px Abstand nach unten
 *   Text     15px/400, Zeilenhoehe 24px, rgba(255,255,255,.95)
 *   Raster   drei Spalten, Luecke 24px; ab 1024px zwei, ab 767px eine
 *
 * Sie standen vorher als Elementor-Einstellungen an achtzehn Widgets und in einem Stilblock des
 * Dokuments #4199. Getauscht ist WER sie rendert, nicht WIE es aussieht.
 *
 * ZWEI ABSTAENDE SIND HINTERHER KLEINER - UND ZWAR RICHTIGER
 *
 * Der Abschnitt ist nach der Umstellung 861,20px hoch statt 915,11px. Die Differenz ist restlos
 * erklaerbar, und zwei ihrer drei Teile sind Abstaende, die das Dokument nie verlangt hat:
 *
 *   -7,75px je Karte   Elementors Symbol-Widget ist ein `inline-block` in einer Zeilenbox von
 *                      24,75px. Der 49px-Ring sass also in einem 56,75px hohen Kasten - die
 *                      Differenz war Zeilendurchschuss UNTER dem Ring. Gesetzt war
 *                      `_margin-bottom: 18`, wirksam waren 25,75.
 *   -14,41px Vorspann  Der `<p>` des Text-Widgets trug seinen Standard-Unterrand (0,9em auf
 *                      16px). Gesetzt war `_margin: 0`, wirksam waren 14,41 zusaetzlich zu den
 *                      44px des Rastercontainers.
 *
 * Beides war Zeilen- und Absatzmechanik, keine Gestaltung. Die neuen Werte sind die, die im
 * Dokument stehen - 18px unter dem Zeichen, 44px ueber dem Raster. Wer die alten Zahlen
 * zurueckwill, addiert 7,75 auf `margin-bottom` des Zeichens; er reproduziert dann aber einen
 * Zeilendurchschuss, den es hier nicht mehr gibt.
 *
 * Der dritte Teil der Differenz (-24px in der ersten Reihe) ist KEINE Absicht: Die Karte
 * „KI, die im Betrieb laeuft" hat noch kein Zeichen, weil der Symbolsatz kein Gehirn enthaelt
 * (siehe `tools/gruende-uebernehmen.php`, Option `--symbol-ki`). Sobald sie eines hat, ist die
 * Reihe wieder so hoch wie vorher.
 *
 * WARUM DER RING BLEIBT, OBWOHL ES EINEN CHIP GIBT
 *
 * ADR-105 hat fuer dieses System EINE Chip-Machart entschieden: 44px, Verlauf `#009FE3` ->
 * `#006F9E`, 1px-Fase, 22px-Glyphe (`.mb-baustein-symbol` und Geschwister, oben in dieser Datei).
 * Der Ring hier ist eine zweite Machart, und das ist bewusst:
 *
 *   Ein Wechsel auf den Chip verschoebe jede Karte um 5px (49 -> 44) und aenderte das Bild auf
 *   allen vier Seiten. Das ist eine GESTALTUNGS-Entscheidung, die man sehen und freigeben muss -
 *   sie hat in einer Umstellung des Inhaltsmodells nichts zu suchen. Wer sie trifft, ersetzt die
 *   vier Deklarationen unter `.mb-grund-symbol` durch die Chip-Regel und setzt die Glyphe auf 22.
 *
 * Bis dahin gilt: Der Ring ist uebernommener Bestand, keine neue Erfindung. Er steht deshalb
 * hier unten und nicht im Chip-Regelblock - er soll nicht wie eine dritte Groesse derselben
 * Machart aussehen.
 *
 * DIE ZWEIFARBIGKEIT SCHWEIGT HIER, UND DAS IST RICHTIG
 *
 * Die Zeichen tragen ihre Nebenlinie in `var(--mb-symbol-2, currentColor)` (ADR-97). Diese Regel
 * setzt die Variable NICHT: Auf dem Verlaufs-Chip braucht die Nebenlinie einen eigenen Wert, im
 * durchsichtigen Ring saesse sie auf derselben dunklen Karte wie die Hauptlinie und wuerde nur
 * blasser. Ohne gesetzte Variable ist das Zeichen einfarbig - genau wie die Font-Awesome-Glyphen,
 * die hier vorher standen.
 */
.mb-gruende {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
}

/*
 * Die Spaltenbreite steht in Prozent minus Luecke, nicht als `flex-basis`: Ein `flex-basis`
 * liesse die Karten schrumpfen statt umbrechen (Pruefliste 57). Dieselbe Rechnung wie bisher im
 * Stilblock von #4199 - dort auf `.mbwb-gruende > .e-con`, hier auf die eigene Karte.
 */
.mb-gruende-sp2 > .mb-grund {
	width: calc((100% - 24px) / 2);
}

.mb-gruende-sp3 > .mb-grund {
	width: calc((100% - 48px) / 3);
}

.mb-gruende-sp4 > .mb-grund {
	width: calc((100% - 72px) / 4);
}

@media (max-width: 1024px) {

	.mb-gruende-sp3 > .mb-grund,
	.mb-gruende-sp4 > .mb-grund {
		width: calc((100% - 24px) / 2);
	}
}

@media (max-width: 767px) {

	.mb-gruende-sp2 > .mb-grund,
	.mb-gruende-sp3 > .mb-grund,
	.mb-gruende-sp4 > .mb-grund {
		width: 100%;
	}
}

/*
 * `min-width: 0` gegen den waagerechten Ueberlauf: Ohne die Zeile sprengt ein Flex-Kind seine
 * Spalte, sobald ein Nachkomme eine natuerliche Mindestbreite hat - bei uns die deutschen
 * Komposita in den Begruendungen („Lizenzprovisionen", „Technologieportfolio").
 */
/*
 * `.e-con.mb-grund` DAZU - sonst ist der Innenabstand 10px statt 28/26 (ADR-124).
 *
 * Der Baustein rendert ein blankes `<div class="mb-grund">`; die Benefit-Karten auf
 * /karriere/ sind Elementor-Container und tragen `.e-con`. Und `.e-con` setzt den
 * Innenabstand als LONGHANDS aus Variablen: `padding-inline-start: var(--padding-inline-start)`
 * mit `--padding-top: var(--container-default-padding-top, 10px)`. Ein `padding`-Kurzschreiben
 * mit EINER Klasse hat dieselbe Spezifitaet und verliert, weil `frontend.min.css` spaeter laedt
 * - gemessen 10px an allen vier Kanten. `.e-con.mb-grund` sind zwei Klassen (0,2,0) und
 * gewinnen ohne `!important`.
 *
 * Der Wert steht deshalb NICHT als Elementor-Einstellung am Container: Dann haette die Karte
 * ihren Innenabstand zweimal - hier und im Dokument - und beim naechsten Feinschliff nur an
 * einer der beiden Stellen (ADR-101).
 */
.mb-grund,
.e-con.mb-grund {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	border: 1px solid rgba(0, 159, 227, .26);
	border-radius: 20px;
	padding: 28px 26px;
	background: radial-gradient(130% 120% at 0% 0%, rgba(0, 159, 227, .16) 0%,
		rgba(9, 28, 50, .55) 38%, rgba(3, 12, 26, .82) 100%);
	box-shadow: 0 20px 46px -30px rgba(0, 0, 0, .7);
	transition: transform .55s cubic-bezier(.16, 1, .3, 1), border-color .35s, box-shadow .35s;
}

.mb-grund:hover {
	transform: translateY(-6px);
	border-color: rgba(106, 197, 255, .6);
	box-shadow: 0 30px 64px -28px rgba(0, 0, 0, .78), 0 0 34px -6px rgba(0, 159, 227, .35);
}

.mb-grund-symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	align-self: flex-start;
	box-sizing: border-box;
	width: 49px;
	height: 49px;
	margin-bottom: 18px;
	border: 3px solid #009FE3;
	border-radius: 50%;
	color: #009FE3;
}

/*
 * ZWEI KLASSEN, NICHT EINE - sonst ist die Ueberschrift SCHWARZ.
 *
 * Das Elementor-Kit setzt `.elementor-kit-97 h3{color:#000000}` (gemessen in
 * uploads/elementor/css/post-97.css). Das sind eine Klasse und ein Element, also
 * Spezifitaet 0,1,1 - ein `.mb-grund-titel` mit 0,1,0 verliert dagegen, und die Datei laedt
 * ausserdem spaeter (Pruefliste 64). Gemessen war `rgb(0, 0, 0)` auf dunkelblauer Karte, im
 * Bild kaum lesbar; im Lesezugriff sah die Regel dagegen „gesetzt" aus.
 *
 * `.mb-grund .mb-grund-titel` sind zwei Klassen, 0,2,0 - das gewinnt ohne `!important` und
 * ohne Spezifitaets-Trick. Dasselbe Muster wie bei den Beitragskarten (ADR-66, Pruefliste 34):
 * Ein Selektor mit ZWEI Klassen, weil Elementors eigene Regeln eine mitbringen.
 */
/*
 * ZWEI FASSUNGEN DERSELBEN KARTE - EINE DEKLARATION (ADR-124).
 *
 * Der Baustein `mybits-warum-bits` rendert `<h3 class="mb-grund-titel">` und
 * `<p class="mb-grund-text">`: Die Klasse sitzt am Textelement selbst.
 *
 * Die Benefit-Karten auf /karriere/ sind dagegen ein statischer Elementor-Bau - dort landet
 * eine Klasse am WIDGET-Wrapper, und das Textelement darin heisst `.elementor-heading-title`
 * bzw. `p`. Ein Selektor mit nur der Wrapper-Klasse faerbt deshalb nichts: Das Kit setzt
 * `.elementor-kit-97 h3{color:#000000}` (0,1,1) und laedt spaeter (Pruefliste 64) - die
 * Ueberschrift bliebe SCHWARZ auf dunkelblauer Karte, genau der Fehler aus ADR-107.
 *
 * Beide Fassungen stehen deshalb im SELBEN Regelblock. Die Werte kopieren hiesse, sie zweimal
 * pflegen zu muessen; ein zweiter Regelblock waere die zweite Wahrheit (ADR-101).
 * `.mb-grund .mb-grund-titel .elementor-heading-title` sind drei Klassen (0,3,0) und gewinnen
 * ohne `!important`.
 */
.mb-grund .mb-grund-titel,
.mb-grund .mb-grund-titel .elementor-heading-title {
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: -0.069em;
}

/*
 * Der Abstand nach unten gehoert an die AEUSSERE Huelle, nicht an beide - sonst steht er
 * zweimal und die Karte waechst um 8px (dasselbe Muster wie der Wrapper-Rand in ADR-108).
 *
 * VIER KLASSEN FUER DIE ELEMENTOR-FASSUNG, und das ist kein Ueberschuss: Elementor setzt
 * `.e-con .elementor-widget.elementor-widget{margin-block-end:0px}` - drei Klassen (0,3,0).
 * Ein Selektor mit zwei Klassen verliert dort, gemessen war der Abstand zwischen Titel und
 * Text 0px. `.e-con.mb-grund .elementor-widget.mb-grund-titel` sind vier (0,4,0).
 */
.mb-grund .mb-grund-titel,
.e-con.mb-grund .elementor-widget.mb-grund-titel {
	margin: 0 0 8px;
}

.mb-grund .mb-grund-titel .elementor-heading-title {
	margin: 0;
}

.mb-grund .mb-grund-text,
.mb-grund .mb-grund-text p {
	margin: 0;
	color: rgba(255, 255, 255, .95);
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.007em;
}

/* Mehrere Absaetze in einem Text-Widget brauchen ihren Abstand wieder. */
.mb-grund .mb-grund-text p + p {
	margin-top: 12px;
}

/*
 * Der Vorspann - zentriert, hoechstens 720px breit, wie das Text-Widget vorher.
 *
 * Das Zahlwort setzt der Baustein aus der gezaehlten Anzahl ein; im Attribut steht nur `%s`.
 * Vorher stand „Sechs" fest im Text, und das war ab dem Tag falsch, an dem eine Seite ihre
 * eigenen Gruende bekommt.
 */
.mb-gruende-vorspann {
	max-width: 720px;
	margin: 0 auto;
	color: rgba(255, 255, 255, .95);
	text-align: center;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: -0.007em;
}

@media (max-width: 767px) {

	.mb-gruende-vorspann {
		max-width: 100%;
	}
}

/*
 * OHNE GRUENDE VERSCHWINDET DIE GANZE FLAECHE - Ueberschrift, Vorspann, Innenabstand.
 *
 * Dieselbe Regel und derselbe Grund wie bei `.mb-faq-sek` (ADR-91, Nachtrag): Bliebe der
 * Abschnitt stehen, staende auf der Seite eine Ueberschrift „Warum BITS?" ueber 92px Nichts. Und
 * die Regel des Auftraggebers sagt ausdruecklich: Zuordnung leer und Rueckfall aus heisst NICHTS.
 *
 * Der zweite Ausschluss ist fuer den Editor - eine Flaeche, die sich dort verbirgt, kann niemand
 * bearbeiten. `.mybits-block-hinweis` ist der Platzhalter, den `SectionRenderer::hinweis()` nur
 * im Editor ausgibt.
 *
 * `.mbwb-abschnitt` traegt alle vier Vorkommen (#2004, #2027, #2107, #3255), weil die Klasse am
 * aeusseren Container des Bausteins #4199 sitzt und der Baustein ueberall eingebettet ist.
 */
.mbwb-abschnitt:not(:has(.mb-grund)):not(:has(.mybits-block-hinweis)) {
	display: none;
}

/* ============================================================================
 * KONTAKT: DER ANSPRECHPARTNER (ADR-108)
 *
 * Der Kontaktbaustein (#1972) trug bis zum 28.08.2026 ein festes Foto und zwei Text-Widgets
 * mit festem Namen, fester Position, fester E-Mail und fester Rufnummer - in einem Dokument,
 * das in SECHZEHN anderen haengt. Foto und Angaben kommen jetzt aus dem Inhaltstyp „Team".
 *
 * ALLE WERTE HIER SIND UEBERNOMMEN, NICHT NEU GEWAEHLT. Sie standen vorher an zwei Orten und
 * werden hier zusammengefuehrt:
 *
 *   - im Stilblock von #1972 (`.mbko-person p/strong`, `.mbko-wege p/a/a:hover` und die
 *     640px-Medienabfrage) - die Regeln sind dort im selben Zug entfernt worden (ADR-103);
 *   - als EINSTELLUNGEN der beiden Text-Widgets (Schriftgroesse, -gewicht, Zeilenhoehe, Farbe,
 *     Ausrichtung, der 12px-Abstand zwischen beiden). Diese Werte verschwinden mit den Widgets,
 *     deshalb stehen sie hier - sonst faellt der Text auf die Kit-Vorgaben zurueck.
 *
 * WAS NICHT HIERHER GEHOERT: `.mbko-karte` (Rahmen, Verlauf, Schwebezustand) und
 * `.mbko-foto` (88px-Spalte, runder Ausschnitt). Das sind Regeln auf die eigenen Container und
 * die eigene Widget-Klasse des Dokuments #1972 - sie bleiben in dessen Stilblock. Das Foto-
 * Widget traegt weiterhin `mbko-foto`, damit `.mbko-foto img{…}` unveraendert greift.
 *
 * ZWEI KLASSEN JE SELEKTOR - UND ZWAR WEGEN EINER FREMDEN REGEL, DIE MAN ERST IM BILD SIEHT.
 *
 * Nicht das Elementor-Kit ist hier der Gegner (das faerbt nur `h1`/`h2`/`h3`, Pruefliste 64),
 * sondern die Seite „Kontakt" (#3340). Ihr Stilblock enthaelt `.mbko-karte p{margin:0}` - fuer
 * ihre eigenen elf Karten gedacht. Sie bettet aber #1972 ein, und dessen Karte heisst ebenfalls
 * `.mbko-karte`. Mit einklassigen Selektoren gewann `.mbko-karte p` (0,1,1) gegen
 * `.mb-kp-person` (0,1,0), der 12px-Abstand zwischen Name und Kontaktwegen fiel weg, und die
 * Karte war auf GENAU DIESER EINEN SEITE 12px flacher (gemessen: 160,25 statt 172,25).
 *
 * `.mb-kp-angaben .mb-kp-person` sind zwei Klassen, 0,2,0 - das gewinnt ohne `!important`.
 * Dasselbe Muster wie bei den Beitragskarten (ADR-66) und bei „Warum BITS?" (ADR-107), nur mit
 * einem anderen Verursacher.
 * ========================================================================= */

.mb-kp-angaben .mb-kp-person {
	margin: 0 0 12px;
	color: rgba(255, 255, 255, .62);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5em;
}

.mb-kp-angaben .mb-kp-person strong {
	display: block;
	margin-bottom: 2px;
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 700;
}

.mb-kp-angaben .mb-kp-wege {
	margin: 0;
	color: #009FE3;
	font-size: 15px;
	font-weight: 600;

	/*
	 * 1,75em statt 1,5em – und das ist eine Trefferflaeche, keine Typografie.
	 *
	 * WCAG 2.2 „Target Size (Minimum)" verlangt 24×24px ODER genug Abstand: Ein 24px-Kreis um
	 * den Mittelpunkt darf keinen anderen Zielkreis schneiden. Gemessen waren die zwei Links
	 * (E-Mail, Telefon) 17px hoch mit 22px Mittelpunktabstand – beides knapp darunter, und
	 * Lighthouse meldete es auf sieben von acht Seiten (`target-size`, 14 Stellen).
	 *
	 * 1,5em ergibt bei 14,5px 21,75px; 1,75em ergibt 25,4px. Der Absatz wird damit um 7px
	 * hoeher, mehr nicht – die Karte hat die Reserve.
	 */
	line-height: 1.75em;
}

.mb-kp-angaben .mb-kp-wege a {
	/*
	 * `inline-block`, und mehr nicht.
	 *
	 * Ein Inline-Element ist nur so hoch wie sein Textkoerper (17px) – ein `inline-block`
	 * uebernimmt dagegen die ZEILENHOEHE als Boxhoehe, also die 25,4px von oben. Damit ist die
	 * Trefferflaeche gross genug, ohne dass ein Innenabstand dazukommt.
	 *
	 * Der erste Versuch hatte `padding-block: 4px` dabei – gemessen 33,4px hoch, und die Karte
	 * wuchs um 23px statt um 7. Das Polster addierte sich zur Zeilenhoehe, statt sie zu fuellen.
	 */
	display: inline-block;
	color: #009FE3;
	text-decoration: none;
	transition: color .25s;
}

.mb-kp-angaben .mb-kp-wege a:hover {
	color: #FFFFFF;
}

/*
 * KEINE AUSRICHTUNG UND KEINE 640px-REGEL - GEMESSEN, NICHT ANGENOMMEN.
 *
 * Die beiden Text-Widgets trugen die Einstellung „Ausrichtung: links", und der Stilblock hob sie
 * unter 640px mit `.mbko-person,.mbko-wege{text-align:center}` wieder auf. Im Browser gemessen
 * war der berechnete Wert der Absaetze aber `start`, nicht `left` - die Einstellung erzeugte
 * keine Regel, die bis zum `<p>` durchkam. Beide Zeilen waren also wirkungslos.
 *
 * Deshalb steht hier nichts: Die Absaetze erben die Ausrichtung von der Karte, und deren
 * `text-align: center` unter 640px (im Stilblock von #1972) greift dadurch von selbst. Eine
 * uebernommene Regel, die im Original nichts getan hat, waere hier neu erfunden.
 *
 * `line-height` steht dagegen in `em` und nicht als blosse Zahl. Das ist kein Geschmack: Eine
 * einheitenlose Zeilenhoehe wird JE ELEMENT neu gerechnet - der 17.5px grosse Name bekaeme
 * 26.25px statt der geerbten 20.25px, und die Karte waere 18px hoeher (gemessen). Elementors
 * Einstellung war `1.5em`, also erbt der Name die fertige Pixelzahl. Genau das macht `em` auch.
 */
/*
 * OHNE TEAMMITGLIED VERSCHWINDET DIE KARTE - NICHT DER ABSCHNITT.
 *
 * DIE REGEL HOERT AUF EINE EIGENE KLASSE, NICHT AUF `.mbko-karte` - UND DAS IST KEIN LUXUS.
 *
 * Der Kontaktbaustein (#1972) und die Seite „Kontakt" (#3340) benutzen BEIDE das Kuerzel
 * `mbko-`, und beide haben `.mbko-karte`: hier die eine Ansprechpartner-Karte, dort elf Karten
 * („Wege zu uns" und die Fragen). #3340 bettet #1972 ein, die Klassen treffen sich also auf
 * derselben Seite. Eine Regel `.mbko-karte:not(:has(.mb-kp)){display:none}` haette auf
 * /kontakt/ alle elf Karten geloescht - der Fehler aus ADR-106/107, nur in die andere Richtung:
 * nicht eine alte Klasse, die verschwindet, sondern eine fremde, die zufaellig so heisst.
 *
 * `mb-kp-karte` setzt `tools/kontakt-person-einbauen.php` an genau einen Container. Damit ist
 * die Regel eindeutig, egal wie viele Dokumente das Kuerzel `mbko-` noch verwenden (ADR-101:
 * ein Bauteil, eine Klasse).
 *
 * Das ist der Unterschied zu `.mbwb-abschnitt` und `.mb-faq-sek`: Dort verschwindet die ganze
 * Flaeche, weil eine Ueberschrift ohne Inhalt schlimmer waere als kein Abschnitt. Hier bleiben
 * Ueberschrift, Vorspann und die beiden Schaltflaechen stehen - ueber sie ist das Unternehmen
 * weiterhin erreichbar, auch wenn keine Person hinterlegt ist. Nur der leere Rahmen der Karte
 * (Kante, Verlauf, Schatten, 640px) waere sichtbarer Unsinn.
 *
 * Eintreten kann der Fall nur, wenn es gar kein veroeffentlichtes Teammitglied gibt: Die
 * Aufloesung in `SectionRenderer::ansprechpartner()` hat zwei Stufen und endet sonst immer bei
 * einer Person.
 *
 * Der zweite Ausschluss ist fuer den Editor - eine Flaeche, die sich dort verbirgt, kann
 * niemand bearbeiten.
 */
.mb-kp-karte:not(:has(.mb-kp)):not(:has(.mybits-block-hinweis)) {
	display: none;
}

/* =====================================================================
 * AUFMACHER DER ARTIKELSEITEN (Baustein `mybits-beitrag-aufmacher`)
 *
 * Ein Bild, ein Verhaeltnis, ein Ausschnitt. Warum das ein Baustein ist und kein
 * Bild-Widget, steht in `SectionRegistry::artikel_sections()`; hier steht nur die Optik.
 *
 * `aspect-ratio` traegt die Hoehe, `object-fit: cover` den Beschnitt, `object-position`
 * kommt als Inline-Wert aus dem Feld `bild_fokus` (bzw. den beiden Feinwerten). Genau diese
 * drei Zeilen sind der Grund fuer den Baustein: Elementors Bild-Widget kann keine davon.
 *
 * KEIN `max-height` UND KEIN `object-fit: contain` wie beim bisherigen Leitfaden-Aufmacher
 * (`.mblf-aufmacher img`). Das war dort richtig, solange die Hoehe der Datei folgte - ein
 * Hochformat waere sonst unlesbar gross geworden. Mit festem Verhaeltnis stellt sich die
 * Frage nicht mehr: Der Kasten ist immer gleich, und was darin steht, entscheidet der
 * Ausschnitt.
 *
 * Radius und Kante sind vom Artikelbild uebernommen (`.mbi-inhalt img` in #2080), nicht neu
 * gewaehlt - die Kante braucht es, weil viele Aufmacher einen weissen Grund haben und sonst
 * auf weisser Seite von einer Layout-Luecke nicht zu unterscheiden waeren.
 * ================================================================== */
.mb-aufm {
	margin: 0;
}

/*
 * ZWEI TRAEGER IM SELEKTOR, UND ZWAR NOETIG.
 *
 * `.mb-aufm-bild` allein (0,1,0) verliert gegen Elementors `.elementor img{border-radius:0}`
 * aus `frontend.min.css` (0,1,1) - gemessen ergab das `border-radius: 0px`, obwohl hier 18
 * stehen. Mit Huelle und Tag kommt der Selektor auf (0,2,1) und gewinnt ohne `!important`.
 *
 * Dieselbe Falle wie bei der Beitragskarte, nur mit einer anderen Elementor-Regel: Wer eine
 * Bildeigenschaft mit EINER Klasse setzt, setzt sie vergeblich.
 */
.mb-aufm img.mb-aufm-bild {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: 18px;
	border: 1px solid #DBDEE2;
	background: #F4F6F8;
}

/*
 * Quadrat und Hochformat: vollständig im Kasten statt beschnitten (ADR-136, dritter Nachtrag).
 * Die Klasse setzt der Renderer, wenn das Bild schmaler als 1,2 : 1 ist – CSS kann ein
 * Seitenverhältnis nicht abfragen. Drei Träger im Selektor, damit die Regel die `cover`-Zeile
 * darüber schlägt (dieselbe Spezifitätsfalle wie eine Zeile höher).
 */
.mb-aufm img.mb-aufm-bild.mb-aufm-hoch {
	object-fit: contain;
	object-position: center center;
	padding: 10px;
}

/*
 * Vier Galeriebilder: zwei Spalten statt drei. Das 3er-Raster ließ in der zweiten Zeile zwei Felder
 * leer – gemessen an acht Insights mit genau vier Bildern (ADR-136, dritter Nachtrag). Der Selektor
 * fragt die Zahl der Bilder, nicht die Klasse `gallery-columns-3`: Die stammt aus dem übernommenen
 * Shortcode und sagt nichts über den Bestand.
 */
.mbi-galerie .gallery:has(.gallery-item:nth-child(4):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* =====================================================================
 * KOPFANGABEN EINES INSIGHTS (Baustein `mybits-insight-kopfangaben`)
 *
 * Rubrik, Veroeffentlichungsdatum, Rueckweg - als schmale Spalte links neben dem Aufmacher.
 *
 * DIE WERTE SIND UEBERNOMMEN, NICHT GEWAEHLT. Sie stammen aus der Meta-Leiste der
 * Leitfaden-Detailseite (#3331, `mbl20026`/`mbl20027`): Beschriftung 10.5px/700, Zeilenhoehe
 * 1.4em, Laufweite 0.152em, Versalien; Wert 14px/700, 1.4em; 7px zwischen beiden. Damit
 * sehen die Angaben auf beiden Artikelseiten gleich aus, ohne dass es jemand nachhalten muss.
 *
 * ZWEI FARBEN SIND ANDERS, UND ZWAR AUS EINEM GRUND: Die Leitfaden-Leiste steht auf der
 * dunklen Kopfflaeche (Cyan auf Schwarz, Weiss auf Schwarz). Diese Angaben stehen auf WEISS.
 * `#009FE3` erreicht dort 2,97:1 und faellt unter WCAG AA (G-23) - die Beschriftung nimmt
 * deshalb `#5B6875` (5,26:1, der Wert aus ADR-80), der Wert selbst `#0D1520`.
 *
 * `line-height` steht in `em`, nicht als blosse Zahl: Elementor schreibt `1.4em`, und das
 * erbt als fertige Pixelzahl. Eine einheitenlose Zeilenhoehe rechnete jedes Kind neu
 * (Pruefliste 85).
 * ================================================================== */
.mb-ika {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.mb-ika-zelle {
	display: flex;
	flex-direction: column;
}

.mb-ika-marke {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4em;
	letter-spacing: 0.152em;
	text-transform: uppercase;
	color: #5B6875;
	margin-bottom: 7px;
}

.mb-ika-wert {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4em;
	color: #0D1520;
}

/*
 * Der Rueckweg ist ein Link und sieht auch so aus - dieselbe Textfarbe wie jeder Link im
 * Artikel (`#006F9E`, 5,57:1). Keine Schaltflaeche: Er fuehrt zurueck, wo man herkam, und
 * konkurriert damit nicht mit dem Kontakt-Knopf weiter unten (ADR-95).
 */
.mb-ika-zurueck {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4em;
	color: #006F9E;
	text-decoration: none;
	transition: color 0.25s;
}

.mb-ika-zurueck:hover,
.mb-ika-zurueck:focus-visible {
	color: #009FE3;
}

/* ------------------------------------------------------------------ */
/* Kontaktformular (Fluent Forms) - `.mbkf-*`                          */
/* ------------------------------------------------------------------ */
/*
 * Gebaut von `tools/kontakt-formular-einbauen.php`, eingebunden als Fluent-Forms-Widget im
 * Abschnitt „Kontaktformular" von /kontakt/ (#3340).
 *
 * WARUM DIE OPTIK HIER STEHT UND NICHT IN FLUENT FORMS
 * Fluent Forms bringt eigene Skins mit und das Elementor-Widget einen ganzen Stil-Reiter.
 * Beides wuerde die Werte des Hauses ein zweites Mal festhalten - an einem Ort, den keine
 * Suche im Repository findet. Dieselbe Begruendung wie fuer die Beitragskarte (ADR-66).
 *
 * WARUM DER PRAEFIX `mbkf` HEISST UND NICHT `mbko`
 * `/kontakt/` (#3340) und der Kontaktbaustein #1972 benutzen BEIDE `mbko-`, und auf
 * `/kontakt/` steht `.mbko-karte` elfmal. Eine Regel auf `.mbko-*` traefe dort Fremdes
 * (Pruefliste 84, ADR-108).
 *
 * WARUM JEDE REGEL MINDESTENS DREI KLASSEN HAT
 * Gemessen auf /kontakt/: `elementor-komponenten.css` ist Stylesheet 3, Fluent Forms'
 * `fluent-forms-public.css` ist 15 und `fluentform-public-default.css` ist 16. Bei gleicher
 * Spezifitaet gewinnt Fluent Forms ueber die Reihenfolge (Pruefliste 64). Fluent Forms
 * arbeitet mit zwei Klassen (`.fluentform .ff-el-form-control`, `.ff-default
 * .ff-el-form-control`); `.mbkf-formular .fluentform .ff-el-form-control` sind drei.
 *
 * Wo Fluent Forms eine CSS-Variable anbietet, wird die Variable gesetzt statt einer Regel -
 * sie steht ueber jedem Spezifitaetsstreit (Pruefliste 64).
 */
/*
 * Der Abschnitt traegt den Anker `#kontaktformular` - die Vorlage verlinkt ihn so.
 *
 * Die Kopfleiste der Website steht auf `position: fixed` und ist gemessen 78px hoch. Ohne
 * `scroll-margin-top` landet die Oberkante des Abschnitts beim Sprung UNTER der Leiste; auf
 * Mobil (56px Innenabstand oben) waere die Vorzeile dann verdeckt. 92px = 78 Leiste + 14 Luft.
 */
.mbkf-abschnitt {
	scroll-margin-top: 92px;
}

.mbkf-formular {
	/*
	 * Die fuenf Variablen aus `:root` von `fluentform-public-default.css`. Der Vorgabewert von
	 * `--fluentform-danger` ist `#f56c6c` und erreicht auf Weiss 2,86:1 - als Fehlermeldung
	 * unter WCAG AA. `#B42318` erreicht 6,44:1.
	 */
	--fluentform-primary: #009FE3;
	--fluentform-secondary: #0D1520;
	--fluentform-danger: #B42318;
	--fluentform-border-color: #DBDEE2;
	--fluentform-border-radius: 10px;
}

/* Abstaende: Fluent Forms setzt 20px je Gruppe und 15px Spaltenluecke. */
.mbkf-formular .fluentform .ff-el-group {
	margin-bottom: 22px;
}

.mbkf-formular .fluentform .ff-t-container {
	gap: 18px;
}

.mbkf-formular .fluentform .ff-t-container > .ff-t-cell > .ff-el-group:last-child {
	margin-bottom: 0;
}

/* Beschriftung. Fluent Forms setzt `font-weight:500` an `.ff-default .ff-el-input--label label`. */
.mbkf-formular .fluentform .ff-el-input--label {
	margin-bottom: 7px;
}

.mbkf-formular .fluentform .ff-el-input--label label {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4em;
	color: #0D1520;
}

/*
 * „optional, falls ein Rueckruf schneller geht" - woertlich aus der Vorlage, dort ebenfalls im
 * Label. NICHT in `help_message`: Die globale Einstellung `helpMessagePlacement: with_label`
 * macht daraus ein Frage-Symbol mit Tooltip, also eine Information, die man erst suchen muss.
 */
.mbkf-formular .mbkf-opt {
	font-weight: 400;
	color: #6E767F;
}

/*
 * Eingabefelder. `.ff-default .ff-el-form-control` setzt eine eigene Systemschrift-Kette und
 * `line-height: 1` - beides muss weg, sonst steht das Formular in einer anderen Schrift als
 * die Seite und die Felder sind zu flach.
 *
 * 16px ist kein Zufall: Unter 16px zoomt iOS Safari beim Hineintippen in das Feld hinein und
 * verlaesst die Seitenbreite. Die Vorlage macht es genauso.
 */
.mbkf-formular .fluentform .ff-el-form-control {
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: #0D1520;
	background-color: #ffffff;
	padding: 12px 14px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.mbkf-formular .fluentform textarea.ff-el-form-control {
	min-height: 132px;
	resize: vertical;
}

.mbkf-formular .fluentform .ff-el-form-control::placeholder {
	color: #6E767F;
	opacity: 1;
}

.mbkf-formular .fluentform .ff-el-form-control:focus {
	border-color: #009FE3;
	box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.22);
}

/*
 * Die sechs Anliegen als Pillen.
 *
 * NICHT ueber Fluent Forms' `layout_class: ff_list_buttons`: Das baut eine zusammenhaengende
 * Segmentleiste (Radius nur aussen, geteilte Raender) und setzt dabei viermal `!important` -
 * eine Vorlage, gegen die man nicht anschreibt, sondern die man nicht benutzt.
 *
 * Das Ankreuzfeld liegt unsichtbar ueber der Pille; die Optik traegt das `<span>` daneben
 * (`input:checked + span`). Deshalb braucht es keine `.ff_item_selected`-Klasse und kein
 * JavaScript.
 */
.mbkf-formular .fluentform .mbkf-pillen .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mbkf-formular .fluentform .mbkf-pillen .ff-el-form-check {
	position: relative;
	margin: 0;
}

.mbkf-formular .fluentform .mbkf-pillen .ff-el-form-check-label {
	display: block;
	margin: 0;
	cursor: pointer;
}

.mbkf-formular .fluentform .mbkf-pillen .ff-el-form-check-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.mbkf-formular .fluentform .mbkf-pillen .ff-el-form-check-input + span {
	display: block;
	padding: 9px 15px;
	border: 1px solid #DBDEE2;
	border-radius: 999px;
	background-color: #ffffff;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3em;
	color: #3D454D;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.mbkf-formular .fluentform .mbkf-pillen .ff-el-form-check-label:hover span {
	border-color: #009FE3;
	color: #0D1520;
}

/* Weiss auf #006F9E: 5,57:1 (ADR-95). Der Markenton #009FE3 erreicht nur 2,97:1. */
.mbkf-formular .fluentform .mbkf-pillen .ff-el-form-check-input:checked + span {
	background-color: #006F9E;
	border-color: #006F9E;
	font-weight: 600;
	color: #ffffff;
}

.mbkf-formular .fluentform .mbkf-pillen .ff-el-form-check-input:focus-visible + span {
	outline: 2px solid #009FE3;
	outline-offset: 2px;
}

/*
 * Einwilligung. Fluent Forms baut die Zeile als Tabelle (`display:table` / `table-row` /
 * `table-cell`) und setzt die Zellenbreite mit `!important`. Diese Bauart bleibt stehen - sie
 * tut genau das Richtige (Haekchen links, Text daneben), und eine Gegenregel braeuchte selbst
 * `!important`.
 */
.mbkf-formular .fluentform .ff-el-tc .ff_t_c {
	padding-left: 4px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55em;
	color: #3D454D;
}

.mbkf-formular .fluentform .ff-el-tc .ff_t_c a {
	color: #006F9E;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mbkf-formular .fluentform .ff-el-tc .ff_t_c a:hover,
.mbkf-formular .fluentform .ff-el-tc .ff_t_c a:focus-visible {
	color: #009FE3;
}

.mbkf-formular .fluentform .ff-el-tc .ff-el-form-check-input {
	width: 17px;
	height: 17px;
	accent-color: #006F9E;
}

/*
 * Schaltflaeche, Variante „gefuellt" aus ADR-95: `#006F9E` (5,57:1), Ueberfahren `#005B82`
 * (7,04:1). Zuschnitt wie in `tools/elementor-helfer.php` (16px / 700 / 16-32 / Radius 999).
 *
 * Fluent Forms schreibt hier KEINE eigene Regel: Das Werkzeug setzt `button_style: no_style`,
 * und nur dann laesst `Components\SubmitButton` den `<style>`-Block weg.
 */
.mbkf-formular .fluentform .ff-btn-submit {
	border: 0;
	border-radius: 999px;
	padding: 16px 32px;
	background-color: #006F9E;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2em;
	color: #ffffff;
	cursor: pointer;
	/*
	 * Der Gluehschatten ist derselbe wie an den acht Elementor-Schaltflaechen: `#009FE3` mit
	 * 0,34. Er stand hier auf `#006F9E` – der Flaechenfarbe –, und das war die einzige
	 * Abweichung von neun gleichen Schaltflaechen (ADR-155). Wer ihn aendert, aendert ihn
	 * auch dort: `tools/ci-schatten-buendeln.php` fuehrt die Rolle.
	 */
	box-shadow: 0 10px 30px 0 rgba(0, 159, 227, 0.34);
	transition: background-color 0.2s;
}

.mbkf-formular .fluentform .ff-btn-submit:hover,
.mbkf-formular .fluentform .ff-btn-submit:focus {
	background-color: #005B82;
	color: #ffffff;
}

.mbkf-formular .fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid #009FE3;
	outline-offset: 3px;
}

.mbkf-formular .fluentform .mbkf-aktion {
	margin-bottom: 0;
}

/*
 * Fehlermeldungen. Farbe kommt aus `--fluentform-danger` (siehe oben).
 *
 * VIER Klassen, nicht drei: Fluent Forms schreibt `.fluentform .ff-el-is-error .text-danger
 * {font-size:12px}` - ebenfalls drei, und seine Datei laedt spaeter. Gemessen mit drei
 * Klassen: 12px statt der gesetzten 13px (Pruefliste 64).
 */
.mbkf-formular .fluentform .ff-el-is-error .text-danger,
.mbkf-formular .fluentform .ff-el-group .text-danger {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45em;
}

/*
 * Bestaetigung nach dem Absenden. Bewusst NICHT die Zitatform aus ADR-80 (heller Kasten mit
 * 3px-Kante links) - die gehoert dem Zitat, und zwei Dinge in derselben Form sind zwei Dinge
 * zu wenig unterschieden (ADR-98).
 */
.mbkf-formular .fluentform .ff-message-success {
	margin-top: 0;
	border: 1px solid rgba(0, 159, 227, 0.35);
	border-radius: 14px;
	box-shadow: none;
	padding: 22px 26px;
	background-color: #EAF6FC;
	font-size: 15px;
	line-height: 1.65em;
	color: #0D1520;
}

.mbkf-formular .fluentform .ff-message-success p {
	margin: 0;
}

/*
 * MOBIL: Fluent Forms stapelt seine Spalten NICHT von selbst.
 *
 * Die Klasse `.mobile`, an der `.frm-fluent-form .ff-t-container.mobile{display:block}` haengt,
 * setzt ausschliesslich die Editor-Vorschau (`fluentform-advanced.js` hoert dort auf
 * `screen-change`). Im Frontend gibt es sie nicht - die beiden Zeilen blieben ohne diese
 * Medienabfrage bis 375px zweispaltig (Pruefliste 49).
 */
@media (max-width: 767px) {
	.mbkf-formular .fluentform .ff-t-container {
		display: block;
	}

	.mbkf-formular .fluentform .ff-t-container > .ff-t-cell + .ff-t-cell > .ff-el-group {
		margin-top: 22px;
	}
}

/* ==================================================================
 * SMARTPHONE - WAS AUS DER GROSSEN RUNDE VOM 30.08.2026 GLOBAL BLIEB
 *
 * Sieben Straenge haben die mobile Ansicht der ganzen Website geprueft. Das meiste war
 * dokumentspezifisch und steht in den jeweiligen Stilbloecken (ADR-63). Hier stehen nur die
 * Faelle, die **mehr als ein Dokument** betreffen - und je Fall die Messung, die ihn ausgeloest
 * hat. Ohne die Zahl wird eine Regel beim naechsten Zweifel gebrochen.
 * ================================================================== */

/*
 * Die Punkte des Kundenstimmen-Karussells sind 6 x 6 Pixel.
 *
 * Gemessen auf drei Seiten (#2004, #2027, #2107) - dieselbe Vorlage, dasselbe Mass. Die Schwelle
 * fuer ein Bedienelement ist 44 x 44 (WCAG 2.5.5); 6px trifft niemand mit dem Daumen.
 *
 * Vergroessert wird die **Trefferflaeche**, nicht der Punkt: Ein 44px-Punkt waere eine
 * Gestaltungsaenderung an einem Bauteil, das auf drei Seiten steht. Der Aufschlag liegt in einem
 * `::after` ohne Layoutwirkung - dieselbe Machart, die die Referenz `:9003` in ihrer
 * `geraete.css` benutzt.
 *
 * Seitlich nur bis zur Mitte des Zwischenraums (18px Raster, also 8px je Seite), sonst verdeckt
 * ein Punkt seinen Nachbarn und der Daumen trifft den falschen.
 */
@media (pointer: coarse) {

	.mb-stimmen .swiper-pagination-bullet {
		position: relative;
	}

	.mb-stimmen .swiper-pagination-bullet::after {
		position: absolute;
		top: 50%;
		right: -8px;
		left: -8px;
		height: 44px;
		content: "";
		transform: translateY(-50%);
	}
}

/*
 * Telefonnummer und E-Mail-Adresse im Kontaktbaustein sind 17 Pixel hoch.
 *
 * Gemessen: `info@mybits.de` 111 x 17, `+49 89 121 585-0` 123 x 17 - auf **sechzehn** Seiten,
 * denn der Baustein steht ueberall. Das sind die zwei Wege, auf denen jemand vom Telefon aus
 * Kontakt aufnimmt, und beide sind zu klein zum Treffen.
 *
 * Erhoeht wird ueber den Innenabstand, nicht ueber eine Hoehe: Die beiden Zeilen stehen nur 4px
 * auseinander, eine feste Hoehe wuerde sie ineinanderschieben. So macht es auch die Referenz.
 */
@media (pointer: coarse) {

	a[href^="tel:"],
	a[href^="mailto:"] {
		display: inline-block;
		padding: 8px 0;
	}
}

/*
 * Die Zitatkarte des Karussells ist auf dem Telefon 902 Pixel hoch - unabhaengig vom Zitat.
 *
 * Gemessen: Karte 902, Inhalt 347 bis 591 - also bis zu **555 Pixel Leerraum**, weil die Karte
 * senkrecht zentriert. Auf dem Schreibtisch faellt das nicht auf (die Karten stehen nebeneinander
 * und sind aehnlich hoch), auf dem Telefon steht ein kurzes Zitat in einem halbleeren Kasten.
 *
 * Genau dieser Befund steht in der Referenz dokumentiert („der Abstand bei den Kundenstimmen ist
 * auf dem smartphone viel zu gross", 25.08.2026) und ist dort mit `flex-start` behoben.
 *
 * Der zweite Wert hebt die Textbreite von 255 auf 303 Zeichenbreiten - der seitliche
 * Innenabstand von 46px kostet auf 347px Folie ein Viertel der Breite.
 */
@media (max-width: 767px) {

	.mb-stimmen .swiper-wrapper {
		align-items: flex-start;
	}

	.mb-stimmen .e-loop-item > .e-con {
		padding: 28px 22px 24px;
	}
}

/*
 * Die Sozialzeichen im Fussbereich brechen bei 375px um.
 *
 * 6 x 42 + 5 x 16 = 332, die Fuss-Spalte hat 327 (375 minus zweimal 24). Fuenf Kacheln in der
 * ersten Zeile, eine allein in der zweiten.
 *
 * Dieselbe Rechnung stand weiter oben in dieser Datei schon einmal - fuer den Schreibtisch, mit
 * anderen Zahlen (6 x 52 + 5 x 16 = 392 gegen 346). Verkleinert wird deshalb zum zweiten Mal die
 * Luft, nicht das Zeichen: 6 x 42 + 5 x 12 = 312.
 *
 * Ab 390px waere es auch ohne diese Regel eine Zeile - der Mangel trifft nur die schmalen
 * Geraete, und genau die sind der Pruefmassstab.
 */
@media (max-width: 767px) {

	.elementor-location-footer .elementor-widget-social-icons .elementor-social-icons-wrapper {
		--grid-column-gap: 12px;
	}
}

/*
 * Die Branchen-Pillen sind 43 Pixel hoch - einen Pixel unter der Schwelle.
 *
 * Gemessen 184 x 43 auf `/industrien/` und `/nachhaltigkeit/`. Ein Pixel klingt nach nichts, aber
 * die Schwelle ist keine Empfehlung: 44 x 44 ist der Wert, ab dem ein Daumen zuverlaessig trifft.
 *
 * `min-height` statt `height`, damit eine zweizeilige Pille weiter wachsen kann.
 */
.mbue-chips .e-loop-item > .e-con {
	min-height: 44px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Sprungziele: jeder Abschnitt mit gesetztem Anker
 *
 * Seit dem 02.09.2026 traegt jeder Abschnitt einer Loesungs- und Branchenseite eine `id` aus
 * seinem Ankerfeld (`<abschnitt>_anker`, gebunden ueber Elementors `_element_id`). Damit sind
 * Sprungmarken moeglich - aus den Themenkarten und aus der FAQ.
 *
 * Ohne `scroll-margin-top` landet die Oberkante beim Sprung UNTER der fixen Kopfleiste. Dieselben
 * 92px wie beim Kontaktformular: 78 Leiste plus 14 Luft.
 *
 * Der Selektor greift ueber die gesetzte `id`, nicht ueber eine Klasse: Elementor gibt einem
 * Element nur dann ein `id`-Attribut, wenn `_element_id` gefuellt ist - die Regel trifft also
 * genau die Abschnitte, die ein Sprungziel SIND, und nichts sonst.
 *
 * `[id]` allein waere zu weit: Auch Formularfelder und Skript-Container tragen IDs. Deshalb
 * zusaetzlich die Elementor-Containerklasse.
 * ───────────────────────────────────────────────────────────────────────────── */
.e-con[id],
.elementor-section[id],
.elementor-top-section[id] {
	scroll-margin-top: 92px;
}

/*
 * Die Themenbloecke einer Branchenseite sind Loop-Items, nicht Container - dort sitzt die `id`
 * eine Ebene tiefer. Derselbe Abstand, damit „Mehr erfahren" nicht unter der Leiste landet.
 */
.e-loop-item[id],
.e-loop-item > .e-con[id] {
	scroll-margin-top: 92px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Bilder zur Realisierung einer Erfolgsgeschichte (ADR-119)
 *
 * Elementor Pros Galerie-Widget mit `acf-gallery` auf `cs_real_bilder`. Das Raster stellt das
 * Widget selbst (drei Spalten, 18px Lücke); hier steht nur, was Elementor nicht ausdrücken kann.
 *
 * Die Verbergen-Regel ist Pflicht, nicht Feinschliff: 20 der 43 Erfolgsgeschichten haben keine
 * Bilder, und ohne sie stünde dort der Randabstand des Widgets als Lücke unter den Schritten -
 * sichtbar, unerklärlich, auf fast der Hälfte aller Seiten (dasselbe Muster wie ADR-81).
 * ────────────────────────────────────────────────────────────────────────── */

.mbcs-realbilder:not(:has(.e-gallery-item)) {
	display: none;
}

/*
 * Zwei Klassen, nicht eine: Elementors eigene Regeln für die Galerie tragen die Element-ID
 * (0,1,1 und höher), und ein Selektor mit einer Klasse verliert dagegen (Prüfliste 64).
 */
.mbcs-realbilder .e-gallery-image {
	border-radius: 14px;
}

/*
 * Die Bilder sind übernommene Fotos in wechselnder Qualität. Ein leiser Schleier nimmt ihnen die
 * Härte und bindet sie an die dunkle Fläche des Abschnitts, ohne sie zu verfälschen.
 */
.mbcs-realbilder .e-gallery-item::after {
	background: linear-gradient( 180deg, rgba( 4, 26, 43, 0 ) 55%, rgba( 4, 26, 43, .28 ) 100% );
	border-radius: 14px;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.mbcs-realbilder .e-gallery-item {
	position: relative;
}

/* =====================================================================
 * KARRIERE: „NEUE TEAMPLAYER GESUCHT!" (ADR-124)
 * =====================================================================
 *
 * Der Abschnitt ist von der Vorlage uebernommen (`:9003`, `/karriere/`, Shortcode
 * `[bits-karriere]`): zentrierte Ueberschrift, zweispaltiger Vorspann, darunter die
 * HR-Ansprechpersonen als Karten mit Foto.
 *
 * ZWEI ABWEICHUNGEN VON DER VORLAGE, BEIDE MIT GRUND:
 *
 *   1. ZWEI FLEX-SPALTEN STATT EINES RASTERS. Die Vorlage setzt `grid-template-columns:
 *      1fr 1fr` und fuellt zeilenweise - Absatz 1 links oben, Absatz 2 RECHTS oben,
 *      Absatz 3 links unten. Der Lesefluss springt damit ueber die Spalte. Hier stehen
 *      Absatz 1 und 2 in der linken, 3 und 4 in der rechten Spalte.
 *      Und: Ein Elementor-Container auf `display: grid` zu bringen kostet vier Klassen im
 *      Selektor, weil Elementor `--display` je Element mit 0,3,0 setzt (Pruefliste 88) -
 *      zwei Flex-Spalten sind hier das einfachere Mittel fuer dasselbe Bild.
 *   2. UNSERE SCHRIFTGROESSEN. Die Vorlage rechnet mit 15,5px (Vorspann, Name) und 13,5px
 *      (Rolle). Unser System hat 15px und unterscheidet ueber das Gewicht (Pruefliste 8a);
 *      eine 13,5er Zeile waere die siebte Groesse auf dieser Seite.
 *
 * Die Fotomasse sind uebernommen: 200 x 200, Radius 20, `object-fit: cover`.
 */
.mbkt-sp2 > .e-con {
	width: calc((100% - 48px) / 2);
}

@media (max-width: 767px) {

	.mbkt-sp2 > .e-con {
		width: 100%;
	}
}

/* Der waagerechte Ueberlauf deutscher Komposita - dieselbe Zeile wie bei `.mb-grund`. */
.mbkt-sp2 > .e-con,
.mbkt-karte {
	min-width: 0;
}

.mbkt-karte {
	box-sizing: border-box;
	text-align: center;
}

/*
 * DREI KLASSEN, sonst gewinnt `.elementor-widget-image img` (0,2,0) und das Foto behaelt
 * seine natuerliche Groesse (Pruefliste 34, ADR-66).
 */
.mbkt-karte .mbkt-foto img {
	display: block;
	width: 200px;
	height: 200px;
	margin: 0 auto;
	border-radius: 20px;
	object-fit: cover;
}

@media (max-width: 640px) {

	.mbkt-karte .mbkt-foto img {
		width: 150px;
		height: 150px;
	}
}

/* Die Angaben stehen in EINEM Text-Widget, damit Rolle, Aufgabe und Kontakt ein Block sind. */
.mbkt-karte .mbkt-angaben p {
	margin: 0;
}

.mbkt-karte .mbkt-angaben a {
	color: #006F9E;
	text-decoration: none;
}

.mbkt-karte .mbkt-angaben a:hover {
	color: #009FE3;
	text-decoration: underline;
}

/* =====================================================================
 * „UNSERE WERTE" - EIN BAUSTEIN FUER ZWEI SEITEN (ADR-124)
 * =====================================================================
 *
 * Der Abschnitt stand bis zum 02.09.2026 ZWEIMAL im Bestand: als `mbua0052` in #3254
 * (/ueber-uns/) und als `mbv0022` in #3182 (/karriere/) - mit derselben Ueberschrift, denselben
 * drei Werten und VERSCHIEDENEN Texten. Seit ADR-124 ist er eine Bibliotheks-Vorlage, die beide
 * Seiten einbinden.
 *
 * HIER STEHT NUR, WAS ELEMENTOR NICHT ALS STEUERELEMENT ANBIETET: die Spaltenbreite eines
 * umbrechenden Rasters (G-18) und der Randabstand der Absaetze. Farben, Schriften, Rahmen und
 * Innenabstaende stehen als EINSTELLUNGEN im Dokument - es gibt genau ein Dokument, also auch
 * genau eine Wahrheit. Der Chip kommt aus der Selektorliste von `.mb-siegel-symbol` (60px,
 * ADR-105): die Karte ist bei 1280px Inhaltsbreite 410px breit und faellt damit in den grossen
 * Fall der Groessentabelle.
 *
 * DIE FLAECHE GEHOERT NICHT ZUM BAUSTEIN. Auf /karriere/ liegt der Abschnitt auf `#F4F6F8`, auf
 * /ueber-uns/ auf Weiss - das ist der Rhythmus der jeweiligen Seite und keine Eigenschaft des
 * Bausteins. Sie steht deshalb an der einbettenden Huelle (dieselbe Trennung wie in ADR-112).
 */
.mb-werte > .e-con {
	width: calc((100% - 48px) / 3);
}

@media (max-width: 1024px) {

	.mb-werte > .e-con {
		width: calc((100% - 24px) / 2);
	}
}

@media (max-width: 767px) {

	.mb-werte > .e-con {
		width: 100%;
	}
}

.mb-wert {
	min-width: 0;
}

.mb-wert p {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * "So laeuft deine Bewerbung" auf /karriere/ (#3182) - vier Schritte auf einer Linie.
 * Marker-Klasse `mbbw-abschnitt`, Flaeche ueber --mb-dunkelflaeche (ADR-102), Optik hier
 * und nicht im Stilblock der Seite (ADR-124: zwei Stilbloecke sind dort schon verloren
 * gegangen). Vorbild ist der Abschnitt "6 - Bewerbungsprozess" der Vorlage; der
 * Fortschrittsbalken beim Ueberfahren kommt nicht mit (Pruefliste 109). Textfarbe .95 statt
 * der .82 der Vorlage - das ist die Konvention der dunklen Abschnitte dieser Website.
 * Werkzeug: tools/karriere-bewerbung-einbauen.php
 * -------------------------------------------------------------------------- */
.elementor .elementor-element.mbbw-abschnitt.e-con:not(.elementor-motion-effects-element-type-background) {
	background-image: var(--mb-dunkelflaeche);
}

.e-con.mbbw-flow {
	position: relative;
}

/* Die Linie hinter den Ziffern: Mitte des 54px-Kreises = 27px, Kreisradius links/rechts. */
.e-con.mbbw-flow::before {
	content: "";
	position: absolute;
	top: 27px;
	left: 27px;
	right: 27px;
	height: 2px;
	background: rgba(255, 255, 255, .16);
	pointer-events: none;
}

/*
 * Vier Karten in einer Reihe – und die Luecke steht NUR im Dokument.
 *
 * Hier stand `calc((100% - 96px) / 4)`, und die 96 waren 3 x 32px Spaltenabstand am
 * `.mbbw-flow`. Ein Wert an zwei Orten: Als die Luecken-Buendelung den Abstand auf 34px hob
 * (ADR-155), belegten die drei Luecken 102px und die Karten weiter (100% - 96px) - zusammen 6px
 * zu breit, und `flex-wrap: wrap` brach die vierte Karte um. Gemeldet hat es der Auftraggeber,
 * kein Werkzeug.
 *
 * Der naheliegende Ausweg `calc((100% - 3 * var(--column-gap)) / 4)` funktioniert **nicht**, und
 * das ist gemessen: Elementor setzt `--column-gap` an **jedem** `.e-con`, also auch an der Karte
 * selbst - dort steht `0px`, weil die Karte keine eigene Luecke hat. Die Variable erbt also nicht,
 * sie wird vom Kind ueberschrieben. Ergebnis waren 320px je Karte (= 1280/4) und derselbe
 * Umbruch: `3 * 0px` ist 0.
 *
 * Deshalb rechnet jetzt **Flexbox** und niemand sonst: `flex: 1 1 0` verteilt den Platz, der nach
 * Abzug der Luecken uebrig ist, gleichmaessig auf die vier Karten. Es gibt keine Zahl mehr, die
 * eine Luecke spiegelt - und damit keine zweite Wahrheit, die auseinanderlaufen kann.
 */
.mbbw-flow > .e-con.mbbw-schritt {
	width: auto;
	flex: 1 1 0;
	min-width: 0;
}

.mbbw-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 54px;
	height: 54px;
	margin-bottom: 18px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	background: #0B2B45;
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
}

/* Schritt 1 ist der hervorgehobene - wie in der Vorlage, nur ohne Hover-Wanderung. */
.mbbw-flow > .mbbw-schritt:first-child .mbbw-num {
	background: #009FE3;
	border-color: #009FE3;
	transform: scale(1.12);
}

/* Vier Klassen: Elementor setzt `.e-con .elementor-widget.elementor-widget{margin-block-end:0}`
 * mit 0,3,0 (ADR-124). */
.e-con.mbbw-schritt .elementor-widget.elementor-widget-html {
	margin: 0;
}

.e-con.mbbw-schritt .elementor-widget.mbbw-titel {
	margin: 0 0 8px;
}

/* Vier Klassen: `.elementor-widget-heading .elementor-heading-title` aus post-149.css hat 0,2,0
 * und laedt spaeter - mit zwei Klassen kam die H3 mit 52px und Akzentblau (gemessen, wie
 * ADR-120 / Pruefliste 87). */
.e-con.mbbw-schritt .mbbw-titel .elementor-heading-title {
	margin: 0;
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.mbbw-text,
.mbbw-text p {
	margin: 0;
	color: rgba(255, 255, 255, .95);
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 1024px) {

	/*
	 * Zwei je Reihe, wieder ohne Zahl: Eine Flex-Basis UNTER dem Anteil (40 % statt 50 %) laesst
	 * genau zwei Karten in die Reihe, `flex-grow` fuellt den Rest auf, und die Luecke zieht
	 * Flexbox selbst ab. Ein `calc(50% - Luecke/2)` waere wieder ein zweiter Ort.
	 */
	.mbbw-flow > .e-con.mbbw-schritt {
		width: auto;
		flex: 1 1 40%;
	}

	.e-con.mbbw-flow::before {
		display: none;
	}
}

@media (max-width: 767px) {

	.mbbw-flow > .e-con.mbbw-schritt {
		width: auto;
		flex: 1 1 100%;
	}
}

/* Hintergrundvideo der Köpfe: von Anfang an in Containergröße (ADR-129, Nachtrag Fonts/Video).
   Elementor gibt dem <video> nur position:absolute und object-fit:cover; Breite und Höhe rechnet
   erst frontend.js nach den Video-Metadaten und schreibt sie inline. Bis dahin ist das Element
   300×150 (intrinsische Größe ohne Metadaten) – mit Defer JS liegt das nach dem ersten Bild, und
   Lighthouse zählte das Nachwachsen als CLS 0,335 (mobil, Lösungsseite). Mit fester Größe füllt
   object-fit:cover den Container sofort, der Ausschnitt ist derselbe wie Elementors Berechnung
   (zentriert, deckend). `!important` ist hier nötig, weil Elementors Inline-Werte sonst gewinnen –
   die einzige Ausnahme von der Regel in CLAUDE.md, und der Grund steht hier. */
.elementor .elementor-background-video-container .elementor-background-video-hosted {
	width: 100% !important;
	height: 100% !important;
}

/* Herausforderungs-Karten der Erfolgsgeschichten (Baustein `cs-herausforderungen`, ADR-131).
   Ersetzt das Loop Grid mit der Karte #1884; die Optik ist von dort abgemessen (05.09.2026,
   1920px): Karte weiss, Radius 20, Innenabstand 24, Schatten 0 8px 24px -14px rgba(0,0,0,.22),
   Raster zweispaltig mit 24px Luecke, Titel 15/700, Text 15/400 mit 1,65 Zeilenhoehe. Neu ist
   das Zeichen je Karte im 44er-Chip (Machart aus ADR-105, Selektorliste oben) statt des einen
   Font-Awesome-Stapels fuer alle. `.mycs2-*` bleibt am Markup fuer den Block-Theme-Weg; im
   Elementor-Layout gelten diese Regeln, weil `sektionen.css` dort nicht geladen wird. */
.mb-chal-raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.mb-chal-raster.mb-chal-sp3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mb-chal-raster.mb-chal-sp4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.mb-chal-raster,
	.mb-chal-raster.mb-chal-sp3,
	.mb-chal-raster.mb-chal-sp4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.mb-chal-raster,
	.mb-chal-raster.mb-chal-sp3,
	.mb-chal-raster.mb-chal-sp4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Keine Karte spannt zwei Spalten. `sektionen.css` (Block-Theme-Weg) laesst bei ungerader Zahl die
   drittletzte Karte ueber die volle Breite laufen (`:nth-child(odd):nth-last-child(3)`) – bei fuenf
   Karten war Karte 3 1280px breit, 4 und 5 wieder 628 (gemessen an #2321, Pruefrunde 06.09.2026,
   ADR-136). Zwei Klassen mehr als dort, damit die Regel unabhaengig von der Ladereihenfolge gewinnt. */
.mb-chal-raster.mb-chal-raster > .mb-chal:nth-child(odd):nth-last-child(3),
.mb-chal-raster.mb-chal-raster > .mb-chal:nth-child(odd):nth-last-child(3) ~ .mb-chal {
	grid-column: auto;
}

.mb-chal-raster .mb-chal {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	margin: 0;
	padding: 24px;
	border: 0;
	border-radius: 20px;
	background: #ffffff;
	box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.22);
	transition: none;
}

.mb-chal-raster .mb-chal-symbol {
	--mb-chip: 44px;
	--mb-chip-zeichen: 22px;
	--mb-symbol-2: #BFE6FA;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	align-self: center;
	width: var(--mb-chip);
	height: var(--mb-chip);
	margin: 0 0 16px;
	border-radius: 999px;
	background: linear-gradient(150deg, #009FE3 0%, #006F9E 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.18),
		0 10px 22px -12px rgba(0, 111, 158, 0.55);
	color: #DCF2FF;
}

.mb-chal-raster .mb-chal-symbol::before {
	content: none;
}

.mb-chal-raster .mb-chal-symbol svg {
	width: var(--mb-chip-zeichen);
	height: var(--mb-chip-zeichen);
}

.mb-chal-raster .mb-chal-titel {
	margin: 0 0 12px;
	color: #000000;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4em;
}

.mb-chal-raster .mb-chal-text {
	margin: 0;
	color: #000000;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.65em;
}

/* Foto der zitierten Person im Zitatblock der Erfolgsgeschichten (ADR-131): rund, 56px, neben dem
   Namen. Ohne Foto rendert Elementors Bild-Widget nichts, die Zeile zeigt nur den Namen. */
.mbcs-zitat-zeile .mbcs-zitat-foto img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35);
}

.mbcs-zitat-zeile .mbcs-zitat-foto {
	flex: 0 0 auto;
	width: auto;
}

.mbcs-zitat-zeile .mbcs-zitat-person {
	flex: 1 1 auto;
}

/* Fazit-Bild der Erfolgsgeschichten (ADR-131): Spaltenbreite, gerundet, in der Hoehe begrenzt. Seit
   dem Rueckfall auf das Beitragsbild (Frontend\FeldRueckfall) steht hier bei 40 Storys ein Foto - ohne
   Grenze wurde ein quadratisches 823px hoch. Die Illustration von Fassung A (267x150, transparent)
   bleibt unter der Grenze und wird nur nicht mehr hochgezogen. */
.mbcs-fazit .elementor-widget-image img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: 20px;
}

/* Fazit-Illustration von Fassung A liegt mit multiply auf dem grauen Abschnitt (weisser Grund
   verschwindet). Greift der Rueckfall auf das Beitragsbild (Klasse am body aus Frontend\FeldRueckfall),
   bleibt das Foto normal - multiply macht ein Foto auf Grau schmutzig. */
.mbcs-fazit .elementor-widget-image img {
	mix-blend-mode: multiply;
}

body.mb-rueckfall-cs_fazit_grafik .mbcs-fazit .elementor-widget-image img {
	mix-blend-mode: normal;
}

/* Zitatblock, Fassung vom 05.09. (Skizze des Auftraggebers): Foto rechts und groesser, Name
   rechtsbuendig darunter. Ueberschreibt die 56px-Regel von heute Vormittag. */
.mbcs-zitat-zeile .mbcs-zitat-foto img {
	width: 120px;
	height: 120px;
}

.mbcs-zitat-zeile .mbcs-zitat-person .elementor-heading-title {
	text-align: right;
}

@media (max-width: 767px) {
	.mbcs-zitat-zeile .mbcs-zitat-foto img {
		width: 88px;
		height: 88px;
	}

	.mbcs-zitat-zeile .mbcs-zitat-person .elementor-heading-title {
		text-align: left;
	}
}

/* Branchenfilter auf /case-studies/: Chips wie die Tools der Detailseite. */
.elementor-widget-taxonomy-filter.mb-branchenfilter .e-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-start;
}

.elementor-widget-taxonomy-filter.mb-branchenfilter .e-filter-item {
	padding: 8px 16px;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.25);
	color: #0D1520;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3em;
	cursor: pointer;
}

.elementor-widget-taxonomy-filter.mb-branchenfilter .e-filter-item[aria-pressed="true"],
.elementor-widget-taxonomy-filter.mb-branchenfilter .e-filter-item.e-active {
	background: #006F9E;
	color: #ffffff;
}

/* Zitatblock: das Zitat fuellt die linke Seite, darf aber schrumpfen - sonst draengt es die
   Fotospalte aus der Box (Pruefliste 66: min-width:auto = min-content). */
/* Kennzahl-Werte brechen nicht im Wort. Irgendwo oberhalb steht `word-break: break-word` (gemessen am
   Titel der Kennzahlkarte), und Elementor bricht dann „Automatisier|t". Ein Begriff, der nicht passt,
   soll lieber getrennt werden (Silbentrennung, lang=de) als zerrissen; die Schrift der Vierspalter
   ist so gewaehlt, dass nichts bricht (tools/cs-layout-pruefrunde.php, ADR-136). */
.mbcs-kpis .elementor-widget-heading .elementor-heading-title {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: auto;
}

.mbcs-zitat-box .mbcs-zitat-text {
	flex: 1 1 0;
	min-width: 0;
}

/* ==========================================================================
 * FLIESSTEXT-LINKS: BITS-Blau statt des Theme-Rots (08.09.2026)
 * ==========================================================================
 *
 * Aus dem Betrieb: „In den FAQs sind sie rötlich und auch bei Über uns. Links sollten immer im
 * BITS blau sein."
 *
 * DIE URSACHE, wörtlich aus `hello-elementor/assets/css/reset.css`:
 *
 *     a { background-color: transparent; color: #c36; text-decoration: none }
 *     a:active, a:hover { color: #336 }
 *
 * `#c36` ist das Rötliche. Es trifft **jeden** Link, der keine eigene Farbe bekommt – und das
 * sind genau die im Fliesstext: gemessen alle Links in den FAQ-Antworten und in den
 * weiterführenden Zeilen („Zum Einstiegsangebot", „Abrechnungsmodelle ansehen"), dazu die
 * Textlinks auf /ueber-uns/ („customice", „offenen Stellen"). Schaltflächen, Navigationslisten
 * und Sozialzeichen sind nicht betroffen: Sie tragen eigene Klassen mit eigener Farbe.
 *
 * WARUM `#006F9E` UND NICHT `#009FE3`
 *
 * Das helle Akzentblau erreicht auf Weiß **2,97:1** und fällt damit unter WCAG AA (G-23) – für
 * Fliesstext, der gelesen werden soll, ist es zu hell. `#006F9E` erreicht **5,57:1** und ist
 * dieselbe Entscheidung, die die Schaltflächen tragen (ADR-95). „BITS-Blau" heißt hier also die
 * lesbare Variante; das helle bleibt Flächen und großer Schrift.
 *
 * WARUM `:not([class])`
 *
 * Der Selektor trifft genau die ungestylten Links und lässt alles in Ruhe, was schon eine Farbe
 * hat – Elementor-Buttons (`.elementor-button`), unsere Navigationslisten (`.mb-navliste a`), die
 * Kontaktwege (`.mb-kp-wege a`), Sozialzeichen. Eine Regel auf `a` allein hätte gegen diese
 * gewonnen oder verloren, je nach Spezifität, und das wäre von Fall zu Fall verschieden.
 *
 * Die Unterstreichung kommt dazu, weil Farbe allein kein hinreichender Hinweis auf einen Link
 * ist (WCAG 1.4.1) – im Fliesstext ist sie die übliche und barrierefreie Kennzeichnung.
 */
.bh-faq-antwort a:not([class]),
.bh-faq-mehr a:not([class]),
.mb-baustein a:not([class]),
.mb-schritt a:not([class]),
.mb-grund a:not([class]),
.elementor-widget-text-editor a:not([class]),
.elementor-widget-theme-post-content a:not([class]) {
	color: #006F9E;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Hover: dunkler, nicht heller. Das Reset setzt `a:hover{color:#336}` mit 0,1,1 – die Regel hier
 * hat mehr Klassen und gewinnt. Ein Wechsel auf das helle `#009FE3` wäre der falsche Weg: Beim
 * Überfahren würde der Text schlechter lesbar, nicht besser.
 */
.bh-faq-antwort a:not([class]):hover,
.bh-faq-mehr a:not([class]):hover,
.mb-baustein a:not([class]):hover,
.mb-schritt a:not([class]):hover,
.mb-grund a:not([class]):hover,
.elementor-widget-text-editor a:not([class]):hover,
.elementor-widget-theme-post-content a:not([class]):hover {
	color: #00567A;
}

/* ------------------------------------------------------------------
 * MOBILER KOPFSCHLEIER – flächig statt auslaufend (G-23-Umfeld, 08.09.2026)
 * ------------------------------------------------------------------
 *
 * Am Schreibtisch läuft der Schleier nach rechts aus (`color_stop 20%`, 100deg, ADR-144). Dort ist
 * das richtig: Die Textkanten liegen bei 48 bis 81 Prozent der Breite, rechts steht nichts.
 *
 * Mobil steht der Text über die ganze Breite. Bei 87 Prozent beträgt die Deckung dann
 *
 *     0,92 × (1 − (87 − 20) / (100 − 20)) = 0,147
 *
 * also praktisch nichts – auf der Startseite und /ueber-uns/ liegen der zweite Absatz und die
 * Schaltflächen unlesbar auf den hellen Dächern. Gefunden über die Screenshots aus Lighthouses
 * eigener Mobilemulation; im Mess-Browser geht es nicht (G-30).
 *
 * WARUM ALS CSS UND NICHT ALS EINSTELLUNG
 *
 * Elementors Overlay-Control ist **nicht responsive** – gemessen an
 * `get_controls('background_overlay_color')['responsive']`: nicht gesetzt, ebenso bei
 * `background_overlay_background`. Mobile Schlüssel im Dokument (`..._color_mobile`,
 * `..._color_stop_mobile`) werden gespeichert und **nie ausgegeben**; der erste Versuch hat sie
 * geschrieben, und in `post-2004.css` kam kein `0.7` vor. Sie sind wieder entfernt.
 *
 * Deckung 0,7 ist die Vorgabe des Auftraggebers („4 0,7 (erstmal)"). Bei 0,92 verschwindet das
 * Foto fast; 0,7 lässt es durchscheinen und trägt weißen Text.
 *
 * DIE SELEKTOREN sind von Elementor abgeschrieben, nicht geraten: Es setzt seinen Verlauf auf
 * `::before` des Containers UND auf `> .elementor-motion-effects-container >
 * .elementor-motion-effects-layer::before` (zwei Wege, je nach Motion-Effekt). Beide brauchen die
 * Gegenregel, und `elementor-komponenten.css` lädt VOR `post-<ID>.css` – deshalb je Selektor eine
 * Klasse mehr als Elementor.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {

	.elementor.elementor-2004 .elementor-element.elementor-element-mbs0009::before,
	.elementor.elementor-2004 .elementor-element.elementor-element-mbs0009 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before,
	.elementor.elementor-3254 .elementor-element.elementor-element-mbv0008::before,
	.elementor.elementor-3254 .elementor-element.elementor-element-mbv0008 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before,
	.elementor.elementor-3182 .elementor-element.elementor-element-mbv0008::before,
	.elementor.elementor-3182 .elementor-element.elementor-element-mbv0008 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before {
		background-image: linear-gradient(180deg, rgba(0, 10, 18, .7) 0%, rgba(0, 10, 18, .7) 100%);
	}

	/*
	 * Nachhaltigkeit hat eine eigene Grundfarbe (`rgba(0,0,0,0.68)` statt `rgba(0,10,18,0.92)`) und
	 * einen späteren Stop (78 %), weil rechts die Kennzahlenkarte steht (ADR-144). Mobil gilt
	 * dieselbe Deckung wie überall, aber in ihrem eigenen Schwarz.
	 */
	.elementor.elementor-3255 .elementor-element.elementor-element-mbnh0016::before,
	.elementor.elementor-3255 .elementor-element.elementor-element-mbnh0016 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before {
		background-image: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .7) 100%);
	}
}

/* =====================================================================
 * LEISTUNGEN: DIE ZEILEN SCHIEBEN SICH BEIM SCROLLEN ZUSAMMEN
 * Auftrag des Auftraggebers, 14.09.2026. Marke: mb-stapel
 * ---------------------------------------------------------------------
 * „Das Scrollen müsste zu Beginn der ersten Leistung stehen bleiben, so lange,
 *  bis alle anderen sich zusammengeschoben haben und erst dann normal
 *  weiterscrollen. So eine Art Ziehharmonika-Effekt, nur andersherum."
 *
 * HIER STEHT NUR DAS KLEBEN. Die Masse setzt `assets/stapel.js` direkt am
 * Element, und zwar aus einem Grund: Der Fortschritt hängt an der
 * Scrollposition, nicht an Schwellen. Eine CSS-Regel könnte das nicht
 * ausdrücken, ohne genau die Rückkopplung zu erzeugen, die drei Fassungen
 * lang das Problem war (die Einzelheiten stehen im Kopf des Skripts).
 *
 * Und eine CSS-Scroll-Zeitleiste (`animation-timeline: view()`) scheidet aus:
 * Ein klebendes Element steht relativ zum Sichtfenster still, seine
 * Zeitleiste läuft dann nicht weiter, die Zeilen schrumpfen nie – und ohne
 * Schrumpfen entsteht kein Platz zum Kleben.
 *
 * DIE ZEILE KANN NICHT ZU WEIT SCHRUMPFEN: Das Skript ändert nur Masse – kein
 * `display:none`, kein `overflow:hidden`, kein `max-height` auf einem Text.
 * Die Untergrenze setzt damit der Inhalt selbst (gemessen: mittlere Spalte
 * 195 px, linke mit Pille, Titel und Button 180 px). Ausdrückliche Vorgabe:
 * „bei uns aber etwas eher stoppen, so dass der Startpunkt-Text auch noch
 * sichtbar bleibt (Button schiebt sich auch hoch)."
 *
 * OHNE SKRIPT PASSIERT NICHTS: `mb-stapel-an` setzt erst das Skript, und die
 * Masse ebenso. Nur am Schreibtisch – einspaltig wäre ein Zusammenschieben
 * Unruhe statt Gewinn.
 * ===================================================================== */

@media (prefers-reduced-motion: no-preference) and (min-width: 1025px) {

	/*
	 * Die Liste bleibt unter der fixen Kopfleiste stehen (78 px + 14 Luft),
	 * während sie sich zusammenschiebt. Den Platz dafür schafft die
	 * `min-height`, die das Skript am Elterncontainer festhält: Die Liste wird
	 * flacher, ihr Elternteil nicht – und genau diese Differenz ist die
	 * Strecke, über die das Scrollen „steht".
	 */
	.mb-stapel.mb-stapel-an {
		position: sticky;
		top: 92px;
	}
}

/* =====================================================================
 * ÜBERSCHRIFTEN-ANIMATIONEN
 * Auftrag des Auftraggebers, 14.09.2026, nach der ersten Runde:
 *   „Die Untertitel und die Zeilen über den Überschriften sollten nicht
 *    animiert sein, sondern immer nur die Überschriften. Die Animation in der
 *    Vorlage ist bei der Header-Überschrift anders, da kommt die Schrift recht
 *    schnell von links unten reingeflogen und gefaded. Die anderen
 *    Überschriften bauen sich eher Wort für Wort auf."
 * ---------------------------------------------------------------------
 * ZWEI ROLLEN, ZWEI ANIMATIONEN – und beide gibt es in Elementors Liste NICHT.
 * Elementor kennt `fadeInLeft` (aus 100 % Breite, viel zu weit) und nichts, was
 * ein Wort nach dem anderen aufbaut. Deshalb sind das die „paar Ausnahmen", die
 * der Auftrag ausdrücklich zulässt.
 *
 * Die Werte sind an der Vorlage (:9003) abgelesen, nicht gewählt:
 *   `.bh-ht-line { opacity:0; transform:translate(-26px,8px);
 *                  animation: bhRise 1s cubic-bezier(.16,1,.3,1) both }`
 * Also: 26 px von links, 8 px von unten, weiches Ankommen.
 *
 * KEIN `elementor-invisible`. Die erste Runde nutzte Elementors Mechanik, die
 * das Element unsichtbar schaltet, bis JavaScript es freigibt. Hier trägt das
 * CSS die Animation selbst: Bleibt das Stylesheet aus, steht die Überschrift
 * einfach da. Ein Text, der auf ein Skript wartet, ist ein Risiko, das eine
 * Überschrift nicht wert ist.
 * ===================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* ── Kopf-H1: zeilenweise von links unten hereinfliegen ──────────── */

	/*
	 * DIE ZEILEN STEHEN IM AUSGELIEFERTEN HTML. `Frontend\Ueberschriften`
	 * teilt die H1 am `<br>` in `<span class="mb-zeile">` und nummeriert sie.
	 *
	 * Vorher tat das ein Skript nach dem Laden, und daraus wurde eine doppelte
	 * Animation: Erst lief die Regel für die ungeteilte Überschrift, dann
	 * setzte das Skript die Zeilen und alles begann versetzt von vorn („die
	 * startet so wie davor als ein block und beginnt dann nochmal neu dann
	 * versetzt", Rückmeldung 14.09.2026). Jetzt ist der erste gemalte Frame
	 * schon der richtige.
	 */
	.mb-anim-kopf .mb-zeile {
		display: block;
		animation: mbKopfEinflug .72s cubic-bezier( .16, 1, .3, 1 ) both;
		animation-delay: calc( var( --i, 0 ) * 150ms );
	}

	/*
	 * Eine EINZEILIGE Überschrift hat nichts zu teilen – sie fliegt als Block
	 * ein. `:has()` fragt genau das ab, statt es an einer zweiten Klasse
	 * festzumachen, die jemand vergessen könnte.
	 */
	.mb-anim-kopf .elementor-heading-title:not(:has(.mb-zeile)) {
		animation: mbKopfEinflug .72s cubic-bezier( .16, 1, .3, 1 ) both;
	}

	@keyframes mbKopfEinflug {
		from {
			opacity: 0;
			transform: translate( -26px, 8px );
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	/*
	 * ── Abschnittsüberschriften: Wort für Wort ──────────────────────────
	 *
	 * `assets/ueberschriften.js` zerlegt den Text in `<span class="mb-wort">`
	 * und setzt je Wort `--i`. Die Verzögerung ist damit reine CSS-Rechnung –
	 * ohne Schleife im Skript.
	 *
	 * Die Animation läuft erst, wenn das Element die Klasse `mb-anim-los`
	 * bekommt (IntersectionObserver). Vorher stehen die Wörter auf ihrem
	 * Anfangszustand, NACHHER auf dem Endzustand – und ohne Skript greift
	 * keine der beiden Regeln, die Überschrift steht normal da.
	 */

	.mb-anim-worte.mb-anim-bereit .mb-wort {
		display: inline-block;
		opacity: 0;
		transform: translateY( 20px );
	}

	.mb-anim-worte.mb-anim-los .mb-wort {
		animation: mbWortAuf .62s cubic-bezier( .16, 1, .3, 1 ) both;
		animation-delay: calc( var( --i, 0 ) * 80ms );
	}

	@keyframes mbWortAuf {
		from {
			opacity: 0;
			transform: translateY( 20px );
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	/*
	 * Ein Wort darf nicht umbrechen, nur weil es in einem `inline-block`
	 * steckt – das Leerzeichen dazwischen bleibt ein normales Leerzeichen,
	 * und `<br>` im Feldwert (der Akzent-Umbruch, ADR-151) bleibt unberührt.
	 */
	.mb-anim-worte .mb-wort {
		white-space: pre-wrap;
	}
}

/* =====================================================================
 * KACHELN, STICHPUNKTE UND BILDER BLENDEN VON UNTEN AUF
 * Auftrag des Auftraggebers, 14.09.2026. Marken: mb-auf-bereit / mb-auf-los
 * ---------------------------------------------------------------------
 * „Die sind immer so animiert dass sie leicht von unten nach oben reinrutschen
 *  und sich dabei einblenden, so schnell ungefähr wie die Überschriften."
 * Und nach der ersten Runde: „wenn kacheln und stichpunkte schon animiert sind
 * (ist schwer zu erkennen), dann fehlt evtl. noch eine leichte verzögerung
 * ähnlich wie bei den einzelnen worten in den überschriften."
 *
 * ABGELESEN, NICHT GEWÄHLT: Die Vorlage (:9003) führt den Effekt unter drei
 * Namen (`bhReveal`, `bitsReveal`, `bcs18Reveal`) mit identischem Inhalt –
 * `opacity 0 → 1`, `translateY(34px) → none`.
 *
 * ── Zweite Fassung: zeitgesteuert statt scrollgesteuert ────────────────
 *
 * Die erste Fassung übernahm auch die Anwendung der Vorlage
 * (`animation-timeline: view()`). Das sieht richtig aus und staffelt NICHT:
 * Bei einer Scroll-Zeitleiste hängt der Fortschritt an der Position des
 * Elements, und drei Kacheln nebeneinander haben dieselbe – sie starten also
 * alle im selben Augenblick. `animation-delay` hilft dort auch nicht, es ist
 * bei einer Scroll-Zeitleiste keine Zeit mehr, sondern ein Teil der Strecke.
 *
 * Deshalb dasselbe Muster wie bei den Wörtern in den Überschriften:
 * `assets/aufblenden.js` gruppiert die Ziele nach ihrem Elternteil, nummeriert
 * sie als `--i` und setzt beim Eintritt EINE Klasse an den Elternteil. Die
 * Verzögerung ist damit reine CSS-Rechnung und unabhängig vom Scrolltempo.
 *
 * OHNE SKRIPT STEHT ALLES DA: Den Anfangszustand trägt `mb-auf-bereit`, und
 * die vergibt erst das Skript (ADR-159).
 * ===================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* Anfangszustand – gesetzt, sobald das Skript die Gruppe vorbereitet hat. */
	.mb-auf-bereit {
		opacity: 0;
		transform: translateY( 34px );
	}

	/*
	 * Der Elternteil bekommt `mb-auf-los`, die Kinder laufen versetzt los.
	 * 70 ms ist der Abstand der Wörter in den Überschriften (80 ms) etwas
	 * gerafft – eine Reihe hat weniger Teile als ein Satz Wörter, und bei
	 * zwölf Karten wäre die letzte sonst fast eine Sekunde zu spät.
	 */
	.mb-auf-los > .mb-auf-bereit {
		animation: mbAufblenden .62s cubic-bezier( .16, 1, .3, 1 ) both;
		animation-delay: calc( var( --i, 0 ) * 70ms );
	}

	@keyframes mbAufblenden {
		from {
			opacity: 0;
			transform: translateY( 34px );
		}
		to {
			opacity: 1;
			transform: none;
		}
	}

	/*
	 * ZWEI EINZELKACHELN, die keine Gruppe bilden und deshalb keine Staffelung
	 * brauchen – der Auftraggeber hat sie ausdrücklich genannt.
	 *
	 * Die Kernaussagenkachel der Erfolgsgeschichten steht gemessen bei y = 878
	 * und damit unter der Falz: Sie darf an der Scroll-Zeitleiste hängen, wie
	 * in der Vorlage (`animation-range: entry entry 40%`).
	 */
	@supports (animation-timeline: view()) {
		.mbcs-kpis {
			animation: mbAufblenden linear both;
			animation-timeline: view();
			animation-range: entry entry 40%;
		}
	}

	/*
	 * Die Titelfotokachel der Insights steht beim Laden SCHON im Bild
	 * (gemessen y = 411 bei 765 px Fensterhöhe) – ihr Eintritt ist vorbei,
	 * bevor jemand scrollt, eine View-Zeitleiste stünde sofort auf 100 % und
	 * der Effekt bliebe aus. Sie läuft deshalb auf Zeit, nach der Überschrift.
	 * Die Vorlage macht im Kopfbereich dieselbe Unterscheidung: `.bcs18-stats`
	 * mit `1s cubic-bezier(.16,1,.3,1) .7s both`.
	 */
	.mbi-band-bild {
		animation: mbAufblenden .8s cubic-bezier( .16, 1, .3, 1 ) .5s both;
	}
}

/* ══════════════════════════════════════════════════════════════════════
 * VERLINKTE CONTAINER
 *
 * Ein Elementor-Container wird klickbar, indem er `link` UND `html_tag: a`
 * trägt – er rendert dann als `<a class="e-con …">`. Damit erbt alles darin
 * `a { color: #c36 }` aus `hello-elementor/assets/css/reset.css`.
 *
 * Gemessen am 01.10.2026 auf der Startseite: 40 solche `<a>`, davon 28 aus
 * den Loop-Karten (die Elementor selbst verlinkt) – alle 40 trugen
 * `rgb(204,51,102)` als geerbte Farbe. Sichtbar war nichts, weil jeder Text
 * darin ein Widget mit eigener Farbe ist; durchschlagen würde es beim ersten
 * Element ohne eigene Farbe, und dann sucht man die Ursache im Widget statt
 * im Linktag (ADR-138, dritter Nachtrag – dort war es die Verzeichnis-H3).
 *
 * `inherit` statt eines festen Werts: Die Kachel soll die Farbe ihrer
 * Umgebung tragen, und die ist auf heller Fläche eine andere als auf dunkler.
 * Die Unterstreichung nimmt Elementor schon heraus; sie steht hier, damit es
 * nicht von einer späteren Theme-Fassung abhängt.
 */
a.e-con {
	color: inherit;
	text-decoration: none;
}

/*
 * Hover der verlinkten Kacheln (Marke `mb-kachel-link`, ADR-161).
 *
 * Eine eigene Klasse und nicht `a.e-con`: Die Startseite trägt 28 weitere verlinkte
 * Container aus den Loop-Karten, und die haben mit `.mbk-karte:hover` längst ihren eigenen
 * Effekt – zwei Hover auf demselben Element wären ein Ruckeln (ADR-101).
 *
 * Die Werte sind am Bestand abgelesen, nicht gewählt:
 *
 *   Ruhe-Schatten `0 8 24 -14 rgba(0,0,0,.22)` ist der entschiedene Kartenschatten
 *   (ADR-155, 32 Vorkommen) – beide Kacheltypen tragen ihn.
 *
 *   Die Anhebung nimmt das Muster der Preiskarte (`-5px`, `.mb-preis-karte:hover`) und nicht
 *   das der Beitragskarte (`-8px`, `.mbk-karte:hover`): Eine Kompetenz-Kachel ist 120 px hoch,
 *   eine Beitragskarte über 400 – dieselbe Strecke wirkt dort ruhig und hier sprunghaft.
 *   Gewählt sind 4 px, eine Spur unter der Preiskarte, weil die Kachel noch flacher ist.
 *
 *   Der Hover-Schatten verdoppelt Versatz und Weichzeichnung des Ruhewerts und hebt die
 *   Deckung leicht an – die Kachel kommt näher, sie wird nicht neu gestaltet.
 *
 * Die Kennzahl-Kacheln tragen zusätzlich einen Rahmen (`1px #DBDEE2`); er geht beim Überfahren
 * auf `#B8DFF4`, denselben Ton, den die Preiskarte dafür schon benutzt.
 *
 * Der Tag im Selektor (`a.`) ist kein Schmuck: Elementor setzt seine eigene Transition als
 * `.e-con:where(:not(.e-div-block-base))`, und `:where()` zählt mit **Spezifität 0** - der
 * Selektor ist damit effektiv `.e-con` (0,1,0) und steht gleichauf mit einer blossen Klasse.
 * Bei Gleichstand gewinnt die spätere Regel, und Elementors CSS lädt nach unserem: Gemessen
 * galten 0,3 s / 0,4 s statt der hier gesetzten Dauer. Mit `a.` davor (0,1,1) gilt die
 * Projektkurve aus ADR-159. Die Hover-Regeln darunter brauchen das nicht - `:hover` bringt
 * seine eigene Stufe mit.
 */
a.mb-kachel-link {
	transition: transform .25s cubic-bezier( .16, 1, .3, 1 ),
	            box-shadow .25s cubic-bezier( .16, 1, .3, 1 ),
	            border-color .25s ease;
}

/*
 * Die angehobene Fassung – der Tastaturfokus bekommt sie IMMER, das Überfahren nur dort, wo
 * es ein Zeigegerät gibt. Ohne die Kapselung hält iOS den `:hover` nach dem Antippen fest,
 * und die Kachel bliebe angehoben zurück (Prüfliste 109).
 *
 * `border-color` steht mit darin und trifft nur die Kennzahl-Kacheln; die Kompetenz-Kacheln
 * haben keinen Rahmen und ignorieren die Zeile.
 */
.mb-kachel-link:focus-visible {
	transform: translateY( -4px );
	box-shadow: 0 16px 44px -18px rgba( 0, 0, 0, .28 );
	border-color: #B8DFF4;
}

@media ( hover: hover ) and ( pointer: fine ) {

	.mb-kachel-link:hover {
		transform: translateY( -4px );
		box-shadow: 0 16px 44px -18px rgba( 0, 0, 0, .28 );
		border-color: #B8DFF4;
	}
}

/*
 * Wer Bewegung abbestellt hat, bekommt den Zustandswechsel ohne die Fahrt dorthin:
 * Der Schatten bleibt als Rückmeldung, das Anheben entfällt.
 */
@media ( prefers-reduced-motion: reduce ) {

	a.mb-kachel-link {
		transition: none;
	}

	.mb-kachel-link:hover,
	.mb-kachel-link:focus-visible {
		transform: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════
 * HOVER DES BRANCHENFOKUS UND DER KUNDENSTIMME (ADR-161, zweiter Nachtrag)
 *
 * Drei Marken statt einer, weil die Umgebung entscheidet und nicht das Bauteil.
 * Gemessen am 01.10.2026:
 *
 *   Fokuskarte  308x250  durchsichtiger Grund, Rand rgba(0,159,227,.15), KEIN Schatten
 *   Chip        195x45   Grund rgba(255,255,255,.08), Rand rgba(255,255,255,.16)
 *   Zitatkarte  719x459  weiss, Kartenschatten 0 8 24 -14 rgba(0,0,0,.22)
 *
 * Die ersten beiden stehen auf DUNKLER Fläche – ein dunkler Schatten als Hover wäre dort
 * unsichtbar. Vorbild ist deshalb `.mb-grund:hover` (ADR-102/107), die Karte des Abschnitts
 * „Warum BITS?" auf derselben Art Fläche: anheben, Rand aufhellen, Schatten mit blauem
 * Schimmer.
 */

/* ------------------------------------------------------------------ */
/* Branchenfokus – Fokuskarte (dunkle Fläche)                          */
/* ------------------------------------------------------------------ */

a.mb-dunkelkachel-link {
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/*
 * KEINE Bewegung - Vorgabe des Auftraggebers vom 01.10.2026: Die Karten sollen sich wie
 * die Chips verhalten und nur aufhellen. Vom Vorbild `.mb-grund:hover` (ADR-102/107) bleiben
 * deshalb Rand und Schimmer, das `translateY` entfaellt.
 *
 * Die Flaeche geht zusaetzlich von durchsichtig auf `rgba(255,255,255,.05)` - bei einer Karte
 * ohne eigenen Grund ist der Rand allein ein zu leiser Hinweis, und dieselbe Stufe traegt
 * schon der Chip (ADR-155-Leiter fuer Weiss-Transparenzen).
 */
a.e-con.mb-dunkelkachel-link:focus-visible {
	background-color: rgba( 255, 255, 255, .05 );
	border-color: rgba( 106, 197, 255, .6 );
	box-shadow: 0 0 34px -6px rgba( 0, 159, 227, .35 );
}

@media ( hover: hover ) and ( pointer: fine ) {

	a.e-con.mb-dunkelkachel-link:hover {
		background-color: rgba( 255, 255, 255, .05 );
		border-color: rgba( 106, 197, 255, .6 );
		box-shadow: 0 0 34px -6px rgba( 0, 159, 227, .35 );
	}
}

/* ------------------------------------------------------------------ */
/* Branchenfokus – Chip (Pille auf dunkler Fläche)                     */
/* ------------------------------------------------------------------ */

a.mb-dunkelchip-link {
	transition: background-color .25s ease, border-color .25s ease;
}

/*
 * Keine Anhebung: Die Pille ist 45 px hoch, und ein Sprung von 4 bis 6 px wäre bei dieser
 * Höhe keine Betonung mehr, sondern ein Zucken. Stattdessen geht Fläche und Rand je eine
 * Stufe höher – auf der Alpha-Leiter, die ADR-155 für Weiß-Transparenzen festgelegt hat
 * (0,08 / 0,16 / 0,28). Der Ruhezustand liegt auf 0,08 und 0,16, der Hover auf 0,16 und 0,28.
 */
/*
 * Die eigene Klasse steht ZWEIMAL im Selektor, und zwar gemessen:
 *
 *   Flaeche  .elementor-2007 .elementor-element.elementor-element-mbb0006
 *            :not( .elementor-motion-effects-element-type-background )        0,4,0
 *   Rand     .elementor-2007 .elementor-element.elementor-element-mbb0006     0,3,0
 *
 * Das `:not()` zaehlt seinen Inhalt mit und hebt die Latte fuer die FLAECHE um eine Klasse
 * ueber die des Randes. Ein erster Anlauf stand auf `a.e-con.mb-dunkelchip-link:hover`
 * (0,3,1) - damit wechselte beim Ueberfahren nur der Rand, und die Flaeche blieb liegen:
 * ein Effekt, den man kaum sieht, und genau so gemeldet („bei Weiteren Branchen klappt er
 * noch nicht"). Mit der verdoppelten Klasse sind es 0,4,1.
 *
 * Verdoppelt wird UNSERE Klasse, nicht `.e-con` - dann steht im Selektor, wessen Gewicht
 * hier erhoeht wird (Muster wie `.mb-chal-raster.mb-chal-raster`, ADR-136).
 *
 * Vierter Fall desselben Musters: `:where()` bei der Kachel-Transition,
 * `.elementor-widget.elementor-widget` beim Abstand der Nachweiszeile, die Element-ID-Regel
 * beim ersten Anlauf hier - und jetzt das `:not()` darin. **Vor jeder Hover-Regel an einem
 * Elementor-Bauteil nachsehen, womit Elementor denselben Wert im Ruhezustand setzt, und zwar
 * je Eigenschaft einzeln** - Flaeche und Rand koennen verschieden schwer wiegen.
 */
a.e-con.mb-dunkelchip-link.mb-dunkelchip-link:focus-visible {
	background-color: rgba( 255, 255, 255, .16 );
	border-color: rgba( 255, 255, 255, .28 );
}

/*
 * `:hover` getrennt und nur dort, wo wirklich ueberfahren wird: iOS haelt den Hover nach dem
 * Antippen fest, und die Pille bliebe aufgehellt zurueck (Pruefliste 109). Der Tastaturfokus
 * oben gilt dagegen ueberall.
 */
@media ( hover: hover ) and ( pointer: fine ) {

	a.e-con.mb-dunkelchip-link.mb-dunkelchip-link:hover {
		background-color: rgba( 255, 255, 255, .16 );
		border-color: rgba( 255, 255, 255, .28 );
	}
}

/* ------------------------------------------------------------------ */
/* Kundenstimme – Zitatkarte (weiße Karte, verlinkt auf ihre Story)     */
/* ------------------------------------------------------------------ */

a.mb-zitat-link {
	transition: transform .25s cubic-bezier( .16, 1, .3, 1 ),
	            box-shadow .25s cubic-bezier( .16, 1, .3, 1 );
}

/*
 * 6 px statt der 4 px der Kompetenz-Kacheln: Die Karte ist 459 px hoch und damit in der
 * Größenklasse der Beitragskarte (`.mbk-karte:hover`, −8 px). Ganz dorthin geht sie nicht,
 * weil sie mit 719 px auch sehr breit ist und im Karussell ohnehin in Bewegung steht.
 *
 * Eine Stimme OHNE verknüpfte Case Study rendert als `<a>` ohne `href` – dann greift
 * `:hover` zwar, aber es gibt nichts zu klicken. `[href]` im Selektor schließt das aus.
 */
a.mb-zitat-link[href]:focus-visible {
	transform: translateY( -6px );
	box-shadow: 0 20px 52px -20px rgba( 0, 0, 0, .3 );
}

@media ( hover: hover ) and ( pointer: fine ) {

	a.mb-zitat-link[href]:hover {
		transform: translateY( -6px );
		box-shadow: 0 20px 52px -20px rgba( 0, 0, 0, .3 );
	}
}

/* ------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {

	a.mb-dunkelkachel-link,
	a.mb-dunkelchip-link,
	a.mb-zitat-link {
		transition: none;
	}

	a.mb-zitat-link[href]:hover,
	a.mb-zitat-link[href]:focus-visible {
		transform: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════
 * NACHWEISE ALS ZEILE  (Baustein `sicherheit-nachweise`, darstellung = zeile)
 *
 * Die schlanke Fassung für einen Kopfbereich: nur die Namen nebeneinander, ohne Text,
 * Zeichen und Drehkarte (ADR-161, dritter Nachtrag). Die Kachel-Fassung `.mb-siegel` bleibt
 * unberührt – sie trägt den Abschnitt „Sicherheit & Compliance" der Lösungsseiten.
 *
 * Die Namen stehen in einer `<ul>`, weil es eine Aufzählung ist: Ein Vorleseprogramm sagt
 * dann „Liste mit drei Einträgen" statt einer Textwurst mit Trennzeichen. Die Trenner sind
 * deshalb `::after` und kein Text – sie werden nicht vorgelesen.
 *
 * Mit Vorsatz liegt eine `div`-Hülle darum (Schild, Text, Liste). Ohne Vorsatz ist die `ul`
 * selbst die Hülle und trägt beide Klassen – dann ändert sich für Stellen nichts, die den
 * Baustein schon vorher einsetzten.
 */
.mb-nachweiszeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-nachweiszeile-namen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-nachweiszeile-eintrag {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.4em;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * Der Trenner steht NACH jedem Eintrag ausser dem letzten – `:not(:last-child)` und nicht
 * `+ li::before`, damit er beim Umbruch am Zeilenende bleibt und nicht am Anfang der neuen.
 */
.mb-nachweiszeile-eintrag:not( :last-child )::after {
	content: '';
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-left: 14px;
	border-radius: 50%;
	background: currentColor;
	opacity: .45;
}

/*
 * Der Vorsatz trägt dieselbe Schrift wie die Namen, aber KEINE Versalien: Er ist ein Satzteil
 * und keine Marke. Ohne den Unterschied läse sich „GEPRÜFT NACH ISO 27001" wie ein einziger
 * langer Siegelname.
 */
.mb-nachweiszeile-vorsatz {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1.4em;
	white-space: nowrap;
	opacity: .8;
}

/*
 * Das Schild erbt `color` wie jedes Zeichen des Satzes (ADR-97). `flex: 0 0 auto` hält es
 * bei einem Umbruch an seiner Größe – ohne das staucht Flexbox es als erstes zusammen,
 * weil ein SVG schrumpfbar ist.
 */
.mb-nachweiszeile-zeichen {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	opacity: .8;
}

.mb-nachweiszeile-zeichen svg {
	display: block;
}

/* ------------------------------------------------------------------ */
/* Im Kopfbereich der Startseite (Marke `mb-heronachweise`)            */
/* ------------------------------------------------------------------ */

/*
 * Die Zeile steht seit dem 06.10.2026 UNTER den Schaltflächen (Vorgabe des Auftraggebers,
 * wörtlich „direkt unter den beiden Buttons im Hero"). Die erste Fassung vom 01.10. stand
 * zwischen Fließtext und Schaltflächen und wurde wieder entfernt.
 *
 * Der Abstand nach oben ist deshalb größer als der nach unten: Die Zeile gehört optisch zu
 * dem, was über ihr steht, und soll nicht an den Schaltflächen kleben.
 *
 * Die Farbe ist `rgba(255,255,255,.72)` statt reinem Weiß: Die Namen sind eine Fußnote zum
 * Versprechen darüber, keine zweite Überschrift. Gemessen auf der dunkelsten Stelle des
 * Kopfbildes (`#0A1119` nach dem Schleier) sind das 11,4:1 – deutlich über den 4,5:1, die
 * 12,5 px als Kleintext brauchen (G-23).
 *
 * VIER Klassen im Selektor: Elementor setzt `.e-con .elementor-widget.elementor-widget
 * { margin-block-end: 0 }` - das sind 0,3,0, und drei Klassen waeren nur GLEICHAUF. Bei
 * Gleichstand gewinnt die spaetere Regel, und Elementors CSS laedt nach unserem; gemessen
 * blieb der untere Abstand dann still 0. Dieselbe Mechanik wie beim `:where()`-Fall der
 * Kachel-Transition (ADR-161, erster Nachtrag) und wie ADR-124.
 */
.e-con .elementor-widget.elementor-widget.mb-heronachweise {
	margin-top: 26px;
	margin-bottom: 0;
}

.mb-heronachweise .mb-nachweiszeile,
.mb-heronachweise .mb-nachweiszeile-eintrag,
.mb-heronachweise .mb-nachweiszeile-vorsatz,
.mb-heronachweise .mb-nachweiszeile-zeichen {
	color: rgba( 255, 255, 255, .72 );
}

/*
 * Unter 768 px bricht die Zeile ohnehin um; dort darf sie enger stehen, damit sie nicht drei
 * Zeilen braucht. Der Kopfbereich ist mobil der knappste Platz der ganzen Website (ADR-115).
 *
 * Die ENGE tragen Luecke, Laufweite und Trennerabstand - nicht die Schriftgroesse: 12,5 px ist
 * die Stufe der Auszeichnungszeilen (ADR-142) und gilt auf jedem Bildschirm. Bis zum 06.10.2026
 * stand hier zusaetzlich `font-size: 12px`; nachdem der Schreibtischwert von 13 auf 12,5 ging,
 * waere das ein halber Pixel Unterschied gewesen - ein Wert ausserhalb der Leiter ohne Wirkung.
 */
@media ( max-width: 767px ) {

	.e-con .elementor-widget.elementor-widget.mb-heronachweise {
		margin-top: 20px;
	}

	.mb-heronachweise .mb-nachweiszeile,
	.mb-heronachweise .mb-nachweiszeile-namen {
		gap: 4px 10px;
	}

	.mb-heronachweise .mb-nachweiszeile-eintrag {
		letter-spacing: .04em;
	}

	.mb-heronachweise .mb-nachweiszeile-eintrag:not( :last-child )::after {
		margin-left: 10px;
	}
}