/* ===== Variante: kompakt (Pill-Kette) ===== */
.mb-uml-teaser { text-align: center; }
.mb-uml-kicker {
	font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
	color: var(--wp--preset--color--grau-dunkel); font-weight: 600; margin: 0 0 18px;
}
.mb-uml-chain { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; }
.mb-uml-pill {
	background: var(--wp--preset--color--grau-dunkel); color: #fff; border-radius: 60px; padding: 20px 34px; min-width: 220px;
	box-shadow: 0 10px 26px rgba(89, 89, 89, 0.28); transition: transform 0.18s, box-shadow 0.18s;
}
.mb-uml-pill:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(89, 89, 89, 0.34); }
.mb-uml-pill-title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.01em; }
.mb-uml-pill-sub { font-size: 0.85rem; opacity: 0.9; margin-top: 4px; font-weight: 500; }
.mb-uml-pill-arrow { color: var(--wp--preset--color--rot); font-size: 2rem; font-weight: 800; line-height: 1; }

/* Hervorhebung für die Analysieren-Entwickeln-Befähigen-Grafik (siehe
   inc/render-phasen-grafik.php) — Standard ist grau (wie .mb-uml-pill
   ohnehin schon), diese Klasse färbt gezielt einzelne Phasen blau ein. */
.mb-uml-pill.is-blau {
	background: var(--wp--preset--color--blau);
	box-shadow: 0 10px 26px rgba(0, 76, 153, 0.32);
}
.mb-uml-pill.is-blau:hover { box-shadow: 0 16px 34px rgba(0, 76, 153, 0.4); }
.mb-uml-pill.is-gruen {
	background: var(--wp--preset--color--gruen);
	box-shadow: 0 10px 26px rgba(22, 127, 39, 0.32);
}
.mb-uml-pill.is-gruen:hover { box-shadow: 0 16px 34px rgba(22, 127, 39, 0.4); }
.mb-uml-pill.is-rot {
	background: var(--wp--preset--color--rot);
	box-shadow: 0 10px 26px rgba(240, 0, 0, 0.32);
}
.mb-uml-pill.is-rot:hover { box-shadow: 0 16px 34px rgba(240, 0, 0, 0.4); }
/* ===========================================================
   VIER ODER FÜNF PHASEN — Theme 1.24.2

   Die Kette war für drei Pillen gebaut: max-width 1000px plus
   flex-wrap. Bei vier Pillen passt die Reihe nicht mehr hinein und
   bricht 3+1 um — mit einem Pfeil, der am Ende der ersten Zeile ins
   Leere zeigt. Das Feld erlaubt aber seit 1.16.0 bis zu fünf Phasen.

   Lösung: Bei vier und fünf teilen sich die Pillen den vorhandenen
   Platz gleichmäßig (flex-basis 0 mit gemeinsamer Mindestbreite) und
   die Reihe bricht gar nicht mehr um (nowrap). Wird es zu eng, geht
   die Kette in einem Zug in die Spaltenansicht — nie in einen
   halben Umbruch.

   Nebengewinn: Die Pillen sind dadurch alle gleich breit. Bei drei
   Phasen waren sie es nie, weil min-width nur die Untergrenze setzt
   und lange Titel die Pille aufziehen.
   =========================================================== */
.mb-uml-chain.mb-uml-kette-lang {
	flex-wrap: nowrap;
	max-width: 100%;
	gap: 12px;
}
.mb-uml-kette-lang .mb-uml-pill {
	flex: 1 1 150px;
	min-width: 150px;
	padding: 16px 20px;
}
.mb-uml-kette-lang .mb-uml-pill-title { font-size: 1.15rem; }
.mb-uml-kette-lang .mb-uml-pill-sub   { font-size: 0.8rem; }
.mb-uml-kette-lang .mb-uml-pill-arrow { font-size: 1.5rem; flex: 0 0 auto; }

/* Unter 980px reicht der Platz für vier nebeneinander nicht mehr.
   Dann untereinander — mit gedrehten Pfeilen, wie in der
   Mobilansicht, damit die Abfolge lesbar bleibt. */
@media (max-width: 980px) {
	.mb-uml-chain.mb-uml-kette-lang {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.mb-uml-kette-lang .mb-uml-pill {
		width: 100%;
		max-width: 340px;
		flex: 0 0 auto;
	}
	.mb-uml-kette-lang .mb-uml-pill-arrow { transform: rotate(90deg); font-size: 1.8rem; }
}

@media (max-width: 800px) {
	.mb-uml-chain { flex-direction: column; gap: 14px; }
	.mb-uml-pill-arrow { transform: rotate(90deg); }
	.mb-uml-pill { width: 100%; max-width: 320px; }
}
.mb-uml-more {
	display: inline-block; margin-top: 26px; font-size: 0.9rem; font-weight: 600; color: var(--wp--preset--color--grau-dunkel);
	text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--grau);
}

/* ===== Variante: ausführlich (Schritt-Grafik) ===== */
.mb-uml-section { padding: 8px 0; }
.mb-uml-head { max-width: 920px; margin-bottom: 32px; }
.mb-uml-eyebrow {
	display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; text-transform: uppercase;
	letter-spacing: 0.06em; color: #5b6670; background: rgba(150, 150, 150, 0.15); padding: 6px 14px; border-radius: 20px;
	margin-bottom: 14px;
}
.mb-uml-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 14px; }
.mb-uml-head p { color: #3c4a54; max-width: 920px; margin: 0; }

.mb-uml-warning {
	background: rgba(240, 0, 0, 0.07); border: 1px solid rgba(240, 0, 0, 0.28); border-radius: 12px;
	padding: 20px 24px; display: flex; gap: 14px; align-items: flex-start; max-width: 920px; margin: 28px 0 32px;
}
.mb-uml-warning-icon {
	width: 32px; height: 32px; min-width: 32px; border-radius: 9px; background: var(--wp--preset--color--rot); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.mb-uml-warning p { margin: 0; font-size: 0.92rem; color: #2a3944; }

.mb-uml-chain-full { display: flex; align-items: stretch; gap: 44px; max-width: 920px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 800px) { .mb-uml-chain-full { flex-direction: column; gap: 40px; } }
.mb-uml-step {
	flex: 1; background: #fff; border: 1px solid #E1E4E7;
	border-radius: 12px; padding: 26px 22px; position: relative;
	box-shadow: 0 4px 14px rgba(14, 27, 38, 0.05);
}
.mb-uml-step-num { font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; color: var(--wp--preset--color--blau); margin-bottom: 10px; }
.mb-uml-step h3 { font-size: 1.15rem; margin-bottom: 10px; color: var(--wp--preset--color--ink) !important; }
.mb-uml-step p { font-size: 0.88rem; color: #5b6670; margin: 0; }
/* Pfeil zwischen den Schritten: reines CSS-Pseudo-Element (Maske), kein
   eigener DOM-Knoten und kein Textinhalt -> wird von Screenreadern nicht
   vorgelesen, die <ol> selbst vermittelt die Reihenfolge semantisch. */
.mb-uml-step.has-arrow::after {
	content: "";
	position: absolute;
	top: 50%; right: -34px;
	width: 20px; height: 20px;
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--rot);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
@media (max-width: 800px) {
	.mb-uml-step.has-arrow::after {
		top: auto; right: auto; bottom: -30px; left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}
}
.mb-uml-step.is-final { background: rgba(240, 0, 0, 0.06); border-color: rgba(240, 0, 0, 0.35); }
.mb-uml-step.is-final .mb-uml-step-num { color: var(--wp--preset--color--rot); }
.mb-uml-step.is-rot { background: rgba(240, 0, 0, 0.06); border-color: rgba(240, 0, 0, 0.35); }
.mb-uml-step.is-rot .mb-uml-step-num { color: var(--wp--preset--color--rot); }
.mb-uml-step.is-blau { background: rgba(0, 76, 153, 0.06); border-color: rgba(0, 76, 153, 0.3); }
.mb-uml-step.is-blau .mb-uml-step-num { color: var(--wp--preset--color--blau); }
.mb-uml-step.is-gruen { background: rgba(22, 127, 39, 0.06); border-color: rgba(22, 127, 39, 0.3); }
.mb-uml-step.is-gruen .mb-uml-step-num { color: var(--wp--preset--color--gruen); }