/* Aiopta Store Frontend — Design-System styling (issue #460).
*
* The public storefront is a standalone static SPA served by nginx and does
* NOT import @aiopta/ui/styles.css, so the Design-System token layer is
* inlined here. The dark-default token VALUES are synced to the newest DS —
* the redesign-2026 SIGNAL palette (redesign-2026/tokens.css +
* ui_kits/addon-store/store.css from the design-system handoff): violet accent
* (#7859f7), deep blue-black surfaces (#090d17 / #0d1320), cool-tinted
* hairlines. The --aiopta-color-* → --ds-* ABI names are kept stable so all
* component rules below consume the --ds-* ABI unchanged: adopting a newer DS
* value means pasting the token value here, never re-deriving a shade or
* touching a component rule.
*
* PACK-ADAPTIVITY (canon 2026-07-20) — documented exception: this store is a
* STANDALONE static site served by nginx (Dockerfile.marketplace, /store/),
* separate from the instance runtime; it cannot import @aiopta/ui or observe a
* runtime-applied design-pack (that is phase 3). Per owner directive it
* consumes the DS tokens STATICALLY (default SIGNAL design) — so the values are
* compiled in here. The pack-ADAPTIVE store is the IN-APP store (store.jsx,
* phase 4), which re-themes off the active pack at runtime and is out of scope
* for this file. Forward path so hand-copies are not the end-state: generate
* this token layer from the pack/token source (DTCG export) at build time
* instead of pasting — TODO(build: sync tokens from redesign-2026/tokens.css).
* A value drift-guard test pins the current values meanwhile
* (build-store-frontend.test.cjs).
*
* 2026-07-21 gate follow-up: the CI "Pack-Swap" gate wants an alternative
* token set to visibly change BOTH color and layout. Color already does
* (theme + [data-color-scheme] accent schemes below); layout (grid
* columns/radii/spacing scale) does not, because — per the paragraph
* above — this static build has no pack-loader to source an alternative
* layout from. Tracked as addons#840 (architecture decision needed, not
* a fix to improvise here).
*
* Theme/scheme aware: dark is the :root default (matches );
* light applies via [data-theme="light"] AND, when the host sets no explicit
* theme, via prefers-color-scheme. Curated accent schemes recolour ONLY the
* accent channel via [data-color-scheme="..."] (ADR-045). The embed host
* (core#517) may set these attributes on ; we react in pure CSS and do
* NOT touch the postMessage handshake. Mobile-first: fluid grid + a <=720px
* layout collapse + 44px DS touch targets. */
/* === DS token ABI — --aiopta-* source values + --ds-* alias layer ======== */
:root {
/* Background / surface (DS dark default — redesign-2026 SIGNAL palette,
synced from redesign-2026/tokens.css + ui_kits/addon-store/store.css).
Full 4-step ladder matches tokens.css: bg-0 #05070d is the true page
background (the prototype's base), bg-1 #090d17 the header/nav
translucency, bg-2 #0e1420 the modal surface, bg-3 #141b2b the elevated
step. (#838 started the ladder one step too light at #090d17.) */
--aiopta-color-bg-primary: #05070d;
--aiopta-color-bg-secondary: #090d17;
--aiopta-color-bg-tertiary: #0e1420;
--aiopta-color-bg-elevated: #141b2b;
--aiopta-color-surface: #0d1320;
--aiopta-color-surface-hover: #131a2a;
--aiopta-color-surface-active: #1a2236;
--aiopta-color-surface-sunken: #080c15;
/* Text (redesign-2026 signal foreground) */
--aiopta-color-text-primary: rgba(233, 239, 253, 0.95);
--aiopta-color-text-secondary: rgba(233, 239, 253, 0.64);
--aiopta-color-text-tertiary: rgba(233, 239, 253, 0.42);
--aiopta-color-text-inverse: #070a12;
/* Border (redesign-2026 cool-tinted hairlines) */
--aiopta-color-border: rgba(151, 173, 233, 0.10);
--aiopta-color-border-hover: rgba(151, 173, 233, 0.20);
--aiopta-color-border-focus: rgba(124, 92, 255, 0.55);
/* Accent (redesign-2026 SIGNAL violet) */
--aiopta-color-accent: #7859f7;
--aiopta-color-accent-hover: #927aff;
--aiopta-color-accent-active: #6847ea;
--aiopta-color-accent-muted: rgba(124, 92, 255, 0.16);
--aiopta-color-accent-subtle: rgba(124, 92, 255, 0.08);
--aiopta-color-accent-text: #a695ff;
/* Signal channel (redesign-2026 cyan→violet signature — the sigline bar,
brandmark tile and progress rails). Fixed brand hues by design; the
accent channel above still re-themes per scheme. */
--aiopta-color-signal-a: #37e6ff;
--aiopta-color-signal-b: #7c5cff;
/* Semantic (redesign-2026 signal) */
--aiopta-color-success: #3ddc97;
--aiopta-color-success-muted: rgba(61, 220, 151, 0.14);
--aiopta-color-warning: #ffb454;
--aiopta-color-warning-muted: rgba(255, 180, 84, 0.14);
--aiopta-color-error: #ff5c69;
--aiopta-color-error-muted: rgba(255, 92, 105, 0.14);
--aiopta-color-info: #4da3ff;
/* Overlay (modal backdrop scrim — theme-invariant by design, dims the
page behind a modal the same way regardless of light/dark). */
--aiopta-color-bg-overlay: rgba(6, 6, 12, 0.68);
/* Typography (redesign-2026 faces first, system fallback). The faces are
NOT network-loaded — the strict marketplace CSP forbids external fonts
and no OFL woff2 is bundled yet, so these render only where the OS has
them and fall back gracefully otherwise. Self-hosting the woff2 (CSP-
and airgap-safe) is the follow-up to fully realise the display face. */
--aiopta-font-display: "Space Grotesk", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--aiopta-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--aiopta-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
/* Spacing */
--aiopta-space-1: 4px; --aiopta-space-2: 8px; --aiopta-space-3: 12px;
--aiopta-space-4: 16px; --aiopta-space-5: 20px; --aiopta-space-6: 24px;
--aiopta-space-8: 32px; --aiopta-space-10: 40px; --aiopta-space-12: 48px;
--aiopta-space-16: 64px; --aiopta-space-20: 80px;
/* Radius (redesign-2026 SIGNAL band — synced from tokens.css: the store
was on the tighter #441 band [8/12/16/22]; the prototype is rounder). */
--aiopta-radius-xs: 6px; --aiopta-radius-sm: 10px; --aiopta-radius-md: 14px;
--aiopta-radius-lg: 20px; --aiopta-radius-xl: 28px; --aiopta-radius-full: 9999px;
/* Card inner padding (tokens.css layer-3 --aiopta-card-pad). */
--aiopta-card-pad: 18px;
/* Shadow */
--aiopta-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--aiopta-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.38);
--aiopta-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.46);
--aiopta-shadow-glow: 0 0 0 1px var(--aiopta-color-accent-muted), 0 0 24px rgba(124, 92, 255, 0.28);
/* Motion */
--aiopta-duration-fast: 120ms;
--aiopta-duration-normal: 200ms;
--aiopta-ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
--aiopta-ease-out: cubic-bezier(0, 0, 0.2, 1);
/* Touch + layout */
--aiopta-touch-target: 44px;
--aiopta-content-padding-x: 1.25rem;
/* --ds-* ABI aliases (generated layer, ds-tokens.generated.css). Backed by
the --aiopta-* ABI so they stay theme/scheme-aware automatically. */
--ds-bg-0: var(--aiopta-color-bg-primary);
--ds-bg-1: var(--aiopta-color-bg-secondary);
--ds-bg-2: var(--aiopta-color-bg-tertiary);
--ds-bg-3: var(--aiopta-color-bg-elevated);
--ds-surface: var(--aiopta-color-surface);
--ds-surface-hover: var(--aiopta-color-surface-hover);
--ds-surface-active: var(--aiopta-color-surface-active);
--ds-surface-sunken: var(--aiopta-color-surface-sunken);
--ds-text-1: var(--aiopta-color-text-primary);
--ds-text-2: var(--aiopta-color-text-secondary);
--ds-text-3: var(--aiopta-color-text-tertiary);
--ds-text-inverse: var(--aiopta-color-text-inverse);
--ds-border: var(--aiopta-color-border);
--ds-border-strong: var(--aiopta-color-border-hover);
--ds-border-focus: var(--aiopta-color-border-focus);
--ds-accent: var(--aiopta-color-accent);
--ds-accent-hover: var(--aiopta-color-accent-hover);
--ds-accent-active: var(--aiopta-color-accent-active);
--ds-accent-muted: var(--aiopta-color-accent-muted);
--ds-accent-subtle: var(--aiopta-color-accent-subtle);
--ds-accent-on: #ffffff;
--ds-accent-text: var(--aiopta-color-accent-text);
--ds-signal-a: var(--aiopta-color-signal-a);
--ds-signal-b: var(--aiopta-color-signal-b);
--ds-signal: linear-gradient(100deg, var(--ds-signal-a), var(--ds-signal-b));
--ds-success: var(--aiopta-color-success);
--ds-success-muted: var(--aiopta-color-success-muted);
--ds-warning: var(--aiopta-color-warning);
--ds-warning-muted: var(--aiopta-color-warning-muted);
--ds-error: var(--aiopta-color-error);
--ds-error-muted: var(--aiopta-color-error-muted);
--ds-info: var(--aiopta-color-info);
--ds-overlay: var(--aiopta-color-bg-overlay);
--ds-font-sans: var(--aiopta-font-sans);
--ds-font-display: var(--aiopta-font-display);
--ds-font-mono: var(--aiopta-font-mono);
--ds-radius-xs: var(--aiopta-radius-xs);
--ds-radius-sm: var(--aiopta-radius-sm);
--ds-radius-md: var(--aiopta-radius-md);
--ds-radius-lg: var(--aiopta-radius-lg);
--ds-radius-xl: var(--aiopta-radius-xl);
--ds-radius-full: var(--aiopta-radius-full);
--ds-card-pad: var(--aiopta-card-pad);
--ds-shadow-sm: var(--aiopta-shadow-sm);
--ds-shadow-md: var(--aiopta-shadow-md);
--ds-shadow-lg: var(--aiopta-shadow-lg);
--ds-glow-accent: var(--aiopta-shadow-glow);
--ds-duration-fast: var(--aiopta-duration-fast);
--ds-duration-normal: var(--aiopta-duration-normal);
--ds-ease-default: var(--aiopta-ease-default);
--ds-ease-out: var(--aiopta-ease-out);
--ds-touch-target: var(--aiopta-touch-target);
/* Store-scoped: catalog reading width stays tighter than the app shell. */
--store-max-width: 1180px;
/* Category tint slots (Marketplace Gestalt — „farbige Icons pro Addon").
Every value derives from the DS hue channels (accent/info/success/
warning/error) directly or via color-mix — NO raw hex here, so the
tints re-theme automatically with light mode + accent schemes. The
slot number is assigned at build time (sectionTint) and shipped on
the projected addon as `tint`. */
--aiopta-tint-1-fg: var(--aiopta-color-accent-hover);
--aiopta-tint-1-bg: var(--aiopta-color-accent-muted);
--aiopta-tint-2-fg: var(--aiopta-color-info);
--aiopta-tint-2-bg: color-mix(in srgb, var(--aiopta-color-info) 15%, transparent);
--aiopta-tint-3-fg: var(--aiopta-color-success);
--aiopta-tint-3-bg: var(--aiopta-color-success-muted);
--aiopta-tint-4-fg: var(--aiopta-color-warning);
--aiopta-tint-4-bg: var(--aiopta-color-warning-muted);
--aiopta-tint-5-fg: var(--aiopta-color-error);
--aiopta-tint-5-bg: var(--aiopta-color-error-muted);
--aiopta-tint-6-fg: color-mix(in srgb, var(--aiopta-color-info) 45%, var(--aiopta-color-success) 55%);
--aiopta-tint-6-bg: color-mix(in srgb, var(--aiopta-tint-6-fg) 15%, transparent);
--aiopta-tint-7-fg: color-mix(in srgb, var(--aiopta-color-warning) 55%, var(--aiopta-color-error) 45%);
--aiopta-tint-7-bg: color-mix(in srgb, var(--aiopta-tint-7-fg) 15%, transparent);
--aiopta-tint-8-fg: color-mix(in srgb, var(--aiopta-color-accent) 55%, var(--aiopta-color-error) 45%);
--aiopta-tint-8-bg: color-mix(in srgb, var(--aiopta-tint-8-fg) 15%, transparent);
--ds-tint-1-fg: var(--aiopta-tint-1-fg); --ds-tint-1-bg: var(--aiopta-tint-1-bg);
--ds-tint-2-fg: var(--aiopta-tint-2-fg); --ds-tint-2-bg: var(--aiopta-tint-2-bg);
--ds-tint-3-fg: var(--aiopta-tint-3-fg); --ds-tint-3-bg: var(--aiopta-tint-3-bg);
--ds-tint-4-fg: var(--aiopta-tint-4-fg); --ds-tint-4-bg: var(--aiopta-tint-4-bg);
--ds-tint-5-fg: var(--aiopta-tint-5-fg); --ds-tint-5-bg: var(--aiopta-tint-5-bg);
--ds-tint-6-fg: var(--aiopta-tint-6-fg); --ds-tint-6-bg: var(--aiopta-tint-6-bg);
--ds-tint-7-fg: var(--aiopta-tint-7-fg); --ds-tint-7-bg: var(--aiopta-tint-7-bg);
--ds-tint-8-fg: var(--aiopta-tint-8-fg); --ds-tint-8-bg: var(--aiopta-tint-8-bg);
}
/* Light theme — DS values (independently tuned, not inverted dark). Applied
both on explicit opt-in and, when the host sets no theme, by OS preference. */
[data-theme="light"] {
/* redesign-2026 SIGNAL light (independently tuned, not inverted). */
--aiopta-color-bg-primary: #eef1f8;
--aiopta-color-bg-secondary: #f4f6fb;
--aiopta-color-bg-tertiary: #ffffff;
--aiopta-color-bg-elevated: #e6eaf4;
--aiopta-color-surface: #ffffff;
--aiopta-color-surface-hover: #f2f4fa;
--aiopta-color-surface-active: #e8ebf5;
--aiopta-color-surface-sunken: #e9edf6;
--aiopta-color-text-primary: rgba(14, 18, 32, 0.92);
--aiopta-color-text-secondary: rgba(14, 18, 32, 0.60);
--aiopta-color-text-tertiary: rgba(14, 18, 32, 0.46);
--aiopta-color-text-inverse: #ffffff;
--aiopta-color-border: rgba(14, 18, 32, 0.09);
--aiopta-color-border-hover: rgba(14, 18, 32, 0.18);
--aiopta-color-border-focus: rgba(98, 71, 229, 0.5);
--aiopta-color-accent: #6247e5;
--aiopta-color-accent-hover: #7c5cff;
--aiopta-color-accent-active: #4f36c9;
--aiopta-color-accent-muted: rgba(98, 71, 229, 0.13);
--aiopta-color-accent-subtle: rgba(98, 71, 229, 0.07);
--aiopta-color-accent-text: #4f36c9;
--aiopta-color-signal-a: #08a8c9;
--aiopta-color-signal-b: #6247e5;
--aiopta-color-success: #128a52;
--aiopta-color-success-muted: rgba(18, 138, 82, 0.13);
--aiopta-color-warning: #9c6408;
--aiopta-color-warning-muted: rgba(156, 100, 8, 0.13);
--aiopta-color-error: #d33641;
--aiopta-color-error-muted: rgba(211, 54, 65, 0.13);
--aiopta-color-info: #1c6fd6;
--aiopta-shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.08);
--aiopta-shadow-md: 0 4px 16px -4px rgba(20, 24, 40, 0.12);
--aiopta-shadow-lg: 0 16px 48px -12px rgba(20, 24, 40, 0.18);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]):not([data-theme="light"]) {
--aiopta-color-bg-primary: #eef1f8;
--aiopta-color-bg-secondary: #f4f6fb;
--aiopta-color-bg-tertiary: #ffffff;
--aiopta-color-bg-elevated: #e6eaf4;
--aiopta-color-surface: #ffffff;
--aiopta-color-surface-hover: #f2f4fa;
--aiopta-color-surface-active: #e8ebf5;
--aiopta-color-surface-sunken: #e9edf6;
--aiopta-color-text-primary: rgba(14, 18, 32, 0.92);
--aiopta-color-text-secondary: rgba(14, 18, 32, 0.60);
--aiopta-color-text-tertiary: rgba(14, 18, 32, 0.46);
--aiopta-color-text-inverse: #ffffff;
--aiopta-color-border: rgba(14, 18, 32, 0.09);
--aiopta-color-border-hover: rgba(14, 18, 32, 0.18);
--aiopta-color-border-focus: rgba(98, 71, 229, 0.5);
--aiopta-color-accent: #6247e5;
--aiopta-color-accent-hover: #7c5cff;
--aiopta-color-accent-active: #4f36c9;
--aiopta-color-accent-muted: rgba(98, 71, 229, 0.13);
--aiopta-color-accent-subtle: rgba(98, 71, 229, 0.07);
--aiopta-color-accent-text: #4f36c9;
--aiopta-color-signal-a: #08a8c9;
--aiopta-color-signal-b: #6247e5;
--aiopta-color-success: #128a52;
--aiopta-color-warning: #9c6408;
--aiopta-color-error: #d33641;
--aiopta-color-info: #1c6fd6;
--aiopta-shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.08);
--aiopta-shadow-md: 0 4px 16px -4px rgba(20, 24, 40, 0.12);
--aiopta-shadow-lg: 0 16px 48px -12px rgba(20, 24, 40, 0.18);
}
}
/* Curated accent schemes (ADR-045) — accent channel only; status colours are
scheme-stable by design. The host embed sets [data-color-scheme]. */
[data-color-scheme="ocean"] {
--aiopta-color-accent: #0ea5e9; --aiopta-color-accent-hover: #38bdf8;
--aiopta-color-accent-active: #0284c7; --aiopta-color-accent-muted: rgba(14, 165, 233, 0.16);
--aiopta-color-accent-subtle: rgba(14, 165, 233, 0.08); --aiopta-color-border-focus: rgba(14, 165, 233, 0.5);
}
[data-color-scheme="ocean"][data-theme="light"] {
--aiopta-color-accent: #027ab0; --aiopta-color-accent-hover: #0ea5e9; --aiopta-color-accent-active: #015c85;
--aiopta-color-accent-muted: rgba(2, 122, 176, 0.13); --aiopta-color-accent-subtle: rgba(2, 122, 176, 0.07);
}
[data-color-scheme="forest"] {
--aiopta-color-accent: #17b878; --aiopta-color-accent-hover: #34d399;
--aiopta-color-accent-active: #0f9d63; --aiopta-color-accent-muted: rgba(23, 184, 120, 0.16);
--aiopta-color-accent-subtle: rgba(23, 184, 120, 0.08); --aiopta-color-border-focus: rgba(23, 184, 120, 0.5);
}
[data-color-scheme="sunset"] {
--aiopta-color-accent: #f9772f; --aiopta-color-accent-hover: #fb923c;
--aiopta-color-accent-active: #ea580c; --aiopta-color-accent-muted: rgba(249, 119, 47, 0.16);
--aiopta-color-accent-subtle: rgba(249, 119, 47, 0.08); --aiopta-color-border-focus: rgba(249, 119, 47, 0.5);
}
[data-color-scheme="mono"] {
--aiopta-color-accent: #9aa4b2; --aiopta-color-accent-hover: #cbd5e1;
--aiopta-color-accent-active: #78828f; --aiopta-color-accent-muted: rgba(154, 164, 178, 0.16);
--aiopta-color-accent-subtle: rgba(154, 164, 178, 0.08); --aiopta-color-border-focus: rgba(154, 164, 178, 0.5);
}
/* === base ================================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ds-bg-0); color: var(--ds-text-1);
font-family: var(--ds-font-sans); font-size: 15px; line-height: 1.5;
-webkit-font-smoothing: antialiased; }
body { position: relative; }
/* Ambient signal wash (prototype body::before): two soft radial glows in
the accent + signal-cyan channels. Token-only via color-mix — sits behind
all content (z-index:-1) so it tints the page without touching hit-testing. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
radial-gradient(900px 480px at 80% -10%, color-mix(in srgb, var(--ds-accent) 14%, transparent), transparent 60%),
radial-gradient(700px 400px at 0% 0%, color-mix(in srgb, var(--ds-signal-a) 8%, transparent), transparent 60%); }
/* Display face for headings + brand (redesign-2026 Space Grotesk). */
h1, h2, h3, .brandmark, .topbar .brand-text b, .card .name { font-family: var(--ds-font-display); }
a { color: var(--ds-accent); text-decoration: none; }
a:hover { color: var(--ds-accent-hover); text-decoration: underline; }
img { max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ds-border-focus); outline-offset: 2px; border-radius: var(--ds-radius-sm); }
/* === layout ============================================================== */
.container { max-width: var(--store-max-width); margin: 0 auto; padding: 0 var(--aiopta-content-padding-x); }
.site-header { padding: var(--aiopta-space-8) 0 var(--aiopta-space-4); border-bottom: 1px solid var(--ds-border);
background: linear-gradient(180deg, var(--ds-bg-1) 0%, var(--ds-bg-0) 100%); }
.site-header h1 { margin: 0 0 var(--aiopta-space-1); font-size: 1.75rem; font-weight: 650; letter-spacing: -0.01em; color: var(--ds-text-1); }
.site-header .subtitle { margin: 0; color: var(--ds-text-2); font-size: 0.9375rem; }
.site-header .meta { margin: var(--aiopta-space-2) 0 0; color: var(--ds-text-3); font-size: 0.75rem; }
.site-header .meta code { font-family: var(--ds-font-mono); color: var(--ds-text-2); }
.site-footer { padding: var(--aiopta-space-6) 0; border-top: 1px solid var(--ds-border); color: var(--ds-text-3);
font-size: 0.75rem; text-align: center; }
.site-footer code { font-family: var(--ds-font-mono); color: var(--ds-text-2); }
/* === topbar (Marketplace Gestalt — brandmark + tabs + who) ============== */
/* Prototype parity: sticky translucent header with brandmark tile, title
over subline, Store/Konto tabs and the sign-in area right-aligned. */
.topbar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--ds-border);
background: color-mix(in srgb, var(--ds-bg-0) 82%, transparent);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.topbar-in { max-width: var(--store-max-width); margin: 0 auto; display: flex; align-items: center;
gap: var(--aiopta-space-3); padding: var(--aiopta-space-3) var(--aiopta-content-padding-x); }
.brandmark { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
font-weight: 700; font-size: 1.0625rem; color: var(--ds-accent-on);
background: var(--ds-signal); }
.topbar .brand-text { min-width: 0; }
.topbar .brand-text b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
color: var(--ds-text-1); white-space: nowrap; }
.topbar .brand-sub { color: var(--ds-text-3); font-size: 0.6875rem; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.topnav { display: flex; gap: 4px; margin-left: var(--aiopta-space-2); }
.topnav a { height: 36px; padding: 0 13px; border-radius: var(--ds-radius-full); display: inline-flex;
align-items: center; font-weight: 600; font-size: 0.8125rem; color: var(--ds-text-2); white-space: nowrap;
transition: background var(--ds-duration-fast) var(--ds-ease-out), color var(--ds-duration-fast) var(--ds-ease-out); }
.topnav a:hover { background: var(--ds-surface-hover); color: var(--ds-text-1); text-decoration: none; }
.topnav a[aria-current="page"] { background: var(--ds-accent-muted); color: var(--ds-accent-hover); }
.topbar .auth-bar { margin-left: auto; margin-top: 0; }
/* Auth cluster (who label + sign-in/out) — a flex row that WRAPS, shared by
the topbar and the legacy site-header. The topbar rules for .who/.btn-link
used to be scoped to .site-header only, so inside the topbar the button and
the "Angemeldet als …" label had no flex/gap and could overlap the brand
title on narrow screens (Owner mobile bug, 430px). Unscoped here so the
cluster is a proper gapped, wrapping row everywhere. */
.auth-bar { display: flex; align-items: center; gap: var(--aiopta-space-2); flex-wrap: wrap; min-width: 0; }
.auth-bar .who { color: var(--ds-text-2); font-size: 0.8125rem; min-width: 0; overflow-wrap: anywhere; }
.auth-bar .who b { color: var(--ds-text-1); }
.auth-bar .btn-link { background: transparent; color: var(--ds-accent); border: 1px solid var(--ds-border);
border-radius: var(--ds-radius-full); padding: var(--aiopta-space-1) var(--aiopta-space-3); cursor: pointer;
font-size: 0.8125rem; font-family: inherit; min-height: 36px; white-space: nowrap;
transition: border-color var(--ds-duration-fast) var(--ds-ease-out), background var(--ds-duration-fast) var(--ds-ease-out); }
.auth-bar .btn-link:hover { border-color: var(--ds-accent); background: var(--ds-accent-subtle); }
.auth-bar .btn-link:focus-visible { outline: 2px solid var(--ds-border-focus); outline-offset: 2px; }
/* Badges (prototype .badge family) — token-only pills for owned/price. */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
border-radius: var(--ds-radius-full); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; }
.badge.badge-ok { background: var(--ds-success-muted); color: var(--ds-success); }
.badge.badge-acc { background: var(--ds-accent-muted); color: var(--ds-accent-text); }
.badge.badge-mut { background: var(--ds-surface-active); color: var(--ds-text-2); }
.badge.badge-warn { background: var(--ds-warning-muted); color: var(--ds-warning); }
.badge.badge-err { background: var(--ds-error-muted); color: var(--ds-error); }
.badge[hidden] { display: none; }
/* Mobile bottom nav (prototype .mbnav — App-Feel wie Hauptanwendung). */
.mbnav { display: none; }
@media (max-width: 860px) {
.topnav { display: none; }
.topbar .brand-sub { display: none; }
/* Wrap the topbar so the auth cluster drops onto its OWN full-width row,
right-aligned, instead of colliding with the brand title (Owner 430px
bug: "Angemeldet als …" + Abmelden overlapping the row title). */
.topbar-in { flex-wrap: wrap; row-gap: var(--aiopta-space-2); }
.topbar .brand-text { flex: 1 1 auto; }
.topbar .auth-bar { width: 100%; margin-left: 0; justify-content: flex-end; }
body { padding-bottom: 76px; }
.mbnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
background: color-mix(in srgb, var(--ds-bg-1) 94%, transparent);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-top: 1px solid var(--ds-border);
padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
.mbnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
color: var(--ds-text-3); font-weight: 600; font-size: 0.6875rem; padding: 6px 0;
border-radius: var(--ds-radius-md); min-height: var(--ds-touch-target); justify-content: center; }
.mbnav a:hover { text-decoration: none; }
.mbnav a[aria-current="page"] { color: var(--ds-accent-hover); background: var(--ds-accent-muted); }
.mbnav .mbi svg { width: 18px; height: 18px; display: block; }
}
/* === toolbar (search + category/author/pricing filters) ================= */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--aiopta-space-3); align-items: center;
padding: var(--aiopta-space-5) 0; border-bottom: 1px solid var(--ds-border); }
/* #870 - kein direktes Kind darf breiter werden als die Zeile.
flex-wrap bricht NUR ZWISCHEN Kindern um; ein einzelnes unteilbares Kind
schiebt trotzdem den Dokument-Scroller auf. Genau das passierte bei 390 px:
die beiden