/* Oberflächen-Standard · komponenten.css
   Bausteine: Shell, Sidebar, Kopf, Kennzahlen, Buttons, Karten, Schalter, Chips, Ringe, Balken, Listen, Menü, Dialog, Mobil. Braucht tokens.css + material.css.
   Quelle der Wahrheit: skills-bibliothek/claude-code-global/oberflaechen-standard/assets/ */
@layer tokens, base, layout, components, utilities;

/* ============================================================ */
@layer layout {
  .shell {
    display: grid; grid-template-columns: 252px minmax(0, 1fr);
    gap: var(--gap); padding: var(--gap); min-height: 100dvh;
  }
  .main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-content: start; min-width: 0; }
  .bento { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }

  @media (max-width: 1180px) {
    .bento > * { grid-column: span 6; }
    .bento > .wide { grid-column: span 12; }
  }
  @media (max-width: 760px) {
    .shell { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    .bento > * { grid-column: 1 / -1; }
  }
}

@layer components {

  /* ---- Sidebar ---- */
  .sidebar {
    position: sticky; top: var(--gap); height: calc(100dvh - 2 * var(--gap));
    display: flex; flex-direction: column; gap: 4px;
    border-radius: var(--r-xl); padding: 16px 12px;
  }
  .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-weight: 700; font-size: 18px; }
  .brand-mark {
    inline-size: 34px; aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center;
    background: var(--gel); color: var(--on-accent);
    box-shadow: var(--gel-depth), 0 8px 18px -8px oklch(0.56 var(--accent-c) var(--accent-h) / .9);
  }
  .nav { display: grid; gap: 2px; }
  /* Einträge dürfen Links (Seiten) oder Buttons (Reiter mit role="tab") sein */
  .nav > :is(a, button) {
    inline-size: 100%; border: 0; background: none; text-align: start; cursor: pointer;
    display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px;
    border-radius: var(--r-md); color: var(--text-2); font-weight: 550;
    transition: background-color .2s var(--ease), color .2s;
  }
  .nav > :is(a, button):hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
  .nav > [aria-current="page"], .nav > [aria-selected="true"] {
    background: linear-gradient(172deg, var(--sheen), transparent 60%), var(--surface);
    color: var(--text); box-shadow: var(--depth), 0 1px 2px var(--drop-near);
  }
  .nav > :is([aria-current="page"], [aria-selected="true"]) svg { color: var(--accent-text); filter: drop-shadow(0 0 6px oklch(0.7 var(--accent-c) var(--accent-h) / .6)); }
  .nav svg { flex: none; inline-size: 18px; block-size: 18px; }
  .nav .badge { margin-inline-start: auto; }
  .nav-label { margin: 18px 12px 6px; font-size: 11px; font-weight: 700; color: var(--text-3); } /* keine Großbuchstaben-Labels (CI) */
  .pin { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: var(--r-md); color: var(--text-2); font-weight: 550; }
  .pin:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
  .dot { inline-size: 8px; aspect-ratio: 1; border-radius: 50%; background: currentColor; flex: none; }

  .profile {
    anchor-name: --profil;
    margin-top: auto; display: flex; align-items: center; gap: 10px; inline-size: 100%;
    padding: 10px; border-radius: var(--r-lg); border: 0; background: transparent; text-align: start;
  }
  .profile:hover { background: var(--surface-2); }
  .avatar {
    inline-size: 36px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-size: 13px; font-weight: 700; color: var(--on-accent);
    background: linear-gradient(135deg, oklch(0.62 0.15 var(--accent-h)), oklch(0.55 0.15 calc(var(--accent-h) + 60)));
  }
  .profile small { display: block; color: var(--text-3); font-size: 12px; }

  /* ---- Popover-Menü (Popover-API + Anchor Positioning, kein JS) ---- */
  .menu {
    margin: 0; padding: 6px; min-inline-size: 220px; border-radius: var(--r-lg);
    color: var(--text); background: linear-gradient(172deg, var(--sheen), transparent 40%), var(--surface-solid);
    border: 0; box-shadow: var(--depth), var(--shadow);
    position-anchor: --profil; position-area: top span-right; margin-block-end: 8px;
    opacity: 0; translate: 0 6px;
    transition: opacity .18s var(--ease), translate .18s var(--ease), display .18s allow-discrete, overlay .18s allow-discrete;
  }
  .menu:popover-open { opacity: 1; translate: 0 0; }
  @starting-style { .menu:popover-open { opacity: 0; translate: 0 6px; } }
  .menu button {
    display: flex; inline-size: 100%; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px;
    border: 0; border-radius: var(--r-sm); background: none; text-align: start;
  }
  .menu button:hover { background: var(--surface-2); }
  .menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }

  /* ---- Kopfbereich ---- */
  .topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
  .hero h1 { font-size: var(--fs-hero); font-weight: 750; letter-spacing: -0.035em; line-height: 1.05; }
  .hero p { color: var(--text-2); font-size: 16px; margin-top: 6px; }
  .tools { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: var(--r-pill); }
  .search {
    display: flex; align-items: center; gap: 8px; inline-size: 320px; height: 38px; padding: 0 12px;
    border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-3); box-shadow: var(--inset-well);
  }
  .search input { all: unset; flex: 1; inline-size: 0; min-inline-size: 0; color: var(--text); }
  .search input::placeholder { color: var(--text-3); }
  kbd { font: 600 11px/1 var(--font); padding: 4px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); }
  .icon-btn {
    flex: none; inline-size: 38px; block-size: 38px; display: grid; place-items: center; position: relative;
    border-radius: 50%; border: 0; background: transparent; color: var(--text-2);
    transition: background-color .2s, color .2s;
  }
  .icon-btn:hover { background: var(--surface-2); color: var(--text); }
  .icon-btn .ping { position: absolute; top: 8px; right: 9px; inline-size: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg); }

  /* ---- KPI-Leiste ---- */
  .kpis { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
  .kpi { min-inline-size: 118px; padding: 10px 16px; border-radius: var(--r-lg); }
  .kpi span { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); }
  .kpi strong { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; }
  .kpi small { font-size: 14px; color: var(--text-3); font-weight: 600; }
  .kpi.alert strong { color: var(--danger); }
  .actions { margin-inline-start: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

  /* ---- Buttons ---- */
  .btn {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px;
    border-radius: var(--r-pill); border: 0; font-weight: 650;
    background: linear-gradient(172deg, var(--sheen), transparent 60%), var(--surface); color: var(--text);
    box-shadow: var(--depth), 0 1px 2px var(--drop-near), 0 8px 18px -12px var(--drop-far);
    backdrop-filter: blur(12px) saturate(1.6);
    transition: transform var(--t-slow) var(--spring), box-shadow var(--t) var(--ease), translate var(--t) var(--ease);
  }
  .btn:hover { translate: 0 -1px; box-shadow: var(--depth), 0 1px 2px var(--drop-near), 0 12px 22px -12px var(--drop-far); }
  .btn:active { transform: scale(.96); transition-duration: var(--t-fast); }
  .btn-primary { background: var(--gel); color: var(--on-accent); box-shadow: var(--gel-depth), var(--glow); backdrop-filter: none; text-shadow: 0 1px 1px oklch(0 0 0 / .2); }
  .btn-primary:hover { box-shadow: var(--gel-depth), 0 14px 30px -10px oklch(0.58 var(--accent-c) var(--accent-h)); }
  /* Lichtstreif, der beim Überfahren einmal über die Hauptaktion läuft */
  .btn-primary::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, oklch(1 0 0 / .35) 50%, transparent 65%);
    translate: -120% 0;
  }
  @media (hover: hover) { .btn-primary:hover::after { translate: 120% 0; transition: translate .7s var(--ease); } }
  .btn-sm { height: 34px; padding: 0 14px; font-size: 14px; }
  .btn svg { inline-size: 16px; block-size: 16px; }


  /* ---- Karte ---- */
  .card {
    container-type: inline-size;
    border-radius: var(--r-xl); padding: var(--pad-card);
    display: flex; flex-direction: column; gap: 16px; min-width: 0;
  }
  .card-head { display: flex; align-items: start; gap: 12px; }
  .card-head h2 { font-size: 17px; font-weight: 700; }
  .card-head p { font-size: 13.5px; color: var(--text-2); }
  .card-head > :last-child:not(:first-child) { margin-inline-start: auto; }
  .link { font-weight: 650; font-size: 14px; white-space: nowrap; }

  /* ---- Segment-Schalter ---- */
  .seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); gap: 2px; box-shadow: var(--inset-well); }
  .seg button {
    border: 0; background: none; padding: 5px 12px; border-radius: var(--r-pill);
    font-size: 13px; font-weight: 650; color: var(--text-2);
  }
  .seg button { transition: color var(--t), background-color var(--t); }
  .seg button[aria-pressed="true"] { background: linear-gradient(172deg, var(--sheen), transparent 70%), var(--surface-solid); color: var(--text); box-shadow: var(--depth), 0 2px 6px -2px var(--drop-far); }

  /* ---- Badge / Chip ---- */
  .badge { min-inline-size: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--text-2); }
  .badge:empty { display: none; }
  .chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 650; background: var(--surface-2); color: var(--text); }
  .chip .dot { inline-size: 7px; }
  .prio { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 700; }
  .prio.danger { color: var(--danger); background: var(--danger-soft); }
  .prio.warn { color: var(--warn); background: var(--warn-soft); }
  .prio.ok { color: var(--ok); background: var(--ok-soft); }

  /* ---- Ringe (conic-gradient + @property → animierbar ohne JS-Lib) ---- */
  @property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
  .rings-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; flex: 1; }
  .rings { inline-size: 172px; aspect-ratio: 1; flex: none; overflow: visible; }
  /* SVG-Ringe: runde Enden, Leuchten in eigener Farbe, Füllung per stroke-dasharray animiert */
  .ring-track, .ring-val { fill: none; stroke-width: 15; }
  .ring-track { stroke: color-mix(in oklch, var(--c) 16%, transparent); }
  .ring-val {
    stroke: var(--c); stroke-linecap: round; stroke-dasharray: var(--p) 100;
    rotate: -90deg; transform-origin: center; transform-box: fill-box;
    filter: drop-shadow(0 0 5px color-mix(in oklch, var(--c) 70%, transparent));
    animation: dash 1.2s var(--ease) both; animation-delay: calc(var(--d, 0) * 1s + .25s);
  }
  @keyframes dash { from { stroke-dasharray: 0 100; } }
  @keyframes fill { from { --p: 0; } }
  .legend { display: grid; gap: 14px; }
  .legend div { padding-inline-start: 12px; border-inline-start: 3px solid var(--c); }
  .legend span { display: block; font-size: 13px; color: var(--text-2); font-weight: 600; }
  .legend strong { font-size: 22px; font-weight: 750; }
  .legend small { color: var(--text-3); font-size: 14px; font-weight: 600; }

  /* Spotlight: hervorgehobene Kachel aus getöntem Glas (mit data-tilt kippt sie unter der Maus) */
  .spotlight {
    position: relative; border-radius: var(--r-lg); padding: 16px; display: grid; gap: 4px;
    background:
      radial-gradient(220px circle at var(--gx, -999px) var(--gy, -999px), var(--glint), transparent 70%),
      linear-gradient(160deg, oklch(0.62 var(--accent-c) var(--accent-h) / .30), oklch(0.62 var(--accent-c) var(--accent-h) / .06) 80%);
    box-shadow: var(--depth), inset 0 0 0 1px oklch(0.70 var(--accent-c) var(--accent-h) / .35),
                0 18px 36px -20px oklch(0.50 var(--accent-c) var(--accent-h) / .8);
  }
  .spotlight .when { font-size: 13px; color: var(--text-2); }
  .spotlight .when b { color: var(--text); }
  .spotlight h3 { font-size: 18px; font-weight: 700; }
  .spotlight .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
  .agenda { list-style: none; margin: 0; padding: 0; display: grid; }
  .agenda li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
  .agenda li::before { content: ""; inline-size: 3px; align-self: stretch; border-radius: 3px; background: var(--c, var(--accent)); }
  .agenda span:first-of-type { font-weight: 600; flex: 1; }
  .agenda time { color: var(--text-2); font-size: 14px; }

  /* ---- Skala (Dial) + Messwert ---- */
  .dial {
    inline-size: 116px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; flex: none;
    position: relative;
  }
  .dial svg { position: absolute; inset: 0; overflow: visible; }
  .dial .ring-val { --c: oklch(0.66 var(--accent-c) var(--accent-h)); stroke-width: 10; }
  .dial .ring-track { --c: var(--text); stroke-width: 10; }
  .dial strong { font-size: 28px; font-weight: 750; letter-spacing: -0.03em; }
  .dial span { font-size: 12px; color: var(--text-2); font-weight: 600; }
  .run { display: flex; gap: 18px; align-items: center; }
  .run-body { display: grid; gap: 10px; flex: 1; min-inline-size: 0; }
  label.field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
  select {
    appearance: base-select; /* neue anpassbare Selects, fällt sonst auf normal zurück */
    inline-size: 100%; min-inline-size: 0;
    height: 42px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--line);
    background: var(--surface-2); color: var(--text); font-weight: 600;
  }
  .meter { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--inset-well); }
  .meter-top { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-2); font-weight: 600; }
  .meter-top b { color: var(--text); }
  .bar { block-size: 6px; border-radius: 6px; background: color-mix(in oklch, var(--text) 10%, transparent); box-shadow: inset 0 1px 1px var(--well); }
  .bar i { display: block; block-size: 100%; inline-size: calc(var(--p) * 1%); border-radius: inherit; background: var(--c, oklch(0.64 var(--accent-c) var(--accent-h))); box-shadow: 0 0 10px color-mix(in oklch, var(--c, oklch(0.64 var(--accent-c) var(--accent-h))) 70%, transparent); animation: grow .9s var(--ease) both; animation-delay: .3s; }
  @keyframes grow { from { inline-size: 0; } }

  /* ---- Aufgaben-/Meldungsliste ---- */
  .list { list-style: none; margin: 0; padding: 0; display: grid; }
  .item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--line); }
  .item:first-child { border-top: 0; }
  .item { border-radius: var(--r-md); transition: background-color var(--t) var(--ease); }
  @media (hover: hover) { .item:hover { background: color-mix(in oklch, var(--text) 4%, transparent); } }
  .check {
    appearance: none; inline-size: 22px; aspect-ratio: 1; margin: 0; border-radius: 50%;
    border: 1.5px solid var(--text-3); display: grid; place-items: center; cursor: pointer;
    transition: background-color .2s, border-color .2s;
  }
  .check::after { content: ""; inline-size: 10px; block-size: 6px; border: 2px solid var(--on-accent); border-top: 0; border-right: 0; rotate: -45deg; translate: 0 -1px; scale: 0; transition: scale .2s var(--ease); }
  .check:checked { background: var(--gel); border-color: transparent; box-shadow: var(--gel-depth), 0 4px 10px -4px oklch(0.58 var(--accent-c) var(--accent-h)); }
  .check:checked::after { scale: 1; }
  .item .title { font-weight: 650; transition: color .2s; }
  .item:has(.check:checked) .title { color: var(--text-3); text-decoration: line-through; }
  .item .meta { grid-column: 2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
  .item .side { grid-row: 1 / span 2; grid-column: 3; }
  @container (max-width: 420px) {
    .item { grid-template-columns: auto minmax(0, 1fr); }
    .item .side { grid-row: auto; grid-column: 2; justify-self: start; }
  }

  /* ---- Wochenbalken: ehrliche Darstellung ---- */
  .stat-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .stat-line strong { font-size: 30px; font-weight: 780; letter-spacing: -0.03em; }
  .stat-line span { color: var(--text-2); }
  .trend { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); }
  .trend.up { color: var(--ok); background: var(--ok-soft); }
  .trend.flat { color: var(--text-2); background: var(--surface-2); }
  .trend.down { color: var(--danger); background: var(--danger-soft); }
  .bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(6px, 2cqi, 14px); align-items: end; block-size: 240px; flex: 1; min-block-size: 200px; }
  .col { display: grid; grid-template-rows: auto 1fr auto; block-size: 100%; gap: 6px; text-align: center; }
  .col .val { font-size: 13px; font-weight: 700; color: var(--text-2); }
  .track { position: relative; border-radius: 12px; background: var(--surface-2); box-shadow: var(--inset-well); overflow: hidden; }
  .track i {
    position: absolute; inset: auto 0 0 0; block-size: calc(var(--v) / var(--max) * 100%); border-radius: 12px;
    background: linear-gradient(to top, oklch(0.52 var(--accent-c) var(--accent-h)), oklch(0.72 var(--accent-c) var(--accent-h)));
    box-shadow: inset 0 1px 1px oklch(1 0 0 / .55), inset 0 -8px 16px -10px oklch(0 0 0 / .3), 0 0 18px -4px oklch(0.62 var(--accent-c) var(--accent-h) / .7);
    transform-origin: bottom; animation: rise .9s var(--ease) both; animation-delay: calc(var(--i) * 60ms);
  }
  @keyframes rise { from { transform: scaleY(0); } }
  .col.today .track i { background: repeating-linear-gradient(-45deg, oklch(0.70 var(--accent-c) var(--accent-h)) 0 8px, oklch(0.64 var(--accent-c) var(--accent-h)) 8px 16px); }
  .col.future .track { background: none; box-shadow: none; border: 1.5px dashed color-mix(in oklch, var(--text) 18%, transparent); }
  .col.future .val { color: var(--text-3); font-weight: 600; }
  .col .day { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
  .col.today .day { color: var(--accent-text); }
  .chart-note { font-size: 12.5px; color: var(--text-2); display: flex; gap: 16px; flex-wrap: wrap; }
  .chart-note span { display: inline-flex; align-items: center; gap: 6px; }
  .sw { inline-size: 12px; block-size: 12px; border-radius: 3px; background: var(--accent); }
  .sw.striped { background: repeating-linear-gradient(-45deg, oklch(0.70 var(--accent-c) var(--accent-h)) 0 3px, oklch(0.60 var(--accent-c) var(--accent-h)) 3px 6px); }
  .sw.dashed { background: none; border: 1.5px dashed var(--text-3); }

  /* ---- Anteile (Name, Balken, Prozent) ---- */
  .shares { display: grid; gap: 14px; }
  .share { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr auto; gap: 14px; align-items: center; }
  .share b { font-weight: 650; }
  .share small { display: block; color: var(--text-2); font-size: 12.5px; font-weight: 500; }
  .share .pct { font-weight: 700; min-inline-size: 3.5ch; text-align: end; }

  /* ---- Team / Aktivität ---- */
  .feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .feed li { display: flex; gap: 12px; align-items: center; }
  .feed .avatar { inline-size: 34px; font-size: 12px; position: relative; }
  .feed .avatar.robot { background: linear-gradient(135deg, oklch(0.6 0.1 200), oklch(0.5 0.1 260)); }
  .status { position: absolute; inset: auto -1px -1px auto; inline-size: 11px; aspect-ratio: 1; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--surface-solid); }
  .status.idle { background: var(--text-3); }
  .feed b { font-weight: 650; }
  .feed p { font-size: 13.5px; color: var(--text-2); }
  .feed time { margin-inline-start: auto; font-size: 13px; color: var(--text-3); white-space: nowrap; }

  /* ---- Dialog (natives <dialog> mit Ein-/Ausblende-Übergang) ---- */
  dialog {
    inline-size: min(480px, calc(100vw - 32px)); padding: 24px; border-radius: var(--r-xl);
    border: 0; background: linear-gradient(172deg, var(--sheen), transparent 40%), var(--surface-solid); color: var(--text); box-shadow: var(--depth), var(--shadow);
    opacity: 0; scale: .96;
    transition: opacity .2s var(--ease), scale .2s var(--ease), display .2s allow-discrete, overlay .2s allow-discrete;
  }
  dialog[open] { opacity: 1; scale: 1; transition-timing-function: var(--spring); transition-duration: var(--t-slow); }
  @starting-style { dialog[open] { opacity: 0; scale: .96; } }
  dialog::backdrop { background: oklch(0.15 0.02 260 / 0); backdrop-filter: blur(0); transition: all .2s allow-discrete; }
  dialog[open]::backdrop { background: oklch(0.15 0.02 260 / .45); backdrop-filter: blur(4px); }
  @starting-style { dialog[open]::backdrop { background: oklch(0.15 0.02 260 / 0); } }
  dialog form { display: grid; gap: 14px; }
  dialog h2 { font-size: 20px; }
  dialog input[type="text"], dialog input[type="url"] {
    height: 42px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2);
  }
  dialog .row { display: flex; gap: 10px; justify-content: end; }

  /* ---- Farbwähler (nur Muster/Einstellungen) ---- */
  .swatches { display: flex; gap: 8px; }
  .swatch { inline-size: 26px; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; background: oklch(0.56 0.17 var(--h)); box-shadow: inset 0 0 0 2px var(--surface-solid); padding: 0; }
  .swatch[aria-pressed="true"] { border-color: oklch(0.56 0.17 var(--h)); }

  .footnote { font-size: 12.5px; color: var(--text-3); text-align: center; padding: 8px 0 4px; }

  /* ---- Mobil: Sidebar wird Tab-Leiste unten ---- */
  @media (max-width: 760px) {
    .sidebar {
      position: fixed; z-index: 10; inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px;
      height: auto; flex-direction: row; padding: 6px; border-radius: var(--r-pill);
    }
    .sidebar .brand, .sidebar .nav-label, .sidebar .pin, .sidebar .profile { display: none; }
    .nav { grid-auto-flow: column; inline-size: 100%; }
    .nav > :is(a, button) { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 0; font-size: 11px; border-radius: var(--r-pill); }
    .nav .badge, .nav > :nth-child(n+5) { display: none; }
    .search { inline-size: auto; min-inline-size: 0; flex: 1; }
    .search kbd { display: none; }
    .tools { inline-size: 100%; }
    .actions { margin-inline-start: 0; inline-size: 100%; }
    .actions .btn { flex: 1; justify-content: center; white-space: nowrap; padding: 0 12px; }
    .actions .btn { font-size: 14px; gap: 6px; padding: 0 10px; }
    .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kpi { min-inline-size: 0; padding: 10px 12px; }
    .actions { grid-column: 1 / -1; }
    .actions .btn-primary svg { display: none; }
    .share { grid-template-columns: 1fr auto; }
    .share .bar { grid-column: 1 / -1; grid-row: 2; }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; }
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
}