/* Hero-Bereich der Hub-Seiten (Training/Beratung) — bewusst hier komplett
   definiert statt nur teilweise über style.css (nur roter Rahmen) zu
   laufen. glossar.css hat dieselbe Regel für die Glossar-A-Z-Seite, wird
   aber auf den Hub-Seiten nicht geladen — deshalb hier eigenständig,
   damit der Hero nicht von einer fremden Datei abhängt. */
.mb-az-hero { max-width: 1320px; margin: 0 auto; padding: 56px 24px 10px; }
.mb-az-hero h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; margin: 14px 0; }
.mb-az-hero p { color: #3c4a54; max-width: 1000px; }

/* Eyebrow-Badge — self-contained (nicht von wissensartikel.css abhängig,
   da die Hub-Seiten kein Wissensartikel-Template sind). */
.mb-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: "IBM Plex Mono", monospace; font-size: 0.78rem;
	padding: 6px 12px; border-radius: 20px; font-weight: 500;
}
.mb-eyebrow.is-blau { color: var(--wp--preset--color--blau); background: rgba(0, 76, 153, 0.1); }
.mb-eyebrow.is-gruen { color: var(--wp--preset--color--gruen); background: rgba(22, 127, 39, 0.1); }

/* Kartenraster für Beratungs-Hub */
.mb-leistung-hub-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 20px 24px 70px;
}
.mb-leistung-hub-grid .mb-leistung-karte { max-width: none; margin: 0; }
.mb-leistung-hub-grid.is-kompakt { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ===== Kompakte Hub-Kachel ===== */
.mb-leistung-hub-kompakt {
	display: flex; flex-direction: column; gap: 14px;
	background: var(--wp--preset--color--weiss); border: 1px solid #e1e4e7; border-radius: 12px;
	padding: 20px 22px; text-decoration: none; color: inherit;
	transition: transform 0.18s, box-shadow 0.18s;
}
.mb-leistung-hub-kompakt:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(14, 27, 38, 0.1); }
.mb-lhk-kopf h3 { font-size: 1.05rem; margin: 8px 0 6px; line-height: 1.3; color: var(--wp--preset--color--blau); }
.mb-lhk-teaser { font-size: 0.85rem; color: #5b6670; margin: 0; line-height: 1.4; }

.mb-lhk-fakten { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-lhk-fakt {
	font-size: 0.74rem; font-family: "IBM Plex Mono", monospace; padding: 4px 10px; border-radius: 20px;
	background: var(--wp--preset--color--grau-hell, #F1F1F1); color: var(--wp--preset--color--grau-dunkel, #595959);
}
.mb-lhk-fakt.is-termin { background: var(--wp--preset--color--blau-hell, #EEF4FA); color: var(--wp--preset--color--blau); }
.mb-lhk-fakt.is-preis { background: var(--wp--preset--color--gruen-hell, #EDF6EE); color: var(--wp--preset--color--gruen); font-weight: 700; }
.mb-lhk-fakt.is-inhouse { background: var(--wp--preset--color--gruen-hell, #EDF6EE); color: var(--wp--preset--color--gruen); }
.mb-lhk-fakt.is-mehr { background: none; color: var(--mb-grau-text, #707070); padding-left: 0; }

.mb-lhk-cta {
	margin-top: auto; padding-top: 8px; font-size: 0.85rem; font-weight: 700; color: var(--wp--preset--color--blau);
}
.mb-leistung-hub-kompakt:hover .mb-lhk-cta { color: var(--wp--preset--color--blau-dunkel, #00325E); }

/* Trainings-Hub: Gruppierung Akademie/Inhouse */
.mb-training-gruppe { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.mb-training-gruppe-titel {
	font-size: 1.3rem; margin: 44px 0 8px;
}
.mb-training-gruppe-sub {
	font-size: 0.9rem; color: var(--mb-grau-text, #707070); margin: 0 0 22px; max-width: 65ch;
}
.mb-training-gruppe .mb-leistung-hub-grid { padding: 0 0 20px; }
.mb-leistung-termin {
	display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 0.75rem;
	margin-top: 8px; padding: 3px 10px; border-radius: 20px;
}
.mb-leistung-termin.is-terminiert { color: var(--wp--preset--color--blau); background: var(--wp--preset--color--blau-hell, #EEF4FA); }
.mb-leistung-termin.is-ohne-termin { color: var(--wp--preset--color--grau-dunkel); background: var(--wp--preset--color--grau-hell, #F1F1F1); }
.mb-leistung-termin.is-inhouse { color: var(--wp--preset--color--gruen); background: var(--wp--preset--color--gruen-hell, #EDF6EE); }

/* Filter-Umschalter — bewusst dasselbe Chip-Muster wie die Rollen-Tabs */
/* ===== Filter-Panel (Alternative A) — beide Reihen in einem gemeinsamen,
   klar abgegrenzten Rahmen mit Trichter-Symbol, damit sofort erkennbar
   ist: das hier ist der Filter-Bereich, keine lose Button-Sammlung. */
.mb-training-filter-panel {
	max-width: 1320px; margin: 0 auto 30px; padding: 20px 24px;
	background: var(--wp--preset--color--weiss);
	border: 1px solid #dbe4ee;
	border-radius: 14px;
}

/* ===== Muskel-Check — spielerischer Zusatz-Einstieg oberhalb des nüchternen
   Filter-Panels. Bewusst optisch klar abgesetzt (dunkler Kasten), damit
   klar wird: das hier ist "stöbern/entdecken", nicht "gezielt filtern". */
.mb-muskel-check {
	max-width: 1320px; margin: 0 auto 24px; padding: 26px 24px;
	background: var(--wp--preset--color--blau-dunkel, #00325E); border-radius: 16px; text-align: center;
}
.mb-muskel-check h3 { color: #fff !important; font-size: 1.05rem; margin: 0 0 18px; font-family: Georgia, serif; font-weight: 700; }
.mb-muskel-reihe { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.mb-muskel-btn {
	border-radius: 999px; background: rgba(255,255,255,0.12);
	border: 1.5px solid rgba(255,255,255,0.3); color: #fff; font-size: 0.78rem; font-weight: 600;
	display: flex; align-items: center; justify-content: center; text-align: center;
	padding: 14px 20px; min-height: 52px;
	cursor: pointer; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
	font-family: "IBM Plex Sans", sans-serif;
	box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.mb-muskel-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.22); box-shadow: 0 10px 18px rgba(0,0,0,0.2); }
.mb-muskel-btn.is-active { background: var(--wp--preset--color--rot); border-color: var(--wp--preset--color--rot); }
.mb-muskel-aktiv-anzeige {
	max-width: 640px; margin: 16px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px;
	color: rgba(255,255,255,0.85); font-size: 0.85rem; flex-wrap: wrap;
}
.mb-muskel-aktiv-anzeige[hidden] { display: none; }
.mb-muskel-aktiv-name { font-weight: 700; color: #fff; }
.mb-muskel-zuruecksetzen {
	background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.4); color: #fff;
	padding: 5px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
	transition: background .15s;
}
.mb-muskel-zuruecksetzen:hover { background: var(--wp--preset--color--rot); border-color: var(--wp--preset--color--rot); }
.mb-muskel-fachkompetenz-hinweis {
	max-width: 640px; margin: 18px auto 0; padding: 14px 18px; border-radius: 10px;
	background: rgba(255,255,255,0.1); color: #fff; font-size: 0.85rem; line-height: 1.5;
}
.mb-muskel-mehr-link { display: inline-block; margin-top: 16px; color: rgba(255,255,255,0.75); font-size: 0.8rem; text-decoration: underline; }
.mb-muskel-mehr-link:hover { color: #fff; }

/* Muskel-Tags auf der Trainingskarte — ersetzen die bisherigen Rollen-Tags */
.mb-lhk-muskeln { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mb-lhk-muskel-tag {
	font-size: 0.68rem; font-family: "IBM Plex Mono", monospace; padding: 3px 9px; border-radius: 20px;
	background: var(--wp--preset--color--gruen-hell, #EDF6EE); color: var(--wp--preset--color--gruen);
	cursor: pointer; transition: background .15s, color .15s;
}
.mb-lhk-muskel-tag:hover { background: var(--wp--preset--color--gruen); color: #fff; }
.mb-tfp-head {
	display: flex; align-items: center; gap: 8px;
	font-weight: 700; font-size: 0.9rem; color: var(--wp--preset--color--blau-dunkel, #00325E);
	margin-bottom: 16px;
}
.mb-tfp-muskel-hinweis {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	background: var(--wp--preset--color--gruen-hell, #EDF6EE); border: 1px solid var(--wp--preset--color--gruen, #167F27);
	border-radius: 10px; padding: 10px 14px; margin-bottom: 16px;
	font-size: 0.85rem; color: var(--wp--preset--color--ink);
}
.mb-tfp-muskel-hinweis[hidden] { display: none; }
.mb-tfp-muskel-name { font-weight: 700; color: var(--wp--preset--color--gruen); }
.mb-tfp-muskel-zuruecksetzen {
	background: #fff; border: 1px solid var(--wp--preset--color--gruen); color: var(--wp--preset--color--gruen);
	padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
	transition: background .15s, color .15s;
}
.mb-tfp-muskel-zuruecksetzen:hover { background: var(--wp--preset--color--gruen); color: #fff; }
.mb-training-filter {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-bottom: 12px;
}
.mb-training-filter:last-child { margin-bottom: 0; }
.mb-training-filter-chip {
	border: 1px solid #d5dde6; background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--ink);
	padding: 9px 16px; border-radius: 20px; font-size: 0.84rem; font-weight: 600;
	cursor: pointer; transition: all 0.15s; font-family: "IBM Plex Sans", sans-serif;
}
.mb-training-filter-chip.is-active { background: var(--wp--preset--color--blau); border-color: var(--wp--preset--color--blau); color: #fff; }
.mb-training-gruppe.is-hidden { display: none; }
/* Gilt bewusst fuer JEDE Kartenvariante, nicht nur fuer `hub-kompakt`.
   Bis 1.26.0 stand hier `.mb-leistung-hub-kompakt.is-hidden` — die Zeilen
   im Inhouse-Abschnitt (`hub-liste`, seit 1.25.0) waren damit nie erfasst.
   Das Filter-JS setzte die Klasse korrekt, nur versteckte sie niemand: Der
   Rollen- und Muskelfilter wirkte sichtbar auf den oberen Abschnitt und
   schien den unteren zu ignorieren. Eine dritte Variante faellt jetzt nicht
   mehr in dieselbe Falle. */
.mb-leistung.is-hidden { display: none; }

.mb-training-filter-rollen .mb-training-filter-chip {
	font-size: 0.78rem;
	padding: 7px 14px;
}
.mb-training-filter-label {
	font-size: 0.82rem;
	color: var(--wp--preset--color--grau-dunkel, #595959);
	font-weight: 600;
	min-width: 70px;
}

@media (max-width: 640px) {
	.mb-training-filter-panel { padding: 16px 18px; margin-bottom: 24px; }
	.mb-training-filter-label { min-width: auto; width: 100%; margin-bottom: 2px; }
}

/* Rollen-Tags auf der Trainings-Karte */
.mb-lhk-rollen {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.mb-lhk-rolle-tag {
	font-size: 0.68rem;
	font-family: "IBM Plex Mono", monospace;
	padding: 3px 8px;
	border-radius: 20px;
	background: var(--wp--preset--color--grau-hell, #F1F1F1);
	color: var(--wp--preset--color--grau-dunkel, #595959);
}

/* Beratungs-Hub: Dreiklang-Rahmen + Klarstellungs-Hinweis */
.mb-beratung-rahmen {
	max-width: 1320px; margin: 0 auto 20px; padding: 0 24px;
}
.mb-beratung-hinweis {
	background: var(--wp--preset--color--blau-hell, #EEF4FA);
	border-radius: 10px; padding: 16px 20px; font-size: 0.9rem;
	color: var(--wp--preset--color--ink); max-width: 1000px; margin-top: 20px;
}
.mb-beratung-hinweis strong { color: var(--wp--preset--color--blau-dunkel, #00325E); }

/* Dreiklang-Grafik innerhalb dieses Rahmens linksbündig statt zentriert —
   passend zum Intro-Text und der Hinweis-Box direkt darüber/darunter, die
   beide schon linksbündig sind. Ohne dies entsteht ein "Zickzack"-Eindruck:
   Text links, Grafik mittig, Text wieder links (siehe Chat-Verlauf,
   Screenshot mit rot markierten Stellen). Andere Verwendungsstellen der
   Grafik (z. B. eigenständig) bleiben zentriert, diese Regel gilt nur hier. */
.mb-beratung-rahmen .mb-uml-teaser { text-align: left; }
.mb-beratung-rahmen .mb-uml-chain { margin: 0; justify-content: flex-start; }

/* Zweispaltiges Layout: mobile-first gestapelt, ab 900px nebeneinander.
   Termine-Box ist NICHT sticky (siehe Merkzettel) — dafür gibt es den
   separaten Floating-Button weiter unten. */
.mb-leistung-layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 24px 60px;
}
.mb-leistung-main { flex: 1; min-width: 0; }
.mb-termine-sidebar { width: 100%; }

@media (min-width: 900px) {
	.mb-leistung-layout.has-termine { flex-direction: row; align-items: flex-start; }
	.mb-termine-sidebar { width: 320px; flex-shrink: 0; }
}

.mb-termine-section {
	background: var(--wp--preset--color--blau-hell, #EEF4FA);
	border-radius: 16px;
	padding: 22px 24px;
}
.mb-termine-section h2 { font-size: 1.15rem; margin: 0 0 16px; }
.mb-termine-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mb-termin {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: #fff; border: 1px solid #E1E4E7; border-radius: 10px; padding: 14px 16px;
}
.mb-termin-datum { font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 0.9rem; color: var(--wp--preset--color--ink, #0E1B26); display: block; }
.mb-termin-info { display: flex; flex-direction: column; }
.mb-termin-preis-zeile { display: block; margin-top: 3px; }
.mb-termin-preis-normal { font-size: 0.78rem; color: var(--mb-grau-text, #707070); font-weight: 400; }
.mb-termin-preis-alt { font-size: 0.78rem; color: var(--mb-grau-text, #707070); text-decoration: line-through; margin-right: 6px; font-weight: 400; }
.mb-termin-preis-neu { font-size: 0.88rem; font-weight: 700; color: var(--wp--preset--color--blau); }
.mb-termin-preis-mwst { display: block; font-size: 0.72rem; font-weight: 400; color: var(--mb-grau-text, #707070); margin-top: 1px; }
.mb-termin-format { display: block; font-size: 0.75rem; color: var(--wp--preset--color--grau-dunkel); margin-top: 2px; }
.mb-termin-fb-hinweis { display: block; font-size: 0.7rem; color: var(--wp--preset--color--blau); margin-top: 1px; }
.mb-termin-buchen {
	background: var(--wp--preset--color--blau); color: #fff !important; font-size: 0.82rem; font-weight: 700;
	padding: 7px 14px; border-radius: 8px; text-decoration: none; white-space: nowrap;
	transition: background 0.15s;
}
.mb-termin-buchen:hover,
.mb-termin-buchen:focus,
.mb-termin-buchen:active {
	background: var(--wp--preset--color--rot) !important; color: #fff !important;
}
.mb-termin-badge {
	display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600;
	color: var(--wp--preset--color--grau-dunkel);
}
.mb-termin-ausgebucht { opacity: 0.85; }
.mb-termin-abgelaufen { opacity: 0.55; }
.mb-termin-badge-abgelaufen { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }

@media (max-width: 480px) {
	.mb-termin { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Floating-Button "Termine ↑" — exakt dasselbe Muster wie .mb-back-to-top
   (siehe style.css), aber mit Textlabel statt Icon-only, deshalb oberhalb
   des Back-to-Top-Buttons positioniert statt daneben — vermeidet Kollision
   auf schmalen Bildschirmen. Bewusst Blau/Blau-Dunkel-Hover (Navigations-
   Hilfsmittel), nicht Rot-Hover (das bleibt Buchungs-/Conversion-Buttons
   vorbehalten, z. B. .mb-termin-buchen). */
.mb-termine-floating-btn {
	position: fixed;
	right: calc(var(--edge) + 24px);
	bottom: 82px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--rot);
	color: #fff !important;
	text-decoration: none;
	padding: 12px 20px;
	border-radius: 30px;
	font-weight: 700;
	font-size: 0.85rem;
	box-shadow: 0 8px 20px rgba(240, 0, 0, 0.28);
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s, background 0.15s;
	z-index: 49;
}
.mb-termine-floating-btn.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.mb-termine-floating-btn:hover {
	background: #cc0000; /* etwas dunkleres Rot fürs Hover — kein eigener
	                        Farbtoken für "Rot dunkel" im Designsystem */
}
/* Pfeilrichtung: oben auf Desktop (Termine liegen seitlich/oben im
   Zweispalten-Layout), unten auf Mobile (Termine liegen gestapelt danach). */
.mb-termine-pfeil-unten { display: inline; }
.mb-termine-pfeil-oben { display: none; }
@media (min-width: 900px) {
	.mb-termine-pfeil-unten { display: none; }
	.mb-termine-pfeil-oben { display: inline; }
}
@media (max-width: 600px) {
	.mb-termine-floating-btn { right: 16px; bottom: 74px; padding: 10px 16px; font-size: 0.8rem; }
}

/* ------------------------------------------------------------------
   Schlanke Trainingsliste — Abschnitt „Alle Themen — inhouse"
   Theme 1.25.0.

   Seit die Buchbarkeit abgeleitet statt gepflegt wird, steht dasselbe
   Training meist in beiden Abschnitten der ServiceCampus-Seite. Damit das
   nicht wie ein Fehler wirkt, ist dieser Abschnitt bewusst leichter: eine
   Zeile je Training statt einer Karte.
   ------------------------------------------------------------------ */
.mb-leistung-hub-liste-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 2px 32px;
	padding: 0 0 20px;
}

.mb-leistung-hub-liste {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 13px 4px;
	border-bottom: 1px solid #e1e4e7;
	text-decoration: none;
	color: inherit;
	transition: background-color .15s ease, padding-left .15s ease;
}

.mb-leistung-hub-liste:hover,
.mb-leistung-hub-liste:focus-visible {
	background: rgba(0, 76, 153, 0.04);
	padding-left: 10px;
}

.mb-lhl-art {
	flex: 0 0 auto;
	font-size: 0.68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau, #969696);
	min-width: 62px;
}

.mb-lhl-titel {
	flex: 1 1 auto;
	font-weight: 600;
	line-height: 1.35;
	color: var(--blue-deep, #003366);
}

.mb-lhl-hinweis {
	flex: 0 0 auto;
	font-size: 0.72rem;
	color: var(--wp--preset--color--grau, #969696);
	white-space: nowrap;
}

.mb-lhl-pfeil {
	flex: 0 0 auto;
	color: var(--blue, #004c99);
	opacity: 0;
	transition: opacity .15s ease;
}

.mb-leistung-hub-liste:hover .mb-lhl-pfeil,
.mb-leistung-hub-liste:focus-visible .mb-lhl-pfeil { opacity: 1; }

/* Auf dem Telefon bricht der Hinweis unter den Titel. */
@media (max-width: 560px) {
	.mb-leistung-hub-liste { flex-wrap: wrap; gap: 4px 10px; }
	.mb-lhl-hinweis { flex-basis: 100%; }
	.mb-lhl-pfeil { display: none; }
}

/* ------------------------------------------------------------------
   THEMENKACHEL — Abschnitt „Alle Themen" auf /training/   (ab 1.26.1)

   Loest `hub-liste` ab. Begruendung steht in inc/render-leistungskarte.php
   beim Kartenstil `hub-kachel`.

   FUGENRASTER OHNE RESTZELLE
   Die Fugen entstehen NICHT ueber `gap` mit eingefaerbtem Container: Bleibt
   die letzte Zeile unvollstaendig, scheint dort sonst ein grauer Block durch,
   wo keine Kachel steht. Stattdessen traegt jede Kachel ihre eigene Linie
   rechts und unten, der Rahmen oben und links kommt vom Container. Das Raster
   endet damit genau dort, wo der Inhalt endet — dasselbe Muster wie bei den
   Branchenkacheln.
   ------------------------------------------------------------------ */
.mb-leistung-hub-kachel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	background: #fff;
	border-top: 1px solid #e3e8ee;
	border-left: 1px solid #e3e8ee;
	margin-bottom: 18px;
}

.mb-leistung-hub-kachel {
	/* Steuert die Icon-Groesse. Der Renderer uebergibt diese Variable an
	   marillabax_icon(), damit die Groesse im CSS bleibt und nicht als feste
	   Zahl im Inline-Stil landet — ein Inline-Stil waere sonst nur noch mit
	   `!important` zu uebersteuern. */
	--mb-wz-groesse: 110px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 168px;
	padding: 20px 22px 18px;
	border-right: 1px solid #e3e8ee;
	border-bottom: 1px solid #e3e8ee;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: background .18s ease;
}
.mb-leistung-hub-kachel:hover,
.mb-leistung-hub-kachel:focus-visible {
	background: var(--wp--preset--color--blau-hell, #EEF4FA);
}

/* Das Wasserzeichen.
   Deckkraft 4 % / 10 % — bewusst niedriger als die 6 % / 12 % der
   Bento-Kacheln auf der Startseite: Hier stehen Titel, zwei Zeilen Auszug und
   die Muskel-Tags ueber dem Icon, dort deutlich weniger Text.

   Die Rueckstellungen unten sind NICHT kosmetisch. `.mb-icon` und geerbte
   Regeln koennen Breite, Hintergrund, Radius, Aussenabstand und display
   setzen; Spezifitaet wirkt je Eigenschaft, nicht je Regel. Wer hier eine
   Eigenschaft weglaesst, bekommt denselben Fehler wie beim Bento-Wasserzeichen
   in 1.25.0: einen schmalen blauen Streifen statt eines grossen blassen Icons. */
.mb-leistung-hub-kachel .mb-lhka-wz {
	position: absolute;
	right: 8px;
	bottom: 6px;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--wp--preset--color--blau, #004C99);
	opacity: 0.04;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	max-width: calc(100% - 16px);
	max-height: calc(100% - 16px);
	line-height: 0;
}
.mb-leistung-hub-kachel .mb-lhka-wz .mb-icon {
	display: block;
	margin: 0;
	background: none;
	border-radius: 0;
}
.mb-leistung-hub-kachel:hover .mb-lhka-wz,
.mb-leistung-hub-kachel:focus-visible .mb-lhka-wz {
	opacity: 0.10;
	transform: translate(-3px, -3px);
}

/* Alles Textliche liegt ueber dem Wasserzeichen. */
.mb-lhka-art,
.mb-lhka-titel,
.mb-lhka-teaser,
.mb-lhka-tags { position: relative; }

.mb-lhka-art {
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.64rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau, #969696);
}

.mb-lhka-titel {
	font-family: "Sora", sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--wp--preset--color--blau-dunkel, #00325E);
}

.mb-lhka-teaser {
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--wp--preset--color--grau-dunkel, #595959);
	flex: 1 1 auto;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mb-lhka-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

/* Auf dem Telefon steht eine Kachel je Zeile; das Icon wird kleiner, damit es
   unter dem laengeren Textumbruch nicht hervorsticht. */
@media (max-width: 560px) {
	.mb-leistung-hub-kachel {
		--mb-wz-groesse: 86px;
		min-height: 0;
		padding: 18px 18px 16px;
	}
}

.mb-training-gruppe-fuss {
	max-width: 1320px;
	margin: 4px auto 0;
	font-size: 0.85rem;
	color: var(--wp--preset--color--grau, #969696);
}

/* Der erzeugte Buchbarkeits-Abschnitt auf der Einzelseite (1.25.0). */
.mb-buchbarkeit { margin-top: 40px; }
.mb-buchbarkeit h2 { margin-top: 0; }
.mb-buchbarkeit-cta { margin-bottom: 0; font-weight: 600; }

/* ===== Beratungshub: Anlass-Check und Arbeitsfragen-Filter (1.26.0) =====
   Die Kacheln sind Szenario-Kacheln im Sinne des Design-Systems (Abschnitt 4):
   Icon großformatig und blass rechts unten, Deckkraft 6 % / 12 % wie bei den
   Branchenkacheln. Sie sind hier zusätzlich klickbar und tragen einen
   Aktivzustand. */

.mb-anlass-check { max-width: 1320px; margin: 44px auto 0; padding: 0 24px; }
.mb-anlass-kopf h2 { font-size: 1.35rem; margin: 0; }
.mb-anlass-kopf p {
	margin: 8px 0 20px; color: #5b6670; font-size: 0.93rem; max-width: 840px;
}

/* Fugenraster: die Kacheln stehen ohne Abstand aneinander, getrennt nur durch
   eine Linie — derselbe Griff wie beim Wasserzeichen-Kartenstil.
   Die Linien zeichnen die Kacheln selbst (Rand rechts und unten) statt einer
   durchscheinenden Gitterfarbe. Das ist der Unterschied, sobald die Anzahl
   nicht durch die Spaltenzahl teilbar ist: Bei sieben Kacheln in vier Spalten
   bliebe sonst in der zweiten Reihe ein grauer Rest stehen, der aussieht wie
   eine vergessene Kachel. Die negativen Ränder schieben die äußeren Linien
   unter den Rahmen des Rasters. */
.mb-anlass-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 0; background: #fff;
	border: 1px solid var(--wp--preset--color--grau-hell, #E1E4E7);
	border-radius: 12px; overflow: hidden;
}
.mb-anlass {
	position: relative; overflow: hidden; background: #fff;
	border: 0; border-right: 1px solid var(--wp--preset--color--grau-hell, #E1E4E7);
	border-bottom: 1px solid var(--wp--preset--color--grau-hell, #E1E4E7);
	margin: 0 -1px -1px 0;
	text-align: left; cursor: pointer; font-family: inherit; color: inherit;
	padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 7px;
	min-height: 186px; transition: background .16s;
}
.mb-anlass:hover { background: var(--wp--preset--color--paper, #F3F6FB); }
.mb-anlass:focus-visible { outline: 2px solid var(--wp--preset--color--blau); outline-offset: -3px; }
.mb-anlass.is-an { background: var(--wp--preset--color--blau-hell, #EEF4FA); }

.mb-anlass-wz {
	position: absolute; right: 10px; bottom: 10px; height: 118px; width: auto;
	display: block; color: var(--wp--preset--color--rot); opacity: 0.06;
	pointer-events: none; transition: opacity .2s, transform .2s;
	max-height: calc(100% - 44px); max-width: calc(100% - 20px);
}
/* !important nötig: marillabax_icon() setzt inline width/height auf dem <svg>. */
.mb-anlass-wz svg { height: 100% !important; width: auto !important; display: block; }
.mb-anlass:hover .mb-anlass-wz { opacity: 0.12; transform: translate(-3px, -3px); }
.mb-anlass.is-an .mb-anlass-wz { opacity: 0.13; }

.mb-anlass-kurz {
	position: relative; z-index: 1; font-family: 'IBM Plex Mono', monospace;
	font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--wp--preset--color--grau);
}
.mb-anlass.is-an .mb-anlass-kurz { color: var(--wp--preset--color--blau); }
.mb-anlass-satz {
	position: relative; z-index: 1; font-family: 'Sora', sans-serif;
	font-size: 1rem; line-height: 1.35; font-weight: 600;
	hyphens: auto; overflow-wrap: break-word;
}
.mb-anlass-n {
	position: relative; z-index: 1; margin-top: auto;
	font-family: 'IBM Plex Mono', monospace; font-size: 0.74rem;
	color: var(--wp--preset--color--grau);
}
.mb-anlass.is-an .mb-anlass-n { color: var(--wp--preset--color--blau-dunkel, #00325E); }

/* Der Ausgang für alle, die sich in keiner Frage wiederfinden. Führt bewusst
   nicht zu einer gefilterten Liste, sondern zum Audit. */
.mb-anlass-weissnicht {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	margin-top: 14px; padding: 15px 22px;
	border: 1px dashed #cfd6de; border-radius: 12px;
}
.mb-anlass-weissnicht svg { flex: 0 0 auto; color: var(--wp--preset--color--blau); }
.mb-anlass-weissnicht p { margin: 0; font-size: 0.92rem; color: #3c4a54; flex: 1 1 320px; }
.mb-anlass-weissnicht a {
	font-size: 0.86rem; font-weight: 700; color: #fff;
	background: var(--wp--preset--color--blau); padding: 9px 17px;
	border-radius: 22px; white-space: nowrap; text-decoration: none;
}
.mb-anlass-weissnicht a:hover { background: var(--wp--preset--color--blau-dunkel, #00325E); }

.mb-beratung-filter-panel { margin-top: 30px; }
.mb-chip-n { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; opacity: 0.75; margin-left: 5px; }
.mb-beratung-zaehler {
	max-width: 1320px; margin: 0 auto 8px; padding: 0 24px; min-height: 1.3em;
	font-family: 'IBM Plex Mono', monospace; font-size: 0.84rem; color: #5b6670;
}
.mb-beratung-leer { max-width: 1320px; margin: 0 auto; padding: 0 24px 10px; color: #5b6670; font-size: 0.92rem; }

/* Phase und Buchbarkeit als Angabe auf der Karte — grau, weil sie seit
   1.26.0 einordnen statt zu gliedern. */
.mb-lhk-fakt.is-phase { background: var(--wp--preset--color--grau-hell, #F1F1F1); color: var(--wp--preset--color--grau-dunkel, #595959); }
.mb-lhk-fakt.is-immer { background: var(--wp--preset--color--gruen-hell, #EDF6EE); color: var(--wp--preset--color--gruen); }

.mb-lhk-anlaesse { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mb-lhk-anlass-tag {
	font-size: 0.72rem; padding: 3px 9px; border-radius: 11px;
	background: var(--wp--preset--color--blau-hell, #EEF4FA);
	color: var(--wp--preset--color--blau); transition: box-shadow .15s;
}
.mb-lhk-anlass-tag.is-treffer { box-shadow: 0 0 0 2px rgba(0, 76, 153, 0.35); }

@media (max-width: 600px) {
	.mb-anlass { min-height: 0; padding: 18px 18px 16px; }
	.mb-anlass-wz { height: 92px; max-height: calc(100% - 30px); }
	.mb-anlass-weissnicht a { flex: 1 1 100%; text-align: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   Band „Analysieren" auf /beratung/ — Theme 1.29.0

   GAP-Analyse und Service Audit sind echte Seiten, keine `leistung`-
   Einträge, und tauchen deshalb in der Liste darunter nicht auf. Das Band
   schließt die Lücke genau an der Stelle, an der sie beim Lesen auffällt:
   direkt unter der Dreiklang-Grafik, die „Analysieren" nennt.

   Optisch bewusst ANDERS als die Kacheln der Liste — zwei große Karten mit
   Wasserzeichen statt vieler kompakter. Es sind keine weiteren Einträge
   derselben Art, sondern der Weg in eine andere Rubrik. Sähen sie gleich
   aus, würde die Liste darunter unvollständig wirken.
   ───────────────────────────────────────────────────────────────────── */
.mb-beratung-analysieren {
	max-width: 1320px;
	margin: 0 auto 34px;
	padding: 0 24px;
}
.mb-ba-kopf { max-width: 760px; margin-bottom: 16px; }
.mb-ba-kopf h2 {
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
	font-weight: 800;
	margin: 8px 0 8px;
	color: var(--wp--preset--color--blau-dunkel, #00325E);
}
.mb-ba-kopf p { margin: 0; color: #3c4a54; font-size: 0.95rem; }

.mb-ba-karten {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}
@media (min-width: 720px) {
	.mb-ba-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mb-ba-karte {
	/* Die Icongröße läuft über eine Variable, nicht über eine feste Zahl:
	   marillabax_icon() schreibt sie als INLINE-Stil, und der schlägt jede
	   Regel aus dem Stylesheet. Derselbe Fehler wie beim Kachel-Wasserzeichen
	   in 1.25.1 — dort war das Icon auf dem Telefon nicht kleiner zu bekommen. */
	--mb-ba-wz-groesse: 104px;
	position: relative;
	overflow: hidden;
	display: block;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linie, #e1e4e7);
	border-left: 4px solid var(--wp--preset--color--blau, #004C99);
	border-radius: 0 12px 12px 0;
	padding: 22px 24px 20px;
	text-decoration: none;
	color: inherit;
	transition: transform .18s ease, box-shadow .18s ease;
}
/* Das Dach trägt die kräftigere Kante — es ist der Oberbegriff, nicht die
   wichtigere Leistung. */
.mb-ba-karte.is-dach { border-left-color: var(--wp--preset--color--blau-dunkel, #00325E); }

.mb-ba-karte:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,50,94,.10); }

/* Wasserzeichen wie im Kachelraster: 4 % Deckkraft, beim Überfahren 10 %.
   Festgelegt am 30.09.2026, siehe Theme 1.25.1. */
.mb-ba-wz {
	position: absolute; right: 10px; bottom: 6px;
	display: block; width: auto; height: auto;
	color: var(--wp--preset--color--blau, #004C99);
	opacity: .04;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
}
.mb-ba-karte:hover .mb-ba-wz { opacity: .10; transform: translate(-3px, -3px); }

.mb-ba-rolle {
	position: relative;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau, #969696);
	display: block;
	margin-bottom: 6px;
}
.mb-ba-karte h3 {
	position: relative;
	font-size: 1.12rem;
	margin: 0 0 8px;
	color: var(--wp--preset--color--blau-dunkel, #00325E);
}
.mb-ba-karte p {
	position: relative;
	margin: 0 0 12px;
	font-size: 0.91rem;
	color: #3c4a54;
}
.mb-ba-mehr {
	position: relative;
	font-size: 0.87rem;
	font-weight: 700;
	color: var(--wp--preset--color--blau, #004C99);
}
.mb-ba-mehr::after { content: " →"; }

@media (max-width: 600px) {
	.mb-ba-karte { --mb-ba-wz-groesse: 80px; }
}