/* ===================================================================
   wygge — Admin Cockpit theming
   Semantic --ad-* tokens. Light is default; [data-theme="dark"] overrides.
   Sidebar stays brand-dark in both modes (consistent identity).
   Brand Guidelines 2026 (LY_WY 260831): wygge Deep #032425 / Process Green #416858 /
   wygge Signal #C8FF16 (UNCHANGED by decree AND by the guide: "Signal bleibt") /
   Cocoon #DEDBCC / Mist #E5EAE6 / White. Status hues are the guide's functional set.
   White is the base surface; Mist carries cards/tables/system areas (guide 3.3/8.2).
   =================================================================== */

:root {
  /* Tie native form-control rendering to the APP theme, never to the OS preference alone: a light app on a
     dark OS otherwise gets dark UA buttons (white ButtonText) on our white surfaces. */
  color-scheme: light;
  /* fonts — Instrument Sans is the single brand face (guide 4.1) */
  --ad-font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ad-font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ad-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* brand constants */
  --ad-accent:       #C8FF16;   /* wygge Signal — fixed */
  /* links/readable accent on light: Process Green (guide: Signal is never body text on light,
     Process Green on White/Mist is the sanctioned readable green) */
  --ad-accent-deep:  #416858;
  --ad-accent-soft:  #f4ffcf;
  --ad-on-accent:    #032425;   /* Deep on Signal — the guide's button pairing */
  --ad-accent-hover: #b4e614;   /* Signal, 4 points darker: the primary button's hover face, 11.1:1 under --ad-on-accent (derived per tenant accent in api.jsx / thAccentHover) */
  --ad-brand:        #032425;   /* wygge Deep */
  --ad-brand-deep:   #021a1b;
  --ad-process:      #416858;   /* Process Green — secondary surfaces/headings */
  --ad-cocoon:       #DEDBCC;   /* warm editorial neutral */
  --ad-mist:         #E5EAE6;   /* cool system neutral */

  /* light surfaces — White base, Mist for insets/dividers (derived steps stay in that lane) */
  --ad-canvas:        #ffffff;
  --ad-surface:       #ffffff;
  --ad-surface-2:     #f2f5f3;
  --ad-surface-inset: #e5eae6;
  --ad-border:        #d2dad5;
  --ad-border-strong: #aebbb4;
  --ad-divider:       #e5eae6;

  /* light text — Deep for copy (guide: pure black only as technical fallback) */
  --ad-text:        #032425;
  --ad-text-muted:  #4e635d;
  --ad-text-subtle: #586c65;   /* FND-1990: 4.6:1 on the darkest light surface (surface-inset), 5.6:1 on white — was #6e827b = 4.08:1 (WCAG AA fail for every 12 px caption) */
  --ad-text-faint:  #9aa5a1;   /* = the guide's disabled grey */

  /* sidebar (dark in both modes) — wygge Deep */
  --ad-side-bg:      #032425;
  --ad-side-bg-2:    #073132;
  /* opaque (matches old 72%/42% white over the stock sidebar) — alpha text blended differently
     on every row of a gradient sidebar, so letters looked unevenly white */
  --ad-side-text:    #c2cfcb;
  --ad-side-text-dim:#7a928c;
  --ad-side-active:  rgba(200,255,22,0.12);
  --ad-side-border:  rgba(255,255,255,0.08);

  /* semantic hues — the guide's functional status set (3.4) */
  --ad-success:    #2F7A5C;
  --ad-info:       #2F6F98;
  --ad-warn:       #E3A52B;
  --ad-danger:     #C94B4B;
  --ad-purple:     #8a6fd2;
  /* FND-1996: status colours as TEXT (a delta line, not a fill) — the first step of the hue's own ramp that holds 4.5:1 on every surface (#fff, surface-2, surface-inset): was --ad-danger 4.20:1 on surface-2 */
  --ad-success-text: #2d7458;
  --ad-danger-text:  #bd3939;
  --ad-warn-text:    #7d5810;   /* 5.3:1+ on #fff/surface-2/surface-inset (warn #E3A52B is a fill, 1.9:1 as text) */

  /* semantic tints (backgrounds for tags/badges) — light steps of the same hues */
  --ad-success-bg: #dcece3;  --ad-success-fg: #235c45;
  --ad-info-bg:    #dfeaf3;  --ad-info-fg:    #255878;
  --ad-warn-bg:    #f9edd2;  --ad-warn-fg:    #8a6215;
  --ad-danger-bg:  #f5dede;  --ad-danger-fg:  #963939;
  --ad-neutral-bg: #e5eae6;  --ad-neutral-fg: #4e635d;
  --ad-accent-bg:  #efffc2;  --ad-accent-fg:  #3e6100;
  --ad-purple-bg:  #e8e2f7;  --ad-purple-fg:  #5a449b;

  /* elevation — Deep-tinted */
  --ad-shadow-sm: 0 2px 6px rgba(3,36,37,0.08);
  --ad-shadow-md: 0 8px 22px rgba(3,36,37,0.12);
  --ad-shadow-lg: 0 18px 48px rgba(3,36,37,0.18);

  /* chart ink */
  --ad-grid: #e0e7e2;

  /* chrome bars — default to the theme surfaces/status colors; tenant whitelabel overrides these
     with a brand gradient + matching foreground (L8b). */
  --ad-topbar-bg: var(--ad-surface);
  --ad-topbar-fg: var(--ad-text);
  --ad-topbar-fg-dim: var(--ad-text-subtle);
  --ad-statusbar-bg: var(--ad-success-bg);
  --ad-statusbar-fg: var(--ad-success-fg);

  --ad-radius: 10px;
}

[data-theme="dark"] {
  /* Links: --ad-accent-deep (#416858) on the dark surface (#073132) is 2.2:1 — unreadable; the anchor rule already prefers
     --ad-link, so the dark theme sets it (mint, 8.0:1 on --ad-surface). A Design-Studio theme that sets --ad-link still wins. */
  --ad-link: #7fd4ae;
  color-scheme: dark;
  /* dark mode lives in the wygge-Deep petrol world (guide: dark areas are Deep) */
  --ad-canvas:        #021a1b;
  --ad-surface:       #073132;
  --ad-surface-2:     #052b2c;
  --ad-surface-inset: #0b3b3c;
  --ad-border:        #135052;
  --ad-border-strong: #1f696b;
  --ad-divider:       #0a3536;

  --ad-text:        #e9f1ee;
  --ad-text-muted:  #a3b8b2;
  --ad-text-subtle: #8aa7a1;   /* FND-1990: 4.76:1 on surface-inset (was #74908a = 3.58:1) */
  --ad-text-faint:  #4e6763;

  --ad-side-bg:      #021516;
  --ad-side-bg-2:    #05292a;
  --ad-side-text:    #b3c2be;
  --ad-side-text-dim:#6b8580;
  --ad-side-active:  rgba(200,255,22,0.14);
  --ad-side-border:  rgba(255,255,255,0.07);

  --ad-success:    #4aa57f;
  --ad-info:       #5c97c4;
  --ad-warn:       #ebb954;
  --ad-danger:     #db7070;
  --ad-purple:     #a288e0;
  --ad-success-text: #4eae86;   /* FND-1996: 4.5:1+ on canvas/surface/surface-2/surface-inset (--ad-success is 4.09:1 on surface-inset) */
  --ad-warn-text:    #ebb954;   /* FND-1996: = the dark warn ramp step, 6.8:1+ on every dark surface */
  --ad-danger-text:  #e08282;   /* FND-1996: was --ad-danger #db7070 = 4.39:1 on surface (the CRM "überfällig" delta) */

  --ad-success-bg: #0c3a2b;  --ad-success-fg: #7fd4ae;
  --ad-info-bg:    #10314b;  --ad-info-fg:    #9cc4e6;
  --ad-warn-bg:    #3d2f10;  --ad-warn-fg:    #f2cf85;
  --ad-danger-bg:  #401a1a;  --ad-danger-fg:  #f0a0a0;
  --ad-neutral-bg: #0b3b3c;  --ad-neutral-fg: #a3b8b2;
  --ad-accent-bg:  #2e3d06;  --ad-accent-fg:  #c8ff16;
  --ad-purple-bg:  #251c45;  --ad-purple-fg:  #c2b0f0;

  --ad-shadow-sm: 0 2px 8px rgba(0,0,0,0.30);
  --ad-shadow-md: 0 10px 26px rgba(0,0,0,0.40);
  --ad-shadow-lg: 0 20px 52px rgba(0,0,0,0.52);

  --ad-grid: #0a3536;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
}
/* The stage paints on <html> ONLY: body and the app root stay transparent so the brand tile
   mosaic can sit BEHIND the content (negative z-index paints above the root background but
   below every in-flow box). Peter, 2026-08-28: the tiles must NEVER cover an operational
   element — so the content covers the tiles, never the other way around. */
html { background: var(--ad-canvas); }
html, body {
  color: var(--ad-text);
  font-family: var(--ad-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }

::selection { background: var(--ad-accent); color: var(--ad-on-accent); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ad-border-strong); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ad-text-subtle); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

input, button, select, textarea { font-family: inherit; }

@keyframes ad-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
/* W-ZEIT1 P6 (Peter 2026-11-05): the running header timer reads as a stopwatch - a sweep hand, one turn per 60 s; reduced motion = a still hand next to the filled ring segment */
@keyframes ad-time-sweep { to { transform: rotate(360deg); } }
.ad-time-hand { transform-origin: 50% 50%; animation: ad-time-sweep 60s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ad-time-hand { animation: none; } }
@keyframes ad-spin { to { transform: rotate(360deg); } }
@keyframes ad-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ad-drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* indeterminate sync bar: a stripe sweeps left→right while total is still unknown (e.g. download in flight). */
@keyframes ad-indeterminate { 0% { transform: translateX(-40%); } 100% { transform: translateX(260%); } }
.ad-fade { animation: ad-fade-in 220ms cubic-bezier(0.22,0.61,0.36,1); }

/* Full-width drawer (atoms.jsx Drawer, 01.10.2026). Once the panel is wide ([data-wide]), a stack of
   <Field>s handed DIRECTLY to the drawer (two adjacent .ad-field children) flows into columns instead of
   stretching one input over 1400px. Everything that is not a plain field keeps the full row; a field
   carrying a table/textarea, or marked data-wide-field, keeps the full row too. Drawers whose content is
   one wrapper element are untouched (the :has() guard never matches). */
.ad-drawer[data-wide] .ad-drawer-flow:has(> .ad-field + .ad-field) {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 20px; align-items: start;
}
.ad-drawer[data-wide] .ad-drawer-flow:has(> .ad-field + .ad-field) > * { grid-column: 1 / -1; min-width: 0; }
.ad-drawer[data-wide] .ad-drawer-flow:has(> .ad-field + .ad-field) > :is(button, a, span, img, svg) { justify-self: start; }
.ad-drawer[data-wide] .ad-drawer-flow:has(> .ad-field + .ad-field) > .ad-field:not(:has(table, textarea, [data-wide-field])) { grid-column: auto; }

/* Native form controls outside the Input/Select atoms (ERP textarea, LINK datalist input): same token
   face as the atoms — input border width/radius tokens, brand-coloured focus instead of the browser's
   blue ring (Safari). */
.ad-ctrl { width: 100%; box-sizing: border-box; font-size: 13px; padding: 8px 10px; font-family: var(--ad-font-body);
  color: var(--ad-text); background: var(--ad-surface); border: var(--ad-bw-input, 1.5px) solid var(--ad-border-strong);
  border-radius: var(--ad-radius-input, 8px); outline: none; transition: border-color 120ms; }
.ad-ctrl:focus { border-color: var(--ad-brand); box-shadow: var(--ad-shadow-sm); }
.ad-ctrl::placeholder { color: var(--ad-text-faint); }

/* lucide sizing default */
[data-lucide] { stroke-width: 1.75; }

/* L14b: themable link color (Design-Studio token linkColor) */
a { color: var(--ad-link, var(--ad-accent-deep)); font-family: var(--ad-link-font, inherit); font-size: calc(1em * var(--ad-link-fs-scale, 1)); }

/* L14i/j: themeable link color, font and size (branding tokens) */
a { color: var(--ad-link, var(--ad-accent-deep)); font-family: var(--ad-link-font, inherit); font-size: calc(1em * var(--ad-link-fs-scale, 1)); }

/* Modul-Wuerfel removed 2026-10-01 (Peter) — see pixel_background.jsx for the stage motif. */

/* ── Pixel-Hintergrund: wygge Standard-Hintergrund (pixel_background.jsx, Peter 2026-10-01, v2) ──────
   A fixed layer BEHIND the content (z-index −1, like the Modul-Wuerfel, which it sits under): the stage
   ground with two soft glows + a sparse, grid-aligned mosaic of translucent squares in two clusters.
   GROUND = the fixed wygge CI, never a tenant colour and never black: dark → wygge Deep lifted toward
   Process Green (≈ #103330, glowing to ≈ #24483f lower-left), light → Mist. The --wy-ci-* anchors are NOT
   branding variables (api.jsx never writes them). SQUARES = translucent green steps, LIGHTER than the
   dark ground (Process + Mist-green; Deep only as the faintest step, at most one nuance darker); their hue
   is CI Process shifted toward the tenant primary (--wy-tile-a, which IS Process for wygge → CI 1:1).
   Per-square alpha = level (--lv: .06/.10/.16/.24, set by the engine) × the per-colour factor below.
   Cards keep their own opaque surfaces. */
:root {
  --wy-ci-deep: #032425; --wy-ci-process: #416858; --wy-ci-mist: #E5EAE6;
  --pxbg-hue: color-mix(in srgb, var(--wy-ci-process) 62%, var(--wy-tile-a));
  /* light: Mist ground; green steps darker than it, white steps lighter, Deep faintest */
  --pxbg-ground: var(--wy-ci-mist);
  --pxbg-a: var(--pxbg-hue);
  --pxbg-b: #ffffff;
  --pxbg-c: var(--wy-ci-deep);
  --pxbg-o-a: .8; --pxbg-o-b: 1.8; --pxbg-o-c: .4;
  --pxbg-glow-a: rgba(255, 255, 255, .6);
  --pxbg-glow-b: color-mix(in srgb, var(--pxbg-hue) 9%, transparent);
}
[data-theme="dark"] {
  /* dark (Peter: „im Dark Mode das wygge-CI-Grün"): Deep lifted toward Process — a clearly GREEN ground */
  --pxbg-ground: color-mix(in srgb, var(--wy-ci-deep) 78%, var(--wy-ci-process));
  --pxbg-a: var(--pxbg-hue);
  --pxbg-b: color-mix(in srgb, var(--wy-ci-mist) 72%, var(--pxbg-hue));
  --pxbg-c: var(--wy-ci-deep);
  --pxbg-o-a: 1.5; --pxbg-o-b: .8; --pxbg-o-c: 1;
  --pxbg-glow-a: color-mix(in srgb, var(--wy-ci-process) 44%, transparent);
  --pxbg-glow-b: color-mix(in srgb, var(--wy-ci-process) 24%, transparent);
}
.ad-pxbg { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict;
  background:
    radial-gradient(120% 95% at 0% 100%, var(--pxbg-glow-a), transparent 64%),
    radial-gradient(60% 85% at 100% 64%, var(--pxbg-glow-b), transparent 72%),
    var(--pxbg-ground); }
.ad-pxbg i { position: absolute; left: 0; top: 0; display: block; transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.45, 0, .55, 1); transition-duration: 0ms; }
.ad-pxbg i.pa { background: var(--pxbg-a); opacity: calc(var(--lv, .5) * var(--pxbg-o-a)); }
.ad-pxbg i.pb { background: var(--pxbg-b); opacity: calc(var(--lv, .5) * var(--pxbg-o-b)); }
.ad-pxbg i.pc { background: var(--pxbg-c); opacity: calc(var(--lv, .5) * var(--pxbg-o-c)); }
/* FND-1089 Signet: while a square forms the wygge signet it takes ONE level and the mark's two fills become two MOSAIC
   steps — the tenant-shifted hue (--pxbg-a) and, for the logo's stripe, the lighter step (--pxbg-b, class sgb) — so the mark
   reads as one shape; never a brand colour. The colour change is an opacity cross-fade of an overlay (::after inherits the
   square's own transition), so the formation stays compositor work. */
.ad-pxbg i::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--pxbg-a); opacity: 0; transition: inherit; }
.ad-pxbg i.sg { opacity: calc(var(--lv, .5) * var(--pxbg-o-a)); }
.ad-pxbg i.sg.sgb { opacity: calc(var(--lv, .5) * var(--pxbg-o-b)); }
.ad-pxbg i.sgb::after { background: var(--pxbg-b); }
.ad-pxbg i.sg::after { opacity: 1; }
/* Reduced motion: the engine starts no timers; this also stops any transition already in flight. */
@media (prefers-reduced-motion: reduce) { .ad-pxbg i { transition: none !important; } }

/* ── Logo-Pixel-Spinner (guide 6.4: Aufbau statt Auflösung; Peter 01.10.2026) ─────────────────────
   The loading state IS the wordmark assembling from its own pixels, looping (logo_intro.jsx,
   WyggeLogoSpinner). Pixels paint currentColor, Signal pixels the accent token — legible on any
   surface. No rotation. The engine owns .wy-lps-px; React only owns the box. Reduced motion /
   no WAAPI: the assembled word stands still at 60 %. */
.wy-lps{position:relative;display:inline-block;vertical-align:middle;flex-shrink:0;line-height:0}
.wy-lps-px{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.wy-lps-px i{position:absolute;left:0;top:0;display:block;background:currentColor}
.wy-lps-px i.s{background:var(--wy-lps-signal,var(--ad-accent))}
.wy-lps.is-still .wy-lps-px{opacity:.6}
.wy-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Boot screen (index.html #root, then AuthGate 'init'): the lg spinner on wygge Deep, white word + Signal —
   the on-dark colouring of the logo. React replaces the static boot node on its first commit. */
.wy-boot{height:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ad-brand);color:#fff}

/* Import-Assistent connection graph (FND-1372 lines, FND-1382 anchors) */
.mi-zeile{position:relative;transition:border-color 140ms ease,background 140ms ease,box-shadow 140ms ease}
.mi-kante{transition:stroke-width 120ms ease}
.mi-kante:hover{stroke-width:4.5}
.mi-kante-neu{animation:mi-zeichnen 520ms cubic-bezier(.2,.7,.2,1) both}
[data-mi-anker]::after{content:"";position:absolute;top:calc(50% - 5.5px);left:-6.5px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ad-accent-deep);background:var(--ad-surface)}
[data-mi-anker^=r]::after{left:auto;right:-6.5px}
[data-mi-anker$="1"]::after{background:radial-gradient(var(--ad-accent-deep) 2.4px,var(--ad-surface) 2.9px)}
/* FND-1546: the Topbar context switch (radiogroup) - visible focus ring per the style contract, the calm 120 ms colour transition, none under reduced motion */
.ad-roleswitch-item{transition:background-color 120ms,color 120ms,box-shadow 120ms}
.ad-roleswitch-item:focus-visible{outline:2px solid var(--ad-accent-deep);outline-offset:1px}
@media (prefers-reduced-motion: reduce){.ad-roleswitch-item{transition:none}}
/* FND-1371/1373: segments of the row controls — a disabled one is muted AND says why on hover / keyboard focus */
.mi-cf-seg.is-aus{color:var(--ad-text-faint)!important;background:repeating-linear-gradient(135deg,transparent 0 4px,var(--ad-border) 4px 5px)!important;text-decoration:line-through;opacity:.75}
.mi-cf-seg:focus-visible{outline:2px solid var(--ad-accent-deep);outline-offset:1px}
.mi-cf-hint{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:20;width:max-content;max-width:200px;padding:4px 8px;border-radius:6px;font-size:11.5px;font-weight:600;background:var(--ad-surface);color:var(--ad-text);border:1px solid var(--ad-border-strong);box-shadow:var(--ad-shadow-sm)}
.mi-cf-segw:hover .mi-cf-hint,.mi-cf-segw:focus-within .mi-cf-hint{display:block}
@keyframes mi-zeichnen{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}   /* pathLength="1" on the path: the draw-in works for any length */
.mi-graf{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);gap:0;min-width:760px}
/* The connection stage NEVER cuts content off: columns may shrink (minmax(0,1fr) beats the grid
   min-width:auto trap), rows wrap internally, and when a display is genuinely too narrow the
   stage scrolls horizontally inside its own gutter instead of clipping. */
.mi-graf-huelle{overflow-x:auto;overflow-y:visible;padding-bottom:4px}
@media (max-width:1200px){.mi-graf{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}}
.mi-drop{transition:border-color 160ms ease,background 160ms ease}
.mi-drop:hover{border-color:var(--ad-accent-deep)}
@media (prefers-reduced-motion: reduce){
  .mi-kante-neu{animation:none}
}

/* ── Wyse (formerly Plattform-Assistent; Peter 2026-09-02, renamed 2026-09-28, visual v2 2026-09-28) ──
   Drawer from the right, topbar launcher, the embeddable WysePanel (.as-panel*) and — via aliases —
   the start dashboard's Wyse card (.dash-wyse-*). v2 = the dashboard card's language: LIME gradient
   header card, sparkle mark, white input with a round arrow, LIME pills, glass backdrop.
   Brand Guidelines 2026: Deep text, Signal (LIME) only as tint/button, Instrument Sans.
   Everything respects prefers-reduced-motion; dark theme only through the tokens below. */
:root{
  --as-tint: var(--ad-accent-bg);
  --as-tint: color-mix(in srgb, var(--ad-accent) 14%, var(--ad-surface));
  --as-tint-strong: color-mix(in srgb, var(--ad-accent) 32%, var(--ad-surface));
  --as-wash: linear-gradient(180deg, var(--as-tint) 0%, var(--ad-surface) 100%);
  /* v2 tokens — the dashboard card's former --dash-lime-* values; --as-card = --dash-card (both themes) */
  --as-lime-a: #f6ffd9;
  --as-lime-b: #dcf98a;
  --as-lime-pill: rgba(200, 255, 22, 0.22);
  --as-lime-pill-border: rgba(126, 160, 10, 0.35);
  --as-card: #ffffff;
  /* glass (same recipe as the dashboard's glass sheets) */
  --as-scrim: rgba(3, 36, 37, 0.18);
  --as-glass-bg: rgba(255, 255, 255, 0.90);
  --as-hairline: rgba(3, 36, 37, 0.10);
  --as-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 18px 48px rgba(3, 36, 37, 0.18);
  --as-spring: cubic-bezier(.2, .9, .25, 1.15);
  /* conversation */
  --as-bubble-wyse: #fbffee;
  --as-bubble-wyse-border: rgba(126, 160, 10, 0.22);
  --as-bubble-user: var(--ad-brand);
  --as-readable-green: var(--ad-accent-deep);
  --as-input-bg: #ffffff;
}
[data-theme="dark"]{
  --as-lime-a: color-mix(in srgb, #C8FF16 10%, #073132);
  --as-lime-b: color-mix(in srgb, #C8FF16 26%, #073132);
  --as-lime-pill: rgba(200, 255, 22, 0.14);
  --as-lime-pill-border: rgba(200, 255, 22, 0.32);
  --as-card: var(--ad-surface);
  --as-scrim: rgba(0, 0, 0, 0.32);
  --as-glass-bg: rgba(7, 49, 50, 0.90);
  --as-hairline: rgba(229, 234, 230, 0.14);
  --as-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 52px rgba(0, 0, 0, 0.52);
  --as-bubble-wyse: color-mix(in srgb, #C8FF16 7%, #073132);
  --as-bubble-wyse-border: rgba(200, 255, 22, 0.18);
  --as-bubble-user: #0f4546;
  --as-readable-green: var(--ad-accent);
  --as-input-bg: var(--ad-surface-2);
}

/* ── Shared Wyse anatomy: drawer (.as-wyse-*) + dashboard card (.dash-wyse-* = alias) ──
   Moved from dashboard.css (feat/start-dashboard 705da5e). Each rule body is the card's rule with the
   token prefix --dash- → --as- (same values). dashboard.css no longer carries a copy (removed after a
   computed-style comparison of every card element, light + dark: 0 differences); this block is the only
   source of the card's look.
   .as-wyse-card adds its container properties in a separate rule so nothing leaks into the card.
   .dash-card.dash-wyse (not .dash-wyse): theme.css loads BEFORE dashboard.css, so the container alias must
   out-rank dashboard.css's .dash-card (padding/gap) the way the old later-in-file .dash-wyse did. */
.as-wyse-card, .dash-card.dash-wyse { background: linear-gradient(135deg, var(--as-lime-a) 0%, var(--as-lime-b) 100%); gap: 14px; padding: 18px; }
.as-wyse-head, .dash-wyse-head { display: flex; align-items: center; gap: 12px; }
.as-wyse-mark, .dash-wyse-mark { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ad-accent); color: var(--ad-on-accent); box-shadow: 0 0 0 1px rgba(3, 36, 37, 0.08), 0 6px 16px rgba(126, 160, 10, 0.35); }
.as-wyse-names, .dash-wyse-names { min-width: 0; }
.as-wyse-title, .dash-wyse-title { font-family: var(--ad-font-display); font-weight: 700; font-size: 17px; color: var(--ad-text); }
.as-wyse-sub, .dash-wyse-sub { font-size: 12.5px; color: var(--ad-text-muted); margin-top: 1px; }
.as-wyse-ask, .dash-wyse-ask { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 14px; border-radius: 12px; background: var(--as-card); box-shadow: 0 1px 2px rgba(3, 36, 37, 0.06), 0 4px 14px rgba(3, 36, 37, 0.06); border: 1px solid rgba(3, 36, 37, 0.06); }
.as-wyse-ask:focus-within, .dash-wyse-ask:focus-within { box-shadow: 0 0 0 2px var(--ad-accent-deep); }
.as-wyse-ask input, .dash-wyse-ask input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; padding: 0; margin: 0; box-shadow: none; -webkit-appearance: none; appearance: none; font-family: var(--ad-font-body); font-size: 13px; color: var(--ad-text); }
.as-wyse-ask input::placeholder, .dash-wyse-ask input::placeholder { color: var(--ad-text-subtle); }
.dash-wyse-ask-btn { width: 100%; cursor: pointer; justify-content: space-between; font-family: var(--ad-font-body); font-size: 13px; color: var(--ad-text-subtle); }
.as-wyse-go, .dash-wyse-go { width: 32px; height: 32px; border-radius: 999px; border: none; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ad-surface-inset); color: var(--ad-text); transition: background 140ms; }
.as-wyse-go:not(:disabled):hover, .as-wyse-ask input:not(:placeholder-shown) + .as-wyse-go, .dash-wyse-go:not(:disabled):hover, .dash-wyse-ask input:not(:placeholder-shown) + .dash-wyse-go { background: var(--ad-accent); color: var(--ad-on-accent); }
.as-wyse-go:disabled, .dash-wyse-go:disabled { cursor: default; opacity: .8; }
.as-wyse-pills, .dash-wyse-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.as-wyse-pill, .dash-wyse-pill { max-width: 100%; padding: 7px 12px; border-radius: 999px; cursor: pointer; font-family: var(--ad-font-body); font-weight: 600; font-size: 12px; color: var(--ad-text); background: var(--as-lime-pill); border: 1px solid var(--as-lime-pill-border); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-wyse-pill:hover:not(:disabled), .dash-wyse-pill:hover:not(:disabled) { background: color-mix(in srgb, var(--ad-accent) 45%, transparent); }
.as-wyse-pill:focus-visible, .dash-wyse-pill:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 1px; }
.as-wyse-answer, .dash-wyse-answer { font-size: 12.5px; line-height: 1.5; color: var(--ad-text); background: rgba(255, 255, 255, 0.6); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; max-height: 180px; overflow: auto; }
.as-wyse-note, .dash-wyse-note { font-size: 10.5px; color: var(--ad-text-subtle); }
/* Dashboard card only (2026-10-08, „WYSE lässt sich nicht ausblenden“): the „Ausblenden“ control at the head's right end. */
.dash-wyse-hide { margin-left: auto; align-self: flex-start; width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ad-text-muted); transition: background 140ms, color 140ms; }
.dash-wyse-hide:hover { background: color-mix(in srgb, var(--ad-text) 10%, transparent); color: var(--ad-text); }
.dash-wyse-hide:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 1px; }

/* ── Drawer v2 ── */
/* glass backdrop: soft scrim + blur instead of the old grey veil; the drawer floats with a hairline */
.as-schleier{position:fixed;inset:0;z-index:95;display:flex;justify-content:flex-end;padding:12px;box-sizing:border-box;
  background:var(--as-scrim);-webkit-backdrop-filter:blur(6px) saturate(140%);backdrop-filter:blur(6px) saturate(140%);
  animation:as-schleier-in 200ms ease-out}
@keyframes as-schleier-in{from{opacity:0}to{opacity:1}}
.as-drawer{width:440px;max-width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;
  background:var(--as-glass-bg);border:1px solid var(--as-hairline);border-radius:20px;box-shadow:var(--as-glass-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  font-family:var(--ad-font-body);color:var(--ad-text);
  animation:as-herein 280ms var(--as-spring) both}
@keyframes as-herein{from{transform:translateX(56px);opacity:0}to{transform:none;opacity:1}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.as-drawer{background:var(--ad-surface)}}
@media (max-width: 560px){.as-schleier{padding:0}.as-drawer{width:100%;border:none;border-radius:0}}

/* header = the dashboard card */
.as-wyse-card{display:flex;flex-direction:column;flex-shrink:0;margin:10px 10px 0;border-radius:16px;
  border:1px solid color-mix(in srgb, var(--as-lime-pill-border) 55%, transparent)}
.as-wyse-names{flex:1}
.as-wyse-card .as-icon-btn{align-self:flex-start;color:var(--ad-text-muted)}
.as-wyse-card .as-icon-btn:hover{background:color-mix(in srgb, var(--ad-text) 8%, transparent);color:var(--ad-text)}
.as-modus{white-space:nowrap}
.as-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;
  border:none;border-radius:10px;background:transparent;color:var(--ad-text-subtle);cursor:pointer}
.as-icon-btn:hover{background:var(--ad-surface-2);color:var(--ad-text)}
.as-icon-btn:focus-visible{outline:2px solid var(--ad-accent-deep);outline-offset:1px}
/* FND-1945 F2: the sidebar is dark in both themes - its focus ring uses the accent, not accent-deep */
.ad-nav-focus:focus-visible{outline:2px solid var(--ad-accent);outline-offset:1px}
/* FND-1964: the object bar's tab row scrolls inside its own container; no scrollbar chrome on touch widths */
[data-wy-objectbar-scroll]{scrollbar-width:thin}
[data-wy-objectbar-scroll]::-webkit-scrollbar{height:4px}
.as-wyse-mark-s{width:26px;height:26px;border-radius:8px;box-shadow:0 0 0 1px rgba(3,36,37,0.08)}
.as-wyse-mark-xs{width:20px;height:20px;border-radius:6px;box-shadow:none}

/* conversation */
.as-inhalt{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 8px}
.as-zeile{display:flex;gap:8px;justify-content:flex-start;align-items:flex-end;margin-bottom:12px}
.as-zeile-user{justify-content:flex-end}
.as-bubble{max-width:86%;box-sizing:border-box;background:var(--as-bubble-wyse);border:1px solid var(--as-bubble-wyse-border);
  border-radius:16px 16px 16px 4px;padding:10px 13px;font-size:12.5px;line-height:1.6;color:var(--ad-text);
  box-shadow:0 1px 2px rgba(3,36,37,0.04)}
.as-bubble-user{background:var(--as-bubble-user);border-color:var(--as-bubble-user);color:#fff;border-radius:16px 16px 4px 16px;box-shadow:none}
.as-bubble-text{white-space:pre-wrap}
.as-denkt{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ad-text-subtle)}
.as-quellen{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.as-chip{display:inline-flex;align-items:center;gap:5px;cursor:pointer;border:1px solid var(--as-lime-pill-border);
  background:var(--as-card);color:var(--as-readable-green);border-radius:999px;padding:3px 10px;font:inherit;font-size:11px;font-weight:700}
.as-chip:hover{background:var(--as-lime-pill)}
.as-chip:focus-visible{outline:2px solid var(--ad-accent-deep);outline-offset:1px}
.as-chip:disabled{opacity:0.5;cursor:not-allowed}

/* "Sie sind hier" */
.as-hier{display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box;text-align:left;cursor:pointer;
  background:var(--as-card);border:1px solid var(--as-hairline);border-radius:14px;padding:12px 14px;margin:0 0 14px 34px;
  max-width:calc(100% - 34px);font:inherit;color:var(--ad-text);box-shadow:0 1px 2px rgba(3,36,37,0.05);
  transition:border-color 140ms,box-shadow 140ms}
.as-hier:hover{border-color:var(--as-lime-pill-border);box-shadow:0 4px 14px rgba(3,36,37,0.08)}
.as-hier:focus-visible{outline:2px solid var(--ad-accent-deep);outline-offset:1px}
.as-hier-label{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--as-readable-green)}
.as-hier b{font-family:var(--ad-font-display);font-size:14.5px;font-weight:600;color:var(--ad-text)}
.as-hier-zweck{font-size:12px;line-height:1.5;color:var(--ad-text-muted)}
.as-hier-mehr{display:inline-flex;align-items:center;gap:5px;margin-top:2px;font-size:11.5px;font-weight:700;color:var(--as-readable-green)}
.as-hier:hover .as-hier-mehr{text-decoration:underline}

/* topics: former cards, now pills */
.as-label{font-family:var(--ad-font-label, var(--ad-font-body));font-size:10.5px;font-weight:700;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--ad-text-subtle)}
.as-themen{margin-top:8px}
.as-themen-kopf{display:flex;align-items:center;gap:8px;margin:0 0 9px}
.as-suche{margin-left:auto;width:180px;height:30px;box-sizing:border-box;padding:0 12px;border-radius:999px;border:1px solid var(--as-hairline);
  background:var(--as-card);color:var(--ad-text);font:inherit;font-size:12px;outline:none}
.as-suche:focus{border-color:var(--ad-accent-deep);box-shadow:0 0 0 1px var(--ad-accent-deep)}
.as-themen-pills{display:flex;flex-wrap:wrap;gap:6px}
.as-thema{display:inline-flex;align-items:center;gap:6px;max-width:100%;box-sizing:border-box;padding:6px 11px;border-radius:999px;
  cursor:pointer;font:inherit;font-size:12px;font-weight:600;color:var(--ad-text);background:var(--as-card);
  border:1px solid var(--as-hairline);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background 140ms,border-color 140ms}
.as-thema svg{flex-shrink:0;color:var(--as-readable-green)}
.as-thema:hover{background:var(--as-lime-pill);border-color:var(--as-lime-pill-border)}
.as-thema:focus-visible{outline:2px solid var(--ad-accent-deep);outline-offset:1px}
.as-leer{font-size:12px;color:var(--ad-text-subtle)}

/* topic deep dive */
.as-zurueck{display:inline-flex;align-items:center;gap:5px;border:none;background:transparent;cursor:pointer;color:var(--ad-text-subtle);
  font:inherit;font-size:12px;font-weight:600;padding:4px 8px 4px 4px;margin:0 0 10px -4px;border-radius:8px}
.as-zurueck:hover{color:var(--ad-text);background:var(--ad-surface-2)}
.as-zurueck:focus-visible{outline:2px solid var(--ad-accent-deep);outline-offset:1px}
.as-tiefe-kopf{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.as-tiefe-icon{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  background:var(--as-lime-pill);border:1px solid var(--as-lime-pill-border);color:var(--ad-text)}
.as-tiefe-titel{font-family:var(--ad-font-display);font-weight:700;font-size:17px;color:var(--ad-text)}
.as-tiefe-bereich{font-size:11.5px;color:var(--ad-text-subtle)}
.as-tiefe-zweck{font-size:13px;font-weight:600;line-height:1.5;color:var(--ad-text);margin:0 0 10px}
.as-tiefe-text{font-size:12.5px;line-height:1.65;color:var(--ad-text-muted);margin:0 0 10px}
.as-ablauf{background:linear-gradient(135deg, var(--as-lime-a) 0%, color-mix(in srgb, var(--as-lime-b) 45%, var(--as-lime-a)) 100%);
  border:1px solid var(--as-lime-pill-border);border-radius:14px;padding:12px 14px;margin:4px 0 14px}
.as-ablauf ol{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.as-ablauf li{display:flex;gap:9px;font-size:12.5px;line-height:1.5;color:var(--ad-text)}
.as-ablauf-nr{width:19px;height:19px;border-radius:6px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ad-accent);color:var(--ad-on-accent);font-size:10.5px;font-weight:800}
.as-verwandt .as-label{display:block;margin-bottom:8px}

/* footer: suggestion pills (one wrapping row) + the card's input */
.as-fuss{flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:12px 12px 12px;border-top:1px solid var(--as-hairline);
  background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--as-lime-a) 55%, transparent) 100%)}
.as-fuss .as-wyse-pills,.as-panel .as-wyse-pills{flex-direction:row;flex-wrap:wrap;gap:6px}
.as-fuss .as-wyse-ask{border-color:var(--as-hairline);background:var(--as-input-bg)}
.as-wyse-pill:disabled{opacity:0.55;cursor:not-allowed}

/* topbar launcher: soft Signal tint, Deep text, the small sparkle mark */
.as-launcher{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:1px solid var(--as-tint-strong);
  background:var(--as-tint);color:var(--ad-text);border-radius:999px;padding:5px 13px 5px 6px;font:inherit;font-size:12px;font-weight:600}
.as-launcher:hover{border-color:var(--ad-accent-deep)}
.as-launcher:focus-visible{outline:2px solid var(--ad-accent-deep);outline-offset:1px}

/* platform scope handle (TenantScopeBar, api.jsx): docked at the right edge, expands the Bereich & Verbindung panel */
.ad-scope-handle{transition:color 120ms ease,border-color 120ms ease}
.ad-scope-handle:hover{color:var(--ad-text) !important;border-color:var(--ad-accent-deep) !important}
.ad-scope-handle:focus-visible{outline:2px solid var(--ad-accent-deep);outline-offset:2px}
@media (max-width: 1180px){.as-launcher-label{display:none}.as-launcher{padding:5px 6px}}

/* embeddable card (WysePanel) */
.as-unterzeile{font-size:11.5px;line-height:1.4;color:var(--ad-text-subtle)}
.as-panel{display:flex;flex-direction:column;height:420px;min-width:0;background:var(--ad-surface);
  border:1px solid var(--ad-border);border-radius:16px;box-shadow:var(--ad-shadow-sm);overflow:hidden;font-family:var(--ad-font-body)}
.as-panel-kopf{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 16px;
  background:linear-gradient(135deg, var(--as-lime-a) 0%, var(--as-lime-b) 100%);border-bottom:1px solid var(--as-hairline)}
.as-panel-name{font-family:var(--ad-font-display);font-weight:700;font-size:16px;letter-spacing:-0.01em;color:var(--ad-text)}
.as-panel-liste{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 4px}
.as-panel-leer p{margin:0 0 12px;font-size:12.5px;line-height:1.55;color:var(--ad-text-muted)}
.as-panel-fuss{padding:10px 12px 12px}
.as-panel .as-bubble{max-width:88%}

@media (prefers-reduced-motion: reduce){
  .as-schleier,.as-drawer{animation:none}
  .as-wyse-go,.as-thema,.as-hier{transition:none}
}

/* ── CRM-Übersicht: Inhaltskarten im Masonry — wiederhergestellt aus 504c7a0 (beim Portieren der CRM-Screens auf main
   verloren gegangen; ohne diese Regeln klebten die Karten ohne Abstand aneinander, Prod 2026-09-08). ── */
/* ── Masonry für Übersichtsseiten (CRM-Dashboard) ────────────────────────────────────────────
   Karten unterschiedlicher Höhe ohne Löcher. Im Raster erzwingt die höchste Karte einer Zeile
   die Zeilenhöhe, und jede kürzere Karte endet mit einer Leerfläche darunter — bei einem
   Dashboard aus Balkenlisten verschieden vieler Zeilen ist das der Regelfall, nicht die
   Ausnahme. CSS-Spalten setzen die nächste Karte stattdessen direkt unter die vorige.

   `column-width` (nicht `column-count`): der Browser leitet die Spaltenzahl aus der freien
   Breite ab — drei Spalten auf einem breiten Bildschirm, eine auf einem schmalen, ohne eine
   einzige Media Query.

   `break-inside: avoid` auf den Kindern ist PFLICHT, sonst zerschneidet der Spaltenumbruch eine
   Karte mitten im Diagramm. Der Rand steht unten am Kind statt als `gap` am Container, weil
   CSS-Spalten keinen Zeilenabstand kennen. */
/* 520px, nicht 400: gemessen am 26.07.2026 mit den echten Kartenhöhen (294/200/162/187 px).
   Bei 400px entstehen auf einem 1276px breiten Inhaltsbereich DREI Spalten und damit eine
   Unwucht von 149px — sichtbar als Loch unter der kürzesten Spalte. Bei 520px sind es ZWEI,
   und die Unwucht fällt auf 45px. Auf breiteren Bildschirmen werden es wieder drei, dann aber
   mit entsprechend mehr Karten je Spalte.
   `column-fill: balance` ist zwar der Vorgabewert, steht aber ausdrücklich hier: ohne ihn füllt
   der Browser spaltenweise auf und die letzte Spalte bliebe leer. */
/* Abstand als INNENABSTAND des Kind-Wrappers, nicht als Außenrand: WebKit (Safari) trägt einen unteren Außenrand am
   Spaltenumbruch in die nächste Spalte hinein, die rechte Spalte begann dort 14px tiefer als die linke (Prod
   2026-09-08, Peter). Ein Innenabstand gehört zur Box, wird am Umbruch nicht verschleppt und zählt zur
   Containerhöhe — deshalb gleicht der negative Container-Rand die letzte Fuge exakt aus (Flex-gap des Elternelements
   liefert die 14px an der Segmentgrenze). */
.crm-masonry { column-width: 520px; column-gap: 14px; column-fill: balance; margin-bottom: -14px; }
.crm-masonry > * { break-inside: avoid; -webkit-column-break-inside: avoid; padding-bottom: 14px; }
/* KEIN column-span mehr. `column-span: all` mitten in CSS-Spalten frisst die Ränder der
   Nachbarn — zwischen einer Spaltenkarte und der spannenden Karte stand KEIN Abstand (am
   26.07.2026 live zwischen „Anstehende Abschlüsse" und „Zuletzt passiert" zu sehen). Volle-
   Breite-Karten werden deshalb in screens_crm.jsx als EIGENE Blöcke zwischen den Masonry-
   Containern gerendert; der Flex-Abstand des Elternelements übernimmt die Lücke. Das
   Live nachgemessen (26.07.): der untere Kind-Rand BLUTET aus dem Spalten-Container heraus
   (CSS-Spalten zählen ihn nicht zur Containerhöhe) — ein negativer Container-Rand zöge die
   nächste Karte deshalb auf 0 an die höchste Spalte heran. Der Flex-Abstand allein ergibt die
   gewollten 14px an der Segmentgrenze. */
/* FND-1570: the Topbar "Kontext" bottom sheet below 768 px - calm 160 ms slide-up, none under reduced motion; the buttons share the roleswitch focus ring */
@keyframes ad-sheet-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){[data-ctx-sheet]{animation:none!important}}

/* FND-1580: the Sidebar as a drawer below 768 px - calm 160 ms slide-in from the left over a fading backdrop (transform / opacity only), none under reduced motion */
@keyframes ad-drawer-in{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes ad-drawer-fade{from{opacity:0}to{opacity:1}}
[data-nav-drawer="open"]{animation:ad-drawer-in 160ms ease-out both}
[data-nav-drawer-backdrop]{animation:ad-drawer-fade 160ms ease-out both}
@media (prefers-reduced-motion: reduce){[data-nav-drawer="open"],[data-nav-drawer-backdrop]{animation:none!important}}

/* FND-1945 / DEC-138: the sidebar's icon mode - the column narrows in 160 ms, the flyout of a group fades in over 120 ms (opacity / transform only); both none under reduced motion */
@keyframes ad-rail-fly{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
aside[data-nav-mode="full"],aside[data-nav-mode="rail"]{transition:width 160ms ease}
[data-nav-flyout]{animation:ad-rail-fly 120ms ease-out both}
@media (prefers-reduced-motion: reduce){aside[data-nav-mode="full"],aside[data-nav-mode="rail"]{transition:none}[data-nav-flyout]{animation:none!important}}

/* FND-1990: „Zum Inhalt springen“ — the first Tab stop of the shell, visible only while focused; lands on <main id="ad-main"> so a keyboard user reaches a screen's actions without tabbing the whole sidebar. */
.ad-skip-link { position: fixed; left: 12px; top: -64px; z-index: 5000; padding: 10px 16px; border-radius: var(--ad-radius-sm, 6px); background: var(--ad-surface); color: var(--ad-text); font: 600 13px var(--ad-font-body); text-decoration: none; border: 2px solid var(--ad-accent-deep, var(--ad-text)); box-shadow: var(--ad-shadow-md, 0 4px 14px rgba(0,0,0,.2)); }
.ad-skip-link:focus, .ad-skip-link:focus-visible { top: 12px; }
#ad-main:focus { outline: none; }