/* ===================================================================
   wygge — Start-Dashboard (screens_dashboard.jsx / dashboard_grid.jsx / dashboard_catalog.jsx)
   Brand Guidelines 2026 tokens only (theme.css): Deep --ad-brand, Signal --ad-accent (LIME, fixed),
   Process --ad-process / --ad-accent-deep, Mist, Cocoon, Instrument Sans. Tenant whitelabel overrides
   of those tokens therefore apply here too. Separate file for the dashboard's own rules; the Wyse card
   shares its rules with the Wyse drawer in theme.css (.as-wyse-* / .dash-wyse-* aliases).
   =================================================================== */

:root {
  --dash-glass-bg: rgba(255, 255, 255, 0.62);
  --dash-glass-border: 1px solid rgba(3, 36, 37, 0.10);
  --dash-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 18px 48px rgba(3, 36, 37, 0.18);
  --dash-scrim: rgba(3, 36, 37, 0.18);
  --dash-spring: cubic-bezier(.2, .9, .25, 1.15);
  --dash-ease: cubic-bezier(.2, .8, .2, 1);
  /* Visual round 2 (reference screenshot): pale mist page, dark stage, green/cream tiles (lime Wyse: theme.css). */
  --dash-page: #E9EDE6;
  --dash-stage-a: #0b2b2a;             /* = DASH_HERO_STAGE_RGB, the hero dissolves into it */
  --dash-stage-b: #0a2626;
  --dash-stage-text: #eef3f0;
  --dash-stage-muted: rgba(238, 243, 240, 0.66);
  /* Dashboard surfaces (chart cards, right-column cards): white in light; the Deep family in dark (below). */
  --dash-card: #ffffff;
  --dash-card-text: var(--ad-text);
  --dash-card-muted: var(--ad-text-subtle);
  --dash-card-line: var(--ad-divider);
  --dash-card-shadow: 0 1px 2px rgba(3, 36, 37, 0.06), 0 8px 24px rgba(3, 36, 37, 0.08);
  /* Controls ON the stage (toolbar buttons, +, view toggle, undo, empty hint): white glass on the dark stage;
     flush + light re-points them to the light surface (see "View mode randlos"). */
  --dash-ctl-bg: rgba(255, 255, 255, 0.08);
  --dash-ctl-bg-hover: rgba(255, 255, 255, 0.14);
  --dash-ctl-border: rgba(255, 255, 255, 0.18);
  --dash-ctl-fg: var(--dash-stage-text);
  --dash-ctl-dash: rgba(255, 255, 255, 0.28);
  /* Round 5c: the hero photo dissolves into whatever paints behind it (the stage) over this height. */
  --dash-hero-blend: 75px;
  /* The slogan's bar is wygge's Signal LIME for wygge / unbranded tenants. FND-403 (Peter 2026-10-01): a tenant with its
     OWN accent never sees lime — .dash[data-accent="tenant"] (bottom of this file) re-points it to the measured accent. */
  --dash-signal: #C8FF16;
  --dash-radius: 14px;
  /* R6-A: tile colours are NOT constants any more — every tile carries its tone as inline custom properties
     (--tile-bg-a/-b, --tile-text/-muted/-ring/-edge, --tile-back-*), computed with measured contrast from the
     tenant palette (dashboard_grid.jsx dashTilePalette). The .dash-tile rule below only holds the tone2
     (Cocoon) values as the first-paint fallback. */
  --dash-up: #2F7A5C;
  --dash-down: #C94B4B;
  /* FND-1996 B: delta/trend TEXT (fills + sparkline strokes keep --dash-up/-down) */
  --dash-up-text: var(--ad-success-text);
  --dash-down-text: var(--ad-danger-text);
}
[data-theme="dark"] {
  --dash-glass-bg: rgba(7, 49, 50, 0.58);
  --dash-glass-border: 1px solid rgba(229, 234, 230, 0.14);
  --dash-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 52px rgba(0, 0, 0, 0.52);
  --dash-scrim: rgba(0, 0, 0, 0.32);
  --dash-page: var(--ad-canvas);
  --dash-stage-a: #0b2b2a;
  --dash-stage-b: #071f1f;
  /* Round 5c (R5C §dark): the dashboard's dark surfaces come from the Deep family (#0f3736 / #eaf1f1), never
     from the cockpit canvas — a tenant whitelabel may paint that navy (bench: rgb(15,39,64) cards on the green
     stage = two dark families on one screen). */
  --dash-card: #0f3736;
  --dash-card-text: #eaf1f1;
  --dash-card-muted: #9db7b2;
  --dash-card-line: rgba(234, 241, 241, 0.12);
  --dash-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  --dash-up: #4aa57f;
  --dash-down: #db7070;
  /* >= 4.5:1 on the Deep card #0f3736, surface-2 #0b2f2e and inset #134541 (the .dash re-pointing below) */
  --dash-up-text: #62c29a;
  --dash-down-text: #ec9696;
}
/* Dark: every surface/line/text token the dashboard's own components read (right-column cards, sheets,
   chart cards, catalog, menus) is re-pointed ONCE here to the Deep family. --ad-canvas stays the theme's
   (the page and the flush stage follow the theme; the accent/status colours stay the tenant's). */
[data-theme="dark"] .dash {
  --ad-surface: var(--dash-card); --ad-surface-2: #0b2f2e; --ad-surface-inset: #134541;
  --ad-border: #1f5250; --ad-border-strong: #2b6764; --ad-divider: var(--dash-card-line);
  --ad-text: var(--dash-card-text); --ad-text-muted: #b3c8c4; --ad-text-subtle: var(--dash-card-muted); --ad-text-faint: #5d7a75;
}

/* ── Page composition ─────────────────────────────────────────────── */
main:has(> .dash) { background: var(--dash-page); }
.dash { padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 18px; box-sizing: border-box; min-width: 0; min-height: 100%; font-family: var(--ad-font-body); color: var(--ad-text); background: var(--dash-page); }
.dash.dash-wide { flex-direction: row; align-items: flex-start; }
.dash-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--dash-stage-a) 0%, var(--dash-stage-b) 100%); color: var(--dash-stage-text);
  box-shadow: 0 10px 30px rgba(3, 36, 37, 0.16);
}
/* gap = the tile gap (DASH_GAP 12 px): control row → strip → tiles read as one grid. The first block overlaps the hero
   by 30 px; with a strip, the ONE control row (36 px) sits above it on the hero's lower edge, so the strip keeps
   its 30-px overlap: -(30 + 36 + 12). */
.dash-stage { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 18px; margin-top: -30px; }
.dash-stage[data-strip="1"] { margin-top: -78px; }
.dash-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash.dash-wide .dash-side { width: clamp(290px, 26%, 380px); flex-shrink: 0; position: sticky; top: 0; }
.dash:not(.dash-wide) .dash-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.dash-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Hero: generated mountain panorama (dashboard_hero.jsx) ───────── */
/* Transparent: the photo's bottom blend (below) dissolves into exactly what paints behind the hero — the
   stage (.dash-main): dark green when padded, the theme canvas when flush. */
.dash-hero { container-type: inline-size; position: relative; overflow: hidden; min-height: 262px; box-sizing: border-box; color: #fff; isolation: isolate; background: transparent; }
.dash-hero-art, .dash-hero-photo { position: absolute; inset: 0; z-index: 0; }
/* Round 5c (R5C §2): a 75-px ALPHA blend at the bottom of every backdrop layer (photo, generated art, the
   loading plate) AND of the contrast shade, so no dark band is left over a light flush stage. */
.dash-hero-art, .dash-hero-photo, .dash-hero-fallback, .dash-hero-shade {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--dash-hero-blend)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--dash-hero-blend)), transparent 100%);
}
.dash-hero-fallback .dash-hero-art { -webkit-mask-image: none; mask-image: none; }   /* masked once, by its wrapper */
.dash-hero-canvas, .dash-hero-svg { display: block; width: 100%; height: 100%; }
.dash-hero-photo { background-size: cover; background-position: center; }
/* text contrast: Deep from the left (greeting) and a lighter veil on the right (the three words) */
.dash-hero-shade {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 36, 37, 0.86) 0%, rgba(3, 36, 37, 0.62) 30%, rgba(3, 36, 37, 0.10) 56%, rgba(3, 36, 37, 0) 68%),
    linear-gradient(270deg, rgba(3, 36, 37, 0.42) 0%, rgba(3, 36, 37, 0) 26%),
    linear-gradient(180deg, rgba(3, 36, 37, 0.18) 0%, rgba(3, 36, 37, 0) 30%);
}
.dash-hero-content { position: relative; z-index: 1; max-width: 50%; padding: 30px 32px 56px; display: flex; flex-direction: column; gap: 6px; }
.dash-hero-greet { margin: 0; font-family: var(--ad-font-display); font-weight: 600; font-size: 34px; line-height: 1.12; letter-spacing: -0.015em; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); }
.dash-hero-sub { font-size: 19px; font-weight: 500; color: #fff; letter-spacing: -0.005em; }
.dash-hero-motto { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); max-width: 34ch; }
/* The slogan "System an, / Kopf frei." — ONE right-aligned block (ragged left, both lines end on the same right
   edge), the LIME bar under the last line on that edge. Round 5c (R5C §3): no scrim behind it (the round-3
   radial scrim read as a blur); contrast comes from a crisp drop shadow only. top 54 px clears the 30-px
   picker button (top/right 12 px), whose glass must never sit behind the words. */
.dash-hero-words { position: absolute; z-index: 1; right: 34px; top: 54px; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-family: var(--ad-font-display); font-weight: 500; font-size: 25px; line-height: 1.28; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.35); }
.dash-hero-bar { display: block; align-self: flex-end; margin: 10px 0 0; width: 56px; height: 5px; border-radius: 999px; background: var(--dash-signal); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
@container (max-width: 420px) {
  .dash-hero-content { padding: 18px 16px 44px; gap: 4px; }
  .dash-hero-greet { font-size: 21px !important; }
  .dash-hero-sub { font-size: 14px !important; }
  .dash-hero-motto { font-size: 12.5px; margin-top: 8px; }
}
@container (max-width: 700px) {
  .dash-hero-words { display: none; }
  .dash-hero-content { max-width: 100%; padding: 24px 22px 48px; }
  .dash-hero-greet { font-size: 27px; }
  .dash-hero-sub { font-size: 16px; }
}

/* ── KPI strip: white cards on the stage ─────────────────────────── */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(124px, 100%), 1fr)); gap: 12px; }
.dash-kpi {
  container-type: inline-size; position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; min-height: 96px;
  text-align: left; cursor: pointer; padding: 14px 13px 12px; border-radius: var(--dash-radius); border: none;
  background: var(--dash-card); box-shadow: var(--dash-card-shadow); font-family: var(--ad-font-body); color: var(--ad-text);
  transition: transform 160ms var(--dash-ease), box-shadow 160ms;
}
.dash-kpi:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(3, 36, 37, 0.08), 0 14px 30px rgba(3, 36, 37, 0.14); }
.dash-kpi:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.dash-kpi-ico { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--ad-text); margin-top: 2px; }
.dash-kpi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dash-kpi-label { font-size: 11.5px; line-height: 1.25; color: var(--ad-text-subtle); font-weight: 500; overflow-wrap: anywhere; hyphens: auto; }
.dash-kpi-val { font-family: var(--ad-font-display); font-weight: 700; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ad-text); }
.dash-kpi-delta { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-kpi-delta.is-up { color: var(--dash-up-text); }
.dash-kpi-delta.is-down { color: var(--dash-down-text); }
.dash-kpi-delta.is-flat { color: var(--ad-text-subtle); }
.dash-kpi-sub { font-size: 10.5px; color: var(--ad-text-subtle); }
/* forecast window label ("nächste 7 Tage") — the x-axis caption of the forecast line, right under it;
   neutral colour, never the up/down colours of a past trend */
.dash-kpi-cap { position: absolute; right: 12px; bottom: 7px; font-size: 10px; font-weight: 600; line-height: 1; color: var(--ad-text-subtle); letter-spacing: .01em; white-space: nowrap; }
.dash-kpi-text:has(.dash-kpi-cap) + .dash-kpi-spark { bottom: 21px; height: 22px; }
.dash-kpi-spark { position: absolute; right: 12px; bottom: 12px; width: 64px; height: 26px; overflow: visible; }
.dash-kpi-spark path { fill: none; stroke: var(--ad-accent-deep); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dash-kpi-spark.is-up path { stroke: var(--dash-up); }
.dash-kpi-spark.is-down path { stroke: var(--dash-down); }
[data-theme="dark"] .dash-kpi-spark path { stroke: var(--ad-accent); }
.dash-kpi-spark.is-forecast path, [data-theme="dark"] .dash-kpi-spark.is-forecast path { stroke: var(--ad-text-subtle); stroke-dasharray: 3 3; }
/* container widths are the card's CONTENT box (card − 26 px padding) */
@container (max-width: 150px) {
  .dash-kpi-spark { width: 42px; height: 20px; right: 10px; bottom: 12px; }
  .dash-kpi-ico { width: 22px; }
  .dash-kpi { gap: 9px; }
}
@container (max-width: 96px) {
  .dash-kpi-ico { display: none; }
  .dash-kpi-val { font-size: 19px; }
  .dash-kpi-spark { display: none; }
}

/* ── Toolbar (on the dark stage) ──────────────────────────────────── */
/* The ONE control row (2026-10-01): left = sync badge / undo, right = Rand · Bearbeiten · Diagramme · Anpassen · "+". */
.dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 36px; box-sizing: border-box; }
.dash-toolbar-l, .dash-toolbar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.dash-toolbar-r { margin-left: auto; }
.dash-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; background: var(--ad-warn-bg); color: var(--ad-warn-fg); }
.dash-sync { font-size: 11.5px; color: var(--dash-stage-muted); }
.dash-sync-note { display: flex; align-items: center; gap: 6px; margin-top: -6px; font-size: 11.5px; color: var(--dash-stage-muted); }
.dash-undo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--dash-ctl-bg-hover); color: var(--dash-ctl-fg); }
.dash-undo button { border: none; cursor: pointer; border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: 11.5px; background: var(--ad-accent); color: var(--ad-on-accent); font-family: var(--ad-font-body); }
.dash-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; cursor: pointer;
  font-family: var(--ad-font-body); font-weight: 700; font-size: 12px; color: var(--ad-text);
  background: var(--ad-surface); border: 1px solid var(--ad-border-strong); transition: background 140ms, border-color 140ms;
}
.dash-btn:hover { background: var(--ad-surface-inset); }
.dash-btn.is-on { background: var(--ad-brand); color: #fff; border-color: var(--ad-brand); }
.dash-btn:disabled { opacity: .5; cursor: not-allowed; }
.dash-stage .dash-btn { background: var(--dash-ctl-bg); border-color: var(--dash-ctl-border); color: var(--dash-ctl-fg); }
.dash-stage .dash-btn:hover { background: var(--dash-ctl-bg-hover); }
.dash-stage .dash-btn.is-on { background: var(--ad-accent); border-color: var(--ad-accent); color: var(--ad-on-accent); }
.dash-btn:focus-visible, .dash-plus:focus-visible, .dash-link:focus-visible, .dash-icon-btn:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 2px; }
.dash-stage .dash-btn:focus-visible, .dash-stage .dash-plus:focus-visible { outline-color: var(--ad-accent); }
.dash-btn-lime { background: var(--ad-accent); color: var(--ad-on-accent); border-color: transparent; justify-content: center; }
.dash-btn-lime:hover { background: color-mix(in srgb, var(--ad-accent) 88%, var(--ad-brand)); }
.dash-btn-danger { background: var(--ad-danger-bg); color: var(--ad-danger-fg); border-color: transparent; }
/* The "+" in the glass language: translucent, blurred, hairline, soft shadow. */
.dash-plus {
  width: 36px; height: 36px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ad-text); background: var(--dash-glass-bg); border: var(--dash-glass-border); box-shadow: var(--dash-glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  transition: transform 180ms var(--dash-spring), box-shadow 180ms;
}
.dash-stage .dash-plus { color: var(--dash-ctl-fg); background: var(--dash-ctl-bg-hover); border: 1px solid var(--dash-ctl-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.25); }
.dash-plus:hover { transform: translateY(-1px) scale(1.04); }
.dash-note { font-size: 12px; padding: 8px 12px; border-radius: 10px; background: var(--ad-info-bg); color: var(--ad-info-fg); }
.dash-empty { display: flex; align-items: center; gap: 10px; padding: 26px; border-radius: 16px; border: 1.5px dashed var(--dash-ctl-dash); color: var(--dash-stage-muted); font-size: 13px; }

/* ── Grid & tiles: tone roles from the tenant palette (R6-A) ─────── */
.dash-grid-wrap { position: relative; min-width: 0; }
.dash-grid { position: relative; width: 100%; }
.dash-tile {
  --tile-bg-a: #e4e2d5; --tile-bg-b: #d6d2c0; --tile-text: #032425; --tile-muted: #475c57; --tile-ring: #68786f;
  --tile-edge: rgba(3, 36, 37, 0.14); --tile-back-a: #d8d5c2; --tile-back-b: #cac5ad; --tile-back-text: #032425;
  --tile-back-muted: #3f544e; --tile-back-ring: #5f6e64;
  /* R6b: --tile-frame (inline, dashTilePalette) = the tile's 1-px inner frame, measured ≥ 1.25 : 1 against the stage
     it sits on — a Deep tile on the dark stage (tile/stage 1.03–1.42 : 1) separates by it; without a stage colour
     the frame falls back to the 14 % ink hairline (--tile-edge). */
  position: absolute; left: 0; top: 0; box-sizing: border-box; border-radius: var(--dash-radius); overflow: hidden; cursor: pointer;
  background: linear-gradient(150deg, var(--tile-bg-a) 0%, var(--tile-bg-b) 100%); color: var(--tile-text);
  border: 1px solid var(--tile-frame, var(--tile-edge)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 22px rgba(0, 0, 0, 0.18);
  transition: transform 180ms var(--dash-ease), width 180ms var(--dash-ease), height 180ms var(--dash-ease), box-shadow 160ms, filter 160ms;
  user-select: none; -webkit-user-select: none; touch-action: auto;
}
.dash-tile:hover { filter: brightness(1.04); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 14px 30px rgba(0, 0, 0, 0.26); }
.dash-tile:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.dash-tile-dragging { opacity: .45; }
/* FND-1132: the dragged tile only changes its transform while it moves (its content is parked, dashDragPark). */
.dash-grid-parked .dash-tile-dragging { will-change: transform; }
.dash-grid-edit .dash-tile { touch-action: none; }
.dash-placeholder { position: absolute; left: 0; top: 0; border-radius: var(--dash-radius); border: 2px dashed var(--ad-accent); background: rgba(200, 255, 22, 0.10); box-sizing: border-box; pointer-events: none; transition: transform 120ms var(--dash-ease); }
.dash-tile-body { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; padding: 13px 13px 12px; box-sizing: border-box; min-width: 0; overflow: hidden; }
.dash-tile-top { position: relative; display: flex; align-items: flex-start; gap: 6px; margin-bottom: 6px; flex-shrink: 0; }
/* Outlined icon chip (reference: line icon, no filled plate) — the ring carries the tile's text colour. */
.dash-tile-chip {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box;
  width: 30px; height: 30px; border-radius: 9px; color: var(--tile-text);
  border: 1.5px solid color-mix(in srgb, var(--tile-text) 34%, transparent);
  background: color-mix(in srgb, var(--tile-text) 5%, transparent);
}
.dash-tile-title { flex-shrink: 0; font-family: var(--ad-font-display); font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--tile-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.dash-tile-tag { flex-shrink: 0; font-size: 11px; line-height: 1.34; color: var(--tile-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dash-tile-tag-1 { -webkit-line-clamp: 1; }
.dash-tile-depth { font-size: 12px; line-height: 1.45; color: var(--tile-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
.dash-tile-viz { flex: 1; min-height: 40px; position: relative; margin-top: 6px; }
.dash-tile-foot { flex-shrink: 0; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.dash-tile-foot-gap { flex: 1; }
.dash-tile-count { font-size: 11.5px; font-weight: 500; color: var(--tile-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dash-tile-arrow {
  width: 28px; height: 28px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto;
  background: transparent; color: var(--tile-text); border: 1.5px solid var(--tile-ring); transition: transform 160ms var(--dash-spring), background 160ms;
}
.dash-tile-arrow:hover { transform: translateX(2px); background: color-mix(in srgb, var(--tile-text) 12%, transparent); }
.dash-tile-badge { position: absolute; left: 20px; top: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--ad-accent); color: var(--ad-on-accent); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12); }
/* S (xs, ≈ 70–78 px): chip + two-line title. */
.dash-tile-body-S { padding: 9px 9px 8px; gap: 3px; }
.dash-tile-body-S .dash-tile-top { margin-bottom: 3px; }
.dash-tile-body-S .dash-tile-chip { width: 24px; height: 24px; border-radius: 7px; }
.dash-tile-body-S .dash-tile-title { font-size: 11px; line-height: 1.18; font-weight: 600; }
.dash-tile-tiny { padding: 0; align-items: center; justify-content: center; }
.dash-tile-tiny .dash-tile-top { margin: 0; }
.dash-tile-tiny .dash-tile-title { display: none; }
/* M (md, ≈ 150–170 px): chip, title, tagline, count + arrow. */
.dash-d-md .dash-tile-title { font-size: 14px; }
/* L (lg, ≥ 260 px): larger chip and type, tagline + real mini chart, else the module explained. */
.dash-d-lg { padding: 18px 18px 16px; gap: 6px; }
.dash-d-lg .dash-tile-chip { width: 42px; height: 42px; border-radius: 12px; }
.dash-d-lg .dash-tile-title { font-size: 19px; -webkit-line-clamp: 1; }
.dash-d-lg .dash-tile-tag { font-size: 13px; }
.dash-d-lg .dash-tile-count { font-size: 12.5px; }
.dash-d-lg .dash-tile-arrow { width: 36px; height: 36px; }
.dash-tile-arrow:focus-visible, .dash-tile-more:focus-visible, .dash-tile-handle:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.dash-tile-more {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 7px; border: none; cursor: pointer; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; color: var(--tile-text);
  background: color-mix(in srgb, var(--tile-text) 12%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity 140ms;
}
.dash-tile:hover .dash-tile-more, .dash-tile:focus-within .dash-tile-more, .dash-grid-edit .dash-tile-more { opacity: 1; }
.dash-tile-handle {
  position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 7px; border: none; cursor: pointer; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; background: var(--ad-accent); color: var(--ad-on-accent);
}
@media (hover: none) { .dash-tile-more { opacity: 1; } }

/* ── Tile flip (stage 2): tiles with a back resolver turn around the Y axis ─────
   The flippable tile hands its plate (background, border, shadow) to two faces inside a 3-D wrapper;
   the tile itself only carries position + perspective, so the rotation is never flattened or clipped. */
.dash-tile.dash-tile-flip { background: none; border-color: transparent; box-shadow: none; overflow: visible; perspective: 900px; }
.dash-tile.dash-tile-flip:hover { box-shadow: none; }
.dash-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 420ms cubic-bezier(.34, 1.36, .5, 1); }
.dash-tile.is-flipped .dash-flip { transform: rotateY(180deg); }
.dash-face {
  position: absolute; inset: 0; box-sizing: border-box; border-radius: var(--dash-radius); overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: linear-gradient(150deg, var(--tile-bg-a) 0%, var(--tile-bg-b) 100%);
  border: 1px solid var(--tile-frame, var(--tile-edge)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 22px rgba(0, 0, 0, 0.18);
}
.dash-tile-flip:hover .dash-face { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 14px 30px rgba(0, 0, 0, 0.26); }
/* The face turned AWAY is hidden and inert, not merely culled (Peter 2026-09-29 „flipped überlappt das noch
   immer!"): backface-visibility is not inherited, and WebKit paints a descendant that forms its own stacking
   context — the ↻ (position: absolute; z-index: 2) — in the stacking context of .dash-flip, outside the
   face's backface culling, so it showed mirrored through the back (measured: Playwright WebKit, 581 px at
   left 16 / top 16 of a 467-px L back; z-index: auto on the ↻ → 0 px; backface-visibility: hidden on the ↻
   itself → still 581 px). visibility: hidden has no such escape. The swap happens when the rotation passes
   90° (edge-on): the 420-ms cubic-bezier(.34, 1.36, .5, 1) spring reaches half its travel at 14.16 % of its
   time = 59.5 ms → 60 ms (DASH_FLIP_SWAP_MS in dashboard_grid.jsx) — NOT at 210 ms, where the spring already
   stands at 186° (a 150-ms empty tile). Same swap in both directions (the transition of the NEW state). */
.dash-face { transition: visibility 0s linear 60ms; }
.dash-face-back, .dash-tile.is-flipped .dash-face-front { visibility: hidden; pointer-events: none; }
.dash-tile.is-flipped .dash-face-back { visibility: visible; pointer-events: auto; }
/* Belt and braces: the absolutely positioned controls on a face cull their own back side too. */
.dash-face .dash-flip-btn, .dash-face .dash-flip-back-btn, .dash-face .dash-tile-badge { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Back = the same square, one step deeper in its own tone, with its OWN measured ink (R6-A §A.2 step 7):
   the back re-points the text / muted / ring roles, so every back rule below stays tone-agnostic. */
.dash-face-back {
  transform: rotateY(180deg); background: linear-gradient(150deg, var(--tile-back-a) 0%, var(--tile-back-b) 100%);
  --tile-text: var(--tile-back-text); --tile-muted: var(--tile-back-muted); --tile-ring: var(--tile-back-ring); color: var(--tile-text);
}
.dash-flip-btn, .dash-flip-back-btn {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--tile-ring); cursor: pointer; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--tile-text); background: color-mix(in srgb, var(--tile-text) 6%, transparent);
  transition: transform 200ms var(--dash-spring), background 160ms;
}
.dash-tile-glyph .dash-tile-more { right: 34px; }
.dash-flip-btn:hover, .dash-flip-back-btn:hover { background: color-mix(in srgb, var(--tile-text) 14%, transparent); }
.dash-flip-btn:hover { transform: rotate(35deg); }
.dash-flip-btn:focus-visible, .dash-flip-back-btn:focus-visible, .dash-back-row.is-link:focus-visible, .dash-back-link:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
/* The glyph owns the top-right corner; ⋯ sits left of it. Small tiles: the count badge moves to the chip's
   top-LEFT corner so a 3-4-digit badge never runs into the glyph. Only with a glyph (.dash-tile-glyph /
   .dash-tile-flip-sm): a tile whose back has not delivered keeps the plain tile's ⋯ and badge. */
.dash-tile-flip-sm .dash-flip-btn, .dash-tile-flip-sm .dash-flip-back-btn { top: 5px; right: 5px; width: 18px; height: 18px; border-width: 1.25px; }
.dash-tile-flip-sm .dash-tile-more { top: 5px; right: 25px; width: 18px; height: 18px; }
.dash-tile-flip-sm .dash-tile-badge { left: -6px; }
.dash-tile.is-flipped .dash-tile-more { display: none; }
/* Round 5: every tile flips on a click — the ↻ glyph is the visible hint on EVERY tile (dimmed at rest,
   full on hover / focus / touch). */
.dash-tile-flip .dash-flip-btn { opacity: .55; transition: opacity 140ms, transform 200ms var(--dash-spring), background 160ms; }
.dash-tile-flip:hover .dash-flip-btn, .dash-tile-flip:focus-within .dash-flip-btn, .dash-tile-flip .dash-flip-btn:focus-visible { opacity: 1; }
@media (hover: none) { .dash-tile-flip .dash-flip-btn { opacity: 1; } }

.dash-back { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 10px; box-sizing: border-box; min-width: 0; color: var(--tile-text); }
/* FND-279: the head is the back's FIRST row — title left, ↩ button right, both in normal flow (space-between),
   never an absolutely-positioned button floating over the title or anything below it. The title is the flex
   item that may shrink (min-width: 0) and clamps/ellipsises instead of pushing the button or overflowing past
   it; the button (below) is fixed-size and flex-shrink: 0, so the row can never let the two overlap. */
.dash-back-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; margin-bottom: 2px; }
.dash-back-title { flex: 1 1 auto; min-width: 0; font-family: var(--ad-font-display); font-weight: 700; font-size: 12.5px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
/* The button seated inside the header (M/L, ≥ 120 px) is a normal-flow flex item, not the absolute overlay
   .dash-flip-btn/.dash-flip-back-btn are by default — size/ring/icon still come from that base rule. */
.dash-back-head .dash-flip-back-btn { position: static; flex-shrink: 0; }
/* Round 5c (R5C §5): the number rows are ONE table — the list is a grid (number · label · chevron) and every
   row a subgrid of it, so all numbers share one right edge (tabular, right-aligned, ≥ 3 digits wide), the
   labels one left edge (their tone dot in front), the chevron the last column. 28-px rows, hairline dividers. */
.dash-back-stats { list-style: none; margin: 0; padding: 0; flex-shrink: 0; min-width: 0;
  display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; column-gap: 8px; }
.dash-back-stats > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; min-width: 0; }
.dash-back-row {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 28px; min-width: 0;
  box-sizing: border-box; padding: 0 2px; border-radius: 6px; border: none; border-bottom: 1px solid color-mix(in srgb, var(--tile-text) 14%, transparent);
  background: none; color: inherit; font: inherit; text-align: left;
}
.dash-back-stats > li:last-child > .dash-back-row { border-bottom-color: transparent; }
.dash-back-row.is-link { cursor: pointer; }
.dash-back-row.is-link:hover { background: color-mix(in srgb, var(--tile-text) 10%, transparent); }
.dash-back-row > svg { grid-column: 3; opacity: 0; transition: opacity 140ms; }
.dash-back-row.is-link:hover > svg, .dash-back-row.is-link:focus-visible > svg { opacity: .75; }
.dash-back-val { grid-column: 1; justify-self: end; text-align: right; min-width: 3ch; font-family: var(--ad-font-display); font-weight: 700; font-size: 15px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-back-lbl { grid-column: 2; font-size: 11px; line-height: 1.25; color: var(--tile-muted); min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* L: the free height carries a bar per row — its length = the row's number relative to the LARGEST number on
   this back (real data; not a share of a sum: the rows may overlap, e.g. "in 30 Tagen" contains "in 7 Tagen"). */
.dash-back-bar { grid-column: 2; grid-row: 2; align-self: start; height: 3px; margin: 1px 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--tile-text) 14%, transparent); overflow: hidden; }
.dash-back-bar > i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: color-mix(in srgb, var(--tile-text) 62%, transparent); }
.dash-back-tone-danger::before, .dash-back-tone-warn::before, .dash-back-tone-info::before, .dash-back-tone-purple::before, .dash-back-tone-success::before, .dash-back-tone-neutral::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-right: 6px; vertical-align: 1px;
}
.dash-back-tone-danger::before { background: var(--ad-danger); }
.dash-back-tone-warn::before { background: var(--ad-warn); }
.dash-back-tone-info::before { background: var(--ad-info); }
.dash-back-tone-purple::before { background: var(--ad-purple); }
.dash-back-tone-success::before { background: var(--ad-success); }
.dash-back-tone-neutral::before { background: var(--tile-muted); }
.dash-back-meta { flex-shrink: 0; font-size: 10.5px; line-height: 1.3; color: var(--tile-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-back-loading, .dash-back-empty { font-size: 11.5px; color: var(--tile-muted); display: flex; flex-direction: column; gap: 2px; }
.dash-back-empty-t { font-weight: 700; color: var(--tile-text); font-size: 12.5px; }
.dash-back-empty-r { font-size: 10.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-back-foot { margin-top: auto; display: flex; justify-content: flex-end; min-width: 0; }
.dash-back-link {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; padding: 4px 9px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--tile-ring); background: transparent; color: var(--tile-text); font: inherit; font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-back-link:hover { background: color-mix(in srgb, var(--tile-text) 12%, transparent); }
/* M: head + 3 rows of 28 px + the module link fit the 151-px square (1440 px). */
.dash-back-M { padding: 9px 11px 8px; gap: 2px; }
.dash-back-M .dash-back-head { min-height: 20px; margin-bottom: 0; }
/* L: 20-px numbers, bar under each label (see .dash-back-bar). */
.dash-back-L { padding: 16px 18px 14px; gap: 5px; }
.dash-back-L .dash-back-title { font-size: 16px; }
.dash-back-L .dash-back-stats { column-gap: 12px; }
.dash-back-L .dash-back-row { min-height: 36px; grid-template-rows: auto auto; align-items: end; padding-top: 4px; }
.dash-back-L .dash-back-val { font-size: 20px; line-height: 1.1; grid-row: 1 / span 2; align-self: center; }
.dash-back-L .dash-back-lbl { font-size: 12.5px; align-self: end; }
.dash-back-L .dash-back-row > svg { grid-row: 1 / span 2; align-self: center; }
.dash-back-L .dash-back-meta { font-size: 11.5px; }
/* S (≈ 70 px): two numbers with short labels + one link. */
.dash-back-S { padding: 6px 7px 6px; gap: 0; }
.dash-tile-flip-sm .dash-flip-back-btn { top: auto; bottom: 5px; }
.dash-back-S .dash-back-stats { column-gap: 4px; }
.dash-back-S .dash-back-row { min-height: 0; padding: 0; border-bottom: none; }
.dash-back-S .dash-back-val { font-size: 12px; min-width: 0; }
.dash-back-S .dash-back-lbl { font-size: 9px; display: block; white-space: nowrap; text-overflow: ellipsis; }
.dash-back-S .dash-back-lbl::before { display: none; }
.dash-back-S .dash-back-foot { justify-content: flex-start; align-items: flex-end; padding-right: 19px; }
.dash-back-S .dash-back-empty-t { font-size: 10px; }
/* Round 5b: the one link of a small back is an ICON-ONLY round arrow (18 px, same ring as the ↩ glyph it
   mirrors bottom-right); its label lives in aria-label + tooltip, so no text can be cut off at 68 px. */
.dash-back-go { width: 18px; height: 18px; padding: 0; gap: 0; justify-content: center; flex-shrink: 0; border-width: 1.25px; }
.dash-back-go > * { display: block; flex-shrink: 0; }

/* Generic back (round 5): purpose, optional depth + count, the reason when a resolver failed, "Öffnen". */
.dash-back-purpose { font-size: 11px; line-height: 1.38; color: var(--tile-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dash-back-depth { font-size: 12px; line-height: 1.45; color: var(--tile-muted); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.dash-back-count { flex-shrink: 0; font-family: var(--ad-font-display); font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.dash-back-status, .dash-back-note { flex-shrink: 0; font-size: 10.5px; line-height: 1.3; color: var(--tile-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-back-L .dash-back-purpose { font-size: 13px; -webkit-line-clamp: 3; }
.dash-back-L .dash-back-count { font-size: 15px; }
.dash-back-L .dash-back-note, .dash-back-L .dash-back-status { font-size: 11.5px; }
.dash-back-generic.dash-back-S .dash-back-head { min-height: 0; margin-bottom: 1px; min-width: 0; }
.dash-back-generic.dash-back-S .dash-back-title { font-size: 10px; line-height: 1.15; -webkit-line-clamp: 3; min-width: 0; }

/* ── R6-B size anatomy (u_min 104; DASHBOARD-SPEC-R6.md §B.4 / §B.5) ───────────────────────────
   Every grid wider than 4 columns gives S ≥ 104 · M ≥ 220 · L ≥ 452 px; those sizes get the ROOMY faces
   (.dash-d-s / -m / -l) and backs (.dash-back-roomy). Phones (W < 452 px, u < 104) keep the compact round-5
   faces above (.dash-d-xs / -md / -lg). Height budgets are for the smallest edge of each band. */
/* S front (104–162 px): 10 + chip 22 + 6 + title 2 × 14.4 + 4 + badge 18 + 10 = 98.8 px ≤ 104. */
.dash-d-s { padding: 10px; gap: 0; }
.dash-d-s .dash-tile-top { height: 22px; margin-bottom: 6px; }
.dash-d-s .dash-tile-chip { width: 22px; height: 22px; border-radius: 7px; border-width: 1.25px; }
/* R6b: German hyphenation (the dashboard root carries lang="de"), never a break inside a word without a hyphen
   (break-word, not anywhere), two lines + ellipsis. At the smallest S (104 px) the body is 100 px wide (1-px tile
   border + 1-px face border on each side, measured on the bench) — with the 10-px padding an 80-px line. The tight
   face (dash-d-s-tight, S < 112 px) pads 8 px sideways (84-px line) and sets the title at 11.25 px, so
   "Organisations-" (80.8 px) and "Markenauftritt" (79.0 px) fit one line and the break lands on the compound seam
   instead of the last syllable that fits ("Organisati-onsstruktur": 12 px "Organisations-" = 86.1 px). */
.dash-d-s .dash-tile-title { font-size: 12px; line-height: 1.2; font-weight: 700; -webkit-line-clamp: 2; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; text-overflow: ellipsis;
  hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; }   /* no 2-letter tail ("Verkaufskanä-le") */
.dash-d-s.dash-d-s-tight { padding-left: 8px; padding-right: 8px; }
.dash-d-s.dash-d-s-tight .dash-tile-title { font-size: 11.25px; }
.dash-d-s .dash-tile-foot-S { margin-top: auto; min-height: 18px; height: 18px; justify-content: flex-start; }
.dash-d-s .dash-tile-badge { position: static; height: 18px; min-width: 18px; padding: 0 6px; font-size: 10.5px; }
/* S controls: ↻ (right 6) and ⋯ (right 32), 22 px each in the top-right corner — never over the chip (x 10–32)
   or the title (from y 38); visible only on hover / keyboard focus. Touch: no ↻ (a tap flips), ⋯ at right 6. */
.dash-tile:has(.dash-d-s) .dash-flip-btn, .dash-tile:has(.dash-d-s) .dash-tile-more { top: 6px; right: 6px; width: 22px; height: 22px; }
.dash-tile:has(.dash-d-s) .dash-flip-btn { opacity: 0; }
.dash-tile-glyph:has(.dash-d-s) .dash-tile-more { right: 32px; }
.dash-tile:has(.dash-d-s):hover .dash-flip-btn, .dash-tile:has(.dash-d-s):focus-within .dash-flip-btn { opacity: 1; }
@media (hover: none) {
  .dash-tile:has(.dash-d-s) .dash-flip-btn { display: none; }
  .dash-tile-glyph:has(.dash-d-s) .dash-tile-more { right: 6px; }
}
/* M front (220–336 px): 16 + chip 34 + 10 + title 2 × 19.2 + 4 + tagline n × 17.5 + 4 + foot 32 + 16 = 154.4 + 17.5 n;
   n = 3 at 220 px (206.9), n = 4 from 225 px (224.4). */
.dash-d-m { padding: 16px; gap: 4px; }
.dash-d-m .dash-tile-top { margin-bottom: 6px; }
.dash-d-m .dash-tile-chip { width: 34px; height: 34px; border-radius: 10px; }
.dash-d-m .dash-tile-title { font-size: 16px; line-height: 1.2; -webkit-line-clamp: 2; }
.dash-d-m .dash-tile-tag { font-size: 12.5px; line-height: 1.4; }
.dash-d-m .dash-tile-tag-3 { -webkit-line-clamp: 3; }
.dash-d-m .dash-tile-tag-4 { -webkit-line-clamp: 4; }
.dash-d-m .dash-tile-foot { min-height: 32px; }
.dash-d-m .dash-tile-count { font-size: 12.5px; }
.dash-d-m .dash-tile-arrow { width: 32px; height: 32px; }
.dash-tile:has(.dash-d-m) .dash-flip-btn, .dash-tile:has(.dash-d-m) .dash-tile-more { top: 10px; right: 10px; width: 26px; height: 26px; }
.dash-tile-glyph:has(.dash-d-m) .dash-tile-more { right: 42px; }
/* The M/L ↩ sits in the back's head row (normal flow, FND-279) — only its size follows the tile size. */
.dash-tile:has(.dash-d-m) .dash-flip-back-btn { width: 26px; height: 26px; }
/* L front (452–683 px): 22 + chip 46 + 12 + title 2 × 26.4 + 6 + tagline 2 × 19.6 + 6 + depth 6 × 20.25 + 6 + foot 40 + 22
   = 373.5 px ≤ 452 (or the real chart block, ≥ 140 px). */
.dash-d-l { padding: 22px; gap: 6px; }
.dash-d-l .dash-tile-top { margin-bottom: 6px; }
.dash-d-l .dash-tile-chip { width: 46px; height: 46px; border-radius: 13px; }
.dash-d-l .dash-tile-title { font-size: 22px; line-height: 1.2; -webkit-line-clamp: 2; }
.dash-d-l .dash-tile-tag { font-size: 14px; line-height: 1.4; }
.dash-d-l .dash-tile-depth { flex-shrink: 0; font-size: 13.5px; line-height: 1.5; -webkit-line-clamp: 6; }
.dash-d-l .dash-tile-viz { min-height: 140px; }
.dash-d-l .dash-tile-foot { min-height: 40px; }
.dash-d-l .dash-tile-count { font-size: 14px; }
.dash-d-l .dash-tile-arrow { width: 40px; height: 40px; }
.dash-d-l .dash-bars { gap: 12px; }
.dash-d-l .dash-bar-fill { max-width: 48px; }
.dash-d-l .dash-bar-val { font-size: 14px; }
.dash-d-l .dash-bar-lbl { font-size: 11px; }
.dash-tile:has(.dash-d-l) .dash-flip-btn, .dash-tile:has(.dash-d-l) .dash-tile-more { top: 14px; right: 14px; width: 30px; height: 30px; }
.dash-tile-glyph:has(.dash-d-l) .dash-tile-more { right: 50px; }
.dash-tile:has(.dash-d-l) .dash-flip-back-btn { width: 30px; height: 30px; }
/* Edit mode: the resize handle owns the bottom-right corner — the round arrow steps aside (no overlap). */
.dash-grid-edit .dash-tile-arrow { visibility: hidden; }
/* S back (104+): no head; 2 rows of 22 px (value 15 px, short label 10.5 px on one line); go-link 22 px bottom-left,
   ↩ 22 px bottom-right: 8 + 2 × 22 + … + 22 + 8 ≤ 104. */
.dash-back-S.dash-back-roomy { padding: 8px 10px; gap: 0; }
.dash-back-S.dash-back-roomy .dash-back-stats { column-gap: 6px; }
.dash-back-S.dash-back-roomy .dash-back-row { min-height: 22px; }
.dash-back-S.dash-back-roomy .dash-back-val { font-size: 15px; }
.dash-back-S.dash-back-roomy .dash-back-lbl { font-size: 10.5px; }
.dash-back-S.dash-back-roomy .dash-back-foot { padding-right: 28px; }
.dash-back-roomy .dash-back-go { width: 22px; height: 22px; border-width: 1.5px; }
.dash-back-generic.dash-back-S.dash-back-roomy .dash-back-title { font-size: 11.5px; line-height: 1.2; -webkit-line-clamp: 3; }
.dash-tile:has(.dash-d-s) .dash-flip-back-btn { top: auto; bottom: 8px; right: 10px; width: 22px; height: 22px; }
/* M back (220+): head 14 px (≤ 2 lines) · 4 rows of 30 px (value 17, label 12 on one line) or 3 + 1 meta ·
   "Bereich öffnen" 26 px: 12 + 33.6 + 2 + 3 + 120 + 3 + 26 + 12 = 211.6 px ≤ 220. */
.dash-back-M.dash-back-roomy { padding: 12px 14px; gap: 3px; }
.dash-back-M.dash-back-roomy .dash-back-head { min-height: 26px; margin-bottom: 2px; }
.dash-back-M.dash-back-roomy .dash-back-title { font-size: 14px; }
.dash-back-M.dash-back-roomy .dash-back-row { min-height: 30px; }
.dash-back-M.dash-back-roomy .dash-back-val { font-size: 17px; }
.dash-back-M.dash-back-roomy .dash-back-lbl { font-size: 12px; -webkit-line-clamp: 1; }
.dash-back-M.dash-back-roomy .dash-back-meta { font-size: 11.5px; }
.dash-back-M.dash-back-roomy .dash-back-link { min-height: 26px; padding: 4px 11px; font-size: 12px; }
.dash-back-M.dash-back-roomy .dash-back-purpose { font-size: 12.5px; line-height: 1.4; -webkit-line-clamp: 4; }
.dash-back-M.dash-back-roomy .dash-back-count { font-size: 14px; }
.dash-back-M.dash-back-roomy .dash-back-status, .dash-back-M.dash-back-roomy .dash-back-note { font-size: 11.5px; }
/* L back (452+): title 18 px · ≤ 8 rows of 36 px (value 22, label 13.5 + bar) · ≤ 3 meta lines · foot 30 px:
   16 + 24 + 5 + 288 + 6 + 51 + 30 + 16 = 436 px ≤ 452. */
.dash-back-L.dash-back-roomy { padding: 16px 20px; gap: 5px; }
.dash-back-L.dash-back-roomy .dash-back-head { min-height: 30px; }
.dash-back-L.dash-back-roomy .dash-back-title { font-size: 18px; }
.dash-back-L.dash-back-roomy .dash-back-row { min-height: 36px; }
.dash-back-L.dash-back-roomy .dash-back-val { font-size: 22px; }
.dash-back-L.dash-back-roomy .dash-back-lbl { font-size: 13.5px; }
.dash-back-L.dash-back-roomy .dash-back-meta { font-size: 12.5px; }
.dash-back-L.dash-back-roomy .dash-back-link { min-height: 30px; padding: 5px 13px; font-size: 13px; }
.dash-back-L.dash-back-roomy .dash-back-purpose { font-size: 14px; line-height: 1.4; }
.dash-back-L.dash-back-roomy .dash-back-depth { font-size: 13.5px; line-height: 1.5; -webkit-line-clamp: 5; }
.dash-back-L.dash-back-roomy .dash-back-count { font-size: 17px; }
/* L back record list (Peter 2026-09-29: an L back was three rows, then empty space): a hairline, a small heading,
   then up to 5 rows in the number rows' table grammar — one grid, every li and row a SUBGRID of it: date (tabular,
   right-aligned: one right edge) · text (ellipsis) · status / relative date (tone dot, one left edge) or amount
   (right-aligned) · chevron. Fixed 26-px rows, so
   DashBackRecent counts whole rows into the free height (data-fit; 0 → the section is not shown). */
.dash-back-recent { flex-shrink: 0; min-width: 0; margin-top: 4px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--tile-text) 14%, transparent); }
.dash-back-recent[data-fit="0"] { display: none; }
.dash-back-recent-h { font-size: 10.5px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tile-muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-back-recent-list { list-style: none; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content auto; column-gap: 10px; }
.dash-back-recent-list > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; min-width: 0; }
.dash-back-recent-list > li[hidden] { display: none; }
.dash-back-rrow {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; height: 26px; min-width: 0; box-sizing: border-box; padding: 0 2px;
  border: none; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.dash-back-rrow:hover { background: color-mix(in srgb, var(--tile-text) 10%, transparent); }
.dash-back-rrow:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.dash-back-rwhen { grid-column: 1; justify-self: end; text-align: right; font-size: 12px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--tile-muted); white-space: nowrap; }
.dash-back-rtext { grid-column: 2; min-width: 0; font-size: 12.5px; line-height: 1.2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The aside column starts on one left edge (the tone dots line up like the number rows' labels); an amount
   (.is-num) is right-aligned like every number. */
.dash-back-raside { grid-column: 3; justify-self: start; text-align: left; font-size: 12px; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--tile-muted); white-space: nowrap; }
.dash-back-raside.is-num { justify-self: end; text-align: right; }
.dash-back-rrow > svg { grid-column: 4; opacity: 0; transition: opacity 140ms; }
.dash-back-rrow:hover > svg, .dash-back-rrow:focus-visible > svg { opacity: .75; }
.dash-back-recent-empty { display: block; font-size: 12px; line-height: 1.35; color: var(--tile-muted); padding: 3px 2px 0; }
.dash-back-L.dash-back-roomy .dash-back-rtext { font-size: 13px; }

/* Large-tile visuals: real series only (bars / sparkline). */
.dash-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 8px; padding-top: 4px; }
.dash-bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.dash-bar-track { flex: 1; min-height: 6px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.dash-bar-fill { width: 100%; max-width: 34px; border-radius: 7px 7px 3px 3px; min-height: 4px; }
.dash-bar-val { font-family: var(--ad-font-display); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--tile-text); }
.dash-bar-lbl { font-size: 9.5px; color: var(--tile-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dash-tone-danger { background: var(--ad-danger); }
.dash-tone-warn { background: var(--ad-warn); }
.dash-tone-info { background: var(--ad-info); }
.dash-tone-purple { background: var(--ad-purple); }
.dash-tone-success { background: var(--ad-success); }
.dash-tone-neutral { background: var(--ad-text-faint); }
.dash-tone-dark .dash-tone-info { background: #9cc4e6; }
.dash-tone-dark .dash-tone-purple { background: #c2b0f0; }
.dash-spark { position: absolute; inset: 0; width: 100%; height: 100%; }
.dash-spark-line { fill: none; stroke: var(--tile-text); stroke-width: 2; }
.dash-spark-area { fill: color-mix(in srgb, var(--ad-accent) 30%, transparent); stroke: none; }

/* ── R6-A tones + swatches ────────────────────────────────────────── */
/* The Signal count badge sits on every tone; lime on cream is 1.1 : 1, so its edge is drawn in the tile's
   ring colour (≥ 3 : 1 against the tile, measured). */
.dash-tile .dash-tile-badge { box-shadow: 0 0 0 1.5px var(--tile-ring); }
/* Status dots on the back (danger / warn / …) can share the tile's hue (a red tenant colour + "Storniert"):
   a 1-px ring in the tile's ring colour keeps every dot's edge visible on any tone. */
.dash-face-back [class*="dash-back-tone-"]::before { box-shadow: 0 0 0 1px var(--tile-ring); }
.dash-menu-cap { padding: 4px 9px 2px; font-family: var(--ad-font-label, var(--ad-font-body)); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ad-text-subtle); }
.dash-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 7px 6px; }   /* 220 − 2 border − 12 menu padding − 14 = 192 ≥ 7 × 22 + 6 × 6 = 190: one row */
.dash-swatch {
  width: 22px; height: 22px; padding: 0; border-radius: 7px; cursor: pointer; flex-shrink: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  border: 1px solid var(--sw-edge, rgba(3, 36, 37, 0.18)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
  transition: transform 140ms var(--dash-spring), box-shadow 140ms;
}
.dash-swatch:hover { transform: translateY(-1px) scale(1.06); }
.dash-swatch:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.dash-swatch.is-on { box-shadow: 0 0 0 2px var(--ad-surface, #ffffff), 0 0 0 3.5px var(--ad-text); }
/* R6b: "Automatisch" wears the tile's own automatic tone; the dashed ring + "A" tell it apart from picking that tone by hand. */
.dash-swatch-auto { border: 1.5px dashed currentColor; }
.dash-swatch-a { font-family: var(--ad-font-display); font-weight: 700; font-size: 11px; line-height: 1; }

/* ── Right column cards ───────────────────────────────────────────── */
.dash-card { background: var(--dash-card); border: none; border-radius: var(--dash-radius); box-shadow: var(--dash-card-shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.dash-card-head { display: flex; align-items: center; gap: 10px; }
.dash-card-title { font-family: var(--ad-font-display); font-weight: 700; font-size: 16px; flex: 1; min-width: 0; }
.dash-card-sub { font-size: 12px; color: var(--ad-text-subtle); margin-top: 2px; }
.dash-count-badge { min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--ad-accent); color: var(--ad-on-accent); }
.dash-card-chev { width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: var(--ad-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dash-card-chev:hover { background: var(--ad-surface-2); }
.dash-card-chev:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 1px; }

/* Wyse card: its rules (.dash-wyse-*) are shared with the Wyse drawer and live in theme.css as aliases
   of .as-wyse-* (same values, check_wyse.mjs gate 9). Do not re-add a copy here. */

.dash-muted { font-size: 12.5px; color: var(--ad-text-muted); }
.dash-small { font-size: 11.5px; }
.dash-task-list, .dash-act-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.dash-task { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-radius: 10px; border: none; background: transparent; cursor: pointer; text-align: left; font-family: var(--ad-font-body); color: var(--ad-text); }
.dash-task:hover, .dash-act:hover { background: var(--ad-surface-2); }
.dash-task:focus-visible, .dash-act:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 1px; }
.dash-task-check { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; box-sizing: border-box; border: 1.5px solid var(--ad-border-strong); background: var(--dash-card); }
.dash-task-danger .dash-task-check { border-color: var(--ad-danger); }
.dash-task-purple .dash-task-check { border-color: var(--ad-purple); }
.dash-task-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-task-due { font-size: 11.5px; color: var(--ad-text-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-task-danger .dash-task-due { color: var(--ad-danger-fg); font-weight: 600; }
.dash-skilltask { display: flex; flex-direction: column; }
.dash-skilltask-sub { display: flex; align-items: center; gap: 10px; padding: 0 4px 6px 32px; margin-top: -2px; }
.dash-skilltask-act { flex-shrink: 0; align-self: center; white-space: nowrap; font-size: 11.5px; }
.dash-task-chip { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--ad-neutral-bg); color: var(--ad-neutral-fg); white-space: nowrap; }
.dash-task-danger .dash-task-chip { background: var(--ad-danger-bg); color: var(--ad-danger-fg); }
.dash-task-purple .dash-task-chip { background: var(--ad-purple-bg); color: var(--ad-purple-fg); }
.dash-intent { gap: 10px; }
.dash-intent .dash-act-text { flex: 1; }
.dash-act { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 7px 4px; border-radius: 10px; border: none; background: transparent; cursor: pointer; text-align: left; font-family: var(--ad-font-body); color: var(--ad-text); }
.dash-act-ico { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ad-surface-2); color: var(--ad-text); }
.dash-act-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dash-act-title { font-size: 12.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.dash-act-when { font-size: 11px; color: var(--ad-text-subtle); }
.dash-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; border: none; background: none; padding: 2px 0; cursor: pointer; font-family: var(--ad-font-body); font-weight: 700; font-size: 12px; color: var(--ad-accent-deep); }
.dash-link-head { align-self: center; color: var(--ad-text); }
/* Dark: the Signal LIME reads on the Deep surfaces (a whitelabel --ad-accent may be a dark green); a head link
   ("Alle anzeigen") stays in the text colour like in light. */
[data-theme="dark"] .dash-link { color: var(--dash-signal); }
[data-theme="dark"] .dash-link.dash-link-head { color: var(--ad-text); }

/* ── Glass (catalog sheet, settings sheet, tile menu) ─────────────── */
.dash-glass-layer { position: fixed; inset: 0; z-index: 90; }
.dash-glass-scrim { background: var(--dash-scrim); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; animation: dash-scrim-in 200ms ease-out; }
.dash-glass {
  background: var(--dash-glass-bg); border: var(--dash-glass-border); box-shadow: var(--dash-glass-shadow); border-radius: 18px;
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  color: var(--ad-text); font-family: var(--ad-font-body); box-sizing: border-box;
  animation: dash-glass-in 280ms var(--dash-spring) both;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dash-glass, .dash-plus, .dash-tile-more { background: var(--ad-surface); }
}
.dash-glass-sheet { max-width: calc(100vw - 32px); max-height: 72vh; display: flex; flex-direction: column; overflow: hidden; }
.dash-glass-menu { position: fixed; padding: 6px; max-width: calc(100vw - 16px); }
@keyframes dash-glass-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dash-scrim-in { from { opacity: 0; } to { opacity: 1; } }

.dash-menu { display: flex; flex-direction: column; }
.dash-menu-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; font-size: 11.5px; font-weight: 700; color: var(--ad-text-muted); }
.dash-menu-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border-radius: 10px; border: none; background: transparent; cursor: pointer; font-family: var(--ad-font-body); font-size: 12.5px; font-weight: 600; color: var(--ad-text); text-align: left; }
.dash-menu-item:hover, .dash-menu-item:focus-visible { background: color-mix(in srgb, var(--ad-brand) 8%, transparent); outline: none; }
.dash-menu-item.is-on { font-weight: 700; }
.dash-menu-check { margin-left: auto; color: var(--ad-accent-deep); display: inline-flex; }
.dash-menu-danger { color: var(--ad-danger-fg); }
.dash-menu-sep { height: 1px; margin: 4px 6px; background: color-mix(in srgb, var(--ad-brand) 10%, transparent); }
.dash-size-glyph { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; box-sizing: border-box; flex-shrink: 0; }
.dash-size-glyph-S { width: 8px; height: 8px; margin: 3px; }
.dash-size-glyph-M { width: 11px; height: 11px; margin: 1.5px; }
.dash-size-glyph-L { width: 14px; height: 14px; }

.dash-cat, .dash-set { display: flex; flex-direction: column; min-height: 0; max-height: 72vh; }
.dash-cat-head, .dash-cat-search, .dash-cat-foot, .dash-set-row, .dash-set-foot { flex-shrink: 0; }
.dash-cat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 10px; }
.dash-cat-title { font-family: var(--ad-font-display); font-weight: 600; font-size: 18px; }
.dash-cat-sub { font-size: 12px; color: var(--ad-text-subtle); margin-top: 2px; }
.dash-icon-btn { width: 30px; height: 30px; border-radius: 9px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ad-brand) 7%, transparent); color: var(--ad-text); }
.dash-cat-search { margin: 0 18px 10px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--ad-surface) 70%, transparent); border: 1px solid var(--ad-border); color: var(--ad-text-subtle); }
.dash-cat-search:focus-within { border-color: var(--ad-accent-deep); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ad-accent-deep) 25%, transparent); }
.dash-cat-search input { flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: none; border-radius: 0; box-shadow: none; -webkit-appearance: none; appearance: none; outline: none; background: transparent; font-family: var(--ad-font-body); font-size: 13.5px; color: var(--ad-text); }
.dash-cat-list { overflow-y: auto; padding: 0 10px 8px; min-height: 0; flex: 1; }
.dash-cat-empty { padding: 18px 10px; font-size: 12.5px; color: var(--ad-text-muted); }
.dash-cat-group { padding: 4px 0 6px; }
.dash-cat-group-name { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ad-text-subtle); padding: 8px 8px 4px; }
.dash-cat-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; }
.dash-cat-item:hover { background: color-mix(in srgb, var(--ad-brand) 5%, transparent); }
.dash-cat-ico { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--ad-brand); color: var(--ad-accent); }
.dash-cat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-cat-label { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-cat-tag { font-size: 11.5px; color: var(--ad-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-chip { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--ad-accent-bg); color: var(--ad-accent-fg); }
.dash-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: color-mix(in srgb, var(--ad-brand) 7%, transparent); flex-shrink: 0; }
.dash-seg-btn { width: 24px; height: 24px; border: none; border-radius: 7px; cursor: pointer; font-family: var(--ad-font-body); font-weight: 700; font-size: 11px; background: transparent; color: var(--ad-text-muted); }
.dash-seg-btn.is-on { background: var(--ad-surface); color: var(--ad-text); box-shadow: var(--ad-shadow-sm); }
.dash-cat-act { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 6px 10px; border-radius: 9px; border: none; cursor: pointer; font-family: var(--ad-font-body); font-weight: 700; font-size: 12px; background: var(--ad-accent); color: var(--ad-on-accent); }
.dash-cat-act-rm { background: transparent; color: var(--ad-danger-fg); border: 1px solid color-mix(in srgb, var(--ad-danger) 40%, transparent); }
.dash-cat-foot { padding: 10px 18px 14px; font-size: 11.5px; color: var(--ad-text-subtle); border-top: 1px solid color-mix(in srgb, var(--ad-brand) 8%, transparent); }

.dash-set { padding-bottom: 14px; overflow-y: auto; }
.dash-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dash-set-group { padding: 4px 18px 8px; display: flex; flex-direction: column; gap: 2px; }
.dash-set-cap { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ad-text-subtle); padding: 8px 0 4px; }
.dash-set-check { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; cursor: pointer; }
.dash-set-check.is-off { opacity: .5; cursor: not-allowed; }
.dash-set-check input { accent-color: var(--ad-accent-deep); width: 15px; height: 15px; }
.dash-set-foot { padding: 8px 18px 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.dash-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.dash-switch { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; border-radius: 999px; background: var(--ad-border-strong); position: relative; cursor: pointer; flex-shrink: 0; margin: 0; transition: background 160ms; }
.dash-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left 160ms var(--dash-ease); }
.dash-switch:checked { background: var(--ad-accent); }
.dash-switch:checked::after { left: 19px; background: var(--ad-on-accent); }
.dash-switch:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 2px; }
.dash-set-note { display: flex; align-items: flex-start; gap: 6px; margin: -4px 18px 4px; font-size: 11.5px; line-height: 1.4; color: var(--ad-text-subtle); }
.dash-set-note > svg { flex-shrink: 0; margin-top: 2px; }

/* ── View toggle (round 5): 28-px glass circle on the stage ───────── */
.dash-view-btn {
  width: 28px; height: 28px; border-radius: 999px; padding: 0; cursor: pointer; flex-shrink: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; color: var(--dash-ctl-fg);
  background: var(--dash-ctl-bg); border: 1px solid var(--dash-ctl-border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background 160ms;
}
.dash-view-btn:hover { background: var(--dash-ctl-bg-hover); }
.dash-view-btn.is-on { background: var(--ad-accent); border-color: var(--ad-accent); color: var(--ad-on-accent); }
.dash-view-btn:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }

/* ── View mode "randlos" (round 5, Peter 2026-09-29): padding off ─────
   No outer padding, no gap between stage and right column, no rounded inset; the right column is ONE
   continuous sidebar (cards flush, divider lines); the page takes the theme canvas (light #fff / dark
   #021a1b), so <main>'s bottom padding continues seamlessly. The Wyse card keeps its LIME gradient.
   Round 5b (Peter: "der GANZE Hintergrund nimmt die Theme-Farbe"): the stage follows the theme too — light →
   the canvas, dark → the dark canvas; tiles keep green/cream, the hero keeps its photo (blending into it).
   Round 5c (R5C §1): <main> overlaps the topbar's bottom border by its own width (no line above the stage);
   the topbar itself is untouched. <main> scrolls (overflow-y: auto) and would clip a negative margin on
   .dash — so <main> moves, and paints above the topbar (z-index 10) inside the flex column. */
main:has(> .dash.dash-flush) { background: var(--ad-canvas); margin-top: calc(-1 * var(--ad-bw-topbar, 1.5px)); z-index: 11; }
.dash.dash-flush { padding: 0; gap: 0; background: var(--ad-canvas); }
.dash.dash-wide.dash-flush { align-items: stretch; }
.dash-flush .dash-main {
  border-radius: 0; box-shadow: none;
  --dash-stage-a: var(--ad-canvas); --dash-stage-b: var(--ad-canvas); --dash-stage-text: var(--ad-text); --dash-stage-muted: var(--ad-text-subtle);
}
/* Light flush: the stage is light — its controls switch from white glass to the light surface skin. */
:root:not([data-theme="dark"]) .dash-flush .dash-main {
  --dash-ctl-bg: var(--ad-surface); --dash-ctl-bg-hover: var(--ad-surface-2); --dash-ctl-border: var(--ad-border-strong);
  --dash-ctl-fg: var(--ad-text); --dash-ctl-dash: var(--ad-border-strong);
}
.dash-flush .dash-side { gap: 0; background: var(--dash-card); border-left: 1px solid var(--ad-divider); }
.dash.dash-wide.dash-flush .dash-side { position: static; }
.dash-flush .dash-side > .dash-card { border-radius: 0; box-shadow: none; }
.dash-flush .dash-side > * + * { border-top: 1px solid var(--ad-divider); }
.dash.dash-flush:not(.dash-wide) .dash-side { display: flex; flex-direction: column; align-items: stretch; gap: 0; border-left: none; border-top: 1px solid var(--ad-divider); }
.dash.dash-flush:not(.dash-wide) .dash-side > * { min-width: 0; }
.dash.dash-flush:not(.dash-wide) .dash-card-head { flex-wrap: wrap; row-gap: 4px; }
.dash.dash-flush:not(.dash-wide) .dash-card-title { min-width: min-content; }
.dash.dash-flush:not(.dash-wide) .dash-task-due { white-space: normal; text-align: right; }

/* ── Phone width ──────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .dash { padding: 12px 12px 24px; gap: 14px; }
  .dash-hero { min-height: 0; }
  .dash-stage { padding: 0 12px 14px; }
  /* FND-1607: the control row wraps to 2-3 rows on a phone, but the stage pulls it up by a FIXED 30/78 px (sized for ONE 36-px row at
     desktop width) - the wrapped buttons then sat on top of the hero's greeting and motto. On a phone the row only grazes the hero's
     faded bottom padding (the 44 px under the motto), never its text. */
  .dash-stage, .dash-stage[data-strip="1"] { margin-top: -12px; }
  .dash-kpis { gap: 8px; }
  .dash-cat-item { flex-wrap: wrap; }
}

/* ── Reduced motion: no transitions, no spring, no lift ───────────── */
@media (prefers-reduced-motion: reduce) {
  .dash-tile, .dash-placeholder, .dash-kpi, .dash-plus, .dash-tile-arrow, .dash-tile-more, .dash-switch, .dash-switch::after { transition: none !important; }
  /* Flip = crossfade: no rotation, the two faces swap opacity. */
  .dash-flip, .dash-tile.is-flipped .dash-flip { transform: none !important; transition: none !important; }
  /* visibility over the same 180 ms: the incoming face is visible from the first frame (a discrete step
     hidden → visible maps every p > 0 to visible), the outgoing one stays visible until it has faded out. */
  .dash-face { transition: opacity 180ms linear, visibility 180ms linear; }
  .dash-face-back { transform: none; opacity: 0; }
  .dash-tile.is-flipped .dash-face-back { opacity: 1; }
  .dash-tile.is-flipped .dash-face-front { opacity: 0; }
  .dash-flip-btn:hover { transform: none; }
  .dash-view-btn { transition: none; }
  .dash-glass, .dash-glass-scrim { animation: none !important; }
  .dash-plus:hover, .dash-tile-arrow:hover, .dash-kpi:hover { transform: none; }
}

/* ── Pixel-Hintergrund (pixel_background.jsx, Peter 2026-10-01) ─────────────────────────────────────
   Only while the pixel layer is mounted (html.ad-pxbg-on — fail-open: without it the opaque page stays):
   the dashboard page itself turns transparent so the layer (Mist ground in light, CI green in dark)
   shows around the stage; in dark mode the padded stage turns translucent so the mosaic reads THROUGH it
   (Peter's reference: deep green ground, squares, cards on top); the flush stage is the canvas anyway →
   transparent. Tiles, cards, KPI boxes and the right column keep their own opaque surfaces. */
html.ad-pxbg-on main:has(> .dash), html.ad-pxbg-on .dash { background: transparent; }
html.ad-pxbg-on[data-theme="dark"] .dash-main {
  background: linear-gradient(180deg, color-mix(in srgb, var(--dash-stage-a) 18%, transparent) 0%, color-mix(in srgb, var(--dash-stage-b) 12%, transparent) 100%);
}
html.ad-pxbg-on .dash-flush .dash-main { background: transparent; }

/* ── FND-403 (Peter 2026-10-01): a tenant's OWN accent replaces the wygge lime on the whole dashboard ──────────────
   screens_dashboard.jsx sets data-accent="tenant" on .dash when the resolved --ad-accent is not the wygge Signal
   (dashboard_grid.jsx dashAccentInfo) plus two MEASURED derivatives: --dash-accent-mark (≥ 3 : 1 on the dark stage —
   the hero bar) and --dash-accent-ink (≥ 4.5 : 1 on the dark card — text links in dark mode). Everything the dashboard
   paints lime on its own follows: the hero bar (--dash-signal), dark links, the Wyse card tint + pills (the --as-lime-*
   tokens, scoped to the dashboard — the Wyse drawer outside keeps theme.css), the drag placeholder, the Wyse mark's
   glow. Chart emphasis: dashboard_charts.jsx (computed ramps). wygge / unbranded tenants (data-accent="wygge") keep CI. */
.dash[data-accent="tenant"] {
  --dash-signal: var(--dash-accent-mark, var(--ad-accent));
  --as-lime-a: color-mix(in srgb, var(--ad-accent) 14%, #ffffff);
  --as-lime-b: color-mix(in srgb, var(--ad-accent) 34%, #ffffff);
  --as-lime-pill: color-mix(in srgb, var(--ad-accent) 20%, transparent);
  --as-lime-pill-border: color-mix(in srgb, var(--ad-accent) 42%, transparent);
}
[data-theme="dark"] .dash[data-accent="tenant"] {
  --as-lime-a: color-mix(in srgb, var(--ad-accent) 10%, #073132);
  --as-lime-b: color-mix(in srgb, var(--ad-accent) 26%, #073132);
  --as-lime-pill: color-mix(in srgb, var(--ad-accent) 16%, transparent);
  --as-lime-pill-border: color-mix(in srgb, var(--ad-accent) 36%, transparent);
}
[data-theme="dark"] .dash[data-accent="tenant"] .dash-link:not(.dash-link-head) { color: var(--dash-accent-ink, var(--ad-accent)); }
.dash[data-accent="tenant"] .dash-placeholder { background: color-mix(in srgb, var(--ad-accent) 10%, transparent); }
.dash[data-accent="tenant"] .dash-wyse-mark { box-shadow: 0 0 0 1px rgba(3, 36, 37, 0.08), 0 6px 16px color-mix(in srgb, var(--ad-accent) 35%, transparent); }

/* ── Area dashboards (dashboard_areas.jsx AreaDashboard) ─────────────────────────────────────────
   Peter 2026-10-08 („So und nicht anders“): an area dashboard is EXACTLY the start dashboard — the same DashFrame as the
   screen's root, a direct child of <main>, so every .dash rule above (box padding, gap, page background, „randlos“ with
   <main> taking the canvas, the Wyse column) applies unchanged. There is no area-specific frame rule on purpose.
   The only area-specific rule is the hero: it carries the area's name + one line instead of greeting, motto and brand
   words, so it is a little lower. */
.dash-hero.dash-hero-area { min-height: 214px; }

/* ── FND-1088: a background image on any tile (dashboard_tile_editor.jsx DashTileBgFace / DashTileBackdrop) ─────────
   The image box comes from dashCropBox (percentages of the square, identical in S / M / L); cover bleeds 1 px against
   hairlines, contain shows black bars or the tile colour (data-bars="tone": transparent over the tile's own gradient).
   „Abdunkeln“ lays the tone over the whole image. Readability never depends on the image: title, tagline, depth line and
   count sit on the COMPUTED plate (--tile-plate = the tile colour at the smallest alpha that keeps ≥ 4.5 : 1 over pure
   black AND pure white, dashBgPlate); chip, arrow, ⋯ and ↻ get the solid tile colour. The plate keeps the text layout:
   horizontal padding is given back by the same negative margin, the vertical 2 px are a shadow (no clamp sliver). */
.dash-tile-bgwrap { position: absolute; inset: 0; border-radius: inherit; }
.dash-tile-bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.dash-tile-bg[data-bars="black"] { background: #000; }
.dash-tile-bg-img { position: absolute; display: block; max-width: none; max-height: none; object-fit: fill; -webkit-user-drag: none; user-select: none; }
.dash-tile-bg-dim { position: absolute; inset: 0; background: linear-gradient(150deg, var(--tile-bg-a) 0%, var(--tile-bg-b) 100%); pointer-events: none; }
.dash-tile-bgwrap :is(.dash-tile-title, .dash-tile-tag, .dash-tile-depth, .dash-tile-count) {
  background: var(--tile-plate); border-radius: 6px; padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px;
  box-shadow: 0 -2px 0 var(--tile-plate), 0 2px 0 var(--tile-plate);
}
.dash-tile-bgwrap .dash-tile-count { flex: 0 1 auto; }
.dash-tile-bgwrap :is(.dash-tile-chip, .dash-tile-arrow) { background: var(--tile-plate-solid); }
.dash-tile:has(.dash-tile-bgwrap) :is(.dash-tile-more, .dash-flip-btn) { background: var(--tile-bg-a); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dash-tile-bg-err {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 999px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; background: var(--ad-danger-bg); color: var(--ad-danger-fg);
  box-shadow: 0 0 0 2px var(--tile-bg-a);
}
/* A decor tile written by a newer cockpit build (media / note / chart arrive with PR 2–4): an honest face, never empty. */
.dash-tile-pending { opacity: .92; }

/* ── FND-1088: the tile editor (kit Drawer) — preview in real tile size + crop controls left, image source right ── */
.dash-te { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 24px; align-items: start; }
@media (max-width: 1100px) { .dash-te { grid-template-columns: minmax(0, 1fr); } }
.dash-te-main, .dash-te-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-te-preview {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  border-radius: 12px; border: 1.5px solid var(--ad-border); background: var(--ad-surface-inset);
}
.dash-crop { position: relative; flex-shrink: 0; }
.dash-crop-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; touch-action: none; outline: none; cursor: default; }
.dash-crop-stage.is-active { cursor: grab; }
.dash-crop-stage.is-active:active { cursor: grabbing; }
.dash-crop-stage:focus-visible .dash-crop-tile { outline: 2px solid var(--ad-accent); outline-offset: 3px; }
/* The part of the image the square cuts off, visible at 35 % so the excerpt is chosen consciously (cover only). */
.dash-crop-ghost { position: absolute; display: block; max-width: none; max-height: none; opacity: .35; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.dash-tile.dash-crop-tile { cursor: inherit; transition: none; }
.dash-tile.dash-crop-tile:hover { filter: none; }
.dash-crop-overlay { position: absolute; inset: 0; pointer-events: none; }
.dash-te-under { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash-te-note { font-size: 11.5px; color: var(--ad-text-subtle); }
.dash-te-readout { font-size: 12px; color: var(--ad-text-muted); font-variant-numeric: tabular-nums; }
.dash-te-crop { display: flex; flex-direction: column; }
.dash-te-slider { display: flex; align-items: center; gap: 8px; }
.dash-te-slider input[type="range"] { flex: 1; min-width: 0; accent-color: var(--ad-accent-deep); }
.dash-te-value { min-width: 44px; text-align: right; font-size: 12px; font-weight: 700; color: var(--ad-text); font-variant-numeric: tabular-nums; }
.dash-te-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-te-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.dash-te-opt {
  display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 10px; cursor: pointer; text-align: left; min-width: 0;
  border: 1.5px solid var(--ad-border); background: var(--ad-surface); color: var(--ad-text);
}
.dash-te-opt:hover { border-color: var(--ad-border-strong); }
.dash-te-opt.is-on { border-color: var(--ad-accent-deep); box-shadow: 0 0 0 2px var(--ad-accent); }
.dash-te-opt:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 2px; }
.dash-te-label { font-size: 11px; color: var(--ad-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.dash-te-upload { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dash-te-state { font-size: 12px; padding: 6px 10px; border-radius: 8px; background: var(--ad-info-bg); color: var(--ad-info-fg); }
.dash-te-state.is-error { background: var(--ad-danger-bg); color: var(--ad-danger-fg); }
.dash-te-state.is-done { background: var(--ad-success-bg); color: var(--ad-success-fg); }
.dash-te-budget { margin-right: auto; align-self: center; font-size: 11.5px; color: var(--ad-text-subtle); font-variant-numeric: tabular-nums; }
.dash-te-budget.is-over { color: var(--ad-danger-fg); font-weight: 700; }

/* ── FND-1088 PR 3: the note tile (dashboard_tile_note.jsx DashNoteTileBody) ─────────────────────────────────────────
   A content-free tile: no counter, no arrow, no route. The note's own colour IS the tile's tone (DashGrid toneFor), so --tile-text /
   --tile-muted / --tile-ring are the measured inks of that colour (≥ 4.5 : 1 on both gradient stops). The type scale follows the tile
   size (S / M / L, the tile title sizes); headings are rendered two levels down (h3 … h6) with these classes. `mark` is the inverse
   ink pair (tile text on the tile colour turned round — the same measured contrast); links keep the ink and are underlined.
   Over a background image only a TITLED note sits on the computed plate (--tile-plate, dashBgPlate); an untitled note has no plate:
   its text / HTML and its colour or image fill the square (Peter 14.10.). */
.dash-nt {
  position: absolute; inset: 0; box-sizing: border-box; padding: 13px 13px 12px; display: flex; flex-direction: column; min-width: 0;
  color: var(--tile-text); font-size: var(--note-fs); line-height: 1.42; overflow: hidden; cursor: pointer; text-align: left;
}
.dash-nt-S { --note-fs: 11.5px; --note-h1: 12.5px; --note-h2: 12px; --note-h3: 11.5px; --note-h4: 11.5px; padding: 9px 9px 8px; line-height: 1.32; }
.dash-nt-M { --note-fs: 13.5px; --note-h1: 16px; --note-h2: 15px; --note-h3: 14px; --note-h4: 13.5px; }
.dash-nt-L { --note-fs: 16px; --note-h1: 22px; --note-h2: 19px; --note-h3: 17px; --note-h4: 16px; padding: 16px 16px 14px; }
.dash-nt-content { position: relative; min-height: 0; max-height: 100%; overflow: hidden; overflow-wrap: anywhere; }
.dash-nt-content[data-overflow="1"] { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); }
.dash-nt-gap { float: right; width: 24px; height: 22px; }
.dash-nt-S .dash-nt-gap { width: 20px; height: 18px; }
.dash-nt-title { font-family: var(--ad-font-display); font-weight: 700; font-size: var(--note-h1); line-height: 1.2; margin: 0 0 .3em; }
.dash-nt-text { white-space: pre-wrap; }
.dash-nt-html > :first-child { margin-top: 0; }
.dash-nt :is(p, ul, ol, blockquote, pre) { margin: 0 0 .45em; }
.dash-nt :is(h3, h4, h5, h6) { font-family: var(--ad-font-display); font-weight: 700; line-height: 1.2; margin: 0 0 .3em; color: inherit; }
.dash-nt .dash-nt-h1 { font-size: var(--note-h1); }
.dash-nt .dash-nt-h2 { font-size: var(--note-h2); }
.dash-nt .dash-nt-h3 { font-size: var(--note-h3); }
.dash-nt .dash-nt-h4 { font-size: var(--note-h4); }
.dash-nt :is(ul, ol) { padding-left: 1.25em; }
.dash-nt li { margin: .1em 0; }
.dash-nt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dash-nt mark { background: var(--tile-text); color: var(--tile-bg-a); border-radius: 3px; padding: 0 .2em; }
.dash-nt :is(code, pre) { font-family: var(--ad-font-mono, ui-monospace, monospace); font-size: .92em; }
.dash-nt code { box-shadow: inset 0 0 0 1px var(--tile-ring); border-radius: 4px; padding: 0 .25em; }
.dash-nt pre { white-space: pre-wrap; box-shadow: inset 0 0 0 1px var(--tile-ring); border-radius: 6px; padding: .35em .5em; }
.dash-nt pre code { box-shadow: none; padding: 0; }
.dash-nt blockquote { border-left: 3px solid var(--tile-ring); padding-left: .6em; }
.dash-nt hr { border: 0; border-top: 1px solid var(--tile-ring); margin: .5em 0; }
.dash-tile-bgwrap .dash-nt-titled .dash-nt-content { background: var(--tile-plate); border-radius: 8px; padding: 6px 8px; margin: -6px -8px; }
.dash-tile-bgwrap .dash-nt-titled .dash-nt-content[data-overflow="1"] { -webkit-mask-image: none; mask-image: none; }

/* The note editor (kit Drawer, the PR 1 editor's two-column shell). */
.dash-nt-input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 120px; padding: 9px 12px; resize: vertical; outline: none;
  border-radius: var(--ad-radius-input, 8px); border: var(--ad-bw-input, 1.5px) solid var(--ad-border-strong); background: var(--ad-surface); color: var(--ad-text);
  font-family: var(--ad-font-body); font-size: 13px; font-weight: 500; line-height: 1.45;
}
.dash-nt-input:focus { border-color: var(--ad-brand); }
.dash-nt-input.is-code { font-family: var(--ad-font-mono, ui-monospace, monospace); font-size: 12px; }
.dash-nt-bytes { margin-top: 4px; font-size: 11.5px; color: var(--ad-text-subtle); font-variant-numeric: tabular-nums; }
.dash-nt-bytes.is-low { color: var(--ad-warn-fg); font-weight: 700; }
.dash-nt-bytes.is-stop { color: var(--ad-danger-fg); font-weight: 700; }
.dash-nt-dropped { margin-top: 6px; font-size: 11.5px; line-height: 1.45; padding: 6px 10px; border-radius: 8px; background: var(--ad-warn-bg); color: var(--ad-warn-fg); }
.dash-nt-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.dash-swatch-custom { background: var(--ad-surface); color: var(--ad-text); border: 1.5px solid var(--ad-border-strong); }
.dash-nt-custom { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.dash-nt-picker { position: relative; width: 44px; height: 34px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--ad-border-strong); cursor: pointer; flex-shrink: 0; background: var(--ad-surface-inset); }
.dash-nt-picker input[type="color"] { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: .011; cursor: pointer; border: none; padding: 0; }
.dash-nt-bgrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash-cat-foot-sub { flex-shrink: 0; padding: 0 18px 14px; margin-top: -8px; font-size: 11.5px; color: var(--ad-text-subtle); }
.dash-cat-act:disabled { opacity: .5; cursor: not-allowed; }

/* ── FND-1088 PR 5: „Nur Bild zeigen“ (dashboard_tile_editor.jsx DashTileBareFace / DashTileBareSwitch) ──────────────────────────
   Peter 14.10.: „einfach nur stumpf ein Foto, fertig“. A catalog tile with bg.labels = 'hide' shows its photo ONLY: no chip, title,
   tagline, count, arrow — and so no plate. The empty layer carries the density class of the face it replaces (.dash-d-s / -m / -l …),
   so ⋯ and ↻ keep the size and corner of the labelled tile; at rest both are hidden (⋯ already is on every tile), hover and keyboard
   focus show them, touch shows them as on every tile. „Bearbeiten“ shows a small name badge on the COMPUTED plate (--tile-plate /
   --tile-text of DashTileBgFace: ≥ 4.5 : 1 over any photo), bottom-left — the resize handle owns the bottom-right corner. */
.dash-tile-bare { position: absolute; inset: 0; border-radius: inherit; box-sizing: border-box; }
/* No tile-colour ring around the photo: the 1-px frame turns transparent and the tone gradient stays inside it (padding-box), so the
   stage — not the tone — meets the photo's edge. Only while the bare layer is shown: an unloadable image brings the labelled face
   AND its frame back. */
.dash-face:has(> .dash-tile-bgwrap > .dash-tile-bare), .dash-tile:not(.dash-tile-flip):has(> .dash-tile-bgwrap > .dash-tile-bare) { border-color: transparent; background-clip: padding-box; }
.dash-tile:has(.dash-tile-bare) .dash-flip-btn { opacity: 0; }
.dash-tile:has(.dash-tile-bare):hover .dash-flip-btn, .dash-tile:has(.dash-tile-bare):focus-within .dash-flip-btn, .dash-tile:has(.dash-tile-bare) .dash-flip-btn:focus-visible { opacity: 1; }
@media (hover: none) { .dash-tile:has(.dash-tile-bare) .dash-flip-btn { opacity: 1; } }
.dash-tile-bare-badge {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 52px); box-sizing: border-box; padding: 4px 9px; border-radius: 999px;
  background: var(--tile-plate); color: var(--tile-text); font-family: var(--ad-font-display); font-size: 12px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.dash-tile-bare-badge.is-s { left: 6px; bottom: 6px; max-width: calc(100% - 38px); padding: 2px 7px; font-size: 10.5px; }
/* The switch in the background editor (kit Field; the dashboard's own .dash-switch). */
.dash-te-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--ad-border); background: var(--ad-surface);
}
.dash-te-switch.is-disabled { cursor: not-allowed; opacity: .6; }
.dash-te-switch .dash-switch:disabled { cursor: not-allowed; }
.dash-te-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-te-switch-title { font-size: 13px; font-weight: 700; color: var(--ad-text); }
.dash-te-switch-sub { font-size: 11.5px; line-height: 1.35; color: var(--ad-text-muted); }
.dash-te-switch-hint { margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: var(--ad-text-subtle); }

/* ── FND-1088 PR 7: „Beschriftung gestalten“ (dashboard_tile_label.jsx dashLabelFace / DashTileLabelLayer / DashLabelSection) ─────────
   Peter 14.10. (tile „Freigaben“ over a mountain photo): plate on / off, text colour, text shadow, weight, icon on / off and WHICH icon.
   dashLabelFace puts the choice on the tile's background wrapper (.dash-tile-bgwrap) — or, for a note / chart title without an image,
   on .dash-tile-lbl — as data-label-* attributes + custom properties; these rules apply them. Plate off = --tile-plate and
   --tile-plate-solid transparent (title, tagline, depth line, count, chip and arrow lose their background; the chip / arrow ring stays,
   it marks them as controls). A catalog face takes the colour as its ink (--tile-text / --tile-muted / --tile-ring); a note / chart only
   colours its TITLE (the note text keeps its measured ink). A hidden icon keeps its place (visibility), so the text does not jump under
   ⋯ / ↻. „Nur Bild zeigen“ (bg.labels = 'hide') never gets here: a bare background carries no attribute. */
.dash-tile-lbl { position: absolute; inset: 0; border-radius: inherit; }
:is(.dash-tile-bgwrap, .dash-tile-lbl)[data-label-color] .dash-tile-body { --tile-text: var(--tile-label-text); --tile-muted: var(--tile-label-text); --tile-ring: var(--tile-label-ring); }
:is(.dash-tile-bgwrap, .dash-tile-lbl)[data-label-color] :is(.dash-nt-title, .dash-ct-head .dash-tile-title, .dash-lbl-ico) { color: var(--tile-label-text); }
:is(.dash-tile-bgwrap, .dash-tile-lbl)[data-label-shadow] :is(.dash-tile-title, .dash-tile-tag, .dash-tile-depth, .dash-tile-count, .dash-nt-title) { text-shadow: var(--tile-shadow); }
:is(.dash-tile-bgwrap, .dash-tile-lbl)[data-label-shadow] :is(.dash-tile-chip, .dash-tile-arrow, .dash-lbl-ico) > * { filter: var(--tile-icon-shadow); }
:is(.dash-tile-bgwrap, .dash-tile-lbl)[data-label-weight] :is(.dash-tile-title, .dash-tile-tag, .dash-tile-depth, .dash-tile-count, .dash-nt-title) { font-weight: var(--tile-weight); }
.dash-tile-bgwrap[data-label-icon="off"] .dash-tile-chip { visibility: hidden; }
.dash-lbl-ico { display: inline-flex; align-items: center; vertical-align: -0.14em; margin-right: .35em; flex-shrink: 0; }
.dash-ct-head .dash-lbl-ico { margin-right: 6px; }

/* The section „Beschriftung“ in the tile editors (kit Field / WyChips / Btn; the note editor's swatches and colour picker). The preview
   in real tile size stays in view while the controls below it scroll (tall windows). */
@media (min-height: 700px) { .dash-te-preview { position: sticky; top: 0; z-index: 3; box-shadow: 0 -20px 0 0 var(--ad-surface); } }
.dash-lbl-ed { display: flex; flex-direction: column; margin-top: 4px; padding-top: 14px; border-top: 1.5px solid var(--ad-border); }
.dash-lbl-head { font-family: var(--ad-font-label); font-size: calc(11px * var(--ad-label-fs-scale, 1)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ad-label-color, var(--ad-text-subtle)); margin-bottom: 10px; }
.dash-lbl-sub { font-size: 12px; font-weight: 700; color: var(--ad-text-muted); margin: 12px 0 6px; }
.dash-lbl-inline { font-size: 11.5px; color: var(--ad-text-muted); margin-right: 6px; }
.dash-lbl-shadow-color { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.dash-lbl-contrast { margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--ad-text-subtle); font-variant-numeric: tabular-nums; }
.dash-lbl-contrast.is-fair { color: var(--ad-warn-fg); }
.dash-lbl-contrast.is-poor { color: var(--ad-danger-fg); font-weight: 700; }
.dash-lbl-reset { margin-top: 10px; }
.dash-lbl-picker { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dash-lbl-picker.is-disabled { opacity: .6; }
.dash-lbl-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dash-lbl-current { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--ad-text); }
.dash-lbl-current-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-lbl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; max-height: 236px; overflow-y: auto; padding: 3px;
  border-radius: 10px; border: 1.5px solid var(--ad-border); background: var(--ad-surface-inset);
}
.dash-lbl-opt {
  aspect-ratio: 1; min-width: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; cursor: pointer;
  border: 1.5px solid var(--ad-border); background: var(--ad-surface); color: var(--ad-text);
}
.dash-lbl-opt:hover { border-color: var(--ad-border-strong); }
.dash-lbl-opt.is-on { border-color: var(--ad-accent-deep); box-shadow: 0 0 0 2px var(--ad-accent); }
.dash-lbl-opt:focus-visible { outline: 2px solid var(--ad-accent-deep); outline-offset: 2px; }
.dash-lbl-opt:disabled { cursor: not-allowed; }
.dash-lbl-none { grid-column: 1 / -1; padding: 8px; font-size: 12px; color: var(--ad-text-subtle); }
.dash-lbl-count { font-size: 11px; color: var(--ad-text-subtle); font-variant-numeric: tabular-nums; }

/* ── FND-1130 — the ONE tile editor shell (dashboard_tile_editor.jsx DashEditorShell): toolbar · layers · canvas · properties ──────────
   Fixed to the drawer height: the drawer body does not scroll, each pane scrolls on its own (layers, canvas, properties). */
.ad-drawer-body:has(> .ad-drawer-flow > .dash-es) { overflow: hidden !important; padding: 0 !important; display: flex; flex-direction: column; }
.ad-drawer-body:has(> .ad-drawer-flow > .dash-es) > .ad-drawer-flow { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }
.dash-es { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dash-es-bar { flex-shrink: 0; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 5px 10px; border-bottom: 1.5px solid var(--ad-border); background: var(--ad-surface-2); }
.dash-es-tool { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--ad-text-muted); cursor: pointer; padding: 0; }
.dash-es-tool:hover:not(:disabled) { background: var(--ad-surface-inset); color: var(--ad-text); }
.dash-es-tool.is-on { background: var(--ad-accent-bg); color: var(--ad-text); box-shadow: inset 0 0 0 1.5px var(--ad-accent-deep, var(--ad-accent)); }
.dash-es-tool:disabled { opacity: .32; cursor: default; }
.dash-es-tool:focus-visible, .dash-es-size:focus-visible, .dash-es-layer-main:focus-visible, .dash-es-layer-tg:focus-visible, .dash-es-group-h:focus-visible { outline: 2px solid var(--ad-accent-deep, var(--ad-accent)); outline-offset: 1px; }
.dash-es-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--ad-border); }
.dash-es-bar-end { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.dash-es-sizes { display: inline-flex; border: 1.5px solid var(--ad-border); border-radius: 7px; overflow: hidden; }
.dash-es-size { min-width: 28px; height: 26px; border: 0; background: transparent; color: var(--ad-text-muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.dash-es-size + .dash-es-size { border-left: 1.5px solid var(--ad-border); }
.dash-es-size.is-on { background: var(--ad-accent-bg); color: var(--ad-text); }
.dash-es-zoom { min-width: 42px; font-size: 11.5px; color: var(--ad-text-subtle); font-variant-numeric: tabular-nums; }
.dash-es-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 248px minmax(0, 1fr) 320px; }
.dash-es-layers { min-height: 0; overflow-y: auto; padding: 10px; border-right: 1.5px solid var(--ad-border); background: var(--ad-surface); display: flex; flex-direction: column; gap: 4px; }
.dash-es-layers .dle-list-head { flex-wrap: wrap; }
.dash-es-layers-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ad-text-subtle); padding: 2px 4px 6px; }
.dash-es-canvas { min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; background: var(--ad-surface-inset); }
.dash-es-props { min-height: 0; overflow-y: auto; padding: 8px 12px 16px; border-left: 1.5px solid var(--ad-border); background: var(--ad-surface); display: flex; flex-direction: column; gap: 6px; }
.dash-es .dash-te-preview, .dash-es .dle-preview { flex: 1; min-height: 0; position: relative; border: 0; border-radius: 0; background: transparent; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: auto; }
.dash-es .dash-te-preview .dash-te-note { font-size: 11.5px; color: var(--ad-text-subtle); }
.dash-es-say { flex-shrink: 0; padding: 4px 12px; font-size: 11.5px; color: var(--ad-text-subtle); min-height: 22px; }
.dash-es-layer { display: flex; align-items: center; gap: 2px; border-radius: 8px; border: 1.5px solid transparent; }
.dash-es-layer:hover { background: var(--ad-surface-inset); }
.dash-es-layer.is-on { border-color: var(--ad-accent-deep, var(--ad-accent)); background: var(--ad-accent-bg); }
.dash-es-layer.is-hidden .dash-es-layer-name { opacity: .5; text-decoration: line-through; }
.dash-es-layer-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px; border: 0; background: transparent; color: var(--ad-text); font: inherit; text-align: left; cursor: pointer; }
.dash-es-layer-ico { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--ad-surface-inset); color: var(--ad-text-muted); }
.dash-es-layer-txt { min-width: 0; display: flex; flex-direction: column; }
.dash-es-layer-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-es-layer-sub { font-size: 11px; color: var(--ad-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-es-layer-tg { width: 26px; height: 26px; flex-shrink: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ad-text-subtle); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dash-es-layer-tg:hover { background: var(--ad-surface-inset); color: var(--ad-text); }
.dash-es-group { border-bottom: 1px solid var(--ad-border); padding: 2px 0 8px; }
.dash-es-group-h { list-style: none; display: flex; align-items: center; gap: 6px; padding: 6px 2px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ad-text); user-select: none; }
.dash-es-group-h::-webkit-details-marker { display: none; }
.dash-es-group-h svg { transition: transform 120ms; transform: rotate(-90deg); color: var(--ad-text-subtle); }
.dash-es-group[open] > .dash-es-group-h svg { transform: none; }
.dash-es-group-b { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 0; }
.dash-es-group-b .dash-te-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-es-ro { font-size: 13px; color: var(--ad-text); }
.dash-es-budget { font-size: 11.5px; color: var(--ad-text-subtle); }
.dash-es-budget.is-over { color: var(--ad-danger-text, var(--ad-text)); }
.dash-es .dle-sec { border-bottom: 1px solid var(--ad-border); padding-bottom: 8px; }
@media (max-width: 1100px) { .dash-es-body { grid-template-columns: 180px minmax(0, 1fr) 280px; } }
@media (prefers-reduced-motion: reduce) { .dash-es-group-h svg { transition: none; } }
/* Compact inspector rows (Peter 2026-10-15: „super kompakt, wie ein kleines Programm“): label left 110 px, control right; sliders 120 px. */
.dash-es-props { font-size: 12.5px; }
.dash-es-props .ad-field { display: grid !important; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 4px 8px !important; margin-bottom: 4px !important; }
.dash-es-props .ad-field > label { grid-column: 1; align-self: start; padding-top: 6px; font-size: 10.5px !important; line-height: 1.25; }
.dash-es-props .ad-field > :not(label) { grid-column: 2; min-width: 0; }
/* fields inside the composition panel's two-column grids keep the stacked label (two 110 px rows side by side do not fit 320 px) */
.dash-es-props .dle-grid2 .ad-field, .dash-es-props .dle-grid4 .ad-field { display: flex !important; }
.dash-es-props .dle-grid2 .ad-field > label, .dash-es-props .dle-grid4 .ad-field > label { padding-top: 0; }
/* Nothing in the sidebar may leave its 320 px: the font row (Schrift + Stärke) gives the font picker the flexible column, every field
   control is capped at its column (FontPicker / selects carry a fixed inline width). */
.dash-es-props .dle-grid2 { grid-template-columns: minmax(0, 1fr) auto; }
.dash-es-props .dle-grid2 > *, .dash-es-props .dle-grid4 > * { min-width: 0; }
.dash-es-props .ad-field > :not(label), .dash-es-props .ad-field > :not(label) > * { max-width: 100%; box-sizing: border-box; }
.dash-es-props { overflow-x: hidden; }
/* Wide content keeps the stacked label (full sidebar width): the source list of a chart, a note's text / HTML body. */
.dash-es-props .ad-field:has(.dash-ct-srcs), .dash-es-props .ad-field:has(textarea) { display: flex !important; }
.dash-es-props .ad-field:has(.dash-ct-srcs) > label, .dash-es-props .ad-field:has(textarea) > label { padding-top: 0; }
.dash-es-props .ad-field > span:last-child:not(:first-child) { font-size: 10.5px !important; line-height: 1.35; }
.dash-es-props input[type="range"] { width: 120px; max-width: 120px; flex: 0 0 120px; }
.dash-es-props .dash-te-slider { gap: 4px; flex-wrap: nowrap; }
.dash-es-props .dash-te-grid { gap: 6px; }
.dash-es-props .dash-te-row, .dash-es-props .dle-row { display: flex; flex-wrap: wrap; gap: 4px; }
.dash-es-props .dle-h { font-size: 12px; margin: 4px 0; }
.dash-es-tool { width: 28px; height: 28px; }
.dash-es-bar { min-height: 32px; padding-top: 2px; padding-bottom: 2px; }
/* FND-1135 (Peter 2026-10-15: „Werkzeuge beschriften; im Light und im Dark Mode auf jeden Fall vernünftig“) — every popover / list / dropdown of the editor
   shell sets surface, text, hover and focus itself from the kit tokens; nothing is inherited from the drawer or the dashboard scope.
   The „Ebene hinzufügen“ menu (WyMenu, ui_kit.jsx) and the font picker (forms.jsx) do it inline; native selects and the colour / icon / template pickers here. */
.dash-es-layers, .dash-es-props, .dash-es-canvas { color: var(--ad-text); }
.dash-es select { color: var(--ad-text); }
.dash-es select option, .dash-es select optgroup { background: var(--ad-surface); color: var(--ad-text); }
.dash-es select option:disabled { color: var(--ad-text-faint); }
.dash-es div:has(> select:focus-visible) { outline: 2px solid var(--ad-link, var(--ad-accent-deep)); outline-offset: 1px; }