/* ============================================================
   AXR-Systems — Schaubausteine der Leistungsseite „Webseiten"
   Wird nur geladen, wenn ein Shortcode des Moduls auf der Seite
   steht (siehe inc/webseiten-visuals.php). Setzt landing.css
   voraus: die gemeinsame Hülle (.axlv__kopf/__titel/__daten/
   __quelle) und die geprüften Datenfarben --dv-1/2/3 kommen dort her.

   FARBEN — hier gilt eine andere Regel als bei den übrigen
   Diagrammen der Seite. Die vier Ausbaustufen sind KEINE vier
   Kategorien, sondern eine Rangfolge: Stufe 3 ist mehr als Stufe 2.
   Für Rangfolgen ist eine sequenzielle Rampe aus EINER Farbe
   richtig und ein Vierfarb-Satz falsch — er würde eine Gleichrangig-
   keit behaupten, die es nicht gibt.

   Die Rampe läuft im hellen Modus von hell nach dunkel und im
   dunklen Modus von dunkel nach hell. Das ist kein Versehen: Auf
   dunklem Grund ist mehr Licht die stärkere Aussage, auf hellem
   Grund mehr Farbe. Beide Reihen sind auf monoton fallende bzw.
   steigende OKLab-Helligkeit geprüft (Abstände .13 / .21 / .13
   bzw. .13 / .27 / .07). Die hellste Stufe trägt zusätzlich eine
   Haarlinie, weil sie sonst auf weißem Grund verschwindet.
   ============================================================ */

.axw {
	--st-1: #BBF7D0;
	--st-2: #4ADE80;
	--st-3: #15803D;
	--st-4: #14532D;
	--st-linie: color-mix(in srgb, var(--ink) 14%, transparent);
	--axw-flaeche: color-mix(in srgb, var(--ink) 4%, var(--surface));
}
[data-theme="dark"] .axw {
	--st-1: #14532D;
	--st-2: #15803D;
	--st-3: #4ADE80;
	--st-4: #86EFAC;
	--st-linie: color-mix(in srgb, #fff 16%, transparent);
	--axw-flaeche: color-mix(in srgb, #fff 3%, var(--surface));
}
/* Stufenfarbe je Element über --stufe (1–4) auswählen, damit die Rampe
   nur an einer Stelle steht und nicht viermal ausgeschrieben wird. */
.axw [style*="--stufe:1"] { --st: var(--st-1); }
.axw [style*="--stufe:2"] { --st: var(--st-2); }
.axw [style*="--stufe:3"] { --st: var(--st-3); }
.axw [style*="--stufe:4"] { --st: var(--st-4); }

/* Die Bausteine stehen im Artikelfluss, brauchen aber die volle Breite. */
.entry-content > .axw { max-width: none; }

/* ============================================================
   1) Vier Ausbaustufen
   ============================================================ */
.axw-stufen__leiste {
	display: grid; gap: .7rem; margin-bottom: 1.4rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.axw-stufe {
	display: grid; gap: .55rem; align-content: start; text-align: left;
	padding: 1rem 1.05rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r);
	background: var(--surface); color: var(--ink); cursor: pointer; font: inherit;
	position: relative; overflow: hidden;
	transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.axw-stufe::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 3px;
	background: var(--st); transform: scaleX(0); transform-origin: left;
	transition: transform .45s var(--ease-out);
}
.axw-stufe:hover { border-color: color-mix(in srgb, var(--brand-2) 45%, var(--line)); transform: translateY(-2px); }
.axw-stufe:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.axw-stufe.is-aktiv { border-color: var(--brand-2); box-shadow: var(--shadow); }
.axw-stufe.is-aktiv::before { transform: scaleX(1); }

.axw-stufe__nr {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 8px; flex: none;
	font-family: var(--font-head); font-weight: 700; font-size: .82rem;
	background: var(--st); border: 1px solid var(--st-linie);
	color: #0B1020;
}
/* Ab Stufe 3 ist die Fläche dunkel genug, dass dunkler Text darauf reißt. */
.axw-stufe[style*="--stufe:3"] .axw-stufe__nr,
.axw-stufe[style*="--stufe:4"] .axw-stufe__nr { color: #fff; }
[data-theme="dark"] .axw-stufe[style*="--stufe:1"] .axw-stufe__nr,
[data-theme="dark"] .axw-stufe[style*="--stufe:2"] .axw-stufe__nr { color: #fff; }
[data-theme="dark"] .axw-stufe[style*="--stufe:3"] .axw-stufe__nr,
[data-theme="dark"] .axw-stufe[style*="--stufe:4"] .axw-stufe__nr { color: #0B1020; }

.axw-stufe__tx { display: grid; gap: .18rem; }
.axw-stufe__tx strong { font-family: var(--font-head); font-size: 1.02rem; line-height: 1.25; color: var(--ink); }
.axw-stufe__tx small { font-size: .84rem; line-height: 1.45; color: var(--muted); }

.axw-stufe__meter { display: flex; gap: 3px; margin-top: .15rem; }
.axw-meter__i {
	height: 5px; flex: 1; border-radius: 3px; background: var(--surface-2);
	border: 1px solid transparent;
}
.axw-meter__i.is-voll { border-color: var(--st-linie); }
.axw-meter__i.is-voll[style*="--i:1"] { background: var(--st-1); }
.axw-meter__i.is-voll[style*="--i:2"] { background: var(--st-2); }
.axw-meter__i.is-voll[style*="--i:3"] { background: var(--st-3); }
.axw-meter__i.is-voll[style*="--i:4"] { background: var(--st-4); }

/* Die Felder. Ohne Skript stehen alle vier untereinander — bewusst, damit der
   vollständige Text im ausgelieferten HTML steht. Das Skript setzt danach
   hidden auf die nicht gewählten. */
.axw-stufen__felder { display: grid; gap: 1.4rem; }
.axw-feld {
	display: grid; gap: clamp(1.2rem, .6rem + 2vw, 2.4rem);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	padding: clamp(1.2rem, .8rem + 1.4vw, 2rem);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	background: var(--surface); box-shadow: var(--shadow-sm);
}
.axw-feld[hidden] { display: none; }
.axw-feld:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

.axw-feld__bild {
	display: grid; gap: .7rem; justify-items: center;
	padding: clamp(.8rem, .4rem + 1.4vw, 1.6rem);
	background: var(--axw-flaeche); border-radius: var(--r);
	border: 1px solid var(--line);
}
.axw-feld__bildunter { font-size: .82rem; color: var(--muted); text-align: center; }
.axw-wire { width: 100%; height: auto; max-width: 380px; color: color-mix(in srgb, var(--ink) 52%, transparent); }
.axw-wire__akz { color: var(--st); stroke: var(--st); fill: color-mix(in srgb, var(--st) 34%, transparent); }
[data-theme="dark"] .axw-wire__akz { fill: color-mix(in srgb, var(--st) 30%, transparent); }

.axw-feld__h { font-family: var(--font-head); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); margin: 0 0 .5rem; color: var(--ink); }
.axw-feld__lead { margin: 0 0 1rem; color: var(--ink-2); line-height: 1.65; }
.axw-feld__liste { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .5rem; }
.axw-feld__liste li { display: grid; grid-template-columns: 20px 1fr; gap: .6rem; align-items: start; font-size: .96rem; color: var(--ink-2); }
.axw-feld__liste i { display: inline-flex; width: 20px; height: 20px; color: var(--st-3); }
[data-theme="dark"] .axw-feld__liste i { color: var(--st-3); }
.axw-feld__liste svg { width: 100%; height: 100%; }

.axw-feld__meta { display: flex; flex-wrap: wrap; gap: .5rem .85rem; margin: 0; }
.axw-feld__meta > div {
	display: grid; gap: .1rem; padding: .55rem .8rem;
	background: var(--axw-flaeche); border: 1px solid var(--line); border-radius: var(--r-sm);
	flex: 1 1 12rem;
}
.axw-feld__meta dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.axw-feld__meta dd { margin: 0; font-size: .92rem; color: var(--ink); font-weight: 600; }

/* Vier Reiter nebeneinander brauchen etwa 1080 px, sonst bricht die
   Beschreibung in vier Zeilen und die Karten werden ungleich hoch. */
@media (max-width: 1080px) {
	.axw-stufen__leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.axw-feld { grid-template-columns: minmax(0, 1fr); }
	.axw-feld__bild { order: -1; }
	.axw-feld__meta > div { flex: 1 1 100%; }
}
/* Unter 640 px steht der Reiter einzeilig: Nummer links, Text rechts,
   Balken darunter über die volle Breite. */
@media (max-width: 640px) {
	.axw-stufen__leiste { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
	.axw-stufe { grid-template-columns: 26px 1fr; align-items: center; gap: .4rem .7rem; padding: .85rem .95rem .95rem; }
	.axw-stufe__nr { grid-row: 1; }
	.axw-stufe__tx { grid-column: 2; }
	.axw-stufe__meter { grid-column: 1 / -1; }
	.axw-feld { padding: 1rem; border-radius: var(--r); }
	.axw-feld__bild { padding: .8rem; }
}

/* Die Strichzeichnung zeichnet sich beim Aufdecken einmal durch.
   Der Startzustand (unsichtbar) hängt an .is-bereit, das erst das Skript
   setzt. Ohne JavaScript wäre die Zeichnung sonst dauerhaft leer — sie ist
   aber Inhalt, nicht Dekoration, und muss auch ohne Skript zu sehen sein. */
.axw-stufen.is-bereit.reveal .axw-wire__z { stroke-dasharray: 900; stroke-dashoffset: 900; }
.axw-stufen.is-bereit.reveal .axw-wire__f { opacity: 0; }
.axw-stufen .axw-feld.is-gezeigt .axw-wire__z { animation: axw-zeichnen 1.1s var(--ease-out) forwards; }
.axw-stufen .axw-feld.is-gezeigt .axw-wire__f { animation: axw-auf .5s var(--ease-out) forwards; }
.axw-stufen .axw-feld.is-gezeigt .axw-wire__f:nth-of-type(2n) { animation-delay: .12s; }
.axw-stufen .axw-feld.is-gezeigt .axw-wire__f:nth-of-type(3n) { animation-delay: .22s; }
.axw-stufen .axw-feld.is-gezeigt .axw-wire__f:nth-of-type(5n) { animation-delay: .32s; }
@keyframes axw-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes axw-auf { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============================================================
   2) Merkmalsmatrix
   ============================================================ */
.axw-matrix__legende { gap: 1.1rem; }
.axw-leg { display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--muted); }
.axw-leg i { width: 14px; height: 14px; border-radius: 50%; flex: none; display: inline-block; }
.axw-leg--j i { background: var(--dv-1); }
.axw-leg--o i { background: transparent; box-shadow: inset 0 0 0 2px var(--dv-1); }
.axw-leg--n i { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 55%, transparent); }
.axw-leg--markt i { background: color-mix(in srgb, var(--muted) 70%, transparent); }
.axw-leg--median i { width: 3px; height: 15px; border-radius: 2px; background: var(--ink); }
.axw-leg--wir i { background: var(--dv-1); width: 15px; height: 15px; border-radius: 4px; transform: rotate(45deg); }

.axw-matrix__rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.axw-matrix__rahmen:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.axw-matrix__tab {
	width: 100%; min-width: 660px; border-collapse: separate; border-spacing: 0;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
	font-size: .93rem;
}
.axw-matrix__tab th, .axw-matrix__tab td { padding: .72rem .85rem; border-bottom: 1px solid var(--line); text-align: center; }
.axw-matrix__tab tbody tr:last-child th, .axw-matrix__tab tbody tr:last-child td { border-bottom: 0; }
.axw-matrix__tab thead th {
	background: var(--surface-2); font-family: var(--font-head); font-weight: 700; font-size: .88rem;
	color: var(--ink); position: sticky; top: 0; z-index: 2; line-height: 1.3;
	border-bottom: 1px solid var(--line);
}
.axw-matrix__tab thead th:first-child {
	text-align: left; font-family: var(--font-body); font-weight: 600; font-size: .72rem;
	text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.axw-matrix__tab tbody th {
	text-align: left; font-weight: 600; color: var(--ink); background: var(--surface);
	position: sticky; left: 0; z-index: 1; min-width: 230px;
	box-shadow: 1px 0 0 var(--line);
}
.axw-matrix__tab tbody tr:nth-child(odd) th,
.axw-matrix__tab tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--ink) 2.5%, var(--surface)); }
.axw-matrix__nr {
	display: block; width: 20px; height: 20px; margin: 0 auto .3rem; border-radius: 6px;
	background: var(--st); border: 1px solid var(--st-linie);
	font-size: .7rem; line-height: 19px; color: #0B1020;
}
.axw-matrix__tab thead th[style*="--stufe:3"] .axw-matrix__nr,
.axw-matrix__tab thead th[style*="--stufe:4"] .axw-matrix__nr { color: #fff; }
[data-theme="dark"] .axw-matrix__tab thead th[style*="--stufe:1"] .axw-matrix__nr,
[data-theme="dark"] .axw-matrix__tab thead th[style*="--stufe:2"] .axw-matrix__nr { color: #fff; }
[data-theme="dark"] .axw-matrix__tab thead th[style*="--stufe:3"] .axw-matrix__nr,
[data-theme="dark"] .axw-matrix__tab thead th[style*="--stufe:4"] .axw-matrix__nr { color: #0B1020; }

/* Das Zeichen trägt die Aussage nie allein: Daneben steht immer das Wort,
   auf schmalen Zellen nur für Vorlesegeräte sichtbar. */
.axw-z__zeichen { display: inline-block; width: 15px; height: 15px; border-radius: 50%; }
.axw-z--j .axw-z__zeichen { background: var(--dv-1); }
.axw-z--o .axw-z__zeichen { background: transparent; box-shadow: inset 0 0 0 2.2px var(--dv-1); }
.axw-z--n .axw-z__zeichen { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 45%, transparent); }
.axw-z__wort {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.axw-z__text { font-size: .86rem; color: var(--ink-2); font-weight: 600; }

/* Auf schmalen Bildschirmen wird aus der Kreuztabelle ein Stapel: ein Block
   je Merkmal, darin eine Zeile je Ausbaustufe mit ausgeschriebenem Wort.
   Seitwärts scrollen ist auf einem Telefon die schlechteste aller Lösungen —
   man sieht nie mehr als zwei Spalten und weiß nie, wie viele fehlen.
   Die Grenze liegt bei 860 px, weil die Tabelle 660 px braucht und darüber
   auch mit Rändern noch bequem hineinpasst. */
@media (max-width: 860px) {
	/* Die Legende erklärt drei Punkt-Symbole. Im gestapelten Zustand gibt es
	   keine Punkte mehr, sondern ausgeschriebene Wörter — dann ist sie nicht
	   hilfreich, sondern verwirrend. */
	.axw-matrix__legende { display: none; }
	.axw-matrix__rahmen { overflow-x: visible; }
	.axw-matrix__tab { min-width: 0; border: 0; background: none; display: block; }
	.axw-matrix__tab thead { display: none; }
	.axw-matrix__tab tbody { display: grid; gap: .7rem; }
	.axw-matrix__tab tbody tr {
		display: block; background: var(--surface); border: 1px solid var(--line);
		border-radius: var(--r); padding: .8rem .95rem .5rem;
	}
	.axw-matrix__tab tbody tr:nth-child(odd) th,
	.axw-matrix__tab tbody tr:nth-child(odd) td { background: none; }
	.axw-matrix__tab tbody th {
		display: block; position: static; min-width: 0; box-shadow: none; background: none;
		padding: 0 0 .5rem; border-bottom: 1px solid var(--line); margin-bottom: .45rem;
		font-family: var(--font-head); font-size: .98rem;
	}
	.axw-matrix__tab tbody td {
		display: flex; align-items: center; justify-content: space-between; gap: 1rem;
		padding: .32rem 0; border: 0; text-align: left;
	}
	.axw-matrix__tab tbody td::before {
		content: attr(data-spalte); font-size: .85rem; color: var(--muted);
	}
	/* Statt eines Punktes ohne Bezug steht hier das Wort — es war ohnehin
	   schon im Markup, nur für Vorlesegeräte. */
	.axw-matrix__tab tbody td .axw-z__wort {
		position: static; width: auto; height: auto; margin: 0; overflow: visible;
		clip: auto; clip-path: none; white-space: normal;
		font-size: .85rem; font-weight: 650; color: var(--ink);
	}
	.axw-matrix__tab tbody td.axw-z--n .axw-z__wort { color: var(--muted); font-weight: 500; }
	.axw-z__zeichen { display: none; }
	.axw-matrix__tab tbody td .axw-z__text { font-weight: 650; }
}

/* ============================================================
   3) Preisvergleich — drei Karten statt eines Diagramms
   ============================================================ */
/* Hier stand bis 2.4.5 ein Punktdiagramm mit Achse, Medianstrichen und
   Spannbändern. Es war korrekt und für die Zielgruppe zu anstrengend: Wer
   einen Handwerksbetrieb führt, sucht auf einer Preisseite eine Zahl zum
   Vergleichen, nicht eine Verteilung zum Auswerten. Jetzt drei Karten mit
   je zwei Zeilen — andere / wir. Die achtzehn Einzelpreise stehen
   unverändert in der Tabelle darunter. */
.axw-preis__gitter {
	display: grid; gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.axw-preis__karte {
	display: grid; align-content: start;
	padding: clamp(1rem, .8rem + .8vw, 1.5rem);
	border: 1px solid var(--line); border-radius: var(--r-lg);
	background: var(--surface); box-shadow: var(--shadow-sm);
}
.axw-preis__karte.is-haupt { border-color: color-mix(in srgb, var(--brand-2) 55%, var(--line)); box-shadow: var(--shadow); }
.axw-preis__art { margin: 0; font-family: var(--font-head); font-size: 1.08rem; color: var(--ink); line-height: 1.25; }
.axw-preis__sub { margin: .25rem 0 .1rem; font-size: .86rem; color: var(--muted); line-height: 1.45; }

.axw-preis__zeile {
	display: grid; gap: .1rem; padding: .85rem 0 .2rem; margin-top: .75rem;
	border-top: 1px solid var(--line);
}
.axw-preis__wer {
	font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
	color: var(--muted);
}
.axw-preis__wert {
	font-family: var(--font-head); font-weight: 700; line-height: 1.1; color: var(--ink);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); font-variant-numeric: tabular-nums;
}
.axw-preis__wert--leer { color: var(--muted); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); }
.axw-preis__zus { font-size: .82rem; color: var(--muted); line-height: 1.5; margin-top: .12rem; }
.axw-preis__zeile--wir .axw-preis__wert {
	background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Rückfall für Browser ohne background-clip:text — sonst stünde dort nichts. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.axw-preis__zeile--wir .axw-preis__wert { color: var(--brand-1); background: none; }
}

@media (max-width: 900px) { .axw-preis__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .axw-preis__gitter { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   4) Live-Messung
   ============================================================ */
.axw-live__gitter { display: grid; gap: .9rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.axw-live__karte {
	padding: 1.1rem 1.15rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r);
	background: var(--surface); display: grid; gap: .35rem; align-content: start;
	box-shadow: var(--shadow-sm);
}
.axw-live__wert { display: flex; align-items: baseline; gap: .22rem; }
.axw-live__zahl {
	font-family: var(--font-head); font-weight: 700; line-height: 1;
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
	background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
	font-variant-numeric: tabular-nums;
}
.axw-live__einheit { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--muted); }
.axw-live__label { font-weight: 650; color: var(--ink); font-size: .95rem; line-height: 1.35; }
.axw-live__hilfe { margin: .15rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.55; }
.axw-live__status { display: inline-flex; align-items: center; gap: .38rem; font-size: .8rem; font-weight: 650; }
.axw-live__status i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* Statusfarben sind reserviert und stehen nie allein — daneben steht das Wort. */
.axw-live__status.is-gut { color: #15803D; } .axw-live__status.is-gut i { background: #15803D; }
.axw-live__status.is-mittel { color: #B45309; } .axw-live__status.is-mittel i { background: #B45309; }
.axw-live__status.is-schlecht { color: #B91C1C; } .axw-live__status.is-schlecht i { background: #B91C1C; }
[data-theme="dark"] .axw-live__status.is-gut { color: #4ADE80; } [data-theme="dark"] .axw-live__status.is-gut i { background: #4ADE80; }
[data-theme="dark"] .axw-live__status.is-mittel { color: #FBBF24; } [data-theme="dark"] .axw-live__status.is-mittel i { background: #FBBF24; }
[data-theme="dark"] .axw-live__status.is-schlecht { color: #F87171; } [data-theme="dark"] .axw-live__status.is-schlecht i { background: #F87171; }
.axw-live__ohne { margin: 1rem 0 0; font-size: .88rem; color: var(--muted); }

@media (max-width: 900px) { .axw-live__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .axw-live__gitter { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   5) Erhebungszahlen
   ============================================================ */
.axw-zahlen__gitter { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.axw-zahl { display: grid; gap: .8rem; justify-items: center; text-align: center; }
.axw-zahl__ring { position: relative; width: clamp(120px, 16vw, 168px); aspect-ratio: 1; }
.axw-zahl__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.axw-zahl__spur { fill: none; stroke: color-mix(in srgb, var(--ink) 8%, transparent); stroke-width: 9; }
.axw-zahl__bogen {
	fill: none; stroke: var(--brand-2); stroke-width: 9; stroke-linecap: round;
	stroke-dasharray: 314.16; stroke-dashoffset: 314.16;
	transition: stroke-dashoffset 1.5s cubic-bezier(.22, 1, .36, 1) var(--rev-d, 0ms);
}
.axw-zahlen.in .axw-zahl__bogen { stroke-dashoffset: calc(314.16 - 314.16 * var(--anteil) / 100); }
.axw-zahl__n {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-family: var(--font-head); font-weight: 700; line-height: 1; color: var(--ink);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); font-variant-numeric: tabular-nums;
}
.axw-zahl__n b { font-weight: inherit; }
.axw-zahl__n i { font-style: normal; font-size: .55em; color: var(--muted); margin-left: .05em; }
.axw-zahl__l { margin: 0; font-size: .93rem; color: var(--ink-2); line-height: 1.5; max-width: 22ch; }
.axw-zahlen__satz {
	margin: 1.6rem auto 0; max-width: var(--measure); text-align: center;
	font-size: 1.02rem; color: var(--ink-2); line-height: 1.7;
}
@media (max-width: 720px) { .axw-zahlen__gitter { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Bewegung: alles optional
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.axw-stufen.is-bereit.reveal .axw-wire__z { stroke-dasharray: none; stroke-dashoffset: 0; }
	.axw-stufen.is-bereit.reveal .axw-wire__f { opacity: 1; }
	.axw-stufen .axw-feld.is-gezeigt .axw-wire__z,
	.axw-stufen .axw-feld.is-gezeigt .axw-wire__f { animation: none; }
	.axw-zahl__bogen { transition: none; stroke-dashoffset: calc(314.16 - 314.16 * var(--anteil) / 100); }
	.axw-stufe:hover { transform: none; }
}