.mb-kernaussagen-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 22px;
}
.mb-kernaussage {
	background: var(--wp--preset--color--weiss);
	border: 1px solid #e1e4e7;
	border-radius: 14px;
	padding: 30px 26px;
	transition: transform 0.18s, box-shadow 0.18s;
}
.mb-kernaussage:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14, 27, 38, 0.1); }
.mb-kernaussage .mbk-icon {
	width: 48px; height: 48px; border-radius: 10px;
	background: rgba(0, 76, 153, 0.08); color: var(--wp--preset--color--blau);
	display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
/* Fein aufgeloeste Illustrator-Icons (Kernaussagen, Kontakt, Servicewissen, Aufgabe) brauchen
   mehr Platz als die 24px-Linienicons, sonst verschwimmen die Details im Standard-Badge. */
.mb-kernaussage .mbk-icon.mbk-icon-fill {
	width: 56px; height: 56px;
}
.mb-kernaussage h3 { font-size: 1.1rem; margin: 0 0 10px; }
.mb-kernaussage p { font-size: 0.92rem; color: #5b6670; margin: 0; }

/* Kartenstil: Ticket-Stub — nur oben abgerundet, gestrichelte Kante unten
   statt Perforations-Kreisen (die müssten sonst exakt die Hintergrundfarbe
   der jeweiligen Sektion treffen; die gestrichelte Kante funktioniert robust
   auf jedem Hintergrund). Case-Nummer statt Icon oben. */
.mb-ka-stil-ticket .mb-kernaussage {
	border-radius: 10px 10px 0 0;
	border-bottom: 2px dashed #c7cdd1;
	padding-top: 24px;
}
.mbk-case {
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: #9aa5ac;
	margin: 0 0 14px;
}

/* Kartenstil: Icon-Wasserzeichen — großes, dezentes Icon im Kartenhintergrund
   statt kleinem Badge. Nutzt dieselbe Icon-Auswahl wie der Standard-Stil. */
.mb-ka-stil-wasserzeichen .mb-kernaussage { position: relative; overflow: hidden; }
.mbk-wasserzeichen {
	position: absolute;
	right: -14px;
	bottom: -14px;
	opacity: 0.07;
	pointer-events: none;
}
.mbk-wz-blau { color: var(--wp--preset--color--blau); }
.mbk-wz-rot { color: var(--wp--preset--color--rot); }
.mbk-wz-gruen { color: var(--wp--preset--color--gruen); }

.mbk-link {
	display: inline-block;
	margin-top: 12px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--wp--preset--color--blau) !important;
	text-decoration: none;
}
.mbk-link:hover {
	color: var(--wp--preset--color--blau-dunkel, #00325E) !important;
}


/* =====================================================================
   1.17.0 — DREI NEUE KARTENSTILE
   =====================================================================

   Anlass: Der Stil „standard" (weiße Karte, Rahmen, rundes Icon-Plättchen,
   Anheben beim Überfahren) ist Zeichen für Zeichen das Muster, das 2026
   auf jeder zweiten Mittelstandsseite steht. Die drei neuen Stile lösen
   das auf, jeder für einen anderen Anlass:

     randmarke  — der neue Normalfall: Vorgehen, Wegweiser, Argumente
     liste      — Aufzählungen mit Substanz und Link (Beratungsbausteine)
     kante      — Ketten und Reihenfolgen, Fläche endet in gezogener Linie

   „standard" und „ticket" bleiben unangetastet, damit die bereits
   eingespielten Seiten nichts merken.

   GEMESSEN (Chrome, 60 Kacheln, 60 Bilder):
     Rahmenbreite + Innenabstand animiert →  17,0 ms Layout
     dasselbe über transform              →   0,0 ms Layout
   Deshalb wächst die Randmarke über transform: scaleX() und nicht über
   border-left-width. Sieht gleich aus, kostet auf dem Telefon nichts.
   ===================================================================== */

/* --- Akzentfarbe: auf dem Raster gesetzt, je Kachel überschreibbar --- */
.mb-ka-akzent-blau  { --mbk-akzent: var(--wp--preset--color--blau, #004C99); }
.mb-ka-akzent-gruen { --mbk-akzent: var(--wp--preset--color--gruen, #167F27); }
.mb-ka-akzent-gelb  { --mbk-akzent: var(--wp--preset--color--gelb, #C9971C); }
.mb-ka-akzent-grau  { --mbk-akzent: var(--wp--preset--color--grau, #969696); }
.mb-ka-akzent-rot   { --mbk-akzent: var(--wp--preset--color--rot, #F00000); }

/* Die Füllfarbe der Kacheln. Auf weißen Themenblöcken bekommt sie den
   Papierton, sonst verschwände eine weiße Karte auf weißem Grund. */
.mb-kernaussagen-grid { --mbk-flaeche: var(--wp--preset--color--weiss, #fff); }
.mb-themenblock.is-weiss .mb-kernaussagen-grid,
.mb-ka-auf-weiss { --mbk-flaeche: var(--wp--preset--color--paper, #F3F6FB); }

.mb-kernaussagen-grid .mbk-nummer {
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.72rem; letter-spacing: 0.08em;
	color: var(--mbk-akzent, var(--wp--preset--color--blau));
	margin: 0 0 10px;
}
.mb-kernaussagen-grid .mbk-kopf {
	display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.mb-kernaussagen-grid .mbk-kopf h3 { margin: 0; }
.mb-kernaussagen-grid .mbk-zeilen-icon { color: var(--mbk-akzent, var(--wp--preset--color--blau)); flex: 0 0 auto; display: flex; }

/* ------------------------------------------------------- RANDMARKE --- */
.mb-ka-stil-randmarke .mb-kernaussage {
	position: relative;
	background: var(--mbk-flaeche);
	border: 1px solid #e1e4e7;
	border-left: none;
	border-radius: 0 12px 12px 0;
	padding: 20px 22px 20px 25px;
	transition: box-shadow 0.16s ease;
}
/* Die Marke ist ein eigenes Element, damit sie sich strecken lässt,
   ohne dass der Browser die Kachel neu berechnet. */
.mb-ka-stil-randmarke .mbk-marke {
	position: absolute; left: 0; top: -1px; bottom: -1px; width: 8px;
	background: var(--mbk-akzent, var(--wp--preset--color--blau));
	transform: scaleX(0.375); transform-origin: left center;
	transition: transform 0.16s ease;
	/* Kein will-change: Der Browser legte sonst für JEDE Kachel dauerhaft
	   eine eigene Ebene an. Bei acht Kacheln unnötig, bei einer langen
	   Seite teuer — und die Animation läuft auch ohne flüssig. */
}
.mb-ka-stil-randmarke .mb-kernaussage:hover .mbk-marke,
.mb-ka-stil-randmarke .mb-kernaussage:focus-within .mbk-marke { transform: scaleX(1); }
.mb-ka-stil-randmarke .mb-kernaussage:hover { box-shadow: 0 6px 18px rgba(14, 27, 38, 0.06); }

@media (prefers-reduced-motion: reduce) {
	.mb-ka-stil-randmarke .mbk-marke,
	.mb-ka-stil-randmarke .mb-kernaussage { transition: none; }
}

/* ----------------------------------------------------------- LISTE --- */
.mb-ka-stil-liste {
	display: block;
	border-top: 1px solid #d7dee8;
}
.mb-ka-stil-liste .mb-kernaussage {
	display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start;
	padding: 20px 2px; border-bottom: 1px solid #d7dee8;
	background: none; border-radius: 0;
}
.mb-ka-stil-liste .mbk-zeilen-icon { justify-content: center; padding-top: 2px; }
.mb-ka-stil-liste h3 { font-size: 1.02rem; margin: 0 0 4px; }
.mb-ka-stil-liste p { font-size: 0.92rem; color: #5b6670; margin: 0; }
.mb-ka-stil-liste .mbk-link { margin-top: 8px; }

/* ----------------------------------------------------------- KANTE --- */
/* Die Fläche endet IN der Linie: Das SVG trägt dieselbe Füllfarbe, seine
   Unterkante ist die Welle. Deshalb hat dieser Stil bewusst keinen Rahmen
   an den Seiten — ein Rechteck mit welliger Unterkante sähe aus wie ein
   Kasten, dem etwas abgebrochen ist. */
.mb-ka-stil-kante .mbk-kante-wrap { display: flex; flex-direction: column; }
.mb-ka-stil-kante .mb-kernaussage {
	background: var(--mbk-flaeche);
	border: none;
	border-radius: 12px 12px 0 0;
	padding: 22px 22px 16px;
	flex: 1 1 auto;
}
.mbk-kante {
	display: block; width: 100%; height: 14px;
	margin-top: -1px; /* gegen den Haarspalt beim Runden auf Bildschirmpixel */
}
.mbk-kante-flaeche { fill: var(--mbk-flaeche); }
.mbk-kante-linie {
	fill: none; stroke: var(--mbk-akzent, var(--wp--preset--color--blau));
	stroke-width: 2.1; stroke-linecap: round;
}

/* ---------------------------------------- FÜHRENDE ERSTE KACHEL --- */
.mb-ka-fuehrt > *:first-child .mb-kernaussage,
.mb-ka-fuehrt > .mb-kernaussage:first-child {
	background: var(--mbk-akzent, var(--wp--preset--color--blau));
	border-color: transparent;
}
/* 1.33.0 — !important ergänzt. Die führende Kachel hat einen gefüllten
   blauen Grund; ohne !important schlug die globale Überschriftenregel aus
   style.css (h1–h4 blau !important) diese Angabe, und die Überschrift stand
   Blau auf Blau. Zweite Fundstelle desselben Musters wie beim Abschluss-CTA,
   nur hier nie gemeldet — vermutlich, weil die Kachel selten führend ist. */
.mb-ka-fuehrt > *:first-child .mb-kernaussage h3,
.mb-ka-fuehrt > .mb-kernaussage:first-child h3 { color: #fff !important; }
.mb-ka-fuehrt > *:first-child .mb-kernaussage p,
.mb-ka-fuehrt > .mb-kernaussage:first-child p { color: rgba(255, 255, 255, 0.85); }
.mb-ka-fuehrt > *:first-child .mb-kernaussage .mbk-nummer,
.mb-ka-fuehrt > .mb-kernaussage:first-child .mbk-nummer,
.mb-ka-fuehrt > *:first-child .mb-kernaussage .mbk-zeilen-icon,
.mb-ka-fuehrt > .mb-kernaussage:first-child .mbk-zeilen-icon { color: rgba(255, 255, 255, 0.75); }
.mb-ka-fuehrt > *:first-child .mb-kernaussage .mbk-link,
.mb-ka-fuehrt > .mb-kernaussage:first-child .mbk-link { color: #fff !important; }
/* Die Marke wäre auf gefülltem Grund unsichtbar. */
.mb-ka-fuehrt > .mb-kernaussage:first-child .mbk-marke { display: none; }
.mb-ka-fuehrt > *:first-child .mbk-kante-flaeche { fill: var(--mbk-akzent, var(--wp--preset--color--blau)); }
.mb-ka-fuehrt > *:first-child .mbk-kante-linie { stroke: rgba(255, 255, 255, 0.55); }

/* Über zwei Spalten erst dort, wo das Raster überhaupt zwei hat. */
@media (min-width: 760px) {
	.mb-ka-fuehrt > *:first-child { grid-column: span 2; }
}

/* ------------------------------------------------- ZUSATZZEILE (1.50.0) ---
   Eine abgesetzte zweite Zeile mit fettem Etikett, z. B.
   „Bruchstelle: …". Gebaut für die Stationskarten auf der Branchenseite
   Software- und Systemhäuser, aber bewusst ohne Bezug auf diesen einen
   Begriff — das Etikett steht im Feld.

   Die gestrichelte Linie trennt, ohne eine zweite Karte zu behaupten:
   Eine durchgezogene Linie hätte im Kartenraster wie eine Unterkante
   gewirkt. Dieselbe Strichelung nutzt bereits der Ticket-Stil. */
.mb-kernaussagen-grid .mbk-zusatz {
	margin: 10px 0 0;
	padding-top: 9px;
	border-top: 1px dashed #e1e4e7;
	font-size: 0.9rem;
	line-height: 1.55;
}
.mb-kernaussagen-grid .mbk-zusatz b {
	font-weight: 700;
	color: var(--wp--preset--color--blau-dunkel, #00325e);
}
/* Im Listen-Stil gibt es keine Kartenfläche — dort wäre eine zweite
   Trennlinie direkt über der Zeilentrennlinie zu viel. */
.mb-ka-stil-liste .mbk-zusatz {
	border-top: none;
	padding-top: 0;
	margin-top: 7px;
}