/* ============================================================
   aivonyx Dashboard · Komponenten-Styles
   Astra-kompatibel · ausschließlich REM (16px Basis)
   Alles scoped unter .aivonyx-dashboard, keine globalen Selektoren.
   ============================================================ */

.aivonyx-dashboard,
.aivonyx-dashboard *,
.aivonyx-dashboard *::before,
.aivonyx-dashboard *::after { box-sizing: border-box; }

.aivonyx-dashboard {
	font-family: var(--ax-font-sans);
	font-size: var(--ax-text-base);
	line-height: 1.5;
	color: var(--ax-black);
	-webkit-font-smoothing: antialiased;
	/* Mobile-App-Frame: jeder Block-Wrapper für sich zentriert.
	   Das Child-Theme überschreibt --ax-dashboard-max-width
	   responsive auf der Dashboard-Page (siehe aivonyx/dashboard.css). */
	max-width: var(--ax-dashboard-max-width, 30rem); /* default mobile · 480px */
	margin: 0 auto;
	background: var(--ax-white);
	border-radius: var(--ax-radius-4xl);
	overflow: hidden;
}

.aivonyx-dashboard svg { display: block; }
.aivonyx-dashboard button { font-family: inherit; }

/* Icon-Basis (v0.29.0) — Lucide inline via aivonyx_dash_icon().
   em-skaliert, erbt Farbe über currentColor. flex:none verhindert
   Schrumpfen in Flex-Buttons. */
.aivonyx-dashboard .ax-icon { display: inline-block; flex: none; vertical-align: middle; }
/* Buttons mit Text + Icon: Glyph und Label sauber zentrieren */
.aivonyx-dashboard .ax-more,
.aivonyx-dashboard .ax-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--ax-space-3); }

/* ---------------- Login-Gate ---------------- */
.aivonyx-dashboard.ax-gate { padding: var(--ax-space-11) var(--ax-space-7); }
.ax-gate-card { background: var(--ax-deep); color: var(--ax-white); border-radius: var(--ax-radius-3xl); padding: var(--ax-space-10); text-align: center; }
.ax-gate-eye { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-cyan); }
.ax-gate-msg { font: 600 var(--ax-text-md)/1.45 var(--ax-font-ui); margin: var(--ax-space-5) 0 var(--ax-space-7); }

/* ---------------- Greeting / Topbar ---------------- */
.ax-greeting { display: flex; justify-content: space-between; align-items: center; padding: var(--ax-space-5) var(--ax-space-8) var(--ax-space-1); background: var(--ax-white); }
.ax-greeting .ax-eye { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-cyan-text); }
.ax-greeting .ax-name { font: 600 var(--ax-text-2xl)/1.1 var(--ax-font-ui); margin-top: 0.125rem; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: var(--ax-space-3); flex-wrap: wrap; }
.ax-greeting__meta { display: inline-flex; align-items: baseline; gap: var(--ax-space-2); }
.ax-greeting__sep { opacity: 0.55; }
.ax-greeting__time { font-variant-numeric: tabular-nums; }
.ax-avatar { width: 2.375rem; height: 2.375rem; border-radius: var(--ax-radius-full); background: var(--ax-deep); color: var(--ax-cyan); display: grid; place-items: center; font: 600 var(--ax-text-base)/1 var(--ax-font-ui); }

/* ---------------- Hero · Healthspan ---------------- */
.ax-hero-ring__track { stroke: var(--ax-on-dark-hair); }
.ax-hero-ring__fill  { stroke: var(--ax-cyan); }
.ax-hero-ring__num   { fill: var(--ax-on-dark); }
.ax-hero-ring__label { fill: var(--ax-on-dark-soft); }

.ax-hero { background: var(--ax-deep); color: var(--ax-white); margin: var(--ax-space-5) var(--ax-space-5) 0; border-radius: var(--ax-radius-4xl); padding: var(--ax-space-9); position: relative; overflow: hidden; }
.ax-hero::after { content: ''; position: absolute; right: -3.125rem; top: -3.125rem; width: 11.25rem; height: 11.25rem; border-radius: 50%; background: radial-gradient(circle, var(--ax-cyan-glow-strong) 0%, var(--ax-cyan-glow-zero) 70%); pointer-events: none; }
.ax-hero-row { display: flex; align-items: center; gap: var(--ax-space-6); }
.ax-hero .ax-lab { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-on-dark-mute); }
.ax-hero .ax-ttl { font: 600 var(--ax-text-xl)/1.2 var(--ax-font-ui); margin-top: 0.125rem; }
.ax-hero .ax-meta { font: 500 var(--ax-text-xs)/1 var(--ax-font-ui); color: var(--ax-on-dark-mute); margin-top: 0.125rem; }
.ax-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ax-space-3); margin-top: var(--ax-space-6); padding-top: var(--ax-space-6); border-top: var(--ax-border-thin) solid var(--ax-on-dark-line); }
.ax-hero-stats .ax-v { font: 600 var(--ax-text-4xl)/1 var(--ax-font-num); letter-spacing: -0.01em; }
.ax-hero-stats .ax-u { font-size: var(--ax-text-sm); color: var(--ax-on-dark-faint); margin-left: 0.1875rem; font-weight: 500; }
.ax-hero-stats .ax-delta { font: 500 var(--ax-text-xs)/1 var(--ax-font-num); color: var(--ax-cyan); margin-top: 0.125rem; letter-spacing: 0.04em; }

/* ---------------- Section heading ---------------- */
/* content-visibility (v0.32.0): überspringt das Rendern off-screen
   liegender Sektionen → schnellerer First Paint auf der langen
   Dashboard-Seite. contain-intrinsic-size reserviert Platz (auto =
   gemerkte echte Höhe nach erstem Render, 25rem als Erstschätzung) →
   kein Scrollbar-Springen. Ausgenommen: Changelog (Anker-Sprungnav)
   + Preview-Sektionen. */
/* v0.47.1 (Wunsch Dirk): vertikaler Rhythmus einheitlich 0.5rem —
   das Section-Top-Padding (vorher --ax-space-9 = 22px) entfällt, der
   Block-Abstand kommt allein aus dem Theme-Margin (dashboard.css 1.8.1,
   entry-content > * + * = 0.5rem). */
.ax-section { padding: 0 var(--ax-space-5) 0.5rem; content-visibility: auto; contain-intrinsic-size: auto 25rem; } /* v0.48.1: padding-bottom = Standard-Gap — die Card endete bündig mit der weißen Wrapper-Fläche */
.aivonyx-dashboard .ax-changelog .ax-section,
.aivonyx-dashboard .ax-section--preview { content-visibility: visible; }
.ax-section-head { display: flex; justify-content: space-between; align-items: center; margin: 0 var(--ax-space-1) 0.5rem; }
.ax-section-head h3 { font: 600 var(--ax-text-base)/1 var(--ax-font-ui); margin: 0; color: var(--ax-black); }
/* `> `-Eyebrow vor Section-Titeln entfällt: der Chevron-Toggle aus
   accordion.js übernimmt die linke Position als Aufklapp-Indikator. */

/* Section-Action-Buttons — einheitlicher cyan-Trigger-Style.
   Gilt für button/a, weil sie aktiv sind. `span.ax-more` bleibt als
   stille Beschriftung in Grau. */
.aivonyx-dashboard .ax-more {
	display: inline-flex;
	align-items: center;
	font: 500 var(--ax-text-xs)/1 var(--ax-font-ui);
	color: var(--ax-cyan-text);
	padding: var(--ax-space-2) var(--ax-space-3);
	border-radius: var(--ax-radius-md);
	white-space: nowrap;
}
.aivonyx-dashboard button.ax-more,
.aivonyx-dashboard a.ax-more {
	background: transparent;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--ax-dur-fast) var(--ax-ease), color var(--ax-dur-fast) var(--ax-ease);
}
.aivonyx-dashboard button.ax-more:hover,
.aivonyx-dashboard a.ax-more:hover {
	background: var(--ax-info-tint);
	color: var(--ax-cyan-text);
}
.aivonyx-dashboard button.ax-more:focus-visible,
.aivonyx-dashboard a.ax-more:focus-visible {
	outline: 0.125rem solid var(--ax-cyan-text);
	outline-offset: 0.125rem;
}
.aivonyx-dashboard span.ax-more {
	color: var(--ax-gray);
	padding: 0;
}

/* Card ----------------------------------------------------- */
/* Karten-Padding vertikal 0.5rem (v0.47.1); horizontal bleibt
   --ax-space-6, sonst kollidiert Inhalt mit dem großen Eckradius. */
.ax-card { background: var(--ax-white); border: var(--ax-border-thin) solid var(--ax-neutral-200); border-radius: var(--ax-radius-3xl); padding: 0.5rem var(--ax-space-6); }

/* Labels & badges ------------------------------------------- */
.ax-label { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-gray); }
.ax-badge { display: inline-flex; align-items: center; gap: 0.25rem; font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); padding: 0.1875rem 0.4375rem; border-radius: var(--ax-radius-full); }
.ax-badge--ok  { background: var(--ax-success-tint); color: var(--ax-success-fg); }
.ax-badge--mon { background: var(--ax-warning-tint); color: var(--ax-warning-fg); }
.ax-badge--err { background: var(--ax-danger-tint); color: var(--ax-danger-fg); }
.ax-badge--new { background: var(--ax-info-tint); color: var(--ax-info-fg); }
.ax-badge--muted { background: var(--ax-neutral-100); color: var(--ax-neutral-700); }

.ax-dot { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; flex-shrink: 0; }
.ax-dot--ok  { background: var(--ax-success); }
.ax-dot--mon { background: var(--ax-warning); }
.ax-dot--err { background: var(--ax-danger); }
.ax-dot--new { background: var(--ax-cyan); }
.ax-dot--deep { background: var(--ax-deep); }

/* Segmented ------------------------------------------------- */
.ax-seg { display: flex; gap: 0.25rem; background: var(--ax-gray-track); padding: 0.1875rem; border-radius: var(--ax-radius-lg); margin-bottom: var(--ax-space-2); }
.ax-seg button { flex: 1; font: 500 var(--ax-text-xs)/1 var(--ax-font-ui); padding: 0.4375rem 0; border-radius: var(--ax-radius-md); background: transparent; color: var(--ax-gray); border: 0; cursor: pointer; transition: color var(--ax-dur-fast) var(--ax-ease), background var(--ax-dur-fast) var(--ax-ease); }
.ax-seg button:hover:not(.is-active) { color: var(--ax-black); }
.ax-seg button:focus-visible { outline: 0; box-shadow: var(--ax-shadow-focus); }
.ax-seg button.is-active { background: var(--ax-white); color: var(--ax-black); box-shadow: var(--ax-shadow-xs); }

/* Protocol -------------------------------------------------- */
.ax-timegroup { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-gray); padding: var(--ax-space-3) var(--ax-space-1) var(--ax-space-1); }
.ax-row { display: grid; grid-template-columns: 2.75rem 1fr 1.75rem; gap: var(--ax-space-4); align-items: center; padding: var(--ax-space-4) 0; border-bottom: var(--ax-border-thin) solid var(--ax-gray-line); }
.ax-row:last-child { border-bottom: 0; }
.ax-row .ax-pill { background: var(--ax-neutral-100); border-radius: var(--ax-radius-md); text-align: center; padding: var(--ax-space-2) 0; font: 600 var(--ax-text-xs)/1 var(--ax-font-num); }
.ax-row .ax-nm { font: 600 var(--ax-text-md)/1.2 var(--ax-font-sans); }
.ax-row .ax-nm .ax-badge { margin-left: 0.3125rem; padding: 0.125rem 0.375rem; }
.ax-row .ax-sb { font: 500 var(--ax-text-xs)/1 var(--ax-font-ui); color: var(--ax-gray); margin-top: 0.1875rem; letter-spacing: 0.04em; }
/* Abhak-Kästchen (v0.66.0) — Trefferfläche und Optik getrennt.
   Audit 2026-08-12: das sichtbare Kästchen WAR die Trefferfläche, 1.5rem
   ergeben bei 91,2 % Wurzelgröße real 21,9 px. Das ist die Kern-Interaktion
   der Morgenroutine; danebentippen heißt „nicht abgehakt, kein Feedback".
   Jetzt zeichnen ::before (Kästchen) und ::after (Haken) in derselben
   Grid-Zelle, die Fläche darum ist unsichtbar und nur zum Treffen da.
   max(2.75rem, 44px): wächst mit der Textgröße des Nutzers, fällt nie unter
   die physische Mindestgröße — WCAG 2.5.8 rechnet in CSS-px, nicht in rem. */
.ax-check { width: var(--ax-touch); height: var(--ax-touch); display: grid; place-items: center; cursor: pointer; }
/* Rand auf der Nicht-Text-Stufe (v0.67.0): Der Rand ist das EINZIGE Merkmal,
   an dem ein ungehaktes Kästchen als Bedienelement erkennbar ist — WCAG 1.4.11
   verlangt dafür 3:1. --ax-neutral-300 lag bei 1,61:1 (hell) und 1,87:1
   (dunkel), das Kästchen war im Dunkelmodus praktisch unsichtbar.
   --ax-neutral-400 hält 3,45:1 bzw. 5,26:1. */
.ax-check::before { content: ''; grid-area: 1 / 1; width: 1.5rem; height: 1.5rem; border: var(--ax-border-thin) solid var(--ax-neutral-400); border-radius: var(--ax-radius-md); transition: background var(--ax-dur-fast) var(--ax-ease), border-color var(--ax-dur-fast) var(--ax-ease); }
.ax-check.is-done::before { background: var(--ax-cyan); border-color: var(--ax-cyan); }
.ax-check.is-done::after { content: ''; grid-area: 1 / 1; width: 0.5625rem; height: 0.3125rem; border-left: 0.125rem solid var(--ax-deep); border-bottom: 0.125rem solid var(--ax-deep); transform: translateY(-0.0625rem) rotate(-45deg); }

/* Training week -------------------------------------------- */
.ax-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--ax-space-3); margin-bottom: var(--ax-space-5); }
/* v0.29.0: Tage sind jetzt <button> (klickbar) — Reset + transparente
   Border als Layout-Baseline, damit --done/--today ihre Border/BG bei
   gleicher Spezifität (spätere Regel) sauber überschreiben. */
.ax-day {
	width: 100%;
	padding: var(--ax-space-3) 0;
	border: var(--ax-border-thin) solid transparent;
	border-radius: var(--ax-radius-xl);
	background: var(--ax-neutral-100);
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--ax-dur-fast) var(--ax-ease), background var(--ax-dur-fast) var(--ax-ease);
}
.ax-day--done  { background: var(--ax-white); border-color: var(--ax-neutral-200); }
.ax-day--rest  { background: var(--ax-neutral-50); }
.ax-day--today { background: var(--ax-deep); color: var(--ax-white); }
.ax-day:hover        { border-color: var(--ax-cyan-hover); }
.ax-day:focus-visible { outline: 0; box-shadow: var(--ax-shadow-focus); }
.ax-day.is-selected  { border-color: var(--ax-cyan); }
.ax-day .ax-dl { display: block; font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); letter-spacing: 0.1em; opacity: 0.7; }
.ax-day .ax-dn { display: block; font: 600 var(--ax-text-lg)/1 var(--ax-font-num); margin-top: 0.0625rem; }
.ax-day .ax-ind { display: block; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; margin: 0.25rem auto 0; background: transparent; }
.ax-day--done  .ax-ind { background: var(--ax-success); }
.ax-day--today .ax-ind { background: var(--ax-cyan); }
.ax-day--rest  .ax-ind { background: var(--ax-neutral-400); }
/* Per-Tag „Training hinzufügen" im Detail-Panel (leerer Tag) */
.ax-day-detail .ax-add-for-day { margin-top: var(--ax-space-4); }

.ax-session { display: grid; grid-template-columns: 3.125rem 1fr auto; gap: var(--ax-space-4); align-items: center; padding: var(--ax-space-4); background: var(--ax-neutral-50); border: var(--ax-border-thin) solid var(--ax-gray-line); border-radius: var(--ax-radius-xl); }
.ax-session + .ax-session { margin-top: 0.375rem; }
.ax-session.is-now { background: var(--ax-deep); color: var(--ax-white); border-color: var(--ax-deep); }
.ax-session.is-now .ax-meta { color: var(--ax-on-dark-soft); }
.ax-session .ax-tm { font: 600 var(--ax-text-xs)/1 var(--ax-font-num); letter-spacing: 0.04em; }
.ax-session .ax-nm { font: 600 var(--ax-text-md)/1 var(--ax-font-sans); }
.ax-session .ax-meta { font: 500 var(--ax-text-xs)/1 var(--ax-font-ui); color: var(--ax-gray); margin-top: 0.125rem; letter-spacing: 0.04em; }
.ax-session .ax-pct { font: 600 var(--ax-text-xl)/1 var(--ax-font-num); text-align: right; }

.ax-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.375rem; margin-top: var(--ax-space-5); padding-top: var(--ax-space-5); border-top: var(--ax-border-thin) solid var(--ax-gray-line); }
.ax-stats-row .ax-label { display: block; }
.ax-stats-row .ax-v { font: 600 var(--ax-text-xl)/1 var(--ax-font-num); margin-top: 0.125rem; }
.ax-stats-row .ax-u { font-size: var(--ax-text-xs); color: var(--ax-gray); margin-left: 0.125rem; font-weight: 500; }

/* Wearables ------------------------------------------------- */
.ax-ws { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ax-space-3); }
.ax-tile { background: var(--ax-neutral-50); border: var(--ax-border-thin) solid var(--ax-gray-line); border-radius: var(--ax-radius-xl); padding: var(--ax-space-4); }
.ax-tile .ax-v { font: 600 var(--ax-text-2xl)/1 var(--ax-font-num); letter-spacing: -0.01em; margin: 0.25rem 0 0.375rem; }
.ax-tile .ax-u { font-size: var(--ax-text-sm); color: var(--ax-gray); margin-left: 0.1875rem; font-weight: 500; }
.ax-axis { display: flex; justify-content: space-between; font: 500 var(--ax-text-2xs)/1 var(--ax-font-num); letter-spacing: 0.06em; color: var(--ax-gray); margin-top: 0.25rem; }
.ax-stage-row { display: flex; align-items: center; gap: var(--ax-space-4); }
.ax-sleep-ring__track { stroke: var(--ax-gray-line); }
.ax-sleep-ring__deep  { stroke: var(--ax-deep); }
.ax-sleep-ring__rem   { stroke: var(--ax-cyan); }
.ax-sleep-ring__light { stroke: var(--ax-success); }
.ax-sleep-ring__num   { fill: var(--ax-black); }
.ax-stage-row .ax-li { display: flex; align-items: center; gap: 0.3125rem; font: 500 var(--ax-text-xs)/1 var(--ax-font-ui); color: var(--ax-neutral-700); }
.ax-devices { display: flex; flex-wrap: wrap; gap: var(--ax-space-3) var(--ax-space-6); margin-top: var(--ax-space-5); padding-top: var(--ax-space-5); border-top: var(--ax-border-thin) solid var(--ax-gray-line); }
.ax-devices .ax-li { display: flex; align-items: center; gap: 0.375rem; font: 500 var(--ax-text-xs)/1 var(--ax-font-ui); color: var(--ax-neutral-700); letter-spacing: 0.04em; }
.ax-bars { display: flex; align-items: flex-end; gap: 0.125rem; height: 2.25rem; }
.ax-bars span { flex: 1; border-radius: 0.0625rem; background: var(--ax-cyan); }
.ax-bars span.is-deep { background: var(--ax-deep); }
.ax-bars span.is-mute { background: var(--ax-gray-line); }

/* Biomarker ------------------------------------------------- */
.ax-bio-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.375rem; margin-bottom: var(--ax-space-5); }
.ax-bio-strip .ax-tile { padding: var(--ax-space-4); }
.ax-bio-strip .ax-v { font: 600 var(--ax-text-2xl)/1 var(--ax-font-num); margin-top: 0.25rem; }
.ax-bio-strip .ax-u { font-size: var(--ax-text-xs); color: var(--ax-gray); margin-left: 0.125rem; font-weight: 500; }
.ax-bio-tile--ok  { background: var(--ax-success-tint-soft); border-color: var(--ax-success-tint-bord); }
.ax-bio-tile--mon { background: var(--ax-warning-tint-soft); border-color: var(--ax-warning-tint-bord); }
.ax-bio-tile--err { background: var(--ax-danger-tint-soft);  border-color: var(--ax-danger-tint-bord); }
.ax-bio-strip .ax-bio-tile--ok  .ax-v { color: var(--ax-success-fg); }
.ax-bio-strip .ax-bio-tile--mon .ax-v { color: var(--ax-warning-fg); }
.ax-bio-strip .ax-bio-tile--err .ax-v { color: var(--ax-danger-fg); }

.ax-bio { display: grid; grid-template-columns: 1fr auto auto; gap: var(--ax-space-3); align-items: center; padding: var(--ax-space-4) 0; border-bottom: var(--ax-border-thin) solid var(--ax-gray-line); }
.ax-bio:last-child { border-bottom: 0; }
.ax-bio .ax-nm  { font: 600 var(--ax-text-sm)/1 var(--ax-font-ui); }
.ax-bio .ax-sub { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-gray); margin-top: 0.125rem; letter-spacing: 0.04em; }
.ax-bio .ax-vl  { font: 600 var(--ax-text-md)/1 var(--ax-font-num); text-align: right; }
.ax-bio .ax-vl .ax-u { font-size: var(--ax-text-xs); color: var(--ax-gray); margin-left: 0.125rem; font-weight: 500; }

.ax-next-test { background: var(--ax-deep); color: var(--ax-white); margin: var(--ax-space-5) 0 0; border-radius: var(--ax-radius-xl); padding: var(--ax-space-5); display: flex; justify-content: space-between; align-items: center; }
.ax-next-test .ax-label { color: var(--ax-on-dark-mute); }
.ax-next-test .ax-v { font: 600 var(--ax-text-lg)/1 var(--ax-font-num); margin-top: 0.125rem; }
.ax-next-test .ax-eta { font: 500 var(--ax-text-xs)/1 var(--ax-font-ui); color: var(--ax-cyan); letter-spacing: 0.04em; }

/* Insight --------------------------------------------------- */
.ax-insight { margin: 0 var(--ax-space-5); background: var(--ax-deep); color: var(--ax-white); border-radius: var(--ax-radius-3xl); padding: var(--ax-space-7); position: relative; overflow: hidden; } /* v0.47.1: Top-Margin → Theme-Rhythmus */
.ax-insight::before { content: ''; position: absolute; left: -1.875rem; bottom: -1.875rem; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: radial-gradient(circle, var(--ax-cyan-glow-soft) 0%, var(--ax-cyan-glow-zero) 70%); }
.ax-insight .ax-ttl  { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-cyan); position: relative; }
.ax-insight .ax-body { font: 600 var(--ax-text-lg)/1.45 var(--ax-font-ui); margin-top: var(--ax-space-3); letter-spacing: -0.005em; position: relative; }
.ax-insight .ax-meta { font: 500 var(--ax-text-xs)/1 var(--ax-font-ui); color: var(--ax-on-dark-faint); margin-top: var(--ax-space-3); letter-spacing: 0.04em; position: relative; }
.ax-cta { display: flex; align-items: center; justify-content: center; gap: var(--ax-space-3); margin-top: var(--ax-space-6); padding: 0.8125rem; background: var(--ax-cyan); color: var(--ax-deep); border: 0; border-radius: var(--ax-radius-md); cursor: pointer; width: 100%; font: 600 var(--ax-text-sm)/1 var(--ax-font-ui); position: relative; transition: background var(--ax-dur-base) var(--ax-ease), opacity var(--ax-dur-base) var(--ax-ease); }
/* v0.28.3 Styleguide-States (Audit Dirk: „Buttons unsauber") —
   Accent-Button hatte weder Hover noch Focus noch Disabled. */
.ax-cta:hover:not(:disabled) { background: var(--ax-cyan-hover); }
.ax-cta:focus-visible { outline: 0; box-shadow: var(--ax-shadow-focus); }
.ax-cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* Eyebrow util ---------------------------------------------- */
.aivonyx-dashboard .ax-eye { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-cyan-text); }

/* Protocol-Block · Erweiterungen ----------------------------- */
.ax-protocol-block .ax-counter { font-weight: 500; opacity: 0.85; }
.ax-protocol-block .ax-empty { padding: var(--ax-space-7) var(--ax-space-5); color: var(--ax-gray); font: 500 var(--ax-text-sm)/1.5 var(--ax-font-sans); text-align: center; }
.ax-protocol-block .ax-row--item { grid-template-columns: 2.75rem 1fr auto; }
.ax-protocol-block .ax-row-main { min-width: 0; }
/* v0.66.0: Gap von --ax-space-3 auf --ax-space-1 — beide Kinder tragen jetzt
   ihre 44px-Trefferfläche selbst, der optische Abstand entsteht daraus. 4px
   bleiben als Sicherheitsrand zwischen „abhaken" und „deaktivieren" stehen:
   zwei bündig aneinanderliegende Ziele laden zum Fehlgriff ein, und der
   Fehlgriff wäre hier der destruktive. */
.ax-protocol-block .ax-row-actions { display: flex; align-items: center; gap: var(--ax-space-1); }
.ax-protocol-block .ax-delete-btn { background: transparent; border: 0; cursor: pointer; font: 500 var(--ax-text-lg)/1 var(--ax-font-sans); color: var(--ax-gray); padding: var(--ax-space-2) var(--ax-space-3); border-radius: var(--ax-radius-md); transition: background var(--ax-dur-fast) var(--ax-ease), color var(--ax-dur-fast) var(--ax-ease); }
.ax-protocol-block .ax-delete-btn:hover { color: var(--ax-danger); background: var(--ax-danger-tint-soft); }
.ax-protocol-block .ax-delete-btn:focus-visible { outline: 0; box-shadow: var(--ax-shadow-focus); }

/* Modal --------------------------------------------------- */
/* <dialog>-Modals (v0.34.0): das modale <dialog> füllt den Viewport und
   zentriert die Karte; ::backdrop liefert die Abdunklung. Escape, Fokus-
   Einschluss und Top-Layer-Stacking macht <dialog> nativ; Backdrop-Klick
   (Klick aufs <dialog> außerhalb der Karte) schließt via JS. Die Karte
   behält ihre Maße (max-width je Variante). [hidden]/Backdrop-Div entfallen. */
dialog.ax-modal[open] { inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; border: 0; padding: var(--ax-space-11); background: transparent; display: flex; align-items: center; justify-content: center; }
dialog.ax-modal::backdrop { background: var(--ax-modal-backdrop); backdrop-filter: blur(0.1875rem); }
@media (max-width: 30rem) {
	dialog.ax-modal[open] { padding: var(--ax-space-7); }
}
.ax-modal-card { position: relative; background: var(--ax-white); border-radius: var(--ax-radius-3xl); padding: var(--ax-space-9); width: 100%; max-width: 28rem; box-shadow: var(--ax-shadow-lg); }
.ax-modal-title { margin: 0 0 var(--ax-space-7); font: 600 var(--ax-text-xl)/1.2 var(--ax-font-ui); color: var(--ax-black); }
.ax-modal-hint { margin: var(--ax-space-5) 0 0; font: 500 var(--ax-text-xs)/1.4 var(--ax-font-ui); color: var(--ax-gray); letter-spacing: 0.02em; }
.ax-modal-actions { display: flex; gap: var(--ax-space-3); margin-top: var(--ax-space-7); }
.ax-modal-actions button { flex: 1; }
/* v0.68.0: rechnerisch 37px — Abbrechen steht in jedem Modal neben einem
   44px-CTA und war das kleinere Ziel. */
.ax-modal-cancel { min-height: var(--ax-touch); background: var(--ax-gray-track); color: var(--ax-neutral-700); border: 0; border-radius: var(--ax-radius-md); padding: 0.8125rem; cursor: pointer; font: 600 var(--ax-text-sm)/1 var(--ax-font-ui); transition: background var(--ax-dur-base) var(--ax-ease), color var(--ax-dur-base) var(--ax-ease); }
.ax-modal-cancel:hover:not(:disabled) { background: var(--ax-neutral-200); color: var(--ax-black); }
.ax-modal-cancel:focus-visible { outline: 0; box-shadow: var(--ax-shadow-focus); }
.ax-modal-cancel:disabled { opacity: 0.5; cursor: not-allowed; }
.ax-modal-status { margin-top: var(--ax-space-5); padding: var(--ax-space-4); border-radius: var(--ax-radius-md); font: 500 var(--ax-text-sm)/1.4 var(--ax-font-ui); }
/* Fehlerzustände dürfen sich nicht als Leerzustand tarnen — Klasse war
   bisher nur per Inline-Style abgedeckt, training-log nutzte sie nackt. */
.aivonyx-dashboard .ax-data-error { color: var(--ax-danger-fg); }

.ax-modal-status--loading { background: var(--ax-info-tint); color: var(--ax-info-fg); }
.ax-modal-status--ok      { background: var(--ax-success-tint); color: var(--ax-success-fg); }
.ax-modal-status--err     { background: var(--ax-danger-tint);  color: var(--ax-danger-fg); }

/* Form-Field --------------------------------------------- */
.ax-field { display: block; margin-bottom: var(--ax-space-5); }
.ax-field-label { display: block; font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-gray); margin-bottom: var(--ax-space-3); }
/* v0.28.1: Alt-Code-Sanierung nach Styleguide — vorher waren nur
   input[type=text] + textarea gestylt; select/time/number/date fielen
   auf Browser-Default zurück („gestückelt"). Jetzt einheitlich:
   Styleguide-Padding, radius-lg (wie ACF-Form), Hover + Transition,
   Focus in lesbarem Cyan (cyan-hover statt grellem Voll-Cyan). */
.ax-field input[type="text"],
.ax-field input[type="time"],
.ax-field input[type="date"],
.ax-field input[type="number"],
.ax-field input[type="email"],
.ax-field select,
.ax-field textarea {
	width: 100%; box-sizing: border-box;
	border: var(--ax-border-thin) solid var(--ax-field-border);
	border-radius: var(--ax-radius-lg);
	padding: var(--ax-space-4) var(--ax-space-6);
	font: 500 var(--ax-text-base)/1.4 var(--ax-font-sans);
	color: var(--ax-neutral-900);
	background: var(--ax-white);
	transition: border-color var(--ax-dur-base) var(--ax-ease),
	            box-shadow var(--ax-dur-base) var(--ax-ease);
}
.ax-field input:hover,
.ax-field select:hover,
.ax-field textarea:hover { border-color: var(--ax-neutral-400); }
.ax-field input:focus,
.ax-field select:focus,
.ax-field textarea:focus { outline: 0; border-color: var(--ax-cyan-hover); box-shadow: var(--ax-shadow-focus); }
.ax-field select { padding-right: var(--ax-space-9); }

/* Batch-Import-Block (upload + status) ------------------- */
.ax-import-block .ax-card { display: flex; flex-direction: column; gap: var(--ax-space-7); }
.ax-import-form { display: flex; flex-direction: column; gap: var(--ax-space-6); margin: 0; }

.ax-import-drop {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: var(--ax-space-3);
	padding: var(--ax-space-9) var(--ax-space-7);
	border: var(--ax-border-thin) dashed var(--ax-neutral-200);
	border-radius: var(--ax-radius-2xl);
	background: var(--ax-neutral-50);
	cursor: pointer;
	text-align: center;
	transition: background var(--ax-dur-fast) var(--ax-ease), border-color var(--ax-dur-fast) var(--ax-ease);
}
.ax-import-drop:hover { background: var(--ax-gray-track); }
/* A11y: Datei-Input bleibt im Taborder (visually-hidden statt `hidden`),
   der Fokus-Ring erscheint auf der Dropzone (UX-Review Q-Upload). */
.ax-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ax-import-drop:focus-within { box-shadow: var(--ax-shadow-focus); }
.ax-import-drop.is-drag-over { background: var(--ax-info-tint); border-color: var(--ax-cyan); border-style: solid; }
.ax-import-drop.is-filled { background: var(--ax-success-tint-soft); border-style: solid; border-color: var(--ax-success-tint-bord); }

.ax-import-drop__icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--ax-radius-full); background: var(--ax-deep); color: var(--ax-cyan); font: 600 var(--ax-text-lg)/1 var(--ax-font-ui); }
.ax-import-drop__title { font: 600 var(--ax-text-base)/1.3 var(--ax-font-ui); color: var(--ax-black); letter-spacing: 0.02em; word-break: break-word; }
.ax-import-drop__hint  { font: 500 var(--ax-text-2xs)/1.3 var(--ax-font-ui); color: var(--ax-gray); }

.ax-import-field { display: block; }
.ax-import-field__label { display: block; font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-gray); margin-bottom: var(--ax-space-3); }
.ax-import-field select {
	width: 100%; box-sizing: border-box;
	border: var(--ax-border-thin) solid var(--ax-field-border);
	border-radius: var(--ax-radius-md);
	padding: var(--ax-space-4);
	font: 500 var(--ax-text-base)/1.2 var(--ax-font-sans);
	color: var(--ax-black);
	background: var(--ax-white);
	cursor: pointer;
}
.ax-import-field select:focus { outline: 0; border-color: var(--ax-cyan); box-shadow: var(--ax-shadow-focus); }

.ax-import-actions { display: flex; justify-content: flex-end; }
.ax-import-submit {
	background: var(--ax-cyan); color: var(--ax-deep);
	border: 0; border-radius: var(--ax-radius-md);
	padding: 0.8125rem var(--ax-space-8);
	font: 600 var(--ax-text-sm)/1 var(--ax-font-ui);
	cursor: pointer;
	transition: background var(--ax-dur-fast) var(--ax-ease), opacity var(--ax-dur-fast) var(--ax-ease);
}
.ax-import-submit:hover:not(:disabled) { background: var(--ax-cyan-hover); }
.ax-import-submit:disabled { opacity: 0.4; cursor: not-allowed; }

.ax-import-status { padding: var(--ax-space-4); border-radius: var(--ax-radius-md); font: 500 var(--ax-text-sm)/1.4 var(--ax-font-ui); }
.ax-import-status--loading { background: var(--ax-info-tint);    color: var(--ax-info-fg); }
.ax-import-status--ok      { background: var(--ax-success-tint); color: var(--ax-success-fg); }
.ax-import-status--err     { background: var(--ax-danger-tint);  color: var(--ax-danger-fg); }

/* Job-Liste ---------------------------------------------- */
.ax-import-jobs { padding-top: var(--ax-space-5); border-top: var(--ax-border-thin) solid var(--ax-gray-line); }
.ax-import-jobs__label { margin-bottom: var(--ax-space-4); }
.ax-import-jobs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ax-space-3); }
.ax-import-jobs__empty { font: 500 var(--ax-text-xs)/1.4 var(--ax-font-ui); color: var(--ax-gray); }

.ax-import-job {
	display: flex; align-items: center; gap: var(--ax-space-4);
	padding: var(--ax-space-4) var(--ax-space-5);
	background: var(--ax-neutral-50);
	border-radius: var(--ax-radius-md);
}
.ax-import-job__meta { display: flex; flex-direction: column; gap: 0.125rem; flex: 1; min-width: 0; }
.ax-import-job__section { font: 600 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-black); }
.ax-import-job__when    { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-gray); }

.ax-import-job__pill {
	font: 600 var(--ax-text-2xs)/1 var(--ax-font-ui);
	padding: 0.3125rem 0.5rem; border-radius: var(--ax-radius-full);
	white-space: nowrap;
}
.ax-import-job__pill--queued    { background: var(--ax-info-tint);    color: var(--ax-info-fg); }
.ax-import-job__pill--extracted { background: var(--ax-warning-tint); color: var(--ax-warning-fg); }
.ax-import-job__pill--applied   { background: var(--ax-success-tint); color: var(--ax-success-fg); }
.ax-import-job__pill--rejected  { background: var(--ax-gray-track);   color: var(--ax-neutral-700); }
.ax-import-job__pill--failed    { background: var(--ax-danger-tint);  color: var(--ax-danger-fg); }

/* "queued"-Pill subtil animieren, signalisiert laufende Verarbeitung */
.ax-import-job[data-status="queued"] .ax-import-job__pill { animation: ax-import-pulse 1.6s var(--ax-ease) infinite; }
@keyframes ax-import-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.55; }
}

.ax-import-job__err { font-size: 1rem; color: var(--ax-danger-fg); cursor: help; }

/* Import-Job reviewable-State ---------------------------- */
.ax-import-job.is-reviewable { cursor: pointer; transition: background var(--ax-dur-fast) var(--ax-ease); }
.ax-import-job.is-reviewable:hover { background: var(--ax-warning-tint); }
/* v0.66.0: Fokus war hier NUR der Hintergrundwechsel — der Warning-Tint hält
   gegen Weiß 1,12:1, WCAG 2.4.11 verlangt 3:1 für den Fokus-Indikator. Für
   Tastaturnutzer war die Review-Liste damit praktisch unbedienbar. */
.ax-import-job.is-reviewable:focus-visible { background: var(--ax-warning-tint); outline: 0; box-shadow: var(--ax-shadow-focus); }
.ax-import-job__cta { margin-left: auto; font: 600 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-warning-fg); white-space: nowrap; }

/* Review-Modal ------------------------------------------- */
/* .ax-review-modal: Overlay/Zentrierung kommt jetzt von dialog.ax-modal[open]
   (v0.34.4). Eigenes display/position entfernt — sonst war der geschlossene
   <dialog> sichtbar (überschrieb das UA-display:none). */
.ax-modal-card--review { max-width: 44rem; width: 100%; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; padding: 0; overflow: hidden; }

.ax-review-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ax-space-5);
	padding: var(--ax-space-7) var(--ax-space-8); border-bottom: var(--ax-border-thin) solid var(--ax-gray-line);
}
.ax-review-head .ax-modal-title { margin: var(--ax-space-2) 0 0; font: 600 var(--ax-text-lg)/1.2 var(--ax-font-ui); }
.ax-review-head .ax-eye { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-cyan-text); }
.ax-review-sub { margin-top: var(--ax-space-2); font: 500 var(--ax-text-xs)/1.3 var(--ax-font-ui); color: var(--ax-gray); }

/* v0.68.0: 2rem waren real 29,2px — das ist der Schließen-Knopf jedes Modals.
   Der Hover-Kreis wächst mit; identisch gelöst wie .ax-import-job__del. */
.ax-icon-btn {
	background: transparent; border: 0; cursor: pointer;
	width: var(--ax-touch); height: var(--ax-touch); border-radius: var(--ax-radius-full);
	display: grid; place-items: center; color: var(--ax-gray); font-size: 1rem;
	transition: background var(--ax-dur-fast) var(--ax-ease);
}
.ax-icon-btn:hover { background: var(--ax-gray-track); color: var(--ax-black); }
.ax-icon-btn:focus-visible { outline: 0; box-shadow: var(--ax-shadow-focus); }

.ax-review-body { flex: 1; overflow-y: auto; padding: var(--ax-space-6) var(--ax-space-8); }
.ax-review-loading,
.ax-review-empty { padding: var(--ax-space-9) 0; text-align: center; font: 500 var(--ax-text-sm)/1.4 var(--ax-font-ui); color: var(--ax-gray); }

.ax-review-rows { display: flex; flex-direction: column; gap: var(--ax-space-4); }
.ax-review-row {
	padding: var(--ax-space-5);
	background: var(--ax-neutral-50);
	border: var(--ax-border-thin) solid var(--ax-gray-line);
	border-radius: var(--ax-radius-xl);
	transition: opacity var(--ax-dur-fast) var(--ax-ease), background var(--ax-dur-fast) var(--ax-ease);
}
.ax-review-row.is-unchecked { opacity: 0.45; background: var(--ax-white); }

.ax-review-row__head { display: flex; align-items: center; gap: var(--ax-space-4); }
/* v0.68.0: Die nackte Checkbox war 16,4px groß UND hatte keinen
   zugänglichen Namen. Beides löst die Label-Hülle aus upload.js: sie trägt
   die Trefferfläche und das aria-label, das Kästchen bleibt optisch klein. */
.ax-review-row__chkwrap {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: var(--ax-touch);
	height: var(--ax-touch);
	cursor: pointer;
}
.ax-review-row__chk {
	flex-shrink: 0; width: 1.125rem; height: 1.125rem;
	accent-color: var(--ax-cyan); cursor: pointer;
}
.ax-review-row__chkwrap:focus-within { outline: 0; box-shadow: var(--ax-shadow-focus); border-radius: var(--ax-radius-md); }
.ax-review-row__name {
	flex: 1; min-width: 0;
	border: var(--ax-border-thin) solid transparent;
	border-radius: var(--ax-radius-md);
	padding: var(--ax-space-3) var(--ax-space-4);
	font: 600 var(--ax-text-base)/1.2 var(--ax-font-sans);
	color: var(--ax-black); background: var(--ax-white);
}
.ax-review-row__name:focus { outline: 0; border-color: var(--ax-cyan); box-shadow: var(--ax-shadow-focus); }

.ax-review-row__detail {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ax-space-3);
	margin-top: var(--ax-space-3);
	align-items: center;
}
.ax-review-row__kind {
	flex: 0 0 auto;
	border: var(--ax-border-thin) solid var(--ax-field-border);
	border-radius: var(--ax-radius-full);
	padding: 0.3125rem 0.625rem;
	background: var(--ax-white);
	font: 600 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-black);
	cursor: pointer;
	/* native arrow ausblenden, etwas Platz innen */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: var(--ax-space-5);
}
.ax-review-row__kind:focus { outline: 0; border-color: var(--ax-cyan); box-shadow: var(--ax-shadow-focus); }

.ax-review-row__tw,
.ax-review-row__time,
.ax-review-row__notiz {
	border: var(--ax-border-thin) solid var(--ax-field-border);
	border-radius: var(--ax-radius-md);
	padding: var(--ax-space-3) var(--ax-space-4);
	font: 500 var(--ax-text-sm)/1.2 var(--ax-font-sans);
	color: var(--ax-black);
	background: var(--ax-white);
	min-width: 0;
}
.ax-review-row__tw    { flex: 0 0 auto; font-family: var(--ax-font-num); }
.ax-review-row__time  { flex: 0 0 5.5rem; font-family: var(--ax-font-num); font-variant-numeric: tabular-nums; }
.ax-review-row__notiz { flex: 1 1 10rem; }
.ax-review-row__tw:focus,
.ax-review-row__time:focus,
.ax-review-row__notiz:focus { outline: 0; border-color: var(--ax-cyan); box-shadow: var(--ax-shadow-focus); }

/* Training-Review-Row · Datum + Dauer zusätzlich --------- */
.ax-review-row__date,
.ax-review-row__dur {
	border: var(--ax-border-thin) solid var(--ax-field-border);
	border-radius: var(--ax-radius-md);
	padding: var(--ax-space-3) var(--ax-space-4);
	font: 500 var(--ax-text-sm)/1.2 var(--ax-font-num);
	color: var(--ax-black);
	background: var(--ax-white);
	font-variant-numeric: tabular-nums;
}
.ax-review-row__date { flex: 0 0 8rem; }
.ax-review-row__dur  { flex: 0 0 5rem; }
.ax-review-row__date:focus,
.ax-review-row__dur:focus { outline: 0; border-color: var(--ax-cyan); box-shadow: var(--ax-shadow-focus); }

.ax-review-foot {
	display: flex; align-items: center; justify-content: space-between; gap: var(--ax-space-5);
	padding: var(--ax-space-6) var(--ax-space-8);
	border-top: var(--ax-border-thin) solid var(--ax-gray-line);
	background: var(--ax-neutral-50);
}
.ax-review-counter { font: 500 var(--ax-text-xs)/1 var(--ax-font-ui); letter-spacing: 0.06em; color: var(--ax-gray); }
.ax-review-counter [data-role="review-counter-checked"],
.ax-review-counter [data-role="review-counter-total"] { color: var(--ax-black); font-weight: 600; }
.ax-review-actions { display: flex; gap: var(--ax-space-3); }
.ax-review-actions button { flex: none; padding: 0.75rem var(--ax-space-7); }

.ax-modal-card--review .ax-modal-status { margin: 0; border-radius: 0; padding: var(--ax-space-4) var(--ax-space-8); border-top: var(--ax-border-thin) solid var(--ax-gray-line); }

/* Review-Modal · Raw-Text-Debug-Block ------------------- */
.ax-review-rawtext { margin-top: var(--ax-space-7); border: var(--ax-border-thin) solid var(--ax-gray-line); border-radius: var(--ax-radius-md); background: var(--ax-neutral-50); }
.ax-review-rawtext summary { display: flex; align-items: center; min-height: var(--ax-touch); cursor: pointer; padding: var(--ax-space-3) var(--ax-space-5); font: 500 var(--ax-text-xs)/1.2 var(--ax-font-ui); letter-spacing: 0.06em; color: var(--ax-gray); }
.ax-review-rawtext summary:hover { color: var(--ax-black); }
.ax-review-rawtext pre {
	margin: 0; padding: var(--ax-space-5);
	border-top: var(--ax-border-thin) solid var(--ax-gray-line);
	font: 400 var(--ax-text-2xs)/1.5 var(--ax-font-num);
	color: var(--ax-neutral-700);
	white-space: pre-wrap; word-break: break-word;
	max-height: 24rem; overflow-y: auto;
	background: var(--ax-white);
}

/* Login-Gate · Inline-Form ------------------------------ */
.ax-gate-card { text-align: left; max-width: 24rem; margin: 0 auto; }
/* Wortmarke über dem Eyebrow (Theme-SVG mit Variablen-Fills): auf der
   dunklen Karte wird die Deep-Petrol-Schrift auf Weiß gestellt, der
   Cyan-Stern bleibt. */
.ax-gate-logo { text-align: center; margin-bottom: var(--ax-space-6); }
/* display:block + margin:auto statt text-align: Theme-CSS setzt .ax-logo
   auf block, damit verpufft text-align:center des Wrappers. */
.ax-gate-logo .ax-logo { display: block; width: 8rem; height: auto; margin: 0 auto; --ax-logo-fg: var(--ax-white); }
.ax-gate-card .ax-gate-eye,
.ax-gate-card .ax-gate-msg { text-align: center; }

.ax-gate-form { margin-top: var(--ax-space-7); }
.ax-gate-form p { margin: 0 0 var(--ax-space-5); }
.ax-gate-form label {
	display: block;
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-on-dark-mute);
	margin-bottom: var(--ax-space-3);
}
.ax-gate-form input[type="text"],
.ax-gate-form input[type="email"],
.ax-gate-form input[type="password"] {
	width: 100%; box-sizing: border-box;
	border: var(--ax-border-thin) solid var(--ax-on-dark-line);
	border-radius: var(--ax-radius-md);
	padding: var(--ax-space-4);
	font: 500 var(--ax-text-base)/1.2 var(--ax-font-sans);
	background: var(--ax-deep-700);
	color: var(--ax-white);
	-webkit-text-fill-color: var(--ax-white); /* Safari Autofill */
}
.ax-gate-form input:focus { outline: 0; border-color: var(--ax-cyan); box-shadow: var(--ax-shadow-focus); }
.ax-gate-form input::placeholder { color: var(--ax-on-dark-faint); }

.ax-gate-form .login-remember { margin-top: var(--ax-space-3); }
.ax-gate-form .login-remember label {
	display: inline-flex; align-items: center; gap: var(--ax-space-3);
	/* v0.68.0: WP legt die Checkbox in das Label — das Label ist damit die
	   Trefferfläche, war aber nur eine Textzeile hoch. */
	min-height: var(--ax-touch);
	margin-bottom: 0;
	font: 500 var(--ax-text-xs)/1 var(--ax-font-ui);
	letter-spacing: 0.04em; text-transform: none;
	color: var(--ax-on-dark-soft); cursor: pointer;
}
.ax-gate-form .login-remember input[type="checkbox"] {
	width: auto; accent-color: var(--ax-cyan); margin: 0;
}

.ax-gate-form .login-submit { margin-top: var(--ax-space-7); margin-bottom: 0; }
.ax-gate-form .login-submit input[type="submit"] {
	width: 100%;
	background: var(--ax-cyan); color: var(--ax-deep);
	border: 0; border-radius: var(--ax-radius-md);
	padding: 0.8125rem;
	font: 600 var(--ax-text-sm)/1 var(--ax-font-ui);
	cursor: pointer;
	transition: background var(--ax-dur-fast) var(--ax-ease);
}
.ax-gate-form .login-submit input[type="submit"]:hover { background: var(--ax-cyan-hover); }

.ax-gate-lost {
	margin-top: var(--ax-space-6); text-align: center;
	font: 500 var(--ax-text-xs)/1 var(--ax-font-ui);
}
.ax-gate-lost a {
	color: var(--ax-on-dark-mute); text-decoration: none;
	border-bottom: var(--ax-border-thin) solid var(--ax-on-dark-line);
	padding-bottom: 0.125rem;
}
.ax-gate-lost a:hover { color: var(--ax-cyan); border-bottom-color: var(--ax-cyan); }

/* Import-Job · Delete-Button ---------------------------- */
.ax-import-job__del {
	flex-shrink: 0;
	background: transparent; border: 0;
	width: 1.75rem; height: 1.75rem;
	display: grid; place-items: center;
	border-radius: var(--ax-radius-full);
	color: var(--ax-gray); font-size: 0.75rem;
	cursor: pointer;
	transition: background var(--ax-dur-fast) var(--ax-ease), color var(--ax-dur-fast) var(--ax-ease);
}
.ax-import-job__del:hover {
	background: var(--ax-danger-tint);
	color: var(--ax-danger-fg);
}
/* v0.66.0: gleicher Fall wie oben — Fokus braucht den Ring, nicht nur Farbe. */
.ax-import-job__del:focus-visible {
	background: var(--ax-danger-tint);
	color: var(--ax-danger-fg);
	outline: 0;
	box-shadow: var(--ax-shadow-focus);
}

/* Review-Modal · Specificity-Boost gegen Theme-Select-Defaults */
.aivonyx-dashboard .ax-review-row__kind,
.aivonyx-dashboard .ax-review-row__tw   { width: auto; max-width: max-content; }
.aivonyx-dashboard .ax-review-row__time { width: 5.5rem; max-width: 5.5rem; }
.aivonyx-dashboard .ax-review-row__notiz { width: auto; min-width: 8rem; }

/* Section-Head · zwei Action-Buttons nebeneinander ------ */
.aivonyx-dashboard .ax-section-actions {
	display: flex; align-items: center; gap: var(--ax-space-4);
	flex-wrap: wrap; justify-content: flex-end;
}
/* .ax-more bringt seinen white-space/cyan-Style schon mit — keine
   block-spezifischen Overrides mehr nötig. */

/* Kein Streak-Primitiv hier (verworfen 11.08.): Die Optik lag zwar doppelt in
   ax-daily-check und ax-challenges — aber die Challenge zeigt seit
   ax-challenges 0.4.1 den Monatsfortschritt statt einer Tagesserie (20 Tage
   im Monat, nicht in Folge). Damit bleibt genau EIN Nutzer der Flamme, und
   ein Primitiv für einen Nutzer erkauft sich nur eine Deploy-Reihenfolge.
   Die Regel steht deshalb weiter in ax-daily-check/assets/daily-check.css.
   Kommt die Flamme irgendwo zurück, gehört sie hierher. */

/* Batch-Import-Modal ------------------------------------ */
/* .ax-batch-modal: Overlay/Zentrierung via dialog.ax-modal[open] (v0.34.4);
   eigenes display/position + das [hidden]-Hide sind mit <dialog> obsolet. */
.ax-modal-card--batch {
	max-width: 32rem; width: 100%;
	max-height: calc(100vh - 2rem);
	display: flex; flex-direction: column;
	padding: 0; overflow: hidden;
}
.ax-batch-head {
	display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ax-space-5);
	padding: var(--ax-space-7) var(--ax-space-8) var(--ax-space-5);
	border-bottom: var(--ax-border-thin) solid var(--ax-gray-line);
}
.ax-batch-head .ax-modal-title { margin: var(--ax-space-2) 0 0; font: 600 var(--ax-text-lg)/1.2 var(--ax-font-ui); }
.ax-batch-head .ax-eye { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-cyan-text); }
.ax-batch-body { flex: 1; overflow-y: auto; padding: var(--ax-space-6) var(--ax-space-7); }

/* Inline-Variante des Upload-Blocks (kein eigener .aivonyx-dashboard-Wrapper) */
.ax-import-block--inline { background: transparent; }
.ax-import-block--inline .ax-import-block__inner {
	display: flex; flex-direction: column; gap: var(--ax-space-6);
}

/* Lifestyle-Block · Summary-Card ----------------------- */
.ax-lifestyle-summary { display: flex; flex-wrap: wrap; gap: var(--ax-space-3); }
.ax-lifestyle-summary__hint { font: 500 var(--ax-text-xs)/1.4 var(--ax-font-ui); color: var(--ax-gray); }

.ax-lifestyle-pill {
	display: inline-flex; align-items: baseline; gap: var(--ax-space-3);
	padding: var(--ax-space-3) var(--ax-space-5);
	background: var(--ax-neutral-50);
	border: var(--ax-border-thin) solid var(--ax-gray-line);
	border-radius: var(--ax-radius-full);
}
.ax-lifestyle-pill__label {
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-gray);
}
.ax-lifestyle-pill__value {
	font: 600 var(--ax-text-sm)/1 var(--ax-font-ui);
	color: var(--ax-black);
}

/* Lifestyle-Modal ---------------------------------------- */
/* v0.28.2: Legacy-Wrapper-Regel ENTFERNT. Der Wrapper trägt beide
   Klassen (ax-modal ax-lifestyle-modal); die alte Grid-Override
   (display:grid + auto-Track) ließ die Karte auf Max-Content
   schrumpfen — max-width 44rem griff dadurch nie. Jetzt gilt die
   .ax-modal-Basis (flex, zentriert, z-index 9999, padding space-11),
   identisch zu Review-/Training-/Batch-Modal. */
.ax-modal-card--lifestyle {
	max-width: 44rem; width: 100%; /* v0.28.1: 36rem war zu schmal für 3-Spalten-Zeilen; 44rem = Review-Modal */
	max-height: calc(100vh - 2rem);
	display: flex; flex-direction: column;
	padding: 0; overflow: hidden;
}
.ax-modal-card--lifestyle .ax-lifestyle-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ax-modal-card--lifestyle .ax-lifestyle-form__body { flex: 1; overflow-y: auto; padding: var(--ax-space-6) var(--ax-space-7); }
.ax-modal-card--lifestyle .ax-modal-actions {
	padding: var(--ax-space-5) var(--ax-space-7);
	border-top: var(--ax-border-thin) solid var(--ax-gray-line);
	margin-top: 0;
	background: var(--ax-neutral-50);
}
.ax-modal-card--lifestyle .ax-modal-status { margin: 0; border-radius: 0; padding: var(--ax-space-4) var(--ax-space-7); border-top: var(--ax-border-thin) solid var(--ax-gray-line); }

.ax-lifestyle-group { margin-bottom: var(--ax-space-7); }
.ax-lifestyle-group:last-child { margin-bottom: 0; }
.ax-lifestyle-group__title {
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-cyan-text);
	margin-bottom: var(--ax-space-5);
	padding-bottom: var(--ax-space-3);
	border-bottom: var(--ax-border-thin) solid var(--ax-gray-line);
}
.ax-lifestyle-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--ax-space-5); }
.ax-lifestyle-row .ax-field { margin-bottom: 0; }

/* Inputs/Selects/Textareas im Lifestyle-Form (specificity-boost) */
.aivonyx-dashboard .ax-lifestyle-form input[type="time"],
.aivonyx-dashboard .ax-lifestyle-form select,
.aivonyx-dashboard .ax-lifestyle-form textarea {
	width: 100%; box-sizing: border-box;
	border: var(--ax-border-thin) solid var(--ax-field-border);
	border-radius: var(--ax-radius-md);
	padding: var(--ax-space-3) var(--ax-space-4);
	font: 500 var(--ax-text-sm)/1.3 var(--ax-font-sans);
	color: var(--ax-black); background: var(--ax-white);
}
.aivonyx-dashboard .ax-lifestyle-form input[type="time"] { font-family: var(--ax-font-num); font-variant-numeric: tabular-nums; }
.aivonyx-dashboard .ax-lifestyle-form input[type="time"]:focus,
.aivonyx-dashboard .ax-lifestyle-form select:focus,
.aivonyx-dashboard .ax-lifestyle-form textarea:focus { outline: 0; border-color: var(--ax-cyan); box-shadow: var(--ax-shadow-focus); }

/* Accordion · einklappbare Sections ---------------------- */
.aivonyx-dashboard .ax-section-head.is-collapsible {
	cursor: pointer;
	user-select: none;
}
.aivonyx-dashboard .ax-section-head.is-collapsible:focus-visible {
	outline: 0.125rem solid var(--ax-cyan-text);
	outline-offset: var(--ax-space-1);
	border-radius: var(--ax-radius-md);
}
.aivonyx-dashboard .ax-section-chevron {
	display: inline-block;
	font-size: 0.85em;
	line-height: 1;
	color: var(--ax-cyan-text);
	transition: transform var(--ax-dur-base) var(--ax-ease);
	transform: rotate(0deg);
}
.aivonyx-dashboard .ax-section.is-collapsed .ax-section-chevron {
	transform: rotate(-90deg);
}
.aivonyx-dashboard .ax-section.is-collapsed .ax-card {
	display: none;
}

/* v0.61.0 (Dirk 09.08.): Sektion IST die Karte — Titel sitzt jetzt IN der
   weißen Fläche wie auf der Konto-Seite (Theme v1.12.0), statt darüber auf
   dem Seitenhintergrund zu schweben. Die inneren .ax-card verlieren dafür
   ihre eigene Fläche; bewusst nur INNERHALB von .ax-section gescoped, damit
   freistehende Karten (Konto-Seite, Import-Block) unberührt bleiben. */
.aivonyx-dashboard .ax-section {
	background: var(--ax-white);
	border: var(--ax-border-thin) solid var(--ax-neutral-200);
	border-radius: var(--ax-radius-3xl);
	padding: 0.875rem 1rem;
}
.aivonyx-dashboard .ax-section .ax-card {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* v0.61.0 (Dirk 09.08.): Sektions-Kopf auf schmalen Screens stapeln. Bei zwei
   Aktions-Buttons (NEM/Training: „hinzufügen" + „Batch-Import") ist
   .ax-section-actions ~231px breit und bricht intern auf zwei Zeilen um —
   der per align-items:center zentrierte Titel schwebte dann neben den Buttons
   statt über ihnen.
   v0.62.0 (Dirk 11.08.): Nicht mehr HART stapeln, sondern UMBRECHEN lassen.
   Das feste flex-direction:column traf auch den Streak am Daily-Check — ein
   28px-Element rutschte unter den Titel, obwohl daneben 170px frei waren.
   flex-wrap entscheidet pro Sektion statt pro Breakpoint: der Umbruch fällt
   anhand der Inhaltsbreite, nicht anhand einer Annahme über den Inhalt.
   Bei 390px gemessen (Fixture): Titel 160px + Streak 28px = eine Zeile;
   Titel 169px + NEM-Aktionen 268px > 332px verfügbar = Aktionen brechen um. */
@media (max-width: 30rem) {
	.aivonyx-dashboard .ax-section-head {
		flex-wrap: wrap;
		gap: 0.375rem;
	}
	.aivonyx-dashboard .ax-section-actions {
		flex-wrap: wrap;
	}
}

/* v0.61.0 (Dirk 09.08.): Auf-/Zuklappen animiert — Kompakt/Detail und
   Sektions-Klicks sprangen hart (natives <details>-Hide bzw. display:none).
   ::details-content + interpolate-size brauchen Chrome 131+/Safari 18.4+;
   ohne Support bleibt der harte Schnitt (reine Politur, kein Funktionsverlust).
   overflow:hidden ist unkritisch — die ?-Badges der Tour liegen im Footer
   (Anchor-Positioning), Modals sind Popover im Top-Layer. */
@media (prefers-reduced-motion: no-preference) {
	.aivonyx-dashboard details.ax-section {
		interpolate-size: allow-keywords;
	}
	.aivonyx-dashboard details.ax-section::details-content {
		height: 0;
		overflow: hidden;
		transition: height var(--ax-dur-base) var(--ax-ease),
		            content-visibility var(--ax-dur-base) var(--ax-ease) allow-discrete;
	}
	.aivonyx-dashboard details.ax-section[open]::details-content {
		height: auto;
	}
}

/* Native <details>-Sektionen (v0.33.0) — Plugin-Blocks. Legacy-Divs
   (Seiteninhalt/DB) nutzen weiter die .is-collapsed-Regeln oben.
   Toggle/A11y/Tastatur macht <details> selbst; Inhalt wird bei
   geschlossenem <details> nativ ausgeblendet (kein .ax-card-Hide nötig). */
.aivonyx-dashboard details.ax-section > summary.ax-section-head {
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.aivonyx-dashboard details.ax-section > summary.ax-section-head::-webkit-details-marker {
	display: none;
}
.aivonyx-dashboard details.ax-section > summary.ax-section-head:focus-visible {
	outline: 0.125rem solid var(--ax-cyan-text);
	outline-offset: var(--ax-space-1);
	border-radius: var(--ax-radius-md);
}
.aivonyx-dashboard details.ax-section > summary.ax-section-head h3::before {
	content: '\25BE'; /* ▾ */
	display: inline-block;
	margin-right: var(--ax-space-2);
	font-size: 0.85em;
	line-height: 1;
	color: var(--ax-cyan-text);
	transition: transform var(--ax-dur-base) var(--ax-ease);
}
.aivonyx-dashboard details.ax-section:not([open]) > summary.ax-section-head h3::before {
	transform: rotate(-90deg);
}

/* Tap-Feedback (v0.47.0): Touch kennt kein :hover — ein knappes
   Press-in auf allen Buttons der Bühne, damit Taps spürbar sind.
   ponytail: eine generische Regel statt :active je Komponente. */
.aivonyx-dashboard button:not(:disabled):active,
.aivonyx-dashboard .acf-form .acf-button-group label:active {
	transform: scale(0.97);
}

/* View-Switch · Master-Toggle Basic | Advanced ----------- */
.aivonyx-dashboard.ax-view-switch {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ax-space-3);
	padding: var(--ax-space-2) var(--ax-space-3);
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	/* wp-block-column vererbt word-break: break-word — ohne nowrap
	   brechen die Pill-Labels bei schmalen Spalten mitten im Wort um
	   („Ansic ht"). Der Switch bricht stattdessen als Ganzes um. */
	word-break: normal;
	overflow-wrap: normal;
}
.aivonyx-dashboard .ax-view-switch__btn,
.aivonyx-dashboard .ax-view-switch__label {
	white-space: nowrap;
}
.aivonyx-dashboard .ax-view-switch__label {
	color: var(--ax-cyan-text);
}
.aivonyx-dashboard .ax-view-switch__group {
	display: inline-flex;
	background: var(--ax-gray-track);
	border-radius: var(--ax-radius-full);
	padding: var(--ax-space-1);
	gap: var(--ax-space-1);
}
.aivonyx-dashboard .ax-view-switch__btn {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	color: var(--ax-black);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	padding: var(--ax-space-2) var(--ax-space-4);
	border-radius: var(--ax-radius-full);
	cursor: pointer;
	transition: background var(--ax-dur-fast), color var(--ax-dur-fast);
}
.aivonyx-dashboard .ax-view-switch__btn:hover {
	color: var(--ax-cyan-text);
}
.aivonyx-dashboard .ax-view-switch__btn.is-active {
	background: var(--ax-white);
	color: var(--ax-cyan-text);
	box-shadow: var(--ax-shadow-xs);
}
.aivonyx-dashboard .ax-view-switch__btn:focus-visible {
	outline: 0.125rem solid var(--ax-cyan-text);
	outline-offset: 0.125rem;
}

/* Header-Block · dunkler Hero (Greeting + Healthspan kombiniert) --
   Texte nutzen `--ax-on-dark-strict*` (Plugin-Token, hartkodiert weiß)
   statt der Astra-Theme-mappingbasierten `--ax-on-dark`-Skala. Damit
   greift kein Astra-Customizer-Override aus dem Theme durch. */
.aivonyx-dashboard.ax-header {
	background: var(--ax-deep);
	color: var(--ax-on-dark-strict);
	border-radius: var(--ax-radius-3xl);
	overflow: hidden;
	/* v0.47.1: kein eigener Abstand — der 0.5rem-Rhythmus kommt aus dem
	   Theme (entry-content > * + *). */
	margin-bottom: 0;
}
/* v0.57.1: Tageszeit-Bild (Stufe 1) — Motiv rechts, Deep-Gradient von links
   sichert die Text-Lesbarkeit; rgba(10,58,82) = --ax-deep (#0A3A52), der im
   Dark-Remap bewusst nicht umgemappt wird. --ax-header-img kommt inline. */
.aivonyx-dashboard.ax-header--img {
	background-image: linear-gradient(90deg, var(--ax-deep) 32%, rgba(10, 58, 82, 0.38) 100%), var(--ax-header-img);
	background-size: cover;
	background-position: right center;
}
.aivonyx-dashboard.ax-header,
.aivonyx-dashboard.ax-header h1,
.aivonyx-dashboard.ax-header h2,
.aivonyx-dashboard.ax-header h3,
.aivonyx-dashboard.ax-header h4,
.aivonyx-dashboard.ax-header p,
.aivonyx-dashboard.ax-header span,
.aivonyx-dashboard.ax-header div { color: var(--ax-on-dark-strict); }

.aivonyx-dashboard.ax-header .ax-header__card {
	padding: var(--ax-space-7) var(--ax-space-8) var(--ax-space-8);
	display: flex;
	flex-direction: column;
	gap: var(--ax-space-7);
}
.aivonyx-dashboard.ax-header .ax-header__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--ax-space-5);
}
.aivonyx-dashboard.ax-header .ax-eye,
.aivonyx-dashboard.ax-header .ax-header__date,
.aivonyx-dashboard.ax-header .ax-header__time { color: var(--ax-cyan); }
.aivonyx-dashboard.ax-header .ax-header__meta {
	display: inline-flex;
	align-items: baseline;
	gap: var(--ax-space-2);
}
.aivonyx-dashboard.ax-header .ax-header__sep { color: var(--ax-on-dark-strict-soft); }
.aivonyx-dashboard.ax-header .ax-header__time { font-variant-numeric: tabular-nums; }

.aivonyx-dashboard.ax-header .ax-header__name {
	font: 600 var(--ax-text-2xl)/1.1 var(--ax-font-ui);
	letter-spacing: -0.01em;
	margin: var(--ax-space-2) 0 0;
	color: var(--ax-on-dark-strict);
}
.aivonyx-dashboard.ax-header .ax-header__demo-row {
	margin-top: var(--ax-space-3);
}
.aivonyx-dashboard.ax-header .ax-header__avatar {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--ax-radius-full);
	background: var(--ax-on-dark-strict-hair);
	color: var(--ax-on-dark-strict);
	display: grid;
	place-items: center;
	font: 600 var(--ax-text-base)/1 var(--ax-font-ui);
	letter-spacing: 0.04em;
	border: var(--ax-border-thin) solid var(--ax-on-dark-strict-line);
	flex: 0 0 auto;
}

.aivonyx-dashboard.ax-header .ax-header__healthspan {
	display: flex;
	align-items: center;
	gap: var(--ax-space-6);
}
.aivonyx-dashboard.ax-header .ax-hero-ring__track { stroke: var(--ax-on-dark-strict-hair); }
.aivonyx-dashboard.ax-header .ax-hero-ring__fill  { stroke: var(--ax-cyan); }
.aivonyx-dashboard.ax-header .ax-hero-ring__num   { fill: var(--ax-on-dark-strict); }
.aivonyx-dashboard.ax-header .ax-hero-ring__label { fill: var(--ax-on-dark-strict-soft); }

.aivonyx-dashboard.ax-header .ax-header__score-label {
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-on-dark-strict-strong);
}
.aivonyx-dashboard.ax-header .ax-header__score-title {
	font: 600 var(--ax-text-lg)/1.2 var(--ax-font-ui);
	color: var(--ax-on-dark-strict);
	margin-top: var(--ax-space-1);
}
.aivonyx-dashboard.ax-header .ax-header__score-sub {
	font: 500 var(--ax-text-xs)/1.3 var(--ax-font-sans);
	color: var(--ax-on-dark-strict-strong);
	margin-top: var(--ax-space-1);
}

/* Stat-Tiles ---------------------------------------------- */
.aivonyx-dashboard.ax-header .ax-header__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ax-space-4);
}
.aivonyx-dashboard.ax-header .ax-stat-tile {
	background: var(--ax-on-dark-strict-line);
	border: var(--ax-border-thin) solid var(--ax-on-dark-strict-hair);
	border-radius: var(--ax-radius-2xl);
	padding: var(--ax-space-4) var(--ax-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--ax-space-2);
}
.aivonyx-dashboard.ax-header .ax-stat-tile__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--ax-space-3);
}
.aivonyx-dashboard.ax-header .ax-stat-tile__label {
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-on-dark-strict-strong);
}
.aivonyx-dashboard.ax-header .ax-stat-tile__delta {
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-num);
	color: var(--ax-cyan);
	letter-spacing: 0.06em;
}
.aivonyx-dashboard.ax-header .ax-stat-tile__value {
	font: 600 var(--ax-text-xl)/1 var(--ax-font-num);
	color: var(--ax-on-dark-strict);
	font-variant-numeric: tabular-nums;
}
.aivonyx-dashboard.ax-header .ax-stat-tile__unit {
	font-size: 0.7em;
	color: var(--ax-on-dark-strict-strong);
	margin-left: 0.2em;
	letter-spacing: 0.04em;
}

/* Sparkline · eigenes Flex-Layout statt Charts.css' Table-Display.
   Charts.css darf parallel geladen sein, aber wir hängen nicht von
   ihrem Layout ab — Astra-Theme killt sonst die Table-Defaults. */
.aivonyx-dashboard.ax-header .ax-spark,
.aivonyx-dashboard.ax-header .ax-spark.charts-css {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 2.5rem;
	min-height: 2.5rem;
	margin-top: var(--ax-space-3);
	background: transparent;
	padding: 0;
	border-collapse: collapse;
}
.aivonyx-dashboard.ax-header .ax-spark caption,
.aivonyx-dashboard.ax-header .ax-spark th {
	display: none;
}
.aivonyx-dashboard.ax-header .ax-spark tbody {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	gap: 0.1875rem;
	margin: 0;
	padding: 0;
}
.aivonyx-dashboard.ax-header .ax-spark tr {
	display: flex;
	flex: 1 1 0;
	align-items: flex-end;
	height: 100%;
	min-width: 0;
}
.aivonyx-dashboard.ax-header .ax-spark td {
	width: 100%;
	height: calc(var(--size, 0.5) * 100%);
	min-height: 0.1875rem;
	background: var(--ax-on-dark-strict-soft);
	border-radius: 0.1875rem 0.1875rem 0 0;
	/* v0.66.0: text-indent: -9999px entfernt. Der Wert erzeugt eine
	   9999px-Textbox — hier durch overflow:hidden eingefangen, aber die
	   Technik ist überholt und bricht bei RTL nach rechts aus. Der Zellwert
	   ist über `color: transparent` unsichtbar und bleibt für Screenreader
	   im Baum; Charts.css blendet die Beschriftung zusätzlich via
	   `hide-data` aus (Klasse steht am <table>). */
	color: transparent;
	overflow: hidden;
	padding: 0;
	margin: 0;
}
.aivonyx-dashboard.ax-header .ax-spark tr:last-child td {
	background: var(--ax-cyan);
}

/* On-dark-Badge-Variante */
.ax-demo-badge--on-dark {
	color: var(--ax-cyan);
	background: var(--ax-on-dark-strict-hair);
	border-color: var(--ax-on-dark-strict-line);
}

/* Responsive · Stats untereinander auf schmalen Viewports */
@media (max-width: 30rem) {
	.aivonyx-dashboard.ax-header .ax-header__stats { grid-template-columns: 1fr; }
}

/* Demo-Mode · Beispieldaten ------------------------------ */
.aivonyx-dashboard .ax-section-head h3 {
	display: inline-flex;
	align-items: center;
	gap: var(--ax-space-3);
	flex-wrap: wrap;
}
.aivonyx-dashboard .ax-demo-badge {
	display: inline-flex;
	align-items: center;
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-cyan-text);
	background: var(--ax-cyan-glow-faint);
	border: var(--ax-border-thin) solid var(--ax-cyan-glow-soft);
	border-radius: var(--ax-radius-full);
	padding: var(--ax-space-1) var(--ax-space-3);
	cursor: help;
}
.aivonyx-dashboard.is-demo .ax-card {
	border-style: dashed;
	border-color: var(--ax-cyan-glow-soft);
}
.aivonyx-dashboard.is-demo .ax-row--item,
.aivonyx-dashboard.is-demo .ax-session,
.aivonyx-dashboard.is-demo .ax-lifestyle-summary {
	opacity: 0.78;
}

/* ============================================================
   Anamnese-Block (Phase R1 · ACF-Frontend-Form) · v0.18.0
   ============================================================ */
.aivonyx-dashboard .ax-an-total {
	font: 600 var(--ax-text-xl)/1 var(--ax-font-num);
	color: var(--ax-deep);
}
.aivonyx-dashboard .ax-an-total__max {
	font-size: var(--ax-text-xs);
	color: var(--ax-gray);
	margin-left: var(--ax-space-1);
}
.aivonyx-dashboard .ax-an-intro {
	font-size: var(--ax-text-sm);
	color: var(--ax-neutral-700);
	margin: 0 0 var(--ax-space-7);
}
.aivonyx-dashboard .ax-an-config-hint {
	font-size: var(--ax-text-xs);
	color: var(--ax-warning-fg);
	background: var(--ax-warning-tint-soft);
	border: var(--ax-border-thin) solid var(--ax-warning-tint-bord);
	border-radius: var(--ax-radius-md);
	padding: var(--ax-space-3) var(--ax-space-5);
	margin: 0 0 var(--ax-space-6);
}
/* Score-Summary: Label + Track + Wert pro Bereich */
.aivonyx-dashboard .ax-an-summary__meta {
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-gray);
	margin-bottom: var(--ax-space-6);
}
.aivonyx-dashboard .ax-an-score {
	display: flex;
	align-items: center;
	gap: var(--ax-space-5);
	margin-bottom: var(--ax-space-4);
}
.aivonyx-dashboard .ax-an-score__label {
	flex: 0 0 11rem;
	font-size: var(--ax-text-sm);
	color: var(--ax-neutral-700);
}
.aivonyx-dashboard .ax-an-score__track {
	flex: 1 1 auto;
	height: 0.5rem;
	background: var(--ax-gray-track);
	border-radius: var(--ax-radius-full);
	overflow: hidden;
}
.aivonyx-dashboard .ax-an-score__fill {
	display: block;
	height: 100%;
	background: var(--ax-cyan);
	border-radius: var(--ax-radius-full);
	transition: width var(--ax-dur-base) var(--ax-ease);
}
.aivonyx-dashboard .ax-an-score__value {
	flex: 0 0 2.25rem;
	text-align: right;
	font: 600 var(--ax-text-sm)/1 var(--ax-font-num);
	color: var(--ax-deep);
}
@media (max-width: 30rem) {
	.aivonyx-dashboard .ax-an-score { flex-wrap: wrap; gap: var(--ax-space-2) var(--ax-space-5); }
	.aivonyx-dashboard .ax-an-score__label { flex-basis: calc(100% - 3rem); }
}
/* „Erneut ausfüllen"-Akkordeon */
.aivonyx-dashboard .ax-an-redo {
	margin-top: var(--ax-space-8);
	border-top: var(--ax-border-thin) solid var(--ax-gray-line);
	padding-top: var(--ax-space-6);
}
.aivonyx-dashboard .ax-an-redo summary {
	font: 600 var(--ax-text-sm)/1.2 var(--ax-font-ui);
	color: var(--ax-deep);
	cursor: pointer;
}
/* ACF-Form-Feintuning innerhalb des Blocks (Basis kommt aus der
   Theme-Element-Basis; hier nur ACF-spezifische Markup-Anpassungen) */
.aivonyx-dashboard .acf-form .acf-field {
	border: 0;
	padding: var(--ax-space-5) 0;
}
.aivonyx-dashboard .acf-form .acf-label label {
	font-size: var(--ax-text-sm);
	font-weight: 500;
	color: var(--ax-neutral-900);
}
.aivonyx-dashboard .acf-form .acf-tab-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ax-space-2);
	border-bottom: var(--ax-border-thin) solid var(--ax-gray-line);
	padding: 0 0 var(--ax-space-4);
	margin: 0 0 var(--ax-space-5);
	list-style: none;
}
.aivonyx-dashboard .acf-form .acf-tab-group li a {
	display: inline-block;
	font: 600 var(--ax-text-2xs)/1.2 var(--ax-font-ui);
	letter-spacing: 0.04em;
	color: var(--ax-neutral-500);
	background: var(--ax-gray-track);
	border-radius: var(--ax-radius-full);
	padding: var(--ax-space-2) var(--ax-space-5);
	text-decoration: none;
}
.aivonyx-dashboard .acf-form .acf-tab-group li.active a {
	color: var(--ax-on-dark-strict);
	background: var(--ax-deep);
}
.aivonyx-dashboard .ax-an-submit {
	margin-top: var(--ax-space-7);
}

/* ============================================================
   Kunden-Changelog (Shortcode [aivonyx_changelog]) · v0.20.0
   ============================================================ */
/* Inhaltsverzeichnis (vertikale Liste) — ersetzt die früheren Pill-Chips
   (v0.37.1): bessere Übersicht, zeigt Version + Titel statt nur Nummer. */
.aivonyx-dashboard .ax-changelog__toc {
	padding-bottom: var(--ax-space-6);
	margin-bottom: var(--ax-space-7);
	border-bottom: var(--ax-border-thin) solid var(--ax-gray-line);
}
.aivonyx-dashboard .ax-changelog__toc-label {
	display: block;
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-gray);
	margin-bottom: var(--ax-space-4);
}
.aivonyx-dashboard .ax-changelog__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ax-space-1);
}
.aivonyx-dashboard .ax-changelog__toc-link {
	display: flex;
	align-items: baseline;
	gap: var(--ax-space-4);
	padding: var(--ax-space-2) var(--ax-space-3);
	border-left: 0.125rem solid transparent;
	border-radius: var(--ax-el-radius, 0.5rem);
	text-decoration: none;
	transition: background var(--ax-dur-fast) var(--ax-ease), border-color var(--ax-dur-fast) var(--ax-ease);
}
.aivonyx-dashboard .ax-changelog__toc-link:hover {
	background: var(--ax-gray-subtle);
	border-left-color: var(--ax-cyan);
}
.aivonyx-dashboard .ax-changelog__toc-ver {
	flex: none;
	min-width: 3.5rem;
	font: 600 var(--ax-text-2xs)/1.4 var(--ax-font-num);
	color: var(--ax-deep);
}
.aivonyx-dashboard .ax-changelog__toc-text {
	font: 400 var(--ax-text-sm)/1.4 var(--ax-font-sans);
	color: var(--ax-black);
}
/* Changelog-Einträge: feste Breite raus — die Spalte/der Container bestimmt
   die Breite (z. B. 2-spaltig). Card-Look (Hintergrund/Radius) bleibt. */
.aivonyx-dashboard.ax-changelog {
	max-width: none;
	margin: 0;
}

/* Separater ToC-Shortcode [aivonyx_changelog_toc] (z. B. rechte Spalte):
   Card-Chrome der Basis zurücksetzen (sonst eingeengt/abgeschnitten) und
   auf breiten Viewports beim Scrollen kleben. */
.aivonyx-dashboard.ax-changelog--toc-only {
	max-width: none;
	margin: 0;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}
.aivonyx-dashboard.ax-changelog--toc-only .ax-changelog__toc {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}
@media (min-width: 48em) {
	.aivonyx-dashboard.ax-changelog--toc-only {
		position: sticky;
		top: 1.5rem;
		align-self: start;
	}
}
.aivonyx-dashboard .ax-changelog__entry {
	padding: var(--ax-space-7) 0;
	border-bottom: var(--ax-border-thin) solid var(--ax-gray-line);
	scroll-margin-top: var(--ax-space-11);
}
.aivonyx-dashboard .ax-changelog__entry:first-of-type { padding-top: 0; }
.aivonyx-dashboard .ax-changelog__entry:last-of-type { border-bottom: 0; padding-bottom: 0; }
.aivonyx-dashboard .ax-changelog__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ax-space-3) var(--ax-space-5);
	margin-bottom: var(--ax-space-4);
}
.aivonyx-dashboard .ax-changelog__version {
	font: 600 var(--ax-text-2xs)/1.2 var(--ax-font-num);
	letter-spacing: 0.04em;
	color: var(--ax-info-fg);
	background: var(--ax-info-tint);
	border-radius: var(--ax-radius-full);
	padding: var(--ax-space-1) var(--ax-space-4);
	white-space: nowrap;
}
.aivonyx-dashboard .ax-changelog__title {
	font: 600 var(--ax-text-md)/1.3 var(--ax-font-sans);
	color: var(--ax-neutral-900);
	margin: 0;
}
.aivonyx-dashboard .ax-changelog__date {
	font: 400 var(--ax-text-2xs)/1.2 var(--ax-font-num);
	color: var(--ax-gray);
	margin-left: auto;
	white-space: nowrap;
}
.aivonyx-dashboard .ax-changelog__items {
	margin: 0;
	padding-left: var(--ax-space-8);
}
.aivonyx-dashboard .ax-changelog__items li {
	font-size: var(--ax-text-sm);
	color: var(--ax-neutral-700);
	margin-bottom: var(--ax-space-2);
}
.aivonyx-dashboard .ax-changelog__items li::marker { color: var(--ax-cyan-text); }
.aivonyx-dashboard .ax-changelog__top {
	display: inline-block;
	margin-top: var(--ax-space-4);
	font: 500 var(--ax-text-2xs)/1.2 var(--ax-font-ui);
	color: var(--ax-gray);
	text-decoration: none;
}
.aivonyx-dashboard .ax-changelog__top:hover { color: var(--ax-deep); }

/* Anamnese-Basis-Pills (v0.21.0) */
.aivonyx-dashboard .ax-an-basis {
	margin-bottom: var(--ax-space-6);
}

/* ============================================================
   ACF-Form-Controls im Dashboard-Scope (v0.21.1)
   ------------------------------------------------------------
   Seit Theme v1.1.1 ist .aivonyx-dashboard von der globalen
   Element-Basis abgeschirmt (:not-Shield) — Form-Controls im
   ACF-Formular (Anamnese) brauchen daher eigene Token-Styles.
   ============================================================ */
.aivonyx-dashboard .acf-form input[type="text"],
.aivonyx-dashboard .acf-form input[type="number"],
.aivonyx-dashboard .acf-form input[type="date"],
.aivonyx-dashboard .acf-form input[type="email"],
.aivonyx-dashboard .acf-form select,
.aivonyx-dashboard .acf-form textarea {
	font-family: var(--ax-font-sans);
	font-size: var(--ax-text-base);
	line-height: 1.4;
	color: var(--ax-neutral-900);
	background: var(--ax-white);
	border: var(--ax-border-thin) solid var(--ax-field-border);
	border-radius: var(--ax-radius-lg);
	padding: var(--ax-space-4) var(--ax-space-6);
	transition: border-color var(--ax-dur-base) var(--ax-ease),
	            box-shadow var(--ax-dur-base) var(--ax-ease);
}
.aivonyx-dashboard .acf-form input:focus,
.aivonyx-dashboard .acf-form select:focus,
.aivonyx-dashboard .acf-form textarea:focus {
	outline: none;
	border-color: var(--ax-cyan-hover);
	box-shadow: var(--ax-shadow-focus);
}
.aivonyx-dashboard .acf-form input[type="checkbox"],
.aivonyx-dashboard .acf-form input[type="radio"] {
	width: 1.375rem;  /* v0.48.0: 18px → 22px (Touch-Audit) */
	height: 1.375rem;
	accent-color: var(--ax-info-fg);
	cursor: pointer;
}
.aivonyx-dashboard .acf-form input[type="range"] {
	accent-color: var(--ax-info-fg);
	width: 100%;
}
.aivonyx-dashboard .acf-form .acf-input-append {
	font: 500 var(--ax-text-xs)/1.2 var(--ax-font-ui);
	color: var(--ax-gray);
}
.aivonyx-dashboard .acf-form .acf-notice,
.aivonyx-dashboard .acf-form .acf-error-message {
	font-size: var(--ax-text-sm);
	color: var(--ax-danger-fg);
	background: var(--ax-danger-tint-soft);
	border: var(--ax-border-thin) solid var(--ax-danger-tint-bord);
	border-radius: var(--ax-radius-md);
	padding: var(--ax-space-3) var(--ax-space-5);
}
.aivonyx-dashboard .ax-an-submit,
.aivonyx-dashboard .acf-form .acf-button {
	font: 600 var(--ax-text-sm)/1.2 var(--ax-font-ui);
	letter-spacing: 0.02em;
	color: var(--ax-on-dark-strict);
	background: var(--ax-deep);
	border: var(--ax-border-thin) solid var(--ax-deep);
	border-radius: var(--ax-radius-lg);
	padding: var(--ax-space-5) var(--ax-space-9);
	cursor: pointer;
	transition: background var(--ax-dur-base) var(--ax-ease);
}
.aivonyx-dashboard .ax-an-submit:hover,
.aivonyx-dashboard .acf-form .acf-button:hover {
	background: var(--ax-deep-700);
	border-color: var(--ax-deep-700);
}
.aivonyx-dashboard .ax-an-submit:focus-visible,
.aivonyx-dashboard .acf-form .acf-button:focus-visible {
	outline: none;
	box-shadow: var(--ax-shadow-focus);
}

/* View-Switch · Theme-Gruppe entfernt in v0.36.0 — der Hell/Dunkel-
   Toggle ist jetzt ein theme-globaler Header-Switch (.ax-theme-toggle
   in aivonyx/style.css), nicht mehr Teil dieses Blocks. */

/* ============================================================
   ACF-Form Feinschliff (v0.22.2) — entstückeln
   ============================================================ */
/* Skala-Chips unter dem Intro (Render-Element, ersetzt das
   entfernte ACF-Message-Feld → kein doppeltes Intro mehr) */
.aivonyx-dashboard .ax-an-scale {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ax-space-2);
	margin: 0 0 var(--ax-space-7);
}
.aivonyx-dashboard .ax-an-scale span {
	/* v0.48.0: Legende ist Prosa mit führender Ziffer — Text in ui,
	   nur die Ziffer (<b>) behält num (s. u.). */
	font: 400 var(--ax-text-2xs)/1.2 var(--ax-font-ui);
	color: var(--ax-neutral-500);
	background: var(--ax-neutral-50);
	border: var(--ax-border-thin) solid var(--ax-gray-line);
	border-radius: var(--ax-radius-full);
	padding: var(--ax-space-2) var(--ax-space-5);
}
.aivonyx-dashboard .ax-an-scale b {
	color: var(--ax-deep);
	font-weight: 600;
	font-family: var(--ax-font-num);
	margin-right: 0.25em;
}

/* Feld-Rhythmus: ruhige, gleichmäßige Abstände, keine ACF-Border */
.aivonyx-dashboard .acf-form .acf-fields > .acf-field {
	border: 0;
	padding: var(--ax-space-6) 0;
}
.aivonyx-dashboard .acf-form .acf-label {
	margin-bottom: var(--ax-space-2);
}
.aivonyx-dashboard .acf-form .acf-label .description,
.aivonyx-dashboard .acf-form p.description {
	font-size: var(--ax-text-xs);
	color: var(--ax-gray);
	font-weight: 400;
	margin: 0.125rem 0 0;
}

/* Halbbreite Felder (Größe/Gewicht): Spaltenabstand statt Kante an Kante */
.aivonyx-dashboard .acf-form .acf-field[data-width="50"] {
	padding-right: var(--ax-space-7);
}
.aivonyx-dashboard .acf-form .acf-field[data-width="50"] + .acf-field[data-width="50"] {
	padding-right: 0;
	padding-left: var(--ax-space-7);
}

/* Append/Prepend („cm", „kg"): in die Input-Zeile integriert statt Klotz */
.aivonyx-dashboard .acf-form .acf-input-append,
.aivonyx-dashboard .acf-form .acf-input-prepend {
	/* ACF nutzt table-cell-Layout — display:flex riss die Einheit aus
	   der Zeile (Höhenversatz + Lücke, v0.22.4-Fix) */
	display: table-cell;
	vertical-align: middle;
	font: 500 var(--ax-text-xs)/1 var(--ax-font-ui);
	color: var(--ax-gray);
	background: var(--ax-neutral-100);
	border: var(--ax-border-thin) solid var(--ax-field-border);
	padding: 0 var(--ax-space-5);
}
.aivonyx-dashboard .acf-form .acf-input-append {
	border-left: 0;
	border-radius: 0 var(--ax-radius-lg) var(--ax-radius-lg) 0;
}
.aivonyx-dashboard .acf-form .acf-input-prepend {
	border-right: 0;
	border-radius: var(--ax-radius-lg) 0 0 var(--ax-radius-lg);
}
.aivonyx-dashboard .acf-form .acf-input-wrap input.acf-is-appended {
	border-radius: var(--ax-radius-lg) 0 0 var(--ax-radius-lg) !important;
}
.aivonyx-dashboard .acf-form .acf-input-wrap input.acf-is-prepended {
	border-radius: 0 var(--ax-radius-lg) var(--ax-radius-lg) 0 !important;
}

/* Radio-/Checkbox-Listen: Luft zwischen Optionen, saubere Ausrichtung */
.aivonyx-dashboard .acf-form ul.acf-radio-list li,
.aivonyx-dashboard .acf-form ul.acf-checkbox-list li {
	margin: 0 var(--ax-space-8) var(--ax-space-3) 0;
}
.aivonyx-dashboard .acf-form ul.acf-radio-list label,
.aivonyx-dashboard .acf-form ul.acf-checkbox-list label {
	display: inline-flex;
	align-items: center;
	gap: var(--ax-space-3);
	font-size: var(--ax-text-sm);
	color: var(--ax-neutral-700);
	cursor: pointer;
}

/* Tabs: aktiver Zustand für BEIDE ACF-Markup-Varianten (li.active / a.active)
   — vorher leere weiße Pille, weil nur li.active gematcht wurde */
.aivonyx-dashboard .acf-form .acf-tab-group li.active a,
.aivonyx-dashboard .acf-form .acf-tab-group li a.active,
.aivonyx-dashboard .acf-form .acf-tab-group li.acf-tab-active a {
	/* !important nötig: ACFs eigenes Tab-CSS erzwingt weißes
	   background auf dem aktiven Tab → weiß-auf-weiß (v0.22.3) */
	color: var(--ax-on-dark-strict) !important;
	background: var(--ax-deep) !important;
	border-color: var(--ax-deep) !important;
}
.aivonyx-dashboard .acf-form .acf-tab-wrap {
	background: transparent;
	border: 0;
	margin-bottom: var(--ax-space-4);
}

/* Pflicht-Stern dezenter */
.aivonyx-dashboard .acf-form .acf-required {
	color: var(--ax-danger-fg);
}

/* Submit-Zeile: Abstand zur Card-Kante, Button nicht umbrechen (v0.22.4) */
.aivonyx-dashboard .acf-form .acf-form-submit {
	padding: var(--ax-space-7) 0 var(--ax-space-2);
}
.aivonyx-dashboard .ax-an-submit {
	white-space: nowrap;
}

/* ============================================================
   ACF-Datepicker (jQuery UI) · v0.22.4
   ------------------------------------------------------------
   BEWUSSTE SCOPING-AUSNAHME (v0.26.0 zusätzlich body:not(.wp-admin)
   — die Regeln liefen sonst auch im WP-Admin): das Datepicker-Panel hängt ACF an
   <body> (außerhalb .aivonyx-dashboard) — gescoped über ACFs
   eigene Klasse .acf-ui-datepicker. Da Plugin-Tokens hier nicht
   kaskadieren, nur :root-LITERAL-Tokens des Themes verwenden
   (--ax-border, --ax-gray-subtle, --ax-deep-700/900 — NICHT die
   Astra-gemappten --ax-deep/--ax-cyan/--ax-white/--ax-black).
   ============================================================ */
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker {
	font-family: var(--ax-font-sans);
	background: #FFFFFF;
	border: 0.0625rem solid var(--ax-border);
	border-radius: 0.5625rem;
	box-shadow: 0 0.25rem 0.75rem rgba(10, 58, 82, 0.12);
	padding: 0.5rem;
}
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker .ui-datepicker-header {
	background: var(--ax-deep-900);
	border: 0;
	border-radius: 0.4375rem;
	color: #FFFFFF;
	padding: 0.25rem 0;
}
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker .ui-datepicker-header select {
	font: 500 0.8125rem/1.4 var(--ax-font-sans);
	border: 0.0625rem solid var(--ax-border);
	border-radius: 0.375rem;
	padding: 0.125rem 0.375rem;
	margin: 0 0.125rem;
}
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker th {
	/* --ax-font-mono statt --ax-font-num: jQuery-UI haengt den Datepicker an
	   <body>, also AUSSERHALB von .aivonyx-dashboard — die Plugin-Tokens aus
	   tokens.css wuerden dort nicht auflösen. --ax-font-mono kommt vom
	   Child-Theme auf :root und ist überall verfügbar. */
	font: 600 0.6875rem/1.2 var(--ax-font-mono);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ax-gray);
	padding: 0.375rem 0;
	border: 0;
	background: transparent;
}
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker td {
	border: 0;
	padding: 0.0625rem;
}
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker td a,
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker td span {
	text-align: center;
	border-radius: 0.375rem;
	border: 0.0625rem solid transparent;
	background: transparent;
	color: #1A1A1A;
	padding: 0.375rem 0;
}
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker td a:hover {
	background: var(--ax-gray-subtle);
	border-color: var(--ax-border);
}
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker td .ui-state-active {
	background: var(--ax-deep-700);
	color: #FFFFFF;
}
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker td .ui-state-highlight {
	border-color: var(--ax-cyan-hover);
}
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker .ui-datepicker-prev,
body:not(.wp-admin) .acf-ui-datepicker .ui-datepicker .ui-datepicker-next {
	top: 0.375rem;
	/* v0.68.0: jQuery-UI gibt den Pfeilen nur Text-Höhe — im Anamnese-Bogen
	   ist das die Monatsnavigation. */
	display: grid;
	place-items: center;
	min-width: var(--ax-touch);
	min-height: var(--ax-touch);
	border: 0;
	background: transparent;
	cursor: pointer;
}

/* ============================================================
   Anamnese-Wizard (v0.23.0)
   ============================================================ */
.aivonyx-dashboard .ax-an-nav {
	display: flex;
	align-items: center;
	gap: var(--ax-space-6);
	margin-top: var(--ax-space-8);
	padding-top: var(--ax-space-6);
	border-top: var(--ax-border-thin) solid var(--ax-gray-line);
}
.aivonyx-dashboard .ax-an-nav__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ax-space-2);
	font: 600 var(--ax-text-sm)/1.2 var(--ax-font-ui);
	letter-spacing: 0.02em;
	color: var(--ax-deep);
	background: transparent;
	border: var(--ax-border-thin) solid var(--ax-deep);
	border-radius: var(--ax-radius-lg);
	padding: var(--ax-space-4) var(--ax-space-8);
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--ax-dur-fast) var(--ax-ease), color var(--ax-dur-fast) var(--ax-ease);
}
.aivonyx-dashboard .ax-an-nav__btn:hover:not(:disabled) {
	background: var(--ax-deep);
	color: var(--ax-on-dark-strict);
}
.aivonyx-dashboard .ax-an-nav__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.aivonyx-dashboard .ax-an-nav__btn:focus-visible {
	outline: 0;
	box-shadow: var(--ax-shadow-focus);
}
.aivonyx-dashboard .ax-an-nav__btn--primary {
	background: var(--ax-deep);
	color: var(--ax-on-dark-strict);
}
.aivonyx-dashboard .ax-an-nav__btn--primary:hover {
	background: var(--ax-deep-700);
	border-color: var(--ax-deep-700);
}
.aivonyx-dashboard .ax-an-progress {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--ax-space-2);
	min-width: 0;
}
.aivonyx-dashboard .ax-an-progress__label {
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-gray);
	text-align: center;
}
.aivonyx-dashboard .ax-an-progress__track {
	height: 0.375rem;
	background: var(--ax-gray-track);
	border-radius: var(--ax-radius-full);
	overflow: hidden;
}
.aivonyx-dashboard .ax-an-progress__fill {
	display: block;
	height: 100%;
	background: var(--ax-cyan);
	border-radius: var(--ax-radius-full);
	transition: width var(--ax-dur-base) var(--ax-ease);
}
.aivonyx-dashboard .ax-an-nav__hint {
	font-size: var(--ax-text-xs);
	color: var(--ax-danger-fg);
	margin-top: var(--ax-space-3);
	text-align: right;
}
/* Fehlende Pflichtantwort markieren */
.aivonyx-dashboard .acf-field.ax-an-missing {
	border-left: 0.1875rem solid var(--ax-danger);
	padding-left: var(--ax-space-5);
	background: var(--ax-danger-tint-soft);
	border-radius: var(--ax-radius-md);
}
/* Statement-Skala: Button-Group als kompakte Chip-Reihe */
.aivonyx-dashboard .acf-form .acf-button-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ax-space-2);
}
.aivonyx-dashboard .acf-form .acf-button-group label {
	font: 600 var(--ax-text-sm)/1 var(--ax-font-ui);
	color: var(--ax-neutral-700);
	background: var(--ax-neutral-50);
	border: var(--ax-border-thin) solid var(--ax-neutral-200) !important;
	border-radius: var(--ax-radius-md) !important;
	padding: var(--ax-space-4) 0;
	min-width: 2.5rem;
	text-align: center;
	cursor: pointer;
	margin: 0;
	transition: background var(--ax-dur-fast) var(--ax-ease), color var(--ax-dur-fast) var(--ax-ease);
}
.aivonyx-dashboard .acf-form .acf-button-group label:hover {
	border-color: var(--ax-cyan-hover) !important;
}
.aivonyx-dashboard .acf-form .acf-button-group label.selected {
	background: var(--ax-deep) !important;
	color: var(--ax-on-dark-strict) !important;
	border-color: var(--ax-deep) !important;
}
@media (max-width: 30rem) {
	.aivonyx-dashboard .ax-an-nav { flex-wrap: wrap; }
	.aivonyx-dashboard .ax-an-progress { order: -1; flex-basis: 100%; }
}

/* Anamnese-Summary-Modus + Trend-Deltas (v0.24.0) */
.aivonyx-dashboard .ax-an-delta {
	font: 600 var(--ax-text-2xs)/1 var(--ax-font-num);
	white-space: nowrap;
	padding: var(--ax-space-1) var(--ax-space-3);
	border-radius: var(--ax-radius-full);
	color: var(--ax-gray);
	background: var(--ax-neutral-50);
}
.aivonyx-dashboard .ax-an-delta.is-up {
	color: var(--ax-success-fg);
	background: var(--ax-success-tint);
}
.aivonyx-dashboard .ax-an-delta.is-down {
	color: var(--ax-danger-fg);
	background: var(--ax-danger-tint);
}
.aivonyx-dashboard .ax-an-total--inline {
	display: flex;
	align-items: baseline;
	gap: var(--ax-space-4);
	margin-bottom: var(--ax-space-5);
}
.aivonyx-dashboard .ax-an-due {
	font-size: var(--ax-text-sm);
	color: var(--ax-warning-fg);
	background: var(--ax-warning-tint-soft);
	border: var(--ax-border-thin) solid var(--ax-warning-tint-bord);
	border-radius: var(--ax-radius-md);
	padding: var(--ax-space-4) var(--ax-space-6);
	margin-bottom: var(--ax-space-6);
}
.aivonyx-dashboard .ax-an-cta {
	display: inline-block;
	margin-top: var(--ax-space-6);
	font: 600 var(--ax-text-sm)/1.2 var(--ax-font-ui);
	color: var(--ax-on-dark-strict);
	background: var(--ax-deep);
	border-radius: var(--ax-radius-lg);
	padding: var(--ax-space-5) var(--ax-space-9);
	text-decoration: none;
	transition: background var(--ax-dur-fast) var(--ax-ease);
}
.aivonyx-dashboard .ax-an-cta:hover {
	background: var(--ax-deep-700);
	color: var(--ax-on-dark-strict);
}

/* Anamnese-Verlaufschart (v0.25.0) — Flex-Renderer analog .ax-spark */
.aivonyx-dashboard .ax-an-trend {
	margin-top: var(--ax-space-8);
	padding-top: var(--ax-space-6);
	border-top: var(--ax-border-thin) solid var(--ax-gray-line);
}
.aivonyx-dashboard .ax-an-trend__label {
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-gray);
	margin-bottom: var(--ax-space-4);
}
.aivonyx-dashboard .ax-an-trend__bars {
	display: flex;
	align-items: flex-end;
	gap: var(--ax-space-3);
	height: 5rem;
}
.aivonyx-dashboard .ax-an-trend__col {
	flex: 1 1 0;
	max-width: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	gap: var(--ax-space-2);
	cursor: default;
}
.aivonyx-dashboard .ax-an-trend__bar {
	display: block;
	width: 100%;
	background: var(--ax-cyan-glow-strong);
	border: var(--ax-border-thin) solid var(--ax-cyan-glow-soft);
	border-radius: var(--ax-radius-sm) var(--ax-radius-sm) 0 0;
	transition: height var(--ax-dur-base) var(--ax-ease);
}
.aivonyx-dashboard .ax-an-trend__col.is-current .ax-an-trend__bar {
	background: var(--ax-cyan);
	border-color: var(--ax-cyan);
}
.aivonyx-dashboard .ax-an-trend__month {
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-num);
	color: var(--ax-gray);
	white-space: nowrap;
}

/* Anamnese-Compact-Modus (v0.26.0) */
.aivonyx-dashboard .ax-an-compact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ax-space-3) var(--ax-space-6);
}
.aivonyx-dashboard .ax-an-compact__score {
	display: flex;
	align-items: baseline;
	gap: var(--ax-space-3);
}
.aivonyx-dashboard .ax-an-compact__num {
	font: 600 var(--ax-text-4xl)/1 var(--ax-font-num);
	letter-spacing: -0.01em;
	color: var(--ax-deep);
}
.aivonyx-dashboard .ax-an-compact__max {
	font: 500 var(--ax-text-sm)/1 var(--ax-font-num);
	color: var(--ax-gray);
}
.aivonyx-dashboard .ax-an-compact__meta {
	font: 500 var(--ax-text-2xs)/1.4 var(--ax-font-ui);
	color: var(--ax-gray);
	display: flex;
	align-items: center;
	gap: var(--ax-space-4);
}
.aivonyx-dashboard .ax-an-compact__due {
	color: var(--ax-warning-fg);
	background: var(--ax-warning-tint);
	border-radius: var(--ax-radius-full);
	padding: var(--ax-space-1) var(--ax-space-4);
}
.aivonyx-dashboard .ax-anamnese-block--compact .ax-an-trend {
	margin-top: var(--ax-space-6);
}

/* ============================================================
   iCal-Abo-UI [aivonyx_ical_subscribe] (v0.37.0)
   ============================================================ */
.aivonyx-dashboard.ax-ical {
	display: grid;
	gap: var(--ax-space-3);
	border: var(--ax-border-thin) solid var(--ax-gray-line);
	border-radius: var(--ax-radius-lg, 0.75rem);
	background: var(--ax-white);
	padding: var(--ax-space-7);
}
.aivonyx-dashboard .ax-ical__label {
	margin: 0;
	font: 600 var(--ax-text-sm)/1.3 var(--ax-font-sans);
	color: var(--ax-black);
}
.aivonyx-dashboard .ax-ical__url {
	width: 100%;
	font: 400 var(--ax-text-xs)/1.4 var(--ax-font-num);
	color: var(--ax-deep);
	background: var(--ax-gray-subtle);
	border: var(--ax-border-thin) solid var(--ax-gray-line);
	border-radius: var(--ax-el-radius, 0.5rem);
	padding: var(--ax-space-3) var(--ax-space-4);
}
.aivonyx-dashboard .ax-ical__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ax-space-3);
	margin: 0;
}
.aivonyx-dashboard .ax-ical__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 600 var(--ax-text-sm)/1 var(--ax-font-sans);
	border-radius: var(--ax-el-radius, 0.5rem);
	padding: var(--ax-space-3) var(--ax-space-6);
	cursor: pointer;
	text-decoration: none;
	border: var(--ax-border-thin) solid transparent;
}
.aivonyx-dashboard .ax-ical__subscribe {
	color: var(--ax-on-dark, #fff);
	background: var(--ax-deep);
}
.aivonyx-dashboard .ax-ical__regen {
	color: var(--ax-deep);
	background: transparent;
	border-color: var(--ax-gray-line);
}
.aivonyx-dashboard .ax-ical__hint {
	margin: 0;
	font: 400 var(--ax-text-xs)/1.4 var(--ax-font-sans);
	color: var(--ax-gray);
}

/* ============================================================
   Generisches Inhaltsverzeichnis [aivonyx_toc] (v0.38.0)
   Aus Seiten-Überschriften gebaut (assets/toc.js). Frei platzierbar,
   z. B. als linke Spalte eines 2-spaltigen Layouts.
   ============================================================ */
.aivonyx-dashboard.ax-toc {
	display: block;
	/* Keine Card-Chrome erben: die Basis .aivonyx-dashboard ist eine Card
	   (bg/radius/overflow:hidden/max-width). Ein ToC soll als schlanke Spalte
	   sitzen, sonst wird das Label durch overflow:hidden beschnitten und die
	   Breite auf 30rem eingeengt. */
	max-width: none;
	margin: 0;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}
/* Optional klebrig beim Scrollen (Shortcode-Attribut class="ax-toc--sticky"). */
@media (min-width: 48em) {
	.aivonyx-dashboard.ax-toc--sticky {
		position: sticky;
		top: 1.5rem;
		align-self: start;
	}
}
.aivonyx-dashboard.ax-toc .ax-toc__label {
	display: block;
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-gray);
	margin-bottom: var(--ax-space-4);
}
.aivonyx-dashboard.ax-toc .ax-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ax-space-1);
}
.aivonyx-dashboard.ax-toc .ax-toc__link {
	display: block;
	padding: var(--ax-space-2) var(--ax-space-3);
	border-left: 0.125rem solid transparent;
	border-radius: var(--ax-el-radius, 0.5rem);
	font: 400 var(--ax-text-sm)/1.4 var(--ax-font-sans);
	color: var(--ax-black);
	text-decoration: none;
	transition: background var(--ax-dur-fast) var(--ax-ease), border-color var(--ax-dur-fast) var(--ax-ease);
}
.aivonyx-dashboard.ax-toc .ax-toc__link:hover {
	background: var(--ax-gray-subtle);
	border-left-color: var(--ax-cyan);
}
/* Unterpunkte (h3) eingerückt; h4+ weiter. */
.aivonyx-dashboard.ax-toc .ax-toc__item--h3 .ax-toc__link { padding-left: var(--ax-space-7); }
.aivonyx-dashboard.ax-toc .ax-toc__item--h4 .ax-toc__link { padding-left: var(--ax-space-9); }

/* ── training-log · interaktive JSON-Sektion (Alpine, v0.40.0) ───────────── */
/* x-cloak: hält Alpine-Elemente verborgen, bis die Komponente initialisiert
   ist (Alpine entfernt das Attribut nach init). Scoped aufs Dashboard. */
.aivonyx-dashboard [x-cloak] { display: none !important; }

.aivonyx-dashboard .ax-log-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--ax-space-4);
	margin-bottom: var(--ax-space-5);
}
.aivonyx-dashboard .ax-log-controls .ax-field { margin: 0; }

.aivonyx-dashboard .ax-log-list { display: flex; flex-direction: column; gap: var(--ax-space-3); }

/* Notizen-Spalte der Session-Zeile (war Inline-Style, UX-Review 2026-08-14).
   Auf schmalen Viewports unter den Namen umbrechen statt quetschen. */
.aivonyx-dashboard .ax-session__notes { text-align: right; max-width: 12rem; }
@media (max-width: 480px) {
	.aivonyx-dashboard .ax-session__notes {
		grid-column: 1 / -1;
		max-width: none;
		text-align: left;
	}
}

/* Lade-Skelett — dezenter Shimmer über den Neutral-Tokens. */
.aivonyx-dashboard .ax-log-skeleton { display: flex; flex-direction: column; gap: var(--ax-space-3); }
.aivonyx-dashboard .ax-skel-row {
	height: var(--ax-space-9);
	border-radius: var(--ax-radius-md);
	background: linear-gradient( 90deg,
		var(--ax-gray-subtle) 25%,
		var(--ax-gray-track) 50%,
		var(--ax-gray-subtle) 75% );
	background-size: 200% 100%;
	animation: ax-skel-shimmer 1.2s ease-in-out infinite;
}
@keyframes ax-skel-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.aivonyx-dashboard .ax-skel-row { animation: none; }
	.ax-import-job[data-status="queued"] .ax-import-job__pill { animation: none; }
}

/* ============================================================
   LOGIN-GATE · Magic-Login-Form (v0.44.0)
   Das Plugin „Magic Login" rendert eigenes Markup in .ax-gate-form —
   generische Regeln, damit E-Mail-Feld + Submit dem Gate-Look folgen
   (die input[type=email]-Regeln oben greifen bereits).
   ============================================================ */

.ax-gate-form .magic-login-form label {
	display: block;
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-on-dark-soft);
	margin-bottom: var(--ax-space-3);
}
.ax-gate-form input[type="submit"],
.ax-gate-form button[type="submit"] {
	width: 100%;
	margin-top: var(--ax-space-5);
	padding: var(--ax-space-4) var(--ax-space-6);
	font: 700 var(--ax-text-sm)/1 var(--ax-font-ui);
	letter-spacing: 0.06em;
	color: var(--ax-deep);
	background: var(--ax-cyan);
	border: none;
	border-radius: var(--ax-radius-md);
	cursor: pointer;
	transition: background var(--ax-dur-fast) var(--ax-ease);
}
.ax-gate-form input[type="submit"]:hover,
.ax-gate-form button[type="submit"]:hover { background: var(--ax-cyan-hover); }

/* ============================================================
   LOGIN-GATE · Magic-Login-Plugin-Overrides (v0.44.2)
   Das Plugin-Stylesheet (shortcode-style.css) bringt eine weiße
   .message-Box und eigene Button-Farben mit — auf der dunklen
   Gate-Card unlesbar. ID im Selektor = Spezifizität über Plugin/Astra.
   ============================================================ */

/* Das Plugin erzwingt width:320px auf dem Shortcode-Wrapper — auf schmalen
   Viewports ist die Karte innen schmaler, Feld+Button ragten rechts raus
   (iPhone-Screenshot Dirk 03.09.). ID im Selektor schlägt die Plugin-Regel. */
.ax-gate-card #magic-login-shortcode { width: 100%; }

.ax-gate-card #magic-login-shortcode .message,
.ax-gate-card #magic-login-shortcode .magic-login-form-header .message {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin: 0 0 var(--ax-space-5);
	color: var(--ax-on-dark-soft);
	font: 500 var(--ax-text-xs)/1.5 var(--ax-font-sans);
	text-align: center;
}
.ax-gate-card #magic-login-shortcode label {
	display: block;
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui);
	color: var(--ax-on-dark-soft);
	margin-bottom: var(--ax-space-3);
}
.ax-gate-card #magic-login-shortcode input[type="submit"].magic-login-submit {
	width: 100%;
	margin-top: var(--ax-space-5);
	padding: var(--ax-space-4) var(--ax-space-6);
	font: 700 var(--ax-text-sm)/1 var(--ax-font-ui);
	letter-spacing: 0.06em;
	color: var(--ax-deep);
	background: var(--ax-cyan);
	border: none;
	border-radius: var(--ax-radius-md);
	cursor: pointer;
	transition: background var(--ax-dur-fast) var(--ax-ease);
}
.ax-gate-card #magic-login-shortcode input[type="submit"].magic-login-submit:hover {
	background: var(--ax-cyan-hover);
}

/* Code-Login-Formular (v0.55.0) — Magic Login ≥2.4 rendert bei Code-Login
   .magic-login-code-form mit WP-Admin-Button-Klassen (button-hero etc.) und
   Inline-Styles für width/float — Farben/Typo hier auf Gate-Look gezogen.
   !important gegen das Plugin-Stylesheet bzw. WP-.button-Basisstyles. */
.ax-gate-card .magic-login-code-form input[type="submit"].magic-login-code-submit {
	margin-top: var(--ax-space-5);
	padding: var(--ax-space-4) var(--ax-space-6) !important;
	font: 700 var(--ax-text-sm)/1 var(--ax-font-ui);
	letter-spacing: 0.06em;
	color: var(--ax-deep) !important;
	background: var(--ax-cyan) !important;
	border: none !important;
	border-radius: var(--ax-radius-md);
	box-shadow: none !important;
	cursor: pointer;
	min-height: var(--ax-touch);
	transition: background var(--ax-dur-fast) var(--ax-ease);
}
.ax-gate-card .magic-login-code-form input[type="submit"].magic-login-code-submit:hover {
	background: var(--ax-cyan-hover) !important;
}
.ax-gate-card .magic-login-code-form a.magic-login-code-cancel {
	display: block;
	box-sizing: border-box;
	padding: var(--ax-space-4) var(--ax-space-6) !important;
	font: 500 var(--ax-text-xs)/1 var(--ax-font-ui);
	letter-spacing: 0.06em;
	color: var(--ax-on-dark-soft) !important;
	background: transparent !important;
	border: var(--ax-border-thin) solid var(--ax-on-dark-line) !important;
	border-radius: var(--ax-radius-md);
	box-shadow: none !important;
	text-decoration: none;
	min-height: var(--ax-touch);
	transition: border-color var(--ax-dur-fast) var(--ax-ease), color var(--ax-dur-fast) var(--ax-ease);
}
.ax-gate-card .magic-login-code-form a.magic-login-code-cancel:hover {
	color: var(--ax-on-dark) !important;
	border-color: var(--ax-on-dark-soft) !important;
}
/* Code-Feld: zentriert, Ziffern gut lesbar, kein Plugin-Glow */
.ax-gate-card .magic-login-code-form input[type="text"]#magic_login_token {
	text-align: center;
	font: 600 var(--ax-text-lg)/1.2 var(--ax-font-ui);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	box-shadow: none;
}

/* ============================================================
   TOUCH-ZIELE (v0.48.2, Einheit korrigiert v0.66.0)
   ------------------------------------------------------------
   Alle Werte laufen über --ax-touch = max(2.75rem, 44px):
   rem zuerst, px nur als Boden. Grund für beides in einem Wert:

   * rem allein reicht nicht. Astra setzt per dynamischem CSS
     `html { font-size: 91.2% }` (belegt am Live-Markup 2026-08-12,
     20 Fundstellen) — 2.75rem sind dort 40px, also unter der Grenze.
   * px allein ist auch falsch. Wer die Textgröße im Browser
     hochstellt, soll größere Ziele bekommen, nicht dieselben.
     max() liefert genau das: mitwachsend nach oben, nie unter 44px.
   * 44px ist eine physische Größe (Fingerkuppe), keine
     typografische — WCAG 2.5.8 und Apple HIG rechnen in CSS-px.

   Basis war das Live-Audit 2026-08-06: Accordion-Heads 15px,
   Aktions-Buttons 24px, Segmente 26px, Inputs 40px, ACF-Radios 16px.
   Die Trefferfläche wächst über min-height/min-width — die Optik der
   Komponenten bleibt, nur die Fläche atmet.
   ============================================================ */
/* --ax-touch ist definiert in assets/tokens.css (Geometrie-Token). */
.aivonyx-dashboard .ax-section-head { min-height: var(--ax-touch); }
.aivonyx-dashboard .ax-more { min-height: var(--ax-touch); }
/* Sortier-Button (Pfeil-Glyphe) war nur ~26px breit */
.aivonyx-dashboard .ax-log-controls button.ax-more { min-width: var(--ax-touch); }
/* v0.66.0: 40px war die letzte Ausnahme in dieser Liste und ohne Begründung —
   der Ansichtsumschalter wird häufiger getippt als fast alles andere. */
.aivonyx-dashboard .ax-seg button { min-height: var(--ax-touch); }
.aivonyx-dashboard .ax-delete-btn /* Wrapper trägt beide Klassen — kein Descendant! */ { min-width: var(--ax-touch); min-height: var(--ax-touch); }
.aivonyx-dashboard .ax-cta { min-height: var(--ax-touch); }
.aivonyx-dashboard .ax-an-nav__btn { min-height: var(--ax-touch); }
.aivonyx-dashboard input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.aivonyx-dashboard select {
	min-height: var(--ax-touch);
}
/* ACF-Tabs (Anamnese-Bereiche): Pills mit voller Trefferhöhe */
.aivonyx-dashboard .acf-form .acf-tab-group li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ax-touch);
}
/* Radio-/Checkbox-Optionen: das Label ist die Trefferfläche */
.aivonyx-dashboard .acf-form ul.acf-radio-list label,
.aivonyx-dashboard .acf-form ul.acf-checkbox-list label {
	min-height: var(--ax-touch);
}
/* v0.66.0 nachgezogen — im Audit 2026-08-12 als Lücken gemessen:
   Ansicht-/Theme-Umschalter (~26px) und der Job-Löschknopf im Import (28px). */
.aivonyx-dashboard .ax-view-switch__btn {
	display: inline-flex;
	align-items: center;
	min-height: var(--ax-touch);
}
.aivonyx-dashboard .ax-import-job__del {
	width: var(--ax-touch);
	height: var(--ax-touch);
}

/* Dark-Mode-Nachzügler (v0.49.0): deep-farbige Ziffern der Skalen-Legende */
html.ax-dark .aivonyx-dashboard .ax-an-scale b { color: var(--ax-neutral-900); }

/* Zeitgruppen als details (v0.49.0): Summary = Trefferfläche mit
   Erledigt-Zähler; Chevron über list-style. */
.aivonyx-dashboard .ax-timegroup-details > summary.ax-timegroup {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ax-space-3);
	min-height: var(--ax-touch);
	cursor: pointer;
	list-style: none;
}
.aivonyx-dashboard .ax-timegroup-details > summary.ax-timegroup::-webkit-details-marker { display: none; }
.aivonyx-dashboard .ax-timegroup__count {
	font: 600 var(--ax-text-2xs)/1 var(--ax-font-num);
	font-variant-numeric: tabular-nums;
	color: var(--ax-gray);
}

/* Anamnese mobil (v0.49.0): Die ACF-Tab-Pills (8 Bereiche, gestapelt)
   kosteten 1,5 Bildschirmhöhen vor dem ersten Feld — der Schritt-Wizard
   aus anamnese.js (Zurück/Weiter + „Schritt X von Y") übernimmt die
   Navigation vollständig. Die programmatischen tabLinks[].click()-Aufrufe
   funktionieren auch bei display:none. Desktop behält die Pills. */
@media (max-width: 47.9375em) {
	.aivonyx-dashboard .acf-form .acf-tab-wrap { display: none; }
}

/* ============================================================
   ARZT-AUSWERTUNG (v0.49.0, Konzept A) — aufklappbare Detail-
   Sektion unter der Anamnese-Summary + Print-Weg.
   ============================================================ */
.aivonyx-dashboard .ax-an-doctor { margin-top: var(--ax-space-6); border-top: var(--ax-border-thin) solid var(--ax-gray-line); }
.aivonyx-dashboard .ax-an-doctor__head {
	display: flex;
	align-items: center;
	min-height: var(--ax-touch);
	cursor: pointer;
	font: 600 var(--ax-text-sm)/1.3 var(--ax-font-ui);
	color: var(--ax-deep);
	list-style: none;
}
html.ax-dark .aivonyx-dashboard .ax-an-doctor__head { color: var(--ax-neutral-900); }
.aivonyx-dashboard .ax-an-doctor__head::-webkit-details-marker { display: none; }
.aivonyx-dashboard .ax-an-doctor__head::before { content: '▸'; margin-right: var(--ax-space-3); color: var(--ax-cyan-text); transition: transform var(--ax-dur-base) var(--ax-ease); }
.aivonyx-dashboard .ax-an-doctor[open] > .ax-an-doctor__head::before { transform: rotate(90deg); }
.aivonyx-dashboard .ax-an-doctor__h { margin: var(--ax-space-6) 0 var(--ax-space-3); font: 600 var(--ax-text-xs)/1.3 var(--ax-font-ui); color: var(--ax-gray); }
.aivonyx-dashboard .ax-an-doctor__dl { margin: 0; }
.aivonyx-dashboard .ax-an-doctor__dl dt { font: 600 var(--ax-text-xs)/1.4 var(--ax-font-ui); color: var(--ax-black); margin-top: var(--ax-space-3); }
.aivonyx-dashboard .ax-an-doctor__dl dd { margin: 0; font: 400 var(--ax-text-sm)/1.5 var(--ax-font-ui); color: var(--ax-neutral-700); white-space: pre-line; }
.aivonyx-dashboard .ax-an-doctor__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--ax-space-4);
	padding: var(--ax-space-2) 0;
	border-bottom: var(--ax-border-thin) solid var(--ax-gray-line);
}
.aivonyx-dashboard .ax-an-doctor__q { font: 400 var(--ax-text-xs)/1.4 var(--ax-font-ui); color: var(--ax-neutral-700); }
.aivonyx-dashboard .ax-an-doctor__v { flex: none; font: 700 var(--ax-text-xs)/1.4 var(--ax-font-num); font-variant-numeric: tabular-nums; color: var(--ax-black); }
.aivonyx-dashboard .ax-an-doctor__note { margin: var(--ax-space-5) 0 0; font: 400 var(--ax-text-2xs)/1.4 var(--ax-font-ui); color: var(--ax-gray); }

/* Print (Arzt-Ausdruck): nur den Anamnese-Block drucken — Header,
   Tabbar, andere Sektionen raus; Farben druckfreundlich. Der Print-
   Button öffnet vorher alle details im Block (inline onclick). */
@media print {
	body.ax-dashboard-page .site-header,
	body.ax-dashboard-page .site-footer,
	body.ax-dashboard-page .ax-tabbar,
	body.ax-dashboard-page .entry-content > *:not(.ax-anamnese-block) { display: none !important; }
	.aivonyx-dashboard.ax-anamnese-block { max-width: none; box-shadow: none; }
	.aivonyx-dashboard .ax-an-doctor__print,
	.aivonyx-dashboard .ax-an-redo { display: none !important; }
	.aivonyx-dashboard .ax-card { border: 0; padding: 0; }
}

/* ============================================================
   LIVE-SCORE-VERLAUF (v0.50.0) — 90-Tage-Linie auf der
   Anamnese-Seite: tägliche Checks als Linie, Bogen-Submits als
   Cyan-Marker. Eigener SVG-Renderer (kein Charts.css, Lesson #14).
   ============================================================ */
.aivonyx-dashboard .ax-an-tl { margin-top: var(--ax-space-6); }
.aivonyx-dashboard .ax-an-tl__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--ax-space-3); }
.aivonyx-dashboard .ax-an-tl__label { font: 500 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-gray); }
/* v0.73.0: Y-Skala-Angabe neben dem Label — hält den dynamischen Zoom ehrlich. */
.aivonyx-dashboard .ax-an-tl__scale { font-weight: 400; opacity: 0.75; margin-left: 0.375rem; }
.aivonyx-dashboard .ax-an-tl__current { font: 700 var(--ax-text-lg)/1 var(--ax-font-num); font-variant-numeric: tabular-nums; color: var(--ax-black); }
.aivonyx-dashboard .ax-an-tl__max { font: 500 var(--ax-text-2xs)/1 var(--ax-font-num); color: var(--ax-gray); }
.aivonyx-dashboard .ax-an-tl svg { display: block; width: 100%; height: 5.5rem; background: var(--ax-gray-subtle); border-radius: var(--ax-radius-md); }
.aivonyx-dashboard .ax-an-tl__line { fill: none; stroke: var(--ax-deep); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
html.ax-dark .aivonyx-dashboard .ax-an-tl__line { stroke: var(--ax-neutral-700); }
.aivonyx-dashboard .ax-an-tl__submit { fill: var(--ax-cyan); stroke: var(--ax-white); stroke-width: 1; }
.aivonyx-dashboard .ax-an-tl__now { fill: var(--ax-deep); }
html.ax-dark .aivonyx-dashboard .ax-an-tl__now { fill: var(--ax-neutral-900); }
.aivonyx-dashboard .ax-an-tl__axis { display: flex; justify-content: space-between; margin-top: var(--ax-space-2); font: 500 var(--ax-text-2xs)/1 var(--ax-font-num); color: var(--ax-gray); }
.aivonyx-dashboard .ax-an-tl__legend { display: flex; gap: var(--ax-space-6); margin-top: var(--ax-space-3); font: 400 var(--ax-text-2xs)/1 var(--ax-font-ui); color: var(--ax-gray); }
.aivonyx-dashboard .ax-an-tl__legend > span { display: inline-flex; align-items: center; gap: var(--ax-space-2); }
.aivonyx-dashboard .ax-an-tl__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.aivonyx-dashboard .ax-an-tl__dot--submit { background: var(--ax-cyan); }
.aivonyx-dashboard .ax-an-tl__dot--line { background: var(--ax-deep); }
html.ax-dark .aivonyx-dashboard .ax-an-tl__dot--line { background: var(--ax-neutral-700); }

/* ============================================================
   MINI-SHOP · Addon-Karten (v0.59.0) — Overlay-Design:
   Karte = 16:9-Bild (dunkles Motiv oben rechts), Text unten links
   über Lesbarkeits-Verlauf, Kauf-Button unten rechts.
   Freigegebenes Mockup: addons/card-mockup.html (volle Breite).
   Pattern: patterns/products.php; Kauf = Woo add-to-cart/Produkt-Link.
   Farben bewusst fix (weiß/cyan auf Bild) — Karte ist in Light-
   und Dark-Mode identisch, weil das Bild der Hintergrund ist.
   ============================================================ */
.aivonyx-dashboard .ax-products-intro {
	margin: 0 0 var(--ax-space-4);
	font: 400 var(--ax-text-sm)/1.5 var(--ax-font-ui);
	color: var(--ax-gray);
}
.aivonyx-dashboard .ax-product {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--ax-radius-3xl);
	overflow: hidden; /* Bild folgt dem Kartenradius */
	background: #101012; /* Fallback, bis das Bild lädt */
	border: var(--ax-border-thin) solid rgba(255, 255, 255, 0.08);
	margin: 0 0 0.625rem;
}
.aivonyx-dashboard .ax-product__media {
	position: absolute;
	inset: 0;
	margin: 0;
}
.aivonyx-dashboard .ax-product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.aivonyx-dashboard .ax-product__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, rgba(10, 10, 12, 0.82) 0%, rgba(10, 10, 12, 0.35) 42%, transparent 65%);
	pointer-events: none;
}
.aivonyx-dashboard .ax-product__chip {
	position: absolute;
	top: var(--ax-space-3);
	left: var(--ax-space-3);
	font: 500 var(--ax-text-2xs)/1 var(--ax-font-num);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ax-cyan);
	border: 1px solid rgba(0, 217, 255, 0.4);
	border-radius: var(--ax-radius-sm, 4px);
	padding: 0.25rem 0.5rem;
	background: rgba(10, 10, 12, 0.8);
	backdrop-filter: blur(4px);
}
.aivonyx-dashboard .ax-product__txt {
	position: absolute;
	left: var(--ax-space-4);
	bottom: var(--ax-space-3);
	right: 4.75rem; /* Platz für den Kauf-Button */
}
.aivonyx-dashboard .ax-product__title {
	margin: 0;
	font: 700 var(--ax-text-base)/1.2 var(--ax-font-ui);
	color: #fff;
}
.aivonyx-dashboard .ax-product__desc {
	margin: 0.2rem 0 0;
	font: 400 var(--ax-text-xs)/1.4 var(--ax-font-ui);
	color: rgba(255, 255, 255, 0.72);
	/* Bei 320px bleiben unter zwei Zeilen nur ~9px Luft in der 16:9-Karte —
	   eine dritte Zeile liefe hinter die Kartenkante. Editor-Texte werden
	   deshalb hart auf zwei Zeilen begrenzt statt still abgeschnitten. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.aivonyx-dashboard .ax-product__price {
	display: block;
	margin-top: 0.4rem;
	font: 700 var(--ax-text-sm)/1 var(--ax-font-num);
	font-variant-numeric: tabular-nums;
	color: var(--ax-cyan);
}
.aivonyx-dashboard .ax-product__buy {
	position: absolute;
	right: var(--ax-space-3);
	bottom: var(--ax-space-3);
	width: 3rem;  /* 48px — über 44px-Touch-Minimum */
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ax-radius-lg, 10px);
	background: var(--ax-cyan);
	color: #06222b;
	font: 700 1.375rem/1 var(--ax-font-ui);
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 217, 255, 0.35);
}
.aivonyx-dashboard .ax-product__buy:hover,
.aivonyx-dashboard .ax-product__buy:focus-visible {
	filter: brightness(1.1);
	color: #06222b;
}

/* Forced Colors (Windows-Kontrastmodus): box-shadow entfällt dort,
   outline:0 der Fokus-Styles bliebe sonst ohne Ersatz (WCAG 2.4.7). */
@media (forced-colors: active) {
	.aivonyx-dashboard :focus-visible {
		outline: 2px solid CanvasText !important;
		outline-offset: 2px;
	}
}