/* Block 44 – Praxisbeispiel Kostenvergleich */

.block-44-praxisbeispiel-kostenvergleich {
	--b44-accent: var(--blue1);
	--b44-ink: var(--black);
	--b44-panel: var(--grey9);
	--b44-line: var(--grey6);
	--b44-muted: var(--grey1);
	/* Eigener Grünton fuer den Einsparungsbetrag statt --green1 (#0A320A):
	   das Theme-Gruen ist so dunkel, dass es auf dem hellen Panel als Schwarz
	   gelesen wird und die Zahl nicht hervorstechen wuerde. Dieser Ton hat
	   gegen --grey9 rund 5,3:1 Kontrast und bleibt in allen Layout-Varianten
	   gleich, damit die Einsparung immer dieselbe Bedeutungsfarbe hat. */
	--b44-save: #197A33;
}

body.standardLayout .block-44-praxisbeispiel-kostenvergleich {
	--b44-accent: var(--blue1);
}

body.greyLayout .block-44-praxisbeispiel-kostenvergleich {
	--b44-accent: var(--grey8);
}

body.blueLayout .block-44-praxisbeispiel-kostenvergleich {
	--b44-accent: var(--blue1);
}

body.blue2Layout .block-44-praxisbeispiel-kostenvergleich {
	--b44-accent: var(--blue2);
}

body.blackLayout .block-44-praxisbeispiel-kostenvergleich {
	--b44-accent: var(--grey8);
}

body.greenLayout .block-44-praxisbeispiel-kostenvergleich {
	--b44-accent: var(--green1);
}

/* --- Layout ------------------------------------------------------------- */

.block-44-praxisbeispiel-kostenvergleich .b44-layout {
	align-items: start;
	display: grid;
	gap: 4rem;
}

.block-44-praxisbeispiel-kostenvergleich .b44-topline {
	margin-bottom: .8rem;
}

.block-44-praxisbeispiel-kostenvergleich .b44-heading {
	margin-bottom: 3rem;
}

/* --- Herausforderung / Lösung ------------------------------------------- */

.block-44-praxisbeispiel-kostenvergleich .b44-fact + .b44-fact {
	border-top: 1px solid var(--b44-line);
	margin-top: 2.5rem;
	padding-top: 2.5rem;
}

/* Groesse und Schreibweise bewusst explizit: als h3 waere es nach Theme-Regel
   2,8rem in Grossbuchstaben. Fuer eine Zwischenzeile wie "Herausforderung" ist
   das zu laut, die Ebene h3 ist unter der h2 des Blocks aber die richtige. */
.block-44-praxisbeispiel-kostenvergleich .b44-fact-title {
	font-size: 2.2rem;
	margin-bottom: .8rem;
	text-transform: none;
}

.block-44-praxisbeispiel-kostenvergleich .b44-fact-text p:last-child {
	margin-bottom: 0;
}

/* --- Vorteilsliste ------------------------------------------------------ */

.block-44-praxisbeispiel-kostenvergleich .b44-benefits {
	display: grid;
	gap: 1.4rem 3rem;
	list-style: none;
	margin: 3.5rem 0 0;
	padding: 0;
}

.block-44-praxisbeispiel-kostenvergleich .b44-benefit {
	align-items: flex-start;
	display: flex;
	font-size: 1.6rem;
	gap: 1.2rem;
	line-height: 1.35;
}

.block-44-praxisbeispiel-kostenvergleich .b44-benefit-icon {
	color: var(--b44-accent);
	flex: 0 0 auto;
	height: 1.9rem;
	margin-top: .1rem;
	width: 1.9rem;
}

.block-44-praxisbeispiel-kostenvergleich .b44-cta {
	margin-top: 4rem;
}

/* --- Diagramm-Panel ----------------------------------------------------- */

.block-44-praxisbeispiel-kostenvergleich .b44-chart-panel {
	background: var(--b44-panel);
	border: 1px solid var(--b44-line);
	margin: 0;
	padding: 2.5rem 2rem 2rem;
}

.block-44-praxisbeispiel-kostenvergleich .b44-chart-head {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.block-44-praxisbeispiel-kostenvergleich .b44-chart-headline {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: .8rem 2rem;
	justify-content: space-between;
}

.block-44-praxisbeispiel-kostenvergleich .b44-chart-title {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .05em;
	margin: 0;
	text-transform: uppercase;
}

/* Einsparung als HTML-Auslese im Kopf. Nur unter 768px sichtbar, wo die
   liegenden Balken das Säulendiagramm ersetzen und es keine Delta-Klammer gibt;
   ab 768px stehen die Zahlen im SVG an der Klammer. */
.block-44-praxisbeispiel-kostenvergleich .b44-delta-readout {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1rem;
	margin: 0;
}

.block-44-praxisbeispiel-kostenvergleich .b44-readout-percent {
	color: var(--b44-accent);
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.block-44-praxisbeispiel-kostenvergleich .b44-readout-detail {
	color: var(--b44-muted);
	font-size: 1.5rem;
	line-height: 1.3;
}

.block-44-praxisbeispiel-kostenvergleich .b44-readout-detail strong {
	color: var(--b44-save);
	font-weight: 700;
	white-space: nowrap;
}

.block-44-praxisbeispiel-kostenvergleich .b44-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem 2.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.block-44-praxisbeispiel-kostenvergleich .b44-legend-item {
	align-items: center;
	display: flex;
	font-size: 1.5rem;
	gap: .8rem;
}

.block-44-praxisbeispiel-kostenvergleich .b44-swatch {
	flex: 0 0 auto;
	height: 1.2rem;
	width: 1.2rem;
}

.block-44-praxisbeispiel-kostenvergleich .b44-swatch--accent {
	background: var(--b44-accent);
}

.block-44-praxisbeispiel-kostenvergleich .b44-swatch--ink {
	background: var(--b44-ink);
}

.block-44-praxisbeispiel-kostenvergleich .b44-footnote {
	color: var(--b44-muted);
	font-size: 1.3rem;
	line-height: 1.4;
	margin: 1.8rem 0 0;
}

.block-44-praxisbeispiel-kostenvergleich .b44-empty {
	color: var(--b44-muted);
	margin: 0;
}

/* --- SVG ---------------------------------------------------------------- */

/* Alle Schriftgroessen im SVG haengen an --b44-fs. Das SVG skaliert mit der
   Panelbreite, feste viewBox-Werte schrumpfen deshalb mit - am schlimmsten im
   zweispaltigen Bereich ab 992px, wo das Panel nur rund 394px breit ist (dort
   waren die Achsenlabels effektiv nur 9,9px gross). Der Faktor haelt die
   effektiv gerenderte Groesse ueberall bei rund 14px.
   Das SVG kommt nur ab 768px zum Einsatz, wo die Container-Breite gestuft ist -
   deshalb genuegt ein fester Wert je Stufe. Unter 768px ist der Container fluid
   und jeder feste viewBox-Wert damit zwangslaeufig falsch (gemessen 9,9px bei
   320px gegen 27px bei 760px); dort uebernehmen die HTML-Balken. */
.block-44-praxisbeispiel-kostenvergleich .b44-chart {
	--b44-fs: 1px;
	display: block;
	height: auto;
	margin-top: 2rem;
	overflow: visible;
	width: 100%;
}

.block-44-praxisbeispiel-kostenvergleich .b44-segment--accent {
	fill: var(--b44-accent);
}

.block-44-praxisbeispiel-kostenvergleich .b44-segment--ink {
	fill: var(--b44-ink);
}

.block-44-praxisbeispiel-kostenvergleich .b44-axis {
	fill: none;
	stroke: var(--b44-ink);
	stroke-width: 2;
}

.block-44-praxisbeispiel-kostenvergleich .b44-chart text {
	font-family: inherit;
	text-anchor: middle;
}

.block-44-praxisbeispiel-kostenvergleich .b44-value {
	fill: var(--white);
	font-size: calc(17 * var(--b44-fs));
	font-weight: 400;
}

.block-44-praxisbeispiel-kostenvergleich .b44-total {
	fill: var(--b44-ink);
	font-size: calc(22 * var(--b44-fs));
	font-weight: 700;
}

.block-44-praxisbeispiel-kostenvergleich .b44-axis-label {
	fill: var(--b44-muted);
	font-size: calc(16 * var(--b44-fs));
	font-weight: 700;
}

.block-44-praxisbeispiel-kostenvergleich .b44-axis-sublabel {
	fill: var(--b44-muted);
	font-size: calc(15 * var(--b44-fs));
}

.block-44-praxisbeispiel-kostenvergleich .b44-delta-guide {
	fill: none;
	stroke: var(--b44-muted);
	stroke-dasharray: 4 4;
	stroke-width: 1;
}

.block-44-praxisbeispiel-kostenvergleich .b44-delta-arrow {
	color: var(--b44-accent);
}

.block-44-praxisbeispiel-kostenvergleich .b44-delta-arrow path {
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 1.6;
}

/* Betragsblock steht ueber der zweiten Saeule und ist auf deren Mitte
   zentriert.
   Der Elementtyp muss im Selektor stehen: ".b44-chart text" weiter oben ist
   sonst spezifischer (zwei Klassen plus Typ gegen zwei Klassen) und setzt die
   Ausrichtung zurueck auf middle. */
.block-44-praxisbeispiel-kostenvergleich .b44-chart text.b44-delta-text {
	text-anchor: middle;
}

/* Der Prozentwert beginnt rechts vom Pfeil und laeuft nach rechts weg. */
.block-44-praxisbeispiel-kostenvergleich .b44-chart text.b44-delta-text--callout {
	text-anchor: start;
}

.block-44-praxisbeispiel-kostenvergleich .b44-delta-percent {
	fill: var(--b44-accent);
	font-size: calc(27 * var(--b44-fs));
	font-weight: 700;
}

.block-44-praxisbeispiel-kostenvergleich .b44-delta-absolute {
	fill: var(--b44-save);
	font-size: calc(22 * var(--b44-fs));
	font-weight: 700;
}

.block-44-praxisbeispiel-kostenvergleich .b44-delta-caption {
	fill: var(--b44-muted);
	font-size: calc(15 * var(--b44-fs));
}

.block-44-praxisbeispiel-kostenvergleich .b44-bars-mobile {
	display: grid;
	gap: 2.6rem;
	margin-top: 2.4rem;
}

.block-44-praxisbeispiel-kostenvergleich .b44-mbar-head {
	align-items: baseline;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin: 0 0 .8rem;
}

.block-44-praxisbeispiel-kostenvergleich .b44-mbar-label {
	font-size: 1.6rem;
	font-weight: 700;
}

.block-44-praxisbeispiel-kostenvergleich .b44-mbar-sublabel {
	color: var(--b44-muted);
	display: block;
	font-size: 1.5rem;
	font-weight: 300;
}

.block-44-praxisbeispiel-kostenvergleich .b44-mbar-total {
	font-size: 2rem;
	font-weight: 700;
	white-space: nowrap;
}

.block-44-praxisbeispiel-kostenvergleich .b44-mbar-track {
	background: var(--white);
	border: 1px solid var(--b44-line);
	padding: .3rem;
}

.block-44-praxisbeispiel-kostenvergleich .b44-mbar-stack {
	display: flex;
	height: 2.8rem;
}

.block-44-praxisbeispiel-kostenvergleich .b44-mbar-fill {
	display: block;
	flex: 0 0 auto;
}

.block-44-praxisbeispiel-kostenvergleich .b44-mbar-fill--accent {
	background: var(--b44-accent);
}

.block-44-praxisbeispiel-kostenvergleich .b44-mbar-fill--ink {
	background: var(--b44-ink);
}

.block-44-praxisbeispiel-kostenvergleich .b44-mbar-values {
	color: var(--b44-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 1.5rem;
	gap: .4rem 1.8rem;
	margin: .8rem 0 0;
}

.block-44-praxisbeispiel-kostenvergleich .b44-mbar-value {
	align-items: center;
	display: flex;
	gap: .6rem;
}

/* --- Animation ----------------------------------------------------------
   Der Endzustand ist der Default. Erst .is-ready (von JS gesetzt) versetzt in
   den Startzustand – ohne JS und bei reduzierter Bewegung bleibt damit alles
   sichtbar, statt auf scaleY(0) bzw. opacity 0 hängen zu bleiben.
   ---------------------------------------------------------------------- */

.block-44-praxisbeispiel-kostenvergleich.is-ready .b44-bar-group {
	transform: scaleY(0);
	transform-box: fill-box;
	transform-origin: bottom;
	transition: transform .9s cubic-bezier(.19, 1, .22, 1);
}

.block-44-praxisbeispiel-kostenvergleich.is-ready.is-visible .b44-bar-group {
	transform: scaleY(1);
}

.block-44-praxisbeispiel-kostenvergleich.is-ready .b44-value,
.block-44-praxisbeispiel-kostenvergleich.is-ready .b44-total {
	opacity: 0;
	transition: opacity .5s ease .45s;
}

.block-44-praxisbeispiel-kostenvergleich.is-ready.is-visible .b44-value,
.block-44-praxisbeispiel-kostenvergleich.is-ready.is-visible .b44-total {
	opacity: 1;
}

.block-44-praxisbeispiel-kostenvergleich.is-ready .b44-delta-guide {
	stroke-dashoffset: 100;
	transition: stroke-dashoffset .7s ease .6s;
}

.block-44-praxisbeispiel-kostenvergleich.is-ready.is-visible .b44-delta-guide {
	stroke-dashoffset: 0;
}

.block-44-praxisbeispiel-kostenvergleich.is-ready .b44-delta-arrow {
	opacity: 0;
	transition: opacity .45s ease 1s;
}

.block-44-praxisbeispiel-kostenvergleich.is-ready.is-visible .b44-delta-arrow {
	opacity: 1;
}

.block-44-praxisbeispiel-kostenvergleich.is-ready .b44-delta-text,
.block-44-praxisbeispiel-kostenvergleich.is-ready .b44-delta-readout {
	opacity: 0;
	transform: translateY(.8rem);
	transition: opacity .5s ease 1.15s, transform .5s cubic-bezier(.19, 1, .22, 1) 1.15s;
}

.block-44-praxisbeispiel-kostenvergleich.is-ready.is-visible .b44-delta-text,
.block-44-praxisbeispiel-kostenvergleich.is-ready.is-visible .b44-delta-readout {
	opacity: 1;
	transform: translateY(0);
}

/* Mobilbalken wachsen von links, gleiche Staffelung wie die Säulen. Die
   Prozentbreite bleibt als width stehen, skaliert wird nur der Stapel. */
.block-44-praxisbeispiel-kostenvergleich.is-ready .b44-mbar-stack {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .9s cubic-bezier(.19, 1, .22, 1);
}

.block-44-praxisbeispiel-kostenvergleich.is-ready.is-visible .b44-mbar-stack {
	transform: scaleX(1);
}

.block-44-praxisbeispiel-kostenvergleich.is-ready .b44-mbar-total,
.block-44-praxisbeispiel-kostenvergleich.is-ready .b44-mbar-values {
	opacity: 0;
	transition: opacity .5s ease .45s;
}

.block-44-praxisbeispiel-kostenvergleich.is-ready.is-visible .b44-mbar-total,
.block-44-praxisbeispiel-kostenvergleich.is-ready.is-visible .b44-mbar-values {
	opacity: 1;
}

/* --- Responsive --------------------------------------------------------- */

/* Das SVG skaliert mit der Panelbreite mit. Auf Mobile bleiben die
   Schriftgrößen im viewBox-Koordinatensystem dadurch zu klein, deshalb hier
   hochgezogen; die weißen Segmentwerte fallen weg statt zu überlappen. */
@media (max-width: 767px) {
	.block-44-praxisbeispiel-kostenvergleich .b44-chart {
		display: none;
	}
}

@media (min-width: 768px) {
	.block-44-praxisbeispiel-kostenvergleich .b44-bars-mobile,
	.block-44-praxisbeispiel-kostenvergleich .b44-delta-readout {
		display: none;
	}
}

@media (min-width: 768px) {
	.block-44-praxisbeispiel-kostenvergleich .b44-benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.block-44-praxisbeispiel-kostenvergleich .b44-chart-head {
		align-items: baseline;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.block-44-praxisbeispiel-kostenvergleich .b44-chart-panel {
		padding: 3rem 3rem 2.5rem;
	}
}

@media (min-width: 992px) {
	/* Zweispaltig: Panel ist hier am schmalsten (~394px bei 992px Viewport). */
	.block-44-praxisbeispiel-kostenvergleich .b44-chart {
		--b44-fs: 1.42px;
	}

	.block-44-praxisbeispiel-kostenvergleich .b44-layout {
		gap: 5rem;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}

	.block-44-praxisbeispiel-kostenvergleich .b44-layout--grafik-links .b44-copy {
		grid-column: 2;
		grid-row: 1;
	}

	.block-44-praxisbeispiel-kostenvergleich .b44-layout--grafik-links .b44-chart-panel {
		grid-column: 1;
		grid-row: 1;
	}
}

@media (min-width: 1200px) {
	.block-44-praxisbeispiel-kostenvergleich .b44-chart {
		--b44-fs: 1.15px;
	}

	.block-44-praxisbeispiel-kostenvergleich .b44-layout {
		gap: 7rem;
	}
}

@media (min-width: 1450px) {
	.block-44-praxisbeispiel-kostenvergleich .b44-chart {
		--b44-fs: 1px;
	}
}

/* --- Reduzierte Bewegung -----------------------------------------------
   Sicherheitsnetz: style.css schaltet global nur transition/animation ab,
   nicht den Startzustand. Ohne diesen Block bliebe scaleY(0) stehen, falls
   .is-ready schon gesetzt ist (z. B. wenn die Einstellung erst nach dem
   Laden geändert wird).
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.block-44-praxisbeispiel-kostenvergleich .b44-bar-group,
	.block-44-praxisbeispiel-kostenvergleich .b44-delta-arrow,
	.block-44-praxisbeispiel-kostenvergleich .b44-delta-readout,
	.block-44-praxisbeispiel-kostenvergleich .b44-delta-text,
	.block-44-praxisbeispiel-kostenvergleich .b44-value,
	.block-44-praxisbeispiel-kostenvergleich .b44-total,
	.block-44-praxisbeispiel-kostenvergleich .b44-mbar-stack,
	.block-44-praxisbeispiel-kostenvergleich .b44-mbar-total,
	.block-44-praxisbeispiel-kostenvergleich .b44-mbar-values {
		opacity: 1 !important;
		transform: none !important;
	}

	.block-44-praxisbeispiel-kostenvergleich .b44-delta-guide {
		stroke-dashoffset: 0 !important;
	}
}