/* ============================================================
   aivonyx Child-Theme · Dashboard-Ergänzungen
   Scoped: .ax-dashboard-page (body-Klasse, gesetzt via functions.php)
   Astra-kompatibel · ausschließlich REM (16px Basis) · kein !global
   ============================================================ */

/* ------------------------------------------------------------------
   1. SEITEN-CHROME
      v1.2.2 (Entscheidung Dirk 2026-06-12): Header + Footer bleiben
      SICHTBAR — vorher wurden sie für den App-Charakter ausgeblendet.
      Nur Seitentitel, Breadcrumbs und Post-Navigation bleiben aus
      (gehören nicht auf eine App-Seite).
      ACHTUNG: bereits importierte Seiten (dashboard, anamnese) haben
      zusätzlich Astra-Postmeta ast-*-display=disabled — das muss pro
      Seite im Editor (Astra-Settings) zurückgesetzt werden.
   ------------------------------------------------------------------ */
body.ax-dashboard-page .ast-breadcrumbs-wrapper,
body.ax-dashboard-page .post-navigation,
body.ax-dashboard-page .entry-title {
	display: none !important;
}

/* Nur für Screenreader (v1.23.0).
   Trägt die h1 der App-Seiten: Die Bühne blendet .entry-title aus, dadurch
   begann die Überschriften-Hierarchie bei h2 (Header-Block) bzw. h3
   (Sektionen) — Screenreader-Nutzer hatten keinen Seiten-Einstiegspunkt.
   Die Überschrift kommt aus functions.php (aivonyx_app_page_heading).
   clip-path statt der alten -9999px-Technik: kein 9999px-Kasten, kein
   RTL-Ausbruch, kein Scroll-Sprung beim Fokussieren. */
.ax-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
   2. SEITEN-HINTERGRUND & LAYOUT (responsive)
      ------------------------------------------------------------
      Mobile (< 768px): App-Frame ~480px breit, zentriert,
         alle Block-Wrapper untereinander.
      Tablet (≥ 768px): leicht breiterer Frame (~640px),
         padding seitlich für sichtbaren Bühnenrand.
      Desktop (≥ 1024px): Bühne wird zum 2-Spalten-Grid.
         Greeting + Hero spannen über beide Spalten, Daten-
         Sektionen liegen nebeneinander.
      Wide (≥ 1280px): max-width hochgezogen auf 1152px.

      Die Mobile-Frame-Breite läuft über die Custom Property
      --ax-dashboard-max-width, die das Plugin als Default
      respektiert (siehe assets/dashboard.css im Plugin).
   ------------------------------------------------------------------ */
body.ax-dashboard-page {
	background: var(--ax-gray-subtle, #F5F5F5);

	/* ---- Surface-Tokens hart pinnen (Theme v1.2.1) ----
	   Lesson #15 reloaded: --ax-white/--ax-black mappen auf Astra-
	   Customizer-Slots (color-6/color-2) — liefert der Customizer
	   dunkle Werte, kippt das komplette Dashboard (Wrapper dunkel,
	   Headings dunkel auf dunkel). Die Dashboard-Bühne ist deshalb
	   bewusst von Astra ENTKOPPELT: deterministische Literale.
	   Dark-Mode remappt dieselben Tokens weiter unten (html.ax-dark). */
	--ax-white:       #FFFFFF;
	--ax-black:       #1A1A1A;
	--ax-gray-subtle: #F5F5F5;
	--ax-border:      #E5E5E5;
	--ax-gray:        #6B6B6B;   /* v1.22.0: WCAG-AA, s. style.css :root */

	/* v1.23.0: Mindest-Trefferfläche, Wert synchron zum Plugin-Token in
	   aivonyx-dashboard/assets/tokens.css. Hier nötig, weil die Woo-Zone
	   (Shop, Warenkorb, Kasse, Konto) außerhalb von .aivonyx-dashboard
	   rendert und den Plugin-Scope nicht sieht. Begründung für max():
	   Astra setzt html { font-size: 91.2% } — 2.75rem sind dort 40px. */
	--ax-touch:       max(2.75rem, 44px);

	/* v1.23.0: --ax-danger war NUR im Plugin-Scope definiert. Tabbar (rendert
	   im wp_footer) und die ganze Woo-Zone liegen außerhalb und fielen auf den
	   Literal-Fallback #C4373C zurück — „Rot" hatte damit zwei Werte. Jetzt
	   einer, und zwar der kontraststärkere: Weiß darauf hält 5,30:1. */
	--ax-danger:      #C4373C;

	/* v1.25.0: Bedienelement-Rand, Wert synchron zum Plugin-Token
	   (aivonyx-dashboard/assets/tokens.css). Kartenränder bleiben
	   --ax-border; nur Felder brauchen die 3:1-Kante (WCAG 1.4.11). */
	--ax-field-border: #8A8A8A;

	/* v1.25.0 · Überschriften-Schrift der App (Befund Audit 2026-08-12).
	   :root mappt --ax-font-display auf Roboto Mono — das ist die Stimme der
	   Landing-Pages und bleibt dort. Auf der App-Bühne rendern damit aber die
	   nackten Gutenberg-Überschriften (Konto, Einstellungen) in Mono, während
	   die Sektionen im Plugin Inter nutzen: zwei Überschriftenschriften in
	   derselben App. DESIGN.md schreibt Inter fest, hier folgt der Code —
	   gescoped, damit die LPs unberührt bleiben. */
	--ax-font-display: var(--ax-font-sans);

	/* v1.2.3: auch die BRAND-Slots pinnen — Astra color-0 (Primary)
	   ist im Live-Customizer ein helles Blau und färbte Greeting/
	   Hero/Insight falsch ein. CD-Soll: Deep-Petrol + Cyan. */
	--ax-deep:        #0A3A52;
	--ax-cyan:        #00D9FF;
}

body.ax-dashboard-page .site-content,
body.ax-dashboard-page .content-area,
body.ax-dashboard-page main.site-main {
	padding: 0;
	margin: 0;
}

body.ax-dashboard-page .ast-container,
body.ax-dashboard-page .entry-content,
body.ax-dashboard-page .post-content {
	max-width: 100%;
	padding: 0;
	margin: 0;
}

/* Kein zusätzlicher Abstand zwischen Gutenberg-Blöcken auf der Dashboard-Seite */
body.ax-dashboard-page .entry-content > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Nackte Gutenberg-Überschriften auf der App-Bühne (Profil etc.) in
   Sans (v1.8.2) — die Theme-Element-Basis setzt h1–h6 global auf
   --ax-font-display (= Mono-Alias, Landing-Page-Look). Der Alias selbst
   bleibt unangetastet: global umstellen wäre eine Markenentscheidung,
   die auch Founder-Circle/VIP-LPs träfe. */
body.ax-dashboard-page .entry-content h1:not(.aivonyx-dashboard *),
body.ax-dashboard-page .entry-content h2:not(.aivonyx-dashboard *),
body.ax-dashboard-page .entry-content h3:not(.aivonyx-dashboard *) {
	font-family: var(--ax-font-sans, 'Inter', sans-serif);
}

/* Block-Rhythmus 0.5rem, ALLE Viewports (v1.8.2, Wunsch Dirk). Vorher kam
   der Mobile-Abstand allein aus dem .ax-section-Top-Padding des Plugins —
   das ist seit Plugin 0.47.1 entfernt, ohne diese Regel klebten die Blöcke
   mobil aneinander. !important nötig wegen der Null-Regel oben. */
body.ax-dashboard-page .entry-content > * + * {
	margin-top: 0.5rem !important;
}

body.ax-dashboard-page .entry-content > .wp-block-html {
	margin: 0 !important;
}

/* Mobile (< 768px, v1.7.9): nackte Gutenberg-Blöcke (Konto, Einstellungen)
   bekommen Seitenrand — die Dashboard-Sektionen in .wp-block-html padden
   sich selbst (Plugin: .ax-section). Ab 768px übernimmt das
   entry-content-Padding unten. */
@media (max-width: 47.9375em) {
	body.ax-dashboard-page .entry-content > :not(.wp-block-html) {
		margin-left: var(--ax-space-5, 0.75rem) !important;
		margin-right: var(--ax-space-5, 0.75rem) !important;
	}
	/* v1.8.4: Mobil fehlte jedes Top-Padding — die Anamnese-Seite
	   (und jede App-Seite ohne Hero) klebte am oberen Viewport-Rand. */
	body.ax-dashboard-page .entry-content {
		padding-top: var(--ax-space-5, 0.75rem);
	}
}

/* Textseiten-Rhythmus (v1.8.4): Der globale 0.5rem-Block-Gap ist für
   Karten richtig, für Text-Abschnitte (Profil: Darstellung/Anmeldung/…)
   zu eng — Überschriften markieren Themenwechsel und brauchen Luft.
   (0,2,1) schlägt die (0,2,0)-!important-Gap-Regel. */
body.ax-dashboard-page .entry-content > h2 {
	margin-top: 1.75rem !important;
}

/* Tablet (≥ 768px): Frame leicht breiter, Bühnenrand sichtbar */
@media (min-width: 48em) {
	body.ax-dashboard-page {
		--ax-dashboard-max-width: 40rem; /* 640px */
	}
	body.ax-dashboard-page .entry-content {
		padding: var(--ax-space-7, 1rem) var(--ax-space-5, 0.75rem);
	}
}

/* Desktop (≥ 1024px): EINSPALTIG (Umbau v1.2.1 auf Wunsch Dirk,
   vorher 2-Spalten-Grid) — eine zentrierte Spalte, etwas breiter
   als Tablet, mit vertikalem Rhythmus zwischen den Sektionen. */
@media (min-width: 64em) {
	body.ax-dashboard-page {
		--ax-dashboard-max-width: 48rem; /* 768px */
	}
	body.ax-dashboard-page .entry-content {
		max-width: 50rem;
		margin: 0 auto;
		padding: var(--ax-space-9, 1.375rem) var(--ax-space-7, 1rem);
	}
	/* v1.8.2: Desktop-Sonderabstand (--ax-space-7) entfällt — der
	   0.5rem-Rhythmus oben gilt einheitlich für alle Viewports. */
	/* Hero ::after-Glow darf nach außen ragen, also overflow lösen */
	body.ax-dashboard-page .entry-content .ax-hero { overflow: visible; }
}

/* ------------------------------------------------------------------
   3. SECTION-GATE · Freischalt-Mechanismus
      .ax-section--locked   → Sektion vollständig ausgeblendet
      .ax-section--preview  → Sektion sichtbar, aber ausgegraut + Overlay
      Admin schaltet frei durch:
        a) Klasse entfernen, ODER
        b) DS-Conditional-Wrapper um den wp:html-Block:
           [dynamic if="user_meta:ax_gate_SEKTION" equals="1"]…[/dynamic]
   ------------------------------------------------------------------ */
.ax-section--locked {
	display: none !important;
}

.ax-section--preview {
	position: relative;
	pointer-events: none;
	user-select: none;
}

.ax-section--preview > * {
	opacity: 0.38;
	filter: blur(0.0625rem);
}

.ax-section--preview::after {
	content: 'Coming soon';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 600 var(--ax-text-sm, 0.6875rem) / 1 var(--ax-font-mono, 'Roboto Mono', monospace);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ax-gray, #6B6B6B);
	pointer-events: none;
}


/* ============================================================
   COLOR-SCHEME · Hell/Dunkel (Theme v1.2.0)
   ------------------------------------------------------------
   Umschaltung über html.ax-dark (View-Switch im Dashboard,
   localStorage 'aivonyx_color_scheme', FOUC-Schutz in
   functions.php). color-scheme schaltet native Controls
   (Datepicker, Checkboxen, Scrollbars) mit um.
   Token-Ownership: hier nur die BRAND-/Surface-Tokens des
   Themes — Plugin-eigene Tokens remappt tokens.css im Plugin.
   Gescoped auf die Dashboard-Bühne; LPs/Content unberührt.
   ============================================================ */
body.ax-dashboard-page {
	color-scheme: light;
}

html.ax-dark body.ax-dashboard-page {
	/* v1.9.0: native Form-Controls (Slider-Track, Inputs, Selects,
	   Checkboxen) dunkel rendern — ohne das wirkte der range-Track
	   als greller heller Balken auf dunkler Karte. */
	color-scheme: dark;
	color-scheme: dark;

	/* Surface-/Text-Remapping (Brand-Slots bleiben: deep, cyan) */
	--ax-white:       #121A21;   /* Card-/Content-Surface */
	--ax-black:       #EDF2F5;   /* Primärtext */
	--ax-gray-subtle: #0C141B;   /* App-/Subtle-BG */
	--ax-surface-50:  #161F27;
	--ax-border:      #28343F;
	--ax-gray:        #93A4B0;

	/* Lesbare Akzente auf dunklem Grund */
	--ax-cyan-text:   #4FD4EE;
	--ax-link:        #7FC4E8;
	--ax-link-hover:  var(--ax-cyan);

	background: var(--ax-gray-subtle);
}


/* ============================================================
   BOTTOM-NAV · App-Tab-Bar (Theme v1.4.0)
   ------------------------------------------------------------
   Fixe untere Navigationsleiste, gerendert via functions.php
   (wp_footer) NUR auf body.ax-dashboard-page. Icons aus dem
   Plugin-Sprite (#ax-i-*). Farben über Surface-/Brand-Tokens,
   die html.ax-dark oben für den Dunkelmodus remappt.
   ============================================================ */

/* Platz für die fixe Leiste, damit Inhalt nicht verdeckt wird.
   v1.7.9: 5rem → 6rem — die Leiste ist ~5.2rem hoch (Icon + Label +
   Padding + Border), 5rem war rechnerisch ZU KLEIN: der letzte Inhalt
   lief hinter die Tab-Bar. 6rem lässt ~0.8rem sichtbare Luft. */
body.ax-dashboard-page .entry-content {
	/* v1.28.3: 6rem → 6.5rem — die Leiste ist um 0.5rem gewachsen.
	   v1.28.4: → 7rem — Listen-Padding vertikal (+0.75rem) kam dazu. */
	padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
}

/* (v1.8.2: die 1.8.1-Gap-Regel an dieser Stelle war wirkungslos — sie
   verlor gegen die !important-Null-Regel oben; der 0.5rem-Rhythmus
   steht jetzt dort als !important-Regel.) */

.ax-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: var(--ax-white);
	border-top: 0.0625rem solid var(--ax-border);
	/* v1.28.3: +0.5rem unter den Items — nur safe-area ließ die Tabs
	   direkt an der Home-Indicator-/Wisch-Zone enden, Tippen kollidierte
	   auf dem iPhone mit der App-schließen-Geste (Dirk, 01.09.). */
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
}

/* v1.10.2: .ax-tabbar-Präfix (0-2-0) auf Liste/Zelle/Item — die Element-
   Regeln der Website-Typo (ul/li/a:not(.aivonyx-dashboard *), 0-1-1 in
   style.css) schlugen die Ein-Klassen-Regeln: 1.5rem Listen-Einzug schob
   die ganze Leiste nach rechts, li bekam Margin, Links Underline. Gleicher
   Unfalltyp wie v1.7.9 (Button-Skin), gleiches Gegenmittel. */
.ax-tabbar .ax-tabbar__list {
	display: flex;
	list-style: none;
	margin: 0 auto;
	/* v1.10.6: Innenabstand + Zellen-Gap — die Hover/Aktiv-Pills (1.10.5)
	   klebten sonst an der Display-Kante (erstes/letztes Item).
	   v1.28.4: zusätzlich 0.375rem vertikal — die Pill streckte sich auf
	   volle Leistenhöhe und klebte an der oberen Kante (Dirk, 02.09.). */
	padding: 0.375rem 0.5rem;
	gap: 0.25rem;
	max-width: 30rem;
}

.ax-tabbar .ax-tabbar__cell {
	flex: 1 1 0;
	margin: 0;
	padding: 0;
}

.ax-tabbar .ax-tabbar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	/* v1.23.0: 3.5rem waren real 51px, die CTA-Pille darin nur 40px
	   (51 minus 2x 0.375rem Rand). Die Zelle wächst auf mindestens 56px,
	   damit die Pille die 44px erreicht — sie trägt die tägliche
	   Kernaktion und war das kleinste Ziel der ganzen Navigation. */
	min-height: max(3.5rem, 56px);
	padding: 0.5rem 0.25rem;
	text-decoration: none;
	color: var(--ax-deep-700);
	font: 500 0.6875rem/1 var(--ax-font-sans, 'Inter', sans-serif);
	text-align: center;
	transition: color var(--ax-dur-base, 0.2s) ease, transform var(--ax-dur-fast, 0.12s) ease;
	/* Reset, falls der Eintrag ein <button> ist (z. B. Binah-Check-Trigger) —
	   für <a> ohne Wirkung. */
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	/* v1.17.0: Bezugspunkt für das Unread-Badge am Chat-Tab. Auf allen
	   Items, nicht nur dort — die anderen haben keine positionierten
	   Kinder, die Regel kostet sie nichts. */
	position: relative;
}

/* Unread-Badge am Chat-Tab (v1.17.0) — gesetzt von aivonyx_chatwoot_footer(),
   sobald Chatwoot ungelesene Support-Antworten meldet. Sitzt rechts oben am
   Icon, nicht an der Zellkante: bei 61px-Zellen wäre es sonst vom Nachbar-
   Label kaum unterscheidbar. Weiß auf --ax-danger = 5,3:1, WCAG AA. */
.ax-tabbar .ax-tabbar__badge {
	position: absolute;
	top: 0.25rem;
	left: 50%;
	margin-left: 0.3125rem;
	min-width: 1.0625rem;
	padding: 0 0.25rem;
	border-radius: var(--ax-radius-full, 999px);
	background: var(--ax-danger, #C4373C);
	color: #fff;
	font: 700 0.625rem/1.0625rem var(--ax-font-sans, 'Inter', sans-serif);
	text-align: center;
	pointer-events: none;
}

/* Spezifitäts-Fix (v1.7.9): style.css stylt Buttons außerhalb der Bühne
   als CTA (button:not(.aivonyx-dashboard *) → Deep-Petrol-Pill, 0-1-1).
   Die Tab-Bar rendert im wp_footer AUSSERHALB von .aivonyx-dashboard,
   der Reset oben (0-1-0) verlor die Kaskade — der Check-Trigger erschien
   als dunkler Pill an der rechten Viewport-Kante. Höhere Spezifität
   stellt den normalen Tab-Look wieder her. */
.ax-tabbar button.ax-tabbar__item {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0.5rem 0.25rem;
	color: var(--ax-deep-700);
	font: 500 0.6875rem/1 var(--ax-font-sans, 'Inter', sans-serif);
	/* v1.10.2: Buttons stretchen nicht auf Zellbreite (width:auto =
	   fit-content) — der Chat-Trigger klebte 31px schmal am Zellrand. */
	width: 100%;
}

/* v1.28.2: CTA-Optik des „Check"-Tabs entfernt (Wunsch Dirk 28.08.) —
   alle .ax-tabbar__item--cta-Regeln gelöscht, der Check ist wieder ein
   normaler Tab. Das 'cta'-Flag im Renderer (functions.php) bleibt. */

/* Tap-Feedback (v1.8.0): :hover existiert auf Touch nicht — ohne
   :active fühlen sich Taps tot an. */
.ax-tabbar .ax-tabbar__item:active:not(.ax-tabbar__item--disabled) {
	transform: scale(0.92);
}

/* Dark-Mode: --ax-deep/-700 werden im ax-dark-Remap NICHT umgemappt
   (blieben #0A3A52/#12517A) — auf der dunklen Leiste (#121A21) wären
   Labels unleserlich. --ax-gray remappt auf #93A4B0. */
html.ax-dark body.ax-dashboard-page .ax-tabbar .ax-tabbar__item {
	color: var(--ax-gray);
}
/* v1.10.5: Dark-Hover/-Aktiv analog zur Light-Pill — die Dark-Basisregel
   oben (0-4-1) schlägt sonst die Light-States. Cyan-Text bleibt: auf der
   dunklen Leiste hat er genug Kontrast, die Tint-Fläche macht ihn eindeutig. */
html.ax-dark body.ax-dashboard-page .ax-tabbar .ax-tabbar__item:hover:not(.ax-tabbar__item--disabled) {
	color: var(--ax-white, #fff);
	background: rgba(255, 255, 255, 0.07);
	border-radius: 0.75rem;
}
html.ax-dark body.ax-dashboard-page .ax-tabbar .ax-tabbar__item.is-active {
	color: var(--ax-cyan-text, var(--ax-cyan));
	background: var(--ax-info-tint, rgba(0, 217, 255, 0.16));
	border-radius: 0.75rem;
	font-weight: 700;
}
.ax-tabbar__item svg {
	width: 1.375rem;
	height: 1.375rem;
}

.ax-tabbar__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* v1.10.5: Hover/Aktiv waren nicht erkennbar (Dirk 08.08.) — Hover war
   nur gray→black, Aktiv Cyan-Text auf Weiß (zu wenig Kontrast). Beide
   States tragen jetzt eine Pill-Fläche; Textfarben mit Kontrastreserve. */
.ax-tabbar .ax-tabbar__item:hover:not(.ax-tabbar__item--disabled) {
	color: var(--ax-deep, #0A3A52);
	background: var(--ax-gray-subtle, #F5F5F5);
	border-radius: 0.75rem;
}

/* v1.7.9: .ax-tabbar-Prefix (0-3-0), damit der Fokus-Ring das
   box-shadow:none des Button-Resets oben (0-2-1) schlägt. */
.ax-tabbar .ax-tabbar__item:focus-visible {
	outline: 0;
	border-radius: 0.5rem;
	box-shadow: var(--ax-shadow-focus, 0 0 0 0.1875rem #00738F);
}

.ax-tabbar .ax-tabbar__item.is-active {
	color: var(--ax-info-fg, #004F5C);
	background: var(--ax-info-tint, rgba(0, 217, 255, 0.16));
	border-radius: 0.75rem;
	font-weight: 700;
}

.ax-tabbar__item--disabled {
	opacity: 0.42;
	cursor: default;
}

/* App-Modus mobil (< 64em, dort wo die Tabbar sichtbar ist): Website-Header
   und -Footer ausblenden — die Tabbar ist die Navigation, die Seite soll sich
   nach App anfühlen, nicht nach Website (Theme v1.7.8). Der Hell/Dunkel-
   Toggle aus dem Header ist mobil über die Einstellungen-Seite erreichbar
   ([aivonyx_theme_toggle] im Seiten-Content). */
@media (max-width: 63.9375em) {
	body.ax-dashboard-page .site-header,
	body.ax-dashboard-page .site-footer {
		display: none;
	}
}

/* ============================================================
   PAGE-TRANSITIONS · Cross-Document View Transitions (v1.11.0, Dirk 09.08.)
   ------------------------------------------------------------
   Navigation zwischen App-Seiten slidet von rechts nach links — rein
   deklarativ, kein JS. Greift nur, wenn BEIDE Seiten dieses Stylesheet
   laden (= App-Seiten); Browser ohne Support (Firefox) navigieren normal.
   Die Tabbar bekommt eine eigene Transition-Group und bleibt dadurch
   optisch stehen, statt mit der Seite mitzurutschen. Zurück-Navigation
   slidet bewusst in dieselbe Richtung (Richtungserkennung bräuchte JS).
   ============================================================ */
@view-transition {
	navigation: auto;
}
.ax-tabbar {
	view-transition-name: ax-tabbar;
}
@keyframes ax-vt-slide-in {
	from { transform: translateX(100%); }
}
@keyframes ax-vt-slide-out {
	to { transform: translateX(-30%); opacity: 0; }
}
::view-transition-old(root) {
	animation: 0.28s ease both ax-vt-slide-out;
}
::view-transition-new(root) {
	animation: 0.28s ease both ax-vt-slide-in;
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root),
	::view-transition-old(ax-tabbar),
	::view-transition-new(ax-tabbar),
	body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap a.button.loading::before {
		animation: none;
	}
}

/* Desktop (≥ 64em): Tabbar nicht mehr ausblenden (bis v1.10.2), sondern
   als vertikale Rail am linken Rand (Dirk 08.08.). Vertikal zentriert
   statt top:0, damit sie nicht unter dem Astra-Header-Logo liegt;
   reservierte Bühnen-Polsterung wieder auf den Desktop-Rhythmus. */
@media (min-width: 64em) {
	.ax-tabbar {
		left: 0;
		right: auto;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		width: 5.5rem;
		border-top: 0;
		border: 0.0625rem solid var(--ax-border);
		border-left: 0;
		border-radius: 0 0.75rem 0.75rem 0;
		padding: 0.5rem 0;
	}
	.ax-tabbar .ax-tabbar__list {
		flex-direction: column;
		max-width: none;
	}
	.ax-tabbar .ax-tabbar__cell {
		flex: 0 0 auto;
	}
	/* Content von der Rail freihalten — nur links, die Bühne bleibt zentriert genug. */
	body.ax-dashboard-page .site-content {
		padding-left: 6rem;
	}
	body.ax-dashboard-page .entry-content {
		padding-bottom: var(--ax-space-9, 1.375rem);
	}
}

/* ============================================================
   DARK-MODE · Astra Header + Footer (Theme v1.6.0)
   ------------------------------------------------------------
   Der Hell/Dunkel-Switch (html.ax-dark) remappt oben die App-Tokens;
   das Astra-Chrome (weiße Header-/Footer-Bars) blieb bisher hell. Hier
   die tragenden Astra-Wrapper auf die dunklen Surface-Tokens ziehen.
   !important, weil Astra die Farben per Customizer-CSS mit hoher
   Spezifität setzt. Gescoped auf html.ax-dark + die App-Bühne.
   ============================================================ */
html.ax-dark body.ax-dashboard-page .main-header-bar,
html.ax-dark body.ax-dashboard-page .ast-primary-header-bar,
html.ax-dark body.ax-dashboard-page .ast-mobile-header-content,
html.ax-dark body.ax-dashboard-page .main-header-menu,
html.ax-dark body.ax-dashboard-page .main-header-menu .sub-menu,
html.ax-dark body.ax-dashboard-page #colophon,
html.ax-dark body.ax-dashboard-page .site-primary-footer-wrap,
html.ax-dark body.ax-dashboard-page .site-below-footer-wrap {
	background-color: var(--ax-white) !important;   /* dunkle Card-Surface (#121A21) */
	border-color: var(--ax-border) !important;
}
/* Links/Texte im Header/Footer lesbar (in dark = heller Text-Token). */
html.ax-dark body.ax-dashboard-page #masthead,
html.ax-dark body.ax-dashboard-page #masthead a,
html.ax-dark body.ax-dashboard-page .main-header-menu a,
html.ax-dark body.ax-dashboard-page #colophon,
html.ax-dark body.ax-dashboard-page #colophon a {
	color: var(--ax-black) !important;              /* in dark = #EDF2F5 */
}
html.ax-dark body.ax-dashboard-page #masthead a:hover,
html.ax-dark body.ax-dashboard-page .main-header-menu a:hover,
html.ax-dark body.ax-dashboard-page #colophon a:hover {
	color: var(--ax-cyan) !important;
}

/* ============================================================
   KONTO-SEITE · Cards (v1.12.0, Mockup Dirk 09.08. genehmigt)
   ------------------------------------------------------------
   1) Identity-Card: dunkel wie der Dashboard-Header — Avatar-
      Initialen, Name, E-Mail · Mitglied seit, Abmelden als Ghost-
      Button. Markup: [ax_account_card] in functions.php.
   2) Generische Card-Zeilen (.ax-crow) + NEU-Badge für die
      Gutenberg-Gruppen der Konto-Seite (Darstellung, Anmeldung,
      Bestellungen, Deine Daten, Neuigkeiten).
   Karten-Grundfläche (.ax-card) kommt aus dem Plugin-CSS.
   ============================================================ */
.ax-account .ax-card {
	display: grid;
	grid-template-columns: 2.75rem 1fr auto;
	gap: 0.75rem;
	align-items: center;
	background: var(--ax-deep, #0A3A52);
	border-color: var(--ax-deep, #0A3A52);
	color: #fff;
	padding: 0.875rem 1rem;
}
.ax-account__avatar {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--ax-info-tint, rgba(0, 217, 255, 0.16));
	color: var(--ax-cyan-text, #00738F);
	display: grid;
	place-items: center;
	font: 600 0.875rem/1 var(--ax-font-sans, sans-serif);
}
.ax-account__who {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}
.ax-account__name { font: 600 0.9375rem/1.3 var(--ax-font-sans, sans-serif); }
.ax-account__meta {
	font: 500 0.6875rem/1.4 var(--ax-font-mono, monospace);
	color: rgba(255, 255, 255, 0.62);
	overflow-wrap: anywhere; /* lange E-Mail-Adressen */
}
.ax-account__logout {
	display: flex;
	align-items: center;
	min-height: var(--ax-touch);
	padding: 0 0.875rem;
	border: 0.0625rem solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	font: 500 0.75rem/1 var(--ax-font-sans, sans-serif);
	color: #fff;
	text-decoration: none;
	transition: background 0.15s ease;
}
.ax-account__logout:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.ax-account__logout:active { transform: scale(0.98); }

/* v1.28.5: Astra padded Top-Level-Gruppen mit 3em oben/unten, aber nur
   1.5–2em seitlich (--wp--custom--ast-default-block-*-padding, schlägt
   das .ax-card-Padding per Spezifität) — die Konto-Karten wirkten oben/
   unten aufgebläht (Dirk 02.09.). Astras Seitenwert auf alle vier Seiten
   → einheitlich, responsiv wie Astra selbst. */
body.ax-dashboard-page .entry-content > .wp-block-group.ax-card {
	padding: var(--wp--custom--ast-default-block-right-padding, 1.5em);
}

/* Karten-Typografie für Gutenberg-Gruppen mit .ax-card (Konto-Seite):
   kompakte H2 + kleiner grauer Hinweistext, wie in den Plugin-Blöcken. */
body.ax-dashboard-page .wp-block-group.ax-card h2 {
	font: 600 0.9375rem/1.3 var(--ax-font-sans, sans-serif);
	margin: 0 0 0.25rem;
}
body.ax-dashboard-page .wp-block-group.ax-card p {
	font: 400 0.75rem/1.5 var(--ax-font-sans, sans-serif);
	color: var(--ax-gray, #6B6B6B);
	margin: 0;
}

/* Card-Zeilen: Setting-Zeile (Label + Control) oder Link-Zeile (mit ›).
   Nutzung im Gutenberg-Content der Konto-Seite. */
.aivonyx-dashboard .ax-crow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: var(--ax-touch);
	padding: 0.375rem 0;
	border-top: 0.0625rem solid var(--ax-border, #E5E5E5);
	margin-top: 0.375rem;
}
a.ax-crow,
.aivonyx-dashboard a.ax-crow {
	text-decoration: none;
	color: inherit;
}
.aivonyx-dashboard .ax-crow__lbl { font: 500 0.8125rem/1.3 var(--ax-font-sans, sans-serif); display: block; }
.aivonyx-dashboard .ax-crow__sub { font: 400 0.6875rem/1.4 var(--ax-font-sans, sans-serif); color: var(--ax-gray, #6B6B6B); display: block; margin-top: 0.125rem; }
.aivonyx-dashboard .ax-crow__chev { color: var(--ax-gray, #6B6B6B); font-size: 1rem; line-height: 1; flex-shrink: 0; }
.aivonyx-dashboard .ax-crow--danger .ax-crow__lbl { color: var(--ax-danger, #C4373C); }
.aivonyx-dashboard .ax-badge-new {
	font: 700 0.5625rem/1 var(--ax-font-mono, monospace);
	letter-spacing: 0.06em;
	color: var(--ax-info-fg, #004F5C);
	background: var(--ax-info-tint, rgba(0, 217, 255, 0.16));
	border-radius: 999px;
	padding: 0.2rem 0.45rem;
	vertical-align: 0.1rem;
	margin-left: 0.375rem;
}

/* v1.13.0 · REGRESSION-FIX: Im Hell-Modus waren BEIDE Icons sichtbar.
   Ursache: `.aivonyx-dashboard svg { display: block }` (Plugin-CSS, 0-1-1)
   schlägt `.ax-theme-toggle__icon--sun { display: none }` (style.css, 0-1-0).
   Aufgefallen ist es erst mit v1.12.0, weil der Toggle seither INNERHALB der
   Konto-Karte (.aivonyx-dashboard) sitzt statt in einem freien Absatz.
   Höhere Spezifität stellt „genau ein Icon" wieder her. */
.aivonyx-dashboard .ax-theme-toggle__icon--sun { display: none; }
html.ax-dark .aivonyx-dashboard .ax-theme-toggle__icon--sun { display: block; }
html.ax-dark .aivonyx-dashboard .ax-theme-toggle__icon--moon { display: none; }

/* Einstellungs-Zeile (v1.13.0, Dirk 09.08.): Ansicht + Theme zweispaltig in
   EINER Zeile statt zwei Blöcken untereinander. Gutenberg-Flex-Gruppe
   .ax-settings; bei wenig Platz bricht sie um (wrap), statt zu quetschen. */
body.ax-dashboard-page .ax-card .ax-settings {
	gap: 0.5rem 1rem;
	align-items: center;
	margin-top: 0.625rem;
	padding-top: 0.625rem;
	border-top: 0.0625rem solid var(--ax-border, #E5E5E5);
}
body.ax-dashboard-page .ax-settings__theme {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Farbschema-Toggle (Profil-Seite): nacktes Mond-Icon war < 44px
   Trefferfläche (Touch-Audit v1.8.5). */
body.ax-dashboard-page .ax-theme-toggle,
body.ax-dashboard-page .ax-help-toggle,
body.ax-dashboard-page .ax-weather-toggle {
	min-width: 44px;
	min-height: var(--ax-touch);
	display: inline-grid;
	place-items: center;
}

/* Wetter-Toggle (v1.14.0): gleicher Zustands-Look wie die Hilfe; der Hinweis
   daneben erscheint nur, wenn der Browser den Standort blockiert. */
body.ax-dashboard-page .ax-weather-toggle-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
body.ax-dashboard-page .ax-weather-note:not(:empty) {
	max-width: 11rem;
	font: 400 0.6875rem/1.35 var(--ax-font-sans, sans-serif);
	color: var(--ax-danger, #C4373C);
	text-align: right;
}

/* Hilfe-Toggle (v1.13.0): Ein-Zustand als Cyan-Tint-Pill — anders als beim
   Farbschema gibt es kein zweites Icon, das den Zustand trägt. */
body.ax-dashboard-page .ax-help-toggle,
body.ax-dashboard-page .ax-weather-toggle {
	background: none;
	border: 0;
	border-radius: 999px;
	color: var(--ax-gray, #6B6B6B);
	cursor: pointer;
	padding: 0 0.625rem;
	transition: background 0.15s ease, color 0.15s ease;
}
body.ax-dashboard-page .ax-help-toggle[aria-pressed="true"],
body.ax-dashboard-page .ax-weather-toggle[aria-pressed="true"] {
	background: var(--ax-info-tint, rgba(0, 217, 255, 0.16));
	color: var(--ax-info-fg, #004F5C);
}
body.ax-dashboard-page .ax-help-toggle:focus-visible,
body.ax-dashboard-page .ax-weather-toggle:focus-visible {
	outline: 0;
	box-shadow: var(--ax-shadow-focus, 0 0 0 0.1875rem #00738F);
}


/* ============================================================
   ADDON-SHOP · Karten-Optik für das Woo-Shop-Archiv (/addons/)
   ------------------------------------------------------------
   WooCommerce und Astra rendern die Produkte unverändert selbst —
   AJAX-Warenkorb, Loop-Hooks, strukturierte Daten und Übersetzungen
   bleiben. Hier wird ausschließlich umgestaltet: aus dem Astra-
   Loop-Item wird die freigegebene Overlay-Karte
   (addons/card-mockup.html, Freigabe 2026-08-09).

   Gescopet auf body.ax-dashboard-page — greift nur
   auf /addons/, nicht auf Einzelprodukt, Warenkorb, Kasse oder
   andere Woo-Loops.

   Astra-Markup, gegen das gestylt wird (gemessen 2026-08-09):
     li.product
       div.astra-shop-thumbnail-wrap > a > img
       div.astra-shop-summary-wrap
         span.ast-woo-product-category                -> Chip
         a.ast-loop-product__link > h2.woocommerce-loop-product__title
         (optional Kurzbeschreibung)
         span.price
         a.button.add_to_cart_button                  -> Kauf-Button

   Zwei Eigenheiten dieser Instanz, die die Regeln unten erklären:

   1) Kauf-Button und Chip liegen INNERHALB von .astra-shop-summary-wrap.
      Damit beide an der Karte hängen und nicht am Textblock, bleibt der
      Wrap `position: static` und die Karte ist der Flex-Container —
      z-index greift auf Flex-Items auch ohne Positionierung.
   2) Die Wurzel-Schriftgröße liegt bei ~14,6px, nicht 16px. Kartenmaße
      und der Touch-Bereich stehen deshalb in px, nicht in rem, sonst
      schrumpft der Kauf-Button unter die 44px-Grenze (gemessen: 43,8px).
   ============================================================ */

/* Seitenluft fürs Shop-Archiv (v1.28.1): Die Bühne nullt .ast-container/
   .site-content/main — die Produktseite bekam dafür ihren Wrapper-Abstand
   (s. single-product, Zeile ~1250), das Archiv nie: Karten + Warenkorb-
   Leiste klebten am Displayrand (Befund Dirk 26.08., Screenshot).
   Gleicher Wert wie Produktseite und Plugin-Sektionen (--ax-space-5). */
body.ax-dashboard-page.post-type-archive-product .ast-woocommerce-container {
	padding: 0.75rem 0.75rem 1.5rem;
}

/* Das Spaltenraster bleibt bewusst bei Astra — die Anzahl je Breakpoint
   steht im Customizer (aktuell 4 / Tablet 3 / Mobil 1) und soll dort
   einstellbar bleiben. Hier nur der Abstand zwischen den Karten. */
body.ax-dashboard-page ul.products {
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0; /* Rest-Innenabstand von Woo/Astra raus — die Luft macht der Wrapper */
}

/* --- die Karte -------------------------------------------- */
body.ax-dashboard-page ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 16 / 9;
	/* v1.18.1: width:100% + 1px Rahmen ergaben ohne border-box 392px in einer
	   390px-Spalte — die Karten standen 2px über beide Ränder hinaus (gemessen
	   an allen 15). Diese Instanz hat keinen globalen border-box-Reset, s. den
	   Kommentar an der Warenkorb-Tabelle. */
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	background: #101012; /* bis das Bild geladen ist */
}

/* --- Bild als Kartenhintergrund --------------------------- */
body.ax-dashboard-page ul.products li.product .astra-shop-thumbnail-wrap {
	position: absolute;
	inset: 0;
	margin: 0;
}
body.ax-dashboard-page ul.products li.product .astra-shop-thumbnail-wrap > a {
	display: block;
	width: 100%;
	height: 100%;
}
body.ax-dashboard-page ul.products li.product img {
	width: 100%;
	height: 100%;
	margin: 0;
	display: block;
	border-radius: 0;
	object-fit: cover;
	/* Motiv liegt oben rechts, Text unten links (images/PROMPTS.md) —
	   beim Beschneiden also oben halten statt mittig. */
	object-position: top center;
}

/* Fehlt das Produktbild, zeigt WooCommerce einen hellen Platzhalter — auf dem
   wäre der weiße Kartentext unlesbar (gemessen an drei Produkten ohne Bild).
   Platzhalter ausblenden, dann trägt der dunkle Kartenhintergrund. */
body.ax-dashboard-page ul.products li.product img.woocommerce-placeholder {
	display: none;
}

/* Lesbarkeits-Verlauf über dem Bild, unter dem Text. */
body.ax-dashboard-page ul.products li.product .astra-shop-thumbnail-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top right, rgba(10, 10, 12, 0.82) 0%, rgba(10, 10, 12, 0.35) 42%, transparent 65%);
}

/* --- Textblock unten links -------------------------------- */
/* Bewusst NICHT positioniert: so ist die Karte der Bezugsrahmen für Chip
   und Kauf-Button. Als Flex-Item wirkt z-index trotzdem. */
body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap {
	position: static;
	z-index: 2;
	box-sizing: border-box;
	width: 100%;
	min-height: 56px; /* Platz für den 48px-Button, auch bei kurzem Text */
	margin: 0;
	padding: 0 68px 10px 12px; /* rechts frei für den Kauf-Button */
	text-align: left;
}

/* Kategorie-Chip oben links — Astra gibt ihn nativ aus, kein Zusatzcode. */
body.ax-dashboard-page ul.products li.product .ast-woo-product-category {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	max-width: calc(100% - 20px);
	margin: 0;
	padding: 3px 7px;
	font: 500 11px/1 var(--ax-font-num, ui-monospace, "SF Mono", Menlo, monospace);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ax-cyan, #00d9ff);
	border: 1px solid rgba(0, 217, 255, 0.4);
	border-radius: 4px;
	background: rgba(10, 10, 12, 0.8);
	backdrop-filter: blur(4px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.ax-dashboard-page ul.products li.product .ast-loop-product__link {
	display: block;
	text-decoration: none;
}
body.ax-dashboard-page ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font: 700 16px/1.2 var(--ax-font-ui, system-ui, -apple-system, sans-serif);
	color: #fff;
	/* Produktnamen kommen aus WooCommerce und sind in der Karte nicht
	   kürzbar — die Zeilengrenze gehört deshalb hierher. Zwei Zeilen
	   passen, weil der Chip oben an der Karte hängt und nicht am Text. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* Kurzbeschreibung. Kommt aus Astras Shop-Kartenstruktur (Customizer →
   WooCommerce → Produktkatalog → Struktur der Shopkarte) und heißt dort
   .ast-woo-shop-product-description. Ist sie dort abgeschaltet, rückt der
   Preis einfach hoch — die Karte bleibt heil. */
body.ax-dashboard-page ul.products li.product .ast-woo-shop-product-description,
body.ax-dashboard-page ul.products li.product .woocommerce-product-details__short-description {
	margin: 3px 0 0;
	font: 400 12px/1.4 var(--ax-font-ui, system-ui, -apple-system, sans-serif);
	color: rgba(255, 255, 255, 0.72);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
body.ax-dashboard-page ul.products li.product .ast-woo-shop-product-description p,
body.ax-dashboard-page ul.products li.product .woocommerce-product-details__short-description p {
	margin: 0;
}

body.ax-dashboard-page ul.products li.product .price {
	display: block;
	margin: 6px 0 0;
	font: 700 15px/1 var(--ax-font-num, ui-monospace, "SF Mono", Menlo, monospace);
	font-variant-numeric: tabular-nums;
	color: var(--ax-cyan, #00d9ff);
}
/* Woos Preis-Markup bringt eigene Farbe und Schrift mit */
body.ax-dashboard-page ul.products li.product .price .woocommerce-Price-amount,
body.ax-dashboard-page ul.products li.product .price .woocommerce-Price-currencySymbol,
body.ax-dashboard-page ul.products li.product .price bdi,
body.ax-dashboard-page ul.products li.product .price ins {
	color: inherit;
	font: inherit;
	text-decoration: none;
	background: none;
}
body.ax-dashboard-page ul.products li.product .price del {
	color: inherit;
	opacity: 0.55;
	font-size: 0.8em;
}

/* --- Kauf-Button unten rechts ----------------------------- */
/* Der Beschriftungstext wird optisch ausgeblendet (font-size: 0), das
   aria-label von WooCommerce bleibt und trägt die Bedeutung. Das Plus
   kommt aus ::before — ::after gehört WooCommerce, dort rendern die
   AJAX-Zustände .loading (Spinner) und .added (Haken). */
body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap a.button {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	box-sizing: border-box;
	width: 48px;  /* px statt rem: Wurzelgröße liegt hier bei ~14,6px */
	height: 48px;
	min-width: 0;
	min-height: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 10px;
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	box-shadow: 0 4px 14px rgba(0, 217, 255, 0.35);
	font-size: 0;
	line-height: 0;
	white-space: nowrap;
	overflow: hidden;
}
body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap a.button::before {
	content: "+";
	font: 700 22px/1 var(--ax-font-ui, system-ui, -apple-system, sans-serif);
	color: #06222b;
}
/* Externe Produkte (Oura, WHOOP) führen aus dem Shop heraus */
body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap a.button.product_type_external::before {
	content: "→";
}
/* Zustände selbst zeichnen. Auf dieser Instanz ist WooCommerces ::after leer
   (gemessen 2026-08-09: content "" bei .added) — verließe man sich darauf,
   wäre der Button nach dem Klick ein leeres Feld. */
body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap a.button.loading::before {
	content: "·· ·";
	font-size: 16px;
	letter-spacing: -1px;
	/* Dezenter Puls, damit Laden von einem eingefrorenen Button
	   unterscheidbar ist (UX-Review 2026-08-14). */
	animation: ax-cart-loading-pulse 1s ease-in-out infinite;
}
@keyframes ax-cart-loading-pulse {
	50% { opacity: 0.35; }
}
body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap a.button.added::before {
	content: "✓";
	font-size: 20px;
}
/* Falls WooCommerce doch ein Icon in ::after liefert, soll es passen und
   nicht neben dem Zeichen aus ::before stehen. */
body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap a.button::after {
	position: absolute;
	margin: 0;
	font-size: 18px;
	line-height: 1;
	color: #06222b;
}
body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap a.button.loading,
body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap a.button.added {
	opacity: 1; /* Woo dimmt .loading auf 0.25 — auf dem dunklen Bild unlesbar */
}
body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap a.button:hover,
body.ax-dashboard-page ul.products li.product .astra-shop-summary-wrap a.button:focus-visible {
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	filter: brightness(1.1);
}

/* v1.18.1: Die Regel für das „Warenkorb anzeigen"-Band (a.added_to_cart) ist
   ENTFERNT. Seit die Woo-Einstellung „nach dem Hinzufügen zur Warenkorb-Seite
   weiterleiten" gesetzt ist (Dirk 11.08.), leitet add-to-cart.js um, bevor das
   added_to_cart-Event feuert — der Link wird nie eingefügt. Zurückholen nur
   zusammen mit dem Häkchen. */

/* Externe Produkte haben keinen eigenen Preis — ohne Ersatz bliebe die
   Preiszeile leer und die Karte sähe unfertig aus. */
body.ax-dashboard-page ul.products li.product.product-type-external .astra-shop-summary-wrap::after {
	content: "from our partner";
	display: block;
	margin: 6px 0 0;
	font: 700 15px/1 var(--ax-font-num, ui-monospace, "SF Mono", Menlo, monospace);
	color: var(--ax-cyan, #00d9ff);
}
/* Wird beim externen Produkt doch ein Preis gepflegt, entfällt der Ersatz.
   :has() ist in allen aktuellen Browsern verfügbar; wo nicht, stünde nur
   „beim Partner" unter dem Preis — sichtbar, aber nicht kaputt. */
body.ax-dashboard-page ul.products li.product.product-type-external .astra-shop-summary-wrap:has(.price)::after {
	content: none;
}

/* --- Woo-Beiwerk, das die Karte sprengen würde ------------- */
body.ax-dashboard-page ul.products li.product .star-rating,
body.ax-dashboard-page ul.products li.product .woocommerce-product-rating {
	display: none;
}
/* Angebots-Badge bleibt sichtbar, wandert nach oben rechts (links: Chip) */
body.ax-dashboard-page ul.products li.product span.onsale {
	position: absolute;
	top: 10px;
	right: 10px;
	left: auto;
	z-index: 3;
	margin: 0;
	padding: 3px 7px;
	min-width: 0;
	min-height: 0;
	line-height: 1.2;
	border-radius: 4px;
	font: 700 10px/1.2 var(--ax-font-ui, system-ui, -apple-system, sans-serif);
}

/* --- Warenkorb-Leiste (v1.19.0) ---------------------------- */
/* Gerendert von aivonyx_cart_bar() auf Shop-Archiv und Produktseite, nur mit
   Inhalt im Korb. Begründung gegen die Tab-Sub-Navigation steht dort.
   Touch-Höhe 48px wie der Kauf-Button; Cyan-Rand statt Cyan-Fläche, damit sie
   nicht mit dem Kauf-Button um die Aufmerksamkeit konkurriert. */
body.ax-dashboard-page .ax-cartbar {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
	margin: 0 0 0.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--ax-cyan, #00d9ff);
	border-radius: 12px;
	background: var(--ax-white, #fff);
	color: var(--ax-black, #1a1a1a);
	font: 600 0.875rem/1.2 var(--ax-font-sans, system-ui, sans-serif);
	text-decoration: none;
}
body.ax-dashboard-page .ax-cartbar__what {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
body.ax-dashboard-page .ax-cartbar__sum {
	flex: 0 0 auto;
	font-family: var(--ax-font-mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
	color: var(--ax-cyan-text, #00738F);
}
/* Der Pfeil ist Zierde, die ganze Leiste ist der Link — deshalb kein zweiter
   Fokuspunkt, sondern ein ::after am Text. */
body.ax-dashboard-page .ax-cartbar__go {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--ax-cyan-text, #00738F);
}
body.ax-dashboard-page .ax-cartbar__go::after {
	content: ' \203A';
}
/* Unter 360px hat „3 Artikel im Warenkorb · 663,00 € · Zum Warenkorb" keinen
   Platz mehr — dort fällt das Label weg, Zahl und Summe genügen. */
@media (max-width: 22.5em) {
	body.ax-dashboard-page .ax-cartbar__go { display: none; }
}

/* --- Archiv-Kopf: Titel, Trefferzahl, Sortierung (v1.18.1) --- */
/* Der Titel „Addons" kommt aus Astra Pros Archiv-Banner, einer <section>
   VOR #content — nicht aus .entry-header wie auf Warenkorb/Kasse:
     <section class="ast-archive-entry-banner" data-banner-layout="layout-2">
   Astra gibt ihr eine helle Fläche (gemessen: rgb(238,238,238)) und eine
   29px-H1 in Deep-Petrol. Auf der dunklen Bühne war das ein weißer Balken
   quer über die App (Screenshot Dirk 11.08.). Abgeräumt statt umgefärbt: die
   Bühne bringt ihren Hintergrund selbst mit.
   Alternative wäre der Astra-Customizer (Banner für Produkt-Archive aus) —
   dann fehlt der Titel ganz. Deshalb hier: Fläche weg, Titel bleibt, Optik
   wie die H1 auf Warenkorb und Kasse. */
body.ax-dashboard-page section.ast-archive-entry-banner {
	padding: var(--ax-space-7, 1rem) var(--ax-space-5, 0.75rem) 0;
	background: none;
	border: 0;
	min-height: 0;
}
body.ax-dashboard-page section.ast-archive-entry-banner .ast-container {
	padding: 0;
	margin: 0;
}
/* Der Attribut-Hook [data-post-type] steht hier NICHT zur Zierde: Astras
   dynamisches Inline-CSS setzt
     .ast-archive-entry-banner[data-post-type="product"] .ast-container h1
       { font-weight: 600; font-size: 2rem }
   mit (0,3,1) — ohne Attribut und .ast-container käme diese Regel auf (0,2,3)
   und verlöre Größe und Gewicht, während Farbe und Ausrichtung durchkämen.
   Genau so gemessen: Titel blieb bei 29px (2rem bei ~14,6px Wurzel). */
body.ax-dashboard-page section.ast-archive-entry-banner[data-post-type] .ast-container h1 {
	margin: 0;
	padding: 0;
	font: 700 1.375rem/1.25 var(--ax-font-sans, 'Inter', system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
	text-align: left;
}
/* Trefferzahl und Sortierung standen in Fließtextgröße nebeneinander und
   fraßen zwei Zeilen über den Karten. Jetzt eine Zeile: Zahl als Mikro-Label
   links, Sortier-Select kompakt rechts. */
body.ax-dashboard-page .woocommerce-result-count {
	margin: 0;
	font: 500 0.6875rem/1 var(--ax-font-mono, ui-monospace, monospace);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ax-gray, #6B6B6B);
}
body.ax-dashboard-page form.woocommerce-ordering {
	margin: 0;
}
body.ax-dashboard-page form.woocommerce-ordering select.orderby {
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	height: var(--ax-touch);   /* v1.23.0: 36px waren unter der Touch-Grenze */
	padding: 0 1.75rem 0 0.625rem;
	border: 1px solid var(--ax-field-border, #8A8A8A);
	border-radius: 8px;
	background: var(--ax-white, #fff);
	color: var(--ax-black, #1a1a1a);
	font: 500 0.8125rem/1 var(--ax-font-sans, system-ui, sans-serif);
}
/* Bewusst NICHT versucht: Trefferzahl und Sortierung per Flex auf
   .ast-woocommerce-container in eine Zeile zu ziehen. Dieser Container hält
   auch das Produkt-Grid, die Hinweise und die Pagination — sie würden
   mit-Flex-Items und könnten nebeneinander rutschen. Zwei kompakte Zeilen
   sind billiger als ein Layout, das an einer fremden Markup-Änderung kippt. */


/* ============================================================
   ADDON-PRODUKTSEITE · /produkt/…
   ------------------------------------------------------------
   Seit Theme v1.16.0 zählt das Einzelprodukt zur App-Bühne
   (aivonyx_is_dashboard_page → is_product). Damit trägt der Body
   ax-dashboard-page, die Tokens --ax-black/--ax-white/--ax-gray
   sind gesetzt und werden von html.ax-dark umgemappt — Hell und
   Dunkel kommen dadurch von selbst.

   WooCommerce und Astra rendern die Seite unverändert: Galerie,
   Warenkorb-Formular, Mengenfeld, Variantenauswahl, Reiter und
   „Ähnliche Produkte" bleiben funktional. Nur Optik.

   Die Karten unter „Ähnliche Produkte" kommen aus dem Abschnitt
   „Addon-Shop" weiter oben — derselbe Selektor, kein Duplikat.
   ============================================================ */

/* Die Bühne setzt .ast-container auf padding: 0 (Zeile ~70) — ohne
   Gegenmaßnahme klebt die Produktseite an den Rändern. */
body.ax-dashboard-page.single-product .ast-woocommerce-container {
	padding: 0.75rem 0.75rem 1.5rem;
}

/* --- Bild als 16:9-Karte wie im Shop ----------------------- */
body.ax-dashboard-page.single-product .woocommerce-product-gallery {
	position: relative;
	width: 100% !important; /* Astra setzt hier eine Spaltenbreite */
	float: none;
	margin: 0 0 0.875rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	background: #101012;
}
body.ax-dashboard-page.single-product .woocommerce-product-gallery__wrapper,
body.ax-dashboard-page.single-product .woocommerce-product-gallery__image {
	height: 100%;
	margin: 0;
}
body.ax-dashboard-page.single-product .woocommerce-product-gallery img {
	width: 100%;
	height: 100%;
	margin: 0;
	display: block;
	object-fit: cover;
	object-position: top center; /* Motiv liegt oben rechts */
	border-radius: 0;
}
/* Zoom-Lupe bleibt bedienbar, nur zurückgenommen */
body.ax-dashboard-page.single-product .woocommerce-product-gallery__trigger {
	top: 0.625rem;
	right: 0.625rem;
	left: auto;
	z-index: 3;
	background: rgba(10, 10, 12, 0.6);
	color: var(--ax-cyan, #00d9ff);
	backdrop-filter: blur(4px);
}
body.ax-dashboard-page.single-product span.onsale {
	top: 0.625rem;
	left: 0.625rem;
	right: auto;
	z-index: 3;
	min-width: 0;
	min-height: 0;
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	font: 700 0.6875rem/1.2 var(--ax-font-sans, system-ui, sans-serif);
}

/* --- Kopfbereich ------------------------------------------ */
body.ax-dashboard-page.single-product .summary.entry-summary {
	width: 100% !important;
	float: none;
	margin: 0;
}
/* Der Produkttitel trägt product_title UND entry-title. Die App-Bühne blendet
   .entry-title global mit !important aus (Regel ganz oben in Abschnitt 1),
   damit Dashboard-Seiten keine H1 zeigen — dadurch verschwand hier der
   Produktname. Auf der Detailseite ist der Titel aber Inhalt, nicht
   Seitenüberschrift, und muss zurückgeholt werden. */
body.ax-dashboard-page.single-product .summary .product_title.entry-title {
	display: block !important;
}
body.ax-dashboard-page.single-product .product_title {
	margin: 0 0 0.35rem;
	font: 700 1.375rem/1.25 var(--ax-font-sans, 'Inter', system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
}
body.ax-dashboard-page.single-product .summary .price,
body.ax-dashboard-page.single-product .woocommerce-variation-price .price {
	margin: 0 0 0.5rem;
	font: 700 1.25rem/1.2 var(--ax-font-mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
	color: var(--ax-cyan-text, #00738F);
}
body.ax-dashboard-page.single-product .price .woocommerce-Price-amount,
body.ax-dashboard-page.single-product .price .woocommerce-Price-currencySymbol,
body.ax-dashboard-page.single-product .price bdi,
body.ax-dashboard-page.single-product .price ins {
	color: inherit;
	font: inherit;
	text-decoration: none;
	background: none;
}
body.ax-dashboard-page.single-product .price del {
	color: inherit;
	opacity: 0.55;
	font-size: 0.8em;
}
body.ax-dashboard-page.single-product .woocommerce-product-details__short-description {
	margin: 0 0 1rem;
	font: 400 0.9375rem/1.5 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-gray, #6B6B6B);
}
body.ax-dashboard-page.single-product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* --- Warenkorb-Formular ----------------------------------- */
/* Menge und Kauf-Button in einer Zeile, Touch-Höhe 48px wie in der Karte. */
body.ax-dashboard-page.single-product form.cart {
	display: flex;
	align-items: center; /* nicht stretch: sonst zieht der Mengen-Wrapper mit */
	gap: 0.625rem;
	margin: 0 0 1rem;
}
body.ax-dashboard-page.single-product form.cart .quantity {
	margin: 0;
	flex: 0 0 auto;
}
/* v1.18.0: Warenkorb-Zeilen tragen dasselbe Mengenfeld — ein Selektor mehr
   statt eines zweiten Regelsatzes (Muster aus v1.16.0). Die hohe Spezifität
   bleibt: gegen Astras .woocommerce .quantity input.qty (0-3-2) würde eine
   allgemeinere Regel gleich stark sein und über die Ladereihenfolge
   entschieden — darauf soll sich hier nichts verlassen. */
body.ax-dashboard-page.woocommerce-cart td.product-quantity .quantity input.qty,
body.ax-dashboard-page.single-product form.cart .quantity input.qty {
	box-sizing: border-box;
	width: 4rem;
	height: 48px;
	padding: 0 0.25rem;
	text-align: center;
	border: 1px solid var(--ax-field-border, #8A8A8A);
	border-radius: 10px;
	background: var(--ax-white, #fff);
	color: var(--ax-black, #1a1a1a);
	font: 600 1rem/1 var(--ax-font-mono, ui-monospace, monospace);
}
/* Astras Button-Regeln (.woocommerce button.button.alt, 0-3-1) schlagen einen
   Zwei-Klassen-Selektor und setzen padding 10px/20px auf content-box — daraus
   wurden aus 48px gemessene 68px. Deshalb .button.alt mitnehmen und die Box
   auf border-box zwingen. */
body.ax-dashboard-page.single-product form.cart button.single_add_to_cart_button.button.alt,
body.ax-dashboard-page.single-product form.cart .single_add_to_cart_button {
	box-sizing: border-box;
	flex: 1 1 auto;
	height: 48px;
	min-height: 48px;
	padding: 0 1rem;
	border: 0;
	border-radius: 10px;
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	font: 700 0.9375rem/1 var(--ax-font-sans, system-ui, sans-serif);
	box-shadow: 0 4px 14px rgba(0, 217, 255, 0.35);
}
body.ax-dashboard-page.single-product .single_add_to_cart_button:hover,
body.ax-dashboard-page.single-product .single_add_to_cart_button:focus-visible {
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	filter: brightness(1.1);
}
/* Externe Produkte (Oura, WHOOP): kein Mengenfeld, Button über volle Breite */
body.ax-dashboard-page.single-product form.cart .single_add_to_cart_button:only-child {
	width: 100%;
}

/* --- Variantenauswahl ------------------------------------- */
body.ax-dashboard-page.single-product .variations {
	width: 100%;
	margin: 0 0 0.875rem;
	border: 0;
}
body.ax-dashboard-page.single-product .variations th,
body.ax-dashboard-page.single-product .variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}
body.ax-dashboard-page.single-product .variations th.label label {
	margin: 0 0 0.25rem;
	font: 600 0.8125rem/1.2 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-gray, #6B6B6B);
}
body.ax-dashboard-page.single-product .variations td.value {
	margin-bottom: 0.625rem;
}
body.ax-dashboard-page.single-product .variations select {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 0.625rem;
	border: 1px solid var(--ax-field-border, #8A8A8A);
	border-radius: 10px;
	background: var(--ax-white, #fff);
	color: var(--ax-black, #1a1a1a);
	font: 400 0.9375rem/1 var(--ax-font-sans, system-ui, sans-serif);
}
body.ax-dashboard-page.single-product .reset_variations {
	display: inline-block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--ax-gray, #6B6B6B);
}

/* --- Meta-Zeile ------------------------------------------- */
body.ax-dashboard-page.single-product .product_meta {
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ax-border, #e5e5e5);
	font: 400 0.75rem/1.6 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-gray, #6B6B6B);
}
body.ax-dashboard-page.single-product .product_meta a {
	color: var(--ax-cyan-text, #00738F);
	text-decoration: none;
}

/* --- Reiter (Beschreibung / ggf. Bewertungen) -------------- */
/* Astras Reiter tragen Rahmen, Schrägen und eine Trennlinie via ::before —
   die werden hier abgeräumt, die Tab-Umschaltung bleibt Astras JS. */
body.ax-dashboard-page.single-product .woocommerce-tabs {
	margin-top: 1.25rem;
}
body.ax-dashboard-page.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 0.75rem;
	padding: 0 0 0.5rem;
	border: 0;
	border-bottom: 1px solid var(--ax-border, #e5e5e5);
}
body.ax-dashboard-page.single-product .woocommerce-tabs ul.tabs::before,
body.ax-dashboard-page.single-product .woocommerce-tabs ul.tabs::after,
body.ax-dashboard-page.single-product .woocommerce-tabs ul.tabs li::before,
body.ax-dashboard-page.single-product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
body.ax-dashboard-page.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 8px;
}
body.ax-dashboard-page.single-product .woocommerce-tabs ul.tabs li a {
	/* v1.23.0: block + 0.4rem Padding ergaben ~35px Trefferhöhe. */
	display: inline-flex;
	align-items: center;
	min-height: var(--ax-touch);
	padding: 0.4rem 0.75rem;
	font: 600 0.875rem/1.2 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-gray, #6B6B6B);
	text-decoration: none;
}
body.ax-dashboard-page.single-product .woocommerce-tabs ul.tabs li.active {
	background: var(--ax-white, #fff);
}
body.ax-dashboard-page.single-product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ax-cyan-text, #00738F);
}
body.ax-dashboard-page.single-product .woocommerce-Tabs-panel {
	font: 400 0.9375rem/1.6 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
}
body.ax-dashboard-page.single-product .woocommerce-Tabs-panel h2 {
	display: none; /* „Beschreibung" steht schon im Reiter */
}

/* --- Ähnliche Produkte ------------------------------------ */
/* Karten selbst: Abschnitt „Addon-Shop" oben. Hier nur die Überschrift. */
body.ax-dashboard-page.single-product .related.products,
body.ax-dashboard-page.single-product .upsells.products {
	margin-top: 1.5rem;
}
body.ax-dashboard-page.single-product .related.products > h2,
body.ax-dashboard-page.single-product .upsells.products > h2 {
	margin: 0 0 0.5rem;
	font: 500 0.8125rem/1 var(--ax-font-mono, ui-monospace, monospace);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ax-gray, #6B6B6B);
}

/* --- Hinweise (Warenkorb-Meldungen) ----------------------- */
/* v1.18.0: gilt auf allen Woo-Bühnenseiten — Warenkorb, Kasse und Konto
   zeigen dieselben Meldungen („Warenkorb aktualisiert", „Gutschein
   angewendet", Fehler der Kasse). .woocommerce-error kommt dazu, mit
   Danger-Rand statt Cyan: eine fehlgeschlagene Zahlung darf nicht wie
   eine Bestätigung aussehen. */
body.ax-dashboard-page.single-product .woocommerce-message,
body.ax-dashboard-page.single-product .woocommerce-info,
body.ax-dashboard-page.woocommerce-cart .woocommerce-message,
body.ax-dashboard-page.woocommerce-cart .woocommerce-info,
body.ax-dashboard-page.woocommerce-checkout .woocommerce-message,
body.ax-dashboard-page.woocommerce-checkout .woocommerce-info,
body.ax-dashboard-page.woocommerce-account .woocommerce-message,
body.ax-dashboard-page.woocommerce-account .woocommerce-info {
	border-top-color: var(--ax-cyan, #00d9ff);
	background: var(--ax-white, #fff);
	color: var(--ax-black, #1a1a1a);
	border-radius: 10px;
}
body.ax-dashboard-page .woocommerce-error {
	border-top-color: var(--ax-danger, #c4373c);
	background: var(--ax-white, #fff);
	color: var(--ax-black, #1a1a1a);
	border-radius: 10px;
}
body.ax-dashboard-page.single-product .woocommerce-message .button,
body.ax-dashboard-page.single-product .woocommerce-info .button,
body.ax-dashboard-page.woocommerce-cart .woocommerce-message .button,
body.ax-dashboard-page.woocommerce-checkout .woocommerce-message .button,
body.ax-dashboard-page.woocommerce-account .woocommerce-message .button,
body.ax-dashboard-page.woocommerce-account .woocommerce-info .button {
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	border-radius: 8px;
	text-decoration: none; /* v1.27.1: Leere-Bestellliste-Buttons erbten den Link-Unterstrich */
}


/* ============================================================
   WARENKORB & KASSE · Kaufstrecke auf der App-Bühne (v1.18.0)
   ------------------------------------------------------------
   Erkennung: aivonyx_is_dashboard_page() → is_cart() /
   is_checkout() / is_account_page(). Der Body trägt dadurch
   ax-dashboard-page UND Woos eigene Klassen (woocommerce-cart,
   -checkout, -order-received, -account); daran hängen die Regeln.

   Markup bleibt unangetastet: klassische Shortcode-Seiten
   (IDs 492 „Warenkorb" / 493 „Kasse" auf dieser Instanz), kein
   Template-Override, keine Cart-/Checkout-Blocks. Woos
   shop_table_responsive stapelt die Tabelle unter 768px selbst
   (td::before aus data-title) — die Struktur wird hier nicht
   nachgebaut, nur umgestaltet.

   Vier Eigenheiten, an denen ein naiver Entwurf scheitert; sie
   stehen als Kommentar an den betroffenen Regeln:
   1) .entry-title ist auf der Bühne global mit !important aus
      (Abschnitt 1) — „Warenkorb"/„Kasse" verschwand komplett.
      Gleiche Falle wie der Produkttitel in v1.16.0.
   2) Die H1 sitzt in header.entry-header NEBEN .entry-content,
      bekommt also weder dessen Padding noch die Mobile-Margins
      der Bühne — sie braucht eigenes Padding.
   3) #customer_details ist eine col2-set, aber .col-2 bleibt
      LEER (Woo legt Rechnung, Versand und Zusatzfelder in
      .col-1). Woos 48%-Float hätte das Formular auf halbe
      Breite gequetscht, daneben nichts.
   4) Astras .woocommerce button.button.alt (0-3-1) schlägt
      Zwei-Klassen-Selektoren und rechnet auf content-box —
      dieselbe 68px-statt-48px-Falle wie auf der Produktseite.
   ============================================================ */

/* --- Seitentitel zurückholen (Falle 1 + 2) ----------------- */
body.ax-dashboard-page.woocommerce-cart .entry-header,
body.ax-dashboard-page.woocommerce-checkout .entry-header,
body.ax-dashboard-page.woocommerce-account .entry-header {
	padding: var(--ax-space-7, 1rem) var(--ax-space-5, 0.75rem) 0;
}
body.ax-dashboard-page.woocommerce-cart .entry-title,
body.ax-dashboard-page.woocommerce-checkout .entry-title,
body.ax-dashboard-page.woocommerce-account .entry-title {
	display: block !important;
	margin: 0;
	font: 700 1.375rem/1.25 var(--ax-font-sans, 'Inter', system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
}

/* --- Tabellen als Karte ------------------------------------ */
body.ax-dashboard-page.woocommerce-cart table.shop_table,
body.ax-dashboard-page.woocommerce-checkout table.shop_table,
body.ax-dashboard-page.woocommerce-account table.shop_table {
	width: 100%;
	margin: 0 0 0.875rem;
	border: 1px solid var(--ax-border, #e5e5e5);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden; /* klemmt die Zellen in die Radien */
	background: var(--ax-white, #fff);
	font: 400 0.9375rem/1.4 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
	/* v1.18.1: Diese Instanz hat KEINEN globalen border-box-Reset (gemessen:
	   .entry-content, .cart-collaterals und .cart_totals rechnen content-box).
	   width:100% plus 1px Rahmen ergab 370px in einer 368px-Spalte. Jede
	   Regel hier, die Breite und Rahmen/Padding kombiniert, muss border-box
	   selbst setzen — darauf ist im Theme kein Verlass. */
	box-sizing: border-box;
}
body.ax-dashboard-page.woocommerce-cart table.shop_table th,
body.ax-dashboard-page.woocommerce-cart table.shop_table td,
body.ax-dashboard-page.woocommerce-checkout table.shop_table th,
body.ax-dashboard-page.woocommerce-checkout table.shop_table td,
body.ax-dashboard-page.woocommerce-account table.shop_table th,
body.ax-dashboard-page.woocommerce-account table.shop_table td {
	padding: 0.75rem;
	border: 0;
	border-bottom: 1px solid var(--ax-border, #e5e5e5);
	vertical-align: middle;
}
body.ax-dashboard-page.woocommerce-cart table.shop_table thead th,
body.ax-dashboard-page.woocommerce-checkout table.shop_table thead th,
body.ax-dashboard-page.woocommerce-account table.shop_table thead th {
	font: 500 0.6875rem/1 var(--ax-font-mono, ui-monospace, monospace);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ax-gray, #6B6B6B);
}
body.ax-dashboard-page.woocommerce-cart table.shop_table tbody tr:last-child td,
body.ax-dashboard-page.woocommerce-checkout table.shop_table tr:last-child td,
body.ax-dashboard-page.woocommerce-checkout table.shop_table tfoot tr:last-child td,
body.ax-dashboard-page.woocommerce-account table.shop_table tbody tr:last-child td,
body.ax-dashboard-page.woocommerce-account table.shop_table tfoot tr:last-child td {
	border-bottom: 0;
}

/* Beträge durchgängig als Zahl lesen: Mono + tabular-nums, damit
   Spalten nicht springen. Cyan bleibt der Endsumme vorbehalten. */
body.ax-dashboard-page.woocommerce-cart .woocommerce-Price-amount,
body.ax-dashboard-page.woocommerce-checkout .woocommerce-Price-amount {
	font-family: var(--ax-font-mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
	color: inherit;
}
body.ax-dashboard-page.woocommerce-cart tr.order-total .woocommerce-Price-amount,
body.ax-dashboard-page.woocommerce-checkout tr.order-total .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--ax-cyan-text, #00738F);
}

/* --- Warenkorb-Zeile: Produkt --------------------------------- */
body.ax-dashboard-page.woocommerce-cart td.product-thumbnail img {
	width: 3.5rem;
	height: 3.5rem;
	object-fit: cover;
	border-radius: 10px;
	background: #101012;
}
body.ax-dashboard-page.woocommerce-cart td.product-name a {
	font: 600 0.9375rem/1.3 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
	text-decoration: none;
}
/* Astra rendert das Entfernen-X als SVG mit fill: currentColor —
   die Farbe kommt also über color, nicht über background. */
body.ax-dashboard-page.woocommerce-cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* v1.23.0: 2rem waren real 29px. Das Entfernen-X ist die einzige
	   destruktive Aktion in der Warenkorb-Zeile — zu klein heißt hier
	   entweder danebentippen oder versehentlich löschen. */
	width: var(--ax-touch);
	height: var(--ax-touch);
	border-radius: 8px;
	background: none;
	color: var(--ax-gray, #6B6B6B);
	font-size: 1rem;
}
body.ax-dashboard-page.woocommerce-cart td.product-remove a.remove:hover,
body.ax-dashboard-page.woocommerce-cart td.product-remove a.remove:focus-visible {
	background: none;
	color: var(--ax-danger, #c4373c);
}

/* --- Mobile Warenkorb-Zeile als Karten-Grid ------------------- */
/* Breakpoint bewusst 48em (768px, INKLUSIVE) statt der 47.9375em der
   Bühne: Woos shop_table_responsive blendet die Kopfzeile bei
   max-width: 768px aus. Mit 47.9375em stünde bei genau 768px eine
   Tabelle ohne Kopfzeile, aber im Tabellen-Layout. */
@media (max-width: 48em) {
	body.ax-dashboard-page.woocommerce-cart tr.cart_item {
		display: grid;
		grid-template-columns: 3.5rem 1fr auto;
		grid-template-areas:
			"thumb name  remove"
			"thumb qty   total";
		gap: 0.375rem 0.625rem;
		align-items: center;
		padding: 0.75rem;
		border-bottom: 1px solid var(--ax-border, #e5e5e5);
	}
	body.ax-dashboard-page.woocommerce-cart tr.cart_item td {
		padding: 0;
		border: 0;
		text-align: left;
	}
	body.ax-dashboard-page.woocommerce-cart td.product-thumbnail { grid-area: thumb; align-self: start; }
	body.ax-dashboard-page.woocommerce-cart td.product-name     { grid-area: name; }
	body.ax-dashboard-page.woocommerce-cart td.product-quantity { grid-area: qty; }
	body.ax-dashboard-page.woocommerce-cart td.product-subtotal { grid-area: total; text-align: right; font-weight: 600; }
	body.ax-dashboard-page.woocommerce-cart td.product-remove   { grid-area: remove; text-align: right; }
	/* Einzelpreis raus: bei Menge 1 steht er doppelt (= Zwischensumme),
	   und die Zwischensumme ist die Zahl, die der Klient prüfen will.
	   Der Einzelpreis steht einen Tap entfernt auf der Produktseite. */
	body.ax-dashboard-page.woocommerce-cart td.product-price { display: none; }
	/* Woos data-title-Labels („Anzahl:", „Zwischensumme:") bleiben als
	   Mikro-Label stehen, aber im Bühnen-Stil statt fett und gefloatet. */
	body.ax-dashboard-page.woocommerce-cart tr.cart_item td::before {
		display: block;
		float: none;
		margin-bottom: 0.15rem;
		font: 500 0.6875rem/1 var(--ax-font-mono, ui-monospace, monospace);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--ax-gray, #6B6B6B);
	}
	body.ax-dashboard-page.woocommerce-cart td.product-remove::before,
	body.ax-dashboard-page.woocommerce-cart td.product-thumbnail::before,
	body.ax-dashboard-page.woocommerce-cart td.product-name::before { content: none; }
}

/* --- Gutschein + „Warenkorb aktualisieren" -------------------- */
body.ax-dashboard-page.woocommerce-cart td.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	padding: 0.75rem;
}
body.ax-dashboard-page.woocommerce-cart td.actions .coupon {
	display: flex;
	gap: 0.5rem;
	flex: 1 1 14rem;
	float: none; /* Woo floatet den Gutschein-Block */
}
body.ax-dashboard-page.woocommerce-cart td.actions input#coupon_code {
	box-sizing: border-box;
	flex: 1 1 auto;
	width: auto;
	height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--ax-field-border, #8A8A8A);
	border-radius: 10px;
	background: var(--ax-white, #fff);
	color: var(--ax-black, #1a1a1a);
	font: 400 0.875rem/1 var(--ax-font-sans, system-ui, sans-serif);
}
/* Sekundäre Aktionen bleiben Ghost-Buttons — nur EIN cyaner Button pro
   Ansicht, und das ist „Weiter zur Kasse". */
body.ax-dashboard-page.woocommerce-cart td.actions button.button {
	box-sizing: border-box;
	height: 44px;
	min-height: var(--ax-touch);
	padding: 0 0.875rem;
	border: 1px solid var(--ax-border, #e5e5e5);
	border-radius: 10px;
	background: var(--ax-white, #fff);
	color: var(--ax-black, #1a1a1a);
	font: 600 0.875rem/1 var(--ax-font-sans, system-ui, sans-serif);
}

/* --- Summen + Weiter zur Kasse -------------------------------- */
/* Woo floatet .cart_totals auf 48% — auf der max. 50rem breiten Bühne
   ergibt das eine halbe Karte mit Leerraum daneben. */
body.ax-dashboard-page.woocommerce-cart .cart-collaterals,
body.ax-dashboard-page.woocommerce-cart .cart-collaterals .cart_totals {
	box-sizing: border-box;
	width: 100%;
	float: none;
}
/* v1.18.1: Astra Pro zeichnet um die Summen eine ZWEITE Box —
     .woocommerce-cart .cart-collaterals .cart_totals { padding: 0 20px;
        border: 1px solid var(--ast-border-color) }
     .woocommerce-cart .cart-collaterals .cart_totals > h2 { margin: 0 -20px 20px;
        background-color: var(--ast-global-dark-lfs) }
   Zwei Folgen, beide im Screenshot vom 11.08. zu sehen: der Kopf
   „Warenkorb-Summe" lag als WEISSER Balken auf der dunklen Bühne (das
   Light-Token bleibt hell, auch im Dunkelmodus), und die 40px Padding plus
   2px Rahmen sprengten mit content-box die 368px-Spalte auf 410px — der
   Block samt Kasse-Button lief rechts aus dem Bild.
   Astras Box wird abgeräumt statt überschrieben: die Karte ist hier die
   Tabelle, eine zweite Umrandung war noch nie beabsichtigt. */
body.ax-dashboard-page.woocommerce-cart .cart-collaterals .cart_totals {
	padding: 0;
	border: 0;
	margin-bottom: 0;
}
body.ax-dashboard-page.woocommerce-cart .cart-collaterals .cart_totals > h2 {
	margin: 0 0 0.5rem;
	padding: 0;
	background: none;
	border-bottom: 0;
	font: 500 0.8125rem/1 var(--ax-font-mono, ui-monospace, monospace);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ax-gray, #6B6B6B);
}
body.ax-dashboard-page.woocommerce-cart .cart_totals th {
	width: 45%;
	font: 500 0.875rem/1.4 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-gray, #6B6B6B);
}
body.ax-dashboard-page.woocommerce-cart .cart_totals td {
	text-align: right;
}
body.ax-dashboard-page.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
}
/* Falle 4: .button.alt mitnehmen und border-box erzwingen, sonst rechnet
   Astras Padding die 48px auf ~68px hoch. */
body.ax-dashboard-page.woocommerce-cart a.checkout-button.button.alt,
body.ax-dashboard-page.woocommerce-cart a.checkout-button {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0 1rem;
	border: 0;
	border-radius: 10px;
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	font: 700 0.9375rem/1 var(--ax-font-sans, system-ui, sans-serif);
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 217, 255, 0.35);
}
body.ax-dashboard-page.woocommerce-cart a.checkout-button:hover,
body.ax-dashboard-page.woocommerce-cart a.checkout-button:focus-visible {
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	filter: brightness(1.1);
}
/* Leerer Warenkorb: Woos „Zurück zum Shop" ist der einzige Weg raus. */
body.ax-dashboard-page.woocommerce-cart .cart-empty {
	margin: 0 0 0.75rem;
	font: 400 0.9375rem/1.5 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-gray, #6B6B6B);
}

/* --- Kasse: Formular ------------------------------------------ */
/* Falle 3: col2-set aufheben, .col-2 ist leer. */
body.ax-dashboard-page.woocommerce-checkout #customer_details,
body.ax-dashboard-page.woocommerce-checkout #customer_details .col-1,
body.ax-dashboard-page.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
}
/* Kein :empty-Trick für .col-2 — sie ist NICHT leer: Woo legt dort seine
   unsichtbaren <wc-order-attribution-inputs> ab (gemessen am Live-Markup
   2026-08-11). Ohne eigene Höhe fällt sie von selbst zusammen. */
body.ax-dashboard-page.woocommerce-checkout .woocommerce-billing-fields > h3,
body.ax-dashboard-page.woocommerce-checkout #order_review_heading {
	margin: 0 0 0.5rem;
	font: 500 0.8125rem/1 var(--ax-font-mono, ui-monospace, monospace);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ax-gray, #6B6B6B);
}
/* Grid statt Woos Floats: Vor-/Nachname nebeneinander, alles andere über
   die volle Breite. !important nur auf float/width — Woos
   .woocommerce form .form-row-first (0-3-0) sitzt dicht an der eigenen
   Spezifität, und ein halb aufgelöster Float im Grid bricht das Layout
   still. Rest ohne !important. */
body.ax-dashboard-page.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.625rem;
	margin: 0 0 1rem;
}
body.ax-dashboard-page.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
	float: none !important;
	width: auto !important;
	margin: 0;
	padding: 0;
}
@media (min-width: 30em) {
	body.ax-dashboard-page.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr 1fr;
	}
	body.ax-dashboard-page.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide {
		grid-column: 1 / -1;
	}
}
body.ax-dashboard-page.woocommerce-checkout .form-row label,
body.ax-dashboard-page.woocommerce-account .form-row label {
	display: block;
	margin: 0 0 0.25rem;
	font: 600 0.8125rem/1.2 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-gray, #6B6B6B);
}
body.ax-dashboard-page.woocommerce-checkout .form-row .required,
body.ax-dashboard-page.woocommerce-account .form-row .required {
	color: var(--ax-danger, #c4373c);
	text-decoration: none;
	border: 0;
}
body.ax-dashboard-page.woocommerce-checkout .form-row input.input-text,
body.ax-dashboard-page.woocommerce-checkout .form-row select,
body.ax-dashboard-page.woocommerce-checkout .checkout_coupon input.input-text,
body.ax-dashboard-page.woocommerce-account .form-row input.input-text,
body.ax-dashboard-page.woocommerce-account .form-row select {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 0.75rem;
	border: 1px solid var(--ax-field-border, #8A8A8A);
	border-radius: 10px;
	background: var(--ax-white, #fff);
	color: var(--ax-black, #1a1a1a);
	font: 400 0.9375rem/1 var(--ax-font-sans, system-ui, sans-serif);
}
/* Land und Bundesland ersetzt Woo zur LAUFZEIT durch selectWoo (select2) —
   im Server-HTML steht nur ein <select>. Ohne diese drei Regeln steht dort
   ein 28px-Feld zwischen 48px-Feldern; das Dropdown selbst hängt an <body>
   und bekommt seine Farben deshalb ebenfalls von der Bühne. */
body.ax-dashboard-page .select2-container--default .select2-selection--single {
	box-sizing: border-box;
	height: 48px;
	padding: 0 0.75rem;
	border: 1px solid var(--ax-field-border, #8A8A8A);
	border-radius: 10px;
	background: var(--ax-white, #fff);
}
body.ax-dashboard-page .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 46px;
	color: var(--ax-black, #1a1a1a);
}
body.ax-dashboard-page .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 0.5rem;
}
body.ax-dashboard-page .select2-dropdown {
	border-color: var(--ax-border, #e5e5e5);
	border-radius: 10px;
	background: var(--ax-white, #fff);
	color: var(--ax-black, #1a1a1a);
}

/* --- Kasse: Bestellübersicht + Zahlung ------------------------ */
body.ax-dashboard-page.woocommerce-checkout #order_review {
	margin: 0;
}
body.ax-dashboard-page.woocommerce-checkout ul.wc_payment_methods {
	margin: 0 0 0.875rem;
	padding: 0;
	list-style: none;
	border: 0;
}
body.ax-dashboard-page.woocommerce-checkout ul.wc_payment_methods li {
	margin: 0 0 0.5rem;
	padding: 0.75rem;
	border: 1px solid var(--ax-border, #e5e5e5);
	border-radius: 12px;
	background: var(--ax-white, #fff);
	list-style: none;
}
body.ax-dashboard-page.woocommerce-checkout ul.wc_payment_methods li label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font: 600 0.9375rem/1.3 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
}
/* Mollie liefert pro Zahlart ein eigenes Logo im Label — ungebremst
   rendern die je nach Methode unterschiedlich hoch.
   NICHT verifiziert: Mollie ist auf dieser Instanz noch nicht installiert
   (geprüft 2026-08-11). Beim ersten Testkauf gegenmessen. */
body.ax-dashboard-page.woocommerce-checkout ul.wc_payment_methods li label img {
	max-height: 1.5rem;
	width: auto;
	margin: 0;
	float: none;
}
body.ax-dashboard-page.woocommerce-checkout ul.wc_payment_methods .payment_box {
	margin: 0.5rem 0 0;
	padding: 0.625rem;
	border-radius: 10px;
	background: var(--ax-gray-subtle, #f5f5f5);
	font: 400 0.875rem/1.5 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
}
body.ax-dashboard-page.woocommerce-checkout ul.wc_payment_methods .payment_box::before {
	display: none; /* Woos Sprechblasen-Dreieck passt nicht zur Karte */
}
body.ax-dashboard-page.woocommerce-checkout .woocommerce-privacy-policy-text {
	font: 400 0.75rem/1.5 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-gray, #6B6B6B);
}
body.ax-dashboard-page.woocommerce-checkout .woocommerce-privacy-policy-text a {
	color: var(--ax-cyan-text, #00738F);
}
/* Falle 4 erneut — hier trägt der Button zusätzlich eine ID. */
body.ax-dashboard-page.woocommerce-checkout #place_order,
body.ax-dashboard-page.woocommerce-checkout button.button.alt#place_order {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	min-height: 48px;
	margin: 0.5rem 0 0;
	padding: 0 1rem;
	border: 0;
	border-radius: 10px;
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	font: 700 0.9375rem/1 var(--ax-font-sans, system-ui, sans-serif);
	box-shadow: 0 4px 14px rgba(0, 217, 255, 0.35);
}
body.ax-dashboard-page.woocommerce-checkout #place_order:hover,
body.ax-dashboard-page.woocommerce-checkout #place_order:focus-visible {
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	filter: brightness(1.1);
}

/* --- Danke-Seite (Checkout-Endpoint order-received) ----------- */
body.ax-dashboard-page.woocommerce-order-received ul.woocommerce-order-overview {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0.875rem;
	border: 1px solid var(--ax-border, #e5e5e5);
	border-radius: 14px;
	background: var(--ax-white, #fff);
	list-style: none;
}
body.ax-dashboard-page.woocommerce-order-received ul.woocommerce-order-overview li {
	margin: 0;
	padding: 0;
	border: 0;
	font: 500 0.6875rem/1.4 var(--ax-font-mono, ui-monospace, monospace);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ax-gray, #6B6B6B);
	list-style: none;
}
body.ax-dashboard-page.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.15rem;
	font: 600 0.9375rem/1.3 var(--ax-font-sans, system-ui, sans-serif);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ax-black, #1a1a1a);
}

/* --- Woos „Mein Konto" (Endpoints: orders, view-order, ---------
       edit-address, edit-account) · eigener Abschnitt (v1.27.0)
   Die Seite IST jetzt ein Ziel: /profil/ verlinkt auf orders und
   edit-address, Bestell-Mails auf view-order. Der Dashboard-Tab
   selbst leitet auf /profil/ um (functions.php), Astras „Modern
   Layout" ist per Filter aus — gestylt wird Woos KLASSISCHES
   Markup. Es gelten die Regeln der Shop-Ausnahme (px + border-box
   bei Breite-plus-Rahmen, Astras 0-3-1-Buttons überstimmen). */

/* Woos Layout-CSS floatet die Nav auf 30% neben den Inhalt — auf
   der schmalen App-Bühne wird daraus eine gequetschte Spalte.
   Beides entfloatet: Pill-Leiste oben, Inhalt volle Breite. */
body.ax-dashboard-page.woocommerce-account .woocommerce-MyAccount-navigation,
body.ax-dashboard-page.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
}
body.ax-dashboard-page.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 0.875rem;
	padding: 0;
	list-style: none;
}
body.ax-dashboard-page.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	list-style: none;
}
body.ax-dashboard-page.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.4rem 0.75rem;
	border-radius: 8px;
	background: var(--ax-white, #fff);
	font: 600 0.8125rem/1.2 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-gray, #6B6B6B);
	text-decoration: none;
}
body.ax-dashboard-page.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--ax-cyan-text, #00738F);
}

/* Zwischenüberschriften (view-order „Bestelldetails", Adressen) */
body.ax-dashboard-page.woocommerce-account .woocommerce-MyAccount-content h2 {
	margin: 1rem 0 0.5rem;
	font: 700 1.0625rem/1.3 var(--ax-font-sans, 'Inter', system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
}
/* Woo markiert Bestellnummer/Datum mit <mark> — der gelbe
   Textmarker-Standard passt nicht zur Bühne. */
body.ax-dashboard-page.woocommerce-account .woocommerce-MyAccount-content mark {
	background: transparent;
	color: inherit;
	font-weight: 600;
}

/* „Anzeigen"-Button in der Bestellliste: kompakt, aber 44px Touch.
   Astras .woocommerce a.button (0-3-1) rechnet content-box — px und
   border-box deshalb selbst gesetzt (Shop-Ausnahme-Regel). */
body.ax-dashboard-page.woocommerce-account table.shop_table a.button,
body.ax-dashboard-page.woocommerce-account .woocommerce-pagination a.button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	font: 600 0.8125rem/1 var(--ax-font-sans, system-ui, sans-serif);
	text-decoration: none;
}
body.ax-dashboard-page.woocommerce-account .woocommerce-pagination {
	display: flex;
	gap: 0.5rem;
	margin: 0 0 0.875rem;
}

/* Adressen (edit-address + view-order-Kundendaten): Woos col2-set
   floatet zwei 48%-Spalten — hier gestapelt bzw. ab 30em als Grid,
   jede Adresse als Karte. */
body.ax-dashboard-page.woocommerce-account .woocommerce-Addresses,
body.ax-dashboard-page.woocommerce-account .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: 0 0 0.875rem;
}
/* v1.27.1 (live nachgemessen): der Clearfix des col2-set
   (::before/::after mit display:table) wird im Grid zum anonymen
   Grid-Item — Karte 1 rutschte in Spalte 2, Karte 2 in Zeile 2,
   die Adressen standen diagonal versetzt. Im Grid ist der
   Clearfix ohnehin funktionslos. */
body.ax-dashboard-page.woocommerce-account .woocommerce-Addresses::before,
body.ax-dashboard-page.woocommerce-account .woocommerce-Addresses::after,
body.ax-dashboard-page.woocommerce-account .woocommerce-columns--addresses::before,
body.ax-dashboard-page.woocommerce-account .woocommerce-columns--addresses::after {
	content: none;
}
@media (min-width: 30em) {
	body.ax-dashboard-page.woocommerce-account .woocommerce-Addresses,
	body.ax-dashboard-page.woocommerce-account .woocommerce-columns--addresses {
		grid-template-columns: 1fr 1fr;
	}
}
body.ax-dashboard-page.woocommerce-account .woocommerce-Addresses .woocommerce-Address,
body.ax-dashboard-page.woocommerce-account .woocommerce-columns--addresses .woocommerce-column {
	float: none !important;
	width: auto !important;
	max-width: none;
	padding: 0.875rem;
	border: 1px solid var(--ax-border, #e5e5e5);
	border-radius: 14px;
	background: var(--ax-white, #fff);
	box-sizing: border-box;
}
body.ax-dashboard-page.woocommerce-account .woocommerce-Address address,
body.ax-dashboard-page.woocommerce-account .woocommerce-column address {
	border: 0;
	padding: 0;
	font: 400 0.9375rem/1.6 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
}
body.ax-dashboard-page.woocommerce-account .woocommerce-Address-title h2,
body.ax-dashboard-page.woocommerce-account .woocommerce-column__title {
	margin: 0 0 0.25rem;
	font: 700 0.9375rem/1.3 var(--ax-font-sans, system-ui, sans-serif);
}
body.ax-dashboard-page.woocommerce-account .woocommerce-Address-title a.edit {
	font: 600 0.8125rem/1.2 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-cyan-text, #00738F);
	text-decoration: none;
}

/* Formulare (edit-address, edit-account): gleiche Feldoptik wie die
   Kasse (Selektoren dort erweitert) — hier nur Woos 47%-Floats der
   Namenszeile auflösen und das Passwort-Fieldset als Karte fassen. */
body.ax-dashboard-page.woocommerce-account .form-row-first,
body.ax-dashboard-page.woocommerce-account .form-row-last {
	float: none !important;
	width: 100% !important;
}
body.ax-dashboard-page.woocommerce-account fieldset {
	margin: 1rem 0 0.875rem;
	padding: 0.875rem;
	border: 1px solid var(--ax-border, #e5e5e5);
	border-radius: 14px;
}
body.ax-dashboard-page.woocommerce-account fieldset legend {
	padding: 0 0.375rem;
	font: 700 0.9375rem/1.3 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
}

/* Speichern-Buttons (Adresse/Kontodetails) im Kauf-Button-Muster —
   Falle 4 der Kaufstrecke gilt auch hier (Astra 0-3-1, content-box). */
body.ax-dashboard-page.woocommerce-account .woocommerce-MyAccount-content button.button {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	min-height: 48px;
	margin: 0.5rem 0 0;
	padding: 0 16px;
	border: 0;
	border-radius: 10px;
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	font: 700 0.9375rem/1 var(--ax-font-sans, system-ui, sans-serif);
	box-shadow: 0 4px 14px rgba(0, 217, 255, 0.35);
}
body.ax-dashboard-page.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
body.ax-dashboard-page.woocommerce-account .woocommerce-MyAccount-content button.button:focus-visible {
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	filter: brightness(1.1);
}


/* ============================================================
   WARENKORB & KASSE · Gutenberg-Blöcke (mobile-first)
   ------------------------------------------------------------
   Beide Seiten liegen bereits auf der App-Bühne (body trägt
   ax-dashboard-page), dashboard.css lädt dort also ohnehin —
   kein PHP nötig.

   WooCommerce rendert die Blöcke unverändert selbst: Menge,
   Gutschein, Zahlungsarten, Validierung, Express-Checkout.
   Hier wird ausschließlich umgestaltet, gegen die stabilen
   wc-block-components-*-Klassen.

   Zuerst ein echter Fehler, kein Geschmack: Die Blöcke haben
   width: 100% UND bekommen von der Regel für nackte Gutenberg-
   Blöcke (Abschnitt 2, Mobile) margin: 0 0.75rem — zusammen
   11px Überlauf, der im Warenkorb die Preisspalte abschnitt.
   ============================================================ */

body.ax-dashboard-page .entry-content > .wp-block-woocommerce-cart,
body.ax-dashboard-page .entry-content > .wp-block-woocommerce-checkout {
	width: auto; /* nicht 100% — sonst addieren sich die Seitenmargins */
	max-width: none;
}

/* --- gemeinsame Grundlagen -------------------------------- */
body.woocommerce-cart.ax-dashboard-page,
body.woocommerce-checkout.ax-dashboard-page {
	--ax-feld-hoehe: 48px;
}

/* Überschriften der Blöcke in Marken-Typo statt Astra-Blau */
body.ax-dashboard-page .wc-block-components-title,
body.ax-dashboard-page .wp-block-woocommerce-cart .wp-block-heading,
body.ax-dashboard-page .wp-block-woocommerce-checkout .wp-block-heading {
	font-family: var(--ax-font-sans, 'Inter', system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
}
body.ax-dashboard-page .wc-block-components-checkout-step__title {
	font: 700 1.0625rem/1.3 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
}
body.ax-dashboard-page .wc-block-components-checkout-step__description {
	color: var(--ax-gray, #6B6B6B);
}

/* Links */
body.ax-dashboard-page .wp-block-woocommerce-cart a,
body.ax-dashboard-page .wp-block-woocommerce-checkout a {
	color: var(--ax-cyan-text, #00738F);
	text-decoration: none;
}

/* Beträge durchgängig in der Ziffern-Schrift */
body.ax-dashboard-page .wc-block-formatted-money-amount,
body.ax-dashboard-page .wc-block-components-formatted-money-amount {
	font-family: var(--ax-font-mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
}

/* Hauptaktionen: cyan, 48px, gerundet */
body.ax-dashboard-page .wc-block-components-button:not(.wc-block-components-button--text),
body.ax-dashboard-page .wc-block-cart__submit-button,
body.ax-dashboard-page .wc-block-components-checkout-place-order-button {
	box-sizing: border-box;
	min-height: var(--ax-feld-hoehe, 48px);
	padding: 0 1rem;
	border: 0;
	border-radius: 10px;
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	font: 700 0.9375rem/1 var(--ax-font-sans, system-ui, sans-serif);
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 217, 255, 0.35);
}
body.ax-dashboard-page .wc-block-components-button:not(.wc-block-components-button--text):hover,
body.ax-dashboard-page .wc-block-components-button:not(.wc-block-components-button--text):focus-visible {
	background: var(--ax-cyan, #00d9ff);
	color: #06222b;
	filter: brightness(1.1);
}
body.ax-dashboard-page .wc-block-components-button__text {
	color: inherit;
	text-decoration: none;
}
/* Textbuttons („Gutschein anwenden", „Zurück") bleiben schlicht */
body.ax-dashboard-page .wc-block-components-button--text {
	background: none;
	box-shadow: none;
	color: var(--ax-cyan-text, #00738F);
}

/* Eingabefelder: 48px Touch-Höhe, gerundet, Bühnen-Farben */
body.ax-dashboard-page .wc-block-components-text-input input.components-form-token-field__input,
body.ax-dashboard-page .wc-block-components-text-input input[type],
body.ax-dashboard-page .wc-block-components-country-input select,
body.ax-dashboard-page .wc-block-components-state-input select,
body.ax-dashboard-page .wc-block-components-combobox input,
/* eingeklapptes „Wohnung, Suite usw." — sieht aus wie ein Link, ist aber ein
   Eingabefeld und damit ein echtes Touch-Ziel (gemessen: 41px) */
body.ax-dashboard-page .wc-block-components-address-form__address_2-hidden-input {
	box-sizing: border-box;
	min-height: var(--ax-feld-hoehe, 48px);
	border-radius: 10px;
	border: 1px solid var(--ax-field-border, #8A8A8A);
	background: var(--ax-white, #fff);
	color: var(--ax-black, #1a1a1a);
	font-family: var(--ax-font-sans, system-ui, sans-serif);
}
body.ax-dashboard-page .wc-block-components-text-input.is-active label,
body.ax-dashboard-page .wc-block-components-text-input label {
	color: var(--ax-gray, #6B6B6B);
}

/* Flächen (Positionen, Summen, Schritte) als Bühnen-Karten */
body.ax-dashboard-page .wc-block-cart-items,
body.ax-dashboard-page .wc-block-components-totals-wrapper,
body.ax-dashboard-page .wc-block-checkout__sidebar .wc-block-components-panel,
body.ax-dashboard-page .wc-block-components-order-summary {
	background: var(--ax-white, #fff);
	border-radius: 14px;
}

/* ============================================================
   WARENKORB
   ============================================================ */
/* Keine eigenen Zellenbreiten. WooCommerce legt die Zeile auf Mobil als Grid
   mit eigenen Spaltenbreiten aus (gemessen bei 320px: 80px 132px 11px 69px).
   Feste Breiten auf den Zellen sprengen genau dieses Raster — der Betrag
   wanderte dadurch 54px aus der Karte. Hier wird nur noch Optik gesetzt. */
body.woocommerce-cart.ax-dashboard-page .wc-block-cart-items {
	border: 1px solid var(--ax-border, #e5e5e5);
	overflow: hidden;
}
body.woocommerce-cart.ax-dashboard-page .wc-block-cart-item__product {
	overflow-wrap: anywhere;
}
/* Nur senkrechtes Padding — genau wie WooCommerce selbst (`16px 0`). Die
   Grid-Spalten der Zeile sind teils fix (80px Bild, 132px Text), flexibel ist
   allein die Betragsspalte. Seitliches Padding zieht ihr die Breite ab: mit
   0.75rem rundum schrumpfte sie unter die 62px, die „509,00 €" braucht, und
   der Betrag lief aus der Karte. Der Innenabstand kommt deshalb vom Bild
   (padding-right) statt von der Zeile. */
body.woocommerce-cart.ax-dashboard-page .wc-block-cart-items__row {
	padding: 0.75rem 0;
	border-top: 1px solid var(--ax-border, #e5e5e5);
}
body.woocommerce-cart.ax-dashboard-page .wc-block-cart-items__row:first-child {
	border-top: 0;
}
/* Vorschaubild im richtigen Seitenverhältnis statt hochkant beschnitten.
   Breite bleibt bei WooCommerce, nur der Innenabstand kommt dazu. */
body.woocommerce-cart.ax-dashboard-page .wc-block-cart-item__image {
	padding-right: 0.75rem;
}
body.woocommerce-cart.ax-dashboard-page .wc-block-cart-item__image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	object-position: top center; /* Motiv liegt oben rechts */
	border-radius: 8px;
	background: #101012;
}
body.woocommerce-cart.ax-dashboard-page .wc-block-components-product-name {
	font: 700 0.9375rem/1.3 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
	text-decoration: none;
}
/* Rechts steht die Zeilensumme, unter dem Titel der Einzelpreis. Bei Menge 1
   sind beide gleich — der Einzelpreis wird deshalb zurückgenommen, sonst liest
   man zwei konkurrierende Summen. */
body.woocommerce-cart.ax-dashboard-page .wc-block-cart-item__total {
	font-family: var(--ax-font-mono, ui-monospace, monospace);
	color: var(--ax-cyan-text, #00738F);
	font-weight: 700;
}
body.woocommerce-cart.ax-dashboard-page .wc-block-cart-item__prices {
	font-family: var(--ax-font-mono, ui-monospace, monospace);
	font-size: 0.8125rem;
	color: var(--ax-gray, #6B6B6B);
}
body.woocommerce-cart.ax-dashboard-page .wc-block-components-product-metadata {
	color: var(--ax-gray, #6B6B6B);
	font-size: 0.8125rem;
}
/* Mengensteuerung: Touch-Ziel vergrößern */
body.woocommerce-cart.ax-dashboard-page .wc-block-components-quantity-selector {
	border-radius: 10px;
	border: 1px solid var(--ax-field-border, #8A8A8A);
	min-height: var(--ax-touch);
}
body.woocommerce-cart.ax-dashboard-page .wc-block-components-quantity-selector__button {
	min-width: 44px;
	min-height: var(--ax-touch);
	color: var(--ax-black, #1a1a1a);
}
body.woocommerce-cart.ax-dashboard-page .wc-block-components-quantity-selector__input {
	color: var(--ax-black, #1a1a1a);
	font-family: var(--ax-font-mono, ui-monospace, monospace);
}
/* Entfernen-Link als eigenes Touch-Ziel */
body.woocommerce-cart.ax-dashboard-page .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--ax-touch);
	color: var(--ax-gray, #6B6B6B);
	text-decoration: none;
}

body.woocommerce-cart.ax-dashboard-page .wc-block-components-totals-wrapper {
	border: 1px solid var(--ax-border, #e5e5e5);
	padding: 0.75rem;
	margin-top: 0.625rem;
}
/* Gesamtsumme kompakt in einer Zeile: Label links, Betrag rechts. Der Block
   setzt hier von Haus aus eine sehr große Schrift, die mobil umbricht. */
body.woocommerce-cart.ax-dashboard-page .wc-block-components-totals-footer-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	font: 700 1rem/1.3 var(--ax-font-sans, system-ui, sans-serif);
	color: var(--ax-black, #1a1a1a);
}
body.woocommerce-cart.ax-dashboard-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 0.9375rem;
}
body.woocommerce-cart.ax-dashboard-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.125rem;
	white-space: nowrap;
}
body.woocommerce-cart.ax-dashboard-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--ax-cyan-text, #00738F);
}
body.woocommerce-cart.ax-dashboard-page .wc-block-cart__submit-container {
	margin-top: 0.75rem;
}
body.woocommerce-cart.ax-dashboard-page .wc-block-cart__submit-button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   KASSE
   ============================================================ */
/* Tabbar aus: der Bestell-Button bekommt den unteren Rand für sich,
   und während der Zahlung ist Navigation eher Ablenkung. Im Warenkorb
   bleibt sie stehen. */
body.woocommerce-checkout.ax-dashboard-page .ax-tabbar {
	display: none;
}
body.woocommerce-checkout.ax-dashboard-page {
	padding-bottom: 1rem; /* ohne Tabbar kein Platzhalter mehr nötig */
}

body.woocommerce-checkout.ax-dashboard-page .wc-block-components-checkout-step {
	background: var(--ax-white, #fff);
	border: 1px solid var(--ax-border, #e5e5e5);
	border-radius: 14px;
	padding: 0.875rem 0.75rem;
	margin-bottom: 0.625rem;
}
body.woocommerce-checkout.ax-dashboard-page .wc-block-components-checkout-step__heading {
	margin-top: 0;
}
body.woocommerce-checkout.ax-dashboard-page .wc-block-checkout__actions {
	padding: 0;
	margin-top: 0.75rem;
	border: 0;
}
body.woocommerce-checkout.ax-dashboard-page .wc-block-components-checkout-place-order-button {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Bestellübersicht oben (Aufklapper) */
body.woocommerce-checkout.ax-dashboard-page .wc-block-components-order-summary {
	border: 1px solid var(--ax-border, #e5e5e5);
	padding: 0.25rem 0.75rem;
}
body.woocommerce-checkout.ax-dashboard-page .wc-block-components-panel__button {
	min-height: var(--ax-touch);
	color: var(--ax-black, #1a1a1a);
	font-family: var(--ax-font-sans, system-ui, sans-serif);
}
body.woocommerce-checkout.ax-dashboard-page .wc-block-components-order-summary-item__image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top center;
	border-radius: 6px;
}
/* Zahlungsarten */
body.woocommerce-checkout.ax-dashboard-page .wc-block-components-radio-control__option {
	min-height: 48px;
	display: flex;
	align-items: center;
}
body.woocommerce-checkout.ax-dashboard-page .wc-block-components-radio-control-accordion-option {
	border-radius: 10px;
}
/* Pflichtfeld-Fehler bleiben deutlich, aber im Bühnen-Radius */
body.woocommerce-checkout.ax-dashboard-page .wc-block-components-validation-error {
	font-size: 0.8125rem;
}

/* ── Mobile-Gesten aus (v1.28.0) ─────────────────────────────────
   App-Bühne verhält sich wie eine native App: kein Pinch-Zoom, kein
   Double-Tap-Zoom. pan-x/pan-y erlaubt Scrollen, blockt Zoom-Gesten.
   iOS-Safari-Tab ignoriert CSS+Viewport teils — dashboard.js fängt
   dort gesturestart ab. Bewusster A11y-Trade-off (Wunsch Dirk 26.08.). */
body.ax-dashboard-page {
	touch-action: pan-x pan-y;
}